/* Self-hosted, latin subset, weights actually used. No third-party request,
   no render-blocking CDN round-trip, no dependency on a domain we do not own. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/newsreader-cY9AfjOCX1hbuyalUrK4397yjIJFJpc.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: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/newsreader-cY9AfjOCX1hbuyalUrK4397yjIJFJpc.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-xn7gYHE41ni1AdIRggexSvfedN4.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-xn7gYHE41ni1AdIRggexSvfedN4.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-xn7gYHE41ni1AdIRggexSvfedN4.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-xn7gYHE41ni1AdIRggexSvfedN4.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: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dm-mono-aFTU7PB1QTsUX8KYthqQBK6PYK0.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: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/dm-mono-aFTR7PB1QTsUX8KYvumzEYOtbYf-Vlg.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;
}

:root {
  --paper: #f3f0e8;
  --ink: #11110f;
  --muted: #65635d;
  --line: #bdb8aa;
  --blue: #2747e8;
  --lime: #c9ff55;
  --coral: #ff725c;
  --white: #fffef9;
  --display: "Newsreader", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;

  /* Type floor. Nothing on the page renders below --fs-micro; the old scale
     bottomed out at 8px, which measured fine for contrast and still could not
     be read. Micro-labels use --fs-micro, data and captions --fs-meta. Set as
     tokens so the floor cannot drift back one declaration at a time. */
  --fs-micro: 11px;
  --fs-meta: 12px;

  /* Motion scale. Every transition/animation duration and easing on the page
     draws from here — before this, the same handful of interactions used
     seven different durations (.18s–.32s) and three different curves by
     accident, not by design. One decelerate curve for anything entering,
     settling, or revealing; three durations for how much distance it covers.
     The ticker's linear infinite loop is deliberately excluded — it is an
     ambient loop, not a response to input, so it stays off this scale. */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --duration-fast: 180ms;
  --duration-base: 250ms;
  --duration-slow: 320ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; }
body.is-locked { overflow: hidden; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--lime); padding: 12px 18px; }
.skip-link:focus { top: 16px; }

.announcement { min-height: 34px; padding: 7px 3vw; display: flex; align-items: center; justify-content: center; gap: 28px; background: var(--lime); font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.announcement a { text-decoration: none; border-bottom: 1px solid; }
.site-header { min-height: 82px; padding: 0 3vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--ink); position: sticky; top: 0; z-index: 20; background: var(--paper); }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; text-decoration: none; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 500 13px var(--mono); transform: rotate(-4deg); }
.brand-copy { font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.brand-copy small { display: block; margin-top: 6px; font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.desktop-nav { display: flex; gap: 28px; }
.desktop-nav a { font-size: 13px; font-weight: 600; text-decoration: none; }
.desktop-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.cart-button { justify-self: end; border: 1px solid var(--ink); background: transparent; padding: 10px 11px 10px 15px; text-transform: uppercase; font: 500 11px var(--mono); cursor: pointer; }
.cart-count { margin-left: 8px; display: inline-grid; place-items: center; min-width: 23px; height: 23px; background: var(--blue); color: white; }

.hero { min-height: 620px; display: grid; border-bottom: 1px solid var(--ink); }
.skill-network { position: relative; min-width: 0; height: 510px; align-self: center; margin-right: 1vw; }
.skill-network canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.network-labels button { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, 17px); background: var(--paper); border: 0; padding: 5px; color: var(--muted); font: 10px var(--mono); cursor: pointer; white-space: nowrap; }
.network-labels button:hover, .network-labels button[aria-pressed="true"] { color: var(--blue); }
.network-labels button:focus-visible, .network-motion:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
.network-detail { position: absolute; bottom: 12px; left: 8%; right: 8%; min-height: 32px; margin: 0; text-align: center; font: 11px/1.5 var(--sans); color: var(--muted); }
.network-motion { position: absolute; bottom: -10px; right: 8%; padding: 4px; background: transparent; border: 0; color: var(--muted); font: 9px var(--mono); cursor: pointer; }
@media (min-width: 1100px) { .hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }.hero .hero-copy { padding-right: 2vw; }.hero h1 { font-size: clamp(64px, 6.2vw, 112px); }.hero .hero-intro, .hero .hero-actions { margin-left: 0; } }
@media (max-width: 1099px) { .skill-network { width: min(600px, 94%); height: 390px; justify-self: center; margin: -10px 0 35px; } }
@media (max-width: 600px) { .skill-network { height: 290px; margin-top: -15px; margin-bottom: 78px; }.network-labels button { font-size: 9px; }.network-detail { font-size: 10px; bottom: -22px; }.network-motion { bottom: -48px; } }
/* Full-bleed section, but the copy keeps an editorial measure rather than stretching. */
.hero-copy { max-width: 1150px; padding: clamp(64px, 8vw, 120px) 7vw 44px 7vw; display: flex; flex-direction: column; }
.eyebrow { margin: 0 0 28px; display: flex; align-items: center; gap: 10px; font: 500 var(--fs-meta) var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.hero h1 { max-width: 900px; margin: 0; font: 500 clamp(64px, 7.7vw, 124px)/.82 var(--display); letter-spacing: -.065em; }
.hero h1 em, .about-copy h2 em, .content-heading h2 em, .hire-section h2 em { font-weight: 400; color: var(--blue); }
.hero-intro { max-width: 650px; margin: 34px 0 30px 20%; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; letter-spacing: -.02em; }
.hero-actions { margin-left: 20%; display: flex; align-items: center; gap: 28px; }
.primary-action { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 15px 18px; display: inline-flex; justify-content: space-between; gap: 45px; align-items: center; text-decoration: none; font: 500 11px var(--mono); text-transform: uppercase; cursor: pointer; }
.primary-action:hover { background: var(--blue); border-color: var(--blue); }
.text-action { display: inline-flex; align-items: center; gap: 16px; padding-bottom: 5px; border-bottom: 1px solid; text-decoration: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.availability-row { margin: auto 0 0; padding-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.availability-row div { padding-right: 15px; }
.availability-row dt { margin-bottom: 9px; color: var(--muted); font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.availability-row dd { margin: 0; font-size: 11px; font-weight: 600; }
.availability-row i { width: 7px; height: 7px; margin-right: 5px; display: inline-block; border-radius: 50%; background: #29a868; }

.ticker { overflow: hidden; border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
/* The loop only reads as seamless if translateX(-50%) lands exactly one
   repetition along. A flex `gap` breaks that: with 2n children there are
   2n-1 gaps, so half the width falls half a gap short and the marquee jumps
   every 32s. Spacing lives on the children instead, which makes each half
   self-contained and 50% exact. The markup repeats the list twice, separator
   included — keep it that way. */
.ticker div { width: max-content; padding: 13px 0; display: flex; gap: 0; align-items: center; animation: marquee 32s linear infinite; font: 400 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.ticker div > * { padding-inline: 11px; }
.ticker b { color: var(--lime); }
@keyframes marquee { to { transform: translateX(-50%); } }

.about-section, .content-section { padding: 90px 7vw 110px; border-bottom: 1px solid var(--ink); }
.section-label { display: flex; align-items: center; gap: 15px; font: 500 var(--fs-meta) var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.section-label span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.about-copy { margin-top: 70px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 10vw; align-items: end; }
.about-copy h2, .section-heading h2, .content-heading h2, .hire-section h2 { margin: 0; font: 500 clamp(58px, 7vw, 105px)/.85 var(--display); letter-spacing: -.055em; }
.about-copy .lead { margin: 0 0 20px; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.32; letter-spacing: -.035em; }
.about-copy p:not(.lead) { max-width: 590px; color: var(--muted); line-height: 1.7; }
.about-copy .text-action { margin-top: 20px; }

.skills-section { padding: 92px 4vw 110px; background: var(--ink); color: var(--paper); }
.section-label.light span { border-color: var(--paper); }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin: 0 3vw 65px; }
.section-heading h2 { margin-top: 42px; }
.section-aside { max-width: 380px; justify-self: end; }
.section-aside p { margin: 0 0 22px; color: #aaa79d; line-height: 1.55; }
.price-note { display: inline-block; padding: 7px 10px; background: var(--lime); color: var(--ink); font: 500 var(--fs-meta) var(--mono); text-transform: uppercase; transform: rotate(-2deg); }
.filter-row { margin: 0 3vw 26px; display: flex; gap: 8px; flex-wrap: wrap; }
.filter { padding: 8px 12px; border: 1px solid #55544f; border-radius: 30px; background: transparent; color: #aaa79d; font: 400 var(--fs-meta) var(--mono); text-transform: uppercase; cursor: pointer; }
.filter:hover, .filter.is-active { color: var(--ink); border-color: var(--lime); background: var(--lime); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #4c4a45; border-left: 1px solid #4c4a45; }
.product-card { min-width: 0; border-right: 1px solid #4c4a45; border-bottom: 1px solid #4c4a45; }
.product-card.is-hidden { display: none; }
.product-visual { min-height: 300px; margin: 14px; padding: 17px; position: relative; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); }
.product-visual span { font: 500 var(--fs-meta) var(--mono); }
.product-visual strong { font: 500 clamp(45px, 4.3vw, 72px)/.77 var(--display); letter-spacing: -.06em; }
.product-visual i { position: absolute; top: 16px; right: 12px; padding: 5px 8px; background: var(--ink); color: var(--paper); font: normal 500 var(--fs-micro) var(--mono); text-transform: uppercase; transform: rotate(3deg); }
.visual-blue { background: var(--blue); color: white; }
.visual-lime { background: var(--lime); }
.visual-paper { background: var(--paper); }
.visual-coral { background: var(--coral); }
.visual-ink { background: #2b2a27; color: var(--paper); border: 1px solid #5c5a54; }
.visual-outline { color: var(--paper); border: 1px solid #74716a; background: repeating-linear-gradient(135deg, transparent, transparent 10px, #22211f 10px, #22211f 11px); }
.product-info { min-height: 320px; padding: 20px 20px 16px; display: flex; flex-direction: column; }
.product-kicker { margin: 0 0 8px; color: #8f8c83; font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.product-info h3 { margin: 0; font: 500 29px var(--display); letter-spacing: -.03em; }
.product-info > p { color: #aaa79d; font-size: 13px; line-height: 1.6; }
.product-info ul { margin: 10px 0 25px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.product-info li { padding: 5px 8px; border: 1px solid #4c4a45; border-radius: 20px; font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; }
.product-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid #4c4a45; display: flex; align-items: center; justify-content: space-between; }
.product-footer > span { font: 500 18px var(--mono); }
.product-footer small { color: #77746d; font-size: var(--fs-micro); text-transform: uppercase; }
.product-footer button { border: 0; background: transparent; color: var(--paper); font: 500 var(--fs-meta) var(--mono); text-transform: uppercase; cursor: pointer; }
.product-footer button:hover { color: var(--lime); }
.product-footer button.is-added { color: var(--lime); }

.work-section { padding: 95px 7vw 110px; border-bottom: 1px solid var(--ink); }
.dark-heading { margin: 0 0 70px; }
.dark-heading p { max-width: 400px; justify-self: end; color: var(--muted); line-height: 1.6; }
.case-list { border-top: 1px solid var(--ink); }
.case-row { padding: 18px 0; display: grid; grid-template-columns: 45px 170px 1.5fr 1fr 30px; gap: 25px; align-items: center; border-bottom: 1px solid var(--ink); text-decoration: none; }
.case-number { font: 400 var(--fs-meta) var(--mono); }
.case-thumb { height: 96px; display: grid; place-items: center; color: var(--muted); font: 400 var(--fs-micro)/1.4 var(--mono); text-align: center; text-transform: uppercase; transition: transform var(--duration-base) var(--ease-out); }
.case-row:hover .case-thumb { transform: rotate(-2deg); }
.thumb-one { background: #ccd4ff; }
.thumb-two { background: #ffbdb2; }
.thumb-three { background: #dcff96; }
.case-title { font: 500 clamp(25px, 3vw, 43px) var(--display); letter-spacing: -.035em; }
.case-title small { display: block; margin-bottom: 7px; color: var(--muted); font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; }
.case-outcome { color: var(--muted); font-size: 12px; line-height: 1.5; }
.case-arrow { font-size: 24px; }

.content-heading { margin: 58px 0 55px; display: flex; align-items: end; justify-content: space-between; }
.article-grid { display: grid; grid-template-columns: 1.55fr .72fr .72fr; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.article-card { padding: 18px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.article-main { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.article-art { min-height: 310px; display: grid; place-items: center; background: var(--blue); color: rgba(255,255,255,.75); font: 400 var(--fs-meta)/1.4 var(--mono); text-align: center; text-transform: uppercase; }
.article-card h3 { margin: 10px 0; font: 500 32px/1.05 var(--display); letter-spacing: -.03em; }
.article-card p:not(.product-kicker) { color: var(--muted); font-size: 13px; line-height: 1.6; }
.article-card a { display: inline-block; margin-top: 20px; font: 500 var(--fs-meta) var(--mono); text-transform: uppercase; }
.article-card.compact { display: flex; flex-direction: column; }
.article-card.compact a { margin-top: auto; }

.proof-section { padding: 90px 7vw 110px; background: var(--blue); color: white; }
.proof-grid { margin-top: 65px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 9vw; }
.proof-intro h2 { margin: 0; font: 500 clamp(60px, 7vw, 110px)/.85 var(--display); letter-spacing: -.06em; }
.proof-intro p { max-width: 380px; color: #c8d0ff; line-height: 1.6; }
.proof-list { border-top: 1px solid rgba(255,255,255,.5); }
.proof-list article { padding: 23px 0; display: grid; grid-template-columns: 70px 1fr 30px; border-bottom: 1px solid rgba(255,255,255,.5); }
.proof-list article > span, .proof-list small { font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; }
.proof-list h3 { margin: 6px 0; font: 500 25px var(--display); }
.proof-list p { margin: 0; color: #c8d0ff; font-size: 12px; }

.hire-section { padding: 120px 7vw; text-align: center; background: var(--lime); }
.hire-section .eyebrow { justify-content: center; }
.hire-section .eyebrow span { background: var(--ink); }
.hire-section h2 em { color: var(--blue); }
.hire-section > p:not(.eyebrow) { max-width: 580px; margin: 30px auto; line-height: 1.6; }
.primary-action.invert { margin: auto; }

.site-footer { padding: 60px 4vw 35px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 50px; background: var(--ink); color: var(--paper); }
.footer-brand { font: 500 38px var(--display); }
.footer-brand small { display: block; margin-top: 10px; color: #77746d; font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; }
.site-footer div:not(.footer-brand) { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.site-footer div > span { margin-bottom: 9px; color: #77746d; font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--lime); }
.footer-note p { margin: 0 0 35px; color: #aaa79d; line-height: 1.5; }
.footer-note small { color: #77746d; }

.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(17,17,15,.55); backdrop-filter: blur(2px); }
.cart-drawer { width: min(480px, 100vw); height: 100dvh; position: fixed; top: 0; right: 0; z-index: 70; display: flex; flex-direction: column; background: var(--paper); border-left: 1px solid var(--ink); transform: translateX(101%); transition: transform var(--duration-slow) var(--ease-out); }
.cart-drawer.is-open { transform: translateX(0); }
.drawer-header { padding: 24px 25px 20px; display: flex; align-items: start; justify-content: space-between; border-bottom: 1px solid var(--ink); }
.drawer-header p { margin: 0 0 5px; color: var(--muted); font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; }
.drawer-header h2 { margin: 0; font: 500 42px var(--display); }
.drawer-header h2 span { color: var(--blue); }
.drawer-header button, .modal-close { width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; font-size: 24px; cursor: pointer; }
.cart-empty { margin: auto; max-width: 280px; padding: 30px; text-align: center; }
.cart-empty > span { width: 60px; height: 60px; margin: 0 auto 15px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 500 17px var(--mono); }
.cart-empty h3 { margin: 0; font: 500 27px var(--display); }
.cart-empty p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.cart-empty a { font: 500 var(--fs-meta) var(--mono); text-transform: uppercase; }
.cart-items { padding: 0 25px; overflow: auto; }
.cart-item { padding: 15px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.cart-item div { display: flex; align-items: center; gap: 12px; }
.cart-item i { width: 34px; height: 34px; display: grid; place-items: center; background: var(--blue); color: white; font: normal 500 var(--fs-meta) var(--mono); }
.cart-item span { font-size: 13px; font-weight: 700; }
.cart-item button { border: 0; background: transparent; color: var(--muted); font: 400 var(--fs-micro) var(--mono); text-decoration: underline; cursor: pointer; }
.promo-card { margin: auto 25px 18px; padding: 15px; border: 1px dashed var(--ink); background: var(--lime); transform: rotate(-1deg); }
.promo-card > span { font: 500 var(--fs-micro) var(--mono); text-transform: uppercase; }
.promo-card div { margin: 12px 0 8px; display: flex; justify-content: space-between; font: 500 14px var(--mono); }
.promo-card div b { color: var(--blue); }
.promo-card p { margin: 0; font-size: 11px; line-height: 1.5; }
.drawer-footer { padding: 20px 25px 25px; border-top: 1px solid var(--ink); }
.drawer-footer div { display: flex; justify-content: space-between; font: 500 12px var(--mono); text-transform: uppercase; }
.drawer-footer strong { font-size: 22px; }
.drawer-footer button, .checkout-form button { width: 100%; margin: 14px 0 8px; padding: 15px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 11px var(--mono); text-transform: uppercase; cursor: pointer; }
.drawer-footer small, .checkout-form > small { display: block; color: var(--muted); font: 400 var(--fs-micro) var(--mono); text-align: center; }

.checkout-modal { width: min(900px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); padding: 50px; position: fixed; left: 50%; top: 50%; z-index: 80; display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; overflow: auto; background: var(--paper); border: 1px solid var(--ink); transform: translate(-50%, -48%) scale(.98); opacity: 0; pointer-events: none; transition: var(--duration-base) var(--ease-out); }
.checkout-modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.modal-close { position: absolute; top: 15px; right: 15px; }
.checkout-copy h2 { margin: 0 0 20px; font: 500 55px/.9 var(--display); letter-spacing: -.05em; }
.checkout-copy > p:not(.product-kicker) { color: var(--muted); font-size: 13px; line-height: 1.6; }
.checkout-summary { margin-top: 35px; padding: 15px; display: grid; grid-template-columns: 1fr auto; background: var(--lime); border: 1px solid var(--ink); }
.checkout-summary span { font: 500 var(--fs-micro) var(--mono); text-transform: uppercase; }
.checkout-summary strong { font: 500 26px var(--mono); grid-row: span 2; }
.checkout-summary small { margin-top: 8px; }
/* [hidden] and .checkout-form's own `display: flex` are equal specificity, so
   without this the later rule (this one) would silently keep winning and
   `form.hidden = true` on submit would do nothing — the filled-out form
   would stay on screen right next to "Brief received." */
.checkout-form[hidden] { display: none; }
.checkout-form { display: flex; flex-direction: column; gap: 14px; }
.checkout-form label { font: 500 var(--fs-micro) var(--mono); text-transform: uppercase; }
.checkout-form input, .checkout-form textarea, .checkout-form select { width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); font: 400 13px var(--sans); text-transform: none; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 100; padding: 10px 14px; background: var(--blue); color: white; font: 500 var(--fs-meta) var(--mono); text-transform: uppercase; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: var(--duration-base) var(--ease-out); }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .site-header { grid-template-columns: 1fr 1fr; }
  .hero-copy { padding-left: 5vw; padding-right: 5vw; }
  .hero h1 { font-size: clamp(62px, 8.2vw, 88px); }
  .hero-intro, .hero-actions { margin-left: 8%; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .article-grid { grid-template-columns: 1.25fr .75fr; }
  .article-card:last-child { grid-column: 2; }
  .site-footer { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-note { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .announcement { justify-content: space-between; gap: 10px; letter-spacing: .03em; }
  .site-header { min-height: 70px; }
  .brand-copy small { display: none; }
  /* "Project cart" is two words too many once the label sits at the 11px type
     floor next to the menu toggle. The button keeps its full aria-label. */
  .cart-button { padding: 10px; white-space: nowrap; }
  .cart-label-long { display: none; }
  .hero-copy { min-height: auto; padding: 60px 6vw 40px; }
  .hero h1 { font-size: clamp(58px, 18vw, 86px); }
  .hero-intro { margin: 28px 0; font-size: 17px; }
  .hero-actions { margin: 0; flex-direction: column; align-items: flex-start; }
  /* All three stats show on mobile — Experience is the responsiveness/tenure
     proof the hero exists to carry, not a row to drop when space is tight. */
  .availability-row { margin-top: 55px; gap: 20px 16px; grid-template-columns: 1fr 1fr; }
  .availability-row div:last-child { grid-column: 1 / -1; padding-top: 4px; border-top: 1px solid var(--line); }
  .about-section, .content-section, .work-section, .proof-section { padding: 70px 6vw; }
  .about-copy, .section-heading, .proof-grid { grid-template-columns: 1fr; gap: 45px; }
  .about-copy { margin-top: 45px; }
  .about-copy h2, .section-heading h2, .content-heading h2, .hire-section h2 { font-size: clamp(54px, 16vw, 78px); }
  .skills-section { padding: 70px 0; }
  .section-heading { margin: 0 6vw 50px; }
  .section-aside { justify-self: start; }
  .filter-row { margin-left: 6vw; margin-right: 6vw; }
  .product-grid { grid-template-columns: 1fr; }
  .product-visual { min-height: 330px; }
  .product-visual strong { font-size: 65px; }
  /* .case-outcome carries the actual metric — the proof the "Selected work"
     section exists to show — so it wraps onto its own row instead of being
     dropped, keeping the promise made in principle 2 that proof survives on
     the majority device. */
  .case-row { grid-template-columns: 35px 95px 1fr 20px; grid-template-areas: "num thumb title arrow" ". . outcome outcome"; gap: 6px 12px; }
  .case-number { grid-area: num; }
  .case-thumb { grid-area: thumb; height: 74px; }
  .case-title { grid-area: title; font-size: 23px; }
  .case-outcome { grid-area: outcome; display: block; margin-top: 4px; font-size: var(--fs-meta); }
  .case-arrow { grid-area: arrow; }
  .content-heading { align-items: flex-start; flex-direction: column; gap: 30px; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card, .article-card:last-child { grid-column: 1; }
  .article-main { grid-template-columns: 1fr; }
  .proof-grid { margin-top: 45px; }
  .hire-section { padding: 90px 6vw; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-note { grid-column: 1 / -1; }
  .checkout-modal { padding: 55px 22px 25px; grid-template-columns: 1fr; gap: 30px; }
  .checkout-copy h2 { font-size: 44px; }
  .checkout-summary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker div { animation: none; }
  .cart-drawer, .checkout-modal, .toast { transition: none; }
}


/* ---------- Bundles & scope estimates ---------- */
.bundle-rail { margin: 0 3vw 46px; }
.bundle-intro { margin-bottom: 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 40px; padding-bottom: 16px; border-bottom: 1px solid #4c4a45; }
.bundle-intro h3 { margin: 0; font: 500 32px var(--display); letter-spacing: -.03em; }
.bundle-intro p { margin: 0; max-width: 430px; color: #aaa79d; font-size: 13px; line-height: 1.55; }
.bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bundle-card { display: flex; flex-direction: column; padding: 18px; background: #1b1a18; border: 1px solid #4c4a45; }
.bundle-card:hover { border-color: #74716a; }
.bundle-tag { display: inline-block; padding: 5px 8px; background: var(--lime); color: var(--ink); font: 500 var(--fs-micro) var(--mono); text-transform: uppercase; transform: rotate(-2deg); }
.bundle-card h4 { margin: 16px 0 8px; font: 500 30px var(--display); letter-spacing: -.03em; }
.bundle-top p { margin: 0; color: #aaa79d; font-size: 13px; line-height: 1.6; }
.bundle-items { margin: 18px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.bundle-items li { padding: 5px 8px; border: 1px solid #4c4a45; border-radius: 20px; font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; }
.bundle-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid #4c4a45; display: flex; align-items: center; justify-content: space-between; }
.bundle-footer > span { font: 500 18px var(--mono); }
.bundle-footer small { color: #77746d; font-size: var(--fs-micro); text-transform: uppercase; }
.bundle-footer button { border: 0; background: transparent; color: var(--paper); font: 500 var(--fs-meta) var(--mono); text-transform: uppercase; cursor: pointer; }
.bundle-footer button:hover, .bundle-footer button.is-added { color: var(--lime); }

.build-own { margin: 0 3vw 24px; display: flex; align-items: center; gap: 18px; color: #8f8c83; font: 400 var(--fs-meta) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.build-own:before, .build-own:after { content: ""; flex: 1; height: 1px; background: #4c4a45; }

.product-footer b { font-weight: 500; }

/* ---------- Cart estimate ---------- */
.cart-item span { display: flex; flex-direction: column; gap: 3px; }
.cart-item span small { color: var(--muted); font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; }
.drawer-footer .estimate { display: block; }
.estimate-row { padding: 7px 0; }
.estimate-row + .estimate-row { border-top: 1px solid var(--line); }
.estimate-row strong { font-size: 13px; }
.estimate-row.is-lead strong { font-size: 24px; color: var(--blue); }
.estimate-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.checkout-summary { row-gap: 6px; }
.checkout-summary strong { grid-row: auto; font: 500 20px var(--mono); text-align: right; }
.checkout-summary span { align-self: center; }
.checkout-summary small { grid-column: 1 / -1; margin-top: 6px; line-height: 1.5; }

@media (max-width: 1050px) {
  .bundle-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .bundle-rail { margin: 0 6vw 40px; }
  .bundle-intro { flex-direction: column; gap: 14px; }
  .bundle-grid { grid-template-columns: 1fr; }
  .build-own { margin: 0 6vw 22px; }
  /* The scope estimate is the point of the cart — it stays visible on mobile. */
  .checkout-summary { display: grid; }
}

/* ---------- Evidence (replaces fabricated reviews with real engagements) ---------- */
.evidence { margin: 10px 0 0; }
.evidence-toggle { padding: 6px 2px; border: 0; background: transparent; color: #aaa79d; font: 400 var(--fs-meta) var(--mono); text-transform: uppercase; letter-spacing: .04em; text-align: left; cursor: pointer; }
.evidence-toggle span { border-bottom: 1px solid #4c4a45; padding-bottom: 2px; }
.evidence-toggle b { font-weight: 500; color: var(--lime); }
.evidence-toggle:hover, .evidence-toggle[aria-expanded="true"] { color: var(--paper); }
.evidence-toggle:hover span, .evidence-toggle[aria-expanded="true"] span { border-bottom-color: var(--lime); }

.evidence-panel { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #4c4a45; display: flex; flex-direction: column; gap: 18px; }
.evidence-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.evidence-top strong { font: 500 17px var(--display); letter-spacing: -.02em; }
.evidence-top span { color: #77746d; font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.evidence-role { margin: 3px 0 7px; color: var(--lime); font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.evidence-item p:not(.evidence-role) { margin: 0; color: #aaa79d; font-size: 13px; line-height: 1.6; }

.store-evidence { margin: 16px 0 0; color: #aaa79d; font: 400 var(--fs-meta) var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.store-evidence b { font-weight: 500; color: var(--paper); }

.thumb-four { background: #ffe9a8; }

/* ---------- Career timeline ---------- */
.timeline-section { padding: 92px 7vw 110px; background: var(--ink); color: var(--paper); }
.timeline-heading { margin: 60px 0 55px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: end; }
.timeline-heading h2 { margin: 0; font: 500 clamp(46px, 5.5vw, 82px)/.9 var(--display); letter-spacing: -.05em; }
.timeline-heading h2 em { font-weight: 400; color: var(--lime); }
.timeline-heading p { margin: 0; max-width: 420px; color: #aaa79d; line-height: 1.65; }

.timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid #4c4a45; }
.timeline > li { display: grid; grid-template-columns: 160px 1fr; gap: 40px; padding: 30px 0; border-bottom: 1px solid #4c4a45; }
.timeline > li:first-child .tl-what h3 { color: var(--lime); }
.tl-when { display: flex; flex-direction: column; gap: 4px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.tl-when small { color: #77746d; font-size: var(--fs-meta); }
.tl-what h3 { margin: 0; font: 500 clamp(24px, 2.6vw, 34px) var(--display); letter-spacing: -.03em; }
.tl-role { margin: 6px 0 12px; color: #aaa79d; font: 400 var(--fs-meta) var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.tl-what > p:not(.tl-role) { margin: 0; max-width: 62ch; color: #aaa79d; font-size: 14px; line-height: 1.65; }
.tl-what ul { margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.tl-what li { display: block; padding: 5px 9px; border: 1px solid #4c4a45; border-radius: 20px; font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; }

@media (max-width: 760px) {
  .timeline-section { padding: 70px 6vw; }
  .timeline-heading { grid-template-columns: 1fr; gap: 26px; margin: 40px 0 40px; }
  .timeline > li { grid-template-columns: 1fr; gap: 14px; }
  .tl-when { flex-direction: row; align-items: baseline; gap: 7px; }
}

/* ---------- Tech aisle ---------- */
.tech-section { padding: 92px 4vw 110px; border-bottom: 1px solid var(--ink); }
.tech-section .section-heading { margin: 0 3vw 46px; }
.tech-section .section-aside p { color: var(--muted); }
.filter-row-light .filter { border-color: var(--line); color: var(--muted); }
.filter-row-light .filter:hover, .filter-row-light .filter.is-active { color: var(--ink); border-color: var(--ink); background: var(--lime); }

.tech-grid { margin: 0 3vw; display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tech-card { min-width: 0; padding: 18px 17px 16px; display: flex; flex-direction: column; background: var(--paper); }
.tech-card.is-hidden { display: none; }
.tech-head { display: flex; align-items: center; gap: 10px; }
.tech-icon { width: 22px; height: 22px; flex: none; fill: var(--ink); }
.tech-mono { width: 22px; height: 22px; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 500 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: -.02em; }
.tech-head h3 { margin: 0; flex: 1; font: 500 19px var(--display); letter-spacing: -.02em; }
.tech-years { color: var(--muted); font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; white-space: nowrap; }
.tech-note { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.tech-proj { margin: 10px 0 0; font-size: 11px; line-height: 1.5; }
.tech-proj span { color: var(--muted); font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-right: 5px; }
.tech-card button { margin-top: auto; padding-top: 15px; border: 0; background: transparent; font: 500 var(--fs-meta) var(--mono); text-transform: uppercase; text-align: left; cursor: pointer; color: var(--muted); }
.tech-card button:hover { color: var(--blue); }
.tech-card button.is-added { color: var(--blue); }

@media (max-width: 760px) {
  .tech-section { padding: 70px 0 80px; }
  .tech-section .section-heading { margin: 0 6vw 36px; }
  .tech-grid { margin: 0 6vw; grid-template-columns: 1fr; }
  .filter-row-light { margin-left: 6vw; margin-right: 6vw; }
}

.cart-tech { padding: 16px 25px; border-top: 1px solid var(--line); }
.cart-tech-label { margin: 0 0 10px; font: 500 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.cart-tech-label b { color: var(--blue); }
.cart-tech ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.cart-tech li { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 9px; border: 1px solid var(--line); border-radius: 20px; font: 400 var(--fs-meta) var(--mono); }
.cart-tech li button { border: 0; background: none; padding: 0 2px; font-size: 13px; line-height: 1; cursor: pointer; color: var(--muted); }
.cart-tech li button:hover { color: var(--coral); }
.cart-tech small { display: block; margin-top: 11px; color: var(--muted); font-size: var(--fs-meta); line-height: 1.5; }

/* ---------- Checkout: errors, verification, step 2 ---------- */
.turnstile-slot:empty { display: none; }
.form-error { margin: 0; padding: 10px 12px; background: var(--coral); color: var(--ink); font-size: 12px; line-height: 1.5; border: 1px solid var(--ink); }
.checkout-form button[disabled] { opacity: .6; cursor: progress; }
/* The confirmation prose stays at an editorial 46ch measure; the container
   itself doesn't, so the proof list below can use the modal's full width
   instead of wrapping client names inside a paragraph-width column. */
.checkout-done { grid-column: 1 / -1; }
.checkout-done h2, .checkout-done > p { max-width: 46ch; }
.checkout-done h2 { margin: 6px 0 18px; font: 500 clamp(38px, 4.4vw, 55px)/.92 var(--display); letter-spacing: -.05em; }
.checkout-done > p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.done-ref { margin: 0 0 18px; }
.done-ref strong { padding: 3px 7px; background: var(--lime); color: var(--ink); font: 500 13px var(--mono); }
.checkout-done .primary-action { margin: 26px 0 18px; }
.done-alt { font-size: 12px; }

/* Step 2's proof list — the real client evidence for exactly the skills the
   visitor just submitted, filled in by renderDoneProof(). Same underlying
   data as the skill store's evidence disclosure, restyled for the checkout
   modal's light background instead of the dark skills-section. */
.done-proof { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.done-proof-label { margin: 0 0 18px; color: var(--muted); font: 500 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.done-proof-list { display: grid; gap: 18px; }
.done-proof-item { padding: 18px 20px; border: 1px solid var(--line); background: var(--white); }
.done-proof-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.done-proof-head strong { font: 500 20px var(--display); letter-spacing: -.02em; }
.done-proof-head span { color: var(--muted); font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.done-proof-item ul { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; display: flex; flex-direction: column; gap: 14px; }
.done-proof-item li + li { padding-top: 14px; border-top: 1px solid var(--line); }
.done-proof-org { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.done-proof-org b { font-weight: 700; font-size: 13px; }
.done-proof-org span { color: var(--muted); font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.done-proof-role { margin: 3px 0 6px; color: var(--blue); font: 400 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.done-proof-item p:not(.done-proof-role) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }


/* ---------- Mobile navigation ---------- */
/* Below 1050px .desktop-nav is display:none, and until now nothing replaced it —
   the only header control on a phone was the cart. This is a disclosure panel
   under the header rather than a full-screen overlay: the page stays visible
   behind it, the cart button never leaves the header, and no scroll lock is
   needed. Hidden entirely at desktop, so a resize while open cannot strand it. */
.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; align-items: center; gap: 9px; min-height: 24px; padding: 10px 13px; border: 1px solid var(--ink); background: transparent; font: 500 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.nav-toggle:hover { background: var(--ink); color: var(--paper); }
.nav-toggle-bars { position: relative; width: 15px; height: 9px; flex: none; }
.nav-toggle-bars i { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: top var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.nav-toggle-bars i:first-child { top: 0; }
.nav-toggle-bars i:last-child { top: 7.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i { top: 3.75px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child { transform: rotate(-45deg); }

.mobile-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 19; flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--ink); box-shadow: 0 20px 30px -26px rgba(17, 17, 15, .6); }
.mobile-nav a { padding: 17px 3vw; border-top: 1px solid var(--line); font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.mobile-nav a:first-child { border-top: 0; }
.mobile-nav .mobile-nav-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--ink); color: var(--paper); border-top: 0; font: 500 var(--fs-micro) var(--mono); text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 1050px) {
  .nav-toggle { display: inline-flex; }
  .mobile-nav.is-open { display: flex; }
}

@media (max-width: 760px) {
  .nav-toggle { padding: 10px; }
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-nav a { padding-inline: 6vw; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars i { transition: none; }
}

/* ---------- Motion ----------
   Collapse uses grid-template-rows 0fr->1fr rather than max-height, so the
   panel animates to its real height with no magic number. The inner wrapper
   is what clips; `inert` (set in JS) keeps collapsed content out of the tab
   order, since a 0fr row is still focusable. */
.evidence-panel { display: grid; grid-template-rows: 0fr; margin: 0; padding-top: 0; border-top: 0; opacity: 0; transition: grid-template-rows var(--duration-slow) var(--ease-out), opacity var(--duration-base) var(--ease-out), margin var(--duration-slow) var(--ease-out), padding-top var(--duration-slow) var(--ease-out); }
.evidence-panel > .evidence-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.evidence-panel.is-open { grid-template-rows: 1fr; opacity: 1; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #4c4a45; }

/* Filter changes: one settle on the grid reads better than 30 competing card animations. */
@keyframes grid-settle { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.product-grid.is-refreshed, .tech-grid.is-refreshed { animation: grid-settle var(--duration-base) var(--ease-out); }

/* Checkout step 2 lands rather than snapping in. */
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.checkout-done:not([hidden]) { animation: step-in var(--duration-slow) var(--ease-out); }

.evidence-toggle span { transition: border-color var(--duration-fast) var(--ease-out); }
.tech-card, .product-card { transition: background var(--duration-fast) var(--ease-out); }
.tech-card:hover { background: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .evidence-panel { transition: none; }
  .product-grid.is-refreshed, .tech-grid.is-refreshed, .checkout-done:not([hidden]) { animation: none; }
}


/* ---------- Sticky header ----------
   The cart is the point of the site, so it should never be more than a glance
   away. The announcement bar above deliberately scrolls off — it is read once.
   Anchored sections need scroll-margin so their headings do not land underneath
   the header when jumped to. */
section[id], [id^="evidence-"] { scroll-margin-top: 96px; }

@media (max-width: 760px) {
  section[id], [id^="evidence-"] { scroll-margin-top: 78px; }
}