/* ==========================================================================
   Alto Gary — design system
   Palette derived from the existing "Portfolio Impact Snapshot" brand:
   deep slate ground, gold primary accent, coral used sparingly.
   ========================================================================== */

:root {
  --bg:          #14171D;
  --surface:     #1D212A;
  --surface-2:   #252A35;
  --line:        rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text:        #F3F1EC;
  --muted:       #A4ABB8;
  --muted-dim:   #8B93A3;

  --gold:        #D9B679;
  --gold-bright: #E8C68C;
  --gold-soft:   rgba(217, 182, 121, 0.12);
  --coral:       #E8705C;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --wrap: 1120px;
  --gut: clamp(1.25rem, 5vw, 3rem);
  --radius: 14px;

  --step-hero: clamp(3rem, 9vw, 6.5rem);
  --step-h2:   clamp(2rem, 4.2vw, 3.1rem);
  --step-h3:   clamp(1.25rem, 2vw, 1.5rem);
  --step-lead: clamp(1.075rem, 1.6vw, 1.3rem);
}

/* --------------------------------------------------------------- reset --- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: #14171D;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  transform: translateY(-120%);
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: none; }

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

/* -------------------------------------------------------------- layout --- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

section { scroll-margin-top: 88px; }

.section {
  padding-block: clamp(4rem, 10vw, 7.5rem);
  border-top: 1px solid var(--line);
}

.section--flush { border-top: 0; }

.eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 1rem;
}

/* `.section-head p` (0,1,1) outranks `.eyebrow` (0,1,0), so section labels were
   rendering at body-lead size in muted grey rather than as small gold labels.
   Re-assert with matching specificity. */
.section-head p.eyebrow {
  font-size: 0.85rem;
  color: var(--gold);
  margin-top: 0;
  max-width: none;
}

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

h2 {
  font-family: var(--serif);
  font-size: var(--step-h2);
  letter-spacing: -0.015em;
}

.section-head p {
  margin-top: 1.125rem;
  color: var(--muted);
  font-size: var(--step-lead);
  max-width: 58ch;
}

/* -------------------------------------------------------------- header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(20, 23, 29, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .dot { color: var(--gold); }

.site-nav { margin-left: auto; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.site-nav a {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--muted);
  transition: color 0.18s ease;
}
.site-nav a:hover { color: var(--text); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

/* --------------------------------------------------------------- hero --- */

.hero {
  padding-block: clamp(3.5rem, 11vw, 8rem) clamp(3rem, 8vw, 5.5rem);
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto 0;
  height: 70%;
  z-index: -1;
  background: radial-gradient(60% 70% at 25% 20%, rgba(217, 182, 121, 0.13), transparent 70%);
  pointer-events: none;
}

.hero-name {
  font-family: var(--serif);
  font-size: var(--step-hero);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.hero-role {
  color: var(--gold);
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  margin-bottom: 1.75rem;
  max-width: 40ch;
}

.hero-lead {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  max-width: 30ch;
  margin-bottom: 1.5rem;
}

.hero-sub {
  color: var(--muted);
  max-width: 56ch;
  font-size: var(--step-lead);
  margin-bottom: 2.5rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* -------------------------------------------------------------- button --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--gold); color: #14171D; }
.btn--primary:hover { background: var(--gold-bright); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

/* --------------------------------------------------------- proof strip --- */

.proof-band {
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
}

.proof dt {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 0.5rem;
}
.proof dd { margin: 0; }

/* Reserve two lines for every headline so a phrase that wraps doesn't knock the
   supporting copy out of line with its neighbours. */
.proof-value {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  min-height: 2.4em;
}
.proof dd small {
  display: block;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--muted);
  padding-top: 0.55rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------- cards --- */

.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(14.375rem, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.card h3 {
  font-size: var(--step-h3);
  font-weight: 600;
  margin-bottom: 0.75rem;
  letter-spacing: -0.005em;
}

.card p { color: var(--muted); font-size: 0.96rem; }

.card-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--gold);
  display: block;
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------- work --- */

.work-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  transition: border-color 0.2s ease;
}
.work-item:hover { border-color: var(--line-strong); }
.work-item--feature { border-color: rgba(217, 182, 121, 0.28); }

@media (min-width: 800px) {
  .work-item { grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
}

.work-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid rgba(217, 182, 121, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1rem;
}

/* Signals a capability / representative-work card rather than a documented case study. */
.work-tag--capability {
  color: var(--muted);
  background: transparent;
  border-color: var(--line-strong);
  border-style: dashed;
}

.work-item h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.875rem;
}

.work-item p { color: var(--muted); }
.work-item p + p { margin-top: 0.875rem; }

.work-meta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.work-meta li {
  font-size: 0.78rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, gap 0.18s ease;
}
.link-arrow:hover { border-color: var(--gold); gap: 0.75rem; }

/* ------------------------------------------------------------- process --- */

.process {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.process-step { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.125rem); }

.process-step .step-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 0.875rem;
}
.process-step h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.process-step p { color: var(--muted); font-size: 0.95rem; }

/* -------------------------------------------------------- track record --- */

.record {
  counter-reset: rec;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.record li {
  counter-increment: rec;
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

@media (min-width: 760px) {
  .record li { grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr); }
}

.record li::before {
  content: counter(rec, decimal-leading-zero);
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.record h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

.record p { color: var(--muted); font-size: 0.98rem; }

/* --------------------------------------------------------------- about --- */

.about {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: start;
  justify-items: center;
}
@media (min-width: 860px) {
  .about {
    grid-template-columns: minmax(20rem, 25rem) minmax(0, 1fr);
    justify-items: stretch;
  }
}

/* Figure wraps image + disclosure; the bordered frame is the inner div only,
   so the caption sits outside the image, not inside its border. */
.about-figure {
  margin: 0;
  width: 100%;
  max-width: min(88vw, 420px);
}
@media (min-width: 860px) { .about-figure { max-width: none; } }

.portrait-disclosure {
  margin-top: 0.875rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted-dim);
  max-width: 42ch;
}
.portrait-disclosure span {
  display: block;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}

.about-portrait {
  margin: 0;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  /* 3:4 frame keeps the face centred at every width — no cropping needed. */
}

.about-quote {
  margin: 1.75rem 0 0;
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 8px 8px 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--gold-bright);
}

.prose p { color: var(--muted); font-size: var(--step-lead); }
.prose p + p { margin-top: 1.25rem; }
.prose strong { color: var(--text); font-weight: 600; }

/* -------------------------------------------------------- capabilities --- */

.cap-list dt {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.cap-list dd { margin: 0; color: var(--muted); font-size: 0.95rem; }
.cap-list dd li { padding: 0.28rem 0; }
.cap-list dd li::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 0.7rem;
  vertical-align: middle;
  opacity: 0.7;
}

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li {
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
}

/* --------------------------------------------------------------- stack --- */

/* Tier one — the AI and orchestration layer, given the most visual weight. */
.stack-lead {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(21.25rem, 1fr));
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Tier two — supporting layers, deliberately quieter and in a single band so
   commerce/marketing never gets a row of its own. */
.stack-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .stack-grid { grid-template-columns: repeat(4, 1fr); } }

.stack-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color 0.2s ease;
}
.stack-card:hover { border-color: var(--line-strong); }

.stack-card h3 {
  font-size: 1.075rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 0.625rem;
}

.stack-note {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: 46ch;
}

.stack-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-top: 1.5rem;
  margin-bottom: 0.7rem;
}

/* Lead cards: gold hairline, serif heading, larger chips. */
.stack-card--lead {
  position: relative;
  background:
    linear-gradient(180deg, var(--gold-soft), transparent 45%),
    var(--surface);
  border-color: rgba(217, 182, 121, 0.26);
  padding-top: clamp(1.75rem, 3.5vw, 2.25rem);
}

.stack-card--lead::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--gold), rgba(217, 182, 121, 0.15));
}

.stack-index {
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.stack-card--lead h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.stack-card--lead .stack-note { font-size: 1rem; }

/* Named platforms in the lead cards read a shade stronger. */
.tags--lead li {
  font-size: 0.9rem;
  color: var(--text);
  background: rgba(217, 182, 121, 0.07);
  border-color: rgba(217, 182, 121, 0.22);
  padding: 0.42rem 0.8rem;
}

/* Tier-two chips sit tighter so a four-across band stays legible. */
.stack-grid .tags li { font-size: 0.83rem; padding: 0.3rem 0.6rem; }

/* Capabilities and standards, as distinct from named platforms. */
.tags--cap li {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--muted);
}

/* ------------------------------------------------------------- gallery --- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.gallery figcaption,
.logo-wall figcaption {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.talk-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 0.75rem;
}

.logo-wall { margin: 0; }
.logo-wall img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(0.75rem, 2vw, 1.5rem);
}

/* ------------------------------------------------------------- contact --- */

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.contact-lead {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}

.contact-card > p,
.contact-grid > div > p:not(.form-note) { color: var(--muted); max-width: 52ch; font-size: var(--step-lead); }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

/* -------------------------------------------------------------- footer --- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-note { max-width: 58ch; line-height: 1.6; }

/* ---------------------------------------------------------- case study --- */

.case-hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); }
.case-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 1.25rem;
  max-width: 20ch;
}
.case-hero .hero-sub { margin-bottom: 0; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.back-link:hover { color: var(--gold); }

.case-body { max-width: 68ch; }
.case-body h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  margin-block: clamp(2.5rem, 5vw, 3.5rem) 1.25rem;
}
.case-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-block: 2rem 0.75rem;
}
.case-body p { color: var(--muted); font-size: var(--step-lead); }
.case-body p + p { margin-top: 1.125rem; }

.scorecard { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 0.95rem; }
.scorecard caption { text-align: left; color: var(--muted-dim); font-size: 0.85rem; padding-bottom: 0.75rem; }
.scorecard th, .scorecard td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.scorecard th { color: var(--text); font-weight: 600; }
.scorecard td { color: var(--muted); }
.scorecard td.score { font-family: var(--serif); font-size: 1.35rem; color: var(--gold); width: 1%; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

.message-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-top: 1.5rem;
  color: var(--muted);
}
.message-block p + p { margin-top: 0.875rem; }
.message-block .sign-off { color: var(--text); }

.checks li { padding: 0.4rem 0; color: var(--muted); font-size: 1rem; }
.checks li::before {
  content: "→";
  color: var(--gold);
  margin-right: 0.7rem;
}

/* ------------------------------------------------------------- reveal --- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------- small nav --- */

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gut) 1.25rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding: 0.9rem 0; font-size: 1rem; color: var(--text); }
  .site-header .wrap { position: relative; }
}

/* =========================================================================
   Evaluation-method page — wider container, prose stays at a readable
   measure while scorecards and comparisons break out to the full width.
   ========================================================================= */

.wrap--case { max-width: 900px; }

.case-body { max-width: none; }

/* Prose keeps a ~68-character measure; scorecards and comparisons break out to
   the full 900px container. rem rather than ch — ch varies with the loaded face. */
.case-body > p,
.case-body > ul { max-width: 42rem; }
.case-body > h2,
.case-body > h3 { max-width: 32rem; }
.case-body > ul.changes { max-width: none; }

.method-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid rgba(217, 182, 121, 0.3);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.5rem;
}

.case-lead {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 24ch;
  margin-block: 0 1.5rem;
}
.case-lead em { color: var(--gold); font-style: italic; }

.case-note {
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 62ch;
}
.case-note strong { color: var(--text); }

.case-role {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
  color: var(--muted);
  font-size: 0.95rem;
}
.case-role dt {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dim);
  width: 100%;
  margin-bottom: 0.35rem;
}
.case-role dd { margin: 0; }
.case-role dd + dd::before { content: "·"; color: var(--gold); margin-right: 0.75rem; }

/* ------------------------------------------------------------- scorecard --- */

.scorecard-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: 1fr;
  margin-top: 1.75rem;
}
@media (min-width: 560px)  { .scorecard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 840px)  { .scorecard-grid { grid-template-columns: repeat(4, 1fr); } }

.score-card {
  background: var(--surface);
  padding: clamp(1.25rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
}

.score-card h3 {
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
  font-weight: 600;
  margin: 0 0 0.875rem;
  max-width: none;
  min-height: 2.7em;   /* two lines — keeps all four meters on the same baseline */
}

.score-card .score-value {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--gold);
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}
.score-card .score-value span {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted-dim);
  letter-spacing: 0.04em;
}

.meter {
  display: flex;
  gap: 4px;
  margin: 0.875rem 0 1rem;
}
.meter i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.meter i.on { background: var(--gold); border-color: var(--gold); }

.score-card p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
  max-width: none;
}

.scorecard-caption {
  color: var(--muted-dim);
  font-size: 0.82rem;
  margin-top: 0.875rem;
  max-width: 65ch;
}

/* ---------------------------------------------------------- before/after --- */

.compare {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
  margin-top: 1.75rem;
}
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; } }

.compare-col {
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  background: var(--surface);
}
.compare-col--before { border-style: dashed; background: transparent; }
.compare-col--after  { border-color: rgba(217, 182, 121, 0.3); }

.compare-label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--muted-dim);
}
.compare-col--after .compare-label { color: var(--gold); }

.compare-col p, .compare-col li { color: var(--muted); font-size: 0.95rem; line-height: 1.6; max-width: none; }
.compare-col p + p { margin-top: 0.75rem; }
.compare-col .sign-off { color: var(--text); }

.compare-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.compare-list li:last-child { border-bottom: 0; }

/* -------------------------------------------------------------- changes --- */

.changes {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
  max-width: none;
}
@media (min-width: 620px) { .changes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .changes { grid-template-columns: repeat(3, 1fr); } }

.changes li { background: var(--surface); padding: 1.25rem; }
.changes h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  max-width: none;
}
.changes p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; margin: 0; max-width: none; }

/* =============================================================== press === */

.press {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .press { grid-template-columns: repeat(2, 1fr); } }

.press-item {
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
}
.press-item .outlet {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.press-item h3 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
.press-item p { color: var(--muted); font-size: 0.94rem; }
.press-item .link-arrow { margin-top: auto; padding-top: 1.25rem; }
.press-item .no-link {
  margin-top: auto;
  padding-top: 1.25rem;
  color: var(--muted-dim);
  font-size: 0.85rem;
}

/* ======================================================== contact form === */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 880px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

.form-field { margin-bottom: 1.125rem; }

.form-field label {
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.form-field label .req { color: var(--gold); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  font-size: 1.06rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.form-field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--muted-dim); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surface-2);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"] { border-color: var(--coral); }

.field-error {
  display: none;
  color: var(--coral);
  font-size: 0.82rem;
  margin-top: 0.4rem;
}
.field-error.show { display: block; }

.char-count {
  text-align: right;
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 0.4rem;
}
.char-count.over { color: var(--coral); }

/* Honeypot — hidden from people, reachable by naive bots. Not display:none,
   which some bots detect and skip. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
  margin-top: 1.5rem;
}

button.btn { font: inherit; font-weight: 600; cursor: pointer; }
button.btn--primary { background: var(--gold); color: #14171D; border: 1px solid transparent; }
button.btn--primary:hover { background: var(--gold-bright); }
button.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.form-status {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  display: none;
}
.form-status.show { display: block; }
.form-status.ok {
  color: var(--gold-bright);
  background: var(--gold-soft);
  border: 1px solid rgba(217, 182, 121, 0.3);
}
.form-status.err {
  color: var(--coral);
  background: rgba(232, 112, 92, 0.1);
  border: 1px solid rgba(232, 112, 92, 0.3);
}

.form-note {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 1rem;
  line-height: 1.6;
}

.preview-flag {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-dim);
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 1.25rem;
}

/* Evaluation-method tag — distinct from a client case study. */
.work-tag--method {
  color: var(--gold);
  background: transparent;
  border-color: rgba(217, 182, 121, 0.4);
  border-style: dashed;
}

/* =========================================================================
   Large and ultrawide displays
   -------------------------------------------------------------------------
   Below 1600px nothing here applies — laptop, tablet, and mobile layouts are
   untouched.

   The root font-size steps up in PERCENT (not px, so the visitor's own browser
   font preference is still respected). Because the whole system is built on
   rem, ch, and em, raising the root scales type, padding, gaps, and grid track
   minimums together — the same effect as browser zoom, without asking anyone to
   zoom. Prose measures are set in rem and ch, so character-per-line counts stay
   put while the text itself grows.
   ========================================================================= */

@media (min-width: 1600px) {
  :root {
    --wrap: 1400px;
    --gut: 3.5rem;
    --radius: 16px;
  }
  html { font-size: 112%; }
  .wrap--case { max-width: 1040px; }
}

@media (min-width: 2000px) {
  :root {
    --wrap: 1600px;
    --gut: 4rem;
    --radius: 18px;
  }
  html { font-size: 120%; }
  .wrap--case { max-width: 1140px; }
}

@media (min-width: 2400px) {
  :root {
    --wrap: 1800px;
    --radius: 20px;
  }
  html { font-size: 128%; }
  .wrap--case { max-width: 1240px; }
}