/* ============================================================================
   My Local Everything — homepage + signature sections
   Every section is individually designed. No generic auto-fit card grids.
   ========================================================================= */

/* ══════════════════════════════════════════════════════════════════════════
   1 · HERO — gulf caustics shader + meridian rule + agent orb
   ══════════════════════════════════════════════════════════════════════════ */
.hero{position:relative;isolation:isolate;min-height:min(94vh,940px);display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.hero__poster,#hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__poster{background:
  radial-gradient(88% 70% at 78% 8%,rgba(176,141,87,.28),transparent 56%),
  radial-gradient(70% 80% at 6% 96%,rgba(20,107,99,.3),transparent 58%),
  linear-gradient(168deg,#0B1622 0%,#102437 46%,#0B1622 100%)}
#hero-gl{opacity:0;transition:opacity 1.5s var(--ease-premium)}
#hero-gl.is-ready{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,22,34,.9) 0%,rgba(11,22,34,.62) 44%,rgba(11,22,34,.18) 78%,transparent 100%)}
@media (max-width:900px){.hero::after{background:linear-gradient(180deg,rgba(11,22,34,.72) 0%,rgba(11,22,34,.86) 62%,rgba(11,22,34,.96) 100%)}}
.hero__content{position:relative;z-index:3;padding-block:clamp(110px,15vh,180px);width:100%}
.hero__inner{max-width:820px}
.hero .kicker{color:var(--brassBright)}
.hero h1{color:#fff;font-size:clamp(2.7rem,6.6vw,5.2rem);letter-spacing:-.032em;line-height:1.02;margin-bottom:.42em}
.hero h1 .display-em{color:var(--brassBright)}
.hero .lede{color:#C6D4E0;font-size:clamp(1.08rem,1.55vw,1.32rem);max-width:56ch}
.hero__cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__meta{margin-top:46px;padding-top:26px;border-top:1px solid rgba(233,239,245,.14);display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center}
.hero__meta-item{display:inline-flex;align-items:center;gap:10px;font-size:.83rem;color:#93A7B9;letter-spacing:.02em}
.hero__meta-item svg{width:16px;height:16px;color:var(--brassBright);flex:none}
.hero__meta-item b{color:#fff;font-weight:600}
/* scroll hint */
.hero__scroll{position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:.63rem;letter-spacing:.28em;text-transform:uppercase;color:#7C90A3}
.hero__scroll i{display:block;width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--brassBright));animation:scroll-pulse 2.3s var(--ease-premium) infinite}
@keyframes scroll-pulse{0%,100%{opacity:.25;transform:scaleY(.55);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}
@media (prefers-reduced-motion:reduce){.hero__scroll i{animation:none;opacity:.7}}
@media (max-width:760px){.hero__scroll{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   2 · HERITAGE LEDGER — the 25-year band
   ══════════════════════════════════════════════════════════════════════════ */
.heritage{background:var(--inkRaised);border-block:1px solid var(--border-ink);padding-block:0}
.heritage__grid{display:grid;grid-template-columns:auto repeat(4,1fr);align-items:stretch}
.heritage__seal{display:flex;align-items:center;gap:15px;padding:30px 38px 30px 0;border-right:1px solid var(--border-ink)}
.heritage__seal svg{width:46px;height:46px;flex:none;color:var(--brassBright)}
.heritage__seal span{font-family:var(--font-head);font-size:.95rem;line-height:1.3;color:#fff;font-weight:500;letter-spacing:-.01em}
.heritage__seal small{display:block;font-family:var(--font-body);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brassBright);margin-bottom:4px;font-weight:600}
.heritage__item{padding:30px 26px;position:relative;display:flex;flex-direction:column;justify-content:center}
.heritage__item+.heritage__item::before,.heritage__grid .heritage__item:first-of-type::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:linear-gradient(180deg,transparent,rgba(216,184,124,.3),transparent)}
.heritage__item b{font-family:var(--font-head);font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:600;color:#fff;line-height:1;letter-spacing:-.03em;display:block}
.heritage__item span{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:#7F94A7;margin-top:10px;font-weight:500}
@media (max-width:1080px){.heritage__grid{grid-template-columns:repeat(4,1fr)}.heritage__seal{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--border-ink);padding:26px 0}}
@media (max-width:760px){.heritage__grid{grid-template-columns:1fr 1fr}.heritage__item:nth-child(2)::before,.heritage__item:nth-child(4)::before{display:none}.heritage__item:nth-child(n+4){border-top:1px solid var(--border-ink)}}

/* ══════════════════════════════════════════════════════════════════════════
   3 · INTEGRATIONS + PRESS STRIP
   ══════════════════════════════════════════════════════════════════════════ */
.strips{padding-block:clamp(46px,5.5vw,72px)}
.strips__divider{margin:38px 0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}

/* ══════════════════════════════════════════════════════════════════════════
   4 · THESIS — editorial split with pull-quote and inline diagram
   ══════════════════════════════════════════════════════════════════════════ */
.thesis{position:relative;overflow:hidden}
.thesis__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(40px,6vw,90px);align-items:start;position:relative;z-index:1}
.thesis__body h2{margin-bottom:.6em}
.thesis__body .lede{margin-bottom:1.6em}
.thesis__pull{margin-top:40px;padding:30px 0 30px 30px;border-left:2px solid var(--accent);font-family:var(--font-head);font-size:clamp(1.24rem,2vw,1.6rem);line-height:1.42;letter-spacing:-.018em;color:var(--foreground);font-style:italic}
.thesis__pull cite{display:block;margin-top:18px;font-family:var(--font-body);font-style:normal;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}
.thesis__panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,42px);position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.thesis__panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent))}
.thesis__panel h3{font-size:1.14rem;margin-bottom:26px}
.shift{display:grid;gap:0}
.shift__row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:17px 0;border-bottom:1px solid var(--border-soft)}
.shift__row:last-child{border-bottom:0}
.shift__from,.shift__to{font-size:.9rem;line-height:1.42}
.shift__from{color:var(--muted);text-align:right}
.shift__to{color:var(--foreground);font-weight:600}
.shift__arrow{width:26px;height:26px;color:var(--accent);flex:none}
@media (max-width:520px){.shift__row{grid-template-columns:1fr;gap:6px;text-align:left}.shift__from{text-align:left}.shift__arrow{transform:rotate(90deg);margin:2px 0}}

/* ══════════════════════════════════════════════════════════════════════════
   5 · THE SIGNATURE — four-mode pinned agent sequence
   ══════════════════════════════════════════════════════════════════════════ */
.modes{background:var(--ink);color:var(--textOnInk);position:relative;overflow:hidden;padding-block:0}
.modes__intro{padding-block:clamp(64px,8vw,104px) clamp(24px,3vw,40px);position:relative;z-index:2;text-align:center}
.modes__intro h2{color:#fff;max-width:16ch;margin-inline:auto}
.modes__intro .lede{color:var(--mutedOnInk);margin-inline:auto;text-align:center;max-width:58ch}

/* the pinned stage */
.modes__stage{position:relative;min-height:calc(100vh - 82px);display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,3.4vw,56px);align-items:center;padding-block:clamp(20px,3.2vh,44px)}
.modes__rail{position:relative;z-index:3}
.modes__step{position:relative;padding:11px 0 11px 32px;opacity:.42;cursor:default;transition:opacity .55s var(--ease-premium)}
/* only the active step expands — keeps the whole pinned stage on one screen */
.modes__step p,.modes__step .modes__step-proof{max-height:0;opacity:0;overflow:hidden;margin-bottom:0;transform:translateY(-5px);pointer-events:none;
  transition:max-height .6s var(--ease-premium),opacity .45s var(--ease-premium),margin .6s var(--ease-premium),transform .5s var(--ease-premium)}
.modes__step.is-active p{max-height:10em;opacity:1;margin-bottom:11px;transform:none}
.modes__step.is-active .modes__step-proof{max-height:4em;opacity:1;transform:none;pointer-events:auto}
.modes__step.is-active{opacity:1}
.modes__step::before{content:"";position:absolute;left:0;top:21px;width:9px;height:9px;border-radius:50%;background:var(--border-ink);border:1px solid var(--border-ink);transition:background .5s var(--ease-premium),box-shadow .5s var(--ease-premium),transform .5s var(--ease-premium)}
.modes__step.is-active::before{background:var(--brassBright);border-color:var(--brassBright);box-shadow:0 0 0 5px rgba(216,184,124,.16);transform:scale(1.15)}
.modes__step::after{content:"";position:absolute;left:4px;top:34px;bottom:-13px;width:1px;background:var(--border-ink)}
.modes__step:last-child::after{display:none}
.modes__step-num{font-family:var(--font-body);font-size:.64rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--brassBright);display:block;margin-bottom:6px}
.modes__step h3{color:#fff;font-size:clamp(1.15rem,1.85vw,1.5rem);margin-bottom:.3em;letter-spacing:-.02em}
.modes__step p{color:var(--mutedOnInk);font-size:.9rem;line-height:1.5;margin-bottom:10px;max-width:46ch}
.modes__step-proof{display:inline-flex;align-items:center;gap:8px;font-size:.73rem;font-weight:600;letter-spacing:.05em;color:var(--brassBright);border:1px solid rgba(216,184,124,.32);border-radius:var(--radius-pill);padding:5px 13px}
.modes__step-proof svg{width:13px;height:13px;flex:none}

/* the canvas viewport */
.modes__viewport{position:relative;aspect-ratio:4/3;max-height:min(62vh,520px);margin-inline:auto;width:100%;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(160deg,#0E1D2C,#0A1521);border:1px solid var(--border-ink);box-shadow:var(--shadow-lg)}
.modes__viewport::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 50% 44%,transparent 40%,rgba(11,22,34,.5) 100%)}
#modes-canvas{position:absolute;inset:0;width:100%;height:100%}
.modes__caption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 24px;background:linear-gradient(0deg,rgba(11,22,34,.94),transparent);font-size:.8rem;color:var(--mutedOnInk);letter-spacing:.03em;display:flex;align-items:center;gap:10px}
.modes__caption b{color:#fff;font-weight:600}
.modes__caption svg{width:15px;height:15px;color:var(--brassBright);flex:none}

/* static fallback: reduced motion, no-JS, mobile */
.modes__fallback{display:none;padding-block:clamp(40px,6vw,72px)}
.modes__fallback .grid{gap:20px}
html.no-js .modes__stage,html.qa .modes__stage{display:none}
html.no-js .modes__fallback,html.qa .modes__fallback{display:block}
@media (prefers-reduced-motion:reduce){.modes__stage{display:none}.modes__fallback{display:block}}
@media (max-width:960px){.modes__stage{display:none}.modes__fallback{display:block}}
.mode-card{background:var(--inkCard);border:1px solid var(--border-ink);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden}
.mode-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,184,124,.45),transparent)}
.mode-card__icon{width:44px;height:44px;color:var(--brassBright);margin-bottom:20px}
.mode-card b{display:block;font-family:var(--font-head);font-size:1.22rem;color:#fff;margin-bottom:.45em;letter-spacing:-.018em;font-weight:600}
.mode-card p{color:var(--mutedOnInk);font-size:.94rem;margin-bottom:14px}
.mode-card .modes__step-num{margin-bottom:12px}

/* ══════════════════════════════════════════════════════════════════════════
   6 · PHASE 1 SERVICES — asymmetric editorial grid
   ══════════════════════════════════════════════════════════════════════════ */
.phase{position:relative;overflow:hidden}
.phase__head{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:end;margin-bottom:clamp(38px,5vw,58px);position:relative;z-index:1}
.phase__head h2{margin-bottom:.25em;max-width:15ch}
.phase__head .lede{max-width:52ch;margin:0}
.phase__badge{display:inline-flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--hairline);border-radius:var(--radius);padding:18px 26px;flex:none;background:var(--surface)}
.phase__badge b{font-family:var(--font-head);font-size:2.1rem;font-weight:600;line-height:1;color:var(--accent);letter-spacing:-.03em}
.phase__badge span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media (max-width:720px){.phase__head{grid-template-columns:1fr}.phase__badge{align-self:start}}

.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;position:relative;z-index:1}
.svc{grid-column:span 2;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform .45s var(--ease-premium),box-shadow .45s var(--ease-premium),border-color .45s var(--ease-premium)}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--hairline),transparent)}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 48%,var(--border))}
.svc--feature{grid-column:span 3;background:linear-gradient(158deg,var(--surface),var(--surfaceCard));padding:clamp(30px,3.4vw,44px)}
.svc--wide{grid-column:span 3}
.svc__icon{width:44px;height:44px;color:var(--primary);margin-bottom:22px;flex:none}
.svc--feature .svc__icon{width:54px;height:54px}
.svc h3{margin-bottom:.42em}
.svc--feature h3{font-size:clamp(1.5rem,2.4vw,1.95rem)}
.svc p{color:var(--textSoft);font-size:.95rem;margin-bottom:20px;flex:1}
.svc__tag{position:absolute;top:22px;right:22px}
.svc__foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto}
.svc__metric{display:flex;flex-direction:column;gap:2px;padding:14px 0 0;margin-top:8px;border-top:1px solid var(--border-soft)}
.svc__metric b{font-family:var(--font-head);font-size:1.6rem;font-weight:600;color:var(--primary);line-height:1;letter-spacing:-.028em}
.svc__metric span{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(4,1fr)}.svc,.svc--feature,.svc--wide{grid-column:span 2}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}.svc,.svc--feature,.svc--wide{grid-column:span 1}}

/* ══════════════════════════════════════════════════════════════════════════
   7 · CAC — the acquisition-cost model, drawn
   ══════════════════════════════════════════════════════════════════════════ */
.cac{background:var(--ink);color:var(--textOnInk);position:relative;overflow:hidden}
.cac::before{content:"";position:absolute;inset:0;background:radial-gradient(76% 96% at 88% 6%,rgba(20,107,99,.24),transparent 58%),radial-gradient(66% 88% at 4% 100%,rgba(176,141,87,.2),transparent 60%);pointer-events:none}
.cac__grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(38px,5.5vw,80px);align-items:center;position:relative;z-index:1}
.cac h2{color:#fff;max-width:14ch}
.cac .lede{color:var(--mutedOnInk)}
.cac__disclaimer{margin-top:26px;font-size:.79rem;color:#7C90A3;line-height:1.55;border-left:1px solid var(--border-ink);padding-left:16px;max-width:46ch}
.cac__chart{background:rgba(9,18,28,.62);border:1px solid var(--border-ink);border-radius:var(--radius-lg);padding:clamp(26px,3.2vw,40px);backdrop-filter:blur(8px)}
.cac__chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:baseline;margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--border-ink)}
.cac__chart-head b{font-family:var(--font-head);font-size:1.06rem;color:#fff;font-weight:600;letter-spacing:-.012em}
.cac__chart-head span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brassBright);font-weight:600}
.cac__bars{display:flex;flex-direction:column;gap:22px}
.cac__bar-row{display:grid;grid-template-columns:118px 1fr auto;gap:16px;align-items:center}
.cac__bar-label{font-size:.82rem;color:var(--mutedOnInk);line-height:1.3}
.cac__bar-track{height:26px;background:rgba(233,239,245,.10);border-radius:5px;overflow:hidden;position:relative;border:1px solid rgba(233,239,245,.06)}
.cac__bar-fill{display:block;height:100%;border-radius:5px;width:0;transition:width 1.5s var(--ease-premium)}
.cac__bar-fill--base{background:linear-gradient(90deg,#40668A,#5F8CB2)}
.cac__bar-fill--target{background:linear-gradient(90deg,#1E9186,#E3CD96)}
.cac__bar-val{font-family:var(--font-head);font-size:1.02rem;font-weight:600;color:#fff;letter-spacing:-.015em;min-width:60px;text-align:right}
.cac__legend{margin-top:30px;padding-top:20px;border-top:1px solid var(--border-ink);display:flex;flex-wrap:wrap;gap:12px 26px}
.cac__legend span{display:inline-flex;align-items:center;gap:9px;font-size:.79rem;color:var(--mutedOnInk)}
.cac__legend i{width:11px;height:11px;border-radius:3px;flex:none}
.cac__levers{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-ink);border:1px solid var(--border-ink);border-radius:var(--radius);overflow:hidden}
.cac__lever{background:var(--ink);padding:24px 22px}
.cac__lever b{display:block;font-family:var(--font-head);font-size:1.02rem;color:#fff;margin-bottom:8px;font-weight:600;letter-spacing:-.012em}
.cac__lever p{font-size:.87rem;color:var(--mutedOnInk);margin:0;line-height:1.55}
@media (max-width:860px){.cac__levers{grid-template-columns:1fr}}
@media (max-width:560px){.cac__bar-row{grid-template-columns:1fr;gap:8px}.cac__bar-val{text-align:left}}

/* ══════════════════════════════════════════════════════════════════════════
   8 · VERTICALS — ten industries
   ══════════════════════════════════════════════════════════════════════════ */
.verticals{position:relative;overflow:hidden;background:var(--sand)}
.vert-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;position:relative;z-index:1}
.vert{background:var(--background);padding:30px 24px;display:flex;flex-direction:column;gap:14px;position:relative;transition:background .42s var(--ease-premium)}
.vert:hover{background:var(--surface)}
.vert__icon{width:38px;height:38px;color:var(--primary);transition:color .42s var(--ease-premium),transform .42s var(--ease-premium)}
.vert:hover .vert__icon{color:var(--accent);transform:translateY(-2px)}
.vert b{font-family:var(--font-head);font-size:1.06rem;font-weight:600;color:var(--foreground);letter-spacing:-.014em;line-height:1.25}
.vert p{font-size:.84rem;color:var(--muted);margin:0;line-height:1.5}
.vert__link{position:absolute;inset:0}
@media (max-width:1080px){.vert-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.vert-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.vert-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   9 · WORK — real screenshots in device chrome
   ══════════════════════════════════════════════════════════════════════════ */
.work{position:relative;overflow:hidden}
.work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.work__item{display:flex;flex-direction:column;gap:16px}
.work__item .device{transition:transform .5s var(--ease-premium),box-shadow .5s var(--ease-premium)}
.work__item:hover .device{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.work__meta b{display:block;font-family:var(--font-head);font-size:1.08rem;font-weight:600;letter-spacing:-.014em;color:var(--foreground)}
.work__meta span{font-size:.79rem;color:var(--muted);letter-spacing:.05em}
@media (max-width:940px){.work__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.work__grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   10 · PHASE 2 TEASER
   ══════════════════════════════════════════════════════════════════════════ */
.phase2{background:var(--surfaceCard);position:relative;overflow:hidden}
.phase2__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,76px);align-items:center;position:relative;z-index:1}
.phase2__viz{position:relative;aspect-ratio:5/4;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-sm)}
.phase2__viz svg{position:absolute;inset:0;width:100%;height:100%}
.phase2__seq{margin-top:32px;display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.phase2__seq-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-soft);font-size:.9rem}
.phase2__seq-row:last-child{border-bottom:0}
.phase2__seq-row svg{width:20px;height:20px;color:var(--secondary);flex:none}
.phase2__seq-row b{font-weight:600;color:var(--foreground)}
.phase2__seq-row span{font-size:.78rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
@media (max-width:880px){.phase2__grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   11 · JOURNAL FEATURE — the new article
   ══════════════════════════════════════════════════════════════════════════ */
.journal{position:relative;overflow:hidden}
.journal__feature{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4.5vw,64px);align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(30px,3.8vw,52px);position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.journal__feature::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--secondary),var(--primary))}
.journal__body h3{font-size:clamp(1.5rem,2.7vw,2.15rem);margin-block:.35em .45em;letter-spacing:-.024em}
.journal__body h3 a{color:var(--foreground)}
.journal__body h3 a:hover{color:var(--primary)}
.journal__body p{color:var(--textSoft);margin-bottom:24px}
.journal__tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px}
.journal__viz{position:relative;aspect-ratio:1/1;max-width:340px;margin-inline:auto;width:100%}
.journal__viz svg{width:100%;height:100%}
@media (max-width:820px){.journal__feature{grid-template-columns:1fr}.journal__viz{order:-1;max-width:250px}}

/* ══════════════════════════════════════════════════════════════════════════
   12 · CONTACT
   ══════════════════════════════════════════════════════════════════════════ */
.contact__grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(36px,5vw,76px);align-items:start}
.contact__aside h2{max-width:13ch}
.contact__points{margin-top:34px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.contact__point{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--border)}
.contact__point svg{width:22px;height:22px;color:var(--accent);flex:none;margin-top:3px}
.contact__point b{display:block;font-weight:600;color:var(--foreground);margin-bottom:3px;font-size:.97rem}
.contact__point p{margin:0;font-size:.89rem;color:var(--muted);line-height:1.55}
.contact__form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,44px);box-shadow:var(--shadow-sm)}
.contact__form h3{font-size:1.28rem;margin-bottom:.35em}
.contact__form>p{font-size:.92rem;color:var(--muted);margin-bottom:26px}
@media (max-width:880px){.contact__grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   INNER-PAGE SHARED SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.feature-rows{display:flex;flex-direction:column;gap:clamp(50px,7vw,96px)}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.feature-row:nth-child(even) .feature-row__media{order:-1}
.feature-row__media{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--surfaceCard);border:1px solid var(--border);display:grid;place-items:center}
.feature-row__media svg{width:78%;height:78%}
.feature-row h3{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-bottom:.45em}
@media (max-width:860px){.feature-row{grid-template-columns:1fr}.feature-row:nth-child(even) .feature-row__media{order:0}}

.step-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--border)}
.step-flow__item{background:var(--surface);padding:30px 26px;position:relative}
.step-flow__item+.step-flow__item{border-left:1px solid var(--border)}
.step-flow__n{font-family:var(--font-head);font-size:.82rem;font-weight:600;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:14px}
.step-flow__item b{display:block;font-family:var(--font-head);font-size:1.08rem;font-weight:600;color:var(--foreground);margin-bottom:8px;letter-spacing:-.014em}
.step-flow__item p{font-size:.88rem;color:var(--textSoft);margin:0;line-height:1.55}
@media (max-width:900px){.step-flow{grid-template-columns:1fr 1fr}.step-flow__item:nth-child(3){border-left:0}.step-flow__item:nth-child(n+3){border-top:1px solid var(--border)}}
@media (max-width:520px){.step-flow{grid-template-columns:1fr}.step-flow__item+.step-flow__item{border-left:0;border-top:1px solid var(--border)}}

.compare{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.compare th,.compare td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--border-soft);vertical-align:top}
.compare thead th{background:var(--ink);color:#fff;font-family:var(--font-body);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-bottom:0}
.compare thead th:first-child{width:26%}
.compare tbody th{font-weight:600;color:var(--foreground);background:var(--surfaceCard);width:26%}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare td b{color:var(--primary)}

.vert-hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-ink);border:1px solid var(--border-ink);border-radius:var(--radius);overflow:hidden;margin-top:38px}
.vert-hero-facts>div{background:var(--inkRaised);padding:22px 24px}
.vert-hero-facts b{display:block;font-family:var(--font-head);font-size:1.5rem;color:var(--brassBright);font-weight:600;line-height:1;letter-spacing:-.026em;margin-bottom:9px}
.vert-hero-facts span{font-size:.75rem;color:var(--mutedOnInk);letter-spacing:.09em;text-transform:uppercase;font-weight:600}
@media (max-width:700px){.vert-hero-facts{grid-template-columns:1fr}}

/* placeholder plumbing */
[data-ph]{position:relative}
html.live [data-ph]{outline:none}

/* 3D tilt on portfolio cards (JS adds the rotation; desktop fine-pointers only) */
.work__item[data-tilt]{perspective:1100px}
.work__item[data-tilt] .device{transform-style:preserve-3d;will-change:transform}
@media (prefers-reduced-motion:reduce){.work__item[data-tilt] .device{transform:none !important}}