/* ------------------------------------------------------------------
     Acquity website

     A simple, editorial site for a private acquisition vehicle. The
     house system is the desk's: the drawn lambda in its own ground,
     `cquity` beside it in the display serif, ink on paper, and one
     neutral grey family. What is new here is scale and quiet: an
     editorial dark hero, a light reading body, and a great deal of
     whitespace. Colour is still data. The only chroma is brass, and
     it appears where a thing is a link or a label, never as decor.

     No build step. Everything is here.
     ------------------------------------------------------------------ */
  @font-face {   /* latin */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(fonts/opensans-var-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {   /* latin-ext */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(fonts/opensans-var-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {   /* latin */
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/ptserif-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {   /* latin-ext */
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/ptserif-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  :root {
    /* Paper and ink. One neutral grey family: nothing warm, nothing cool. */
    --ink:      #121212;   /* headings and fills on paper */
    --ink-2:    #2c2c2c;   /* body copy, a shade off the headings */
    --say:      #565656;   /* supporting text */
    --quiet:    #8c8c8c;   /* labels, units, the parts you skim */
    --line:     #e4e4e4;   /* a border you are meant to see */
    --hair:     #ededed;   /* one you are not */
    --void:     #f7f7f7;   /* the page */
    --paper:    #ffffff;   /* a surface lifted off it */
    --raised:   #efefef;

    /* The dark moments: the hero, a page head, and the closing call. */
    --night:      #0c0c0c;
    --night-2:    #161616;
    --night-line: #2a2a2a;
    --night-say:  #a8a8a8;

    /* The one chroma. Links, labels, and the marks that lead somewhere. */
    --brass:    #8f7027;
    --brass-lt: #c9a961;

    --display: 'PT Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Open Sans', system-ui, -apple-system, sans-serif;

    /* An editorial ramp. Much larger than the desk's, because a website
       is read at arm's length and every step is deliberate. */
    --t-display: clamp(40px, 6.2vw, 82px);
    --t-h1:      clamp(34px, 5.2vw, 62px);
    --t-h2:      clamp(26px, 3.6vw, 44px);
    --t-h3:      clamp(20px, 2vw, 26px);
    --t-figure:  clamp(38px, 5vw, 64px);
    --t-lead:    clamp(17px, 1.6vw, 21px);
    --t-body:    17px;
    --t-ui:      15px;
    --t-meta:    13px;
    --t-label:   11px;

    --lh-display: 1.02;
    --lh-h:       1.1;
    --lh-body:    1.65;
    --ls-display: -0.02em;
    --ls-h:       -0.015em;
    --ls-label:   0.16em;

    --wrap: 1160px;      /* the page's outer column */
    --read: 680px;       /* a column of prose, and no wider */
    --head-h: 76px;      /* the fixed header */
    --r: 4px;            /* the only radius on the site: a small one */
    --r-pill: 999px;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--void);
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img, svg, video { display: block; max-width: 100%; }
  a { color: inherit; }
  button { font: inherit; cursor: pointer; }
  ::selection { background: var(--ink); color: var(--paper); }
  :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

  /* ------------------------------------------------------------------
     Type
     ------------------------------------------------------------------ */
  .display, h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--display);
    font-weight: 400;
    color: var(--ink);
    margin: 0;
  }
  h1, .h1 { font-size: var(--t-h1); line-height: var(--lh-h); letter-spacing: var(--ls-h); }
  h2, .h2 { font-size: var(--t-h2); line-height: var(--lh-h); letter-spacing: var(--ls-h); }
  h3, .h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; }
  p { margin: 0 0 1.15em; }
  p:last-child { margin-bottom: 0; }

  .lead {
    font-size: var(--t-lead);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 44ch;
  }
  .eyebrow {
    font-family: var(--sans);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--quiet);
    margin: 0;
  }
  .eyebrow.brass { color: var(--brass); }
  .meta { font-size: var(--t-meta); color: var(--quiet); }
  .figure { font-family: var(--display); font-size: var(--t-figure); line-height: 1; color: var(--ink); letter-spacing: var(--ls-h); }

  .prose { max-width: var(--read); }
  .prose p { color: var(--say); }
  .prose p:first-of-type { color: var(--ink-2); font-size: var(--t-lead); line-height: 1.55; }
  .prose strong { color: var(--ink); font-weight: 600; }

  /* A lead line that follows a label, and the few spacing utilities the
     pages need. Nothing sets a margin inline. */
  .lead.soft { color: var(--say); }
  .eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 20px; }
  .mt-20 { margin-top: 20px; }
  .mt-24 { margin-top: 24px; }
  .mt-32 { margin-top: 32px; }
  .mt-40 { margin-top: 40px; }

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
  .section { padding: 112px 0; }
  .section.tight { padding: 72px 0; }
  .section.alt { background: var(--paper); }
  .rule { height: 1px; background: var(--line); border: 0; margin: 0; }
  .stack > * + * { margin-top: 24px; }
  .flow > * + * { margin-top: 20px; }

  .grid { display: grid; gap: 48px; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }

  .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 64px; }
  .sec-head p { margin: 0; }

  /* ------------------------------------------------------------------
     The mark. The lambda carries its own ground, the way it does on the
     app icon; `cquity` sits beside it in the display serif. Together
     they read Acquity, which is what the link is named.
     ------------------------------------------------------------------ */
  .brand { display: inline-flex; align-items: baseline; gap: 5px; text-decoration: none; }
  .brand .badge {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 8px; flex: none;
    background: var(--badge-bg, var(--ink)); color: var(--badge-fg, var(--paper));
    transition: background .3s ease, color .3s ease;
  }
  /* The mark is set in pixels, not in `em`: the lockup is a fixed 32px box
     with a 25px word, and an `em` here would key off the body size instead,
     which drew the lambda a third of the box it belongs in. */
  .brand .badge svg { height: 14px; width: auto; fill: currentColor; }
  .brand .word {
    font-family: var(--display); font-weight: 400;
    font-size: 25px; line-height: 1;
    letter-spacing: var(--ls-title, -0.01em);
    /* The word's mass sits on its baseline, so a box lined up with the mark
       still reads high. Two pixels down puts the two on one optical line. */
    position: relative; top: 2px;
    color: var(--brand-fg, var(--ink));
    transition: color .3s ease;
  }

  /* ------------------------------------------------------------------
     Header. Fixed. Transparent while it stands on a dark hero, and solid
     paper once you leave it. The whole lockup flips with one class.
     ------------------------------------------------------------------ */
  .site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    --brand-fg: #ffffff;
    --badge-bg: #ffffff;
    --badge-fg: var(--ink);
    --nav-fg: #e9e9e9;
    --nav-fg-hover: #ffffff;
    --cta-bg: #ffffff;
    --cta-fg: var(--ink);
    color: var(--ink);
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
    border-bottom: 1px solid transparent;
  }
  .site-header.is-solid {
    background: rgba(247, 247, 247, 0.92);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom-color: var(--line);
    --brand-fg: var(--ink);
    --badge-bg: var(--ink);
    --badge-fg: var(--paper);
    --nav-fg: var(--say);
    --nav-fg-hover: var(--ink);
    --cta-bg: var(--ink);
    --cta-fg: var(--paper);
  }
  .header-inner {
    max-width: var(--wrap); margin: 0 auto; padding: 0 32px;
    height: var(--head-h);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
  }
  .nav { display: flex; align-items: center; gap: 4px; }
  .nav a {
    text-decoration: none; color: var(--nav-fg);
    font-size: var(--t-ui); font-weight: 500;
    padding: 10px 14px; border-radius: var(--r-pill);
    transition: color .2s ease;
  }
  .nav a:hover { color: var(--nav-fg-hover); }
  .nav a[aria-current="page"] { color: var(--nav-fg-hover); }
  .nav a[aria-current="page"]::after {
    content: ""; display: block; height: 1px; margin-top: 5px;
    background: currentColor; opacity: .6;
  }
  .header-cta { display: flex; align-items: center; gap: 12px; }
  .nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 18px; border-radius: var(--r-pill);
    background: var(--cta-bg); color: var(--cta-fg);
    font-size: var(--t-ui); font-weight: 600; text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .2s ease;
  }
  .nav-cta:hover { transform: translateY(-1px); }

  .nav-toggle {
    display: none;
    width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; color: var(--brand-fg);
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    transition: color .3s ease;
  }
  .nav-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* The mobile menu: the page turned over, nothing more. */
  .menu {
    position: fixed; inset: var(--head-h) 0 0 0; z-index: 40;
    background: var(--void);
    padding: 40px 32px;
    display: none; flex-direction: column; gap: 4px;
    overflow-y: auto;
  }
  .menu[data-open="true"] { display: flex; }
  .menu a {
    font-family: var(--display); font-size: clamp(28px, 8vw, 40px);
    line-height: 1.3; text-decoration: none; color: var(--ink);
    padding: 8px 0; border-bottom: 1px solid var(--hair);
  }
  .menu a:last-of-type { border-bottom: 0; }
  .menu .menu-foot { margin-top: 32px; }

  /* ------------------------------------------------------------------
     Buttons
     ------------------------------------------------------------------ */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: var(--t-ui); font-weight: 600;
    padding: 15px 26px; border-radius: var(--r-pill);
    text-decoration: none; border: 1px solid transparent;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--ink); color: var(--paper); }
  .btn-primary:hover { background: #000; }
  .btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-link { padding: 0; border: 0; background: none; color: var(--ink); font-size: var(--t-ui); font-weight: 600; }
  .btn-link .arw { transition: transform .25s ease; }
  .btn-link:hover .arw { transform: translateX(4px); }
  .arrow { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.6; fill: none; }

  /* Inside a dark moment, the buttons invert. */
  .on-dark .btn-primary { background: var(--paper); color: var(--ink); }
  .on-dark .btn-primary:hover { background: #e9e9e9; }
  .on-dark .btn-ghost { border-color: rgba(255,255,255,0.28); color: #fff; }
  .on-dark .btn-ghost:hover { border-color: #fff; }
  .on-dark .btn-link { color: #fff; }
  .on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
  .on-dark .eyebrow { color: var(--night-say); }
  .on-dark .lead, .on-dark p { color: #cfcfcf; }

  /* ------------------------------------------------------------------
     Hero
     ------------------------------------------------------------------ */
  .hero {
    position: relative;
    min-height: 100svh;
    min-height: 100vh;
    display: flex; align-items: flex-end;
    background: var(--night);
    overflow: hidden;
    isolation: isolate;
  }
  @supports (min-height: 100svh) { .hero { min-height: 100svh; } }
  .hero-media { position: absolute; inset: 0; z-index: -2; }
  .hero-media video, .hero-media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) contrast(1.05) brightness(0.82);
  }
  .hero-media video { z-index: 1; }   /* over the poster, once a file is there */
  .hero-scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(to top, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.45) 42%, rgba(8,8,8,0.30) 70%, rgba(8,8,8,0.55) 100%),
      linear-gradient(to right, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.10) 60%);
  }
  .hero-inner { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px 96px; }
  .hero .hero-eyebrow { color: rgba(255,255,255,0.7); }
  .hero h1 {
    font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display);
    color: #fff; max-width: 17ch; margin: 22px 0 0;
  }
  .hero .lead { margin-top: 26px; color: #d8d8d8; max-width: 46ch; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
  .hero-foot {
    margin-top: 72px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.16);
    display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center;
    color: rgba(255,255,255,0.62); font-size: var(--t-meta);
  }
  .hero-foot .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.4); }

  /* ------------------------------------------------------------------
     A page head: the same dark ground, shorter, carrying the title.
     ------------------------------------------------------------------ */
  .page-head {
    position: relative; background: var(--night); color: #fff;
    padding: calc(var(--head-h) + 96px) 0 88px;
    overflow: hidden;
  }
  .page-head::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(120% 90% at 88% 0%, rgba(255,255,255,0.06), transparent 60%),
      linear-gradient(to bottom, rgba(255,255,255,0.03), transparent 40%);
  }
  .page-head .wrap { position: relative; z-index: 1; }
  .page-head .eyebrow { color: rgba(255,255,255,0.62); }
  .page-head p { color: #cfcfcf; }
  .page-head h1 { color: #fff; margin: 20px 0 0; max-width: 20ch; }
  .page-head .lead { margin-top: 26px; color: #d0d0d0; }

  /* ------------------------------------------------------------------
     Content blocks
     ------------------------------------------------------------------ */
  .split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
  .split.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

  .statement {
    font-family: var(--display); color: var(--ink);
    font-size: clamp(24px, 3vw, 36px); line-height: 1.28; letter-spacing: -0.015em;
    max-width: 30ch;
  }
  .statement .mute { color: var(--quiet); }

  .list { list-style: none; margin: 0; padding: 0; }
  .list li { padding: 22px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: baseline; }
  .list li:last-child { border-bottom: 1px solid var(--line); }
  .list b { font-weight: 600; color: var(--ink); font-size: var(--t-ui); }
  .list span { color: var(--say); }

  /* Values: people over profit, systems over guesswork. */
  .values { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .value { background: var(--paper); padding: 48px 44px; }
  .value .eyebrow { margin-bottom: 26px; }
  .value h3 { margin-bottom: 14px; font-size: clamp(22px, 2.4vw, 30px); }
  .value p { color: var(--say); margin: 0; max-width: 46ch; }

  /* Figures that carry a value. */
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .stat .figure { margin-bottom: 14px; }
  .stat p { margin: 0; color: var(--say); max-width: 34ch; font-size: var(--t-ui); }

  /* The portfolio. */
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .card { background: var(--paper); padding: 40px 36px 36px; display: flex; flex-direction: column; gap: 18px; min-height: 260px; transition: background .25s ease; }
  .card:hover { background: #fbfbfb; }
  .card .mono {
    width: 46px; height: 46px; border-radius: var(--r);
    background: var(--ink); color: var(--paper);
    display: grid; place-items: center;
    font-family: var(--display); font-size: 18px;
  }
  .card h3 { font-size: var(--t-h3); }
  .card p { color: var(--say); margin: 0; font-size: var(--t-ui); line-height: 1.5; }
  .card .place { margin-top: auto; color: var(--quiet); font-size: var(--t-meta); }
  .cards.duo { grid-template-columns: 1fr 1fr; }

  /* The process. */
  .steps { counter-reset: step; }
  .step {
    counter-increment: step;
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 40px;
    padding: 40px 0; border-top: 1px solid var(--line); align-items: start;
  }
  .step:last-child { border-bottom: 1px solid var(--line); }
  .step::before {
    content: "0" counter(step);
    font-family: var(--display); font-size: 20px; color: var(--quiet);
    letter-spacing: 0.02em; padding-top: 4px;
  }
  .step h3 { margin-bottom: 10px; }
  .step p { color: var(--say); margin: 0; max-width: 62ch; }

  /* A voice from the other side of the table. */
  .quote { max-width: 900px; }
  .quote blockquote {
    margin: 0; font-family: var(--display);
    font-size: clamp(24px, 3.2vw, 40px); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink);
  }
  .quote cite { display: block; margin-top: 32px; font-style: normal; font-size: var(--t-ui); color: var(--say); }
  .quote cite b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

  /* Facts about the firm. */
  .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .fact h3 { font-size: 18px; margin-bottom: 10px; }
  .fact p { color: var(--say); margin: 0; font-size: var(--t-ui); }

  /* Questions an owner puts to us before anything is signed. */
  .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
  .faq .qa { padding: 32px 0; border-top: 1px solid var(--line); }
  .faq .qa h3 { margin-bottom: 10px; }
  .faq .qa p { color: var(--say); margin: 0; font-size: var(--t-ui); line-height: 1.6; }

  /* ------------------------------------------------------------------
     The closing call
     ------------------------------------------------------------------ */
  .cta-band { background: var(--night); color: #fff; }
  .cta-band .wrap { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: center; }
  .cta-band h2 { color: #fff; max-width: 18ch; }
  .cta-band p { color: #c4c4c4; margin-top: 20px; max-width: 42ch; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

  /* ------------------------------------------------------------------
     Footer
     ------------------------------------------------------------------ */
  .site-footer { background: var(--void); border-top: 1px solid var(--line); padding: 72px 0 40px; }
  .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
  .foot-top .brand { margin-bottom: 20px; }
  .foot-note { color: var(--quiet); font-size: var(--t-meta); max-width: 34ch; }
  .foot-col h4 { font-family: var(--sans); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--quiet); font-weight: 600; margin: 0 0 18px; }
  .foot-col a { display: block; text-decoration: none; color: var(--ink-2); font-size: var(--t-ui); padding: 5px 0; }
  .foot-col a:hover { color: var(--brass); }
  .foot-col .foot-meta { margin: 0; padding: 5px 0; font-size: var(--t-ui); color: var(--ink-2); }
  .foot-bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; color: var(--quiet); font-size: var(--t-meta); }

  /* ------------------------------------------------------------------
     Contact
     ------------------------------------------------------------------ */
  .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
  .field { margin-bottom: 24px; }
  .field label { display: block; font-size: var(--t-meta); font-weight: 600; color: var(--ink); margin-bottom: 8px; }
  .field input, .field textarea, .field select {
    width: 100%; font-family: var(--sans); font-size: var(--t-body); color: var(--ink);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
    padding: 14px 16px; transition: border-color .2s ease;
  }
  .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); }
  .field textarea { min-height: 150px; resize: vertical; }
  .field .hint { font-size: var(--t-meta); color: var(--quiet); margin-top: 8px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .form-note { font-size: var(--t-meta); color: var(--quiet); margin-top: 20px; max-width: 46ch; }
  .contact-aside .item { padding: 22px 0; border-top: 1px solid var(--line); }
  .contact-aside .item:last-child { border-bottom: 1px solid var(--line); }
  .contact-aside .item .eyebrow { margin-bottom: 8px; }
  .contact-aside .item a, .contact-aside .item p { font-size: var(--t-ui); color: var(--ink); margin: 0; text-decoration: none; }
  .contact-aside .item a:hover { color: var(--brass); }

  /* ------------------------------------------------------------------
     Reveal on scroll. One movement per element, and none of it when the
     reader has asked for stillness.
     ------------------------------------------------------------------ */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .08s; }
  .reveal.d2 { transition-delay: .16s; }
  .reveal.d3 { transition-delay: .24s; }

  /* Assistive text and the skip link. */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip {
    position: absolute; left: 16px; top: -60px; z-index: 100;
    background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r);
    text-decoration: none; font-size: var(--t-ui); transition: top .2s ease;
  }
  .skip:focus { top: 16px; }

  /* ------------------------------------------------------------------
     Responsive
     ------------------------------------------------------------------ */
  @media (max-width: 1040px) {
    .grid-2, .split, .split.flip, .sec-head { grid-template-columns: 1fr; gap: 40px; }
    .cta-band .wrap { grid-template-columns: 1fr; gap: 40px; }
    .cta-actions { justify-content: flex-start; }
    .cards { grid-template-columns: 1fr 1fr; }
    .stats, .facts { grid-template-columns: 1fr 1fr; gap: 40px; }
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  }
  @media (max-width: 900px) {
    .nav { display: none; }
    .nav-toggle { display: flex; }
    .nav-cta { display: none; }
  }
  @media (max-width: 720px) {
    :root { --head-h: 68px; }
    .section { padding: 76px 0; }
    .wrap, .header-inner, .hero-inner { padding: 0 22px; }
    .hero-inner { padding-bottom: 64px; }
    .values, .cards, .cards.duo, .stats, .facts, .foot-top { grid-template-columns: 1fr; }
    .faq { grid-template-columns: 1fr; gap: 0; }
    .value { padding: 36px 28px; }
    .list li { grid-template-columns: 1fr; gap: 6px; }
    .step { grid-template-columns: 44px minmax(0,1fr); gap: 20px; padding: 30px 0; }
    .field-row { grid-template-columns: 1fr; }
    .hero-foot { gap: 8px 20px; }
    .hero-foot .dot { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn, .nav-cta, .btn-link .arw { transition: none; }
  }