/*
Theme Name: Snowy Peak Films
Theme URI: https://snowypeakfilms.com
Author: Snowy Peak Films
Description: Standalone theme reproducing the approved rebuild prototype. No page builder required. Creates its own pages, menus and structure on activation.
Version: 2.57.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: snowypeak
*/

:root{
    --navy:#2C4467;
    --dark:#0F1318;
    --red:#BD2434;
    --yellow:#FAD408;
    --ltblue:#BED6ED;
    --vltblue:#E4EDF6;
    --graylt:#D3DBE3;
    --graymid:#67656F;   /* was #7A7882 — darkened to pass 4.5:1 on white and the light-blue tint */
    --white:#FFFFFF;
    --carddark:#131B27;
    --cardborder:rgba(44,68,103,.6);
    --footer:#080B0F;
    --ink:#161D28;          /* navy-biased near-black, not pure grey */
    --ink-soft:#48546A;
    --disp:'Archivo','Archivo Expanded','Arial Black',sans-serif;
    --head:'Open Sans',system-ui,sans-serif;
    --body:'Inter','Helvetica Neue',Arial,sans-serif;
    --wrap:1160px;
    color-scheme: only light;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
  img{max-width:100%}
  h1,h2,h3,h4{text-wrap:balance;margin:0}
  p{margin:0}
  a{color:inherit}
  .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
  .disp{font-family:var(--disp);font-stretch:112%;font-weight:700;letter-spacing:-.015em;line-height:1.06}
  .eyebrow{font-family:var(--head);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--red)}
  .eyebrow.on-dark{color:var(--yellow)}
  h2.sec{font-family:var(--head);font-weight:700;font-size:clamp(26px,3.2vw,34px);line-height:1.2;letter-spacing:-.01em}
  .lede{font-size:19px;line-height:1.62;max-width:62ch}
  .muted{color:var(--ink-soft)}
  .on-dark{color:var(--ltblue)}
  .rule{width:44px;height:3px;background:var(--red);border:0;margin:14px 0 0}
  /* ---------- ribbon + header ---------- */
  .ribbon{background:var(--navy);color:#fff;font-family:var(--head);font-size:13px}
  .ribbon .wrap{display:flex;gap:10px 26px;align-items:center;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
  .ribbon a{color:#fff;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:7px;min-height:30px}
  .ribbon a:hover{text-decoration:underline}
  .ribbon .promise{color:var(--ltblue);margin-left:auto}
  header.site{position:sticky;top:0;z-index:80;background:var(--dark);border-bottom:1px solid #1C2532}
  header.site .wrap{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px}
  .logo{display:flex;align-items:baseline;gap:9px;text-decoration:none;flex-shrink:0}
  .logo .mk{font-family:var(--disp);font-stretch:112%;font-size:19px;color:#fff;letter-spacing:.01em}
  .logo .sub{font-family:var(--head);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
  nav.main{display:flex;gap:22px;font-family:var(--head);font-size:14px;font-weight:600;margin-left:6px}
  nav.main a{color:var(--ltblue);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
  nav.main a:hover{color:#fff}
  nav.main a[aria-current="page"]{color:#fff;border-bottom-color:var(--yellow)}
  header .cta{margin-left:auto}
  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;
    font-family:var(--head);font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    text-decoration:none;border-radius:3px;border:2px solid transparent;cursor:pointer}
  .btn-primary{background:var(--yellow);color:var(--dark);border-color:var(--yellow)}
  .btn-primary:hover{background:#ffe23f;border-color:#ffe23f}
  .btn-ghost{background:transparent;color:var(--yellow);border-color:var(--yellow)}
  .btn-ghost:hover{background:rgba(250,212,8,.1)}
  .btn-sm{min-height:40px;padding:0 15px;font-size:13px}
  .trustline{font-family:var(--head);font-size:13px;color:var(--graymid);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .on-dark .trustline,.trustline.on-dark{color:#8D9BB0}
  /* combined CTA sentence */
  .ctaline{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
  .ctaline .say{font-family:var(--head);font-size:18px;font-weight:600}
  .telbig{font-family:var(--disp);font-stretch:112%;font-size:22px;color:var(--yellow);text-decoration:none;border-bottom:2px solid rgba(250,212,8,.4)}
  .telbig:hover{border-bottom-color:var(--yellow)}
  .telbig.on-light{color:var(--navy);border-bottom-color:rgba(44,68,103,.35)}
  /* ---------- sections ---------- */
  section{padding:76px 0}
  .s-dark{background:var(--dark);color:var(--ltblue)}
  .s-dark h2.sec,.s-dark h3{color:#fff}
  .s-tint{background:var(--vltblue)}
  .s-navy{background:var(--navy);color:#fff}
  .sechead{margin-bottom:34px}
  .sechead h2.sec{margin-top:10px}
  /* ---------- hero ---------- */
  .hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;padding:96px 0 84px}
  .hero .ridge{position:absolute;inset:auto 0 0 0;height:62%;width:100%;display:block;opacity:.5}
  .hero .veil{position:absolute;inset:0;background:linear-gradient(105deg,#0F1318 32%,rgba(15,19,24,.72) 62%,rgba(15,19,24,.45) 100%)}
  .hero .wrap{position:relative}
  .hero h1{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(38px,6vw,66px);line-height:1.04;letter-spacing:-.02em;margin:16px 0 0;max-width:15ch}
  .hero .sub{margin-top:20px;font-size:19px;line-height:1.6;color:var(--ltblue);max-width:56ch}
  .hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
  .hero .trustline{margin-top:16px}
  .slate-note{position:absolute;right:20px;bottom:16px;z-index:2;font-family:var(--head);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:#5D6B80;border:1px dashed #33404F;padding:5px 9px;border-radius:2px}
  /* proof bar */
  .proofbar{background:var(--navy);color:#fff;padding:0}
  .proofbar .wrap{display:flex;flex-wrap:wrap;gap:10px 34px;padding-top:16px;padding-bottom:16px;
    font-family:var(--head);font-size:13.5px;font-weight:600;letter-spacing:.02em}
  .proofbar span{display:flex;align-items:center;gap:9px}
  .proofbar span::before{content:"";width:5px;height:5px;background:var(--yellow);border-radius:50%;flex:none}
  /* ---------- grids / cards ---------- */
  .grid{display:grid;gap:22px}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card-d{background:var(--carddark);border:1px solid var(--cardborder);border-radius:4px;padding:26px}
  .card-d h3{font-family:var(--head);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--yellow);margin-bottom:12px}
  .card-l{background:#fff;border:1px solid var(--graylt);border-radius:4px;padding:26px}
  .card-l h3{font-family:var(--head);font-size:19px;font-weight:700;color:var(--navy);margin-bottom:9px}
  .step{font-family:var(--disp);font-stretch:112%;font-size:13px;color:var(--graymid);letter-spacing:.08em;display:block;margin-bottom:6px}
  /* ---------- stat row ---------- */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--graylt);border:1px solid var(--graylt);border-radius:4px;overflow:hidden;margin-top:30px}
  .stat{background:#fff;padding:26px 22px}
  .stat .n{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:clamp(32px,4.4vw,44px);color:var(--navy);
    line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
  .stat .lbl{font-family:var(--head);font-size:14px;line-height:1.45;color:var(--ink-soft);margin-top:11px;max-width:26ch}
  .stat .astk{font-size:.42em;vertical-align:super;line-height:0;margin-left:2px;color:var(--red);font-weight:700}
  .vflag{font-family:var(--head);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:#8A6A00;background:#FFF3BF;border:1px solid #E8CF6A;border-radius:2px;padding:2px 5px;vertical-align:middle;white-space:nowrap}
  .assump{font-family:var(--head);font-size:12.5px;color:var(--graymid);margin-top:14px}
  /* ---------- work cards ---------- */
  .work{display:block;text-decoration:none;color:inherit;background:var(--carddark);border:1px solid var(--cardborder);border-radius:4px;overflow:hidden}
  .work:hover{border-color:rgba(190,214,237,.45)}
  .frame{aspect-ratio:16/9;position:relative;background:linear-gradient(150deg,#1B2634,#0D1219 70%);display:block}
  .frame svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
  .frame .tag{position:absolute;left:12px;top:12px;font-family:var(--head);font-size:9.5px;letter-spacing:.13em;
    text-transform:uppercase;color:#7E8DA3;border:1px dashed #354354;padding:4px 7px;border-radius:2px}
  .work .body{padding:20px;display:block}
  .work .client{display:block;font-family:var(--head);font-weight:700;font-size:17px;line-height:1.3;color:#fff}
  .work .vert{display:block;font-family:var(--head);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);margin-bottom:7px}
  .work .res{display:block;color:var(--ltblue);font-size:15px;margin-top:8px;line-height:1.5}
  /* ---------- pricing ---------- */
  .tier{background:#fff;border:1px solid var(--graylt);border-top:3px solid var(--navy);border-radius:4px;padding:26px;display:flex;flex-direction:column;gap:10px}
  .tier.mid{border-top-color:var(--yellow);box-shadow:0 10px 28px rgba(22,29,40,.09)}
  .tier .nm{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
  .tier .rg{font-family:var(--disp);font-stretch:112%;font-size:28px;color:var(--navy);font-variant-numeric:tabular-nums}
  .tier .st-sub{font-family:var(--head);font-size:13px;font-weight:600;color:var(--graymid);margin-top:-4px}
  .tier p{margin:0}
  .tier .st-link{margin-top:auto;padding-top:6px;font-family:var(--head);font-weight:700;font-size:14px;color:var(--navy)}
  .camp-head{margin:52px 0 18px}
  .camp-head h3{font-family:var(--disp);font-stretch:112%;font-size:clamp(22px,2.6vw,28px);color:var(--navy);margin:0}
  .camp-head p{margin:6px 0 0;color:var(--graymid)}
  .startrow{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--graylt);border:1px solid var(--graylt);border-radius:4px;overflow:hidden;margin:22px 0 8px}
  .startrow>div{background:#fff;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
  .startrow .amt,.crewtable .amt{font-family:var(--disp);font-stretch:112%;font-size:26px;color:var(--navy);font-variant-numeric:tabular-nums}
  .crew-h{font-family:var(--disp);font-stretch:112%;font-size:clamp(22px,2.6vw,28px);color:var(--navy);margin:40px 0 4px}
  .tablewrap{overflow-x:auto;margin-top:18px}
  .crewtable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--graylt)}
  .crewtable th,.crewtable td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--graylt)}
  .crewtable thead th{font-family:var(--head);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--graymid);font-weight:700}
  .crewtable tbody th{font-family:var(--head);font-weight:700;color:var(--navy);white-space:nowrap}
  .crewtable td.amt{font-size:22px;white-space:nowrap}
  .scope-note{padding:18px 0 0}
  .scope-note p{margin:0;font-family:var(--head);font-size:15px;color:var(--ink,#1d2430);border-left:3px solid var(--yellow);padding:10px 14px;background:#fff}
  .scope-note a{color:var(--navy);font-weight:700}
  @media (max-width:760px){.startrow{grid-template-columns:1fr}.crewtable tbody th{white-space:normal}}
  /* ---------- quotes ---------- */
  .quote{background:#fff;border-left:3px solid var(--yellow);padding:22px 24px;border-radius:0 4px 4px 0}
  .quote p{font-size:16.5px;line-height:1.6}
  .quote .who{font-family:var(--head);font-size:13px;font-weight:700;color:var(--navy);margin-top:12px}
  .logorow{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
  .logorow span{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:#596880;border:1px solid var(--graylt);border-radius:3px;padding:9px 14px;background:#fff}
  .s-dark .logorow span{color:#7E8DA3;border-color:#26303E;background:#111823}
  /* ---------- closing block ---------- */
  .close{background:var(--dark);color:#fff;padding:78px 0}
  .close h2{font-family:var(--head);font-weight:700;font-size:clamp(25px,3.4vw,34px);color:#fff}
  /* ---------- footer ---------- */
  footer.site{background:var(--footer);color:#8D9BB0;padding:52px 0 30px;font-size:14.5px}
  footer.site .cols{display:grid;grid-template-columns:1.4fr repeat(5,minmax(0,1fr));gap:26px}
  footer.site h2.fh,footer.site h4{font-family:var(--head);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:12px}
  footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  footer.site a{color:#8D9BB0;text-decoration:none}
  footer.site a:hover{color:var(--ltblue)}
  footer.site .legal{border-top:1px solid #171E28;margin-top:38px;padding-top:20px;font-size:12.5px;color:#8391A5}
  .offices{display:grid;gap:14px;margin-top:6px}
  .offices div{font-size:13.5px;line-height:1.5}
  /* ---------- campaigns extras ---------- */
  .timeline{background:#fff;border:1px solid var(--graylt);border-radius:4px;padding:26px;margin-top:26px}
  .track{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:18px}
  .track i{height:34px;border-radius:2px;display:block}
  .track i.ctv{background:var(--navy)}
  .track i.both{background:linear-gradient(180deg,var(--navy) 0 50%,var(--red) 50% 100%)}
  .months{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:7px;font-family:var(--head);
    font-size:10.5px;color:var(--graymid);text-align:center;font-variant-numeric:tabular-nums}
  .key{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-family:var(--head);font-size:13px}
  .key span{display:flex;align-items:center;gap:8px}
  .key i{width:13px;height:13px;border-radius:2px;display:inline-block}
  .funnel{margin-top:24px;display:flex;flex-direction:column;gap:3px}
  .fr{display:grid;grid-template-columns:190px 1fr 132px;align-items:center;gap:16px;background:#fff;
    border:1px solid var(--graylt);padding:13px 16px;border-radius:3px}
  .fr .k{font-family:var(--head);font-size:13.5px;font-weight:600;color:var(--ink-soft)}
  .fr .barwrap{background:var(--vltblue);height:20px;border-radius:2px;overflow:hidden}
  .fr .bar{height:100%;background:var(--navy);display:block}
  .fr .bar.gold{background:var(--yellow)}
  .fr .v{font-family:var(--disp);font-stretch:112%;font-size:19px;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
  .fr.total{border-color:var(--navy);border-width:2px;background:var(--vltblue)}
  /* ---------- forms ---------- */
  .formgrid{display:grid;grid-template-columns:1.25fr .85fr;gap:38px;align-items:start}
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
  .field label{font-family:var(--head);font-size:13px;font-weight:700;color:var(--navy)}
  .field .opt{color:var(--graymid);font-weight:400;text-transform:none;letter-spacing:0}
  .field input,.field select,.field textarea{font:inherit;font-size:16px;padding:12px 13px;border:1px solid var(--graylt);
    border-radius:3px;background:#fff;color:var(--ink);width:100%;min-height:48px}
  .field textarea{min-height:112px;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:2px solid rgba(44,68,103,.2);outline-offset:0}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  details.adv{border:1px solid var(--graylt);border-radius:3px;background:#fff;margin-bottom:20px}
  details.adv>summary{cursor:pointer;padding:15px 17px;font-family:var(--head);font-weight:700;font-size:14.5px;color:var(--navy);list-style:none;display:flex;align-items:center;gap:10px;min-height:48px}
  details.adv>summary::-webkit-details-marker{display:none}
  details.adv>summary::before{content:"+";font-family:var(--disp);font-size:18px;color:var(--red)}
  details.adv[open]>summary::before{content:"–"}
  details.adv .inner{padding:0 17px 17px}
  .checks{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
  .checks label{font-family:var(--body);font-size:15px;font-weight:400;color:var(--ink);display:flex;gap:9px;align-items:center;min-height:32px}
  .checks input{width:auto;min-height:auto}
  .sidecard{background:var(--vltblue);border-radius:4px;padding:26px;position:sticky;top:96px}
  .ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
  .ticks li{display:flex;gap:11px;font-family:var(--head);font-size:14.5px;line-height:1.45}
  .ticks li::before{content:"✓";color:var(--red);font-weight:700;flex:none}
  .directline{background:#fff;border:1px solid var(--graylt);border-radius:4px;padding:22px 24px;margin-bottom:26px;
    display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center}
  .directline .lab{font-family:var(--head);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--graymid);display:block;margin-bottom:3px}
  .directline a{font-family:var(--head);font-weight:700;font-size:17px;color:var(--navy);text-decoration:none}
  .directline a:hover{text-decoration:underline}
  /* ---------- cost drivers ---------- */
  .driver{display:grid;grid-template-columns:74px 1fr;gap:26px;align-items:start;
    padding:30px 0;border-top:1px solid var(--graylt)}
  .driver:first-of-type{border-top:0}
  .driver .num{font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:46px;line-height:.9;
    color:var(--navy);font-variant-numeric:tabular-nums}
  .driver .num i{display:block;font-family:var(--head);font-style:normal;font-size:10px;font-weight:700;
    letter-spacing:.14em;color:var(--red);margin-top:8px}
  .driver h3{font-family:var(--head);font-size:21px;font-weight:700;color:var(--navy);margin-bottom:10px}
  .driver p{margin-bottom:12px;max-width:64ch}
  .driver p:last-child{margin-bottom:0}
  .driver .pull{border-left:3px solid var(--yellow);padding:12px 0 12px 18px;background:var(--vltblue);
    padding-right:18px;border-radius:0 3px 3px 0;font-weight:500}
  .bands{display:grid;gap:2px;background:var(--graylt);border:1px solid var(--graylt);border-radius:4px;overflow:hidden;margin-top:26px}
  .band{background:#fff;padding:22px 24px;display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:baseline}
  .band .amt{font-family:var(--disp);font-stretch:112%;font-size:26px;color:var(--navy);font-variant-numeric:tabular-nums}
  .floorline{font-family:var(--disp);font-stretch:112%;font-size:clamp(26px,3.4vw,36px);color:var(--navy);margin:18px 0 8px}
  .asklist{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:62ch}
  .asklist li{display:flex;gap:13px;font-size:17px;line-height:1.55}
  .asklist li::before{content:"·";color:var(--red);font-weight:700;font-size:24px;line-height:1}
  @media (max-width:940px){
    .driver{grid-template-columns:1fr;gap:10px;padding:24px 0}
    .driver .num{font-size:34px;display:flex;align-items:baseline;gap:12px}
    .driver .num i{margin-top:0}
    .band{grid-template-columns:1fr;gap:8px}
  }

/* ---------- WordPress + editor integration ---------- */
.wp-block-image img{max-width:100%;height:auto}
.alignwide{max-width:1160px;margin-inline:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--yellow);color:var(--dark);padding:12px 18px;font-family:var(--head);font-weight:700}
.skip-link:focus{left:8px;top:8px}
.admin-bar header.site{top:32px}
@media (max-width:782px){.admin-bar header.site{top:46px}}

/* ---------- mobile nav ---------- */
.navtoggle{display:none;background:transparent;border:1px solid #26303E;color:var(--ltblue);
  font-family:var(--head);font-size:13px;font-weight:700;padding:10px 14px;border-radius:3px;cursor:pointer;min-height:44px}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:22px}
nav.main li{position:relative}
nav.main .sub-menu{display:none;position:absolute;top:100%;left:0;background:var(--dark);
  border:1px solid #1F2833;border-radius:4px;padding:10px 0;min-width:250px;flex-direction:column;gap:0;z-index:90}
nav.main li:hover>.sub-menu,nav.main li:focus-within>.sub-menu{display:flex}
nav.main .sub-menu a{display:block;padding:9px 18px;white-space:nowrap;border:0}
nav.main .sub-menu a:hover{background:#151D28}
@media (max-width:1080px){
  .navtoggle{display:block;margin-left:auto;order:2}
  header.site .cta{order:3;margin-left:12px}
  nav.main{order:4;flex-basis:100%;display:none;padding-top:14px}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;gap:0}
  nav.main a{display:block;padding:13px 0;border-bottom:1px solid #1A222D;font-size:16px}
  nav.main .sub-menu{display:flex;position:static;border:0;padding:0 0 0 18px;background:transparent}
}
footer.site .cols{gap:26px}

/* ---------- theme-only additions ---------- */
.herobg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.45}
.hero .veil{z-index:1}.hero .wrap{z-index:2}
.spf-editor h2{font-family:var(--head);font-size:clamp(24px,3vw,30px);color:var(--navy);margin:34px 0 12px}
.spf-editor h3{font-family:var(--head);font-size:20px;color:var(--navy);margin:26px 0 8px}
.spf-editor p{margin-bottom:16px;max-width:70ch}
.spf-editor ul,.spf-editor ol{margin:0 0 18px 22px;max-width:70ch}
.spf-editor li{margin-bottom:8px}
.spf-editor a{color:var(--navy);font-weight:600}
.spf-editor img{border-radius:4px;margin:20px 0}
.work img{display:block}
.pagination,.nav-links{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--head);font-weight:600}
.nav-links .page-numbers{padding:10px 14px;border:1px solid var(--graylt);border-radius:3px;text-decoration:none;color:var(--navy)}
.nav-links .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- hero background video ---------- */
.hero{position:relative;overflow:hidden}
.herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;transition:opacity .8s ease}
.herovid.is-playing{opacity:1}
.hero .herobg{z-index:0}
.hero .veil{z-index:1;transition:opacity .3s}
.hero .wrap,.hero .slate-note{z-index:2}
@media (prefers-reduced-motion:reduce){.herovid{display:none}}

/* ---------- reel popup ---------- */
.spf-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.spf-modal[hidden]{display:none}
.spf-modal__backdrop{position:absolute;inset:0;background:rgba(8,11,15,.92);backdrop-filter:blur(3px)}
.spf-modal__box{position:relative;width:min(1100px,100%);aspect-ratio:16/9;background:#000;
  border:1px solid var(--cardborder);border-radius:4px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.spf-modal__frame{width:100%;height:100%}
.spf-modal__frame iframe,.spf-modal__frame video{display:block;border:0}
.spf-modal__close{position:absolute;top:-46px;right:0;z-index:2;width:40px;height:40px;
  background:transparent;border:2px solid var(--yellow);color:var(--yellow);border-radius:50%;
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.spf-modal__close:hover{background:var(--yellow);color:var(--dark)}
@media (max-width:700px){.spf-modal{padding:16px}.spf-modal__close{top:-44px}}

/* ---------- hero background via Vimeo / YouTube embed ---------- */
.herovid-embed{position:absolute;inset:0;z-index:0;overflow:hidden;
  background-size:cover;background-position:center;pointer-events:none}
.herovid-embed iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;
  opacity:0;transition:opacity 1s ease;pointer-events:none}
.herovid-embed.is-playing iframe{opacity:1}
@media (prefers-reduced-motion:reduce){.herovid-embed iframe{display:none}}

/* ---------- custom logo ---------- */
.logo--img{display:inline-flex;align-items:center}
.logo-img{display:block;height:44px;width:auto;max-width:260px;object-fit:contain}
footer.site .logo-img{height:38px;opacity:.92}
@media (max-width:600px){.logo-img{height:36px;max-width:180px}}

/* ---------- work card video affordances ---------- */
.work .frame{position:relative}
.playwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(15,19,24,.28);transition:background .2s}
.work:hover .playwrap{background:rgba(15,19,24,.12)}
.work .dur{position:absolute;right:10px;bottom:10px;font-family:var(--head);font-size:11px;
  font-weight:700;letter-spacing:.06em;color:#fff;background:rgba(8,11,15,.78);
  padding:3px 7px;border-radius:2px;font-variant-numeric:tabular-nums}

/* ---------- case study inline film ---------- */
.videoframe{position:relative;aspect-ratio:16/9;background:#0B0E12 center/cover no-repeat;
  border:1px solid var(--cardborder);border-radius:4px;overflow:hidden}
.videoframe::after{content:"";position:absolute;inset:0;background:rgba(15,19,24,.35);pointer-events:none}
.videoframe.is-playing::after{display:none}
.videoframe__play{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  background:transparent;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.videoframe__play .spf-play{width:74px;height:74px;border-width:3px;transition:transform .2s}
.videoframe__play:hover .spf-play{transform:scale(1.08)}
.videoframe iframe,.videoframe video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.spf-play{width:52px;height:52px;border:2px solid var(--yellow);border-radius:50%;
  background:transparent;display:inline-flex;align-items:center;justify-content:center;flex:none}
.spf-play::after{content:"";border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--yellow);margin-left:4px}
.videoframe__play .spf-play::after{border-width:13px 0 13px 21px;margin-left:6px}

/* ---------- campaign video gallery ---------- */
.gal{position:relative}
.gal__track{display:grid;gap:26px}
.gal--stacked .gal__track{grid-template-columns:repeat(2,1fr)}
.gal__item{margin:0}
.gal__item figcaption{display:flex;flex-direction:column;gap:3px;margin-top:12px}
.gal__label{font-family:var(--head);font-size:15px;font-weight:700;color:#fff}
.gal__note{font-family:var(--head);font-size:13px;color:var(--graymid)}
.s-tint .gal__label,.s-tint .gal__note{color:var(--ink)}

/* carousel */
.gal--carousel .gal__track{
  grid-auto-flow:column;grid-auto-columns:minmax(300px,380px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--navy) transparent}
.gal--carousel .gal__item{scroll-snap-align:start}
.gal--carousel .gal__track::-webkit-scrollbar{height:6px}
.gal--carousel .gal__track::-webkit-scrollbar-thumb{background:var(--navy);border-radius:3px}
.gal__nav{position:absolute;top:calc(50% - 40px);transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:2px solid var(--yellow);background:rgba(15,19,24,.85);
  color:var(--yellow);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gal__nav:hover{background:var(--yellow);color:var(--dark)}
.gal__nav--prev{left:-14px}
.gal__nav--next{right:-14px}
.gal__nav[disabled]{opacity:.25;cursor:default}
.s-tint .gal__nav{background:rgba(255,255,255,.95);border-color:var(--navy);color:var(--navy)}

.gal__adminnote{margin-top:22px;padding:14px 18px;border-left:3px solid var(--yellow);
  background:rgba(250,212,8,.08);font-family:var(--head);font-size:14px;color:var(--ltblue)}
.gal__adminnote a{color:var(--yellow);font-weight:700}
.work--placeholder{opacity:.72;cursor:default}
.work--placeholder .tag{border-color:var(--yellow);color:var(--yellow)}

@media (max-width:860px){
  .gal--stacked .gal__track{grid-template-columns:1fr}
  .gal--carousel .gal__track{grid-auto-columns:minmax(260px,86vw)}
  .gal__nav{display:none}
}

/* ---------- hero height + framing ---------- */
.hero{display:flex;flex-direction:column;justify-content:center}
.hero--ratio{padding-top:60px!important;padding-bottom:60px!important}
.hero--full{padding-top:120px!important}

/* Which part of the frame survives when the hero is shorter than the video. */
.hero--focus-top    .herovid,.hero--focus-top    .herobg{object-position:center top;   background-position:center top}
.hero--focus-upper  .herovid,.hero--focus-upper  .herobg{object-position:center 25%;   background-position:center 25%}
.hero--focus-center .herovid,.hero--focus-center .herobg{object-position:center center;background-position:center center}
.hero--focus-lower  .herovid,.hero--focus-lower  .herobg{object-position:center 75%;   background-position:center 75%}
.hero--focus-bottom .herovid,.hero--focus-bottom .herobg{object-position:center bottom;background-position:center bottom}

/* 16:9 mode — show the whole frame, letterbox rather than crop. */
.hero--ratio .herovid{object-fit:contain;background:var(--dark)}
.hero--ratio .herovid-embed iframe{width:100%;height:100%;min-width:0;min-height:0;
  top:0;left:0;transform:none}
.hero--ratio .herobg{background-size:contain;background-repeat:no-repeat}

@media (max-width:768px){
  .hero--tall,.hero--full{min-height:520px!important}
  .hero--ratio{aspect-ratio:auto!important;min-height:420px!important}
  .hero--ratio .herovid{object-fit:cover}
}

/* ---------- case study: film caption + section photos ---------- */
.filmcap{max-width:70ch;margin:18px 0 0;font-size:16px;color:var(--ink-soft);line-height:1.6}
.csect{margin-bottom:44px;max-width:70ch}
.csect:last-child{margin-bottom:0}
.csect h2.sec{margin-bottom:0}
.csect--img{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start;max-width:none}
.csect--img .csect__t{max-width:60ch}
.csect__f{margin:0}
.csect__f img{width:100%;height:auto;border-radius:4px;display:block;border:1px solid var(--graylt)}
.s-dark .csect__f img{border-color:var(--cardborder)}

/* Case study columns — Challenge / Solution / Results side by side */
.ccols{display:grid;gap:22px;align-items:stretch}
.ccols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ccol{display:flex;flex-direction:column;border-radius:10px;padding:34px 30px 30px;overflow:hidden}
.ccol--light{background:var(--ltblue);color:var(--dark)}
.ccol--navy{background:var(--navy);color:#fff}
.ccol h2.sec{font-size:clamp(21px,1.9vw,26px);margin:0}
.ccol--navy h2.sec{color:#fff}
.ccol--navy .rule{background:var(--yellow)}
.ccol .num{display:block;margin-bottom:9px;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--red)}
.ccol--navy .num{color:var(--yellow)}
.ccol .rule{margin:13px 0 18px}
.ccol__t p{font-size:16px;line-height:1.62;margin:0 0 14px}
.ccol__t p:last-child{margin-bottom:0}
.ccol--navy .ccol__t p{color:rgba(255,255,255,.9)}
.ccol__f{margin:26px -30px -30px;margin-top:auto;padding-top:0}
.ccol__f img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.whereran{margin-top:22px;background:var(--vltblue);border-radius:10px;padding:32px 34px}
.whereran .num{display:block;margin-bottom:9px;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--red)}
.whereran h2.sec{font-size:clamp(21px,1.9vw,26px);margin:0}
.whereran .rule{margin:13px 0 16px}
.whereran p{font-size:16px;line-height:1.62;margin:0 0 12px;max-width:80ch}
.whereran p:last-child{margin-bottom:0}
/* Case study horizontal blocks — full-width alternating colour bands */
.cband{padding:74px 0}
.cband--vlt{background:var(--vltblue)}
.cband--lt{background:var(--ltblue)}
.cband--navy{background:var(--navy);color:#fff}
.cband__in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.cband--flip .cband__in{direction:rtl}
.cband--flip .cband__t,.cband--flip .cband__f{direction:ltr}
.cband .num{display:block;margin-bottom:10px;font-family:var(--head);font-size:13px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--red)}
.cband--navy .num{color:var(--yellow)}
.cband--navy h2.sec{color:#fff}
.cband .rule{margin:15px 0 20px}
.cband--navy .rule{background:var(--yellow)}
.cband__t p{font-size:17px;line-height:1.66;margin:0 0 15px;max-width:58ch}
.cband__t p:last-child{margin-bottom:0}
.cband--navy .cband__t p{color:rgba(255,255,255,.9)}
.cband__f{margin:0}
.cband__f img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px}
.cband__wide{max-width:78ch}
/* No photo for this section? The text takes the whole width. */
.cband--nofig .cband__in{grid-template-columns:1fr;gap:0}
.cband--nofig .cband__t p{max-width:78ch}
.cband--nofig .specs{max-width:900px}
.cband--navy .specs__r{border-color:rgba(255,255,255,.2)}
.cband--navy .specs dt{color:var(--ltblue)}
.cband--lt .specs dt,.cband--vlt .specs dt{color:var(--navy)}
.s-cols{padding-bottom:0}

@media(max-width:1000px){
  .cband{padding:58px 0}
  .cband__in{gap:38px}
}
@media(max-width:900px){
  .ccols--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ccols--3 .ccol:last-child:nth-child(odd){grid-column:1/-1}
}

/* Below 760px both layouts become the same thing: stacked full-bleed bands,
   photo under the text, colour running edge to edge. */
@media(max-width:760px){
  .cband{padding:36px 0 0}
  .cband--nofig{padding-bottom:36px}
  .cband__in{grid-template-columns:1fr;gap:0;direction:ltr}
  .cband--flip .cband__in{direction:ltr}
  .cband__t p{font-size:16px;max-width:none}
  .cband__f{margin:24px -24px 0}
  .cband__f img{border-radius:0}

  .s-cols{padding-top:0;padding-bottom:0}
  .ccols--2,.ccols--3{grid-template-columns:1fr;gap:0;margin:0 -24px}
  .ccol{border-radius:0;padding:36px 24px 0;overflow:visible}
  .ccol--nofig{padding-bottom:36px}
  .ccol__f{margin:24px -24px 0;margin-top:auto;border-radius:0}
  .ccol__f img{border-radius:0}
  .whereran{border-radius:0;margin:0 -24px;padding:36px 24px}
}

/* How We Made It — the production spec list */
.specs{margin:18px 0 0;padding:0}
.specs__r{display:grid;grid-template-columns:170px 1fr;gap:10px 24px;padding:13px 0;border-top:1px solid var(--graylt)}
.specs__r:last-child{border-bottom:1px solid var(--graylt)}
.specs dt{margin:0;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--graymid);padding-top:2px}
.specs dd{margin:0;font-size:16px;line-height:1.55}
.s-dark .specs__r,.s-navy .specs__r{border-color:rgba(255,255,255,.14)}
.s-dark .specs dt,.s-navy .specs dt{color:var(--ltblue)}
.specs + p{margin-top:22px}
@media(max-width:560px){.specs__r{grid-template-columns:1fr;gap:5px;padding:12px 0}}
.ccol .specs{margin-top:0}
.ccol .specs__r{grid-template-columns:1fr;gap:4px;padding:11px 0}
.ccol--light .specs__r{border-color:rgba(15,19,24,.18)}
.ccol--navy .specs__r{border-color:rgba(255,255,255,.2)}
.ccol--light .specs dt{color:var(--navy)}
.ccol--navy .specs dt{color:var(--ltblue)}
.ccol .specs dd{font-size:15px}
.ccol .specs__r:last-child{border-bottom:0}

/* ---------- content blocks ---------- */
.blk-text{max-width:70ch}
.blk-text p{margin-bottom:16px}
.blk-text p:last-child{margin-bottom:0}
.s-dark .blk-text,.s-navy .blk-text{color:var(--ltblue)}
.blk-ti{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.blk-ti--left .blk-text{order:2}
.blk-ti--left .blk-fig{order:1}
.blk-fig{margin:0}
.blk-fig img{width:100%;height:auto;display:block;border-radius:4px}
.blk-fig figcaption{margin-top:10px;font-family:var(--head);font-size:13px;color:var(--graymid)}
.blk-fig--wide img{border-radius:4px}
.blk-cap{margin-top:12px;font-family:var(--head);font-size:13px;color:var(--graymid)}
.blk-quote{max-width:64ch;font-size:19px}
.s-dark .blk-quote{background:var(--carddark);border-left-color:var(--yellow)}
.s-dark .blk-quote p{color:#fff}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 24px}
.team__m{margin:0}
.team__img{width:100%;aspect-ratio:7/8;object-fit:cover;border-radius:4px;display:block;background:#0F1620}
.team__img--none{background:linear-gradient(150deg,#1B2634,#0D1219 70%)}
.team__n{font-family:var(--head);font-size:19px;font-weight:700;color:var(--navy);margin:16px 0 2px}
.s-dark .team__n{color:#fff}
.team__r{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);margin:0 0 10px}
.team__b{font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:44ch}
.s-dark .team__b{color:var(--ltblue)}

@media (max-width:900px){
  .csect--img,.blk-ti{grid-template-columns:1fr;gap:24px}
  .blk-ti--left .blk-text{order:1}
  .blk-ti--left .blk-fig{order:2}
}

/* ---------------- Resources: gated playbook + insights ---------------- */
.pb{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.pb__t{max-width:60ch}
.pb__l{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.pb__l li{position:relative;padding-left:26px;color:rgba(255,255,255,.9);line-height:1.55}
.pb__l li:before{content:"";position:absolute;left:0;top:9px;width:11px;height:2px;background:var(--yellow)}
.pb__f{margin-top:26px;max-width:520px}
.pb__f label{display:block;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ltblue);margin-bottom:14px}
.pb__f .req{color:var(--yellow);margin-left:7px;letter-spacing:.04em}
.pb__f input[type=text],.pb__f input[type=email]{display:block;width:100%;margin-top:7px;padding:13px 14px;
  font-family:var(--body);font-size:16px;letter-spacing:normal;text-transform:none;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);border-radius:4px}
.pb__f input:focus{outline:2px solid var(--yellow);outline-offset:1px;background:rgba(255,255,255,.14)}
.pb__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pb__f button{margin-top:6px}
.pb__fine{margin-top:14px;font-size:13px;line-height:1.55;color:var(--ltblue);max-width:46ch}
.pb__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pb__ok{margin-top:24px;font-family:var(--head);font-weight:700;color:var(--yellow)}
.pb__err{margin-top:20px;padding:11px 14px;border-radius:4px;background:rgba(189,36,52,.28);
  border:1px solid rgba(255,255,255,.3);color:#fff;font-size:15px}
.pb__admin{margin-top:24px;padding:14px 16px;border:1px dashed rgba(255,255,255,.45);border-radius:4px;
  color:var(--ltblue);font-size:14px;line-height:1.55}
.pb__c{margin:0}
.pb__c img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 26px 60px rgba(0,0,0,.42)}
@media(max-width:900px){
  .pb{grid-template-columns:1fr;gap:34px}
  .pb__c{order:-1;max-width:340px}
}
@media(max-width:560px){.pb__row{grid-template-columns:1fr;gap:0}}

.ins{display:flex;flex-direction:column}
.ins__f{display:block;margin:-26px -26px 18px;height:0;padding-bottom:52%;position:relative;overflow:hidden;
  border-radius:4px 4px 0 0}
.ins__f img{position:absolute;inset:0}
.ins__d{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graymid);display:block;margin-bottom:8px}
.ins__r{margin-top:auto;padding-top:14px;font-family:var(--head);font-size:13px;font-weight:700;color:var(--red)}
.ins__meta{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graymid);margin-bottom:22px}
.ins__hero{margin:0 0 30px}

/* Card grids collapse. Without this, three 1fr columns floor at their content
   width and push the page sideways on a phone. */
@media(max-width:1000px){.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.grid.g3,.grid.g2,.grid.g4{grid-template-columns:minmax(0,1fr)}}

/* Industry filter + work pagination */
.indfilter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;margin-bottom:30px}
.indfilter__l{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--graymid);margin-right:6px}
.indfilter__a{font-family:var(--head);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-decoration:none;color:var(--ltblue);padding:8px 15px;border-radius:100px;
  border:1px solid var(--cardborder);background:var(--carddark);transition:border-color .15s,color .15s}
.indfilter__a:hover{border-color:rgba(190,214,237,.5);color:#fff}
.indfilter__a.is-on{background:var(--yellow);border-color:var(--yellow);color:var(--dark)}
.s-tint .indfilter__a,.s-cols .indfilter__a{background:#fff;border-color:var(--graylt);color:var(--navy)}
.s-tint .indfilter__a.is-on,.s-cols .indfilter__a.is-on{background:var(--navy);border-color:var(--navy);color:#fff}

.wpag{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.wpag .page-numbers{font-family:var(--head);font-size:13px;font-weight:700;text-decoration:none;
  color:var(--ltblue);padding:9px 14px;border:1px solid var(--cardborder);border-radius:4px;
  background:var(--carddark)}
.wpag .page-numbers:hover{border-color:rgba(190,214,237,.5);color:#fff}
.wpag .page-numbers.current{background:var(--yellow);border-color:var(--yellow);color:var(--dark)}
@media(max-width:560px){.indfilter{gap:8px 6px}.indfilter__l{width:100%;margin-bottom:2px}}

/* Quote form messages + honeypot */
.q-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q-err{margin:0 0 20px;padding:12px 15px;border-radius:4px;background:#FCE8EA;
  border:1px solid rgba(189,36,52,.45);color:#7E1521;font-size:15px;line-height:1.5}

/* Consent checkbox */
.consentbox{margin-top:6px}
.consentbox__l{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;
  font-family:var(--body);font-weight:400;font-size:13.5px;line-height:1.55;color:var(--graymid);
  text-transform:none;letter-spacing:normal;cursor:pointer}
.consentbox__l input{margin-top:3px}
.pb__f .consentbox__l{color:var(--ltblue)}

/* Team and Crew share one card and one cascade. Order matters here: these must
   run largest-to-smallest and must come after every other .team rule, or a
   wider breakpoint later in the file wins at phone widths. */
.team{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 24px}
@media(max-width:1080px){.team{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}}
@media(max-width:820px){ .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}
@media(max-width:560px){ .team{gap:22px 14px}
  .team__n{font-size:17px;margin-top:12px}
  .team__r{font-size:10px}
}
.peoplegap{margin-top:66px}
@media(max-width:700px){.peoplegap{margin-top:46px}}

/* ============================================================
   Campaign Spend Blueprint  (v2.13.0)

   Light-first. The page alternates white / tint / dark like the
   rest of the site, so these components default to the light
   treatment and .bp--dark / .bp--navy override where needed.
   Everything is scoped under .bp so none of it leaks out.
   ============================================================ */
.bp .bp__h{font-family:var(--head);font-weight:800;font-size:clamp(21px,2.6vw,28px);color:var(--ink);margin:10px 0 14px}
.bp p{color:var(--ink-soft);max-width:68ch}
.bp strong{color:var(--ink)}

.bp__card{background:#fff;border:1px solid var(--graylt);border-radius:12px;padding:24px}
.s-tint .bp__card{border-color:#C8D8EA}
.bp__card h3,.bp__card h4{font-family:var(--head);font-weight:700;font-size:18px;color:var(--ink);margin:0 0 4px}
.bp__note{font-size:12.5px!important;color:var(--ink-soft)!important;margin:10px 0 0!important;max-width:none!important}

.bp__nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.bp__num{background:var(--vltblue);border:1px solid #C8D8EA;border-radius:9px;padding:14px}
.bp__num .k{display:block;font-size:10.5px;color:var(--ink-soft);font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.bp__num .v{display:block;font-family:var(--head);font-weight:800;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.bp__num .v small{font-size:13px;color:var(--graymid);font-weight:400}

.bp__split{display:flex;height:26px;margin-top:18px;border-radius:5px;overflow:hidden;background:var(--vltblue)}
.bp__split span:first-child{background:var(--navy)}
.bp__split span:last-child{background:var(--red);min-width:6px}

.bp__funnel{display:flex;flex-direction:column;gap:10px}
.bp__frow{display:grid;grid-template-columns:150px minmax(0,1fr) 74px;align-items:center;gap:12px}
.bp__frow .l{font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.bp__frow .t{background:var(--vltblue);border:1px solid #C8D8EA;border-radius:6px;height:30px;overflow:hidden}
.bp__frow .t i{display:block;height:100%;border-radius:5px}
.bp__frow .t i.a{background:var(--graylt)}
.bp__frow .t i.b{background:var(--navy)}
.bp__frow .t i.c{background:var(--red)}
.bp__frow .v{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);text-align:right;font-size:14px}

.bp__legend{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.bp__legend span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);font-family:var(--head);font-weight:600}
.bp__legend i{width:14px;height:14px;border-radius:4px;flex:none}
.bp__legend i.dash{width:20px;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--navy) 0 6px,transparent 6px 10px)}
.bp__legend i.solid{width:20px;height:4px;border-radius:2px;background:var(--red)}

.bp__bars{display:flex;align-items:flex-end;gap:16px;padding-top:12px}
.bp__bars .c{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.bp__bars .grp{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%;height:150px}
.bp__bars .grp i{flex:1 1 0;min-width:0;max-width:18px;min-height:3px;border-radius:3px 3px 0 0;cursor:pointer}
.bp__bars .n{font-size:11.5px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.bp__bars .m{font-size:10.5px;color:var(--graymid);font-family:var(--head);font-weight:700}

.bp__chartcard{position:relative}
.bp__chart{width:100%;height:auto;overflow:visible}
.bp__chart .gl{stroke:var(--graylt);stroke-width:1}
.bp__chart .al{font-size:11.5px;fill:var(--graymid)}
.bp__chart .lm{fill:none;stroke:var(--navy);stroke-width:2;stroke-dasharray:5 5}
.bp__chart .lf{fill:none;stroke:var(--red);stroke-width:3}
.bp__chart .pt{cursor:pointer}
.bp__chart .el{font-family:var(--head);font-weight:700;font-size:13px}
.bp__chart .el.m{fill:var(--navy)}
.bp__chart .el.f{fill:var(--red)}

.bp__tip{position:absolute;pointer-events:none;background:var(--ink);border-radius:8px;padding:9px 12px;font-size:12.5px;color:#fff;box-shadow:0 8px 24px rgba(22,29,40,.28);transform:translate(-50%,-115%);white-space:nowrap;opacity:0;transition:opacity .1s ease;z-index:5}
.bp__tip.on{opacity:1}
.bp__tip b{display:block;font-family:var(--head);font-weight:700;color:#fff;margin-bottom:3px}

.bp__tblwrap{overflow-x:auto;padding:8px 20px 4px}
.bp__tbl{width:100%;border-collapse:collapse;font-size:14.5px;color:var(--ink-soft)}
.bp__tbl th,.bp__tbl td{text-align:right;padding:10px 12px;border-bottom:1px solid var(--graylt);font-variant-numeric:tabular-nums;white-space:nowrap}
.bp__tbl th:first-child,.bp__tbl td:first-child{text-align:left;font-variant-numeric:normal}
.bp__tbl thead th{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--graymid);border-bottom:1px solid var(--navy)}
.bp__tbl tbody tr:last-child td{border-bottom:none}
.bp__tbl tfoot td{border-top:1px solid var(--navy);font-weight:700;color:var(--ink);padding-top:12px}
.bp__tbl .hi{color:var(--ink);font-weight:600}
.bp__tbl .red{color:var(--red);font-weight:700}

.bp__assump{columns:2;column-gap:32px;margin-top:16px}
.bp__assump div{break-inside:avoid;margin-bottom:14px;font-size:13.5px}
.bp__assump .k{display:block;color:var(--ink);font-weight:700;font-family:var(--head);font-size:13px}
.bp__assump .v{display:block;color:var(--ink-soft)}
.bp__disclaim{font-size:12.5px!important;color:var(--ink-soft)!important;border-left:3px solid var(--red);padding-left:14px;margin-top:18px!important}

/* ---------- The dark section (cost curve) ---------- */
.bp--dark .bp__h{color:#fff}
.bp--dark p{color:var(--ltblue)}
.bp--dark strong{color:#fff}
.bp--dark .bp__card{background:var(--carddark);border-color:var(--cardborder)}
.bp--dark .bp__note{color:rgba(190,214,237,.55)!important}
.bp--dark .bp__legend span{color:var(--vltblue)}
.bp--dark .bp__legend i.dash{background:repeating-linear-gradient(90deg,var(--ltblue) 0 6px,transparent 6px 10px)}
.bp--dark .bp__chart .gl{stroke:var(--cardborder)}
.bp--dark .bp__chart .lm{stroke:var(--ltblue)}
.bp--dark .bp__chart .el.m{fill:var(--ltblue)}
.bp--dark .bp__tbl{color:var(--ltblue)}
.bp--dark .bp__tbl th,.bp--dark .bp__tbl td{border-bottom-color:var(--cardborder)}
.bp--dark .bp__tbl thead th{border-bottom-color:rgba(44,68,103,.9)}
.bp--dark .bp__tbl tfoot td{border-top-color:rgba(44,68,103,.9);color:#fff}
.bp--dark .bp__tbl .hi{color:#fff}
.bp--dark .bp__tip{background:var(--footer);border:1px solid rgba(44,68,103,.9);color:var(--vltblue)}

/* ---------- The calculator band ---------- */
.bp--navy{padding:52px 0}
.bp__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
/* Vertical tabs above the calculator — plain links, one per model profile. */
.bp__vtabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:26px;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.bp__vtab{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ltblue);text-decoration:none;padding:9px 18px;border-radius:100px;transition:background .2s ease,color .2s ease}
.bp__vtab:hover{color:#fff;background:rgba(255,255,255,.08)}
.bp__vtab.is-on{background:#fff;color:var(--navy)}
.bp__vtab:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.bp__brand{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ltblue)}
.bp__brand i{width:9px;height:9px;border-radius:50%;background:var(--red)}
.bp__tag{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--vltblue);padding:6px 12px;border-radius:100px}

.bp__calc{background:var(--carddark);border-radius:14px;padding:30px 32px}
.bp__calc-lab{display:block;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.bp__calc-row{display:flex;align-items:flex-start;gap:28px;flex-wrap:wrap}
.bp__calc-f{flex:1;min-width:230px}
.bp__calc-f label{display:block;font-family:var(--head);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--graymid);margin-bottom:8px}
.bp__calc-in{display:flex;align-items:center;background:#0C121C;border:1px solid rgba(44,68,103,.9);border-radius:9px;padding:0 14px;height:56px;transition:border-color .15s ease}
.bp__calc-in:focus-within{border-color:var(--red)}
.bp__calc-in span{font-family:var(--disp);font-size:24px;color:var(--graymid);margin-right:4px}
.bp__calc-in input{flex:1;min-width:0;width:100%;background:none;border:0;outline:0;font-family:var(--disp);font-weight:700;font-size:26px;color:#fff;font-variant-numeric:tabular-nums}
.bp__calc-chips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.bp__chip{font-family:var(--head);font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:100px;border:1px solid rgba(44,68,103,.9);color:var(--ltblue);background:none;cursor:pointer;transition:all .15s ease}
.bp__chip:hover{border-color:var(--ltblue)}
.bp__chip.is-on{background:var(--red);border-color:var(--red);color:#fff}
.bp__calc-note{font-size:13px;color:rgba(190,214,237,.78);line-height:1.55;margin-top:18px;max-width:none}
.bp__calc-out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
.bp__o{background:#0C121C;border:1px solid var(--cardborder);border-radius:10px;padding:16px;position:relative;overflow:hidden}
.bp__o::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--red)}
.bp__o .k{display:block;font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--graymid);margin-bottom:7px}
.bp__o .v{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.4vw,27px);color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.bp__o .s{display:block;font-size:12px;color:rgba(190,214,237,.72);margin-top:5px}

/* ---------- Teaser card used on other pages ---------- */
.bp__teaser{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:var(--carddark);border:1px solid var(--cardborder);border-radius:12px;padding:24px 26px;
  text-decoration:none;margin-top:30px;transition:border-color .15s ease,transform .15s ease}
.bp__teaser:hover{border-color:var(--red);transform:translateY(-2px)}
.bp__teaser-l strong{display:block;font-family:var(--head);font-weight:800;font-size:20px;color:#fff;margin:2px 0 4px}
.bp__teaser-l .s{display:block;font-size:14px;color:var(--ltblue)}
.bp__teaser-r{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.bp__teaser-n b{display:block;font-family:var(--head);font-weight:800;font-size:19px;color:#fff;font-variant-numeric:tabular-nums}
.bp__teaser-n i{display:block;font-style:normal;font-size:11px;color:var(--graymid);font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.bp__teaser .go{font-family:var(--head);font-size:13px;font-weight:700;color:var(--red);white-space:nowrap}

@media(max-width:1080px){
  .bp__calc-out{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .bp__assump{columns:1}
  .bp__frow{grid-template-columns:104px minmax(0,1fr) 62px;gap:8px}
  .bp__frow .l{font-size:11px}
  .bp__nums{grid-template-columns:1fr}
  .bp__bars{gap:8px}
  .bp__bars .grp{height:120px;gap:2px}
  .bp__bars .grp i{max-width:11px}
  .bp__card{padding:18px}
  .bp__calc{padding:22px}
  .bp__calc-row{gap:20px}
  .bp__teaser-r{gap:18px}
}
@media(max-width:480px){
  .bp__calc-out{grid-template-columns:1fr}
}

/* ============================================================
   Design layer  (v2.15.0) — inc/flair.php
   Icons, image slots, step cards, the on-set strip and the
   ridge divider. Scoped so the whole block can be deleted with
   the module if you decide against it.
   ============================================================ */
.ic{width:24px;height:24px;flex:none}

/* Proof bar with icons */
.proofbar--ic .wrap{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}
.proofbar--ic span{display:inline-flex;align-items:center;gap:9px}
.proofbar--ic .ic{width:19px;height:19px;color:var(--yellow)}

/* Numbered step cards */
.steps .step{position:relative;overflow:hidden;background:#fff;border:1px solid var(--graylt);
  border-radius:4px;padding:26px}
.steps .step__n{position:absolute;right:16px;top:2px;font-family:var(--disp);font-weight:700;
  font-size:62px;line-height:1;color:#EEF3F9;pointer-events:none}
.steps .step .ic{position:relative;color:var(--red);margin-bottom:12px}
.steps .step h3{position:relative;font-family:var(--head);font-weight:800;font-size:17px;
  color:var(--ink);margin:0 0 8px}
.steps .step p{position:relative;font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0}
.steps--d .step{background:var(--carddark);border-color:var(--cardborder)}
.steps--d .step__n{color:rgba(190,214,237,.09)}
.steps--d .step h3{color:#fff}
.steps--d .step p{color:var(--ltblue)}

/* Industry cards */
.indcards .indcard{background:#fff;border:1px solid var(--graylt);border-radius:4px;padding:24px}
.indcards .indcard__t{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.indcards .indcard__t .ic{color:var(--navy)}
.indcards .indcard h3{font-family:var(--head);font-weight:800;font-size:17px;color:var(--ink);margin:0}
.indcards .indcard p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0}

/* Service link cards, with or without a thumbnail */
a.svc{display:block;text-decoration:none;color:inherit;overflow:hidden;padding:0}
a.svc .svc__f{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--vltblue)}
a.svc .svc__f img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
a.svc:hover .svc__f img{transform:scale(1.045)}
a.svc .svc__b{display:block;padding:24px}
a.svc:not(.svc--img) .svc__b{padding:26px}
a.svc h3{font-family:var(--head);font-weight:800;font-size:17px;color:var(--ink);margin:0 0 8px}
a.svc p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0}
a.svc .svc__go{display:block;margin-top:12px;font-family:var(--head);font-size:13px;
  font-weight:700;color:var(--red)}
a.svc:hover{border-color:var(--navy)}

/* On-set strip */
.bts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.bts__i{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--carddark)}
.bts__i img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.bts__i:hover img{transform:scale(1.04)}

/* Ridge divider */
.ridgediv{display:block;width:100%;height:52px;margin-bottom:-1px}

/* Work cards feel like a reel */
.work .frame{overflow:hidden}
.work .frame img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.work:hover .frame img{transform:scale(1.05)}

@media(max-width:900px){ .steps .step__n{font-size:52px} }
@media(max-width:620px){
  .bts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proofbar--ic .wrap{gap:10px 20px}
}
.proofbar--ic span::before{display:none}

/* ============================================================
   Mobile fixes  (v2.17.0)

   Found by auditing every page at 390px with the admin bar
   removed — it is 460px wide and was masking the real numbers.
   Each fix below is a measured defect, not a precaution.
   ============================================================ */

/* 1. THE MENU OPENED OFF-SCREEN.
   The mobile rules give nav.main flex-basis:100% and order:4 to drop it onto
   its own row, but header.site .wrap is display:flex with no wrapping — so the
   nav was laid out as a fourth item on the SAME row and pushed off to the
   right. One property fixes it. */
@media(max-width:1080px){
  header.site .wrap{flex-wrap:wrap;gap:12px}
  nav.main{width:100%;margin-left:0}
  nav.main.open{display:block}
  header.site .cta{margin-left:auto}
}

/* 2. THE FOOTER COLLAPSED INTO SEVEN-PIXEL COLUMNS.
   footer.site .cols was a six-column grid with no breakpoint at all: at 390px
   each column was ~7px wide holding an 80px heading, so every label overlapped
   its neighbour. The first column also lacked a minmax(0,…) floor, so the logo
   forced the whole grid 4px wider than the screen — the source of the
   horizontal scroll on every page. */
footer.site .cols{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}
@media(max-width:1000px){
  footer.site .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
  footer.site .cols>:first-child{grid-column:1/-1}
}
@media(max-width:640px){
  footer.site .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
}
@media(max-width:400px){
  footer.site .cols{grid-template-columns:minmax(0,1fr);gap:22px}
  footer.site .cols>:first-child{grid-column:auto}
}
/* Footer links were 18–30px tall. Thumbs need ~44px. */
@media(max-width:1080px){
  footer.site ul{gap:2px}
  footer.site ul a{display:inline-flex;align-items:center;min-height:42px}
  footer.site .offices a{display:inline-flex;align-items:center;min-height:40px}
}

/* 3. THE HOMEPAGE STAT ROW RAN 24px OFF THE SCREEN.
   .stats was repeat(3,1fr) with no breakpoint; the widest element on the
   homepage at 390px was a stat tile reaching 414px. */
@media(max-width:820px){ .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
@media(max-width:620px){ .stats{grid-template-columns:minmax(0,1fr)} }

/* 4. THE QUOTE FORM'S SIDEBAR SAT HALF OFF-SCREEN.
   .formgrid stayed two-column at every width, leaving the sidecard starting at
   x=191 and ending at 395 on a 390px screen. */
@media(max-width:900px){
  .formgrid{grid-template-columns:minmax(0,1fr);gap:28px}
  .sidecard{position:static;top:auto}
}

/* 5. THE FUNNEL ROWS OVERFLOWED BY 6px.
   .fr is 190px + 1fr + 132px — 322px of fixed columns plus gaps does not fit
   in 390px. Below 620px the label goes on its own line above the bar. */
@media(max-width:620px){
  .fr{grid-template-columns:minmax(0,1fr) 92px;gap:6px 12px;padding:14px}
  .fr .k{grid-column:1/-1}
  .fr .barwrap{grid-column:1}
  .fr .v{grid-column:2;font-size:17px}
}

/* 6. TEXT BELOW 10.5px.
   The Verify flag rendered at 9px and crew positions at 10px — under the
   threshold where small caps stay legible on a phone. */
@media(max-width:620px){
  .vflag{font-size:10.5px}
  .team__r{font-size:11.5px}
}

/* 7. The 12-segment CTV timeline has no breakpoint. It survives because the
   segments are bars, but the month numerals get very tight. */
@media(max-width:560px){
  .months{font-size:10px}
  .timeline .key span{font-size:12.5px}
}

/* 8. Small tap targets on the two most-used mobile controls: the blueprint's
   preset chips (~32px) and the industry filter links (~21px). */
@media(max-width:1080px){
  .bp__chip{min-height:40px;padding:9px 16px}
  .indfilter__a{min-height:40px;display:inline-flex;align-items:center}
  .pagination a,.nav-links .page-numbers{min-height:44px;display:inline-flex;align-items:center}
}
footer.site .legal a{color:#8FA0B5;text-decoration:underline;text-underline-offset:2px}
footer.site .legal a:hover{color:#fff}
.consentbox__l a{color:inherit;text-decoration:underline}

/* ---------- Contrast on dark backgrounds (v2.42.0) ----------
   The mid grey, the brand red and the soft ink were tuned for white pages.
   On the navy/charcoal sections they fell under the 4.5:1 contrast that
   PageSpeed checks, so inside dark areas they switch to lighter versions. */
header.site,.s-dark,.hero,.card-d,.work,.close,.ctaline,footer.site,.bp--dark,.bp__calc,.steps--d,.bp__teaser{
  --graymid:#94929D;--red:#E8505E;--ink-soft:#A6B1C2}
/* White cards that sit inside a dark section keep the light-page colours. */
.card-l,.stat,.tier,.quote,.timeline,.band,.bp__card,.steps .step,.indcard,.directline,details.adv,.s-tint .indfilter__a{
  --graymid:#67656F;--red:#BD2434;--ink-soft:#48546A}
.bp--dark .bp__card,.steps--d .step{--graymid:#94929D;--red:#E8505E;--ink-soft:#A6B1C2}
/* Red fills with white text keep the deeper brand red (white on the lighter red is too faint). */
.bp__chip.is-on{background:#BD2434;border-color:#BD2434}

/* ---------- Google reviews (city pages) ---------- */
.greviews__sum{margin:0 0 24px;color:var(--ink-soft);font-size:15px}
.greviews__sum a{color:var(--navy)}
.greviews__stars,.greviews__rs{color:#8A6400;letter-spacing:.08em}
.greviews__r{margin:0;display:flex;flex-direction:column;gap:12px}
.greviews__r blockquote{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.greviews__r figcaption{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--graymid);margin-top:auto}
.greviews__r figcaption img{border-radius:50%}
.greviews__r figcaption a{color:inherit}
.greviews__attr{margin-top:18px;font-size:12.5px;color:var(--graymid)}

/* ---------- Careers application ---------- */
.app-ok{background:#fff;border:1px solid var(--graylt);border-left:3px solid var(--yellow);border-radius:4px;padding:22px 24px}
.app-ok h3{font-family:var(--head);font-size:19px;color:var(--navy);margin:0 0 6px}
#apply form .field{margin-bottom:16px}

/* ---------- Photo mosaic: horizontal and vertical photos together ----------
   Four columns. A horizontal photo takes two, a vertical one takes one, and
   the row height is set so both come out at their natural shapes (3:2 and 3:4)
   and every row lines up. Gaps are filled in automatically. */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;grid-auto-flow:dense;
  grid-auto-rows:calc((min(100vw,var(--wrap)) - 84px) / 3)}
.mosaic__i{position:relative;margin:0;overflow:hidden;border-radius:4px;background:var(--carddark)}
.mosaic__i--h{grid-column:span 2}
.mosaic__i--v{grid-column:span 1}
.mosaic__i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.mosaic__i:hover img{transform:scale(1.04)}
.mosaic__i figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;font-family:var(--head);font-size:12.5px;
  color:#fff;background:linear-gradient(transparent,rgba(8,11,15,.82))}
@media(max-width:620px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100vw - 60px) * 2 / 3)}
}
/* A single upright photo in a full-width section shouldn't fill the screen. */
.blk-fig--tall{max-width:560px;margin-left:auto;margin-right:auto}