/* Recent Grotesk Medium - Bleo's primary display typeface (Brand Book v1.0),
     self-hosted. Without this the --display stack fell back to Anton. Only the
     Medium weight is licensed; the range is opened so 400-700 map onto it. */
  @font-face{
    font-family:"Recent Grotesk";
    src:url("/fonts/recent-grotesk-medium.woff2") format("woff2");
    font-weight:400 700;font-style:normal;font-display:swap;
  }
  :root{
    --stories:#060606; --strategies:#fdfeff; --grey:#c3cad3;
    --accent:#cd252a; --accent-rgb:205,37,42; /* Bleo accent - keep these two in sync */
    --muted:rgba(253,254,255,.52); --muted-d:rgba(6,6,6,.55);
    --line:rgba(253,254,255,.14); --line-d:rgba(6,6,6,.14);
    --display:"Recent Grotesk","Anton",sans-serif; --body:"Inter",sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--stories);color:var(--strategies);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  ::selection{background:var(--strategies);color:var(--stories)}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:1320px;margin:0 auto;padding:0 36px}
  .disp{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.9}
  .eyebrow{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.26em;text-transform:uppercase}
  .mark{width:30px;height:23px;color:currentColor}
  /* Official Bleo wordmark (Brand Book v1.0). Tight viewBox on the #wm glyph so
     it renders as a compact logo; colour is inherited via currentColor. */
  .brand-logo{height:26px;width:auto;color:#fff;display:block}


  /* nav — always a subtle frosted bar (readable over the light hero), deepening with
     scroll via --sc (0..1, set in site.js). Stays see-through/blurred, never fully invisible. */
  /* clear over the hero at the top of the page; the bar fills in over the first 200px of scroll
     (--sc runs 0 to 1, set by site.js) */
  header{position:fixed;top:0;left:0;right:0;z-index:200;
    background:rgba(6,6,6,calc(var(--sc,0) * .84));
    -webkit-backdrop-filter:blur(calc(var(--sc,0) * 14px)) saturate(calc(1 + var(--sc,0) * .2));backdrop-filter:blur(calc(var(--sc,0) * 14px)) saturate(calc(1 + var(--sc,0) * .2));
    border-bottom:1px solid rgba(255,255,255,calc(var(--sc,0) * .15))}
  .nav-links a,.cta-btn,.brand{text-shadow:0 1px 10px rgba(0,0,0,.35)}
  .nav{position:relative;display:flex;align-items:center;justify-content:space-between;height:82px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:25px;letter-spacing:.02em;color:#fff;text-transform:uppercase}
  .nav-links{display:flex;gap:34px;align-items:center}
  .nav-links a{font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.72);transition:color .25s}
  .nav-links a:hover{color:#fff}
  .cta-btn{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.04em;border:1px solid rgba(255,255,255,.4);padding:12px 22px;border-radius:40px;color:#fff;transition:.35s}
  /* the header button sits inside .nav-links, whose a:hover (white) would otherwise outrank this */
  .cta-btn:hover,.nav-links a.cta-btn:hover{background:#fff;color:var(--stories);border-color:#fff;text-shadow:none}
  /* Services opens a four-column panel on hover or keyboard focus, one column per stage of the
     journey with every page under it, so nothing is more than one hover away. The Services link
     itself still goes to the hub. */
  /* the panel runs the full width under the bar, its columns on the page grid and the contact panel at
     the far right; the bar goes solid and the page dims behind it. The dimming is a pass-through layer,
     so moving onto the page closes the menu. Under 1000px the contact panel drops: the bar carries the
     number and the button */
  .has-menu{display:flex;align-items:center;height:82px}
  .has-menu .menu{position:fixed;top:82px;left:0;right:0;transform:translateY(-8px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.5fr);gap:0 clamp(24px,3vw,48px);padding:clamp(36px,5vh,56px) max(36px,calc((100vw - 1320px) / 2 + 36px)) clamp(40px,6vh,64px);background:var(--stories);border-top:1px solid rgba(255,255,255,.1);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
  .has-menu .menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(6,6,6,.55);pointer-events:none}
  .has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;transform:none}
  header:has(.has-menu:hover),header:has(.has-menu:focus-within){background:var(--stories)}
  .has-menu .menu .reach{padding-left:clamp(24px,3vw,48px);border-left:1px solid rgba(255,255,255,.12)}
  .has-menu .menu .reach .tel{padding:4px 0 2px;font-family:var(--display);font-size:26px;letter-spacing:.01em;color:#fff}
  .has-menu .menu .reach .cities{padding:8px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
  .has-menu .menu .reach .socials{gap:10px;margin-top:18px}
  .has-menu .menu .socials a{width:36px;height:36px;padding:0;color:#fff}
  .has-menu .menu .socials a:hover{color:var(--stories)}
  @media(max-width:1000px){.has-menu .menu{grid-template-columns:repeat(4,minmax(0,1fr))}.has-menu .menu .reach{display:none}}
  .has-menu .col{display:flex;flex-direction:column;gap:2px}
  .has-menu .menu a{padding:7px 0;font-size:15px;line-height:1.35;color:rgba(255,255,255,.72);text-shadow:none}
  /* phone-menu parts: the Services toggle, the "All services" link and the contact line */
  .sub-toggle,.m-contact,.has-menu .menu .all{display:none}
  .has-menu .menu a:hover{color:var(--accent)}
  .has-menu .menu .h{font-family:var(--display);font-size:clamp(22px,2vw,28px);color:#fff;padding:0 0 12px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.14)}
  /* the phone number sits in the bar at every width, so a caller never has to open the menu */
  .nav-links .nav-tel{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
  .nav-tel-m{display:none;margin-left:auto;margin-right:18px;padding:10px 0;font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.02em;color:#fff;white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.35)}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:12px 8px;cursor:pointer}
  .burger span{width:26px;height:2px;background:#fff;transition:transform .3s ease,opacity .2s ease}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){html .nav-links.open,html .nav-links.open>*{animation:none}html .nav-links.open .has-menu .menu,html .burger span{transition:none}}

  /* HERO SPLIT */
  .hero{height:100svh;min-height:680px;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}
  .seam{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line);z-index:6;transform:translateX(-.5px)}
  .seam .node{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;background:var(--stories);border-radius:15px;display:grid;place-items:center;box-shadow:0 0 0 8px var(--stories)}
  .seam .node .nb{width:auto;height:34px;color:#fff;display:block}

  /* left = Stories (footage wall) */
  .h-stories{position:relative;background:var(--stories);overflow:hidden}
  .wall2{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
  .wcol{display:flex;flex-direction:column;gap:12px;will-change:transform}
  .wcol.up{animation:scrollUp 34s linear infinite}
  .wcol.down{animation:scrollDown 34s linear infinite}
  .wcol img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px}
  @keyframes scrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
  @keyframes scrollDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
  .h-stories::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(6,6,6,0),rgba(6,6,6,0) 46%,rgba(6,6,6,.9))}
  .h-stories .copy{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(28px,4vw,52px)}
  .h-stories .lab{color:var(--grey);margin-bottom:14px}
  .h-stories h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,7vw,104px);line-height:.86;text-transform:uppercase;color:#fff}
  .h-stories .sub{color:#d9d7d2;margin-top:14px;max-width:30ch;font-size:15px}

  /* right = Strategies (clean) */
  .h-strat{position:relative;background:var(--strategies);color:var(--stories);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,4vw,52px)}
  .h-strat::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);background-size:54px 54px;opacity:.5;mask-image:linear-gradient(180deg,transparent,#000 60%)}
  .h-strat .top{position:absolute;top:clamp(96px,13vh,150px);left:clamp(28px,4vw,52px);right:clamp(28px,4vw,52px);z-index:2}
  .h-strat .top .kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .h-strat .top .kw span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-d);border-radius:30px;padding:7px 12px;color:var(--muted-d)}
  .h-strat .lab{color:var(--muted-d);margin-bottom:14px;position:relative;z-index:2}
  .h-strat h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,7vw,104px);line-height:.86;text-transform:uppercase;position:relative;z-index:2}
  .h-strat .sub{color:var(--muted-d);margin-top:14px;max-width:30ch;font-size:15px;position:relative;z-index:2}

  .hero-load .h-stories,.hero-load .h-strat{animation:wipe 1.1s cubic-bezier(.7,0,.2,1) both}
  .hero-load .h-strat{animation-delay:.08s}
  @keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

  /* CONVERGE band */
  .converge{text-align:center;padding:clamp(70px,10vh,120px) 0;border-bottom:1px solid var(--line)}
  .converge p{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.6vw,52px);line-height:1.04;text-transform:uppercase;letter-spacing:.01em;max-width:20ch;margin:0 auto}
  .converge p .g{color:var(--accent)}

  /* sections */
  .pad{padding:clamp(88px,12vh,150px) 0}
  .k{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:16px}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:50px}
  .sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,5vw,72px);line-height:.96;text-transform:uppercase}
  .reveal{opacity:0;transform:translateY(40px);transition:.9s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}

  /* WORK WALL (full-width showcase) */
  .workwall{position:relative;height:96vh;min-height:620px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--stories)}
  .ww-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px}
  .ww-col{display:flex;flex-direction:column;gap:14px;will-change:transform}
  .ww-col.up{animation:scrollUp 40s linear infinite}
  .ww-col.down{animation:scrollDown 40s linear infinite}
  .ww-col .tile{position:relative;border-radius:4px;overflow:hidden;flex:none}
  .ww-col .tile img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:.6s}
  .ww-col .tile:hover img{transform:scale(1.03)}
  .ww-col .tile .cap{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.8));z-index:2}
  .ww-col .tile .cap .t{font-family:var(--display);font-size:18px;text-transform:uppercase;color:#fff}
  .ww-col .tile .cap .c{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
  .workwall.paused .ww-col{animation-play-state:paused}
  .ww-over{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none;background:radial-gradient(70% 60% at 50% 50%,rgba(6,6,6,.78),rgba(6,6,6,.3))}
  .ww-over h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,8vw,120px);line-height:.86;text-transform:uppercase;text-align:center}
  .ww-over .lab{color:var(--grey)}
  .ww-over a{pointer-events:auto}

  /* APPROACH white */
  .approach{background:var(--strategies);color:var(--stories)}
  .approach .k{color:var(--muted-d)}.approach h2{color:var(--stories)}
  .approach .lead{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,32px);line-height:1.1;text-transform:uppercase;max-width:20ch}
  .steps{margin-top:50px;border-top:1px solid var(--line-d)}
  .step{display:grid;grid-template-columns:84px 1fr 1.1fr;gap:28px;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--line-d);transition:.4s}
  .step:hover{padding-left:14px}
  .step .n{font-family:var(--display);font-size:24px}
  .step h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,3vw,38px);text-transform:uppercase}
  .step p{color:var(--muted-d);font-size:15px}

  /* DIFFERENCE black */
  .diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .diff-grid .big{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,46px);line-height:1.08;text-transform:uppercase}
  .diff-grid .big .g{color:var(--accent)}
  .diff-grid p{color:#cfccc6;font-size:16px;margin-bottom:16px}
  .ai-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:30px;padding:9px 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
  .ai-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

  /* TRANSFORMATION split */
  .trans{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:6px;overflow:hidden}
  .tcol{padding:44px}
  .tcol.before{background:var(--stories)}
  .tcol.after{background:var(--strategies);color:var(--stories)}
  .tcol .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px}
  .tcol.before .tag{color:var(--muted)}.tcol.after .tag{color:var(--muted-d)}
  .tcol ul{list-style:none}
  .tcol li{padding:13px 0;font-size:clamp(16px,1.7vw,20px);display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
  .tcol.after li{border-bottom:1px solid var(--line-d)}
  .tcol li:last-child{border-bottom:0}
  .tcol.before li{color:var(--muted)}
  .tcol li .ic{font-size:13px}.tcol.after li .ic{color:var(--accent)}

  /* FILM */
  .film{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/9;cursor:pointer;background:#000}
  .film img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1) brightness(.72);transition:.8s}
  .film:hover img{transform:scale(1.03);filter:brightness(.85)}
  .film .ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:2}
  .film .pbig{width:92px;height:92px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;transition:.4s}
  .film:hover .pbig{background:rgba(255,255,255,.16);transform:scale(1.08)}
  .film .pbig svg{fill:#fff;margin-left:5px}
  .film .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:500}
  .film iframe{width:100%;height:100%;border:0;position:absolute;inset:0}

  /* TESTIMONIAL */
  .testi{max-width:1000px}
  .testi .stars{color:var(--grey);letter-spacing:5px;margin-bottom:22px}
  .testi p{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.4vw,48px);line-height:1.12;text-transform:uppercase}
  .testi .who{margin-top:24px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

  /* STUDIOS */
  .locs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:6px;overflow:hidden}
  .loc{padding:38px;border-right:1px solid var(--line);transition:.4s}
  .loc:last-child{border-right:0}.loc:hover{background:rgba(253,254,255,.04)}
  .loc .c{font-family:var(--display);font-weight:400;font-size:25px;margin-bottom:13px;text-transform:uppercase}
  .loc .a{color:var(--muted);font-size:14px;line-height:1.7}
  .loc .p{margin-top:13px;font-size:13px;color:#fff}

  /* CTA split */
  .cta{display:grid;grid-template-columns:1fr 1fr;min-height:60vh}
  .cta .c-stories{background:var(--stories);padding:clamp(40px,6vw,90px);display:flex;flex-direction:column;justify-content:center}
  .cta .c-strat{background:var(--strategies);color:var(--stories);padding:clamp(40px,6vw,90px);display:flex;flex-direction:column;justify-content:center}
  .cta h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.5vw,84px);line-height:.9;text-transform:uppercase}
  .cta .c-strat h2 .g{color:var(--accent)}
  .cta p{margin-top:18px;font-size:15px;max-width:34ch}
  .cta .c-stories p{color:var(--muted)}.cta .c-strat p{color:var(--muted-d)}
  .cta .act{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
  .btn-light{background:#fff;color:#060606;font-weight:600;font-size:12px;letter-spacing:.04em;padding:14px 24px;border-radius:40px}
  .btn-dark{background:#060606;color:#fff;font-weight:600;font-size:12px;letter-spacing:.04em;padding:14px 24px;border-radius:40px}

  /* FOOTER */
  footer{border-top:1px solid var(--line);padding:56px 0 40px}
  .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:46px}
  .foot-top .fb .brand{margin-bottom:14px}
  .foot-top .fb p{color:var(--muted);max-width:300px;font-size:14px}
  .foot-nav{display:flex;gap:52px;flex-wrap:wrap}
  .foot-col h5{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:15px;font-weight:600}
  .foot-col a{display:block;color:#cfccc6;font-size:14px;padding:5px 0;transition:.25s}
  .foot-col a:hover{color:#fff}
  .foot-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
  .socials{display:flex;gap:14px}
  .socials a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.3s;color:#fff}
  .socials a:hover{background:#fff;color:#060606}
  .socials svg{width:16px;height:16px}

  @media(max-width:1000px){
    .diff-grid{grid-template-columns:1fr;gap:32px}
    .step{grid-template-columns:54px 1fr;gap:16px}.step p{grid-column:1/-1}
    .locs{grid-template-columns:1fr}.loc{border-right:0;border-bottom:1px solid var(--line)}
    .ww-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:760px){
    .hero{grid-template-columns:1fr;height:auto;min-height:0}
    .h-stories,.h-strat{min-height:86vh}
    .seam{display:none}
    .trans{grid-template-columns:1fr}
    .cta{grid-template-columns:1fr}
    #hdr .wrap{padding:0 20px}
    .nav-links{display:none}.burger{display:flex}.nav-tel-m{display:inline-block}.nav-links.open .nav-tel{display:none}
    /* the phone menu: a full-height panel under the bar with big links. Services opens in place,
       its pages two to a row under each stage; the call to action and contact details sit at the foot */
    html.menu-open{overflow:hidden}
    html.menu-open header{background:var(--stories);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}
    html.menu-open .nav-tel-m{text-shadow:none}
    .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;height:calc(100vh - 82px);height:calc(100dvh - 82px);flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 32px;background:var(--stories);overflow-y:auto;overscroll-behavior:contain;animation:menu-in .3s ease both}
    .nav-links.open>*{animation:menu-in .45s ease both}
    .nav-links.open>:nth-child(2){animation-delay:.04s}.nav-links.open>:nth-child(3){animation-delay:.08s}
    .nav-links.open>:nth-child(5){animation-delay:.12s}.nav-links.open>:nth-child(6){animation-delay:.16s}
    .nav-links.open>a:not(.nav-tel):not(.cta-btn),.nav-links.open .sub-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:68px;padding:0;border:0;border-bottom:1px solid var(--line);background:none;font-family:var(--display);font-size:34px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:#fff;text-shadow:none;cursor:pointer}
    .nav-links.open>a:not(.nav-tel):not(.cta-btn)::after{content:"";width:9px;height:9px;margin-right:5px;border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);transform:rotate(45deg)}
    .nav-links.open .sub-toggle::after{content:"";width:16px;height:16px;background:linear-gradient(var(--muted),var(--muted)) center/16px 1.5px no-repeat,linear-gradient(var(--muted),var(--muted)) center/1.5px 16px no-repeat;transition:background-size .3s ease}
    .nav-links.open .has-menu.open .sub-toggle::after{background-size:16px 1.5px,1.5px 0}
    .nav-links.open .has-menu{display:block;height:auto;border-bottom:1px solid var(--line)}
    .nav-links.open .has-menu>a{display:none}
    .nav-links.open .has-menu .sub-toggle{border-bottom:0}
    .nav-links.open .has-menu .menu::after{display:none}
    .nav-links.open .has-menu .menu{position:static;display:block;width:auto;max-height:0;overflow:hidden;padding:0;transform:none;opacity:1;visibility:visible;background:none;border:0;border-radius:0;transition:max-height .4s ease}
    .nav-links.open .has-menu.open .menu{max-height:60rem}
    .nav-links.open .has-menu .col{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;padding-bottom:10px}
    .nav-links.open .has-menu .menu a{display:flex;align-items:center;min-height:44px;padding:4px 0;font-size:15px;line-height:1.3;color:rgba(255,255,255,.8);white-space:normal}
    .nav-links.open .has-menu .menu .h{grid-column:1/-1;min-height:36px;margin:0;padding:0;border:0;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
    .nav-links.open .has-menu .menu a.active{color:#fff}
    .nav-links.open .has-menu .menu a.active::before{content:"";flex:none;width:6px;height:6px;margin-right:9px;border-radius:50%;background:var(--accent)}
    .nav-links.open .has-menu .menu .all{display:flex;min-height:52px;margin-bottom:8px;font-size:13px;font-weight:500;letter-spacing:.04em;color:#fff}
    .nav-links.open .has-menu .menu .all::after{content:"";width:7px;height:7px;margin-left:10px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
    .nav-links.open .cta-btn{display:flex;align-items:center;justify-content:center;min-height:54px;margin-top:28px;padding:0 22px;font-size:15px;background:#fff;color:var(--stories);border-color:#fff;text-shadow:none}
    .nav-links.open .m-contact{display:flex;flex-direction:column;gap:8px;margin-top:22px;font-size:14px;line-height:1.6;color:var(--muted)}
    .nav-links.open .m-contact a{font-size:15px;color:#fff;text-shadow:none}
    .nav-links.open .m-contact .socials{gap:12px;margin-top:18px}
    .nav-links.open .m-contact .socials a{width:44px;height:44px}
    .nav-links.open .m-contact .socials a:hover{color:var(--stories)}
    .nav-links.open .has-menu .menu .reach{display:none}
  }
  .tag{position:fixed;left:16px;bottom:16px;z-index:9997;font-family:var(--body);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(6,6,6,.7);border:1px solid var(--line);padding:7px 12px;border-radius:30px}
  .tag b{color:var(--grey)}
  @media(prefers-reduced-motion:reduce){.wcol,.ww-col{animation:none!important}}

/* ==========================================================================
   Inner pages (Work, Services, About, Contact) — shared components
   ========================================================================== */

/* page hero */
.subhero{position:relative;padding:calc(82px + clamp(60px,11vh,120px)) 0 clamp(46px,8vh,84px);border-bottom:1px solid var(--line);overflow:hidden}
.subhero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:54px 54px;opacity:.4;mask-image:radial-gradient(120% 90% at 15% 0%,#000,transparent 70%);pointer-events:none}
.subhero .wrap{position:relative;z-index:1}
.subhero .eyebrow{color:var(--accent);margin-bottom:18px;display:block}
.subhero h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,8.5vw,128px);line-height:.88;text-transform:uppercase}
.subhero .lead{margin-top:22px;max-width:54ch;color:var(--grey);font-size:clamp(16px,1.6vw,19px);line-height:1.6}

/* portfolio / work */
.pf-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.pf-filter button{font-family:var(--body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);background:transparent;border:1px solid var(--line);border-radius:30px;padding:9px 16px;cursor:pointer;transition:.25s}
.pf-filter button:hover{color:#fff;border-color:var(--grey)}
.pf-filter button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pf-item{position:relative;border-radius:5px;overflow:hidden;aspect-ratio:4/3;background:#101010}
.pf-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.8);transition:.6s}
.pf-item:hover img{filter:grayscale(0) brightness(1);transform:scale(1.05)}
.pf-item .cap{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.82));z-index:2}
.pf-item .cap .t{font-family:var(--display);font-size:20px;text-transform:uppercase;color:#fff;line-height:1}
.pf-item .cap .c{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:5px}

@media(max-width:1000px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pf-grid{grid-template-columns:1fr}}

/* services */
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:64px 1.05fr 1.45fr;gap:30px;align-items:start;padding:44px 0;border-bottom:1px solid var(--line);transition:padding .35s,background .35s}
.svc:hover{background:rgba(253,254,255,.03);padding-left:12px}
.svc .num{font-family:var(--display);font-size:22px;color:var(--accent)}
.svc h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,40px);text-transform:uppercase;line-height:.98}
.svc .desc{color:var(--grey);font-size:16px;line-height:1.65}
.svc .desc .tags{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.svc .desc .tags li{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:6px 12px}
@media(max-width:820px){.svc{grid-template-columns:1fr;gap:12px}.svc .num{font-size:18px}}

/* about / prose + values */
.prose{max-width:760px}
.prose p{font-size:clamp(16px,1.7vw,19px);line-height:1.75;color:var(--grey);margin-bottom:22px}
.prose p strong{color:#fff;font-weight:600}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.value{border:1px solid var(--line);border-radius:8px;padding:30px;transition:.35s}
.value:hover{border-color:var(--accent)}
.value h4{font-family:var(--display);font-weight:400;font-size:22px;text-transform:uppercase;margin-bottom:10px}
.value p{color:var(--grey);font-size:14.5px;line-height:1.6}
@media(max-width:820px){.values{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px}}
.cform{display:grid;gap:16px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.cform .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{background:rgba(253,254,255,.04);border:1px solid var(--line);border-radius:8px;color:#fff;font-family:var(--body);font-size:15px;padding:13px 14px;transition:.25s;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);background:rgba(253,254,255,.06)}
.field textarea{min-height:130px;resize:vertical}
.cform .submit{justify-self:start;background:var(--accent);color:#fff;border:none;border-radius:40px;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.04em;padding:15px 30px;cursor:pointer;transition:.3s}
.cform .submit:hover{box-shadow:0 12px 34px rgba(var(--accent-rgb),.4)}
.cform .note{font-size:12.5px;color:var(--muted)}
.cinfo .ci{margin-bottom:26px}
.cinfo h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cinfo a,.cinfo p{color:#fff;font-size:16px;line-height:1.7;display:block}
.cinfo a:hover{color:var(--accent)}
.loc .p a{color:inherit}.loc .p a:hover{color:var(--accent)}

/* contact page — clean centred form */
.contact-centered{max-width:640px;margin:0 auto}

/* teaser (home): services + work preview strips */
.teaser-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.teaser-head .more{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.svc-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.svc-mini a{display:flex;align-items:baseline;gap:16px;padding:24px 6px;border-bottom:1px solid var(--line);transition:.3s}
.svc-mini a:nth-child(odd){border-right:1px solid var(--line);padding-right:24px}
.svc-mini a:hover{padding-left:12px;color:#fff}
.svc-mini .n{font-family:var(--display);font-size:16px;color:var(--accent)}
.svc-mini .t{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.4vw,30px);text-transform:uppercase}
@media(max-width:760px){.svc-mini{grid-template-columns:1fr}.svc-mini a:nth-child(odd){border-right:0;padding-right:6px}}

/* team grid (about) */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tm{border:1px solid var(--line);border-radius:8px;padding:22px;transition:.35s}
.tm:hover{border-color:var(--accent)}
.tm .nm{font-family:var(--display);font-weight:400;font-size:22px;text-transform:uppercase;line-height:1}
.tm .ro{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:7px 0 12px}
.tm p{color:var(--grey);font-size:13.5px;line-height:1.55}
@media(max-width:1000px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}

/* trust bar (clients) */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:46px 0}
.trust .lab{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:26px}
/* scrolling logo marquee */
.logos-marquee{display:flex;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* the client logos drift past slowly and hold still under the pointer (both tracks, since the
   second is a clone of the first) */
.logos-track{display:flex;flex:0 0 auto;align-items:center;gap:clamp(56px,6vw,96px);padding-left:clamp(56px,6vw,96px);animation:marq 150s linear infinite;will-change:transform}
.logos-marquee:hover .logos-track{animation-play-state:paused}
/* The logos are white on transparent. On paper they are inverted, not flattened
   with brightness(0): that filled in knocked-out counters (QUT, CAT, BMW). */
.logos-track img{height:clamp(56px,6vw,88px);width:auto;flex:0 0 auto;object-fit:contain;opacity:.85;transition:opacity .3s}
.logos-track img:hover{opacity:1}
@keyframes marq{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){
  .logos-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .logos-track{animation:none}
}

/* ==========================================================================
   Section theming — alternate Stories(black) / Strategies(white) per section.
   Overriding the shared vars inside the scope re-themes borders/muted/grey
   for every child without rewriting each component.
   ========================================================================== */
.sec--dark{background:var(--stories);color:#fff}
.sec--light{--line:rgba(6,6,6,.14);--muted:rgba(6,6,6,.55);--grey:#5b616c;background:var(--strategies);color:var(--stories)}
.sec--light .k{color:var(--muted-d)}
.sec--light h1,.sec--light h2,.sec--light h3{color:var(--stories)}

/* ==========================================================================
   Motion / interactivity (shared) — all gated by prefers-reduced-motion below
   ========================================================================== */
/* scroll progress */
#prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--accent);z-index:300;box-shadow:0 0 12px rgba(var(--accent-rgb),.7)}


/* interactive transitions */
.mag{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.tilt{transition:transform .3s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d}

/* hero polish (home) */
.seam::before{content:"";position:absolute;left:-.5px;top:0;width:2px;height:26%;background:linear-gradient(var(--accent),transparent);opacity:.85;animation:seamrun 3.4s ease-in-out infinite}
@keyframes seamrun{0%{top:-26%}100%{top:100%}}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--grey);font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.scroll-cue .ln{width:1px;height:34px;background:linear-gradient(var(--grey),transparent);overflow:hidden;position:relative}
.scroll-cue .ln::after{content:"";position:absolute;top:-40%;left:0;width:1px;height:40%;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{top:-40%}100%{top:100%}}

/* hero load stagger */
.hero .lab,.hero h2,.hero .sub,.hero .kw{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
body.ready .hero .lab{opacity:1;transform:none;transition-delay:.5s}
body.ready .hero h2{opacity:1;transform:none;transition-delay:.6s}
body.ready .hero .sub{opacity:1;transform:none;transition-delay:.74s}
body.ready .hero .kw{opacity:1;transform:none;transition-delay:.66s}

/* convergence canvas */
.converge{position:relative;overflow:hidden}
.converge .wrap{position:relative;z-index:1}

/* stagger reveal */
.stagger>*{opacity:0;transform:translateY(28px);transition:.8s cubic-bezier(.16,1,.3,1)}
.stagger.in>*{opacity:1;transform:none}

/* work tiles caption motion (home wall) */
.ww-col .tile .cap{transform:translateY(8px);opacity:.85;transition:.4s}
.ww-col .tile:hover .cap{transform:none;opacity:1}
/* clickable tiles + play hint */
.ww-col .tile[data-v]{cursor:pointer}
.ww-col .tile[data-v]::after{content:"";position:absolute;left:50%;top:50%;width:60px;height:60px;transform:translate(-50%,-50%) scale(.8);border-radius:50%;background:rgba(6,6,6,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/22px no-repeat;backdrop-filter:blur(2px);opacity:0;transition:.35s;z-index:3;pointer-events:none}
.ww-col .tile[data-v]:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* video lightbox */
.vlb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,6,6,.94);opacity:0;transition:opacity .3s}
.vlb.open{opacity:1}
.vlb .frame{position:relative;width:min(1120px,92vw);aspect-ratio:16/9;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.vlb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vlb .x{position:absolute;top:-46px;right:0;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background .25s}
.vlb .x:hover{background:rgba(255,255,255,.25)}

/* before/after comparison (home) — both panels always visible */
.trans{position:relative}
.trans .tcol.after{box-shadow:inset 0 0 0 1px var(--accent)}
.trans-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 10px 30px rgba(var(--accent-rgb),.45)}
@media(max-width:760px){.trans-arrow{top:50%;transform:translate(-50%,-50%) rotate(90deg)}}

@media(prefers-reduced-motion:reduce){
  .wcol,.ww-col,.seam::before,.scroll-cue .ln::after{animation:none!important}
  .reveal,.stagger>*{opacity:1!important;transform:none!important}
  .hero .lab,.hero h2,.hero .sub,.hero .kw{opacity:1!important;transform:none!important}
}

/* light-section overrides for form + contact info */
.sec--light .field label{color:var(--muted-d)}
.sec--light .field input,.sec--light .field textarea,.sec--light .field select{background:#fff;border:1px solid rgba(6,6,6,.16);border-radius:10px;color:var(--stories);padding:14px 15px}
.sec--light .field input::placeholder,.sec--light .field textarea::placeholder{color:rgba(6,6,6,.4)}
.sec--light .field input:focus,.sec--light .field textarea:focus,.sec--light .field select:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}
.sec--light .cinfo a,.sec--light .cinfo p{color:var(--stories)}
.sec--light .cinfo a:hover{color:var(--accent)}
.sec--light .cform .note{color:var(--muted-d)}

/* testimonials wall */
.quote-grid{columns:2;column-gap:16px}
@media(max-width:760px){.quote-grid{columns:1}}
.quote{break-inside:avoid;border:1px solid var(--line);border-radius:10px;padding:26px;margin:0 0 16px;transition:.35s}
.quote:hover{border-color:var(--accent)}
.quote .st{color:var(--accent);letter-spacing:3px;margin-bottom:12px;font-size:13px}
.quote p{font-size:15.5px;line-height:1.6;color:var(--grey)}
.quote .who{margin-top:16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* lead-form pop-up (home) + embedded /start */
.lead-modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.lead-modal[hidden]{display:none}
.lm-backdrop{position:absolute;inset:0;background:rgba(6,6,6,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.lm-panel{position:relative;width:min(760px,100%);height:min(90vh,940px);background:var(--stories);border-radius:16px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.55);transform:translateY(16px) scale(.985);opacity:0;transition:.35s cubic-bezier(.16,1,.3,1)}
.lead-modal.open .lm-backdrop{opacity:1}
.lead-modal.open .lm-panel{transform:none;opacity:1}
.lm-frame{width:100%;height:100%;border:0;display:block;background:var(--stories)}
.lm-x{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:.25s;backdrop-filter:blur(6px)}
.lm-x:hover{background:rgba(255,255,255,.3)}
@media(prefers-reduced-motion:reduce){.lm-backdrop,.lm-panel{transition:none}}
/* embedded mode: /start?embed — hide site chrome but keep a branded hero */
html.embed #prog,html.embed #hdr,html.embed footer{display:none!important}
html.embed body{background:var(--stories)}
html.embed .subhero{padding:clamp(30px,6vw,52px) 0 clamp(24px,4vw,38px)!important;border-bottom:0}
html.embed .subhero::before{mask-image:radial-gradient(120% 120% at 15% 0%,#000,transparent 72%)}
html.embed .subhero h1{font-size:clamp(34px,7vw,58px)}
html.embed .subhero .lead{margin-top:16px;max-width:48ch;font-size:15px}
html.embed .embed-brand{display:block;margin-bottom:20px}
html.embed .pad{padding:clamp(28px,4vw,44px) 0 44px!important}
.embed-brand{display:none}
.embed-brand .brand-logo{height:30px;color:#fff}

/* lead form (start a project) */
#leadform{max-width:820px;margin:0 auto;display:block}
.lead-step,.lead-block{padding:34px 0;border-top:1px solid var(--line)}
.lead-step:first-of-type{border-top:0;padding-top:0}
.lead-step-h{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.lead-step-h .ls-n{font-family:var(--display);font-size:20px;color:var(--accent)}
.lead-step-h h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,3vw,34px);line-height:1.05;color:var(--stories)}
.ls-hint{color:var(--muted);font-size:14px;margin:-8px 0 18px}
#leadform .field{margin-bottom:18px}
#leadform .submit{margin-top:10px}
#leadform .note{margin-top:16px}
.cform .submit+.note{margin-top:16px}
.optset{display:flex;flex-wrap:wrap;gap:10px}
.chip,.opt{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:30px;padding:10px 16px;font-size:14px;cursor:pointer;transition:.25s;user-select:none;color:var(--stories)}
.chip input,.opt input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;margin:0}
.chip:hover,.opt:hover{border-color:var(--accent)}
.chip.on,.opt.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.lead-block{animation:leadfade .4s ease}
@keyframes leadfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ==========================================================================
   ABOUT ecosystem — hub, chapters, sub-nav, components
   ========================================================================== */

/* About sub-nav (persistent secondary nav) */
.subnav{position:sticky;top:82px;z-index:100;background:rgba(6,6,6,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;align-items:center;gap:10px;overflow-x:auto;padding-top:14px;padding-bottom:14px;-ms-overflow-style:none;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav .sn-title{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);white-space:nowrap;margin-right:8px}
.subnav a{font-size:13px;color:var(--grey);white-space:nowrap;padding:6px 10px;border-radius:20px;transition:.25s}
.subnav a:hover{color:#fff}
.subnav a.active{color:#fff;background:rgba(253,254,255,.08)}

/* breadcrumb */
.crumb{font-size:12px;letter-spacing:.04em;color:var(--muted);margin-bottom:18px}
.crumb a:hover{color:var(--accent)}
.crumb .sep{margin:0 8px;opacity:.5}

/* hub explore cards */
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hubcard{border:1px solid var(--line);border-radius:12px;padding:30px;display:flex;flex-direction:column;gap:10px;transition:.35s;min-height:180px}
.hubcard:hover{border-color:var(--accent);transform:translateY(-4px)}
.hubcard h3{font-family:var(--display);font-weight:400;font-size:26px;text-transform:uppercase;line-height:1}
.hubcard p{color:var(--grey);font-size:14.5px;line-height:1.55;flex:1}
.hubcard .go{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media(max-width:1000px){.hubgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.hubgrid{grid-template-columns:1fr}}

/* timeline (our story) */
.timeline{position:relative;margin-top:20px;padding-left:8px}
.tl-item{position:relative;display:grid;grid-template-columns:150px 1fr;gap:34px;padding:0 0 44px 34px;border-left:1px solid var(--line)}
.tl-item:last-child{border-left-color:transparent;padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-6px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--stories)}
.sec--light .tl-item::before{box-shadow:0 0 0 5px var(--strategies)}
.tl-item .yr{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,40px);line-height:1}
.tl-item .tc h3{font-family:var(--display);font-weight:400;font-size:22px;text-transform:uppercase;margin-bottom:8px}
.tl-item .tc p{color:var(--grey);font-size:15px;line-height:1.6;max-width:60ch}
@media(max-width:700px){.tl-item{grid-template-columns:1fr;gap:8px}}

/* strategic pillars */
.spillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.spillar{border:1px solid var(--line);border-radius:12px;padding:32px;transition:.35s}
.spillar:hover{border-color:var(--accent)}
.spillar .pn{font-family:var(--display);font-size:16px;color:var(--accent);margin-bottom:14px}
.spillar h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.4vw,28px);text-transform:uppercase;margin-bottom:10px;line-height:1}
.spillar p{color:var(--grey);font-size:14.5px;line-height:1.6}
@media(max-width:760px){.spillars{grid-template-columns:1fr}}

/* big number exhibits (goals / audacious) */
.bignums{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bignum{background:var(--stories);padding:40px 34px}
.sec--light .bignum{background:var(--strategies)}
.bignum .bn{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:.9;color:var(--accent)}
.bignum h3{font-family:var(--display);font-weight:400;font-size:20px;text-transform:uppercase;margin:12px 0 8px}
.bignum p{color:var(--grey);font-size:14.5px;line-height:1.55}
@media(max-width:760px){.bignums{grid-template-columns:1fr}}

/* values accordion (about/values) */
.vacc{border-top:1px solid var(--line)}
.vitem{border-bottom:1px solid var(--line)}
.vitem summary{display:flex;align-items:baseline;gap:20px;padding:26px 6px;cursor:pointer;list-style:none;transition:padding .3s}
.vitem summary::-webkit-details-marker{display:none}
.vitem summary:hover{padding-left:12px}
.vitem .vname{font-family:var(--display);font-weight:400;font-size:clamp(26px,4vw,52px);text-transform:uppercase;line-height:.95}
.vitem .vsub{color:var(--grey);font-size:15px;margin-left:auto;text-align:right;max-width:40ch}
.vitem .vbody{padding:0 6px 28px;color:var(--grey);font-size:16px;line-height:1.7;max-width:70ch}
@media(max-width:700px){.vitem .vsub{display:none}}

/* manifesto / statement */
.manifesto{text-align:center;padding:clamp(60px,9vh,110px) 0}
.manifesto p{font-family:var(--display);font-weight:400;font-size:clamp(26px,4vw,58px);line-height:1.05;text-transform:uppercase;max-width:20ch;margin:0 auto}
.manifesto p .g{color:var(--accent)}
/* capability cloud (future) */
.cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto}
.cloud span{font-family:var(--display);font-weight:400;font-size:clamp(16px,2vw,26px);text-transform:uppercase;color:var(--grey);border:1px solid var(--line);border-radius:40px;padding:10px 20px;transition:.3s}
.cloud span:hover{color:var(--accent);border-color:var(--accent)}

/* less/more contrast (technology) */
.lm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lm .col{border:1px solid var(--line);border-radius:12px;padding:34px}
.lm .col h3{font-family:var(--display);font-weight:400;font-size:28px;text-transform:uppercase;margin-bottom:18px}
.lm .col.less h3{color:var(--muted)}.lm .col.more h3{color:var(--accent)}
.lm .col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.lm .col li{color:var(--grey);font-size:16px;padding-left:18px;position:relative}
.lm .col li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
@media(max-width:760px){.lm{grid-template-columns:1fr}}

/* chapter prev/next */
.chapnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.chapnav a{border:1px solid var(--line);border-radius:12px;padding:26px 30px;transition:.35s}
.chapnav a:hover{border-color:var(--accent)}
.chapnav .dir{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.chapnav .ttl{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.6vw,30px);text-transform:uppercase}
.chapnav .next{text-align:right}
@media(max-width:620px){.chapnav{grid-template-columns:1fr}.chapnav .next{text-align:left}}

/* two-up statement (vision/mission) */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vm .card{border:1px solid var(--line);border-radius:12px;padding:40px}
.vm .card .lab{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.vm .card p{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,34px);line-height:1.1;text-transform:uppercase}
@media(max-width:760px){.vm{grid-template-columns:1fr}}

/* error / simple centred page */
.err{min-height:72vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:140px 20px 90px}
.err h1{font-family:var(--display);font-weight:400;font-size:clamp(90px,20vw,240px);line-height:.85;text-transform:uppercase}
.err p{color:var(--grey);max-width:44ch}

/* roles list (careers) */
.roles{border-top:1px solid var(--line);margin-top:8px}
.role{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .3s}
.role:hover{padding-left:12px}
.role .rl{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.6vw,30px);text-transform:uppercase}
.role .rm{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.role .go{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap}

/* reviews rail (home) — auto-scrolling client reviews */
.reviews-marquee{display:flex;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reviews-track{display:flex;flex:0 0 auto;gap:20px;padding-left:20px;animation:marq 90s linear infinite;will-change:transform}
.reviews-marquee:hover .reviews-track{animation-play-state:paused}
.rq{flex:0 0 auto;width:min(360px,80vw);border:1px solid var(--line);border-radius:12px;padding:28px;background:rgba(253,254,255,.02);display:flex;flex-direction:column;gap:14px}
.rq .st{color:var(--accent);letter-spacing:3px;font-size:13px}
.rq blockquote{font-size:15.5px;line-height:1.6;color:var(--grey)}
.rq figcaption{margin-top:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.reviews-marquee{overflow-x:auto}.reviews-track{animation:none}}

/* what we do — pillar accordion (home) */
.pillars{border-top:1px solid var(--line)}
.pillar{border-bottom:1px solid var(--line)}
.pillar summary{display:flex;align-items:center;gap:22px;padding:28px 6px;cursor:pointer;list-style:none;transition:padding .3s}
.pillar summary::-webkit-details-marker{display:none}
.pillar summary:hover{padding-left:14px}
.pillar summary .n{font-family:var(--display);font-size:16px;color:var(--accent)}
.pillar summary .t{font-family:var(--display);font-weight:400;font-size:clamp(22px,3vw,40px);text-transform:uppercase}
.pillar summary .ind{margin-left:auto;position:relative;width:16px;height:16px;flex:0 0 auto}
.pillar summary .ind::before{content:"";position:absolute;top:50%;left:0;width:16px;height:2px;background:var(--accent);transform:translateY(-50%)}
.pillar summary .ind::after{content:"";position:absolute;left:50%;top:0;width:2px;height:16px;background:var(--accent);transform:translateX(-50%);transition:transform .3s}
.pillar[open] summary .ind::after{transform:translateX(-50%) scaleY(0)}
.pillar-body{padding:0 6px 30px}
.pillar-body .pillar-lead{color:var(--grey);font-size:16px;line-height:1.6;max-width:72ch;margin-bottom:22px}
.pillar-body .pillar-sub{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:6px 0 14px}
.pillar-body .pillar-sub+ul{margin-bottom:22px}
.pillar-body ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px}
.pillar-body li{color:var(--grey);font-size:15px;padding-left:18px;position:relative}
.pillar-body li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:760px){.pillar-body ul{grid-template-columns:1fr}}

/* home contact details under CTA copy */
.cdetails{margin-top:28px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted)}
.cdetails a{color:#fff}.cdetails a:hover{color:var(--accent)}
.cta .c-strat.sec--light{background:var(--strategies)}

/* converge headline — SCROLL-SCRUBBED convergence: progress driven by --p (0..1),
   set from scroll position in site.js, so the animation tracks the scroll. */
.converge{--p:1}
.converge .cv-lines{position:relative;height:2px;width:min(560px,70%);margin:0 auto 36px}
.converge .cv-lines i{position:absolute;top:0;height:2px;width:calc(var(--p) * 50%)}
.converge .cv-lines .l{left:0;background:linear-gradient(90deg,transparent,var(--grey))}
.converge .cv-lines .r{right:0;background:linear-gradient(270deg,transparent,var(--accent))}
.converge .cv-lines .dot{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px rgba(var(--accent-rgb),.55);transform:translate(-50%,-50%) scale(var(--p))}
.converge .kw{display:inline-block;opacity:var(--p)}
.converge .k-stories{transform:translateX(calc((1 - var(--p)) * -42px))}
.converge .k-strat{transform:translateX(calc((1 - var(--p)) * 42px))}
@media(prefers-reduced-motion:reduce){.converge{--p:1}}

/* honeypot field on the enquiry forms: off-screen, never seen by people */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* ==========================================================================
   Editorial system. Paper pages with one black chapter, mixed-case display
   type, hairline rules, captions, red as an editor's mark. Sections are
   .ed (paper) or .ed.ink (black); the scoped variables re-theme the shared
   components inside either.
   ========================================================================== */
body.paper{background:var(--strategies);color:var(--stories)}
body.paper ::selection{background:var(--stories);color:var(--strategies)}
body.paper footer{background:var(--stories);color:#fff}
.ed{--line:rgba(6,6,6,.14);--muted:rgba(6,6,6,.56);--grey:#5b616c;padding:clamp(72px,10vh,128px) 0;background:var(--strategies);color:var(--stories)}
.ed[id]{scroll-margin-top:82px}
.ed.ink{--line:rgba(253,254,255,.16);--muted:rgba(253,254,255,.56);--grey:#c3cad3;background:var(--stories);color:#fff}
.ed .wrap{padding-left:clamp(20px,4vw,36px);padding-right:clamp(20px,4vw,36px)}
.folio{display:block;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* every headline is set in caps (brand book heading style); the tracking opens a touch and the line height tightens the way caps want */
.ed-t{font-family:var(--display);font-weight:400;font-size:clamp(32px,4.4vw,60px);line-height:.96;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
/* the payoff of a headline in Movement Red; Luke's range is 10 to 20% of a page's headline text */
h1 .g,h2 .g,h3 .g{color:var(--accent)}
.ed-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:clamp(34px,5vh,60px)}
.ed-head .folio{grid-column:1/3;padding-bottom:8px}
.ed-head .ed-t{grid-column:3/10}
.ed-head .aside{grid-column:10/13;justify-self:end;padding-bottom:8px}
.ed-lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--grey);max-width:56ch}
.ed-prose p{font-size:17px;line-height:1.7;color:var(--grey);margin:0 0 18px;max-width:60ch}
.ed-prose p:last-child{margin-bottom:0}
.ed-prose strong{color:inherit;font-weight:600}
.ed-link{font-family:var(--body);font-weight:500;font-size:14px;color:inherit;border-bottom:1.5px solid var(--accent);padding-bottom:3px;transition:color .25s}
.ed-link:hover{color:var(--accent)}
.ed-cap{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}
.ed-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:40px;background:var(--stories);color:#fff;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.02em;border:1px solid transparent;transition:.3s}
.ed-btn:hover{background:var(--accent);border-color:var(--accent)}
.ed-btn.ghost{background:transparent;border-color:var(--line);color:inherit}
.ed-btn.ghost:hover{border-color:currentColor;background:transparent}
.ink .ed-btn,.ed-hero .ed-btn{background:#fff;color:var(--stories)}
.ink .ed-btn:hover,.ed-hero .ed-btn:hover{background:var(--accent);color:#fff}
.ink .ed-btn.ghost,.ed-hero .ed-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.ink .ed-btn.ghost:hover,.ed-hero .ed-btn.ghost:hover{border-color:#fff;background:transparent}

/* hero: a silent film behind a sentence */
.ed-hero{position:relative;height:100svh;min-height:640px;background:#000;color:#fff;overflow:hidden}
.ed-hero .media{position:absolute;inset:0}
.ed-hero .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ed-hero .media iframe{position:absolute;left:50%;top:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity .5s ease}
.ed-hero .media iframe.on{opacity:1}
/* a loop hosted here fills the hero like the poster does */
.ed-hero .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.ed-hero .media video.on{opacity:1}
/* the top shade carries the logo and links while the bar above is still clear */
.ed-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.82) 100%);pointer-events:none}
.ed-hero .now{position:absolute;top:calc(82px + 26px);right:clamp(20px,4vw,36px);z-index:2;text-align:right;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.9}
.ed-hero .now b{display:block;color:#fff;font-weight:500}
/* a hero with several films: translucent chevrons either side swap the poster, the label and
   the film; the label fades between films */
.ed-hero .now{transition:opacity .4s}
.ed-hero .now.swap{opacity:0!important}
.ed-hero .media img{transition:opacity .6s}
.ed-hero .hero-nav{position:absolute;top:50%;left:0;right:0;z-index:3;display:flex;justify-content:space-between;padding:0 clamp(12px,2vw,28px);transform:translateY(-50%);pointer-events:none}
.ed-hero .hero-nav button{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(6,6,6,.28);backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:grid;place-items:center;opacity:.7;transition:opacity .25s,background .25s,border-color .25s}
.ed-hero .hero-nav button:hover,.ed-hero .hero-nav button:focus-visible{opacity:1;background:rgba(6,6,6,.5);border-color:#fff;outline:none}
.ed-hero .hero-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ed-hero .copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 clamp(20px,4vw,36px) clamp(32px,6vh,72px);display:grid;grid-template-columns:repeat(12,1fr);gap:16px 24px;max-width:1320px;margin:0 auto}
.ed-hero h1{grid-column:1/10;font-family:var(--display);font-weight:400;font-size:clamp(34px,5.4vw,80px);line-height:.92;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.ed-hero .sub{grid-column:1/7;color:rgba(255,255,255,.8);font-size:clamp(15px,1.2vw,17px);line-height:1.6;max-width:50ch}
.ed-hero .acts{grid-column:1/10;display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* a quick entrance on the first frame (there is no preloader): the headline starts at once */
.ed-hero h1,.ed-hero .sub,.ed-hero .acts,.ed-hero .now{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
body.ready .ed-hero h1{opacity:1;transform:none}
body.ready .ed-hero .sub{opacity:1;transform:none;transition-delay:.1s}
body.ready .ed-hero .acts{opacity:1;transform:none;transition-delay:.18s}
body.ready .ed-hero .now{opacity:1;transform:none;transition-delay:.3s}

/* landing-page hero: the sentence beside the form */
.ed-hero.ed-lp{height:auto;min-height:0;padding:calc(82px + clamp(40px,7vh,80px)) 0 clamp(48px,7vh,80px)}
/* the tall form card spans four rows; the last row takes its spare height, so the headline, intro and proof stay together */
.ed-lp .copy{position:relative;z-index:1;padding-top:0;padding-bottom:0;align-items:start;grid-template-rows:auto auto auto 1fr}
.ed-lp h1{grid-column:1/7;font-size:clamp(36px,4.4vw,66px)}
.ed-lp .sub{grid-column:1/7;max-width:46ch}
.ed-lp .proof{grid-column:1/7;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:10px}
.ed-lp .ed-card{grid-column:7/13;grid-row:1/5}
.ed-hero.ed-lp::after{background:radial-gradient(90% 70% at 10% 10%,rgba(205,37,42,.18),transparent 60%)}
/* a landing hero with a still behind it: the still is texture, the dark wash keeps the headline and the form card legible */
.ed-lp.has-bg .media img{opacity:.55}
.ed-hero.ed-lp.has-bg::after{background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.76) 45%,rgba(0,0,0,.58) 100%),radial-gradient(90% 70% at 10% 10%,rgba(205,37,42,.2),transparent 60%)}

/* paper card (the short form on dark) */
.ed-card{background:var(--strategies);color:var(--stories);border-radius:14px;padding:clamp(22px,3vw,34px);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.ed-card h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.05;margin-bottom:6px}
.ed-card .ed-cap{margin:0 0 20px}
/* "what you will get" on the location ad pages, the offer the ad made */
.ed-card .ed-cap:has(+ .ed-get-h){margin-bottom:14px}
.ed-card .ed-get-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);margin:0 0 8px}
.ed-card .ed-get{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:6px}
.ed-card .ed-get li{position:relative;padding-left:18px;font-size:14px;line-height:1.45}
.ed-card .ed-get li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:2px;background:var(--accent)}
.ed-card .cform .submit{justify-self:stretch;text-align:center;padding:16px}

/* clients strip */
.ed-clients{padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ed-clients .row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.ed-clients p{grid-column:1/4;font-size:13.5px;line-height:1.55;color:var(--grey)}
.ed-clients .logos-marquee{grid-column:4/13}
.ed-clients .logos-track img{filter:invert(1);opacity:1;height:clamp(48px,5vw,72px)}
.ink.ed-clients .logos-track img{filter:none;opacity:.9}

/* work grid: an 8-column frame beside a 4-column portrait, captions underneath */
.ed-work{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 24px}
/* a tile is a column whose image grows to the row's height, so an 8-column 16:10
   frame and a 4-column 4:5 portrait in the same row end on the same caption line */
.ed-work .tile{position:relative;display:flex;flex-direction:column;color:inherit;cursor:pointer}
.ed-work .tile .img{flex:1 1 auto}
.ed-work .w8{grid-column:span 8}
.ed-work .w4{grid-column:span 4}
.ed-work .w3{grid-column:span 3}
.ed-work .w3 .cap{flex-direction:column;gap:4px}
.ed-work .w3 .cap .c{white-space:normal}
.ed-work .still{cursor:default;margin:0}
.ed-work .img{position:relative;overflow:hidden;background:#111;aspect-ratio:16/10}
.ed-work .w4 .img{aspect-ratio:4/5}
/* grid-wide shapes, after the per-tile defaults they override */
.ed-work.portrait .img{aspect-ratio:4/5}
.ed-work.landscape .img{aspect-ratio:16/10}
/* film format cards: the still turns over to what the format is for and a Play button;
   hover or keyboard focus turns it on desktop, a tap turns it where there is no hover */
.ed-work.films{gap:34px 24px}
.fcard{cursor:pointer;perspective:1400px}
.fcard .fin{position:relative;flex:1 1 auto;aspect-ratio:3/2;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.fcard:hover .fin,.fcard.on .fin,.fcard:focus-within .fin{transform:rotateY(180deg)}
.ed-work .fcard .img,.ed-work .fcard .fb{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* the card's frame (.fin) sets the shape; .tile outranks the phone rule that makes .w4 pictures 16:10,
   which left an empty band under every film card on phones */
.ed-work .tile.fcard .img{aspect-ratio:auto;flex:none;border-radius:0}
.fcard .fb{transform:rotateY(180deg);display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2vw,26px);background:var(--stories);color:#fff;border-radius:0}
.fcard .fb .folio{color:rgba(253,254,255,.56)}
.fcard .fb p{font-size:14.5px;line-height:1.55;color:#c3cad3;margin:0}
.fcard .fb .play{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:0 0 4px;background:none;border:0;border-bottom:1.5px solid var(--accent);color:#fff;font-family:var(--body);font-weight:600;font-size:13px;cursor:pointer;transition:color .25s}
.fcard .fb .play::before{content:"";width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.fcard .fb .play:hover{color:var(--accent)}
/* the portfolio: three columns of mixed frames, read down each column, so the wall is not a grid of equal boxes */
.ed-work.ed-masonry{display:block;columns:3;column-gap:24px}
.ed-masonry .tile{break-inside:avoid;margin-bottom:34px}
.ed-masonry .tile .img{aspect-ratio:16/10}
.ed-masonry .tile:nth-child(3n+2) .img{aspect-ratio:4/5}
.ed-masonry .tile:nth-child(7n+4) .img{aspect-ratio:1/1}
.ed-masonry .tile:nth-child(11n+6) .img{aspect-ratio:3/4}
.ed-work .img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.ed-work .tile:hover .img img{transform:scale(1.03)}
.ed-work .tile[data-v] .img::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%) scale(.85);border-radius:50%;background:rgba(6,6,6,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/22px no-repeat;backdrop-filter:blur(2px);opacity:0;transition:.35s}
.ed-work .tile[data-v]:hover .img::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ed-work .cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.ed-work .cap .t{font-family:var(--display);font-size:19px;line-height:1.1}
.ed-work .cap .c{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}

/* results: a number, a client, their words */
.ed-cases{border-top:1.5px solid currentColor}
.ed-case{display:grid;grid-template-columns:repeat(12,1fr);gap:16px 24px;padding:38px 0;border-bottom:1px solid var(--line);align-items:start}
.ed-intro{margin:-18px 0 44px;max-width:60ch;font-size:17px;line-height:1.6;color:var(--grey)}
/* Movement Red is capped at about 5% of a layout, one component at a time: the quote rule carries it here, not the numbers */
.ed-case .num{grid-column:1/4;font-family:var(--display);font-weight:400;font-size:clamp(56px,7vw,100px);line-height:.88;letter-spacing:-.02em}
.ed-case .what{grid-column:4/8}
.ed-case .what b{display:block;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.1;margin-bottom:8px}
.ed-case .what p{color:var(--grey);font-size:15.5px;line-height:1.6}
.ed-case blockquote{grid-column:8/13;font-size:15.5px;line-height:1.65;color:var(--grey);padding-left:18px;border-left:2px solid var(--accent)}
.ed-case cite{display:block;margin-top:10px;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ed-note{font-size:12.5px;color:var(--muted);margin-top:16px;max-width:70ch}

/* text beside media */
.ed-split{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 24px;align-items:start}
.ed-split .txt{grid-column:1/6}
.ed-split .med{grid-column:7/13}
.ed-split .txt .folio{margin-bottom:18px}
.ed-split .txt .ed-t{margin-bottom:22px}
.ed-split .txt .ed-prose+.links,.ed-split .txt .ed-incl+.links{margin-top:22px}
.ed-split .links{display:flex;gap:18px;flex-wrap:wrap}

/* the people */
/* ten people: five across, two even rows, at every width */
.ed-team{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ed-team img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#000;filter:grayscale(1)}

/* meet the team: a card shows the name and role, and turns over to the portrait on
   hover; a tap or Enter turns it where there is no hover. Named tcard because .flip is the
   ed-split modifier that puts the figure on the left, and the two once collided: the
   landing pages' flipped sections rendered mirrored. */
.ed-flip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tcard{perspective:1400px;cursor:pointer;outline:none}
/* both faces share one grid cell: the card is as tall as the front's text needs (3:4 at least), and the portrait fills that */
.tcard .in{display:grid;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.tcard:hover .in,.tcard.on .in,.tcard:focus-visible .in{transform:rotateY(180deg)}
.tcard .f,.tcard .b{grid-area:1/1;border-radius:12px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* the front stays overflow:visible so a long bio can make the card taller than 3:4 instead of being clipped */
.tcard .f{display:flex;flex-direction:column;aspect-ratio:3/4;min-width:0;padding:clamp(16px,1.6vw,24px);background:var(--strategies);border:1px solid var(--line);transition:border-color .3s}
.tcard,.tcard .in{min-width:0}
.tcard .b{position:relative;overflow:hidden}
.tcard .b img{position:absolute;inset:0}
.tcard:hover .f{border-color:currentColor}
.tcard .f .nm{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,34px);line-height:1}
.tcard .f .ro{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.tcard .f p{margin-top:auto;font-size:14px;line-height:1.55;color:var(--grey)}
.tcard .b{transform:rotateY(180deg);background:#000}
.tcard .b img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.tcard .b .cap{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-family:var(--display);font-size:22px;line-height:1}
@media(prefers-reduced-motion:reduce){.tcard .in{transition:none}}
.ed-team-wrap{margin-top:clamp(64px,9vh,110px)}

/* studios */
/* three studios and a fourth card for everywhere else, so nobody outside the cities reads themselves out */
.ed-studios{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(48px,7vh,80px);border-top:1px solid var(--line);padding-top:26px}
.ed-studios .c{font-family:var(--display);font-size:22px;margin-bottom:8px}
.ed-studios .a{color:var(--grey);font-size:14.5px;line-height:1.7}
.ed-studios .a a:hover{color:var(--accent)}
.ed-studios .clock{display:block;font-size:12px;color:var(--muted);margin-top:8px}
.ed-studios .clock b{font-weight:500;color:inherit}
@media(max-width:1000px){.ed-studios{grid-template-columns:repeat(2,1fr)}}

/* service index */
.ed-index{border-top:1px solid var(--line)}
.ed-index a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:clamp(18px,1.7vw,23px);line-height:1.1;transition:padding .25s,color .25s}
.ed-index a:hover{padding-left:8px;color:var(--accent)}
.ed-index a span{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}
/* a channel under its umbrella: indented, smaller, a short red tick where the hierarchy is */
.ed-index a.sub{padding-left:30px;padding-top:11px;padding-bottom:11px;font-size:clamp(15px,1.3vw,18px);position:relative}
.ed-index a.sub::before{content:"";position:absolute;left:8px;top:50%;width:12px;height:1.5px;background:var(--accent)}
.ed-index a.sub:hover{padding-left:38px}

/* figure beside text */
.ed-figure{margin:0}
.ed-figure img{width:100%;height:auto;display:block;border-radius:14px;background:#0a0a0a}
/* a cut-out composite on paper: no frame, no fill behind the transparency */
.ed-figure.cut img{background:none;border-radius:0}
.ed-figure figcaption{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}
.ed-split .txt h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.1;margin:26px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.ed-split .txt h3:first-of-type{margin-top:0;padding-top:0;border-top:0}
.ed-split .med .ed-steps{max-width:none}
.ed-split+.ed-split{margin-top:clamp(48px,7vh,80px)}
.ed-split.flip .med{grid-column:1/7;grid-row:1}
.ed-split.flip .txt{grid-column:8/13}

/* two plain columns */
.ed-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 24px}
.ed-cols>div{grid-column:span 6}
.ed-cols h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.1;margin-bottom:14px;padding-top:16px;border-top:1.5px solid currentColor}

/* numbered list set in prose */
.ed-steps{counter-reset:s;list-style:none;border-top:1px solid var(--line);max-width:760px}
.ed-steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.6;color:var(--grey)}
.ed-steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-size:20px;color:var(--accent);line-height:1.5}
.ed-steps li b{color:inherit;font-weight:600}
.ink .ed-steps li b,.ink .ed-cols h3{color:#fff}

/* quotes */
.ed-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ed-quote{border-top:2px solid var(--accent);padding-top:20px}
.ed-quote p{font-size:16.5px;line-height:1.6}
/* a long run of quotes keeps hairlines; red stays on the results */
.ed-quotes.many{row-gap:44px}
.ed-quotes.many .ed-quote{border-top:1px solid var(--line)}
.ed-quote cite{display:block;margin-top:14px;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* reviews as masonry, because they run from one line to a page; /testimonials/ (Google reviews from
   scripts/google-reviews.mjs, and the named client quotes) */
.ed-reviews{columns:3;column-gap:40px}
.ed-reviews>figure{break-inside:avoid;margin:0 0 40px;padding-top:20px;border-top:1px solid var(--line-d)}
.ed-reviews:not(.all) .more{display:none}
.ed-review .st{color:var(--accent);letter-spacing:3px;font-size:14px;margin-bottom:12px}
.ed-review blockquote p{font-size:16px;line-height:1.6;margin:0 0 .7em}
.ed-review figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
.ed-rating{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:clamp(30px,4vh,48px)}
.ed-rating .score{font-family:var(--display);font-size:clamp(46px,5vw,68px);line-height:.9}
.ed-rating .st{color:var(--accent);letter-spacing:4px;font-size:20px}
.ed-rating .of{color:var(--muted-d);font-size:15px}
@media(max-width:1000px){.ed-reviews{columns:2}}
@media(max-width:760px){.ed-reviews{columns:1}}

/* faq */
.ed-faq{border-top:1px solid var(--line)}
.ed-faq details{border-bottom:1px solid var(--line)}
.ed-faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;list-style:none;font-family:var(--display);font-size:clamp(18px,1.8vw,23px);line-height:1.2}
.ed-faq summary::-webkit-details-marker{display:none}
.ed-faq summary::after{content:"+";flex:0 0 auto;font-family:var(--body);font-weight:300;font-size:26px;line-height:1;color:var(--accent);transition:transform .3s}
.ed-faq details[open] summary::after{transform:rotate(45deg)}
.ed-faq .a{padding:0 0 22px;color:var(--grey);font-size:16px;line-height:1.7;max-width:70ch}

/* closing */
.ed-cta{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 24px;align-items:end}
.ed-cta .ed-t{grid-column:1/8;font-size:clamp(40px,6vw,92px);line-height:.94;letter-spacing:-.018em}
.ed-cta .acts{grid-column:8/13;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ed-cta .acts .big{font-family:var(--display);font-size:clamp(20px,2.2vw,30px);line-height:1.1;border-bottom:1.5px solid var(--accent);padding-bottom:4px;transition:color .25s}
.ed-cta .acts .big:hover{color:var(--accent)}
.ed-cta .acts .small{font-size:13px;color:var(--muted)}

/* the journey at a glance: the services hub hero's side panel, in place of the form */
.ed-lp .ed-journey{grid-column:8/13;grid-row:1/5;align-self:end}
/* with the session form beside it, the page index sits under the proof line instead */
.ed-lp .ed-card~.ed-journey{grid-column:1/7;grid-row:4;align-self:start;margin-top:clamp(12px,2.5vh,28px)}
.ed-journey .folio{margin-bottom:12px}
.ed-journey ol{list-style:none;border-top:1px solid var(--line)}
.ed-journey a{display:grid;grid-template-columns:40px 1fr auto;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);transition:color .25s,padding .25s}
.ed-journey a:hover{color:var(--accent);padding-left:6px}
.ed-journey .n{font-family:var(--display);font-size:15px;color:var(--muted)}
.ed-journey .s{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);line-height:1.05}
.ed-journey .d{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}

/* the journey in full: one stage per row, numbered in order */
.ed-stages{border-top:1.5px solid currentColor}
.ed-stage{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:clamp(40px,6vh,64px) 0;border-bottom:1px solid var(--line);scroll-margin-top:82px}
.ed-stage .num{grid-column:1/3;font-family:var(--display);font-size:clamp(56px,7vw,100px);line-height:.88;letter-spacing:-.02em}
.ed-stage .body{grid-column:3/8}
.ed-stage .body .folio{margin-bottom:12px}
.ed-stage .body .ed-t{font-size:clamp(28px,3.2vw,44px);margin-bottom:18px}
.ed-stage .side{grid-column:9/13}
.ed-stage .side .folio{margin-bottom:10px}
.ed-incl{list-style:none;columns:2;column-gap:24px;margin-top:26px;border-top:1px solid var(--line)}
.ed-incl li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--grey)}

/* the project form beside the direct lines (start a project, contact) */
.ed-form{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 24px;align-items:start}
.ed-form .lead{grid-column:1/9}
.ed-form #leadform{max-width:none;margin:0}
.ed-form aside{grid-column:10/13;position:sticky;top:110px}
.ed-form aside .folio{margin-bottom:12px}
.ed-form aside p{color:var(--grey);font-size:15px;line-height:1.6;margin:0 0 26px}
.ed-form aside .ed-index{margin-bottom:26px}
.ed-lp .embed-brand{grid-column:1/-1}
html.embed .ed-hero.ed-lp{padding:clamp(28px,5vw,44px) 0 clamp(24px,4vw,36px)}
html.embed .ed-hero.ed-lp h1{font-size:clamp(30px,6vw,52px)}
html.embed .ed{padding:clamp(28px,4vw,44px) 0 44px}
html.embed .ed-form aside{display:none}
html.embed .ed-form .lead{grid-column:1/-1}

/* WordPress content: articles, projects and the legal pages */
.ed-lp.post-top h1{grid-column:1/11;font-size:clamp(32px,3.8vw,56px)}
.ed-lp.post-top .proof{grid-column:1/11;margin:0 0 6px}
.ed-lp .proof a{color:inherit;border-bottom:1px solid rgba(255,255,255,.3);transition:.25s}
.ed-lp .proof a:hover{color:#fff;border-color:var(--accent)}
.post .wrap>*{max-width:780px}
.post-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--grey);margin-bottom:40px}
.post-figure{margin:0 0 44px}
.post-figure img{width:100%;height:auto;border-radius:14px;background:#0a0a0a}
.post-body{font-size:17.5px;line-height:1.75;color:var(--grey)}
.post-body>*+*{margin-top:1.1em}
.post-body h2,.post-body h3,.post-body h4,.post-body h5{font-family:var(--display);font-weight:400;color:var(--stories);line-height:1.1;margin-top:1.8em}
.post-body h2{font-size:clamp(26px,2.6vw,36px)}
.post-body h3{font-size:clamp(21px,2vw,27px)}
.post-body h4,.post-body h5{font-size:20px}
.post-body>:first-child{margin-top:0}
.post-body a{color:var(--stories);border-bottom:1.5px solid var(--accent);transition:color .25s}
.post-body a:hover{color:var(--accent)}
.post-body ul,.post-body ol{padding-left:1.3em}
.post-body li+li{margin-top:.4em}
.post-body strong,.post-body b{color:var(--stories);font-weight:600}
.post-body blockquote{border-left:2px solid var(--accent);padding-left:18px;color:var(--stories)}
.post-body img{width:100%;height:auto;border-radius:10px}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.post-body th,.post-body td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.post-body th{color:var(--stories);font-weight:600}
.wp-video{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.wp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* article cards */
.ed-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 24px;margin-top:40px}
.ed-head+.ed-posts{margin-top:0}
.ed-post{display:block;color:inherit}
.ed-post .img{aspect-ratio:16/10;overflow:hidden;background:#111;border-radius:10px;margin-bottom:14px}
.ed-post .img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.ed-post:hover .img img{transform:scale(1.03)}
.ed-post .folio{margin-bottom:8px}
.ed-post h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.12;margin-bottom:8px;transition:color .25s}
.ed-post:hover h3{color:var(--accent)}
.ed-post p{font-size:14.5px;line-height:1.6;color:var(--grey)}

/* chips: the article categories and the work filter */
.ed-chips{display:flex;flex-wrap:wrap;gap:8px}
.ed-chips a,.ed-chips button{font-family:var(--body);font-size:13px;line-height:1.2;padding:11px 16px;border:1px solid var(--line);border-radius:40px;background:none;color:inherit;cursor:pointer;transition:.25s}
.ed-chips a:hover,.ed-chips button:hover{border-color:currentColor}
.ed-chips .on{background:var(--stories);border-color:var(--stories);color:#fff}
.ed-chips+.ed-work{margin-top:40px}

/* pager */
.ed-pager{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
.ed-pager a{border-bottom:1.5px solid var(--accent);padding-bottom:2px;font-weight:500}
.ed-pager .at{color:var(--muted)}

@media(max-width:1000px){
  .ed-head .folio,.ed-head .ed-t,.ed-head .aside{grid-column:1/-1}
  .ed-head .aside{justify-self:start}
  .ed-hero h1,.ed-hero .sub,.ed-hero .acts{grid-column:1/-1}
  .ed-hero .now{display:none}
  .ed-lp .copy{grid-template-rows:none}
  .ed-lp h1,.ed-lp .sub,.ed-lp .proof,.ed-lp .ed-card,.ed-lp .ed-journey,.ed-lp .ed-card~.ed-journey{grid-column:1/-1;grid-row:auto}
  .ed-lp .ed-journey{margin-top:24px}
  .ed-stage .num,.ed-stage .body,.ed-stage .side{grid-column:1/-1}
  .ed-form .lead,.ed-form aside{grid-column:1/-1;position:static}
  .ed-stage{gap:18px}
  .ed-stage .num{font-size:48px}
  .ed-clients p,.ed-clients .logos-marquee{grid-column:1/-1}
  .ed-split .txt,.ed-split .med,.ed-split.flip .txt,.ed-split.flip .med{grid-column:1/-1;grid-row:auto}
  .ed-case .num,.ed-case .what,.ed-case blockquote{grid-column:1/-1}
  .ed-work .w3{grid-column:span 6}
  .ed-work.films .w4{grid-column:span 6}
  .ed-work.ed-masonry{columns:2}
  .ed-posts{grid-template-columns:repeat(2,1fr)}
  .ed-lp.post-top h1,.ed-lp.post-top .proof{grid-column:1/-1}
  .ed-cols>div{grid-column:1/-1}
  .ed-flip{grid-template-columns:repeat(3,1fr)}
  .ed-quotes{grid-template-columns:1fr}
  .ed-cta .ed-t,.ed-cta .acts{grid-column:1/-1}
}
@media(max-width:760px){
  .ed-work .w8,.ed-work .w4{grid-column:1/-1}
  .ed-work .w4 .img{aspect-ratio:16/10}
  .ed-work.ed-masonry{columns:1}
  .ed-masonry .tile{margin-bottom:28px}
  .ed-work.films .w4{grid-column:1/-1}
  .fcard .fin{aspect-ratio:4/3}
  .ed-team{gap:6px}
  .ed-flip{grid-template-columns:repeat(2,1fr);gap:10px}
  .tcard .f p{font-size:13px}
  .ed-studios{grid-template-columns:1fr}
  .ed-posts{grid-template-columns:1fr}
  .ed-hero{min-height:560px}
  /* the copy covers more of a phone-shaped frame, so the shade starts higher */
  .ed-hero:not(.ed-lp)::after{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 28%,rgba(0,0,0,.5) 52%,rgba(0,0,0,.88) 100%)}
}
@media(prefers-reduced-motion:reduce){
  .ed-hero h1,.ed-hero .sub,.ed-hero .acts,.ed-hero .now{opacity:1!important;transform:none!important}
}

/* ---- Ask Bleo, the AI chat (src/partials/chat.html). A pill bottom right that opens a panel;
   on a phone the panel takes the whole screen. Above the page, below the header's menus, the
   video lightbox and the lead pop-up. ---- */
.askb-open{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:150;display:flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 16px;border:0;border-radius:999px;background:var(--strategies);color:var(--stories);font:600 13px/1 var(--body);letter-spacing:.04em;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s ease,box-shadow .2s ease}
.askb-open:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.askb-open svg{width:20px;height:20px}
.askb-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
html.askb-on .askb-open,html.menu-open .askb-open,html.embed .askb{display:none}
.askb-panel{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:150;display:flex;flex-direction:column;width:min(400px,calc(100vw - 40px));height:min(640px,calc(100vh - 120px));background:#0d0d0e;color:var(--strategies);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.askb-panel[hidden]{display:none}
.askb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 14px 14px 18px;border-bottom:1px solid var(--line)}
.askb-title{font-family:var(--display);font-size:24px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.askb-sub{margin-top:5px;font-size:12px;color:var(--muted)}
.askb-close{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:inherit;cursor:pointer}
.askb-close svg{width:18px;height:18px}
.askb-log{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:18px}
.askb-msg{max-width:86%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.askb-msg p+p,.askb-msg p+ul,.askb-msg ul+p{margin-top:8px}
.askb-msg ul{padding-left:18px}
.askb-msg a{text-decoration:underline;text-underline-offset:2px}
.askb-ai{align-self:flex-start;background:rgba(255,255,255,.07);border-bottom-left-radius:4px}
.askb-me{align-self:flex-end;background:var(--strategies);color:var(--stories);border-bottom-right-radius:4px}
.askb-typing{display:flex;gap:4px;padding:15px 14px}
.askb-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:askb-dot 1s infinite ease-in-out}
.askb-typing span:nth-child(2){animation-delay:.15s}
.askb-typing span:nth-child(3){animation-delay:.3s}
@keyframes askb-dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.askb-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
.askb-chips[hidden]{display:none}
.askb-chips button{min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:none;color:inherit;font:500 13px/1.2 var(--body);cursor:pointer}
.askb-chips button:hover{border-color:var(--strategies)}
.askb-form{display:flex;align-items:flex-end;gap:8px;padding:12px 12px 8px;border-top:1px solid var(--line)}
.askb-form textarea{flex:1;min-height:44px;max-height:120px;resize:none;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05);color:inherit;font:16px/1.4 var(--body)}
.askb-form textarea:focus{outline:none;border-color:rgba(253,254,255,.42)}
.askb-send{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--strategies);color:var(--stories);cursor:pointer}
.askb-send svg{width:20px;height:20px}
.askb-send:disabled{opacity:.4;cursor:default}
.askb-note{padding:0 16px calc(12px + env(safe-area-inset-bottom));font-size:11px;color:var(--muted);text-align:center}
@media(max-width:640px){
  /* a round button on a phone, so it clears the page's own buttons */
  .askb-open{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:52px;height:52px;padding:0;justify-content:center}
  .askb-open span{display:none}
  .askb-open svg{width:22px;height:22px}
  .askb-dot{position:absolute;top:12px;right:12px}
  .askb-panel{inset:0;z-index:250;width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
  html.askb-on{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  .askb-open{transition:none}
  .askb-typing span{animation:none;opacity:.6}
}
/* the contact form inside the chat */
.askb-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04)}
.askb-card label{display:grid;gap:5px;font-size:12px;color:var(--muted)}
.askb-card .wide{grid-column:1/-1}
.askb-card label{min-width:0}
.askb-card input,.askb-card textarea{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.05);color:var(--strategies);font:16px/1.3 var(--body);resize:none}
.askb-card input:focus,.askb-card textarea:focus{outline:none;border-color:rgba(253,254,255,.42)}
.askb-card button{min-height:44px;border:0;border-radius:10px;background:var(--strategies);color:var(--stories);font:600 14px/1 var(--body);cursor:pointer}
.askb-card button:disabled{opacity:.5;cursor:default}
.askb-err{font-size:12px;color:#ff8a8d}
.askb-err[hidden]{display:none}
.askb-form textarea:disabled{opacity:.5}
/* the nudge above the button, once a visit after 15 seconds on a page */
.askb-tease{position:fixed;right:20px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:150;display:flex;align-items:center;gap:2px;max-width:min(310px,calc(100vw - 40px));padding:4px 4px 4px 16px;background:var(--strategies);color:var(--stories);border-radius:16px 16px 4px 16px;box-shadow:0 14px 34px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.askb-tease.on{opacity:1;transform:none}
.askb-tease[hidden],html.askb-on .askb-tease,html.menu-open .askb-tease{display:none}
.askb-tease-open{flex:1;padding:10px 0;border:0;background:none;color:inherit;font:500 14px/1.35 var(--body);text-align:left;cursor:pointer}
.askb-tease-x{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--muted-d);cursor:pointer}
.askb-tease-x svg{width:14px;height:14px}
@media(max-width:640px){
  .askb-tease{right:16px;bottom:calc(78px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px)}
}
@media(prefers-reduced-motion:reduce){
  .askb-tease{transition:none}
}
/* a sent enquiry's success message: the element GTM's lead conversions watch for (see leadConverted in site.js) */
.lead-sent{margin-top:14px;padding:12px 14px;border-radius:10px;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.35);font-size:14px;line-height:1.4}
.lead-sent-data{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}