/* ════════════════════════════════════════════════
   ROBODEUS LABS — main.css
   All theme styles. Loaded via functions.php.
   Google Fonts + Bootstrap loaded before this file.
════════════════════════════════════════════════ */

/* ── LENIS ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ════════════════════════════
   TOKENS
════════════════════════════ */
:root {
    --white:  #ffffff;
    --soft:   #f7f7f4;
    --navy:   #2b2d42;
    --green:  #58af6c;
    --green2: #11998e;
    --grad:   linear-gradient(135deg, #58af6c 0%, #11998e 100%);
    --font:   'Inter', sans-serif;
    --mono:   'JetBrains Mono', monospace;
    --expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --quart:  cubic-bezier(0.76, 0, 0.24, 1);
}

/* ════════════════════════════
   BASE
════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
    background: var(--white); color: var(--navy);
    font-family: var(--font); line-height: 1.6;
    overflow-x: hidden; cursor: none;
}
* { cursor: none !important; }
section { padding: clamp(90px, 11vw, 150px) 0; }
.fw-300 { font-weight: 300 !important; }
.fw-800 { font-weight: 800 !important; }
.text-outline       { color: transparent; -webkit-text-stroke: 1.5px var(--navy); }
.text-outline-white { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255); }
.grad-text { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section-tag {
    display: block; font-family: var(--mono);
    font-size: .62rem; letter-spacing: 4px;
    color: var(--green); text-transform: uppercase; margin-bottom: 1.4rem;
}
.body-copy        { font-size: .97rem; font-weight: 300; line-height: 1.82; color: rgba(43,45,66,.68); }
.body-copy-strong { font-size: 1rem;   font-weight: 500; line-height: 1.78; color: var(--navy); }
.v-divider { width:1px; height:100px; background: linear-gradient(to bottom, transparent, var(--green), transparent); }

/* Grain overlay */
body::after {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:9900;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:.018;
}

/* ════════════════════════════
   CURSOR
════════════════════════════ */
.cur-dot {
    position:fixed; width:6px; height:6px; border-radius:50%;
    background:var(--green); pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%);
    transition:width .3s var(--expo), height .3s var(--expo), background .3s;
}
.cur-ring {
    position:fixed; width:30px; height:30px; border-radius:50%;
    border:1px solid rgba(88,175,108,.45); pointer-events:none; z-index:9998;
    transform:translate(-50%,-50%);
    transition:width .3s var(--expo), height .3s var(--expo), border-color .3s;
}
.cur-dot.hov  { width:14px; height:14px; }
.cur-ring.hov { width:54px; height:54px; border-color:var(--green); }
.cur-dot.nav  { background:#fff; }
.cur-ring.nav { border-color:rgba(255,255,255,.28); }

/* ════════════════════════════
   SCROLL PROGRESS BAR
════════════════════════════ */
.scroll-progress {
    position:fixed; top:0; left:0; z-index:9000;
    height:2px; width:0%;
    background:var(--grad);
    transition:width .1s linear;
    pointer-events:none;
}

/* ════════════════════════════
   FULLSCREEN NAV
════════════════════════════ */
.nav-overlay {
    position:fixed; inset:0; z-index:7900;
    background:var(--navy);
    display:grid; grid-template-rows:1fr auto;
    padding: clamp(110px,13vw,155px) clamp(2rem,6vw,6rem) clamp(2rem,4vw,4rem);
    pointer-events:none;
    clip-path:circle(0% at calc(100% - 52px) 52px);
    transition:clip-path .85s var(--expo);
    overflow:hidden;
}
.nav-overlay.open {
    pointer-events:all;
    clip-path:circle(160% at calc(100% - 52px) 52px);
}
.nav-overlay::before {
    content:''; position:absolute;
    top:0; left:clamp(2rem,6vw,6rem);
    width:1px; height:0;
    background:linear-gradient(to bottom, var(--green), transparent);
    transition:height .75s var(--expo) .3s;
}
.nav-overlay.open::before { height:55%; }
.nav-glow {
    position:absolute; width:700px; height:700px;
    bottom:-250px; right:-150px;
    background:radial-gradient(circle, rgba(88,175,108,.07) 0%, transparent 65%);
    pointer-events:none;
}
.nav-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.nav-li { overflow:hidden; border-bottom:1px solid rgba(255,255,255,.05); }
.nav-li:first-child { border-top:1px solid rgba(255,255,255,.05); }
.nav-a {
    display:flex; align-items:center; justify-content:space-between;
    text-decoration:none; padding:clamp(.85rem,1.8vw,1.3rem) 0;
    transform:translateY(110%); transition:transform .65s var(--expo);
}
.nav-overlay.open .nav-a { transform:translateY(0); }
.nav-li:nth-child(1) .nav-a { transition-delay:.10s; }
.nav-li:nth-child(2) .nav-a { transition-delay:.17s; }
.nav-li:nth-child(3) .nav-a { transition-delay:.24s; }
.nav-li:nth-child(4) .nav-a { transition-delay:.31s; }
.nav-li:nth-child(5) .nav-a { transition-delay:.38s; }
.nav-word {
    font-size:clamp(2.2rem,6vw,5.5rem); font-weight:800;
    letter-spacing:-2px; line-height:1; text-transform:uppercase;
    color:rgba(255,255,255,.12);
    transition:color .35s, letter-spacing .4s var(--expo);
}
.nav-li:hover .nav-word { color:#fff; letter-spacing:-.5px; }
.nav-meta { display:flex; align-items:center; gap:.9rem; }
.nav-num { font-family:var(--mono); font-size:.58rem; letter-spacing:3px; color:rgba(255,255,255,.18); transition:color .3s; }
.nav-li:hover .nav-num { color:var(--green); }
.nav-arr {
    width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.2); font-size:.8rem;
    transform:rotate(-45deg); transition:all .4s var(--expo);
}
.nav-li:hover .nav-arr { background:var(--green); border-color:var(--green); color:#fff; transform:rotate(0); }
.nav-foot {
    display:flex; align-items:flex-end; justify-content:space-between;
    opacity:0; transform:translateY(14px);
    transition:opacity .5s ease .5s, transform .5s var(--expo) .5s;
}
.nav-overlay.open .nav-foot { opacity:1; transform:translateY(0); }
.nav-foot-l { font-family:var(--mono); font-size:.68rem; letter-spacing:1px; color:rgba(255,255,255,.22); line-height:1.85; }
.nav-foot-l a { color:var(--green); text-decoration:none; }
.nav-foot-r { font-family:var(--mono); font-size:.6rem; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.08); text-align:right; line-height:1.9; }

/* ════════════════════════════
   HEADER
════════════════════════════ */
.site-header {
    position:fixed; top:0; left:0; right:0; z-index:8000;
    padding:1.4rem 0;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px) saturate(180%);
    border-bottom:1px solid rgba(43,45,66,.06);
    transition:padding .5s var(--expo), box-shadow .4s;
}
.site-header.scrolled {
    padding:.9rem 0;
    box-shadow:0 4px 40px rgba(0,0,0,.06);
}
.site-header.nav-open {
    background:transparent !important;
    border-bottom-color:transparent !important;
    box-shadow:none !important;
}
.hdr-inner {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 clamp(1.5rem,4vw,4rem);
}
.hdr-logo img { width:36px; transition:filter .35s, transform .4s var(--expo); }
.site-header.nav-open .hdr-logo img { filter:brightness(0) invert(1); }
.hdr-logo:hover img { transform:scale(1.08) rotate(-3deg); }

/* Hamburger */
.nav-toggle {
    position:relative; z-index:8100;
    width:52px; height:52px;
    background:transparent; border:none; padding:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
}
.nav-toggle::before {
    content:''; position:absolute; inset:0; border-radius:50%;
    border:1px solid rgba(43,45,66,.18);
    transition:transform .6s var(--expo), border-color .35s;
}
.site-header.nav-open .nav-toggle::before { border-color:rgba(255,255,255,.28); }
.nav-toggle:hover::before { transform:scale(1.18); }
.toggle-lbl {
    position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%);
    font-family:var(--mono); font-size:.52rem; letter-spacing:3px;
    text-transform:uppercase; white-space:nowrap;
    color:rgba(43,45,66,.3); opacity:0; transition:opacity .3s; pointer-events:none;
}
.site-header.nav-open .toggle-lbl { color:rgba(255,255,255,.3); }
.nav-toggle:hover .toggle-lbl { opacity:1; }
.bar {
    display:block; width:22px; height:1.5px;
    background:var(--navy); border-radius:2px; transform-origin:center;
    transition:transform .5s var(--expo), opacity .3s, background .35s;
}
.site-header.nav-open .bar { background:#fff; }
.site-header.nav-open .bar-1 { transform:translateY(6.5px) rotate(45deg); }
.site-header.nav-open .bar-2 { opacity:0; transform:scaleX(0); }
.site-header.nav-open .bar-3 { transform:translateY(-6.5px) rotate(-45deg); }

/* ════════════════════════════
   HERO
════════════════════════════ */
.hero-section {
    min-height: 100vh; background: var(--white);
    position: relative; overflow: hidden;
    display: flex; align-items: center; padding: 0;
}
#heroCanvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.hero-ghost {
    position: absolute; bottom: -8%; right: -2%;
    font-size: 30vw; font-weight: 900;
    color: rgba(43,45,66,.022); letter-spacing: -5vw; line-height: 1;
    pointer-events: none; user-select: none; text-transform: uppercase;
    will-change: transform;
}
.hero-accent {
    position: absolute; left: 0; top: 15%; bottom: 15%; width: 3px;
    background: linear-gradient(to bottom, transparent, var(--green) 30%, var(--green) 70%, transparent);
    opacity: .3;
}
.hero-inner {
    position: relative; z-index: 5;
    padding-top: clamp(110px,14vw,160px);
    padding-bottom: clamp(50px,7vw,80px);
    width: 100%;
    display: flex; flex-direction: column; gap: 0;
}

/* Stagger reveals */
.rv  { opacity:0; transform:translateY(26px); }
.rv1 { animation:rv-up 1s var(--expo) .20s forwards; }
.rv2 { animation:rv-up 1s var(--expo) .40s forwards; }
.rv3 { animation:rv-up 1s var(--expo) .58s forwards; }
.rv4 { animation:rv-up 1s var(--expo) .76s forwards; }
.rv5 { animation:rv-up 1s var(--expo) .94s forwards; }
@keyframes rv-up { to { opacity:1; transform:translateY(0); } }

.hero-eyebrow {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: clamp(1.5rem,3vw,2.5rem);
}
.pulse-dot {
    width:8px; height:8px; flex-shrink:0;
    background:var(--green); border-radius:50%;
    box-shadow:0 0 0 0 rgba(88,175,108,.5);
    animation:pulse-anim 2.5s infinite;
}
@keyframes pulse-anim {
    0%  { box-shadow:0 0 0 0   rgba(88,175,108,.5); }
    70% { box-shadow:0 0 0 10px rgba(88,175,108,0); }
    100%{ box-shadow:0 0 0 0   rgba(88,175,108,0); }
}
.eyebrow-txt {
    font-family:var(--mono); font-size:.65rem;
    letter-spacing:3px; text-transform:uppercase; color:rgba(43,45,66,.55);
}
.hero-title {
    font-size: clamp(4rem, 11vw, 11rem);
    font-weight: 900; line-height: .86;
    letter-spacing: -.05em; text-transform: uppercase;
    margin-bottom: clamp(2rem,4vw,3.5rem);
}
.hero-title .solid    { display:block; color:var(--navy); }
.hero-title .outlined { display:block; color:transparent; -webkit-text-stroke:1.5px rgba(43,45,66); }
.hero-title .green    { display:block; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub-row {
    display: flex; align-items: flex-end;
    justify-content: space-between; gap: 2rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(43,45,66,.07);
}
.hero-sub {
    font-size: 1rem; font-weight: 300;
    color: rgba(43,45,66,.6); line-height: 1.8;
    max-width: 540px; margin: 0;
}

/* Buttons */
.btn-lab {
    display:inline-flex; align-items:center; gap:12px;
    background:var(--grad); color:#fff; text-decoration:none;
    font-family:var(--mono); font-size:.68rem; letter-spacing:3px; text-transform:uppercase;
    padding:16px 36px; position:relative; overflow:hidden;
    transition:transform .4s var(--expo), box-shadow .4s;
}
.btn-lab::before {
    content:''; position:absolute; inset:0;
    background:rgba(255,255,255,.12); transform:translateX(-101%);
    transition:transform .4s var(--expo);
}
.btn-lab:hover::before { transform:translateX(0); }
.btn-lab:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(88,175,108,.22); color:#fff; }
.btn-arrow { transition:transform .3s; }
.btn-lab:hover .btn-arrow { transform:translateX(5px); }

.scroll-cue {
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    opacity:0; animation:fade-in 1s ease 1.8s forwards;
}
@keyframes fade-in { to { opacity:1; } }
.sc-line { width:1px; height:48px; background:rgba(43,45,66,.07); position:relative; overflow:hidden; }
.sc-line::after {
    content:''; position:absolute; top:-100%; width:100%; height:100%;
    background:var(--green); animation:sc-drop 2.2s ease infinite;
}
@keyframes sc-drop { 0%{top:-100%;} 100%{top:100%;} }
.sc-lbl { font-family:var(--mono); font-size:.5rem; letter-spacing:3px; color:rgba(43,45,66,.18); text-transform:uppercase; }

/* ════════════════════════════
   THESIS
════════════════════════════ */
.thesis-section { background:var(--white); position:relative; overflow:hidden; }
.thesis-grid {
    position:absolute; inset:0;
    background-image:linear-gradient(rgba(43,45,66,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(43,45,66,.03) 1px,transparent 1px);
    background-size:60px 60px; pointer-events:none;
}
.thesis-bg-n {
    position:absolute; right:-1rem; top:50%; transform:translateY(-50%);
    font-size:22vw; font-weight:900; line-height:1;
    color:rgba(43,45,66,.022); pointer-events:none; user-select:none; letter-spacing:-3vw;
    will-change:transform;
}
.thesis-mantra { font-size:calc(1.9rem + 2.2vw); font-weight:400; line-height:1.12; color:var(--navy); }
.thesis-mantra em  { font-style:italic; color:var(--green); font-weight:500; }
.thesis-mantra .dim { color:rgba(43,45,66,.28); }
.thesis-card { border-left:2px solid var(--green); padding-left:2rem; }

/* ════════════════════════════
   IDENTITY
════════════════════════════ */
.identity-section { background:var(--soft); position:relative; overflow:hidden; }
.identity-img {
    position:absolute; top:0; right:0; width:40%; height:100%;
    overflow:hidden; pointer-events:none;
}
.identity-img::before {
    content:''; position:absolute; inset:0; z-index:2;
    background:linear-gradient(to right, var(--soft) 0%, rgba(247,247,244,.5) 40%, transparent 100%);
}
.identity-img img { width:100%; height:110%; object-fit:cover; filter:grayscale(60%) brightness(.85); will-change:transform; }
.identity-title { font-size:calc(2.4rem + 1.5vw); font-weight:300; line-height:1.05; letter-spacing:-.04em; color:var(--navy); }

/* ════════════════════════════
   VERTICALS
════════════════════════════ */
.verticals-section { background:var(--white); }
.vt-title { font-size:calc(3.5rem + 4vw); letter-spacing:-3px; font-weight:300; line-height:.9; }
.v-card {
    padding:2.8rem; border:1px solid rgba(43,45,66,.06);
    height:100%; position:relative; overflow:hidden;
    transition:all .5s var(--expo); background:var(--white);
}
.v-card::before {
    content:''; position:absolute; top:0; left:0;
    width:0; height:2px; background:var(--grad); transition:width .5s var(--expo);
}
.v-card:hover { border-color:rgba(88,175,108,.3); transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,0,0,.05); }
.v-card:hover::before { width:100%; }
.blob-wrap { position:relative; width:64px; height:64px; margin-bottom:2rem; display:flex; align-items:center; justify-content:center; }
.blob { position:absolute; inset:0; background:var(--grad); opacity:.85; filter:blur(1px); border-radius:60% 40% 30% 70%/60% 30% 70% 40%; animation:blob-morph 8s ease-in-out infinite; }
.blob.b2 { animation-delay:-3s; }
.blob.b3 { animation-delay:-6s; }
@keyframes blob-morph { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;} }
.blob-num { position:relative; z-index:2; color:#fff; font-family:var(--mono); font-weight:700; font-size:.7rem; }
.v-label { font-family:var(--mono); font-size:.6rem; letter-spacing:2px; text-transform:uppercase; color:var(--green); margin-bottom:.7rem; }
.v-name  { font-size:2rem; font-weight:300; letter-spacing:2px; text-transform:uppercase; color:var(--navy); margin-bottom:.9rem; }

/* ════════════════════════════
   CAPABILITIES
════════════════════════════ */
.cap-section { background:var(--soft); }
.cap-title { font-size:calc(2.5rem + 2.5vw); font-weight:300; letter-spacing:-2px; line-height:.95; }
.cap-row {
    display:grid; grid-template-columns:150px 1fr 32px;
    align-items:start; gap:2rem; padding:2.4rem 0;
    border-top:1px solid rgba(43,45,66,.07); position:relative;
    transition:padding-left .4s var(--expo);
}
.cap-row::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--green); transition:width .5s var(--expo); }
.cap-row:last-child { border-bottom:1px solid rgba(43,45,66,.07); }
.cap-row:hover::after { width:100%; }
.cap-row:hover { padding-left:.5rem; }
.cap-row:hover .cap-name  { color:var(--green); }
.cap-row:hover .cap-arrow { color:var(--green); transform:translate(3px,-3px); }
.cap-code  { font-family:var(--mono); font-size:.58rem; letter-spacing:2px; color:var(--green); padding-top:5px; }
.cap-name  { font-size:1.22rem; font-weight:600; color:var(--navy); margin-bottom:.45rem; letter-spacing:-.3px; transition:color .3s; }
.cap-desc  { font-size:.93rem; font-weight:300; line-height:1.78; color:rgba(43,45,66,.5); }
.cap-arrow { font-size:1rem; color:rgba(43,45,66,.18); transition:all .3s; padding-top:5px; }
@media(max-width:767px){ .cap-row{grid-template-columns:1fr;gap:.7rem;} .cap-arrow{display:none;} }

/* ════════════════════════════
   CASE STUDIES — HOMEPAGE GRID
════════════════════════════ */
.work-section { background:var(--navy); position:relative; overflow:hidden; }
.work-section::before {
    content:''; position:absolute; inset:0;
    background-image:linear-gradient(rgba(88,175,108,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(88,175,108,.03) 1px,transparent 1px);
    background-size:55px 55px;
}
.work-glow {
    position:absolute; top:0; right:0; width:60vw; height:100%;
    background:radial-gradient(ellipse at 80% 40%, rgba(88,175,108,.06) 0%, transparent 65%);
    pointer-events:none;
}
.work-title {
    font-size:calc(2.8rem + 2.5vw); font-weight:300;
    letter-spacing:-2px; line-height:.95; color:rgba(255,255,255,.88);
}
.work-intro { font-size:.95rem; font-weight:300; line-height:1.8; color:rgba(255,255,255,.32); max-width:420px; }

.cs-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.5px;
    background:rgba(255,255,255,.04);
}
@media(max-width:991px){ .cs-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .cs-grid { grid-template-columns:1fr; } }
/* cs-card--featured — first card spans full width */
.cs-card--featured { grid-column:1 / -1; }

.cs-card {
    background:var(--navy);
    padding:2.8rem; position:relative; overflow:hidden;
    display:flex; flex-direction:column;
    transition:background .4s;
}
.cs-card:hover { background:#343650; }
.cs-img {
    width:calc(100% + 5.6rem);
    margin:-2.8rem -2.8rem 2rem -2.8rem;
    height:220px; overflow:hidden; position:relative;
}
.cs-img::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(43,45,66,.2), var(--navy));
}
.cs-img img { width:100%; height:100%; object-fit:cover; filter:grayscale(30%) brightness(.75); transition:transform .8s var(--expo); }
.cs-card:hover .cs-img img { transform:scale(1.05); }
.cs-card--featured .cs-img { height:340px; }
.cs-card--featured .cs-body { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
@media(max-width:767px){ .cs-card--featured .cs-body { grid-template-columns:1fr; gap:1.5rem; } }

.cs-index {
    font-family:var(--mono); font-size:.6rem; letter-spacing:3px;
    color:var(--green); margin-bottom:1.5rem;
    display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
}
.cs-pill {
    font-family:var(--mono); font-size:.55rem; letter-spacing:2px; text-transform:uppercase;
    background:rgba(88,175,108,.1); color:var(--green);
    border:1px solid rgba(88,175,108,.2); padding:3px 10px;
}
.cs-headline {
    font-size:1.25rem; font-weight:600; letter-spacing:-.3px;
    color:rgba(255,255,255,.88); line-height:1.35; margin-bottom:1rem;
}
.cs-card--featured .cs-headline { font-size:1.5rem; }
.cs-context {
    font-size:.88rem; font-weight:300; line-height:1.78;
    color:rgba(255,255,255,.35); margin-bottom:2rem; flex:1;
}
.cs-outcomes {
    border-top:1px solid rgba(255,255,255,.06); padding-top:1.5rem;
    display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;
}
.cs-out-num {
    font-size:1.7rem; font-weight:800;
    background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    line-height:1;
}
.cs-out-lbl { font-family:var(--mono); font-size:.58rem; letter-spacing:2px; color:rgba(255,255,255,.2); text-transform:uppercase; margin-top:4px; }
.cs-link {
    display:inline-flex; align-items:center; gap:8px; margin-top:1.5rem;
    font-family:var(--mono); font-size:.62rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--green); text-decoration:none; transition:gap .3s;
}
.cs-link:hover { gap:14px; color:var(--green); }

/* ════════════════════════════
   CASE STUDY — SINGLE PAGE
════════════════════════════ */
.cs-single-hero {
    position:relative; min-height:70vh;
    background:var(--navy); overflow:hidden;
    display:flex; align-items:flex-end;
    padding-bottom:clamp(60px,8vw,100px);
}
.cs-single-img {
    position:absolute; inset:0;
}
.cs-single-img img {
    width:100%; height:100%; object-fit:cover;
    filter:grayscale(40%) brightness(.4);
}
.cs-single-img::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, var(--navy) 20%, rgba(43,45,66,.5) 100%);
}
.cs-single-hero-inner { position:relative; z-index:2; width:100%; padding-top:140px; }
.cs-back {
    font-family:var(--mono); font-size:.6rem; letter-spacing:3px;
    text-transform:uppercase; color:rgba(255,255,255,.28);
    text-decoration:none; transition:color .3s;
}
.cs-back:hover { color:var(--green); }
.cs-single-title {
    font-size:calc(2rem + 2.5vw); font-weight:700;
    color:#fff; line-height:1.1; letter-spacing:-.03em;
    max-width:780px; margin-top:1rem;
}

/* Outcomes bar */
.cs-single-outcomes {
    background:rgba(43,45,66,.04);
    border-top:1px solid rgba(43,45,66,.06);
    border-bottom:1px solid rgba(43,45,66,.06);
    padding:2.5rem 0;
}
.cs-outcomes-bar {
    display:flex; gap:3rem; flex-wrap:wrap;
}
.cs-ob-item {}
.cs-single-outcomes .cs-out-num {
    font-size:2.2rem;
    background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.cs-single-outcomes .cs-out-lbl {
    font-family:var(--mono); font-size:.6rem; letter-spacing:2px;
    color:rgba(43,45,66,.35); text-transform:uppercase; margin-top:4px;
}

/* Body content */
.cs-single-body { padding:clamp(60px,9vw,120px) 0; }
.cs-content { font-size:1.06rem; font-weight:300; line-height:1.9; color:rgba(43,45,66,.7); }
.cs-content h2 { font-size:1.5rem; font-weight:600; color:var(--navy); margin:3rem 0 1rem; }
.cs-content h3 { font-size:1.2rem; font-weight:600; color:var(--navy); margin:2.5rem 0 .8rem; }
.cs-content p  { margin-bottom:1.5rem; }
.cs-content blockquote {
    border-left:2px solid var(--green); padding-left:1.5rem;
    margin:2rem 0; font-style:italic; color:rgba(43,45,66,.55);
}

/* Next case study */
.cs-next {
    border-top:1px solid rgba(43,45,66,.07);
    padding:clamp(40px,6vw,80px) 0;
    background:var(--soft);
}
.cs-next-link {
    display:flex; align-items:center; justify-content:space-between;
    text-decoration:none; gap:2rem;
    padding:1.5rem 0;
    transition:padding-left .4s var(--expo);
}
.cs-next-link:hover { padding-left:.5rem; }
.cs-next-title {
    font-size:calc(1.4rem + 1vw); font-weight:300;
    color:var(--navy); letter-spacing:-.02em; line-height:1.2;
    transition:color .3s;
}
.cs-next-link:hover .cs-next-title { color:var(--green); }
.cs-next-arrow {
    font-size:2rem; color:rgba(43,45,66,.2);
    transition:all .4s var(--expo); flex-shrink:0;
}
.cs-next-link:hover .cs-next-arrow { color:var(--green); transform:translateX(8px); }

/* ════════════════════════════
   PARADIGM
════════════════════════════ */
.paradigm-section {
    background: var(--navy);
    padding: clamp(100px,13vw,160px) 0;
    position: relative; overflow: hidden;
}
.paradigm-noise {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    background-size: 200px; opacity: .4;
}
.paradigm-title {
    font-size: clamp(2.2rem,4.5vw,3.8rem);
    font-weight: 300; letter-spacing: -.04em;
    line-height: 1.05; color: rgba(255,255,255,.85);
    margin-top: 1.2rem; margin-bottom: 1.5rem;
}
.paradigm-title-accent {
    background: var(--grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.paradigm-lead {
    font-size: .95rem; font-weight: 300; line-height: 1.75;
    color: rgba(255,255,255,.4); margin-bottom: 2rem;
}
.paradigm-line { width: 40px; height: 2px; background: var(--grad); }

/* 2×2 shift card grid */
.evo-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.5px; background: rgba(255,255,255,.04);
    margin-bottom: 2.5rem;
}
@media(max-width:600px) { .evo-grid { grid-template-columns: 1fr; } }

.evo-card {
    background: rgba(255,255,255,.02);
    padding: clamp(1.5rem,3vw,2.2rem);
    position: relative; overflow: hidden;
    transition: background .4s var(--expo);
}
.evo-card::before {
    content: ''; position: absolute;
    left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--grad);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .5s var(--expo);
}
.evo-card:hover { background: rgba(255,255,255,.05); }
.evo-card:hover::before { transform: scaleY(1); }

.evo-card-num {
    font-family: var(--mono); font-size: .5rem;
    letter-spacing: 3px; color: rgba(255,255,255,.2);
    margin-bottom: 1.2rem;
}
.evo-card-body { display: flex; flex-direction: column; gap: .7rem; }

.evo-from {
    font-family: var(--mono); font-size: .7rem;
    letter-spacing: 1px; text-transform: uppercase;
    color: rgba(255,255,255,.3);
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,.15);
}
.evo-arrow-wrap {
    display: flex; align-items: center; gap: .5rem; color: var(--green);
}
.evo-arrow-line {
    flex: 1; height: 1px;
    background: linear-gradient(to right, rgba(88,175,108,.3), rgba(88,175,108,.7));
    transform: scaleX(0.3); transform-origin: left;
    transition: transform .5s var(--expo) .1s;
}
.evo-card:hover .evo-arrow-line { transform: scaleX(1); }
.evo-to {
    font-size: 1.05rem; font-weight: 500;
    color: rgba(255,255,255,.78); line-height: 1.3;
    letter-spacing: -.02em; transition: color .3s;
}
.evo-card:hover .evo-to { color: #fff; }

.paradigm-footnote {
    font-size: .9rem; font-weight: 300; font-style: italic;
    color: rgba(255,255,255,.3); line-height: 1.8;
    border-left: 1px solid rgba(88,175,108,.3);
    padding-left: 1.2rem;
}
.paradigm-footnote em { color: var(--green); font-style: normal; }

/* ════════════════════════════
   CTA
════════════════════════════ */
.cta-section { background:var(--white); text-align:center; border-bottom:1px solid rgba(43,45,66,.05); }
.cta-super { font-size:calc(2.5rem + 4vw); font-weight:300; letter-spacing:-3px; line-height:.92; margin-bottom:2.5rem; }
.cta-super .hi  { color:var(--green); }
.cta-super .out { color:transparent; -webkit-text-stroke:1.5px rgba(43,45,66,.8); }
.cta-body { font-size:.97rem; font-weight:300; line-height:1.85; color:rgba(43,45,66,.5); max-width:480px; margin:0 auto 3rem; }

/* ════════════════════════════
   FOOTER
════════════════════════════ */
.footer { background:#080808; padding:80px 0 40px; }
.footer-logo img { filter:brightness(0) invert(1); opacity:.8; }
.ftr-tag  { font-family:var(--mono); font-size:.6rem; letter-spacing:2px; color:rgba(255,255,255,.7); margin-top:1.5rem; text-transform:uppercase; }
.ftr-head { font-family:var(--mono); font-size:.56rem; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:1.4rem; }
.ftr-links { list-style:none; padding:0; }
.ftr-links li { margin-bottom:10px; }
.ftr-links a { font-size:.82rem; font-weight:300; color:rgba(255,255,255,.26); text-decoration:none; transition:all .3s; display:inline-block; }
.ftr-links a:hover { color:var(--green); padding-left:6px; }
.ftr-contact { font-size:.82rem; font-weight:300; color:rgba(255,255,255,.26); margin-bottom:6px; }
.ftr-contact a { color:var(--green); text-decoration:none; }
.ftr-bottom { margin-top:56px; padding-top:20px; border-top:1px solid rgba(255,255,255,.5); display:flex; justify-content:space-between; }
.ftr-bottom p { font-family:var(--mono); font-size:.56rem; letter-spacing:1px; color:rgba(255,255,255,.1); text-transform:uppercase; margin:0; }

/* ════════════════════════════
   SCROLL REVEAL
════════════════════════════ */
[data-reveal] {
    opacity:0; transform:translateY(40px);
    transition:opacity .9s var(--expo), transform .9s var(--expo);
}
[data-reveal].visible { opacity:1; transform:translateY(0); }
[data-reveal="left"]  { transform:translateX(-40px); }
[data-reveal="left"].visible { transform:translateX(0); }
[data-reveal="right"] { transform:translateX(40px); }
[data-reveal="right"].visible { transform:translateX(0); }
[data-reveal="scale"] { transform:scale(.95); }
[data-reveal="scale"].visible { transform:scale(1); }

/* ════════════════════════════
   NOTEBOOK
════════════════════════════ */

/* ── HERO ── */
.nb-hero {
    background: var(--white);
    padding-top: clamp(130px,15vw,180px);
    padding-bottom: 0;
    position: relative; overflow: hidden;
    border-bottom: 1px solid rgba(43,45,66,.06);
}
.nb-bg-word {
    position: absolute;
    top: 50%; right: -2%;
    transform: translateY(-50%);
    font-size: 19vw; font-weight: 900;
    letter-spacing: -.06em; line-height: .85;
    color: rgba(43,45,66,.028);
    text-transform: uppercase;
    pointer-events: none; user-select: none;
    z-index: 0; text-align: right;
}
.nb-hero-inner {
    display: flex; align-items: flex-end;
    justify-content: space-between;
    gap: 3rem; flex-wrap: wrap;
    padding-bottom: clamp(40px,6vw,70px);
    position: relative; z-index: 1;
}
.nb-hero-left  { flex: 1; min-width: 280px; }
.nb-hero-right {
    display: flex; align-items: center; gap: 2.5rem;
    flex-shrink: 0; padding-bottom: .5rem;
}
.nb-hero-title {
    font-size: clamp(4rem,9vw,8.5rem);
    font-weight: 900; letter-spacing: -.05em;
    line-height: .88; text-transform: uppercase;
    color: var(--navy); margin-top: 1.5rem; margin-bottom: 1.5rem;
}
.nb-hero-sub {
    font-size: .97rem; font-weight: 300; line-height: 1.8;
    color: rgba(43,45,66,.5); max-width: 500px;
    border-left: 2px solid rgba(43,45,66,.1);
    padding-left: 1.2rem;
}
/* Six modes subtitle */
.nb-hero-modes {
    font-family: var(--mono); font-size: .62rem;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(43,45,66,.28);
    margin-top: 1.4rem; margin-bottom: 0;
}
/* Stats */
.nb-stat { text-align: center; }
.nb-stat-num {
    font-size: 2.5rem; font-weight: 900; line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: -.04em;
}
.nb-stat-lbl {
    font-family: var(--mono); font-size: .54rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(43,45,66,.28); line-height: 1.5; margin-top: .4rem;
}
.nb-stat-divider { width: 1px; height: 40px; background: rgba(43,45,66,.1); }

/* ── MODE TAB BAR ── */
.nb-modebar {
    background: var(--white);
    border-bottom: 1px solid rgba(43,45,66,.06);
    position: sticky; top: 70px; z-index: 50;
    overflow-x: auto; scrollbar-width: none;
}
.nb-modebar::-webkit-scrollbar { display: none; }
.nb-modebar-inner {
    display: flex; align-items: stretch;
    /* let it scroll horizontally if needed */
    min-width: max-content;
}
.nb-mode-tab {
    flex: 1; min-width: 120px;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .2rem;
    padding: 1.2rem clamp(1rem,2.5vw,2rem);
    text-decoration: none;
    border-right: 1px solid rgba(43,45,66,.06);
    position: relative;
    transition: background .35s var(--expo);
}
.nb-mode-tab:last-child { border-right: none; }
.nb-mode-tab::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: var(--grad);
    transform: scaleX(0); transform-origin: left;
    transition: transform .45s var(--expo);
}
.nb-mode-tab:hover { background: var(--soft); }
.nb-mode-tab--active::after,
.nb-mode-tab:hover::after { transform: scaleX(1); }

.nb-mode-glyph {
    font-size: 1.1rem; line-height: 1;
    color: rgba(43,45,66,.18);
    transition: color .3s;
    font-family: var(--mono);
}
.nb-mode-tab--active .nb-mode-glyph,
.nb-mode-tab:hover   .nb-mode-glyph { color: var(--green); }

.nb-mode-name {
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(43,45,66,.35);
    transition: color .3s;
}
.nb-mode-tab--active .nb-mode-name,
.nb-mode-tab:hover   .nb-mode-name { color: var(--navy); }

.nb-mode-descriptor {
    font-family: var(--mono); font-size: .52rem;
    letter-spacing: 1px; text-transform: lowercase;
    color: rgba(43,45,66,.22);
    transition: color .3s;
}
.nb-mode-tab--active .nb-mode-descriptor { color: var(--green); }

.nb-mode-count {
    font-family: var(--mono); font-size: .52rem;
    letter-spacing: 1px;
    color: rgba(43,45,66,.18);
    margin-top: .3rem;
}

/* ── MODE SECTION ── */
.nb-mode-section {
    background: var(--soft);
    padding: clamp(60px,8vw,100px) 0;
}

/* Intro panel */
.nb-mode-intro {
    display: flex; align-items: flex-start; gap: clamp(2rem,5vw,5rem);
    padding-bottom: clamp(40px,6vw,60px);
    margin-bottom: clamp(40px,6vw,60px);
    border-bottom: 1px solid rgba(43,45,66,.07);
}
.nb-mode-intro-glyph {
    font-size: clamp(4rem,8vw,7rem);
    line-height: 1; font-family: var(--mono);
    color: rgba(43,45,66,.06);
    flex-shrink: 0; user-select: none;
    transition: color .4s;
}
.nb-mode-intro:hover .nb-mode-intro-glyph { color: rgba(88,175,108,.15); }
.nb-mode-intro-content { flex: 1; }
.nb-mode-intro-header {
    display: flex; align-items: baseline; gap: .8rem;
    margin-bottom: 1rem; flex-wrap: wrap;
}
.nb-mode-intro-name {
    font-size: clamp(1.6rem,3vw,2.5rem); font-weight: 900;
    letter-spacing: -.04em; color: var(--navy);
}
.nb-mode-intro-sep {
    color: rgba(43,45,66,.2); font-weight: 300;
    font-size: clamp(1.2rem,2vw,1.8rem);
}
.nb-mode-intro-descriptor {
    font-family: var(--mono); font-size: .7rem;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--green);
}
.nb-mode-intro-text {
    font-size: 1rem; font-weight: 300; line-height: 1.82;
    color: rgba(43,45,66,.6); max-width: 680px; margin: 0;
}

/* ── POSTS GRID ── */
.nb-mode-posts {
    display: flex; flex-direction: column; gap: 0;
}

/* Lead post */
.nb-mode-post--lead {
    background: var(--white);
    border: 1px solid rgba(43,45,66,.06);
    overflow: hidden;
    margin-bottom: 1.5px;
}
.nb-mode-post-img {
    display: block; position: relative;
    overflow: hidden; aspect-ratio: 16/7;
}
.nb-mode-post-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .9s var(--expo);
    filter: grayscale(15%);
}
.nb-mode-post--lead:hover .nb-mode-post-img img { transform: scale(1.04); filter: grayscale(0); }
.nb-mode-post-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(43,45,66,.12));
}
.nb-mode-post-body {
    padding: clamp(1.8rem,3vw,2.8rem);
}
.nb-mode-post-meta {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: .9rem;
}
.nb-mode-post-title {
    font-size: 1rem; font-weight: 600;
    color: var(--navy); letter-spacing: -.025em;
    line-height: 1.3; margin: 0 0 .6rem;
}
.nb-mode-post-title a { color: inherit; text-decoration: none; transition: color .3s; }
.nb-mode-post-title a:hover { color: var(--green); }
.nb-mode-post-title--lead {
    font-size: clamp(1.4rem,2.5vw,2.1rem) !important;
}
.nb-mode-post-excerpt {
    font-size: .88rem; font-weight: 300;
    color: rgba(43,45,66,.45); line-height: 1.72; margin: 0 0 .4rem;
}
.nb-mode-post-excerpt--lead { font-size: .97rem !important; }

/* Standard row post */
.nb-mode-post--row {
    background: var(--white);
    border-bottom: 1px solid rgba(43,45,66,.06);
}
.nb-mode-post--row:first-of-type { border-top: 1px solid rgba(43,45,66,.06); }
.nb-mode-post-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 1.4rem; align-items: center;
    padding: clamp(1.3rem,2vw,1.8rem) clamp(1.2rem,2vw,1.8rem);
    transition: background .3s;
}
.nb-mode-post-row:has(.nb-mode-post-thumb) {
    grid-template-columns: 36px 90px 1fr auto;
}
.nb-mode-post--row:hover .nb-mode-post-row { background: rgba(43,45,66,.015); }
.nb-mode-post-text { display: flex; flex-direction: column; gap: .35rem; }
.nb-mode-post-thumb {
    display: block; width: 90px; height: 68px;
    overflow: hidden; flex-shrink: 0;
}
.nb-mode-post-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--expo); filter: grayscale(20%);
}
.nb-mode-post--row:hover .nb-mode-post-thumb img { transform: scale(1.08); filter: grayscale(0); }

/* Post arrow */
.nb-post-arrow {
    font-size: .95rem; color: rgba(43,45,66,.18);
    text-decoration: none; flex-shrink: 0;
    transition: color .3s, transform .3s var(--expo);
}
.nb-mode-post--row:hover .nb-post-arrow { color: var(--green); transform: translateX(4px); }

/* Index number */
.nb-post-idx {
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: 2px; color: rgba(43,45,66,.2);
}

/* "View all" link */
.nb-mode-more {
    padding-top: 2rem; margin-top: .5rem;
    border-top: 1px solid rgba(43,45,66,.07);
}

/* ── SHARED ATOMS ── */
.nb-muted {
    font-family: var(--mono); font-size: .58rem;
    letter-spacing: 1px; text-transform: uppercase;
    color: rgba(43,45,66,.3);
}
.nb-post-title {
    font-size: 1rem; font-weight: 600;
    color: var(--navy); letter-spacing: -.025em; line-height: 1.3; margin: 0;
}
.nb-post-title a { color: inherit; text-decoration: none; transition: color .3s; }
.nb-post-title a:hover { color: var(--green); }
.nb-post-excerpt {
    font-size: .84rem; font-weight: 300;
    color: rgba(43,45,66,.42); line-height: 1.65; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.nb-post-readmore {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--mono); font-size: .62rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--navy); text-decoration: none;
    border-bottom: 1px solid rgba(43,45,66,.12);
    padding-bottom: 2px; margin-top: .8rem;
    align-self: flex-start;
    transition: color .3s, border-color .3s, gap .3s var(--expo);
}
.nb-post-readmore:hover { color: var(--green); border-color: var(--green); gap: 1rem; }
.nb-post-readmore svg { transition: transform .3s var(--expo); }
.nb-post-readmore:hover svg { transform: translateX(4px); }

/* ── EMPTY STATE ── */
.nb-empty {
    background: var(--white); padding: clamp(50px,7vw,90px) 2rem;
    text-align: center; border: 1px solid rgba(43,45,66,.06);
}
.nb-empty-icon {
    width: 52px; height: 52px; margin: 0 auto 1.5rem;
    border: 1px solid rgba(43,45,66,.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(43,45,66,.2);
}
.nb-empty-title {
    font-size: 1.2rem; font-weight: 300; color: var(--navy);
    margin-bottom: .8rem; letter-spacing: -.02em;
}

/* ── RESPONSIVE ── */
@media(max-width: 767px) {
    .nb-mode-intro { flex-direction: column; gap: 1rem; }
    .nb-mode-intro-glyph { font-size: 3rem; }
    .nb-mode-post-row { grid-template-columns: 28px 1fr auto !important; }
    .nb-mode-post-thumb { display: none; }
}



/* ════════════════════════════
   SINGLE POST
════════════════════════════ */
.post-hero {
    padding: clamp(130px,16vw,200px) 0 clamp(50px,6vw,80px);
    background: var(--white);
    border-bottom: 1px solid rgba(43,45,66,.07);
}
.post-title {
    font-size: calc(2rem + 2.5vw); font-weight: 700;
    letter-spacing: -.04em; line-height: 1.1;
    color: var(--navy); margin-top: 1rem; margin-bottom: 1.5rem;
}
.post-standfirst {
    font-size: 1.15rem; font-weight: 300; line-height: 1.75;
    color: rgba(43,45,66,.55); border-left: 2px solid var(--green);
    padding-left: 1.4rem;
}

.post-hero-img {
    padding: 3rem 0;
    background: var(--soft);
}
.post-hero-img img { width: 100%; height: auto; display: block; }

.post-body { padding: clamp(60px,8vw,100px) 0; }
.post-content {
    font-size: 1.06rem; font-weight: 300;
    line-height: 1.92; color: rgba(43,45,66,.72);
}
.post-content h2 { font-size: 1.5rem; font-weight: 600; color: var(--navy); margin: 3rem 0 1rem; letter-spacing: -.02em; }
.post-content h3 { font-size: 1.2rem; font-weight: 600; color: var(--navy); margin: 2.5rem 0 .8rem; }
.post-content p  { margin-bottom: 1.6rem; }
.post-content a  { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.post-content blockquote {
    border-left: 2px solid var(--green); padding-left: 1.5rem;
    margin: 2.5rem 0; font-style: italic;
    color: rgba(43,45,66,.5); font-size: 1.1rem;
}
.post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: 1.6rem; }
.post-content li { margin-bottom: .5rem; }
.post-content img { width: 100%; height: auto; display: block; margin: 2.5rem 0; }
.post-content code {
    font-family: var(--mono); font-size: .88em;
    background: rgba(43,45,66,.05); padding: 2px 7px;
    border-radius: 3px; color: var(--navy);
}
.post-content pre {
    background: var(--navy); color: rgba(255,255,255,.8);
    padding: 2rem; overflow-x: auto; margin: 2rem 0;
    font-family: var(--mono); font-size: .85rem; line-height: 1.7;
}
.post-content pre code { background: none; padding: 0; color: inherit; }

/* Tags */
.post-tags {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin-top: 3rem; padding-top: 2rem;
    border-top: 1px solid rgba(43,45,66,.07);
}
.post-tag {
    font-family: var(--mono); font-size: .58rem; letter-spacing: 2px;
    text-transform: uppercase; text-decoration: none;
    border: 1px solid rgba(43,45,66,.12); color: rgba(43,45,66,.4);
    padding: 4px 12px; transition: all .3s;
}
.post-tag:hover { border-color: var(--green); color: var(--green); }

/* Post navigation */
.post-nav {
    border-top: 1px solid rgba(43,45,66,.07);
    padding: clamp(40px,6vw,70px) 0;
    background: var(--soft);
}
.post-nav-link {
    display: flex; flex-direction: column; gap: .5rem;
    text-decoration: none;
}
.post-nav-dir {
    font-family: var(--mono); font-size: .6rem; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(43,45,66,.28);
}
.post-nav-title {
    font-size: 1.1rem; font-weight: 500; color: var(--navy);
    line-height: 1.3; transition: color .3s;
}
.post-nav-link:hover .post-nav-title { color: var(--green); }
.post-nav-link--next .post-nav-dir,
.post-nav-link--next .post-nav-title { text-align: right; }

/* ════════════════════════════
   GENERIC PAGE (page.php)
════════════════════════════ */
.page-hero {
    padding: clamp(130px,16vw,200px) 0 clamp(60px,8vw,100px);
    background: var(--white);
    border-bottom: 1px solid rgba(43,45,66,.07);
}
.page-hero-title {
    font-size: calc(3rem + 3vw); font-weight: 300;
    letter-spacing: -.05em; line-height: .92;
    color: var(--navy); margin-top: 1rem; text-transform: uppercase;
}
.page-body { padding: clamp(60px,8vw,100px) 0; }
.page-body .container { max-width: 900px; }

/* ════════════════════════════════════════════════
   DOMAINS PAGE
════════════════════════════════════════════════ */

/* ── HERO ── */
.domains-hero {
    min-height: 100vh;
    background: var(--white);
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    justify-content: center;
}
.domains-hero-inner {
    padding-top: clamp(100px,12vw,140px);
    padding-bottom: clamp(40px,5vw,70px);
    position: relative; z-index: 2;
    flex: 1; display: flex; align-items: center;
}

/* Amoeba canvas */
#domainsAmoeba {
    position: absolute;
    top: 0; right: 0;
    width: 55%; height: 100%;
    pointer-events: none; z-index: 1;
}
.domains-hero-title {
    font-size: clamp(3.5rem, 9vw, 8rem);
    font-weight: 900; letter-spacing: -.05em;
    line-height: .9; text-transform: uppercase;
    color: var(--navy); margin-top: 2rem;
}


/* Domain anchor nav strip */
.dan {
    margin-top: clamp(50px,7vw,90px);
    border-top: 1px solid rgba(43,45,66,.07);
    position: relative; z-index: 2;
    /* background: var(--white); */
}
.dan-inner {
    display: flex; align-items: stretch;
}
.dan-item {
    flex: 1; display: flex; flex-direction: column;
    padding: 1.8rem clamp(1rem,3vw,3rem);
    text-decoration: none; position: relative;
    transition: background .4s var(--expo);
    gap: .3rem;
}
.dan-item::after {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: var(--grad); transform: scaleX(0);
    transform-origin: left; transition: transform .5s var(--expo);
}
.dan-item:hover { background: var(--soft); }
.dan-item:hover::after { transform: scaleX(1); }
.dan-item:hover .dan-arrow { transform: translateY(4px); color: var(--green); }
.dan-div {
    width: 1px; background: rgba(43,45,66,.07);
    align-self: stretch; flex-shrink: 0;
}
.dan-num  { font-family: var(--mono); font-size: .55rem; letter-spacing: 3px; color: var(--green); }
.dan-name { font-size: clamp(1.2rem,2.5vw,1.7rem); font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1; }
.dan-sub  { font-family: var(--mono); font-size: .6rem; letter-spacing: 1px; color: rgba(43,45,66,.3); text-transform: uppercase; }
.dan-arrow { font-size: 1rem; color: rgba(43,45,66,.15); margin-top: .4rem; transition: all .35s var(--expo); align-self: flex-start; }
@media(max-width:600px) {
    .dan-inner { flex-direction: column; }
    .dan-div { width: 100%; height: 1px; }
}

/* ── DOMAIN SECTIONS ── */
.domain-section {
    padding: clamp(90px,12vw,160px) 0;
    background: var(--white);
    border-top: 1px solid rgba(43,45,66,.06);
}
.domain-section--alt { background: var(--soft); }

.domain-hdr {
    margin-bottom: clamp(50px,7vw,90px);
    display: flex; align-items: baseline; gap: 2.5rem;
    flex-wrap: wrap;
}
.domain-hdr--right { justify-content: flex-end; text-align: right; }

.domain-idx {
    font-family: var(--mono); font-size: .65rem;
    letter-spacing: 4px; color: var(--green);
    text-transform: uppercase; flex-shrink: 0;
    padding-top: .6rem;
}
.domain-name-title {
    font-size: clamp(3rem,6vw,5.5rem);
    font-weight: 300; letter-spacing: -.04em;
    line-height: .92; text-transform: uppercase;
    color: var(--navy);
}

.domain-lead {
    font-size: clamp(1.1rem,1.8vw,1.45rem);
    font-weight: 300; line-height: 1.4;
    color: var(--navy); letter-spacing: -.02em;
}

/* Outcome box */
.domain-outcome {
    margin-top: 2.5rem;
    border-left: 2px solid var(--green);
    padding-left: 1.4rem;
}
.domain-outcome-lbl {
    font-family: var(--mono); font-size: .58rem;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--green); display: block; margin-bottom: .6rem;
}
.domain-outcome-txt {
    font-size: .97rem; font-weight: 500;
    color: var(--navy); line-height: 1.6; margin: 0;
}

/* Capability list */
.dli-list { list-style: none; padding: 0; margin: 0; }
.dli-item {
    display: flex; gap: 1.4rem; align-items: flex-start;
    padding: 1.8rem 0;
    border-bottom: 1px solid rgba(43,45,66,.06);
    transition: padding-left .4s var(--expo);
}
.dli-item:first-child { border-top: 1px solid rgba(43,45,66,.06); }
.dli-item:hover { padding-left: .5rem; }
.dli-item:hover .dli-marker span { transform: scale(1.4); background: var(--green); }
.dli-item:hover .dli-title { color: var(--green); }

.dli-marker {
    flex-shrink: 0; width: 22px;
    display: flex; align-items: center;
    padding-top: .3rem;
}
.dli-marker span {
    display: block; width: 6px; height: 6px;
    border-radius: 50%; background: var(--grad);
    transition: transform .3s var(--expo), background .3s;
}
.dli-title {
    font-size: 1rem; font-weight: 600;
    color: var(--navy); margin-bottom: .4rem;
    letter-spacing: -.02em;
    transition: color .3s;
}
.dli-desc {
    font-size: .88rem; font-weight: 300;
    line-height: 1.75; color: rgba(43,45,66,.5);
}

/* ── CONVERGENCE ── */
.domains-conv {
    background: var(--navy);
    padding: clamp(90px,12vw,160px) 0;
    position: relative; overflow: hidden;
}
.domains-conv::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(88,175,108,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88,175,108,.025) 1px, transparent 1px);
    background-size: 55px 55px;
}
.conv-glow {
    position: absolute; top: 0; left: -10%; width: 70vw; height: 100%;
    background: radial-gradient(ellipse at 30% 50%, rgba(88,175,108,.06) 0%, transparent 65%);
    pointer-events: none;
}
.conv-title {
    font-size: clamp(2.2rem,5vw,4.5rem);
    font-weight: 300; letter-spacing: -.04em;
    line-height: .95; color: rgba(255,255,255,.88);
}

.conv-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 1.5px; background: rgba(255,255,255,.04);
}
@media(max-width:767px) { .conv-grid { grid-template-columns: 1fr; } }

.conv-card {
    background: var(--navy); padding: 2.8rem;
    transition: background .4s;
}
.conv-card:hover { background: #343650; }
.conv-card--mid {
    border-left: 1.5px solid rgba(255,255,255,.04);
    border-right: 1.5px solid rgba(255,255,255,.04);
}
.conv-tags {
    display: flex; align-items: center; gap: .7rem;
    margin-bottom: 1.8rem;
}
.conv-tag {
    font-family: var(--mono); font-size: .58rem;
    letter-spacing: 2px; background: rgba(88,175,108,.1);
    color: var(--green); border: 1px solid rgba(88,175,108,.2);
    padding: 4px 10px;
}
.conv-plus { font-family: var(--mono); color: rgba(255,255,255,.15); font-size: .8rem; }
.conv-card-title {
    font-size: 1.1rem; font-weight: 600;
    color: rgba(255,255,255,.85); margin-bottom: .9rem;
    letter-spacing: -.02em;
}
.conv-card-desc {
    font-size: .88rem; font-weight: 300;
    line-height: 1.78; color: rgba(255,255,255,.3);
    margin: 0;
}

/* ── PHILOSOPHY ── */
.domains-phil {
    background: var(--soft);
    padding: clamp(90px,12vw,160px) 0;
}
.phil-title {
    font-size: clamp(2.5rem,5vw,4rem);
    font-weight: 300; letter-spacing: -.04em;
    line-height: .95; text-transform: uppercase;
    color: var(--navy); margin-top: 1rem;
}

.phil-rows { margin-bottom: clamp(60px,8vw,100px); }
.phil-row {
    display: grid; grid-template-columns: 60px 1fr;
    gap: 3rem; padding: 2.4rem 0;
    border-top: 1px solid rgba(43,45,66,.07);
    align-items: start;
    transition: padding-left .4s var(--expo);
}
.phil-row:last-child { border-bottom: 1px solid rgba(43,45,66,.07); }
.phil-row:hover { padding-left: .5rem; }
.phil-row:hover .phil-num { color: var(--green); }
.phil-num {
    font-family: var(--mono); font-size: .62rem;
    letter-spacing: 2px; color: rgba(43,45,66,.2);
    padding-top: .35rem; transition: color .3s;
}
.phil-row-title {
    font-size: 1.15rem; font-weight: 600;
    color: var(--navy); margin-bottom: .7rem;
    letter-spacing: -.02em;
}
@media(max-width:600px) { .phil-row { grid-template-columns: 1fr; gap: .5rem; } }

/* Quote */
.phil-quote {
    border-top: 1px solid rgba(43,45,66,.07);
    padding-top: clamp(50px,7vw,90px);
    text-align: center; position: relative;
}
.phil-qmark {
    font-size: 8rem; line-height: .6;
    color: rgba(43,45,66,.05); font-weight: 900;
    font-family: Georgia, serif;
    position: absolute; top: 1.5rem; left: 50%;
    transform: translateX(-50%);
    pointer-events: none; user-select: none;
}
.phil-qtext {
    font-size: clamp(1.4rem,3vw,2.2rem);
    font-weight: 300; font-style: italic;
    color: var(--navy); letter-spacing: -.02em;
    line-height: 1.3; max-width: 700px;
    margin: 0 auto; border: none; padding: 0;
    position: relative; z-index: 1;
}

/* ════════════════════════════════════════════════
   CONNECT PAGE
════════════════════════════════════════════════ */

/* ── HERO ── */
.connect-hero {
    min-height: 100vh;
    background: var(--white);
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    align-items: stretch;
}
.connect-hero-inner {
    position: relative; z-index: 3;
    flex: 1; display: flex; align-items: center;
    padding-top: clamp(90px,11vw,130px);
    padding-bottom: clamp(60px,8vw,100px);
}
.connect-hero-inner > .row { width: 100%; }

/* Ripple waves — emanate from top-right corner */
.ripple-origin {
    position: absolute;
    top: -100px; right: -100px;
    width: 200px; height: 200px;
    z-index: 1; pointer-events: none;
}
.ripple-wave {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px solid rgba(43,45,66,.12);
    opacity: 0;
    pointer-events: none;
}
.rw-1 { animation: rippleExpand 7s infinite cubic-bezier(0.25,0.46,0.45,0.94); }
.rw-2 { animation: rippleExpand 7s infinite 1.75s cubic-bezier(0.25,0.46,0.45,0.94); }
.rw-3 { animation: rippleExpand 7s infinite 3.5s cubic-bezier(0.25,0.46,0.45,0.94); }
.rw-4 {
    animation: rippleExpand 7s infinite 5.25s cubic-bezier(0.25,0.46,0.45,0.94);
    border-color: var(--green);
    border-style: dashed;
    opacity: 0;
}
@keyframes rippleExpand {
    0%   { width: 0;     height: 0;     opacity: .35; }
    100% { width: 160vw; height: 160vw; opacity: 0;   }
}

/* Hero typography */
.connect-hero-title {
    font-size: clamp(4.5rem,12vw,10rem);
    font-weight: 900; letter-spacing: -.05em;
    line-height: .88; text-transform: uppercase;
    color: var(--navy); margin-top: 2rem; margin-bottom: 2.5rem;
}
.text-outline-connect {
    color: transparent;
    -webkit-text-stroke: 2.5px var(--navy);
}
.connect-hero-sub {
    font-size: clamp(1rem,1.6vw,1.2rem);
    font-weight: 300; line-height: 1.78;
    color: rgba(43,45,66,.6);
    border-left: 2px solid var(--green);
    padding-left: 1.4rem; max-width: 580px;
}
.connect-hero-sub strong { color: var(--navy); font-weight: 600; }
.connect-accent { color: var(--green); font-weight: 600; }

/* ── BODY ── */
.connect-body {
    padding: clamp(80px,11vw,140px) 0 clamp(80px,11vw,140px);
    background: var(--soft);
    border-top: 1px solid rgba(43,45,66,.07);
}

/* ── FORM COLUMN ── */
.connect-form-col {
    padding-right: clamp(2rem,5vw,5rem);
    border-right: 1px solid rgba(43,45,66,.07);
}
@media(max-width:991px) {
    .connect-form-col {
        border-right: none;
        border-bottom: 1px solid rgba(43,45,66,.07);
        padding-right: 0; padding-bottom: 4rem;
    }
}
.connect-form-header { margin-bottom: 3rem; }
.connect-form-title {
    font-size: clamp(2.2rem,4vw,3.5rem);
    font-weight: 300; letter-spacing: -.04em;
    line-height: .95; color: var(--navy);
    margin-top: 1rem;
}

/* WPForms overrides — makes the plugin form match the design system */
.connect-form-wrap .wpforms-container { margin: 0; }
.connect-form-wrap .wpforms-field-container { display: flex; flex-direction: column; gap: 0; }

/* Each field row */
.connect-form-wrap .wpforms-field {
    padding: 1.6rem 0 !important;
    border-bottom: 1px solid rgba(43,45,66,.1) !important;
    margin: 0 !important;
    transition: border-color .4s var(--expo);
    background: transparent !important;
}
.connect-form-wrap .wpforms-field:last-of-type { border-bottom: none !important; }
.connect-form-wrap .wpforms-field:focus-within { border-bottom-color: var(--green) !important; }

/* Field labels */
.connect-form-wrap .wpforms-field-label {
    font-family: var(--mono) !important;
    font-size: .6rem !important; letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--green) !important;
    font-weight: 400 !important;
    margin-bottom: .5rem !important;
}

/* Inputs + textareas */
.connect-form-wrap input[type="text"],
.connect-form-wrap input[type="email"],
.connect-form-wrap input[type="tel"],
.connect-form-wrap textarea,
.connect-form-wrap select {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    font-family: var(--font) !important;
    font-size: 1.05rem !important;
    font-weight: 300 !important;
    color: var(--navy) !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
}
.connect-form-wrap input::placeholder,
.connect-form-wrap textarea::placeholder {
    font-family: var(--mono) !important;
    font-size: .82rem !important;
    opacity: .28 !important;
    color: var(--navy) !important;
}
.connect-form-wrap textarea { resize: vertical; min-height: 90px; }

/* Submit button */
.connect-form-wrap .wpforms-submit-container { margin-top: 2.5rem !important; padding: 0 !important; }
.connect-form-wrap .wpforms-submit,
.connect-form-wrap button[type="submit"] {
    display: inline-flex !important; align-items: center !important; gap: 12px !important;
    background: var(--grad) !important;
    color: #fff !important; border: none !important; border-radius: 0 !important;
    font-family: var(--mono) !important; font-size: .68rem !important;
    letter-spacing: 3px !important; text-transform: uppercase !important;
    padding: 16px 40px !important;
    cursor: none !important; position: relative !important; overflow: hidden !important;
    transition: transform .4s var(--expo), box-shadow .4s !important;
}
.connect-form-wrap .wpforms-submit::before,
.connect-form-wrap button[type="submit"]::before {
    content: '' !important; position: absolute !important; inset: 0 !important;
    background: rgba(255,255,255,.12) !important;
    transform: translateX(-101%) !important;
    transition: transform .4s var(--expo) !important;
}
.connect-form-wrap .wpforms-submit:hover::before,
.connect-form-wrap button[type="submit"]:hover::before { transform: translateX(0) !important; }
.connect-form-wrap .wpforms-submit:hover,
.connect-form-wrap button[type="submit"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 32px rgba(88,175,108,.22) !important;
}

/* Error + success messages */
.connect-form-wrap .wpforms-error-container,
.connect-form-wrap label.wpforms-error {
    font-family: var(--mono) !important;
    font-size: .62rem !important; letter-spacing: 1px !important;
    color: #e05252 !important; margin-top: .4rem !important;
    border: none !important; background: none !important; padding: 0 !important;
}
.connect-form-wrap .wpforms-confirmation-container-full {
    background: rgba(88,175,108,.06) !important;
    border-left: 2px solid var(--green) !important;
    border-radius: 0 !important; padding: 1.5rem 2rem !important;
    font-weight: 300 !important; color: var(--navy) !important;
}

/* ── SIDEBAR ── */
.connect-sidebar {
    padding-left: clamp(2rem,5vw,4rem);
    display: flex; flex-direction: column; gap: 2rem;
}
@media(max-width:991px) { .connect-sidebar { padding-left: 0; padding-top: 4rem; } }

/* Standards box */
.connect-standard-box {
    background: var(--white);
    padding: 2.5rem;
    border-left: 3px solid transparent;
    border-image: var(--grad) 1;
    position: relative;
}
.connect-sb-title {
    font-size: 1.15rem; font-weight: 300;
    color: var(--navy); margin-bottom: 1.2rem;
    letter-spacing: -.02em;
}
.connect-sb-label {
    font-family: var(--mono); font-size: .58rem;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(43,45,66,.3); margin-bottom: 1.4rem;
}
.connect-protocol-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 1.1rem;
}
.connect-protocol-list li {
    display: flex; gap: 1rem; align-items: flex-start;
    font-size: .9rem; font-weight: 300;
    color: rgba(43,45,66,.65); line-height: 1.65;
}
.cpl-arrow {
    color: var(--green); font-weight: 700;
    flex-shrink: 0; padding-top: .1rem;
    transition: transform .3s;
}
.connect-protocol-list li:hover .cpl-arrow { transform: translateX(4px); }

/* Contact box */
.connect-contact-box {
    overflow: hidden;
    border: 1px solid rgba(43,45,66,.08);
}
.connect-contact-header {
    background: var(--navy);
    padding: .9rem 1.5rem;
    font-family: var(--mono); font-size: .58rem;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--green);
}
.connect-contact-body {
    background: var(--white);
    padding: 0;
}
.connect-coord {
    padding: 1.4rem 1.8rem;
    border-bottom: 1px solid rgba(43,45,66,.06);
    transition: background .3s;
}
.connect-coord:hover { background: var(--soft); }
.connect-coord--last { border-bottom: none; }
.connect-coord-label {
    display: block; font-family: var(--mono);
    font-size: .55rem; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(43,45,66,.28);
    margin-bottom: .4rem;
}
.connect-coord-value {
    font-size: 1rem; font-weight: 600;
    color: var(--navy); text-decoration: none;
    transition: color .3s; display: block;
    letter-spacing: -.01em;
}
a.connect-coord-value:hover { color: var(--green); }
.connect-coord-loc { margin: 0; }
.connect-coord-tz {
    display: inline-block; margin-left: .6rem;
    font-family: var(--mono); font-size: .7rem;
    color: var(--green); font-weight: 400;
}

/* ════════════════════════════════════════════════
   FOUNDRY PAGE
════════════════════════════════════════════════ */

/* ── HERO ── */
.foundry-hero {
    min-height: 100vh;
    background: var(--white);
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}
.foundry-hero-inner {
    flex: 1; display: flex; align-items: center;
    padding-top: clamp(100px,12vw,140px);
    padding-bottom: clamp(60px,8vw,100px);
    position: relative; z-index: 3;
}
.foundry-hero-inner > .row { width: 100%; }

/* Blueprint environment — right side */
.foundry-blueprint-env {
    position: absolute;
    top: 0; right: 0;
    width: 58%; height: 100%;
    z-index: 1; overflow: hidden;
    pointer-events: none;
}

/* Perspective grid */
.foundry-grid {
    position: absolute;
    width: 200%; height: 200%;
    top: -50%; left: -50%;
    background-image:
        linear-gradient(rgba(43,45,66,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43,45,66,.07) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(900px) rotateX(58deg);
    animation: foundryGridMove 22s linear infinite;
}
@keyframes foundryGridMove {
    0%   { transform: perspective(900px) rotateX(58deg) translateY(0); }
    100% { transform: perspective(900px) rotateX(58deg) translateY(60px); }
}

/* Rotating geometry */
.foundry-geo {
    position: absolute;
    top: 50%; right: 14%;
    transform: translateY(-50%);
    width: clamp(280px,32vw,440px);
    height: clamp(280px,32vw,440px);
    display: flex; align-items: center; justify-content: center;
}
.foundry-geo-outer {
    position: absolute; inset: 0;
    border: 1.5px solid rgba(43,45,66,.1);
    animation: foundryRotate 22s linear infinite;
}
.foundry-geo-inner {
    position: absolute;
    width: 62%; height: 62%;
    border: 1.5px dashed var(--green);
    opacity: .5;
    animation: foundryRotate 16s linear infinite reverse;
}
.geo-dot {
    position: absolute;
    width: 7px; height: 7px;
    background: var(--green); border-radius: 50%;
    opacity: .7;
}
.geo-dot--tl { top: -3.5px; left: -3.5px; }
.geo-dot--tr { top: -3.5px; right: -3.5px; }
.geo-dot--bl { bottom: -3.5px; left: -3.5px; }
.geo-dot--br { bottom: -3.5px; right: -3.5px; }

@keyframes foundryRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Hero title */
.foundry-hero-title {
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 300; letter-spacing: -.05em;
    line-height: .9; text-transform: uppercase;
    color: var(--navy); margin-top: 2rem; margin-bottom: 2.5rem;
}
.text-outline-foundry {
    color: transparent;
    -webkit-text-stroke: 2px var(--navy);
}

/* Intro box with left green border */
.foundry-intro-box {
    border-left: 3px solid var(--green);
    padding-left: 1.6rem;
    max-width: 500px;
}
.foundry-intro-text {
    font-size: clamp(1rem,1.5vw,1.2rem);
    font-weight: 400; line-height: 1.65;
    color: var(--navy); margin-bottom: 1.4rem;
}

/* Progress bar */
.foundry-status { display: flex; flex-direction: column; gap: .5rem; }
.foundry-status-label {
    font-family: var(--mono); font-size: .58rem;
    letter-spacing: 3px; color: var(--green);
    text-transform: uppercase;
}
.foundry-progress {
    width: 120px; height: 2px;
    background: rgba(88,175,108,.15);
    position: relative; overflow: hidden;
}
.foundry-progress-fill {
    position: absolute; left: -100%; top: 0;
    width: 100%; height: 100%;
    background: var(--grad);
    animation: foundryLoad 2.2s ease-in-out infinite;
}
@keyframes foundryLoad {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* ── PROTOCOL ── */
.foundry-protocol {
    background: var(--soft);
    padding: clamp(90px,12vw,160px) 0;
    border-top: 1px solid rgba(43,45,66,.06);
}
.foundry-section-title {
    font-size: clamp(2.5rem,5.5vw,5rem);
    font-weight: 300; letter-spacing: -.04em;
    line-height: .9; text-transform: uppercase;
    color: var(--navy); margin-top: 1rem;
}
.foundry-protocol-quote {
    font-family: var(--mono); font-size: .78rem;
    letter-spacing: 1px; color: var(--green);
    margin-top: 1.5rem; margin-bottom: 0;
}

/* Three-phase cards with liquid fill on hover */
.foundry-phases {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border: 1px solid rgba(43,45,66,.08);
}
@media(max-width:767px) { .foundry-phases { grid-template-columns: 1fr; } }

.foundry-phase {
    position: relative; overflow: hidden;
    padding: clamp(2.5rem,4vw,4rem) clamp(1.8rem,3vw,3rem);
    border-right: 1px solid rgba(43,45,66,.08);
    transition: color .5s;
}
.foundry-phase:last-child { border-right: none; }

/* Liquid fill — slides up from bottom on hover */
.fp-liquid {
    position: absolute;
    bottom: -100%; left: 0;
    width: 100%; height: 100%;
    background: var(--navy);
    transition: bottom .65s cubic-bezier(.85,0,.15,1);
    z-index: 1;
}
.foundry-phase:hover .fp-liquid { bottom: 0; }

.fp-content { position: relative; z-index: 2; }
.fp-label {
    font-family: var(--mono); font-size: .62rem;
    letter-spacing: 3px; color: var(--green);
    text-transform: uppercase;
    transition: color .3s;
}
.fp-title {
    font-size: clamp(1.5rem,2.5vw,2rem);
    font-weight: 300; color: var(--navy);
    letter-spacing: -.03em; line-height: 1.1;
    margin-top: 1.4rem; margin-bottom: 1.2rem;
    transition: color .3s;
}
.fp-desc {
    font-size: .88rem; font-weight: 300;
    line-height: 1.78; color: rgba(43,45,66,.5);
    transition: color .3s; margin: 0;
}
/* On hover — text goes white */
.foundry-phase:hover .fp-label { color: var(--green); }
.foundry-phase:hover .fp-title { color: rgba(255,255,255,.9); }
.foundry-phase:hover .fp-desc  { color: rgba(255,255,255,.4); }

/* Arrow connector between phases */
.fp-arrow {
    position: absolute; top: 50%; right: -10px;
    width: 20px; height: 1px;
    background: var(--green); z-index: 3; opacity: .3;
    transition: opacity .3s;
}
.foundry-phase:hover .fp-arrow { opacity: 0; }

/* ── DEPLOYMENTS ── */
.foundry-deployments {
    background: var(--white);
    padding: clamp(90px,12vw,160px) 0;
    border-top: 1px solid rgba(43,45,66,.06);
}
.foundry-deployment {
    padding: clamp(50px,7vw,90px) 0;
    border-bottom: 1px solid rgba(43,45,66,.06);
}
.foundry-deployment:last-child { border-bottom: none; }

.fd-meta {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.4rem;
}
.fd-badge {
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: 2px; text-transform: uppercase;
    background: var(--navy); color: var(--green);
    padding: 4px 12px;
}
.fd-client {
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(43,45,66,.28);
}
.fd-title {
    font-size: clamp(1.4rem,2.5vw,2.2rem);
    font-weight: 300; letter-spacing: -.03em;
    line-height: 1.15; color: var(--navy);
}

/* Visual placeholder cards */
.fd-visual {
    aspect-ratio: 16/10;
    position: relative;
    border: 1px solid rgba(43,45,66,.07);
    overflow: hidden;
}
.fd-visual--grid {
    background-image:
        radial-gradient(rgba(88,175,108,.12) 1px, transparent 1px);
    background-size: 22px 22px;
    background-color: var(--soft);
}
.fd-visual--dots {
    background-image:
        linear-gradient(rgba(88,175,108,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88,175,108,.06) 1px, transparent 1px);
    background-size: 34px 34px;
    background-color: var(--soft);
}
.fd-visual::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(88,175,108,.06));
}

/* ── FOUNDER — removed, replaced by letter section ── */

/* ── FOUNDRY DEPLOYMENTS — updated styles ── */
.fd-outcomes {
    display: flex; gap: 2rem; flex-wrap: wrap;
    margin-top: 1.8rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(43,45,66,.07);
}
.fd-outcome {}
.fd-out-num {
    font-size: 1.8rem; font-weight: 800; line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.fd-out-lbl {
    font-family: var(--mono); font-size: .58rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(43,45,66,.32); margin-top: 4px;
}

/* Photo visual card */
.fd-visual--photo {
    aspect-ratio: 16/10;
    overflow: hidden; position: relative;
}
.fd-visual--photo a { display: block; width: 100%; height: 100%; }
.fd-visual--photo img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(20%) brightness(.95);
    transition: transform .8s var(--expo), filter .5s;
    display: block;
}
.fd-visual--photo:hover img { transform: scale(1.04); filter: grayscale(0) brightness(1); }
.fd-visual--photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 55%, rgba(88,175,108,.08));
    pointer-events: none;
}

/* Fallback visual label */
.fd-visual { position: relative; }
.fd-visual-label {
    position: absolute; bottom: 1.2rem; right: 1.4rem;
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(43,45,66,.18);
}

/* Archive link row */
.fd-archive-link {
    padding-top: clamp(40px,6vw,70px);
    border-top: 1px solid rgba(43,45,66,.07);
    margin-top: clamp(40px,6vw,70px);
}

/* ── FOUNDER LETTER ── */
.foundry-letter {
    background: var(--navy);
    padding: clamp(90px,12vw,160px) 0;
    position: relative; overflow: hidden;
}
.foundry-letter::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(88,175,108,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88,175,108,.025) 1px, transparent 1px);
    background-size: 55px 55px;
}

/* Ghost name in background */
.letter-ghost {
    position: absolute; bottom: -5%; right: -2%;
    font-size: 22vw; font-weight: 900;
    letter-spacing: -.05em; line-height: 1;
    color: rgba(255,255,255,.018);
    text-transform: uppercase;
    pointer-events: none; user-select: none;
}

/* Title */
.letter-title {
    font-size: clamp(2.5rem,5vw,4.5rem);
    font-weight: 300; letter-spacing: -.04em;
    line-height: .95; color: rgba(255,255,255,.88);
    margin-top: 1rem;
}

/* Byline */
.letter-byline {
    border-left: 2px solid rgba(88,175,108,.3);
    padding-left: 1.4rem;
}
.letter-byline-name {
    font-size: 1.1rem; font-weight: 600;
    color: rgba(255,255,255,.85); letter-spacing: -.02em;
    margin-bottom: .3rem;
}
.letter-byline-role {
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,.25); line-height: 1.7;
}

/* Letter body container */
.letter-body {
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: clamp(40px,6vw,70px);
}

/* Opening pull quote */
.letter-opening {
    position: relative;
    margin-bottom: clamp(40px,6vw,70px);
    padding-bottom: clamp(40px,6vw,70px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.letter-open-mark {
    font-size: 8rem; line-height: .5;
    color: rgba(88,175,108,.15);
    font-family: Georgia, serif; font-weight: 900;
    position: absolute; top: -.5rem; left: -1rem;
    pointer-events: none; user-select: none;
}
.letter-pull {
    font-size: clamp(1.4rem,2.8vw,2.2rem);
    font-weight: 300; font-style: italic;
    color: rgba(255,255,255,.8);
    line-height: 1.45; letter-spacing: -.02em;
    max-width: 820px;
    padding-left: clamp(1rem,3vw,3rem);
    margin: 0;
}

/* Body paragraphs */
.letter-paragraphs {
    columns: 2; column-gap: clamp(2rem,5vw,5rem);
    margin-bottom: clamp(40px,6vw,70px);
}
@media(max-width:767px) { .letter-paragraphs { columns: 1; } }

.letter-paragraphs p {
    font-size: clamp(.9rem,1.2vw,1.05rem);
    font-weight: 300; line-height: 1.88;
    color: rgba(255,255,255,.42);
    margin-bottom: 1.6rem;
    break-inside: avoid;
}
.letter-paragraphs p em {
    color: rgba(255,255,255,.7);
    font-style: italic;
}

/* Signature */
.letter-signature {
    display: flex; flex-direction: column; gap: .4rem;
}
.letter-sig-line {
    width: 60px; height: 1px;
    background: var(--green); margin-bottom: .8rem;
}
.letter-sig-name {
    font-size: 1.1rem; font-weight: 600;
    color: rgba(255,255,255,.8);
    letter-spacing: -.02em;
}
.letter-sig-role {
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,.22); line-height: 1.7;
}


/* ════════════════════════════════════════════════
   CASE STUDIES ARCHIVE — archive-case_study.php
════════════════════════════════════════════════ */

/* ── HERO ── */
.csa-hero {
    background: var(--white);
    padding-top: clamp(130px,15vw,180px);
    padding-bottom: 0;
    position: relative; overflow: hidden;
    border-bottom: 1px solid rgba(43,45,66,.06);
}
.csa-hero-inner { position: relative; z-index: 2; }

.csa-hero-bg-word {
    position: absolute; bottom: -5%; right: -1%;
    font-size: 20vw; font-weight: 900;
    letter-spacing: -.06em; line-height: 1;
    color: rgba(43,45,66,.025);
    text-transform: uppercase;
    pointer-events: none; user-select: none; z-index: 0;
}
.csa-hero-title {
    font-size: clamp(4rem,10vw,9rem);
    font-weight: 900; letter-spacing: -.05em;
    line-height: .88; text-transform: uppercase;
    color: var(--navy); margin-top: 1.5rem;
}
.csa-count {
    display: flex; align-items: baseline; gap: .7rem;
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(43,45,66,.07);
}
.csa-count-num {
    font-size: 2.2rem; font-weight: 900; line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: -.04em;
}
.csa-count-lbl {
    font-family: var(--mono); font-size: .56rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(43,45,66,.28); line-height: 1.5;
}

/* Domain filter tabs — same pattern as notebook */
.csa-tabs {
    display: flex; align-items: center; gap: 0;
    border-top: 1px solid rgba(43,45,66,.06);
    overflow-x: auto; scrollbar-width: none;
    margin-top: clamp(40px,5vw,60px);
    position: sticky; top: 70px; z-index: 50;
    background: var(--white);
}
.csa-tabs::-webkit-scrollbar { display: none; }
.csa-tab {
    flex-shrink: 0;
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(43,45,66,.32); text-decoration: none;
    padding: 1rem 1.6rem;
    border-right: 1px solid rgba(43,45,66,.06);
    position: relative; transition: color .3s;
}
.csa-tab::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: var(--grad);
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--expo);
}
.csa-tab:hover, .csa-tab--active { color: var(--navy); }
.csa-tab--active::after, .csa-tab:hover::after { transform: scaleX(1); }

/* ── GRID SECTION ── */
.csa-grid-section {
    background: var(--navy);
    padding: clamp(60px,9vw,120px) 0;
}

/* Empty image placeholder on dark bg */
.cs-img--empty {
    display: block;
    background: rgba(255,255,255,.03);
    position: relative; overflow: hidden;
}
.cs-img-empty-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(88,175,108,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88,175,108,.05) 1px, transparent 1px);
    background-size: 36px 36px;
}

/* Outcome items — slightly different from fd-outcomes */
.cs-outcome-item {
    display: flex; flex-direction: column; gap: .2rem;
}

/* cs-headline links */
.cs-headline a {
    color: inherit; text-decoration: none;
    transition: color .3s;
}
.cs-card:hover .cs-headline a { color: var(--green); }

/* ── PAGINATION ── */
.csa-pagination {
    display: flex; align-items: center;
    justify-content: center; gap: 3rem;
    margin-top: clamp(40px,6vw,70px);
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.csa-pag-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--mono); font-size: .62rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,.4); text-decoration: none;
    transition: color .3s, gap .3s var(--expo);
}
.csa-pag-btn:hover { color: var(--green); gap: .9rem; }
.csa-pag-info {
    font-family: var(--mono); font-size: .65rem;
    letter-spacing: 1px; color: rgba(255,255,255,.2);
}
.csa-pag-info strong {
    font-size: 1.2rem; font-weight: 900;
    color: rgba(255,255,255,.7); letter-spacing: -.02em;
}

/* ── EMPTY STATE ── */
.csa-empty {
    padding: clamp(60px,8vw,100px) 0;
    text-align: center;
}
.csa-empty-title {
    font-size: 1.3rem; font-weight: 300;
    color: rgba(255,255,255,.7); margin-bottom: 1rem;
    letter-spacing: -.02em;
}
.csa-empty .body-copy { color: rgba(255,255,255,.3); }