/* ==========================================================================
   salvatorres. — stylesheet
   The palette is defined once below; change a value here and it updates
   everywhere on both pages.
   ========================================================================== */

:root {
  /* ---- Brand palette (from Web Brand Colors.pdf) ----
     The PDF assigns these by role, so they're named by role here. */
  --sand:   #D5CFC4;   /* primary   — the page background */
  --black:  #000000;   /* main titles */
  --brown:  #665847;   /* subtitles and descriptions */
  --coral:  #EA4E43;   /* CTA buttons */

  --accent: var(--coral);

  /* Two tones derived from the primary, so the sections can alternate and
     the cards can lift off the background. Nothing else is invented. */
  --mist:   #E3DFD6;   /* primary, lightened — quiet sections */
  --card:   #F4F2ED;   /* primary, lightened further — cards */

  /* ---- Roles: LIGHT (the default across the site) ---- */
  --bg:       var(--sand);
  --fg:       var(--black);
  --fg-soft:  var(--brown);
  --muted:    rgba(102, 88, 71, 0.78);
  --line:     rgba(102, 88, 71, 0.26);
  --surface:  rgba(102, 88, 71, 0.07);
  --mark:     var(--coral);
  --accent-2: var(--coral);

  /* ---- Type ----
     Elms Sans (geometric, same family of shapes as the wordmark) for every
     main title; Inter for subtitles and body copy. */
  --font-display: "Elms Sans", "Century Gothic", "Avenir Next", ui-sans-serif, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Geometric sans wants tighter tracking at display sizes than a serif does.
     Nudge these two to loosen or tighten every heading at once — the word
     space needs pulling in too, or it looks wide next to the tight letters. */
  --track-display: -0.025em;
  --word-display:  -0.06em;

  /* ---- Layout ---- */
  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1320px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 20px;
}

/* ---- Roles: DARK. Add class="on-dark" to any section to invert it. ------- */
/* The brown is too dark to read on black, so on the dark sections the primary
   sand takes over as the text colour and steps down in opacity for the
   subtitles. Titles, CTA and highlight colours are unchanged. */
.on-dark {
  --fg:      var(--sand);
  --fg-soft: rgba(213, 207, 196, 0.74);
  --muted:   rgba(213, 207, 196, 0.52);
  --line:    rgba(213, 207, 196, 0.18);
  --surface: rgba(213, 207, 196, 0.06);
  --mark:     var(--coral);
  --accent-2: var(--coral);
  background: var(--black);
  color: var(--fg);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--sand); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
  font-family: var(--font-mono); font-size: .75rem;
}
.skip:focus { left: 0; }

/* --- Shared type ---------------------------------------------------------- */
/* Sans-serif, uppercase, tracked — used for every eyebrow and small label. */
.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Every main title on the site uses this. */
.display,
.problem__title, .service__title, .step__title,
.formcard h1, .formstate h2, .problem__stat {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  word-spacing: var(--word-display);
}
.display {
  line-height: 1.04;
  text-wrap: balance;
}

/* Card titles are small enough that 400 goes weak — a step up holds them. */
.problem__title, .service__title, .step__title, .problem__stat,
.formstate h2 {
  font-weight: 500;
  letter-spacing: -0.015em;
}

mark {
  background: none;
  color: var(--mark);
  font-style: italic;
  font-weight: 300;
}

.section { padding-block: clamp(4.5rem, 10vw, 9rem); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* --- Logo (image wordmark from Logo.jpg) ---------------------------------- */
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo img { width: clamp(140px, 15vw, 178px); height: auto; }
.footer__brand .logo img { width: clamp(160px, 17vw, 200px); }

/* --- Header --------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding-block: 1.125rem;
  color: var(--sand);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
}
.header.is-stuck {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(213, 207, 196, 0.16);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.header__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem); }
.header__nav a.navlink {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(213, 207, 196, 0.62);
  transition: color .25s var(--ease);
}
.header__nav a.navlink:hover { color: var(--sand); }

/* Language toggle */
.lang {
  display: inline-flex;
  border: 1px solid rgba(213, 207, 196, 0.26);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}
.lang button {
  background: none; border: 0; cursor: pointer;
  padding: 0.4rem 0.65rem;
  color: rgba(213, 207, 196, 0.64);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lang button[aria-pressed="true"] { background: var(--sand); color: var(--black); }

/* Mobile menu button — hidden on desktop */
.navtoggle {
  display: none;
  background: none; border: 1px solid rgba(213, 207, 196, .26);
  border-radius: 999px; cursor: pointer;
  padding: .5rem .9rem;
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sand);
}

@media (max-width: 900px) {
  .navtoggle { display: inline-block; }
  .header__nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 5.5rem var(--pad) 2.5rem;
    background: var(--black);
    border-bottom: 1px solid rgba(213, 207, 196, .16);
    transform: translateY(-104%);
    transition: transform .45s var(--ease);
    z-index: -1;
  }
  .header__nav.is-open { transform: none; }
  .header__nav a.navlink { font-size: 1.05rem; color: var(--sand); font-family: var(--font-body); }
  .header__nav .btn { width: 100%; justify-content: center; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

/* Primary — the CTA colour from the brand sheet. */
.btn--accent { background: var(--coral); color: #fff; }
.btn--accent:hover { background: var(--black); color: var(--sand); }

/* Secondary — outline */
.btn--ghost { border-color: currentColor; color: var(--fg); background: transparent; opacity: .85; }
.btn--ghost:hover { background: var(--fg); color: var(--bg); opacity: 1; }
.on-dark .btn--ghost:hover { background: var(--sand); color: var(--black); }

.btn--sm { padding: 0.55rem 1rem; }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --- Hero (dark) ---------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: 9rem;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  width: 66vw; height: 66vw;
  right: -20vw; top: -18vw;
  background: radial-gradient(circle, rgba(234, 78, 67, .40), transparent 62%);
  filter: blur(50px);
  pointer-events: none;
}
.hero__inner { position: relative; width: 100%; }
.hero__eyebrow { display: flex; align-items: center; gap: .7rem; margin-bottom: clamp(1.5rem, 4vw, 2.75rem); }
.hero__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.hero h1 { font-size: clamp(2.35rem, 7vw, 6.25rem); max-width: 18ch; }
.hero__lede {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 56ch;
  color: var(--fg-soft);
  font-size: clamp(0.9688rem, 0.9rem + 0.38vw, 1.1875rem);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); }
.hero__scroll { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: flex; align-items: center; gap: .6rem; }
.hero__scroll .rule { display: block; width: 54px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.hero__scroll .rule::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: translateX(-100%); animation: sweep 2.6s var(--ease) infinite;
}
@keyframes sweep { 0% { transform: translateX(-100%);} 55%,100% { transform: translateX(100%);} }

/* --- Intro ---------------------------------------------------------------- */
.intro__statement {
  font-size: clamp(1.65rem, 3.9vw, 3.15rem);
  max-width: 21ch;
  margin-top: 1.5rem;
}
.intro__body {
  color: var(--fg-soft);
  max-width: 64ch;
  font-size: clamp(0.9688rem, 0.925rem + 0.2vw, 1.0625rem);
  margin-top: clamp(2rem, 4.5vw, 3rem);
}

/* Two-column intro: copy on the left, animated diagram on the right.
   Single column until there's room for the figure to sit alongside.
   minmax(0,…) + min-width:0 keep the SVG from ever forcing overflow. */
.intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.intro__text { min-width: 0; }
.intro__figure { min-width: 0; }
@media (min-width: 960px) {
  .intro__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); }
  .intro__grid .intro__body { max-width: 52ch; }
}
/* Keep the tall vertical diagram from getting oversized on very wide screens */
@media (min-width: 1200px) {
  .intro__figure { max-width: 540px; margin-inline: auto; width: 100%; }
}

/* ==========================================================================
   FLOWFIG — animated "spend → engine → ROI" diagram (embedded figure)
   Vertical skeleton, no title/description, no card — the SVG sits directly on
   the dark section so it can read larger. Reuses the brand tokens above.
   ========================================================================== */
.flowfig {
  --fig-accent: var(--coral, #EA4E43);
  --fig-sand:   var(--sand,  #D5CFC4);
  --fig-ink:    var(--black, #000);
  position: relative;
  min-width: 0;
  font-family: var(--font-body);
}
.flowfig__inner { position: relative; }
.flowfig svg { width: 100%; height: auto; display: block; }

/* ── Motion ── */
.orb-core { transform-origin: center; transform-box: fill-box; animation: orbPulse 3.4s cubic-bezier(.4,0,.2,1) infinite; }
.orb-halo { transform-origin: center; transform-box: fill-box; animation: orbHalo 3.4s ease-in-out infinite; }
.orb-ring { transform-origin: center; transform-box: fill-box; animation: spin 18s linear infinite; }
.orb-ring--rev { transform-origin: center; transform-box: fill-box; animation: spin 26s linear infinite reverse; }

.flow-dot { opacity: 0; }
.flow-in  .flow-dot { animation: travel 2.8s linear infinite; }
.flow-out .flow-dot { animation: travel 2.6s linear infinite; }

.node { opacity: 0; animation: fadeUp .8s ease-out forwards; }

/* horizontal ROI bars grow from their own left edge */
.hbar { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; animation: hgrow 3.4s ease-out infinite; }

@keyframes orbPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes orbHalo { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .6; transform: scale(1.12); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes travel { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
@keyframes hgrow { 0% { transform: scaleX(0); } 40% { transform: scaleX(1); } 90% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes fadeUp { to { opacity: 1; } }

/* particles ride the connector paths (top boxes → engine, engine → out) */
.p { offset-rotate: 0deg; }
.pi1 { offset-path: path("M118 96 C118 190 150 250 250 282"); }
.pi2 { offset-path: path("M320 96 L320 228"); }
.pi3 { offset-path: path("M522 96 C522 190 490 250 390 282"); }
.po1 { offset-path: path("M320 372 L320 466"); }

@media (prefers-reduced-motion: reduce) {
  .orb-core, .orb-halo, .orb-ring, .orb-ring--rev, .flow-dot, .hbar, .node { animation: none !important; }
  .flow-dot { opacity: 1; }
  .hbar { transform: scaleX(1); }
  .node { opacity: 1; }
}

/* --- Section heads -------------------------------------------------------- */
.section__head { margin-bottom: clamp(2rem, 4.5vw, 3.25rem); max-width: min(100%, 44rem); }
.section__title { font-size: clamp(1.9rem, 4.6vw, 3.5rem); max-width: 20ch; }
.section__head .label + .section__title { margin-top: 1.1rem; }
.section__lede { color: var(--fg-soft); margin-top: 1.15rem; max-width: 52ch; }

/* ==========================================================================
   WORKING AGAINST YOU — three stat cards on black
   ========================================================================== */
.against { border-top: 1px solid var(--line); }
.against__grid {
  display: grid;
  gap: clamp(.85rem, 1.4vw, 1.15rem);
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;   /* ring · title · text · caption */
}
@media (min-width: 700px)  { .against__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .against__grid { grid-template-columns: repeat(3, 1fr); } }

/* Laid out like the reference card: a large ring pushed to the top right with
   the figure sitting inside it, and the wording below.
   The four rows are shared across all three cards (subgrid), so the rings,
   titles, paragraphs and captions each start on exactly the same line no
   matter how long the copy in any one card runs. */
.problem {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  background: #141210;
  border: 1px solid rgba(213, 207, 196, .14);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.problem:hover { border-color: rgba(234, 78, 67, .6); transform: translateY(-4px); }

/* Browsers without subgrid fall back to a plain stack — still tidy, just not
   line-for-line across cards. */
@supports not (grid-template-rows: subgrid) {
  .problem { display: flex; flex-direction: column; }
  .problem__caption { margin-top: auto; }
}

/* Ring chart — the figure is the point, so it stays large */
.problem__chart {
  position: relative;
  width: clamp(118px, 12.5vw, 152px); aspect-ratio: 1;
  align-self: flex-end;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.problem__chart svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.problem__track { fill: none; stroke: rgba(213, 207, 196, .12); }
.problem__arc {
  fill: none;
  stroke: var(--coral);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.problem__stat {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: clamp(1.75rem, 2.6vw, 2.3rem);
  color: var(--sand);
}

.problem__title {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.12;
  text-wrap: balance;
}
.problem__text {
  margin-top: .85rem;
  color: var(--fg-soft);
  font-size: .9375rem; line-height: 1.6;
}
.problem__caption {
  align-self: start;
  padding-top: 1.5rem;
  display: flex; gap: .7rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  line-height: 1.6;
  letter-spacing: .01em;
  color: rgba(213, 207, 196, .62);
}
.problem__caption::before {
  content: ""; flex: none;
  width: 18px; height: 1px; margin-top: .55rem;
  background: var(--coral);
}

/* ==========================================================================
   SERVICES — list rows
   ========================================================================== */
.services {
  border-top: 1px solid var(--line);
  margin-inline: calc(-1 * clamp(0.75rem, 2vw, 1.25rem));
}
.service {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.65rem clamp(0.75rem, 3vw, 1.5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
  border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease);
}
.service__num   { grid-column: 1; grid-row: 1; }
.service__title { grid-column: 2; grid-row: 1; }
.service__text  { grid-column: 2; grid-row: 2; }
.service::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: -1px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s var(--ease);
}
.service:hover { background: var(--surface); }
.service:hover::before { transform: scaleY(1); }
.service__num {
  font-family: var(--font-mono); font-size: .75rem;
  color: var(--accent); padding-top: .5rem;
}
.service__title {
  font-size: clamp(1.35rem, 3.6vw, 2.1rem); line-height: 1.12;
  text-wrap: balance;
}
.service__text { color: var(--fg-soft); max-width: 58ch; font-size: .9688rem; line-height: 1.6; }

.services__cta { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 700px) { .services__cta .btn { width: 100%; justify-content: center; } }

/* Wide screens: number, title and description in three columns, with the
   cap-height of the title and the first line of the description sitting on
   the same optical line. */
@media (min-width: 900px) {
  .service {
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 1rem clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
  .service__text { grid-column: 3; grid-row: 1; padding-top: .3rem; }
}

/* ==========================================================================
   HOW I WORK — four coloured step blocks
   ========================================================================== */
.how { background: var(--mist); }
.how__grid {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.35rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .how__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .how__grid { grid-template-columns: repeat(4, 1fr); } }

.step {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 1.85rem);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -32px rgba(0,0,0,.5); }

/* Tones — set per step in content.js. Four distinct values, all from the
   brand sheet: the lightened primary, the CTA coral, the description brown,
   and the title black. */
.step--light,
.step--sand   { background: var(--card);  color: var(--black); }
.step--accent { background: var(--coral); color: #fff; }
.step--pop    { background: var(--brown); color: var(--sand); }
.step--ink    { background: var(--black); color: var(--sand); }

/* Fixed spacing from the top, so the icon, number, rule and title line up
   across all four cards no matter how long the copy underneath is. */
.step__icon { width: 42px; height: 42px; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.step__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }

.step__meta {
  display: flex; align-items: baseline; gap: .75rem;
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .62;
}
.step__num { font-size: .8125rem; opacity: 1; }
.step__rule { height: 1px; background: currentColor; opacity: .22; margin: .9rem 0 1.1rem; }

.step__title {
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  line-height: 1.08;
}
/* Reserved so a one-line and a two-line kicker still leave the paragraph
   below starting at the same height. */
.step__kicker {
  font-size: .75rem; letter-spacing: .04em; line-height: 1.35;
  margin-top: .4rem; opacity: .68;
  min-height: 2.7em;
}
.step__text { margin-top: .6rem; font-size: .9375rem; line-height: 1.55; opacity: .82; }

/* Light type on the coral, brown and black cards needs a little more presence
   on white does, or the small print goes muddy. */
.step--accent .step__meta, .step--pop .step__meta, .step--ink .step__meta { opacity: .78; }
.step--accent .step__kicker, .step--pop .step__kicker, .step--ink .step__kicker { opacity: .84; }
.step--accent .step__text, .step--pop .step__text, .step--ink .step__text { opacity: .92; }
.step--accent .step__rule, .step--pop .step__rule, .step--ink .step__rule { opacity: .34; }

/* --- About ---------------------------------------------------------------- */
.about { border-top: 1px solid var(--line); }
.about__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr 1.2fr;
    /* head sits above the photo on the left; the body text shares the photo's
       row on the right, so its top aligns with the top of the photo. */
    grid-template-areas: "head ." "photo text";
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: 1.75rem;
    align-items: start;
  }
  .about__head { grid-area: head; }
  .about__photo { grid-area: photo; }
  .about__text { grid-area: text; }
}
.about__title { font-size: clamp(1.9rem, 4.4vw, 3.25rem); margin-top: 1.1rem; }
.about__photo { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 14px; }
.about__body p { color: var(--fg-soft); max-width: 60ch; }
.about__body p + p { margin-top: 1.15rem; }
.links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.links a {
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em;
  border-bottom: 1px solid var(--line); padding-bottom: .25rem;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.links a:hover { color: var(--accent); border-color: var(--accent); }

/* --- Closing CTA ---------------------------------------------------------- */
.cta { background: var(--mist); }
.cta__title { font-size: clamp(2rem, 5.2vw, 4.25rem); max-width: 18ch; margin-top: 1.1rem; }
.cta__body { margin-top: 1.5rem; max-width: 46ch; color: var(--fg-soft); font-size: .9375rem; }
.cta__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* ==========================================================================
   FOOTER — sitemap
   ========================================================================== */
.footer { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.footer__top {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .footer__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); align-items: start; }
}
.footer__brand .logo { font-size: 1.6rem; }
.footer__tagline { color: var(--muted); max-width: 34ch; margin-top: 1rem; font-size: .9375rem; }
.footer__brand .btn { margin-top: 1.75rem; }

.footer__map {
  display: grid; gap: 2rem clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.footer__col h3 {
  font-family: var(--font-mono); font-weight: 400;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  padding-bottom: .85rem; margin-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.footer__col a {
  font-size: .875rem; color: var(--fg-soft);
  transition: color .25s var(--ease);
}
.footer__col a:hover { color: var(--accent); }

.footer__meta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}

/* ==========================================================================
   RESPONSIVE — everything above is fluid; these are the few places that need
   a hard breakpoint rather than a clamp().
   ========================================================================== */

/* Tablet ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: 7.5rem; padding-bottom: 4rem; }
  .footer__top { gap: 2.5rem; }
}

/* Small tablet / large phone ---------------------------------------------- */
@media (max-width: 700px) {
  .section { padding-block: clamp(3.25rem, 9vw, 4.5rem); }
  .hero__scroll { display: none; }          /* the fold is short enough already */
  .hero__actions .btn,
  .cta__actions .btn { flex: 1 1 100%; justify-content: center; }
  .footer__map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__meta { flex-direction: column; gap: .5rem; }
}

/* Phone ------------------------------------------------------------------- */
@media (max-width: 480px) {
  body { font-size: 1rem; }
  .hero { padding-top: 6.5rem; }
  .hero__eyebrow { font-size: .625rem; line-height: 1.5; }
  .service { grid-template-columns: 2rem minmax(0, 1fr); }
  .footer__map { grid-template-columns: 1fr; gap: 1.75rem; }
  .formcard { border-radius: 14px; }
  .formcard__foot { flex-direction: column; align-items: stretch; }
  .formcard__foot .btn { justify-content: center; }
}

/* Very narrow (320px) ----------------------------------------------------- */
@media (max-width: 360px) {
  .logo img { width: 128px; }
  .navtoggle { padding: .45rem .7rem; }
  .btn { padding: .8rem 1.15rem; font-size: .6875rem; }
}

/* Landscape phones: don't let the hero eat the whole screen ---------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 6rem; padding-bottom: 3rem; }
}

/* --- Scroll reveal -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .problem__arc { transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   CONTACT / SIGN-UP PAGE
   ========================================================================== */
.formpage { min-height: 100svh; display: flex; flex-direction: column; background: var(--mist); }
.formpage__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.formpage__bar .lang { border-color: var(--line); }
.formpage__bar .lang button { color: var(--muted); }
.formpage__bar .lang button[aria-pressed="true"] { background: var(--black); color: var(--sand); }
.backlink {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em;
  color: var(--muted); display: inline-flex; gap: .5rem; align-items: center;
}
.backlink:hover { color: var(--fg); }

.formpage__main { flex: 1; display: flex; align-items: flex-start; padding-block: clamp(2rem, 7vw, 5rem); }
.formcard {
  width: 100%; max-width: 680px; margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 5vw, 3.25rem);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .28);
}
.formcard__accent { height: 5px; border-radius: 999px; background: var(--accent); width: 56px; margin-bottom: 1.75rem; }
.formcard h1 { font-size: clamp(1.85rem, 4.5vw, 2.6rem); line-height: 1.08; }
.formcard__sub { margin-top: 1rem; color: var(--fg-soft); max-width: 48ch; }

.field { margin-top: 1.75rem; }
.field__label { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.field__label label { font-weight: 500; font-size: .9375rem; }
.field__hint { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .36); }
.field input, .field textarea {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 10px;
  padding: .8rem .95rem;
  font-size: 1rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(0, 0, 0, .32); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234, 78, 67, .2);
}
.field textarea { min-height: 150px; resize: vertical; }
.field.has-error input, .field.has-error textarea { border-color: var(--accent); background: rgba(234, 78, 67, .06); }
.field__error { color: var(--accent); font-size: .8125rem; margin-top: .4rem; display: none; }
.field.has-error .field__error { display: block; }

.formcard__foot { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; }
.consent { font-size: .8125rem; color: var(--muted); max-width: 34ch; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formstate { display: none; text-align: left; }
.formstate.is-on { display: block; }
.formstate h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.12; }
.formstate p { margin-top: .9rem; color: var(--fg-soft); }
.formstate .tick {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; margin-bottom: 1.5rem; font-size: 1.25rem;
}
.formstate--error .tick { background: var(--black); color: var(--sand); }
.formstate a.mailto { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.formstate .btn { margin-top: 1.75rem; }

.formpage__footer { padding-block: 2rem; color: var(--muted); font-size: .8125rem; }