/* JC Signal — realization of the "JC Creative — Signal" design direction */

/* ---------- Fonts (self-hosted, no external requests) ---------- */
@font-face{font-family:"Futura Std";src:url("/wp-content/uploads/fonts/futura-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Futura Std";src:url("/wp-content/uploads/fonts/futura-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("/wp-content/uploads/fonts/opensans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("/wp-content/uploads/fonts/opensans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --bg:#07080A; --surface:#0F1114; --ink:#F4F4F3; --muted:#9296A4;
  --line:#23272E; --accent:#02B5CB; --highlight:#EB8A66;
  --xs:8px; --sm:16px; --md:24px; --lg:40px; --xl:64px; --xxl:120px;
  --r-sm:2px; --r-lg:22px;
  --display:"Futura Std","Futura","Century Gothic",sans-serif;
  --body:"Open Sans",system-ui,sans-serif;
  --maxw:none; --gutter:clamp(24px,5vw,140px); --mast:60px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
:where(h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,body){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(img,svg,video){display:block;max-width:100%}
:where(a){color:inherit;text-decoration:none}
:where(button){font:inherit;color:inherit;background:none;border:0}

html{scroll-behavior:smooth;background:var(--bg)}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: overflow-x:hidden turns the body into a scroll container,
     which silently kills position:sticky on mobile browsers */
  overflow-x:clip;
}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
/* the container is fluid, so measures are held on the text itself */
.label{font-family:var(--display);font-weight:300;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb, var(--muted) 45%, var(--ink))}
.mark{background:var(--highlight);color:var(--bg);padding:0 6px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;z-index:200;background:var(--accent);color:var(--bg);padding:10px 16px}

/* On-palette placeholder blocks, used until real media is chosen */
.ph-media{
  position:relative;overflow:hidden;background:
    linear-gradient(135deg,rgba(2,181,203,.10),transparent 55%),
    linear-gradient(315deg,rgba(235,138,102,.08),transparent 60%),
    var(--surface);
}
.ph-media::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.35;
}
.ph-media::after{
  content:attr(data-note);position:absolute;inset:auto var(--md) var(--md) var(--md);
  font-family:var(--display);font-weight:300;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);opacity:.55;
}

/* ---------- Real media ---------- */
.cover{position:relative;overflow:hidden;background:var(--surface)}
.cover .cover-img{width:100%;height:100%;object-fit:cover;display:block}
.panel .media{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,96px);background:var(--surface);position:relative;overflow:hidden}
.panel .media::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.25}
/* artwork scales with BOTH axes: height keeps it inside the card, width keeps it
   from looking stranded on a wide display */
.panel .art{position:relative;width:100%;max-width:min(66vh,38vw,860px);aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.panel .art-img{width:100%;height:100%;object-fit:cover;display:block}
/* studies with no cover art show the client mark centred on the panel field */
.panel .art--logo{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:14%}
.panel .art--logo .art-img{width:100%;height:auto;object-fit:contain;opacity:.9}
.panel .note{color:var(--muted);font-size:clamp(14px,.95vw,16px);line-height:1.7;max-width:50ch;margin-bottom:var(--lg);padding-left:var(--sm);border-left:2px solid var(--highlight)}
.metrics{display:flex;gap:var(--lg) clamp(40px,4vw,96px);flex-wrap:wrap;margin-bottom:var(--lg);max-width:60ch}

.about .portrait{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface)}
.about .portrait-img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}

.marquee-viewport{overflow:hidden}
.mark-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;flex:none;padding-inline:2px;margin-inline-end:var(--sm);transition:padding-inline .35s cubic-bezier(.22,.61,.36,1)}
.mark-face{width:66px;height:66px;border-radius:50%;object-fit:cover;filter:grayscale(1) brightness(.78);opacity:.62;transition:filter .35s ease,opacity .35s ease,width .35s cubic-bezier(.22,.61,.36,1),height .35s cubic-bezier(.22,.61,.36,1)}
/* hovered face grows and gains breathing room, pushing its neighbours aside */
.mark-item:hover,.mark-item:focus-visible{padding-inline:14px}
.mark-item:hover .mark-face,.mark-item:focus-visible .mark-face{width:92px;height:92px;filter:grayscale(0) brightness(1);opacity:1}
.mark-name{position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:300;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);opacity:0;transition:opacity .3s ease;white-space:nowrap;pointer-events:none}
.mark-item:hover .mark-name,.mark-item:focus-visible .mark-name{opacity:1}
.marquee:hover{animation-play-state:paused}
.mark-logo{height:clamp(24px,2.6vw,34px);width:auto;object-fit:contain;filter:grayscale(1) invert(1) brightness(1.45) contrast(1.05);mix-blend-mode:screen;opacity:.78;transition:opacity .35s ease}
/* stacked marks need more height to read at the same visual weight as wide wordmarks */
.mark-logo.is-tall{height:clamp(40px,4.4vw,58px)}
/* already supplied as a white transparent PNG, so it must not be inverted */
.mark-logo.is-white,.mark-logo.is-tall{filter:none;mix-blend-mode:normal;opacity:.82}
/* compact square marks need extra height to sit level with the wordmarks */
.mark-logo.is-mark{height:clamp(30px,3.2vw,42px)}
.strip--logos .mark-item:hover .mark-logo{opacity:1}
.marquee--logos .mark-item{margin-inline-end:clamp(36px,5vw,72px)}

/* ---------- Case study takeover: horizontal swipe deck ---------- */
.cstudy{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center}
.cstudy[hidden]{display:none}

.cstudy__scrim{position:absolute;inset:0;background:rgba(3,4,5,.78);backdrop-filter:blur(5px);animation:cstudy-fade .3s ease}

/* the whole deck reads as one floating card over the dimmed site */
.cstudy__stage{
  position:relative;width:min(1160px,94vw);height:min(88svh,860px);
  background:var(--bg);border:1px solid var(--line);border-radius:26px;
  overflow:hidden;box-shadow:0 60px 140px -30px rgba(0,0,0,.85);
  animation:cstudy-rise .35s cubic-bezier(.22,.61,.36,1);
  touch-action:pan-y;
}
.cstudy__stage.is-dragging{transition:none}
@keyframes cstudy-fade{from{opacity:0}to{opacity:1}}
@keyframes cstudy-rise{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}

.cstudy__x{
  position:absolute;top:16px;right:16px;z-index:5;width:38px;height:38px;border-radius:50%;
  background:rgba(7,8,10,.55);backdrop-filter:blur(6px);border:1px solid var(--line);
  color:var(--ink);font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s;
}
.cstudy__x:hover{border-color:var(--accent);color:var(--accent)}

/* small dot progress instead of a numeric counter */
.cstudy__dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;display:flex;gap:7px}
.cstudy__dot{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .25s ease,width .25s ease}
.cstudy__dot.is-active{background:var(--accent);width:18px;border-radius:3px}

@media (max-width:700px){
  .cstudy__stage{width:100vw;height:100svh;border-radius:0;border:0}
}
/* absolute-stacked deck: current card centred, neighbour peeks in from the side.
   Visibility comes from stack position, not a fade timer, so there is never a blank card. */
.cstudy__track{position:relative;width:100%;height:100%}
.cstudy__card{
  position:absolute;inset:0;display:flex;flex-direction:column;
  /* justify-content/align-items:center on a scrollable flex container makes the START
     of overflowing content unreachable by scroll (a known flexbox quirk). No centering
     here \u2014 the inner wrapper centers itself with its own auto margins instead, which
     does not have that bug. */
  padding:clamp(32px,6vh,70px) clamp(24px,5vw,80px) clamp(56px,8vh,88px);
  overflow-y:auto;transform-origin:center center;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .42s ease;
  will-change:transform,opacity;
  background:var(--bg);
  box-shadow:0 30px 90px -24px rgba(0,0,0,.7);
}
.cstudy__card--current{transform:translateX(0) scale(1);opacity:1;z-index:3;pointer-events:auto}
.cstudy__card--next{transform:translateX(9%) scale(.92);opacity:.55;z-index:2;pointer-events:none}
.cstudy__card--prev{transform:translateX(-9%) scale(.92);opacity:.55;z-index:2;pointer-events:none}
.cstudy__card--hidden{transform:translateX(0) scale(.9);opacity:0;z-index:1;pointer-events:none}
.cstudy__card.is-dragging{transition:none}.cstudy__inner{width:100%;max-width:1200px;margin:auto auto}
.cstudy__k{color:var(--accent);display:block;margin-bottom:20px}

.cstudy__cover{text-align:center;display:flex;flex-direction:column;align-items:center}
.cstudy__cover .cstudy__k{margin-bottom:28px}
.cstudy__title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(3rem,10vw,7.5rem);line-height:.88;letter-spacing:-.01em}
.cstudy__sub{color:var(--muted);font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.6;max-width:52ch;margin-top:26px}

.cstudy__h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,4.2vw,3.6rem);line-height:.98;letter-spacing:-.01em;max-width:20ch;margin-bottom:26px}
.cstudy__list{display:flex;flex-direction:column;gap:14px;max-width:62ch;margin-bottom:30px}
.cstudy__list li{color:var(--muted);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6;padding-left:22px;position:relative}
.cstudy__list li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:2px;background:var(--accent)}
.cstudy__goal{padding-left:20px;border-left:2px solid var(--highlight);color:var(--ink);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;max-width:52ch}
.cstudy__goal .label{display:block;color:var(--accent);margin-bottom:10px}

.cstudy__bignum{font-family:var(--display);font-weight:700;font-size:clamp(4rem,11vw,9rem);line-height:.85;color:var(--accent);letter-spacing:-.02em}
.cstudy__reframe{margin-top:32px;padding-left:20px;border-left:2px solid var(--accent);font-family:var(--display);font-weight:300;font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.3;max-width:26ch}
.cstudy__reframe .label{display:block;color:var(--accent);margin-bottom:10px;font-family:var(--font-mono,inherit)}

.cstudy__shots{display:grid;gap:18px;margin-top:8px}
.cstudy__shots--2{grid-template-columns:1fr 1fr}
.cstudy__shots--asym{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr}
.cstudy__shots--asym .cstudy__shot-img:first-child{grid-row:1/3}
.cstudy__shot-img{width:100%;height:100%;max-height:52vh;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);display:block}
.cstudy__cap{color:var(--muted);font-size:13px;margin-top:18px}

.cstudy__split{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}
.cstudy__stats{display:flex;flex-direction:column;gap:14px;margin-top:28px;max-width:44ch}
.cstudy__stat{padding:24px;border-radius:var(--r-sm)}
.cstudy__stat--coral{background:color-mix(in srgb, var(--highlight) 14%, var(--bg))}
.cstudy__stat--teal{background:color-mix(in srgb, var(--accent) 14%, var(--bg))}
.cstudy__stat .cstudy__fig{font-family:var(--display);font-weight:700;font-size:2.2rem;margin-bottom:8px}
.cstudy__stat--coral .cstudy__fig{color:var(--highlight)}
.cstudy__stat--teal .cstudy__fig{color:var(--accent)}
.cstudy__stat p{color:var(--muted);font-size:13px;line-height:1.5}

.cstudy__metrics4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:38px}
.cstudy__fig{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.01em;line-height:1;color:var(--accent)}
.cstudy__metrics4 p{color:var(--muted);font-size:13px;line-height:1.5;margin-top:10px}
.cstudy__reco{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.cstudy__reco .label{display:block;color:var(--accent);margin-bottom:8px}

.cstudy__vs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:32px}
.cstudy__vscol{background:var(--bg);padding:26px}
.cstudy__vscol--hi{background:color-mix(in srgb, var(--accent) 10%, var(--bg))}
.cstudy__vscol .label{display:block;margin-bottom:16px;color:var(--muted)}
.cstudy__vscol--hi .label{color:var(--accent)}
.cstudy__vscol ul{display:flex;flex-direction:column;gap:11px}
.cstudy__vscol li{color:var(--muted);font-size:14px;line-height:1.6}
.cstudy__vscol--hi li{color:var(--ink)}
.cstudy__lessons li{padding-left:0}
.cstudy__lessons b{color:var(--ink);display:block;margin-bottom:4px;font-family:var(--display);font-weight:600;font-size:14px;text-transform:none;letter-spacing:0}

@media (max-width:900px){
  .cstudy__split{grid-template-columns:1fr;gap:26px}
  .cstudy__metrics4{grid-template-columns:1fr 1fr;gap:22px}
  .cstudy__vs{grid-template-columns:1fr}
  .cstudy__bar{padding:14px 16px}
  .cstudy__brand{display:none}
  .cstudy__shots--2,.cstudy__shots--asym{grid-template-columns:1fr;grid-template-rows:none}
  .cstudy__shots--asym .cstudy__shot-img:first-child{grid-row:auto}
  .cstudy__shot-img{max-height:36vh}
}
@media (prefers-reduced-motion:reduce){
  .cstudy__card{transition:none}
  .cstudy__track{scroll-behavior:auto}
}

/* ---------- Booking modal ---------- */
.booking{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.booking.is-open{display:flex}
.booking__scrim{position:absolute;inset:0;background:rgba(3,4,5,.82);backdrop-filter:blur(6px);animation:fade .25s ease}
.booking__panel{position:relative;width:min(1040px,100%);height:min(760px,88svh);background:var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.9);animation:rise .3s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
.booking__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sm);padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--line);flex:none}
.booking__bar .label{color:color-mix(in srgb, var(--muted) 40%, var(--ink))}
.booking__close{cursor:pointer;font-family:var(--display);font-weight:300;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:8px 14px;border-radius:var(--r-sm);transition:color .2s,border-color .2s;background:none}
.booking__close:hover{color:var(--accent);border-color:var(--accent)}
.booking__frame{flex:1;width:100%;border:0;background:var(--ink)}
.booking__fallback{padding:10px 16px;background:var(--bg);border-top:1px solid var(--line);text-align:center;flex:none}
.booking__fallback a{font-family:var(--display);font-weight:300;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.booking__fallback a:hover{color:var(--accent)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:700px){.booking{padding:0}.booking__panel{height:100svh;width:100%;border-radius:0}}

/* ---------- Scroll progress ---------- */
#progress{position:fixed;inset:0 auto auto 0;height:2px;width:0;background:var(--accent);z-index:120}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(7,8,10,.85);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s ease}
.site-head.is-stuck{border-bottom-color:var(--line)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;height:72px;transition:height .3s ease}
.site-head.is-stuck .bar{height:56px}
.brand{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.nav{display:flex;gap:var(--lg);align-items:center}
.nav a{font-family:var(--display);font-weight:300;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--accent)}
.nav-toggle{display:none;font-family:var(--display);font-weight:300;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(78svh,760px);display:flex;flex-direction:column;justify-content:center;padding:clamp(12px,2svh,28px) 0 clamp(28px,5svh,64px)}
/* the waveform breaks out of the padded container and spans the full viewport */
.hero .sig{width:100vw;max-width:none;margin-left:calc(50% - 50vw);height:clamp(64px,10svh,120px);margin-bottom:clamp(16px,3svh,32px);overflow:visible;display:block}
.hero .eyebrow{color:var(--accent);margin-bottom:var(--md)}
.hero h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  /* sized against BOTH axes so the statement always fits the viewport */
  font-size:clamp(1.9rem, min(5.6vw, 8.4svh), 6.4rem);
  line-height:.94;letter-spacing:-.01em;
  max-width:20ch;text-wrap:balance;
}
.hero .sub{margin-top:var(--md);max-width:58ch;color:var(--muted);font-size:clamp(1rem,1.5vw,1.15rem)}
.hero .actions{margin-top:var(--lg);display:flex;gap:var(--sm);flex-wrap:wrap}

.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;border-radius:var(--r-sm);
  background:var(--accent);color:var(--bg);border:1px solid var(--accent);
  transition:transform .18s ease,background .2s ease,color .2s ease;
}
.btn:hover{transform:translateY(-2px);background:transparent;color:var(--accent)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:transparent;color:var(--accent);border-color:var(--accent)}

/* ---------- Trust strip ---------- */
.strip{border-block:1px solid var(--line);padding:var(--md) 0;overflow:hidden}
.strip .label{display:block;text-align:center;margin-bottom:var(--sm)}
/* Spacing lives on the items, not as container gap: with a container gap the
   -50% loop lands half a gap out of phase and shows a seam. */
.marquee{display:flex;gap:0;width:max-content;align-items:center;animation:slide 34s linear infinite}
.marquee-group{display:flex;align-items:center;flex:none}
.marquee > span.legacy-mark{font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,26px);letter-spacing:.02em;text-transform:uppercase;color:color-mix(in srgb, var(--muted) 34%, var(--bg));white-space:nowrap}
@keyframes slide{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- Case studies: pinned masthead + stacking panels ---------- */
.masthead{position:sticky;top:0;z-index:90;height:var(--mast);background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center}
.masthead .row{display:flex;align-items:center;justify-content:space-between;width:100%}
.masthead h2{font-family:var(--display);font-weight:700;font-size:clamp(15px,2vw,21px);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:var(--sm)}
.masthead .tick{color:var(--accent)}
.masthead .idx{font-family:var(--display);font-weight:300;font-size:13px;letter-spacing:.14em;color:var(--muted)}
.masthead .idx b{color:var(--accent);font-weight:300}

.panel{position:sticky;background:var(--bg);border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.panel .inner{display:grid;grid-template-columns:1.05fr .95fr;min-height:calc(100svh - var(--mast));align-items:stretch;transform-origin:50% 0}
.panel:nth-of-type(odd) .media{order:2}
.panel .media{min-height:calc(100svh - var(--mast))}
.panel .body{padding:var(--xl) clamp(40px,5vw,120px);display:flex;flex-direction:column;justify-content:center}
.panel .num{font-family:var(--display);font-weight:700;font-size:clamp(3.5rem,6vw,8rem);line-height:.78;color:var(--line);margin-bottom:var(--md)}
.panel h3{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.6vw,4.4rem);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin-bottom:var(--xs)}
.panel .role{color:color-mix(in srgb, var(--muted) 40%, var(--ink));font-size:clamp(14px,1vw,17px);margin-bottom:var(--md)}
.panel .desc{color:var(--muted);max-width:52ch;font-size:clamp(1rem,1.1vw,1.2rem);margin-bottom:var(--lg)}
.metrics{display:flex;gap:var(--xl);flex-wrap:wrap;margin-bottom:var(--lg)}
.metrics .fig{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.4vw,3.1rem);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.metrics .fig .up{color:var(--highlight)}
.metrics .cap{margin-top:var(--xs)}

/* ---------- About ---------- */
.about{padding:var(--xxl) 0;border-top:1px solid var(--line)}
/* as the final stacked card it fills a viewport and carries the same card shape */
.panel--about{padding:0;border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--bg);overflow:hidden;position:sticky}
.panel--about > .wrap{display:flex;align-items:center;min-height:calc(100svh - var(--mast));padding-block:var(--lg)}
.panel--about .grid{width:100%}
.about .grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(40px,5vw,96px);align-items:center}
.about .portrait{aspect-ratio:4/5;max-width:520px}
.about h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.02;text-transform:uppercase;margin:var(--sm) 0 var(--md)}
.about p{color:var(--muted);max-width:56ch;margin-bottom:var(--sm)}
.tags{display:flex;flex-wrap:wrap;gap:var(--xs);margin-top:var(--lg)}
.tags li{font-family:var(--display);font-weight:300;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb, var(--muted) 35%, var(--ink));border:1px solid color-mix(in srgb, var(--line) 55%, var(--muted));padding:9px 14px;border-radius:var(--r-sm);transition:border-color .25s ease,color .25s ease}
.tags li:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Press ---------- */
.press{padding:var(--xxl) 0;border-top:1px solid var(--line)}
.press h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.7rem);text-transform:uppercase;margin-bottom:var(--lg)}
.press ul{border-top:1px solid var(--line)}
.press li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--md);padding:var(--md) 0;border-bottom:1px solid var(--line)}
.press .outlet{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2vw,1.5rem);text-transform:uppercase}
.press .meta{color:var(--muted);font-size:14px;text-align:right}

/* ---------- Video testimonial (sits inside Praise) ---------- */
.vidquote{margin:0 0 var(--xxl);display:grid;grid-template-columns:1.45fr .85fr;gap:clamp(24px,3vw,48px);align-items:center}

.vidquote__media{position:relative;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--surface);line-height:0}
.vidquote__video{width:100%;aspect-ratio:16/9;display:block;object-fit:cover}

/* play overlay: keeps the native control bar off the poster until it is needed */
.vidquote__play{
  position:absolute;inset:0;width:100%;height:100%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(to bottom,rgba(7,8,10,.15),rgba(7,8,10,.45));
  transition:background .3s ease;
}
.vidquote__play:hover{background:linear-gradient(to bottom,rgba(7,8,10,.05),rgba(7,8,10,.3))}
.vidquote__playicon{
  width:clamp(56px,6vw,74px);height:clamp(56px,6vw,74px);border-radius:50%;
  background:var(--accent);position:relative;flex:none;
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 10px 40px -10px rgba(2,181,203,.7);
}
.vidquote__playicon::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--bg);
}
.vidquote__play:hover .vidquote__playicon{transform:scale(1.08)}
.vidquote__playlabel{
  font-family:var(--display);font-weight:300;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
}
.vidquote__media.is-playing .vidquote__play{display:none}

/* unmute pill: centred over the frame, only while it is playing silently */
.vidquote__sound{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:none;align-items:center;gap:10px;
  cursor:pointer;padding:14px 22px;border-radius:999px;
  background:rgba(7,8,10,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(244,244,243,.22);
  font-family:var(--display);font-weight:300;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);line-height:1;
  transition:background .25s ease,border-color .25s ease,transform .2s ease;
}
.vidquote__media.is-playing.is-muted .vidquote__sound{display:inline-flex}
.vidquote__sound:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.06)}
.vidquote__soundicon{
  width:14px;height:14px;flex:none;position:relative;
  background:currentColor;
  clip-path:polygon(0 33%,28% 33%,60% 5%,60% 95%,28% 67%,0 67%);
}
.vidquote__soundicon::after{
  content:"";position:absolute;left:66%;top:50%;width:12px;height:1.5px;
  background:currentColor;transform:translateY(-50%) rotate(-40deg);transform-origin:left center;
}

.vidquote__quote{font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.3;letter-spacing:-.01em;color:var(--ink);padding-left:var(--md);border-left:2px solid var(--accent);max-width:34ch}
.vidquote__who{display:block;margin-top:var(--md)}
.vidquote__who b{font-family:var(--body);font-weight:600;font-size:14px;display:block;letter-spacing:0}
.vidquote__who span{font-family:var(--display);font-weight:300;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

@media (max-width:900px){
  .vidquote{grid-template-columns:1fr;gap:var(--md);margin-bottom:var(--xl)}
  .vidquote__quote{font-size:1.05rem;padding-left:var(--sm)}
}

/* ---------- Testimonials ---------- */
.praise{padding:var(--xxl) 0;border-top:1px solid var(--line)}
.praise h2{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,9vw,7rem);line-height:.85;text-transform:uppercase;margin-bottom:var(--xl)}
.praise .grid{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--lg)}
.praise .col{display:flex;flex-direction:column;gap:var(--lg)}
.quote{border-top:1px solid var(--line);padding-top:var(--md)}
.quote p{font-family:var(--display);font-weight:300;font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.25;margin-bottom:var(--md);max-width:36ch}
.quote .who{display:flex;align-items:center;gap:var(--sm)}
.quote .av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;display:block}
.quote .av--mono{display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:18px;color:var(--muted);line-height:1}
.quote .av{width:44px;height:44px;border-radius:50%;flex:none}
.quote .who b{font-weight:600;font-size:14px;display:block}
.quote .who span{font-size:13px;color:var(--muted)}

/* ---------- Contact ---------- */
.contact{padding:var(--xxl) 0;border-top:1px solid var(--line);text-align:center}
.contact h2{font-family:var(--display);font-weight:700;font-size:clamp(2.8rem,11vw,8rem);line-height:.85;text-transform:uppercase;margin:var(--sm) 0 var(--md)}
.contact p{color:var(--muted);max-width:46ch;margin:0 auto var(--lg)}

/* ---------- Footer ---------- */
.site-foot{padding:var(--lg) 0 var(--xl);border-top:1px solid var(--line)}
.site-foot .row{display:flex;align-items:center;justify-content:space-between;gap:var(--md);flex-wrap:wrap}
.site-foot .social{display:flex;gap:var(--md)}
.site-foot .social a{font-family:var(--display);font-weight:300;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.site-foot .social a:hover{color:var(--accent)}
.site-foot .fine{font-family:var(--display);font-weight:300;font-size:11px;letter-spacing:.12em;color:color-mix(in srgb, var(--muted) 62%, var(--bg))}

/* ---------- Reveals: hidden ONLY when JS runs ---------- */
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav{display:none}
  .nav.is-open{display:flex;position:absolute;inset:72px 0 auto 0;flex-direction:column;gap:var(--md);background:var(--bg);border-bottom:1px solid var(--line);padding:var(--md) var(--gutter)}
  .nav-toggle{display:block}
  /* Cards still stack on mobile, but each one is a single viewport-tall card:
     image on top at a fixed share of the height, text guaranteed room below. */
  .panel{border-radius:var(--r-lg) var(--r-lg) 0 0}
  .panel .inner{grid-template-columns:1fr;grid-template-rows:24svh 1fr;min-height:calc(100svh - var(--mast))}
  .panel .media{min-height:0;order:0 !important;padding:var(--sm)}
  .panel .art{max-width:min(38vw,170px)}
  .panel .art--logo{padding:10%}
  /* overflow:hidden was clipping the CTA whenever content ran long; scroll inside
     the card instead so the button is always reachable */
  .panel .body{padding:var(--sm) var(--gutter) var(--md);justify-content:flex-start;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
  .panel .num{font-size:1.8rem;margin-bottom:2px}
  .panel h3{font-size:clamp(1.4rem,5.6vw,1.8rem);margin-bottom:6px}
  .panel .role{margin-bottom:var(--xs);font-size:12px}
  .panel .desc{font-size:13px;line-height:1.5;margin-bottom:var(--sm)}
  .metrics{gap:8px var(--lg);margin-bottom:var(--sm);max-width:none}
  .metrics .fig{font-size:clamp(1.1rem,4.4vw,1.4rem)}
  .metrics .cap{font-size:9px}
  .panel .note{font-size:11px;line-height:1.5;margin-bottom:var(--sm)}
  .panel .btn{padding:11px 16px;font-size:11px;flex:none}
  .panel--about > .wrap{min-height:calc(100svh - var(--mast));padding-block:var(--md)}
  .panel--about .grid{grid-template-columns:1fr;gap:var(--md)}
  /* keep the portrait's own 4:5 framing and size it by height, so nothing is cropped away */
  .panel--about .portrait{aspect-ratio:4/5;height:30svh;width:auto;max-width:100%;margin:0 auto}
  .panel--about .portrait-img{object-position:50% 12%}
  .panel--about h2{font-size:clamp(1.4rem,5.5vw,1.9rem);margin:var(--xs) 0 var(--sm)}
  .panel--about p{font-size:13.5px;margin-bottom:var(--xs)}
  .panel--about .tags{margin-top:var(--md);gap:6px}
  .panel--about .tags li{font-size:10px;padding:7px 11px}
  .mark-face{width:60px;height:60px}
  .about .grid{grid-template-columns:1fr;gap:var(--lg)}
  .praise .grid{grid-template-columns:1fr}
  .press li{flex-direction:column;gap:var(--xs)}
  .press .meta{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee{animation:none}
  .js .reveal{opacity:1;transform:none}
  .panel .inner{transform:none !important;filter:none !important}
}