/* Pronto Studio — shared design system, extracted from the v4 single-file build
   during the v5 homepage/category-page split (2026-09-04). Loaded by index.html,
   automation.html, websites.html, rendering.html, trading.html.
   privacy.html and 404.html keep their own trimmed token copies, unchanged. */

  :root {
    --paper: #f6efe1;
    --paper-alt: #efe4cf;
    --card: #fbf6ec;
    --ink: #2b2318;
    --ink-dim: #6d6250;
    --border: #e4d5bd;
    --coral: #a44424;  --coral-bg: #eedbcb;  --coral-border: #dfb6a0;
    --amber: #855a07;  --amber-bg: #eadec7;  --amber-border: #d3be95;
    --sage:  #5e673a;  --sage-bg:  #e5e0ce;  --sage-border: #c4c3a9;
    --clay:  #90514a;  --clay-bg:  #ecddd0;  --clay-border: #d8baaf;
    /* stronger, solid card fills for the gateway/category colour pass (2026-09-07) —
       each is accent blended ~1/3 toward --card, verified >=4.5:1 against --ink text;
       the *-card-border pair is the same accent darkened, verified >=3:1 against its fill.
       Kept separate from the pale *-bg tokens above, which stay untouched (chips/labels/faq
       elsewhere on the site still rely on those being faint). */
    --coral-card: #c17f66; --coral-card-border: #662a16;
    --amber-card: #ac8d53; --amber-card-border: #523804;
    --sage-card:  #929675; --sage-card-border:  #3a4024;
    --clay-card:  #b3877f; --clay-card-border:  #59322e;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
    font-size: 16px;
    padding-bottom: 76px;
  }

  @media (min-width: 900px) {
    body { padding-bottom: 0; }
  }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
  a { color: var(--coral); }
  img { max-width: 100%; }

  /* ---------- header / nav ---------- */
  header.site {
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(246,239,225,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  header.site .wrap { display: flex; align-items: center; justify-content: space-between; }
  .logo {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    text-decoration: none;
  }
  .logo::before { content: "| "; color: var(--coral); display: inline-block; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
  .logo:hover::before { content: "\26A1"; transform: scale(1.3) rotate(-8deg); }
  nav.top-nav { display: none; }
  @media (min-width: 900px) {
    nav.top-nav { display: flex; gap: 26px; }
    nav.top-nav a { text-decoration: none; color: var(--ink-dim); font-weight: 600; font-size: 0.95rem; }
    nav.top-nav a:hover { color: var(--coral); }
  }

  /* ---------- mobile bottom nav ---------- */
  nav.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px calc(10px + var(--safe-bottom));
    background: rgba(251,246,236,0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px -12px rgba(43,35,24,.2);
    transform: translateY(100%);
    transition: transform .3s ease;
  }
  nav.bottom-nav.visible { transform: translateY(0); }
  nav.bottom-nav a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: var(--ink-dim);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 4px;
    border-radius: 10px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  nav.bottom-nav a.cta {
    flex: 1.4;
    background: var(--coral);
    color: #fff8f2;
    font-weight: 700;
    box-shadow: 0 6px 16px -6px rgba(181,76,40,.5);
  }
  @media (min-width: 900px) {
    nav.bottom-nav { display: none !important; }
  }

  /* ---------- hero (homepage only, compressed for a one-viewport traffic controller, v5.1:
     the illustration moved into the bento grid's center cell, hero is text-only now) ---------- */
  .hero { padding: 10px 0 8px; }
  .hero .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .hero .copy { max-width: 560px; }
  @media (min-width: 800px) {
    .hero { padding: 16px 0 12px; }
  }
  .hero h1 {
    font-size: clamp(1.4rem, 4.6vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0 0 6px;
    text-wrap: balance;
  }
  .hero .accent { position: relative; color: var(--coral); }
  .hero .accent::after {
    content: "";
    position: absolute; left: -2px; right: -2px; bottom: -5px; height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M1 7 Q 8 2, 15 7 T 29 7 T 43 7 T 59 7' stroke='%23a44424' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-size: 20px 5px; z-index: -1;
  }
  .hero p.lead { font-size: 0.88rem; color: var(--ink-dim); margin: 0 0 10px; max-width: 46ch; }
  .hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
  /* one-viewport hero, desktop: the lead line must sit on one line at 1366px+ (item 1) and the
     CTA button becomes full container width, matching the bento/other-strip/trust-strip banners
     below (item 6) — the headline itself keeps its narrower 620px column untouched here, that
     width is an unshipped experiment pending approval, see the hero variant preview */
  @media (min-width: 640px) {
    .hero .copy { max-width: 100%; }
    .hero h1 { max-width: 620px; margin: 0 auto 6px; }
    .hero p.lead { max-width: none; margin-left: auto; margin-right: auto; }
    .hero .btn { width: 100%; }
  }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--coral); color: #fff8f2;
    font-weight: 700; padding: 14px 24px; border-radius: 14px;
    text-decoration: none; font-size: 1rem; border: none; cursor: pointer;
    box-shadow: 0 10px 22px -8px rgba(181,76,40,0.5);
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
    min-height: 44px;
  }
  .btn:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -8px rgba(181,76,40,0.55); }
  .btn:active { transform: translateY(-1px) scale(0.98); }
  .btn.ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1.5px solid var(--ink-dim); opacity: .85; }
  .btn.ghost:hover { border-color: var(--ink); opacity: 1; transform: none; }

  /* ---------- sections generic ---------- */
  section { padding: 44px 0; }
  .section-head { margin: 0 0 22px; }
  .kicker {
    font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: .11em;
    color: var(--coral); font-weight: 700; margin: 0 0 8px;
    display: flex; align-items: center; gap: 12px;
  }
  /* every kicker on a category page (main heading, How it works/Fees/yours-properly,
     and the bottom contact kicker) takes that page's own accent — deliberate per-page
     identity, replaces an earlier positional nth-of-type scheme that coloured kickers
     by their sibling index rather than by category (2026-09-07 colour pass) */
  body.page-cat-automations .kicker { color: var(--coral); }
  body.page-cat-websites .kicker { color: var(--amber); }
  body.page-cat-rendering .kicker { color: var(--sage); }
  body.page-cat-trading .kicker { color: var(--clay); }
  body.page-cat-automations .kicker-icon { background: var(--coral-bg); }
  body.page-cat-websites .kicker-icon { background: var(--amber-bg); }
  body.page-cat-rendering .kicker-icon { background: var(--sage-bg); }
  body.page-cat-trading .kicker-icon { background: var(--clay-bg); }
  h2.section-title { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin: 0 0 8px; letter-spacing: -0.01em; text-wrap: balance; }
  .section-sub { color: var(--ink-dim); margin: 0; max-width: 62ch; }
  .section-sub--wide { max-width: none; }
  #work .section-sub { white-space: nowrap; max-width: none; }
  @media (max-width: 640px) { #work .section-sub { white-space: normal; } }

  /* ---------- bento services grid (homepage gateway, v5: 4 equal cards, 2x2 on mobile;
     v5.1: 3-column bento on desktop, with the hero illustration filling the center cell) ---------- */
  .bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bento-art { display: none; }
  @media (min-width: 640px) {
    .bento {
      gap: 12px;
      grid-template-columns: 1fr 1.1fr 1fr;
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
        "automations art websites"
        "rendering art trading";
      align-items: stretch;
    }
    .b-automations { grid-area: automations; }
    .b-websites { grid-area: websites; }
    .b-rendering { grid-area: rendering; }
    .b-trading { grid-area: trading; }
    .bento-art {
      grid-area: art; display: block; position: relative; border-radius: 18px; overflow: hidden;
      background: var(--card); box-shadow: 0 1px 2px rgba(43,35,24,.05), 0 12px 26px -16px rgba(43,35,24,.2);
      min-height: 0; min-width: 0;
    }
    .bento-art img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  }
  .bcard {
    display: block; text-decoration: none; color: inherit;
    border-radius: 16px; padding: 12px; position: relative; overflow: hidden;
    box-shadow: 0 1px 2px rgba(43,35,24,.05), 0 12px 26px -16px rgba(43,35,24,.2);
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
    min-height: 44px;
  }
  @media (min-width: 640px) { .bcard { border-radius: 18px; padding: 14px 16px; height: 100%; box-sizing: border-box; } }
  .bcard:hover, .bcard:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 38px -18px rgba(43,35,24,.3); }
  .bcard .icon {
    width: 38px; height: 38px; border-radius: 10px; overflow: hidden;
    margin-bottom: 6px; background: var(--card); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 1px 2px rgba(43,35,24,.08);
  }
  @media (min-width: 640px) { .bcard .icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px; } }
  .bcard .icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .kicker-icon { width: 76px; height: 76px; border-radius: 18px; object-fit: cover; flex-shrink: 0; box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 1px 2px rgba(43,35,24,.08); }
  .bcard h3 { margin: 0 0 4px; font-size: 0.92rem; letter-spacing: -0.01em; line-height: 1.2; }
  @media (min-width: 640px) { .bcard h3 { margin: 0 0 5px; font-size: 1.02rem; } }
  .bcard .promise { display: none; }
  @media (min-width: 640px) { .bcard .promise { display: block; margin: 0 0 8px; color: var(--ink); font-size: 0.84rem; line-height: 1.3; } }
  .bcard .price { font-family: var(--mono); font-weight: 700; font-size: 0.7rem; display: inline-block; padding: 3px 8px; border-radius: 7px; color: #fff8f2; }
  @media (min-width: 640px) { .bcard .price { font-size: 0.78rem; padding: 4px 10px; } }

  /* Solid, clearly-coloured card fills (2026-09-07 colour pass) — each card uses its own
     accent from the *-card tokens above, with a matching darker border and a solid full-
     strength price chip. .promise switched from --ink-dim to --ink above because --ink-dim
     drops under 3:1 against these stronger fills; verified per-colour in the CSS comment above. */
  .b-automations { background: var(--coral-card); border: 1.5px solid var(--coral-card-border); }
  .b-automations .price { background: var(--coral); }
  .b-websites { background: var(--amber-card); border: 1.5px solid var(--amber-card-border); }
  .b-websites .price { background: var(--amber); }
  .b-rendering { background: var(--sage-card); border: 1.5px solid var(--sage-card-border); }
  .b-rendering .price { background: var(--sage); }
  .b-trading { background: var(--clay-card); border: 1.5px solid var(--clay-card-border); }
  .b-trading .price { background: var(--clay); }

  /* ---------- "something else" strip (below the gateway grid, v5.3: pushed to a real
     fifth path rather than a footnote — solid coral (not ink), bigger padding and text,
     icon matched exactly to the four category-card icon sizes. Cream text/arrow on this
     coral fill measures 5.81:1, clears WCAG AA (4.5:1) for body text with room to spare —
     verified 2026-09-07, not eyeballed. ---------- */
  .other-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: var(--coral); border: 1.5px solid var(--coral-card-border); border-radius: 16px;
    padding: 16px 18px; text-decoration: none; color: #fff8f2; min-height: 44px;
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
    box-shadow: 0 12px 26px -16px rgba(102,42,22,.5);
  }
  @media (min-width: 640px) { .other-strip { padding: 22px 28px; } }
  .other-strip:hover, .other-strip:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(102,42,22,.55); }
  .other-strip .icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; overflow: hidden; background: var(--card); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 1px 2px rgba(43,35,24,.08); }
  @media (min-width: 640px) { .other-strip .icon { width: 44px; height: 44px; border-radius: 12px; } }
  .other-strip .icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .other-strip span.label { font-weight: 800; font-size: 1rem; color: #fff8f2; }
  @media (min-width: 640px) { .other-strip span.label { font-size: 1.2rem; } }
  .other-strip .arrow { font-size: 1.5rem; font-weight: 800; color: #fff8f2; flex-shrink: 0; }

  /* ---------- scenario showcase ---------- */
  .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
  @media (max-width: 719px) { .chip-row { display: none; } }
  .chip {
    font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--coral-border); background: var(--card); color: var(--ink-dim);
    transition: all .16s ease; min-height: 44px;
  }
  .chip:hover { border-color: var(--coral); }
  .chip[aria-selected="true"] { background: var(--coral); color: #fff8f2; border-color: var(--coral); box-shadow: 0 8px 16px -8px rgba(181,76,40,.5); }

  .scenario-track {
    display: block;
  }
  @media (min-width: 720px) {
    .scenario-track { position: relative; }
    .scenario-card { display: none; }
    .scenario-card[aria-current="true"] { display: block; }
  }
  @media (max-width: 719px) {
    .scenario-track {
      display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
      padding-bottom: 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px;
      -webkit-overflow-scrolling: touch;
    }
    .scenario-card { scroll-snap-align: center; flex: 0 0 88%; }
  }

  .scenario-card {
    background: var(--card); border: 1px solid var(--coral-border); border-radius: 24px;
    padding: 26px 26px; box-shadow: 0 1px 2px rgba(43,35,24,.05), 0 16px 34px -20px rgba(43,35,24,.22);
  }
  .scenario-card .label {
    display: inline-block; font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 6px; margin-bottom: 8px;
  }
  .scenario-card .label.headache { color: var(--coral); background: var(--coral-bg); }
  .scenario-card .label.fix { color: var(--sage); background: var(--sage-bg); }
  .scenario-card .problem { margin: 0 0 18px; color: var(--ink-dim); }
  .scenario-card .solution { margin: 0; font-weight: 600; font-size: 1.04rem; }
  .scenario-card .preview { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
  .preview-box {
    border-radius: 14px; padding: 11px 15px; font-size: 0.88rem; line-height: 1.5; max-width: 92%;
    background: var(--paper-alt); border: 1px solid var(--coral-border); border-bottom-left-radius: 4px;
  }
  .preview-box.out { background: var(--coral-bg); border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; margin-left: auto; }

  .dots { display: none; justify-content: center; gap: 7px; margin-top: 14px; }
  @media (max-width: 719px) { .dots { display: flex; } }
  .dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral-border); transition: background .2s ease, transform .2s ease; }
  .dots .dot.active { background: var(--coral); transform: scale(1.3); }

  /* ---------- work bento ---------- */
  .work-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 640px) {
    .work-grid { grid-template-columns: 1fr 1fr; }
    #rendering .work-grid > .wcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
    #rendering .work-grid > .wcard:last-child:nth-child(odd) .zoomable--render { aspect-ratio: 8 / 3; }
  }
  /* ---------- websites showcase (2026-09-08): one full-width screenshot per sample,
     stacked, instead of a desktop crop paired with a small phone crop — replaces the
     old #websites nth-child(3) special case, page-scoped so automation/rendering/trading
     keep their own .work-grid/.zoomable treatment untouched */
  #websites .work-grid.work-grid--showcase { grid-template-columns: 1fr; gap: 22px; }
  #websites .wcard--showcase .zoomable--site-desktop {
    aspect-ratio: 2.06 / 1; border-radius: 0; border: none;
  }
  /* plumber/bakery source the real full-page screenshot here (not the small auto-cropped
     "zoom" detail asset used elsewhere on the site) and show its top/hero section — the
     zoom-*-desktop.jpg crops were composed as tight mid-page detail teasers for a small
     card, and blew up to full width they cut straight through headline text. Trainer's own
     zoom asset is already a proper hero crop (redone for this exact purpose, 2026-09-02) so
     it needs no change of source, just the same top-anchored crop for consistency. */
  #websites .wcard--showcase .zoomable--site-desktop img { object-position: top center; }
  #websites .wcard--showcase .wc-body { padding: 14px 18px 18px; }
  .wcard {
    background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    overflow: hidden; box-shadow: 0 1px 2px rgba(43,35,24,.05), 0 10px 24px -16px rgba(43,35,24,.2);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .wcard:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(43,35,24,.28); }
  .wcard > summary { list-style: none; cursor: pointer; padding: 0; min-height: 44px; }
  .wcard > summary::-webkit-details-marker { display: none; }
  .wcard .wc-body { padding: 16px 18px; }
  .wcard .tag {
    display: inline-block; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--coral); background: var(--coral-bg); border: 1px solid var(--coral-border); padding: 3px 8px; border-radius: 5px; margin-bottom: 8px;
  }
  .wcard h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
  .wcard[open] summary h3 { color: var(--coral); }
  .wcard .wc-detail { padding: 0 18px 18px; }
  .wcard .wc-detail p { color: var(--ink-dim); margin: 0 0 14px; font-size: 0.94rem; }
  .media-caption { display: block; color: var(--ink-dim); font-size: 0.78rem; font-style: italic; margin: 8px 0 0; }

  /* ---------- zoomable image + lightbox ---------- */
  .zoomable {
    position: relative; display: block; width: 100%; cursor: zoom-in;
    border-radius: 12px; overflow: hidden; background: var(--paper-alt);
    border: 1px solid var(--border);
  }
  .zoomable img, .zoomable video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .zoomable .zoomable-hint {
    position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(43,35,24,.64); color: #fff8f2; display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(.85); transition: opacity .16s ease, transform .16s ease; pointer-events: none;
  }
  .zoomable:hover .zoomable-hint, .zoomable:focus-visible .zoomable-hint { opacity: 1; transform: scale(1); }
  .zoomable:focus-visible { outline: 2.5px solid var(--coral); outline-offset: 2px; }
  .zoomable--tile { aspect-ratio: 2.6 / 1; border-radius: 0; border: none; }
  .zoomable--detail { aspect-ratio: 4 / 3; }
  .zoomable--render { aspect-ratio: 4 / 3; border-radius: 0; border: none; }
  .zoomable--wide { aspect-ratio: 16 / 10; }
  .zoomable--site-desktop { aspect-ratio: 15 / 10; }
  .zoomable--site-mobile { aspect-ratio: 9 / 17; }

  .wc-media-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
  .wc-media-grid .zoomable { flex: 1 1 120px; max-width: 160px; }
  .wc-media-grid--trading { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
  @media (max-width: 640px) { .wc-media-grid--trading { grid-template-columns: 1fr; } }

  .lightbox {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease;
  }
  .lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .lightbox-backdrop { position: absolute; inset: 0; background: rgba(20,15,8,.8); backdrop-filter: blur(2px); }
  .lightbox-figure {
    position: relative; z-index: 1; margin: 0; max-width: min(92vw, 1100px); max-height: 90vh;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    transform: scale(.96); transition: transform .22s cubic-bezier(.22,1,.36,1);
  }
  .lightbox.is-open .lightbox-figure { transform: scale(1); }
  .lightbox-figure img, .lightbox-figure video { max-width: 100%; max-height: 76vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); background: var(--card); object-fit: contain; }
  .lightbox-figure figcaption { color: #f3ece0; font-size: 0.88rem; text-align: center; max-width: 62ch; }
  .lightbox-close {
    position: absolute; top: -50px; right: 0; display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.14); color: #fff; border: none; border-radius: 999px;
    padding: 9px 16px; font-weight: 700; font-size: 0.86rem; cursor: pointer; min-height: 44px;
  }
  .lightbox-close:hover { background: rgba(255,255,255,.24); }
  @media (max-width: 640px) {
    .lightbox-close { top: auto; bottom: -54px; right: 50%; transform: translateX(50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lightbox, .lightbox-figure { transition: none; }
  }

  /* ---------- trust zone ---------- */
  .trust-zone {
    background: var(--card); border: 1px solid var(--border); border-radius: 28px;
    padding: 8px 8px 28px;
  }
  .trust-block { padding: 28px 24px 8px; }
  .trust-block + .trust-block { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 28px; }

  .process { display: grid; grid-template-columns: 1fr; gap: 4px; }
  @media (min-width: 640px) { .process { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
  .step .num {
    display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
    color: var(--coral); background: var(--coral-bg); border-radius: 7px; padding: 3px 9px; margin-bottom: 8px;
  }
  .step .body { font-weight: 700; font-size: 0.98rem; }
  .step .body p { color: var(--ink-dim); font-weight: 400; margin: 4px 0 0; font-size: 0.9rem; }
  .step-arrow { display: block; color: var(--amber); margin: 8px 0; opacity: .8; }
  @media (min-width: 640px) { .step-arrow { display: none; } }

  .fee-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 640px) { .fee-grid { grid-template-columns: 1fr 1fr; } }
  .fee-card { background: var(--paper); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; }
  .fee-card .fee-name { font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
  .fee-card .fee-price { font-size: 1.5rem; font-weight: 800; color: var(--coral); margin-bottom: 8px; }
  .fee-card p { color: var(--ink-dim); margin: 0; font-size: 0.92rem; }
  .fee-note { color: var(--ink-dim); font-size: 1rem; margin: 0 0 22px; }

  ul.plain-list { margin: 0; padding-left: 20px; color: var(--ink-dim); }
  .section-sub + ul.plain-list { margin-top: 16px; }
  ul.plain-list li { margin-bottom: 12px; }

  .faq-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  @media (min-width: 640px) { .faq-grid { grid-template-columns: 1fr 1fr; } }
  details.faq { background: var(--paper); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
  details.faq summary { cursor: pointer; font-weight: 700; font-size: 0.98rem; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary::after { content: "+"; color: var(--coral); font-size: 1.2rem; }
  details.faq[open] summary::after { content: "\2212"; }
  details.faq p { color: var(--ink-dim); margin: 10px 0 0; font-size: 0.92rem; }

  /* ---------- contact ---------- */
  .contact-zone { background: linear-gradient(155deg, var(--coral-bg), var(--card) 40%); border: 1px solid var(--coral-border); border-radius: 28px; padding: 32px 24px; }
  @media (min-width: 640px) { .contact-zone { padding: 40px 44px; } }
  .quote-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
  .quote-form label { font-size: 0.92rem; color: var(--ink-dim); font-weight: 700; display: flex; flex-direction: column; gap: 7px; }
  .quote-form input, .quote-form select, .quote-form textarea {
    width: 100%; font-family: inherit; font-size: 1rem; font-weight: 400;
    padding: 13px 15px; background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; color: var(--ink);
    min-height: 44px;
  }
  .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: var(--coral); }
  .quote-form textarea { resize: vertical; }
  .type-fields { display: none; flex-direction: column; gap: 16px; border-top: 1px dashed var(--coral-border); padding-top: 16px; }
  .form-reassurance { color: var(--ink-dim); font-size: 0.85rem; margin: 10px 0 0; }
  .form-success { background: var(--sage-bg); border: 1px solid var(--sage-border); border-radius: 14px; padding: 20px 22px; margin-top: 16px; }
  .form-success p { margin: 0; color: var(--ink); }

  /* ---------- footer (2026-09-07: font scale brought down to a proper footer size —
     was 0.86rem/13.76px for the top row, oversized next to the 0.76rem legal line; both
     now sit in the ~12px neighbourhood the old design used. Colour unchanged, so contrast
     is unchanged too (5.21:1 ink-dim-on-paper, verified live, clears AA's 4.5:1 for small
     text regardless of size — contrast is a colour ratio, not a size one) ---------- */
  footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--ink-dim); font-size: 0.75rem; margin-top: 20px; }
  footer .wrap { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 10px; text-align: center; }
  footer .wrap .dot { opacity: .6; }
  .legal-line { color: var(--ink-dim); font-size: 0.7rem; margin: 10px auto 0; max-width: 680px; text-align: center; }

  .to-top {
    position: fixed; bottom: 90px; right: 20px; width: 44px; height: 44px; border-radius: 50%;
    background: var(--coral); color: #fff8f2; display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 1.2rem; box-shadow: 0 8px 18px -6px rgba(43,35,24,.35); z-index: 80;
    transition: transform .15s ease, opacity .15s ease;
  }
  @media (min-width: 900px) { .to-top { bottom: 28px; } }
  .to-top:hover { transform: translateY(-3px); }

  /* ---------- reveal / motion ---------- */
  .reveal { transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
  .js-reveal .reveal { opacity: 0; transform: translateY(14px); }
  .js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .scenario-track { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

  a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2.5px solid var(--coral); outline-offset: 2px; }

  /* ---------- trust strip (homepage only, v5.1: three centered rows on mobile, never a
     lopsided 2+1 wrap; one evenly-gapped centered row on desktop) ---------- */
  ul.plain-list.trust-strip {
    display: flex; flex-direction: column; align-items: center; gap: 8px; list-style: none; padding-left: 0; margin: 12px 0 0;
  }
  ul.plain-list.trust-strip li { margin: 0; font-weight: 600; color: var(--ink); font-size: 0.78rem; white-space: nowrap; text-align: center; }
  ul.plain-list.trust-strip li::before { content: "\2713  "; color: var(--sage); font-weight: 800; }
  @media (min-width: 640px) {
    ul.plain-list.trust-strip { flex-direction: row; justify-content: center; gap: 32px; margin-top: 18px; }
    ul.plain-list.trust-strip li { font-size: 0.86rem; }
  }

  /* ---------- homepage-only compaction + spacing rhythm (v5.1: one consistent gap scale
     between hero / grid / something-else strip / trust line / footer, mobile and desktop) ---------- */
  body.page-home #services { padding: 12px 0 0; }
  @media (min-width: 640px) { body.page-home #services { padding: 18px 0 0; } }
  body.page-home .section-head { margin: 0 0 10px; }
  /* "What we build" is the page's one real section title (also promoted to h2, item 8) —
     sized to roughly match the header wordmark's visual weight (item 2), not the smaller
     kicker size other pages use for their multiple sub-labels */
  body.page-home .kicker { margin: 0; justify-content: center; font-size: clamp(1rem, 2.6vw, 1.3rem); }
  @media (min-width: 640px) { body.page-home .kicker { justify-content: flex-start; } }
  body.page-home header.site { padding: 10px 0; }
  @media (min-width: 640px) { body.page-home header.site { padding: 16px 0; } }
  body.page-home .other-strip { margin-top: 12px; }
  @media (min-width: 640px) { body.page-home .other-strip { margin-top: 18px; } }
  body.page-home footer { padding: 16px 0; margin-top: 12px; }
  @media (min-width: 640px) { body.page-home footer { padding: 18px 0; margin-top: 18px; } }
  body.page-home { padding-bottom: 0; }
  @media (max-width: 899px) { body.page-home { padding-bottom: 0; } }

  /* ---------- category-page anchor menu (v5) ---------- */
  .cat-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
  .cat-nav a {
    font-family: var(--mono); font-size: 0.78rem; font-weight: 700; text-decoration: none;
    color: var(--ink-dim); background: var(--card); border: 1px solid var(--border);
    padding: 7px 13px; border-radius: 999px; min-height: 36px; display: inline-flex; align-items: center;
  }
  .cat-nav a:hover { color: var(--coral); border-color: var(--coral-border); }