/* ═══════════════════════════════════════════════════════════════════════════
   sampoursoltan.com — all styles.

   Dark-only by design. There is no light palette and no theme toggle: a
   toggle needs JavaScript, and this site ships none (see _headers — the CSP
   sets script-src 'none'). `color-scheme: dark` makes browser chrome
   (scrollbars, form controls) render dark too, so nothing flashes white.

   Contents:
     1. Tokens          6. Buttons        11. Cases
     2. Base            7. Focus cards    12. About
     3. Nav             8. Stats          13. Contact / footer
     4. Hero            9. Offer          14. Media queries
     5. Eyebrows       10. Timeline
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Fonts ──────────────────────────────────────────────────────────────
   Self-hosted (assets/fonts/) so the CSP stays at default-src 'self' and the
   site keeps making zero external requests. Both are Google-Fonts variable
   latin subsets: Inter carries 400–600 body text, Space Grotesk the display
   sizes. font-display:swap — system fallbacks render instantly, fonts arrive
   ~60 KB later. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
}

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
  color-scheme: dark;

  --bg:#0B0E13;          /* page ground — near-black, slight blue cast     */
  --surface:#12171F;     /* cards                                          */
  --surface-2:#161C26;   /* raised / hover                                 */
  --line:#1F2731;        /* hairlines                                      */
  --fg:#DDE3EA;          /* body text          — 13.6:1 on --bg            */
  --head:#F2F5F9;        /* headings                                       */
  --muted:#8A95A3;       /* secondary text     —  5.9:1 on --bg            */
  --bright:#B3BECC;      /* lede / emphasis-muted                          */
  --accent:#7CB0F0;      /* links, rules, CTA  —  8.4:1 on --bg            */
  --accent-dim:#3C5F8C;
  --amber:#E8B04B;       /* emphasis: stats, highlights, tags — 9.1:1      */
  --amber-dim:rgba(232,176,75,.16);
  --on-accent:#07101C;   /* text on an accent fill                         */

  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --r:12px;              /* one radius for every box — no exceptions       */
  --box-pad:1.5rem;      /* one padding for every box                      */
  --max:68rem;           /* full container — nav, rules, hero              */
  --prose:42rem;         /* text column — ~75 characters, still capped     */
  --nav-h:3.6rem;
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 16.5px/1.65 var(--sans);
  letter-spacing:.001em;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* ── Wallpaper ──────────────────────────────────────────────────────────────
   A fixed background layer: two brand-colour orbs drifting on 70/90-second
   loops and a faint dot grid panning over two minutes. All CSS — transform-
   only animations, so they run on the compositor and cost nothing after
   first paint. Deliberately near-invisible: the page should feel alive on a
   second look, not animated on the first. The global prefers-reduced-motion
   rule freezes all of it into a static wallpaper. */
.bg{position:fixed; inset:0; overflow:hidden; pointer-events:none}
/* Film-grain layer: a tiny tiled noise PNG (data URI, ~5 KB). Grain is what
   makes flat digital color read as material. */
.bg::after{
  content:""; position:absolute; inset:0;
  background:url(data:image/png;base64,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) repeat;
  opacity:.5;
}
.bg-orb{position:absolute; width:58rem; height:58rem; border-radius:50%}
.bg-orb-a{
  top:-22%; left:-12%;
  background:radial-gradient(circle, rgba(124,176,240,.10), transparent 62%);
  animation:drift-a 70s ease-in-out infinite alternate;
}
.bg-orb-b{
  bottom:-28%; right:-16%;
  background:radial-gradient(circle, rgba(232,176,75,.07), transparent 62%);
  animation:drift-b 90s ease-in-out infinite alternate;
}
@keyframes drift-a{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(5rem,3rem) scale(1.12)}
}
@keyframes drift-b{
  from{transform:translate(0,0) scale(1.08)}
  to{transform:translate(-4rem,-3rem) scale(.96)}
}
.bg-grid{
  position:absolute; top:-40%; left:-40%; width:180%; height:180%;
  background-image:radial-gradient(rgba(124,176,240,.05) 1px, transparent 1.5px);
  background-size:34px 34px;
  /* only faintly visible up near the hero, gone by mid-page */
  -webkit-mask-image:radial-gradient(90rem 55rem at 28% 12%, #000, transparent 68%);
  mask-image:radial-gradient(90rem 55rem at 28% 12%, #000, transparent 68%);
  animation:grid-pan 120s linear infinite alternate;
}
@keyframes grid-pan{
  from{transform:translate(0,0)}
  to{transform:translate(48px,30px)}
}

main{position:relative; max-width:var(--max); margin:0 auto; padding:0 1.5rem}
.prose{max-width:var(--prose)}

::selection{background:var(--accent); color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

h1,h2{font-family:var(--display); color:var(--head); line-height:1.12; margin:0}
h1{font-size:clamp(2.3rem,6.4vw,3.6rem); font-weight:600; letter-spacing:-.03em}
h2{font-size:clamp(1.55rem,3.6vw,2.05rem); font-weight:600; letter-spacing:-.024em}
/* The two headings that carry the argument (the problem, the offer) sit a
   step above ordinary section headings. */
h2.h-key{font-size:clamp(1.85rem,4.6vw,2.5rem)}
h3{font-family:var(--sans); color:var(--head); line-height:1.3; letter-spacing:-.008em;
   font-size:1rem; font-weight:600; margin:0}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}
strong{color:var(--head); font-weight:600}
ul{margin:0; padding:0; list-style:none}
img{max-width:100%; display:block}

a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-dim);
  transition:border-color .15s ease, color .15s ease}
a:hover{border-bottom-color:var(--accent)}

/* Hero gradient phrase: blue into amber, the page's two accents in one arc. */
.grad{
  background:linear-gradient(100deg,#8FBCF4 10%,#B9CFF0 45%,#E8B04B 90%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
@supports not (background-clip:text){ .grad{color:var(--accent)} }

/* Inline highlight for the few phrases that carry the argument.
   A thick, offset text-decoration rather than a background gradient: the
   decoration anchors to the baseline, so it sits identically in tight
   headings and loose body text, and survives line wraps. */
.hl{
  color:var(--head);
  text-decoration:underline;
  text-decoration-color:rgba(232,176,75,.45);
  text-decoration-thickness:.38em;
  text-underline-offset:-.08em;
  text-decoration-skip-ink:none;
}

/* Sections scroll to just below the sticky nav. */
section{padding:4rem 0 0; scroll-margin-top:calc(var(--nav-h) + 1.25rem); position:relative}
/* Editorial ghost numerals: each section carries its index, barely there. */
section[data-n]::before{
  content:attr(data-n);
  position:absolute; top:2.2rem; right:0;
  font:600 clamp(4rem,9vw,6.5rem)/1 var(--display); letter-spacing:-.04em;
  color:rgba(124,176,240,.05);
  pointer-events:none;
}

.muted{color:var(--muted)}
.meta{font:.8rem/1.6 var(--mono); color:var(--muted); letter-spacing:.01em; margin:1.5rem 0 0}

/* ── 3. Nav ────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:10;
  background:rgba(11,14,19,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:0 1.5rem;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{
  display:flex; align-items:center; gap:.65rem;
  font:600 .95rem/1 var(--display); color:var(--head); border-bottom:0;
}
.brand-mark{
  transition:transform .2s ease;
  width:1.9rem; height:1.9rem; border-radius:7px;
  background:var(--surface-2); border:1px solid var(--line);
  display:grid; place-items:center;
  font:600 .72rem/1 var(--sans); color:var(--accent); letter-spacing:.05em;
}
.nav-links{
  display:flex; gap:1.6rem;
  overflow-x:auto; scrollbar-width:none;   /* horizontal scroll on narrow screens */
}
.nav-links::-webkit-scrollbar{display:none}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.07)}
.nav-links a{
  font:500 .84rem/1 var(--sans); color:var(--muted);
  border-bottom:0; padding:.4rem 0 .45rem; white-space:nowrap;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat left bottom / 0% 1.5px;
  transition:color .15s ease, background-size .22s ease;
}
.nav-links a:hover{color:var(--head); background-size:100% 1.5px}
.nav-cta{
  font:600 .8rem/1 var(--sans); color:var(--on-accent);
  background:var(--accent); border-bottom:0; border-radius:6px;
  padding:.5rem .9rem; white-space:nowrap;
}
.nav-cta:hover{background:#9AC3F5}

/* ── 4. Hero ───────────────────────────────────────────────────────────── */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 16rem;
  gap:3.5rem; align-items:center;
  padding:3.5rem 0 .5rem;
}
/* The framed figure sits first in the DOM (so it can float on phones) but
   renders in the right-hand column on wide screens. */
.hero > div:not(.portrait-frame){grid-column:1; grid-row:1}
.hero .portrait-frame{grid-column:2; grid-row:1}
.role{
  font:500 .78rem/1 var(--mono);
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.1rem;
}
.lede{font-size:1.25rem; line-height:1.6; color:var(--bright); margin:1.3rem 0 0; max-width:34rem}

.portrait-frame{position:relative}
.portrait-frame::before{        /* offset accent frame behind the photo */
  content:""; position:absolute; inset:.9rem -.9rem -.9rem .9rem;
  border:1px solid rgba(232,176,75,.35); border-radius:var(--r);
}
.portrait-frame::after{         /* soft glow pooling behind it */
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(closest-side, rgba(124,176,240,.14), transparent);
  z-index:-1;
}
.portrait{
  position:relative;
  margin:0; width:100%; aspect-ratio:4/5;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(160deg,var(--surface-2),var(--bg) 70%);
  display:grid; place-items:center; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.portrait img{width:100%; height:100%; object-fit:cover}
.mark{font:600 2.6rem/1 var(--sans); letter-spacing:.06em; color:var(--accent-dim)}

/* ── 4b. Client wordmarks ──────────────────────────────────────────────────
   Deliberately text, not trademarked logo artwork: subtle by design, no
   licensing baggage, zero requests. Low-contrast; hover restores full text
   colour. */
.clients{
  margin-top:2.75rem; padding-top:1.4rem; border-top:1px solid var(--line);
}
.clients p{
  font:500 .66rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.1rem;
}
.marquee{
  display:flex; gap:3.5rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee ul{
  display:flex; gap:3.5rem; align-items:baseline; flex-shrink:0; min-width:max-content;
  animation:marquee 36s linear infinite;
}
.marquee:hover ul{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-100% - 3.5rem))}}
.clients li{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  letter-spacing:-.01em; color:var(--muted); opacity:.8;
}

/* ── 5. Eyebrows ───────────────────────────────────────────────────────── */
.eyebrow{
  font:500 .7rem/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
  display:flex; align-items:center; gap:.75rem;
  margin:0 0 1.4rem;
}
.eyebrow::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent)}

/* ── 6. Buttons ────────────────────────────────────────────────────────── */
.actions{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin:2rem 0 0}
.btn{
  display:inline-block; padding:.72rem 1.35rem; border-radius:7px;
  font:600 .93rem/1.2 var(--sans); border:1px solid transparent;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease,
             transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1.5px)}
.btn:active{transform:translateY(0); transition-duration:.05s}
.btn{position:relative; overflow:hidden}
.btn-primary{background:linear-gradient(135deg,#93BFF5,#6FA6E9); color:var(--on-accent)}
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.4) 50%,transparent 58%);
  transform:translateX(-130%);
}
.btn-primary:hover::after{transform:translateX(130%); transition:transform .55s ease}
.btn-primary:hover{background:#9AC3F5; box-shadow:0 6px 20px rgba(124,176,240,.28)}
.btn-ghost{color:var(--fg); border-color:var(--line); background:transparent}
.btn-ico{width:1.05em; height:1.05em; vertical-align:-.16em; margin-right:.5rem}
.btn-ghost:hover{border-color:var(--accent-dim); color:var(--head); background:var(--surface)}

/* ── 7. Focus cards ────────────────────────────────────────────────────── */
.cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
  margin-top:2rem;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 45%), var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  padding:var(--box-pad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
/* No hover state on purpose: these aren't links, and a hover that lights a
   box up promises a click it can't deliver. Hover feedback lives only on
   real controls — nav, buttons, links, FAQ summaries. */
.card img{width:2.4rem; height:2.4rem; margin-bottom:1rem}
.card h3{margin-bottom:.5rem}
.card p{font-size:.95rem; line-height:1.6; color:var(--muted); margin:0}

/* ── 8. Stats ──────────────────────────────────────────────────────────── */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin:2rem 0;
}
.stat{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%), var(--surface); padding:1.4rem var(--box-pad); box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.stat b{
  display:block; font:600 clamp(1.9rem,5vw,2.5rem)/1 var(--display);
  letter-spacing:-.035em; color:var(--amber); font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#F5D08C,#E8B04B); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;
}
.stat b i{font-style:normal; font-size:.55em; color:var(--muted);
          vertical-align:.12em; margin-right:.05em; letter-spacing:0}
.stat span{display:block; margin-top:.6rem; font-size:.9rem; line-height:1.5; color:var(--fg)}
.stat cite{
  display:block; margin-top:.5rem; font:.68rem/1.4 var(--mono);
  font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}

/* ── 9. Tiers (the offerings ladder) ───────────────────────────────────── */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; align-items:stretch}
.tier{
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%), var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:var(--r);
  padding:var(--box-pad); display:flex; flex-direction:column; gap:.75rem;
}
.tier p{margin:0; font-size:.95rem; line-height:1.6; color:var(--muted)}
.tier .btn{margin-top:auto; text-align:center}
.tier-featured h3{font-size:1.15rem}
.tier-featured{
  border-color:rgba(232,176,75,.45);
  background:linear-gradient(180deg, rgba(232,176,75,.06), transparent 45%),
             linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%), var(--surface);
  box-shadow:0 0 44px rgba(232,176,75,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
.tag{
  align-self:flex-start;
  font:600 .66rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); background:var(--amber-dim);
  border:1px solid rgba(232,176,75,.3); border-radius:99px;
  padding:.35rem .7rem;
}
.tag-dim{color:var(--muted); background:var(--surface-2); border-color:var(--line)}
.tier-terms{font:.8rem/1.5 var(--mono); color:var(--fg) !important; letter-spacing:.01em}
.tier-terms b{color:var(--amber); font-weight:600}

/* ── 9b. Cost note + principles ────────────────────────────────────────── */
.costnote{
  border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:var(--r); background:var(--surface);
  padding:var(--box-pad); margin-top:1.5rem;
}
.costnote h3{margin-bottom:.6rem}
.costnote li{
  padding:.35rem 0 .35rem 1.5rem; position:relative;
  font-size:.95rem; color:var(--fg);
}
.costnote li::before{content:"→"; position:absolute; left:0; color:var(--amber); font:.9rem/1.7 var(--mono)}

.principles{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin-top:1.5rem;
}
.principles > div{background:var(--surface); padding:1.25rem var(--box-pad)}
.principles h3{font-size:.9rem; margin-bottom:.3rem}
.principles p{margin:0; font-size:.85rem; line-height:1.55; color:var(--muted)}

/* ── 10. Creds (why me) ────────────────────────────────────────────────── */
.creds{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem 0 1rem}
.cred{border-left:3px solid var(--amber); padding:.2rem 0 .2rem 1.1rem}
.cred h3{color:var(--amber); font-size:.95rem; margin-bottom:.3rem}
.cred p{margin:0; font-size:.95rem; line-height:1.6; color:var(--fg)}

/* ── 11. Cases ─────────────────────────────────────────────────────────── */
.case{
  border-top:1px solid var(--line);
  padding:1.6rem 0;
  display:grid; grid-template-columns:2.5rem 1fr; gap:.4rem 1rem;
}
.case:first-of-type{border-top:0}
.case .n{font:.75rem/1.7 var(--mono); color:var(--accent); letter-spacing:.08em}
.case h3{margin:0 0 .5rem}
.case p{max-width:var(--prose); font-size:.95rem; margin:0}

/* ── 12. About ─────────────────────────────────────────────────────────── */
.about{
  display:grid; grid-template-columns:minmax(0,1fr) 15rem;
  gap:3rem; align-items:start;
}
.about .portrait{max-width:15rem}

/* ── 12b. Fit (who this is for) ────────────────────────────────────────── */
.fit{display:grid; grid-template-columns:3fr 2fr; gap:1rem 3rem; margin-top:.5rem}
.checks li, .crosses li{
  padding:.5rem 0 .5rem 1.7rem; position:relative;
  font-size:.95rem; border-top:1px solid var(--line);
}
.checks li:first-child, .crosses li:first-child{border-top:0}
.checks li::before{
  content:"✓"; position:absolute; left:0; color:var(--amber);
  font:600 .95rem/1.7 var(--mono);
}
.crosses li{color:var(--muted)}
.crosses li::before{
  content:"✕"; position:absolute; left:0; color:var(--muted);
  font:600 .85rem/1.8 var(--mono);
}

/* ── 12c. FAQ (native <details> accordion, zero JS) ────────────────────── */
.faq{margin-top:.5rem}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{
  cursor:pointer; list-style:none;
  padding:1rem 2.2rem 1rem 0; position:relative;
  font-weight:600; color:var(--head); font-size:.98rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:.25rem; top:50%;
  transform:translateY(-50%);
  color:var(--amber); font:400 1.3rem/1 var(--mono);
  transition:transform .15s ease;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq details p{
  margin:0; padding:0 0 1.15rem;
  max-width:var(--prose); font-size:.95rem; color:var(--muted);
}

/* FAQ answers glide open in engines with interpolate-size; elsewhere they
   simply snap, which is what <details> always did. */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{
    height:0; overflow:clip;
    transition:height .28s ease, content-visibility .28s allow-discrete;
  }
  .faq details[open]::details-content{height:auto}
}

/* ── 13. Contact / footer ──────────────────────────────────────────────── */
.contact{
  border:1px solid var(--line); border-radius:var(--r);
  background:
    radial-gradient(40rem 18rem at 15% -30%, rgba(124,176,240,.10), transparent 60%),
    radial-gradient(30rem 16rem at 95% 130%, rgba(232,176,75,.07), transparent 60%),
    var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  padding:2.5rem; margin-top:1.75rem;
}
footer{
  max-width:var(--max); margin:4rem auto 0; padding:1.5rem 1.5rem 3rem;
  border-top:1px solid var(--line);
  font:.76rem/1.7 var(--mono); letter-spacing:.03em; color:var(--muted);
}
footer p{margin:0}

/* ── 13b. Back to top ──────────────────────────────────────────────────── */
.totop{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:20;
  width:2.9rem; height:2.9rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--accent); font:600 1.1rem/1 var(--sans);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.totop{transition:transform .15s ease, border-color .15s ease, background-color .15s ease}
.totop:hover{border-color:var(--accent-dim); background:var(--surface); transform:translateY(-2px)}
/* Where scroll-driven animations exist, keep it hidden until the page has
   actually been scrolled; elsewhere it simply stays visible. No JS. */
@supports (animation-timeline: scroll()) {
  .totop{
    opacity:0; pointer-events:none;
    animation:totop-reveal linear both;
    animation-timeline:scroll(root);
    animation-range:0 60vh;
  }
  @keyframes totop-reveal{
    0%,70%{opacity:0; pointer-events:none}
    100%{opacity:1; pointer-events:auto}
  }
}

/* ── 13c. Scroll reveals ────────────────────────────────────────────────────
   Cards, stats, tiers, creds and cases rise gently as they enter the
   viewport, via CSS scroll-driven animations. Progressive enhancement:
   engines without view() timelines show everything static, and the global
   prefers-reduced-motion rule disables it entirely. Transform+opacity only,
   so it stays on the compositor. Hover stays reserved for clickable things —
   motion for non-interactive content comes from scrolling, not the cursor. */
@supports (animation-timeline: view()){
  .card,.stat,.tier,.cred,.case,.principles > div{
    animation:rise-in both;
    animation-timeline:view();
    animation-range:entry 0% entry 45%;
  }
  @keyframes rise-in{
    from{opacity:.15; transform:translateY(14px)}
    to{opacity:1; transform:none}
  }
}

/* ── 14. Media queries ─────────────────────────────────────────────────── */
@media (max-width:52rem){
  .tiers{grid-template-columns:1fr}
  .principles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:46rem){
  /* Hero: the avatar floats top-right and the text wraps around it, so only
     the headline shares the row — the lede gets the full width back. */
  .hero{display:block; padding-top:2.5rem}
  .hero .portrait-frame{float:right; width:5.5rem; margin:.2rem 0 .9rem 1.1rem}
  .hero .portrait{width:100%; aspect-ratio:1; border-radius:var(--r)}
  .portrait-frame::before,.portrait-frame::after{display:none}  /* decorations need room */
  .hero .actions{clear:both}
  .creds{grid-template-columns:1fr; gap:1.1rem}
  .cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .fit{grid-template-columns:1fr; gap:0}
  .crosses li:first-child{border-top:1px solid var(--line)}
  section[data-n]::before{display:none}
  .marquee, .marquee ul{gap:2rem}
  @keyframes marquee{to{transform:translateX(calc(-100% - 2rem))}}
  .clients li{font-size:.95rem}
  /* Fade hint on the right edge of the scrolling nav row. */
  .nav-links{mask-image:linear-gradient(90deg,#000 82%,transparent);
             -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent)}
}
@media (max-width:34rem){
  body{font-size:15.5px}
  main{padding:0 1.15rem}
  section{padding-top:3rem}
  .contact,.tier,.costnote{padding:1.3rem}
  .case{grid-template-columns:1fr; gap:.35rem}
  .case .n{line-height:1.2}
  .principles{grid-template-columns:1fr}
  /* Primary action full-width; the secondary links share one row. */
  .actions{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem}
  .actions .btn-primary{grid-column:1 / -1; text-align:center}
  .actions .btn-ghost{display:flex; align-items:center; justify-content:center;
                      padding:.55rem .4rem; font-size:.85rem}
  .totop{right:.9rem; bottom:.9rem; width:2.6rem; height:2.6rem}
  .nav-inner{padding:0 1.15rem; gap:1rem}
  .nav-links{gap:1.1rem}
  .brand span:last-child{display:none}
  .stat{padding:1.2rem 1.25rem}
}
@media print{
  body::before,body::after{display:none}
  .nav{display:none}
  body{background:#fff; color:#000}
}