/* =================================================================
   Anna Miller - Portfolio
   Art direction: "Warm Editorial Paper"
   Fraunces (display) · Inter (body) · Space Mono (labels)
   ================================================================= */

:root {
  /* Warm unbleached neutrals */
  --paper:    #f4eee3;
  --paper-2:  #ece3d4;
  --paper-3:  #e4d9c6;
  --ink:      #1c1813;
  --ink-2:    #4a4338;
  --ink-3:    #6e6555;      /* muted label - AA on paper */
  --line:     rgba(28, 24, 19, 0.14);
  --line-2:   rgba(28, 24, 19, 0.28);
  --line-3:   rgba(28, 24, 19, 0.55);   /* form-control boundary - meets WCAG 1.4.11 (3:1) */

  --accent:      #bf5d36;   /* clay / burnt sienna */
  --accent-deep: #9b4828;   /* small accent text on paper */
  --accent-light:#d98a5f;   /* small accent text on dark */
  --accent-soft: rgba(191, 93, 54, 0.12);

  /* "Available for work" status green (reads as go/available, muted to sit in
     the warm palette). --avail-ink is darkened to keep the pill text AA on paper. */
  --avail:      #3f9e5a;   /* live status dot */
  --avail-ink:  #2c6440;   /* pill text - AA on paper */
  --avail-line: rgba(63, 158, 90, 0.42);

  --cream:    #f0e7d7;      /* text on dark */
  --cream-2:  #b9ad99;

  /* Illustration + mockup tints (kept as tokens so the palette stays governable) */
  --peach:      #e7bd9f;    /* about star backing */
  --paper-doc:  #fbf8f1;    /* document mockup paper */
  --tint-sand:  #d9c7a6;    /* kb table th A */
  --tint-sage:  #cdd6c0;    /* kb table th B + guide checks */
  --tint-clay:  #e6c9b4;    /* kb table th C */

  /* Type */
  --serif: "Fraunces", "Fraunces-fallback", "Times New Roman", Georgia, serif;
  --sans:  "Inter", "Inter-fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --container: 1320px;
  --pad: clamp(20px, 5vw, 88px);
  --section-pad: clamp(72px, 12vh, 160px); /* one shared vertical cadence */
  --title: clamp(2rem, 5vw, 4rem);          /* shared section-title size */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* with body, guarantees no horizontal scroll on any device */
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip (not hidden) so position:sticky pinning still works */
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }

::selection { background: var(--accent); color: var(--paper); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 10px 18px;
  border-radius: 0 0 8px 8px; z-index: 300; transition: top 0.2s var(--ease); font-family: var(--mono); font-size: 0.8rem;
}
.skip-link:focus { top: 0; }

/* ---------- Film grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.42; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- Shared editorial bits ---------- */
.piece__tag, .piece__num, .svc__idx,
.footer__k, .quote__role, .doc__url, .marquee, .nav__avail {
  font-family: var(--mono);
}

.accent-word { color: var(--accent); }

/* Headline with display serif */
.hero__title, .impact__title, .services__title, .work__title,
.about__title, .words__title, .contact__title, .case__title, .piece__name, .review__title {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 500; font-size: 0.98rem;
  padding: 15px 26px; border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.2s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--accent); }
.btn--solid:hover svg { transform: translateX(4px); }
.btn--text { color: var(--ink); padding: 15px 6px; position: relative; }
.btn--text::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 10px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.btn--text:hover::after { transform: scaleX(1); }
.btn--ghost-light { color: var(--cream); border-color: rgba(240,231,215,0.4); }
.btn--ghost-light:hover { background: rgba(240,231,215,0.1); border-color: var(--cream); }
.btn--lg { padding: 18px 30px; font-size: 1.05rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-weight: 500; color: var(--accent-deep); font-size: 0.95rem;
  border-bottom: 1.5px solid var(--accent-soft); padding-bottom: 3px;
  transition: border-color 0.3s var(--ease);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.link-arrow:hover { border-color: var(--accent); }
.link-arrow:hover svg { transform: translate(2px, -2px); }
/* variant for dark panels (case study) */
.link-arrow--light { color: var(--accent-light); border-bottom-color: rgba(217, 138, 95, 0.35); }
.link-arrow--light:hover { border-bottom-color: var(--accent-light); }

/* Inline text links inside intros/leads */
.text-link { color: var(--accent-deep); font-weight: 500; border-bottom: 1.5px solid var(--accent-soft); transition: border-color 0.3s var(--ease); }
.text-link:hover { border-color: var(--accent); }

.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--avail);
  box-shadow: 0 0 0 0 rgba(63,158,90,0.5); animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(63,158,90,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(63,158,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,158,90,0); }
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 22px var(--pad); transition: padding 0.4s var(--ease), background 0.4s var(--ease);
}
.nav.is-scrolled {
  padding-top: 14px; padding-bottom: 14px;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1600px; margin-inline: auto; }
.nav__brand { display: inline-flex; align-items: center; gap: 12px; }
.nav__mark { display: block; height: 30px; width: auto; }
.nav__brand-text { font-family: var(--serif); font-size: 1.16rem; color: var(--ink); letter-spacing: -0.01em; }

.nav__links { display: flex; gap: 34px; }
.nav__links a { display: inline-flex; align-items: baseline; white-space: nowrap; font-size: 0.95rem; color: var(--ink-2); transition: color 0.25s var(--ease); padding-block: 4px; }
.nav__links a:hover, .nav__links a.is-active { color: var(--accent-deep); }
.nav__resume { font-size: 0.95rem; color: var(--ink-2); border-bottom: 1px solid transparent; padding-block: 4px; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.nav__resume:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }

.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__avail { display: inline-flex; align-items: center; gap: 9px; font-size: 0.78rem; color: var(--avail-ink); border: 1px solid var(--avail-line); border-radius: 100px; padding: 8px 15px; transition: border-color 0.25s var(--ease); }
.nav__avail:hover { border-color: var(--avail); }
.nav__motion { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.nav__motion:hover { border-color: var(--accent); color: var(--accent-deep); }
.nav__motion svg { width: 19px; height: 19px; }
.nav__motion .nav__motion-slash { opacity: 0; transition: opacity 0.2s var(--ease); }
html.motion-off .nav__motion { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
html.motion-off .nav__motion .nav__motion-slash { opacity: 1; }

.nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; }
.nav__toggle span { display: block; width: 26px; height: 1.6px; margin-inline: auto; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.8px) rotate(-45deg); }

.nav__mobile {
  position: fixed; inset: 0; z-index: 99; background: var(--paper);
  display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: var(--pad);
  max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a { font-family: var(--serif); font-size: clamp(2rem, 9vw, 3.4rem); color: var(--ink); padding: 8px 0; display: flex; align-items: baseline; border-bottom: 1px solid var(--line); }

/* ---------- Hero ---------- */
.hero { padding: clamp(96px, 12vh, 148px) var(--pad) clamp(36px, 5vh, 64px); position: relative; min-height: 90vh; display: flex; flex-direction: column; }

.reveal-img { overflow: hidden; border-radius: 4px; }
.reveal-img img { width: 100%; display: block; }

/* Two-column hero: oversized headline + large, prominent portrait */
.hero__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr minmax(360px, 0.95fr);
  grid-template-areas: "title portrait" "lead portrait";
  grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(22px, 3.5vh, 40px);
  align-items: start;
}
.hero__title { grid-area: title; font-size: clamp(2.2rem, 5vw, 5rem); letter-spacing: -0.03em; align-self: end; text-wrap: balance; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__title .line > i { display: block; font-style: normal; }
.hero__title em { font-style: italic; color: var(--ink-2); }

.hero__lead { grid-area: lead; align-self: start; max-width: 44ch; }
.hero__lead p { font-size: clamp(1.02rem, 1.3vw, 1.22rem); color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Circular brand avatar: Anna's headshot, clay-ringed, centered with whitespace
   so the oversized headline leads. Spins in once on first load; rests upright. */
.hero__portrait {
  grid-area: portrait; align-self: center; justify-self: center; margin: 0;
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 1.6vw, 24px); min-width: 0; padding-block: clamp(8px, 2vh, 28px);
}
.hero__avatar { position: relative; width: clamp(340px, 40vw, 520px); max-width: 100%; isolation: isolate; }
/* Soft warm halo grounding the circle on the paper */
.hero__avatar::before {
  content: ""; position: absolute; z-index: 0; inset: -10%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 48%, var(--accent-soft), transparent 70%); pointer-events: none;
}
/* The clipped circular photo (keeps the .reveal-img IntersectionObserver hook) */
.hero__avatar-img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 50%; overflow: hidden; background: var(--paper-3);
  box-shadow: 0 30px 56px -24px rgba(28, 24, 19, 0.42);
}
.hero__avatar-img img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 22%; filter: saturate(1.03) contrast(1.02); }
/* Warm clay tint so the gray studio bg harmonizes with the paper palette */
.hero__avatar-tint {
  position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: multiply;
  background:
    /* warm the cool studio backdrop toward clay at the edges, keeping her face natural */
    radial-gradient(66% 66% at 50% 33%, transparent 40%, rgba(155, 72, 40, 0.5) 100%),
    linear-gradient(180deg, rgba(191, 93, 54, 0.05), rgba(191, 93, 54, 0.13)),
    radial-gradient(70% 70% at 50% 30%, transparent 55%, rgba(28, 24, 19, 0.12));
}
/* Thin clay ring, offset just outside the photo */
.hero__avatar-ring { position: absolute; z-index: 2; inset: clamp(-14px, -1vw, -10px); border-radius: 50%; border: 1.5px solid var(--accent); pointer-events: none; }
/* One cute clay sparkle peeking off the top-right */
.hero__avatar-spark {
  position: absolute; z-index: 3; height: auto; color: var(--accent);
  filter: drop-shadow(0 3px 6px rgba(191, 93, 54, 0.28)); transform-origin: 50% 50%; pointer-events: none;
  opacity: 0;   /* hidden until it flashes (only one lit at a time) */
}
.hero__avatar-spark--1 { top: -4%; right: 2%; width: clamp(28px, 3vw, 42px); color: var(--accent); }
.hero__avatar-spark--2 { top: 40%; left: -6%; width: clamp(20px, 2.2vw, 30px); color: var(--accent-deep); }
.hero__avatar-spark--3 { bottom: 2%; right: -4%; width: clamp(24px, 2.6vw, 34px); color: var(--accent-light); }
/* Mono caption chip beneath the circle */
.hero__avatar-chip {
  position: relative; z-index: 2; display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  box-shadow: 0 14px 30px -18px rgba(28, 24, 19, 0.4); white-space: nowrap;
}
/* Keep the generic .reveal-img scale OFF inside the avatar (we spin the box instead) */
.js .hero__avatar-img img { transform: none !important; }

/* ---------- Reveal: the circle is FLIPPED LIKE A COIN on first load, then BOUNCES
   as it lands face-up. The hero is in view immediately, so .is-in fires on load.
   The flip lives on the child .hero__avatar (GSAP scrubs yPercent on .hero__portrait). */
.js .hero__portrait[data-reveal] { transform: none; }          /* no figure slide; the coin flip is the entrance */
.js .hero__portrait[data-reveal] .hero__avatar { opacity: 0; }
/* fill-mode backwards (not both): after the flip the transform releases to none,
   so the headshot leaves its 3D-rasterized layer and renders crisp again.
   1080deg is visually identical to 0deg, so there is no jump at the handoff. */
.js .hero__portrait[data-reveal].is-in .hero__avatar { opacity: 1; animation: heroCoinFlip 1.7s linear 0.15s backwards; }
/* rotateX in perspective = a tossed coin (goes edge-on at the half-turns); 1080deg = 3
   flips, landing face-up on her photo; then three decaying bounces settle it. */
@keyframes heroCoinFlip {
  0%   { opacity: 0; transform: perspective(900px) translateY(-30px) rotateX(0deg) scale(0.92); animation-timing-function: ease-in; }
  6%   { opacity: 1; }
  48%  { transform: perspective(900px) translateY(0) rotateX(1080deg) scale(1); animation-timing-function: ease-out; }
  64%  { transform: perspective(900px) translateY(-26px) rotateX(1080deg) scale(1); animation-timing-function: ease-in; }
  78%  { transform: perspective(900px) translateY(0) rotateX(1080deg) scale(1); animation-timing-function: ease-out; }
  90%  { transform: perspective(900px) translateY(-10px) rotateX(1080deg) scale(1); animation-timing-function: ease-in; }
  100% { opacity: 1; transform: perspective(900px) translateY(0) rotateX(1080deg) scale(1); }
}
/* Intro flourish: the three sparkles flash in an OVERLAPPING cascade (slightly offset,
   not one at a time), twice each, then stop. 1.3s cycle; small ~0.15s stagger so the pops
   overlap; iteration-count 2 = each appears exactly 2 times, then rests invisible. */
.js .hero__portrait[data-reveal].is-in .hero__avatar-spark { animation: sparkFlash 1.3s ease-in-out 2; }
.js .hero__portrait[data-reveal].is-in .hero__avatar-spark--1 { animation-delay: 1.6s; }
.js .hero__portrait[data-reveal].is-in .hero__avatar-spark--2 { animation-delay: 1.75s; }
.js .hero__portrait[data-reveal].is-in .hero__avatar-spark--3 { animation-delay: 1.9s; }
@keyframes sparkFlash {
  0%   { opacity: 0; transform: scale(0.2) rotate(-25deg); }
  12%  { opacity: 1; transform: scale(1.3) rotate(8deg); }
  30%  { opacity: 0; transform: scale(0.5) rotate(10deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(10deg); }
}
/* Motion-off / reduced-motion: rest upright + visible; show all 3 sparkles static (no flashing) */
@media (prefers-reduced-motion: reduce) {
  .js .hero__portrait[data-reveal] .hero__avatar { opacity: 1; transform: none; }
  .hero__avatar-spark { opacity: 0.9; transform: none; }
}
html.motion-off .hero__portrait[data-reveal] .hero__avatar { opacity: 1 !important; transform: none !important; }
html.motion-off .hero__avatar-spark { opacity: 0.9 !important; transform: none !important; }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); padding: 26px 0; overflow: hidden; white-space: nowrap; background: var(--paper-2); }
.marquee__track { display: inline-flex; align-items: center; gap: 40px; font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 3.2rem); color: var(--ink); will-change: transform; padding-right: 40px; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__track > span { font-style: italic; }
.marquee__dot { color: var(--accent); font-style: normal !important; font-size: 0.6em; }

/* ---------- Statement ---------- */

/* ---------- Impact ---------- */
.impact { padding: var(--section-pad) var(--pad); background: var(--ink); color: var(--cream); }
.impact__head { max-width: var(--container); margin: 0 auto clamp(40px, 6vh, 72px); }
.impact__title { font-size: var(--title); color: var(--cream); max-width: 16ch; }
.impact__list { max-width: var(--container); margin-inline: auto; }
.impact-row {
  display: grid; grid-template-columns: minmax(220px, 1fr) 1.1fr 1fr; gap: clamp(16px, 3vw, 48px);
  align-items: baseline; padding: clamp(26px, 4vh, 46px) 0; border-top: 1px solid rgba(240,231,215,0.16);
}
.impact-row:last-child { border-bottom: 1px solid rgba(240,231,215,0.16); }
.impact-row__num { font-family: var(--serif); font-size: clamp(3rem, 8vw, 7rem); line-height: 0.9; color: var(--cream); letter-spacing: -0.03em; grid-row: span 2; }
.impact-row__label { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; color: var(--cream); align-self: center; }
.impact-row__desc { color: var(--cream-2); font-size: 0.98rem; overflow-wrap: anywhere; }
.impact-row__src { grid-column: 2 / -1; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-light); }

/* ---------- Services ---------- */
.services { padding: var(--section-pad) var(--pad); max-width: var(--container); margin-inline: auto; }
.services__head { max-width: 760px; margin-bottom: clamp(40px, 6vh, 72px); }
.services__title { font-size: var(--title); max-width: 14ch; }
.services__intro { margin-top: 22px; font-size: 1.1rem; color: var(--ink-2); max-width: 50ch; }

.svc { border-top: 1px solid var(--line); }
.svc__item { display: grid; grid-template-columns: 80px minmax(220px, 1fr) 1.4fr auto; gap: clamp(16px, 3vw, 48px); align-items: start; padding: clamp(28px, 4.5vh, 50px) 0; border-bottom: 1px solid var(--line); transition: background 0.4s var(--ease), padding-left 0.4s var(--ease); }
.svc__item:hover { background: var(--paper-2); }
.svc__idx { font-size: 0.8rem; color: var(--ink-3); padding-top: 8px; }
.svc__name { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.05; }
.svc__desc { color: var(--ink-2); font-size: 1rem; max-width: 46ch; }
.svc__tags { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.svc__tags li { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Work ---------- */
.work { padding: var(--section-pad) var(--pad); max-width: var(--container); margin-inline: auto; }
.work__head { max-width: 820px; margin-bottom: clamp(50px, 8vh, 100px); }
.work__title { font-size: var(--title); max-width: 16ch; }
.work__intro { margin-top: 22px; font-size: 1.1rem; color: var(--ink-2); max-width: 56ch; }

.piece { margin-bottom: clamp(70px, 11vh, 150px); }
.piece__meta { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.piece__num { font-family: var(--mono); font-size: 0.9rem; color: var(--accent-deep); padding-top: 6px; }
.piece__tag { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 8px; }
.piece__name { font-size: clamp(1.7rem, 3.6vw, 3rem); }
.piece__body { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.piece--reverse .piece__text { order: 2; }
.piece--reverse .doc { order: 1; }
.piece__text p { color: var(--ink-2); font-size: 1.06rem; }
.piece__points { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.piece__points li { position: relative; padding-left: 26px; color: var(--ink); font-size: 0.98rem; }
.piece__points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 1.5px; background: var(--accent); }

/* Document frame (work recreation) */
.doc { border: 1px solid var(--line); border-radius: 8px; background: var(--paper-doc); box-shadow: 0 40px 80px -40px rgba(28,24,19,0.35); overflow: hidden; min-width: 0; }
.doc__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.doc__dots { display: inline-flex; gap: 6px; }
.doc__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.doc__url { font-size: 0.72rem; color: var(--ink-3); }
.doc__body { padding: 26px 28px 30px; }

.kb__crumb { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.kb__title { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin: 6px 0 4px; }
.kb__sub { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 16px; }
.kb__toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.kb__toc span { font-family: var(--mono); font-size: 0.7rem; color: var(--accent-deep); background: var(--accent-soft); padding: 4px 10px; border-radius: 4px; }
.kb__callout { background: var(--paper-2); border-left: 2px solid var(--accent); border-radius: 4px; padding: 14px 16px; margin-bottom: 22px; }
.kb__callout strong { color: var(--ink); font-size: 0.9rem; }
.kb__callout p { font-size: 0.86rem; color: var(--ink-2); margin-top: 4px; }
.kb__label { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); margin-bottom: 10px; }
.kb__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kb__table { width: 100%; min-width: 400px; border-collapse: separate; border-spacing: 0; font-size: 0.83rem; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.kb__table th { text-align: left; padding: 9px 13px; font-weight: 600; font-size: 0.78rem; color: var(--ink); }
/* Error column = clay (problem), Solution column = sage (resolution) */
.kb__table .th-a { background: var(--tint-sand); }
.kb__table .th-b { background: var(--tint-clay); }
.kb__table .th-c { background: var(--tint-sage); }
.kb__table td { padding: 10px 13px; border-top: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.kb__table tbody tr:nth-child(even) { background: var(--paper-2); }

.guide__title { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin-bottom: 10px; }
.guide__pill { display: inline-block; font-family: var(--mono); font-size: 0.7rem; color: var(--accent-deep); background: var(--accent-soft); padding: 4px 10px; border-radius: 4px; margin-bottom: 18px; }
.guide__meta { display: grid; gap: 12px; margin-bottom: 20px; }
.guide__meta div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; font-size: 0.86rem; }
.guide__meta dt { font-weight: 600; color: var(--ink); }
.guide__meta dd { margin: 0; color: var(--ink-2); }
.guide__label { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); margin-bottom: 10px; }
.guide__check { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.guide__check li { position: relative; padding-left: 24px; font-size: 0.86rem; color: var(--ink-2); }
.guide__check li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 4px; background: var(--tint-sage); }
.guide__steps { display: flex; flex-direction: column; gap: 9px; counter-reset: step; list-style: none; }
.guide__steps li { position: relative; padding-left: 34px; font-size: 0.87rem; color: var(--ink-2); counter-increment: step; }
.guide__steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.7rem; display: grid; place-items: center; }

/* Case */
.case { background: var(--ink); color: var(--cream); border-radius: 10px; padding: clamp(34px, 6vw, 76px); position: relative; overflow: hidden; margin-bottom: clamp(44px, 7vh, 96px); }
.case__title { font-size: clamp(1.7rem, 3.6vw, 3rem); color: var(--cream); max-width: 22ch; margin-bottom: 36px; text-wrap: balance; }
.piece__tag--light { color: var(--accent-light); margin-bottom: 18px; }
.case__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.case__cols h4 { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(240,231,215,0.18); font-weight: 400; }
.case__cols p { color: var(--cream-2); font-size: 0.96rem; }
.case__quote { margin: 40px 0 0; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--cream); font-style: italic; }
.case__quote cite { display: block; margin-top: 14px; font-family: var(--mono); font-style: normal; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-2); }

/* Paper-surfaced case: breaks the run of three dark slabs so each ink card
   (the $20M story and the GCC spotlight) reads as deliberate punctuation. */
.case--paper { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); }
.case--paper .case__title { color: var(--ink); }
.case--paper .piece__tag--light { color: var(--accent-deep); }
.case--paper .case__cols h4 { color: var(--ink); border-bottom-color: var(--line); }
.case--paper .case__cols p { color: var(--ink-2); }
.case--paper .case__quote { color: var(--ink); }
.case--paper .case__quote cite { color: var(--ink-3); }
.case--paper .link-arrow--light { color: var(--accent-deep); border-bottom-color: var(--accent-soft); }
.case--paper .link-arrow--light:hover { border-bottom-color: var(--accent); }

/* Free resource callout (Documentation Health Checklist, ungated) */
.freebie { margin-bottom: clamp(70px, 11vh, 150px); display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
  background: linear-gradient(180deg, rgba(191,93,54,0.055), rgba(191,93,54,0.02));
  border: 1px solid var(--line); border-radius: 14px; padding: clamp(28px, 4vw, 54px); }
.freebie__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); max-width: 16ch; margin: 14px 0; }
.freebie__desc { color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; max-width: 46ch; margin-bottom: 22px; }
.freebie__card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(20px, 2.4vw, 28px); box-shadow: 0 24px 55px -34px rgba(28,24,19,0.5); }
.freebie__card-eyebrow { display: block; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent-deep); padding-bottom: 12px; margin-bottom: 13px; border-bottom: 1px solid var(--line); }
.freebie__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.freebie__rows li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.9rem; line-height: 1.3; color: var(--ink-2); }
.freebie__box { flex: none; width: 15px; height: 15px; margin-top: 1px; border: 1.5px solid var(--accent);
  border-radius: 4px; background: rgba(191,93,54,0.05); position: relative; }
.freebie__rows li.is-checked .freebie__box { background: var(--accent); border-color: var(--accent); }
.freebie__rows li.is-checked .freebie__box::after { content: ""; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 8px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.freebie__chip { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.04em; color: var(--ink-3); background: rgba(28,24,19,0.05); border-radius: 100px; padding: 5px 12px; }
@media (max-width: 820px) { .freebie { grid-template-columns: 1fr; gap: 30px; } }

/* Toolset */
.toolset { margin-top: clamp(56px, 9vh, 110px); padding-top: 40px; border-top: 1px solid var(--line); }
/* The stack: a dense grid of grouped tool clusters. Distinct from the credential
   rows above (label sits OVER its chips, not beside a full-width text run), and it
   fills the width instead of trailing off into empty space. */
.stack { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vh, 38px) clamp(34px, 4.5vw, 68px); }
.stack__group { display: flex; flex-direction: column; gap: 12px; }
.stack__cat { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-deep); }
.stack__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stack__chips > span { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.22rem); color: var(--ink); padding: 4px 15px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 100px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease); }
.stack__chips > span:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.stack__chips em { font-style: normal; font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }

/* ---------- About ---------- */
.about { padding: var(--section-pad) var(--pad); max-width: var(--container); margin-inline: auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.about__media { margin: 0; position: relative; }
/* Portrait anchors the opening screen and rides alongside the long text column */
@media (min-width: 861px) { .about__media { position: sticky; top: clamp(88px, 12vh, 116px); } }
/* Playful clay star behind the floating cut-out */
.about__media::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 47%;
  width: 122%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: var(--peach);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.about__media .reveal-img { position: relative; z-index: 1; overflow: visible; border-radius: 0; background: transparent; display: flex; align-items: flex-end; justify-content: center; }
.about__media .reveal-img picture { display: block; width: 100%; }
.about__media img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 24px 32px rgba(28, 24, 19, 0.20)); }
.js .about__media .reveal-img img { transform: none !important; }
.about__title { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 28px; }
.about__text p { color: var(--ink-2); font-size: 1.08rem; margin-bottom: 18px; max-width: 52ch; }
.about__values { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 36px; border-top: 1px solid var(--line); padding-top: 32px; }
.about__values dt { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); margin-bottom: 4px; }
.about__values dd { margin: 0; font-size: 0.92rem; color: var(--ink-2); }

/* ---------- Words ---------- */
.words { padding: var(--section-pad) var(--pad); max-width: var(--container); margin-inline: auto; }
.words__head { margin-bottom: clamp(40px, 6vh, 72px); }
.words__title { font-size: var(--title); max-width: 16ch; }
.quote { margin: 0; }
.words__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.quote blockquote { margin: 0 0 20px; font-size: 1.04rem; color: var(--ink); line-height: 1.5; }
.quote__name { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); display: block; }
.quote__role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); display: block; margin-top: 4px; }
/* Lead quote AFTER the generic .quote rules: same specificity, so source order
   decides the cascade. (Placed earlier, its display sizing was silently lost.) */
.quote--lead { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(34px, 6vh, 70px) 0; margin-bottom: clamp(34px, 5vh, 60px); }
.quote--lead blockquote { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2.15rem); line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; max-width: 44ch; }

/* ---------- Contact ---------- */
.contact { padding: clamp(60px, 10vh, 140px) var(--pad) clamp(80px, 14vh, 180px); background: var(--ink); color: var(--cream); text-align: center; }
.contact__title { font-size: clamp(2.2rem, 6vw, 5.4rem); color: var(--cream); max-width: 18ch; margin: 0 auto 30px; line-height: 1.02; }
.contact__lead { color: var(--cream-2); font-size: 1.14rem; max-width: 54ch; margin: 0 auto 36px; }
.contact__trust { max-width: 56ch; margin: 0 auto 34px; padding: 16px 22px; text-align: center;
  border: 1px solid rgba(240, 231, 215, 0.16); border-radius: 12px; background: rgba(240, 231, 215, 0.04);
  color: var(--cream); font-size: 1.02rem; line-height: 1.5; }
.contact__trust span { display: block; margin-top: 8px; color: var(--cream-2); font-size: 0.84rem; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }


/* ---------- GCC High spotlight band (audit #3b); container inherits .case (ink bg, cream text) ---------- */
.gcc { margin-top: 0; }
.gcc__lead { max-width: 62ch; font-size: 1.06rem; color: var(--cream-2); }
.gcc__scope { margin-top: 20px; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent-light); }
.gcc__quotes { margin-top: clamp(34px, 5vh, 56px); padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid rgba(240, 231, 215, 0.18); display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px); }
.gcc .quote blockquote { color: var(--cream); }
.gcc .quote__name { color: var(--cream); }
.gcc .quote__role { color: var(--cream-2); }
.gcc .link-arrow--light { margin-top: clamp(30px, 4vh, 48px); }

/* ---------- Employer on-ramp (audit #4) ---------- */
.hero__open { margin: 22px 0 0; max-width: 48ch; font-size: 0.9rem; line-height: 1.5; color: var(--ink-3); }
.contact__doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 28px);
  max-width: 920px; margin: 0 auto 40px; text-align: left; }
.contact__door { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(240, 231, 215, 0.16); border-radius: 14px; background: rgba(240, 231, 215, 0.04); }
.contact__door-k { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--accent-light); margin: 0 0 12px; }
.contact__door-title { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--cream);
  line-height: 1.08; margin: 0 0 12px; }
.contact__door-copy { color: var(--cream-2); font-size: 0.98rem; line-height: 1.5; margin: 0 0 22px; }
.contact__door .btn { margin-top: auto; }
.contact__door-resume { margin-top: 16px; }

@media (max-width: 860px) { .gcc__quotes { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .contact__doors { grid-template-columns: 1fr; } }

/* ---------- Broaden the proof: client-outcomes strip (audit #10) ---------- */
.impact__outcomes { max-width: var(--container); margin: clamp(30px, 4vh, 52px) auto 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; }
.impact__outcomes-k { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent-light); }
.impact__outcomes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.impact__outcomes li { display: inline-flex; align-items: center; gap: 12px; color: var(--cream); font-size: 0.98rem; }
.impact__outcomes li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-light); }

/* ---------- Testimonial wall band labels (audit #12/#13) ---------- */

/* ---------- Archaeology-to-tech Then/Now motif (audit #14) ---------- */
.thennow { margin-top: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(26px, 4vh, 40px) 0; }
.thennow__through { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.16;
  letter-spacing: -0.01em; color: var(--ink); max-width: 24ch; margin-bottom: clamp(22px, 3vh, 32px); }
.thennow__through em { color: var(--accent-deep); font-style: italic; }
.thennow__beats { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.thennow__beat { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.thennow__then, .thennow__now { font-size: 0.98rem; line-height: 1.4; }
.thennow__then { color: var(--ink-3); }
.thennow__now { color: var(--ink); }
.thennow__k { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 4px; }
.thennow__then .thennow__k { color: var(--ink-3); }
.thennow__now .thennow__k { color: var(--accent-deep); }
.thennow__arrow { color: var(--accent); font-size: 1.05rem; line-height: 1; }
.thennow__foot { margin-top: clamp(18px, 2.5vh, 26px); font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.05em; color: var(--ink-3); }

/* ---------- FAQ (audit #15) ---------- */
@media (max-width: 560px) {
  .thennow__beat { grid-template-columns: 1fr; gap: 6px; }
  .thennow__arrow { transform: rotate(90deg); justify-self: start; }
}
.contact .btn--solid { background: var(--accent-light); color: var(--ink); }
.contact .btn--solid:hover { background: var(--cream); color: var(--ink); }

/* ---------- Footer ---------- */
.footer { padding: clamp(50px, 8vh, 90px) var(--pad) 40px; background: var(--ink); color: var(--cream-2); border-top: 1px solid rgba(240,231,215,0.14); overflow: hidden; }
.footer__big { font-family: var(--serif); font-size: clamp(3rem, 16vw, 17rem); line-height: 0.8; color: var(--cream); letter-spacing: -0.03em; margin-bottom: 50px; white-space: nowrap; }
.footer__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.footer__col { font-size: 0.92rem; color: var(--cream); line-height: 1.7; }
.footer__col--end { text-align: right; }
.footer__k { display: block; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-2); margin-bottom: 10px; }
/* Persistent underline so inline links (e.g. "Back to top") are distinguishable
   without relying on colour alone (WCAG 1.4.1); brightens to accent on hover. */
.footer__col a { color: var(--cream); border-bottom: 1px solid rgba(240, 231, 215, 0.45); transition: border-color 0.25s var(--ease); }
.footer__col a:hover { border-color: var(--accent); }
/* Discreet admin sign-in for Anna (resting contrast still clears AA on the dark footer).
   Scoped under .footer__col so it outranks the generic link underline rule above. */
.footer__col .footer__signin { display: block; margin-top: 16px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-2); opacity: 0.8; border-bottom: 0; transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease); }
.footer__signin:hover { opacity: 1; }

/* =================================================================
   Motion base states (only under .js; .no-js shows everything)
   ================================================================= */
/* All reveals are pure CSS, triggered by an IntersectionObserver adding .is-in.
   They never depend on a JS animation library completing, so content can't get
   stuck hidden if a CDN/script fails. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }

/* Flowing headlines: clean block reveal */
.js [data-split] { opacity: 0; transform: translateY(22px); }
.js [data-split].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }

/* Hero controlled lines: each inner slides up from its clip mask, staggered */
.js [data-lines] .line > i { transform: translateY(115%); transition: transform 1.05s var(--ease); }
.js [data-lines].is-in .line > i { transform: translateY(0); }
.js [data-lines].is-in .line:nth-child(2) > i { transition-delay: 0.08s; }
.js [data-lines].is-in .line:nth-child(3) > i { transition-delay: 0.16s; }
.js [data-lines].is-in .line:nth-child(4) > i { transition-delay: 0.24s; }

/* Failsafe: if main.js never loaded, reveal all content (set by the head script) */
.motion-failsafe [data-reveal],
.motion-failsafe [data-split],
.motion-failsafe [data-lines] { opacity: 1 !important; transform: none !important; }
.motion-failsafe [data-lines] .line > i { transform: none !important; }
.motion-failsafe [data-blur] { filter: none !important; }
.motion-failsafe .sdivider__line { transform: scaleX(1) !important; }
.motion-failsafe .sdivider__star { transform: scale(1) !important; }

/* =================================================================
   Delight - sparkles, doodles, wave, scroll progress (all motion
   respects prefers-reduced-motion via the global reduce block below)
   ================================================================= */

/* Slim scroll-progress bar */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; }
.progress__bar { height: 100%; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }

/* Sparkles ✦ */
.sparkle { position: absolute; width: clamp(16px, 2.2vw, 30px); height: auto; color: var(--accent); pointer-events: none; z-index: 3; opacity: 0.9; filter: drop-shadow(0 2px 5px rgba(191, 93, 54, 0.22)); }
.about__media.is-in .sparkle { animation: sparklePop 0.7s var(--ease) both; }
@keyframes sparklePop { from { opacity: 0; transform: scale(0.4) rotate(-35deg); } to { opacity: 0.9; transform: scale(1) rotate(0deg); } }
.sparkle--c { animation-delay: 0.5s; animation-duration: 2.8s; }
.about__spark { top: 4%; right: 6%; }

/* Footer "built by Gnomes" mark + hover/focus tooltip. The footer column is
   right-aligned on desktop, so the bubble is anchored to the gnome's right edge
   and opens leftward into the wide footer (never past the right viewport edge);
   the <=860 block flips it for the left-aligned mobile footer. */
.footer__gnome { position: relative; display: inline-block; line-height: 0; cursor: help; border-radius: 6px; outline: none; }
.footer__gnome img { width: auto; height: 34px; display: block; opacity: 0.85; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.footer__gnome:hover img, .footer__gnome:focus-visible img { opacity: 1; transform: translateY(-2px); }
.footer__gnome:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.footer__gnome-tip {
  position: absolute; bottom: calc(100% + 11px); right: 0; left: auto;
  padding: 7px 12px; border-radius: 8px; background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.01em; white-space: nowrap; text-align: left;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30); opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(4px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.footer__gnome-tip::after {
  content: ""; position: absolute; top: 100%; right: 13px; left: auto;
  border: 6px solid transparent; border-top-color: var(--paper);
}
.footer__gnome:hover .footer__gnome-tip, .footer__gnome:focus-visible .footer__gnome-tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Playful hover micro-interactions */
.svc__item:hover .svc__idx { color: var(--accent-deep); }
.svc__item:hover .svc__name { color: var(--accent-deep); }
.footer__big { transition: color 0.6s var(--ease); }
.footer:hover .footer__big { color: var(--cream); }

/* Service doodle icons */
.svc__lead { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.svc__icon { width: 38px; height: 38px; color: var(--ink-2); transition: color 0.3s var(--ease), transform 0.45s var(--ease); }
.svc__item:hover .svc__icon { color: var(--accent); transform: rotate(-7deg) scale(1.1); }

/* Hand-drawn ring doodle (impact title) */

/* Section transitions - dark panels rise from the paper with rounded corners */
.impact {
  border-radius: clamp(26px, 4vw, 54px);
  position: relative; z-index: 1;
  box-shadow: 0 44px 90px -56px rgba(28, 24, 19, 0.6);
}
.contact {
  border-top-left-radius: clamp(26px, 4vw, 54px);
  border-top-right-radius: clamp(26px, 4vw, 54px);
  margin-top: clamp(-40px, -3vw, -18px);
  position: relative; z-index: 1;
}

/* Animated section divider - two lines draw outward from a star that pops */
.sdivider { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); max-width: 1000px; margin-inline: auto; padding: clamp(24px, 6vh, 64px) var(--pad); }
.sdivider__line { flex: 1; height: 1px; background: var(--line-2); transform: scaleX(0); }
.sdivider__line--l { transform-origin: right center; }
.sdivider__line--r { transform-origin: left center; }
.sdivider__star { flex: none; width: 22px; height: 22px; color: var(--accent); transform: scale(0) rotate(-45deg); }
.js .sdivider.is-in .sdivider__line { transform: scaleX(1); transition: transform 0.85s var(--ease); }
.js .sdivider.is-in .sdivider__star { transform: scale(1) rotate(0deg); transition: transform 0.6s var(--ease) 0.35s; }

/* Blur-in reveal variant (premium "focus" effect) */
.js [data-reveal][data-blur], .js [data-split][data-blur] { filter: blur(10px); }
.js [data-reveal][data-blur].is-in, .js [data-split][data-blur].is-in { filter: blur(0); transition: opacity 0.95s var(--ease), transform 0.95s var(--ease), filter 0.95s var(--ease); }

/* Reveal-img mask state (handled by JS scale) */
.js .reveal-img img { transform: scale(1.12); }
.js .reveal-img.is-in img { transform: scale(1); transition: transform 1.3s var(--ease); }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1080px) {
  .impact-row { grid-template-columns: minmax(160px, 1fr) 1.4fr; }
  .impact-row__num { grid-row: span 3; }
  .impact-row__src { grid-column: 2; }
  .svc__item { grid-template-columns: 56px 1fr 1.2fr; }
  .svc__tags { display: none; }
  .words__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Medium widths: tighten the nav so the 6 links + Resume + Available pill fit
   on one row before the nav collapses to the hamburger at 1000. */
@media (max-width: 1160px) {
  .nav__links { gap: 22px; }
  .nav__links a, .nav__resume { font-size: 0.9rem; }
  .nav__avail-rest { display: none; } /* pill shows just "Available" */
}

/* Below ~1000px the 6 links + Resume + Available pill can no longer share the
   row with the brand without "GCC High" wrapping off the logo's baseline, so
   collapse the inline nav to the hamburger (it carries the links + Resume). */
@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__resume { display: none; }
  .nav__toggle { display: flex; }
}

@media (max-width: 860px) {
  /* keep a compact "Available" chip on mobile so a contact path is always visible */
  .nav__avail { padding: 8px 12px; font-size: 0.66rem; }
  .nav__avail-rest { display: none; }

  .hero { min-height: auto; }
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "lead" "portrait";
    grid-template-rows: auto auto auto;
    row-gap: 30px;
  }
  .hero__title { font-size: clamp(2.35rem, 11vw, 5rem); align-self: auto; }
  .hero__portrait { max-width: none; align-self: start; justify-self: center; padding-block: 4px; }
  .hero__avatar { width: clamp(220px, 64vw, 360px); }

  .piece__body, .about { grid-template-columns: 1fr; }
  .piece--reverse .piece__text { order: 1; }
  .piece--reverse .doc { order: 2; }
  .about__media { max-width: 420px; }
  .case__cols { grid-template-columns: 1fr; gap: 24px; }
  .impact-row { grid-template-columns: 1fr; gap: 8px; }
  .impact-row__num { grid-row: auto; }
  .impact-row__src { grid-column: 1; }
  .svc__item { grid-template-columns: 40px 1fr; gap: 14px 18px; }
  .svc__desc { grid-column: 1 / -1; }
  .footer__row { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer__col--end { text-align: left; }
  /* footer is left-aligned here, so open the tooltip rightward from the gnome */
  .footer__gnome-tip { left: 0; right: auto; }
  .footer__gnome-tip::after { left: 13px; right: auto; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav__brand-text { display: none; } /* the AM mark alone is the brand on small screens */
  .words__grid { grid-template-columns: 1fr; }
  .about__values { grid-template-columns: 1fr; }
  .footer__row { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .hero__cta .btn--text { width: auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js [data-reveal], .js [data-split] { opacity: 1; transform: none; }
  .js [data-lines] .line > i { transform: none; }
  .js [data-blur] { filter: none !important; }
  .sdivider__line { transform: scaleX(1) !important; }
  .sdivider__star { transform: scale(1) !important; }
  .js .reveal-img img { transform: none; }
  .marquee__track { transform: none !important; }
}

/* User-toggled "reduce motion" (persisted) - mirrors the reduced-motion behavior */
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
}
html.motion-off { scroll-behavior: auto !important; }
html.motion-off [data-reveal], html.motion-off [data-split] { opacity: 1 !important; transform: none !important; }
html.motion-off [data-lines] .line > i { transform: none !important; }
html.motion-off [data-blur] { filter: none !important; }
html.motion-off .sdivider__line { transform: scaleX(1) !important; }
html.motion-off .sdivider__star { transform: scale(1) !important; }
html.motion-off .reveal-img img { transform: none !important; }
html.motion-off .marquee__track { transform: none !important; }

/* ---------- Print ---------- */
@media print {
  .nav, .grain, .marquee, .nav__mobile { display: none !important; }
  body { color: #000; background: #fff; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* =================================================================
   Words - featured lead quote. A full-width editorial pull-quote; the
   site's own clay star (not borrowed clip-art) supplies the warmth and
   idle-floats after the figure reveals (auto-disabled by the global
   reduced-motion / motion-off blocks).
   ================================================================= */
.quote--lead { position: relative; }
.quote--lead figcaption { margin-top: clamp(18px, 3vh, 30px); display: block; }
.quote--lead__spark {
  position: absolute; top: clamp(22px, 4vh, 52px); right: clamp(4px, 6vw, 100px);
  width: clamp(38px, 5vw, 78px); height: auto; color: var(--accent-light);
  filter: drop-shadow(0 5px 12px rgba(191, 93, 54, 0.22)); pointer-events: none;
}
.js .quote--lead[data-reveal].is-in .quote--lead__spark { animation: illoFloat 7s ease-in-out 1s infinite; }
@keyframes illoFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
@media (max-width: 560px) {
  .quote--lead__spark { width: 32px; right: 2px; top: 14px; }
}

/* =================================================================
   About - Experience & credentials (compact spec-sheet block)
   ================================================================= */
.creds { margin-top: clamp(26px, 4vh, 44px); border-top: 1px solid var(--line); }
.creds__row {
  display: grid; grid-template-columns: minmax(84px, 120px) 1fr; gap: clamp(14px, 3vw, 32px);
  padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.creds dt { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-deep); }
.creds dd { margin: 0; font-size: 0.98rem; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 560px) {
  .creds__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}

/* =================================================================
   Leave a review - form (posts to /api/reviews; lands in the D1 moderation queue)
   ================================================================= */
.review { padding: var(--section-pad) var(--pad); max-width: var(--container); margin-inline: auto; }
.review__head { margin-bottom: clamp(40px, 6vh, 72px); }
.review__title { font-size: var(--title); max-width: 18ch; }
.review__intro { margin-top: 22px; font-size: 1.1rem; color: var(--ink-2); max-width: 54ch; }

.review__form { max-width: 760px; position: relative; }
.review__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.field__label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.72; }
.field__input {
  font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--line-3); border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field__input::placeholder { color: #635a4a; opacity: 1; }
.field__input:focus-visible { outline: none; border-color: var(--accent); background: var(--paper); box-shadow: 0 0 0 3px var(--accent-soft); }
.field__textarea { resize: vertical; min-height: 128px; line-height: 1.5; }

.review__consent { flex-direction: row; align-items: flex-start; gap: 12px; }
.review__consent span { font-size: 0.92rem; color: var(--ink-2); line-height: 1.45; }
.review__check { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }

/* honeypot: kept in the DOM for bots, hidden from people */
.review__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.review__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: clamp(20px, 3vh, 30px); }
.review__status { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.review__status.is-ok { color: var(--accent-deep); font-weight: 500; }
.review__status.is-err { color: var(--accent-deep); }
.review__form.is-sending .btn { opacity: 0.6; pointer-events: none; }

@media (max-width: 620px) {
  .review__grid { grid-template-columns: 1fr; }
}