/* ==========================================================================
   VASTORE — EXPERIENCE LAYER
   New sections and the interactive/animated flourishes that carry them.
   Depends on /theme.css for every colour, size and easing.
   ========================================================================== */

/* ==========================================================================
   1. SCROLL PROGRESS
   ========================================================================== */

.scroll-rail{
 position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
 pointer-events:none;background:color-mix(in srgb,var(--ink-900) 22%,transparent);
 opacity:0;transition:opacity var(--t-base) var(--ease);
}
.scroll-rail.is-live{opacity:1}
.scroll-rail i{
 display:block;height:100%;transform-origin:left;
 transform:scaleX(var(--progress,0));
 background:var(--grad-ember-gold);
 box-shadow:0 0 18px color-mix(in srgb,var(--ember-500) 70%,transparent);
}

/* ==========================================================================
   2. POINTER FOLLOWER
   A soft ring that trails the cursor and swells over interactive targets.
   Hidden on touch and for reduced-motion users.
   ========================================================================== */

.follower{
 position:fixed;top:0;left:0;z-index:115;pointer-events:none;
 width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
 border:1.5px solid color-mix(in srgb,var(--ember-500) 72%,transparent);
 translate:var(--fx,-100px) var(--fy,-100px);
 scale:var(--fs,1);
 opacity:0;
 transition:scale .3s var(--ease-spring),opacity .3s var(--ease),
            background-color .3s var(--ease),border-color .3s var(--ease);
 /* A dark halo under the ember ring keeps it legible on both the paper and
    the ink sections without a page-wide blend layer. */
 box-shadow:0 0 0 1px color-mix(in srgb,var(--ink-950) 28%,transparent);
}
.follower.is-live{opacity:.9}
.follower.is-hot{
 scale:2.1;
 background:color-mix(in srgb,var(--ember-500) 20%,transparent);
 border-color:var(--ember-400);
}
.follower.is-media{scale:3.1;background:color-mix(in srgb,var(--ember-500) 88%,transparent);border-color:transparent}
.follower i{
 position:absolute;inset:0;display:grid;place-items:center;
 font:700 8px/1 var(--display);letter-spacing:.14em;color:var(--ink-900);
 opacity:0;transition:opacity .2s var(--ease);
}
.follower.is-media i{opacity:1}

@media (hover:none),(pointer:coarse){.follower{display:none}}
@media (prefers-reduced-motion:reduce){.follower,.scroll-rail{display:none}}

/* ==========================================================================
   3. MAGNETIC + SPOTLIGHT BEHAVIOURS
   ========================================================================== */

[data-magnet]{
 transition:translate var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out),
            box-shadow var(--t-base) var(--ease-out);
 translate:var(--magnet-x,0) var(--magnet-y,0);
}

[data-spotlight]{position:relative;isolation:isolate}
[data-spotlight]::before{
 content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
 background:radial-gradient(420px circle at var(--sx,50%) var(--sy,0%),
   color-mix(in srgb,var(--ember-500) 20%,transparent),transparent 62%);
 opacity:0;transition:opacity var(--t-base) var(--ease);
}
[data-spotlight]:hover::before,[data-spotlight]:focus-within::before{opacity:1}

[data-tilt]{
 transform:perspective(1100px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(0);
 transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
 transform-style:preserve-3d;
}

/* ==========================================================================
   4. STAT BAND — "the portfolio in numbers"
   ========================================================================== */

.figures{
 position:relative;isolation:isolate;overflow:hidden;
 background:var(--ink-900);color:var(--on-dark);
 padding-block:clamp(52px,6vw,86px);
}
.figures>.container{position:relative;z-index:2}
.figures-head{
 display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
 gap:var(--s-4) var(--s-7);margin-bottom:var(--s-7);
 padding-bottom:var(--s-5);border-bottom:1px solid var(--on-dark-line);
}
.figures-head h2{font-size:var(--fs-h3);font-weight:600}
.figures-head p{font-size:var(--fs-small);color:var(--on-dark-faint);max-width:46ch}

.figure-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.figure{
 position:relative;isolation:isolate;
 padding:var(--s-6) var(--s-5);border-radius:var(--r-lg);
 background:linear-gradient(162deg,var(--glass),transparent 70%);
 border:1px solid var(--on-dark-line);
 overflow:hidden;
 transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out);
}
.figure:hover{border-color:color-mix(in srgb,var(--ember-500) 55%,transparent);transform:translateY(-4px)}
.figure::after{
 content:'';position:absolute;left:var(--s-5);right:var(--s-5);bottom:0;height:2px;
 background:var(--grad-ember);transform:scaleX(0);transform-origin:left;
 transition:transform var(--t-slow) var(--ease-out);
}
.figure:hover::after{transform:scaleX(1)}
.figure b{
 display:block;font:700 clamp(38px,4.4vw,62px)/1 var(--display);
 letter-spacing:-.05em;
 background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.figure b sup{font-size:.42em;vertical-align:super;letter-spacing:0;margin-left:2px}
.figure strong{display:block;margin-top:var(--s-4);font-size:var(--fs-small);font-weight:650}
.figure small{display:block;margin-top:var(--s-2);font-size:var(--fs-micro);line-height:1.6;color:var(--on-dark-faint)}

/* ==========================================================================
   5. MARQUEE RIBBON — industries served
   ========================================================================== */

.ribbon-marquee{
 position:relative;overflow:hidden;
 background:var(--ember-500);color:var(--ink-900);
 padding-block:clamp(16px,1.8vw,24px);
 border-block:1px solid color-mix(in srgb,var(--ink-900) 14%,transparent);
}
.ribbon-marquee::before,.ribbon-marquee::after{
 content:'';position:absolute;top:0;bottom:0;width:clamp(40px,7vw,120px);z-index:2;pointer-events:none;
}
.ribbon-marquee::before{left:0;background:linear-gradient(to right,var(--ember-500),transparent)}
.ribbon-marquee::after{right:0;background:linear-gradient(to left,var(--ember-500),transparent)}
.marquee-track{
 display:flex;width:max-content;gap:0;
 will-change:transform;
 animation:slide-left 42s linear infinite;
}
.ribbon-marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track>div{display:flex;align-items:center;gap:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px)}
.marquee-track span{
 display:flex;align-items:center;gap:clamp(24px,3vw,48px);
 font:650 clamp(15px,1.5vw,22px)/1 var(--display);letter-spacing:-.025em;white-space:nowrap;
}
.marquee-track span::after{
 content:'✳';font-size:.7em;font-weight:400;
 opacity:.5;
}

/* A second, slower ribbon running the other way, used on dark ground */
.ribbon-marquee.inverse{background:var(--ink-850);color:var(--on-dark);border-color:var(--on-dark-line)}
.ribbon-marquee.inverse::before{background:linear-gradient(to right,var(--ink-850),transparent)}
.ribbon-marquee.inverse::after{background:linear-gradient(to left,var(--ink-850),transparent)}
.ribbon-marquee.inverse .marquee-track{animation-duration:56s;animation-direction:reverse}
.ribbon-marquee.inverse span{color:var(--on-dark-muted)}
.ribbon-marquee.inverse span::after{color:var(--ember-500);opacity:1}

@keyframes slide-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ==========================================================================
   6. DIFFERENTIATORS — "why teams choose Vastore"
   ========================================================================== */

.pillars{background:var(--surface);position:relative}
.pillar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.pillar{
 position:relative;isolation:isolate;overflow:hidden;
 display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);
 padding:var(--s-6);border-radius:var(--r-lg);
 background:var(--n-25);border:1px solid var(--line);
 transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease-out),
            transform var(--t-base) var(--ease-out);
}
.pillar:hover{border-color:var(--ember-300);box-shadow:var(--sh-md);transform:translateY(-4px)}
.pillar-icon{
 flex:none;width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;
 background:var(--brand-tint);color:var(--brand-deep);
 transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),
            transform var(--t-base) var(--ease-spring);
}
.pillar-icon svg{width:23px;height:23px}
.pillar:hover .pillar-icon{background:var(--grad-ember);color:var(--ink-900);transform:rotate(-8deg) scale(1.06)}
.pillar h3{font-size:var(--fs-h4)}
.pillar p{margin-top:var(--s-3);font-size:var(--fs-small);line-height:1.72;color:var(--ink-muted)}
.pillar dl{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:var(--s-5) 0 0;padding-top:var(--s-4);border-top:1px solid var(--line)}
.pillar dl>div{display:grid;gap:2px}
.pillar dt{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.pillar dd{margin:0;font:650 var(--fs-small)/1.3 var(--display);letter-spacing:-.02em}

/* ==========================================================================
   7. PROCESS TIMELINE — pinned rail with a line that draws as you scroll
   ========================================================================== */

.journey{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-900);color:var(--on-dark)}
.journey>.container{position:relative;z-index:2}
.journey-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px);align-items:start}

.journey-aside{position:sticky;top:clamp(96px,11vw,140px)}
.journey-aside h2 em{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.journey-aside>p{margin-top:var(--s-5);max-width:40ch;color:var(--on-dark-muted);font-size:var(--fs-body)}
.journey-meter{
 margin-top:var(--s-7);padding-top:var(--s-5);
 border-top:1px solid var(--on-dark-line);
 display:flex;align-items:center;gap:var(--s-4);
 font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-faint);
}
.journey-meter b{
 font:700 var(--fs-h4)/1 var(--display);letter-spacing:-.03em;color:var(--ember-400);
 min-width:2.4ch;
}
.journey-meter div{flex:1;height:3px;border-radius:2px;background:var(--on-dark-line-strong);overflow:hidden}
.journey-meter div i{
 display:block;height:100%;width:100%;transform-origin:left;
 transform:scaleX(var(--phase-progress,0));
 background:var(--grad-ember);
 transition:transform var(--t-slow) var(--ease-out);
}

.journey-rail{position:relative;display:grid;gap:var(--s-3);padding-left:clamp(28px,3.4vw,52px)}
.journey-rail::before{
 content:'';position:absolute;left:clamp(13px,1.6vw,25px);top:var(--s-6);bottom:var(--s-6);width:2px;
 background:var(--on-dark-line-strong);
}
.journey-rail::after{
 content:'';position:absolute;left:clamp(13px,1.6vw,25px);top:var(--s-6);width:2px;
 height:calc((100% - var(--s-10)) * var(--phase-progress,0));
 background:var(--grad-ember);
 box-shadow:0 0 16px color-mix(in srgb,var(--ember-500) 60%,transparent);
 transition:height var(--t-slow) var(--ease-out);
}

.phase{
 position:relative;
 padding:var(--s-6);border-radius:var(--r-lg);
 background:linear-gradient(150deg,var(--glass),transparent 72%);
 border:1px solid var(--on-dark-line);
 transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease),
            transform var(--t-base) var(--ease-out);
}
.phase::before{
 content:'';position:absolute;left:calc(-1 * clamp(28px,3.4vw,52px) + clamp(8px,1.1vw,20px));
 top:var(--s-6);width:12px;height:12px;border-radius:50%;
 background:var(--ink-900);border:2px solid var(--on-dark-line-strong);
 transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
            box-shadow var(--t-base) var(--ease),scale var(--t-base) var(--ease-spring);
}
.phase.is-active{border-color:color-mix(in srgb,var(--ember-500) 34%,transparent)}
.phase.is-active::before{
 background:var(--ember-500);border-color:var(--ember-500);
 box-shadow:0 0 0 5px color-mix(in srgb,var(--ember-500) 18%,transparent);
 scale:1.15;
}
.phase:hover{transform:translateX(5px)}
.phase-top{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-4)}
.phase-top b{
 font:700 var(--fs-label)/1 var(--mono);letter-spacing:.1em;
 color:var(--ember-400);
}
.phase-top span{
 margin-left:auto;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
 color:var(--on-dark-faint);border:1px solid var(--on-dark-line-strong);
 padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap;
}
.phase h3{font-size:var(--fs-h4)}
.phase>p{margin-top:var(--s-3);font-size:var(--fs-small);line-height:1.75;color:var(--on-dark-muted)}
.phase ul{
 display:flex;flex-wrap:wrap;gap:var(--s-2);
 margin:var(--s-5) 0 0;padding:var(--s-4) 0 0;list-style:none;
 border-top:1px solid var(--on-dark-line);
}
.phase li{
 display:flex;align-items:center;gap:7px;
 font-size:var(--fs-micro);color:var(--on-dark-muted);
 background:var(--glass);border-radius:var(--r-pill);padding:6px 11px;
}
.phase li::before{
 content:'';width:5px;height:5px;border-radius:50%;flex:none;
 background:var(--ember-500);
}

/* ==========================================================================
   8. ENGAGEMENT MODELS — three ways to start
   ========================================================================== */

.engage{background:var(--surface-sunken)}
.engage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.engage-card{
 position:relative;isolation:isolate;display:flex;flex-direction:column;
 padding:var(--s-7) var(--s-6) var(--s-6);border-radius:var(--r-xl);
 background:var(--surface);border:1px solid var(--line);
 transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),
            border-color var(--t-base) var(--ease);
}
.engage-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--ember-300)}
.engage-card.featured{
 background:var(--grad-ink);color:var(--on-dark);border-color:transparent;
 box-shadow:var(--sh-lg);
}
.engage-card.featured::after{
 content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
 background:linear-gradient(150deg,color-mix(in srgb,var(--ember-500) 70%,transparent),transparent 55%);
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask-composite:exclude;
}
.engage-flag{
 position:absolute;top:var(--s-5);right:var(--s-5);
 font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
 color:var(--ink-900);background:var(--ember-500);
 padding:5px 11px;border-radius:var(--r-pill);
}
.engage-card>small{
 font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
 color:var(--brand-deep);font-weight:700;
}
.engage-card.featured>small{color:var(--ember-400)}
.engage-card h3{margin-top:var(--s-4);font-size:var(--fs-h3)}
.engage-card>p{margin-top:var(--s-3);font-size:var(--fs-small);line-height:1.72;color:var(--ink-muted)}
.engage-card.featured>p{color:var(--on-dark-muted)}
.engage-card ul{list-style:none;margin:var(--s-6) 0 var(--s-6);padding:0;display:grid;gap:var(--s-3)}
.engage-card li{display:flex;gap:var(--s-3);font-size:var(--fs-small);line-height:1.6}
.engage-card li svg{flex:none;width:17px;height:17px;margin-top:3px;color:var(--brand-deep)}
.engage-card.featured li svg{color:var(--ember-400)}
.engage-card>button,.engage-card>a{
 margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
 padding:15px 20px;border-radius:var(--r-pill);
 font-size:var(--fs-small);font-weight:700;
 border:1px solid var(--line-strong);
 transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),
            border-color var(--t-base) var(--ease);
}
.engage-card>button svg,.engage-card>a svg{width:17px;height:17px;transition:transform var(--t-base) var(--ease-spring)}
.engage-card>button:hover,.engage-card>a:hover{background:var(--ink-800);color:var(--on-dark);border-color:var(--ink-800)}
.engage-card>button:hover svg,.engage-card>a:hover svg{transform:translate(3px,-3px)}
.engage-card.featured>button{background:var(--ember-500);color:var(--ink-900);border-color:transparent}
.engage-card.featured>button:hover{background:var(--ember-400);color:var(--ink-900);border-color:transparent}

/* ==========================================================================
   9. TECHNOLOGY / CRAFT STRIP
   ========================================================================== */

.craft{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-850);color:var(--on-dark)}
.craft>.container{position:relative;z-index:2}
.craft-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.craft-copy h2 em{font-style:normal;color:var(--ember-400)}
.craft-copy>p{margin-top:var(--s-5);color:var(--on-dark-muted);max-width:44ch}
.craft-copy .text-link{margin-top:var(--s-6)}

.craft-stack{display:grid;gap:var(--s-3)}
.stack-row{
 display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-4);
 padding:var(--s-5);border-radius:var(--r-md);
 background:linear-gradient(120deg,var(--glass),transparent);
 border:1px solid var(--on-dark-line);
 transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out),
            background var(--t-base) var(--ease);
}
.stack-row:hover{border-color:color-mix(in srgb,var(--aqua-400) 45%,transparent);transform:translateX(6px)}
.stack-row>svg{width:20px;height:20px;color:var(--aqua-400)}
.stack-row strong{display:block;font:650 var(--fs-small)/1.4 var(--display);letter-spacing:-.02em}
.stack-row small{display:block;margin-top:3px;font-size:var(--fs-micro);color:var(--on-dark-faint);line-height:1.6}
.stack-row>span{
 font:600 var(--fs-micro)/1 var(--mono);letter-spacing:.06em;
 color:var(--on-dark-faint);white-space:nowrap;
}

/* ==========================================================================
   10. FAQ ACCORDION
   ========================================================================== */

.faq{background:var(--surface)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,5vw,90px);align-items:start}
.faq-aside{position:sticky;top:clamp(96px,11vw,140px)}
.faq-aside>p{margin-top:var(--s-5);color:var(--ink-muted);max-width:36ch}
.faq-aside .button{margin-top:var(--s-6)}

.faq-list{display:grid;gap:var(--s-2);border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item>button{
 width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-5);
 padding:var(--s-5) 0;text-align:left;
 font:650 var(--fs-h4)/1.4 var(--display);letter-spacing:-.025em;
 transition:color var(--t-base) var(--ease);
}
.faq-item>button:hover{color:var(--brand-deep)}
.faq-mark{
 flex:none;position:relative;width:32px;height:32px;margin-top:2px;border-radius:50%;
 border:1px solid var(--line-strong);
 transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
            rotate var(--t-base) var(--ease-spring);
}
.faq-mark::before,.faq-mark::after{
 content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;
 background:currentColor;border-radius:2px;
}
.faq-mark::before{width:13px;height:1.5px}
.faq-mark::after{width:1.5px;height:13px;transition:scale var(--t-base) var(--ease-spring)}
.faq-item[data-open=true] .faq-mark{background:var(--ember-500);border-color:var(--ember-500);color:var(--ink-900);rotate:180deg}
.faq-item[data-open=true] .faq-mark::after{scale:0}
.faq-body{
 display:grid;grid-template-rows:0fr;
 transition:grid-template-rows var(--t-base) var(--ease-out);
}
.faq-item[data-open=true] .faq-body{grid-template-rows:1fr}
.faq-body>div{overflow:hidden}
.faq-body p{
 padding-bottom:var(--s-6);max-width:62ch;
 font-size:var(--fs-small);line-height:1.8;color:var(--ink-muted);
 opacity:0;translate:0 -6px;
 transition:opacity var(--t-base) var(--ease) 60ms,translate var(--t-base) var(--ease-out) 60ms;
}
.faq-item[data-open=true] .faq-body p{opacity:1;translate:0 0}

/* ==========================================================================
   11. BACK TO TOP — progress ring
   ========================================================================== */

.to-top{
 position:fixed;left:var(--s-5);bottom:var(--s-5);z-index:34;
 width:52px;height:52px;border-radius:50%;
 display:grid;place-items:center;
 background:color-mix(in srgb,var(--ink-900) 92%,transparent);
 color:var(--on-dark);border:1px solid var(--on-dark-line-strong);
 backdrop-filter:blur(10px);
 opacity:0;translate:0 14px;pointer-events:none;
 transition:opacity var(--t-base) var(--ease),translate var(--t-base) var(--ease-out),
            background var(--t-base) var(--ease);
}
.to-top.is-live{opacity:1;translate:0 0;pointer-events:auto}
.to-top:hover{background:var(--ember-500);color:var(--ink-900);border-color:transparent}
.to-top svg{width:18px;height:18px;position:relative;z-index:2}
.to-top circle{
 fill:none;stroke-width:2;
 transform:rotate(-90deg);transform-origin:center;
}
.to-top .ring{position:absolute;inset:-1px;width:auto;height:auto}
.to-top .ring circle:first-child{stroke:var(--on-dark-line)}
.to-top .ring circle:last-child{
 stroke:var(--ember-500);
 stroke-dasharray:var(--circ,163);
 stroke-dashoffset:calc(var(--circ,163) - var(--circ,163) * var(--progress,0));
 transition:stroke-dashoffset .1s linear;
}
@media (max-width:700px){.to-top{left:var(--s-4);bottom:var(--s-4);width:46px;height:46px}}

/* ==========================================================================
   12. CTA SIGN-OFF — oversized statement with live orb
   ========================================================================== */

.signoff{
 position:relative;isolation:isolate;overflow:hidden;
 background:var(--ember-500);color:var(--ink-900);
 padding-block:clamp(60px,7vw,104px) clamp(44px,5vw,66px);
}
.signoff::before{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:
  radial-gradient(ellipse 80% 60% at 18% 8%,#FFD7AC,transparent 62%),
  radial-gradient(ellipse 70% 70% at 88% 92%,color-mix(in srgb,var(--ember-700) 55%,transparent),transparent 60%);
}
.signoff>.container{position:relative;z-index:2}
.signoff .eyebrow{color:color-mix(in srgb,var(--ink-900) 86%,transparent)}
.signoff .eyebrow>span{background:var(--ink-900)}

.signoff-main{display:flex;align-items:center;justify-content:space-between;gap:var(--s-7)}
.signoff h2{
 font-size:var(--fs-mega);line-height:.98;letter-spacing:-.065em;font-weight:500;
}
.signoff h2 span{color:color-mix(in srgb,var(--n-0) 88%,var(--ember-300))}

.signoff-orb{
 position:relative;flex:none;
 width:clamp(74px,11vw,142px);height:clamp(74px,11vw,142px);border-radius:50%;
 display:grid;place-items:center;
 background:var(--ink-900);color:var(--on-dark);
 transition:transform var(--t-slow) var(--ease-spring),box-shadow var(--t-base) var(--ease);
 box-shadow:0 20px 50px -14px rgb(6 11 21 / .5);
}
.signoff-orb svg{width:clamp(30px,4vw,54px);height:clamp(30px,4vw,54px);position:relative;z-index:2}
.signoff-orb::before{
 content:'';position:absolute;inset:-8px;border-radius:50%;
 border:1px dashed color-mix(in srgb,var(--ink-900) 32%,transparent);
 animation:spin 18s linear infinite;
}
.signoff-orb:hover{transform:rotate(14deg) scale(1.05)}
@keyframes spin{to{rotate:360deg}}

.signoff-details{
 margin-top:clamp(32px,4vw,52px);padding-top:var(--s-6);
 border-top:1px solid color-mix(in srgb,var(--ink-900) 22%,transparent);
 display:grid;grid-template-columns:1.1fr repeat(3,auto);gap:var(--s-5) var(--s-7);align-items:end;
}
.signoff-details>p{font-size:var(--fs-small);color:color-mix(in srgb,var(--ink-900) 86%,transparent);max-width:34ch}
.signoff-details dl{display:grid;gap:4px;margin:0}
.signoff-details dt{
 font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
 color:color-mix(in srgb,var(--ink-900) 82%,transparent);
}
.signoff-details dd{margin:0}
.signoff-details dd a,.signoff-details dd span{
 font:650 clamp(15px,1.5vw,21px)/1.3 var(--display);letter-spacing:-.03em;
 border-bottom:1px solid color-mix(in srgb,var(--ink-900) 32%,transparent);
 padding-bottom:3px;transition:border-color var(--t-base) var(--ease)
}
.signoff-details dd span{border-color:transparent}
.signoff-details dd a:hover{border-color:var(--ink-900)}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

@media (max-width:1100px){
 .figure-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .journey-grid,.faq-grid,.craft-grid{grid-template-columns:1fr;gap:var(--s-7)}
 .journey-aside,.faq-aside{position:static}
 .engage-grid{grid-template-columns:1fr;gap:var(--s-3)}
 .engage-card{padding:var(--s-6)}
 .signoff-details{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-7)}
 .signoff-details>p{grid-column:1/-1}
}
@media (max-width:760px){
 .pillar-grid{grid-template-columns:1fr}
 .pillar{grid-template-columns:1fr;gap:var(--s-4)}
 .figures-head{display:grid;gap:var(--s-3)}
 .journey-rail{padding-left:clamp(22px,6vw,34px)}
 .phase{padding:var(--s-5)}
 .phase-top{flex-wrap:wrap;gap:var(--s-3)}
 .phase-top span{margin-left:0}
 .faq-item>button{font-size:var(--fs-body);gap:var(--s-4)}
 .signoff-main{align-items:flex-end;gap:var(--s-4)}
 .signoff-details{grid-template-columns:1fr}
}

/* ==========================================================================
   14. SCOPE ESTIMATOR
   ========================================================================== */

.estimator{background:var(--surface-sunken)}
.estimator-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,44px);align-items:start}

.estimator-form{display:grid;gap:var(--s-4)}
.est-block{
 margin:0;padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-xl);
 background:var(--surface);
}
.est-block legend{
 display:block;width:100%;padding:0;margin-bottom:var(--s-5);
 font:650 var(--fs-h4)/1.35 var(--display);letter-spacing:-.03em;
}
.est-block legend b{
 display:inline-block;margin-right:var(--s-3);
 font:700 var(--fs-label)/1 var(--mono);letter-spacing:.08em;color:var(--brand-deep);
 vertical-align:2px;
}
.est-block legend em{
 display:block;margin-top:var(--s-2);
 font:400 var(--fs-small)/1.6 var(--body);font-style:normal;color:var(--ink-soft);
}

/* Native inputs stay in the accessibility tree; the visual state is drawn
   on the surrounding label. */
.est-kind input,.est-factor input{position:absolute;opacity:0;width:1px;height:1px}

.est-kinds{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.est-kind{
 position:relative;display:block;cursor:pointer;
 padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);
 transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
            transform var(--t-fast) var(--ease-out);
}
.est-kind:hover{border-color:var(--ember-300);transform:translateY(-2px)}
.est-kind.is-on{border-color:var(--ember-500);background:var(--brand-tint);box-shadow:inset 3px 0 var(--ember-500)}
.est-kind strong{display:block;font:650 var(--fs-body)/1.35 var(--display);letter-spacing:-.025em}
.est-kind small{display:block;margin-top:var(--s-2);font-size:var(--fs-small);line-height:1.6;color:var(--ink-muted)}
.est-kind:focus-within{outline:2px solid var(--ember-600);outline-offset:3px;border-radius:var(--r-md)}

.est-factors{display:grid;gap:var(--s-2)}
.est-factor{
 display:grid;grid-template-columns:auto 1fr;align-items:start;gap:var(--s-3);cursor:pointer;
 padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-md);
 transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
            transform var(--t-fast) var(--ease-out);
}
.est-factor:hover{border-color:var(--ember-300);transform:translateX(3px)}
.est-factor.is-on{border-color:var(--ember-400);background:var(--brand-tint)}
.est-factor:focus-within{outline:2px solid var(--ember-600);outline-offset:3px}
.est-tick{
 flex:none;width:20px;height:20px;margin-top:2px;border-radius:6px;
 display:grid;place-items:center;
 border:1px solid var(--n-400);background:var(--surface);color:transparent;
 transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
            color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-spring);
}
.est-factor.is-on .est-tick{background:var(--ink-700);border-color:var(--ink-700);color:var(--n-0);transform:scale(1.06)}
.est-factor strong{display:block;font-size:var(--fs-small);font-weight:650;line-height:1.5}
.est-factor small{display:block;margin-top:2px;font-size:var(--fs-micro);line-height:1.6;color:var(--ink-muted)}

/* — Result panel -------------------------------------------------------- */
.estimator-result{
 position:sticky;top:clamp(92px,11vw,132px);
 display:grid;gap:var(--s-5);
 padding:clamp(24px,2.6vw,34px);border-radius:var(--r-xl);
 background:var(--grad-ink);color:var(--on-dark);
 box-shadow:var(--sh-lg);
 overflow:hidden;isolation:isolate;
}
.estimator-result::before{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse 70% 60% at 92% 0%,
   color-mix(in srgb,var(--ember-600) 30%,transparent),transparent 62%);
}
.est-head{display:flex;align-items:center;gap:var(--s-4)}
.est-emblem{
 flex:none;width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
 background:var(--grad-ember);color:var(--ink-900);
}
.est-emblem svg{width:22px;height:22px}
.est-head small{display:block;font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-faint)}
.est-head strong{display:block;margin-top:3px;font:700 var(--fs-h3)/1.1 var(--display);letter-spacing:-.04em}

.est-meter{display:grid;gap:var(--s-3)}
.est-meter>i{
 display:block;height:4px;border-radius:2px;transform-origin:left;
 background:var(--grad-ember);
 transition:transform var(--t-slow) var(--ease-out);
 box-shadow:0 0 14px color-mix(in srgb,var(--ember-500) 60%,transparent);
}
.est-meter{position:relative;padding-top:4px}
.est-meter::before{
 content:'';position:absolute;top:4px;left:0;right:0;height:4px;border-radius:2px;
 background:var(--on-dark-line-strong);
}
.est-meter>i{position:relative}
.est-meter-labels{display:flex;justify-content:space-between;gap:var(--s-2)}
.est-meter-labels span{font-size:var(--fs-micro);color:var(--on-dark-faint);transition:color var(--t-base) var(--ease)}
.est-meter-labels span.is-on{color:var(--ember-400);font-weight:700}

.est-summary{font-size:var(--fs-small);line-height:1.72;color:var(--on-dark-muted)}

.est-facts{display:grid;gap:var(--s-4);margin:0;padding-top:var(--s-5);border-top:1px solid var(--on-dark-line)}
.est-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4)}
.est-facts dt{
 display:flex;align-items:center;gap:7px;
 font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-faint);
}
.est-facts dt svg{color:var(--ember-400)}
.est-facts dd{margin:0;font:650 var(--fs-body)/1.3 var(--display);letter-spacing:-.025em;text-align:right}

.est-picked{
 list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2);
}
.est-picked li{
 display:flex;align-items:center;gap:6px;
 padding:6px 11px;border-radius:var(--r-pill);
 background:var(--glass);border:1px solid var(--on-dark-line);
 font-size:var(--fs-micro);color:var(--on-dark-muted);
}
.est-picked li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ember-500)}

.est-cta{width:100%}
.est-note{
 display:flex;align-items:flex-start;gap:var(--s-2);
 font-size:var(--fs-micro);line-height:1.65;color:var(--on-dark-faint);
}
.est-note svg{flex:none;margin-top:2px;color:var(--ember-400)}

@media (max-width:1000px){
 .estimator-grid{grid-template-columns:1fr}
 .estimator-result{position:static}
}
@media (max-width:640px){
 .est-kinds{grid-template-columns:1fr}
 .est-meter-labels span{font-size:10px}
}

/* ==========================================================================
   15. TESTIMONIALS
   Only ever rendered when there are real, published quotes.
   ========================================================================== */

.praise{background:var(--surface)}
.praise-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:var(--s-4)}
.praise-card{
 position:relative;isolation:isolate;overflow:hidden;
 display:flex;flex-direction:column;
 margin:0;padding:clamp(26px,2.8vw,38px);border-radius:var(--r-xl);
 background:var(--n-25);border:1px solid var(--line);
 transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),
            border-color var(--t-base) var(--ease);
}
.praise-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--ember-300)}
.praise-card::before{
 content:'';position:absolute;top:0;left:0;right:0;height:3px;
 background:var(--grad-ember);transform:scaleX(0);transform-origin:left;
 transition:transform var(--t-slow) var(--ease-out);
}
.praise-card:hover::before{transform:scaleX(1)}
.praise-card>svg{width:30px;height:30px;color:var(--ember-400);flex:none}
.praise-card blockquote{
 margin:var(--s-5) 0 var(--s-6);flex:1;
 font-family:var(--display);font-size:var(--fs-h4);line-height:1.55;
 letter-spacing:-.02em;color:var(--ink-800);
}
.praise-card figcaption{padding-top:var(--s-5);border-top:1px solid var(--line)}
.praise-card figcaption strong{display:block;font-size:var(--fs-small);font-weight:700}
.praise-card figcaption span{display:block;margin-top:3px;font-size:var(--fs-small);color:var(--ink-muted)}