/* ============ Design tokens ============ */
  :root{
    --obsidian:#0E0E0E;
    --bone:#F9F6F0;
    --bone-tint:#F4F0E9;
    --smoke:#5C5957;
    --violet:#5825D9;
    --violet-ink:#4D21BF;
    --violet-light:#B8A4FF;
    --rule:rgba(14,14,14,0.16);
    --rule-dark:rgba(244,239,230,0.2);
    --bone-72:rgba(244,239,230,0.72);
    --bone-75:rgba(244,239,230,0.75);
    --bone-70:rgba(244,239,230,0.70);
    --bone-50:rgba(244,239,230,0.50);
    --maxw:1560px;
    --gutter:56px;
    --gutter-inset:24px;
  }

  /* ============ Reset / base ============ */
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html{overflow-x:hidden;}
  body{
    margin:0;
    background:var(--bone);
    color:var(--obsidian);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  ::selection{background:var(--violet);color:var(--bone);}
  img{display:block;max-width:100%;}
  h1,h2,h3,p{margin:0;}
  a{color:inherit;text-decoration:none;}

  /* ============ Layout wrappers ============ */
  .container{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
  .container.is-inset{padding-left:var(--gutter-inset);padding-right:var(--gutter-inset);}
  .section-top{padding-top:clamp(80px,9vw,128px);}

  /* ============ Typography ============ */
  h1,h2,h3,.h1,.h2,.cs-hero__title,.cs-quote blockquote,.cs-stat__val{font-family:'Familjen Grotesk',system-ui,sans-serif;}
  .h1{font-weight:400;font-size:clamp(52px,6.4vw,94px);line-height:1.0;letter-spacing:-0.025em;max-width:90%;}
  .h2{font-weight:600;font-size:clamp(32px,3.4vw,44px);letter-spacing:-0.02em;}
  .h2.is-studio{font-weight:500;font-size:clamp(40px,4.6vw,64px);letter-spacing:-0.025em;line-height:1.0;}
  .h2.is-cta{font-weight:500;font-size:clamp(44px,5.4vw,80px);line-height:0.98;letter-spacing:-0.03em;}
  .h2.is-book{font-weight:500;font-size:clamp(36px,4vw,54px);letter-spacing:-0.022em;line-height:1.02;}
  .h3{font-weight:600;font-size:30px;letter-spacing:-0.015em;}
  .h3.is-studio{font-size:23px;letter-spacing:-0.01em;}
  .h3.is-faq{font-size:22px;letter-spacing:-0.01em;}
  .lead{font-size:17.5px;line-height:1.6;}
  .body{font-size:17px;line-height:1.6;}
  .body-sm{font-size:15.5px;line-height:1.55;}
  .em-violet{color:var(--violet);}
  .em-violet-light{color:var(--violet-light);}
  .t-smoke{color:var(--smoke);}

  /* ============ Two-part button ============ */
  .btn{display:inline-flex;align-items:stretch;}
  .btn__main{white-space:nowrap;font-weight:600;font-size:16px;background:var(--violet);color:var(--bone);padding:16px 26px;transition:background 200ms ease;}
  .btn__arrow{display:flex;align-items:center;justify-content:center;width:50px;background:var(--obsidian);color:var(--bone);transition:background 200ms ease,color 200ms ease;}
  .btn:hover .btn__main{background:var(--violet-ink);}
  .btn__arrow .ai{display:inline-flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(.4,0,.2,1);}
  .btn:hover .btn__arrow .ai{transform:translateX(5px);}
  .btn.is-nav .btn__main{font-size:15px;padding:12px 20px;}
  .btn.is-nav .btn__arrow{width:42px;}
  .btn.is-on-dark .btn__arrow{background:var(--bone);color:var(--obsidian);}

  /* ============ Announcement ============ */
  .announce{background:var(--obsidian);color:var(--bone);text-align:center;padding:11px 24px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:14px;}
  .announce a{white-space:nowrap;color:var(--violet-light);font-weight:600;padding:4px 10px;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:background 200ms ease,color 200ms ease;}
  .announce a .ai{display:inline-flex;transition:transform 200ms cubic-bezier(.4,0,.2,1);}
  .announce a:hover .ai{transform:translateX(4px);}
  .announce a:hover{background:var(--violet);color:var(--bone);}

  /* ============ Nav ============ */
  .topbar{position:sticky;top:0;z-index:60;}
  .nav{background:var(--bone);transition:background 300ms ease,box-shadow 300ms ease,backdrop-filter 300ms ease;}
  .nav.is-scrolled{background:rgba(244,239,230,0.6);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 rgba(14,14,14,0.08);}
  .nav__inner{padding-top:18px;padding-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
  .nav__brand{font-weight:500;font-size:20px;letter-spacing:-0.012em;white-space:nowrap;}
  .nav__burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer;}
  .nav__burger span{display:block;width:24px;height:2px;background:var(--obsidian);transition:transform 260ms cubic-bezier(.4,0,.2,1);}
  .topbar.menu-open .nav__burger span:first-child{transform:translateY(4px) rotate(45deg);}
  .topbar.menu-open .nav__burger span:last-child{transform:translateY(-4px) rotate(-45deg);}
  .nav__menu{display:none;}
  .nav__right{display:flex;align-items:center;gap:34px;}
  /* nav hover: the word slides up and a violet duplicate rises into its place.
     Replaces the underline-on-hover pattern. */
  .nav__link{font-weight:500;font-size:15px;display:inline-block;overflow:hidden;line-height:1.5;}
  .nav__link span{display:block;position:relative;transition:transform 380ms cubic-bezier(.65,0,.35,1);}
  .nav__link span::after{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--violet);}
  .nav__link:hover span{transform:translateY(-100%);}
  .nav__toggle{display:none;}

  /* ============ Hero ============ */
  .hero__panel{position:relative;background:var(--obsidian);color:var(--bone);padding:clamp(56px,6vw,88px) 0 0 0;overflow:hidden;
    min-height:calc(100svh - var(--topbar-h,108px));display:flex;flex-direction:column;justify-content:center;padding-bottom:clamp(40px,6vh,80px);}
  .hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
  .hero__halftone{position:absolute;top:8px;right:-150px;width:70%;height:98%;background:url('/assets/hero-halftone.svg') no-repeat right top;background-size:cover;opacity:0.9;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(to left,black 86%,transparent 100%);mask-image:linear-gradient(to left,black 86%,transparent 100%);animation:halftoneIn 1600ms ease 150ms both;}
  @keyframes halftoneIn{from{opacity:0;}to{opacity:0.9;}}
  /* hero entrance — staggered fade-up */

  .hero .h1{animation:fadeInUp 700ms cubic-bezier(.2,.7,.3,1) 170ms both;}
  .hero__sub{animation:fadeInUp 700ms cubic-bezier(.2,.7,.3,1) 290ms both;}
  .hero .btn{animation:fadeInUp 700ms cubic-bezier(.2,.7,.3,1) 400ms both;}
  .hero__scrim{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#0E0E0E 0%,#0E0E0E 52%,rgba(14,14,14,0.88) 66%,rgba(14,14,14,0.5) 80%,rgba(14,14,14,0) 94%);}
  /* flex column so the inline-flex CTA contributes its true height; as an
     inline element it overflowed the line box and ate ~10px of the gap below */
  .hero__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;}
  .hero__locator{display:flex;align-items:center;gap:12px;margin-bottom:30px;color:var(--bone);}
  .hero__locator svg{flex:none;}
  .hero__locator-text{font-family:'Roboto',system-ui,sans-serif;font-weight:500;font-size:15.5px;letter-spacing:0.02em;color:var(--bone);}
  /* whole row fades in together, riding the halftone drift (150-1750ms) */
  .hero__locator{animation:locatorFade 900ms ease 300ms both;}
  @keyframes locatorFade{from{opacity:0;}to{opacity:1;}}
  .hero__sub{color:var(--bone-75);margin-top:32px;max-width:52ch;}
  .hero .btn{margin-top:36px;}
  /* Logo marquee: held to the hero's left column so it never runs under the
     map. The overlap was what made the hero feel busy, not the motion. */
  .hero__logos{position:relative;z-index:2;width:min(45%,620px);margin-top:7rem;}
  .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,black 9%,black 91%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,black 9%,black 91%,transparent 100%);}
  .marquee__track{display:flex;width:max-content;animation:marquee 50s linear infinite;}
  .marquee:hover .marquee__track{animation-play-state:paused;}
  .marquee__set{display:flex;align-items:center;gap:88px;padding-right:88px;}
  .marquee__set span{font-weight:600;font-size:19px;color:var(--bone-75);white-space:nowrap;}
  /* client logos — heights tuned per-logo for optical balance (artboards are tight bboxes) */
  /* per-logo heights are optical, not uniform — each mark carries a different
     amount of visual weight at the same measured height */
  .marquee__set img{display:block;width:auto;flex:none;opacity:0.72;}
  .marquee__set img.l-latinxed{height:24px;}
  .marquee__set img.l-amexcan{height:24px;}
  .marquee__set img.l-frontline{height:29px;}
  .marquee__set img.l-gsp{height:31px;}
  .marquee__set img.l-uconn{height:28px;}
  .marquee__set img.l-sol{height:32px;}
  .marquee__set img.l-immigration{height:27px;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @keyframes fadeInUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  @keyframes wordToViolet{from{color:var(--bone);}to{color:var(--violet-light);}}
  .hero__perform{color:var(--violet-light);animation:wordToViolet 600ms ease 1050ms both;}
  @media(prefers-reduced-motion:reduce){
    .marquee__track{animation:none;}

    .hero__locator{animation:none;}
    .hero__perform{animation:none;}
    .hero__halftone,.hero__locator,.hero .h1,.hero__sub,.hero .btn{animation:none;opacity:1;transform:none;}
    .hero__halftone{opacity:0.9;}
    .slideshow img{animation:none;}
    .slideshow img:first-child{opacity:1;}
  }

  /* ============ Header split ============ */
  .head-split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:40px;}
  .head-split .intro{color:var(--smoke);font-size:16px;line-height:1.55;max-width:36ch;}

  /* ============ Services quadrant ============ */
  .head-split.is-services{align-items:flex-start;flex-wrap:nowrap;}
  .head-split.is-services > div{flex:1 1 auto;min-width:0;}
  .head-split.is-services .h2{max-width:34ch;}
  .head-split.is-services .intro{margin-top:16px;}
  .svc-link{flex:none;margin-top:14px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
  .svc-link .ico-arw{width:15px;height:15px;}
  .services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .services__cell{position:relative;overflow:hidden;background:var(--bone-tint);padding:0;display:flex;flex-direction:column;cursor:pointer;color:inherit;text-decoration:none;transition:background 240ms ease;}
  .services__cell:hover{background:#EDE8DE;}
  /* generated halftone panel, one field per service. The violet dots live in a
     separate inline <svg> layer so they can be animated individually; the ink
     layer stays an external file so it caches. */
  .svc__panel{position:relative;background:var(--obsidian);line-height:0;}
  .svc__panel img{width:100%;height:auto;display:block;}
  .svc__glow{position:absolute;inset:0;width:100%;height:100%;}
  .svc__glow circle{opacity:0.86;}
  .services__cell.is-powering .svc__glow circle{animation:svcPowerOn 560ms cubic-bezier(.4,0,.2,1) var(--d,0ms) both;}
  @keyframes svcPowerOn{
    0%{opacity:0.30}
    30%{opacity:1}
    42%{opacity:0.42}
    58%{opacity:1}
    100%{opacity:1}
  }
  .svc__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;}
  .services__cell .h3{font-size:23px;margin:0;}
  .services__cell .body-sm{color:var(--smoke);margin-top:auto;padding-top:26px;max-width:32ch;}
  .badge{margin-top:14px;width:150px;max-width:100%;height:auto;display:block;}

  /* ============ Work ============ */
  .work__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px;}
  /* standalone CTA links: bordered box that fills on hover. Square, not pill —
     the brand is hard-edged. No underline. */
  .work__all{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;color:var(--bone);background:var(--obsidian);border:1px solid var(--obsidian);padding:11px 17px;transition:background 240ms ease,color 240ms ease,border-color 240ms ease;}
  .work__all:hover{background:var(--violet);color:var(--bone);border-color:var(--violet);}
  .work__all-arrow{display:inline-block;transition:transform 200ms cubic-bezier(.4,0,.2,1);}
  .work__all:hover .work__all-arrow{transform:translateX(4px);}
  .img-slot{background:var(--bone-tint);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;color:var(--smoke);font-size:13px;text-align:center;}
  .img-slot img{width:100%;height:100%;object-fit:cover;}
  .img-slot video{width:100%;height:100%;object-fit:cover;display:block;}
  .slideshow{position:absolute;inset:0;}
  .slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:slideshow 17.5s linear infinite;}
  @keyframes slideshow{0%{opacity:0}2%{opacity:1}18%{opacity:1}22%{opacity:0}100%{opacity:0}}
  .work-card{display:block;text-decoration:none;color:inherit;}
  .caption{display:flex;align-items:center;background:var(--obsidian);color:var(--bone);padding:14px 18px;transition:background 220ms ease,color 220ms ease;}
  .caption__name{font-weight:600;font-size:15px;margin-right:auto;}
  .caption__meta{font-size:13.5px;color:var(--bone);text-align:right;line-height:1.3;transition:color 220ms ease;}
  .caption__arrow{display:inline-flex;align-items:center;justify-content:center;width:0;margin-left:0;opacity:0;overflow:hidden;font-weight:500;transition:width 220ms ease,margin-left 220ms ease,opacity 200ms ease;}
  .work-card:hover .caption{background:var(--violet);color:var(--bone);}
  .work-card:hover .caption__name{color:var(--bone);}
  .work-card:hover .caption__meta{color:var(--bone);}
  .work-card:hover .caption__arrow{width:18px;margin-left:12px;opacity:1;}
  .caption__meta .meta-hover{display:none;}
  .work-card:hover .caption__meta .meta-default{display:none;}
  .work-card:hover .caption__meta .meta-hover{display:inline;}
  .work__two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;}
  .work__two .caption{padding:12px 16px;}
  .work__two .caption__name{font-size:14px;}
  .work__two .caption__meta{font-size:13px;}
  .work__quote{font-weight:500;font-size:clamp(21px,2vw,26px);line-height:1.45;margin-top:64px;max-width:40ch;}
  .work__quote .attr{color:var(--smoke);font-size:17px;white-space:nowrap;}
  /* Testimonials — split panel */

  /* ============ Stats ============ */

  /* ============ Studio (full-bleed dark) ============ */
  .studio{background:var(--obsidian);color:var(--bone);margin-top:clamp(80px,9vw,128px);padding:clamp(80px,9vw,120px) 0;}
  .studio__head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:64px;}
  .studio__head .intro{font-size:17px;line-height:1.6;color:var(--bone-72);max-width:44ch;}
  .studio__proc{display:grid;grid-template-columns:1fr;gap:0;max-width:76ch;padding-top:44px;}
  .studio__num{font-weight:600;font-size:15px;color:var(--violet-light);}
  .studio__proc .h3{margin:14px 0 10px 0;}
  .studio__proc p{font-size:15.5px;line-height:1.6;color:var(--bone-70);}

  /* ============ FAQ ============ */
  .faq{margin:0 0 44px 0;}
  /* FAQ — accordion */
  .faq__list{border-top:1px solid var(--obsidian);}
  .faq__item{border-bottom:1px solid var(--rule);}
  .faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;background:none;border:0;padding:26px 0;cursor:pointer;text-align:left;font-family:inherit;color:var(--obsidian);transition:color 200ms ease;}
  .faq__q:hover{color:var(--violet);}
  .faq__label{font-weight:600;font-size:22px;letter-spacing:-0.01em;}
  /* open/close indicator: thin pill — outlined and faded when closed,
     filled violet when open */
  .faq__sign{flex:none;width:34px;height:8px;border-radius:99px;border:1.5px solid var(--obsidian);opacity:0.3;background:transparent;transition:opacity 240ms ease,background 240ms ease,border-color 240ms ease;}
  .faq__item.is-open .faq__q{color:var(--violet);}
  .faq__item.is-open .faq__sign{opacity:1;background:var(--violet);border-color:var(--violet);}
  .faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms cubic-bezier(.4,0,.2,1);}
  .faq__item.is-open .faq__panel{grid-template-rows:1fr;}
  .faq__panel > div{overflow:hidden;}
  .faq__panel p{font-size:15.5px;line-height:1.62;color:var(--smoke);max-width:62ch;margin:0;padding-bottom:28px;}
  .faq__cta{color:var(--violet);font-weight:600;border-bottom:2px solid var(--violet);padding-bottom:1px;transition:opacity 200ms ease;}
  .faq__cta:hover{opacity:0.72;}

  /* ============ Book a call ============ */
  .book__grid{display:grid;grid-template-columns:460px 1fr;gap:clamp(40px,5vw,80px);align-items:center;}
  .book__portrait{aspect-ratio:1/1;}
  .book__body{color:var(--smoke);margin:26px 0 0 0;max-width:60ch;font-size:17px;line-height:1.62;}
  .book__actions{display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap;}
  .book__aside{font-size:15px;color:var(--smoke);}

  /* ============ CTA (inset dark) ============ */
  .cta{padding-bottom:24px;}
  .cta__panel{position:relative;overflow:hidden;background:var(--obsidian);color:var(--bone);padding:clamp(72px,8vw,112px) clamp(40px,5vw,72px);}
  .cta__halftone{position:absolute;top:-14%;right:-90px;width:56%;height:128%;background:url('/assets/hero-halftone.svg') no-repeat right center;background-size:contain;opacity:0.22;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(to left,black 62%,transparent 100%);mask-image:linear-gradient(to left,black 62%,transparent 100%);}
  .cta__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 0.7fr;gap:64px;align-items:end;}
  .cta__body{color:var(--bone-75);font-size:17px;line-height:1.6;}
  .cta .btn{margin-top:30px;}
  .cta__email{display:inline-block;margin-top:22px;font-weight:500;font-size:17px;color:var(--bone);transition:color 220ms ease;}
  .cta__email:hover{color:var(--violet-light);}

  /* ============ Footer ============ */
  /* ---- Footer: dark full-bleed block, columns, US-MX locator, cropped wordmark ---- */
  .footer{background:var(--obsidian);color:var(--bone);margin-top:clamp(56px,7vw,104px);padding-top:clamp(64px,7vw,104px);overflow:hidden;}
  .footer__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
  .footer__top{display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(40px,6vw,88px);}
  .footer__brand{font-weight:500;font-size:19px;letter-spacing:-0.012em;display:block;}
  .footer__tag{margin-top:16px;font-size:15px;line-height:1.6;color:var(--bone-72);max-width:34ch;}
  .footer__email{display:inline-block;margin-top:20px;font-weight:500;font-size:15.5px;color:var(--bone);transition:color 220ms ease;}
  .footer__email:hover{color:var(--violet-light);}
  .footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);}
  .footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
  .footer__ch{font-family:'Roboto',system-ui,sans-serif;font-weight:500;font-size:13px;letter-spacing:0.02em;color:var(--bone-50);margin:0 0 6px 0;text-transform:none;}
  .footer__col a{font-size:15px;color:var(--bone);transition:color 220ms ease,transform 220ms cubic-bezier(.4,0,.2,1);}
  .footer__col a:hover{color:var(--violet-light);transform:translateX(3px);}

  /* locator: the halftone with both offices pinned — the moat, shown not stated */
  .footer__geo{margin-top:clamp(56px,7vw,88px);display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
  .footer__map{position:relative;width:clamp(240px,30vw,400px);aspect-ratio:760/510;flex:none;}
  .footer__map::before{content:"";position:absolute;inset:0;background:url('/assets/hero-halftone.svg') no-repeat center/contain;opacity:0.42;}
  .footer__pin{position:absolute;width:8px;height:8px;background:var(--violet-light);border-radius:50%;transform:translate(-50%,-50%);}
  .footer__pin::after{content:"";position:absolute;inset:-8px;border:1px solid var(--violet-light);border-radius:50%;opacity:0.4;}
  .footer__pin.is-nc{left:77%;top:44%;}
  /* the line between the two offices: the claim, drawn */
  .footer__link-line{position:absolute;left:77%;top:44%;width:44.51%;height:1px;
    background:linear-gradient(to right,var(--violet-light),rgba(184,164,255,0.25));
    transform-origin:0 50%;transform:rotate(143.98deg);opacity:0.55;}
  .footer__pin.is-mx{left:41%;top:83%;}
  .footer__locs{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,72px);align-items:flex-start;}
  .footer__loc{display:flex;flex-direction:column;gap:3px;}
  .footer__loc-k{font-weight:600;font-size:17px;}
  .footer__loc-v{font-family:'Roboto',system-ui,sans-serif;font-size:14px;color:var(--bone-50);}
  .footer__geo-note{flex:1 1 240px;min-width:200px;font-size:14.5px;line-height:1.6;color:var(--bone-72);margin:0;max-width:32ch;}

  .footer__bottom{margin-top:clamp(48px,6vw,72px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:'Roboto',system-ui,sans-serif;font-size:15px;color:var(--bone);}
  /* oversized wordmark, cropped by the footer's overflow — texture, not a headline */
  .footer__wordmark{margin-top:clamp(32px,4vw,52px);font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:500;font-size:16.1vw;line-height:0.76;letter-spacing:-0.045em;color:rgba(249,246,240,0.085);white-space:nowrap;text-align:center;user-select:none;padding-bottom:0.12em;position:relative;}
  /* scrim over the bottom of the wordmark. Extends far past the element's
     own box because the nowrap text overflows it on both sides; the footer's
     overflow:hidden clips the excess. */
  .footer__wordmark::after{content:"";position:absolute;left:-40vw;right:-40vw;bottom:0;height:26%;background:linear-gradient(to top,var(--obsidian) 18%,rgba(14,14,14,0) 100%);pointer-events:none;}

  /* ============ Responsive ============ */
  @media(max-width:1024px){
    :root{--gutter:40px;}
    .studio__head{grid-template-columns:1fr;gap:24px;}
    .studio__proc{grid-template-columns:1fr;gap:36px;}
    .cta__grid{grid-template-columns:1fr;gap:32px;}
    .book__grid{grid-template-columns:1fr;gap:32px;}
    .book__portrait-wrap{max-width:380px;}
  }
  @media(max-width:720px){
    :root{--gutter:24px;}
    .nav__right{gap:18px;}
    .nav__link{display:none;}
    /* burger replaces the Contact button; the announce bar already carries
       Book a call, so one CTA up top is enough */
    .btn.is-nav{display:none;}
    .nav__burger{display:flex;}
    .nav__menu{display:grid;grid-template-rows:0fr;background:var(--bone);transition:grid-template-rows 300ms cubic-bezier(.4,0,.2,1);}
    .nav__menu > div{overflow:hidden;}
    .topbar.menu-open .nav__menu{grid-template-rows:1fr;border-bottom:1px solid var(--obsidian);}
    .nav__menu a{display:block;padding:17px 24px;font-weight:600;font-size:19px;letter-spacing:-0.01em;color:var(--obsidian);text-decoration:none;border-top:1px solid var(--rule);}
    .nav__menu a:active{color:var(--violet);}
    /* announce bar stacks: line on top, Book a call under it */
    .announce{flex-direction:column;gap:4px;padding:12px 24px;}
    /* halftone is illegible at this width; solid obsidian reads cleaner */
    .hero__halftone,.hero__scrim{display:none;}
    .h1{max-width:100%;font-size:40px;line-height:1.06;}
    .cta__email{font-size:15px;white-space:nowrap;}
    .hero__panel{padding:40px 0 0 0;}
    .services__grid{grid-template-columns:1fr;}
    .services__cell{min-height:0;}
    .services__cell .body-sm{padding-top:26px;}
    .work__two{grid-template-columns:1fr;}
    .faq__label{font-size:18px;}
    .head-split{margin-bottom:28px;}
    .footer__top{grid-template-columns:1fr;gap:40px;}
    .footer__cols{grid-template-columns:1fr 1fr;gap:32px;}
    .footer__geo{grid-template-columns:1fr;gap:28px;}
    .footer__map{width:100%;max-width:300px;}
    .footer__bottom{margin-top:40px;}
  }

/* ============================================================
   CASE STUDY TEMPLATE
   ============================================================ */
.cs-hero{padding-top:clamp(48px,6vw,80px);}
.cs-hero__eyebrow{display:flex;align-items:center;gap:10px;font-size:13.5px;letter-spacing:0.04em;color:var(--smoke);margin-bottom:20px;}
.cs-hero__eyebrow .is-current{color:var(--obsidian);font-weight:600;border-bottom:2px solid var(--violet);padding-bottom:2px;}
.cs-hero__eyebrow a{color:var(--smoke);transition:color 200ms ease;}
.cs-hero__eyebrow a:hover{color:var(--violet);}
.cs-hero__title{font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.02;letter-spacing:-0.025em;max-width:20ch;}
.cs-hero__sub{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--smoke);max-width:60ch;margin-top:24px;}
.cs-cover{margin-top:clamp(40px,5vw,64px);aspect-ratio:16/9;overflow:hidden;background:var(--bone-tint);}
.cs-cover img{width:100%;height:100%;object-fit:cover;display:block;}

/* meta bar */
.cs-meta{display:flex;flex-wrap:wrap;gap:clamp(32px,3.6vw,68px);margin-top:clamp(40px,5vw,64px);padding-top:32px;}
.cs-meta > div{flex:0 1 auto;min-width:0;}
.cs-meta > div:first-child{max-width:24ch;}
.cs-meta__k{display:block;font-size:13.5px;letter-spacing:0.03em;color:var(--smoke);margin-bottom:10px;}
.cs-meta__v{font-weight:600;font-size:17px;line-height:1.35;}
.cs-meta__v a{display:inline-flex;align-items:center;gap:6px;color:var(--violet);transition:opacity 200ms ease;}
.cs-meta__v a:hover{opacity:0.75;}
.cs-meta__v a .ai{display:inline-block;transition:transform 200ms cubic-bezier(.4,0,.2,1);}
.cs-meta__v a:hover .ai{transform:translateX(4px);}

/* results — the differentiator */
.cs-results{background:var(--obsidian);color:var(--bone);padding:clamp(48px,6vw,80px) clamp(32px,4vw,64px);margin-top:clamp(56px,7vw,96px);}
.cs-results__label{font-size:19px;font-weight:500;letter-spacing:-0.01em;color:var(--violet-light);margin-bottom:clamp(32px,4vw,48px);}
.cs-results__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,56px);}
.cs-stat__val{font-weight:500;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-0.03em;color:var(--violet-light);}
.cs-stat__val .u{font-size:0.5em;letter-spacing:0;}
.cs-stat__desc{font-size:17px;line-height:1.5;color:var(--bone-75);margin-top:16px;max-width:28ch;}
.cs-results__foot{font-size:13.5px;color:rgba(244,239,230,0.55);margin-top:clamp(32px,4vw,44px);border-top:1px solid var(--rule-dark);padding-top:22px;}

/* narrative */
.cs-body{display:grid;grid-template-columns:minmax(180px,0.32fr) 1fr;gap:clamp(32px,5vw,72px);margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--rule);padding-top:clamp(32px,4vw,48px);}
.cs-body__label{font-size:19px;font-weight:500;letter-spacing:-0.01em;color:var(--violet);}
.cs-body__copy p{font-size:17px;line-height:1.62;color:var(--smoke);max-width:62ch;}
.cs-body__copy p + p{margin-top:20px;}
.cs-body__copy strong{color:var(--obsidian);font-weight:600;}
.cs-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.cs-list li{font-size:17px;line-height:1.5;color:var(--smoke);padding-left:22px;position:relative;}
.cs-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--violet);}

/* showcase */
.cs-shots{margin-top:clamp(56px,7vw,96px);display:grid;gap:22px;}
.cs-shot{overflow:hidden;background:var(--bone-tint);max-height:620px;}
.cs-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.cs-shots__two{display:grid;grid-template-columns:1fr 1fr;gap:22px;}

/* testimonial */
.cs-quote{margin-top:clamp(64px,8vw,112px);background:var(--obsidian);color:var(--bone);padding:clamp(38px,4.6vw,60px) clamp(32px,3.8vw,56px);display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,3.6vw,48px);align-items:center;}
.cs-quote__photo{width:clamp(104px,9vw,124px);height:clamp(104px,9vw,124px);border-radius:50%;overflow:hidden;flex:none;background:var(--violet-light);}
.cs-quote__photo img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-quote blockquote{font-weight:500;font-size:clamp(20px,2.1vw,27px);line-height:1.42;letter-spacing:-0.012em;margin:0;max-width:46ch;}
.cs-quote__by{margin-top:24px;}
.cs-quote__name{font-weight:600;font-size:19px;}
.cs-quote__role{font-size:18px;font-weight:500;color:var(--violet-light);margin-top:5px;}
@media(max-width:820px){.cs-quote{grid-template-columns:1fr;gap:28px;}}

/* next */
.cs-next{margin-top:clamp(64px,8vw,112px);display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cs-next__label{font-size:19px;font-weight:500;letter-spacing:-0.01em;color:var(--smoke);}
.cs-next__link{font-weight:500;font-size:clamp(26px,3vw,40px);letter-spacing:-0.02em;transition:color 200ms ease;}
.cs-next__link:hover{color:var(--violet);}
.cs-next__arrow{display:inline-block;transition:transform 200ms cubic-bezier(.4,0,.2,1);}
.cs-next__link:hover .cs-next__arrow{transform:translateX(5px);}

@media(max-width:900px){
  .cs-meta{grid-template-columns:1fr 1fr;gap:24px;}
  .cs-results__grid{grid-template-columns:1fr;gap:32px;}
  .cs-body{grid-template-columns:1fr;gap:16px;}
  .cs-shots__two{grid-template-columns:1fr;}
}

/* case-study figures — shots are pre-composed on brand backgrounds, so no extra frame */
.cs-figure{margin:0;}
.cs-shot.is-flush{max-height:none;aspect-ratio:16/9;background:none;}
.cs-shot.is-flush img{object-fit:cover;object-position:center;}
.cs-cap{font-size:15.5px;line-height:1.55;color:var(--smoke);margin-top:15px;max-width:56ch;}
/* feature caption — callout treatment so it doesn't read as ignorable body text */
.cs-cap.is-feature{display:flex;gap:16px;align-items:flex-start;background:var(--bone-tint);padding:24px 28px;margin-top:20px;max-width:none;font-size:16.5px;line-height:1.55;color:var(--obsidian);}
.cs-cap.is-feature .cs-cap__icon{flex:none;width:24px;height:24px;color:var(--violet);margin-top:2px;}
.cs-cap.is-feature .cs-cap__icon svg{width:100%;height:100%;display:block;}
.cs-cap.is-feature strong{font-weight:600;}

/* stat reveal — numbers count up once in viewport */
.cs-stat{opacity:0;transform:translateY(10px);transition:opacity 600ms ease,transform 600ms cubic-bezier(.2,.7,.3,1);}
.cs-stat.is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .cs-stat{opacity:1;transform:none;transition:none;}
  .services__cell.is-powering .svc__glow circle{animation:none;opacity:1;}
}


/* =========================================================================
   Case study motion
   Every hidden start state is scoped under html.anim, which the inline head
   script only adds once it has confirmed IntersectionObserver exists and
   reduced-motion is off. No JS, dead IO, or reduce-motion => the class never
   lands, the rules below never apply, and the page renders fully visible.
   Motion is decoration; content is never allowed to depend on it.
   ========================================================================= */
@keyframes cs-rise{from{opacity:0;transform:translate3d(0,18px,0);}to{opacity:1;transform:none;}}

html.anim .cs-hero__eyebrow,
html.anim .cs-hero__title,
html.anim .cs-hero__sub,
html.anim .cs-hero .cs-figure,
html.anim .cs-hero .cs-meta{animation:cs-rise 660ms cubic-bezier(.22,.61,.36,1) both;}
html.anim .cs-hero__eyebrow{animation-delay:40ms;}
html.anim .cs-hero__title{animation-delay:120ms;}
html.anim .cs-hero__sub{animation-delay:210ms;}
html.anim .cs-hero .cs-figure{animation-delay:310ms;}
html.anim .cs-hero .cs-meta{animation-delay:400ms;}

/* Section labels slide in from the left */
html.anim .cs-body__label{
  opacity:0;transform:translate3d(-36px,0,0);
  transition:opacity 640ms cubic-bezier(.22,.61,.36,1),transform 640ms cubic-bezier(.22,.61,.36,1);
}
html.anim .cs-body__label.is-in{opacity:1;transform:none;}

/* Remaining case study images fade in */
html.anim .cs-shots .cs-figure{opacity:0;transition:opacity 780ms ease;}
html.anim .cs-shots .cs-figure.is-in{opacity:1;}
html.anim .cs-shots__two .cs-figure:nth-child(2){transition-delay:130ms;}


/* Drawn arrow. Replaces the Unicode U+2197 glyph that was doing this job in
   15 places. That character is a text glyph: it inherits the body font, never
   matches the drawn square-cap icon language, and reads as an AI-authored
   artifact. Horizontal shaft with a square terminal, deliberately not the
   45-degree diagonal that every chat UI uses for external links. */
.ico-arw{width:1.05em;height:1.05em;flex:none;display:block;}
.caption__arrow .ico-arw{width:16px;height:16px;}
/* The next-case-study link runs at 38px, and a 1.05em arrow there lands at
   40px with a 4.2px stroke — heavier than the text it sits beside. Cap it. */
.cs-next__arrow .ico-arw{width:0.58em;height:0.58em;}
@media(prefers-reduced-motion:reduce){
  .btn:hover .btn__arrow .ai,
  .work__all:hover .work__all-arrow,
  .cs-meta__v a:hover .ai,
  .cs-next__link:hover .cs-next__arrow,
  .announce a:hover .ai,
}


/* =========================================================================
   Label voice — one rule, one place.
   Type system (Isaac, Jul 16): headings Familjen Grotesk, body Inter,
   labels/eyebrows Roboto. Everything kicker-shaped points here; a new label
   class joins this list rather than declaring its own font.
   (.faq__label is excluded on purpose: it is 22px question text, body voice.)
   ========================================================================= */
.hero__locator-text,
.cs-hero__eyebrow,
.cs-meta__k{font-family:'Roboto',system-ui,sans-serif;}
/* case-study section labels: heading voice at h5 scale (Isaac, Jul 16) */
.cs-body__label,
.cs-results__label,
.cs-next__label{font-family:'Familjen Grotesk',system-ui,sans-serif;}

@media(max-width:1180px){
  .head-split.is-services{flex-wrap:wrap;}
}
/* 2-col tier only; below 720px the single-column rules own the layout */
@media(min-width:721px) and (max-width:1180px){
  .services__grid{grid-template-columns:1fr 1fr;}
  .services__cell{min-height:380px;}
}


/* Report & publication showcase (/work/reports/) */
.rpt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);margin-top:clamp(40px,5vw,64px);}
.rpt-item{margin:0;}
.rpt-cover{background:var(--bone-tint);overflow:hidden;}
.rpt-cover img{width:100%;height:auto;display:block;}
.rpt-client{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:500;font-size:22px;letter-spacing:-0.01em;margin-top:20px;}
.rpt-desc{font-size:15.5px;color:var(--smoke);margin-top:6px;max-width:44ch;}
@media(max-width:720px){.rpt-grid{grid-template-columns:1fr;}}


/* =========================================================================
   SERVICES PAGE
   ========================================================================= */
.svcp-hero{background:var(--obsidian);color:var(--bone);padding:clamp(56px,7vw,96px) 0 clamp(52px,6vw,80px);}
.svcp-hero__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.svcp-hero__eyebrow{font-family:'Roboto',system-ui,sans-serif;font-weight:500;font-size:13.5px;
  letter-spacing:0.03em;margin-bottom:20px;display:flex;align-items:center;gap:10px;color:var(--bone-50);}
.svcp-hero__eyebrow a{color:var(--bone-50);transition:color 200ms ease;}
.svcp-hero__eyebrow a:hover{color:var(--bone);}
.svcp-hero__eyebrow .is-current{color:var(--bone);}
.svcp-hero__title{max-width:18ch;}
.svcp-hero__sub{margin-top:26px;max-width:56ch;color:var(--bone-72);}
.svcp-facts{margin-top:clamp(40px,5vw,60px);display:flex;flex-wrap:wrap;justify-content:flex-end;text-align:right;gap:clamp(32px,4.5vw,72px);}
.svcp-facts__k{display:block;font-family:'Roboto',system-ui,sans-serif;font-size:13px;color:var(--bone-50);margin-bottom:7px;}
.svcp-facts__v{display:block;font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:500;font-size:clamp(20px,2.2vw,28px);letter-spacing:-0.015em;line-height:1.2;white-space:nowrap;}

.svcrows{display:flex;flex-direction:column;gap:clamp(56px,7vw,104px);}
.svcrow{display:grid;grid-template-columns:0.92fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;}
.svcrow.is-flip .svcrow__panel{order:2;}
.svcrow__panel{background:var(--obsidian);line-height:0;}
.svcrow__panel img{width:100%;height:auto;display:block;}
.svcrow__title{font-size:clamp(28px,3vw,38px);margin:0;}
.svcrow__lead{margin-top:18px;font-size:17px;line-height:1.62;color:var(--smoke);max-width:46ch;}
.svcrow__list{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
.svcrow__list li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.55;color:var(--obsidian);}
.svcrow__list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--violet);}
.svcrow__list a{color:var(--violet);font-weight:500;}

@media(max-width:900px){
  .svcrow{grid-template-columns:1fr;gap:26px;}
  .svcrow.is-flip .svcrow__panel{order:0;}
}


/* Testimonials: full-bleed dark band, same treatment as the hero and footer.
   The flat Violet Light panel is gone — violet is now the active-client accent,
   which also settles the kit's "no violet as a section background" rule. */
.container-flush{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}



/* =========================================================================
   Scroll reveal — shared across every page.
   Anything with [data-reveal] eases up into place once when it enters view.
   Optional per-element stagger with style="--rd:120ms".
   Every hidden state is scoped under html.anim, which only lands when
   IntersectionObserver exists and reduced-motion is off, so content can
   never be hidden by a failure of the animation layer.
   ========================================================================= */
html.anim [data-reveal]{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity 760ms cubic-bezier(.22,.61,.36,1) var(--rd,0ms),
             transform 760ms cubic-bezier(.22,.61,.36,1) var(--rd,0ms);
  will-change:opacity,transform;
}
html.anim [data-reveal].is-in{opacity:1;transform:none;will-change:auto;}
@media(prefers-reduced-motion:reduce){
  html.anim [data-reveal]{opacity:1;transform:none;transition:none;}
}


/* dotted globe sits on the same halftone logic as everything else */
.ico-globe{flex:none;color:var(--bone-72);}

/* Book a call — the section now carries what the call actually is, and the
   portrait sits on a stack so it reads as a card rather than a lone image. */

/* Book a call, embedded as the head of the footer rather than its own section.
   It was thin as a standalone band; here it earns the space and the dark
   footer swallows it cleanly. */
.footer__cta{position:relative;padding-bottom:clamp(44px,5vw,68px);margin-bottom:clamp(44px,5vw,68px);}
.footer__cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(249,246,240,0.11);}
.footer__cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,0.78fr);
  gap:clamp(32px,4.5vw,68px);align-items:center;}
.footer__cta-who{display:flex;align-items:center;gap:20px;margin-top:34px}
  .footer__cta .book__portrait{width:clamp(92px,8vw,108px);height:clamp(92px,8vw,108px);border-radius:50%;overflow:hidden;flex:none;aspect-ratio:1/1}
.footer__cta .book__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}

/* Calendly, lazy: the script only loads once this scrolls into view, so seven
   other pages don't pay for a third-party embed nobody scrolled to. */
.footer__cta-cal{position:relative;min-height:clamp(400px,34vw,500px);}
/* no background and no padding here — Cal renders its own surface with its own
   corner radius, so anything behind it shows as a frame around the iframe */
.cal-slot iframe{display:block;width:100%;height:100%;border:0}
.cal-slot{width:100%;height:clamp(400px,34vw,500px);overflow:auto}
.cal-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:'Roboto',system-ui,sans-serif;font-size:13.5px;color:var(--smoke)}
.footer__cta .h2{color:var(--bone);margin:0;max-width:17ch;}
.footer__cta .book__body{color:var(--bone);margin:22px 0 0;max-width:46ch;font-size:17.5px;line-height:1.6;}
.footer__cta-act{justify-self:end;}
.footer__cta .book__actions{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:11px;}
.footer__cta .book__aside{color:var(--smoke);font-size:14px;}
.footer__cta .img-slot{aspect-ratio:1/1;overflow:hidden;}
.footer__cta .img-slot img{width:100%;height:100%;object-fit:cover;display:block;}
.footer__cta .caption{display:flex;flex-direction:column;gap:6px;padding:0;background:none;font-size:21px;line-height:1.4;color:var(--bone);font-weight:600}
  .footer__cta .caption__meta{color:var(--bone-50);font-size:17px;line-height:1.4;font-weight:400;font-family:'Roboto',system-ui,sans-serif}
  .caption__li{display:inline-flex;align-self:flex-start;margin-top:11px;color:var(--bone);transition:color 200ms ease,transform 200ms cubic-bezier(.4,0,.2,1)}
  .caption__li svg{width:23px;height:23px;display:block}
  .caption__li:hover{color:var(--violet-light);transform:translateY(-2px)}
@media(max-width:900px){
  .footer__cta-grid{grid-template-columns:1fr;gap:28px;}
  .footer__cta-cal,.cal-slot{min-height:480px;height:480px}
}


/* =========================================================================
   Services explorer — panel pins, list scrolls, index tracks position.
   No dividers: hierarchy comes from scale, weight, and the index rail.
   ========================================================================= */
.svc-explore{padding-top:clamp(56px,7vw,96px);}
.svc-explore__grid{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1fr);gap:clamp(40px,5.5vw,96px);align-items:start;}
.svc-explore__side{position:sticky;top:calc(var(--topbar-h,108px) + 32px);}
.svc-explore__panel{position:relative;background:var(--obsidian);aspect-ratio:420/250;overflow:hidden;}
.svc-explore__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 520ms cubic-bezier(.22,.61,.36,1);}
.svc-explore__panel img.is-on{opacity:1;}

.svc-idx{margin-top:26px;display:flex;flex-direction:column;}
.svc-idx__btn{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;
  padding:11px 0;cursor:pointer;text-align:left;font-family:inherit;color:var(--smoke);
  transition:color 240ms ease,transform 240ms cubic-bezier(.4,0,.2,1);}
.svc-idx__btn:hover{color:var(--obsidian);transform:translateX(3px);}
.svc-idx__btn.is-on{color:var(--obsidian);}
/* Active marker: the dot travels in from the left as each service enters view,
   so the sticky column has motion tied to scroll position rather than a static
   list. Fixed-width slot means the labels never shift. */
.svc-idx__dot{flex:none;width:22px;height:8px;position:relative;}
.svc-idx__dot::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;
  border-radius:50%;background:var(--violet);
  transform:translate(-14px,-50%) scale(.5);opacity:0;
  transition:transform 420ms cubic-bezier(.22,.61,.36,1),opacity 300ms ease;}
.svc-idx__btn.is-on .svc-idx__dot::before{transform:translate(0,-50%) scale(1);opacity:1;}
.svc-idx__btn:hover .svc-idx__dot::before{opacity:.4;transform:translate(-6px,-50%) scale(.8);}
.svc-idx__btn.is-on:hover .svc-idx__dot::before{opacity:1;transform:translate(0,-50%) scale(1);}
@media(prefers-reduced-motion:reduce){
  .svc-idx__dot::before{transition:none;}
}
.svc-idx__t{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:500;font-size:17px;letter-spacing:-0.01em;}

.svc-explore__list{display:flex;flex-direction:column;gap:clamp(72px,11vh,150px);
  /* enough tail that the LAST item can still reach the centre trigger band —
     without it the final service never activates and the panel stays stuck */
  padding-bottom:min(46vh,420px);}
html.anim .svc-item{opacity:.32;transition:opacity 460ms cubic-bezier(.22,.61,.36,1);}
html.anim .svc-item.is-live{opacity:1;}
@media(prefers-reduced-motion:reduce){html.anim .svc-item{opacity:1;transition:none;}}
.svc-item__h{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:500;
  font-size:clamp(30px,3.4vw,44px);letter-spacing:-0.02em;margin:0;}
.svc-item__lead{margin-top:16px;font-size:17px;line-height:1.62;color:var(--smoke);max-width:44ch;}
.svc-item__list{margin:30px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;max-width:40ch;}
.svc-item__list li{position:relative;padding:11px 0 11px 0;font-size:15.5px;line-height:1.5;box-shadow:inset 0 -1px 0 rgba(14,14,14,0.07);}
.svc-item__list li:last-child{box-shadow:none;}
.svc-item__list a{color:var(--violet);font-weight:500;}

@media(max-width:900px){
  .svc-explore__grid{grid-template-columns:1fr;gap:32px;}
  .svc-explore__side{position:static;}
  .svc-idx{display:none;}
  .svc-explore__list{gap:56px;padding-bottom:0;}
  /* without the pinned panel each item carries its own */
  .svc-item{padding-top:4px;}
}
@media(prefers-reduced-motion:reduce){
  .svc-explore__panel img{transition:none;}
  .svc-idx__btn{transition:none;}
}


/* =========================================================================
   Testimonials — two-column cards, header left, row runs off the right edge.
   The dark lives inside the cards so the section keeps the bone background
   and there is no hard band edge.
   ========================================================================= */
/* ---- Option D: two-column cards, header left, row bleeds off-screen right ---- */
.td-sec{background:var(--bone);padding:clamp(64px,7.4vw,108px) 0 0;overflow:hidden}
/* No bottom padding: the next section brings its own, and both sit on bone,
   so stacking them doubled the gap to 230px. The rule below trims what the
   work section adds so the space in and out of this band matches. */
.td-sec + .section-top{padding-top:clamp(64px,7.4vw,108px)}
.td-head{max-width:var(--maxw);margin:0 auto clamp(30px,3.6vw,46px);padding:0 var(--gutter)}
.td-eyebrow{font-family:'Roboto',sans-serif;font-size:13px;color:var(--smoke);margin-bottom:16px}
.td-head .h2{margin:0;max-width:16ch}
.td-sub{margin-top:16px;max-width:46ch;font-size:16.5px;line-height:1.6;color:var(--smoke)}
/* the row starts inset from the left and runs past the right edge */
.td-scroll{--td-edge:calc((100vw - min(100vw, var(--maxw)))/2 + var(--gutter));
  --td-inset:clamp(0px,14vw,270px);
  display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;
  /* Cards snap to the left edge of the content column, never to the initial
     inset — so every advance lands a card fully visible in the same place
     instead of parking one half off-screen. */
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--td-edge);
  padding:4px var(--gutter) 4px var(--td-edge);
  /* padding does not clip — without this, cards scroll into the left padding
     and stay visible out to the viewport edge. Mask cuts them at the content
     edge instead. Right side stays open so the row still bleeds off. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent calc(var(--td-edge) - 1px),#000 var(--td-edge),#000 100%);
          mask-image:linear-gradient(to right,transparent 0,transparent calc(var(--td-edge) - 1px),#000 var(--td-edge),#000 100%);
  scrollbar-width:none;-ms-overflow-style:none}
/* holds the opening offset; it owns scroll position 0 as its own snap point */
.td-lead{flex:0 0 var(--td-inset);scroll-snap-align:start;pointer-events:none}
.td-scroll::-webkit-scrollbar{display:none}
.td-card{scroll-snap-align:start;flex:0 0 clamp(360px,45vw,660px);display:grid;grid-template-columns:clamp(150px,16vw,240px) 1fr;
  margin:0;background:var(--obsidian);min-height:clamp(260px,26vw,340px)}
.td-photo{position:relative;overflow:hidden}
.td-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.td-body{padding:clamp(22px,2.2vw,32px);color:var(--bone);display:flex;flex-direction:column;justify-content:center}
.td-mark{font-family:'Familjen Grotesk',sans-serif;font-size:38px;line-height:.5;color:var(--violet-light);display:block;margin-bottom:16px}
.td-body blockquote{margin:0;font-size:clamp(14.5px,1.12vw,16.5px);line-height:1.55;font-weight:500}
.td-body figcaption{margin-top:auto;padding-top:22px}
.td-n{display:block;font-weight:600;font-size:15.5px}
.td-r{display:block;font-family:'Roboto',sans-serif;font-size:14px;color:var(--bone-72);margin-top:8px;line-height:1.4}
@media(max-width:820px){
  .td-scroll{padding-left:var(--gutter);--td-edge:var(--gutter)}
  .td-lead{display:none}
  .td-card{flex:0 0 86vw;grid-template-columns:110px 1fr}
}

.td-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.td-ctrl{display:flex;gap:7px;flex:none}
.td-btn{width:24px;height:24px;display:grid;place-items:center;cursor:pointer;
  background:var(--obsidian);border:1px solid var(--obsidian);color:var(--bone);
  transition:background 220ms ease,color 220ms ease,opacity 220ms ease}
.td-btn svg{width:12px;height:12px}
.td-btn:hover:not(:disabled){background:var(--violet);border-color:var(--violet)}
.td-btn:disabled{background:none;color:var(--obsidian);opacity:.22;cursor:default}
@media(max-width:640px){.td-ctrl{display:none}}


/* Services page — deliberate asymmetry.
   The generated look came from distributing everything evenly across the full
   width: full-bleed FAQ rows with half-width answers, three mathematically
   equal process columns, lists floating in an empty half. These constrain the
   measure and use the leftover space on purpose. */

/* How we work: a sequence, read top to bottom, numbers doing structural work */
.studio__proc > div{display:grid;grid-template-columns:clamp(58px,6vw,92px) minmax(0,1fr);
  column-gap:clamp(20px,2.6vw,40px);row-gap:10px;align-items:start;
  padding:clamp(26px,3vw,40px) 0;box-shadow:inset 0 -1px 0 rgba(249,246,240,0.10);}
.studio__proc > div > .studio__num{grid-column:1;grid-row:1 / span 2;}
.studio__proc > div > .h3{grid-column:2;grid-row:1;}
.studio__proc > div > p{grid-column:2;grid-row:2;}
.studio__proc > div:last-child{box-shadow:none;}
.studio__num{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:500;
  font-size:clamp(34px,4vw,54px);line-height:.9;letter-spacing:-0.03em;
  color:rgba(249,246,240,0.22);display:block;}
.studio__proc .h3{margin:0 0 10px 0;font-size:clamp(20px,2.1vw,26px);}
.studio__proc p{max-width:52ch;}
.studio__head{margin-bottom:clamp(24px,3vw,40px);}

/* FAQ: heading holds the left column, the accordion is constrained beside it,
   so the pill sits near the question instead of a screen away */
.faq-split{display:grid;grid-template-columns:minmax(0,0.62fr) minmax(0,1fr);
  gap:clamp(32px,5vw,88px);align-items:start;}
.faq-split > .h2{margin:0;position:sticky;top:calc(var(--topbar-h,108px) + 34px);}
.faq-split .faq__list{border-top:1px solid var(--obsidian);}
@media(max-width:900px){
  .faq-split{grid-template-columns:1fr;gap:26px;}
  .faq-split > .h2{position:static;}
  .studio__proc > div{grid-template-columns:1fr;gap:8px;}
}

/* Certified Partner badge sits with the line it certifies */
.svc-item__badge{display:flex;align-items:flex-start;flex-direction:column;gap:14px;
  /* the badge wraps under the label in this column, so it needs its own
     clearance from the hairline rather than the list's default padding */
  padding-bottom:20px;}
.svc-item__badge img{height:26px;width:auto;flex:none;display:block;}

/* Four-up case study row on the services page — the bridge from what we do to
   proof, placed before the FAQ so the page ends on objection-handling. */
.wk4{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
/* 16:9 suits how these covers were actually composed; 4:3 was slicing them */
.wk4__img{aspect-ratio:16/9;}
@media(max-width:700px){.wk4{grid-template-columns:1fr;}}

/* Services hero load-in — matches the homepage hero's stagger. Previously only
   the facts row animated (it carried data-reveal and happened to be in view),
   so the hero looked half-finished on load. */
html.anim .svcp-hero__eyebrow,
html.anim .svcp-hero__title,
html.anim .svcp-hero__sub,
html.anim .svcp-facts{animation:cs-rise 660ms cubic-bezier(.22,.61,.36,1) both;}
html.anim .svcp-hero__eyebrow{animation-delay:40ms;}
html.anim .svcp-hero__title{animation-delay:130ms;}
html.anim .svcp-hero__sub{animation-delay:230ms;}
html.anim .svcp-facts{animation-delay:330ms;}
@media(prefers-reduced-motion:reduce){
  html.anim .svcp-hero__eyebrow,html.anim .svcp-hero__title,
  html.anim .svcp-hero__sub,html.anim .svcp-facts{animation:none;}
}

/* Single pulled quote */
.svc-quote{margin:0;max-width:64ch;}
.svc-quote blockquote{margin:0;font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:500;
  font-size:clamp(22px,2.5vw,32px);line-height:1.38;letter-spacing:-0.018em;}
.svc-quote figcaption{margin-top:clamp(26px,3vw,36px);display:flex;align-items:center;gap:18px;}
.svc-quote figcaption img{width:64px;height:64px;border-radius:50%;object-fit:cover;
  object-position:top center;flex:none;display:block;}
.svc-quote__n{display:block;font-weight:600;font-size:16.5px;}
.svc-quote__r{display:block;font-family:'Roboto',system-ui,sans-serif;font-size:14.5px;
  color:var(--smoke);margin-top:4px;}

/* ═══ Work index ═════════════════════════════════════════════════════
   Uses the site's existing card language: image, then the obsidian
   caption bar. An earlier version overlaid type on the featured image
   and alternated aspect ratios between cards — the overlay appeared
   nowhere else on the site, and varying ratios inside a row is not
   designed asymmetry, it just misaligns everything. One ratio per row,
   captions below, same as every other card on the site. */
.wk-lead{margin-bottom:clamp(22px,2.6vw,36px);}
.wk-lead .img-slot{aspect-ratio:21/9;}
.wk-lead .caption{padding:16px 20px;}
.wk-lead .caption__name{font-size:17px;}
.wk-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.4vw,32px);}
.wk-grid .img-slot{aspect-ratio:16/10;}
.wk-grid .caption{padding:12px 16px;}
.wk-grid .caption__name{font-size:14px;}
.wk-grid .caption__meta{font-size:13px;}
/* One line of substance under each card. This is what makes it a
   credibility page rather than a gallery, and it costs no new component. */
.wk-desc{margin-top:13px;font-size:15px;line-height:1.5;color:var(--smoke);max-width:44ch;}
.wk-lead .wk-desc{font-size:16.5px;max-width:52ch;}
@media (max-width:860px){ .wk-grid{grid-template-columns:1fr;} .wk-lead .img-slot{aspect-ratio:16/10;} }

/* Full-bleed break between sections of a case study. */
.cs-break{margin:clamp(56px,7vw,104px) 0;}
.cs-break__img{width:100%;aspect-ratio:21/9;overflow:hidden;background:var(--bone-tint);}
.cs-break__img img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:720px){ .cs-break__img{aspect-ratio:4/3;} }

/* ═══ About: the two people ═════════════════════════════════════════ */
.ab-people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,52px);}
.ab-second{display:grid;grid-template-columns:104px minmax(0,1fr);gap:clamp(16px,2vw,26px);align-items:start;}
.ab-portrait{overflow:hidden;background:var(--bone-tint);aspect-ratio:1/1;}
.ab-portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.ab-name{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;font-size:clamp(19px,1.6vw,22px);margin:0 0 3px;}
.ab-role{font-family:Roboto,system-ui,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);margin-bottom:12px;}
.ab-body p{font-size:15.5px;line-height:1.55;color:var(--smoke);max-width:44ch;}
@media (max-width:900px){ .ab-people{grid-template-columns:1fr;gap:30px;} }
@media (max-width:520px){ .ab-second{grid-template-columns:84px minmax(0,1fr);} }

/* ═══ AI-visibility prompt card ══════════════════════════════════════
   Fixed to the corner, never an interstitial, never blocks scroll.
   NOTE: if this rule ever goes missing the card renders static and falls
   to the bottom of the document — which is exactly what happened once. */
.aiq{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:70;width:min(376px,calc(100vw - 28px));
     background:var(--obsidian);color:#fff;padding:22px 22px 20px;
     box-shadow:0 18px 50px rgba(14,14,14,.28);
     opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.aiq.is-on{opacity:1;transform:none;pointer-events:auto;}
.aiq__h{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-.015em;line-height:1.18;font-size:20px;margin:0 26px 9px 0;}
.aiq__p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.76);margin:0;}
.aiq__src{display:block;margin-top:9px;font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.45);}
.aiq__src a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.aiq__cta{display:flex;align-items:center;gap:11px;margin-top:17px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14);text-decoration:none;color:#fff;}
.aiq__ava{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:0 0 38px;background:var(--smoke);}
.aiq__ava img{width:100%;height:100%;object-fit:cover;display:block;}
.aiq__ctatext{font-size:14px;line-height:1.3;}
.aiq__ctatext b{display:block;font-weight:600;}
.aiq__ctatext span{color:rgba(255,255,255,.6);font-size:12.5px;}
.aiq__arrow{margin-left:auto;width:20px;height:20px;color:rgba(255,255,255,.7);transition:transform .35s cubic-bezier(.16,1,.3,1);}
.aiq__cta:hover .aiq__arrow{transform:translateX(4px);color:#fff;}
.aiq__x{position:absolute;top:10px;right:10px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
        background:none;border:0;cursor:pointer;color:rgba(255,255,255,.5);font-size:17px;line-height:1;padding:0;}
.aiq__x:hover{color:#fff;}
@media (prefers-reduced-motion:reduce){ .aiq{transition:opacity .01s;} }

/* ═══ Case study, read as an article ═════════════════════════════════
   Three earlier attempts failed the same way: label rail on the left,
   copy block on the right, hairline rule on top, repeat. That is a stack
   of modules, and stacked modules are what reads as generated. There are
   no rails and no rules here. Headings sit inline above their own prose,
   the measure stays narrow, and full-bleed images interrupt the column. */
.csopen{padding-top:clamp(36px,5vw,84px);}
.csopen__type{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.csopen__eyebrow{font-family:Roboto,system-ui,sans-serif;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);}
.csopen__eyebrow a{color:inherit;text-decoration:none;}
.csopen__eyebrow a:hover{color:var(--violet);}
.csopen__eyebrow span{margin:0 .55em;}
/* Matches the site's existing case-study scale (.cs-hero__title) rather than
   a new one. An earlier version used clamp(38px,6.4vw,92px) at 13ch — larger
   than the homepage hero's own ceiling and half the container width, which
   left ~425px of dead space to the right of every title. */
/* Title left, intro right, sharing one baseline. Earlier versions stacked them
   and left ~425px of dead space beside the title. This spends the width instead
   of abandoning it, and it is a real editorial device rather than a wider column. */
.csopen__head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end;margin-top:.3em;}
.csopen__title{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-.026em;line-height:1.03;
               font-size:clamp(36px,5vw,72px);margin:0;max-width:18ch;}
.csopen__sub{margin:0 0 .35em;max-width:44ch;font-size:clamp(16px,1.25vw,18.5px);line-height:1.6;color:var(--smoke);}
@media (max-width:860px){
  .csopen__head{grid-template-columns:1fr;align-items:start;gap:18px;}
  .csopen__sub{margin-bottom:0;}
}
/* The image is a moment, not a strip. It is why the reveal exists. */
.csopen__figure{margin:clamp(38px,5vw,74px) 0 0;}
.csopen__img{width:100%;height:min(78vh,760px);overflow:hidden;background:var(--bone-tint);}
.csopen__img img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:720px){ .csopen__img{height:min(62vh,520px);} }

html.anim .csopen__eyebrow{opacity:0;animation:cs-rise .8s cubic-bezier(.16,1,.3,1) .05s forwards;}
html.anim .csopen__title{opacity:0;animation:cs-rise .95s cubic-bezier(.16,1,.3,1) .14s forwards;}
html.anim .csopen__sub{opacity:0;animation:cs-rise .95s cubic-bezier(.16,1,.3,1) .28s forwards;}
html.anim .csopen__img{clip-path:inset(100% 0 0 0);animation:cs-open 1.2s cubic-bezier(.76,0,.24,1) .40s forwards;}
html.anim .csopen__img img{transform:scale(1.16);animation:cs-settle 2s cubic-bezier(.16,1,.3,1) .40s forwards;}
@keyframes cs-open{to{clip-path:inset(0 0 0 0);}}
@keyframes cs-settle{to{transform:scale(1);}}
@keyframes cs-rise{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  html.anim .csopen__eyebrow,html.anim .csopen__title,html.anim .csopen__sub,
  html.anim .csopen__img,html.anim .csopen__img img{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;}
}

/* Quiet meta line. Inline, no boxes, no borders. */
.csmeta{max-width:var(--maxw);margin:clamp(26px,3vw,42px) auto 0;padding:0 var(--gutter);
        display:flex;flex-wrap:wrap;gap:6px 30px;
        font-family:Roboto,system-ui,sans-serif;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--smoke);}
.csmeta a{color:var(--obsidian);text-decoration:none;border-bottom:1px solid var(--rule);}
.csmeta a:hover{color:var(--violet);border-color:var(--violet);}

/* Prose. Indented from the left edge rather than centred, so the column
   sits in the page instead of floating in the middle of it. */
.csx{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.csx__run{max-width:60ch;margin-left:clamp(0px,8vw,150px);padding-top:clamp(52px,6.5vw,96px);}
/* Section label as a rotated margin note rather than a small violet cap above
   the text. Violet + uppercase + 12px is the combination that reads as AI, and
   it also wasted the left indent. Sticky, so it travels beside its own section. */
.csx__h{position:absolute;left:calc(-1 * clamp(30px,7vw,132px));top:0;
        writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center;
        font-family:Roboto,system-ui,sans-serif;font-weight:500;font-size:15px;letter-spacing:.24em;
        text-transform:uppercase;color:var(--obsidian);white-space:nowrap;margin:0;
        position:sticky;}
@supports (position:sticky){ .csx__h{position:absolute;} }
.csx__run{position:relative;}
/* Editorial lede: opening sentence carries weight, so the eye has somewhere to
   land other than a uniform grey block. */
.csx__lede strong,.csx__run p strong{font-weight:600;color:var(--obsidian);}
.csx__lede{color:var(--obsidian);}
@media (max-width:900px){
  .csx__h{position:static;writing-mode:horizontal-tb;transform:none;font-size:12px;letter-spacing:.15em;margin-bottom:14px;display:block;}
  .csx__run{margin-left:0;}
}
.csx__run p{font-size:clamp(17px,1.35vw,19px);line-height:1.62;color:var(--obsidian);}
.csx__run p + p{margin-top:1.1em;}
.csx__lede{font-size:clamp(19px,1.6vw,23px)!important;line-height:1.5!important;letter-spacing:-.01em;}

/* Pull quote. Type in the page, not a dark panel. */
.cspull{max-width:var(--maxw);margin:clamp(64px,8vw,116px) auto 0;padding:0 var(--gutter);}
/* Centred and given room. At 22ch left-indented it broke into a tall narrow
   stack that read as cramped rather than emphatic. */
.cspull__q{max-width:32ch;margin:0 auto;text-align:center;
           font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-.022em;
           font-size:clamp(24px,3.1vw,42px);line-height:1.2;}
.cspull__by{margin:30px 0 0;display:flex;justify-content:center;align-items:center;gap:13px;}
.cspull__ava{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:var(--bone-tint);}
.cspull__ava img{width:100%;height:100%;object-fit:cover;display:block;}
.cspull__who{font-size:14.5px;line-height:1.35;}
.cspull__who b{display:block;font-weight:600;}
.cspull__who span{color:var(--smoke);}

/* Full-bleed interruptions. */
.csfig{margin:clamp(56px,7vw,100px) 0 0;}
.csfig__img{width:100%;height:min(70vh,640px);overflow:hidden;background:var(--bone-tint);}
.csfig__img img{width:100%;height:100%;object-fit:cover;display:block;}
.csfig--held .csfig__img{height:auto;aspect-ratio:16/9;}
.csfig__cap{max-width:var(--maxw);margin:16px auto 0;padding:0 var(--gutter);}
.csfig__cap span{display:block;max-width:52ch;margin-left:clamp(0px,8vw,150px);font-size:14.5px;line-height:1.55;color:var(--smoke);}
@media (max-width:720px){ .csfig__img{height:auto;aspect-ratio:4/3;} }

/* ═══ Contact form ═══════════════════════════════════════════════════
   The contact page used to be a second book-a-call block sitting above a
   footer that already has one. Two identical asks and no way to just send
   a message. This is the form; the call stays available in the footer for
   people who prefer it. */
.cform{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,5vw,84px);align-items:start;}
.cform__field{margin-bottom:22px;}
.cform__field label{display:block;font-family:Roboto,system-ui,sans-serif;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--smoke);margin-bottom:8px;}
.cform__field .req{color:var(--violet);}
.cform input[type=text],.cform input[type=email],.cform textarea,.cform select{
  width:100%;font:inherit;font-size:16px;color:var(--obsidian);background:var(--bone-tint);
  border:1px solid transparent;border-bottom:1px solid var(--rule);padding:13px 14px;border-radius:0;
  transition:border-color .2s ease,background .2s ease;}
.cform textarea{min-height:150px;resize:vertical;line-height:1.55;}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-color:var(--violet);background:#fff;}
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cform__submit{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding:15px 24px;border:0;cursor:pointer;
  background:var(--obsidian);color:var(--bone);font:inherit;font-size:15px;font-weight:600;transition:background .22s ease;}
.cform__submit:hover:not(:disabled){background:var(--violet);}
.cform__submit:disabled{opacity:.55;cursor:default;}
.cform__note{margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--smoke);max-width:44ch;}
.cform__msg{margin-top:18px;font-size:15px;line-height:1.55;padding:14px 16px;display:none;}
.cform__msg.is-ok{display:block;background:var(--bone-tint);color:var(--obsidian);border-left:2px solid var(--violet);}
.cform__msg.is-err{display:block;background:var(--bone-tint);color:var(--obsidian);border-left:2px solid #b3261e;}
.cside dt{font-family:Roboto,system-ui,sans-serif;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--smoke);margin-bottom:6px;}
.cside dd{margin:0 0 24px;font-size:16px;line-height:1.5;}
.cside a{color:var(--obsidian);text-decoration:none;border-bottom:1px solid var(--rule);}
.cside a:hover{color:var(--violet);border-color:var(--violet);}
@media (max-width:820px){ .cform{grid-template-columns:1fr;} }