@layer reset, tokens, base, layout, components, utilities;

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format("woff2");
  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;
}
/* Only digits, separators and the ruble sign: prices are set in this face */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-italic-text.woff2) format("woff2");
  unicode-range: U+20, U+2C, U+2E, U+30-39, U+A0, U+202F, U+20BD;
}

/* ---------- Reset ---------- */
@layer reset {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, ul, ol, figure, figcaption { margin: 0; }
  ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }
  img, picture, svg { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  button, input { font: inherit; }
}

/* ---------- Design tokens ---------- */
@layer tokens {
  :root {
    color-scheme: dark;

    /* Palette (from the TRIM brand book): black blocks, cream thread, label paper */
    --ink: oklch(0.129 0 0);
    --ink-2: oklch(0.187 0.004 84.6);
    --thread-strong: oklch(0.921 0.02 84.6);
    --thread: oklch(0.872 0.022 83.3);
    --thread-soft: oklch(0.797 0.024 84.6);
    --paper: oklch(0.927 0.015 80.7);
    --graphite: oklch(0.278 0.006 78.2);
    --graphite-soft: oklch(0.411 0.015 79.7);
    --pin: oklch(0.791 0.083 359.6);

    /* Semantic roles (re-pointed per section surface) */
    --text: var(--thread);
    --text-soft: var(--thread-soft);
    --heading: var(--thread-strong);
    --focus: var(--pin);
    --rule: oklch(0.872 0.022 83.3 / 0.18);

    /* Type */
    --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
    --font-price: "Cormorant Garamond", Georgia, serif;
    --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);
    --step-2: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);

    /* Pixel headings: the SVG width is set in em, so font-size scales the stitches */
    --px-hero: clamp(1.75rem, 1rem + 3.1vw, 3.4rem);
    --px-h2: clamp(2.25rem, 1.45rem + 3.4vw, 4.25rem);
    --px-text: clamp(1.45rem, 0.95rem + 2vw, 2.5rem);
    --px-item: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem);

    /* Space */
    --space-2xs: 0.375rem;
    --space-xs: 0.625rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    --space-xl: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
    --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
    --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
    --header-h: 3.75rem;

    /* Shape */
    --radius-card: 1.25rem;
    --radius-btn: 0.75rem;
    --stitch-inset: 4px;
    --shadow-card: 0 1px 0 oklch(1 0 0 / 0.45) inset, 0 2px 6px oklch(0 0 0 / 0.08), 0 24px 48px -24px oklch(0 0 0 / 0.4);
    --ease-out: cubic-bezier(0.2, 0, 0, 1);

    /* Label-photo background used behind every paper section */
    --bg-labels: url(/assets/img/bg-labels-light-1122.jpg);
    --bg-labels-set: image-set(
      url(/assets/img/bg-labels-light-1122.avif) type("image/avif"),
      url(/assets/img/bg-labels-light-1122.webp) type("image/webp"),
      url(/assets/img/bg-labels-light-1122.jpg) type("image/jpeg")
    );
  }
}

/* ---------- Base ---------- */
@layer base {
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-size-adjust: from-font;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3 { font-weight: 600; line-height: 1.15; color: var(--heading); text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: from-font; }
  ::selection { background: var(--pin); color: var(--ink); }

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

  [id] { scroll-margin-block-start: calc(var(--header-h) + 1rem); }
}

/* ---------- Layout ---------- */
@layer layout {
  .container {
    inline-size: min(100% - 2 * var(--gutter), 72rem);
    margin-inline: auto;
  }
  .container--narrow { inline-size: min(100% - 2 * var(--gutter), 46rem); }

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

  .section--paper {
    color-scheme: light;
    --text: var(--graphite);
    --text-soft: var(--graphite-soft);
    --heading: var(--graphite);
    --focus: var(--graphite);
    --rule: oklch(0.278 0.006 78.2 / 0.2);
    color: var(--text);
    background-color: var(--paper);
    background-image: var(--bg-labels);
    background-image: var(--bg-labels-set);
    background-size: cover;
    background-position: center;
  }
}

/* ---------- Components ---------- */
@layer components {
  /* Inline sprite holder */
  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-s);
    inset-block-start: var(--space-s);
    z-index: 100;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-btn);
    background: var(--thread-strong);
    color: var(--ink);
    font-weight: 600;
    translate: 0 -200%;
  }
  .skip-link:focus-visible { translate: 0 0; }

  /* Pixel (cross-stitch) headings rendered as inline SVG */
  .px {
    inline-size: min(100%, calc(var(--px-w) * 1em));
    block-size: auto;
    color: inherit;
  }
  .px--center { margin-inline: auto; }
  .px--end { margin-inline-start: auto; }

  .px-heading {
    font-size: var(--px-h2);
    line-height: 1;
    color: var(--heading);
    margin-block-end: var(--space-xl);
  }
  .px-heading .px { margin-inline: auto; }
  .px-heading--end .px { margin-inline: auto 0; }
  .px-heading--start .px { margin-inline: 0 auto; }

  /* Header */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background: oklch(0.129 0 0 / 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-end: 1px solid oklch(1 0 0 / 0.07);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-block-size: var(--header-h);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding-block: 0.75rem;
    color: var(--thread-strong);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.42em;
    text-decoration: none;
  }
  .brand__pin {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, oklch(0.95 0.03 0), var(--pin) 60%);
  }
  .site-nav ul { display: flex; gap: clamp(1rem, 2vw, 2rem); }
  .site-nav a {
    display: inline-block;
    padding-block: 0.75rem;
    color: var(--thread);
    font-size: 0.9375rem;
    text-decoration: none;
  }
  .site-nav a:hover { color: var(--thread-strong); text-decoration: underline; }
  @media (width < 48rem) {
    .site-nav { display: none; }
  }

  /* Buttons: a dashed inner line echoes the stitching of the TRIM label */
  .btn {
    --btn-bg: transparent;
    --btn-fg: currentColor;
    --btn-border: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-block-size: 3.25rem;
    padding-inline: 1.5rem;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-btn);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition-property: scale, background-color, border-color;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-out);
  }
  .btn::before {
    content: "";
    position: absolute;
    inset: var(--stitch-inset);
    border: 1px dashed currentColor;
    border-radius: calc(var(--radius-btn) - var(--stitch-inset));
    opacity: 0.35;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .btn:active { scale: 0.96; }
  }
  .btn__icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }

  .btn--primary { --btn-bg: var(--thread-strong); --btn-fg: var(--ink); }
  .btn--primary:hover { --btn-bg: oklch(0.97 0.012 84.6); }
  .btn--ghost { --btn-fg: var(--thread-strong); --btn-border: oklch(0.921 0.02 84.6 / 0.55); }
  .btn--ghost:hover { --btn-bg: oklch(1 0 0 / 0.07); --btn-border: var(--thread-strong); }
  .btn--dark { --btn-bg: var(--graphite); --btn-fg: var(--paper); }
  .btn--dark:hover { --btn-bg: oklch(0.2 0.006 78.2); }
  .btn--ghost-dark { --btn-fg: var(--graphite); --btn-border: oklch(0.278 0.006 78.2 / 0.55); }
  .btn--ghost-dark:hover { --btn-bg: oklch(0.278 0.006 78.2 / 0.08); --btn-border: var(--graphite); }
  .btn--sm { min-block-size: 2.5rem; padding-inline: 1.1rem; font-size: 0.9375rem; }
  @media (pointer: coarse) {
    .btn--sm { min-block-size: 2.75rem; }
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }
  @media (width < 30rem) {
    .cta-row { flex-direction: column; align-items: stretch; }
  }

  /* Hero */
  /* No full-viewport hero: the garment gallery right below should peek into the first screen */
  .hero {
    padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
  }
  .examples { padding-block-start: clamp(1.5rem, 1rem + 2vw, 3rem); }
  .hero__title {
    display: grid;
    gap: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
    font-weight: inherit;
  }
  .hero__kicker { font-size: var(--px-hero); color: var(--thread-strong); }
  .hero__kicker .px { margin-inline-end: auto; }
  .hero__label {
    justify-self: center;
    inline-size: min(26rem, 78vw);
    rotate: -2deg;
    filter: drop-shadow(0 22px 34px oklch(0 0 0 / 0.65));
  }
  .hero__label img { inline-size: 100%; }
  .hero__tagline { font-size: calc(var(--px-hero) * 0.92); color: var(--thread); }
  .hero__tagline .px { margin-inline-start: auto; }
  .hero__body {
    display: grid;
    justify-items: center;
    gap: var(--space-s);
    margin-block-start: var(--space-xl);
    text-align: center;
  }
  .lead {
    max-inline-size: 34ch;
    color: var(--thread-strong);
    font-size: var(--step-2);
    line-height: 1.4;
    text-wrap: balance;
  }
  .hero__geo { color: var(--text-soft); font-size: var(--step--1); letter-spacing: 0.03em; }
  .hero__body .cta-row { margin-block-start: var(--space-xs); }
  /* Wide screens: brand composition on the left, offer and buttons on the right,
     so the hero is short and the garment gallery shows in the first screen */
  @media (width >= 64rem) {
    .hero > .container {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      align-items: center;
      gap: var(--space-xl);
    }
    .hero { --px-hero: clamp(1.75rem, 0.5rem + 2.1vw, 2.6rem); }
    .hero__label { inline-size: min(22rem, 100%); }
    .hero__body { margin-block-start: 0; justify-items: start; text-align: start; }
    .hero__body .cta-row { justify-content: flex-start; }
  }

  /* Frosted glass card over the label photo */
  .glass {
    border-radius: var(--radius-card);
    background: oklch(0.95 0.012 82 / 0.7);
    backdrop-filter: blur(16px) saturate(1.05);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
    box-shadow: var(--shadow-card);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: oklch(0.95 0.012 82 / 0.95); }
  }

  /* Hook */
  .hook__card {
    display: grid;
    gap: var(--space-l);
    padding: clamp(1.75rem, 1rem + 4vw, 4.5rem) clamp(1.25rem, 0.5rem + 4vw, 4.5rem);
    color: var(--graphite);
    text-align: center;
  }
  .hook__text { font-size: var(--px-text); line-height: 1; }
  .hook__text .px { margin-inline: auto; }
  .hook__text--end { font-size: calc(var(--px-text) * 0.86); color: var(--graphite-soft); }

  /* Problems: needles with staggered heights */
  .needles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-m);
  }
  .needle {
    display: grid;
    grid-template-rows: auto auto 1fr;
    justify-items: center;
    gap: var(--space-s);
    text-align: center;
  }
  .needle__art {
    inline-size: 1.5rem;
    block-size: clamp(9rem, 6rem + 10vw, 15rem);
    color: var(--thread-soft);
  }
  .needle__title { font-size: var(--px-item); line-height: 1; color: var(--thread-strong); }
  .needle__title .px { margin-inline: auto; }
  .needle p { max-inline-size: 22ch; color: var(--text); font-size: var(--step--1); }
  @media (width >= 52rem) {
    .needles { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
    .needle { padding-block-start: calc(var(--drop) * 2.5rem); }
  }

  /* Lingerie spotlight: the one place where the pin pink leads */
  .lingerie__inner { display: grid; gap: var(--space-l); }
  .kicker {
    justify-self: center;
    color: var(--pin);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .lingerie .px-heading { margin-block-end: 0; }
  .lingerie__lead {
    max-inline-size: 46ch;
    margin-inline: auto;
    color: var(--thread-strong);
    font-size: var(--step-1);
    text-align: center;
  }
  .lingerie__points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-s);
  }
  .lingerie__points li {
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border: 1px dashed oklch(0.791 0.083 359.6 / 0.45);
    border-radius: var(--radius-card);
    background: var(--ink-2);
  }
  .lingerie__points h3 { font-size: var(--step-1); margin-block-end: var(--space-xs); }
  .lingerie__points p { color: var(--text); }
  .lingerie .cta-row { margin-block-start: var(--space-xs); }

  /* Generated illustrations must be labelled as such */
  .gallery-note {
    margin-block-start: var(--space-s);
    color: var(--text-soft);
    font-size: var(--step--1);
    text-align: center;
  }

  /* Process */
  .process__card { padding: clamp(1.75rem, 1rem + 4vw, 4.5rem); }
  .process__card .px-heading { margin-block-end: var(--space-l); }
  .steps { display: grid; gap: var(--space-l); }
  .step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-s);
    row-gap: var(--space-2xs);
    align-items: baseline;
    max-inline-size: 36rem;
  }
  .step__num {
    grid-row: span 2;
    color: var(--graphite-soft);
    font-family: var(--font-price);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem);
    line-height: 1;
    font-variant-numeric: lining-nums;
  }
  .step__title { font-size: var(--px-item); line-height: 1; color: var(--graphite); }
  .step__title .px { margin-inline-end: auto; }
  .step p { color: var(--graphite); }
  @media (width >= 52rem) {
    .step:nth-child(even) { justify-self: end; }
  }

  /* Examples */
  .showcase {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(62vw, 18rem);
    gap: var(--space-m);
    align-items: end;
    padding: var(--space-l) var(--space-m);
    border-radius: 1.5rem;
    background: linear-gradient(180deg, oklch(0.93 0.004 90), oklch(0.8 0.006 90));
    color: var(--graphite);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-color: oklch(0.278 0.006 78.2 / 0.4) transparent;
  }
  .showcase__item {
    display: grid;
    gap: var(--space-xs);
    justify-items: center;
    scroll-snap-align: center;
  }
  .showcase__item img {
    inline-size: 100%;
    max-block-size: 26rem;
    object-fit: contain;
    filter: drop-shadow(0 14px 18px oklch(0 0 0 / 0.25));
  }
  /* The source photo is small: never upscale it past its native width */
  .showcase__item--small img { max-inline-size: 11.3rem; }
  .showcase figcaption { font-size: var(--step--1); font-weight: 500; color: var(--graphite); }
  @media (width >= 52rem) {
    .showcase {
      grid-auto-flow: row;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-columns: auto;
      padding: var(--space-xl) var(--space-l);
      overflow: visible;
    }
    .showcase--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* Panel: one frosted surface holding a whole paper section, so headings never
     sit directly on the busy label photo */
  .panel { padding: clamp(1.75rem, 1rem + 4vw, 4.5rem) clamp(1.25rem, 0.5rem + 3vw, 4rem); }
  .panel .px-heading { margin-block-end: var(--space-l); }

  /* Cards */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-s);
  }
  .card {
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border-radius: calc(var(--radius-card) - 0.25rem);
    background: oklch(1 0 0 / 0.5);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.06);
  }
  .card h3 { font-size: var(--step-1); margin-block-end: var(--space-xs); color: var(--graphite); }
  .card p { color: var(--graphite); }

  /* Pricing */
  .pricing__grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }
  .pricing__copy { display: grid; gap: var(--space-s); }
  .pricing__copy .px-heading { margin-block-end: var(--space-s); }
  .pricing__copy p { max-inline-size: 38ch; font-size: var(--step-1); line-height: 1.5; }
  .compare { display: grid; }
  .compare__panel {
    position: relative;
    display: grid;
    padding: 5.5rem var(--space-m) 6rem;
    border-radius: 1.5rem;
    background-color: var(--ink-2);
    background-image: url(/assets/img/bg-labels-dark-1122.jpg);
    background-image: image-set(
      url(/assets/img/bg-labels-dark-1122.avif) type("image/avif"),
      url(/assets/img/bg-labels-dark-1122.webp) type("image/webp"),
      url(/assets/img/bg-labels-dark-1122.jpg) type("image/jpeg")
    );
    background-size: cover;
    background-position: center;
    isolation: isolate;
  }
  .compare__photo { justify-self: center; inline-size: min(22rem, 78%); }
  .compare__photo img { filter: drop-shadow(0 18px 22px oklch(0 0 0 / 0.35)); }
  .tag {
    display: grid;
    gap: var(--space-2xs);
    padding: 0.85rem 1.1rem 0.9rem;
    border-radius: 0.875rem;
    background: oklch(0.93 0.015 82 / 0.94);
    color: var(--ink);
    box-shadow: 0 10px 24px -10px oklch(0 0 0 / 0.5);
    font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
    line-height: 1;
  }
  .tag .px { margin-inline-end: auto; }
  .tag__price {
    font-family: var(--font-price);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2.1rem, 1.6rem + 2vw, 3.2rem);
    line-height: 1;
    font-variant-numeric: lining-nums;
    white-space: nowrap;
  }
  .tag--orig { position: absolute; inset-block-start: var(--space-m); inset-inline-start: var(--space-m); }
  .tag--trim { position: absolute; inset-block-end: var(--space-m); inset-inline-end: var(--space-m); }
  .compare figcaption {
    margin-block-start: var(--space-s);
    color: var(--text-soft);
    font-size: var(--step--1);
    text-align: center;
  }
  @media (width >= 52rem) {
    .pricing__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  }

  /* Audience chips with a stitched border */
  .chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-inline-size: 52rem;
    margin-inline: auto;
  }
  .chips li {
    padding: 0.6rem 1.1rem;
    border: 1px dashed oklch(0.872 0.022 83.3 / 0.55);
    border-radius: 999px;
    color: var(--thread-strong);
    font-size: var(--step-0);
  }

  /* About */
  .about__card {
    display: grid;
    gap: var(--space-s);
    max-inline-size: 48rem;
    margin-inline: auto;
    padding: clamp(1.75rem, 1rem + 4vw, 4rem);
    text-align: center;
  }
  .about__card .px-heading { margin-block-end: var(--space-s); }
  .about__card p { max-inline-size: 60ch; margin-inline: auto; }
  .about__quote { display: grid; gap: var(--space-xs); margin-block-end: var(--space-xs); }
  .about__quote blockquote { margin: 0; }
  .about__quote blockquote p {
    max-inline-size: 30ch;
    color: var(--graphite);
    font-size: var(--step-2);
    font-weight: 500;
    line-height: 1.4;
    text-wrap: balance;
  }
  .about__quote figcaption { color: var(--graphite-soft); font-size: var(--step--1); }
  .about__grid { display: grid; justify-items: center; gap: var(--space-l); }
  .about__text { display: grid; gap: var(--space-s); }
  .about__photo img {
    inline-size: min(13rem, 62vw);
    border-radius: calc(var(--radius-card) - 0.5rem);
    outline: 1px solid oklch(0 0 0 / 0.1);
    outline-offset: -1px;
    box-shadow: 0 18px 36px -18px oklch(0 0 0 / 0.45);
  }
  @media (width >= 48rem) {
    .about__card { max-inline-size: 60rem; text-align: start; }
    .about__card .px-heading .px { margin-inline: 0 auto; }
    .about__grid { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; }
    .about__card p, .about__quote blockquote p { margin-inline: 0; }
  }

  /* FAQ */
  .faq__list { border-block-start: 1px solid var(--rule); }
  .faq details { border-block-end: 1px solid var(--rule); }
  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-block-size: 3rem;
    padding-block: var(--space-s);
    color: var(--thread-strong);
    font-size: var(--step-1);
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "";
    flex: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    background:
      linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor 0 0) center / 1.5px 100% no-repeat;
  }
  @media (prefers-reduced-motion: no-preference) {
    .faq summary::after { transition: rotate 200ms var(--ease-out); }
  }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq summary:hover { color: oklch(1 0 0); }
  .faq__answer { padding-block-end: var(--space-m); }
  .faq__answer p { max-inline-size: 60ch; }

  /* Final call to action */
  .cta__card {
    display: grid;
    justify-items: center;
    gap: var(--space-m);
    max-inline-size: 52rem;
    margin-inline: auto;
    padding: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
    text-align: center;
  }
  .cta__card .px-heading { margin-block-end: 0; inline-size: 100%; }
  .cta__card p { font-size: var(--step-1); }

  /* Footer */
  .site-footer {
    padding-block: var(--space-xl);
    border-block-start: 1px solid oklch(1 0 0 / 0.07);
    color: var(--text-soft);
    font-size: var(--step--1);
  }
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-l);
  }
  .brand--static { padding-block: 0; }
}

/* ---------- Motion (progressive enhancement) ---------- */
@layer utilities {
  .vh {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* No fill mode: outside its entry range an element keeps its normal, visible
     style, so content never stays hidden (screenshots, previews, odd timelines). */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .reveal {
        animation: reveal linear;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
      }
    }
  }
  @keyframes reveal {
    from { opacity: 0; translate: 0 1.5rem; }
    to { opacity: 1; translate: 0 0; }
  }
}