/* ==========================================================================
   The Peak CRTVE Group · R4 Homepage Prototype · r4.css (single CSS bundle)
   STUDY-03 · checkpoint build 01–04 · 14 Oct 2026
   Tokens: Peak CRTVE design-system export (colors.css 2026-10-13), labels per
   ruling 9 Oct (#55565F), hairline motif per brief v2 §7 (was #333333; granite-300 from 19 Oct, v2.5 Draft 4.6).
   Fonts: Adobe Fonts kit yja5ymp only (charter §03). No font files.
   ========================================================================== */

/* ---------- Font fallbacks (20 Oct): metric-matched local faces, so the Adobe Fonts swap (non-blocking) doesn't move the layout.
   size-adjust = the kit face's width / the local face's width, over every Questa / Questa Sans / Mandrel string on the Wed 21 pages
   (Questa tuned 98.96 → 97 against real line breaks). ascent/descent = the kit face's hhea metrics ÷ size-adjust (verified in Chromium).
   Kit faces: Questa 400 (956/-270), Questa Sans 400 (968/-247), Mandrel Ext 400 (962/-260), all UPM 1000, line gap 0.
   Safari applies size-adjust; as far as Design knows it ignores the three overrides (harmless). */
@font-face{font-family:"questa-fallback";src:local("Georgia");size-adjust:97%;ascent-override:98.56%;descent-override:27.84%;line-gap-override:0%}
@font-face{font-family:"questa-fallback-android";src:local("Noto Serif"),local("NotoSerif-Regular");size-adjust:90.23%;ascent-override:105.95%;descent-override:29.92%;line-gap-override:0%}
@font-face{font-family:"questa-sans-fallback";src:local("Arial"),local("ArialMT");size-adjust:95.73%;ascent-override:101.12%;descent-override:25.8%;line-gap-override:0%}
@font-face{font-family:"questa-sans-fallback-android";src:local("Roboto"),local("Roboto-Regular");size-adjust:96.58%;ascent-override:100.23%;descent-override:25.57%;line-gap-override:0%}
@font-face{font-family:"mandrel-extended-fallback";src:local("Arial"),local("ArialMT");size-adjust:110.2%;ascent-override:87.3%;descent-override:23.59%;line-gap-override:0%}
@font-face{font-family:"mandrel-extended-fallback-android";src:local("Roboto"),local("Roboto-Regular");size-adjust:118.8%;ascent-override:80.98%;descent-override:21.89%;line-gap-override:0%}

:root{
  /* Colour — monochrome UI; colour comes from photography only */
  --c-snow:#F2F2F2;        /* canvas */
  --c-white:#FAFAF9;       /* light panel */
  --c-sunk:#E9E9EA;        /* granite-100, sunken card */
  --c-ink:#23242A;         /* charcoal = mark colour (vector master) */
  --c-deep:#16171B;        /* granite-950 */
  --c-raised:#2E2F36;      /* granite-800 */
  --c-700:#3D3E46;
  --c-label:#55565F;       /* label grey, 6.5:1 on snow */
  --c-500:#74757E;         /* granite-500 · large text only (≥24px): two-tone second clause · 4.09 on snow, 3.38 on charcoal (v2.5) */
  --c-400:#9A9BA2;         /* granite-400 · on dark grounds only: footer meta, field border, placeholders on dark · 6.47 on 950, 4.81 on 800 (v2.5) */
  --c-300:#C3C4C8;
  --c-200:#DCDCDF;
  --c-hair:#C3C4C8;        /* granite-300 · hairline divider (v2.5: hairlines are granite-200/300; #333333 retired) */
  /* Status (form errors only; design-system colors.css --pc-rust / --pc-rust-tint). On dark panels the tint carries text and borders. */
  --c-rust:#9E3B2F;
  --c-rust-tint:#F3E1DE;
  --c-err-on-dark:var(--c-rust-tint);

  /* Type roles (T1, Creative to confirm) */
  --f-display:"mandrel-condensed","Arial Narrow",sans-serif; /* retired as heading style (ruling 14 Oct 1:45 PM); unused */
  --f-head:"questa","questa-fallback","questa-fallback-android",Georgia,serif;                         /* headings + numerals: Questa Light 300 (ruling 14 Oct 1:47 PM) */
  --w-head:400;                                            /* Creative ruling 14 Oct: Questa 400 (banner match) */
  --num-style:lining-nums proportional-nums;               /* Creative ruling 14 Oct: lining, proportional */
  --f-wide:"mandrel-extended","mandrel-extended-fallback","mandrel-extended-fallback-android",Arial,sans-serif;                    /* labels */
  --f-text:"questa-sans","questa-sans-fallback","questa-sans-fallback-android",Arial,sans-serif;                      /* body, UI text */

  /* Space + shape */
  --g:clamp(8px,0.9vw,14px);            /* page gutter around panels */
  --r:clamp(18px,1.9vw,30px);           /* one panel radius */
  --r-sm:clamp(12px,1.2vw,18px);
  --pad:clamp(20px,3.4vw,56px);         /* panel inner padding */
  --gap:clamp(8px,0.8vw,12px);          /* card gap */

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:220ms;
  --t-med:700ms;
  --t-slow:1100ms;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--c-snow);color:var(--c-ink);font-family:var(--f-text);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
/* H1 and H2: every word capitalised (Principal 15 Oct 11:17 AM). Source copy stays as written; H3 and below as written.
   Labels marked up as H2 keep their own uppercase (.label wins on specificity). */
h1,h2{text-transform:capitalize}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:var(--c-ink);color:var(--c-snow);padding:10px 16px;border-radius:999px;font:400 11px/1 var(--f-wide);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:12px}

/* ---------- labels / micro-chrome ---------- */
.label{white-space:nowrap;font:400 11px/1.35 var(--f-wide);letter-spacing:.18em;text-transform:uppercase;color:var(--c-label);display:flex;align-items:center;gap:.7em}
.label--light{color:var(--c-300)}
.label .idx,.idx{font:400 11px/1 var(--f-wide);letter-spacing:.08em}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.rule{display:block;width:120px;height:1px;background:var(--c-hair)}
.lnk{text-decoration:none;display:inline-flex;align-items:center;gap:.6em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size var(--t-med) var(--ease)}
.lnk:hover{background-size:100% 1px}
.ph-tag{margin-top:18px;font:400 10.5px/1.4 var(--f-wide);letter-spacing:.14em;text-transform:uppercase;color:var(--c-label)}
.ph-tag--dark{color:var(--c-300)}

/* arrows */
.arw{display:inline-grid;place-items:center;width:1.25em;height:1.25em;overflow:hidden;position:relative}
.arw svg,.arw-circle svg,.menu-close svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
.arw.sm{width:14px;height:14px}
.arw-circle{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-med) var(--ease)}
.arw-circle svg{width:16px;height:16px;transition:transform var(--t-med) var(--ease)}
.arw-circle--lg{width:clamp(52px,4.6vw,72px);height:clamp(52px,4.6vw,72px)}
.arw-circle--lg svg{width:22px;height:22px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 10px 0 24px;border-radius:999px;text-decoration:none;
  font:400 11.5px/1 var(--f-wide);letter-spacing:.18em;text-transform:uppercase;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform 120ms var(--ease)}
.btn .arw{width:30px;height:30px;border-radius:50%;padding:8px;transition:transform var(--t-med) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn:hover .arw svg{animation:arwNudge var(--t-med) var(--ease)}
.btn-light{background:var(--c-white);color:var(--c-ink)}
.btn-light .arw{background:var(--c-ink);color:var(--c-snow)}
.btn-light:hover{background:var(--c-white)}
.btn-pill{background:var(--c-ink);color:var(--c-snow);min-height:44px;padding-left:20px}
.btn-pill .arw{background:var(--c-snow);color:var(--c-ink);width:28px;height:28px;padding:7px}
@keyframes arwNudge{0%{transform:translate(0,0)}45%{transform:translate(110%,0)}46%{transform:translate(-110%,0)}100%{transform:translate(0,0)}}

/* ---------- panels ---------- */
.sec{padding:0 var(--g);margin-bottom:var(--g)}
.panel{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate;transform-origin:50% 0}
.panel--light{background:var(--c-white)}
.panel--ink{background:var(--c-ink);color:var(--c-snow)}
.panel--deep{background:var(--c-deep);color:var(--c-snow)}

/* ---------- header ---------- */
.hdr{position:fixed;z-index:50;top:calc(var(--g) + 14px);left:calc(var(--g) + var(--pad) - 8px);right:calc(var(--g) + var(--pad) - 8px);
  display:flex;align-items:center;gap:24px;color:var(--c-snow);transition:transform var(--t-med) var(--ease),color var(--t-fast) var(--ease)}
.hdr::before{content:"";position:absolute;inset:-10px -14px;border-radius:999px;background:rgba(242,242,242,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);opacity:0;transition:opacity var(--t-med) var(--ease);z-index:-1}
.hdr.is-solid{color:var(--c-ink)}
.hdr.is-solid::before{opacity:1}
.hdr.is-hidden{transform:translateY(calc(-100% - 40px))}
.hdr-logo{display:block;width:44px;height:44px;position:relative;flex:none}
.hdr-logo img{position:absolute;left:0;top:0;height:44px;width:auto;max-width:none;transition:opacity var(--t-fast) var(--ease)}
.hdr .on-light{opacity:0}.hdr.is-solid .on-light{opacity:1}.hdr.is-solid .on-dark{opacity:0}
.hdr-nav{display:flex;gap:clamp(18px,2.4vw,40px);margin:0 auto;font:400 11px/1 var(--f-wide);letter-spacing:.18em;text-transform:uppercase}
.hdr-nav a{text-decoration:none;position:relative;padding:8px 0}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--t-med) var(--ease)}
.hdr-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr.is-solid .hdr-cta{background:var(--c-ink);color:var(--c-snow)}
.hdr-cta{background:var(--c-white);color:var(--c-ink)}
.hdr-cta .arw{background:var(--c-ink);color:var(--c-snow)}
.hdr.is-solid .hdr-cta .arw{background:var(--c-snow);color:var(--c-ink)}
.hdr-menu{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;font:400 11px/1 var(--f-wide);letter-spacing:.18em;text-transform:uppercase}
.bars{display:grid;gap:5px;width:22px}.bars i{display:block;height:1.5px;background:currentColor}.bars i:last-child{width:60%}

/* menu (mobile) */
.menu{position:fixed;inset:0;z-index:80;padding:var(--g);background:rgba(22,23,27,.5)}
.menu[hidden]{display:none}
.menu-panel{height:100%;border-radius:var(--r);background:var(--c-deep);color:var(--c-snow);padding:96px 24px 28px;display:flex;flex-direction:column;
  animation:menuIn 600ms var(--ease-out) both}
.menu nav{display:grid;margin-top:auto}
.menu nav a{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-top:1px solid var(--c-700);text-decoration:none;font:var(--w-head) clamp(30px,8.5vw,44px)/1.08 var(--f-head);letter-spacing:-.01em}
.menu nav a .idx{color:var(--c-300);font-size:10px}
.menu-close{position:absolute;top:calc(var(--g) + 20px);right:calc(var(--g) + 20px);width:44px;height:44px;padding:12px;border:1px solid var(--c-700);border-radius:50%}
.menu-foot,.foot-legal,.next .label{white-space:normal}
.menu-foot{margin-top:28px;display:block;line-height:1.8;color:var(--c-300)}
@keyframes menuIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- 01 intro ---------- */
.intro{display:none}
html.has-intro .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:var(--c-ink);
  animation:introOut 760ms var(--ease-out) 1000ms forwards}
html.has-intro .intro-mark{width:clamp(96px,11vw,148px);aspect-ratio:1;clip-path:circle(0% at 50% 50%);
  animation:markIn 820ms var(--ease-out) 80ms forwards}
.intro-mark img{width:100%;height:100%}
.intro-skip{position:absolute;bottom:28px;right:28px;font:400 10.5px/1 var(--f-wide);letter-spacing:.18em;text-transform:uppercase;color:var(--c-300);min-height:44px;padding:0 6px}
html.intro-done .intro{display:none}
@keyframes markIn{0%{clip-path:circle(0% at 50% 50%);transform:scale(.86)}100%{clip-path:circle(71% at 50% 50%);transform:scale(1)}}
@keyframes introOut{0%{clip-path:inset(0 0 0 0 round 0)}100%{clip-path:inset(0 0 100% 0 round 0 0 40px 40px)}}

/* ---------- 02 hero ---------- */
.hero{padding-top:var(--g)}
.panel--hero{height:calc(100svh - var(--g)*2);min-height:620px;max-height:1100px;background:var(--c-deep);color:var(--c-snow)}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-media picture,.hero-img,.hero-video{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:56% 52%}
.hero-video{opacity:0}
.hero-video.is-playing{opacity:1;transition:opacity 600ms var(--ease)}
.hero-protect{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(22,23,27,.68) 0%,rgba(22,23,27,.40) 17%,rgba(22,23,27,0) 33%),
  linear-gradient(0deg,rgba(22,23,27,.66) 0%,rgba(22,23,27,.3) 42%,rgba(22,23,27,0) 64%),
  linear-gradient(90deg,rgba(22,23,27,.48) 0%,rgba(22,23,27,.24) 46%,rgba(22,23,27,0) 66%)}
.hero-top .label{color:var(--c-snow)}
.hero-top{position:absolute;top:calc(var(--pad) + 74px);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between}
.hero-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.4vw,34px)}
.display{font:var(--w-head) clamp(48px,7.6vw,136px)/1.02 var(--f-head);letter-spacing:-.012em}
.display .ln{white-space:nowrap}
.ln{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.ln>span{display:inline-block}

/* case card */
.case-card{position:absolute;right:var(--pad);bottom:var(--pad);width:clamp(300px,25vw,380px);background:var(--c-white);color:var(--c-ink);
  border-radius:var(--r-sm);padding:10px;display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;text-decoration:none;overflow:hidden;
  transition:transform var(--t-med) var(--ease),background var(--t-fast) var(--ease)}
.case-card:hover{transform:translateY(-4px);background:var(--c-white)}
.case-card:hover .arw-circle{background:var(--c-ink);color:var(--c-snow)}
.case-card:hover .arw-circle svg{transform:rotate(45deg)}
.cc-thumb{width:96px;height:96px;border-radius:calc(var(--r-sm) - 6px);overflow:hidden;background:var(--c-sunk)}
.cc-thumb img{width:100%;height:100%;object-fit:cover;transition:opacity 450ms var(--ease),transform 1200ms var(--ease)}
.cc-body{display:grid;gap:6px;min-width:0}
.cc-kicker{font-size:9.5px;gap:.5em}
.cc-name{font:400 17px/1.15 var(--f-text);letter-spacing:-.01em;transition:opacity 350ms var(--ease),transform 450ms var(--ease)}
.cc-disc{font:400 13px/1.3 var(--f-text);color:var(--c-label);transition:opacity 350ms var(--ease)}
.case-card .arw-circle{margin-right:6px}
.cc-progress{position:absolute;left:10px;right:10px;bottom:4px;height:1px;background:var(--c-200)}
.cc-progress i{display:block;height:100%;background:var(--c-ink);transform-origin:left;transform:scaleX(0)}
.case-card.is-swap .cc-name,.case-card.is-swap .cc-disc{opacity:0;transform:translateY(6px)}
.case-card.is-swap .cc-thumb img{opacity:0}

/* ---------- 03 statement + proof ---------- */
.studio .panel{padding:clamp(56px,8vw,128px) var(--pad) var(--pad)}
.studio-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--pad);margin-bottom:clamp(56px,8vw,120px)}
.studio-aside{display:flex;flex-direction:column;gap:22px;padding-top:.9em}
.statement{font:var(--w-head) clamp(30px,3.9vw,62px)/1.12 var(--f-head);letter-spacing:-.01em;max-width:12.328em}
.tone-1{color:var(--c-ink)}
.tone-2{color:var(--c-500)}
.w{display:inline-block;will-change:transform}

.stats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:var(--gap)}
.stat{position:relative;border-radius:var(--r-sm);padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow:hidden;min-height:clamp(220px,19vw,300px)}
.stat--sunk{background:var(--c-sunk)}
.stat--ink{background:var(--c-ink);color:var(--c-snow)}
.stat--text{background:transparent;box-shadow:inset 0 0 0 1px var(--c-200)}
.stats .stat:nth-child(1){grid-column:span 3;grid-row:span 2}
.stats .stat:nth-child(2){grid-column:span 4}
.stats .stat:nth-child(3){grid-column:span 5}
.stats .stat:nth-child(4){grid-column:span 9}
.stat-fig{font:var(--w-head) clamp(72px,8.2vw,140px)/.9 var(--f-head);font-variant-numeric:var(--num-style);letter-spacing:-.02em;display:flex;align-items:flex-start;gap:.06em;margin-top:auto}
.stat-fig sup{font-size:.42em;line-height:1;margin-top:.06em}
.stat-pre{font-size:.36em;line-height:1;margin-top:.08em;letter-spacing:.02em}
.stat--tall .stat-fig{flex-direction:column;gap:.18em}
.stat--tall .stat-pre{margin:0}
.stat-lbl{font:400 15px/1.4 var(--f-text);color:var(--c-label);max-width:14.456em}
.stat--ink .stat-lbl{color:var(--c-300)}
.stat-word{font:var(--w-head) clamp(44px,5.6vw,96px)/1.0 var(--f-head);letter-spacing:-.012em;margin-top:auto}
.stat--text{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;column-gap:var(--pad)}
.stat--text .label{grid-column:1/-1}
.stat--text .stat-word{grid-column:1;grid-row:2/4;align-self:end}
.stat--text .stat-lbl{grid-column:2;grid-row:3;align-self:end;text-align:right}
.rule--card{position:absolute;top:clamp(20px,2vw,30px);right:clamp(20px,2vw,30px);margin-top:5px}

/* ---------- 04 selected work ---------- */
.work{height:calc(var(--n,5) * 100svh + 40svh)}
.work-pin{position:sticky;top:var(--g);height:calc(100svh - var(--g)*2)}
.work-panel{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(14px,1.6vw,22px);padding:clamp(18px,2vw,28px)}
.work-head{display:flex;align-items:center;gap:24px;padding:4px 6px 0}
.work-steps{display:flex;gap:6px;margin-left:auto;margin-right:24px}
.work-steps li{width:clamp(28px,3.4vw,56px);height:1px;background:var(--c-700);overflow:hidden}
.work-steps i{display:block;height:100%;background:var(--c-snow);transform-origin:left;transform:scaleX(var(--p,0))}
.work-stage{position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--c-deep)}
.wl{position:absolute;inset:0;display:block;overflow:hidden;z-index:var(--i);text-decoration:none;
  clip-path:circle(0px at var(--ox,90%) var(--oy,100%));-webkit-clip-path:circle(0px at var(--ox,90%) var(--oy,100%))}
.wl[data-case="0"]{clip-path:none;-webkit-clip-path:none}
.wl img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(var(--s,1.18)) translate3d(0,var(--py,0px),0);transform-origin:var(--ox,90%) var(--oy,100%);will-change:transform}
.wl::after{content:"";position:absolute;inset:0;background:var(--c-deep);opacity:var(--dim,0);pointer-events:none}
.wl-cap{position:absolute;left:18px;bottom:16px;padding:7px 11px;border-radius:999px;background:rgba(22,23,27,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:9.5px;color:var(--c-snow)}
.work-stage:hover .wl.is-active img{--hov:1}
.work-meta{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:end;gap:clamp(16px,2.4vw,40px);padding:6px 6px 4px}
.wm-idx{align-self:start;font-size:11px;padding-top:.7em}
.wm-idx .of{color:var(--c-label)}
.wm-name{font:var(--w-head) clamp(28px,3.4vw,56px)/1.06 var(--f-head);letter-spacing:-.01em}
.wm-line{margin-top:10px;font:400 clamp(15px,1.15vw,18px)/1.4 var(--f-text);color:var(--c-300)}
.wm-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:400px}
.pill{font:400 10px/1 var(--f-wide);letter-spacing:.16em;text-transform:uppercase;padding:9px 12px;border-radius:999px;border:1px solid var(--c-700);color:var(--c-200);white-space:nowrap}
.pill--ph{border-style:dashed;color:var(--c-300)}
.work-meta .arw-circle{color:var(--c-snow);border-color:var(--c-700)}
.work-meta .arw-circle:hover{background:var(--c-snow);color:var(--c-ink);border-color:var(--c-snow)}
.work-meta .arw-circle:hover svg{transform:rotate(45deg)}
.wm-title .ln>span{transition:transform 600ms var(--ease-out),opacity 400ms var(--ease)}
.work-meta.is-out .wm-title .ln>span{transform:translateY(105%);opacity:0;transition-duration:260ms}

/* ---------- shared section head (05, 06) ---------- */
.ph-copy{color:var(--c-label)}
.panel--ink .ph-copy,.panel--deep .ph-copy{color:var(--c-400)}
.sec-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) minmax(0,1fr);gap:var(--pad);align-items:start;margin-bottom:clamp(40px,6vw,96px)}
.sec-head-l{display:flex;flex-direction:column;gap:22px;padding-top:.9em}
.sec-h{font:var(--w-head) clamp(30px,3.9vw,62px)/1.1 var(--f-head);letter-spacing:-.01em;max-width:9.648em}
.sec-all{justify-self:end;padding-top:1.1em}
.rule--light{background:var(--c-label)}
.intro-mark img{object-fit:contain} /* header mark: height-set, width:auto (Dev staging fix, 14 Oct) — never a fixed square */

/* ---------- held components (labelled, never populated without clearance) ---------- */
html.no-held [data-held]{display:none}
.held-band{border-radius:var(--r);padding:clamp(22px,2.6vw,40px) var(--pad);box-shadow:inset 0 0 0 1px var(--c-300);
  background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(35,36,42,.025) 14px 28px);display:grid;gap:22px}
.held-band .label{white-space:normal}
.held-band .idx{padding:5px 8px;border-radius:999px;background:var(--c-ink);color:var(--c-snow);font-size:9.5px;letter-spacing:.16em}
.held-marks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
.held-marks li{height:clamp(56px,6vw,88px);border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--c-200)}
.held-quote{font:var(--w-head) clamp(24px,2.6vw,40px)/1.2 var(--f-head);color:var(--c-label);max-width:16.08em}

/* ---------- 05 services ---------- */
.svc-panel{padding:clamp(56px,8vw,128px) var(--pad) var(--pad)}
.svc-list{border-bottom:1px solid var(--c-200)}
.svc{position:relative;border-top:1px solid var(--c-200)}
.svc::before{content:"";position:absolute;left:0;top:-1px;width:120px;height:1px;background:var(--c-hair);z-index:1}
.svc-head{display:grid;grid-template-columns:clamp(56px,7vw,112px) minmax(0,1.25fr) minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,40px);
  padding:clamp(22px,2.4vw,34px) 0;text-decoration:none}
.svc-idx{align-self:center}
.svc-name{font:var(--w-head) clamp(26px,2.9vw,46px)/1.08 var(--f-head);letter-spacing:-.01em;transition:transform 600ms var(--m-ease,cubic-bezier(.16,1,.3,1))}
.svc-sum{font:400 15px/1.45 var(--f-text);max-width:18.904em;transition:opacity 400ms var(--ease)}
.svc-head .arw-circle{color:var(--c-ink);border-color:var(--c-300)}
.svc-head .arw-circle{--fill-ink:var(--c-snow)}
.svc-tog{display:none}
.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 700ms var(--m-ease,cubic-bezier(.16,1,.3,1))}
.svc-inner{min-height:0;overflow:hidden;display:grid;grid-template-columns:clamp(56px,7vw,112px) minmax(0,1.25fr) minmax(0,1fr) auto;column-gap:clamp(16px,2.4vw,40px)}
.svc-sum-m{display:none}
.svc-media{grid-column:3/5;margin:0 0 clamp(22px,2.4vw,34px);height:clamp(200px,17vw,280px);border-radius:var(--r-sm);overflow:hidden;position:relative;background:var(--c-sunk);
  clip-path:inset(0 0 100% 0 round var(--r-sm));transition:clip-path 800ms var(--m-ease,cubic-bezier(.16,1,.3,1)) 60ms}
.svc-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(1.12);transition:transform 1200ms var(--m-ease,cubic-bezier(.16,1,.3,1))}
.svc-media figcaption{position:absolute;left:14px;bottom:12px;padding:7px 11px;border-radius:999px;background:rgba(22,23,27,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:9.5px;color:var(--c-snow)}
.svc-media--slot{display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--c-300);background:repeating-linear-gradient(135deg,var(--c-white) 0 14px,var(--c-sunk) 14px 28px)}
.svc-media--slot .label{white-space:normal;text-align:center;padding:0 20px}
@media (hover:hover) and (min-width:900px){
  .svc:hover .svc-body,.svc:focus-within .svc-body{grid-template-rows:1fr}
  .svc:hover .svc-media,.svc:focus-within .svc-media{clip-path:inset(0 0 0 0 round var(--r-sm))}
  .svc:hover .svc-media img,.svc:focus-within .svc-media img{transform:scale(1)}
  .svc:hover .svc-name{transform:translateX(12px)}
  .svc-list:hover .svc:not(:hover) .svc-name{opacity:.42;transition:opacity 400ms var(--ease),transform 600ms var(--ease)}
}

/* ---------- 06 process ---------- */
.proc-panel{background:var(--c-sunk);padding:clamp(56px,8vw,128px) var(--pad) clamp(48px,6vw,96px)}
.proc-body{position:relative}
.proc-track{position:relative;height:1px;background:var(--c-300);margin:0 0 clamp(28px,3vw,44px)}
.proc-track i{position:absolute;inset:0;background:var(--c-ink);transform-origin:left;transform:scaleX(var(--pp,0))}
.proc-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.stage{position:relative;display:flex;flex-direction:column;gap:14px;padding-right:8px}
.stage-dot{position:absolute;top:calc(-1 * clamp(28px,3vw,44px) - 4px);left:0;width:9px;height:9px;border-radius:50%;background:var(--c-sunk);box-shadow:inset 0 0 0 1px var(--c-label);transition:background 400ms var(--ease),box-shadow 400ms var(--ease)}
.stage.is-on .stage-dot{background:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
.stage-name{font:var(--w-head) clamp(21px,1.75vw,28px)/1.15 var(--f-head);letter-spacing:-.005em;max-width:6.432em}
.stage-line{font:400 15px/1.5 var(--f-text);max-width:15.568em}

/* ---------- 07 closer ---------- */
.closer-panel{min-height:min(92svh,860px);padding:clamp(56px,8vw,128px) var(--pad) var(--pad);display:flex;flex-direction:column;gap:clamp(28px,3.4vw,48px);justify-content:space-between}
.closer-h{font:var(--w-head) clamp(44px,7.2vw,128px)/1.02 var(--f-head);letter-spacing:-.012em;max-width:7.504em;margin-top:auto}
.closer-act{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.btn-xl{min-height:64px;padding-left:30px;font-size:12px}
.btn-xl .arw{width:44px;height:44px;padding:12px}
.closer-disc{position:absolute;z-index:-1;right:calc(-1 * clamp(120px,14vw,260px));top:calc(-1 * clamp(120px,14vw,260px));width:clamp(420px,52vw,880px);aspect-ratio:1;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--c-700);transform:scale(var(--cd,.6));transition:transform 1600ms var(--m-ease,cubic-bezier(.16,1,.3,1))}
.closer-disc::after{content:"";position:absolute;inset:18%;border-radius:50%;box-shadow:inset 0 0 0 1px var(--c-raised)}
.closer.in .closer-disc{--cd:1}

/* ---------- 08 footer ---------- */
.foot{margin-bottom:var(--g)}
.foot-panel{padding:clamp(56px,7vw,112px) var(--pad) var(--pad);display:flex;flex-direction:column;gap:clamp(48px,6vw,96px)}
.foot-cols{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.6fr));gap:var(--pad)}
.foot-c{display:flex;flex-direction:column;gap:16px}
.foot-c ul{display:grid;gap:10px}
.foot-c a{text-decoration:none;font:400 15px/1.4 var(--f-text);color:var(--c-200);display:inline-block;min-height:24px}
.foot-c a:hover{color:var(--c-snow)}
.foot-c address{font:400 15px/1.6 var(--f-text);font-style:normal;color:var(--c-200)}
.foot-sub{margin-top:14px}
.foot-coord{color:var(--c-400)}
/* Footer logo: LOGO ONLY (Principal 15 Oct 12:06 PM). The logo replaces the "THE PEAK CRTVE GROUP" line, at the studio block's
   full width; Jackson line, info@ and coordinates sit below. All labels 11 px (the 12 px label is withdrawn).
   The SLOT (= block width) decides (Creative 14 Oct 5:31 PM; logo README): horizontal ≥ 298 px (≥ 96 px tall),
   stacked ≥ 200 px, otherwise the icon at 52 px. No viewport breakpoint. */
.foot-mark{display:block;width:100%;max-width:320px;container-type:inline-size;text-decoration:none;margin-bottom:8px} /* cap 320 px: Principal 12:35 PM, 15 Oct; the slot rule picks the mark within it */
.foot-mark img{display:none;max-width:none}
.foot-icon{display:block!important;height:52px;width:auto}
@container (min-width:200px){
  .foot-mark .foot-lockup-s{display:block;width:100%;max-width:220px;height:auto} /* stacked lockup capped at 220 px wide (PD relay 1:50 PM, 19 Oct) */
  .foot-mark .foot-icon{display:none!important}
}
@container (min-width:298px){
  .foot-mark .foot-lockup-s{display:none}
  .foot-mark .foot-lockup-h{display:block;width:100%;height:auto}
}
.foot-legal-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:20px;border-top:1px solid var(--c-700)}
.foot-legal-row .label{white-space:normal}
.foot-legal-row .lnk{min-height:44px}
.foot-build{flex-basis:100%;margin-top:0}

/* ---------- hero image toggle (?img=tucker|shr): per-image framing ---------- */
.lowres-tag{position:absolute;left:50%;bottom:calc(var(--pad) + 6px);transform:translateX(-50%);z-index:3;margin:0;padding:8px 12px;border-radius:999px;background:var(--c-white);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink);
  font:400 10px/1.3 var(--f-wide);letter-spacing:.14em;text-transform:uppercase;max-width:min(400px,40%);text-align:center}
html[data-img="tucker"] .hero-media picture,html[data-img="tucker"] .hero-img{object-position:50% 70%}
html[data-img="tucker"]:not(.hero-b) .hero-protect{background:
  linear-gradient(180deg,rgba(22,23,27,.80) 0%,rgba(22,23,27,.58) 17%,rgba(22,23,27,0) 35%),
  linear-gradient(0deg,rgba(22,23,27,.66) 0%,rgba(22,23,27,.3) 42%,rgba(22,23,27,0) 64%),
  linear-gradient(90deg,rgba(22,23,27,.48) 0%,rgba(22,23,27,.24) 46%,rgba(22,23,27,0) 66%)}
html[data-img="shr"] .hero-media picture,html[data-img="shr"] .hero-img{object-position:50% 60%}
/* SHR: the yellow gloves sit behind the headline; a deeper left scrim (dark frame, so it reads as shadow, not as a box) */
html[data-img="shr"] .hero-protect{background:
  linear-gradient(180deg,rgba(22,23,27,.68) 0%,rgba(22,23,27,.40) 17%,rgba(22,23,27,0) 33%),
  linear-gradient(0deg,rgba(22,23,27,.72) 0%,rgba(22,23,27,.40) 42%,rgba(22,23,27,0) 64%),
  linear-gradient(90deg,rgba(22,23,27,.62) 0%,rgba(22,23,27,.40) 46%,rgba(22,23,27,0) 70%)}
@media (max-width:899px){
  .lowres-tag{top:148px;bottom:auto;left:20px;right:20px;transform:none;max-width:none;text-align:left;font-size:9px;border-radius:12px}
  html[data-img] .hero-media picture,html[data-img] .hero-img{object-position:50% 50%}
  html[data-img="shr"] .hero-protect{background:linear-gradient(180deg,rgba(22,23,27,.42) 0%,rgba(22,23,27,0) 22%),linear-gradient(0deg,rgba(22,23,27,.82) 0%,rgba(22,23,27,.62) 48%,rgba(22,23,27,0) 82%)}
}

/* ---------- GH Sauna-8 (default hero, ruling 15 Oct 11:30 AM): headline over the pool, lower third ---------- */
.hero-credit{position:absolute;right:var(--pad);top:calc(var(--pad) + 100px);margin:0;font-size:10px;color:var(--c-snow);white-space:normal;text-align:right;max-width:260px;display:none}
html[data-img="gh"] .hero-credit{display:block}
/* zoomed and bottom-anchored so the pool band holds the headline (pool ≈ bottom 28% of the frame) */
html[data-img="gh"] .hero-media picture{inset:0;height:100%}
/* GH A: the cedar sauna's lit face sits behind the headline's right half; deeper left scrim (measured, see Addendum 2) */
html[data-img="gh"]:not(.hero-b) .hero-protect{background:
  linear-gradient(180deg,rgba(22,23,27,.62) 0%,rgba(22,23,27,.38) 17%,rgba(22,23,27,0) 33%),
  linear-gradient(0deg,rgba(22,23,27,.66) 0%,rgba(22,23,27,.3) 42%,rgba(22,23,27,0) 64%),
  linear-gradient(90deg,rgba(22,23,27,.56) 0%,rgba(22,23,27,.34) 48%,rgba(22,23,27,0) 72%)}
html[data-img="gh"] .hero-img{top:auto;bottom:0;height:var(--gh-zoom,128%);object-position:36% 100%}
/* B on GH = ink on the pool, no scrim (no sky move: the pool is the field) */
@media (min-width:900px){
  html[data-img="gh"].hero-b .hero-media picture{inset:0;height:100%}
  html[data-img="gh"].hero-b .hero-img{inset:auto 0 0 0;top:auto;bottom:0;height:var(--gh-zoom,128%);object-position:36% 100%}
  html[data-img="gh"].hero-b .display{font-size:clamp(48px,7.6vw,136px)}
  html[data-img="gh"].hero-b .hero-protect{background:linear-gradient(180deg,rgba(22,23,27,.62) 0%,rgba(22,23,27,.38) 17%,rgba(22,23,27,0) 33%)}
  html[data-img="gh"].hero-b .hero-foot{top:auto;bottom:var(--pad);align-items:flex-start}
  html[data-img="gh"].hero-b .hero-actions{position:static}
  html[data-img="gh"].hero-b .hero-top{top:calc(var(--pad) + 74px);bottom:auto;flex-direction:row;right:var(--pad);gap:20px}
  html[data-img="gh"].hero-b .hero-top .label{color:var(--c-snow)}
  html[data-img="gh"].hero-b .hdr:not(.is-solid){color:var(--c-snow)}
  html[data-img="gh"].hero-b .hdr:not(.is-solid) .on-dark{opacity:1}
  html[data-img="gh"].hero-b .hdr:not(.is-solid) .on-light{opacity:0}
  html[data-img="gh"].hero-b .hdr:not(.is-solid) .hdr-cta{background:var(--c-white);color:var(--c-ink)}
  html[data-img="gh"].hero-b .hdr:not(.is-solid) .hdr-cta .arw{background:var(--c-ink);color:var(--c-snow)}
}
@media (max-width:899px){
  html[data-img="gh"]:not(.hero-b) .hero-protect{background:linear-gradient(180deg,rgba(22,23,27,.42) 0%,rgba(22,23,27,0) 22%),linear-gradient(0deg,rgba(22,23,27,.80) 0%,rgba(22,23,27,.56) 42%,rgba(22,23,27,0) 72%)}
  .hero-credit{top:140px;bottom:auto;left:20px;right:auto;max-width:calc(100% - 40px);text-align:left;font-size:9px;padding:6px 10px;border-radius:999px;background:rgba(22,23,27,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}

/* ---------- ?hero=b · Lumóra placement: ink headline in the sky band, image top edge pinned (no parallax overscan above).
   ≥ 900 px only: the phone crop has no clear sky band, so phone keeps A. ---------- */
@media (min-width:900px){
  html.hero-b .hero-media picture,html.hero-b .hero-img,html.hero-b .hero-video{inset:0 0 -12% 0;height:112%;object-position:50% 0%}
  html.hero-b .hero-protect{background:linear-gradient(0deg,rgba(22,23,27,.76) 0%,rgba(22,23,27,.54) 24%,rgba(22,23,27,0) 48%)}
  html.hero-b .hero-foot{top:calc(var(--pad) + 62px);bottom:var(--pad)}
  html.hero-b .display{color:var(--c-ink);font-size:clamp(40px,var(--hb-size,4.4vw),76px)}
  html.hero-b .hero-actions{position:absolute;left:0;bottom:0}
  html.hero-b .hero-top{top:auto;bottom:calc(var(--pad) + 76px);flex-direction:column;gap:10px;right:auto}
  html.hero-b .hdr:not(.is-solid){color:var(--c-ink)}
  html.hero-b .hdr:not(.is-solid) .on-dark{opacity:0}
  html.hero-b .hdr:not(.is-solid) .on-light{opacity:1}
  html.hero-b .hdr:not(.is-solid) .hdr-cta{background:var(--c-ink);color:var(--c-snow)}
  html.hero-b .hdr:not(.is-solid) .hdr-cta .arw{background:var(--c-snow);color:var(--c-ink)}
  html.hero-b .hdr:not(.is-solid) .hdr-cta .mfill{background:var(--c-raised)}
}

/* Tucker + B: the sky band is deepest at the right (ridge lowest toward the Grand), so the headline sets right-aligned.
   Measured: 5.3vw (76 px at 1440, 68 at 1280, 54 at 1024) holds ≥ 5.4 : 1; the full 136 px does not fit the sky (min 0.87–1.09). */
@media (min-width:900px){
  html[data-img="tucker"].hero-b .hero-foot{align-items:flex-end;top:calc(var(--pad) + 56px)}
  html[data-img="tucker"].hero-b .display{text-align:right;font-size:clamp(48px,5.3vw,84px)}
}

/* ==========================================================================
   R4 MOTION SYSTEM · 6 primitives (PD note 14 Oct 2:20 PM: FORME + Flowrix)
   1 Intro · 2 Reveal · 3 Hero cascade · 4 Panel morph · 5 Work transition · 6 Hover
   Animates transform, opacity, filter; colour morph on one panel only.
   ========================================================================== */
:root{
  --m-rise:48px;                          /* reveal travel (32px ≤899) */
  --m-hero-rise:90px;                     /* hero cascade travel */
  --m-dur:900ms;                          /* reveal duration */
  --m-blur:2px;                           /* reveal blur, cleared over 500ms */
  --m-ease:cubic-bezier(.16,1,.3,1);      /* expo.out-class (≈ spring k400/c80) */
  --m-ease-io:cubic-bezier(.44,0,.56,1);  /* symmetric ease-in-out (header drop, hover) */
  --m-stagger:100ms;
}
/* 2 · Reveal (once, 35% in view; JS sets .in and --d) */
html.js [data-reveal]:not([data-reveal="lines"]),html.js [data-reveal="lines"] .rl{
  opacity:0;transform:translate3d(0,var(--m-rise),0);filter:blur(var(--m-blur));
  transition:opacity var(--m-dur) var(--m-ease) var(--d,0ms),transform var(--m-dur) var(--m-ease) var(--d,0ms),filter 500ms var(--m-ease) var(--d,0ms)}
html.js [data-reveal].in:not([data-reveal="lines"]),html.js [data-reveal="lines"].in .rl{opacity:1;transform:none;filter:blur(0)}
.rl{display:block}
.wd{display:inline}
/* 3 · Hero cascade (starts as the intro curtain clears; the hero image is never part of it) */
html.js .hdr>*{opacity:0;transform:translate3d(0,-40px,0);transition:opacity 1s var(--m-ease-io),transform 1s var(--m-ease-io)}
html.js.cascade .hdr>*{opacity:1;transform:none}
html.js [data-cascade]{opacity:0;transform:translate3d(0,var(--m-hero-rise),0);filter:blur(var(--m-blur));
  transition:opacity var(--m-dur) var(--m-ease) var(--d),transform var(--m-dur) var(--m-ease) var(--d),filter 500ms var(--m-ease) var(--d)}
html.js [data-cascade="1"]{--d:100ms}html.js [data-cascade="2"]{--d:200ms}html.js [data-cascade="3"]{--d:300ms}html.js [data-cascade="4"]{--d:400ms}
html.js [data-cascade="2"]{opacity:1;transform:none;filter:none}
html.js [data-cascade="2"] .ln>span{opacity:0;transform:translate3d(0,var(--m-hero-rise),0);filter:blur(var(--m-blur));
  transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease),filter 500ms var(--m-ease)}
html.js [data-cascade="2"] .ln:nth-child(1)>span{transition-delay:200ms}
html.js [data-cascade="2"] .ln:nth-child(2)>span{transition-delay:270ms}
html.js [data-cascade="2"] .ln:nth-child(3)>span{transition-delay:340ms}
html.js.cascade [data-cascade]{opacity:1;transform:none;filter:none}
html.js.cascade [data-cascade="2"] .ln>span{opacity:1;transform:none;filter:none}
/* v1.15 (20 Oct) · landing H1 = LCP: it paints on the first render, with no JS gate. Never opacity:0 or hidden.
   The same rise and blur clear as the cascade, as a CSS animation from first paint; only the fade is dropped. Homepage hero unchanged. */
html.js .lp-h1[data-cascade="2"] .ln>span{opacity:1;transition:none;animation:lpH1Rise var(--m-dur) var(--m-ease) 100ms both,lpH1Blur 500ms var(--m-ease) 100ms both}
@keyframes lpH1Rise{from{transform:translate3d(0,var(--m-hero-rise),0)}to{transform:none}}
@keyframes lpH1Blur{from{filter:blur(var(--m-blur))}to{filter:none}}
.display .ln{overflow:visible}
/* 4 · Panel morph (statement + proof): Snow ↔ Ink scrubbed by scroll, --m 0..1 set by JS */
.panel[data-morph]{--m:0;--mp:calc(var(--m) * 100%);
  background:color-mix(in srgb,var(--c-ink) var(--mp),var(--c-white));color:color-mix(in srgb,var(--c-snow) var(--mp),var(--c-ink))}
.panel[data-morph] .tone-1{color:inherit}
.panel[data-morph] .label,.panel[data-morph] .ph-tag,.panel[data-morph] .stat--sunk .stat-lbl,.panel[data-morph] .stat--text .stat-lbl{color:color-mix(in srgb,var(--c-300) var(--mp),var(--c-label))}
.panel[data-morph] .rule{background:color-mix(in srgb,var(--c-label) var(--mp),var(--c-hair))}
.panel[data-morph] .stat--sunk{background:color-mix(in srgb,var(--c-raised) var(--mp),var(--c-sunk))}
.panel[data-morph] .stat--ink{background:color-mix(in srgb,var(--c-snow) var(--mp),var(--c-ink));color:color-mix(in srgb,var(--c-ink) var(--mp),var(--c-snow))}
.panel[data-morph] .stat--ink .label,.panel[data-morph] .stat--ink .stat-lbl{color:color-mix(in srgb,var(--c-label) var(--mp),var(--c-300))}
.panel[data-morph] .stat--text{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-700) var(--mp),var(--c-200))}
/* 5 · Work transition: ?work=stack (Flowrix card rise) — Aperture is default and the click-to-open */
.work[data-mode="stack"] .work-stage{perspective:1600px;perspective-origin:50% 0;background:transparent}
.work[data-mode="stack"] .wl{clip-path:none!important;-webkit-clip-path:none!important;border-radius:var(--r-sm);transform-origin:50% 100%;will-change:transform;backface-visibility:hidden}
.work[data-mode="stack"] .wl img{transform:scale(var(--s,1));transform-origin:50% 50%}
.case-open{position:fixed;inset:0;z-index:95;background:var(--c-deep) center/cover no-repeat;pointer-events:none;clip-path:circle(0px at 50% 50%);-webkit-clip-path:circle(0px at 50% 50%)}
.case-open[hidden]{display:none}
.case-open p{position:absolute;left:24px;bottom:24px;margin:0;padding:10px 14px;border-radius:999px;background:rgba(22,23,27,.62);color:var(--c-snow);font:400 10.5px/1 var(--f-wide);letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity 300ms var(--ease)}
.case-open.is-open p{opacity:1}
/* 6 · Hover: rolling text (nav + text links) · magnetic fill (primary buttons + arrow circles) · image 1.03 */
.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom}
.roll>span{display:block;transition:transform 400ms var(--m-ease-io)}
.roll>span+span{position:absolute;left:0;top:100%}
a:hover .roll>span,a:focus-visible .roll>span{transform:translate3d(0,-100%,0)}
html.js .lnk[data-rolled]:hover{background-size:0 1px}
html.js .hdr-nav a::after{display:none}
.mag{position:relative;overflow:hidden;isolation:isolate}
.mfill{position:absolute;left:0;top:0;width:260%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
  transform:translate3d(var(--mx,50%),var(--my,50%),0) translate(-50%,-50%) scale(var(--ms,0));transition:transform 500ms var(--m-ease-io)}
.btn-light .mfill{background:var(--c-ink)}
.btn-light.is-fill{color:var(--c-snow);background:var(--c-white)}
.btn-light.is-fill .arw{background:var(--c-snow);color:var(--c-ink)}
.btn-pill .mfill{background:var(--c-snow)}
.hdr.is-solid .btn-pill .mfill{background:var(--c-raised)}
.hdr:not(.is-solid) .hdr-cta .mfill{background:var(--c-ink)}
.hdr:not(.is-solid) .hdr-cta.is-fill{color:var(--c-snow)}
.hdr:not(.is-solid) .hdr-cta.is-fill .arw{background:var(--c-snow);color:var(--c-ink)}
.hdr.is-solid .hdr-cta.is-fill .arw{background:var(--c-snow);color:var(--c-ink)}
.btn,.btn .arw{transition:color 400ms var(--m-ease-io),background 400ms var(--m-ease-io),transform 120ms var(--ease)}
.arw-circle .mfill{background:currentColor}
.arw-circle.is-fill svg{color:var(--fill-ink,var(--c-ink))}
.case-card .arw-circle{--fill-ink:var(--c-snow)}
.work-meta .arw-circle{--fill-ink:var(--c-ink)}
html.js .case-card:hover .arw-circle,html.js .work-meta .arw-circle:hover{background:transparent;color:inherit}
html.js .work-meta .arw-circle:hover{color:var(--c-snow);border-color:var(--c-snow)}
html.js .case-card:hover .arw-circle{color:var(--c-ink)}
.cc-thumb img{transition:opacity 450ms var(--ease),transform 500ms var(--m-ease-io)}
.case-card:hover .cc-thumb img{transform:scale(1.03)}

/* ==========================================================================
   T5 · SERVICE LANDING (one template, five pages) · Gate 1, 15 Oct
   Reuses every homepage token and component; adds only what the landing needs.
   ========================================================================== */
.btn-dark{background:var(--c-ink);color:var(--c-snow)}
.btn-dark .arw{background:var(--c-snow);color:var(--c-ink)}
.btn-dark .mfill{background:var(--c-raised)}
.btn-dark.is-fill .arw{background:var(--c-snow);color:var(--c-ink)}
.lp-pad{padding:clamp(56px,7vw,112px) var(--pad) var(--pad)}
.page-landing .sec-head-l .label,.page-landing .lp-hero-top .label{white-space:normal}
.lp-inq-body,.lp-inq .gform_wrapper{min-width:0}
.lp-inq .gform_button{max-width:100%;white-space:normal;line-height:1.3}

/* slim header: icon + one button; solid from load (no photo hero) */
.hdr--slim{color:var(--c-ink)}
.hdr--slim .hdr-cta{margin-left:auto;display:inline-flex;background:var(--c-ink);color:var(--c-snow)}
.hdr--slim .hdr-cta .arw{background:var(--c-snow);color:var(--c-ink)}
.hdr--slim .hdr-cta .mfill{background:var(--c-raised)}
.hdr--slim .hdr-cta.is-fill .arw{background:var(--c-snow);color:var(--c-ink)}
.hdr--slim .on-light{opacity:1}

/* 1 · hero (text-led) */
.lp-hero{padding-top:var(--g)}
.lp-hero-panel{min-height:min(88svh,880px);padding:calc(var(--pad) + 96px) var(--pad) var(--pad);display:grid;grid-template-rows:auto 1fr auto;gap:clamp(28px,4vw,56px)}
.lp-hero-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.lp-idx .of{color:var(--c-300)}
.lp-h1{font:var(--w-head) clamp(48px,7.2vw,128px)/1.02 var(--f-head);letter-spacing:-.012em;max-width:6.968em;align-self:end}
.lp-h1 .ln{white-space:normal;overflow:visible}
.lp-hero-foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--pad);align-items:end;border-top:1px solid var(--c-200);padding-top:clamp(20px,2.4vw,32px);position:relative}
.lp-hero-rule{display:none}
.lp-hero-foot::before{content:"";position:absolute;left:0;top:-1px;width:120px;height:1px;background:var(--c-hair)}
.lp-line{font:400 clamp(17px,1.4vw,21px)/1.45 var(--f-text);max-width:21.128em}
.lp-hero-copy{display:grid;gap:.75em;align-self:end;min-width:0}                 /* v1.14: holds the line + the /web/ industries line in the left column, so the button stays right */
.lp-line--ind{text-wrap:balance}                                                   /* breaks after "lodges," at 360–1440 (measured) */
.lp-hero-act{display:flex;justify-content:flex-end;align-items:center;gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.lp-price{display:flex;flex-direction:column;gap:8px;margin:0}
.lp-price-v{font:var(--w-head) clamp(22px,1.9vw,30px)/1.1 var(--f-head);font-variant-numeric:var(--num-style)}
html:not([data-lp-svc="web"]) [data-only="web"]{display:none}
.ph-copy-btn{color:inherit;opacity:.72}
/* hero cascade for the landing: no intro, starts on load (r4.js startHero) */

/* 2 · outcome */
.lp-outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pad);margin-top:clamp(40px,5vw,72px)}
.lp-outcome{display:flex;flex-direction:column;gap:16px;padding-top:22px;border-top:1px solid var(--c-200);position:relative}
.lp-outcome::before{content:"";position:absolute;left:0;top:-1px;width:120px;height:1px;background:var(--c-hair)}
.lp-out-h{font:var(--w-head) clamp(26px,2.4vw,38px)/1.1 var(--f-head);letter-spacing:-.01em}
.lp-outcome p{font:400 16px/1.5 var(--f-text);max-width:17.792em}

/* 4 · proof tiles */
.lp-proof-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:clamp(32px,4vw,56px)}
.lp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
html[data-proof-n="1"] .lp-tiles{grid-template-columns:minmax(0,1fr)}
.lp-tile{position:relative;display:grid;grid-template-rows:auto auto;gap:18px;text-decoration:none;color:inherit}
.lp-tile-frame{display:block;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:3/2;background:var(--c-deep)}
html[data-proof-n="1"] .lp-tile-frame{aspect-ratio:21/9}
.lp-tile-frame img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform 500ms var(--m-ease-io)}
.lp-tile:hover .lp-tile-frame img{transform:scale(1.03)}
.lp-tile-meta{display:grid;gap:8px;padding-right:64px}
.lp-tile-name{margin:0;font:var(--w-head) clamp(24px,2.2vw,34px)/1.1 var(--f-head)}
.lp-tile-line{font:400 15px/1.45 var(--f-text);color:var(--c-300)}
.lp-tile .wm-pills{justify-content:flex-start;margin-top:6px}
.lp-tile .arw-circle{position:absolute;right:0;bottom:4px;color:var(--c-snow);border-color:var(--c-700);--fill-ink:var(--c-ink)}
.lp-tile:hover .arw-circle{border-color:var(--c-snow)}
html.js .lp-tile .arw-circle.is-fill{color:var(--c-snow)}
.lp-proof[hidden]{display:none}

/* 5 · inquiry · Gravity Forms form 3 (GF 2.5+ gravity-theme classes; scoped; no renames) */
.lp-inq-panel{padding:clamp(56px,7vw,112px) var(--pad) var(--pad);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--pad)}
.lp-inq-intro{display:flex;flex-direction:column;gap:22px;align-self:start;position:sticky;top:calc(var(--g) + 96px)}
.lp-inq-h{font:var(--w-head) clamp(34px,3.6vw,58px)/1.06 var(--f-head);letter-spacing:-.01em;max-width:6.432em}
.lp-inq-line{font:400 16px/1.5 var(--f-text);max-width:18.904em}
.lp-inq .gform_wrapper.gravity-theme{--fld-bd:var(--c-400);--fld-bg:var(--c-raised);--fld-fg:var(--c-snow)}
.lp-inq .gform_fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--gap)}
.lp-inq .gfield{display:flex;flex-direction:column;gap:8px;min-width:0}
.lp-inq .gfield--width-full{grid-column:1/-1}
.lp-inq .gfield_label{font:400 11px/1.35 var(--f-wide);letter-spacing:.16em;text-transform:uppercase;color:var(--c-300)}
.lp-inq .gfield_required_asterisk{color:var(--c-300);margin-left:.3em}
.lp-inq .gfield input,.lp-inq .gfield select,.lp-inq .gfield textarea{width:100%;min-height:52px;border-radius:12px;border:1px solid var(--fld-bd);background:var(--fld-bg);color:var(--fld-fg);
  font:400 16px/1.4 var(--f-text);padding:14px 16px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);-webkit-appearance:none;appearance:none}
.lp-inq .gfield select{background-image:linear-gradient(45deg,transparent 50%,var(--c-300) 50%),linear-gradient(-45deg,transparent 50%,var(--c-300) 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.lp-inq .gfield textarea{min-height:160px;resize:vertical}
.lp-inq .gfield ::placeholder{color:var(--c-400)}
.lp-inq .gfield input:hover,.lp-inq .gfield select:hover,.lp-inq .gfield textarea:hover{border-color:var(--c-300)}
.lp-inq .gfield input:focus-visible,.lp-inq .gfield select:focus-visible,.lp-inq .gfield textarea:focus-visible{outline:none;border-color:var(--c-snow);box-shadow:0 0 0 3px rgba(242,242,242,.22)}
.lp-inq .gfield_error input,.lp-inq .gfield_error select,.lp-inq .gfield_error textarea{border-color:var(--c-err-on-dark);box-shadow:inset 3px 0 0 var(--c-err-on-dark)}
.lp-inq .gfield_validation_message{font:400 13.5px/1.4 var(--f-text);color:var(--c-err-on-dark)}
.lp-inq .gform_validation_errors{margin:0 0 24px;padding:14px 18px;border-radius:12px;border:1px solid var(--c-err-on-dark);color:var(--c-err-on-dark)}
.lp-inq .gform_validation_errors h2{font:400 15px/1.4 var(--f-text);margin:0}
.lp-inq .gform_footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--c-700)}
.lp-inq .gform_required_legend{font:400 13.5px/1.4 var(--f-text);color:var(--c-300);margin:0}
.lp-inq .gform_button{min-height:56px;padding:0 34px;border-radius:999px;border:0;background:var(--c-snow);color:var(--c-ink);cursor:pointer;
  font:400 12px/1 var(--f-wide);letter-spacing:.18em;text-transform:uppercase;transition:background var(--t-fast) var(--ease),transform 120ms var(--ease)}
.lp-inq .gform_button:hover{background:var(--c-white)}
.lp-inq .gform_button:active{transform:translateY(1px)}
.lp-inq .gform_button:focus-visible{outline:2px solid var(--c-snow);outline-offset:3px}
.lp-sending{display:none;flex-basis:100%;height:2px;background:var(--c-700);border-radius:2px;overflow:hidden}
.lp-sending i{display:block;height:100%;width:40%;background:var(--c-snow);animation:lpSend 1.1s var(--m-ease-io) infinite}
@keyframes lpSend{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.is-sending .lp-sending{display:block}
.is-sending .gform_button{opacity:.55;pointer-events:none}
.gform_confirmation_wrapper[hidden]{display:none}
.gform_confirmation_message{display:grid;gap:18px;padding:clamp(28px,3vw,44px);border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--c-700);outline:none}
.lp-ok-h{font:var(--w-head) clamp(30px,3vw,46px)/1.08 var(--f-head)}

/* 6 · FAQ (<details>, works without JS) */
.faq{border-bottom:1px solid var(--c-200)}
.faq details{border-top:1px solid var(--c-200);position:relative}
.faq details::before{content:"";position:absolute;left:0;top:-1px;width:120px;height:1px;background:var(--c-hair)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:clamp(48px,6vw,96px) minmax(0,1fr) 44px;align-items:center;gap:clamp(14px,2vw,32px);padding:clamp(20px,2.2vw,30px) 0;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq-q{font:var(--w-head) clamp(21px,1.9vw,30px)/1.2 var(--f-head);letter-spacing:-.005em}
.faq .pm{width:44px;height:44px;border-radius:50%;border:1px solid var(--c-300);position:relative}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;transition:transform 500ms var(--m-ease)}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.faq-a{display:grid;grid-template-columns:clamp(48px,6vw,96px) minmax(0,1fr) 44px;gap:clamp(14px,2vw,32px);padding:0 0 clamp(22px,2.4vw,32px)}
.faq-a p{grid-column:2;font:400 16px/1.55 var(--f-text);max-width:34.472em}

/* 7 · closing */
.lp-close-panel{min-height:min(70svh,640px)}

@media (max-width:899px){
  .hdr--slim .hdr-cta{display:inline-flex;min-height:44px;padding-left:16px}
  .hdr--slim .hdr-cta>span:not(.mfill){font-size:10.5px}
  .lp-hero-panel{min-height:auto;padding:120px 20px 20px}
  .lp-hero-top{flex-wrap:wrap}
  .lp-idx{display:none}
  .lp-h1{font-size:clamp(40px,11.4vw,64px)}
  .lp-hero-foot{grid-template-columns:1fr;gap:24px}
  .lp-hero-act{justify-content:flex-start}
  .lp-hero-act .btn-xl{width:100%;justify-content:space-between}
  .lp-outcomes{grid-template-columns:1fr;gap:32px}
  .lp-tiles{grid-template-columns:1fr;gap:40px}
  .lp-proof-head .lnk{display:none}
  .lp-inq-panel{grid-template-columns:minmax(0,1fr)}
  .lp-inq-intro{position:static}
  .lp-inq .gform_fields{grid-template-columns:minmax(0,1fr)}
  .lp-inq .gform_button{width:100%}
  .faq summary,.faq-a{grid-template-columns:36px minmax(0,1fr) 44px}
}
@media (min-width:900px) and (max-width:1100px){
  .lp-inq-panel{grid-template-columns:1fr}
  .lp-inq-intro{position:static}
}
@media (prefers-reduced-motion:reduce){
  .lp-sending i{animation:none;width:100%}
  .lp-tile-frame img{transition:none}
  .faq .pm::before,.faq .pm::after{transition:none}
}

/* ---------- P1 v1.2 ---------- */
/* Figures (Creative ruling via PD 12:00 PM): lining + proportional ONLY on stat cards, prices, form UI and tables.
   Running text keeps the fonts' default (old-style) figures. */
.stat-fig,.lp-price-v,table,.lp-inq .gfield,.lp-inq .gform_footer,.lp-inq .gform_validation_errors,.gform_confirmation_message{font-variant-numeric:var(--num-style)}

/* GF validation summary is not a heading: never Title Case it, even where GF renders it as <h2> (class unchanged) */
.lp-inq .gform_submission_error{text-transform:none;margin:0;font:400 15px/1.4 var(--f-text)}

/* Privacy line: small text directly under the submit (v2.1 sentence + Privacy Policy link, as written) */
.lp-inq .lp-privacy{flex-basis:100%;margin:12px 0 0;font:400 13px/1.5 var(--f-text);color:var(--c-300);text-align:right}
@media (max-width:899px){.lp-inq .lp-privacy{text-align:left}}
.lp-inq .lp-privacy a{color:var(--c-snow);text-decoration:underline;text-underline-offset:2px}
.lp-inq .lp-privacy a:hover{text-decoration-thickness:2px}
.lp-inq .gform_footer{align-items:center}

/* Gravity Forms hiding rules: Dev's five lines VERBATIM (extracted by script from Dev's STATUS Mon 19 Oct, sha256 of the five lines 1fb94b45a5bff934…; PD relay 2:16 PM). Replaces Design's draft. */
.lp-inq .gform_validation_container,
.lp-inq .gfield--type-honeypot { display: none !important; }
.lp-inq .gfield--type-hidden,
.lp-inq .gform_hidden { display: none !important; }
.lp-inq .gform_ajax_spinner { display: none !important; } /* P1 uses its own sending bar */

/* v1.3 · filled section heads: no one-word last line (15 Oct) */
.sec-h,.closer-h{text-wrap:balance}
.statement{text-wrap:pretty}
.svc-sum,.svc-sum-m{text-wrap:balance}
.stage-line{text-wrap:pretty} /* v1.4: two-line summaries split evenly, no stranded word */
/* v1.7 · landing headlines from copy v2.1 run 39–57 chars: wider measure, balanced lines; stage names never strand "&" */
.lp-h1{max-width:9.112em;text-wrap:balance}
.stage-name{text-wrap:balance;max-width:8.04em}
/* v1.7 · landing proof line (no-tile pages) */
.lp-proof-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px;font:400 clamp(20px,2vw,28px)/1.35 var(--f-head);color:var(--c-snow);max-width:18.224em;text-wrap:balance}
.lp-proof-line[hidden]{display:none}
.lp-proof-line .lnk{font-size:11px}

/* v1.5 · footer studio block ≥ 320 px at 600–1024 so the slot holds the horizontal lockup (PD relay 3:05 PM, 15 Oct). Layout only; the slot rule is unchanged */
@media (min-width:600px) and (max-width:1024px){.foot-c--id{min-width:320px}}
@media (min-width:900px) and (max-width:1024px){.foot-cols{grid-template-columns:minmax(320px,4fr) repeat(3,minmax(0,2.6fr))}}
.foot-c a{text-wrap:balance} /* v1.5: two-line service links split evenly in the narrower columns */
@media (max-width:359px){.statement{font-size:27px}} /* v1.4: "philanthropic brands." holds one line at 320 */
[data-reveal="lines"] .wd,.nb{white-space:nowrap} /* compounds never split at the hyphen, in or out of the line reveal */

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hdr-nav{display:none}
  .hdr-cta{margin-left:auto}
}
@media (max-width:899px){
  :root{--m-rise:32px}
  body{font-size:16px}
  .hdr{left:calc(var(--g) + 16px);right:calc(var(--g) + 16px);top:calc(var(--g) + 12px)}
  .hdr-cta{display:inline-flex;margin-left:auto;min-height:44px;padding-left:14px} /* Batch B gate (19 Oct, PD relay 1:50 PM): "Start A Project" stays in the phone header */
  .hdr-cta>span:not(.mfill){font-size:10px;letter-spacing:.14em}
  .hdr-menu{display:inline-flex;margin-left:8px}
  .hdr:not(.is-solid) .hdr-menu{padding:0 14px;border-radius:999px;background:rgba(22,23,27,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} /* over sky: keeps the label ≥ 4.5:1 */
  .panel--hero{min-height:560px}
  .hero-media picture,.hero-img,.hero-video{object-position:50% 50%}
  .hero-protect{background:linear-gradient(180deg,rgba(22,23,27,.42) 0%,rgba(22,23,27,0) 22%),linear-gradient(0deg,rgba(22,23,27,.78) 0%,rgba(22,23,27,.52) 40%,rgba(22,23,27,0) 70%)}
  .hero-top{top:94px;left:20px;right:20px}
  .hero-coord{display:none}
  .hero-top .label{padding:8px 12px 8px 10px;border-radius:999px;background:rgba(22,23,27,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} /* sky behind the eyebrow on phone: pill keeps 11px label ≥ 4.5:1 */
  .hero-foot{left:20px;right:20px;bottom:128px;gap:22px}
  .display{font-size:clamp(38px,11.2vw,64px)}
  .display .ln{white-space:normal} /* fallback-font safety before the kit loads */
  .case-card{left:10px;right:10px;bottom:10px;width:auto;grid-template-columns:64px 1fr auto;padding:8px;gap:12px}
  .cc-thumb{width:64px;height:64px}
  .cc-name{font-size:15.5px}
  .cc-disc{font-size:12.5px}
  .studio-grid{grid-template-columns:1fr;gap:28px}
  .studio-aside{flex-direction:row;align-items:center;justify-content:space-between;padding:0}
  .stats{grid-template-columns:1fr 1fr}
  .stats .stat:nth-child(n){grid-column:span 1;grid-row:auto}
  .stats .stat:nth-child(3),.stats .stat:nth-child(4){grid-column:1/-1}
  .stats .stat:nth-child(3){min-height:0;flex-direction:row;flex-wrap:wrap;align-items:flex-end}
  .stats .stat:nth-child(3) .label{flex-basis:100%}
  .stats .stat:nth-child(3) .stat-fig{margin:0}
  .stats .stat:nth-child(3) .stat-lbl{margin-left:auto;text-align:right}
  .stat{min-height:200px;gap:20px}
  .stat-fig{font-size:clamp(56px,16vw,92px)}
  .stat--tall .stat-fig{flex-direction:row;align-items:flex-start;gap:.1em}
  .stat--text{grid-template-columns:1fr}
  .stat--text .stat-word{grid-row:2}
  .stat--text .stat-lbl{grid-column:1;grid-row:3;text-align:left}
  .work-panel{padding:12px;gap:14px}
  .work-head{padding:6px 6px 0}
  .work-head .lnk{display:none}
  .work-steps{margin-right:0}
  .work-meta{grid-template-columns:minmax(0,1fr) auto;row-gap:14px}
  .wm-idx{display:none}
  .wm-pills{grid-column:1;grid-row:2;justify-content:flex-start}
  .work-meta .arw-circle{grid-column:2;grid-row:1/3;align-self:end}
  .wm-line{font-size:14.5px}
  .sec-head{grid-template-columns:1fr;gap:22px}
  .sec-head-l{flex-direction:row;align-items:center;justify-content:space-between;padding:0}
  .sec-all{justify-self:start;padding:0}
  .held-marks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .held-marks li:nth-child(n+4){display:none}
  .svc-head{grid-template-columns:36px minmax(0,1fr);gap:14px;padding:22px 56px 22px 0}
  .svc-name{font-size:clamp(22px,6.2vw,30px)}
  .svc-sum,.svc-head .arw-circle{display:none}
  .svc-tog{display:grid;place-items:center;position:absolute;right:0;top:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--c-300)}
  .svc-tog i,.svc-tog i::after{display:block;width:12px;height:1.5px;background:currentColor;transition:transform 500ms var(--m-ease)}
  .svc-tog i::after{content:"";transform:rotate(90deg)}
  .svc.is-open .svc-tog i::after{transform:rotate(0)}
  .svc.is-open .svc-body{grid-template-rows:1fr}
  .svc-inner{grid-template-columns:36px minmax(0,1fr);column-gap:14px}
  .svc-sum-m{display:block;grid-column:2;font:400 15px/1.45 var(--f-text);margin-bottom:16px}
  .svc-media{grid-column:1/-1;height:200px;margin-bottom:22px}
  .svc.is-open .svc-media{clip-path:inset(0 0 0 0 round var(--r-sm))}
  .svc.is-open .svc-media img{transform:scale(1)}
  .proc-body{margin-left:28px}
  .proc-track{position:absolute;left:-28px;top:10px;bottom:0;width:1px;height:auto;margin:0}
  .proc-track i{transform-origin:top;transform:scaleY(var(--pp,0))}
  .proc-list{grid-template-columns:1fr;gap:34px}
  .stage-dot{top:6px;left:-32px}
  .stage-name{max-width:none}
  .closer-panel{min-height:560px}
  .closer-act .btn-xl{width:100%;justify-content:space-between}
  .foot-cols{grid-template-columns:1fr 1fr;row-gap:44px}
  .foot-c--id{grid-column:1/-1}
}
@media (max-width:420px){
  .stat-lbl{font-size:13.5px}
  .stats .stat:nth-child(1) .stat-fig{font-size:56px}
}

/* ---------- reduced motion: fades only ---------- */
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js [data-reveal] .rl,html.js [data-cascade],html.js [data-cascade] .ln>span,html.js .hdr>*{transform:none!important;filter:none!important}
  html.js [data-reveal],html.js [data-reveal] .rl,html.js [data-cascade],html.js [data-cascade] .ln>span,html.js .hdr>*{transition:opacity 600ms linear!important}
  html.js .lp-h1[data-cascade="2"] .ln>span{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
  .panel[data-morph]{--m:0!important}
  .wl{transition:opacity 500ms linear}
  .wl img{transform:none!important}
  .work-meta.is-out .wm-title .ln>span{transform:none}
  .btn:hover .arw svg{animation:none}
  .roll>span{transition:none}a:hover .roll>span{transform:none}
  .mfill{transition:none}
  .svc-body,.svc-media,.svc-media img,.svc-name,.closer-disc{transition:none!important}
  .closer-disc{--cd:1}
}

/* view transition hook for case pages (cross-document, where supported) */
@view-transition{navigation:auto}
.wl.is-active img{view-transition-name:case-media}

/* Phone header (≤ 480 px): logo + "Start A Project" + Menu bars must fit 272 px (320 screens). Batch B gate, 19 Oct. */
@media (max-width:480px){
  .hdr:not(.hdr--slim){gap:8px}
  .hdr:not(.hdr--slim) .hdr-cta{padding:0 14px;white-space:nowrap;flex-shrink:0}
  .hdr:not(.hdr--slim) .hdr-cta>span:not(.mfill){letter-spacing:.1em}
  .hdr:not(.hdr--slim) .hdr-cta .arw{display:none}
  .hdr .hdr-menu{font-size:0;gap:0;width:44px;padding:0!important;justify-content:center;margin-left:8px} /* bars only; accessible name aria-label="Menu" */
}

/* ---------- CLIENT-MARK (v1.1): a client's own mark on a raised ground, never a photo. Contained, never cropped; no caption implies Peak designed it. ---------- */
.wl--mark{background:var(--c-raised)}
.wl--mark img{box-sizing:border-box;object-fit:contain;object-position:50% 42%;padding:clamp(72px,14vh,160px) clamp(56px,22vw,420px) clamp(150px,26vh,260px)}
.svc-media--mark{background:var(--c-raised)}
.svc-media--mark img{box-sizing:border-box;object-fit:contain;padding:clamp(26px,3vw,44px) clamp(40px,5vw,72px)}
.case-card.is-mark .cc-thumb{background:var(--c-raised)}
.case-card.is-mark .cc-thumb img{box-sizing:border-box;object-fit:contain;padding:12px 10px}
.case-open.is-mark{background-color:var(--c-raised);background-size:min(46vw,460px) auto}
.lp-tile-frame--mark{background:var(--c-raised)}
.lp-tile-frame--mark img{box-sizing:border-box;object-fit:contain;padding:9% 20%}
@media (max-width:899px){
  .wl--mark img{padding:18vh 12vw 24vh}
  .case-card.is-mark .cc-thumb img{padding:8px 6px}
}

/* ==========================================================================
   20 Oct, Principal's 2:00 PM look + 2:35 PM ruling (Design, one version with the H1 patch base)
   ========================================================================== */
/* Look 1 · services rows: nothing of a row's preview can show or paint outside the row when closed.
   The title shift (12 px) and the preview are hover/focus states only; at rest every title aligns. */
.svc-body{contain:paint}
.svc-media{visibility:hidden;transition:clip-path 800ms var(--m-ease,cubic-bezier(.16,1,.3,1)) 60ms,visibility 0s linear 860ms}
.svc.is-open .svc-media{visibility:visible;transition:clip-path 800ms var(--m-ease,cubic-bezier(.16,1,.3,1)) 60ms,visibility 0s}
@media (hover:hover) and (min-width:900px){
  .svc:hover .svc-media,.svc:focus-within .svc-media{visibility:visible;transition:clip-path 800ms var(--m-ease,cubic-bezier(.16,1,.3,1)) 60ms,visibility 0s}
}
/* Look 2 · "(01) What you get": the three bodies start on one line at desktop, however the headings wrap (subgrid; older browsers keep today's layout) */
@media (min-width:900px){@supports (grid-template-rows:subgrid){
  .lp-outcomes{grid-template-rows:repeat(3,auto);row-gap:0}
  .lp-outcome{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:16px;align-content:start}
}}
/* Ruling 2:35 PM · no-link case card: for a case without a live page. One class, .is-nolink, on the card.
   Same card, finished: image, name, line, pills unchanged. No arrow, no hover lift, no pointer, no click. */
.is-nolink{cursor:default}
.lp-tile.is-nolink,.wl.is-nolink{pointer-events:none}
.lp-tile.is-nolink .arw-circle{display:none}
.lp-tile.is-nolink .lp-tile-meta{padding-right:0}
.lp-tile.is-nolink:hover .lp-tile-frame img{transform:none}
.work-meta.is-nolink [data-wm-link]{visibility:hidden}