/* Blue Canvas Growth — site styles */
:root{
  --ink:#0C1B26;
  --ink-2:#12283A;
  --ink-3:#1B3B55;
  --paper:#F3F1EC;
  --paper-2:#E9E5DC;
  --white:#FCFBF8;
  --stone:#C9BBA2;
  --stone-2:#A89B81;
  --water:#386088;
  --water-2:#7FB0D6;
  --water-deep:#25476A;
  --text:#0C1B26;
  --muted:#55636C;
  --muted-on-ink:#A3B3BF;
  --line:rgba(12,27,38,.14);
  --line-on-ink:rgba(243,241,236,.14);
  --f-display:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --max:1200px;
  --gutter:clamp(16px,4vw,40px);
  --r:10px;
  --t-hero:clamp(2.8rem,7vw,6.4rem);
  --t-1:clamp(2.1rem,4.4vw,3.6rem);
  --t-2:clamp(1.6rem,2.8vw,2.3rem);
  --t-3:clamp(1.15rem,1.6vw,1.35rem);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--water);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100;border-radius:6px}
.skip:focus{left:8px}

h1,h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.028em;line-height:1.02;text-wrap:balance;margin:0}
h3,h4{font-family:var(--f-body);font-weight:600;letter-spacing:-.005em;line-height:1.2;text-wrap:balance;margin:0}
h1 em,h2 em,h3 em{font-style:normal;font-weight:500;color:var(--water)}
.on-ink h1 em,.on-ink h2 em{color:var(--water-2)}
h1{font-size:var(--t-1)}
h2{font-size:var(--t-2);line-height:1.08}
h3{font-size:var(--t-3)}
p{margin:0}
.lede{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.55;color:var(--muted);max-width:60ch}
.on-ink .lede{color:var(--muted-on-ink)}

/* plan-sheet label, like a callout on a drawing set */
.tag{font-family:var(--f-body);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--water);display:inline-flex;align-items:center;gap:12px}
.tag::before{content:"";width:28px;height:1px;background:currentColor}
.on-ink .tag{color:var(--water-2)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,136px)}
.section.tight{padding-block:clamp(56px,7vw,96px)}
.on-ink{background:var(--ink);color:var(--paper)}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--white)}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:10px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-body);font-weight:600;font-size:1rem;line-height:1;padding:16px 22px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--water);color:var(--white)}
.btn-primary:hover{background:var(--water-deep)}
.on-ink .btn-primary:hover{background:var(--water-2);color:var(--ink)}
.btn-ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--text)}
.on-ink .btn-ghost{border-color:var(--line-on-ink);color:var(--paper)}
.on-ink .btn-ghost:hover{border-color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(11,26,34,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--paper);border-bottom:1px solid var(--line-on-ink)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:88px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:50px;width:auto;display:block}
@media (max-width:420px){.brand img{height:36px}}
@media (max-width:960px){.site-header .wrap{height:76px}.brand img{height:40px}}
.nav{display:flex;align-items:center;gap:4px}
.nav a,.nav button.nav-trigger{color:var(--paper);text-decoration:none;font-size:1.05rem;font-weight:500;padding:11px 14px;border-radius:8px;background:none;border:0;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav a:hover,.nav button.nav-trigger:hover,.nav a[aria-current="page"]{background:rgba(238,242,240,.08)}
.nav a[aria-current="page"]{color:var(--water-2)}
.nav .btn{margin-left:12px;padding:14px 22px;font-size:1rem}
.nav .btn-primary{color:var(--white)}
.dd{position:relative}
.dd-menu{position:absolute;top:100%;padding-top:10px;left:0;min-width:280px;background:none!important;border:0!important;box-shadow:none!important;background:var(--ink-2);border:1px solid var(--line-on-ink);border-radius:12px;padding:8px;display:none;box-shadow:0 24px 48px rgba(0,0,0,.35)}
.dd.open .dd-menu{display:block}
.dd-menu a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px}
.dd-menu a small{color:var(--muted-on-ink);font-size:.82rem;font-weight:400}
.menu-toggle{display:none;background:none;border:1px solid var(--line-on-ink);color:var(--paper);border-radius:8px;padding:9px 12px;font:inherit;font-size:.9rem;cursor:pointer}
@media (max-width:960px){
  .menu-toggle{display:inline-flex}
  .nav{position:fixed;inset:76px 0 auto 0;top:calc(76px + env(safe-area-inset-top,0px));background:var(--ink);flex-direction:column;align-items:stretch;padding:12px var(--gutter) 24px;gap:2px;border-bottom:1px solid var(--line-on-ink);display:none;max-height:calc(100vh - 76px);overflow:auto}
  .nav.open{display:flex}
  .nav a,.nav button.nav-trigger{padding:14px 8px;font-size:1.05rem}
  .dd-menu{position:static;display:block;background:none;border:0;box-shadow:none;padding:0 0 0 12px;min-width:0}
  .dd .nav-trigger{display:none}
  .nav .btn{margin:12px 0 0}
}

/* reveal: visible at rest, subtle lift when JS runs */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* photos with graceful fallback while images are missing */
.ph{position:relative;overflow:hidden;border-radius:var(--r);background:linear-gradient(160deg,var(--ink-3),var(--water-deep) 60%,var(--ink) 140%);aspect-ratio:4/3;max-width:100%}
.ph img{transition:transform 1.2s ease}
.ph:hover img{transform:scale(1.03)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph::after{content:attr(data-cap);position:absolute;left:12px;bottom:10px;font-family:var(--f-body);font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(249,251,250,.85);text-shadow:0 1px 6px rgba(0,0,0,.4);pointer-events:none}
.ph.wide{aspect-ratio:16/9}
.ph.tall{aspect-ratio:4/5}

/* ----- scroll story (home hero) ----- */
.story{position:relative;background:var(--ink);color:var(--paper)}
.story-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;width:100%;overflow:hidden}
.story svg.scene{position:absolute;inset:0;width:100%;height:100%}
.story-intro{position:absolute;left:var(--gutter);right:var(--gutter);top:clamp(88px,14vh,150px);max-width:880px;z-index:3}
.story-intro h1{font-size:var(--t-hero);color:var(--white);line-height:.98}
.story-intro h1 em{color:var(--water-2)}
.story-intro .lede{margin-top:20px;color:#C3D1D6}
.story-intro .btn-row{margin-top:28px}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-on-ink);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(var(--water-2),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.rail{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:2px;opacity:0}
.rail li{list-style:none;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(157,176,184,.55);display:flex;align-items:center;gap:10px;padding:5px 0;transition:color .3s}
.rail li::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;flex:none;transition:background .3s}
.rail li.done{color:var(--muted-on-ink)}
.rail li.done::before{background:currentColor}
.rail li.now{color:var(--white)}
.rail li.now::before{background:var(--water-2);border-color:var(--water-2);box-shadow:0 0 0 4px rgba(87,183,207,.2)}
.rail ol{margin:0;padding:0}

.hud{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);width:min(360px,34vw);z-index:4;height:300px}
.card{position:absolute;inset:auto 0 auto 0;top:0;background:rgba(19,42,56,.92);border:1px solid var(--line-on-ink);border-radius:14px;padding:18px 18px 16px;box-shadow:0 30px 60px rgba(0,0,0,.35);opacity:0;backdrop-filter:blur(6px)}
.card .k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--water-2);display:flex;justify-content:space-between;gap:10px}
.card .k b{font-weight:500;color:var(--muted-on-ink)}
.card .t{font-family:var(--f-body);font-weight:600;font-size:1.15rem;color:var(--white);margin-top:8px;line-height:1.2}
.card .pic{margin:12px -18px -16px;border-radius:0 0 14px 14px;overflow:hidden;aspect-ratio:16/9}
.card .pic img{width:100%;height:100%;object-fit:cover;display:block}
.card .d{font-size:.92rem;color:#B9C8CE;margin-top:6px;line-height:1.45}
.card .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;padding:4px 8px;border-radius:999px;border:1px solid var(--line-on-ink);color:#C7D5DA;white-space:nowrap}
.chip.ok{border-color:rgba(118,200,160,.45);color:#9FE0BF}
.chip.money{border-color:rgba(195,181,155,.5);color:var(--stone)}

.ledger{position:absolute;right:var(--gutter);bottom:clamp(20px,5vh,48px);z-index:4;font-family:var(--f-mono);text-align:right;opacity:0}
.ledger .l{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-ink)}
.ledger .v{font-family:var(--f-display);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.8rem);color:var(--white);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.caption{position:absolute;left:var(--gutter);bottom:clamp(20px,5vh,48px);z-index:4;max-width:min(520px,60vw);opacity:0}
.caption p{font-family:var(--f-display);font-weight:500;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.15;color:var(--white)}
.caption span{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--water-2);margin-bottom:8px}
.story-end{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,26,34,0) 30%,rgba(11,26,34,.82) 100%)}
.story-end .inner{padding:0 var(--gutter) clamp(40px,9vh,90px);max-width:var(--max);margin-inline:auto;width:100%}
.story-end h2{font-size:var(--t-1);color:var(--white);max-width:18ch}
.story-end .btn-row{margin-top:24px}
.story.done .story-end{pointer-events:auto}

@media (max-width:760px){
  .rail{top:calc(76px + env(safe-area-inset-top,0px));transform:none;left:0;right:0;padding-inline:var(--gutter);flex-direction:row;overflow:hidden}
  .rail ol{display:flex;gap:14px;white-space:nowrap}
  .rail li{font-size:.62rem}
  .rail li:not(.now){display:none}
  .hud{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:118px;transform:none;height:190px}
  .card{padding:14px}
  .card .t{font-size:1.05rem}
  .card .d{font-size:.85rem}
  .caption{max-width:none;right:var(--gutter);bottom:20px}
  .caption p{font-size:1.05rem}
  .ledger{top:calc(104px + env(safe-area-inset-top,0px));bottom:auto}
  .ledger .v{font-size:1.4rem}
}

/* static fallback for reduced motion: story plays as a list */
.story-static{display:none}
.reduced .story-static{display:block}
.reduced .rail,.reduced .hud,.reduced .ledger,.reduced .caption,.reduced .scroll-cue,.reduced .story-end{display:none}
.story-static ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.story-static li{border:1px solid var(--line-on-ink);border-radius:12px;padding:16px}
.story-static li b{display:block;font-family:var(--f-body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--water-2);margin-bottom:6px;font-weight:500}

/* ----- common blocks ----- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,88px);align-items:center}
.split.top{align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

.page-hero{background:var(--ink);color:var(--paper);padding-block:clamp(64px,9vw,120px) clamp(56px,7vw,96px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-on-ink) 1px,transparent 1px),linear-gradient(90deg,var(--line-on-ink) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 85%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 85%);pointer-events:none}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem);color:var(--white);max-width:20ch;margin-top:18px}
.page-hero .lede{margin-top:22px}
.page-hero .btn-row{margin-top:32px}
.page-hero .split{align-items:end}

.proof{display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,64px);padding-top:clamp(32px,4vw,48px);margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--line-on-ink)}
.proof div{display:flex;flex-direction:column;gap:4px}
.proof strong{font-family:var(--f-display);font-weight:600;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1;color:var(--white);font-variant-numeric:tabular-nums}
.proof span{font-size:.9rem;color:var(--muted-on-ink);max-width:22ch}
.proof.light{border-top-color:var(--line)}
.proof.light strong{color:var(--ink)}
.proof.light span{color:var(--muted)}

.head{display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:clamp(36px,5vw,64px)}

/* service cards */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}
.svc{display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--white);text-decoration:none;transition:border-color .2s,transform .2s}
.svc:hover{border-color:var(--water);transform:translateY(-2px)}
.svc .code{font-family:var(--f-body);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--water)}
.svc p{color:var(--muted)}
.svc .more{margin-top:auto;padding-top:8px;font-weight:600;color:var(--water-deep);display:inline-flex;gap:8px}

/* process line (real sequence) */
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--ink)}
.process li{padding:22px 22px 0 0;display:flex;flex-direction:column;gap:10px;position:relative}
.process li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--water);box-shadow:0 0 0 4px var(--paper)}
.process .n{font-family:var(--f-display);font-size:1.1rem;color:var(--water)}
.process p{color:var(--muted);font-size:.97rem}
.on-ink .process{border-top-color:var(--line-on-ink)}
.on-ink .process li::before{box-shadow:0 0 0 4px var(--ink)}
.on-ink .process p{color:var(--muted-on-ink)}
.on-ink .process .n{color:var(--water-2)}
@media (max-width:860px){.process{grid-template-columns:1fr 1fr;row-gap:28px}}
@media (max-width:520px){.process{grid-template-columns:1fr}}

/* definition list of components */
.components{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.components > div{padding:28px 28px 28px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.components > div:nth-child(odd){padding-right:40px}
.components .code{font-family:var(--f-body);font-weight:600;font-size:.7rem;color:var(--water);letter-spacing:.18em;text-transform:uppercase}
.components p{color:var(--muted);font-size:.97rem}
@media (max-width:760px){.components{grid-template-columns:1fr}.components > div:nth-child(odd){padding-right:0}}

/* checklists */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.checks li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;line-height:1.45}
.checks li::before{content:"";width:14px;height:14px;margin-top:4px;border-radius:3px;background:var(--water);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.on-ink .checks li::before{background:var(--water-2)}

/* packages (tabs) */
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;background:var(--paper-2);border-radius:999px;width:fit-content;max-width:100%}
.tabs button{font:inherit;font-weight:600;font-size:.92rem;border:0;background:none;padding:11px 18px;border-radius:999px;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--white)}
.pkg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);margin-top:28px;padding:clamp(24px,4vw,44px);background:var(--white);border:1px solid var(--line);border-radius:18px}
.pkg h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.pkg .for{font-family:var(--f-body);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--water-deep)}
.pkg p{color:var(--muted)}
@media (max-width:760px){.pkg{grid-template-columns:1fr}.tabs{border-radius:14px}}

/* package columns (design / content) */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.col{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--white);display:flex;flex-direction:column;gap:16px}
.col .for{font-family:var(--f-body);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--water-deep)}
.col .btn{margin-top:auto;align-self:flex-start}
.col.feature{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.col.feature h3{color:var(--white)}
.col.feature .for{color:var(--water-2)}
.col.feature .checks li::before{background:var(--water-2)}

/* quote */
.quote{font-family:var(--f-display);font-weight:500;font-style:normal;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.3;max-width:30ch;text-wrap:balance}
.quote-by{font-family:var(--f-body);font-weight:600;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-on-ink);margin-top:20px}

/* posts list */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.post-card .ph{aspect-ratio:3/2}
.post-card h3{font-size:1.2rem;transition:color .2s}
.post-card:hover h3{color:var(--water-deep)}
.post-card p{color:var(--muted);font-size:.95rem}
.post-card .meta{font-family:var(--f-body);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;text-decoration:none;margin-bottom:clamp(40px,6vw,72px)}
.post-feature h2{transition:color .2s}
.post-feature:hover h2{color:var(--water-deep)}
@media (max-width:760px){.post-feature{grid-template-columns:1fr}}

/* article */
.article{max-width:700px;margin-inline:auto}
.article h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:2.2em 0 .6em}
.article h3{font-size:1.15rem;margin:1.8em 0 .5em}
.article p{margin:0 0 1.05em;font-size:1.08rem;line-height:1.7}
.article ul{margin:0 0 1.2em;padding-left:1.2em}
.article li{margin:.35em 0;font-size:1.06rem}
.article li::marker{color:var(--water)}
.back{font-family:var(--f-body);font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--water-2);text-decoration:none}
.back:hover{color:var(--white)}

/* cta band */
.cta-band{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-120px;bottom:-160px;width:520px;height:520px;border-radius:46% 54% 50% 50%/55% 45% 55% 45%;background:radial-gradient(circle at 40% 40%,var(--water) 0%,var(--water-deep) 60%,transparent 70%);opacity:.5;pointer-events:none}
.cta-band .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr auto;gap:32px;align-items:end}
.cta-band h2{font-size:var(--t-1);max-width:18ch}
.cta-band p{color:var(--muted-on-ink);margin-top:16px;max-width:50ch}
@media (max-width:760px){.cta-band .wrap{grid-template-columns:1fr}}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.9rem;font-weight:600}
.field .hint{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:14px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--white);color:var(--text);width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--water);box-shadow:0 0 0 4px rgba(31,143,176,.15)}
.field [aria-invalid="true"]{border-color:#B4432F}
.err{color:#B4432F;font-size:.85rem}
.form-note{font-size:.85rem;color:var(--muted)}
@media (max-width:600px){.form{grid-template-columns:1fr}}
.book-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,4vw,40px)}
.steps-mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.steps-mini li{display:grid;grid-template-columns:34px 1fr;gap:14px}
.steps-mini .n{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--water-2);color:var(--water-2);display:grid;place-items:center;font-family:var(--f-body);font-weight:600;font-size:.8rem}
.steps-mini b{display:block;color:var(--white);font-weight:600}
.steps-mini span{color:var(--muted-on-ink);font-size:.95rem}
.cal-frame{width:100%;height:720px;border:0;border-radius:14px;background:var(--white)}

/* footer */
.site-footer{background:#07131A;color:var(--muted-on-ink);padding-block:64px 40px;font-size:.95rem}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.foot h4{font-family:var(--f-body);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--white)}
.foot .brand img{height:40px}
.foot-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-on-ink);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.85rem}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}

.notice{font-family:var(--f-body);font-weight:600;font-size:.74rem;letter-spacing:.06em;background:var(--stone);color:var(--ink);padding:10px 14px;border-radius:8px}

/* ----- gallery marquee ----- */
.marquee{overflow:hidden;padding-block:8px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track figure{margin:0;flex:none;width:clamp(240px,28vw,420px);aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--ink-2)}
.marquee-track img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* full bleed image band */
.bleed{position:relative;min-height:clamp(420px,62vh,720px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,27,38,.1) 30%,rgba(12,27,38,.85) 100%)}
.bleed .wrap{position:relative;z-index:1;width:100%;padding-block:clamp(40px,7vw,80px)}
.bleed h2{color:var(--white);font-size:var(--t-1);max-width:18ch}
.bleed p{color:#C9D5DD;margin-top:14px;max-width:52ch}

/* editorial image grid */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.mosaic .ph{aspect-ratio:auto;height:100%;min-height:220px}
.mosaic > :nth-child(1){grid-column:span 7}
.mosaic > :nth-child(2){grid-column:span 5}
.mosaic > :nth-child(3){grid-column:span 4}
.mosaic > :nth-child(4){grid-column:span 4}
.mosaic > :nth-child(5){grid-column:span 4}
@media (max-width:760px){.mosaic > *{grid-column:span 6!important}.mosaic .ph{min-height:160px}}

/* hero real frame sequence (drops in when assets/seq exists) */
.story canvas.seq{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:none}
.story.has-seq canvas.seq{display:block}
.story.has-seq svg.scene{display:none}

/* =================== immersive home =================== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.preloader{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;color:var(--paper)}
.preloader .inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.preloader .mark{width:64px;opacity:0;transform:scale(.8)}
.preloader .word{width:220px;opacity:0;transform:translateY(10px)}
.preloader .bar{width:160px;height:1px;background:var(--line-on-ink);overflow:hidden}
.preloader .bar i{display:block;height:100%;background:var(--water-2);transform:scaleX(0);transform-origin:left}
body.static .preloader{display:none}

/* header floats over the opener, solidifies on scroll */
.home .site-header{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .4s,border-color .4s}
.home .site-header.solid{background:rgba(12,27,38,.82);border-bottom-color:var(--line-on-ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* opener */
.opener{position:relative;height:280vh;background:var(--ink);color:var(--paper)}
.opener .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.opener .layer{position:absolute;inset:0}
.opener .layer img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.opener .ground{opacity:0}
.opener .veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 60%,rgba(12,27,38,0) 30%,rgba(12,27,38,.85) 100%);opacity:.9;pointer-events:none}
.opener .grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.opener .h{position:absolute;left:0;right:0;bottom:clamp(64px,12vh,140px);padding-inline:var(--gutter);max-width:var(--max);margin-inline:auto}
.opener h1{font-size:clamp(2.7rem,6.6vw,6.6rem);line-height:.98;color:var(--white);max-width:16ch;letter-spacing:-.02em}
.opener h1 em{color:var(--water-2)}
.opener .h p{margin-top:22px;font-size:clamp(1.05rem,1.5vw,1.3rem);color:#C9D5DD;max-width:46ch}
.opener .h .btn-row{margin-top:28px}
.opener .h2{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;padding-inline:var(--gutter);opacity:0;translate:0 24px}
.opener .h2 p{font-family:var(--f-display);font-style:normal;font-weight:500;font-size:clamp(1.6rem,3.6vw,3.4rem);color:var(--white);text-shadow:0 2px 24px rgba(0,0,0,.5);max-width:24ch;margin-inline:auto;line-height:1.15}
.opener .cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-on-ink);display:flex;flex-direction:column;align-items:center;gap:8px}
.opener .cue i{width:1px;height:34px;background:linear-gradient(var(--water-2),transparent);animation:cue 1.8s ease-in-out infinite}
.opener .topline{position:absolute;top:calc(84px + env(safe-area-inset-top,0px));left:0;right:0;padding-inline:var(--gutter);max-width:var(--max);margin-inline:auto;display:flex;justify-content:space-between;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-on-ink)}
body.static .opener{height:auto}
body.static .opener .stage{position:relative;height:100svh}
body.static .opener .ground{opacity:1}
body.static .opener .h2{display:none}
@media (max-width:760px){.opener{height:220vh}.opener .topline{display:none}}

/* statement */
.statement{position:relative;padding-block:clamp(80px,11vh,140px);overflow:hidden;background:var(--ink);color:var(--paper)}
.statement .bg{position:absolute;inset:0}
.statement .bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.statement .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(12,27,38,.35) 35%,rgba(12,27,38,.35) 65%,var(--ink) 100%)}
.statement .wrap{position:relative;z-index:1}
.statement .words{font-family:var(--f-body);font-weight:500;font-size:clamp(1.25rem,2.1vw,1.85rem);line-height:1.45;letter-spacing:-.005em;color:var(--white);max-width:46ch;text-wrap:pretty}
.statement .words .w{display:inline-block}
.statement .after{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px 40px;align-items:center}
body.static .statement .words .w{opacity:1}

/* story over real renders */
.story-bg{position:absolute;inset:0;overflow:hidden}
.story-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.story-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,27,38,.7) 0%,rgba(12,27,38,.25) 45%,rgba(12,27,38,.55) 100%),linear-gradient(180deg,rgba(12,27,38,.4),rgba(12,27,38,.1) 40%,rgba(12,27,38,.85))}
.story .story-intro h1{font-size:clamp(2.2rem,5vw,4.4rem)}
body.static .story .story-stage{height:auto;min-height:0;padding:96px 0}
body.static .story .story-bg{position:absolute}
body.static .story .story-intro{position:relative;top:auto}
body.static .story .rail,body.static .story .hud,body.static .story .ledger,body.static .story .caption,body.static .story .story-end{display:none}
body.static .story .story-static{display:block}

/* type driven services list */
.svc-list{position:relative;border-top:1px solid var(--line-on-ink)}
.svc-list .row{display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:baseline;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid var(--line-on-ink);text-decoration:none;color:var(--paper);transition:padding-left .35s ease}
.svc-list .row:hover{padding-left:12px}
.svc-list .n{font-family:var(--f-display);font-size:1.1rem;color:var(--water-2)}
.svc-list h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.05;color:var(--white);letter-spacing:-.01em}
.svc-list .row p{margin-top:8px;color:var(--muted-on-ink);max-width:56ch;font-size:1rem}
.svc-list .arrow{font-size:1.4rem;color:var(--water-2);transition:transform .35s}
.svc-list .row:hover .arrow{transform:translate(6px,-6px)}
.svc-list .float{position:absolute;top:0;left:0;width:min(380px,32vw);aspect-ratio:4/3;border-radius:10px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-55%) scale(.85);z-index:2;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.svc-list .float img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.svc-list .row{grid-template-columns:1fr auto}.svc-list .n{display:none}.svc-list .float{display:none}}

/* giant numbers */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line-on-ink);padding-top:40px}
.numbers div{display:flex;flex-direction:column;gap:8px}
.numbers strong{font-family:var(--f-display);font-weight:500;font-size:clamp(2.6rem,6vw,5.4rem);line-height:.95;color:var(--white);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.numbers span{color:var(--muted-on-ink);font-size:.95rem;max-width:20ch}
@media (max-width:860px){.numbers{grid-template-columns:1fr 1fr}}

/* work strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.strip figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:8px;position:relative}
.strip img{width:100%;height:120%;object-fit:cover;display:block}
.strip figure:nth-child(2){margin-top:clamp(24px,6vw,96px)}
@media (max-width:760px){.strip{grid-template-columns:1fr 1fr}.strip figure:nth-child(3){display:none}}

/* end cta */
.finale{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--ink);color:var(--paper)}
.finale img{position:absolute;inset:0;width:100%;height:120%;object-fit:cover}
.finale::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 50%,rgba(12,27,38,.2),rgba(12,27,38,.9))}
.finale .wrap{position:relative;z-index:1;text-align:center;padding-block:120px}
.finale h2{font-size:clamp(2.3rem,5.6vw,5.2rem);line-height:1;color:var(--white);max-width:14ch;margin-inline:auto}
.finale p{color:#C9D5DD;margin-top:20px;max-width:46ch;margin-inline:auto}
.finale .btn-row{justify-content:center;margin-top:32px}

.on-ink .post-card h3{color:var(--white)}
.on-ink .post-card p,.on-ink .post-card .meta{color:var(--muted-on-ink)}
.on-ink .post-card:hover h3{color:var(--water-2)}
.home .site-footer{border-top:1px solid var(--line-on-ink)}
.opener .btn-ghost,.on-ink .btn-ghost,.finale .btn-ghost{border-color:rgba(243,241,236,.42);color:var(--paper)}
.opener .btn-ghost:hover,.on-ink .btn-ghost:hover{border-color:var(--paper)}

/* =================== v4: light rhythm + interactive components =================== */
.site-header{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .4s,border-color .4s}
.site-header.solid{background:rgba(12,27,38,.84);border-bottom-color:var(--line-on-ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-header .nav a.btn-primary{background:var(--water)}

/* lighter veils so renders read */
.opener .veil{background:radial-gradient(120% 90% at 50% 60%,rgba(12,27,38,0) 40%,rgba(12,27,38,.7) 100%);opacity:.8}
.story-bg::after{background:linear-gradient(90deg,rgba(12,27,38,.55) 0%,rgba(12,27,38,.1) 45%,rgba(12,27,38,.35) 100%),linear-gradient(180deg,rgba(12,27,38,.35),rgba(12,27,38,0) 40%,rgba(12,27,38,.75))}
.page-hero{min-height:82svh;display:flex;align-items:flex-end;padding-top:calc(120px + env(safe-area-inset-top,0px))}
.page-hero::before{display:none}
.page-hero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.page-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,27,38,.55) 0%,rgba(12,27,38,.15) 40%,rgba(12,27,38,.92) 100%)}
.page-hero .wrap{width:100%}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,5rem);line-height:1;max-width:16ch}
.page-hero .lede{color:#D3DDE4}
.page-hero .kicker{font-family:var(--f-display);font-style:normal;font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--water-2)}
.hero-cue{position:absolute;right:var(--gutter);bottom:28px;font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-on-ink);display:flex;align-items:center;gap:10px}
.hero-cue i{width:34px;height:1px;background:linear-gradient(90deg,var(--water-2),transparent);animation:cuex 1.8s ease-in-out infinite}
@keyframes cuex{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* statement on paper */
.statement.light{background:var(--paper);color:var(--text)}
.statement.light .bg{display:none}
.statement.light .words{color:var(--ink)}
.statement.light .tag{color:var(--water)!important}

/* services list on paper */
.svc-list.light{border-top-color:var(--line)}
.svc-list.light .row{color:var(--text);border-bottom-color:var(--line)}
.svc-list.light h3{color:var(--ink)}
.svc-list.light .row p{color:var(--muted)}
.svc-list.light .n,.svc-list.light .arrow{color:var(--water)}
.numbers.light{border-top-color:var(--line)}
.numbers.light strong{color:var(--ink)}
.numbers.light span{color:var(--muted)}

/* section rhythm */
.sec-light{background:var(--paper);color:var(--text)}
.sec-paper2{background:var(--paper-2);color:var(--text)}
.sec-light .tag,.sec-paper2 .tag{color:var(--water)}
.sec-light h1,.sec-light h2,.sec-paper2 h1,.sec-paper2 h2{color:var(--ink)}
.eyebrow-num{font-family:var(--f-display);font-size:clamp(3rem,8vw,7rem);line-height:1;color:var(--water-2);opacity:.9}

/* horizontal scroll chapters */
.hscroll{position:relative}
.hscroll .pinwrap{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.hscroll .track{display:flex;gap:clamp(24px,4vw,64px);padding-inline:var(--gutter);will-change:transform}
.hscroll .panel{flex:none;width:min(78vw,900px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-items:center}
.hscroll .panel.lead{width:min(60vw,640px);grid-template-columns:1fr}
.hscroll .panel .num{font-family:var(--f-display);font-size:clamp(4rem,12vw,11rem);line-height:.9;color:var(--water-2);opacity:.85}
.hscroll .panel h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.05;margin-top:14px}
.hscroll .panel p{margin-top:14px;color:var(--muted-on-ink);max-width:40ch;font-size:1.05rem}
.hscroll .panel .ph{aspect-ratio:4/3}
.hscroll .bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;height:1px;background:var(--line-on-ink);pointer-events:none}
.hscroll .pinwrap .bar,.hscroll .pinwrap .count{position:absolute}
.hscroll .bar i{display:block;height:100%;background:var(--water-2);transform-origin:left;transform:scaleX(0)}
.hscroll .count{position:absolute;right:var(--gutter);bottom:46px;font-size:.72rem;letter-spacing:.2em;font-weight:600;text-transform:uppercase;color:var(--muted-on-ink);font-variant-numeric:tabular-nums}
.hscroll.light .panel p{color:var(--muted)}
.hscroll.light .bar{background:var(--line)}
.hscroll.light .bar i{background:var(--water)}
.hscroll.light .panel .num{color:var(--water)}
.hscroll.light .count{color:var(--muted)}
@media (max-width:860px),(prefers-reduced-motion:reduce){
  .hscroll .pinwrap{height:auto;display:block;overflow:visible;padding-block:64px}
  .hscroll .track{flex-direction:column;gap:56px;transform:none!important}
  .hscroll .panel,.hscroll .panel.lead{width:auto;grid-template-columns:1fr}
  .hscroll .bar,.hscroll .count{display:none}
}

/* stacking cards */
.stack{display:flex;flex-direction:column;gap:24px}
.stack-card{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));border-radius:18px;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,56px);align-items:center;min-height:min(62vh,560px);transform-origin:top center;box-shadow:0 -10px 40px rgba(12,27,38,.12)}
.stack-card .ph{aspect-ratio:4/3}
.stack-card .idx{font-family:var(--f-display);font-size:1.1rem;color:var(--water)}
.stack-card h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05;margin-top:10px}
.stack-card p{margin-top:14px;color:var(--muted);font-size:1.05rem;max-width:46ch}
.stack-card.c1{background:var(--white)}.stack-card.c2{background:#EAF0F4}.stack-card.c3{background:var(--paper-2)}.stack-card.c4{background:#E4ECF2}
.stack-card.dark{background:var(--ink-2);color:var(--paper)}.stack-card.dark h3{color:var(--white)}.stack-card.dark p{color:var(--muted-on-ink)}.stack-card.dark .idx{color:var(--water-2)}
@media (max-width:760px){.stack-card{grid-template-columns:1fr;position:relative;top:auto;min-height:0}}

/* compare slider */
.compare{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:14px;user-select:none;background:var(--ink)}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.compare .top{clip-path:inset(0 50% 0 0)}
.compare .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--white);transform:translateX(-1px);pointer-events:none}
.compare .handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--white);color:var(--ink);display:grid;place-items:center;font-size:1.1rem;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare .lbl{position:absolute;bottom:14px;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--white);background:rgba(12,27,38,.6);padding:6px 10px;border-radius:999px;pointer-events:none}
.compare .lbl.l{left:14px}.compare .lbl.r{right:14px}

/* assessment */
.assess{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:start}
.assess ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.assess button{width:100%;text-align:left;font:inherit;font-size:1.05rem;padding:18px 20px;border-radius:12px;border:1.5px solid var(--line);background:var(--white);color:var(--text);cursor:pointer;display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:center;transition:border-color .2s,background .2s,transform .2s}
.assess button i{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:.8rem;color:transparent;transition:all .2s}
.assess button[aria-pressed="true"]{border-color:var(--water);background:#EAF1F6}
.assess button[aria-pressed="true"] i{background:var(--water);border-color:var(--water);color:var(--white)}
.assess button:hover{transform:translateX(4px)}
.assess .result{position:sticky;top:calc(110px + env(safe-area-inset-top,0px));background:var(--ink);color:var(--paper);border-radius:18px;padding:clamp(24px,3.5vw,40px)}
.assess .result .big{font-family:var(--f-display);font-size:clamp(3rem,7vw,6rem);line-height:1;color:var(--white)}
.assess .result .big small{font-size:.35em;color:var(--muted-on-ink)}
.assess .result p{margin-top:12px;color:var(--muted-on-ink)}
.assess .result .meter{height:4px;background:var(--line-on-ink);border-radius:999px;margin-top:18px;overflow:hidden}
.assess .result .meter i{display:block;height:100%;width:0;background:var(--water-2);transition:width .5s ease}
.assess .result .btn-row{margin-top:22px}
@media (max-width:760px){.assess{grid-template-columns:1fr}.assess .result{position:relative;top:auto}}

/* quiz / package finder */
.quiz{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.5vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.quiz .q{display:flex;flex-direction:column;gap:22px}
.quiz .q h3{font-size:1.05rem;font-weight:600}
.quiz .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.quiz .opts button{font:inherit;font-size:.95rem;font-weight:500;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);cursor:pointer;color:var(--text);transition:all .2s}
.quiz .opts button[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.quiz .out{background:var(--ink);color:var(--paper);border-radius:14px;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.quiz .out .for{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--water-2)}
.quiz .out h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--white);line-height:1.1}
.quiz .out p{color:var(--muted-on-ink)}
.quiz .out .btn-row{margin-top:8px}
@media (max-width:760px){.quiz{grid-template-columns:1fr}}

/* flow diagram (marketing) */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.flow .steps{display:flex;flex-direction:column;gap:clamp(48px,14vh,160px);padding-block:20vh}
.flow .step{opacity:.28;transition:opacity .4s}
.flow .step.on{opacity:1}
.flow .step h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.05;color:var(--white)}
.flow .step p{margin-top:12px;color:var(--muted-on-ink);max-width:40ch;font-size:1.05rem}
.flow .step .k{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--water-2)}
.flow .diagram{position:sticky;top:calc(50vh - 220px);height:440px}
.flow svg{width:100%;height:100%}
.flow .node{fill:var(--ink-2);stroke:var(--line-on-ink);stroke-width:1}
.flow .node.on{stroke:var(--water-2);stroke-width:1.5;fill:#173247}
.flow text{font-family:var(--f-body);font-size:13px;font-weight:600;fill:var(--muted-on-ink);letter-spacing:.06em}
.flow .on + text,.flow text.on{fill:var(--white)}
.flow .wire{fill:none;stroke:var(--line-on-ink);stroke-width:1.5}
.flow .wire.on{stroke:var(--water-2)}
.flow .dot{fill:var(--water-2);opacity:0}
@media (max-width:860px){.flow{grid-template-columns:1fr}.flow .diagram{position:relative;top:auto;height:340px;order:-1}.flow .steps{padding-block:24px;gap:40px}.flow .step{opacity:1}}

/* tile grid with hover reveal (content) */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--ink-2);color:var(--paper);display:flex;align-items:flex-end;padding:18px;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .5s,transform .8s;z-index:-1}
.tile:hover img{opacity:1;transform:scale(1)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(12,27,38,.85));z-index:-1;opacity:0;transition:opacity .5s}
.tile:hover::after{opacity:1}
.tile b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.1}
.tile small{display:block;color:var(--muted-on-ink);margin-top:4px;font-size:.85rem}
.tile .ic{position:absolute;top:16px;left:18px;font-family:var(--f-display);color:var(--water-2);font-size:1rem}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:300;background:rgba(6,14,20,.92);display:none;align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
.lb img{max-width:min(96vw,1400px);max-height:88vh;border-radius:10px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.lb button{position:absolute;top:18px;right:18px;font:inherit;background:var(--white);color:var(--ink);border:0;border-radius:999px;padding:10px 16px;cursor:pointer;font-weight:600}
.lb .cap{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--muted-on-ink);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
[data-full]{cursor:zoom-in}

/* chapters (about) */
.chapters{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px)}
.chapters .side{position:sticky;top:calc(120px + env(safe-area-inset-top,0px));align-self:start}
.chapters .side .big{font-family:var(--f-display);font-size:clamp(5rem,14vw,12rem);line-height:.9;color:var(--water);opacity:.25;transition:opacity .4s}
.chapters .side h2{margin-top:10px}
.chapters .body{display:flex;flex-direction:column;gap:clamp(64px,14vh,160px);padding-block:10vh}
.chapters .ch{opacity:.3;transition:opacity .4s}
.chapters .ch.on{opacity:1}
.chapters .ch h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.05}
.chapters .ch p{margin-top:14px;font-size:1.1rem;line-height:1.65;max-width:52ch;color:var(--muted)}
@media (max-width:860px){.chapters{grid-template-columns:1fr}.chapters .side{position:relative;top:auto}.chapters .ch{opacity:1}.chapters .body{gap:48px;padding-block:24px}}

/* reading progress */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:transparent;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;background:var(--water-2);transform-origin:left;transform:scaleX(0)}

/* line reveal for hero headlines */
.js .lines .ln{display:block;overflow:hidden}
.js .lines .ln > span{display:block;transform:translateY(110%);opacity:0}
body.static .lines .ln > span{transform:none;opacity:1}

/* pricing cols on paper: hover lift */
.col{transition:transform .3s,box-shadow .3s}
.col:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(12,27,38,.12)}
.col .pop{position:absolute;top:-12px;right:20px;background:var(--water);color:var(--white);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.col{position:relative}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal .ph{aspect-ratio:4/3!important}
.gal > :nth-child(4n+1){grid-column:span 2}
.gal > :nth-child(4n+1).ph{aspect-ratio:16/8.5!important}
@media (max-width:640px){.gal{grid-template-columns:1fr 1fr}.gal > :nth-child(4n+1){grid-column:span 2}}
.opener .veil{background:linear-gradient(180deg,rgba(12,27,38,.35) 0%,rgba(12,27,38,0) 30%,rgba(12,27,38,.15) 55%,rgba(12,27,38,.88) 100%),radial-gradient(60% 50% at 20% 75%,rgba(12,27,38,.55),transparent 70%);opacity:1}
.opener .h1-shadow,.opener h1,.opener .h p{text-shadow:0 2px 24px rgba(0,0,0,.45)}

@media (max-width:860px),(prefers-reduced-motion:reduce){.hscroll{height:auto!important}.hscroll .pinwrap{position:relative;height:auto}}
body.static .story{height:auto!important}
body.static .story .story-stage{position:relative}

/* dropdown: no dead gap between trigger and menu, menu itself carries the panel look */
.dd-menu{padding:10px 0 0}
.dd-menu .dd-panel{background:var(--ink-2);border:1px solid var(--line-on-ink);border-radius:12px;padding:8px;box-shadow:0 24px 48px rgba(0,0,0,.35)}
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
@media (max-width:960px){.dd-menu{padding:0 0 0 12px}.dd-menu .dd-panel{background:none;border:0;box-shadow:none;padding:0}}

/* ===================== home hero: the scroll story (journey) ===================== */
.journey{position:relative;height:1280svh;background:var(--ink);color:var(--paper);--jl:6.4%;--jr:5%}
.j-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--ink);isolation:isolate}
.j-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:var(--ink);opacity:0}
.j-scene.j-lead{opacity:1}
.j-scene.is-on .btn{pointer-events:auto}
.j-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 50%;will-change:transform}
.j-lead-img{transform-origin:59% 61%}
.j-visit-img{transform-origin:72% 53%;object-position:69% 50%}
.j-shade{position:absolute;inset:0;pointer-events:none}
.s-lead{background:linear-gradient(90deg,rgba(6,16,26,.9) 0%,rgba(6,16,26,.62) 32%,rgba(6,16,26,.05) 70%),linear-gradient(0deg,rgba(10,22,32,.96) 0%,transparent 34%,transparent 70%,rgba(8,20,30,.7) 100%)}
.s-photo{background:linear-gradient(90deg,rgba(6,16,26,.94) 0%,rgba(6,16,26,.45) 36%,transparent 66%),linear-gradient(0deg,rgba(10,22,32,.95) 0%,transparent 30%,transparent 75%,rgba(8,20,30,.65) 100%)}
.s-review{background:linear-gradient(90deg,rgba(6,16,26,.92) 0%,rgba(6,16,26,.68) 32%,transparent 60%),linear-gradient(0deg,rgba(10,22,32,.95),transparent 38%,transparent 75%,rgba(8,20,30,.65))}
.s-design{background:linear-gradient(90deg,rgba(6,16,26,.8),transparent 76%),linear-gradient(0deg,rgba(10,22,32,.96) 0%,rgba(10,22,32,.12) 55%,rgba(10,22,32,.6) 100%)}
.s-proposal{background:linear-gradient(90deg,rgba(6,16,26,.96),rgba(6,16,26,.75)),linear-gradient(0deg,rgba(6,16,26,1),transparent 60%)}
.j-aura{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 33%,rgba(37,71,106,.7),transparent 65%),linear-gradient(160deg,#0f2436,var(--ink))}
.j-copy{position:absolute;left:var(--jl);max-width:48%;z-index:2}
.j-copy .tag{color:var(--water-2)}
.j-lead-copy{top:24%}
.j-copy h1,.j-copy h2{font-size:clamp(2.3rem,4.6vw,4.8rem);line-height:1;color:var(--white);letter-spacing:-.03em;margin:22px 0 22px}
.j-copy h1 em,.j-copy h2 em{color:var(--water-2);font-style:normal;font-weight:500}
.j-eyebrow{display:flex;align-items:center;gap:12px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#BED2E1;margin:0}
.j-eyebrow i{width:26px;height:1px;background:var(--water-2)}
.j-body{font-size:clamp(1.02rem,1.2vw,1.25rem);line-height:1.6;color:#C6D2DA;max-width:46ch}
.j-copy .btn-row{margin-top:28px}
.j-copy .btn-ghost{border-color:rgba(243,241,236,.35);color:var(--paper)}
.j-copy .btn-ghost:hover{border-color:var(--paper)}
.j-micro{display:block;text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;font-weight:600;color:#A4BCCF}
.j-note{position:absolute;left:61%;right:var(--jr);bottom:23%;display:flex;gap:15px;padding:22px;border:1px solid rgba(217,232,241,.24);border-radius:8px;background:rgba(12,30,43,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 15px 70px rgba(0,0,0,.3);z-index:2}
.j-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;background:rgba(127,176,214,.16);border:1px solid rgba(152,199,238,.25);border-radius:50%;color:var(--water-2)}
.j-note strong{display:block;font-size:1.02rem;line-height:1.45;font-weight:500;margin:7px 0 10px;color:var(--white)}
.j-note small{display:block;font-size:.78rem;line-height:1.5;color:#B1C1CB}
.j-line{display:flex;align-items:center;gap:12px;margin-top:34px;color:#9FBAD0;font-size:.84rem}
.j-line>span{width:20px;height:1px;background:#6D9BBE}
.j-process{top:28%;max-width:40%}
.j-process h2{font-size:clamp(2.2rem,4.2vw,4.4rem)}

/* cards */
.j-card{position:absolute;top:20%;left:52%;right:var(--jr);max-width:630px;border:1px solid rgba(122,164,201,.3);border-radius:12px;background:linear-gradient(140deg,#1A3A52,#0F2536);box-shadow:0 30px 100px rgba(0,0,0,.35);overflow:hidden;z-index:2}
.j-panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.84rem;color:#BED2E1}
.j-panel-top>span:first-child{display:flex;align-items:center;gap:9px}
.j-pill{display:flex;align-items:center;gap:5px;border:1px solid rgba(138,203,191,.3);background:rgba(117,194,180,.1);color:#AFE5D7;border-radius:30px;padding:5px 10px;font-size:.74rem}
.j-ctitle{padding:24px 28px 20px}
.j-ctitle h3{font-family:var(--f-display);font-size:2rem;line-height:1.1;font-weight:500;margin:10px 0 14px;color:var(--white)}
.j-ctitle p{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#A5BCCF}
.j-people{display:flex;align-items:center;gap:16px;padding:0 28px 22px}
.j-person{display:flex;align-items:center;gap:10px}
.j-person img,.j-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:1px solid rgba(193,219,240,.3)}
.j-avatar{display:grid;place-items:center;background:#2E4B62;color:#CFDFED;font-size:1rem;font-weight:600}
.j-person strong,.j-person div>span{display:block;font-size:.78rem;font-weight:500}
.j-person div>span{color:#8FA9BE;margin-top:4px;font-weight:400}
.j-join{color:#7794AB}
.j-topics{display:flex;gap:22px;padding:16px 28px;background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.j-topics>span{font-size:.78rem;display:flex;align-items:center;gap:7px;color:#BED2E1}
.j-topics svg{color:var(--water-2)}
.j-next{display:flex;gap:12px;align-items:center;padding:18px 28px}
.j-next small{display:block;font-size:.74rem;color:#96AFC3;margin-bottom:4px}
.j-next strong{font-size:.92rem;font-weight:500}
.j-next .j-ico{width:34px;height:34px}
.j-visit-copy{top:29%;max-width:43%}
.j-visit-note{bottom:22%;left:64%;padding:18px;gap:12px}

/* review composite */
.j-world{position:absolute;top:50%;left:50%;width:max(100vw,177.68svh);height:max(100svh,56.28vw);transform:translate(-50%,-50%)}
.j-world>img{width:100%;height:100%;object-fit:cover}
.j-monitor{position:absolute;left:48%;top:35.25%;width:23.7%;height:25.2%;overflow:hidden;transform:perspective(1300px) rotateY(-1deg);clip-path:polygon(0 0,100% 0,100% 64%,88% 100%,0 100%);background:#102638;border:1px solid rgba(88,108,116,.2);display:flex;flex-direction:column}
.j-mtop{padding:5px 7px;display:flex;align-items:center;gap:5px;font-size:clamp(7px,.7vw,12px);color:#D6E3EC;height:15%;min-height:15px}
.j-live{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#9EDFC9;box-shadow:0 0 12px rgba(158,223,201,.4)}
.j-shared{position:relative;flex:1;min-height:0}
.j-shared>img{width:100%;height:100%;object-fit:cover}
.j-repvid{position:absolute;right:3%;top:7%;width:29%;height:58%;border:1px solid #B7E2D9;border-radius:3px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.45)}
.j-repvid>img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.j-repvid span{position:absolute;bottom:0;left:0;right:0;background:rgba(6,24,39,.8);color:#fff;font-size:clamp(6px,.6vw,10px);padding:3px}
.j-tools{height:13%;min-height:17px;display:flex;gap:10px;align-items:center;justify-content:center;color:#D6E3EC}
.j-tools>span{background:#BE5054;padding:2px 8px;border-radius:10px;display:flex}
.j-review-copy{top:28%;max-width:42%}
.j-tag{display:flex;align-items:center;gap:9px;margin-top:26px;font-size:.78rem;color:#BAD2E2}
.j-review-note{left:57%;right:8%;bottom:22%;padding:18px}

/* design compare */
.j-before,.j-after{object-position:60% 50%}
.j-after{clip-path:inset(0 100% 0 0)}
.j-reveal{position:absolute;top:0;bottom:0;left:0;width:1px;background:rgba(222,239,255,.85);opacity:0;z-index:1;box-shadow:0 0 35px rgba(204,236,255,.25)}
.j-reveal>span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);background:#E9F3FC;color:#16334C;writing-mode:vertical-rl;letter-spacing:.15em;font-size:.72rem;font-weight:600;padding:15px 9px;border-radius:30px;white-space:nowrap}
.j-tags{position:absolute;right:var(--jr);top:25%;display:flex;gap:10px;z-index:2}
.j-tags>span{font-size:.76rem;padding:10px 15px;border-radius:30px;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(11,35,56,.72)}
.j-after-tag{opacity:0}
.j-design-copy{top:34%;max-width:43%}
.j-project{position:absolute;right:var(--jr);bottom:23%;max-width:330px;padding-left:20px;border-left:1px solid rgba(191,221,243,.38);z-index:2}
.j-project>strong{display:block;font-size:1.15rem;font-weight:500;margin-top:12px;color:var(--white)}
.j-project p{color:#C1D0DC;font-size:.84rem;line-height:1.6;margin:10px 0 0}

/* estimate + proposal */
.j-est-card{top:18%;left:53%}
.j-est-img{height:100px;position:relative;overflow:hidden}
.j-est-img img{width:100%;height:100%;object-fit:cover;object-position:center 57%}
.j-est-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,40,57,.7),transparent)}
.j-est-img>span{position:absolute;z-index:1;bottom:14px;left:25px;color:#fff;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.j-est-body{padding:16px 25px 14px}
.j-est-head{display:flex;justify-content:space-between;align-items:center}
.j-est-head>svg{color:#8EABC2}
.j-est-head h3{font-family:var(--f-display);font-size:1.5rem;font-weight:500;margin:4px 0 0;color:var(--white)}
.j-est-lines{margin-top:14px}
.j-est-lines>div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.84rem;color:#BFD0DE}
.j-est-lines strong{font-weight:500;color:#E6F0F8;white-space:nowrap;font-variant-numeric:tabular-nums}
.j-est-total{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 0 4px;font-size:.84rem}
.j-est-total strong{font-family:var(--f-display);font-size:1.9rem;font-weight:500;color:#B8DCFF}
.j-doc-note{font-size:.74rem;color:#9FB7CA;line-height:1.5;margin:7px 0 0}
.j-backdrop{position:absolute;inset:-15px;filter:blur(7px)}
.j-backdrop img{width:100%;height:100%;object-fit:cover}
.j-prop-copy{max-width:44%}
.j-sigstatus{display:flex;align-items:center;gap:12px;margin-top:30px}
.j-sigstatus .j-ico i{display:none;line-height:0}
.j-sigstatus .j-ico .pen{display:block}
.j-proposal.signed .j-sigstatus .j-ico .pen{display:none}
.j-proposal.signed .j-sigstatus .j-ico .chk{display:block}
.j-proposal.signed .j-sigstatus .j-ico{color:#B8EDDA;background:rgba(119,189,161,.16);border-color:rgba(119,189,161,.3)}
.j-sigstatus strong,.j-sigstatus div>span{display:block;font-size:.92rem;font-weight:500}
.j-sigstatus div>span{font-size:.78rem;color:#9EB7CA;margin-top:4px;font-weight:400}
.j-paper{position:absolute;left:58%;top:17%;width:33%;max-width:500px;padding:22px 28px 20px;background:#EDF0ED;color:#20333E;box-shadow:0 35px 100px rgba(0,0,0,.55);transform:rotate(2deg);border-radius:4px;z-index:2}
.j-ptop{display:flex;align-items:center;gap:10px;color:#53646D;font-size:.72rem;letter-spacing:.11em;font-weight:600;height:34px}
.j-ptop small{display:none}
.j-ptop>svg{margin-left:auto;width:20px}
.j-plogo{background:#203D4F;color:#D9ECF9;width:27px;height:29px;display:grid;place-items:center;font-family:var(--f-display);font-size:1.05rem}
.j-pkicker{display:none}
.j-paper h3{font-family:var(--f-display);font-size:1.75rem;font-weight:500;line-height:1.15;margin:16px 0;color:#1B2F3B}
.j-paper h3 br{display:none}
.j-pscope{display:grid;gap:5px;font-size:.78rem;color:#5C6C74;line-height:1.3}
.j-pscope>span{display:flex;align-items:center;gap:8px}
.j-pscope svg{color:#466C67}
.j-pvalue{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid rgba(38,61,72,.15);border-bottom:1px solid rgba(38,61,72,.15);margin-top:15px;padding:10px 0;font-size:.78rem;color:#6C7B83}
.j-pvalue strong{font-family:var(--f-display);font-size:1.65rem;font-weight:500;color:#223D4D}
.j-sigfield{position:relative;padding-top:6px;border-bottom:1px solid rgba(104,129,139,.55);height:55px}
.j-signame{display:block;width:fit-content;color:#264B67;font-family:"Caveat","Brush Script MT","Segoe Script",cursive;font-size:2.1rem;font-weight:600;line-height:1.3;transform:rotate(-4deg);clip-path:inset(0 100% 0 0)}
.j-siglabel{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#70828C;position:absolute;bottom:-19px}
.j-sigfield>svg{position:absolute;right:0;bottom:11px;color:#748B97}
.j-stamp{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-size:.76rem;font-weight:600;color:#316C5F;margin-top:27px;opacity:0}

/* complete */
.j-complete-copy{top:30%;max-width:54%}
.j-complete-copy h2{font-size:clamp(2.3rem,4.8vw,5rem)}
.j-done{position:absolute;right:var(--jr);bottom:24%;width:300px;border-left:1px solid rgba(191,225,243,.42);padding-left:22px;z-index:2}
.j-done-ico{display:grid;place-items:center;width:35px;height:35px;border:1px solid rgba(155,219,199,.58);border-radius:50%;color:#B1EBD8;margin-bottom:18px;background:rgba(23,61,57,.45)}
.j-done>strong{font-weight:500;font-size:1.3rem;display:block;margin:12px 0 22px;color:var(--white)}
.j-done>div{display:flex;justify-content:space-between;align-items:center;font-size:.84rem;color:#CAD9E3}
.j-done b{font-family:var(--f-display);font-size:1.7rem;font-weight:500;color:#F1F8FF}
.j-done>p{font-size:.78rem;color:#B0C6D6;margin:13px 0 0}

/* persistent UI */
.j-sales{position:absolute;z-index:12;top:104px;right:var(--jr);width:210px;text-align:right;pointer-events:none}
.j-sales-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:.78rem;color:#C5D7E4}
.j-ex{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#93A8B6}
.j-sales strong{font-family:var(--f-display);font-weight:500;font-size:2.3rem;line-height:1.15;display:block;font-variant-numeric:tabular-nums;color:var(--white);transition:color .3s}
.j-sales.has-sales strong{color:#AED5FA}
.j-sales small{font-size:.72rem;color:#B1C1CD}
.j-status{z-index:12;position:absolute;left:var(--jl);bottom:130px;display:flex;align-items:center;gap:10px;font-size:.76rem;letter-spacing:.02em;color:#C1D2E1}
.j-status .l{width:18px;height:1px;background:var(--water-2)}
.j-status .cnt{color:#A7B9C8;margin-left:9px;font-variant-numeric:tabular-nums;font-family:var(--f-mono)}
.j-controls{position:absolute;z-index:12;bottom:36px;left:var(--jl);right:var(--jr);display:flex;align-items:center;justify-content:space-between;gap:35px}
.j-nav{display:flex;gap:18px;flex:1;max-width:900px}
.j-nav button{flex:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:0;background:none;color:#AEBFCF;text-align:left;padding:6px 0 16px;white-space:nowrap;min-width:0;cursor:pointer;font:inherit}
.j-nav .n{font-family:var(--f-mono);font-size:.7rem;color:#8EA7BC}
.j-nav .nm{font-size:.84rem}
.j-nav .rule{position:absolute;bottom:0;height:1px;width:100%;background:rgba(255,255,255,.2)}
.j-nav .rule i{display:block;width:0;height:1px;background:var(--water-2);transition:width .3s}
.j-nav button[aria-current=step]{color:#fff}
.j-nav button[aria-current=step] .n{color:#ACD4FB}
.j-nav button[aria-current=step] .rule i{width:100%}
.j-nextbtn{display:flex;gap:22px;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:16px 21px;background:var(--paper);color:var(--ink);font:inherit;font-size:.86rem;font-weight:600;min-width:220px;cursor:pointer;transition:background .2s,transform .2s;line-height:1}
.j-nextbtn:hover{background:#fff;transform:translateY(-2px)}
.j-nextbtn i{display:none;line-height:0}
.j-nextbtn i.dn{display:block}
.journey.done .j-nextbtn i.dn{display:none}
.journey.done .j-nextbtn i.rp{display:block}
.j-progress{position:absolute;z-index:13;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06)}
.j-progress>span{display:block;background:var(--water-2);width:0;height:100%}

/* static summary: shown without JS or with reduced motion */
.j-summary{display:none;padding-block:clamp(56px,8vw,96px)}
.j-summary ol{list-style:none;margin:36px 0 0;padding:0;max-width:820px}
.j-summary li{display:flex;gap:24px;padding:20px 0;border-bottom:1px solid var(--line-on-ink)}
.j-summary li>span{font-family:var(--f-mono);font-size:.74rem;color:var(--water-2);padding-top:5px}
.j-summary li strong{font-size:1.1rem;font-weight:500;color:var(--white)}
.j-summary li p{font-size:.95rem;line-height:1.6;color:var(--muted-on-ink);margin:6px 0 0}
body.static .journey{height:auto}
body.static .j-stage{display:none}
body.static .j-summary{display:block}

@media (min-width:1600px){.j-card{top:24%}.j-est-card{top:22%}.j-paper{top:21%}.j-copy{max-width:45%}.j-visit-note,.j-review-note{bottom:24%}}
@media (max-width:1100px) and (min-width:761px){
  .j-stage{min-height:700px}.j-copy h1,.j-copy h2,.j-process h2,.j-complete-copy h2{font-size:3rem}.j-copy{max-width:46%}
  .j-card{left:50%}.j-ctitle{padding:20px}.j-ctitle h3{font-size:1.6rem}.j-people{gap:9px;padding:0 20px 20px}.j-person img,.j-avatar{width:33px;height:33px}.j-topics{padding:14px 20px;gap:12px}.j-next{padding:18px 20px}
  .j-paper{left:55%;width:39%;padding:22px}.j-note{left:56%}.j-controls{gap:25px}.j-nav{gap:12px}.j-nav .nm{font-size:.76rem}
  .j-nextbtn{min-width:auto;width:48px;height:48px;justify-content:center;padding:14px;flex-shrink:0}.j-nextbtn>span{display:none}
  .j-note small{display:none}.j-done{width:270px}.j-project{max-width:270px}.j-body{font-size:.95rem}.j-sales{width:180px}.j-sales strong{font-size:1.9rem}
}
@media (max-width:760px){
  .journey{height:1120svh;--jl:7%;--jr:7%}
  .j-stage{min-height:600px}
  .dbr{display:none}
  .j-copy{max-width:86%}
  .j-copy h1,.j-copy h2,.j-process h2,.j-complete-copy h2{font-size:clamp(2rem,9.2vw,2.9rem);margin:16px 0 14px}
  .j-body{font-size:1rem;line-height:1.5}
  .j-copy .btn-row{margin-top:20px;gap:8px}.j-copy .btn{padding:13px 16px;font-size:.9rem}
  .j-lead-copy{top:22%}.j-lead-copy h1{font-size:clamp(2.3rem,10.4vw,3.2rem)}.j-lead-copy .tag{font-size:.64rem}
  .j-lead-img{object-position:72% 50%;transform-origin:66% 62%}
  .s-lead{background:linear-gradient(90deg,rgba(6,16,26,.85),transparent 160%),linear-gradient(0deg,rgba(10,22,32,.97),transparent 60%,rgba(8,20,30,.4))}
  .j-note{left:7%;right:7%;bottom:22%;padding:15px;gap:10px}.j-note strong{font-size:.92rem;margin:5px 0 6px}.j-note small{display:none}
  .j-inquiry{bottom:20%}
  .j-ico{width:34px;height:34px}
  .j-status{display:none}
  .j-sales{top:86px;width:auto;display:flex;align-items:baseline;gap:8px}.j-sales-head{margin:0}.j-sales .j-ex,.j-sales small{display:none}.j-sales strong{font-size:1.35rem;line-height:1}
  .j-controls{left:7%;right:7%;bottom:22px;flex-direction:column;gap:16px}
  .j-nav{width:100%;max-width:none;gap:2px}.j-nav button{align-items:center;padding:8px 0 12px;min-height:44px;justify-content:center}.j-nav .nm{display:none}.j-nav .n{font-size:.8rem}.j-nav .rule{height:2px}.j-nav .rule i{height:2px}
  .j-nextbtn{width:100%;padding:14px 20px;min-height:48px;font-size:.9rem}
  .j-process{top:20%;max-width:86%}.j-line{display:none}
  .j-card{left:7%;right:7%;top:42%;max-width:none}
  .j-panel-top{padding:12px 15px;font-size:.76rem}.j-ctitle{padding:14px 17px 11px}.j-ctitle h3{font-size:1.35rem;margin:0}.j-ctitle h3 br{display:none}.j-ctitle p,.j-ctitle>.j-micro{display:none}
  .j-people{padding:0 17px 13px;gap:13px}.j-person img,.j-avatar{width:32px;height:32px}.j-person div>span{display:none}
  .j-topics{padding:12px 17px;gap:12px}.j-next{padding:13px 17px}.j-next small{display:none}.j-next .j-ico{width:28px;height:28px}
  .j-visit-copy{top:20%;max-width:86%}
  .j-visit-img{top:30%;height:55%;object-position:69% 48%}
  .s-photo{background:linear-gradient(0deg,rgba(10,22,32,1) 0%,rgba(10,22,32,.27) 30%,transparent 52%,rgba(10,22,32,.43) 65%,rgba(10,22,32,1) 90%)}
  .j-world{width:154%;height:auto;aspect-ratio:1672/941;left:-44%;top:37%;transform:none}.j-world>img{height:100%}
  .s-review{background:linear-gradient(0deg,rgba(10,22,32,1) 0%,transparent 40%,transparent 55%,rgba(10,22,32,.88) 76%,rgba(10,22,32,1) 90%)}
  .j-repvid{width:33%;height:68%}.j-mtop,.j-repvid span{display:none}.j-monitor{height:25%}.j-shared{height:87%}
  .j-review-copy{top:20%;max-width:86%}.j-tag{margin-top:14px}
  .j-design-copy{top:23%;max-width:86%}
  .j-before,.j-after,.j-complete-img{object-position:62% 50%}
  .s-design{background:linear-gradient(0deg,rgba(10,22,32,.98),transparent 59%,rgba(10,22,32,.6)),linear-gradient(90deg,rgba(10,22,32,.65),transparent 150%)}
  .j-tags{top:55%;left:7%;right:7%;justify-content:space-between;gap:7px}.j-tags>span{font-size:.7rem;padding:9px 12px}
  .j-project{left:7%;right:7%;bottom:22%;max-width:none;padding-left:15px}.j-project>strong{font-size:1.05rem;margin-top:8px}.j-project p{font-size:.78rem;margin-top:8px}
  .j-est-card{top:42%}.j-est-img{height:70px}.j-est-img>span{left:17px;bottom:10px}.j-est-body{padding:14px 17px 12px}.j-est-head .j-micro{display:none}.j-est-head h3{font-size:1.2rem;margin:0}.j-est-lines{margin-top:9px}.j-est-lines>div{padding:7px 0;font-size:.78rem}.j-est-total{padding:11px 0 3px;font-size:.78rem}.j-est-total strong{font-size:1.5rem}.j-doc-note{font-size:.7rem;margin-top:5px}
  .j-prop-copy{top:20%;max-width:86%}.j-sigstatus{display:none}
  .j-paper{left:10%;width:80%;top:42%;max-width:none;padding:16px 20px 14px;transform:rotate(1.5deg)}.j-ptop{height:auto;font-size:.66rem}.j-ptop>svg{display:none}.j-paper h3{font-size:1.45rem;margin:12px 0}.j-pscope{font-size:.74rem;gap:5px}.j-pvalue{margin-top:11px;padding:9px 0;font-size:.74rem}.j-pvalue strong{font-size:1.4rem}.j-sigfield{height:50px;padding-top:6px}.j-signame{font-size:1.8rem}.j-siglabel{bottom:-17px}.j-stamp{margin-top:24px}
  .j-complete-copy{top:21%;max-width:90%}.j-complete-copy .btn-row{display:none}
  .j-done{left:7%;right:7%;width:auto;bottom:22%;padding-left:15px;max-width:355px}.j-done-ico{display:none}.j-done>strong{font-size:1.1rem;margin:8px 0 14px}.j-done b{font-size:1.5rem}.j-done>p{font-size:.74rem;margin-top:8px}
}
@media (max-width:760px) and (max-height:760px){
  .j-copy h1,.j-copy h2,.j-process h2,.j-complete-copy h2{font-size:2.1rem;margin-bottom:12px}.j-lead-copy h1{font-size:2.4rem}.j-body{font-size:.92rem}
  .j-card,.j-est-card{top:44%}.j-paper{top:44%}.j-est-img{display:none}.j-ctitle{padding:12px 15px}.j-topics{padding:10px 15px}.j-next{padding:10px 15px}.j-panel-top{padding:10px 15px}
  .j-controls{bottom:16px;gap:12px}.j-nextbtn{min-height:44px;padding:12px 18px}
}

/* services: expanded blocks with embedded photos (home) */
.svc-blocks{display:grid;gap:clamp(40px,6vw,80px)}
.svc-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.svc-block:nth-child(even) .svc-text{order:2}
.svc-block .n{font-family:var(--f-mono);font-size:.8rem;color:var(--water);letter-spacing:.08em}
.svc-block h3{font-family:var(--f-display);font-weight:600;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05;letter-spacing:-.025em;color:var(--ink);margin-top:12px}
.svc-block .d{margin-top:14px;color:var(--muted);font-size:1.05rem;max-width:52ch}
.svc-block ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.svc-block li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--text)}
.svc-block li::before{content:"";flex:none;width:18px;height:1px;background:var(--water);margin-top:.75em}
.svc-block .btn{margin-top:26px}
.svc-block figure{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px rgba(12,27,38,.16)}
.svc-block figure img{width:100%;height:100%;object-fit:cover}
.svc-block figure{transform-style:preserve-3d;will-change:transform}
.svc-block li::before{transition:width .35s ease,background .35s}
.svc-block:hover li::before{width:30px}
.svc-block .n,.svc-block h3{transition:color .35s}
.svc-block:hover h3{color:var(--water)}
@media (max-width:860px){.svc-block{grid-template-columns:1fr;gap:22px}.svc-block:nth-child(even) .svc-text{order:0}.svc-block figure{order:-1;aspect-ratio:16/10}}