/* Clear Language Studio — shared styles for the public site.
   Used by index.html and about.html. The dashboard at /admin has its own
   stylesheet and is deliberately not covered here.
   Cached for the same 300s as the HTML (see firebase.json), so markup and
   styles always deploy together and can never go out of step. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* CLEAN PALETTE — white + forest green + neutral grays. No warm tones, no gold. */
    --ink: #0A0A0A;            /* primary text, wordmark, dark surfaces */
    --ink-soft: #2F2F2F;
    --ink-mid: #5C5C5C;        /* body / secondary text */
    --ink-light: #9A9A9A;
    --line: #EAEAEA;           /* hairlines, dividers, borders */
    --line-soft: #F0F0F0;
    --surface: #F7F7F7;        /* card / secondary surface */
    --white: #FFFFFF;          /* default page surface, never tinted */
    --forest: #0F4A3C;         /* THE brand color — accents, CTAs, links, italic emphasis */
    --forest-deep: #0A352B;    /* hover states */
    --forest-tint: #EEF4F1;    /* "do" backgrounds, success callouts */
    --forest-soft: #D9E5DF;    /* labels / markers on dark & forest surfaces */
    --font-serif: 'Newsreader', Georgia, serif;
    --font-sans: 'Geist', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  }
  html { scroll-behavior: smooth; }
  body { font-family: var(--font-sans); background: var(--white); color: var(--ink); font-size: 16px; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

  /* ━━━ Wordmark — typographic logo. Serif, italic forest "Language". No symbol, never stacked. ━━━ */
  .wordmark { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; }
  .wordmark em { font-style: italic; color: var(--forest); }
  .wordmark.reversed { color: rgba(255,255,255,0.92); }
  .wordmark.reversed em { color: rgba(255,255,255,0.92); }

  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 4rem;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-logo { font-size: 1.35rem; text-decoration: none; line-height: 1; }
  .nav-right { display: flex; align-items: center; gap: 2rem; }
  /* .nav-cta is display:inline, so its vertical padding overflows the line
     box instead of adding to the bar's height. The wrapper keeps it that way:
     as a bare flex child the link would be blockified and the nav would grow
     ~12px. Do not remove it. */
  .nav-cta-wrap { display: block; }
  .nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
  .nav-links a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-mid); text-decoration: none; transition: color 0.2s; }
  .nav-links a:hover { color: var(--forest); }
  .nav-cta { font-family: var(--font-mono); white-space: nowrap; font-size: 0.72rem !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase; color: #fff !important; background: var(--forest); padding: 0.6rem 1.25rem; border-radius: 2px; text-decoration: none; transition: background 0.2s; }
  .nav-cta:hover { background: var(--forest-deep); }

  /* Mobile menu. The checkbox holds the open/closed state, so the menu needs
     no JavaScript; both it and the button are display:none above 640px,
     where the links sit in the bar as usual. */
  .nav-toggle { display: none; }
  .nav-toggle-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 2.5rem; height: 2.5rem; flex-shrink: 0; cursor: pointer; }
  .nav-toggle-btn span { display: block; width: 1.25rem; height: 1.5px; background: var(--ink); transition: transform 0.2s, opacity 0.2s; }

  .hero { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 0.9fr; padding-top: 4.5rem; }
  .hero-left { display: flex; flex-direction: column; justify-content: center; padding: 5rem 3.5rem 5rem 4rem; }
  .hero-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); margin-bottom: 1.75rem; display: flex; align-items: center; gap: 0.75rem; }
  .hero-eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--forest); }
  h1 { font-family: var(--font-serif); font-size: clamp(2.8rem, 4vw, 4rem); line-height: 1.08; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 1.5rem; }
  h1 em { font-style: italic; color: var(--forest); }
  .hero-sub { font-size: 1.05rem; color: var(--ink-mid); max-width: 42ch; margin-bottom: 2.5rem; line-height: 1.75; }
  .hero-sub em { font-style: italic; color: var(--forest); }
  .hero-actions { display: flex; gap: 1.25rem; align-items: center; }
  .btn-primary { display: inline-block; background: var(--forest); color: #fff; padding: 0.85rem 2rem; border-radius: 2px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; transition: background 0.2s, transform 0.15s; }
  .btn-primary:hover { background: var(--forest-deep); transform: translateY(-1px); }
  .btn-ghost { display: inline-block; color: var(--ink); font-size: 0.875rem; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
  .btn-ghost:hover { color: var(--forest); border-color: var(--forest); }

  .hero-right { background: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 5rem 3.5rem; position: relative; overflow: hidden; }
  .hero-right::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 41px); }
  /* Three rows — source, a literal rendering, then ours — so a reader can see
     what the studio actually did instead of guessing. Sizes are tuned down from
     the old two-row version so the block plus the proof grid still clear a short
     viewport. The literal row is deliberately muted: it is the foil, not the work. */
  .bilingual-block { position: relative; z-index: 1; margin-bottom: 2.25rem; }
  .bilingual-pair { border-left: 2px solid var(--forest); padding-left: 1.25rem; margin-bottom: 1.5rem; }
  .bilingual-pair.is-literal { border-left-color: rgba(255,255,255,0.18); }
  .bilingual-pair.is-literal .lang-tag { color: rgba(255,255,255,0.4); }
  .bilingual-pair.is-literal .lang-phrase { color: rgba(255,255,255,0.45); }
  .bilingual-pair.is-ours { margin-bottom: 0; }
  .lang-tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest-soft); margin-bottom: 0.4rem; }
  .lang-phrase { font-family: var(--font-serif); font-weight: 400; font-size: 1.12rem; color: #fff; line-height: 1.4; }
  .lang-phrase em { font-style: italic; color: rgba(255,255,255,0.72); }
  .lang-note { font-size: 0.76rem; line-height: 1.6; color: rgba(255,255,255,0.5); margin-top: 0.7rem; max-width: 46ch; }
  .lang-note em { font-style: italic; color: rgba(255,255,255,0.78); }
  .hero-proof { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .proof-num { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 400; color: #fff; line-height: 1; }
  .proof-label { font-family: var(--font-mono); font-size: 0.68rem; color: rgba(255,255,255,0.45); margin-top: 0.4rem; letter-spacing: 0.08em; text-transform: uppercase; }

  /* The bar's resting state is what it always was: one centred, wrapping row.
     The marquee is layered on top of that by the script at the foot of
     index.html, which adds .is-marquee once it has cloned enough copies. Without
     the script, or under prefers-reduced-motion, none of this engages. */
  .trust-bar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 1.1rem 4rem; }
  .trust-track, .trust-group { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem 3rem; }

  /* Marquee. The five claims only fit on one line above ~1300px — at 375px they
     stacked five rows deep and ate 179px right under the hero. Scrolling them
     keeps the bar one line at every width and gives the page some movement. */
  .trust-bar.is-marquee { padding: 1.1rem 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent); }
  .trust-bar.is-marquee .trust-track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 0;
    animation: trust-scroll var(--trust-duration, 38s) linear infinite; }
  /* Each copy carries its own trailing gap, so every copy measures the same and
     the hand-off from one to the next keeps the spacing rhythm unbroken. */
  .trust-bar.is-marquee .trust-group { flex-wrap: nowrap; gap: 3rem; padding-right: 3rem; }
  /* Pausing on hover and on keyboard focus keeps any single claim readable.
     Motion this slow and this peripheral doesn't get its own stop button. */
  .trust-bar.is-marquee:hover .trust-track,
  .trust-bar.is-marquee:focus-within .trust-track { animation-play-state: paused; }
  /* Travelling exactly one copy's width lands on an identical frame, which is
     what makes the loop seamless. The strip is --trust-copies copies wide, so
     one copy is 100%/that. Both values are set by the script, because the copy
     count depends on the viewport and CSS can't count. */
  @keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--trust-copies, 2))); } }
  .trust-item { font-family: var(--font-mono); display: flex; align-items: center; gap: 0.6rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mid); }
  .trust-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--forest); flex-shrink: 0; }

  section { padding: 6rem 4rem; }
  .section-label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); margin-bottom: 1rem; }
  h2 { font-family: var(--font-serif); font-size: clamp(2rem, 2.8vw, 2.7rem); font-weight: 400; line-height: 1.18; letter-spacing: -0.005em; margin-bottom: 1rem; }
  h2 em { font-style: italic; color: var(--forest); }
  .section-intro { color: var(--ink-mid); max-width: 54ch; font-size: 1rem; line-height: 1.75; }

  .services { background: var(--white); }
  .services-header { max-width: 700px; margin-bottom: 3.5rem; }
  .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .service-card { background: var(--white); padding: 2.5rem 2rem; transition: background 0.2s; }
  .service-card:hover { background: var(--forest-tint); }
  .service-num { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; color: var(--ink-light); line-height: 1; margin-bottom: 1.5rem; }
  .service-title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; margin-bottom: 0.75rem; }
  .service-desc { font-size: 0.9rem; color: var(--ink-mid); line-height: 1.65; }
  .service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
  .tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); padding: 0.3rem 0.65rem; border-radius: 1px; color: var(--ink-mid); }

  .why { background: var(--forest); color: #fff; display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .why-left { padding: 6rem 4rem; border-right: 1px solid rgba(255,255,255,0.15); }
  .why-left .section-label { color: var(--forest-soft); }
  .why-left h2 { color: #fff; }
  .why-left h2 em { color: rgba(255,255,255,0.6); }
  .why-left p { color: rgba(255,255,255,0.72); font-size: 1rem; line-height: 1.8; margin-top: 1.25rem; max-width: 42ch; }
  .why-right { padding: 6rem 4rem; display: flex; flex-direction: column; gap: 2.5rem; justify-content: center; }
  .why-point-title { font-weight: 500; font-size: 1rem; color: #fff; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.75rem; }
  .why-point-title::before { content: ''; display: block; width: 1.5rem; height: 1px; background: var(--forest-soft); flex-shrink: 0; }
  .why-point-desc { font-size: 0.9rem; color: rgba(255,255,255,0.65); line-height: 1.65; padding-left: 2.25rem; }

  .process { background: var(--white); }
  .process-header { max-width: 600px; margin-bottom: 3.5rem; }
  .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
  .process-steps::before { content: ''; position: absolute; top: 1.75rem; left: 12.5%; right: 12.5%; height: 1px; background: var(--line); z-index: 0; }
  /* The forest overlay on that hairline. Same geometry, scaled from the left by
     --process-progress, which the scroll handler in index.html drives. No transition:
     it tracks the wheel directly, and easing here would make it lag behind the scroll.
     Defaults to scaleX(0), so without JS the section looks exactly as it always has. */
  .process-steps::after { content: ''; position: absolute; top: 1.75rem; left: 12.5%; right: 12.5%; height: 1px; background: var(--forest); z-index: 0; transform: scaleX(var(--process-progress, 0)); transform-origin: left center; }
  .step { text-align: center; padding: 0 1.5rem; position: relative; z-index: 1; }
  .step-circle { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400; transition: background 0.2s, color 0.2s, border-color 0.2s; }
  .step:hover .step-circle { background: var(--forest); color: #fff; border-color: var(--forest); }
  .step.is-filled .step-circle { background: var(--forest); color: #fff; border-color: var(--forest); }
  .step-title { font-weight: 500; font-size: 0.95rem; margin-bottom: 0.5rem; }
  .step-desc { font-size: 0.85rem; color: var(--ink-mid); line-height: 1.6; }

  /* Verifiable commitments in place of client quotes. Real testimonials can sit
     alongside these later without redesigning the section. */
  .standards { background: var(--surface); }
  .standards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
  .standard { background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--forest); padding: 2rem; border-radius: 2px; }
  .standard-title { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.3; margin-bottom: 0.9rem; }
  .standard-desc { font-size: 0.92rem; line-height: 1.75; color: var(--ink-mid); }

  .cta-section { background: var(--ink); text-align: center; padding: 7rem 4rem; }
  .cta-section .section-label { color: var(--forest-soft); }
  .cta-section h2 { color: #fff; margin-bottom: 1rem; }
  .cta-section h2 em { color: rgba(255,255,255,0.6); }
  .cta-section > p { color: rgba(255,255,255,0.65); max-width: 48ch; margin: 0 auto 2.5rem; font-size: 1rem; }
  .cta-group { display: flex; gap: 1.25rem; justify-content: center; align-items: center; }
  .btn-primary-light { display: inline-block; background: #fff; color: var(--ink); padding: 0.85rem 2rem; border-radius: 2px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; transition: opacity 0.2s; }
  .btn-primary-light:hover { opacity: 0.9; }
  .btn-ghost-light { display: inline-block; color: rgba(255,255,255,0.65); font-size: 0.875rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 2px; transition: color 0.2s; }
  .btn-ghost-light:hover { color: #fff; }
  .cta-email { font-family: var(--font-mono); font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 1.75rem; letter-spacing: 0.03em; }
  .cta-email a { color: var(--forest-soft); text-decoration: none; }
  .cta-email a:hover { color: #fff; }

  /* ━━━ Quote form ━━━ */
  .quote-form { max-width: 760px; margin: 0 auto; text-align: left; }
  .qf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
  /* min-width:0 — grid and flex items default to min-width:auto, which lets a
     control with a wide intrinsic size (the date input on iOS) push past its
     column instead of being held to it. */
  .qf-field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
  .qf-full { grid-column: 1 / -1; }
  .qf-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest-soft); }
  .qf-label-es { color: rgba(255,255,255,0.4); }
  .quote-form input[type=text], .quote-form input[type=email], .quote-form input[type=date], .quote-form select, .quote-form textarea {
    font-family: var(--font-sans); font-size: 0.95rem; color: #fff; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.18); border-radius: 2px; padding: 0.75rem 0.9rem; width: 100%;
    transition: border-color 0.2s, background 0.2s; color-scheme: dark; line-height: 1.3;
  }
  .quote-form textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
  /* Safari on iOS sizes date inputs from the native control, not from the box:
     width:100% is ignored, so the Deadline field rendered wider than every
     other field and spilled over the right edge, with its value centered.
     appearance:none + min-width:0 hands sizing back to the box; the inner
     value element has to be left-aligned separately or it stays centered. */
  /* appearance:none also means an *empty* date input draws no inner text on iOS —
     no mm/dd/yyyy placeholder, unlike every other engine — so its content box
     collapses and the field sits a whole text line shorter than the controls
     around it. min-height puts that line back. The value is the box the rule
     above builds, not a guess: one line (1.3em, hence the explicit line-height
     there — line-height:normal resolves differently per engine and can't be
     mirrored) plus 0.75rem of padding top and bottom plus the two 1px borders,
     which min-height covers because box-sizing is border-box. Change the padding,
     font-size or line-height above and this has to follow.
     It is a *min*-height deliberately: on engines that already size the control
     correctly it does nothing, so it can only ever fix the collapse. */
  .quote-form input[type=date] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; text-align: left; min-height: calc(1.3em + 1.5rem + 2px); }
  .quote-form input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
  .quote-form input[type=date]::-webkit-datetime-edit { padding: 0; }
  .quote-form select option { color: var(--ink); background: #fff; }
  .quote-form ::placeholder { color: rgba(255,255,255,0.3); }
  .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: var(--forest-soft); background: rgba(255,255,255,0.07); }
  .quote-form .qf-invalid { border-color: #E8A0A0 !important; }
  .qf-drop { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; min-height: 3.05rem; padding: 0.55rem 0.9rem; border: 1px dashed rgba(255,255,255,0.28); border-radius: 2px; color: rgba(255,255,255,0.75); font-size: 0.9rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
  .qf-drop:hover, .qf-drop.dragging { border-color: var(--forest-soft); background: rgba(255,255,255,0.05); }
  .qf-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .qf-hint { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); }
  /* Confidentiality line under the upload box. Sits outside the drop-zone label
     so it is not part of the click or drag target. */
  .qf-note { font-size: 0.76rem; line-height: 1.6; color: rgba(255,255,255,0.45); margin-top: 0.6rem; max-width: 62ch; }
  .qf-file-list { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .qf-file-list:empty { display: none; }
  .qf-file-list li { font-family: var(--font-mono); font-size: 0.7rem; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); border-radius: 2px; padding: 0.35rem 0.4rem 0.35rem 0.7rem; display: flex; align-items: center; gap: 0.5rem; max-width: 100%; }
  .qf-file-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qf-file-list button { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.25rem; }
  .qf-file-list button:hover { color: #fff; }
  .qf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .qf-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
  .cta-section .cta-email { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); max-width: 760px; margin-left: auto; margin-right: auto; line-height: 1.9; }
  .cta-email a { display: inline-block; }
  .qf-actions button { border: none; cursor: pointer; font-family: var(--font-sans); }
  .qf-actions button:disabled { opacity: 0.6; cursor: progress; }
  .qf-status { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin: 0 !important; }
  .qf-status.error { color: #F0B4B4; }
  .qf-status.success { color: var(--forest-soft); }
  .qf-done { max-width: 560px; margin: 0 auto; border-left: 2px solid var(--forest-soft); padding: 0.5rem 0 0.5rem 1.5rem; text-align: left; }
  .qf-done h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; color: #fff; margin-bottom: 0.5rem; }
  .qf-done p { color: rgba(255,255,255,0.7); margin: 0 !important; }

  footer { background: var(--ink); color: rgba(255,255,255,0.4); padding: 2.5rem 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
  .footer-brand { display: flex; flex-direction: column; gap: 0.4rem; }
  .footer-logo { font-size: 1.2rem; line-height: 1; }
  .footer-sub { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
  .footer-meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.35); }
  .footer-links { display: flex; gap: 1.5rem; }
  .footer-links a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; }
  .footer-links a:hover { color: rgba(255,255,255,0.85); }

  @media (max-width: 900px) {
    nav { padding: 1rem 1.5rem; }
    .nav-links { gap: 1rem; }
    .nav-right { gap: 1rem; }
    .hero { grid-template-columns: 1fr; }
    .hero-left, .hero-right { padding: 3rem 1.5rem; }
    section, .why-left, .why-right { padding: 4rem 1.5rem; }
    .why { grid-template-columns: 1fr; }
    .why-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
    .services-grid, .standards-grid { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: 1fr 1fr; gap: 2.5rem 0; }
    .process-steps::before { display: none; }
    .process-steps::after { display: none; }
    .cta-section { padding: 5rem 1.5rem; }
    .qf-grid { grid-template-columns: 1fr; }
    footer { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 640px) {
    /* These links used to be display:none, which left phones with no way to
       reach Services, Why us, Process or About. They now drop from the bar in
       a panel; the quote CTA stays in the bar beside the toggle. nav is
       position:fixed, so the panel positions against it and the closed bar
       keeps its original height. */
    .nav-toggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    /* 40px stays as the touch target, but negative block margins keep it from
       driving the bar's height: the closed bar must stay ~60px or the fixed
       nav covers the hero, which only clears it by 72px of padding. */
    .nav-toggle-btn { display: flex; margin-top: -0.4rem; margin-bottom: -0.4rem; }
    /* The toggle costs 40px of bar width that was not there before, so the
       gutters, gap and CTA tighten to keep everything on one line. */
    nav { padding: 1rem 1.25rem; }
    .nav-right { gap: 0.5rem; }
    .nav-cta { padding: 0.55rem 0.85rem; font-size: 0.66rem !important; letter-spacing: 0.1em !important; }
    .nav-links {
      display: none; position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      padding: 0.25rem 1.5rem 0.75rem;
      /* Opaque, and no backdrop-filter: nesting one inside nav's own
         backdrop-filter composites to a far lower effective opacity, and the
         page showed through the open menu. */
      background: var(--white);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 8px 16px rgba(0,0,0,0.05);
    }
    .nav-toggle:checked ~ .nav-right .nav-links { display: flex; }
    .nav-links a { display: block; padding: 0.85rem 0; font-size: 0.82rem; }
    .nav-links li + li a { border-top: 1px solid var(--line-soft); }
    .nav-toggle:focus-visible ~ .nav-right .nav-toggle-btn { outline: 2px solid var(--forest); outline-offset: 4px; }
    .nav-toggle:checked ~ .nav-right .nav-toggle-btn span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-right .nav-toggle-btn span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-right .nav-toggle-btn span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
    .nav-logo { font-size: 1.2rem; }
    .hero-actions { flex-wrap: wrap; }
    /* Tighter spacing and a shorter fade on phones. The static fallback keeps
       the old wrapped layout, so only the marquee's spacing changes here. */
    .trust-bar { padding: 1.1rem 1.5rem; }
    .trust-bar.is-marquee { padding: 1.1rem 0;
      -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
      mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); }
    .trust-bar.is-marquee .trust-group { gap: 2rem; padding-right: 2rem; }
    .qf-actions button { width: 100%; padding: 1rem 2rem; }
    .cta-section .cta-email { margin-top: 3rem; }
    footer { padding-top: 3rem; }
  }

  /* Very narrow phones: the wordmark does not wrap, so it has to give up
     size or the quote button is pushed off the edge of a fixed bar (which
     reports no page overflow, so it just silently clips). */
  @media (max-width: 380px) {
    nav { padding: 1rem 1rem; }
    .nav-logo { font-size: 0.95rem; }
    .nav-right { gap: 0.4rem; }
    .nav-cta { padding: 0.5rem 0.7rem; font-size: 0.6rem !important; }
  }

  /* Honour a system request for less motion. The process section's scroll-driven
     fill is decorative, so we drop it entirely rather than shorten it — the static
     row of circles is the design this page shipped with and reads perfectly well.
     The matching script in index.html bails out on the same query. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .process-steps::after { display: none; }
    .step-circle { transition: none; }
    /* The trust bar needs nothing here: the script checks the same query and
       never adds .is-marquee, so the bar stays the static row it starts as. */
  }