/* ================================================================
   DESIGN TOKENS — adpanel.io-inspired: warm off-white, ink type with
   gray second lines, pill buttons, generous radii and lots of air.
   Dark via html.dark
   ================================================================ */
:root{
  --bg:        #F6F4F3;
  --surface:   #FFFFFF;
  --soft:      #ECE9E7;   /* media placeholder */
  --ink:       #0A0A0A;
  --ink-2:     #737373;   /* gray headline line + reading copy */
  --muted:     #9A9692;   /* eyebrows, captions */
  --panel:     #121212;   /* dark cards (flip backs, CTA) */
  --hairline:  rgba(0,0,0,.08);
  --hairline-2:rgba(0,0,0,.18);
  --green:     #00C94F;
  --shadow:    0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
  --r-lg:      22px;
  --r-md:      16px;
  --r-sm:      10px;
  --r-pill:    999px;
  --pad:       clamp(16px, 2.2vw, 32px);
  --maxw:      1320px;    /* content column for every section below the hero */
  --gap:       18px;
  --font:  "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --ease:  cubic-bezier(.25,.75,.3,1);
}
/* SF Pro (adpanel's face) is the system font on Apple devices: use it there */
html.apple{ --font: -apple-system, BlinkMacSystemFont, "Inter Tight", "Helvetica Neue", sans-serif; }
html.dark{
  --bg:        #111110;
  --surface:   #1C1B1A;
  --soft:      #262524;
  --ink:       #F4F3F1;
  --ink-2:     #8F8C88;
  --muted:     #7A7672;
  --panel:     #232221;
  --hairline:  rgba(255,255,255,.09);
  --hairline-2:rgba(255,255,255,.22);
  --shadow:    none;
}

/* ================================================================
   BASE
   ================================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:72px; }
/* Hide scrollbars everywhere (same as the main site) */
*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ display:none; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; font-weight:400; line-height:1.5;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  transition:background 250ms var(--ease), color 250ms var(--ease);
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; letter-spacing:inherit; background:none; border:none; cursor:pointer; color:inherit; }
img,svg,video{ display:block; }
ul,ol{ list-style:none; }

/* Type scale — light display sizes with tight tracking, second line gray */
.display{
  font-size:clamp(30px, min(3vw, 5.6vh), 54px);
  font-weight:400; line-height:1.02; letter-spacing:-0.035em;
}
.h2{
  font-size:clamp(30px, 3.4vw, 52px);
  font-weight:400; line-height:1.04; letter-spacing:-0.04em;
}
.display em, .h2 em{ font-style:normal; color:var(--ink-2); }
.eyebrow{
  font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.lead{ font-size:16px; line-height:1.55; color:var(--ink-2); }

/* ================================================================
   BUTTONS — pills (black primary, white secondary)
   ================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  height:46px; padding:0 22px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--bg);
  font-size:15px; font-weight:500; white-space:nowrap;
  transition:transform 250ms var(--ease), opacity 250ms var(--ease), background 250ms var(--ease), color 250ms var(--ease);
}
.btn:hover{ transform:translateY(-1px); opacity:.85; }
.btn.light{ background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline); }
.btn.sm{ height:40px; padding:0 18px; font-size:14px; }
.btn.on-dark{ background:#FFFFFF; color:#0A0A0A; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; min-width:36px; padding:0 12px; border-radius:var(--r-pill);
  font-size:13px; font-weight:500; color:var(--ink-2);
  transition:background 250ms var(--ease), color 250ms var(--ease);
}
.pill:hover{ background:var(--surface); color:var(--ink); }

/* ================================================================
   NAV — fixed, blurred page color behind it
   ================================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:68px; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.brand{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.nav-logo{
  width:22px; height:22px; border-radius:50%;
  border:5.5px solid var(--ink); flex:0 0 auto;   /* donut mark */
  transition:border-color 250ms var(--ease);
}
.wordmark{ font-size:16px; font-weight:500; letter-spacing:-0.02em; }
.nav-links{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:28px; font-size:15px; color:var(--ink-2);
}
.nav-links a{ transition:color 250ms var(--ease); }
.nav-links a:hover{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:4px; }
.nav-right .btn{ margin-left:6px; }
.cta-short{ display:none; }
.lang-wrap{ position:relative; }
.lang-menu{
  position:absolute; top:44px; right:0; z-index:130;
  display:none; flex-direction:column;
  background:var(--surface); border-radius:var(--r-md);
  padding:5px; min-width:140px;
  box-shadow:0 12px 40px rgba(0,0,0,.14);
}
.lang-menu.open{ display:flex; }
.lang-menu button{ font-size:13px; padding:8px 12px; border-radius:var(--r-sm); text-align:left; }
.lang-menu button:hover, .lang-menu button.active{ background:var(--bg); }

/* ================================================================
   HERO — moving columns hug the left edge; photo + intro sit centered
   in the space that remains. The marquee is absolutely filled so its
   (very tall) tracks never stretch the row.
   ================================================================ */
.hero{
  --mq-w:clamp(440px, 46vw, 820px);
  display:grid; grid-template-columns:var(--mq-w) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);
  min-height:max(560px, 100svh);
  padding:68px var(--pad) 0;
}
.hero-intro{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:24px 0 28px;
}
.hero-intro > *{ max-width:560px; }
.hero-photo{
  width:clamp(150px, min(15vw, 25vh), 240px); aspect-ratio:1;
  border-radius:var(--r-lg); overflow:hidden; background:var(--soft);
  margin-bottom:22px;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  height:30px; padding:0 13px; border-radius:var(--r-pill);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--hairline);
  font-size:12.5px; font-weight:500; color:var(--ink-2); white-space:nowrap;
}
.badge .dot, .footer-meta .dot{
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}
.hero-intro .badge{ margin-bottom:22px; }
.hero-intro .display{ margin-bottom:16px; }
.hero-intro .lead{ max-width:390px; margin-bottom:26px; }
.actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }

/* Marquee — two columns of rounded project tiles, one up, one down
   (a third one joins on very wide screens) */
.hero-marquee{ position:relative; min-height:420px; }
.mq-cols{
  position:absolute; inset:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.mq-col{ overflow:hidden; min-width:0; }
.mq-col:nth-child(3){ display:none; }
.mq-track{
  display:flex; flex-direction:column;
  animation:mq-up var(--dur,60s) linear infinite;
  will-change:transform;
}
.mq-col.down .mq-track{ animation-name:mq-down; }
/* pause everything while the visitor is pointing at (or tabbing through) it */
.hero-marquee:hover .mq-track,
.hero-marquee:focus-within .mq-track{ animation-play-state:paused; }
@keyframes mq-up{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes mq-down{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
/* spacing lives inside each tile (not a flex gap) so -50% loops seamlessly */
.mq-tile{
  display:block; width:100%; text-align:left;
  padding-bottom:calc(var(--gap) + 6px);
  transition:opacity 350ms var(--ease);
}
.hero-marquee:hover .mq-tile{ opacity:.5; }
.hero-marquee .mq-tile:hover, .hero-marquee .mq-tile:focus-visible{ opacity:1; }
.mq-media{
  display:block; position:relative; overflow:hidden;
  border-radius:var(--r-md); background:var(--soft);
}
.mq-media img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform 700ms var(--ease);
}
.mq-tile:hover .mq-media img{ transform:scale(1.04); }
.mq-view{
  position:absolute; right:10px; bottom:10px;
  height:30px; padding:0 12px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center;
  background:var(--ink); color:var(--bg); font-size:12px; font-weight:500;
  opacity:0; transform:translateY(6px);
  transition:opacity 300ms var(--ease), transform 300ms var(--ease);
}
.mq-tile:hover .mq-view, .mq-tile:focus-visible .mq-view{ opacity:1; transform:none; }
.mq-cap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; padding:9px 2px 0; font-size:12.5px; line-height:1.3; }
.mq-cap b{ font-weight:500; }
.mq-cap span{ color:var(--muted); }

/* ================================================================
   SECTION SHELL — every block sits in a centered --maxw column
   ================================================================ */
.clients, .section, .footer{ padding-left:max(var(--pad), calc((100% - var(--maxw)) / 2)); padding-right:max(var(--pad), calc((100% - var(--maxw)) / 2)); }
.section{ padding-top:clamp(120px,13vw,200px); }
.sec-head{ max-width:820px; margin-bottom:clamp(44px,5.5vw,80px); }
.sec-head .eyebrow{ margin-bottom:18px; }
.sec-head.center{ text-align:center; margin-left:auto; margin-right:auto; }
.sec-sub{ margin-top:20px; font-size:17px; color:var(--ink-2); max-width:540px; }
.sec-head.center .sec-sub{ margin-left:auto; margin-right:auto; }
.center-cta{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:48px; }

/* ================================================================
   CLIENTS — plain-text names, centered
   ================================================================ */
.clients{ padding-top:clamp(80px,9vw,128px); text-align:center; }
.client-list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 48px;
  margin-top:24px;
  font-size:clamp(18px,1.6vw,22px); font-weight:500; letter-spacing:-0.035em;
  color:var(--muted);
}

/* ================================================================
   TESTIMONIALS — one big featured quote, smaller cards beside it
   ================================================================ */
.tst-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap); align-items:stretch;
}
.tst{
  display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--shadow);
}
.tst.featured{ grid-column:1 / -1; padding:clamp(28px,4vw,56px); }
.tst.featured .tst-quote{ max-width:960px; }
.tst-stars{ display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:18px; }
.tst-stars span{ letter-spacing:3px; }
.tst-stars b{ font-weight:500; }
.tst-quote{ font-size:18px; line-height:1.45; letter-spacing:-0.015em; margin-bottom:26px; }
.tst.featured .tst-quote{
  font-size:clamp(22px,2.1vw,30px); font-weight:400; line-height:1.28; letter-spacing:-0.03em;
}
.tst-mark{ font-size:56px; line-height:.6; height:26px; color:var(--muted); margin-bottom:18px; }
.tst-foot{ margin-top:auto; display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--hairline); }
.tst-avatar{
  flex:0 0 40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--soft); font-size:15px; font-weight:500;
}
.tst-name{ font-size:14px; font-weight:500; line-height:1.3; }
.tst-proj{ font-size:12.5px; color:var(--muted); line-height:1.35; }
.tst-src{ margin-left:auto; flex:0 0 auto; font-size:11.5px; font-weight:500; color:var(--muted); white-space:nowrap; }

/* ================================================================
   SERVICES — 3 × 2 cards: media, title, short copy, example projects
   ================================================================ */
.svc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
.svc{
  display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r-lg);
  padding:10px; box-shadow:var(--shadow);
}
.svc-media{ aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden; background:var(--soft); }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease); }
.svc:hover .svc-media img{ transform:scale(1.03); }
.svc-body{ flex:1; display:flex; flex-direction:column; padding:24px 16px 14px; }
.svc-num{ font-size:12px; font-weight:500; color:var(--muted); margin-bottom:12px; }
.svc h3{ font-size:23px; font-weight:500; line-height:1.15; letter-spacing:-0.03em; margin-bottom:10px; }
.svc p{ font-size:15px; color:var(--ink-2); margin-bottom:26px; }
.svc-ex{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
.svc-ex > span{ font-size:12px; color:var(--muted); margin-right:4px; }
.svc-ex button{
  display:inline-flex; align-items:center; gap:7px;
  height:30px; padding:0 12px 0 5px; border-radius:var(--r-pill);
  background:var(--bg); font-size:12.5px; font-weight:500;
  transition:background 250ms var(--ease), color 250ms var(--ease);
}
.svc-ex button:hover{ background:var(--ink); color:var(--bg); }
.mini-chip{
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff; font-size:10.5px; font-weight:600;
}

/* ================================================================
   WORK — filters + flip cards (hover flips, click opens the project)
   ================================================================ */
.work-head{ max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:24px 40px; flex-wrap:wrap; }
.work-head > div:first-child{ max-width:720px; }
.filters{ display:flex; flex-wrap:wrap; gap:6px; }
.filter{
  height:36px; padding:0 14px; border-radius:var(--r-pill);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--hairline);
  font-size:13px; font-weight:500; color:var(--ink-2);
  transition:background 250ms var(--ease), color 250ms var(--ease);
}
.filter:hover{ color:var(--ink); }
.filter.active{ background:var(--ink); color:var(--bg); box-shadow:none; }
.pgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
.pcard{ aspect-ratio:1/1; perspective:1600px; cursor:pointer; outline:none; border-radius:var(--r-lg); }
.pcard[hidden]{ display:none; }
.pcard-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform 800ms var(--ease);
}
.pcard-face{
  position:absolute; inset:0; overflow:hidden; border-radius:var(--r-lg);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.pcard-front{ background:var(--soft); }
.pcard-front img{ width:100%; height:100%; object-fit:cover; }
.pcard-label{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; align-items:center; gap:10px;
  padding:8px 14px 8px 8px; border-radius:var(--r-md);
  background:var(--surface);
}
.pcard-label .chip{
  flex:0 0 32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  color:#fff; font-size:13px; font-weight:600;
}
.pcard-label b{ display:block; font-size:13.5px; font-weight:500; line-height:1.25; }
.pcard-label small{ display:block; font-size:12px; color:var(--ink-2); line-height:1.3; }
.pcard-label .turn{ margin-left:auto; font-size:15px; color:var(--muted); }
.pcard-back{
  transform:rotateY(180deg);
  background:var(--panel); color:#F4F3F1;
  padding:clamp(22px,2.2vw,32px);
  display:flex; flex-direction:column;
}
.pcard-back .eyebrow{ color:rgba(255,255,255,.5); }
.pcard-back h3{
  font-size:clamp(24px,2.1vw,31px); font-weight:400; line-height:1.06; letter-spacing:-0.04em;
  margin:14px 0 14px;
}
.pcard-back p{ font-size:14.5px; color:rgba(255,255,255,.68); }
.pcard-meta{ margin-top:auto; display:grid; gap:8px; padding-top:18px; }
.pcard-meta div{
  display:flex; justify-content:space-between; gap:16px;
  padding-top:8px; border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;
}
.pcard-meta dt{ color:rgba(255,255,255,.5); }
.pcard-meta dd{ text-align:right; }
.pcard-back .btn{ margin-top:20px; align-self:flex-start; height:40px; font-size:14px; }
/* flip only where hovering exists; keyboard focus flips everywhere */
@media (hover:hover) and (pointer:fine){
  .pcard:hover .pcard-inner{ transform:rotateY(180deg); }
}
.pcard:focus-visible .pcard-inner{ transform:rotateY(180deg); }
@media (hover:none){ .pcard-label .turn, .hover-only{ display:none; } }
@media (hover:hover){ .touch-only{ display:none; } }

/* ================================================================
   HOW TO HIRE — four step cards
   ================================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.step{
  background:var(--surface); border-radius:var(--r-lg);
  padding:28px 26px 32px; box-shadow:var(--shadow);
}
.step-ico{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--bg);
  margin-bottom:48px;
}
.step-ico svg, .ck svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.step-k{ font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.step h3{ font-size:21px; font-weight:500; line-height:1.15; letter-spacing:-0.03em; margin:8px 0 8px; }
.step p{ font-size:14.5px; color:var(--ink-2); }

/* ================================================================
   WHAT TO EXPECT — checklist + dark CTA card
   ================================================================ */
.expect-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:stretch; }
.expect-left .eyebrow{ margin-bottom:18px; }
.expect-left .h2{ margin-bottom:36px; }
.checks{ display:grid; gap:8px; }
.checks li{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--surface); border-radius:var(--r-md);
  padding:16px 18px; box-shadow:var(--shadow);
  font-size:15.5px; line-height:1.4;
}
.ck{
  flex:0 0 22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--bg);
}
.ck svg{ width:14px; height:14px; stroke-width:2.4; }
.cta-card{
  background:var(--panel); color:#F4F3F1;
  border-radius:var(--r-lg); padding:clamp(28px,3.4vw,48px);
  display:flex; flex-direction:column; justify-content:space-between; gap:48px;
}
.cta-person{ display:flex; align-items:center; gap:12px; }
.cta-person img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.cta-person b{ display:block; font-size:15px; font-weight:500; }
.cta-person span{ display:block; font-size:13px; color:rgba(255,255,255,.55); }
.cta-card .h2{ margin-bottom:18px; }
.cta-card .h2 em{ color:rgba(255,255,255,.5); }
.cta-card p{ font-size:16px; color:rgba(255,255,255,.65); margin-bottom:28px; max-width:420px; }

/* ================================================================
   FOOTER — centered, Workana link only
   ================================================================ */
.footer{
  margin-top:clamp(120px,13vw,200px);
  padding-top:64px; padding-bottom:18px;
  border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
}
.footer .wordmark{ font-size:20px; }
.footer .nav-logo{ width:26px; height:26px; border-width:6.5px; }
.footer > p{ font-size:14px; color:var(--ink-2); }
.footer .btn{ margin-top:8px; }
.footer-note{ max-width:440px; font-size:12.5px !important; color:var(--muted) !important; }
.footer-meta{
  width:100%; margin-top:40px; padding-top:14px;
  border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12px; color:var(--muted);
}
.footer-meta .live{ display:inline-flex; align-items:center; gap:6px; }

/* ================================================================
   PROJECT DETAIL OVERLAY — full-screen page with a LEFT RAIL listing
   every project (same structure as the main site)
   ================================================================ */
.overlay{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:flex;
  opacity:0; visibility:hidden; transform:scale(.985);
  transition:opacity 250ms var(--ease), visibility 250ms var(--ease), transform 250ms var(--ease);
}
.overlay.active{ opacity:1; visibility:visible; transform:none; }
.overlay-rail{
  flex:0 0 290px;
  padding:64px 10px 10px;
  border-right:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:2px;
  overflow-y:auto;
}
.rail-item{
  display:flex; gap:10px; align-items:center;
  padding:9px 10px; border-radius:var(--r-md);
  cursor:pointer; transition:background 250ms var(--ease);
}
.rail-item:hover, .rail-item.active{ background:var(--surface); }
.rail-chip{
  flex:0 0 30px; height:30px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:600;
}
.rail-item .rn{ font-size:12.5px; font-weight:500; line-height:1.3; }
.rail-item .rd{ font-size:11.5px; color:var(--muted); line-height:1.35; }
.overlay-main{ flex:1; overflow-y:auto; padding:64px clamp(12px,2.4vw,40px) 60px; }
.overlay-close{
  position:absolute; top:14px; right:14px; z-index:2;
  height:36px; padding:0 16px; border-radius:var(--r-pill);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--hairline);
  font-size:13px; font-weight:500;
  transition:background 250ms var(--ease), color 250ms var(--ease);
}
.overlay-close:hover{ background:var(--ink); color:var(--bg); }
.ov-title{
  font-size:clamp(28px,3vw,46px); font-weight:400;
  letter-spacing:-0.04em; line-height:1.06;
  max-width:900px; margin-bottom:32px;
}
.ov-title em{ font-style:normal; color:var(--ink-2); }
.ov-meta{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap);
  margin-bottom:28px; max-width:760px;
}
.ov-meta h4{ font-size:12px; font-weight:500; margin-bottom:6px; }
.ov-meta li{ font-size:13px; color:var(--ink-2); padding:1px 0; }
.ov-links{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.ov-img{ display:block; width:100%; border-radius:var(--r-md); margin-bottom:var(--gap); background:var(--soft); }
.ov-desc{ font-size:16px; line-height:1.6; color:var(--ink-2); max-width:640px; margin:56px auto; }
/* Split case study (AI Imagery) — media left, sticky reading column right */
.ov-split{ display:flex; gap:36px; align-items:flex-start; margin-bottom:110px; }
.ov-split:last-of-type{ margin-bottom:40px; }
.ov-split-media{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--gap); }
.ov-split-media img{
  display:block; width:auto; max-width:100%; max-height:calc(100vh - 80px);
  margin:0 auto; border-radius:var(--r-md);
}
.ov-split-media.grid{ display:grid; grid-template-columns:repeat(2,1fr); align-items:start; }
.ov-split-media.grid img{ margin:0; justify-self:center; }
.ov-split-text{ flex:0 0 300px; position:sticky; top:20px; padding-top:6px; }
.ov-split-text h4{ font-size:12px; font-weight:500; margin-bottom:12px; padding-top:8px; border-top:1px solid var(--hairline); }
.ov-split-text p{ font-size:14px; line-height:1.6; color:var(--ink-2); margin-bottom:14px; }
.ov-intro{ font-size:16px; line-height:1.6; color:var(--ink-2); max-width:640px; margin:0 0 72px; }
/* Reels — YouTube (click-to-play poster) + Vimeo, all vertical */
.ov-videos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); margin-bottom:var(--gap); }
.ov-videos figure{ min-width:0; margin:0; }
.ov-videos iframe, .yt-play{
  display:block; width:100%; aspect-ratio:9/16; border:0;
  border-radius:var(--r-md); background:var(--soft); overflow:hidden;
}
.yt-play{ position:relative; }
.yt-play img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease); }
.yt-play:hover img{ transform:scale(1.03); }
.yt-play::after{
  content:""; position:absolute; left:50%; top:50%;
  width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 26px no-repeat;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform 250ms var(--ease);
}
.yt-play:hover::after{ transform:scale(1.08); }
.ov-videos figcaption{ font-size:12px; color:var(--muted); padding:8px 2px 2px; line-height:1.35; }
/* Carousel series (Yoga Inbound Alliance) — one row of slides per carousel */
.ov-carousel{ margin-bottom:44px; }
.ov-carousel h4{ font-size:12px; font-weight:500; margin-bottom:10px; padding-top:8px; border-top:1px solid var(--hairline); }
.ov-carousel-slides{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:8px; }
.ov-carousel-slides img{ width:100%; border-radius:var(--r-sm); background:var(--soft); }

/* ================================================================
   ANIMATIONS — blur text reveal + scroll reveal (from the main site)
   ================================================================ */
.bw{
  display:inline-block;
  opacity:0; filter:blur(14px); transform:translateY(6px);
  transition:opacity 600ms var(--ease), filter 900ms var(--ease), transform 600ms var(--ease);
}
.blur-in .bw{ opacity:1; filter:blur(0); transform:none; }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .mq-track{ animation:none; }
  .mq-col{ overflow-y:auto; }
  .bw, .reveal{ opacity:1; filter:none; transform:none; transition:none; }
  .pcard-inner{ transition:none; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
/* very wide screens: the third column joins the marquee */
@media (min-width:2200px){
  .hero{ --mq-w:1220px; }
  .mq-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mq-col:nth-child(3){ display:block; }
}
@media (max-width:1180px){
  .nav-links{ display:none; }
}
@media (max-width:1100px){
  .svc-grid, .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .expect-grid{ grid-template-columns:1fr; }
  .ov-videos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* tablet portrait + phones: intro first, marquee below */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; min-height:0; padding-top:84px; gap:44px; }
  .hero-intro{ order:-1; padding:16px 0 0; }
  .hero-photo{ width:clamp(150px, 34vw, 220px); }
  .hero-marquee{ height:clamp(460px, 110vw, 720px); min-height:0; }
  .tst-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .nav{ height:60px; }
  .cta-long{ display:none; }
  .cta-short{ display:inline; }
  .client-list{ gap:8px 24px; }
  .section{ padding-top:104px; }
  .svc-grid, .pgrid, .steps{ grid-template-columns:1fr; }
  .ov-split{ flex-direction:column; gap:24px; margin-bottom:70px; }
  .ov-split-text{ position:static; flex-basis:auto; }
  .ov-videos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* long carousels become a swipeable row on phones */
  .ov-carousel-slides{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
  .ov-carousel-slides img{ flex:0 0 72%; scroll-snap-align:start; }
}
@media (max-width:480px){
  .wm-rest{ display:none; }
  .actions .btn{ width:100%; }
}
/* Rail: horizontal strip on top below 850px */
@media (max-width:849px){
  .overlay{ flex-direction:column; }
  .overlay-rail{
    flex:0 0 auto; flex-direction:row; overflow-x:auto;
    border-right:none; border-bottom:1px solid var(--hairline);
    padding:60px 10px 8px;
  }
  .rail-item{ flex:0 0 210px; }
  .overlay-main{ padding:20px 12px 40px; }
}
@media (max-width:499px){
  .ov-meta{ grid-template-columns:1fr; }
}