/* Sydney Video Agency global frame. Header, footer, page chrome. */
body{margin:0;background:#F7F6F2;color:#1B281F;font-family:Archivo,system-ui,sans-serif}
.wp-site-blocks{position:relative;padding:0}
.sva-main{margin:0;padding:0;max-width:none}
.sva-main > .wp-block-post-content > *{max-width:none}

/* Mark: the real artwork. The olive ground and the corner radius are in the file,
   so no background or border-radius here. The header uses the square mark because it
   sits over the banner video and carries its own ground; the footer uses the olive
   wordmark on transparent, which sits better on cream than a second olive block. */
.sva-mark{display:block;width:62px;height:60px;flex:0 0 auto;line-height:0;text-decoration:none}
.sva-mark img{display:block;width:100%;height:100%;object-fit:contain}
.sva-mark:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.sva-mark--f{width:78px;height:72px;margin-bottom:18px}

/* Header */
.sva-header{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:clamp(16px,2.2vw,32px) clamp(24px,5vw,72px)}
body:not(.sva-has-banner) .sva-header{position:relative;background:#F7F6F2;border-bottom:1px solid #DDDCD6}
.sva-nav{display:flex;align-items:center;gap:clamp(18px,2.5vw,36px)}
.sva-nav a,.sva-svc__btn{font-family:"Tenor Sans",Georgia,serif;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:#1B281F;background:none;border:0;padding:0;cursor:pointer}
.sva-has-banner .sva-nav a,.sva-has-banner .sva-svc__btn{color:#F7F6F2}
.sva-nav a:hover,.sva-svc__btn:hover{opacity:.72}
.sva-nav a:focus-visible,.sva-svc__btn:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.sva-svc{position:relative}
.sva-svc__btn::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.sva-svc__menu{position:absolute;top:calc(100% + 16px);right:0;min-width:286px;background:#F7F6F2;
  border:1px solid #DDDCD6;padding:6px 0;z-index:40}
.sva-svc__menu a{display:block;padding:11px 18px;color:#1B281F;font-family:Archivo,system-ui,sans-serif;
  font-size:14px;letter-spacing:0;text-transform:none;min-height:44px;box-sizing:border-box}
.sva-svc__menu a:hover{background:#ECEBE5;opacity:1}
.sva-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;
  padding:10px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.sva-burger i{display:block;width:24px;height:2px;background:#1B281F}
.sva-has-banner .sva-burger i{background:#F7F6F2}
.sva-mobile{display:none}
@media (max-width:900px){
  .sva-nav{display:none}
  .sva-burger{display:flex}
  .sva-mobile:not([hidden]){display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:#F7F6F2;border-top:1px solid #DDDCD6;border-bottom:1px solid #DDDCD6;padding:8px 0}
  .sva-mobile a{padding:14px clamp(24px,5vw,72px);color:#1B281F;text-decoration:none;
    font-family:Archivo,system-ui,sans-serif;font-size:16px;min-height:44px;box-sizing:border-box}
  .sva-mobile a:hover{background:#ECEBE5}
}

/* Footer: returns to cream so section 07 stays the last thing that asks. */
.sva-footer{background:#F7F6F2;color:#1B281F;padding:clamp(48px,6.2vw,89px) clamp(24px,5vw,72px) clamp(28px,3vw,43px)}
.sva-footer__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,58px);max-width:1440px;margin:0 auto}
@media (min-width:820px){.sva-footer__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}}
.sva-footer__cov{font-size:14px;line-height:1.55;color:#183522;margin:0;max-width:32ch}
.sva-footer__h{font-family:"Tenor Sans",Georgia,serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#2B5B3C;margin:0 0 16px}
.sva-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.sva-footer__list a{color:#1B281F;text-decoration:none;font-size:15px;display:inline-flex;align-items:center;min-height:44px}
.sva-footer__list a:hover{text-decoration:underline;text-underline-offset:3px}
.sva-footer__mail{text-decoration:underline;text-decoration-color:#A2B7AA;text-underline-offset:3px}
.sva-footer__bar{display:flex;flex-direction:column;gap:8px;max-width:1440px;margin:clamp(34px,4.4vw,63px) auto 0;
  padding-top:18px;border-top:1px solid #DDDCD6}
@media (min-width:640px){.sva-footer__bar{flex-direction:row;justify-content:space-between}}
.sva-footer__bar p{font-size:13px;color:#2B5B3C;margin:0}
.sva-footer__bar a{color:#2B5B3C;display:inline-block;padding:14px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   Page bodies. Service, contact, index and legal pages.
   Same palette, type scale and spacing rhythm as the homepage
   Canvas sections, rebuilt as static markup so these pages
   render without JavaScript.
   ============================================================ */
.svx-s{background:#F7F6F2;color:#1B281F;padding:clamp(56px,9vw,130px) clamp(24px,5vw,72px)}
.svx-s--olive{background:#1F4A2E;color:#F7F6F2}
.svx-s--tight{padding-top:clamp(40px,5.5vw,76px)}
.svx-s--pale{background:#EFEEE9}
.svx-in{max-width:1440px;margin:0 auto}
.svx-in--n{max-width:56rem;margin:0 auto}
.svx-in--c{max-width:56rem;margin:0 auto;text-align:center}

/* Hero */
.svx-hero{padding-top:clamp(104px,11vw,168px);padding-bottom:clamp(48px,6.4vw,92px)}
.svx-eyebrow{font-family:"Tenor Sans",Georgia,serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#2B5B3C;margin:0 0 clamp(16px,2vw,28px)}
.svx-s--olive .svx-eyebrow{color:rgba(247,246,242,.72)}
.svx-h1{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(36px,4.6vw,64px);
  line-height:1;text-transform:uppercase;letter-spacing:.005em;margin:0 0 clamp(18px,2.2vw,32px);
  text-wrap:balance;max-width:18ch}
.svx-lead{font-family:"Tenor Sans",Georgia,serif;font-size:clamp(17px,1.39vw,20px);line-height:1.5;
  margin:0 0 clamp(20px,2.4vw,34px);max-width:46ch}
.svx-in--c .svx-h1{max-width:20ch;margin-left:auto;margin-right:auto}
.svx-in--c .svx-lead{max-width:44ch;margin-left:auto;margin-right:auto}

/* Headings */
.svx-h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(30px,3.06vw,44px);
  line-height:1;text-transform:uppercase;margin:0;text-wrap:balance}
.svx-h3{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:clamp(19px,1.53vw,22px);
  line-height:1.28;margin:0 0 6px}
.svx-p{font-family:Archivo,system-ui,sans-serif;font-size:clamp(15px,1.11vw,16px);line-height:1.62;
  color:#183522;margin:0 0 clamp(14px,1.4vw,20px);max-width:62ch}
.svx-s--olive .svx-p{color:rgba(247,246,242,.92)}
.svx-p:last-child{margin-bottom:0}
.svx-p--lg{font-family:"Tenor Sans",Georgia,serif;font-size:clamp(17px,1.53vw,22px);line-height:1.5;
  color:#1B281F;max-width:54ch}
.svx-s--olive .svx-p--lg{color:#F7F6F2}

/* Two column split: heading left, body right */
.svx-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5.5vw,79px);
  align-items:start;max-width:1440px;margin:0 auto}
@media (min-width:900px){.svx-split{grid-template-columns:minmax(0,.72fr) minmax(0,2fr)}}

/* Bordered index rows */
.svx-rows{border-top:1px solid #DDDCD6}
.svx-s--olive .svx-rows{border-top-color:rgba(247,246,242,.28)}
.svx-row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 24px;align-items:baseline;
  padding:clamp(20px,2.2vw,32px) 0;border-bottom:1px solid #DDDCD6;color:inherit;text-decoration:none}
.svx-s--olive .svx-row{border-bottom-color:rgba(247,246,242,.28)}
@media (min-width:900px){
  .svx-row{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(20px,3vw,43px)}
}
.svx-row .svx-p{margin:0}
a.svx-row{transition:background-color 180ms cubic-bezier(.22,.61,.36,1)}
a.svx-row:hover{background:#EFEEE9}
a.svx-row:focus-visible{outline:2px solid #1B281F;outline-offset:2px}
/* The arrow column must NOT exist below 900px. This rule used to sit outside any
   media query, so arrow rows were two columns at every width: the heading took
   minmax(0,1fr) and collapsed to 0px while the description filled the auto column,
   which rendered as the title sitting on top of its own description. Below 900px
   these rows now inherit the single column from .svx-row, so they stack title,
   description, arrow. */
@media (min-width:900px){.svx-row--arw{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto}}
.svx-arw{width:23px;height:23px;position:relative;opacity:.85;align-self:center;
  transition:transform 200ms cubic-bezier(.22,.61,.36,1)}
.svx-arw::before{content:"";position:absolute;left:2px;top:11px;width:17px;height:1px;background:currentColor}
.svx-arw::after{content:"";position:absolute;right:2px;top:6px;width:11px;height:11px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
a.svx-row:hover .svx-arw{transform:translateX(5px)}

/* Call to action */
.svx-cta{display:inline-block;background:#1B281F;color:#F7F6F2;font-family:Archivo,system-ui,sans-serif;
  font-weight:600;font-size:15px;letter-spacing:.02em;padding:17px 39px;text-decoration:none;
  min-height:44px;box-sizing:border-box;border-radius:3px;
  transition:background-color 200ms cubic-bezier(.22,.61,.36,1),transform 200ms cubic-bezier(.22,.61,.36,1)}
.svx-cta:hover,.svx-cta:focus-visible{background:#1F4A2E;transform:translateY(-2px)}
.svx-cta:focus-visible{outline:2px solid #1B281F;outline-offset:4px}
.svx-s--olive .svx-cta{background:#F7F6F2;color:#1B281F}
.svx-s--olive .svx-cta:hover,.svx-s--olive .svx-cta:focus-visible{background:#FFFFFF}
.svx-s--olive .svx-cta:focus-visible{outline-color:#F7F6F2}

/* Email and coverage tail, matches homepage section 07 */
.svx-or{font-family:"Tenor Sans",Georgia,serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;margin:clamp(24px,2.6vw,37px) 0 clamp(6px,1vw,12px)}
.svx-mail{font-family:Archivo,system-ui,sans-serif;font-size:clamp(16px,1.18vw,17px);color:inherit;
  text-decoration:underline;text-underline-offset:4px;display:inline-block;padding:13px 0;
  min-height:44px;box-sizing:border-box}
.svx-s--olive .svx-mail{color:#F7F6F2;text-decoration-color:rgba(247,246,242,.45)}
.svx-s--olive .svx-mail:hover,.svx-s--olive .svx-mail:focus-visible{text-decoration-color:#F7F6F2}
.svx-cov{font-family:Archivo,system-ui,sans-serif;font-size:14px;line-height:1.5;opacity:.66;
  margin:clamp(34px,4.4vw,63px) 0 0}

/* Quote */
.svx-quote{max-width:52ch;margin:0}
.svx-quote + .svx-quote{margin-top:clamp(34px,5vw,72px);padding-top:clamp(34px,5vw,72px);border-top:1px solid #DDDCD6}
.svx-qt{font-family:"Tenor Sans",Georgia,serif;font-size:clamp(18px,1.81vw,26px);line-height:1.5;
  margin:0 0 clamp(16px,2.2vw,32px)}
.svx-qr{width:64px;height:1px;background:#1B281F;opacity:.3;margin:0 0 clamp(12px,1.5vw,22px)}
.svx-s--olive .svx-qr{background:#F7F6F2}

/* Film facade holder. Keeps the 16:9 or 9:16 box until posters land. */
.svx-film{position:relative;display:block;width:100%;background:#E0DFD9;border:1px solid #DDDCD6;overflow:hidden}
.svx-film::before{content:"";display:block;padding-top:56.25%}
.svx-film--v::before{padding-top:177.78%}
.svx-film__i{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:24px}
.svx-film__play{width:60px;height:60px;border-radius:50%;border:1px solid #708F7B;position:relative;opacity:.7}
.svx-film__play::after{content:"";position:absolute;left:24px;top:19px;border-style:solid;
  border-width:11px 0 11px 17px;border-color:transparent transparent transparent #1F4A2E}
.svx-film__c{font-family:"Tenor Sans",Georgia,serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#2B5B3C;margin:0}

/* Work index grid */
.svx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4.4vw,64px)}
@media (min-width:760px){.svx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svx-grid--v{grid-template-columns:minmax(0,1fr)}
@media (min-width:620px){.svx-grid--v{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svx-card__m{margin:14px 0 0}
.svx-card__t{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:clamp(17px,1.32vw,19px);
  line-height:1.3;margin:0 0 4px}
.svx-card__s{font-family:"Tenor Sans",Georgia,serif;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:#2B5B3C;margin:0}
.svx-s--olive .svx-card__s{color:rgba(247,246,242,.7)}

/* Placeholder. Deliberately loud so nothing here reads as finished copy. */
.svx-ph{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;line-height:1.5;color:#8A4B2A;background:#F6E7DC;border:1px dashed #8A4B2A;
  padding:6px 12px;margin:0;max-width:100%;box-sizing:border-box}
.svx-ph--b{display:block;margin:0 0 clamp(14px,1.4vw,20px)}
.svx-s--olive .svx-ph{color:#F6DCC9;background:rgba(138,75,42,.42);border-color:#E0A882}

/* Definition stack for legal pages */
.svx-stack > * + *{margin-top:clamp(26px,3vw,42px)}
.svx-stack h2{font-family:Archivo,system-ui,sans-serif;font-weight:600;
  font-size:clamp(18px,1.46vw,21px);line-height:1.3;text-transform:none;margin:0 0 10px}
.svx-updated{font-family:"Tenor Sans",Georgia,serif;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:#2B5B3C;margin:clamp(34px,4vw,56px) 0 0}

/* FAQ */
.svx-faq{border-top:1px solid #DDDCD6}
.svx-faq__i{border-bottom:1px solid #DDDCD6}
.svx-faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(20px,3vw,43px);
  padding:clamp(18px,2.1vw,30px) 0;cursor:pointer;list-style:none;
  font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:clamp(17px,1.32vw,19px);line-height:1.35}
.svx-faq__q::-webkit-details-marker{display:none}
.svx-faq__q:hover{color:#1F4A2E}
.svx-faq__q:focus-visible{outline:2px solid #1B281F;outline-offset:2px}
.svx-faq__pm{position:relative;width:18px;height:18px;flex:0 0 auto;margin-top:4px}
.svx-faq__pm::before,.svx-faq__pm::after{content:"";position:absolute;background:currentColor;left:50%;top:50%;
  transition:transform 220ms cubic-bezier(.22,.61,.36,1)}
.svx-faq__pm::before{width:16px;height:1px;transform:translate(-50%,-50%)}
.svx-faq__pm::after{width:1px;height:16px;transform:translate(-50%,-50%)}
.svx-faq__i[open] .svx-faq__pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.svx-faq__a{padding:0 0 clamp(20px,2.4vw,32px);max-width:62ch}

@media (prefers-reduced-motion:reduce){
  .svx-cta,.svx-arw,a.svx-row,.svx-faq__pm::before,.svx-faq__pm::after{transition:none!important}
  .svx-cta:hover{transform:none!important}
  a.svx-row:hover .svx-arw{transform:none!important}
}

button.svx-film{cursor:pointer;padding:0;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}
button.svx-film:hover .svx-film__play{opacity:1;background:rgba(31,74,46,.10)}
button.svx-film:focus-visible{outline:2px solid #1B281F;outline-offset:3px}
.svx-film__play{transition:opacity 200ms,background-color 200ms}
@media (prefers-reduced-motion:reduce){.svx-film__play{transition:none!important}}


/* ============================================================
   Enquiry form. Fluent Forms output, restyled to the brand.
   Only presentation is touched: no markup or behaviour changes.
   ============================================================ */
.svx-form{margin:0 0 clamp(28px,3.4vw,44px);max-width:44rem}
.svx-form .frm-fluent-form{--fluentform-primary:#1F4A2E;--fluentform-secondary:#F7F6F2}
.svx-form .ff-el-group{margin-bottom:clamp(16px,1.8vw,24px)}
.svx-form .ff-el-input--label label{font-family:Archivo,system-ui,sans-serif;font-weight:600;
  font-size:15px;line-height:1.4;color:#1B281F;margin:0 0 7px;display:block}
.svx-form .ff-el-is-required.asterisk-right label:after{color:#8A4B2A;margin-left:3px}
.svx-form input[type=text],.svx-form input[type=email],.svx-form input[type=tel],.svx-form textarea{
  width:100%;box-sizing:border-box;background:#F7F6F2;color:#1B281F;
  border:1px solid #CBCAC7;border-radius:3px;padding:13px 14px;min-height:48px;
  font-family:Archivo,system-ui,sans-serif;font-size:16px;line-height:1.5;
  transition:border-color 160ms,box-shadow 160ms;box-shadow:none}
.svx-form textarea{min-height:132px;resize:vertical}
.svx-form input[type=text]:hover,.svx-form input[type=email]:hover,
.svx-form input[type=tel]:hover,.svx-form textarea:hover{border-color:#708F7B}
.svx-form input[type=text]:focus,.svx-form input[type=email]:focus,
.svx-form input[type=tel]:focus,.svx-form textarea:focus{
  outline:none;border-color:#1F4A2E;box-shadow:0 0 0 3px rgba(31,74,46,.18)}
.svx-form .ff-el-form-check-label{font-family:Archivo,system-ui,sans-serif;font-size:15px}
.svx-form .ff-btn-submit,.svx-form button[type=submit]{
  display:inline-block;background:#1B281F;color:#F7F6F2;
  font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;
  padding:17px 39px;border:0;border-radius:3px;min-height:44px;cursor:pointer;
  transition:background-color 200ms cubic-bezier(.22,.61,.36,1),transform 200ms cubic-bezier(.22,.61,.36,1)}
.svx-form .ff-btn-submit:hover,.svx-form button[type=submit]:hover,
.svx-form .ff-btn-submit:focus-visible,.svx-form button[type=submit]:focus-visible{
  background:#1F4A2E;transform:translateY(-2px)}
.svx-form .ff-btn-submit:focus-visible,.svx-form button[type=submit]:focus-visible{
  outline:2px solid #1B281F;outline-offset:4px}
.svx-form .error,.svx-form .text-danger,.svx-form .ff-el-is-error .error{
  color:#8A4B2A;font-family:Archivo,system-ui,sans-serif;font-size:14px;margin-top:6px}
.svx-form .ff-el-is-error input,.svx-form .ff-el-is-error textarea{border-color:#8A4B2A}
.svx-form .ff-message-success{background:#EFEEE9;border:1px solid #CBCAC7;color:#1B281F;
  font-family:Archivo,system-ui,sans-serif;font-size:16px;line-height:1.6;padding:22px 24px}
.svx-form__alt{margin-top:clamp(20px,2.4vw,30px)}
@media (prefers-reduced-motion:reduce){
  .svx-form input,.svx-form textarea,.svx-form .ff-btn-submit,.svx-form button[type=submit]{transition:none!important}
  .svx-form .ff-btn-submit:hover,.svx-form button[type=submit]:hover{transform:none!important}
}

/* Fluent Forms ships its own radius on the textarea specifically, which outranked
   the shared input rule and left it visibly rounder than everything beside it.
   Matched to the 3px taken from the logo mark. */
.svx-form textarea.ff-el-form-control,
.svx-form .ff-el-group textarea{border-radius:3px}


/* ============================================================
   Poster facades. The film buttons carry a self-hosted still,
   so the play control and caption sit on the image rather than
   on the flat holder. Was inline on three pages while theme
   files were unwritable; folded in here 2 October 2026.
   ============================================================ */
.svx-film__p{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.svx-film--p{background:#1B281F}
.svx-film--p .svx-film__i{background:linear-gradient(to bottom,rgba(17,24,19,.14) 0%,rgba(17,24,19,.28) 55%,rgba(17,24,19,.52) 100%)}
.svx-film--p .svx-film__play{border-color:#F7F6F2;background:rgba(17,24,19,.30);opacity:.92}
.svx-film--p .svx-film__play::after{border-left-color:#F7F6F2}
.svx-film--p .svx-film__c{color:#F7F6F2}
button.svx-film--p:hover .svx-film__play,
button.svx-film--p:focus-visible .svx-film__play{opacity:1;background:rgba(247,246,242,.22)}
button.svx-film--p:focus-visible{outline-color:#F7F6F2}

/* ============================================================
   Services dropdown. The panel is cream, but over the banner
   video the header's light link colour was winning on the links
   inside it, so they rendered cream on cream. And right:0 hung
   the 288px panel to the left of its 94px button.
   Was inline on all 15 pages; folded in here 2 October 2026.
   ============================================================ */
.sva-header .sva-nav .sva-svc__menu{left:0;right:auto}
.sva-header .sva-nav .sva-svc__menu a,
body.sva-has-banner .sva-header .sva-nav .sva-svc__menu a{color:#1B281F}
.sva-header .sva-nav .sva-svc__menu a:hover,
body.sva-has-banner .sva-header .sva-nav .sva-svc__menu a:hover{background:#ECEBE5;color:#1B281F}

/* Real testimonial attribution, replacing the placeholder chip treatment. */
.svx-quote figcaption.svx-attrib{font-family:Archivo,system-ui,sans-serif;font-size:14px;
  letter-spacing:.02em;color:#2B5B3C;margin:0}


/* ============================================================
   Hit area. The nav sat at 22px tall and the Services button at
   17px, under the 24px minimum, because both had padding:0 and
   took their height from the 14px type alone. Giving them a
   flex box with a 44px floor grows only the clickable area:
   the type, spacing and alignment are unchanged, and 44px is
   still shorter than the 60px logo so the header does not grow.
   ============================================================ */
.sva-nav > a,.sva-svc__btn{display:inline-flex;align-items:center;min-height:44px}
/* The dropdown is positioned from .sva-svc, whose height now follows the taller
   button, so the 16px gap is measured from the button's text rather than its box. */
.sva-svc{display:inline-flex;align-items:center}
.sva-header .sva-nav .sva-svc__menu{top:calc(100% + 5px)}

/* =====================================================================
 * Sticky header.
 *
 * Banner pages (home, Work): the header is fixed and transparent over the
 * banner, turning solid olive as soon as the page leaves the very top, so
 * banner copy never travels underneath a transparent logo. frame.js owns
 * the .is-solid class.
 * ===================================================================== */
body.sva-has-banner .sva-header{position:fixed;top:0;left:0;right:0;background:transparent;
  border-bottom:1px solid transparent;transition:background-color 200ms linear,border-color 200ms linear}
body.admin-bar.sva-has-banner .sva-header{top:32px}
@media (max-width:782px){body.admin-bar.sva-has-banner .sva-header{top:46px}}
body.sva-has-banner .sva-header.is-solid{background:#1F4A2E;border-bottom-color:rgba(247,246,242,.16)}
@media (prefers-reduced-motion:reduce){body.sva-has-banner .sva-header{transition:none}}

/* The dropdown stays a cream card with ink text in both header states. */
body.sva-has-banner .sva-header .sva-nav .sva-svc__menu{background:#F7F6F2}
body.sva-has-banner .sva-header.is-solid .sva-nav .sva-svc__menu a{color:#1B281F;background:transparent}
body.sva-has-banner .sva-header.is-solid .sva-nav .sva-svc__menu a:hover{background:#ECEBE5;color:#1B281F}

/* Anchor targets must clear the bar. Measured header is 106px desktop and
   86px at phone widths; these clear it with a breathing gap. */
html{scroll-padding-top:122px}
@media (max-width:860px){html{scroll-padding-top:102px}}

/* =====================================================================
 * Sticky header on pages without a banner: solid olive from the top,
 * cream links.
 *
 * The sticky rule goes on .sva-header-slot, the block template-part
 * wrapper, not on .sva-header itself. A sticky element can only travel
 * inside its own parent box, and that wrapper is exactly the height of the
 * header, so sticking the header to it does nothing at all.
 *
 * position:sticky rather than fixed, so the bar keeps its place in the
 * document flow and occupies its own height. Nothing can end up hidden
 * underneath it and no compensating top padding is needed anywhere.
 * ===================================================================== */
body:not(.sva-has-banner) .sva-header-slot{position:sticky;top:0;z-index:30}
body.admin-bar:not(.sva-has-banner) .sva-header-slot{top:32px}
@media (max-width:782px){body.admin-bar:not(.sva-has-banner) .sva-header-slot{top:46px}}
body:not(.sva-has-banner) .sva-header{background:#1F4A2E;border-bottom:1px solid rgba(247,246,242,.16)}
body:not(.sva-has-banner) .sva-nav a,
body:not(.sva-has-banner) .sva-svc__btn{color:#F7F6F2}
body:not(.sva-has-banner) .sva-burger i{background:#F7F6F2}
body:not(.sva-has-banner) .sva-header .sva-nav .sva-svc__menu{background:#F7F6F2}
body:not(.sva-has-banner) .sva-header .sva-nav .sva-svc__menu a{color:#1B281F;background:transparent}
body:not(.sva-has-banner) .sva-header .sva-nav .sva-svc__menu a:hover{background:#ECEBE5;color:#1B281F}

/* =====================================================================
 * Three vertical films shown as one set: stacked one per row on phones,
 * three across from 760px, the breakpoint the rest of the page uses.
 *
 * Subgrid makes the poster, title, subtitle and description share one set
 * of rows across all three cards, so a subtitle that runs to three lines
 * where the others run to two does not push its description out of line.
 * row-gap:0 because the parent grid gap separates the cards from each
 * other, and would otherwise reappear between the rows inside every card.
 * ===================================================================== */
.svx-grid--v3{grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.svx-grid--v3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@supports (grid-template-rows: subgrid){
  @media (min-width:760px){
    .svx-grid--v3{grid-template-rows:auto auto auto auto}
    .svx-grid--v3 > div{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
    .svx-grid--v3 .svx-card__m{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  }
}

/* A lead film that carries the section, with the rest two across underneath.
   At phone widths the parent grid is already one column, so 1 / -1 is simply
   full width and all three stack, with no media query needed. */
.svx-grid--lead > :first-child{grid-column:1 / -1}

/* =====================================================================
 * Homepage showreel zoom. The banner is pinned for one extra screen of
 * scroll while the showreel grows out of the Start your project button
 * until it fills the screen, then two end buttons appear over it.
 * frame.js sets the window's box every frame; it animates left, top,
 * width and height rather than scale, so the video is never stretched.
 *
 * Everything is keyed on .svx-motion, which the head script adds before
 * first paint only when reduced motion is off. Without it (reduced motion,
 * or JavaScript off) the banner is exactly as before and the reel sits
 * below it as a plain 16:9 block with native controls.
 * ===================================================================== */
.svz__win,.svz__ui{display:none}
.svz-static{background:#1F4A2E;padding:clamp(40px,6vw,96px) clamp(24px,5vw,72px)}
.svz-static__in{max-width:1296px;margin:0 auto}
.svz-static video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;background:#1B281F;border-radius:3px}

.svx-motion .svz{position:relative;height:200vh;height:200svh}
.svx-motion .svz__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.svx-motion .svz .svb{height:100%;min-height:0}
.svx-motion .svz-static{display:none}

.svx-motion .svz__win{display:block;position:absolute;z-index:4;left:0;top:0;width:0;height:0;overflow:hidden;
  opacity:0;pointer-events:none;border-radius:3px;background:#1B281F;will-change:left,top,width,height,opacity}
.svz .svz__reel{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;display:block}
.svz__label{position:absolute;inset:0;display:grid;place-items:center;color:#F7F6F2;background:rgba(27,40,31,.25);
  font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1;text-shadow:0 1px 10px rgba(0,0,0,.6)}

.svx-motion .svz__ui{display:flex;position:absolute;z-index:5;left:0;right:0;bottom:0;
  flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  padding:0 max(clamp(24px,5vw,72px),env(safe-area-inset-right,0px)) max(clamp(40px,4.9vw,70px),calc(env(safe-area-inset-bottom,0px) + 24px)) max(clamp(24px,5vw,72px),env(safe-area-inset-left,0px));
  opacity:0;visibility:hidden;pointer-events:none}
.svx-motion .svz__ui.is-on{pointer-events:auto}
.svz__sound,.svz__sound:hover,.svz__sound:focus,.svz__sound:active{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0;
  padding:13px 22px;border:1px solid rgba(247,246,242,.55);border-radius:3px;background:rgba(27,40,31,.55);color:#F7F6F2;
  font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;box-shadow:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.svz__sound:hover{background:rgba(27,40,31,.78);border-color:#F7F6F2}
.svz__sound svg{width:18px;height:18px;flex:none}
.svz__cta,.svz__cta:visited,.svz__cta:hover,.svz__cta:active{display:inline-block;background:#F7F6F2;color:#1B281F;text-decoration:none;
  font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:15px;padding:16px 34px;border-radius:3px}
.svz__sound:focus-visible,.svz__cta:focus-visible{outline:2px solid #F7F6F2;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .svx-motion .svz{height:auto}
  .svx-motion .svz__pin{position:relative;height:auto;overflow:visible}
  .svx-motion .svz .svb{height:auto;min-height:min(88vh,860px)}
  .svx-motion .svz__win,.svx-motion .svz__ui{display:none}
  .svx-motion .svz-static{display:block}
}