/* Self hosted, so the page never depends on an outside stylesheet host. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGHInHEVA.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGGInHEVA.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{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.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{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0She1YmV.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{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0SZe1Q.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{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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;}

/* Texture, motion, pop-ups, the dark workshop band and the deposit checkout. */

/* Halftone paper texture, the print reference. Decorative only. */
.ab-glow { position: relative; }
.ab-glow > .ab-wrap { position: relative; z-index: 1; }
.ab-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle at center, rgba(16, 26, 24, 0.11) 1.1px, transparent 1.2px);
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 0%, #000, transparent 72%);
  mask-image: radial-gradient(120% 90% at 80% 0%, #000, transparent 72%);
}
.ab-glow-red::before { background-image: radial-gradient(circle at center, rgba(226, 85, 63, 0.22) 1.2px, transparent 1.3px); }
.ab-glow-pine::before { background-image: radial-gradient(circle at center, rgba(31, 95, 75, 0.18) 1.2px, transparent 1.3px); -webkit-mask-image: radial-gradient(120% 90% at 10% 100%, #000, transparent 70%); mask-image: radial-gradient(120% 90% at 10% 100%, #000, transparent 70%); }

/* Reveals, transform only so every section reads at rest. */
.ab-rv { transform: translateY(24px); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1); }
.ab-rv.in { transform: none; }
.ab-rv[data-d="1"] { transition-delay: 0.07s; }
.ab-rv[data-d="2"] { transition-delay: 0.14s; }
.ab-rv[data-d="3"] { transition-delay: 0.21s; }
.ab-rv[data-d="4"] { transition-delay: 0.28s; }

/* Ticker */
.ab-ticker { overflow: hidden; background: var(--ab-red); color: var(--ab-paper); border-top: 2px solid var(--ab-ink); border-bottom: 2px solid var(--ab-ink); padding: 12px 0; }
.ab-ticker-track { display: flex; width: max-content; animation: abRoll 40s linear infinite; }
.ab-ticker span { font-family: var(--ab-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0 20px; white-space: nowrap; display: flex; align-items: center; gap: 20px; }
.ab-ticker span::after { content: ""; width: 7px; height: 7px; background: var(--ab-paper); }
.ab-ticker span:nth-child(3n + 2)::after { background: var(--ab-sun); }
.ab-ticker span:nth-child(3n + 3)::after { background: var(--ab-ink); }
@keyframes abRoll { to { transform: translateX(-50%); } }

/* Colour roles */
.ab-pillar:nth-child(2) b { color: var(--ab-pine); }
.ab-pillar:nth-child(3) b { color: var(--ab-blue); }
.ab-step:nth-child(2) { border-top-color: var(--ab-pine); }
.ab-step:nth-child(2) b { color: var(--ab-pine); }
.ab-step:nth-child(3) { border-top-color: var(--ab-blue); }
.ab-step:nth-child(3) b { color: var(--ab-blue); }
.ab-step:nth-child(4) { border-top-color: var(--ab-sun); }
.ab-step:nth-child(4) b { color: var(--ab-ink); }
.ab-row img { transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); }
.ab-row:hover img { transform: translateY(-3px) rotate(-5deg) scale(1.08); }
.ab-row::after { content: "+"; font-family: var(--ab-mono); color: var(--ab-faint); justify-self: end; transition: color 0.25s, transform 0.3s; }
.ab-row:hover::after { color: var(--ab-red); transform: rotate(90deg); }
@media (max-width: 820px) { .ab-row::after { display: none; } }
.ab-navlinks a:not(.ab-navbuy) { position: relative; }
.ab-navlinks a:not(.ab-navbuy)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--ab-red); transform: scaleX(0); transform-origin: right; transition: transform 0.3s; }
.ab-navlinks a:not(.ab-navbuy):hover::after { transform: scaleX(1); transform-origin: left; }

/* The dark workshop band, the one place the page goes to ink. */
.ab-dark { background: var(--ab-dark); color: var(--ab-paper); border-top: 2px solid var(--ab-ink); border-bottom: 2px solid var(--ab-ink); }
.ab-dark .scroll-scrub__copy::before { display: none !important; }
.ab-dark .scroll-scrub__kicker,
.ab-dark .scroll-scrub__title,
.ab-dark .scroll-scrub__body,
.ab-dark .scroll-scrub__tags li { text-shadow: 0 1px 18px rgba(4, 9, 10, 0.6), 0 0 42px rgba(4, 9, 10, 0.4); }
.ab-dark .scroll-scrub__title { font-family: var(--ab-display); font-weight: 700; letter-spacing: -0.035em; }
.ab-dark .scroll-scrub__kicker { font-family: var(--ab-mono); }
.ab-dark .ab-cta-primary { box-shadow: 6px 6px 0 rgba(244, 245, 242, 0.9); }

/* Pop-ups */
.ab-back { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(16, 26, 24, 0.7); animation: abFade 0.22s ease both; }
@keyframes abFade { from { opacity: 0; } to { opacity: 1; } }
.ab-modal { position: relative; width: 100%; max-width: 640px; max-height: 88vh; overflow: auto; background: var(--ab-card); border: 2px solid var(--ab-ink); box-shadow: 10px 10px 0 var(--ab-ink); animation: abPop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.ab-modal-sm { max-width: 520px; }
@keyframes abPop { from { transform: translate(8px, 22px); } to { transform: none; } }
.ab-modal-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; background: var(--ab-card); border-bottom: 2px solid var(--ab-ink); z-index: 2; }
.ab-modal-head p { font-family: var(--ab-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ab-faint); }
.ab-modal-head h3 { margin-top: 3px; }
.ab-x { width: 38px; height: 38px; flex: none; border: 2px solid var(--ab-ink); background: var(--ab-paper); color: var(--ab-ink); cursor: pointer; font-family: var(--ab-mono); line-height: 1; transition: background 0.2s, color 0.2s; }
.ab-x:hover { background: var(--ab-red); color: var(--ab-paper); }
.ab-modal-body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 15px; }
.ab-modal-body p { color: var(--ab-muted); }
.ab-modal-ico { width: 60px; height: 60px; }
.ab-chip { display: inline-flex; align-self: flex-start; align-items: center; font-family: var(--ab-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-paper); background: var(--ab-pine); padding: 7px 11px; }

/* Floating deposit prompt */
.ab-float { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: flex; transform: translateY(160%); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }
.ab-float.in { transform: none; }
.ab .ab-float a[href] { display: flex; align-items: center; gap: 10px; background: var(--ab-red); color: var(--ab-paper); text-decoration: none; padding: 15px 19px; font-family: var(--ab-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; border: 2px solid var(--ab-ink); }
.ab .ab-float a[href] em { position: relative; width: 9px; height: 9px; background: var(--ab-paper); font-style: normal; }
.ab .ab-float a[href] em::before { content: ""; position: absolute; inset: -5px; border: 2px solid var(--ab-paper); animation: abPing 2.2s ease-out infinite; }
@keyframes abPing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
.ab-float button { border: 2px solid var(--ab-ink); border-left: 0; background: var(--ab-card); color: var(--ab-ink); width: 44px; cursor: pointer; font-family: var(--ab-mono); }
.ab-float button:hover { background: var(--ab-sun); }
@media (max-width: 560px) { .ab-float { left: 14px; right: 14px; } .ab .ab-float a[href] { flex: 1; justify-content: center; } }

.ab-cheer { display: flex; gap: 7px; }
.ab-cheer i { width: 11px; height: 11px; display: block; background: var(--ab-bright); animation: abHop 1.1s ease-in-out infinite; }
.ab-cheer i:nth-child(2) { background: var(--ab-pine); animation-delay: 0.12s; }
.ab-cheer i:nth-child(3) { background: var(--ab-blue); animation-delay: 0.24s; }
.ab-cheer i:nth-child(4) { background: var(--ab-sun); animation-delay: 0.36s; }
@keyframes abHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* The deposit checkout */
.ab-checkout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0; border: 2px solid var(--ab-ink); background: var(--ab-card); margin-top: 40px; box-shadow: 12px 12px 0 var(--ab-bright); }
@media (max-width: 900px) { .ab-checkout { grid-template-columns: 1fr; box-shadow: 8px 8px 0 var(--ab-bright); } }
.ab-checkout-main { padding: clamp(26px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; border-right: 2px solid var(--ab-ink); }
@media (max-width: 900px) { .ab-checkout-main { border-right: 0; border-bottom: 2px solid var(--ab-ink); } }
.ab-checkout-side { padding: clamp(26px, 3.4vw, 40px); background: var(--ab-paper); display: flex; flex-direction: column; gap: 16px; }
.ab-included { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ab-included li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.96rem; color: var(--ab-ink-2); }
.ab-included li::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 6px; background: var(--ab-pine); }
.ab-included li:nth-child(3n + 2)::before { background: var(--ab-red); }
.ab-included li:nth-child(3n + 3)::before { background: var(--ab-blue); }
.ab-pay { display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: flex-start; }
.ab-pay .ab-fine { max-width: 44ch; }
.ab-paywait { border: 2px dashed var(--ab-line); padding: 16px 18px; font-family: var(--ab-mono); font-size: 0.68rem; letter-spacing: 0.08em; line-height: 1.9; color: var(--ab-muted); text-transform: uppercase; }
stripe-buy-button { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .ab-rv { transform: none; }
  .ab-float { transform: none; }
  .ab-ticker-track, .ab-cheer i, .ab-float a em::before { animation: none !important; }
  .ab *, .ab *::before, .ab *::after { transition-duration: 0.01ms !important; }
}

/* Client messages, pinned to the page like evidence. */
.ab-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 44px; align-items: start; }
@media (max-width: 820px) { .ab-quotes { grid-template-columns: 1fr; } }
.ab-quote { background: var(--ab-card); border: 2px solid var(--ab-ink); padding: 14px 14px 0; display: flex; flex-direction: column; gap: 12px; box-shadow: 7px 7px 0 var(--ab-ink); transition: transform 0.25s, box-shadow 0.25s; }
.ab-quote:nth-child(2n) { box-shadow: 7px 7px 0 var(--ab-pine); }
.ab-quote:nth-child(3n) { box-shadow: 7px 7px 0 var(--ab-blue); }
.ab-quote:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--ab-bright); }
.ab-quote img { display: block; width: 100%; height: auto; }
.ab-quote figcaption { font-family: var(--ab-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-muted); border-top: 1px solid var(--ab-line-2); padding: 12px 2px; margin: 0; }

/* Motion vocabulary: dot cursor, blur-up type, arch reveals, curtain wipes. */

/* Trailing dot cursor. Pointer devices only; never on touch. */
@media (hover: hover) and (pointer: fine) {
  .ab-dot, .ab-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 300; will-change: transform; }
  .ab-dot { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--ab-red); }
  .ab-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid var(--ab-red); opacity: 0.45; transition: width 0.25s, height 0.25s, margin 0.25s, opacity 0.25s; }
  .ab-ring.big { width: 72px; height: 72px; margin: -36px 0 0 -36px; opacity: 0.9; }
}
@media (hover: none), (pointer: coarse) { .ab-dot, .ab-ring { display: none; } }

/* Blur-up headline reveal. JS adds .ab-blur only once it can animate it, so
   nothing is ever left unreadable if the script does not run. */
.ab-blur > span { display: inline-block; }
.js-motion .ab-blur > span {
  filter: blur(9px);
  transform: translateY(0.42em);
  transition: filter 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.js-motion .ab-blur.in > span { filter: blur(0); transform: none; }

/* Arch reveal: the panel grows out of a rounded doorway as it enters. */
.ab-arch { --arch: 1; overflow: hidden; border-top-left-radius: calc(var(--arch) * 46vw); border-top-right-radius: calc(var(--arch) * 46vw); transform: scale(calc(1 - var(--arch) * 0.06)); transition: border-radius 0.1s linear, transform 0.1s linear; }
@media (prefers-reduced-motion: reduce) { .ab-arch { --arch: 0 !important; transform: none !important; } }

/* Curtain wipe between acts. */
.ab-curtain { position: relative; height: 46vh; background: var(--ab-red); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ab-curtain p { font-family: var(--ab-display); font-weight: 700; color: var(--ab-paper); font-size: clamp(1.6rem, 4.6vw, 3.4rem); letter-spacing: -0.03em; text-align: center; padding: 0 24px; max-width: 22ch; }
.ab-curtain::after { content: ""; position: absolute; inset: 0; background: var(--ab-paper); transform-origin: bottom; transform: scaleY(var(--wipe, 0)); }

/* Sticky wordmark, readable over paper and over ink. */
/* Sticky centre wordmark. It sits BELOW the nav band so it never crowds the
   nav links, and only appears once there is room for it. */
.ab-mark { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 40; pointer-events: none; font-family: var(--ab-display); font-weight: 700; font-size: 1.06rem; letter-spacing: 0.01em; color: var(--ab-paper); mix-blend-mode: difference; }
@media (max-width: 1180px) { .ab-mark { display: none; } }

/* Ring bullet on the small section labels. */
.ab-eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.ab-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; flex: none; }

/* Bento grid for the deposit panels. */
.ab-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(190px, auto); gap: 0; border: 2px solid var(--ab-ink); margin-top: 44px; }
.ab-bento > * { border-right: 2px solid var(--ab-ink); border-bottom: 2px solid var(--ab-ink); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; background: var(--ab-card); }
.ab-bento > *:nth-child(3n) { border-right: 0; }
.ab-bento > .wide { grid-column: span 2; }
.ab-bento > .ink { background: var(--ab-ink); color: var(--ab-paper); }
.ab-bento > .ink p { color: rgba(244, 245, 242, 0.78); }
.ab-bento > .sun { background: var(--ab-sun); }
.ab-bento > *:nth-last-child(-n + 3) { border-bottom: 0; }
@media (max-width: 900px) {
  .ab-bento { grid-template-columns: 1fr; }
  .ab-bento > * { border-right: 0; }
  .ab-bento > .wide { grid-column: span 1; }
  .ab-bento > *:nth-last-child(-n + 3) { border-bottom: 2px solid var(--ab-ink); }
  .ab-bento > *:last-child { border-bottom: 0; }
}

/* Giant wordmark footer plus the studio clock. */
.ab-bigmark { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: end; padding-bottom: 30px; border-bottom: 2px solid var(--ab-ink); }
@media (max-width: 820px) { .ab-bigmark { grid-template-columns: 1fr; } }
.ab .ab-bigmark h2 { font-size: clamp(3.4rem, 12vw, 9rem); line-height: 0.82; color: var(--ab-red); letter-spacing: -0.05em; }
.ab .ab-bigmark h2 s { text-decoration: none; display: block; font-size: 0.24em; letter-spacing: 0.5em; color: var(--ab-ink); padding-left: 0.3em; }
.ab-clock { display: flex; flex-direction: column; gap: 5px; }
.ab-clock b { font-weight: 400; font-size: 1.04rem; max-width: 22ch; }
.ab-clock time { font-family: var(--ab-display); font-weight: 700; font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ab-clock span { font-family: var(--ab-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ab-muted); }

/* These carry `.ab ` because site.css is concatenated after this file and its
   `.ab h2` rule has the same specificity — without it the base size wins and
   the giant footer wordmark collapses to 32px.

   Two tone headline, the way the loud half carries the sentence. */
.ab-hot { color: var(--ab-red); }
.ab h1 .ab-blur { color: var(--ab-ink); }

/* Numbered service rows. */
.ab-menu { border-top: 2px solid var(--ab-ink); }
.ab .ab-row { grid-template-columns: 76px 1.05fr 1.5fr auto 26px; align-items: baseline; padding: 24px 6px; gap: 18px; }
/* --ab-faint gave 2.64:1 against paper, under the 4.5:1 minimum for text
   this size. --ab-muted clears it. */
.ab-ix { font-family: var(--ab-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ab-muted); }
.ab .ab-row h3 { color: var(--ab-red); font-size: clamp(1.2rem, 2.1vw, 1.6rem); letter-spacing: -0.03em; }
.ab .ab-row u { display: block; text-decoration: none; font-family: var(--ab-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-muted); text-align: right; white-space: nowrap; margin: 0; }
@media (max-width: 900px) {
  .ab .ab-row { grid-template-columns: 60px 1fr; gap: 4px 14px; }
  .ab .ab-row p { grid-column: 2; }
  .ab .ab-row u { grid-column: 2; text-align: left; margin-top: 6px; }
}

/* Bento typography. */
.ab-bento b { font-family: var(--ab-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ab-red); font-weight: 400; }
.ab-bento .ink b { color: var(--ab-sun); }
.ab-bento .sun b { color: var(--ab-ink); }
.ab-bento .sun h3 { font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: -0.05em; }
.ab-bento p { color: var(--ab-muted); font-size: 0.95rem; }
.ab-bento .sun p { color: var(--ab-ink); }

@keyframes abFloat1 { to { transform: translate3d(7vw, 4vh, 0) scale(1.16); } }
@keyframes abFloat2 { to { transform: translate3d(-6vw, 5vh, 0) scale(1.1); } }

/* The offer rises out of the dark film through a doorway. */
.ab-rise { background: var(--ab-paper); position: relative; z-index: 2; margin-top: -13vh; padding-top: clamp(70px, 9vw, 120px); }
.ab-dark, .bs { position: relative; z-index: 1; }

/* The build stage: four chapters over a canvas that draws a page. */
.bs { position: relative; background: #0d1614; border-top: 2px solid var(--ab-ink); border-bottom: 2px solid var(--ab-ink); }
.bs-stage { position: sticky; top: 0; height: 100dvh; }
.bs-canvas { display: block; width: 100%; height: 100%; }
.bs-story { position: relative; margin-top: -100dvh; z-index: 2; }
.bs-chapter { min-height: 165vh; }
.bs-pin { position: sticky; top: 0; height: 100dvh; display: flex; align-items: center; }
.bs-copy { width: 100%; max-width: var(--ab-wrap); margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.bs-copy > * { max-width: 30rem; text-shadow: 0 1px 20px rgba(5, 12, 10, 0.7); }
.bs-kicker { font-family: var(--ab-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ab-sun); display: inline-flex; align-items: center; gap: 9px; }
.bs-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; }
.ab .bs-copy h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; color: var(--ab-paper); }
.bs-copy p { font-size: clamp(1rem, 1.5vw, 1.14rem); color: rgba(244, 245, 242, 0.82); }
.bs-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.bs-tags li { font-family: var(--ab-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ab-paper); border: 1px solid rgba(244, 245, 242, 0.3); padding: 8px 12px; }
.bs-route { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 70; }
.bs-route button { width: 10px; height: 10px; padding: 0; border: 1px solid rgba(244, 245, 242, 0.55); background: transparent; cursor: pointer; transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.bs-route button[aria-current="step"] { background: var(--ab-sun); border-color: var(--ab-sun); transform: scale(1.35); }
@media (max-width: 900px) { .bs-route { display: none; } .bs-copy > * { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .bs-stage { position: relative; height: 56vh; }
  .bs-story { margin-top: 0; }
  .bs-chapter { min-height: auto; padding: 48px 0; }
  .bs-pin { position: static; height: auto; }
  .bs-route { display: none; }
}

/* AMBIX Allie. A print shop on paper: flat inks, hard edges, overprint.
   Unlayered on purpose so it wins over the template's Tailwind utilities. */
:root {
  --ab-paper: #f4f5f2;
  --ab-paper-2: #eaece7;
  --ab-card: #ffffff;
  --ab-ink: #101a18;
  --ab-ink-2: #2a3b37;
  --ab-muted: #5c6b68;
  --ab-faint: #8d9b97;
  --ab-red: #c0432d;        /* text and fills, clears AA on paper */
  --ab-red-2: #a53823;
  --ab-bright: #e2553f;     /* decoration only, never behind small text */
  --ab-pine: #1f5f4b;
  --ab-blue: #2e5aa8;
  --ab-sun: #efb43c;
  --ab-line: rgba(16, 26, 24, 0.18);
  --ab-line-2: rgba(16, 26, 24, 0.09);
  --ab-dark: #101a18;
  --ab-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --ab-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --ab-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ab-wrap: 1180px;
}
body {
  background: var(--ab-paper);
  color: var(--ab-ink);
  font-family: var(--ab-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.ab * { box-sizing: border-box; }
.ab { font-family: var(--ab-sans); font-size: 17px; line-height: 1.6; color: var(--ab-ink); }
.ab-wrap { width: 100%; max-width: var(--ab-wrap); margin: 0 auto; padding: 0 24px; }
.ab-sec { padding: clamp(66px, 8vw, 116px) 0; }
.ab-sec + .ab-sec { border-top: 2px solid var(--ab-ink); }
.ab h1, .ab h2, .ab h3 { margin: 0; font-family: var(--ab-display); font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.ab h1 { font-size: clamp(2.7rem, 6.2vw, 4.6rem); line-height: 0.98; }
.ab h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.02; }
.ab h3 { font-size: 1.24rem; line-height: 1.22; letter-spacing: -0.025em; }
.ab p { margin: 0; }
.ab a:not([class]) { color: inherit; }
/* A link WITH a class is excluded above, so it falls back to the browser's
   default link blue unless it states a colour. These two never did: the
   header wordmark and the portfolio cards (whose h3 inherited it). */
.ab a.ab-logo, .ab a.ab-card { color: var(--ab-ink); }   /* classed links carry their own colour */
.ab-eyebrow { font-family: var(--ab-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ab-red); margin: 0; }
.ab-eyebrow-pine { color: var(--ab-pine); }
.ab-eyebrow-blue { color: var(--ab-blue); }
.ab-lede { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ab-muted); max-width: 60ch; }
.ab-head { display: flex; flex-direction: column; gap: 15px; max-width: 66ch; }
.ab :focus-visible { outline: 3px solid var(--ab-blue); outline-offset: 2px; }
.ab-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* nav */
.ab-nav { position: sticky; top: 0; z-index: 60; background: var(--ab-paper); border-bottom: 2px solid var(--ab-ink); }
.ab-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 68px; flex-wrap: nowrap; }
.ab-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; white-space: nowrap; }
.ab-logo svg { display: block; }
.ab-logo b { font-family: var(--ab-display); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.005em; }
.ab-logo span { font-family: var(--ab-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ab-muted); }
.ab-navlinks { display: flex; align-items: center; gap: 22px; flex: none; white-space: nowrap; }
.ab-navlinks a { font-family: var(--ab-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ab-ink); text-decoration: none; }
.ab-navlinks .ab-navbuy { background: var(--ab-red); color: var(--ab-paper); padding: 10px 16px; }
@media (max-width: 1120px) { .ab-navlinks .ab-hidesm { display: none; } }
@media (max-width: 1240px) { .ab-logo span { display: none; } }

/* buttons, each with its own identity */
.ab-cta-primary { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; overflow: hidden; text-decoration: none; font-family: var(--ab-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ab-paper); background: var(--ab-red); border: 0; cursor: pointer; box-shadow: 6px 6px 0 var(--ab-ink); transition: transform 0.18s, box-shadow 0.18s; }
.ab-cta-primary:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ab-ink); }
.ab-cta-primary:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ab-ink); }
.ab-cta-primary span { position: relative; z-index: 1; }
.ab-cta-call { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--ab-mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ab-ink); padding: 18px 2px; border-bottom: 2px solid var(--ab-ink); transition: color 0.25s, border-color 0.25s; }
.ab-cta-call em { width: 8px; height: 8px; background: var(--ab-pine); font-style: normal; }
.ab-cta-call:hover { color: var(--ab-pine); border-color: var(--ab-pine); }
.ab-cta-line { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; font-family: var(--ab-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ab-red); }
.ab-cta-line s { text-decoration: none; display: inline-block; transition: transform 0.3s; }
.ab-cta-line:hover s { transform: translateX(5px); }
.ab-cta-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 22px; background: var(--ab-pine); color: var(--ab-paper); border: 0; cursor: pointer; font-family: var(--ab-mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 5px 5px 0 var(--ab-ink); transition: transform 0.18s, box-shadow 0.18s; }
.ab-cta-submit:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ab-ink); }

/* hero */
.ab-hero { padding: clamp(44px, 6vw, 76px) 0 clamp(52px, 6vw, 84px); }
.ab-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 940px) { .ab-hero-grid { grid-template-columns: 1fr; } }
.ab-hero-left { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.ab-over { position: relative; display: block; }
.ab-over::before { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; color: var(--ab-bright); transform: translate(4px, 4px); z-index: 0; }
.ab-over span { position: relative; z-index: 1; }
.ab-shot-hero { border: 2px solid var(--ab-ink); background: var(--ab-card); box-shadow: 10px 10px 0 var(--ab-sun); }
.ab-shot-hero img { display: block; width: 100%; height: auto; }
.ab-btnrow { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }

/* the deposit ticket */
.ab-ticket { position: relative; background: var(--ab-card); border: 2px solid var(--ab-ink); padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 8px 8px 0 var(--ab-ink); max-width: 420px; width: 100%; }
.ab-ticket::before, .ab-ticket::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--ab-paper); border: 2px solid var(--ab-ink); top: 50%; margin-top: -10px; }
.ab-ticket::before { left: -12px; clip-path: inset(0 0 0 50%); }
.ab-ticket::after { right: -12px; clip-path: inset(0 50% 0 0); }
.ab-ticket-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 2px dashed var(--ab-line); padding-bottom: 14px; }
.ab-price { font-family: var(--ab-display); font-weight: 700; font-size: clamp(3rem, 7vw, 4.2rem); line-height: 0.9; letter-spacing: -0.05em; }
.ab-price sup { font-size: 0.42em; vertical-align: super; margin-right: 2px; }
/* :not(.ab-price) matters. `.ab-ticket-top p` and `.ab-price` have the same
   specificity, so the container rule was winning and rendering the headline
   $99 at 10px instead of 48px. */
.ab-ticket-top p:not(.ab-price) { font-family: var(--ab-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ab-muted); text-align: right; }
.ab-ticket ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ab-ticket li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--ab-ink-2); }
.ab-ticket li b { color: var(--ab-pine); font-weight: 700; flex: none; }
.ab-ticket .ab-fine { margin-top: 2px; }

/* terms strip */
.ab-terms { border-top: 2px solid var(--ab-ink); margin: 0; }
.ab-terms div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--ab-line-2); }
.ab-terms dt { font-family: var(--ab-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-muted); white-space: nowrap; }
.ab-terms dd { margin: 0; font-size: 1rem; text-align: right; font-weight: 500; }

/* pillars */
.ab-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 2px solid var(--ab-ink); margin-top: 44px; }
@media (max-width: 900px) { .ab-pillars { grid-template-columns: 1fr; } }
.ab-pillar { background: var(--ab-card); padding: 28px 24px 32px; display: flex; flex-direction: column; gap: 11px; border-right: 2px solid var(--ab-ink); }
.ab-pillar:last-child { border-right: 0; }
@media (max-width: 900px) { .ab-pillar { border-right: 0; border-bottom: 2px solid var(--ab-ink); } .ab-pillar:last-child { border-bottom: 0; } }
.ab-pillar p { color: var(--ab-muted); font-size: 0.95rem; }
.ab-pillar b { font-family: var(--ab-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ab-red); font-weight: 400; }

/* process rail */
.ab-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
@media (max-width: 900px) { .ab-rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ab-rail { grid-template-columns: 1fr; } }
.ab-step { padding-top: 20px; border-top: 4px solid var(--ab-red); display: flex; flex-direction: column; gap: 9px; }
.ab-step b { font-family: var(--ab-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--ab-red); font-weight: 400; }
.ab-step p { color: var(--ab-muted); font-size: 0.94rem; }

/* service menu */
.ab-menu { margin-top: 40px; border-top: 2px solid var(--ab-ink); }
.ab-row { display: grid; grid-template-columns: 48px 1fr 1.25fr 26px; gap: 20px; align-items: center; padding: 18px 6px; border-bottom: 1px solid var(--ab-line-2); cursor: pointer; transition: background 0.25s, padding-left 0.25s; }
.ab-row:hover { background: var(--ab-card); padding-left: 14px; }
.ab-row img { width: 36px; height: 36px; }
.ab-row p { color: var(--ab-muted); font-size: 0.94rem; }
.ab-row u { display: block; text-decoration: none; font-family: var(--ab-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-pine); margin-top: 5px; }
@media (max-width: 820px) { .ab-row { grid-template-columns: 40px 1fr; gap: 6px 14px; } .ab-row p { grid-column: 2; } }
.ab-note { margin-top: 26px; padding-left: 16px; border-left: 4px solid var(--ab-sun); color: var(--ab-muted); font-size: 0.96rem; max-width: 62ch; }

/* work */
.ab-work { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
@media (max-width: 820px) { .ab-work { grid-template-columns: 1fr; } }
.ab-card { display: flex; flex-direction: column; text-decoration: none; border: 2px solid var(--ab-ink); background: var(--ab-card); transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 0 0 var(--ab-ink); }
.ab-card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--ab-blue); }
/* 16/11, not 16/10: the shorter frame held exactly one browser screen and
   cut tall heroes in half. */
.ab-shot { aspect-ratio: 16 / 11; overflow: hidden; border-bottom: 2px solid var(--ab-ink); background: var(--ab-paper-2); }
.ab-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.ab-cardbody { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.ab-cardbody b { font-family: var(--ab-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-muted); font-weight: 400; }
.ab-cardbody p { color: var(--ab-muted); font-size: 0.93rem; }
.ab-cardbody .ab-cta-line { margin-top: auto; padding-top: 12px; }

/* faq */
.ab-faq { margin-top: 36px; border-top: 2px solid var(--ab-ink); }
.ab-faq details { border-bottom: 1px solid var(--ab-line-2); }
.ab-faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-family: var(--ab-display); font-weight: 600; font-size: 1.12rem; }
.ab-faq summary::-webkit-details-marker { display: none; }
.ab-faq summary:hover { color: var(--ab-red); }
.ab-faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--ab-mono); color: var(--ab-red); transition: transform 0.3s; }
.ab-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ab-ans { padding: 0 44px 22px 0; color: var(--ab-muted); font-size: 0.97rem; max-width: 70ch; }

/* forms */
.ab-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .ab-split { grid-template-columns: 1fr; } }
.ab-panel { background: var(--ab-card); border: 2px solid var(--ab-ink); padding: clamp(22px, 3vw, 34px); box-shadow: 8px 8px 0 var(--ab-ink); }
.ab-form { display: flex; flex-direction: column; gap: 15px; }
.ab-two { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 560px) { .ab-two { grid-template-columns: 1fr; } }
.ab-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--ab-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-muted); }
.ab-field input, .ab-field select, .ab-field textarea { font-family: var(--ab-sans); font-size: 0.97rem; color: var(--ab-ink); background: var(--ab-paper); border: 2px solid var(--ab-line); padding: 12px 13px; width: 100%; transition: border-color 0.2s, background 0.2s; }
.ab-field textarea { resize: vertical; min-height: 96px; }
.ab-field input:focus, .ab-field select:focus, .ab-field textarea:focus { outline: none; border-color: var(--ab-ink); background: var(--ab-card); }
.ab-fine { font-family: var(--ab-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ab-muted); line-height: 1.8; }
.ab-contacts { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.ab-contacts a, .ab-contacts div { display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.ab-contacts b { font-family: var(--ab-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ab-muted); font-weight: 400; }
.ab-contacts s { text-decoration: none; font-family: var(--ab-display); font-weight: 600; font-size: 1.18rem; }
.ab-contacts a:hover s { color: var(--ab-red); }

/* footer */
.ab-foot { border-top: 2px solid var(--ab-ink); padding: 36px 0 52px; }
.ab-foot-in { display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: center; justify-content: space-between; font-family: var(--ab-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ab-muted); }
.ab-foot-in a { text-decoration: none; }
.ab-foot-in a:hover { color: var(--ab-red); }

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.ab-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }


/* ---- Scroll journey (static build) ---- */
.ss { position: relative; }
.ss-stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; background: var(--ab-ink); }
.ss-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.16s linear; }
.ss-layer.on { opacity: 1; }
.ss-layer img, .ss-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-layer video { opacity: 0; transition: opacity 0.2s linear; }
.ss-layer[data-painted="1"] video { opacity: 1; }
.ss-story { position: relative; margin-top: -100dvh; z-index: 2; }
.ss-chapter { min-height: 175vh; }
.ss-pin { position: sticky; top: 0; height: 100dvh; display: flex; align-items: center; }
.ss-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; width: 100%; max-width: var(--ab-wrap); margin: 0 auto; padding: 0 24px; }
.ss-copy > * { max-width: 34rem; text-shadow: 0 1px 18px rgba(4, 9, 10, 0.55), 0 0 40px rgba(4, 9, 10, 0.35); }
.ss-kicker { font-family: var(--ab-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ab-clay); }
.ss-copy h2 { font-size: clamp(2.4rem, 5.2vw, 3.8rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.03em; }
.ss-copy p { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ab-bone); }
.ss-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.ss-tags li { font-family: var(--ab-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ab-bone); border: 1px solid var(--ab-line); padding: 8px 12px; }
.ss-bar { position: fixed; left: 0; top: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--ab-clay); z-index: 90; }
.ss-route { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 70; }
.ss-route button { width: 10px; height: 10px; padding: 0; border: 1px solid var(--ab-muted); background: transparent; cursor: pointer; transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.ss-route button[aria-current="step"] { background: var(--ab-clay); border-color: var(--ab-clay); transform: scale(1.35); }
@media (max-width: 900px) { .ss-route { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ss-stage { position: relative; height: 62vh; }
  .ss-story { margin-top: 0; }
  .ss-chapter { min-height: auto; padding: 56px 0; }
  .ss-pin { position: static; height: auto; }
  .ss-bar, .ss-route { display: none; }
}
.ab-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Blog ---------------------------------------------------------------
   The reading pages. Same inks and type as the rest of the site, but calmer:
   no reveals, no sticky stage, nothing moving while someone is trying to read.
   Concatenated after site.css and before site-mobile.css in netlify/build.sh. */

.ab-blogtop { padding: 130px 0 0; }
.ab-blogtop .ab-wrap { display: flex; flex-direction: column; gap: 16px; }
.ab-blogtop h1 { font-family: var(--ab-display); font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
.ab-blogtop p { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ab-muted); max-width: 46ch; margin: 0; }

/* The index list. One row per post, hard rule between, the whole row a link. */
.ab-posts { margin: 54px 0 0; border-top: 3px solid var(--ab-ink); }
.ab-post-row { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: start;
  padding: 30px 0; border-bottom: 1px solid var(--ab-line); text-decoration: none; color: var(--ab-ink); }
.ab-post-row:hover h2 { color: var(--ab-red); }
.ab-post-row time { font-family: var(--ab-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ab-muted); padding-top: 8px; }
.ab-post-row h2 { font-family: var(--ab-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 10px; transition: color 0.2s; }
.ab-post-row p { font-size: 1.02rem; line-height: 1.6; color: var(--ab-muted); margin: 0; max-width: 58ch; }
.ab-post-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ab-post-meta span { font-family: var(--ab-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ab-muted); border: 1px solid var(--ab-line); padding: 6px 10px; }

/* The article itself. */
.ab-article { padding: 122px 0 0; }
.ab-article .ab-wrap { max-width: 46rem; }
.ab-backlink { font-family: var(--ab-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ab-red); text-decoration: none; }
.ab-backlink:hover { text-decoration: underline; }
.ab-article h1 { font-family: var(--ab-display); font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; margin: 20px 0 0; }
.ab-dek { font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.5; color: var(--ab-muted); margin: 18px 0 0; }
.ab-byline { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 26px 0 0;
  padding: 14px 0; border-top: 1px solid var(--ab-line); border-bottom: 1px solid var(--ab-line);
  font-family: var(--ab-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ab-muted); }
.ab-byline b { color: var(--ab-ink); font-weight: 400; }

.ab-body { margin: 38px 0 0; }
.ab-body p { font-size: 1.09rem; line-height: 1.72; margin: 0 0 22px; }
.ab-body .ab-lead { font-size: 1.24rem; line-height: 1.6; }
.ab-body h2 { font-family: var(--ab-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.12; letter-spacing: -0.02em; margin: 46px 0 18px; }
.ab-body strong { font-weight: 600; }
/* The takeaway line. A hard left rule in the red ink, the way a proof gets
   marked up, so the argument of each section is findable by skimming. */
.ab-body .ab-pull { font-family: var(--ab-display); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.25; letter-spacing: -0.02em; color: var(--ab-red);
  border-left: 5px solid var(--ab-red); padding: 4px 0 4px 20px; margin: 30px 0; }
.ab-body .ab-sign { font-style: italic; color: var(--ab-muted); border-top: 1px solid var(--ab-line); padding-top: 22px; margin-top: 34px; }

/* Foot of the article: the offer, once, without shouting. */
.ab-postcta { margin: 54px 0 0; border: 3px solid var(--ab-ink); padding: 32px; display: flex; flex-wrap: wrap;
  gap: 20px; align-items: center; justify-content: space-between; box-shadow: 8px 8px 0 var(--ab-red); }
.ab-postcta div { display: flex; flex-direction: column; gap: 6px; }
.ab-postcta b { font-family: var(--ab-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; }
.ab-postcta p { margin: 0; color: var(--ab-muted); font-size: 0.98rem; }

@media (max-width: 760px) {
  .ab-blogtop { padding: 104px 0 0; }
  .ab-article { padding: 100px 0 0; }
  .ab-post-row { grid-template-columns: 1fr; gap: 10px; }
  .ab-post-row time { padding-top: 0; }
  .ab-postcta { padding: 24px; box-shadow: 5px 5px 0 var(--ab-red); }
}

/* Phone typography.
   ------------------------------------------------------------------------
   The desktop design leans on small mono uppercase labels with wide tracking.
   That reads as a deliberate micro-label at desktop scale; on a phone the same
   rules land between 7.7px and 11.5px, which is simply too small to read. This
   file raises every one of those to at least 12.5px and cuts the tracking back,
   because letter-spacing that flatters a label at 16px hurts it at 12px.

   It is concatenated last, so it wins on order without needing extra
   specificity — except where a `.ab`-prefixed rule already exists.           */

@media (max-width: 820px) {

  /* --- Section labels, kickers and micro-copy --------------------------- */
  .ab .ab-eyebrow,
  .ab .ab-cta-line,
  .ab .ab-ix,
  .ab .ab-chip,
  .ab .ab-modal-head p,
  .ab .ab-clock span,
  .ab .ab-contacts b,
  .ab .ab-cardbody b,
  .ab .ab-pillar b,
  .ab .ab-bento b,
  .ab .ab-terms dt,
  .ab .ab-ticket-top p:not(.ab-price),
  .ab .ab-quote figcaption,
  .ab .ab-field,
  .ab .ab-foot-in,
  .ab .ab-row u,
  .ab .ab-ticker span {
    font-size: 0.8rem;
    letter-spacing: 0.09em;
  }

  .ab .ab-step b { font-size: 0.82rem; letter-spacing: 0.09em; }
  .ab .ab-fine { font-size: 0.82rem; letter-spacing: 0.02em; line-height: 1.7; }
  .ab .ab-paywait { font-size: 0.82rem; letter-spacing: 0.04em; line-height: 1.7; }
  .ab .ab-ticket li { font-size: 1rem; }

  /* The footer wordmark's second line is sized in em off a heading that
     shrinks on small screens, so it needs a floor of its own. */
  .ab .ab-bigmark h2 s { font-size: max(0.24em, 0.82rem); letter-spacing: 0.3em; line-height: 1.4; }

  /* --- Nav and buttons -------------------------------------------------- */
  .ab .ab-navlinks a:not(.ab-hidesm) { font-size: 0.8rem; letter-spacing: 0.08em; }
  .ab .ab-cta-primary,
  .ab .ab-cta-submit,
  .ab .ab-cta-call { font-size: 0.85rem; letter-spacing: 0.07em; }
  .ab .ab-float a[href] { font-size: 0.82rem; letter-spacing: 0.07em; }

  /* --- Tap targets ------------------------------------------------------
     44px is the smallest comfortable touch target; several links were under
     20px tall because they were sized purely by their text.                */
  .ab .ab-navlinks a:not(.ab-hidesm),
  .ab .ab-logo,
  .ab .ab-foot-in a,
  .ab .ab-contacts a,
  .ab .ab-cta-line {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* :not(.ab-hidesm) matters — setting display here would otherwise beat the
     `display: none` that hides those links below 1120px and put the whole
     desktop nav back on a phone. */
  .ab .ab-navbuy { min-height: 44px; padding: 0 18px; }
  .ab summary { min-height: 48px; display: flex; align-items: center; }

  /* --- Form fields ------------------------------------------------------
     Below 16px, iOS Safari zooms the whole page when a field is focused and
     leaves the visitor scrolled sideways mid-form. */
  .ab .ab-field input,
  .ab .ab-field select,
  .ab .ab-field textarea { font-size: 16px; padding: 14px 13px; }

  /* --- Chapter copy over the canvas ------------------------------------- */
  .ab .bs-kicker { font-size: 0.8rem; letter-spacing: 0.14em; }
  .ab .bs-tags li { font-size: 0.78rem; letter-spacing: 0.09em; }
  .ab .bs-copy p { font-size: 1.05rem; line-height: 1.6; }

  /* The copy was vertically centred inside a full-height sticky pin, so on a
     phone the paragraph and tags landed straight on top of the canvas
     drawing. Top align it and let the painter have the lower half: it now
     starts its page at 58% of the viewport height (stage-draw.ts). */
  .ab .bs-pin { align-items: flex-start; padding-top: 12vh; }
  .ab .bs-copy { gap: 13px; }
}

/* Narrow phones: the wordmark and the nav button compete for one line. */
@media (max-width: 400px) {
  .ab .ab-navbuy { padding: 0 14px; font-size: 0.76rem; }
  .ab .ab-logo b { font-size: 1rem; }
}