/* ==========================================================================
   Snugsy AI — site.css
   One stylesheet, no build step, no framework.

   The palette and type are carried over from onegoodthing.snugsy.ca so the
   two Snugsy properties read as one company.

   Contrast note: cream on #e06a4a measures 3.08:1, which fails WCAG AA for
   normal-size text. Terracotta is therefore an *accent* only — glows, rules,
   icons, numerals. Filled buttons use stone (15.9:1) and links use the
   deepened --terracotta-deep (4.93:1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

/* DM Sans ships as a variable font — one file covers 400–700. */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/dm-serif-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Cream scale */
  --cream-50: #f9f6f1;
  --cream-100: #f4ede3;
  --cream-200: #ede0d0;
  --cream-300: #e0cfba;
  --cream-400: #d0bba1;

  /* Ink */
  --ink: #1c1b19;
  --ink-soft: #4e3f2e;
  --ink-muted: #6e5942; /* 6.4:1 on cream-50 */
  --ink-faint: #7a604a; /* 5.6:1 on cream-50 */

  /* Accent */
  --terracotta: #e06a4a; /* decoration only */
  --terracotta-deep: #b8462a; /* 4.9:1 on cream-50 — safe for text */

  --hairline: #e4d3be;

  /* On dark (stone) surfaces */
  --on-dark: #f4ede3;
  --on-dark-muted: #d0bba1; /* 9.3:1 on stone */

  /* Type */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "DM Serif Display", ui-serif, Georgia, "Times New Roman", serif;

  /* Fluid type scale */
  --step-xs: 0.78rem;
  --step-sm: 0.875rem;
  --step-0: 1rem;
  --step-1: clamp(1.06rem, 0.99rem + 0.35vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.12rem + 0.65vw, 1.6rem);
  --step-3: clamp(1.6rem, 1.36rem + 1.2vw, 2.3rem);
  --step-4: clamp(2rem, 1.55rem + 2.2vw, 3.2rem);
  --step-5: clamp(2.5rem, 1.72rem + 3.9vw, 4.5rem);
  /* Display size, for the two statements that carry the home page. */
  --step-6: clamp(2.7rem, 1.2rem + 6.4vw, 5.5rem);

  /* Space */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(4.5rem, 3rem + 7vw, 8rem);

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Layout */
  --measure: 62ch;
  --container: 1180px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 0.85rem + 2vw, 2.5rem);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the sticky header. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--cream-50);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--terracotta-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--ink);
}

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

ul,
ol {
  margin: 0;
  padding: 0;
}

/* Visible, consistent focus for keyboard users. */
:focus-visible {
  outline: 2px solid var(--terracotta-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--terracotta);
  color: var(--cream-50);
}

/* --------------------------------------------------------------------------
   4. Utilities
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--ink);
  color: var(--cream-50);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: var(--step-sm);
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out-expo);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--cream-50);
}

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

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

.section--tight {
  padding-block: var(--space-xl);
}

.section--alt {
  background: var(--cream-100);
  border-block: 1px solid var(--hairline);
}

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--space-lg);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* Small uppercase label that sits above a heading. */
.eyebrow {
  display: block;
  font-size: var(--step-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.lede {
  font-size: var(--step-1);
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-top: var(--space-md);
}

.text-muted {
  color: var(--ink-muted);
}

/* Ambient radial glow, carried over from the One Good Thing hero. */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(224, 106, 74, 0.18) 0%,
    transparent 70%
  );
  z-index: 0;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out-expo), background-color 0.2s ease,
    border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* Stone fill — 15.9:1 against its cream label. */
.btn--primary {
  background: var(--ink);
  color: var(--cream-50);
  box-shadow: 0 1px 2px rgba(28, 27, 25, 0.16);
}

.btn--primary:hover {
  background: #2e2c28;
  color: var(--cream-50);
  box-shadow: 0 8px 22px rgba(28, 27, 25, 0.18);
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--cream-300);
}

.btn--secondary:hover {
  background: var(--cream-100);
  border-color: var(--ink-faint);
  color: var(--ink);
}

/* Trailing arrow that slides on hover — used on the two app calls to action. */
.btn--arrow::after {
  content: "→";
  transition: transform 0.25s var(--ease-out-expo);
}

.btn--arrow:hover::after {
  transform: translateX(4px);
}

/* For use on the dark CTA band. */
.btn--invert {
  background: var(--cream-50);
  color: var(--ink);
}

.btn--invert:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.btn--ghost-invert {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(244, 237, 227, 0.35);
}

.btn--ghost-invert:hover {
  border-color: var(--on-dark);
  color: var(--on-dark);
  background: rgba(244, 237, 227, 0.07);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.btn-row--center {
  justify-content: center;
}

/* Text link with a trailing arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  font-size: var(--step-sm);
  text-decoration: none;
}

.link-arrow::after {
  content: "→";
  transition: transform 0.2s var(--ease-out-expo);
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(249, 246, 241, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--hairline);
  box-shadow: 0 1px 12px rgba(28, 27, 25, 0.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.brand:hover {
  color: var(--ink);
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
}

.nav__link {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: var(--step-sm);
  font-weight: 500;
  padding: 0.4rem 0;
  position: relative;
}

.nav__link:hover {
  color: var(--ink);
}

.nav__link[aria-current="page"] {
  color: var(--ink);
}

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--terracotta);
}

.nav__cta {
  padding: 0.6rem 1.2rem;
  font-size: var(--step-sm);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out-expo), opacity 0.15s ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before {
  transform: translateY(-6px);
}

.nav-toggle__bars::after {
  transform: translateY(6px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: rotate(-45deg);
}

@media (max-width: 820px) {
  .nav-toggle {
    display: inline-flex;
    position: relative;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm) var(--gutter) var(--space-md);
    background: var(--cream-50);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 12px 24px rgba(28, 27, 25, 0.08);
    /* Hidden from AT and pointer alike until toggled. */
    display: none;
  }

  .nav.is-open {
    display: flex;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--hairline);
    font-size: var(--step-1);
  }

  .nav__link[aria-current="page"]::after {
    display: none;
  }

  .nav__cta {
    margin-top: var(--space-md);
    width: 100%;
    font-size: var(--step-0);
    padding: 0.85rem 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 2rem + 9vw, 8.5rem) var(--space-2xl);
}

.hero__glow {
  width: min(620px, 120vw);
  height: min(620px, 120vw);
  top: -14%;
  left: 50%;
  transform: translateX(-50%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.hero__title {
  margin-bottom: var(--space-md);
}

/* The home page hero is the two-app split; it needs no measure cap and its
   own padding, since the panels carry their own internal rhythm. */
.hero--apps {
  padding-block: clamp(1.5rem, 0.75rem + 3vw, 3rem) clamp(3rem, 1.5rem + 6vw, 6rem);
}

.note {
  margin-top: var(--space-md);
  font-size: var(--step-sm);
  color: var(--ink-faint);
  max-width: var(--measure);
}

/* Row of service tags. */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin-top: var(--space-lg);
}

.tag {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-pill);
  background: rgba(249, 246, 241, 0.7);
  font-size: var(--step-sm);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   8. Cards & grids
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--cream-50);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.section--alt .card {
  background: var(--cream-50);
}

.card--link:hover {
  transform: translateY(-3px);
  border-color: var(--cream-400);
  box-shadow: 0 14px 32px rgba(28, 27, 25, 0.07);
}

.card__icon {
  width: 40px;
  height: 40px;
  color: var(--terracotta-deep);
}

.card__title {
  font-size: var(--step-2);
}

.card__body {
  color: var(--ink-muted);
  font-size: var(--step-sm);
  flex-grow: 1;
}

.card__foot {
  margin-top: auto;
  padding-top: var(--space-2xs);
}

/* Makes the whole card clickable while keeping one real link for AT. */
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* --------------------------------------------------------------------------
   9. Numbered process steps
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  display: grid;
  gap: var(--space-md);
  counter-reset: step;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.step {
  position: relative;
  counter-increment: step;
  padding-top: var(--space-md);
  border-top: 2px solid var(--hairline);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--terracotta-deep);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.step__title {
  font-size: var(--step-1);
  margin-bottom: var(--space-2xs);
}

.step__body {
  color: var(--ink-muted);
  font-size: var(--step-sm);
}

/* --------------------------------------------------------------------------
   10. Checklist (results)
   -------------------------------------------------------------------------- */

.checklist {
  list-style: none;
  display: grid;
  gap: var(--space-sm);
}

.checklist li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2px solid var(--terracotta-deep);
  border-bottom: 2px solid var(--terracotta-deep);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   11. Service detail rows (solutions page)
   -------------------------------------------------------------------------- */

.service {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--hairline);
  align-items: start;
}

.service:first-of-type {
  border-top: 0;
  padding-top: var(--space-md);
}

@media (min-width: 900px) {
  .service {
    grid-template-columns: 1fr 1.25fr;
    gap: var(--space-xl);
  }
}

.service__num {
  font-family: var(--font-serif);
  font-size: var(--step-sm);
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.service__title {
  font-size: var(--step-3);
}

.service__body > * + * {
  margin-top: var(--space-md);
}

.service__body p {
  color: var(--ink-muted);
  max-width: var(--measure);
}

.feature-list {
  list-style: none;
  display: grid;
  gap: var(--space-xs);
}

.feature-list li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--ink-soft);
  font-size: var(--step-sm);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* --------------------------------------------------------------------------
   12. App cards (home hero) + studio section

   The two products carry the header. Image-led: the screenshot is the resting
   state, not something hidden behind a hover, and the pair is deliberately
   asymmetric — the second card hangs lower so the spread reads editorial
   rather than tabular.

   Hover adds lift and an inner scale on the image. Section 20 pins all of it
   to the resting state under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.app-split {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 860px) {
  .app-split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-lg), 4vw, var(--space-xl));
    align-items: start;
  }

  /* The offset that stops the pair reading as a two-column table. */
  .app-card--drop {
    margin-top: clamp(3rem, 8vw, 7.5rem);
  }
}

.app-card {
  position: relative;
  transition: opacity 0.45s var(--ease-out-expo);
}

/* Once the entrance has played, the card's transform belongs to the scroll
   parallax in site.js, which writes --py. Specificity has to clear the
   `.js .reveal` rule in section 19; the short linear transition just smooths
   the per-frame updates without introducing visible lag. */
.js .app-card.reveal.is-visible {
  transform: translate3d(0, var(--py, 0px), 0);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.1s linear;
}

/* Hovering one card quiets the other. Harmless where :has() is unsupported. */
@media (hover: hover) and (pointer: fine) {
  .app-split:has(.app-card:hover) .app-card:not(:hover),
  .app-split:has(.app-card:focus-within) .app-card:not(:focus-within) {
    opacity: 0.5;
  }
}

/* ---------------------------------------------------------------- artwork */

/* Each card is the app's own square icon artwork, full bleed. Square also
   keeps the card from becoming a tower — at 5/6 the app names were pushed
   clean off the first screen. */
.app-card__frame {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: clamp(20px, 2vw, 30px);
  background: var(--cream-100);
  /* One Good Thing's artwork is near-cream at the edges, so without a hairline
     the card has no boundary against the page. */
  border: 1px solid var(--hairline);
  transition: transform 0.6s var(--ease-out-expo),
    box-shadow 0.6s var(--ease-out-expo);
}

.app-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out-expo);
}

.app-card:hover .app-card__frame,
.app-card:focus-within .app-card__frame {
  transform: translateY(-8px);
  box-shadow: 0 30px 64px rgba(28, 27, 25, 0.14);
}

.app-card:hover .app-card__frame img,
.app-card:focus-within .app-card__frame img {
  transform: scale(1.05);
}

/* ------------------------------------------------------------------- text */

.app-card__body {
  margin-top: var(--space-lg);
}

.app-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--step-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
}

.app-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.app-card__title {
  margin-top: var(--space-xs);
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
}

.app-card__tagline {
  margin-top: var(--space-sm);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink-soft);
}

.app-card__blurb {
  margin-top: var(--space-sm);
  max-width: 38ch;
  font-size: var(--step-1);
  color: var(--ink-muted);
}

/* The frame carries a .stretched-link overlay so the whole card is clickable;
   lifting the button above it keeps the button's own hover state working. */
.app-card .btn {
  position: relative;
  z-index: 2;
  margin-top: var(--space-md);
}

/* -------------------------------------------------------- studio section */

.studio__lead {
  max-width: 52rem;
}

.studio__title {
  font-size: var(--step-6);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.studio__lead .lede {
  font-size: var(--step-2);
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0;
  max-width: var(--container-narrow);
}

.faq__item {
  border-bottom: 1px solid var(--hairline);
}

.faq__item:first-child {
  border-top: 1px solid var(--hairline);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.25;
  color: var(--ink);
}

/* Suppress the native disclosure triangle in both engines. */
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::marker {
  content: "";
}

.faq__q:hover {
  color: var(--terracotta-deep);
}

.faq__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.3em;
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: var(--terracotta-deep);
  transition: transform 0.25s var(--ease-out-expo);
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__icon::after {
  transform: rotate(0deg);
}

.faq__a {
  padding-bottom: var(--space-md);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.faq__a > * + * {
  margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   14. Dark CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-dark);
  padding-block: var(--space-2xl);
}

.cta-band__glow {
  width: min(700px, 130vw);
  height: min(700px, 130vw);
  bottom: -55%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(224, 106, 74, 0.3) 0%,
    transparent 70%
  );
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.cta-band h2 {
  color: var(--on-dark);
}

.cta-band .eyebrow {
  color: var(--terracotta);
}

.cta-band p {
  color: var(--on-dark-muted);
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-md);
  max-width: 34rem;
}

.form--wide {
  max-width: none;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field__label {
  font-size: var(--step-sm);
  font-weight: 500;
  color: var(--ink-soft);
}

.field__req {
  color: var(--terracotta-deep);
}

.field__hint {
  font-size: var(--step-xs);
  color: var(--ink-faint);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--cream-50);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.6;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #8d7358;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--cream-400);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--terracotta-deep);
  box-shadow: 0 0 0 3px rgba(184, 70, 42, 0.14);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #b3261e;
}

.field__error {
  font-size: var(--step-xs);
  color: #b3261e; /* 5.9:1 on cream-50 */
  min-height: 1em;
}

.field__error:empty {
  display: none;
}

.field-row {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 620px) {
  .field-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  font-size: var(--step-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.form__status:empty {
  display: none;
}

.form__status[data-state="success"] {
  background: #eaf3ec;
  border-color: #bcd9c3;
  color: #1e5030; /* 7.9:1 */
}

.form__status[data-state="error"] {
  background: #fbeceb;
  border-color: #f0c4c0;
  color: #8c1d18; /* 8.3:1 */
}

.form__legal {
  font-size: var(--step-xs);
  color: var(--ink-faint);
}

/* Inline newsletter form */
.newsletter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  max-width: 30rem;
}

.newsletter .field {
  flex: 1 1 14rem;
}

.newsletter .btn {
  flex-shrink: 0;
}

.newsletter__status {
  flex-basis: 100%;
}

/* --------------------------------------------------------------------------
   16. Contact details
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-2xl);
  }
}

.detail-list {
  list-style: none;
  display: grid;
  gap: var(--space-md);
}

.detail-list dt,
.detail__label {
  font-size: var(--step-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.detail__value {
  font-size: var(--step-1);
  color: var(--ink);
}

.detail__value a {
  color: var(--ink);
  text-decoration-color: var(--cream-400);
}

.detail__value a:hover {
  color: var(--terracotta-deep);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--cream-100);
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-xl) var(--space-lg);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 760px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: var(--space-xl);
  }
}

.site-footer h2,
.site-footer h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-sm);
}

.site-footer p,
.site-footer li {
  color: var(--ink-muted);
  font-size: var(--step-sm);
}

.footer-nav {
  list-style: none;
  display: grid;
  gap: var(--space-2xs);
}

.footer-nav a {
  color: var(--ink-muted);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.site-footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  justify-content: space-between;
  font-size: var(--step-xs);
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   18. Error page
   -------------------------------------------------------------------------- */

.error-page {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 62vh;
  padding-block: var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.error-page__code {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 2rem + 12vw, 9rem);
  line-height: 1;
  color: var(--terracotta-deep);
  margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */

/* Only hide content once JS has confirmed it can reveal it again — without
   this, a JS failure would leave the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .reveal[data-delay="1"] {
  transition-delay: 0.09s;
}
.js .reveal[data-delay="2"] {
  transition-delay: 0.18s;
}
.js .reveal[data-delay="3"] {
  transition-delay: 0.27s;
}
.js .reveal[data-delay="4"] {
  transition-delay: 0.36s;
}

/* --------------------------------------------------------------------------
   20. Reduced motion & print
   -------------------------------------------------------------------------- */

@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;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .btn:hover {
    transform: none;
  }

  /* App cards hold their resting state: no lift, no inner scale, no dimming
     of the sibling, and no scroll parallax (initParallax bails out too). */
  .app-card,
  .app-card__frame,
  .app-card:hover .app-card__frame,
  .app-card:focus-within .app-card__frame {
    transform: none;
  }

  .app-card__frame img,
  .app-card:hover .app-card__frame img,
  .app-card:focus-within .app-card__frame img {
    transform: none;
  }

  .app-split:has(.app-card:hover) .app-card:not(:hover),
  .app-split:has(.app-card:focus-within) .app-card:not(:focus-within) {
    opacity: 1;
  }

  .btn--arrow:hover::after {
    transform: none;
  }
}

@media print {
  .site-header,
  .cta-band,
  .glow,
  .btn,
  .nav-toggle {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}