/* ============================================================
   Shubham Raghav, "Signal"
   Foundation + Hero
   ============================================================ */

/* --- Tokens ------------------------------------------------ */
:root {
  /* Warm light base, ink type, one accent in two tones */
  --paper:       #FBF7F2;  /* warm off-white, never clinical */
  --paper-tint:  #F5EEE4;  /* section band */
  --paper-warm:  #FFFDFA;
  --card:        #FFFFFF;
  --ink:         #17161A;  /* 16.9:1 on paper */
  --ink-2:       #46434E;  /* 9.1:1 */
  --muted:       #6E6A75;  /* 4.9:1, AA for small text */
  --line:        rgba(23, 22, 26, 0.09);
  --line-2:      rgba(23, 22, 26, 0.14);

  /* #FF5A1F is 2.9:1 on paper, so it fills but never carries text.
     --accent-deep is the text-safe tone at 4.8:1. */
  --accent:      #FF5A1F;
  --accent-deep: #C4400A;
  --accent-soft: rgba(255, 90, 31, 0.10);

  /* Legacy aliases, kept so every existing rule keeps resolving */
  --grey-700:    #B9B2A8;
  --grey-500:    #6E6A75;
  --grey-300:    #46434E;
  --grey-100:    #2B2932;
  --white:       #17161A;

  /* Type */
  --display: "Plus Jakarta Sans", "Inter Tight", "Helvetica Neue", Helvetica, sans-serif;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --edge: clamp(1.25rem, 3.5vw, 3rem);
  /* Outer breathing room for every section except the hero. Driven by
     viewport width, not height, so a short laptop does not get starved and
     a tall phone does not get a void. ~1.8x the previous values. */
  --section-y:    clamp(6.5rem, 2.5rem + 12vw, 15rem);
  --section-y-lg: clamp(7.5rem, 3rem + 13.5vw, 17rem);
  --radius: 16px;
  --radius-sm: 10px;

  /* Depth */
  --shadow: 0 1px 2px rgba(23, 22, 26, 0.04), 0 8px 24px rgba(23, 22, 26, 0.06);
  --shadow-lift: 0 2px 6px rgba(23, 22, 26, 0.06), 0 18px 44px rgba(23, 22, 26, 0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #FFFFFF; }

/* Focus: always visible, always accent */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 0 0 6px 6px;
  transition: transform 0.35s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* --- Film grain -------------------------------------------- */
.grain {
  position: fixed;
  inset: -150%;
  z-index: 90;
  pointer-events: none;
  background-image: url("assets/noise.svg");
  background-repeat: repeat;
  opacity: 0.016;
  mix-blend-mode: multiply;
  will-change: transform;
  animation: grain-shift 700ms steps(1, end) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-2%, 1.5%, 0); }
  40%  { transform: translate3d(1.5%, -2%, 0); }
  60%  { transform: translate3d(-1.5%, -1.5%, 0); }
  80%  { transform: translate3d(2%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --- Nav --------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Transparent at the top of the page; a frosted band fades in once the
     user scrolls (.is-scrolled, toggled in JS) so content never shows
     through or collides with the wordmark. Sits above all page content. */
  z-index: 80;
  background: transparent;
  transition: background-color 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Contain the logo/nav to the same 78rem column as the sections and
     footer, so they align with the content on wide screens. */
  padding-block: clamp(1.25rem, 2.6vw, 2rem);
  padding-inline: max(var(--edge), calc((100% - 78rem) / 2));
}
.nav.is-scrolled {
  background-color: rgba(251, 247, 242, 0.75);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}
/* Where blur is unsupported, fall back to the solid page colour so the
   wordmark still never collides with scrolling content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-scrolled { background-color: var(--paper); }
}

/* Two-tone wordmark: "Shubham" ink + "Raghav" muted, a compact brand mark.
   Falls back to "SR" where the full name would crowd the nav. */
.monogram {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(1rem, 0.75rem + 0.7vw, 1.1875rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding: 0.25rem;
  will-change: transform;
}
.monogram__a { color: var(--ink); }
.monogram__b { color: var(--muted); }
.monogram__short { display: none; letter-spacing: 0.06em; }
/* Below 620px the full name would collide with the nav, so show SR */
@media (max-width: 620px) {
  .monogram__full { display: none; }
  .monogram__short { display: inline; }
}

.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);
}
.nav__link {
  position: relative;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0.25rem 0;
  white-space: nowrap;
}
.nav__link-line {
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s var(--ease-out);
}
.nav__link:hover .nav__link-line,
.nav__link:focus-visible .nav__link-line {
  transform: scaleX(1);
  transform-origin: left;
}

/* Contact reads as a small outlined action, quieter than the hero CTA */
.nav__link--btn {
  padding: 0.42rem clamp(0.75rem, 2vw, 1rem);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.nav__link--btn:hover,
.nav__link--btn:focus-visible {
  background-color: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* Four-item nav (WORK / CRESVA / WEBTECH / CONTACT): tighten the tracking,
   gaps, and the Contact button as the viewport narrows so nothing wraps or
   collides with the wordmark, all the way down to 320px. */
@media (max-width: 640px) {
  .nav { gap: 0.7rem; }
  .nav__right { gap: clamp(0.65rem, 2.6vw, 1.1rem); }
  .nav__link { letter-spacing: 0.1em; }
  .nav__link--btn { padding: 0.4rem clamp(0.6rem, 2vw, 0.85rem); }
}
@media (max-width: 400px) {
  .nav { padding-inline: 0.85rem; gap: 0.5rem; }
  .nav__right { gap: 0.5rem; }
  .nav__link { font-size: 0.6875rem; letter-spacing: 0.05em; }
  .nav__link--btn { padding: 0.36rem 0.55rem; }
}

/* --- Hero shell -------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6.5rem, 12vh, 8.5rem) var(--edge) clamp(4.5rem, 9vh, 6rem);
  overflow: hidden;
  isolation: isolate;
  /* Warm wash so the hero is never a plain field */
  background:
    radial-gradient(58% 46% at 84% 12%, rgba(255, 90, 31, 0.16) 0%, rgba(255, 90, 31, 0) 62%),
    radial-gradient(46% 42% at 6% 88%, rgba(255, 149, 71, 0.14) 0%, rgba(255, 149, 71, 0) 64%),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 52%, var(--paper-tint) 100%);
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero__canvas.is-live { opacity: 1; }

/* Scrim: keeps type legible over the field, adds cinematic falloff */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Soft light focus under the type so the serif stays crisp */
  background:
    radial-gradient(50% 32% at 50% 46%, rgba(251, 247, 242, 0.94) 0%, rgba(251, 247, 242, 0.72) 40%, rgba(251, 247, 242, 0) 76%);
}

/* Fallback field (mobile / reduced motion / no WebGL) */
/* The static field is the default, so a JS-less or WebGL-less hero is
   never a blank rectangle. The canvas crossfades over it when it lives. */
.hero__fallback {
  position: absolute;
  inset: 0;
  color: #C9BFB2;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-out);
}
html.webgl-live .hero__fallback { opacity: 0; }
.hero__fallback svg {
  width: 100%;
  height: 100%;
  opacity: 0.9;
}
.hero__fallback-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 34% at 62% 52%, rgba(255, 90, 31, 0.12) 0%, rgba(255, 90, 31, 0) 70%);
}
html.no-webgl .hero__canvas { display: none; }

/* --- Hero content ------------------------------------------ */
.hero__content {
  position: relative;
  width: 100%;
  max-width: 62rem;
}


/* Hero content: value-prop led. The name is only a small signature. */
.hero__kicker {
  font-size: clamp(0.6875rem, 1.3vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__headline {
  margin: clamp(1rem, 2.4vw, 1.5rem) auto 0;
  max-width: 15ch;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2.6rem, 8.6vw, 5.6rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__headline-accent { color: var(--accent-deep); }

.hero__sub {
  margin: clamp(1.1rem, 2.4vw, 1.6rem) auto 0;
  max-width: 52ch;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-2);
}
.hero__sub-lead { display: block; }
.hero__sub-small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86em;
  color: var(--muted);
}

/* Hero CTA: a single primary button */
.hero__actions {
  margin-top: clamp(1.75rem, 3.4vw, 2.5rem);
  display: flex;
  justify-content: center;
}

/* --- Button ------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.0625rem 1.9rem;
  border-radius: 999px;
  /* Ink on bright orange is 5.8:1. White on orange would be 3.1:1 and fail. */
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255, 90, 31, 0.22), 0 12px 28px rgba(255, 90, 31, 0.18);
  /* A calm colour shift, nothing that tracks the cursor */
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, box-shadow 0.25s ease;
}
.btn__arrow {
  width: 17px; height: 17px;
  transition: transform 0.25s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #FFFFFF;
  box-shadow: 0 3px 12px rgba(196, 64, 10, 0.26), 0 14px 32px rgba(196, 64, 10, 0.20);
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(3px); }

/* Secondary button: clearly quieter than the orange primary */
.btn--ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--card);
  border-color: var(--accent);
  color: var(--accent-deep);
  box-shadow: var(--shadow);
}

/* --- Proof: manifesto + numbers ---------------------------- */
.proof {
  position: relative;
  padding: var(--section-y) var(--edge);
}
.proof__inner {
  max-width: 78rem;
  margin: 0 auto;
}

.manifesto { position: relative; }

.manifesto__title {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(2.1rem, 6.4vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
}

/* Each line is its own mask for the word reveal */
.manifesto__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.manifesto__line .word { display: inline-block; will-change: transform; }

.manifesto__line--mute { color: var(--muted); }
.manifesto__line--lead {
  color: var(--ink);
  font-weight: 800;
}

.manifesto__rule {
  display: block;
  width: clamp(4rem, 9vw, 7.5rem);
  height: 2px;
  margin-top: clamp(1.75rem, 3.4vw, 2.5rem);
  background: var(--accent);
  transform-origin: left center;
}

/* Numbers: one solid proof bar */
.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
@media (min-width: 860px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

.stat {
  position: relative;
  background: var(--card);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
  transition: background 0.45s var(--ease-out);
}
.stat:hover { background: var(--paper-warm); }

.stat__value {
  display: block;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

.stat__rule {
  display: block;
  height: 2px;
  width: 2rem;
  margin: clamp(0.85rem, 1.4vw, 1.15rem) 0 clamp(0.7rem, 1.1vw, 0.9rem);
  background: var(--accent);
  border-radius: 2px;
  transform-origin: left center;
}

.stat__label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Demo: guess vs proof ---------------------------------- */
.demo {
  position: relative;
  padding: var(--section-y) var(--edge);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-tint) 0%, var(--paper) 60%);
}
.demo__inner { max-width: 78rem; margin: 0 auto; }
.demo__headline {
  max-width: 22ch;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(1.55rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.demo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
@media (min-width: 860px) {
  .demo__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}
.demo__controls, .demo__results {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.demo__controls { display: flex; flex-direction: column; gap: clamp(1.35rem, 2.6vw, 1.85rem); }

.demo__field { display: flex; flex-direction: column; gap: 0.65rem; }
.demo__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.demo__field label {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; line-height: 1.35;
}
.demo__labelrow output {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--accent-deep); font-variant-numeric: tabular-nums; flex: none;
}

/* Number inputs */
.demo__inputwrap {
  display: flex; align-items: center; gap: 0.55rem;
  background: var(--paper-warm); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 0.55rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.demo__inputwrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.demo__prefix, .demo__suffix { color: var(--muted); font-weight: 600; font-size: 1.05rem; flex: none; }
.demo__inputwrap input {
  flex: 1; width: 100%; min-width: 0; border: none; background: transparent; outline: none;
  font-family: var(--sans); font-size: 1.1rem; font-weight: 600; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.demo__inputwrap input::-webkit-outer-spin-button,
.demo__inputwrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Currency toggle */
.demo__currency { display: inline-flex; gap: 3px; flex: none; }
.demo__cur {
  width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 0.9rem; color: var(--muted);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.demo__cur.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Slider */
.demo__slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 0.35rem 0;
  border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, var(--accent) 0 var(--fill, 44%), var(--line-2) var(--fill, 44%) 100%);
}
.demo__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--card);
  box-shadow: 0 2px 8px rgba(196, 64, 10, 0.35); cursor: pointer;
}
.demo__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--card);
  box-shadow: 0 2px 8px rgba(196, 64, 10, 0.35); cursor: pointer;
}
.demo__slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.demo__hint {
  margin-top: 0.35rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted);
}

/* Results */
.demo__results { display: flex; flex-direction: column; }
.demo__figures {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.demo__fig { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.demo__fig-k {
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}
.demo__fig--reported .demo__fig-k { color: var(--muted); }
.demo__fig--actual .demo__fig-k { color: var(--accent-deep); }
.demo__fig-v {
  font-family: var(--display); font-optical-sizing: auto; font-weight: 800;
  font-size: clamp(1.7rem, 4.4vw, 2.9rem); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.demo__fig--reported .demo__fig-v { color: var(--muted); }
.demo__fig--actual .demo__fig-v { color: var(--accent-deep); }
.demo__fig-sub { font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Split bar */
.demo__bar {
  height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--line-2); margin-top: auto;
}
.demo__bar-incr {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #FF7A45, var(--accent));
  transition: width 0.5s var(--ease-out);
}
.demo__legend {
  display: flex; justify-content: space-between; margin-top: 0.6rem;
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.demo__legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.demo__legend-item::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px;
}
.demo__legend-item--incr::before { background: var(--accent); }
.demo__legend-item--gap::before { background: var(--line-2); }
.demo__gap {
  margin-top: clamp(1.1rem, 2.2vw, 1.5rem); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2);
}
.demo__gap-v {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Honesty note + CTA */
.demo__note {
  margin: clamp(1.75rem, 3.4vw, 2.5rem) 0 0; max-width: 60ch;
  font-size: 0.8125rem; line-height: 1.55; color: var(--muted);
}
.demo__cta { margin-top: clamp(1rem, 2vw, 1.35rem); }

/* Numbers change on drag; kill the bar transition under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .demo__bar-incr { transition: none; }
}

/* --- Craft: expertise + results ---------------------------- */
.craft {
  position: relative;
  padding: var(--section-y) var(--edge);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-tint) 100%);
  border-top: 1px solid var(--line);
}
.craft__inner {
  max-width: 78rem;
  margin: 0 auto;
}

/* Shared block label, echoes the manifesto rule */
.block-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 500;
}
/* Same breath above Results as above the Systems block */
.block-label--results { margin-top: clamp(4.5rem, 8vw, 7.5rem); }
.block-label__rule {
  width: clamp(1.75rem, 3vw, 2.75rem);
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
}

/* Expertise: contained cards with soft depth */
.areas {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.4vw, 1rem);
}
@media (min-width: 760px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
}
.area {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.area:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.area__index {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.area__title {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.area__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 400;
}
.area__line { color: var(--muted); }
.area__metric { color: var(--ink-2); }
.area__metric em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-deep);
}
.area__metric--shift {
  color: var(--ink);
  font-weight: 600;
}

/* Results: the data story */
.results {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.4vw, 1rem);
}
@media (min-width: 720px) {
  .results { grid-template-columns: repeat(2, 1fr); }
}

.result {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.result:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.result__figure {
  display: flex;
  align-items: baseline;
  color: var(--ink);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.result__sign {
  color: var(--accent-deep);
  margin-right: 0.06em;
}
.result__sign--x {
  margin-left: 0.05em;
  margin-right: 0;
  font-size: 0.82em;
}
.result__label {
  margin-top: clamp(0.6rem, 1vw, 0.85rem);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
  max-width: 26ch;
}

/* Charts: ApexCharts, retuned for the light card */
.result__chart {
  width: 100%;
  margin-bottom: clamp(1rem, 1.8vw, 1.35rem);
}
html.js .result__chart { min-height: 200px; }
.result__chart .apexcharts-canvas { background: transparent !important; }

.apexcharts-svg { background: transparent !important; overflow: visible; }
.apexcharts-gridline { stroke: rgba(23, 22, 26, 0.07); }
.apexcharts-xaxis-tick { stroke: transparent; }
.apexcharts-text,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  fill: var(--muted) !important;
}
.apexcharts-datalabel {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* Tooltip: a light card, not the library default */
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip {
  background: #FFFFFF !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lift) !important;
  font-family: var(--sans) !important;
}
.apexcharts-tooltip__inner {
  padding: 0.5rem 0.7rem;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.apexcharts-tooltip__inner b { color: var(--ink); font-weight: 600; }
.apexcharts-tooltip .apexcharts-tooltip-title { display: none; }

/* Data table: the no-JS / no-library truth. Stays for screen readers
   once the chart mounts. */
.result__data {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
  font-size: 0.75rem;
  color: var(--ink-2);
  text-align: left;
}
.result__data caption {
  text-align: left;
  padding-bottom: 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.result__data th,
.result__data td {
  padding: 0.3rem 0.75rem 0.3rem 0;
  border-bottom: 1px solid rgba(23, 22, 26, 0.07);
  font-weight: 400;
}
.result__data thead th {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.result__data tbody th { color: var(--grey-500); }
.result__data tbody td { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Once a chart is live the table goes visually away but stays announced */
.result.is-charted .result__data {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Load veil: covers the font swap and split, pure CSS so a JS
   failure can never trap the page behind it ------------------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--paper);
  pointer-events: none;
  opacity: 0;
}
html.js .veil {
  opacity: 1;
  animation: veil-out 0.9s var(--ease-out) 0.2s forwards;
}
@keyframes veil-out {
  to { opacity: 0; visibility: hidden; }
}

/* --- Scroll progress: one continuous thread down the page ---- */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* --- Shared link treatment ---------------------------------- */
.link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.15rem 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.4s var(--ease-out);
}
.link--sm { font-size: 0.6875rem; color: var(--muted); }
.link:hover, .link:focus-visible { color: var(--accent-deep); }
.link__arrow {
  font-size: 0.8em;
  transition: transform 0.4s var(--ease-out);
}
.link:hover .link__arrow { transform: translate(2px, -2px); }
.link__line {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  opacity: 0.9;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.link:hover .link__line,
.link:focus-visible .link__line {
  transform: scaleX(1);
  transform-origin: left;
}
/* Placeholder href, obvious on sight */
.link[data-placeholder] { color: var(--grey-500); }
.link[data-placeholder]::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
  align-self: center;
}

/* --- Case studies -------------------------------------------- */
.case {
  position: relative;
  padding: var(--section-y) var(--edge);
  border-top: 1px solid var(--line);
}
.case__inner { max-width: 78rem; margin: 0 auto; }

/* Two blocks, one language. The second is set off by a hairline and
   generous air rather than a box. */
.cs {
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.cs--lead {
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(255, 90, 31, 0.07) 0%, rgba(255, 90, 31, 0) 60%),
    var(--card);
}
.cs + .cs { margin-top: clamp(1rem, 2vw, 1.5rem); }

.cs__tag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.cs__tag-num { color: var(--accent-deep); font-weight: 600; }
.cs__tag-sep { color: var(--line-2); }

.cs__client {
  margin: 0 0 clamp(2.25rem, 4.5vw, 3.25rem);
  /* 22ch resolved to 15.6em, but the longest client line needs 15.9em, so
     it wrapped at every width. 26ch (18.4em) keeps it on one line. It still
     wraps on mobile, where one line cannot fit. */
  max-width: 26ch;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  /* Case 02 sits a step down from the flagship */
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
}
.cs--lead .cs__client { font-size: clamp(1.9rem, 4.6vw, 3.6rem); }

.cs__story { border-top: 1px solid var(--line); }
.cs__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) {
  .cs__row {
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    gap: 2rem;
    align-items: baseline;
  }
}
.cs__key {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.cs__val {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(0.95rem, 1.25vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-2);
}
.cs__win { color: var(--ink); font-weight: 600; }
.cs__win em {
  font-style: normal;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15em;
  letter-spacing: -0.02em;
  color: var(--accent-deep);
}

/* Testimonial slot: styles stand ready for a real quote (see the
   commented slot in the markup). Nothing renders until one exists. */
.cs__quote {
  max-width: 46rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-left: clamp(1.25rem, 2.4vw, 1.75rem);
  border-left: 1px solid var(--accent);
}
.cs__quote-text {
  margin: 0;
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cs__quote-by {
  margin-top: 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- About ---------------------------------------------------- */
.about {
  position: relative;
  padding: var(--section-y) var(--edge);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-tint) 0%, var(--paper) 60%);
}
.about__inner { max-width: 78rem; margin: 0 auto; }

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 860px) {
  .about__grid {
    /* A narrower portrait and a wider gap hand the text column real room */
    grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr);
    gap: clamp(3.5rem, 6vw, 5.5rem);
  }
  /* Keeps the paragraphs off the container edge, which they hugged at
     around 900px wide */
  .about__copy { padding-right: clamp(0.75rem, 1.5vw, 1.5rem); }
}

/* Portrait: duotone, not a boxed headshot */
.about__portrait { margin: 0; }
.about__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-tint);
  aspect-ratio: 4 / 5;
  isolation: isolate;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Built blind, a full duotone drained the warmth out of the real
     portrait. This keeps the skin tone and the smile, and only unifies. */
  filter: grayscale(0.22) contrast(1.03) saturate(1.06);
}
/* Accent wash + ink floor: the duotone itself */
.about__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* An even warm wash rather than a wash that pools at the top */
  background:
    linear-gradient(180deg, rgba(255, 90, 31, 0.09) 0%, rgba(255, 149, 71, 0.05) 100%);
  mix-blend-mode: multiply;
}
/* Graceful degradation: the frame still reads as intentional */
.about__fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: 0.06em;
  color: #C9BFB2;
}
.about__frame.is-missing {
  background:
    radial-gradient(70% 50% at 50% 60%, rgba(255, 90, 31, 0.12) 0%, rgba(255, 90, 31, 0) 70%),
    var(--paper-tint);
}
.about__frame.is-missing .about__fallback { display: flex; }
.about__frame.is-missing .about__grade { display: none; }

.about__copy { max-width: 44rem; }
.about__lead {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
}
.about__lead strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1em;
  letter-spacing: -0.02em;
  color: var(--accent-deep);
}
.about__body {
  font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-2);
}
.about__body + .about__body { margin-top: 1.15rem; }
.about__body--now { color: var(--ink-2); }
.inline-link {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.4s var(--ease-out);
}
.inline-link:hover { color: var(--accent-deep); }

/* --- Systems -------------------------------------------------- */
/* A clear breath between the About copy and the Systems block */
.systems { margin-top: clamp(4.5rem, 8vw, 7.5rem); }
.block-label--sub { margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem); }

.systems__lede {
  max-width: 28ch;
  margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.systems__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.4vw, 1rem);
}
@media (min-width: 760px) {
  .systems__list { grid-template-columns: repeat(2, 1fr); }
}
.system {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.system:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.system__index {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.system__title {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.system__body {
  margin: 0;
  max-width: 52ch;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
}
.system__win { color: var(--ink-2); font-weight: 500; }
.system__win em {
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1em;
  color: var(--accent-deep);
}

/* --- Brands strip --------------------------------------------- */
.brands {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.brands__label {
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.brands__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
}
.brand {
  display: flex;
  align-items: center;
  filter: grayscale(1);
  opacity: 0.8;
  transition: opacity 0.5s var(--ease-out), filter 0.5s var(--ease-out);
}
.brand:hover { opacity: 1; filter: grayscale(0); }
/* Typographic fallback: the strip looks intentional with no logo files */
.brand__name {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
/* A real logo file, once dropped in, quietly takes over */
.brand__logo {
  height: clamp(1.5rem, 2.6vw, 2rem);
  width: auto;
  object-fit: contain;
}

/* In-page nav targets clear the fixed header on the native-scroll fallback */
.case, .contact, #cresva { scroll-margin-top: clamp(5rem, 10vh, 6.5rem); }

/* --- Cresva: what I'm building ------------------------------- */
.cresva {
  position: relative;
  padding: var(--section-y) var(--edge);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(46% 44% at 90% 8%, rgba(255, 90, 31, 0.07) 0%, rgba(255, 90, 31, 0) 62%),
    var(--paper-tint);
}
.cresva__inner { max-width: 62rem; margin: 0 auto; }
.cresva__name {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(1.95rem, 5.25vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.cresva__tagline {
  margin-top: clamp(0.5rem, 1.4vw, 0.9rem);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.87rem, 1.75vw, 1.33rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--accent-deep);
}
.cresva__body {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  max-width: 62ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--ink-2);
}
.cresva__cta { margin-top: clamp(1.75rem, 3.4vw, 2.5rem); }

/* Cresva + WebTech read as equals. Stacked by default (Cresva then WebTech),
   separated by the same hairline and generous air as before; two equal
   columns side by side from 900px up, split by a vertical hairline. */
.cresva__col + .cresva__col {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .cresva__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .cresva__col { display: flex; flex-direction: column; }
  /* Both buttons pin to the bottom so they align despite uneven copy. */
  .cresva__col .cresva__cta {
    margin-top: auto;
    padding-top: clamp(1.75rem, 3.4vw, 2.5rem);
  }
  .cresva__col:first-child { padding-right: clamp(1.75rem, 4vw, 3rem); }
  .cresva__col + .cresva__col {
    margin-top: 0;
    padding-top: 0;
    padding-left: clamp(1.75rem, 4vw, 3rem);
    border-top: none;
    border-left: 1px solid var(--line);
  }
}
.cresva__sub-name {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cresva__sub-tagline {
  margin-top: clamp(0.35rem, 1vw, 0.55rem);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.4vw, 0.95rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--accent-deep);
}
.cresva__sub-body {
  margin-top: clamp(0.6rem, 1.4vw, 0.9rem);
  max-width: 52ch;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.cresva__sub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: clamp(1rem, 2vw, 1.4rem);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.4s var(--ease-out);
}
.cresva__sub-link:hover,
.cresva__sub-link:focus-visible { color: var(--accent-deep); }
.cresva__sub-arrow {
  width: 1em;
  height: 1em;
  transition: transform 0.4s var(--ease-out);
}
.cresva__sub-link:hover .cresva__sub-arrow,
.cresva__sub-link:focus-visible .cresva__sub-arrow {
  transform: translateX(3px);
}

/* --- Contact ------------------------------------------------- */
.contact {
  position: relative;
  padding: var(--section-y-lg) var(--edge) var(--section-y);
  text-align: center;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(255, 90, 31, 0.14) 0%, rgba(255, 90, 31, 0) 62%),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper-tint) 100%);
}
.contact__inner { max-width: 60rem; margin: 0 auto; }

.contact__title {
  margin: 0 0 clamp(1.75rem, 3.4vw, 2.5rem);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--muted);
}
.contact__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.contact__line--lead { color: var(--ink); font-weight: 800; }
.contact__line > span { display: block; will-change: transform; }

.contact__actions { margin-bottom: clamp(2rem, 4vw, 3rem); }
.btn--lg {
  padding: 1.25rem 2.25rem;
  font-size: 0.875rem;
}

.contact__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}

/* --- Footer -------------------------------------------------- */
.footer {
  padding: clamp(2rem, 3.5vw, 2.75rem) var(--edge);
  border-top: 1px solid var(--line-2);
  background: var(--paper-tint);
}
.footer__inner {
  max-width: 78rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.footer__left {
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.footer__sep { color: var(--muted); }
.footer__social {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* pull the glyphs flush to the container edge on desktop */
  margin-right: -8px;
}
/* Icon links: 40px tap target, muted by default, brand colour on hover */
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.social svg { width: 20px; height: 20px; display: block; }
.social:hover, .social:focus-visible { background-color: rgba(23, 22, 26, 0.05); }
.social--gmail:hover, .social--gmail:focus-visible { color: #EA4335; }
.social--linkedin:hover, .social--linkedin:focus-visible { color: #0A66C2; }
.social--linktree:hover, .social--linktree:focus-visible { color: #43E660; }
/* Mobile: left block above, icons below, flush-left */
@media (max-width: 560px) {
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__social { margin-right: 0; margin-left: -8px; }
}
.footer__name {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.footer__year {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- Entrance guards (JS-only) ----------------------------- */
html.js [data-fade],
html.js [data-lines],
html.js [data-name] { opacity: 0; }

/* --- Responsive -------------------------------------------- */
@media (max-width: 720px) {
  .hero {
    padding-bottom: clamp(5.5rem, 16vh, 8rem);
  }
  .hero__scrim {
    background:
      radial-gradient(130% 70% at 50% 38%, rgba(251, 247, 242, 0) 20%, rgba(251, 247, 242, 0.5) 78%),
      linear-gradient(to top, rgba(251, 247, 242, 0.95) 8%, rgba(251, 247, 242, 0.35) 48%, rgba(251, 247, 242, 0.2) 100%);
  }
  .hero__sub { max-width: 34ch; }
}

/* --- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-fade],
  html.js [data-lines],
  html.js [data-name] { opacity: 1; }
  html.js .manifesto__rule,
  html.js .stat__rule,
  html.js .block-label__rule { transform: scaleX(1); }
}