/* ==========================================================================
   sanikaric.com
   Design system: deep charcoal base, single amber accent, precise type.
   Built 2026-07-21. Zero external requests: fonts are self hosted.
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   Geist and Geist Mono, self hosted, OFL licensed (see assets/fonts/OFL.txt).
   Variable weight 100 to 900 in one file each, so the whole weight range costs
   two requests. font-display:swap means text paints immediately in the fallback
   and reflows once, rather than blocking first paint.
   Same family the Swiss Knife sites use, which quietly ties the ecosystem
   together without copying its layout. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* surface */
  --bg:            #0B0C0F;
  --surface:       #121419;
  --surface-2:     #191C22;
  --surface-3:     #21252D;

  /* line */
  --border:        #262A33;
  --border-bright: #363C48;

  /* ink */
  --text:          #F4F5F7;
  --text-dim:      #A2A9B6;
  /* Lightened from #6C7481 on 2026-07-24: real small text set in it measured
     3.6:1 to 4.2:1 on the three surfaces, under AA. #838B99 clears 4.5:1 on
     --bg, --surface and --surface-2. Recheck contrast before darkening. */
  --text-faint:    #838B99;

  /* accent */
  --accent:        #FFB224;
  --accent-hover:  #FFC24D;
  --accent-deep:   #C4840F;
  --accent-wash:   rgba(255, 178, 36, .10);
  --accent-line:   rgba(255, 178, 36, .28);

  /* status */
  --ok:            #3DD68C;
  --ok-wash:       rgba(61, 214, 140, .10);
  --err:           #FF6B6B;

  /* type */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono",
          "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* rhythm */
  --gut:      clamp(1.25rem, 4vw, 2rem);
  --section:  clamp(4.5rem, 10vw, 8rem);
  --maxw:     1140px;
  --maxw-txt: 68ch;

  /* shape */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --- Base ----------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  /* Geist is already tightly spaced, so the old -.011em over-tightened it */
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Film grain. Large flat areas of near black band badly on 8 bit displays,
   especially across the hero's radial gradient. A little noise breaks up the
   steps and gives the dark surfaces some tooth. Inline SVG so it costs no
   request; pointer-events:none so it never intercepts a click. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }

::selection { background: var(--accent); color: #0B0C0F; }

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

/* --- Layout helpers ------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 7vw, 5rem); }

.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #0B0C0F;
  padding: .75rem 1.25rem;
  font-weight: 650;
  z-index: 200;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* --- Type ----------------------------------------------------------------- */
h1, h2, h3, h4 {
  line-height: 1.1;
  letter-spacing: -.032em;
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.2vw, 4.15rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); letter-spacing: -.022em; }
h4 { font-size: 1.0625rem; letter-spacing: -.018em; font-weight: 620; }

p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  font-family: var(--mono);
  font-size: clamp(.6875rem, 1.6vw, .75rem);
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.15rem;
  max-width: 100%;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  opacity: .55;
}

.lede {
  font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: var(--maxw-txt);
}

.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: .875rem; }

/* Inline emphasis inside prose. Amber, matching the accented word in the home
   h1, so "highlighted" means the same thing everywhere on the site. Weight is
   only nudged, not bolded: the colour is already doing the work and bolding as
   well would shout. */
.hl {
  color: var(--accent);
  font-weight: 520;
}

.section-head { max-width: var(--maxw-txt); margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head p { margin-top: 1.15rem; }

/* --- Buttons -------------------------------------------------------------- */
/* Primary button carries a slight vertical gradient and an inner top highlight.
   A flat fill reads cheap at this size; the gradient makes it feel lit. */
.btn {
  --btn-fg: #0B0C0F;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.5rem;
  background: linear-gradient(180deg, #FFC24D 0%, var(--accent) 45%, #EFA317 100%);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: .9375rem;
  font-weight: 620;
  letter-spacing: -.006em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 1px 2px rgba(0, 0, 0, .5);
  transition: filter .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 10px 28px -10px rgba(255, 178, 36, .62),
    0 1px 2px rgba(0, 0, 0, .5);
}
.btn:active { transform: translateY(0); filter: brightness(.98); }

/* Consent accept. Deliberately reuses the existing --ok status green instead of
   introducing a fourth colour: "allow" is exactly what that token already means
   on this site. Same lit-from-above gradient as the amber .btn so it belongs to
   the same system, and the same near-black label, which measures about 10.5:1
   on this green. The hover glow MUST be overridden: inherited from .btn it
   casts an amber halo under a green button, which looks like a rendering bug.
   Same (0,1,0) weight as .btn, so this has to stay below .btn in source order. */
.btn--ok {
  background: linear-gradient(180deg, #6FE7B0 0%, var(--ok) 45%, #2AB277 100%);
  --btn-fg: #0B0C0F;
  color: var(--btn-fg);
  border-color: transparent;
}
.btn--ok:hover {
  color: var(--btn-fg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 10px 28px -10px rgba(61, 214, 140, .62),
    0 1px 2px rgba(0, 0, 0, .5);
}

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  --btn-fg: var(--text);
  border-color: var(--border-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.btn--ghost:hover {
  background: var(--surface-2);
  color: var(--text);
  --btn-fg: var(--text);
  border-color: var(--text-faint);
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 8px 22px -12px rgba(0, 0, 0, .8);
}

.btn--lg { padding: 1rem 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn .arw { transition: transform .18s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* --- Header --------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 12, 15, .82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.hdr[data-scrolled="true"] { border-bottom-color: var(--border); }

.hdr__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 44px;           /* touch target */
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand__mark {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 7px;
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #0B0C0F;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: -.04em;
}

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .5rem .85rem;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 580; }

.hdr__cta { display: flex; align-items: center; gap: .75rem; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
}
.burger:hover { background: var(--surface-2); }

@media (max-width: 820px) {
  .nav {
    position: fixed;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .75rem var(--gut) 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    transform: translateY(-120%);
    transition: transform .3s var(--ease);
    visibility: hidden;
  }
  .nav[data-open="true"] { transform: translateY(0); visibility: visible; }
  .nav a { padding: .8rem .25rem; font-size: 1.0625rem; border-radius: 0; }
  .nav a + a { border-top: 1px solid var(--border); }
  .burger { display: grid; }
  .hdr__cta .btn { display: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
/* Two light sources, deliberately off centre so the page feels lit from a
   direction rather than evenly flood-filled. The warm one sits upper left over
   the headline, the cooler, tighter one sits behind the form card on the right
   so the primary CTA is the brightest thing on screen. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 150%;
  background:
    radial-gradient(52rem 34rem at 22% 8%, rgba(255, 178, 36, .13) 0%, transparent 62%),
    radial-gradient(34rem 30rem at 82% 30%, rgba(255, 200, 90, .085) 0%, transparent 66%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .34;
  mask-image: radial-gradient(ellipse 88% 62% at 50% 0%, #000 8%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 88% 62% at 50% 0%, #000 8%, transparent 74%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
}

.hero h1 { margin-bottom: 1.4rem; }
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero .lede { margin-bottom: 2rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  margin-top: 2rem;
  font-size: .875rem;
  color: var(--text-faint);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }

.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); flex: none;
  box-shadow: 0 0 0 3px var(--ok-wash);
}

/* --- Audit form card ------------------------------------------------------ */
/* The money element. It gets a warmer border, a top highlight and a soft amber
   halo so it reads as the brightest, most forward object on the page. */
.audit {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 178, 36, .045) 0%, transparent 38%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.5vw, 2rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 28px 70px -30px rgba(0, 0, 0, .95),
    0 0 60px -30px rgba(255, 178, 36, .3);
}
.audit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg,
    transparent, var(--accent-line) 22%, var(--accent-line) 78%, transparent);
}
.audit__head { margin-bottom: 1.5rem; }
.audit__head h2 {
  font-size: 1.375rem;
  letter-spacing: -.024em;
  margin-bottom: .5rem;
}
.audit__head p { font-size: .9375rem; color: var(--text-dim); }

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: .8125rem;
  font-weight: 580;
  letter-spacing: .005em;
  margin-bottom: .45rem;
  color: var(--text-dim);
}
.field input,
.field textarea {
  width: 100%;
  padding: .8rem .95rem;
  background: var(--bg);
  border: 1px solid var(--border-bright);
  border-radius: var(--r);
  color: var(--text);
  font-size: .9375rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.field--err input,
.field--err textarea { border-color: var(--err); }
.field__err {
  display: none;
  margin-top: .4rem;
  font-size: .8125rem;
  color: var(--err);
}
.field--err .field__err { display: block; }

/* honeypot: must stay reachable to bots but invisible and out of tab order */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.audit__note {
  margin-top: 1rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--text-faint);
  display: flex;
  gap: .5rem;
}
.audit__note svg { flex: none; margin-top: .15rem; color: var(--ok); }

.formmsg {
  display: none;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--r);
  font-size: .9rem;
  line-height: 1.55;
}
.formmsg[data-show="true"] { display: block; }
.formmsg[data-kind="ok"]  { background: var(--ok-wash);  border: 1px solid rgba(61,214,140,.3);  color: #A6EFCB; }
.formmsg[data-kind="err"] { background: rgba(255,107,107,.09); border: 1px solid rgba(255,107,107,.3); color: #FFB3B3; }

/* --- Stat strip ----------------------------------------------------------- */
.stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
  /* faint wash so the strip reads as its own band rather than a gap */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.stat {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  padding: 1.9rem 1.25rem;
  text-align: center;
  transition: background .25s var(--ease);
}
.stat::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  transform: translateX(-50%);
  background: var(--accent);
  transition: width .3s var(--ease);
}
.stat:hover { background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); }
.stat:hover::after { width: 42%; }

.stat__n {
  display: block;
  font-size: clamp(2rem, 3.9vw, 2.65rem);
  font-weight: 620;
  letter-spacing: -.045em;
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat__n .u { color: var(--accent); }
.stat__l {
  display: block;
  margin-top: .5rem;
  font-size: .78125rem;
  color: var(--text-faint);
  letter-spacing: .012em;
}

/* --- Cards ---------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* min() is load bearing: a bare minmax(290px,1fr) refuses to shrink below its
   floor, so at 320px viewports the track stayed 290px wide inside a 280px
   container and pushed the whole document into horizontal scroll. */
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Cards are lit from above: a faint gradient fill plus a 1px highlight along the
   top edge. Flat panels with a single hairline border read like wireframes. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 58%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease), background .22s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, .09) 25%,
    rgba(255, 255, 255, .09) 75%, transparent);
  transition: background .22s var(--ease);
}
.card:hover {
  border-color: var(--border-bright);
  transform: translateY(-3px);
  box-shadow:
    0 18px 40px -22px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(255, 178, 36, .06);
}
.card:hover::before {
  background: linear-gradient(90deg,
    transparent, var(--accent-line) 25%, var(--accent-line) 75%, transparent);
}
/* Reserve two lines. "SEO and growth consulting" wraps while the other two
   titles do not, which knocked the three cards' body copy out of alignment. */
.card h3 { margin-bottom: .7rem; }
.grid--3 .card h3 { min-height: 2.2em; }
@media (max-width: 600px) { .grid--3 .card h3 { min-height: 0; } }
.card p { color: var(--text-dim); font-size: .9375rem; }

.card__ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  margin-bottom: 1.15rem;
  border-radius: var(--r);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

.card__tag {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: .25rem .6rem;
  border-radius: 100px;
  background: var(--surface-3);
  border: 1px solid var(--border-bright);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.card__link {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: .9375rem;
  font-weight: 580;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.card__link .arw { transition: transform .18s var(--ease); }
.card:hover .card__link .arw { transform: translateX(3px); }

.card ul { margin: .35rem 0 0; padding: 0; list-style: none; }
.card ul li {
  position: relative;
  padding-left: 1.35rem;
  margin-top: .55rem;
  font-size: .9375rem;
  color: var(--text-dim);
}
.card ul li::before {
  content: "";
  position: absolute;
  left: .3rem; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .8;
}

/* --- Feature / product block --------------------------------------------- */
.feature {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 55%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 24px 60px -34px rgba(0, 0, 0, .9);
}
.feature::before {
  content: "";
  position: absolute;
  top: -60%; right: -20%;
  width: 620px; aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-wash) 0%, transparent 66%);
  pointer-events: none;
}
.feature > * { position: relative; }

.feature__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .feature__grid { grid-template-columns: 1fr 1fr; } }

.feature__list { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .9rem; }
.feature__list li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: .9375rem;
  color: var(--text-dim);
}
.feature__list svg { flex: none; margin-top: .28em; color: var(--accent); }
.feature__list strong { color: var(--text); font-weight: 600; }

/* mock UI panel */
.mock {
  background: var(--bg);
  border: 1px solid var(--border-bright);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 28px 64px -32px rgba(0, 0, 0, .9);
  font-family: var(--mono);
  font-size: .8125rem;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-bright); }
.mock__bar span {
  margin-left: .6rem;
  font-size: .75rem;
  color: var(--text-faint);
  letter-spacing: .02em;
}
.mock__body { padding: 1.1rem; display: grid; gap: .7rem; }
.mock__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.mock__row b { font-weight: 500; color: var(--text-dim); letter-spacing: -.01em; }
.mock__val { font-weight: 600; letter-spacing: -.02em; }
.mock__val--ok  { color: var(--ok); }
.mock__val--warn { color: var(--accent); }
.mock__val--err { color: var(--err); }

.meter { height: 5px; border-radius: 100px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 100px; background: var(--accent); }

/* --- Skills --------------------------------------------------------------- */
/* align-items:start stops short cards stretching to the tallest in the row.
   The categories are deliberately uneven (Search carries 23 chips, Languages
   3), and without this the small cards render as mostly empty boxes. */
.skills { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
@media (min-width: 760px) { .skills { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .skills { grid-template-columns: repeat(3, 1fr); } }

.skillset {
  padding: 1.5rem;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 55%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .22s var(--ease);
}
.skillset:hover { border-color: var(--border-bright); }
.skillset h4 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.skillset h4 svg { color: var(--accent); flex: none; }

/* --- Tabbed skills (home) -------------------------------------------------
   Replaces a six card grid that rendered 76 chips at once. The counts on the
   tabs carry the breadth, so the section reads in two seconds instead of
   twenty, and only one category's chips are on screen at a time.

   Progressive enhancement: the markup ships with `hidden` on the inactive
   panels, which is correct once JS runs. Without JS those rules are inverted
   below so every panel shows and the tabs, which would do nothing, are removed.
   Chips are always in the DOM either way, so nothing is hidden from crawlers. */
.skillbox {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 45%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 18px 44px -30px rgba(0, 0, 0, .9);
}

.skilltabs {
  display: none;                    /* enabled under .js */
  gap: .4rem;
  margin-bottom: 1.5rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.skilltabs::-webkit-scrollbar { display: none; }
.js .skilltabs { display: flex; }

.stab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  min-height: 44px;
  padding: .5rem .85rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-dim);
  font-size: .875rem;
  font-weight: 550;
  letter-spacing: -.012em;
  white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease);
}
.stab svg { color: var(--text-faint); transition: color .16s var(--ease); }
.stab:hover { color: var(--text); border-color: var(--border-bright); background: var(--surface-2); }
.stab:hover svg { color: var(--text-dim); }

.stab[aria-selected="true"] {
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--accent);
}
.stab[aria-selected="true"] svg { color: var(--accent); }

.stab__n {
  min-width: 1.35rem;
  padding: 0 .3rem;
  border-radius: 100px;
  background: var(--surface-3);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.35rem;
  text-align: center;
  color: var(--text-dim);
}
.stab[aria-selected="true"] .stab__n {
  background: var(--accent);
  color: #0B0C0F;
}

.spanel { animation: panel-in .28s var(--ease) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .spanel { animation: none; } }

/* no JS: ignore `hidden` so every category is readable */
.spanel[hidden] { display: block; }
.js .spanel[hidden] { display: none; }

/* the panel heading duplicates the active tab, so drop it once tabs exist */
.spanel__h {
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.js .spanel__h { display: none; }
.spanel + .spanel { margin-top: 1.75rem; }
.js .spanel + .spanel { margin-top: 0; }

.spanel__note {
  margin-top: 1.1rem;
  font-size: .8375rem;
  line-height: 1.55;
  color: var(--text-faint);
  max-width: 60ch;
}

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  padding: .3rem .7rem;
  border-radius: 100px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .8125rem;
  color: var(--text-dim);
  letter-spacing: -.005em;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.chip:hover { border-color: var(--accent-line); color: var(--text); }
.chip--key {
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 550;
}

/* --- Timeline ------------------------------------------------------------- */
.tl { position: relative; padding-left: 1.9rem; }
.tl::before {
  content: "";
  position: absolute;
  left: 5px; top: .6rem; bottom: .6rem;
  width: 1px;
  background: linear-gradient(180deg, var(--accent-line), var(--border) 30%, var(--border));
}
.tl__item { position: relative; padding-bottom: 2.5rem; }
.tl__item:last-child { padding-bottom: 0; }
.tl__item::before {
  content: "";
  position: absolute;
  left: calc(-1.9rem + 1px);
  top: .55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-bright);
}
.tl__item--now::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash), 0 0 14px 0 rgba(255, 178, 36, .55);
}
.tl__when {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .35rem;
}
.tl__item--now .tl__when { color: var(--accent); }
.tl__role { font-size: 1.125rem; font-weight: 620; letter-spacing: -.02em; margin-bottom: .2rem; }
.tl__org { font-size: .9375rem; color: var(--text-dim); margin-bottom: .75rem; }
.tl__org b { color: var(--text); font-weight: 580; }
.tl__body { font-size: .9375rem; color: var(--text-dim); max-width: 62ch; }

/* --- Steps ---------------------------------------------------------------- */
.steps { counter-reset: s; display: grid; gap: 1rem; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative;
  padding: 1.5rem;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 60%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.step:hover { border-color: var(--border-bright); transform: translateY(-2px); }
.step::before {
  counter-increment: s;
  content: "0" counter(s);
  display: block;
  margin-bottom: .9rem;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent);
}
.step h4 { margin-bottom: .5rem; }
.step p { font-size: .9125rem; color: var(--text-dim); }

/* --- CTA band ------------------------------------------------------------- */
.cta {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-bright);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  bottom: -70%; left: 50%;
  transform: translateX(-50%);
  width: min(820px, 120vw); aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-wash) 0%, transparent 62%);
  pointer-events: none;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg,
    transparent, var(--accent-line) 28%, var(--accent-line) 72%, transparent);
}
.cta > * { position: relative; }
.cta h2 { margin-bottom: 1rem; }
.cta p { margin-inline: auto; margin-bottom: 2rem; }
.cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

/* --- Contact rail --------------------------------------------------------- */
.rail { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.rail__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  transition: background .18s var(--ease);
}
a.rail__row:hover { background: var(--surface-2); color: var(--text); }
.rail__ico {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.rail__k { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); font-family: var(--mono); }
.rail__v { font-size: .9375rem; font-weight: 550; letter-spacing: -.012em; margin-top: .1rem; }
.rail__row .arw { margin-left: auto; color: var(--text-faint); transition: transform .18s var(--ease), color .18s var(--ease); }
a.rail__row:hover .arw { transform: translateX(3px); color: var(--accent); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: .75rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .18s var(--ease);
}
.faq details[open] { border-color: var(--border-bright); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-size: .9875rem;
  font-weight: 580;
  letter-spacing: -.014em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.75px solid var(--text-faint);
  border-bottom: 1.75px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
  border-color: var(--accent);
}
.faq summary:hover { background: var(--surface-2); }
.faq__a { padding: 0 1.35rem 1.25rem; font-size: .9375rem; color: var(--text-dim); max-width: 66ch; }

/* --- Footer --------------------------------------------------------------- */
.ftr {
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  margin-top: var(--section);
}
.ftr__grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.25rem;
}
@media (min-width: 760px) { .ftr__grid { grid-template-columns: 1.5fr 1fr 1fr; } }

.ftr h5 {
  font-size: .75rem;
  font-family: var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
  font-weight: 500;
}
.ftr ul { list-style: none; padding: 0; display: grid; gap: .15rem; }
.ftr ul a {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .1rem;
  min-height: 40px;           /* footer links were 20px tall, unusable on touch */
  color: var(--text-dim);
  text-decoration: none;
  font-size: .9125rem;
}

/* the real destination, shown so the link is unmissable */
.ftr__dest {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .015em;
  color: var(--text-faint);
  transition: color .16s var(--ease);
}
.ftr ul a:hover .ftr__dest { color: var(--accent-line); }
.ftr ul a:hover { color: var(--accent); }
@media (max-width: 820px) {
  .ftr ul a { min-height: 44px; }
}
.ftr__blurb { font-size: .9125rem; color: var(--text-dim); max-width: 38ch; margin-top: 1rem; }

.ftr__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  font-size: .8125rem;
  color: var(--text-faint);
}
.ftr__base a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-faint);
  text-decoration: none;
}
.ftr__base a:hover { color: var(--accent); }

/* --- Sticky mobile CTA ----------------------------------------------------
   The header CTA is hidden below 820px to make room for the burger, which
   would otherwise leave phones with no persistent call to action. This is the
   replacement, and it sits in the thumb zone rather than the top corner.
   main.js hides it while the audit form is actually on screen. */
.mcta { display: none; }

@media (max-width: 820px) {
  .mcta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: .7rem var(--gut);
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 12, 15, .93);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-top: 1px solid var(--border);
    transform: translateY(0);
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .mcta[data-hide="true"] {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  /* keep the footer clear of the bar */
  body { padding-bottom: 4.75rem; }
}

/* --- Reveal on scroll ----------------------------------------------------- */
/* Scoped to .js on purpose. The class is set by a tiny hashed inline script in
   <head>, so if JavaScript is blocked, fails, or the CSP hash ever stops
   matching, none of this applies and every section is simply visible.
   Without the scope an unhandled JS error hides the entire page body. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-reveal][data-seen="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Analytics consent banner ---------------------------------------------
   Bottom left on desktop so it never covers the hero CTA. On phones it sits
   above the sticky .mcta bar rather than fighting it for the thumb zone. */
.consent {
  position: fixed;
  z-index: 120;
  left: var(--gut);
  bottom: var(--gut);
  width: min(27rem, calc(100vw - (var(--gut) * 2)));
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
  animation: consent-in .35s var(--ease) both;
}
@keyframes consent-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}

.consent__body { padding: 1.25rem 1.35rem; }
.consent__body strong {
  display: block;
  font-size: .9875rem;
  font-weight: 620;
  letter-spacing: -.016em;
  margin-bottom: .45rem;
}
.consent__body p {
  font-size: .8375rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.consent__actions {
  display: flex;
  gap: .6rem;
  margin-top: 1.1rem;
}
.consent__actions .btn {
  flex: 1;
  padding: .6rem 1rem;
  font-size: .875rem;
}
/* Decline, lightened. Dropping the fill genuinely does something here, unlike
   on a white card: .btn--ghost sits on --surface, a shade darker than the
   panel's --surface-2, so going transparent lets it recede into the panel
   instead of sitting on it as its own block. The label steps down to
   --text-dim, which measures about 7.2:1 on --surface-2 and stays well clear
   of the 4.5:1 floor; hover returns it to full --text.
   NEVER use `opacity` for this. It fades the label along with the fill, drops
   it under AA and reads as disabled rather than secondary. Both buttons keep
   `flex: 1` above, so they stay exactly the same size, which is the property
   that keeps the choice a fair one. */
.consent__actions .btn--ghost {
  background: transparent;
  color: var(--text-dim);
  --btn-fg: var(--text-dim);
  border-color: var(--border);
  box-shadow: none;
}
.consent__actions .btn--ghost:hover {
  background: transparent;
  color: var(--text);
  --btn-fg: var(--text);
  border-color: var(--border-bright);
  box-shadow: none;
}

@media (max-width: 820px) {
  .consent {
    left: .75rem;
    right: .75rem;
    width: auto;
    /* clear the sticky CTA bar plus the iOS home indicator */
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Back to top ---------------------------------------------------------- */
/* Lower RIGHT: the consent panel owns the lower left. On small screens the
   sticky audit bar owns the bottom edge, so this lifts above it by the same
   4.75rem the consent panel uses, and it hides outright while the consent
   panel is open because that panel is a full width sheet down there. */
.totop {
  position: fixed;
  right: var(--gut);
  bottom: var(--gut);
  z-index: 110;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border-bright);
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 10px 28px -12px rgba(0, 0, 0, .9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease),
              visibility .2s var(--ease), color .2s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease);
}
.totop[data-on="true"] { opacity: 1; visibility: visible; transform: none; }
.totop:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--text-faint);
}
.totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.consent-open .totop { display: none; }

@media (max-width: 820px) {
  .totop {
    right: .75rem;
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .totop { transition: opacity .01s linear, visibility .01s linear; }
}

/* --- Utility -------------------------------------------------------------- */
.center { text-align: center; }
.mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
/* Kept on purpose: standard screen-reader-only utility, used by the consent
   banner's live region (ga4-consent.js) and reserved for future markup. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .hdr, .ftr, .cta, .audit, .burger { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .skillset, .feature { border-color: #ccc; }
}