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

/* ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, fieldset) {
    margin: 0;
    padding: 0;
  }

  :where(ul[class], ol[class]) { list-style: none; }

  :where(img, svg) { display: block; max-inline-size: 100%; }

  /* {{picture}} output: the <img> is the box the stylesheet lays out (the
     backdrops are grid items and position: sticky, which a wrapper box would
     contain), so the <picture> has no box of its own. Its <source>s would
     then be children of that grid or flex box, and Chrome gives them a cell:
     none takes them out of layout (it does not affect which candidate the
     browser picks). */
  :where(picture) { display: contents; }
  :where(source) { display: none; }

  :where(input, select, textarea, button) { font: inherit; color: inherit; }

  :where(fieldset) { border: 0; }

  :where(legend) { padding: 0; }
}

/* ========================================================================== */
/* Foria — the display face of the reference hero. Regular only; do not let
   the browser synthesise a bold from it. Foria and Charpentier are served
   as Latin subsets (dev/subset-fonts, from fonts/src/); their unicode-range
   is the subset's, so a character outside it falls back to the next family
   instead of a missing glyph. */
@font-face {
  font-family: "Foria";
  src: url("/fonts/foria-regular.woff2?v=c3f0b14f0587") 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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Charpentier Classicistique Pro Italic — the reference hero's italic line.
   One style; keep it off everything but the homepage sub-line. */
@font-face {
  font-family: "Charpentier";
  src: url("/fonts/charpentier-classicistique-pro-italic.woff2?v=77b6c1448f16") format("woff2");
  font-weight: 400;
  font-style: italic;
  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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display — the site's serif, made of the two display faces: upright text
   in Foria, italic text in Charpentier, the same files as above (one
   download each). Every var(--display) rule uses it, so the type that was
   Cormorant Garamond's (retired 2026-10-12: headings on the print documents,
   quotes, the wordmark) now speaks the homepage's voice. size-adjust sets
   Foria at Cormorant's cap height (0.742 → 0.634), so layouts sized for
   Cormorant keep their measure; Charpentier's x-height already matches
   Cormorant italic's. */
@font-face {
  font-family: "Display";
  src: url("/fonts/foria-regular.woff2?v=c3f0b14f0587") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 85%;
  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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Display";
  src: url("/fonts/charpentier-classicistique-pro-italic.woff2?v=77b6c1448f16") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost, self-hosted: Google Fonts' own @font-face rules for the request the
   pages used to make (Jost wght 300;400;500;600, display=swap), latin and
   latin-ext only. One variable file per subset (Jost v20); SIL OFL 1.1, see
   fonts/jost-OFL.txt. */
/* latin-ext */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/jost-latin-ext.woff2?v=312ef2b80cef") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/jost-latin.woff2?v=7726a5cd6f3c") 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;
}
/* latin-ext */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jost-latin-ext.woff2?v=312ef2b80cef") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jost-latin.woff2?v=7726a5cd6f3c") 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;
}
/* latin-ext */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jost-latin-ext.woff2?v=312ef2b80cef") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jost-latin.woff2?v=7726a5cd6f3c") 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;
}
/* latin-ext */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/jost-latin-ext.woff2?v=312ef2b80cef") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/jost-latin.woff2?v=7726a5cd6f3c") 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;
}

/* ========================================================================== */
@layer tokens {
  :root {
    /* Warm palette — no cool greys, no pure black. See DESIGN.md. */
    --cream: #f5efe7;
    --cream-alt: #efe7db;
    --surface: #fbf7f1;
    --surface-warm: #f1e8da;
    --placeholder: #e8dcc9;

    --ink: #14110f;
    --ink-hover: #2e2822;
    --ink-strong: #322c26;
    --body: #4a4038;
    --body-soft: #5c5147;
    --muted: #7a6a55;
    --muted-interactive: #6f604c;

    --gold: #a98453;
    --gold-light: #c9a868;
    --gold-quote: #dcc9a6;
    --selection: #e6d6b8;

    --rule: #dfd3bf;
    --rule-soft: #e4d9c9;
    --rule-strong: #d8cab4;
    --ghost-hover: #ebe0ce;

    /* On dark sections */
    --on-dark: #f2e9da;
    --on-dark-body: #dacbb8;
    --on-dark-dim: #b8a791;
    --on-dark-callout: #e4d6be;
    --dark-rule: #3a322b;
    --dark-inset: #1b1714;

    /* Type */
    --display: "Display", Georgia, serif;
    --sans: Jost, "Helvetica Neue", Helvetica, sans-serif;

    --fs-micro: clamp(0.4375rem, 0.85vw, 0.5625rem);
    --fs-eyebrow: clamp(0.625rem, 1.15vw, 0.75rem);
    --fs-label: clamp(0.6875rem, 1.2vw, 0.8125rem);
    --fs-sm: clamp(0.9375rem, 1.55vw, 1.0625rem);
    --fs-base: clamp(1.0625rem, 1.75vw, 1.1875rem);
    --fs-lead: clamp(1.125rem, 1.8vw, 1.25rem);
    --fs-h4: clamp(1.25rem, 2.2vw, 1.5625rem);
    --fs-h3: clamp(1.375rem, 2.5vw, 1.75rem);
    --fs-h3-lg: clamp(1.5rem, 2.8vw, 2rem);
    --fs-h2: clamp(2rem, 4.8vw, 3.5rem);
    --fs-h1: clamp(2.375rem, 6.4vw, 4.75rem);
    --fs-display: clamp(1.75rem, 4.6vw, 3.375rem);

    /* Tracking — uppercase text is always tracked out */
    --track-tight: 0.16em;
    --track: 0.2em;
    --track-wide: 0.26em;
    --track-widest: 0.3em;

    /* Space */
    /* --container is the CONTENT width; the gutter is added on top of it.
       The site has two page templates and they genuinely differ:
       longform pages (planejamento, para-profissionais) run a 976px measure
       with a tall rhythm; landing pages opt into `.-wide` on <body> for the
       1180px measure and tighter rhythm they were designed with. */
    --container: 61rem; /* 976px */
    --gutter: clamp(1.375rem, 6vw, 4.5rem);
    --section-y: clamp(4.5rem, 11vw, 9.375rem);
    --section-y-sm: clamp(3.5rem, 9vw, 7.5rem);
    --row-y: clamp(1.625rem, 3.4vw, 2.5rem);

    --radius: 3px;
    --radius-lg: 4px;
    --pill: 999px;

    --tap: 2.75rem; /* 44px minimum */

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

/* ========================================================================== */
@layer base {
  html {
    scroll-behavior: smooth;
    /* Foria and Charpentier have one weight each: no invented bold */
    font-synthesis-weight: none;
    -webkit-text-size-adjust: 100%;
    /* Sticky header clearance for in-page anchors */
    scroll-padding-block-start: 6rem;

    /* The homepage header is not sticky, and the offset would push every
       scene's snap position 96px short. */
    &:has(.site-header.-nav) { scroll-padding-block-start: 0; }
  }

  body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-base);
    font-weight: 400; /* the original sets none — Jost 400 everywhere */
    line-height: 1.7;
    text-wrap: pretty;
    overflow-x: clip;
  }

  ::selection { background: var(--selection); }

  :where(h1, h2, h3, h4) {
    font-family: var(--display);
    font-weight: 300;
    line-height: 1.12;
    text-wrap: balance;
  }

  h1 { font-size: var(--fs-h1); line-height: 1.02; }
  h2 { font-size: var(--fs-h2); line-height: 1.1; }
  h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; text-wrap: pretty; }
  h4 { font-size: var(--fs-h4); font-weight: 400; }

  a {
    color: var(--gold);
    text-decoration-color: color-mix(in oklab, var(--gold) 40%, transparent);
    text-underline-offset: 0.2em;
    transition: color 0.25s, background-color 0.25s, border-color 0.25s;

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

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

  em { font-style: italic; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ========================================================================== */
@layer layout {
  body.-wide {
    --container: 73.75rem; /* 1180px */
    --gutter: clamp(1.125rem, 5vw, 4rem);
    --section-y: clamp(3.5rem, 9vw, 8rem);
    --fs-h2: clamp(1.875rem, 4.6vw, 3.375rem);   /* 30 / 54 */
    --fs-h3: clamp(1.375rem, 2.4vw, 1.6875rem);  /* 22 / 27 */
    --fs-h3-lg: clamp(1.4375rem, 2.8vw, 1.875rem); /* 23 / 30 */
    --fs-lead: clamp(1rem, 1.7vw, 1.125rem);      /* 16 / 18 */
    --lead-color: var(--body-soft);
  }

  .container {
    inline-size: 100%;
    max-inline-size: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  body.-wide .site-header > .container { max-inline-size: none; }
  body.-wide .site-header > .container { padding-inline: clamp(1rem, 4vw, 3rem); }

  .section {
    padding-block: var(--section-y);

    &.-tint { background: var(--cream-alt); }
    &.-dark { background: var(--ink); color: var(--on-dark); }
    &.-snug { padding-block: var(--section-y-sm); }
  }

  /* Auto-fit grids do all the responsive work — there is not a single media
     query for layout in this stylesheet. */
  .grid {
    display: grid;
    gap: clamp(0.875rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));

    &.-wide { grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr)); }
    &.-pair {
      grid-template-columns: repeat(auto-fit, minmax(min(21.25rem, 100%), 1fr));
      gap: clamp(2rem, 5vw, 5rem);
      align-items: center;
    }
    &.-start { align-items: start; }
  }

  .stack {
    display: grid;
    gap: var(--flow, 1.5rem);
    align-content: start;
    justify-items: start;
  }

  .prose { max-inline-size: 46ch; }

  /* Full-bleed image + copy pair (the "Sobre mim" block). Like the hero it
     sits outside the container, with the section gutter as its only inset. */
  .feature {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
    gap: clamp(1.75rem, 5vw, 4.5rem);
    align-items: center;
    padding: var(--section-y) clamp(1.125rem, 5vw, 4rem);

    & > .frame { max-inline-size: 30rem; }
    & > div:not(.frame) { max-inline-size: 35rem; }
    & h2 { font-size: clamp(1.75rem, 4.2vw, 3rem); margin-block-end: 1.375rem; }
  }
}

/* ========================================================================== */
@layer components {

  /* --- eyebrow + section heads ------------------------------------------ */
  .eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--track-widest);
    text-transform: uppercase;
    color: var(--gold);
    margin-block-end: 0.875rem;

    .-dark & { color: var(--gold-light); }
  }

  .section-head {
    margin-block-end: clamp(3rem, 6vw, 4.75rem);

    .-wide & { margin-block-end: clamp(2rem, 5vw, 3.5rem); }

    & h2 { max-inline-size: 22ch; }
    /* :not() keeps this off the eyebrow — a bare `p` outranked `.eyebrow`. */
    & > :where(p:not(.eyebrow)) { margin-block-start: 1.75rem; max-inline-size: 56ch; color: var(--body); }
  }

  .accent { color: var(--gold); font-style: italic; }

  /* --- buttons ----------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 3.375rem;
    padding: 0 1.625rem;
    border: 1.5px solid var(--ink);
    border-radius: var(--pill);
    background: var(--ink);
    color: var(--cream);
    font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;

    &:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--cream); }

    &.-ghost {
      background: transparent;
      color: var(--ink);
      &:hover { background: var(--ink); color: var(--cream); }
    }

    &.-strong { border-width: 2px; }

    &.-quiet {
      background: transparent;
      border-color: var(--rule-strong);
      color: var(--muted-interactive);
      &:hover { background: var(--ghost-hover); border-color: var(--ink); color: var(--ink); }
    }

    .-dark & {
      background: var(--on-dark);
      border-color: var(--on-dark);
      color: var(--ink);
      &:hover { background: #fff; border-color: #fff; color: var(--ink); }

      &.-ghost {
        background: transparent;
        border-color: var(--dark-rule);
        color: var(--on-dark);
        &:hover { background: var(--ink-hover); color: var(--on-dark); }
      }
      &.-ghost.-gold {
        border-color: var(--gold-light);
        color: var(--gold-light);
        &:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--ink); }
      }
    }
  }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: var(--tap);
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--track);
    text-transform: uppercase;
    text-decoration: none;
    align-self: flex-start;
  }

  /* --- site chrome ------------------------------------------------------- */
  .announce {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-block-size: 3.25rem;
    padding: 0.75rem clamp(1.125rem, 5vw, 4rem);
    background: #0f0d0c;
    color: #ede3d4;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;

    & p { text-align: center; }
    & .side { display: flex; align-items: center; gap: 1.5rem; }
    & .side.-end { justify-self: end; }
    & a { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; color: inherit; }
    & svg { inline-size: 1.125rem; block-size: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

    @media (width < 48rem) {
      grid-template-columns: 1fr 1fr;
      & p { grid-column: 1 / -1; order: -1; font-size: 0.6875rem; }
    }
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    padding-block: 1rem;
    background: color-mix(in srgb, var(--cream) 92%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--rule-soft);

    & > .container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem;
    }

    &.-center > .container { justify-content: center; }

    &.-nav {
      position: static;
      container-type: inline-size;
      padding-block: 0;
    }
  }

  .nav-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-block-size: 6.5rem;
    padding-inline: clamp(1.125rem, 5vw, 4rem); /* same gutter as the hero text */

    & nav { display: flex; flex-wrap: nowrap; gap: 0.75rem; } /* never two lines of pills */
    & .btn { min-block-size: 2.75rem; padding-inline: 1.25rem; font-size: 0.75rem; }
    /* Nav pills are outlined in a hairline, as in the reference (measured
       #E8E0D8 on its cream); only AGENDAR (.-strong) keeps the ink border. */
    & .btn.-ghost:not(.-strong) { border-color: var(--rule-soft); }
    & nav:last-child { justify-self: end; justify-content: end; }

    /* Once the three pills · wordmark · two pills no longer fit one row the
       section links go (the sections are one scroll away); the wordmark
       centres with Contato and Agendar under it. The left nav measures 384px
       and wraps from 1120px down; 74rem leaves ~30px of slack for wider
       font rendering. */
    @container (width < 74rem) {
      grid-template-columns: 1fr;
      row-gap: 0.75rem;
      padding-block: 1rem;
      & nav[aria-label="Seções"] { display: none; }
      & .wordmark { justify-self: center; }
      & nav:last-child { justify-self: center; justify-content: center; }
    }
  }

  /* The service pages' header has no section pills (they jump within the
     homepage): the wordmark keeps the centre column while there are three */
  @container (width >= 74rem) {
    .site-header.-page .wordmark { grid-column: 2; }
  }
  /* Without the section pills the row fits much narrower than the
     homepage's (right group 342px, wordmark 210px): it stays one row,
     the wordmark centred down to 66rem, then on the left; phones get their
     own header below. */
  @container (48rem <= width < 74rem) {
    .site-header.-page .nav-bar {
      grid-template-columns: 1fr auto 1fr;
      row-gap: 0;
      padding-block: 0;
      & .wordmark { grid-column: 2; justify-self: center; }
      & nav:last-child { justify-self: end; justify-content: end; }
    }
  }
  @container (48rem <= width < 66rem) {
    .site-header.-page .nav-bar {
      grid-template-columns: auto 1fr;
      & .wordmark { grid-column: 1; justify-self: start; }
    }
  }

  .phone-bar { display: none; } /* the mobile block shows it */

  /* The language switcher: inline links on desktop; on phones a dropdown
     at the header's top right, on the wordmark's row, so the header stays
     one row. A <details>: no script needed to open it. */
  .lang-menu { display: none; }
  @media (width < 48rem) {
    .site-header { position: relative; } /* the home cover's header is absolute already */
    .site-header .lang-switch { display: none !important; } /* the inline row carries an inline display */
    .site-header .lang-menu {
      display: block;
      position: absolute;
      inset-block-start: 1.5rem; /* centred on the 65px wordmark row */
      inset-inline-end: var(--edge, 1.25rem);
      z-index: 10;

      & summary {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        min-block-size: var(--tap);
        padding-inline: 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: var(--track);
        color: var(--gold);
        cursor: pointer;
        list-style: none;
        &::-webkit-details-marker { display: none; }
        &::after { /* a small chevron, turning when open */
          content: "";
          inline-size: 0.4rem;
          block-size: 0.4rem;
          border: solid currentColor;
          border-width: 0 1.5px 1.5px 0;
          rotate: 45deg;
          translate: 0 -0.15rem;
          transition: rotate 0.25s;
        }
      }
      &[open] summary::after { rotate: -135deg; translate: 0 0.1rem; }
      & nav {
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: 100%;
        display: grid;
        min-inline-size: 5.5rem;
        padding-block: 0.375rem;
        border: 1px solid var(--rule-soft);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: 0 12px 28px -14px rgb(20 17 15 / 0.35);
      }
      & nav a {
        display: flex;
        align-items: center;
        min-block-size: var(--tap);
        padding-inline: 1rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: var(--track);
        color: var(--ink);
        text-decoration: none;
        &[aria-current] { color: var(--gold); }
      }
    }
    /* with the languages in the dropdown and the pills in the phone bar, the
       Contato nav is empty: no second row under the wordmark */
    body:has(.phone-bar) .site-header .nav-bar { row-gap: 0; }
    /* on the homepage cover the header floats on the photo */
    .site-header.-nav:not(.-form, .-page) .lang-menu summary { color: var(--gold-light); }
  }

  .wordmark {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--ink);
    text-decoration: none;

    & img { inline-size: 2.125rem; block-size: auto; }
    & b {
      display: block;
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(1.0625rem, 2vw, 1.3125rem);
      letter-spacing: var(--track);
      text-transform: uppercase;
      color: var(--gold);
    }
    & small {
      display: block;
      margin-block-start: 0.1875rem;
      font-size: var(--fs-micro);
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: var(--muted);
    }

    &.-lg {
      gap: 1rem;
      & img { inline-size: 3.75rem; }
      & b { font-size: 1.625rem; font-weight: 500; letter-spacing: 0.12em; }
      & small { font-size: 0.6875rem; letter-spacing: 0.3em; color: var(--gold); }
    }
  }


  /* --- hero -------------------------------------------------------------- */
  /* The base grid; every hero is .-home (the homepage) or .-bleed (the four
     service pages), which share the bleeding-photo layout below. */
  .hero {
    --hero-gap: clamp(1.75rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--hero-gap);
    align-items: stretch;
    padding: clamp(2.75rem, 7vw, 6.5rem) clamp(1.125rem, 5vw, 4rem);
    overflow: hidden;
  }

  .hero-text {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;

    & > * { position: relative; z-index: 1; }
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* buttons hug their text, never stretch */
    justify-content: center;
    max-inline-size: 37.5rem;

    & .eyebrow { margin-block-end: 1.375rem; }
    & h1 { margin-block-end: 1.5rem; }
    & .hero-sub { margin-block-end: 1.75rem; }
    & :is(.hero-lede, .lead) { margin-block-end: 2rem; }
  }

  .hero-lede {
    font-size: clamp(1rem, 1.7vw, 1.1875rem);
    line-height: 1.7;
    color: var(--body-soft);
    max-inline-size: 44ch;
  }

  .hero-sub {
    font-family: var(--display);
    font-weight: 300;
    font-style: italic;
    font-size: var(--fs-display);
    line-height: 1.05;
    color: var(--gold);
  }

  /* Vertical CLAUDIA watermark behind the hero copy */
  .watermark {
    position: absolute;
    /* Physical top/right on purpose: this element is writing-mode
       vertical-rl, and logical insets resolve against the element's OWN
       writing mode — inset-block-start would mean `right` here. */
    top: 4%;
    right: calc(-1 * var(--hero-gap) + 8px);
    z-index: 0;
    font-family: "Foria", var(--display);
    font-weight: 400;
    font-synthesis: none;
    font-size: clamp(3.25rem, 6.5vw, 6rem);
    line-height: 1;
    letter-spacing: 0.1em;
    color: #e6dccb;
    writing-mode: vertical-rl;
    rotate: 180deg;
    user-select: none;
    pointer-events: none;
  }

  /* Hero photos are a fixed-height box the image covers, not an aspect
     ratio — that is what keeps the hero to one viewport. */
  .hero .frame {
    position: relative;
    aspect-ratio: auto;
    min-block-size: clamp(17.5rem, 42vw, 32.5rem);

    & img { position: absolute; inset: 0; }
  }

  /* Homepage and the four service pages (.-bleed): photo bleeds to the right
     and bottom edges; text block centres on the photo, not the section.
     Measured from the reference mock at 1536. */
  .hero:is(.-home, .-bleed) {
    --photo-offset: 5rem; /* photo starts 80px below the header */
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    gap: 0;
    padding: 0;
    align-items: stretch;

    & .hero-text {
      padding: var(--photo-offset) clamp(1.125rem, 5vw, 4rem) 3rem; /* the header's gutter */
      justify-content: center;
    }
    & .frame {
      min-block-size: auto;
      margin-block-start: var(--photo-offset);
      border-radius: 0;
    }

    @media (width >= 48rem) { min-block-size: calc(100svh - 9.8rem); } /* top bar + header */
    @media (width < 48rem) {
      & .hero-text { padding-block-start: 3rem; }
      & .frame { aspect-ratio: 4 / 5; margin-block-start: 0; }
    }
  }

  /* Homepage only: the display title, Charpentier sub-line and watermark */
  .hero.-home {
    & .hero-copy { max-inline-size: 32rem; }

    & .eyebrow {
      font-size: clamp(0.75rem, 0.9vw, 0.875rem);
      letter-spacing: 0.22em;
      margin-block-end: 0.5rem; /* sits tight on the headline */
    }
    & h1 {
      font-family: "Foria", var(--display);
      /* Foria's cap height is 0.742em (Cormorant's is 0.634), so 142px here
         gives the same 105px caps the reference has at 1536. */
      font-size: clamp(3.5rem, 9.2vw, 8.875rem);
      font-weight: 400;
      font-synthesis: none;
      line-height: 0.9;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      /* Foria's caps sit flush at the top of the line box; this small positive
         margin is what puts ~8px between the eyebrow and the cap line. */
      margin-block: 0.04em 0.625rem;
      /* One line, always — it may run past the copy column into the gutter. */
      white-space: nowrap;
      max-inline-size: none;
    }
    & .hero-sub {
      font-family: "Charpentier", var(--display);
      font-size: clamp(2rem, 4.2vw, 4rem);
      font-weight: 400;
      font-synthesis: none;
      margin-block-end: 2.5rem;
    }
    & .hero-lede {
      font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
      line-height: 1.7;
      max-inline-size: 46ch;
      margin-block-end: 3rem;

      & strong { font-weight: 600; color: var(--ink); }
    }

    /* Tucked into the photo's top-left corner: the same distance from the
       photo's top edge as from its left edge. */
    --wm-gap: 1rem;
    & .watermark {
      /* Offsets are measured against the glyph INK (pixel-scanned), not the
         box: in vertical writing the line box is 1em wide, Foria's caps are
         0.742em, and the glyphs sit toward the ascent side of the box. */
      top: calc(var(--photo-offset) + var(--wm-gap) - 0.103em);
      right: calc(var(--wm-gap) - 0.226em);
      font-size: clamp(4rem, 8vw, 7.5rem);
      color: #e8dfd0;
    }

    & .frame img { object-position: 30% 50%; }

    @media (width >= 48rem) {
      /* The word is ~5em long; keep it inside the photo's height on short,
         wide windows: photo = 100svh − header (9.8rem) − offset (5rem),
         minus a gap at each end. */
      & .watermark {
        font-size: min(clamp(4rem, 8vw, 7.5rem), (100svh - 14.8rem - 2 * var(--wm-gap)) / 5.1);
      }
    }
  }

  /* --- service pages: the homepage's type ----------------------------------
     atendimento, programas, planejamento and para-profissionais (.-service):
     the hero headline in Foria caps with its gold accent in Charpentier;
     everything below the hero is a component with its own type (scene
     heads, .timeline, .day-copy, .terms …). font-size-adjust scales Foria to
     a sensible cap height at the hero's sizes. */
  body.-service .hero h1 {
    font-family: "Foria", var(--display);
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size-adjust: cap-height 0.5;

    &.-long { font-size: clamp(2.25rem, 4.6vw, 3.625rem); max-inline-size: 17ch; }
    & .accent {
      font-family: "Charpentier", var(--display);
      font-style: italic;
      text-transform: none;
      letter-spacing: 0;
      font-size-adjust: none;
    }
  }

  /* --- scene head: italic kicker, Foria caps title, short gold rule --------- */
  .scene-head {
    text-align: center;
    margin-block-end: clamp(2rem, 4svh, 3rem);

    & .kicker {
      display: block;
      font-family: "Charpentier", var(--display);
      font-style: italic;
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1.625rem, 2.6vw, 3rem);
      line-height: 1;
      color: var(--gold);
      margin-block-end: 0.375rem;
    }
    & h2 {
      font-family: "Foria", var(--display);
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(2.125rem, 4.2vw, 5rem);
      line-height: 1;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-wrap: balance;
      max-inline-size: none;
      margin-inline: auto;
    }
    &::after {
      content: "";
      display: block;
      inline-size: 4.5rem;
      block-size: 2px;
      margin: 1.5rem auto 0;
      background: var(--gold);
    }
  }

  /* --- services: the photos are the cards ----------------------------------- */
  /* Four services: the only even breaks are 4 → 2 → 1, so the count is
     explicit — auto-fit would leave a 3 + 1 orphan around 1000–1150px. */
  .services {
    display: grid;
    gap: clamp(1rem, 2vw, 1.875rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));

    @media (width < 68rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (width < 32rem) { grid-template-columns: minmax(0, 1fr); }
  }

  .service {
    display: block;
    color: inherit;
    text-decoration: none;

    /* The artwork. Sizing lives here; the img just covers it. The 3D hover
       (tvOS-style lift + tilt + specular) transforms this element so layout
       never moves. --rx/--ry/--mx/--my are set by js/tilt.js from the pointer
       position; without JS the card still lifts. */
    & .art {
      position: relative;
      display: block;
      aspect-ratio: 3 / 4;
      inline-size: 100%;
      overflow: hidden;
      background: var(--placeholder);
      transform: perspective(56rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
      transform-origin: center;
      transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
      will-change: transform;

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
          rgb(255 255 255 / 0.32), rgb(255 255 255 / 0) 62%);
        opacity: 0;
        transition: opacity 0.45s;
        pointer-events: none;
      }
    }
    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      filter: saturate(0.62) sepia(0.16) contrast(1.03) brightness(1.02);
      transition: filter 0.4s;
    }
    & h3 {
      margin-block: 1.25rem 0.5rem;
      font-family: "Foria", var(--display);
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      line-height: 1.2;
      transition: color 0.25s;
    }
    & p {
      font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
      line-height: 1.55;
      color: var(--muted);
    }
    /* Inside the p, so the desktop subgrid keeps its three rows */
    & .more {
      display: block;
      margin-block-start: 0.75rem;
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: var(--track);
      text-transform: uppercase;
      color: var(--gold);
    }

    &:hover img { filter: saturate(0.85) sepia(0.06); }
    &:hover h3 { color: var(--gold); }
    /* No hover on touch: the photos rest at the hover's colour instead of the
       muted state nobody could lift */
    @media (hover: none) { & img { filter: saturate(0.85) sepia(0.06); } }

    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      &:hover .art, &:focus-visible .art {
        --s: 1.045;
        box-shadow: 0 28px 48px -22px rgb(20 17 15 / 0.5);
        /* Track the pointer quickly while hovering; ease slowly on leave */
        transition: transform 0.1s linear, box-shadow 0.55s var(--ease);
      }
      &:hover .art::after { opacity: 1; }
    }
  }

  /* Footnote under a scene — same size as the card descriptions */
  .scene-note {
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.55;
    text-align: center;
    color: var(--muted);
  }

  /* --- about: the hero, mirrored --------------------------------------------
     Photo bleeds off the LEFT edge and down to the fold, starting the same
     80px below the top as the hero photo; copy sits right, centred on it. */
  .about {
    --photo-offset: 5rem;
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    align-items: stretch;
    padding: 0;

    & .about-photo {
      position: relative;
      margin-block-start: var(--photo-offset);
      overflow: hidden; /* the scroll drift scales the image; it must not spill */
      background: var(--placeholder);

      & img {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: 50% 18%;
      }
    }

    & .about-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: var(--photo-offset) var(--gutter) 3rem clamp(2.5rem, 6vw, 6rem);

      & > * { max-inline-size: 40rem; }
    }

    & .kicker {
      display: block;
      font-family: "Charpentier", var(--display);
      font-style: italic;
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1.375rem, 2vw, 1.875rem);
      line-height: 1;
      color: var(--gold);
      margin-block-end: 0.75rem;
    }
    & h2 {
      font-family: "Foria", var(--display);
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1.75rem, 2.9vw, 2.75rem);
      line-height: 1.08;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-wrap: balance;
      max-inline-size: 28ch;

      &::after {
        content: "";
        display: block;
        inline-size: 4.5rem;
        block-size: 2px;
        margin-block: 1.5rem 2rem;
        background: var(--gold);
      }
    }
    & p {
      font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
      line-height: 1.75;
      color: var(--body-soft);
      & + p { margin-block-start: 1.375rem; }
    }
    & .signature {
      margin-block-start: 2rem;
      font-family: "Charpentier", var(--display);
      font-style: italic;
      font-synthesis: none;
      font-size: clamp(1.5rem, 2.2vw, 2rem);
      line-height: 1;
      color: var(--gold);
    }

    @media (width < 48rem) {
      grid-template-columns: 1fr;
      & .about-photo { margin-block-start: 0; aspect-ratio: 4 / 5; }
      & .about-copy { padding: 2.5rem var(--gutter) 3rem; }
    }
  }

  /* --- testimonials: one voice at a time -------------------------------------
     Dark stage, a blurred portrait far behind, one quote at a time in the
     middle of the viewport; six shorter quotes in a hairline grid below and
     the full set in the #todos popover. The four hero slides share one grid
     cell so nothing shifts as they cross-fade. js/testimonials.js rotates on a
     per-quote dwell (data-dwell), pauses on hover/focus and behind a visible
     control. Without it the first quote shows and "ver todos" still works. */
  .testimonials {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;

    & .backdrop {
      position: absolute;
      inset: -6%;
      z-index: -1;
      inline-size: 112%;
      block-size: 112%;
      object-fit: cover;
      object-position: 50% 30%;
      filter: grayscale(1) blur(2px) brightness(0.55);
      opacity: 0.28;
    }
    /* Vignette and top/bottom fades so the portrait only shows through the middle */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(to bottom, var(--ink) 0%, transparent 18%, transparent 82%, var(--ink) 100%),
        radial-gradient(ellipse 70% 60% at 50% 40%,
          color-mix(in srgb, var(--ink) 10%, transparent) 0%,
          color-mix(in srgb, var(--ink) 75%, transparent) 60%,
          var(--ink) 100%);
    }
  }

  .testimonials .stage {
    display: grid;
    justify-items: center;
    align-content: center;
    min-block-size: 92svh;
    padding: clamp(5rem, 12vw, 10rem) var(--gutter) clamp(4rem, 9vw, 7.5rem);
    text-align: center;

    & .eyebrow {
      margin-block-end: clamp(2.25rem, 5vw, 4rem);
      letter-spacing: 0.38em;
    }
  }

  .quotes-track {
    display: grid;
    inline-size: 100%;
    max-inline-size: 67.5rem;
    & > li { grid-area: 1 / 1; align-self: center; }
  }

  .quote-slide {
    opacity: 0;
    translate: 0 -0.875rem;
    filter: blur(6px);
    visibility: hidden;
    transition: opacity 1.6s ease, translate 1.6s var(--ease), filter 1.6s ease, visibility 0s 1.6s;

    &.is-on {
      opacity: 1;
      translate: 0;
      filter: blur(0);
      visibility: visible;
      transition: opacity 1.6s ease, translate 1.6s var(--ease), filter 1.6s ease, visibility 0s;
    }

    & figure { display: grid; justify-items: center; gap: clamp(1.75rem, 4vw, 2.75rem); }

    & blockquote {
      font-family: var(--display);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.625rem, 3.6vw, 3.25rem);
      line-height: 1.25;
      letter-spacing: -0.005em;
      color: var(--on-dark);
      text-wrap: balance;

      /* A dim opening mark hung above the first line. Zero-width inline box
         at the start of the text, so it follows the first line's own start
         (balanced lines are narrower than the box) and takes no space. */
      &::before {
        content: "\201C";
        display: inline-block;
        inline-size: 0;
        overflow: visible;
        vertical-align: top;
        font-size: 2.4em;
        line-height: 0;
        translate: -0.3em -0.1em;
        color: color-mix(in srgb, var(--gold-light) 30%, transparent);
        pointer-events: none;
      }
      /* The phrases that matter, in gold */
      & em { font-style: inherit; color: var(--gold-light); }
    }

    & figcaption {
      display: flex;
      align-items: center;
      gap: 1.125rem;
      font-size: var(--fs-eyebrow);
      font-weight: 600;
      letter-spacing: var(--track-widest);
      text-transform: uppercase;
      color: var(--gold-light);

      &::before, &::after {
        content: "";
        inline-size: 2.5rem;
        block-size: 1px;
        background: color-mix(in srgb, var(--gold-light) 60%, var(--ink));
      }
    }
  }

  /* Ticks dead centre (as in the reference), the pause control beside them */
  .quotes-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1.25rem;
    margin-block-start: clamp(2.5rem, 5vw, 4rem);

    & .ticks { grid-column: 2; }
    & .quotes-pause { grid-column: 3; justify-self: start; }

    /* Controls only make sense once the script is running */
    .testimonials:not(.is-ready) & :is(.ticks, .quotes-pause) { display: none; }
  }

  /* One thin line per hero quote; the active one stretches */
  .ticks {
    display: flex;
    gap: 0.625rem;

    & button {
      display: grid;
      align-items: center;
      inline-size: 0.875rem;
      block-size: var(--tap);
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      transition: inline-size 0.6s var(--ease);

      &::before {
        content: "";
        block-size: 1px;
        background: color-mix(in srgb, var(--gold-light) 35%, transparent);
        transition: background 0.6s ease;
      }
      &[aria-current="true"] { inline-size: 2.25rem; }
      &[aria-current="true"]::before, &:hover::before { background: var(--gold-light); }
    }
  }

  .quotes-pause {
    display: grid;
    place-items: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    padding: 0;
    border: 1px solid var(--dark-rule);
    border-radius: var(--pill);
    background: transparent;
    color: var(--on-dark-dim);
    cursor: pointer;
    transition: border-color 0.25s, color 0.25s;

    &:hover { border-color: var(--gold-light); color: var(--on-dark); }
    & svg { inline-size: 0.75rem; block-size: 0.75rem; fill: currentColor; }
    & .g { display: none; }
    &[aria-pressed="true"] .p { display: none; }
    &[aria-pressed="true"] .g { display: block; }
  }

  /* The quieter chorus under the stage */
  .echoes {
    padding-block: 0 clamp(4.5rem, 10vw, 8.75rem);

    & .echo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
      gap: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem);
    }
    & figure {
      display: grid;
      gap: 1rem;
      padding-block-start: 1.375rem;
      border-block-start: 1px solid color-mix(in srgb, var(--gold-light) 28%, transparent);
    }
    & blockquote {
      font-family: var(--display);
      font-weight: 300;
      font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
      line-height: 1.55;
      color: var(--on-dark-body);
    }
    & figcaption {
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: var(--track-widest);
      text-transform: uppercase;
      color: var(--gold-light);
    }
  }

  .echoes-more {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 clamp(1.5rem, 4vw, 3rem);
    margin-block-start: clamp(3rem, 6vw, 5rem);

    & button {
      min-block-size: var(--tap);
      padding: 0.75rem 0.25rem;
      border: 0;
      border-block-end: 1px solid color-mix(in srgb, var(--gold-light) 60%, var(--ink));
      background: none;
      font: 600 0.75rem/1 var(--sans);
      letter-spacing: var(--track-wide);
      text-transform: uppercase;
      color: var(--gold-light);
      cursor: pointer;
      transition: color 0.3s ease, border-color 0.3s ease;

      &:hover { color: var(--on-dark); border-color: var(--on-dark); }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quote-slide, .quote-slide.is-on { transition: none; }
    .ticks button { transition: none; }
  }

  /* --- photo scenes: booking and contact ------------------------------------
     A studio photo behind a warm dark wash, the scene head in on-dark colours.
     Booking (#caminhos) is one glass card with the two ways in — anamnese for
     a first visit, the #agendar popover for patients — set to the right so
     the photo's subject stays visible. Contact (#visita) is the scene head
     over two contact lists. Reference: the Angel Studio "Kontakt &
     Rezervace" mock. */
  .photo-scene {
    --photo-pos: 50% 40%;
    position: relative;
    isolation: isolate;
    overflow: hidden;

    & .backdrop {
      position: absolute;
      inset: 0;
      z-index: -1;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: var(--photo-pos);
      filter: sepia(0.35) saturate(0.7) brightness(0.55);
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to bottom,
        color-mix(in srgb, var(--ink) 82%, transparent),
        color-mix(in srgb, var(--ink) 48%, transparent) 40%,
        color-mix(in srgb, var(--ink) 78%, transparent));
    }
    & .scene-head {
      & .kicker { color: var(--gold-light); }
      & h2 { color: var(--on-dark); }
      &::after { background: var(--gold-light); }
    }
  }

  /* The homepage's booking card, and the same card closing atendimento */
  :is(.booking, .closing) {
    --photo-pos: 30% 35%;
    & > .container { display: grid; justify-items: center; }
    & .glass {
      inline-size: min(100%, 46rem);
      gap: 1.25rem;
      padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
      & .kicker { font-size: clamp(1.625rem, 2.6vw, 2.75rem); }
      & h3 { font-size: clamp(2.125rem, 3.8vw, 3.75rem); }
      & p { max-inline-size: 44ch; font-size: var(--fs-base); }
      & .actions { margin-block-start: 1rem; }
    }
  }

  .contact {
    --photo-pos: 62% 40%;
    & .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }
  }

  .glass {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.75rem);
    border: 1px solid color-mix(in srgb, var(--gold-light) 30%, transparent);
    background: color-mix(in srgb, var(--ink) 42%, transparent);
    backdrop-filter: blur(14px);
    text-align: center;

    & .kicker {
      font-family: "Charpentier", var(--display);
      font-style: italic;
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1.375rem, 2vw, 1.75rem);
      line-height: 1;
      color: var(--gold-light);
    }
    & h3 {
      margin: 0;
      font-family: "Foria", var(--display);
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1.75rem, 2.8vw, 2.5rem);
      line-height: 1;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--on-dark);
    }
    & p { max-inline-size: 42ch; font-size: var(--fs-sm); line-height: 1.7; color: var(--on-dark-body); }
    & .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-block-start: 0.75rem; }
    & .btn { padding-inline: 1.25rem; white-space: nowrap; }
    /* Phones: the pair still shares one row — tighter tracking and padding,
       and the card's own padding drops so there is room for both. */
    @media (width < 30rem) {
      padding-inline: 1rem;
      & .actions { gap: 0.5rem; flex-wrap: nowrap; }
      & .btn { flex: 1 1 0; min-inline-size: 0; justify-content: center; padding-inline: 0.625rem; font-size: 0.6875rem; letter-spacing: 0.12em; }
    }
  }

  .contact-list {
    display: grid;

    & > div {
      display: grid;
      gap: 0.5rem;
      padding-block: 1.125rem;
      border-block-start: 1px solid color-mix(in srgb, var(--gold-light) 28%, transparent);
    }
    & > div:first-child { padding-block-start: 0; border-block-start: 0; }
    & dt {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: var(--track-widest);
      text-transform: uppercase;
      color: var(--gold-light);

      & svg { inline-size: 0.875rem; block-size: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    }
    & dd {
      font-size: var(--fs-base);
      line-height: 1.55;
      color: var(--on-dark);

      & a {
        color: inherit;
        text-decoration: none;
        border-block-end: 1px solid color-mix(in srgb, var(--gold-light) 50%, transparent);
        transition: border-color 0.25s;
        &:hover { border-color: var(--gold-light); }
      }
    }
    & .dim { color: var(--on-dark-dim); }
    & .hours dd { display: grid; gap: 0.125rem; }
  }

  /* --- service chapters ------------------------------------------------------
     atendimento below its hero, in the homepage's grammar: centred scene
     heads, photos as the surfaces, hairlines instead of boxes, everything on
     one centre line or one left edge. Own classes, not the homepage's
     .about/.booking/.contact: those become pinned stories on phones. */
  .chapter { padding-block: clamp(4.5rem, 10vw, 8.5rem); }

  /* Four steps on one line, each centred under its numeral; 4 → 2 → 1 like
     the services. */
  .timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.75rem, 3vw, 3.5rem);
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    padding: 0;
    list-style: none;

    @media (width < 68rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
    @media (width < 32rem) { grid-template-columns: minmax(0, 1fr); }

    & li { display: grid; justify-items: center; align-content: start; text-align: center; }
    & .num {
      font-family: "Foria", var(--display);
      font-synthesis: none;
      font-size: clamp(2.75rem, 4vw, 3.75rem);
      line-height: 1;
      color: var(--gold);

      &::after { /* a short hairline under each numeral */
        content: "";
        display: block;
        inline-size: 2.5rem;
        block-size: 1px;
        margin: 1.25rem auto 1.5rem;
        background: var(--rule-strong);
      }
    }
    & h3 {
      font-family: "Foria", var(--display);
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1rem, 1.2vw, 1.1875rem);
      line-height: 1.3;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-wrap: balance;
      max-inline-size: 22ch;
      margin-block-end: 0.875rem;
    }
    & p {
      font-size: var(--fs-sm);
      line-height: 1.7;
      color: var(--muted);
      max-inline-size: 30ch;
      text-wrap: pretty;
    }
  }

  /* The day: the portrait bleeds off the left edge, the copy beside it on one
     left edge — kicker, title, rule, two paragraphs, three facts. */
  .day-split {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    background: var(--cream-alt);

    & .day-photo {
      position: relative;
      min-block-size: clamp(30rem, 80svh, 48rem);
      overflow: hidden;
      background: var(--placeholder);

      & img {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: 50% 22%;
      }
    }
    & .day-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(3.5rem, 8vw, 7rem) var(--gutter) clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 6vw, 6rem);

      & > * { max-inline-size: 34rem; }
    }
    & .kicker {
      font-family: "Charpentier", var(--display);
      font-style: italic;
      font-synthesis: none;
      font-size: clamp(1.375rem, 2vw, 1.875rem);
      line-height: 1;
      color: var(--gold);
      margin-block-end: 0.75rem;
    }
    & h2 {
      font-family: "Foria", var(--display);
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1.75rem, 2.9vw, 2.75rem);
      line-height: 1.08;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-wrap: balance;

      &::after {
        content: "";
        display: block;
        inline-size: 4.5rem;
        block-size: 2px;
        margin-block: 1.5rem 2rem;
        background: var(--gold);
      }
    }
    & p {
      font-size: var(--fs-base);
      line-height: 1.75;
      color: var(--body);
      text-wrap: pretty;
      & + p { margin-block-start: 1rem; }
    }
    & .facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: auto auto; /* labels share a row, values share the next */
      column-gap: 1.25rem;
      row-gap: 0;
      margin-block-start: clamp(2rem, 4vw, 3rem);
      padding-block-start: 1.75rem;
      border-block-start: 1px solid var(--rule);

      & > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
      & dt {
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: var(--track-widest);
        text-transform: uppercase;
        color: var(--gold);
      }
      & dd {
        margin: 0.625rem 0 0;
        font-family: "Foria", var(--display);
        font-synthesis: none;
        font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink);
      }
    }

    @media (width < 48rem) {
      grid-template-columns: minmax(0, 1fr);
      & .day-photo { min-block-size: 0; aspect-ratio: 4 / 5; }
      & .day-copy { padding: 3.5rem var(--gutter) 4rem; }
    }
  }

  /* Before and after: the scene head and two hairline lists on the dimmed
     studio, as the homepage's Contato. */
  .care {
    --photo-pos: 50% 55%;
    padding-block: clamp(5rem, 11vw, 9rem);

    & .care-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
      gap: clamp(2.5rem, 6vw, 6rem);
      max-inline-size: 62rem;
      margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    }
    & h3 {
      font-family: "Foria", var(--display);
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1rem, 1.3vw, 1.25rem);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-block-end: 1.25rem;
    }
  }
  .care-list {
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      padding-block: 1.125rem;
      border-block-start: 1px solid color-mix(in srgb, var(--gold-light) 28%, transparent);
      font-size: var(--fs-base);
      line-height: 1.65;
      color: var(--on-dark-body);
      text-wrap: pretty;
    }
    & li:last-child { border-block-end: 1px solid color-mix(in srgb, var(--gold-light) 28%, transparent); }
  }

  /* The studio: three photos, square corners and the services' warm filter;
     on phones the first takes the row. */
  .studio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.6vw, 1.5rem);
    margin-block-start: clamp(2.5rem, 5vw, 4rem);

    & img {
      inline-size: 100%;
      block-size: auto;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      background: var(--placeholder);
      filter: saturate(0.62) sepia(0.16) contrast(1.03) brightness(1.02);
    }

    @media (width < 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      & > picture:first-child img { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
    }
  }

  /* The closing card: the homepage's booking card (sized with it above), with
     the booking terms and a way to ask beneath the buttons. */
  .closing {
    --photo-pos: 50% 30%;
    padding-block: clamp(5rem, 12vw, 10rem);

    & .glass .note {
      max-inline-size: 46ch;
      font-size: var(--fs-sm);
      line-height: 1.6;
      color: var(--on-dark-dim);

      & a { color: var(--gold-light); }
    }
    & .glass .actions + .note { margin-block-start: 0.5rem; }
  }

  /* --- more service chapters --------------------------------------------------
     programas, planejamento and para-profissionais reuse the atendimento
     chapters above and add these: a long scene head, the reader's voices, a
     hairline index of terms (and the FAQ), statements, the with/without
     columns, the dark form section, the testimonials and the slider. */
  .chapter.-tint { background: var(--cream-alt); }

  /* a scene head whose title is a sentence: smaller, still centred */
  .scene-head.-long h2 { font-size: clamp(1.75rem, 3.2vw, 3rem); line-height: 1.1; max-inline-size: 24ch; }
  /* the thoughts first and the title after them, as their answer (para-profissionais) */
  .scene-head.-answer h2 { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
  /* a kicker that reuses an existing eyebrow phrase, set lowercase as the
     homepage's kickers are */
  .kicker.-lc { text-transform: lowercase; }

  .chapter-lead {
    max-inline-size: 52ch;
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
    font-size: var(--fs-base);
    line-height: 1.75;
    color: var(--body);
    text-align: center;
    text-wrap: pretty;
  }
  .chapter-note {
    max-inline-size: 62ch;
    margin: clamp(2.25rem, 4vw, 3rem) auto 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--muted);
    text-align: center;
    text-wrap: pretty;
    & a { color: var(--gold); }
  }

  /* What the reader thinks: Jost lines on one centre line, a
     short hairline between them */
  .voices {
    display: grid;
    justify-items: center;
    margin: clamp(1rem, 3vw, 2rem) auto 0;
    padding: 0;
    list-style: none;
    text-align: center;

    & li {
      max-inline-size: 44ch;
      font-family: var(--display);
      font-style: italic;
      font-weight: 300;
      font-size: var(--fs-h4);
      line-height: 1.45;
      color: var(--muted-interactive);
      text-wrap: balance;
    }
    & li + li::before {
      content: "";
      display: block;
      inline-size: 2.5rem;
      block-size: 1px;
      margin: 1.125rem auto;
      background: var(--rule-strong);
    }
  }

  /* An index: a Foria caps term, its description beside it, hairlines
     between; the FAQ is the same with the question as the term */
  .terms {
    max-inline-size: 62rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;

    & > div {
      display: grid;
      grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
      gap: clamp(1.25rem, 4vw, 4rem);
      padding-block: clamp(1.375rem, 2.4vw, 1.875rem);
      border-block-start: 1px solid var(--rule);
    }
    & > div:last-child { border-block-end: 1px solid var(--rule); }
    & dt {
      font-family: "Foria", var(--display);
      font-synthesis: none;
      font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
      line-height: 1.4;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
    }
    & dd {
      margin: 0;
      font-size: var(--fs-base);
      line-height: 1.7;
      color: var(--body);
      text-wrap: pretty;
    }
    &.-faq > div { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
  }

  /* A statement: one line in Jost Light, centred under a gold rule;
     on a photo (dark) with a button beneath */
  .statement {
    text-align: center;
    padding-block: clamp(4.5rem, 10vw, 8rem);

    & .container { display: grid; justify-items: center; }
    & .statement-line::before {
      content: "";
      display: block;
      inline-size: 4.5rem;
      block-size: 2px;
      margin: 0 auto 2rem;
      background: var(--gold);
    }
    & .signature {
      margin-block-start: 1.75rem;
      font-family: "Charpentier", var(--display);
      font-style: italic;
      font-synthesis: none;
      font-size: clamp(1.5rem, 2.2vw, 2rem);
      color: var(--gold);
    }
    & .btn { margin-block-start: clamp(2rem, 4vw, 3rem); }
    &.photo-scene {
      --photo-pos: 50% 35%;
      padding-block: clamp(5rem, 12vw, 9.5rem);
      & .statement-line { color: var(--on-dark); }
      & .statement-line::before { background: var(--gold-light); }
    }
  }
  .statement-line {
    max-inline-size: 30ch;
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    line-height: 1.25;
    color: var(--ink);
    text-wrap: balance;
  }

  /* Without / with a plan: two hairline columns, the doubts in muted
     Jost, the answers in Foria caps */
  .compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(2.5rem, 6vw, 6rem);
    max-inline-size: 62rem;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;

    & h3 {
      margin-block-end: 1rem;
      font-family: var(--sans); /* a label, as the homepage's eyebrows, not a display heading */
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: var(--track-widest);
      text-transform: uppercase;
      color: var(--muted);
    }
    & > div + div h3 { color: var(--gold); }
    & ul { margin: 0; padding: 0; list-style: none; }
    & li {
      padding-block: 1.125rem;
      border-block-start: 1px solid var(--rule);
    }
    & li:last-child { border-block-end: 1px solid var(--rule); }
    & .-without li {
      font-family: var(--display);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.25rem, 1.8vw, 1.5rem);
      line-height: 1.35;
      color: var(--muted-interactive);
    }
    & .-with li {
      font-family: "Foria", var(--display);
      font-synthesis: none;
      font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
      line-height: 1.6;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
    }
  }

  /* The dark form section: the copy on one left edge (kicker, Foria title,
     gold rule), the form beside it */
  .ask {
    padding-block: clamp(4.5rem, 10vw, 8rem);

    & > .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
      gap: clamp(2.5rem, 7vw, 7rem);
      align-items: start;
    }
    & .kicker {
      display: block;
      font-family: "Charpentier", var(--display);
      font-style: italic;
      font-synthesis: none;
      font-size: clamp(1.375rem, 2vw, 1.875rem);
      line-height: 1;
      color: var(--gold-light);
      margin-block-end: 0.75rem;
    }
    & h2 {
      font-family: "Foria", var(--display);
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1.75rem, 2.9vw, 2.75rem);
      line-height: 1.08;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-wrap: balance;
      color: var(--on-dark);

      &::after {
        content: "";
        display: block;
        inline-size: 4.5rem;
        block-size: 2px;
        margin-block: 1.5rem 2rem;
        background: var(--gold-light);
      }
    }
    & .ask-copy > p:not(.callout) {
      max-inline-size: 42ch;
      font-size: var(--fs-base);
      line-height: 1.75;
      color: var(--on-dark-body);
      margin-block-end: 1.5rem;
    }
    & .form { gap: 1.25rem; }
    & .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: 0.375rem; }
  }

  /* Testimonials: two quotes on ink, the homepage's grammar — Jost
     Light, initials between two short gold rules */
  .cases {
    padding-block: clamp(4.5rem, 10vw, 8rem);
    & .scene-head .kicker { color: var(--gold-light); }
    & .scene-head h2 { color: var(--on-dark); }
    & .scene-head::after { background: var(--gold-light); }

    & .cases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
      gap: clamp(2.5rem, 6vw, 6rem);
      max-inline-size: 64rem;
      margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    }
    & figure { display: grid; justify-items: center; gap: 1.5rem; margin: 0; text-align: center; }
    & blockquote {
      margin: 0;
      font-family: var(--display);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.375rem, 2.1vw, 1.75rem);
      line-height: 1.45;
      color: var(--on-dark);
      text-wrap: pretty;
    }
    & figcaption {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: var(--track-widest);
      color: var(--gold-light);
      &::before, &::after { content: ""; inline-size: 2.5rem; block-size: 1px; background: var(--gold-light); }
    }
  }

  /* The investment slider, centred under its scene head */
  .invest {
    text-align: center;
    & > .container { display: grid; justify-items: center; max-inline-size: calc(52rem + var(--gutter) * 2); }
    & .invest-lead {
      max-inline-size: 50ch;
      margin-block-end: clamp(2.5rem, 5vw, 3.5rem);
      font-size: var(--fs-base);
      line-height: 1.75;
      color: var(--body);
    }
    & .range-value {
      font-family: "Foria", var(--display);
      font-synthesis: none;
    }
    & .invest-unit {
      margin-block: 0.5rem clamp(2rem, 4vw, 3rem);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: var(--track-widest);
      text-transform: uppercase;
      color: var(--gold);
    }
    & .range, & .range-scale { inline-size: 100%; }
    & .statement-line { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); font-size: clamp(1.375rem, 2.4vw, 2rem); }
    & .btn { margin-block-start: clamp(2.25rem, 4vw, 3rem); }
  }

  /* The day split, photo on the right; and its emphatic last paragraph */
  .day-split.-flip {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    & .day-photo { order: 2; }
    & .day-copy { padding-inline: var(--gutter) clamp(2.5rem, 6vw, 6rem); justify-self: end; }
  }
  .day-split .day-copy p.emph { color: var(--ink); }

  /* The offer in the closing card: what is included, as hairline lines */
  .glass .inclusions {
    inline-size: min(100%, 26rem);
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;

    & li {
      padding-block: 0.75rem;
      border-block-start: 1px solid color-mix(in srgb, var(--gold-light) 25%, transparent);
      font-size: var(--fs-sm);
      color: var(--on-dark-body);
    }
    & li:last-child { border-block-end: 1px solid color-mix(in srgb, var(--gold-light) 25%, transparent); }
  }

  /* --- the service pages on phones (atendimento first) -------------------------------------------------
     Its own design below 48rem, in the homepage's phone grammar: the photo is
     the screen and the words sit on it, the steps, the two care lists and the
     studio are snap strips, and the two actions are in the thumb's reach
     (.phone-bar). Desktop rules above stay untouched. */
  @media (width < 48rem) {
    /* the bar holds Primeira vez / Agendar: the header keeps the wordmark
       and the languages */
    body:has(.phone-bar) .site-header.-page .nav-bar nav[aria-label="Contato"] > .btn { display: none; }

    /* The header floats on the cover, as on the homepage: transparent, the
       wordmark and the language dropdown in on-dark colours over an ink fade */
    body:has(.hero.-cover) .site-header.-nav.-page {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 0;
      z-index: 5;
      background: transparent;
      border: 0;
      & .nav-bar .wordmark b { color: var(--gold-light); }
      & .nav-bar .wordmark small { color: var(--on-dark-body); }
      & .lang-menu summary { color: var(--gold-light); }
    }

    /* Cover: the photo is the first screen, the header on it; the headline,
       accent and lede sit on its lower part, over an ink gradient */
    .hero.-bleed.-cover {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto auto;

      & .hero-text, & .hero-copy { display: contents; }
      & .frame {
        grid-area: 1 / 1 / 4 / 2;
        aspect-ratio: auto;
        block-size: calc(100svh - var(--bar-h));
        min-block-size: 34rem;
        margin: 0;

        & img { object-position: 45% 30%; }
        &::before { /* the floating header reads whatever is behind it */
          content: "";
          position: absolute;
          inset: 0 0 auto;
          block-size: 12rem;
          z-index: 1;
          background: linear-gradient(to bottom,
            color-mix(in srgb, var(--ink) 72%, transparent) 0%,
            color-mix(in srgb, var(--ink) 40%, transparent) 45%,
            transparent 100%);
          pointer-events: none;
        }
        &::after {
          content: "";
          position: absolute;
          inset: auto 0 0;
          block-size: 70%;
          z-index: 1;
          background: linear-gradient(to top,
            color-mix(in srgb, var(--ink) 88%, transparent) 0%,
            color-mix(in srgb, var(--ink) 55%, transparent) 45%,
            transparent 100%);
          pointer-events: none;
        }
      }
      & h1, & .hero-lede {
        grid-column: 1;
        position: relative;
        z-index: 2;
        margin-inline: var(--edge);
      }
      & h1 { grid-row: 2; margin-block: 0 1rem; color: var(--on-dark); }
      & h1 .accent { color: var(--gold-light); }
      & .hero-lede {
        grid-row: 3;
        margin-block: 0 2.25rem;
        font-size: 0.9375rem;
        line-height: 1.6;
        color: var(--on-dark-body);
      }
      & .btn { display: none; } /* the bar holds the actions */
    }

    /* The strips: full-bleed rows of cards that snap on their centre with
       the same sliver of neighbour each side, dots where scroll markers
       exist (as the homepage's services) */
    .timeline, .care-grid, .studio-grid {
      --card: min(84vw, 22rem);
      --peek: calc((100vw - var(--card)) / 2);
      display: flex;
      gap: 0.75rem;
      max-inline-size: none;
      margin-inline: calc(-1 * var(--gutter));
      padding-inline: var(--peek);
      overflow: auto hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--peek);
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      &::-webkit-scrollbar { display: none; }

      & > * { flex: 0 0 var(--card); scroll-snap-align: center; }
    }
    @supports (selector(::scroll-marker-group)) {
      .timeline, .care-grid, .studio-grid {
        scroll-marker-group: after;
        &::scroll-marker-group { display: flex; justify-content: center; gap: 0.5625rem; margin-block-start: 1.5rem; }
        & > *::scroll-marker {
          content: "";
          inline-size: 5px;
          block-size: 5px;
          border-radius: var(--pill);
          background: var(--rule-strong);
          transition: inline-size 0.5s, background-color 0.5s;
        }
        & > *::scroll-marker:target-current { inline-size: 1.625rem; background: var(--gold); }
      }
      .care-grid > *::scroll-marker { background: color-mix(in srgb, var(--gold-light) 35%, transparent); }
      .care-grid > *::scroll-marker:target-current { background: var(--gold-light); }
    }

    .chapter { padding-block: 4rem; }

    /* Como funciona: four cards, numeral and text on one left edge */
    .timeline {
      margin-block-start: 2rem;
      & li {
        justify-items: start;
        text-align: start;
        padding: 2rem 1.5rem 2.25rem;
        background: var(--cream-alt);
      }
      & .num::after { margin-inline: 0; }
      & h3, & p { max-inline-size: none; }
    }

    /* O que esperar: the portrait is the screen, kicker and title on it; the
       copy follows on cream */
    .day-split {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto auto;
      background: var(--cream);

      & .day-copy { display: contents; }
      & .day-photo {
        grid-area: 1 / 1 / 4 / 2;
        aspect-ratio: auto;
        min-block-size: calc(100svh - var(--bar-h));
        &::after {
          content: "";
          position: absolute;
          inset: auto 0 0;
          block-size: 55%;
          background: linear-gradient(to top,
            color-mix(in srgb, var(--ink) 85%, transparent) 0%,
            transparent 100%);
        }
      }
      & .kicker, & h2 { grid-column: 1; position: relative; z-index: 1; margin-inline: var(--edge); }
      & .kicker { grid-row: 2; color: var(--gold-light); }
      & h2 { grid-row: 3; color: var(--on-dark); margin-block-end: 2rem; }
      & h2::after { background: var(--gold-light); margin-block: 1.25rem 0; }
      & p, & .facts { grid-column: 1; margin-inline: var(--gutter); }
      & p:first-of-type { margin-block-start: 2.5rem; }
      /* the facts as hairline rows: label left, value right */
      & .facts {
        display: grid;
        grid-template-columns: none;
        grid-template-rows: none;
        margin-block: 2rem 4rem;
        padding: 0;
        border: 0;

        & > div {
          display: flex;
          grid-row: auto;
          align-items: baseline;
          justify-content: space-between;
          gap: 1rem;
          padding-block: 1rem;
          border-block-start: 1px solid var(--rule);
        }
        & > div:last-child { border-block-end: 1px solid var(--rule); }
        & dd { margin: 0; text-align: end; }
      }
    }
    /* -over (every service page's portrait chapter): the whole copy on the
       portrait, at its foot, under a deeper fade, so the photo is not a
       screen of its own before the text. The photo covers the section and
       the copy flows over it, so the section grows with the copy. */
    .day-split.-over {
      grid-template-rows: none;
      position: relative;
      min-block-size: calc(100svh - var(--bar-h));

      & .day-photo {
        position: absolute;
        inset: 0;
        grid-area: auto;
        min-block-size: 0;
        &::after {
          block-size: 100%;
          background: linear-gradient(to top,
            color-mix(in srgb, var(--ink) 92%, transparent) 0%,
            color-mix(in srgb, var(--ink) 80%, transparent) 50%,
            color-mix(in srgb, var(--ink) 15%, transparent) 100%);
        }
      }
      & .day-copy {
        display: block;
        position: relative;
        z-index: 1;
        align-self: end;
        padding: 6rem 0 3rem;
      }
      & h2 { margin-block-end: 1.5rem; }
      & p, & .facts { margin-inline: var(--edge); }
      & p { color: var(--on-dark-body); }
      & p:first-of-type { margin-block-start: 0; }
      & p.emph { color: var(--on-dark); }
      & .facts {
        margin-block: 2rem 0;
        & > div { border-color: var(--dark-rule); }
        & dt { color: var(--gold-light); }
        & dd { color: var(--on-dark); }
      }
    }

    /* Antes e depois: two swipeable panels on the dimmed studio */
    .care {
      padding-block: 4.5rem 4rem;
      /* restated: the desktop .care .care-grid grid outranks the strip rule */
      & .care-grid { display: flex; max-inline-size: none; margin: 2rem calc(-1 * var(--gutter)) 0; gap: 0.75rem; }
      & .care-grid > div {
        padding: 1.75rem 1.25rem 0.5rem;
        border: 1px solid color-mix(in srgb, var(--gold-light) 30%, transparent);
        background: color-mix(in srgb, var(--ink) 42%, transparent);
        backdrop-filter: blur(14px);
      }
      & .care-list li:last-child { border-block-end: 0; }
    }

    /* O estúdio: the photos as story cards (picture is display: contents, so
       the img is the strip's item) */
    .studio-grid {
      margin-block-start: 2rem;
      & img, & > picture:first-child img { flex: 0 0 var(--card); scroll-snap-align: center; grid-column: auto; aspect-ratio: 3 / 4; }
    }
    @supports (selector(::scroll-marker-group)) {
      .studio-grid img::scroll-marker { content: ""; inline-size: 5px; block-size: 5px; border-radius: var(--pill); background: var(--rule-strong); transition: inline-size 0.5s, background-color 0.5s; }
      .studio-grid img::scroll-marker:target-current { inline-size: 1.625rem; background: var(--gold); }
    }

    .closing {
      padding-block: 4rem;
      /* the title fits the card at phone widths, and the two buttons stack:
         their labels run long in some pages and languages */
      & .glass h3 { font-size: clamp(1.625rem, 7.4vw, 2.125rem); line-height: 1.1; text-wrap: balance; }
      & .glass .actions { flex-direction: column; flex-wrap: nowrap; align-self: stretch; inline-size: 100%; }
      & .glass .btn { flex: none; justify-content: center; white-space: normal; }
    }

    /* the other service pages' chapters */
    body.-service .phone-bar .btn { padding-inline: 0.75rem; letter-spacing: 0.14em; white-space: nowrap; } /* one line in every language */
    .hero.-bleed.-cover h1.-long { font-size: clamp(1.875rem, 8.4vw, 2.5rem); }
    .day-split.-flip {
      grid-template-columns: minmax(0, 1fr);
      & .day-photo { order: 0; }
      & .day-copy { justify-self: stretch; }
    }
    .terms > div, .terms.-faq > div { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
    .statement { padding-block: 4rem; }
    .statement.photo-scene { padding-block: 5rem; }
    .ask, .cases { padding-block: 4rem; }
  }

  /* --- scenes -------------------------------------------------------------
     Homepage sections own the viewport like the hero does. Proximity, not
     mandatory: a scroll that ends near a boundary settles onto it; one that
     stops mid-section stays. Only where a section can actually fit — desktop
     widths and heights — and never under reduced motion. Sections not marked
     .scene (footer) scroll freely. */
  /* Scenes keep their tight rhythm at every viewport height; only filling
     the viewport and snapping wait for room (the media block below). */
  .scene { padding-block: clamp(2.5rem, 6svh, 5rem); }
  .scene.-bleed {
    padding-block: clamp(2rem, 4svh, 3rem);

    /* Head → photos → note share one rhythm at every height */
    & > .container {
      max-inline-size: none;
      padding-inline: clamp(1.5rem, 6.4vw, 6rem);
      display: grid;
      grid-template-rows: auto auto auto;
      gap: clamp(2.375rem, 4svh, 2.75rem);
    }
    & .scene-head { margin-block-end: 0; }
  }

  @media (min-width: 48rem) and (min-height: 820px) {
    html { scroll-snap-type: y proximity; }

    .scene {
      min-block-size: 100svh;
      align-content: center;
      scroll-snap-align: start;
      padding-block: clamp(2.5rem, 6svh, 5rem);
    }
    .section.scene { display: grid; }

    /* Cinematic scenes: content spans the viewport (gutter only, no 1180px
       container) and the imagery row is 1fr — it takes every pixel of height
       the head and captions leave. Photo aspect therefore follows the
       viewport, as in the reference, instead of being fixed at 3:4. */
    .scene.-bleed {
      align-content: center; /* the composition sits in the middle; spare height splits above and below */
      padding-block: clamp(2rem, 4svh, 3rem);

      /* Rule → photos matches title → rule (24px margin + the title's
         descent), measured at 39–43px across 900–1080 tall viewports; the
         grid and its gap are set in the base .scene.-bleed rule. */
      /* Subgrid so the four cards share rows: every photo ends on the same
         line and the captions stay ragged, not the other way round. */
      /* The parent's row-gap separates card rows (2-column mode); each card's
         own row-gap: 0 overrides it inside the subgrid, keeping photo, title
         and description tight. */
      & .services { min-block-size: 0; grid-template-rows: auto auto auto; row-gap: clamp(2rem, 3vw, 3rem); }
      & .service {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        row-gap: 0;
        min-block-size: 0;

        /* 3:4, shrinking (wider, never narrower) on short viewports. The
           ceiling is the viewport minus everything else in the scene — head,
           captions, gaps, padding — which measures 419–449px at the widths
           where the ceiling can bind (wide columns, short captions). No
           container query: container-type here would silently drop the
           subgrid. */
        & .art {
          block-size: auto;
          min-block-size: 0;
          max-block-size: calc(100svh - 27.5rem);
          aspect-ratio: 3 / 4;
        }
        & h3 { margin-block-start: 1rem; }
      }
    }

    /* The about scene needs the row to fill the section so the photo can
       bleed to the fold and the copy centre on it — .scene's top-alignment
       and padding would otherwise win on specificity order. */
    .scene.about { align-content: stretch; padding: 0; }

    /* Testimonials: the stage owns the first viewport; the echoes follow
       below it inside the same dark section. */
    .scene.testimonials {
      display: block;
      padding: 0;
      & .stage { min-block-size: 100svh; }
    }

    /* Two rows of photos cannot share one viewport: below the 4-column
       width the scene simply grows to its content. */
    @media (width < 68rem) {
      .scene.-bleed { min-block-size: auto; }
      .scene.-bleed .service .art { max-block-size: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-snap-type: none; }
    }
  }

  .frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--placeholder);

    & img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    &.-portrait { aspect-ratio: 4 / 5; }
    &.-tall { aspect-ratio: 3 / 4; }
  }


  /* --- cards ------------------------------------------------------------- */
  .card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color 0.4s;

    &:hover { border-color: var(--gold); }

    & h3 { margin-block-end: 0; }
    & :where(p:not(.eyebrow)) { font-size: 1rem; line-height: 1.6; color: var(--body-soft); }
    & .link-arrow { margin-block-start: auto; padding-block-start: 0.375rem; font-size: 0.75rem; }
  }

  .marker {
    font-family: var(--display);
    font-size: 0.9375rem;
    letter-spacing: 0.18em;
    color: var(--gold);
  }

  /* --- rule-separated rows (the site's workhorse pattern) ---------------- */
  .rows {
    --row-y: clamp(1.625rem, 3vw, 2.125rem); /* 26 / 34 — dt/dd and FAQ rows */
    display: grid;

    &.-quotes  { --row-y: 1.375rem; }                        /* 22 — italic quote lists */
    &.-tight   { --row-y: 1rem; }                            /* 16 — sem/com columns */
    &.-compact { --row-y: clamp(1.25rem, 2.6vw, 1.75rem); }  /* 20 / 28 — terms */

    & > * {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
      gap: clamp(0.875rem, 3vw, 3.5rem);
      align-items: baseline;
      padding-block: var(--row-y);
      border-block-start: 1px solid var(--rule);
    }
    & > *:last-child { border-block-end: 1px solid var(--rule); }

    & dt, & h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3-lg); }
    & :where(dd, p) { font-size: var(--fs-base); line-height: 1.75; color: var(--body); }

    .-dark & > * { border-color: var(--dark-rule); }
  }

  /* Label / value variant — small tracked label, display value */
  .rows.-labelled {
    & dt {
      font-family: var(--sans);
      font-size: 0.8125rem;
      letter-spacing: var(--track-wide);
      text-transform: uppercase;
      color: var(--gold);
    }
    & dd {
      font-family: var(--display);
      font-size: clamp(1.375rem, 2.5vw, 1.75rem);
      line-height: 1.4;
      color: var(--ink);
    }
  }

  .rows.-info {
    & > * { display: grid; grid-template-columns: 1fr; gap: 0.625rem; padding-block: 0 1.25rem; border-block-start: 0; }
    & > * + * { padding-block-start: 0; }
    & > *:not(:last-child) { border-block-end: 1px solid var(--rule); }
    & > *:last-child { border-block-end: 0; }
    & dt { font-size: 0.6875rem; letter-spacing: var(--track-widest); text-transform: uppercase; color: var(--gold); }
    & dd { font-size: var(--fs-lead); line-height: 1.6; color: var(--body-soft); }
    .-dark & > * { border-color: var(--dark-rule); }
    .-dark & dt { color: var(--gold-light); }
    .-dark & dd { color: var(--on-dark-body); }
  }

  /* Numbered steps */
  .steps {
    --row-y: clamp(1.625rem, 3.4vw, 2.5rem); /* 26 / 40 */
    display: grid;
    counter-reset: step;

    & > li {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
      gap: clamp(0.875rem, 3vw, 3.5rem);
      padding-block: var(--row-y);
      border-block-start: 1px solid var(--rule);
      counter-increment: step;
    }
    & > li:last-child { border-block-end: 1px solid var(--rule); }

    & h3 { font-size: var(--fs-h3-lg); }

    & h3::before {
      content: counter(step, decimal-leading-zero);
      display: inline-block;
      margin-inline-end: 1.125rem;
      font-size: 1.0625rem;
      letter-spacing: var(--track-tight);
      color: var(--gold);
    }
    & :where(p) { font-size: var(--fs-base); line-height: 1.75; color: var(--body); }
  }

  /* Numbered step cards (top-rule variant used on service pages) */
  .step-cards > * {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block-start: 1.375rem;
    border-block-start: 1px solid var(--rule);

    & :where(p) { font-size: 1rem; line-height: 1.65; color: var(--body-soft); }
  }

  /* Spec panel — label left, value right, hairline between */
  .spec {
    align-self: start;
    padding: clamp(1.625rem, 3vw, 2.5rem);
    border-radius: var(--radius);
    background: var(--surface);

    & > div {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      padding-block-end: 0.875rem;
      border-block-end: 1px solid var(--rule-soft);
    }
    & > div + div { margin-block-start: 1rem; }

    & dt { font-size: 0.9375rem; color: var(--body-soft); }
    & dd {
      font-family: var(--display);
      font-size: clamp(1.1875rem, 2vw, 1.4375rem);
      color: var(--ink);
      text-align: end;
    }
  }

  /* --- bullet lists ------------------------------------------------------ */
  .bullets {
    display: grid;
    gap: 1rem;

    & li {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.75rem;
      font-size: var(--fs-sm);
      line-height: 1.65;
      color: var(--body-soft);
    }
    & li::before {
      content: "";
      inline-size: 5px;
      block-size: 5px;
      margin-block-start: 0.5625rem;
      border-radius: var(--pill);
      background: var(--gold);
    }
  }

  /* --- quotes ------------------------------------------------------------ */
  .pull {
    max-inline-size: 34ch;
    margin-inline: auto;
    text-align: center;
    font-family: var(--display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.75rem, 5vw, 3.75rem);
    line-height: 1.24;
    text-wrap: balance;
  }

  .quote {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    block-size: 100%;
    padding: clamp(1.75rem, 3.4vw, 2.75rem);
    border-radius: var(--radius);
    background: var(--surface);

    &::before {
      content: "\201C";
      font-family: var(--display);
      font-size: 2.75rem;
      line-height: 0.4;
      color: var(--gold-quote);
    }
    & blockquote {
      font-family: var(--display);
      font-weight: 300;
      font-size: clamp(1.125rem, 2vw, 1.3125rem);
      line-height: 1.6;
      color: var(--ink-strong);
    }
    body:not(.-wide) & { gap: 1.375rem; }
    body:not(.-wide) & blockquote { font-size: clamp(1.25rem, 2.1vw, 1.5rem); line-height: 1.55; }

    & figcaption {
      margin-block-start: auto;
      font-size: 0.6875rem;
      letter-spacing: var(--track-widest);
      text-transform: uppercase;
      color: var(--gold);
    }
  }

  /* --- quotes in the body face --------------------------------------------
     Every quote — the homepage testimonials (stage, echoes, the popover),
     the service pages' voices, statements, doubts and cases — is Jost,
     upright (Jost has no italic: a slant would be synthesised): Light for
     the large ones, Regular where the size is small. The opening marks stay
     in the display face, as ornament. Declared after the rules that size
     them, at their specificity, so only the face changes. */
  :is(.quote-slide, .echoes, .quote, .cases) blockquote, .voices li, .compare .-without li, .statement-line {
    font-family: var(--sans);
    font-style: normal;
    letter-spacing: 0;
  }
  :is(.quote-slide, .cases) blockquote, .statement-line, .voices li { font-weight: 300; }
  /* Jost runs wider than the italic it replaced: the stage quote one step
     smaller keeps the longest of the four inside the 900px stage */
  .quote-slide blockquote { font-size: clamp(1.5rem, 3vw, 2.75rem); }
  :is(.echoes, .quote) blockquote, .compare .-without li { font-weight: 400; }
  .quote-slide blockquote::before { font-family: var(--display); }

  /* --- carousel: scroll-snap, upgraded to CSS carousel where supported --- */
  .scroller {
    display: flex;
    gap: clamp(0.75rem, 1.8vw, 1.25rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;

    &::-webkit-scrollbar { display: none; }

    & > * {
      flex: 0 0 clamp(17.5rem, 32%, 25rem);
      scroll-snap-align: start;
    }

    &.-photos > * { flex-basis: clamp(14.375rem, 26vw, 20.625rem); }

    /* Carousel cards stretch to the longest quote; six lines keeps the scene
       inside a 900px viewport. The full text is in the "ver mais" popover. */
    & .quote blockquote {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
      line-clamp: 6;
      overflow: hidden;
    }
  }

  /* Progressive enhancement: CSS-generated dots, zero JS. Chromium 135+
     today; everywhere else the scroller is simply swipeable, which is the
     behaviour most people reach for anyway. */
  @supports (selector(::scroll-marker-group)) {
    .scroller {
      scroll-marker-group: after;

      &::scroll-marker-group {
        display: flex;
        justify-content: center;
        gap: 0.5625rem;
        margin-block-start: clamp(1.625rem, 3.5vw, 2.5rem);
      }

      & > *::scroll-marker {
        content: "";
        inline-size: 5px;
        block-size: 5px;
        border: 0;
        border-radius: var(--pill);
        background: var(--rule-strong);
        cursor: pointer;
        transition: inline-size 0.5s, background-color 0.5s;
      }

      & > *::scroll-marker:target-current {
        inline-size: 1.625rem;
        background: var(--gold);
      }
    }
  }

  /* --- popover (all testimonials) ---------------------------------------- */
  [popover] {
    inset: 0;
    inline-size: min(70rem, 100% - 2rem);
    max-block-size: 90svh;
    margin: auto;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--cream);
    color: var(--ink);
    overflow-y: auto;

    &::backdrop {
      background: rgb(20 17 15 / 0.55);
      backdrop-filter: blur(6px);
    }
  }
  [popover].-form { inline-size: min(38rem, 100% - 2rem); } /* one column of fields, not the quotes' masonry */

  /* The testimonial form rises in as the anamnese's steps do (form-in's
     12px and curve), the backdrop fading in behind it, and leaves the same
     way: display and overlay stay discrete until the fade has run. */
  @media (prefers-reduced-motion: no-preference) {
    [popover].-form {
      transition:
        opacity 0.5s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        display 0.7s allow-discrete, overlay 0.7s allow-discrete;

      &:not(:popover-open) { opacity: 0; translate: 0 0.75rem; }
      @starting-style { &:popover-open { opacity: 0; translate: 0 0.75rem; } }

      &::backdrop { transition: opacity 0.5s ease, display 0.5s allow-discrete, overlay 0.5s allow-discrete; }
      &:not(:popover-open)::backdrop { opacity: 0; }
      @starting-style { &:popover-open::backdrop { opacity: 0; } }
    }
  }

  .popover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
  }

  .close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 2.875rem;
    block-size: 2.875rem;
    border: 1px solid var(--rule);
    border-radius: var(--pill);
    background: transparent;
    color: var(--muted-interactive);
    font-size: 1.0625rem;
    cursor: pointer;

    &:hover { border-color: var(--ink); color: var(--ink); }
  }

  .masonry {
    columns: 20.625rem;
    column-gap: clamp(0.875rem, 2vw, 1.375rem);

    & > * {
      margin-block-end: clamp(0.875rem, 2vw, 1.375rem);
      break-inside: avoid;
    }
  }

  /* --- gallery ----------------------------------------------------------- */
  .gallery {
    display: grid;
    gap: clamp(0.75rem, 1.8vw, 1.25rem);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));

    & img {
      aspect-ratio: 4 / 5;
      inline-size: 100%;
      block-size: auto; /* the height attribute would otherwise win over aspect-ratio */
      object-fit: cover;
      border-radius: var(--radius);
      background: var(--placeholder);
      /* Unifies a set of photos shot in different light */
      filter: saturate(0.62) sepia(0.16) contrast(1.03) brightness(1.02);
    }
  }

  /* --- forms ------------------------------------------------------------- */
  .field {
    display: grid;
    gap: 0.625rem;
    line-height: normal;

    &:has(> .visually-hidden) { gap: 0; }

    & > span {
      font-size: 0.8125rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
    }
  }

  :is(input, select, textarea) {
    inline-size: 100%;
    min-block-size: 3.125rem;
    line-height: normal;
    padding: 0.8125rem 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-size: 1rem;

    &:focus-visible { border-color: var(--gold); outline-offset: 0; }
  }

  body:not(.-wide) :is(input, select, textarea) {
    min-block-size: 3.5rem;
    padding: 1rem 1.25rem;
    font-size: 1.0625rem;
  }

  textarea {
    min-block-size: 6.25rem; /* rows=3 */
    line-height: 1.55;
    resize: vertical;
    /* Grows with content — but the empty state must still be `rows` tall,
       otherwise every form sits shorter than it was designed. */
    field-sizing: content;

    &[rows="2"] { min-block-size: 4.5rem; }
    &[rows="4"] { min-block-size: 8.5rem; }
  }

  input[type="checkbox"] {
    inline-size: 1.25rem;
    min-block-size: 1.25rem;
    block-size: 1.25rem;
    accent-color: var(--gold);
  }

  .form {
    display: grid;
    gap: 1.25rem;
    align-content: start;

    .-dark & {
      & :is(input, select, textarea) {
        border-color: var(--dark-rule);
        background: var(--dark-inset);
        color: var(--on-dark);
      }
      & .field > span { color: var(--gold-light); }
    }
  }

  .form-row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(9.375rem, 100%), 1fr));
  }

  .note {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted);
  }

  .callout {
    padding: 1.125rem 1.375rem;
    border-inline-start: 2px solid var(--gold);
    background: var(--surface-warm);
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--body);

    .-dark & {
      border-color: var(--gold-light);
      background: var(--dark-inset);
      color: var(--on-dark-callout);
    }
  }

  .box {
    padding: 1rem 1.125rem;
    border-radius: var(--radius);
    background: var(--surface-warm);

    & .eyebrow { margin-block-end: 0.5rem; }
    & :where(p:not(.eyebrow)) { font-size: 0.9375rem; line-height: 1.6; color: var(--body); }
  }

  .confirm {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.1875rem;
    line-height: 1.5;
    color: var(--gold);

    .-dark & { color: var(--gold-light); }

    /* Shown by the form script; hidden until then. Never set `display` on
       these inline — an inline style outranks this rule and the confirmation
       would be visible before the form was ever submitted. */
    display: none;
    gap: 0.75rem;

    &.is-on { display: grid; }
  }

  /* --- questionnaire ----------------------------------------------------- */
  .q {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0 0 clamp(1rem, 2vw, 1.375rem);
    border: 0;
    border-block-end: 1px solid var(--rule);

    & > .label, & > legend, & > .grow > .label {
      font-size: var(--fs-sm);
      line-height: 1.55;
      color: var(--ink-strong);
    }
    /* A legend is not a grid item in every engine — float it out of flow. */
    & > legend { float: inline-start; inline-size: 100%; margin-block-end: 0.625rem; }
    & > legend + * { clear: both; }
  }

  .req { color: var(--gold); }

  .choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    & label { cursor: pointer; }

    & input {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      min-block-size: 0;
      padding: 0;
      opacity: 0;
    }

    & span {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--tap);
      padding: 0.6875rem 1.25rem;
      border: 1px solid var(--rule);
      border-radius: var(--pill);
      background: var(--surface);
      color: var(--body);
      font-size: 0.875rem;
      line-height: normal;
      letter-spacing: 0.04em;
      transition: all 0.25s;
    }

    & input:checked + span {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--cream);
    }
    & input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
    & label:hover span { border-color: var(--gold); }
  }

  .lang-switch {
    display: flex;
    gap: 0.375rem;
    margin: 0;
    padding: 0;

    & input { position: absolute; inline-size: 1px; block-size: 1px; min-block-size: 0; opacity: 0; }
    & span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-inline-size: 3rem;
      min-block-size: var(--tap);
      padding: 0.625rem 0.875rem;
      border: 1px solid var(--rule-strong);
      border-radius: var(--pill);
      color: var(--muted-interactive);
      font-size: 0.6875rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.25s;
    }
    & input:checked + span, & [aria-current="page"] > span { border-color: var(--ink); background: var(--ink); color: var(--cream); }
    & input:focus-visible + span, & a:focus-visible > span { outline: 2px solid var(--gold); outline-offset: 3px; }
    & a:focus-visible { outline: none; } /* the pill shows it */
  }

  .block {
    display: grid;
    gap: clamp(1.25rem, 2.6vw, 1.875rem);
    margin: 0;
    padding: 0;
    border: 0;

    & > legend {
      float: inline-start;
      inline-size: 100%;
      margin-block-end: clamp(1.25rem, 2.6vw, 1.875rem);
      font-family: var(--display);
      font-weight: 300;
      font-size: clamp(1.5rem, 3.2vw, 2.125rem);
      line-height: 1.15;
    }
    & > legend + * { clear: both; }
  }

  .panel {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  /* The form's intro screen: the one place it explains itself */
  /* The form's header is the homepage's without the pills: the wordmark
     alone, centred, and the progress line along its bottom edge */
  .site-header.-nav.-form {
    border-block-end: 0;
    & .nav-bar { grid-template-columns: 1fr; justify-items: center; }
    &:has(.progress-line[hidden]) { border-block-end: 1px solid var(--rule-soft); }
  }
  .progress-line { block-size: 3px; background: var(--rule-soft); & i { display: block; block-size: 100%; inline-size: 0; background: linear-gradient(90deg, var(--gold-light), var(--gold)); transition: inline-size 0.6s var(--ease); } }
  .intro {
    padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
    /* The homepage's heading grammar: Charpentier kicker, Foria caps title */
    & .kicker {
      display: block;
      margin-block-end: 0.5rem;
      font-family: "Charpentier", var(--display);
      font-style: italic;
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      line-height: 1;
      color: var(--gold);
    }
    & h1 {
      margin-block-end: 1.25rem;
      font-family: "Foria", var(--display);
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(2rem, 5.6vw, 3.25rem);
      line-height: 1;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-wrap: balance;
    }
    & .lead { margin-block-end: 2rem; }
    & .facts { /* three tiles */
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin: 0 0 1.5rem;
      @media (width < 36rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); & > div:last-child { grid-column: 1 / -1; } }
      border: 1px solid var(--rule-soft);
      border-radius: var(--radius-lg);
      background: var(--rule-soft);
      overflow: hidden;
      & > div { display: grid; gap: 0.375rem; padding: 1rem 1.125rem; background: var(--surface); }
      & dt { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
      & dd { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-strong); }
    }
    & .overview { /* the six steps and their weight */
      margin: 0 0 2rem;
      padding: 0;
      list-style: none;
      border-block-start: 1px solid var(--rule-soft);
      & li { display: flex; align-items: center; gap: 1rem; padding-block: 0.75rem; border-block-end: 1px solid var(--rule-soft); font-size: 0.9375rem; color: var(--ink-strong); }
      & .n { min-inline-size: 1.5rem; font-family: "Foria", var(--display); font-synthesis: none; font-size: 1rem; letter-spacing: 0.04em; color: var(--gold); }
      & small { margin-inline-start: auto; font-size: 0.75rem; color: var(--muted); }
    }
    & .intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
    & .intro-actions .note { flex: 1 1 16rem; max-inline-size: 22rem; margin: 0; }
    & .intro-actions .lang-switch { flex-basis: 100%; }
    & .lang-switch legend { float: inline-start; margin-inline-end: 0.625rem; font-size: 0.6875rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); line-height: var(--tap); }
  }

  /* The anamnese runs denser than the site's forms — the design file's
     density: 44px controls, 14px labels, 38px pills, hairline checklist
     rows, fields 14px apart instead of hairline-separated blocks. */
  #anamnese {
    & :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) {
      min-block-size: 2.75rem;
      padding: 0.625rem 0.875rem;
      font-size: 1rem; /* 16px: iOS does not zoom */
    }
    & textarea { min-block-size: 5rem; &[rows="4"] { min-block-size: 6.5rem; } }
    & .q { gap: 0.4375rem; padding: 0; border: 0; }
    & .q > .label, & .q > legend, & .q > .grow > .label { font-size: 0.875rem; line-height: 1.45; }
    & .q > legend { margin-block-end: 0.4375rem; }
    & .block { gap: 0.875rem 1.25rem; }
    & .block > legend, & .panel > legend {
      margin-block-end: 0.75rem;
      font-family: "Foria", var(--display);
      font-weight: 400;
      font-synthesis: none;
      font-size: clamp(1.375rem, 3.2vw, 1.75rem);
      line-height: 1.1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    & .panel > legend { float: inline-start; inline-size: 100%; padding: 0; margin-block-end: 0.25rem; } /* inside the panel, not on its border */
    & .panel > legend + * { clear: both; }
    & .choices { gap: 0.375rem; }
    & .choices span { min-block-size: 2.375rem; padding: 0.5rem 1rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
    & .checklist {
      gap: 0 1.5rem;
      border-block-start: 1px solid var(--rule-soft);
      & label { min-block-size: 0; padding: 0.5rem 0; border: 0; border-block-end: 1px solid var(--rule-soft); border-radius: 0; background: none; font-size: 0.875rem; }
      & label:has(input:checked) { background: none; color: var(--ink); }
      & input { inline-size: 1rem; block-size: 1rem; min-block-size: 1rem; }
      & .group { grid-column: 1 / -1; margin-block: 1rem 0.125rem; font-size: 0.625rem; font-weight: 600; letter-spacing: var(--track-widest); text-transform: uppercase; color: var(--gold); }
      & .group:first-child { margin-block-start: 0.5rem; }
    }
    & .stack > div { justify-content: space-between; }
    & .btn { min-block-size: 2.875rem; padding-inline: 1.5rem; font-size: 0.6875rem; }

    /* Voltar / Continuar (and the send row on the last step) as a bar that
       sticks to the bottom of the screen while the step is taller than it,
       and settles into its place at the end — sticky, not fixed, so the
       keyboard and the iOS bounce treat it like content. Stays inside the
       form's column; the error line lives in it. */
    & :is(.step-nav, .stack) {
      position: sticky;
      inset-block-end: 0;
      z-index: 5;
      padding: 0.875rem 0 max(0.875rem, env(safe-area-inset-bottom));
      background: var(--cream);
      border-block-start: 1px solid var(--rule-soft);
      &::before { /* the content dissolves into the bar rather than being cut by it */
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: 100%;
        block-size: 1.75rem;
        background: linear-gradient(to top, var(--cream), transparent);
        pointer-events: none;
      }
    }
    & .step-nav { padding-block-start: 0.875rem; }
    & .field > span { font-size: 0.75rem; }
    & .panel { gap: 0.875rem; padding: 1.25rem 1.375rem; & .bullets { gap: 0.375rem; font-size: 0.875rem; } & .small { font-size: 0.875rem; } }
  }
  #anamnese .form-progress { gap: 0.5rem; margin-block-end: -0.5rem; }

  /* The form itself: its display lives here, not inline, so the `hidden`
     attribute (set while the intro screen shows) can actually hide it */
  #anamnese { max-inline-size: 45rem; display: grid; gap: clamp(2.25rem, 5vw, 3.75rem); }
  #anamnese[hidden] { display: none; }

  /* Steps: one block at a time once the script runs, a progress line above */
  #anamnese.is-stepped .step:not(.is-current) { display: none; }

  /* Transitions: the intro's pieces arrive in order on load; each step, and
     the form itself after "Começar", rises in as it appears (display: none →
     shown restarts the animation, so Voltar plays it too) */
  /* Softer than the site's reveal: less travel, longer, an ease-out that
     lands without a bump */
  @keyframes form-in {
    from { opacity: 0; translate: 0 0.75rem; }
    to { opacity: 1; translate: 0 0; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .intro > .container > * { animation: form-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .intro > .container > :nth-child(2) { animation-delay: 0.08s; }
    .intro > .container > :nth-child(3) { animation-delay: 0.16s; }
    .intro > .container > :nth-child(4) { animation-delay: 0.24s; }
    .intro > .container > :nth-child(5) { animation-delay: 0.34s; }
    .intro > .container > :nth-child(6) { animation-delay: 0.44s; }
    #anamnese.is-stepped .step.is-current { animation: form-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
    #anamnese.is-stepped .form-progress { animation: form-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
  }
  /* The last step is a plain wrapper: give it the form's own rhythm */
  div.step { display: grid; gap: clamp(2.25rem, 5vw, 3.75rem); }

  .form-progress {
    display: grid;
    gap: 0.75rem;

    & .progress-label {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.5rem 1rem;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: var(--track);
      text-transform: uppercase;
      color: var(--gold);
    }
    & .note { margin: 0; }
  }

  .step-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--rule-soft);
    & .error { flex-basis: 100%; }
  }

  /* Sliders: the track, then the value in the display face */
  .range-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-block-size: var(--tap);
    & input[type="range"] { min-block-size: 0; padding: 0; border: 0; background: none; accent-color: var(--gold); cursor: pointer; }
    & output { min-inline-size: 4.5rem; text-align: end; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
  }
  .signature-input { font-family: "Charpentier", var(--display); font-style: italic; font-synthesis: none; font-size: 1.375rem; }

  /* A follow-up reads as a reply to the answer above it: indented behind a
     gold rule */
  .q[data-follows] > .grow { padding-inline-start: 1rem; border-inline-start: 2px solid var(--gold); }
  /* consecutive replies share one rule: close the block gap, keep the spacing inside */
  .q[data-follows] + .q[data-follows] { margin-block-start: -0.875rem; }
  .q[data-follows] + .q[data-follows] > .grow { padding-block-start: 0.75rem; }

  /* Wide screens: short fields side by side, everything else full width;
     a follow-up sits to the right of the question it follows */
  @media (width >= 48rem) {
    #anamnese .block {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 1.5rem;
      & > legend, & > .q:has(textarea, .choices, .checklist, .range-row), & > .step-nav, & > .note, & > p, & > label:not(.q) { grid-column: 1 / -1; }
      & > .q:has(+ .q[data-follows]) { grid-column: 1; align-self: start; } /* the question starts its row… */
      & > .q[data-follows][data-follows] { grid-column: 2; align-self: start; } /* …and the reply sits beside it (doubled: a reply that is itself a trigger must not start a row) */
      & > .q:has(+ .q[data-follows] + .q[data-follows]) { grid-row: span 2; } /* two replies: the question spans both rows… */
      & > .q[data-follows] + .q[data-follows] { grid-column: 2; }              /* …and they stack beside it */
    }
    .q[data-follows] > .grow { padding-inline-start: 1.25rem; }
  }

  /* The details box opens like a drawer: it stays in the grid, collapsed to
     a 0fr row while `hidden`, and grows to its content (1fr) when a
     condition is ticked — height, opacity and the gap it occupies all
     ease, so nothing pops. Its contents sit in one child (.grow) because
     the fr trick needs a single item to clip. */
  .q:is([data-details], [data-follows]) {
    display: grid;
    grid-template-rows: 1fr;
    gap: 0;
    transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease 0.1s, margin 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    & > .grow { display: grid; gap: 0.4375rem; min-block-size: 0; overflow: hidden; }
    &[hidden] {
      grid-template-rows: 0fr;
      opacity: 0;
      visibility: hidden;
      margin-block-start: -0.875rem; /* give back the block's gap while closed */
      transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, margin 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.5s;
    }
  }

  /* Health checklist: statements to tick instead of thirty yes/no pairs */
  .checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 0.5rem;

    & label {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-block-size: var(--tap);
      padding: 0.625rem 0.875rem;
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      background: var(--surface);
      font-size: 0.9375rem;
      line-height: 1.35;
      color: var(--body);
      cursor: pointer;
      transition: border-color 0.25s, background 0.25s;

      &:hover { border-color: var(--gold); }
      &:has(input:checked) { border-color: var(--ink); background: var(--surface-warm); color: var(--ink); }
      &:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
    }
    & input { flex: 0 0 auto; }
    & .-none { grid-column: 1 / -1; }
  }

  .error:not(.is-on) { display: none; }
  .error { color: #9a5a4a; font-size: var(--fs-sm); line-height: 1.6; }

  /* --- range slider ------------------------------------------------------ */
  .range {
    inline-size: 100%;
    max-inline-size: 38.75rem;
    min-block-size: auto;
    block-size: 2px;
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: var(--pill);
    background: linear-gradient(90deg,
      var(--gold) 0 var(--fill, 33%),
      var(--rule) var(--fill, 33%) 100%);
    appearance: none;
    cursor: pointer;

    &::-webkit-slider-thumb {
      appearance: none;
      inline-size: 1.625rem;
      block-size: 1.625rem;
      border: 3px solid var(--cream);
      border-radius: var(--pill);
      background: var(--ink);
      box-shadow: 0 2px 10px rgb(20 17 15 / 0.2);
      cursor: pointer;
    }
    &::-moz-range-thumb {
      inline-size: 1.375rem;
      block-size: 1.375rem;
      border: 3px solid var(--cream);
      border-radius: var(--pill);
      background: var(--ink);
      cursor: pointer;
    }
  }

  .range-value {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(2.875rem, 7vw, 5.125rem);
    line-height: 1;
  }

  .range-scale {
    display: flex;
    justify-content: space-between;
    max-inline-size: 38.75rem;
    margin: 1.125rem auto 0;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--muted);
  }

  /* --- scroll reveal (zero JS, degrades to visible) ---------------------- */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 26%;
      }

      /* Slow drift on the photo backdrops, tied to scroll: depth without
         anything moving on its own. */
      .photo-scene .backdrop, .testimonials .backdrop, .about-photo img {
        animation: drift linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }

    }
  }

  /* Scene entrances on a clock, started by js/reveal.js (`is-in`). The
     hidden pre-state exists only under html.js-reveal — no script, no
     reduced motion, or no observer: everything is visible. */
  @media (prefers-reduced-motion: no-preference) {
    .js-reveal :is(.scene-head, .about-copy):not(.is-in) :is(.kicker, h2, p, .signature) { opacity: 0; }
    .js-reveal .scene-head:not(.is-in)::after,
    .js-reveal .about-copy:not(.is-in) h2::after { scale: 0 1; }
    .js-reveal .services:not(.is-in) .service { opacity: 0; }
    .js-reveal .glass:not(.is-in) { opacity: 0; }

    /* Three beats: kicker, title, then the rule draws — then the copy */
    :is(.scene-head, .about-copy).is-in .kicker { animation: reveal 0.9s var(--ease) both; }
    :is(.scene-head, .about-copy).is-in h2 { animation: reveal-title 1s var(--ease) 0.18s both; }
    .scene-head.is-in::after, .about-copy.is-in h2::after { animation: draw-rule 0.9s var(--ease) 0.45s both; }
    .about-copy h2::after { transform-origin: left; }
    .about-copy.is-in p { animation: reveal 0.9s var(--ease) both; }
    .about-copy.is-in p:nth-of-type(1) { animation-delay: 0.6s; }
    .about-copy.is-in p:nth-of-type(2) { animation-delay: 0.72s; }
    .about-copy.is-in p:nth-of-type(3) { animation-delay: 0.84s; }
    .about-copy.is-in .signature { animation: reveal 0.9s var(--ease) 1.05s both; }

    /* The four service photos arrive left to right, after the head */
    .services.is-in .service { animation: reveal 1s var(--ease) both; }
    .services.is-in .service:nth-child(1) { animation-delay: 0.35s; }
    .services.is-in .service:nth-child(2) { animation-delay: 0.5s; }
    .services.is-in .service:nth-child(3) { animation-delay: 0.65s; }
    .services.is-in .service:nth-child(4) { animation-delay: 0.8s; }

    /* The booking card settles into place */
    .glass.is-in { animation: reveal-card 1.1s var(--ease) 0.3s both; }
  }

  @keyframes reveal-title {
    from { opacity: 0; translate: 0 1.75rem; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes draw-rule {
    from { scale: 0 1; }
    to { scale: 1 1; }
  }
  @keyframes drift {
    from { scale: 1; }
    to { scale: 1.06; }
  }
  @keyframes reveal-card {
    from { opacity: 0; translate: 0 1.5rem; scale: 0.98; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }

  @keyframes reveal {
    from { opacity: 0; translate: 0 1.125rem; }
    to { opacity: 1; translate: 0 0; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .rise { animation: reveal 0.9s var(--ease) both; }
    .rise.-late { animation-duration: 1.1s; }

    /* Hero settle: the photo eases from a slight zoom as the copy rises, and
       the CLAUDIA watermark comes in last. Once, on load. */
    .hero:is(.-home, .-bleed) .frame { overflow: clip; }
    .hero:is(.-home, .-bleed) .frame img { animation: settle 1.6s var(--ease) both; }
    .hero.-home .watermark { animation: reveal 0.9s var(--ease) 0.2s both; } /* with the copy, a beat behind */
  }
  @keyframes settle {
    from { scale: 1.05; }
    to { scale: 1; }
  }

  /* --- mobile homepage ------------------------------------------------------
     Nine in ten visits are phones, so below 48rem the homepage is its own
     design with the opposite grammar to the desktop: the photo is the
     screen, the words sit on the photo, and the one action is in thumb
     reach. The cover is the whole first screen with the header floating on
     it; each service is a full-bleed story card with its caption on the
     picture; Sobre puts its title on the portrait; the testimonial stage
     and the booking card are screens; the bar is WhatsApp + Agendar.
     One HTML for both; the desktop rules are untouched by this block. */
  @media (width < 48rem) {
    :root {
      --bar-h: 4.5625rem;
      --bar: calc(var(--bar-h) - 0.625rem + max(0.625rem, calc(env(safe-area-inset-bottom) - 0.75rem)));
      /* svh, not dvh, and no safe-area term: iOS collapses its toolbar as you
         scroll, dvh follows it and the safe-area inset appears with it, so
         either would resize every screen under the finger and the page jump.
         svh is the toolbar-visible height and holds still; while the toolbar
         is hidden the next screen peeks in below by its height. */
      --screen: calc(100svh - var(--bar-h));
      /* the pinned photos use the large height instead: taller than the small
         viewport by the toolbar, so no gap opens when it hides */
      --screen-max: calc(100lvh - var(--bar-h));
      /* the pinned stages follow the live height: they are stuck to the
         viewport and their section's height is fixed in stable units, so
         they can stretch with the toolbar without moving anything below */
      --screen-live: calc(100dvh - var(--bar-h));
      --edge: 1.25rem; /* text inset on photos */
    }

    .announce { display: none; } /* no room on a cover */

    /* iOS rubber-bands past both ends and shows the canvas: the ends of this
       page are dark (the cover's fade, the Contato scene), so the canvas is
       ink and the bounce reads as the page continuing. The body keeps cream. */
    html:has(.site-header.-nav:not(.-form, .-page)) { background: var(--ink); }

    /* Header floats on the cover: the wordmark alone, the pair becomes the bar.
       Its container-type and backdrop-filter would each trap a fixed child. */
    .site-header.-nav {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 0;
      z-index: 5;
      container-type: normal;
      backdrop-filter: none;
      background: transparent;
      border: 0;
    }
    /* the form's and the service pages' headers stay a plain bar: in flow,
       cream, gold wordmark */
    .site-header.-nav:is(.-form, .-page) {
      position: static;
      background: var(--cream);
      /* .nav-bar in the selectors: the cover's on-dark colours below are as
         specific and come later */
      & .nav-bar .wordmark b { color: var(--gold); }
      & .nav-bar .wordmark small { color: var(--muted); }
      & .nav-bar { padding-block: 0.875rem; }
    }
    /* the pills sit under the wordmark, a little tighter so the language
       links and both pills hold one line down to 360px in every language */
    .site-header.-nav.-page .nav-bar {
      row-gap: 0.75rem;
      & nav { gap: 0.5rem; }
      & .btn { padding-inline: 1rem; }
    }
    .site-header.-nav .nav-bar {
      grid-template-columns: 1fr;
      min-block-size: 0;
      padding-block: 1rem;
      row-gap: 0;
      & nav[aria-label="Seções"] { display: none; }
      & .wordmark { justify-self: center; }
      & .wordmark b { color: var(--gold-light); }
      & .wordmark small { color: var(--on-dark-body); }

      & nav[aria-label="Contato"] { justify-self: center; } /* the language switcher, under the wordmark */
      & nav[aria-label="Contato"] > .btn { display: none; } /* the phone bar has these */
    }
    /* the service pages have no phone bar: their header keeps Contato and Agendar */
    .site-header.-page .nav-bar nav[aria-label="Contato"] > .btn { display: inline-flex; }

    /* The action bar: sticky at the end of the page. A fixed bar rides up
       with the iOS bounce and drops back when it releases; a sticky one
       moves with the document, so the bounce stays and nothing snaps. */
    .phone-bar {
      position: sticky;
      inset-block-end: 0;
      z-index: 30;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.625rem;
      /* the home-indicator zone: the bar's ground fills it, the buttons end
         22pt above the edge — clear of the indicator (5pt, ~8pt up) and the
         swipe strip (~20pt) without leaving the whole 34pt empty */
      padding: 0.625rem 1rem max(0.625rem, calc(env(safe-area-inset-bottom) - 0.75rem));
      background: color-mix(in srgb, var(--cream) 94%, transparent);
      backdrop-filter: blur(14px);
      border-block-start: 1px solid var(--rule-soft);

      & .btn { justify-content: center; min-block-size: 3.25rem; }
      & .btn.-strong { border-width: 1.5px; background: var(--ink); color: var(--cream); }
    }

    /* Cover: the portrait fills the first screen; eyebrow, title, sub-line,
       one line of lede and the button sit on its lower third. The copy
       wrappers dissolve so the grid can place each line; the watermark has
       no room. */
    .hero.-home {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto auto auto auto auto;
      min-block-size: auto;

      & .hero-text, & .hero-copy { display: contents; }
      & .watermark { display: none; }

      & .frame {
        grid-column: 1;
        grid-row: 1 / 7;
        position: relative;
        aspect-ratio: auto;
        block-size: var(--screen);
        margin: 0;
        & img { object-position: 50% 16%; } /* the portrait (claudia-retrato-2) */
        /* z-index: the photo's settle animation paints it above an earlier pseudo */
        &::before, &::after { content: ""; position: absolute; inset-inline: 0; z-index: 1; pointer-events: none; }
        &::before { /* the floating header reads whatever is behind it */
          inset-block-start: 0;
          block-size: 12rem;
          background: linear-gradient(to bottom,
            color-mix(in srgb, var(--ink) 72%, transparent) 0%,
            color-mix(in srgb, var(--ink) 40%, transparent) 45%,
            transparent 100%);
        }
        &::after {
          inset-block-end: 0;
          block-size: 72%;
          background: linear-gradient(to top,
            color-mix(in srgb, var(--ink) 88%, transparent) 0%,
            color-mix(in srgb, var(--ink) 55%, transparent) 40%,
            transparent 100%);
        }
      }
      & .eyebrow, & h1, & .hero-sub, & .hero-lede, & .btn {
        grid-column: 1;
        position: relative;
        z-index: 1;
        margin-inline: var(--edge);
      }
      & .eyebrow { grid-row: 2; margin-block: 0 0.875rem; font-size: 0.625rem; letter-spacing: 0.3em; color: var(--gold-light); }
      & h1 { grid-row: 3; margin-block: 0 0.25rem; font-size: clamp(3.25rem, 15vw, 4.25rem); letter-spacing: 0.01em; color: var(--on-dark); }
      & .hero-sub { grid-row: 4; margin-block: 0 1.125rem; font-size: clamp(1.75rem, 8.4vw, 2.5rem); color: var(--gold-light); }
      & .hero-lede {
        grid-row: 5;
        margin-block: 0 2.25rem;
        max-inline-size: 36ch;
        font-size: 0.9375rem;
        line-height: 1.6;
        color: var(--on-dark-body);
        text-wrap: pretty;
        & strong { color: var(--on-dark); }
      }
      & .btn { display: none; } /* the whole lede speaks; the bar holds the actions */
    }

    /* Serviços: a screen; the four as full-bleed story cards in a snap strip,
       caption on the picture, dots below where scroll markers exist */
    /* A short pin: a screen and a half tall, the head-and-strip stage sticks
       at the top; the strip slides in from the right as the scene lands. The
       cards take whatever height the head, dots and note leave: the strip is
       the stage's 1fr row and each card stretches to it. */
    .scene.-bleed {
      display: block;
      block-size: calc(var(--screen-max) + var(--screen) / 2);
      min-block-size: 0;
      padding: 0;
      overflow: clip;
      view-timeline-name: --servicos;

      & > .container {
        position: sticky;
        inset-block-start: 0;
        display: grid;
        /* head, strip, then whatever follows (dots where the browser makes
           them, the note) as auto rows — a fixed row count left an empty
           row plus its gap on WebKit, which has no scroll-marker dots */
        grid-template-rows: auto minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 1.5rem;
        block-size: var(--screen-live); /* the cards fill whatever is visible */
        min-block-size: 0;
        padding-block: 1.5rem 1.25rem;
      }
    }
    /* The strip slides in once, on a clock, when the scene lands (is-in from
       js/reveal.js) — not scrubbed by scroll: a sideways swipe drifts a few
       pixels vertically and would drag a scroll-driven fade back and forth. */
    .js-reveal .services:not(.is-in) { opacity: 0; translate: 16% 0; }
    .services.is-in { animation: strip-in 0.9s var(--ease) both; }
    @keyframes strip-in {
      from { opacity: 0; translate: 16% 0; }
      to { opacity: 1; translate: 0 0; }
    }
    .services {
      /* Every card lands centred: the strip is the full viewport width, the
         side padding is half of what the card leaves, and cards snap on
         their centre — so the first and last centre too, with the same
         sliver of neighbour on each side. */
      --card: min(86vw, 22rem);
      --peek: calc((100vw - var(--card)) / 2);
      display: flex;
      align-items: stretch;
      min-block-size: 0;
      gap: 0.75rem;
      margin-inline: calc(-1 * clamp(1.5rem, 6.4vw, 6rem));
      padding-inline: var(--peek);
      overflow: auto hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--peek);
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      &::-webkit-scrollbar { display: none; }

      & .service {
        flex: 0 0 var(--card);
        scroll-snap-align: center;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto auto;
        position: relative;
        isolation: isolate;

        & .art { grid-area: 1 / 1 / 4 / 2; aspect-ratio: auto; block-size: auto; min-block-size: 0; }
        /* holds the caption; inside .art, so the hover lift scales and tilts
           it with the photo */
        & .art::before {
          content: "";
          position: absolute;
          inset: auto 0 0;
          block-size: 60%;
          z-index: 1;
          background: linear-gradient(to top, color-mix(in srgb, var(--ink) 85%, transparent), transparent);
          pointer-events: none;
        }
        & h3, & p { position: relative; z-index: 2; margin-inline: var(--edge); }
        & h3 { grid-area: 2 / 1; margin-block: 0 0.375rem; font-size: 1.125rem; color: var(--on-dark); }
        & p { grid-area: 3 / 1; margin-block: 0 1.25rem; font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark-body); }
        & .more { margin-block-start: 0.5rem; color: var(--gold-light); }
      }
    }
    @supports (selector(::scroll-marker-group)) {
      .services {
        scroll-marker-group: after;
        /* The dots belong to the strip: pull them back through the grid gap so
           they sit 14px under the cards, with the full gap kept before the note */
        &::scroll-marker-group {
          display: flex;
          justify-content: center;
          gap: 0.5625rem;
          margin-block-start: calc(0.875rem - 1.5rem); /* back through the stage gap */
        }
        & > *::scroll-marker {
          content: "";
          inline-size: 5px;
          block-size: 5px;
          border: 0;
          border-radius: var(--pill);
          background: var(--rule-strong);
          transition: inline-size 0.5s, background-color 0.5s;
        }
        & > *::scroll-marker:target-current { inline-size: 1.625rem; background: var(--gold); }
      }
    }

    /* Sobre: a pinned story in one beat. The section is two screens tall;
       the portrait and the copy stage stick at the top while the page
       scrolls under them, and the section's view timeline (--sobre) drives
       it: kicker + title on the photo, then the title lifts, the photo dims
       and the whole text — three paragraphs and the signature — lands over
       her face as one block and holds until the section releases. The
       pinned stretch is cover ~35–68%. No scroll lock: it plays back on the
       way up. Phones only. */
    .about {
      display: block;
      block-size: calc(var(--screen) * 2);
      padding: 0;
      background: var(--ink); /* whatever the toolbar does, never a pale flash */
      view-timeline-name: --sobre;

      & .about-photo {
        position: sticky;
        inset-block-start: 0;
        block-size: var(--screen-max);
        margin: 0;
        aspect-ratio: auto;
        &::after {
          content: "";
          position: absolute;
          inset-inline: 0;
          inset-block-end: 0;
          block-size: 60%;
          background: linear-gradient(to top, color-mix(in srgb, var(--ink) 85%, transparent), transparent);
          pointer-events: none;
        }
        & img {
          animation: drift linear both, story-dim linear both;
          animation-timeline: --sobre, --sobre;
          animation-range: cover 0% cover 100%, cover 37% cover 46%;
        }
      }

      /* Rows: [slack] p p p signature [slack] kicker title — the title pair
         holds the bottom as on the cover until it has faded and leaves the
         grid (display: none at the end of story-out); then the two slack
         rows share the whole screen and the text block sits centred. */
      & .about-copy {
        position: sticky;
        inset-block-start: 0;
        z-index: 2;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr) auto auto;
        block-size: var(--screen-live);
        margin-block-start: calc(-1 * var(--screen-max));
        padding: 0 var(--edge); /* the title carries its own bottom inset, so the block centres true */
        pointer-events: none;

        /* The timed entrance rules (reveal.js) also match these; their
           duration and delay would shift a scroll range, so every child
           restates the longhands. */
        & > * { grid-column: 1; max-inline-size: none; margin: 0; animation-timeline: --sobre; animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both; }
        & .kicker { grid-row: 7; align-self: end; margin-block-end: 0.5rem; color: var(--gold-light); animation-name: story-out; animation-range: cover 37% cover 43%; animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both; }
        & h2 {
          grid-row: 8;
          align-self: end;
          margin-block-end: 2.75rem;
          font-size: clamp(1.75rem, 7.6vw, 2.25rem);
          color: var(--on-dark);
          animation-name: story-out;
          animation-range: cover 37% cover 43%;
          animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both;
          &::after { background: var(--gold-light); }
        }
        & p, & .signature {
          animation-name: story-in;
          animation-range: cover 43% cover 51%;
          animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both;
        }
        /* centred: the face is centred, so the block sits on it like a caption on a portrait */
        & p, & .signature { text-align: center; justify-self: center; }
        & p { margin-block-end: 1.125rem; font-size: clamp(1.0625rem, 4.6vw, 1.3125rem); line-height: 1.65; color: var(--on-dark); text-wrap: pretty; }
        & p:nth-of-type(1) { grid-row: 2; animation-duration: auto; animation-delay: 0s; }
        & p:nth-of-type(2) { grid-row: 3; animation-duration: auto; animation-delay: 0s; }
        & p:nth-of-type(3) { grid-row: 4; animation-duration: auto; animation-delay: 0s; }
        & .signature { grid-row: 5; margin-block-start: 0.5rem; font-size: 1.625rem; color: var(--gold-light); }
      }
    }
    @keyframes story {
      0% { opacity: 0; translate: 0 1.5rem; }
      22% { opacity: 1; translate: 0 0; }
      78% { opacity: 1; translate: 0 0; }
      100% { opacity: 0; translate: 0 -1rem; }
    }
    @keyframes story-in { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }
    /* display: none only takes hold at the very end of the range (and lifts
       the moment the range is re-entered on the way up), so the faded title
       leaves the grid and the text block can centre on the whole screen */
    @keyframes story-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -1rem; display: none; } }
    @keyframes story-dim { from { filter: brightness(1); } to { filter: brightness(0.35); } }

    /* Depoimentos: a pinned screen in the cover's manner. The portrait as a
       real photo (no blur) sticks at the top; the stage — eyebrow, quote,
       ticks — sticks over it and rises in during the first part of the pin
       (--depo); the "ver todos" link rides at the foot. The quote slot is
       as tall as the longest quote with the quotes anchored to its top, so
       the eyebrow and the ticks never move as the quotes change. The six
       extra quotes stay in the popover. */
    .testimonials {
      display: block;
      block-size: calc(var(--screen-max) + var(--screen) / 2);
      min-block-size: 0;
      padding: 0; /* the generic .scene padding would push the pinned layers down */
      overflow: clip; /* hidden would make the section the sticky's scroll container */
      view-timeline-name: --depo;

      & .backdrop {
        position: sticky;
        inset: auto;
        inset-block-start: 0;
        display: block;
        inline-size: 100%;
        block-size: var(--screen-max);
        object-position: 50% 18%;
        filter: grayscale(0.35) brightness(0.55);
        opacity: 0.6;
        animation-timeline: --depo;
        animation-range: cover 0% cover 100%;
      }
      &::after { display: none; } /* the desktop's radial vignette; the stage carries the gradients */

      & .stage {
        position: sticky;
        inset-block-start: 0;
        z-index: 1;
        block-size: var(--screen-live);
        min-block-size: 0;
        margin-block-start: calc(-1 * var(--screen-max));
        /* three rows: [eyebrow, centred in the room above] [the quote slot,
           centred on the screen] [ticks, at the foot]. The slot is the
           longest quote's height and every quote centres inside it, so the
           quote always lands on the screen's centre and the eyebrow and
           ticks never move. */
        grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
        align-content: stretch;
        padding: 7.25rem var(--gutter); /* symmetric, so the slot's centre is the screen's; the foot holds the two links */
        background:
          linear-gradient(to top, color-mix(in srgb, var(--ink) 92%, transparent) 0%, color-mix(in srgb, var(--ink) 55%, transparent) 42%, transparent 70%),
          linear-gradient(to bottom, color-mix(in srgb, var(--ink) 70%, transparent) 0%, transparent 32%);

        & > * {
          animation-name: story-in;
          animation-timeline: --depo;
          animation-range: cover 40% cover 50%;
          animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both;
        }
        & .eyebrow { align-self: center; margin: 0; }
      }
      & .quotes-track > li { align-self: center; } /* every quote centred in the slot, the slot centred on the screen */
      /* one phone size for every quote (the desktop's three tiers would make
         the slot the tallest tier); the slot stays close to the average */
      & .quote-slide blockquote { font-size: clamp(1.3125rem, 5.6vw, 1.5rem); line-height: 1.35; max-inline-size: none; }
      & .quotes-nav { align-self: end; margin: 0; }

      & .echo-grid { display: none; }
      & .echoes { /* pinned from the top at the foot of the stage; it rises into place with the first scroll */
        position: sticky;
        inset-block-start: calc(var(--screen-live) - 6.75rem);
        z-index: 2;
        padding-block: 0 1.25rem;
      }
      & .echoes-more { margin-block-start: 0; }
    }

    /* Agendar: a pinned beat, like Sobre. Two screens tall; the photo and
       the card stage stick at the top; the section's view timeline
       (--agende) brings the card up over the photo during the first part of
       the pin and holds it until the section releases. */
    .photo-scene.booking {
      display: block;
      block-size: calc(var(--screen) * 2);
      min-block-size: 0;
      padding: 0;
      overflow: clip; /* hidden would make the section the sticky's scroll container */
      view-timeline-name: --agende;

      & .backdrop {
        position: sticky;
        inset: auto;
        inset-block-start: 0;
        display: block;
        block-size: var(--screen-max);
        animation-timeline: --agende;
        animation-range: cover 0% cover 100%;
      }
      & > .container {
        position: sticky;
        inset-block-start: 0;
        z-index: 1;
        display: grid;
        align-content: center;
        block-size: var(--screen-live);
        margin-block-start: calc(-1 * var(--screen-max));
      }
      & .glass {
        animation-name: card-up;
        animation-timeline: --agende;
        animation-range: cover 40% cover 52%;
        animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both;
      }
    }
    @keyframes card-up {
      from { opacity: 0; translate: 0 3rem; scale: 0.96; }
      to { opacity: 1; translate: 0 0; scale: 1; }
    }

    /* Contato: the ending, one screen, readable — the address large, the
       hours and the two ways to write in plain lines, no label rows, the
       photo dimmed under it; then the practical notes, all of them. */
    .photo-scene.contact {
      display: grid;
      align-content: center;
      /* sized to the large viewport: nothing follows it to hide the
         toolbar's extra height */
      min-block-size: var(--screen-max);
      padding-block: 1.5rem;

      & .backdrop { filter: sepia(0.35) saturate(0.7) brightness(0.32); }
      & .scene-head { margin-block-end: 1.5rem; }
      & .scene-head .kicker { font-size: 1.375rem; }
      & .scene-head h2 { font-size: clamp(1.625rem, 7.4vw, 2rem); }
      & .scene-head::after { margin-block-start: 0.875rem; }

      & .contact-grid { gap: 1.25rem; }
      & .contact-list { gap: 1rem; }
      & .contact-list > div { padding: 0; border: 0; gap: 0.25rem; }
      & .contact-list dt { display: none; }
      & .contact-list dd { font-size: clamp(0.9375rem, 4.4vw, 1.0625rem); line-height: 1.5; }
      & .contact-list dd a { border-block-end-color: color-mix(in srgb, var(--gold-light) 40%, transparent); }

      /* the address is the hero of this screen */
      & .contact-grid > .contact-list:first-child > div:first-child dd {
        font-family: var(--display);
        font-weight: 400;
        font-size: clamp(1.5rem, 7vw, 1.75rem);
        line-height: 1.2;
        & .dim { font-family: var(--sans); font-size: 0.9375rem; color: var(--on-dark-dim); }
      }
      & .contact-grid > .contact-list:first-child > .hours { order: 1; }         /* address, hours, then the two ways to write */
      & .contact-grid > .contact-list:first-child > div:nth-child(2), & .contact-grid > .contact-list:first-child > div:nth-child(3) { order: 2; }
      & .contact-grid > .contact-list:first-child > .hours dd { gap: 0; & .dim { color: var(--on-dark-dim); } }

      /* the practical notes follow, all of them, under a hairline: small
         labels back on, compact rows */
      & .contact-grid > .contact-list + .contact-list {
        gap: 0.75rem;
        padding-block-start: 1rem;
        border-block-start: 1px solid color-mix(in srgb, var(--gold-light) 28%, transparent);
        & dt { display: block; font-size: 0.5625rem; }
        & dd { font-size: 0.9375rem; line-height: 1.45; }
      }
    }
  }
}

/* ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .center { text-align: center; }
  .measure { max-inline-size: 42ch; }
  .measure-narrow { max-inline-size: 26ch; }
  .muted { color: var(--muted); }
  .lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--lead-color, var(--body)); }
  .small { font-size: var(--fs-sm); }
}