body { margin: 0; background: #121110; }
  a { color: #d9663a; text-decoration: none; }
  a:hover { color: #f0805a; }
  ::selection { background: #b4501f; color: #fff; }
  /* Two-layer focus ring (GOV.UK pattern): the dark inner ring keeps the orange
     outline legible even on the orange solid buttons. */
  a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid #d9663a; outline-offset: 2px; border-radius: 3px; box-shadow: 0 0 0 5px rgba(18,17,16,.95); }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }
  [id] { scroll-margin-top: 96px; }
  html { scrollbar-width: thin; scrollbar-color: #8a8377 #121110; scrollbar-gutter: stable; }
  [data-count], [data-live], [data-delta] { font-variant-numeric: tabular-nums; }
  /* Cross-document view transitions: additive; browsers without support navigate normally. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 180ms ease-out both vt-out; }
  ::view-transition-new(root) { animation: 260ms ease-out both vt-in; }
  @keyframes vt-out { to { opacity: 0 } }
  @keyframes vt-in { from { opacity: 0 } }
  /* Scroll-driven reveals. Default state is VISIBLE, so printing, no-JS and
     unsupported browsers always show content (fixes the blank-print defect). */
  [data-reveal] { opacity: 1; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      [data-reveal] { animation: rise 1ms linear both; animation-timeline: view(); animation-range: entry 8% cover 26%; }
    }
  }
  @keyframes rise { from { opacity: 0; translate: 0 14px } }
  /* Reading progress: long sequential pages only (case studies, process). */
  .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: #d9663a; transform-origin: 0 50%; transform: scaleX(0); z-index: 30; }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .progress { animation: grow linear both; animation-timeline: scroll(root); }
    }
  }
  @keyframes grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
  /* Film-grain overlay: kills gradient banding on the near-black ground. */
  body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
  /* Print: the site is the leave-behind. Every page prints as a document on
     white, with link targets spelled out, so a printed /method/ replaces the
     PDF one-pager and cannot go stale. */
  @media print {
    @page { size: A4; margin: 18mm 16mm 20mm; }
    [data-reveal], [data-stagger] { opacity: 1 !important; transform: none !important; animation: none !important; }
    body::after, .progress { display: none !important; }
    header, footer, dialog, [data-print-hide] { display: none !important; }
    html, body { background: #fff !important; color: #17150f !important; }
    /* The page wrapper carries the near-black ground as an inline style, so it
       has to be overridden explicitly or the whole sheet prints dark. */
    #top, #top > div { background: #fff !important; color: #17150f !important; }
    main { max-width: none !important; padding: 0 !important; margin: 0 !important; }
    main * { background: transparent !important; color: #17150f !important; text-shadow: none !important; }
    main a { color: #17150f !important; text-decoration: underline; }
    /* Spell out where a link went — a printed page has no hover. */
    main a[href^="/"]::after { content: " (alotlabs.com" attr(href) ")"; font-size: 9.5pt; color: #57534a !important; }
    main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9.5pt; color: #57534a !important; word-break: break-all; }
    main a[href^="mailto"]::after, main a[href^="#"]::after { content: ""; }
    main h1 { font-size: 26pt !important; line-height: 1.06 !important; }
    main h2 { font-size: 15pt !important; }
    main h3 { font-size: 12.5pt !important; }
    main p, main li, main div { font-size: 10.5pt !important; line-height: 1.5 !important; }
    main p { max-width: 66ch !important; }
    main h1, main h2, main h3 { break-after: avoid-page; }
    main [data-reveal], main section, main article { break-inside: avoid-page; }
    main [style*="border"] { border-color: #cfc9bd !important; }
    [data-print-only] { display: block !important; }
  }
  [data-print-only] { display: none; }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    /* Named morphs (dep-*, lab-*) animate their own groups; silence those too. */
    ::view-transition-group(*) { animation: none !important; }
  }
  @media (max-width: 1000px) {
    [data-cols] { grid-template-columns: 1fr !important; }
    [data-sticky] { position: static !important; }
    [data-cols="4"] { grid-template-columns: 1fr 1fr !important; }
    [data-cols="process"] { grid-template-columns: 52px 1fr !important; gap: 10px 24px !important; }
    [data-cols="process"] > div:last-child { grid-column: 2 !important; }
  }
  /* Header nav children are <a> after the build (and [data-nav] divs in the canvas). */
  @media (max-width: 1120px) {
    header nav > a, header nav > [data-nav], header nav > sc-if { padding-left: 8px !important; padding-right: 8px !important; font-size: 13.5px !important; }
    header nav > *:last-child { margin-left: 8px !important; }
  }
  @media (max-width: 680px) {
    [data-cols="4"] { grid-template-columns: 1fr !important; }
  }
  /* Mobile header: collapse to wordmark · Book the briefing · menu button. */
  [data-menu-open] { display: none; }
  @media (max-width: 768px) {
    header nav > * { display: none !important; }
    header nav > [data-menu-cta] { display: inline-block !important; margin-left: 0 !important; }
    header nav > [data-menu-open] { display: inline-flex !important; }
  }
  dialog[data-menu] { width: min(92vw, 340px); margin: 10px 10px 0 auto; padding: 14px; background: #171514; color: #f2ede6; border: 1px solid rgba(242,237,230,.16); border-radius: 6px; font-family: Archivo, system-ui, sans-serif; }
  dialog[data-menu]::backdrop { background: rgba(18,17,16,.62); }
  dialog[data-menu] .mgrp { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a8377; margin: 16px 0 4px; padding: 0 12px; }
  dialog[data-menu] .mgrp:first-of-type { margin-top: 4px; }
  dialog[data-menu] a, dialog[data-menu] [data-nav] { display: block; padding: 12px; font-size: 16px; color: #f2ede6; border-radius: 3px; cursor: pointer; }
  dialog[data-menu] a:hover, dialog[data-menu] [data-nav]:hover { background: #121110; color: #f2ede6; }
.nl,.nl:hover{color:inherit}
a{cursor:pointer}
[data-dep-slider]::-webkit-scrollbar{display:none}
.hv1:hover{color:#f2ede6 !important}
.hv2:hover{background:#f0805a !important;transform:translateY(-1px) !important}
.hv3:hover{border-color:#d9663a !important;transform:translateY(-1px) !important}
.hv4:hover{color:#f0805a !important}
.hv5:hover{border-color:#d9663a !important}
.hv6:hover{background:#191715 !important;border-color:rgba(217,102,58,.5) !important}
.hv7:hover{color:rgba(217,102,58,.16) !important}
.hv8:hover{background:#d9663a !important;color:#121110 !important}
.hv9:hover{color:#d9663a !important}
.hv10:hover{background:#191715 !important}
.hv11:hover{color:#f2ede6 !important;transform:translateY(-1px) !important}
.btn-solid:hover{background:#f0805a !important;transform:translateY(-1px) !important}
.btn-ghost:hover{border-color:#d9663a !important;transform:translateY(-1px) !important}
.fld::placeholder{color:#8a8377}
.fld:focus-visible{outline:2px solid #d9663a;outline-offset:2px}
.fld:hover{border-color:rgba(242,237,230,.32)}