/* ==========================================================================
   Durga.design — Design System v1.0
   One stylesheet for every page. Reference: /design-system/
   Rules of the road:
   1. Light canvas (--clr-bg) on every page. Dark is a BAND inside a page
      (work showcase, marquee strip, footer), never a whole page.
   2. Border-radius is always 0. Shadows are hard offsets, never blurred.
   3. DM Serif Display for headings, Plus Jakarta Sans for everything else.
   4. Accent blue is for actions, active states and one emphasis word per heading.
   5. Spacing comes from the 8px scale below. No one-off pixel values in pages.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Colour — surfaces */
  --clr-bg:#F5F2EE;          /* page canvas */
  --clr-bg-alt:#EDE9E3;      /* alternate band, image wells */
  --clr-bg-invert:#0E0C0A;   /* dark band, footer */
  --clr-surface:#FFFFFF;     /* cards only, never a page */
  /* Colour — lines */
  --clr-border:#DAD5CC;
  --clr-border-dark:#2B2724;
  /* Colour — text */
  --clr-ink:#100E0C;
  --clr-ink-2:#3C362F;
  --clr-ink-3:#7B7268;
  --clr-ink-inv:#F5F2EE;     /* text on dark */
  --clr-ink-inv-2:#A69C90;   /* secondary text on dark */
  /* Colour — accent & semantic */
  --clr-accent:#1B54F8;
  --clr-accent-h:#0A3FDB;
  --clr-accent-bg:#EBF0FF;
  --clr-success:#1F9D55;
  --clr-danger:#C2410C;

  /* Type */
  --font-display:"DM Serif Display",Georgia,serif;
  --font-ui:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem;
  --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem; --text-6xl:4rem;
  --text-hero:clamp(44px,8vw,104px);
  --measure:68ch;

  /* Space — 8px grid */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px;

  /* Elevation — hard offsets */
  --shadow-sm:2px 2px 0 var(--clr-ink);
  --shadow-card:3px 3px 0 var(--clr-ink);
  --shadow-hover:5px 5px 0 var(--clr-ink);
  --shadow-accent:4px 4px 0 var(--clr-accent);
  --shadow-xl:8px 8px 0 var(--clr-ink);

  /* Motion */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.25,.46,.45,.94);
  --ease-curtain:cubic-bezier(.76,0,.24,1);
  --dur-fast:150ms; --dur-base:220ms; --dur-slow:400ms; --dur-page:600ms;

  /* Layout */
  --nav-height:64px;
  --container:1200px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0 !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-height) + var(--sp-6))}
body{background:var(--clr-bg);color:var(--clr-ink);font-family:var(--font-ui);font-size:var(--text-base);font-weight:400;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.042;mix-blend-mode:multiply;background-image:var(--grain);background-size:300px 300px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--clr-accent);color:var(--clr-ink-inv)}
:focus-visible{outline:2px solid var(--clr-accent);outline-offset:3px}
em{font-style:italic}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}

/* ---------- 3. Layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-6)}
@media(min-width:768px){.container{padding-inline:var(--sp-12)}}
@media(min-width:1100px){.container{padding-inline:var(--sp-20)}}
.section-sm{padding-block:var(--sp-12)}
.section-md{padding-block:var(--sp-20)}
.section-lg{padding-block:var(--sp-32)}
.band-alt{background:var(--clr-bg-alt)}
.band-dark{background:var(--clr-bg-invert);color:var(--clr-ink-inv);position:relative}
.band-dark .t-body,.band-dark .t-lead{color:var(--clr-ink-inv-2)}
.rule{border:0;border-top:1px solid var(--clr-border)}
.rule--heavy{border-top:2px solid var(--clr-ink)}

/* ---------- 4. Type roles ---------- */
.t-hero{font-family:var(--font-display);font-size:var(--text-hero);line-height:1;letter-spacing:-.02em}
.t-h1{font-family:var(--font-display);font-size:clamp(var(--text-4xl),5.5vw,var(--text-6xl));line-height:1.04;letter-spacing:-.025em}
.t-h2{font-family:var(--font-display);font-size:clamp(var(--text-4xl),5vw,var(--text-5xl));line-height:1.1;letter-spacing:-.015em}
.t-h3{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.2}
.t-card-title{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.25}
.t-lead{font-size:var(--text-lg);line-height:1.65;color:var(--clr-ink-2)}
.t-body{font-size:var(--text-base);line-height:1.72;color:var(--clr-ink-2)}
.t-label{font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.t-caption{font-size:var(--text-xs);line-height:1.5;color:var(--clr-ink-3)}
.t-accent,.t-hero em,.t-h1 em,.t-h2 em,.t-h3 em{color:var(--clr-accent)}
.eyebrow{display:flex;align-items:center;gap:var(--sp-3);color:var(--clr-accent);margin-bottom:var(--sp-4)}
.eyebrow::before{content:'';width:24px;height:2px;background:currentColor}

/* ---------- 5. Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;letter-spacing:.02em;padding:var(--sp-3) var(--sp-6);border:1.5px solid transparent;background:none;cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.btn-primary{background:var(--clr-ink);color:var(--clr-ink-inv);border-color:var(--clr-ink);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--clr-accent);border-color:var(--clr-accent);box-shadow:var(--shadow-accent);transform:translate(-2px,-2px)}
.btn-secondary{color:var(--clr-ink);border-color:var(--clr-ink)}
.btn-secondary:hover{background:var(--clr-ink);color:var(--clr-ink-inv);box-shadow:var(--shadow-sm);transform:translate(-2px,-2px)}
.btn-accent{background:var(--clr-accent);color:var(--clr-ink-inv);border-color:var(--clr-accent)}
.btn-accent:hover{background:var(--clr-ink-inv);color:var(--clr-ink);border-color:var(--clr-ink-inv);box-shadow:var(--shadow-accent);transform:translate(-2px,-2px)}
.btn-inv{color:var(--clr-ink-inv);border-color:var(--clr-ink-inv)}
.btn-inv:hover{background:var(--clr-ink-inv);color:var(--clr-ink);box-shadow:var(--shadow-accent);transform:translate(-2px,-2px)}
.btn-ghost{color:var(--clr-accent);padding-inline:0}
.btn-ghost:hover{color:var(--clr-accent-h)}
.btn-sm{padding:var(--sp-2) var(--sp-4);font-size:var(--text-xs)}
.btn-lg{padding:var(--sp-4) var(--sp-8);font-size:var(--text-base)}
.btn .arr{display:inline-block;transition:transform var(--dur-base) var(--ease-spring)}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn:hover .arr--down{transform:translateY(3px)}
.btn:hover .arr--left{transform:translateX(-3px)}

/* ---------- 6. Tags & status ---------- */
.tag{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border:1.5px solid var(--clr-accent);background:var(--clr-accent-bg);color:var(--clr-accent);line-height:1.4}
.tag-neutral{border-color:var(--clr-border);background:transparent;color:var(--clr-ink-3)}
.tag-dark{border-color:var(--clr-border-dark);background:transparent;color:var(--clr-ink-inv-2)}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.status{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--clr-ink-2);border:1px solid var(--clr-border);padding:6px 12px;background:var(--clr-bg)}
.status__dot{width:8px;height:8px;background:var(--clr-success);position:relative;flex:none}
.status__dot::after{content:'';position:absolute;inset:0;background:var(--clr-success);animation:ping 1.8s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}

/* ---------- 7. Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-height);background:rgba(245,242,238,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.nav.is-scrolled{border-bottom-color:var(--clr-border);background:rgba(245,242,238,.96)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__inner{height:100%;display:flex;align-items:center;gap:var(--sp-8)}
.nav__logo{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.01em;display:flex;align-items:center;gap:2px}
.nav__logo i{display:inline-block;width:6px;height:6px;background:var(--clr-accent);margin-top:10px;transition:transform var(--dur-base) var(--ease-spring)}
.nav__logo:hover i{transform:translateY(-10px) rotate(45deg)}
.nav__links{display:flex;gap:var(--sp-8);margin-left:auto;list-style:none}
.nav__link{font-size:var(--text-sm);font-weight:500;color:var(--clr-ink-2);padding-bottom:2px;border-bottom:2px solid transparent;transition:color var(--dur-fast),border-color var(--dur-fast)}
.nav__link:hover,.nav__link.is-active{color:var(--clr-accent);border-bottom-color:var(--clr-accent)}
.nav__burger{display:none;width:40px;height:40px;border:1px solid var(--clr-ink);background:var(--clr-surface);cursor:pointer;position:relative;flex:none}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{position:absolute;left:10px;width:18px;height:1.5px;background:var(--clr-ink);transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast)}
.nav__burger span{top:19px}.nav__burger span::before{content:'';left:0;top:-6px}.nav__burger span::after{content:'';left:0;top:6px}
.menu-open .nav__burger span{background:transparent}
.menu-open .nav__burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .nav__burger span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1023px){.nav__links{display:none}.nav__cta{margin-left:auto}.nav__burger{display:block}}
@media(max-width:420px){.nav__cta{display:none}.nav__burger{margin-left:auto}}
/* Mobile menu sheet */
.menu{position:fixed;inset:var(--nav-height) 0 0 0;z-index:99;background:var(--clr-bg);border-top:1px solid var(--clr-border);padding:var(--sp-8) var(--sp-6);overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
.menu-open .menu{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.menu-open{overflow:hidden}
.menu ul{list-style:none;display:grid;border-top:1px solid var(--clr-border)}
.menu li a{display:flex;justify-content:space-between;align-items:center;padding-block:var(--sp-4);border-bottom:1px solid var(--clr-border);font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.1}
.menu li a::after{content:'↗';font-family:var(--font-ui);font-size:var(--text-base);color:var(--clr-ink-3)}
.menu li a[aria-current]{color:var(--clr-accent)}
.menu .btn{margin-top:var(--sp-8);width:100%;justify-content:center}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--clr-accent);z-index:101;transform-origin:0 50%;transform:scaleX(0)}

/* ---------- 8. Section header ---------- */
.shead{display:flex;justify-content:space-between;align-items:end;gap:var(--sp-8);flex-wrap:wrap;margin-bottom:var(--sp-12)}
.shead__aside{max-width:36ch}

/* ---------- 9. Stats ---------- */
/* 9a. Stat rows — big number + label + arrow (homepage about) */
.stats{border-top:1px solid var(--clr-border)}
.stat{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);padding-block:var(--sp-6);border-bottom:1px solid var(--clr-border)}
.stat__num{font-family:var(--font-display);font-size:var(--text-5xl);line-height:1;min-width:3ch;font-variant-numeric:tabular-nums}
.stat__num sup{color:var(--clr-accent);font-size:.5em;vertical-align:top;margin-left:2px}
.stat__label{flex:1;color:var(--clr-ink-2)}
.stat__arr{width:40px;height:40px;border:1px solid var(--clr-border);display:grid;place-items:center;flex:none;transition:transform var(--dur-base) var(--ease-spring),background var(--dur-base) var(--ease-out),color var(--dur-base),border-color var(--dur-base)}
.stat:hover .stat__arr{transform:rotate(45deg);background:var(--clr-ink);color:var(--clr-ink-inv);border-color:var(--clr-ink)}
/* 9b. Stat grid — shared-border metric cells (case studies) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));border-top:1px solid var(--clr-border);border-left:1px solid var(--clr-border);background:var(--clr-surface)}
.stat-cell{padding:var(--sp-6);border-right:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border);display:flex;flex-direction:column;gap:var(--sp-2)}
.stat-cell__value{font-family:var(--font-display);font-size:var(--text-4xl);line-height:1;font-variant-numeric:tabular-nums}
.stat-cell__value .from{color:var(--clr-ink-3);font-size:.6em}
.stat-cell__value .to{color:var(--clr-accent)}

/* ---------- 10. Work card (used on dark band) ---------- */
.work-grid{display:grid;gap:var(--sp-8)}
@media(min-width:900px){
  .work-grid{grid-template-columns:repeat(12,1fr);gap:var(--sp-10) var(--sp-8)}
  .work-grid > :nth-child(4n+1){grid-column:span 7}.work-grid > :nth-child(4n+2){grid-column:span 5}
  .work-grid > :nth-child(4n+3){grid-column:span 5}.work-grid > :nth-child(4n+4){grid-column:span 7}
  .work-grid > :last-child:nth-child(4n+1){grid-column:1/-1}
  .work-grid > :last-child:nth-child(4n+1) .work-card__media{aspect-ratio:21/9}
}
.work-card{display:flex;flex-direction:column;gap:var(--sp-4)}
.work-card__media{position:relative;overflow:hidden;border:1px solid var(--clr-border-dark);background:#1A1714;aspect-ratio:4/3}
.work-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.work-card:hover .work-card__media img{transform:scale(1.05)}
.work-card__chips{position:absolute;left:var(--sp-4);top:var(--sp-4);display:flex;gap:var(--sp-2);flex-wrap:wrap}
.work-card__chips span{background:rgba(14,12,10,.78);backdrop-filter:blur(8px);color:var(--clr-ink-inv);font-size:var(--text-xs);font-weight:600;padding:4px 10px}
.work-card__metric{position:absolute;right:var(--sp-4);bottom:var(--sp-4);background:var(--clr-surface);color:var(--clr-ink);padding:var(--sp-2) var(--sp-3);font-size:var(--text-xs);font-weight:600;border:1px solid var(--clr-ink);box-shadow:var(--shadow-accent);transform:translateY(8px);opacity:0;transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-base) var(--ease-out)}
.work-card:hover .work-card__metric{transform:none;opacity:1}
@media(hover:none){.work-card__metric{transform:none;opacity:1}}
.work-card__head{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:start}
.work-card__title{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.2}
.work-card__desc{color:var(--clr-ink-inv-2);font-size:var(--text-sm);line-height:1.65;max-width:52ch}
.work-card__idx{font-size:var(--text-xs);color:var(--clr-ink-3);font-variant-numeric:tabular-nums;padding-top:6px}
@media(hover:hover){[data-cursor]{cursor:none}}
.cursor{position:fixed;left:0;top:0;z-index:500;pointer-events:none;background:var(--clr-accent);color:var(--clr-ink-inv);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;transform:translate(-50%,-50%) scale(0);transition:transform var(--dur-base) var(--ease-spring);white-space:nowrap}
.cursor.on{transform:translate(-50%,-50%) scale(1)}

/* ---------- 11. Service card (light, fills dark on hover) ---------- */
.services{display:grid;border-top:1px solid var(--clr-border);border-left:1px solid var(--clr-border)}
@media(min-width:640px){.services{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.services{grid-template-columns:repeat(4,1fr)}}
.svc{position:relative;padding:var(--sp-8) var(--sp-6);border-right:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border);background:var(--clr-surface);display:flex;flex-direction:column;gap:var(--sp-4);min-height:380px;overflow:hidden;isolation:isolate;transition:color var(--dur-slow) var(--ease-out)}
.svc::before{content:'';position:absolute;inset:0;background:var(--clr-ink);transform:translateY(101%);transition:transform var(--dur-slow) var(--ease-curtain);z-index:-1}
.svc:hover::before{transform:none}
.svc:hover{color:var(--clr-ink-inv)}
.svc__top{display:flex;justify-content:space-between;align-items:start;gap:var(--sp-4)}
.svc__name{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.2}
.svc__num{font-family:var(--font-display);font-size:var(--text-4xl);line-height:1;color:var(--clr-accent)}
.svc p{font-size:var(--text-sm);line-height:1.65;color:var(--clr-ink-2);transition:color var(--dur-slow)}
.svc:hover p{color:var(--clr-ink-inv-2)}
.svc ul{list-style:none;margin-top:auto;border-top:1px solid var(--clr-border);transition:border-color var(--dur-slow)}
.svc:hover ul{border-color:var(--clr-border-dark)}
.svc li{font-size:var(--text-sm);padding-block:var(--sp-2);border-bottom:1px dashed var(--clr-border);display:flex;gap:var(--sp-2);align-items:center;transition:border-color var(--dur-slow),transform var(--dur-base) var(--ease-out)}
.svc li::before{content:'↗';color:var(--clr-accent);font-size:var(--text-xs)}
.svc:hover li{border-color:var(--clr-border-dark);transform:translateX(4px)}

/* ---------- 12. Marquee & strip ---------- */
.marquee{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:var(--sp-16);width:max-content;animation:scroll 32s linear infinite;align-items:center}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.strip{background:var(--clr-ink);color:var(--clr-ink-inv);overflow:hidden;padding-block:var(--sp-4)}
.strip .marquee__track{gap:var(--sp-8);animation-duration:40s}
.strip span{font-family:var(--font-display);font-size:clamp(var(--text-2xl),3vw,var(--text-4xl));white-space:nowrap;display:flex;align-items:center;gap:var(--sp-8)}
.strip span em{color:var(--clr-accent)}
.strip svg{width:24px;color:var(--clr-accent);flex:none}

/* ---------- 13. Footer / contact ---------- */
.footer{background:var(--clr-bg-invert);color:var(--clr-ink-inv);padding-top:var(--sp-24);padding-bottom:var(--sp-8);position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.022;mix-blend-mode:screen;background-image:var(--grain);background-size:300px 300px}
.footer__kicker{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--clr-ink-inv-2);border:1px solid var(--clr-border-dark);padding:6px 12px;margin-bottom:var(--sp-8)}
.footer__kicker b{color:var(--clr-accent)}
.footer__cta{font-family:var(--font-display);font-size:clamp(48px,9vw,128px);line-height:.98;letter-spacing:-.025em;margin-bottom:var(--sp-12)}
.footer__cta em{color:var(--clr-accent)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-10);padding-bottom:var(--sp-16);border-bottom:1px solid var(--clr-border-dark)}
.footer__grid > *{min-width:0}
@media(min-width:640px){.footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer__grid > :first-child{grid-column:1/-1}}
@media(min-width:1000px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:start}.footer__grid > :first-child{grid-column:auto}}
.mail{display:flex;align-items:stretch;border:1px solid var(--clr-border-dark);max-width:460px}
.mail a{flex:1;min-width:0;overflow-wrap:anywhere;padding:var(--sp-4);font-size:clamp(var(--text-base),4vw,var(--text-lg));font-weight:500;transition:color var(--dur-fast)}
.mail a:hover{color:var(--clr-accent)}
.mail button{border:0;border-left:1px solid var(--clr-border-dark);background:transparent;color:var(--clr-ink-inv);font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:.07em;text-transform:uppercase;padding-inline:var(--sp-4);cursor:pointer;min-width:80px;transition:background var(--dur-fast),color var(--dur-fast)}
.mail button:hover{background:var(--clr-ink-inv);color:var(--clr-ink)}
.mail button.ok{background:var(--clr-success);color:var(--clr-ink-inv)}
.fcol h4{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--clr-ink-3);margin-bottom:var(--sp-4)}
.fcol ul{list-style:none;display:grid;gap:var(--sp-2)}
.fcol a{font-size:var(--text-sm);color:var(--clr-ink-inv);display:inline-flex;gap:var(--sp-2);align-items:center;transition:color var(--dur-fast),transform var(--dur-base) var(--ease-out)}
.fcol a:hover{color:var(--clr-accent);transform:translateX(4px)}
.footer__bottom{padding-top:var(--sp-6);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4);font-size:var(--text-xs);color:var(--clr-ink-3)}
.footer__bottom a:hover{color:var(--clr-accent)}

/* ---------- 14. Case study patterns ---------- */
/* 14a. Header */
.cs-hero{padding-top:calc(var(--nav-height) + var(--sp-12));padding-bottom:var(--sp-12)}
.crumbs{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:var(--clr-ink-3);margin-bottom:var(--sp-8)}
.crumbs a{transition:color var(--dur-fast)}
.crumbs a:hover{color:var(--clr-accent)}
.cs-hero__title{max-width:18ch;margin-block:var(--sp-6)}
.cs-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-10);align-items:end}
@media(min-width:900px){.cs-hero__grid{grid-template-columns:7fr 5fr;gap:var(--sp-16)}}
.cs-hero__summary{max-width:58ch}
/* 14b. Meta — role / timeline / platform / tools */
.cs-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--clr-ink)}
.cs-meta > div{padding:var(--sp-4) 0;border-bottom:1px solid var(--clr-border)}
.cs-meta > div:nth-child(odd){padding-right:var(--sp-4)}
.cs-meta dt{font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--clr-ink-3);margin-bottom:var(--sp-1)}
.cs-meta dd{font-size:var(--text-sm);font-weight:500;color:var(--clr-ink)}
/* 14c. Cover */
.cs-cover{border:1px solid var(--clr-ink);box-shadow:var(--shadow-xl);background:var(--clr-bg-alt);overflow:hidden}
.cs-cover img{width:100%;transform:scale(1.04);transition:transform 1.4s var(--ease-out)}
.cs-cover.in img{transform:none}
/* 14d. Body layout — sticky index + prose */
.cs-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-12)}
@media(min-width:1000px){.cs-layout{grid-template-columns:200px minmax(0,1fr);gap:var(--sp-16)}}
.cs-toc{display:none}
@media(min-width:1000px){.cs-toc{display:block;position:sticky;top:calc(var(--nav-height) + var(--sp-8));align-self:start}}
.cs-toc p{margin-bottom:var(--sp-4);color:var(--clr-ink-3);font-size:var(--text-xs)}
.cs-toc ol{list-style:none;border-left:1px solid var(--clr-border)}
.cs-toc a{display:block;padding:var(--sp-2) 0 var(--sp-2) var(--sp-4);margin-left:-1px;border-left:2px solid transparent;font-size:var(--text-sm);color:var(--clr-ink-3);transition:color var(--dur-fast),border-color var(--dur-fast)}
.cs-toc a:hover{color:var(--clr-ink)}
.cs-toc a.is-active{color:var(--clr-accent);border-left-color:var(--clr-accent)}
.cs-section{padding-block:var(--sp-12);border-top:1px solid var(--clr-border)}
.cs-section:first-child{border-top:0;padding-top:0}
.cs-section__k{font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--clr-accent);margin-bottom:var(--sp-3)}
/* 14e. Prose */
.prose{max-width:var(--measure)}
.prose > * + *{margin-top:var(--sp-6)}
.prose h2{font-family:var(--font-display);font-size:clamp(var(--text-3xl),4vw,var(--text-4xl));line-height:1.15;letter-spacing:-.01em}
.prose h3{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.25;margin-top:var(--sp-10)}
.prose p,.prose li{color:var(--clr-ink-2)}
.prose strong{color:var(--clr-ink);font-weight:600}
.prose ul{list-style:none;display:grid;gap:var(--sp-3)}
.prose ul li{position:relative;padding-left:var(--sp-6)}
.prose ul li::before{content:'';position:absolute;left:0;top:.65em;width:8px;height:8px;background:var(--clr-accent)}
/* 14f. Figure */
.figure{margin-block:var(--sp-10);max-width:none}
.figure__frame{border:1px solid var(--clr-border);background:var(--clr-surface);overflow:hidden;box-shadow:var(--shadow-card)}
.figure__frame img{width:100%;transition:transform .9s var(--ease-out)}
.figure:hover .figure__frame img{transform:scale(1.02)}
.figure figcaption{margin-top:var(--sp-3);font-size:var(--text-xs);color:var(--clr-ink-3);display:flex;gap:var(--sp-2)}
.figure figcaption b{color:var(--clr-ink);font-weight:600}
.figure--split{display:grid;gap:var(--sp-8);align-items:center}
@media(min-width:768px){.figure--split{grid-template-columns:1fr 1fr}}
/* 14g. Problem → Solution card */
.ps{display:grid;border:1px solid var(--clr-border);background:var(--clr-surface);margin-block:var(--sp-8);max-width:none;transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.ps:hover{box-shadow:var(--shadow-card);transform:translate(-2px,-2px)}
@media(min-width:768px){.ps{grid-template-columns:1fr 1fr}}
.ps__head{grid-column:1/-1;display:flex;align-items:baseline;gap:var(--sp-4);padding:var(--sp-6);border-bottom:1px solid var(--clr-border)}
.ps__head span{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--clr-accent);line-height:1}
.ps__head h3{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.2;margin:0}
.ps__col{padding:var(--sp-6)}
.ps__col + .ps__col{border-top:1px solid var(--clr-border)}
@media(min-width:768px){.ps__col + .ps__col{border-top:0;border-left:1px solid var(--clr-border)}}
.ps__label{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:var(--sp-3)}
.ps__label--problem{color:var(--clr-danger)}
.ps__label--solution{color:var(--clr-success)}
.ps__label::before{content:'';width:8px;height:8px;background:currentColor}
.ps__col p{font-size:var(--text-sm);line-height:1.7;color:var(--clr-ink-2)}
/* 14h. Pull quote */
.pull{border-left:2px solid var(--clr-accent);padding-left:var(--sp-6);font-family:var(--font-display);font-size:clamp(var(--text-2xl),3vw,var(--text-3xl));line-height:1.3;color:var(--clr-ink);max-width:32ch}
/* 14i. Outcome list */
.outcomes{list-style:none;display:grid;border-top:1px solid var(--clr-border);counter-reset:o;max-width:none}
@media(min-width:768px){.outcomes{grid-template-columns:1fr 1fr;column-gap:var(--sp-8)}}
.outcomes li{counter-increment:o;display:flex;gap:var(--sp-4);padding-block:var(--sp-4);border-bottom:1px solid var(--clr-border);color:var(--clr-ink)}
.outcomes li::before{content:counter(o,decimal-leading-zero);font-size:var(--text-xs);font-weight:600;color:var(--clr-accent);padding-top:.35em;font-variant-numeric:tabular-nums}
/* 14j. Next case */
.next-case{display:grid;gap:var(--sp-8);align-items:center;border:1px solid var(--clr-ink);background:var(--clr-surface);padding:var(--sp-6);box-shadow:var(--shadow-card);transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.next-case:hover{box-shadow:var(--shadow-hover);transform:translate(-2px,-2px)}
@media(min-width:768px){.next-case{grid-template-columns:1fr 1.1fr;padding:var(--sp-8)}}
.next-case__media{overflow:hidden;border:1px solid var(--clr-border);aspect-ratio:16/10;background:var(--clr-bg-alt)}
.next-case__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.next-case:hover .next-case__media img{transform:scale(1.05)}

/* ---------- 16. Page header (hubs, services, expertise, articles) ---------- */
.page-hero{padding-top:calc(var(--nav-height) + var(--sp-12));padding-bottom:var(--sp-12);border-bottom:1px solid var(--clr-border)}
.page-hero__title{max-width:20ch;margin-block:var(--sp-4) var(--sp-6)}
.page-hero__lead{max-width:60ch}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8)}
.page-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);font-size:var(--text-sm);color:var(--clr-ink-3)}
.page-hero__meta .dot{width:4px;height:4px;background:var(--clr-border)}

/* ---------- 17. Cards (light) ---------- */
.card-grid{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.card-grid--2{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
.card{display:flex;flex-direction:column;background:var(--clr-surface);border:1px solid var(--clr-border);transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
a.card:hover,.card--link:hover{border-color:var(--clr-ink);box-shadow:var(--shadow-card);transform:translate(-2px,-2px)}
.card__media{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--clr-border);background:var(--clr-bg-alt)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
a.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.card__kicker{font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--clr-ink-3);display:flex;gap:var(--sp-2);flex-wrap:wrap}
.card__kicker b{color:var(--clr-accent);font-weight:600}
.card__title{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.2}
.card__text{font-size:var(--text-sm);line-height:1.65;color:var(--clr-ink-2)}
.card__foot{margin-top:auto;padding-top:var(--sp-4);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);font-size:var(--text-sm);font-weight:600}
.card__foot .go{display:inline-block;transition:transform var(--dur-base) var(--ease-spring);color:var(--clr-accent)}
a.card:hover .card__foot .go{transform:translate(3px,-3px)}
.card__icon{width:40px;height:40px;border:1px solid var(--clr-ink);display:grid;place-items:center;font-family:var(--font-display);font-size:var(--text-lg);background:var(--clr-bg)}

/* ---------- 18. Lists ---------- */
.list{list-style:none;display:grid;gap:0;border-top:1px solid var(--clr-border)}
.list li{position:relative;padding:var(--sp-3) 0 var(--sp-3) 28px;border-bottom:1px solid var(--clr-border);color:var(--clr-ink-2);font-size:var(--text-sm);line-height:1.6}
.list li::before{position:absolute;left:0;top:var(--sp-3);width:20px;font-weight:700;line-height:1.6}
.list--check li::before{content:'✓';color:var(--clr-success)}
.list--x li::before{content:'✕';color:var(--clr-danger)}
.list--arrow li::before{content:'↗';color:var(--clr-accent)}
.list--dot li::before{content:'';width:8px;height:8px;background:var(--clr-accent);margin-top:.55em}
.band-dark .list{border-color:var(--clr-border-dark)}
.band-dark .list li{border-color:var(--clr-border-dark);color:var(--clr-ink-inv-2)}

/* ---------- 19. Split section (label column + content) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8);padding-block:var(--sp-12);border-top:1px solid var(--clr-border)}
.split:first-child{border-top:0}
@media(min-width:900px){.split{grid-template-columns:4fr 8fr;gap:var(--sp-16)}}
.split__head .t-h3{margin-top:var(--sp-2)}
.split__head p{margin-top:var(--sp-3);font-size:var(--text-sm);color:var(--clr-ink-3);max-width:32ch}

/* ---------- 20. Process steps ---------- */
.process{display:grid;border-top:2px solid var(--clr-ink);counter-reset:step}
@media(min-width:768px){.process{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}}
.process__step{counter-increment:step;padding:var(--sp-6) var(--sp-6) var(--sp-6) 0;border-bottom:1px solid var(--clr-border)}
@media(min-width:768px){.process__step{border-bottom:0}.process__step + .process__step{padding-left:var(--sp-6);border-left:1px solid var(--clr-border)}}
.process__step::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-display);font-size:var(--text-3xl);line-height:1;color:var(--clr-accent);margin-bottom:var(--sp-4)}
.process__step h3{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.25;margin-bottom:var(--sp-2)}
.process__step p{font-size:var(--text-sm);line-height:1.65;color:var(--clr-ink-2)}

/* ---------- 21. FAQ accordion (native <details>) ---------- */
.faq{border-top:1px solid var(--clr-border);max-width:860px}
.faq details{border-bottom:1px solid var(--clr-border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);padding-block:var(--sp-6);font-family:var(--font-display);font-size:var(--text-xl);line-height:1.3;transition:color var(--dur-fast)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;width:32px;height:32px;border:1px solid var(--clr-border);display:grid;place-items:center;font-family:var(--font-ui);font-size:var(--text-lg);transition:transform var(--dur-base) var(--ease-spring),background var(--dur-base),color var(--dur-base),border-color var(--dur-base)}
.faq summary:hover{color:var(--clr-accent)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--clr-ink);color:var(--clr-ink-inv);border-color:var(--clr-ink)}
.faq details > div{padding-bottom:var(--sp-6);max-width:68ch;color:var(--clr-ink-2);animation:fadeUp var(--dur-slow) var(--ease-out)}

/* ---------- 22. Callouts, quotes, pricing ---------- */
.callout{border:1px solid var(--clr-ink);background:var(--clr-surface);box-shadow:var(--shadow-card);padding:var(--sp-6);display:grid;gap:var(--sp-3)}
.callout--accent{border-color:var(--clr-accent);box-shadow:var(--shadow-accent)}
.callout__label{font-size:var(--text-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--clr-accent)}
.quote-card{background:var(--clr-surface);border:1px solid var(--clr-border);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-6)}
.quote-card blockquote{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.4}
.quote-card blockquote::before{content:'“';display:block;font-size:var(--text-5xl);line-height:.6;color:var(--clr-accent);margin-bottom:var(--sp-2)}
.quote-card figcaption{margin-top:auto;display:flex;align-items:center;gap:var(--sp-3);font-size:var(--text-sm)}
.quote-card figcaption img{width:40px;height:40px;object-fit:cover;border:1px solid var(--clr-border)}
.quote-card figcaption b{display:block;font-weight:600}
.quote-card figcaption span{color:var(--clr-ink-3);font-size:var(--text-xs)}
.price-grid{display:grid;gap:var(--sp-6)}
@media(min-width:768px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.price{background:var(--clr-surface);border:1px solid var(--clr-border);padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4);position:relative}
.price--featured{border-color:var(--clr-ink);box-shadow:var(--shadow-xl)}
.price__flag{position:absolute;top:-1px;right:-1px;background:var(--clr-accent);color:var(--clr-ink-inv);font-size:var(--text-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:6px 12px}
.price__amount{font-family:var(--font-display);font-size:var(--text-6xl);line-height:1}
.price__amount small{font-family:var(--font-ui);font-size:var(--text-base);color:var(--clr-ink-3)}
.price .list{margin-block:var(--sp-2) var(--sp-4)}

/* ---------- 23. Article (blog) ---------- */
.article-hero{padding-top:calc(var(--nav-height) + var(--sp-12));padding-bottom:var(--sp-8)}
.article-hero__title{max-width:22ch;margin-block:var(--sp-6)}
.article-hero__cover{margin-top:var(--sp-10);border:1px solid var(--clr-ink);box-shadow:var(--shadow-xl);overflow:hidden;aspect-ratio:21/9;background:var(--clr-bg-alt)}
.article-hero__cover img{width:100%;height:100%;object-fit:cover}
.byline{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--text-sm)}
.byline img{width:40px;height:40px;object-fit:cover;object-position:50% 25%;border:1px solid var(--clr-ink)}
.byline b{display:block;font-weight:600}
.byline span{color:var(--clr-ink-3);font-size:var(--text-xs)}
.article{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-12)}
.article > *,.cs-layout > *,.split > *,.cs-hero__grid > *{min-width:0}
@media(min-width:1000px){.article{grid-template-columns:minmax(0,1fr) 260px;gap:var(--sp-16)}}
.article__aside{display:grid;gap:var(--sp-6);align-content:start}
@media(min-width:1000px){.article__aside{position:sticky;top:calc(var(--nav-height) + var(--sp-8))}}
.prose-lg{font-size:var(--text-lg)}
.prose blockquote{border-left:2px solid var(--clr-accent);padding-left:var(--sp-6);font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.35;color:var(--clr-ink)}
.prose ol{list-style:none;counter-reset:ol;display:grid;gap:var(--sp-3)}
.prose ol li{counter-increment:ol;position:relative;padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-12);border:1px solid var(--clr-border);background:var(--clr-surface)}
.prose ol li::before{content:counter(ol);position:absolute;left:var(--sp-4);top:var(--sp-4);font-family:var(--font-display);font-size:var(--text-xl);color:var(--clr-accent);line-height:1.3}
.prose a{color:var(--clr-accent);text-decoration:underline;text-underline-offset:3px}
.share{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* ---------- 24. Filter chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--clr-border);background:var(--clr-surface);color:var(--clr-ink-2);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.chip:hover{border-color:var(--clr-ink);color:var(--clr-ink)}
.chip[aria-pressed=true],.chip.is-active{background:var(--clr-ink);color:var(--clr-ink-inv);border-color:var(--clr-ink)}

/* ---------- 25. Interactive checklist (resources) ---------- */
.ck-bar{position:sticky;top:calc(var(--nav-height) + var(--sp-2));z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);justify-content:space-between;background:var(--clr-surface);border:1px solid var(--clr-ink);box-shadow:var(--shadow-card);padding:var(--sp-4) var(--sp-6);margin-bottom:var(--sp-10)}
.ck-bar__score{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1;font-variant-numeric:tabular-nums}
.ck-bar__meter{flex:1 1 160px;height:8px;background:var(--clr-bg-alt);border:1px solid var(--clr-border);position:relative;overflow:hidden}
.ck-bar__meter i{position:absolute;inset:0;background:var(--clr-accent);transform-origin:0 50%;transform:scaleX(0);transition:transform var(--dur-slow) var(--ease-spring)}
.ck-group{margin-bottom:var(--sp-10)}
.ck-group__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.ck-group__head span{font-size:var(--text-xs);font-weight:600;color:var(--clr-ink-3);font-variant-numeric:tabular-nums}
.ck{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6);background:var(--clr-surface);border:1px solid var(--clr-border);margin-top:-1px;cursor:pointer;transition:background var(--dur-fast)}
.ck:hover{background:var(--clr-bg)}
.ck input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:1.5px solid var(--clr-ink);background:var(--clr-surface);display:grid;place-items:center;cursor:pointer;margin-top:2px;transition:background var(--dur-fast)}
.ck input:checked{background:var(--clr-success);border-color:var(--clr-success)}
.ck input:checked::after{content:'✓';color:var(--clr-ink-inv);font-size:14px;font-weight:700;line-height:1}
.ck input:checked + div b{text-decoration:line-through;text-decoration-color:var(--clr-ink-3)}
.ck b{font-weight:600;display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.ck p{font-size:var(--text-sm);color:var(--clr-ink-2);margin-top:var(--sp-1)}
.ck .tag{font-size:10px;padding:1px 6px;border-color:var(--clr-danger);background:transparent;color:var(--clr-danger)}

/* ---------- 26. Timeline (about) ---------- */
.timeline{list-style:none;border-left:2px solid var(--clr-ink);display:grid}
.timeline li{position:relative;padding:0 0 var(--sp-10) var(--sp-8)}
.timeline li::before{content:'';position:absolute;left:-7px;top:6px;width:12px;height:12px;background:var(--clr-bg);border:2px solid var(--clr-ink);transition:background var(--dur-base)}
.timeline li:hover::before{background:var(--clr-accent);border-color:var(--clr-accent)}
.timeline__when{font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--clr-accent)}
.timeline h3{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.2;margin-block:var(--sp-2) var(--sp-1)}
.timeline__where{font-size:var(--text-sm);font-weight:600;color:var(--clr-ink-3);margin-bottom:var(--sp-3)}
.timeline p{color:var(--clr-ink-2);max-width:62ch}

/* ---------- 27. Tool UI ---------- */
.tool{display:grid;gap:var(--sp-6);background:var(--clr-surface);border:1px solid var(--clr-ink);box-shadow:var(--shadow-xl);padding:var(--sp-6)}
@media(min-width:900px){.tool{grid-template-columns:minmax(0,5fr) minmax(0,7fr);padding:var(--sp-8);gap:var(--sp-8)}}
.tool__controls{display:grid;gap:var(--sp-4);align-content:start}
.tool__out{display:grid;gap:var(--sp-4);align-content:start;min-width:0}
.field{display:grid;gap:var(--sp-2)}
.field > span,.field label{font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--clr-ink-3);display:flex;justify-content:space-between;gap:var(--sp-2)}
.field output{color:var(--clr-ink);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.input,.select,.textarea{width:100%;font:500 var(--text-base)/1.4 var(--font-ui);color:var(--clr-ink);background:var(--clr-bg);border:1px solid var(--clr-border);padding:var(--sp-3) var(--sp-4);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--clr-ink);box-shadow:var(--shadow-sm)}
.textarea{min-height:140px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--text-sm);resize:vertical}
.color-field{display:grid;grid-template-columns:48px 1fr;border:1px solid var(--clr-border)}
.color-field input[type=color]{width:48px;height:100%;min-height:46px;border:0;border-right:1px solid var(--clr-border);padding:0;background:none;cursor:pointer}
.color-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-field input[type=color]::-webkit-color-swatch{border:0}
.color-field .input{border:0}
.range{width:100%;accent-color:var(--clr-accent)}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--clr-border);width:max-content;max-width:100%}
.seg button{font:600 var(--text-xs)/1 var(--font-ui);padding:10px 12px;border:0;border-right:1px solid var(--clr-border);background:var(--clr-surface);cursor:pointer;color:var(--clr-ink-2)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--clr-ink);color:var(--clr-ink-inv)}
.stage{border:1px solid var(--clr-border);background:var(--clr-bg);min-height:220px;display:grid;place-items:center;padding:var(--sp-6);overflow:hidden;position:relative;background-image:linear-gradient(45deg,var(--clr-bg-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--clr-bg-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--clr-bg-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--clr-bg-alt) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.code{position:relative;background:var(--clr-bg-invert);color:var(--clr-ink-inv);font:500 var(--text-sm)/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;padding:var(--sp-4) var(--sp-6);padding-right:96px;white-space:pre-wrap;word-break:break-all;min-height:56px}
.code button{position:absolute;top:var(--sp-2);right:var(--sp-2);font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:.07em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--clr-border-dark);background:transparent;color:var(--clr-ink-inv);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.code button:hover{background:var(--clr-ink-inv);color:var(--clr-ink)}
.code button.ok{background:var(--clr-success);border-color:var(--clr-success)}
.big-readout{font-family:var(--font-display);font-size:clamp(var(--text-5xl),7vw,88px);line-height:1;font-variant-numeric:tabular-nums}
.pass-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--clr-border);border-left:1px solid var(--clr-border)}
.pass-grid > div{padding:var(--sp-3) var(--sp-4);border-right:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border);display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--text-sm)}
.pass{font-weight:700;color:var(--clr-success)} .fail{font-weight:700;color:var(--clr-danger)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--clr-border)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--clr-border);white-space:nowrap}
.tbl th{font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--clr-ink-3);background:var(--clr-bg)}

/* ---------- 15. Motion utilities ---------- */
/* Reveal uses `translate` (not `transform`) so it never fights hover lifts */
.rv{opacity:0;translate:0 16px;transition:opacity var(--dur-page) var(--ease-out) calc(var(--i,0) * 80ms),translate var(--dur-page) var(--ease-spring) calc(var(--i,0) * 80ms),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),color var(--dur-slow) var(--ease-out)}
.rv.in{opacity:1;translate:none}
.fade-in{opacity:0;animation:fadeUp .7s var(--ease-spring) forwards;animation-delay:var(--d,0s)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rise{display:block;overflow:hidden;padding-bottom:.08em}
.rise > span{display:inline-block;transform:translateY(105%);animation:rise .9s var(--ease-spring) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;translate:none}.rise > span{transform:none}
  html{scroll-behavior:auto}
}