/* Dyenamic Designs: design system. Every color is a variable in :root and nothing below uses a hard-coded color.
   Colors marked SAMPLED were measured from the owner's header image (facebook header w logo.jpg); DERIVED ones are tints of those,
   chosen only so text passes WCAG AA (the pairs and their ratios are listed in WORKLOG.md).
   Light and dark sections are built from the same variables: put class "dark" or "light" on a section. */
:root {
    --c-black: #000000;        /* SAMPLED: the header image background */
    --c-white: #ffffff;        /* SAMPLED: the white of the monogram and wordmark (#fdfdfd) rounded to white */
    --c-blue: #1313f4;         /* SAMPLED: median of the saturated jersey stripe */
    --c-blue-deep: #222a84;    /* SAMPLED: median of the hoodie blue band */
    --c-yellow: #eff259;       /* SAMPLED: median of the header's yellow text */
    --c-ink: #0c0c14;          /* DERIVED: black with a hint of blue, for panels on black */
    --c-ink-2: #171724;        /* DERIVED: one step lighter, for cards and fields on dark */
    --c-paper: #f2f3f9;        /* DERIVED: very light blue-gray, the light section background */
    --c-blue-glow: #9aa4ff;    /* DERIVED: the blue lightened, for links and small accents on black */
    --c-gray-d: #c0c3d3;       /* DERIVED: secondary text on dark */
    --c-gray-l: #4a4c60;       /* DERIVED: secondary text on light */
    --c-field-line: #6a6d84;   /* DERIVED: input borders on light (3:1 against white) */
    --c-err-l: #b3261e;        /* DERIVED: error text on light */
    --c-err-d: #ff9d94;        /* DERIVED: error text on dark */
    --c-ok-l: #11683a;         /* DERIVED: success text on light */
    --c-ok-d: #86e3ab;         /* DERIVED: success text on dark */
    --line-d: rgba(255, 255, 255, 0.2);
    --line-l: #cfd2e3;
    --veil: rgba(0, 0, 0, 0.72);
    --mark-faint: rgba(255, 255, 255, 0.14);
    --shade-1: rgba(0, 0, 0, 0.35);
    --shade-2: rgba(0, 0, 0, 0.5);

    --font-head: 'Barlow Condensed', 'Arial Narrow', 'Bahnschrift', 'Impact', sans-serif;
    --font-body: 'Barlow', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --wrap: 1180px;
    --gut: 20px;
    --hdr-h: 68px;
    --r: 6px;
    --slant: -12deg;
}
.dark {
    --bg: var(--c-black); --bg-2: var(--c-ink); --bg-3: var(--c-ink-2); --fg: var(--c-white); --muted: var(--c-gray-d);
    --line: var(--line-d); --link: var(--c-blue-glow); --focus: var(--c-yellow); --err: var(--c-err-d); --ok: var(--c-ok-d); --accent: var(--c-yellow);
    background: var(--bg); color: var(--fg);
}
.light {
    --bg: var(--c-paper); --bg-2: var(--c-white); --bg-3: var(--c-paper); --fg: var(--c-black); --muted: var(--c-gray-l);
    --line: var(--line-l); --link: var(--c-blue); --focus: var(--c-blue); --err: var(--c-err-l); --ok: var(--c-ok-l); --accent: var(--c-blue);
    background: var(--bg); color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 12px); }
html.lock { overflow: hidden; }
body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; background: var(--c-black); color: var(--c-white); overflow-x: clip; }
body.has-pv { padding-bottom: 64px; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: 0.01em; margin: 0 0 0.5em; }
h1, h2 { font-style: italic; }
h2 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); }
h3 { font-size: 1.7rem; }
p { margin: 0 0 1em; }
a { color: var(--link, var(--c-blue-glow)); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus, var(--c-yellow)); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-off], [hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--c-yellow); color: var(--c-black); padding: 12px 18px; font-weight: 700; border-radius: 0 0 var(--r) var(--r); text-decoration: none; }
.skip:focus { top: 0; }
#site-header, #site-footer { display: contents; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap.narrow { max-width: 820px; }
.center { text-align: center; }
.sec { padding-block: clamp(52px, 8vw, 104px); position: relative; }
.eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem; }
.eyebrow::before { content: none; } /* 2026-10-08 Eddie item 8: no dash before the section labels */
.lead { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.45; color: var(--fg); }
.muted { color: var(--muted); }

/* ---------- the monogram, drawn from logo-mark.svg so it can take any color ---------- */
.mark { display: inline-block; aspect-ratio: 360.33 / 302.68; background-color: currentColor; -webkit-mask: url(/img/logo-mark.svg) center / contain no-repeat; mask: url(/img/logo-mark.svg) center / contain no-repeat; flex: none; }

/* ---------- buttons: the slant lives on a background layer so the focus ring and the text stay square ---------- */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 0; background: none; color: var(--c-white); --btn-bg: var(--c-blue); --btn-bd: var(--c-blue); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg); border: 2px solid var(--btn-bd); border-radius: 4px; transform: skewX(var(--slant)); transition: transform 0.15s ease, background-color 0.15s ease; }
.btn:hover::before { transform: skewX(var(--slant)) translateY(-2px); }
.btn:active::before { transform: skewX(var(--slant)) translateY(0); }
.btn.btn-blue { --btn-bg: var(--c-blue); --btn-bd: var(--c-blue); color: var(--c-white); }
.btn.btn-line { --btn-bg: transparent; --btn-bd: currentColor; color: var(--fg, var(--c-white)); }
.btn.btn-dark { --btn-bg: var(--c-black); --btn-bd: var(--c-black); color: var(--c-white); }
.btn.btn-yellow { --btn-bg: var(--c-yellow); --btn-bd: var(--c-yellow); color: var(--c-black); }
.btn-sm { min-height: 46px; padding: 0 22px; font-size: 1.15rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn[disabled]::before { transform: skewX(var(--slant)); }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px 20px; margin: 28px 0 0; }
.btn-text { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 100; background: var(--c-black); color: var(--c-white); border-bottom: 1px solid var(--line-d); --focus: var(--c-yellow); --link: var(--c-blue-glow); }
.ns-bar { padding-block: 14px; background: var(--c-black); }
.ns-bar a { color: var(--c-white); font-weight: 700; }
.dark.alt { background: var(--c-ink); }
.hdr-in { display: flex; align-items: center; gap: 20px; min-height: var(--hdr-h); max-width: 1400px; margin-inline: auto; padding-inline: var(--gut); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--c-white); text-decoration: none; flex: none; }
.brand .mark { width: 44px; }
.brand-name { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-white); text-decoration: none; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--c-blue-glow); }
.hdr-cta { display: flex; align-items: center; gap: 14px; flex: none; }
.hdr-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px; color: var(--c-white); font-weight: 700; text-decoration: none; white-space: nowrap; }
.hdr-phone:hover span { text-decoration: underline; }
.menu-btn { flex: none; display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid var(--line-d); border-radius: var(--r); background: none; color: var(--c-white); cursor: pointer; }
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 3px; background: currentColor; border-radius: 2px; position: relative; }
.bars::before, .bars::after { content: ''; position: absolute; left: 0; }
.bars::before { top: -7px; } .bars::after { top: 7px; }
.menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-black); border-bottom: 1px solid var(--line-d); padding: 8px var(--gut) 22px; max-height: calc(100svh - var(--hdr-h)); overflow: auto; }
.menu ul { list-style: none; margin: 0 0 14px; padding: 0; }
.menu li a { display: flex; align-items: center; min-height: 52px; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-white); text-decoration: none; border-bottom: 1px solid var(--line-d); }
.menu-cta { display: grid; gap: 12px; }
/* the menu button takes over when the links no longer fit (chrome.js fitNav sets nav-burger) and always on phones */
html.nav-compact:not(.nav-burger) .hdr-phone span { display: none; }
html.nav-compact:not(.nav-burger) .hdr-phone { width: 48px; justify-content: center; padding: 0; border: 2px solid var(--line-d); border-radius: var(--r); }
html.nav-burger .nav, html.nav-burger .hdr-cta .btn, html.nav-burger .hdr-phone span { display: none; }
html.nav-burger .menu-btn { display: inline-flex; }
html.nav-burger .hdr-cta { margin-left: auto; }
html.nav-burger .hdr-phone { width: 48px; justify-content: center; padding: 0; border: 2px solid var(--line-d); border-radius: var(--r); }
html:not(.nav-burger) .menu { display: none !important; }
@media (max-width: 760px) {
    .nav, .hdr-cta .btn, .hdr-phone span { display: none; }
    .menu-btn { display: inline-flex; }
    .hdr-cta { margin-left: auto; }
    .hdr-phone { width: 48px; justify-content: center; padding: 0; border: 2px solid var(--line-d); border-radius: var(--r); }
    .brand-name { font-size: 1.35rem; }
    .brand .mark { width: 38px; }
    html:not(.nav-burger) .menu:not([hidden]) { display: block !important; }
}

/* ---------- hero: the showpiece ----------
   Motion list (all CSS, no libraries; every one ends in the normal static page, and prefers-reduced-motion turns them all off):
   1 stripes sweep in (.deco polygons, 0.85 s once)   2 monogram wipes in (.hero-mark, 1 s once)   3 pinstripes drift on the blue slab (.slab-stripes, 18 s loop)
   4 faint diagonal bands drift behind the hero (.hero-bg, 24 s loop)   5 a light-blue shine passes over the monogram (.hero-shine, every 8 s)   6 the hazard bar in the badge moves (1.2 s loop)
   7 the marquee scrolls (34 s loop, pauses on hover and focus). Text never sits over a white stripe: the stripes live in the art column only. */
:root {
    --band-faint: rgba(255, 255, 255, 0.045);
    --stripe-sheen: rgba(255, 255, 255, 0.12);
    --photo-veil-a: rgba(0, 0, 0, 0.8);
    --photo-veil-b: rgba(0, 0, 0, 0.45);
}
.hero { position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; isolation: isolate; min-height: calc(100svh - var(--hdr-h)); }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, var(--band-faint) 0 46px, transparent 46px 150px); animation: drift 24s linear infinite; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero.has-photo .hero-bg { background: linear-gradient(var(--photo-veil-a), var(--photo-veil-a)); animation: none; }
@media (min-width: 880px) { .hero.has-photo .hero-bg { background: linear-gradient(90deg, var(--photo-veil-a) 0%, var(--photo-veil-a) 45%, var(--photo-veil-b) 100%); } }
.hero-copy { padding: clamp(24px, 5vw, 48px) var(--gut) clamp(40px, 6vw, 64px); position: relative; z-index: 1; align-self: center; }
.uc-badge { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 6px 14px 6px 8px; border: 2px solid var(--c-yellow); background: var(--c-black); color: var(--c-yellow); font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.1; }
.hazard { width: 46px; height: 22px; flex: none; background: repeating-linear-gradient(-45deg, var(--c-yellow) 0 8px, var(--c-black) 8px 16px); animation: haz 1.2s linear infinite; }
.uc-line { margin: 0 0 22px; max-width: 36ch; color: var(--c-white); font-size: 1.1rem; font-weight: 500; }
.hero h1 { font-size: clamp(3.6rem, 18vw, 5.6rem); line-height: 0.9; margin: 0 0 0.35em; }
.hero h1 span { display: block; }
.hero h1 .hl { color: var(--c-white); position: relative; display: inline-block; }
.hero h1 .hl::after { content: ''; position: absolute; left: -2%; right: 8%; bottom: -0.06em; height: 0.11em; background: var(--c-blue); transform: skewX(var(--slant)); }
.hero .lead { max-width: 30ch; margin-bottom: 0; }
.hero-art { position: relative; order: -1; height: clamp(220px, 36svh, 330px); overflow: hidden; }
.hero-art .deco { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.d-blue { fill: var(--c-blue); } .d-white { fill: var(--c-white); } .d-yellow { fill: var(--c-yellow); }
.deco polygon { animation: sweep 0.85s cubic-bezier(0.2, 0.85, 0.25, 1) both; }
.deco .d-white { animation-delay: 0.06s; } .deco .d-blue { animation-delay: 0.14s; }
.slab-stripes { position: absolute; inset: 0; clip-path: polygon(40% 0, 100% 0, 100% 100%, 10% 100%); background: repeating-linear-gradient(115deg, var(--stripe-sheen) 0 16px, transparent 16px 70px); animation: drift2 18s linear infinite; }
.hero-mark, .hero-shine { position: absolute; left: 50%; top: 52%; width: min(62%, 340px); transform: translate(-50%, -50%); }
.hero-mark { color: var(--c-white); animation: wipe 1s cubic-bezier(0.3, 0.8, 0.2, 1) 0.25s both; }
.hero-shine { background-color: transparent; background-image: linear-gradient(105deg, transparent 40%, var(--c-blue-glow) 50%, transparent 60%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0; animation: shine 8s ease-in-out 2.2s infinite; pointer-events: none; }
@media (min-width: 880px) {
    .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: clamp(620px, calc(100svh - var(--hdr-h)), 900px); }
    .hero-copy { padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); padding-right: 24px; padding-block: 64px; }
    .hero h1 { font-size: clamp(4.2rem, 7.4vw, 6.9rem); }
    .hero-art { order: 0; height: auto; }
    .hero-mark, .hero-shine { width: min(78%, 520px); }
}
@keyframes drift { to { background-position: 135.9px 63.4px; } }
@keyframes drift2 { to { background-position: 63.4px 29.6px; } }
@keyframes haz { to { background-position: 22.63px 0; } }
@keyframes sweep { from { transform: translateX(75px); } }
@keyframes wipe { from { clip-path: polygon(0 0, 0 0, -12% 100%, -12% 100%); } to { clip-path: polygon(0 0, 125% 0, 113% 100%, -12% 100%); } }
@keyframes shine { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }

/* ---------- marquee ---------- */
.marquee { background: var(--c-blue); color: var(--c-white); overflow: hidden; padding-block: 16px; border-block: 3px solid var(--c-black); }
.marquee:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: -8px; }
.mq-track { display: flex; width: max-content; animation: mq 34s linear infinite; }
.marquee:hover .mq-track, .marquee:focus .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
.mq-set { display: flex; flex: none; list-style: none; margin: 0; padding: 0; font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.4rem); text-transform: uppercase; letter-spacing: 0.05em; }
.mq-set li { display: flex; align-items: center; padding-inline: 26px; white-space: nowrap; }
.mq-set li::after { content: ''; width: 12px; height: 1.1em; margin-left: 52px; background: var(--c-yellow); transform: skewX(var(--slant)); }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { width: auto; flex-wrap: wrap; justify-content: center; } .mq-set:nth-child(n+2) { display: none; } .mq-set { flex-wrap: wrap; justify-content: center; } }

/* ---------- coming soon ---------- */
.soon-sec { background: var(--c-ink); }
.soon-sec .sec-head p { color: var(--c-gray-d); }
.soon-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.soon { position: relative; flex: 1 1 230px; max-width: 290px; padding: 28px 22px 26px; background: var(--c-ink-2); border: 1px solid var(--line-d); border-top: 5px solid var(--c-blue); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); transition: transform 0.2s ease; }
.soon:hover { transform: translateY(-4px); }
.soon .ico { display: block; margin-bottom: 14px; color: var(--c-yellow); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.soon h3 { margin: 0 0 0.3em; color: var(--c-white); font-size: 1.75rem; }
.soon p { margin: 0; color: var(--c-gray-d); }
.tag-soon { position: absolute; top: 14px; right: 14px; padding: 2px 10px; background: var(--c-yellow); color: var(--c-black); font-family: var(--font-head); font-weight: 800; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; transform: skewX(var(--slant)); }

/* ---------- our work: appears only when site-data.js has at least three photos with real descriptions ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; grid-auto-flow: dense; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .work-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; } }
.wk { position: relative; overflow: hidden; background: var(--c-ink); }
.wk:nth-child(6n + 1) { grid-row: span 2; }
.wk:nth-child(6n + 4) { grid-column: span 2; }
.wk-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.wk-btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.wk-btn:hover img, .wk-btn:focus-visible img { transform: scale(1.05); }
.wk-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px; background: linear-gradient(transparent, var(--c-black)); color: var(--c-white); font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; }
.wk-btn:hover .wk-label, .wk-btn:focus-visible .wk-label { opacity: 1; transform: none; }
@media (hover: none) { .wk-label { opacity: 1; transform: none; } }
.lb-wrap { display: grid; gap: 12px; justify-items: center; }
.lb-wrap img { max-width: 100%; max-height: 68vh; width: auto; height: auto; object-fit: contain; }
.lb-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }

/* ---------- made in house: more presence ---------- */
.sec.inhouse { padding-block: clamp(64px, 9vw, 120px); }
.sec.inhouse .inhouse-grid { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); }
.sec.inhouse h2 { font-size: clamp(2.8rem, 7vw, 5.4rem); }
.sec.inhouse .lead { max-width: 34ch; font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
.sec.inhouse .steps { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sec.inhouse .step { min-height: clamp(150px, 20vw, 240px); padding: 20px 18px; border-left-width: 8px; position: relative; overflow: hidden; }
.sec.inhouse .step-w { font-size: clamp(2.2rem, 5.6vw, 4.8rem); }
.sec.inhouse .step-n { font-size: 1.6rem; }
.sec.inhouse .turn { margin-top: 0; padding: 24px 28px; }
.sec.inhouse .turn strong { font-size: clamp(3rem, 8vw, 5.6rem); }
@media (max-width: 760px) { .sec.inhouse .steps { grid-template-columns: 1fr 1fr; } }

/* ---------- what we make ---------- */
.sec-head { max-width: 760px; margin: 0 auto clamp(30px, 5vw, 52px); text-align: center; }
.sec-head p { color: var(--muted); font-size: 1.15rem; margin-bottom: 0; }
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.card { flex: 1 1 320px; max-width: 380px; background: var(--c-ink); color: var(--c-white); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; --link: var(--c-blue-glow); --focus: var(--c-yellow); }
.card-panel { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--c-blue-deep); }
.card-panel.p-blue { background: var(--c-blue); } .card-panel.p-ink { background: var(--c-ink-2); }
.card-panel .mark { position: absolute; right: -6%; bottom: -14%; width: 62%; color: var(--mark-faint); }
.card-panel::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: var(--c-black); clip-path: polygon(0 0, 100% 0, 40% 100%, 0 100%); opacity: 0.35; }
.card-num { position: absolute; left: 20px; bottom: 12px; z-index: 1; font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--c-white); }
.card-body { padding: 22px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.card h3 { margin-bottom: 0.3em; color: var(--c-white); }
.card p { color: var(--c-gray-d); margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
.chips li { padding: 5px 12px; border: 1px solid var(--line-d); border-radius: 3px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-white); }
.card .more { margin-top: auto; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- made in house ---------- */
.inhouse-grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .inhouse-grid { grid-template-columns: 0.9fr 1.1fr; } }
.inhouse h2 { margin-bottom: 0.3em; }
.inhouse .lead { color: var(--c-gray-d); }
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.step { background: var(--c-ink-2); border-left: 6px solid var(--c-blue); padding: 18px 18px 20px; min-height: 130px; display: flex; flex-direction: column; justify-content: flex-end; }
.step-n { font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: 1.3rem; color: var(--c-yellow); letter-spacing: 0.08em; }
.step-w { font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: clamp(2.2rem, 5vw, 3rem); text-transform: uppercase; line-height: 1; color: var(--c-white); }
.turn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 22px 0 0; padding: 20px 22px; background: var(--c-blue-deep); border-left: 6px solid var(--c-yellow); }
.turn strong { font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; text-transform: uppercase; }
.turn span { color: var(--c-white); font-size: 1.1rem; }

/* ---------- quote ---------- */
.quote-grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (min-width: 940px) { .quote-grid { grid-template-columns: 0.8fr 1.2fr; } }
.quote-info h2 { margin-bottom: 0.4em; }
.quote-info p { color: var(--muted); font-size: 1.15rem; }
.contact-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 4px; }
.contact-list a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 700; font-size: 1.2rem; }
.form-card { background: var(--c-white); color: var(--c-black); border: 1px solid var(--line-l); border-radius: var(--r); padding: clamp(20px, 4vw, 36px); box-shadow: 0 18px 40px -22px var(--shade-1); border-top: 6px solid var(--c-blue); }
.form-grid { display: grid; gap: 0 18px; }
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { margin-bottom: 18px; }
.field label, .field .lbl { display: block; font-weight: 700; margin-bottom: 6px; }
.field label small, .field .lbl small { font-weight: 500; color: var(--muted); font-size: 0.95rem; }
.input { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--c-black); background: var(--c-white); border: 2px solid var(--c-field-line); border-radius: var(--r); }
textarea.input { min-height: 120px; resize: vertical; }
.input:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 1px; border-color: var(--c-blue); }
.input[aria-invalid="true"] { border-color: var(--c-err-l); }
.field-err { color: var(--err); font-weight: 600; margin: 6px 0 0; font-size: 1rem; }
.help { color: var(--muted); font-size: 0.95rem; margin: 8px 0 0; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.drop { position: relative; border: 2px dashed var(--c-field-line); border-radius: var(--r); background: var(--c-paper); transition: background-color 0.15s, border-color 0.15s; }
.drop.over { border-color: var(--c-blue); background: var(--c-white); }
.drop:focus-within { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.drop-label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; text-align: center; pointer-events: none; min-height: 96px; justify-content: center; }
.drop-label strong { font-family: var(--font-head); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-blue); }
.drop-label span { color: var(--muted); }
.files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.file { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; background: var(--c-paper); border: 1px solid var(--line-l); border-radius: var(--r); }
.file.bad { border-color: var(--c-err-l); }
.f-name { font-weight: 700; word-break: break-word; }
.f-meta { color: var(--muted); font-size: 0.95rem; display: block; }
.f-state { grid-column: 1 / -1; font-size: 0.95rem; }
.f-state.bad { color: var(--c-err-l); font-weight: 600; }
.f-state.ok { color: var(--c-ok-l); font-weight: 600; }
.bar { height: 8px; background: var(--line-l); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.bar i { display: block; height: 100%; width: 0; background: var(--c-blue); transition: width 0.15s linear; }
.f-act { display: flex; gap: 8px; }
.btn-mini { min-height: 44px; min-width: 44px; padding: 0 14px; font: inherit; font-weight: 700; color: var(--c-blue); background: var(--c-white); border: 2px solid var(--c-blue); border-radius: var(--r); cursor: pointer; }
.btn-mini:hover { background: var(--c-blue); color: var(--c-white); }
.send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.form-status { margin: 16px 0 0; padding: 0; font-weight: 600; }
.form-status:not(:empty) { padding: 14px 16px; border-radius: var(--r); background: var(--c-paper); border-left: 6px solid var(--c-blue); }
.form-status.bad { color: var(--c-err-l); border-left-color: var(--c-err-l); background: var(--c-white); border: 2px solid var(--c-err-l); border-left-width: 6px; }
.done { text-align: center; padding: 10px 0; }
.done .ref { display: inline-block; margin: 8px 0 18px; padding: 10px 22px; background: var(--c-black); color: var(--c-yellow); font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; letter-spacing: 0.12em; transform: skewX(var(--slant)); }
.done .ref span { display: inline-block; transform: skewX(12deg); }
.off-note { background: var(--c-white); border: 1px solid var(--line-l); border-top: 6px solid var(--c-blue); border-radius: var(--r); padding: clamp(20px, 4vw, 32px); color: var(--c-black); }

/* ---------- footer ---------- */
.foot { background: var(--c-black); color: var(--c-white); border-top: 4px solid var(--c-blue); --link: var(--c-blue-glow); --focus: var(--c-yellow); }
.foot-grid { display: grid; gap: 34px 28px; padding-block: clamp(40px, 6vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-brand img { display: block; height: 108px; width: auto; object-fit: contain; margin-bottom: 14px; }
.foot-brand p { color: var(--c-gray-d); max-width: 32ch; }
.foot-h { font-size: 1.3rem; letter-spacing: 0.12em; color: var(--c-yellow); font-style: normal; margin-bottom: 0.6em; }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list a, .foot-plain { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-white); }
.foot-list a:hover { color: var(--c-blue-glow); }
.foot-plain { color: var(--c-gray-d); }
.foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 18px; border-top: 1px solid var(--line-d); color: var(--c-gray-d); font-size: 0.95rem; }
.foot-bar p { margin: 0; } .foot-bar a { color: var(--c-white); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- inner pages (legal, contact, 404, preview gate) ---------- */
.page-hero { padding-block: clamp(44px, 7vw, 84px); border-bottom: 4px solid var(--c-blue); position: relative; overflow: hidden; }
.page-hero .mark { position: absolute; right: -2%; top: 50%; width: min(34%, 320px); transform: translateY(-50%); color: var(--mark-faint); }
@media (max-width: 640px) { .page-hero .mark { display: none; } }
.page-hero h1 { font-size: clamp(2.8rem, 8vw, 5rem); position: relative; margin-bottom: 0.2em; }
.page-hero p { position: relative; max-width: 60ch; color: var(--c-gray-d); font-size: 1.2rem; margin: 0; }
.prose { max-width: 780px; margin-inline: auto; }
.prose h2 { font-size: clamp(1.9rem, 4vw, 2.4rem); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; } .prose li { margin-bottom: 0.45em; }
.prose a { font-weight: 600; }
.prose .callout { background: var(--c-white); border-left: 6px solid var(--c-blue); padding: 18px 22px; margin: 0 0 30px; border-radius: 0 var(--r) var(--r) 0; border: 1px solid var(--line-l); border-left-width: 6px; }
.prose .callout h2 { font-size: 1.6rem; margin: 0 0 0.3em; } .prose .callout p { margin: 0; }
.contact-cards { display: grid; gap: 18px; margin-top: 8px; }
@media (min-width: 700px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
.contact-card { background: var(--c-white); border: 1px solid var(--line-l); border-top: 6px solid var(--c-blue); border-radius: var(--r); padding: 22px; }
.contact-card h2 { font-size: 1.5rem; margin: 0 0 0.3em; font-style: normal; }
.contact-card a { font-size: clamp(1.05rem, 4.6vw, 1.25rem); font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; word-break: break-word; }
.err-page { min-height: calc(100svh - var(--hdr-h) - 300px); display: grid; place-items: center; text-align: center; padding-block: 60px; }
.err-page .big { font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: clamp(7rem, 30vw, 14rem); line-height: 0.85; color: var(--c-blue-glow); margin: 0; }
.err-page h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.err-page .cta-row { justify-content: center; }
.gate { min-height: 100svh; display: grid; place-items: center; padding: 24px var(--gut); background: var(--c-black); }
.gate-card { width: 100%; max-width: 420px; background: var(--c-ink); border: 1px solid var(--line-d); border-top: 6px solid var(--c-blue); border-radius: var(--r); padding: 30px 26px; text-align: center; }
.gate-card .field { text-align: left; }
.gate-card .input { background: var(--c-ink-2); color: var(--c-white); border-color: var(--c-gray-d); }
.gate-card .field-err { color: var(--c-err-d); }
.gate-card p { color: var(--c-gray-d); }
.gate-mark { width: 84px; color: var(--c-white); margin-bottom: 14px; }
.gate-card h1 { font-size: 2.2rem; }

/* ---------- preview bar, toasts, modal ---------- */
.pv-bar { position: fixed; left: 12px; bottom: 12px; z-index: 150; display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 16px; background: var(--c-yellow); color: var(--c-black); border-radius: 999px; font-weight: 700; box-shadow: 0 6px 20px -4px var(--shade-2); max-width: calc(100vw - 96px); }
.pv-bar.live { background: var(--c-white); }
.pv-bar button, .pv-bar a { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--c-black); color: var(--c-white); font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.pv-bar :focus-visible { outline-color: var(--c-blue); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--c-black); color: var(--c-white); padding: 12px 16px; border-radius: var(--r); border-left: 6px solid var(--c-ok-d); font-weight: 600; box-shadow: 0 10px 30px -8px var(--shade-2); }
.toast.bad { border-left-color: var(--c-err-d); }
.overlay { position: fixed; inset: 0; z-index: 250; background: var(--veil); display: grid; place-items: center; padding: 16px; overflow: auto; }
.modal { width: 100%; max-width: 520px; max-height: calc(100svh - 32px); display: flex; flex-direction: column; background: var(--c-white); color: var(--c-black); border-radius: var(--r); border-top: 6px solid var(--c-blue); --link: var(--c-blue); --focus: var(--c-blue); }
.modal.wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.modal-head h2 { font-size: 1.9rem; margin: 0; }
.modal .x { width: 48px; height: 48px; border: 0; background: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--c-black); border-radius: var(--r); }
.modal-body { padding: 12px 20px 20px; overflow: auto; }
.modal-foot { padding: 14px 20px 18px; border-top: 1px solid var(--line-l); display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ---------- phase 2: products, how it works, sizing ---------- */
.stage-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: s; }
.stage-chips li { counter-increment: s; padding: 8px 16px; border: 1px solid var(--line-d); border-left: 5px solid var(--c-blue); background: var(--c-ink-2); font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-white); }
.stage-chips li::before { content: counter(s) ' '; color: var(--c-yellow); }
.chips-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--c-black); border-radius: var(--r); background: var(--c-white); color: var(--c-black); font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.chip.on { background: var(--c-black); color: var(--c-white); }
.pgroup { margin-bottom: 44px; }
.pgroup h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.pgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.pcard { flex: 1 1 260px; max-width: 360px; background: var(--c-white); border: 1px solid var(--line-l); border-radius: var(--r); overflow: hidden; border-top: 6px solid var(--c-blue); }
.pcard-link { display: block; height: 100%; color: var(--c-black); text-decoration: none; }
.pcard-link:hover h3 { color: var(--c-blue); }
.pcard-img { aspect-ratio: 4 / 3; background: var(--c-ink); display: grid; place-items: center; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-panel { width: 100%; height: 100%; min-height: 160px; display: grid; place-items: center; background: var(--c-blue-deep); }
.ph-panel .mark { width: 44%; color: var(--mark-faint); }
.pcard-body { padding: 16px 18px 20px; }
.pcard-body h3 { margin-bottom: 0.2em; }
.pcard-body p { margin: 0 0 6px; color: var(--c-gray-l); }
.price { font-weight: 700; }
.pcard-body p.price, .pinfo p.price { color: var(--c-black); }
.price.big { font-size: 1.5rem; }
.pdetail { display: grid; gap: clamp(24px, 4vw, 48px); }
@media (min-width: 880px) { .pdetail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.g-main { background: var(--c-ink); border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; display: grid; }
.g-main img { width: 100%; height: 100%; object-fit: contain; background: var(--c-white); }
.g-thumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; }
.g-th { width: 64px; height: 64px; padding: 0; border: 2px solid var(--line-l); border-radius: 4px; background: var(--c-white); cursor: pointer; overflow: hidden; }
.g-th[aria-current="true"] { border-color: var(--c-blue); }
.g-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sample-flag { display: inline-block; padding: 6px 12px; background: var(--c-yellow); color: var(--c-black); font-weight: 700; border-radius: 3px; margin: 0 0 14px; }
.h-sm { font-size: 1.5rem; margin: 22px 0 8px; font-style: normal; }
.chips-light li { border-color: var(--line-l); color: var(--c-black); background: var(--c-white); }
.opts { display: grid; gap: 6px; margin: 0; }
.opts div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.opts dt { font-weight: 700; }
.opts dd { margin: 0; color: var(--c-gray-l); }
.empty-note { padding: 28px; background: var(--c-white); border: 1px dashed var(--c-field-line); border-radius: var(--r); text-align: center; }
.chart { margin-bottom: 44px; }
.chart h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.chart h3 { font-size: 1.4rem; margin-top: 22px; }
.tbl-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--line-l); border-radius: var(--r); background: var(--c-white); }
.size-table, .roster-table { border-collapse: collapse; width: 100%; min-width: 320px; }
.size-table th, .size-table td, .roster-table th, .roster-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line-l); }
.size-table thead th, .roster-table thead th { background: var(--c-black); color: var(--c-white); font-family: var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; font-size: 1.1rem; }
.size-table tbody th { font-weight: 800; }
.timeline { list-style: none; margin: 0 0 36px; padding: 0; }
.timeline li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding-bottom: 28px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: 27px; top: 56px; bottom: 0; width: 3px; background: var(--c-blue); }
.timeline li:last-child::before { display: none; }
.tl-n { width: 56px; height: 56px; display: grid; place-items: center; background: var(--c-black); color: var(--c-yellow); font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: 2rem; transform: skewX(var(--slant)); }
.timeline h2 { font-size: 2rem; margin: 6px 0 4px; font-style: normal; }
.timeline p { margin: 0; color: var(--c-gray-l); }
.steps-light { grid-template-columns: repeat(4, 1fr); margin: 24px 0; }
@media (max-width: 640px) { .steps-light { grid-template-columns: 1fr 1fr; } }
.steps-light .step { background: var(--c-black); }
.turn-light { background: var(--c-blue-deep); color: var(--c-white); }

/* ---------- phase 3: order form, portal, status ---------- */
.ofs { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.ofs legend { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: 1.9rem; text-transform: uppercase; margin-bottom: 14px; padding: 0; }
.ofs legend small { font-family: var(--font-body); font-style: normal; font-size: 1rem; font-weight: 500; text-transform: none; color: var(--c-gray-l); }
.ofs-n { width: 40px; height: 40px; display: grid; place-items: center; background: var(--c-blue); color: var(--c-white); transform: skewX(var(--slant)); font-style: normal; }
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.size-cell label { display: block; font-weight: 800; text-align: center; margin-bottom: 4px; }
.size-cell .input { text-align: center; padding-inline: 6px; }
.roster-table td { padding: 6px; }
.roster-table .input { min-height: 44px; }
.paste-err { margin-top: 12px; padding: 12px 16px; background: var(--c-white); border: 2px solid var(--c-err-l); border-left-width: 6px; border-radius: var(--r); color: var(--c-black); }
.paste-err ul { margin: 6px 0; padding-left: 1.2em; }
.paste-err p { margin: 0 0 4px; }
.acct-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; background: var(--c-white); border: 1px solid var(--line-l); border-radius: var(--r); margin-bottom: 22px; }
.acct-bar a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 10px; }
.narrow-card { max-width: 520px; margin-inline: auto; }
.olist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ocard { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 18px 20px; background: var(--c-white); border: 1px solid var(--line-l); border-left: 6px solid var(--c-blue); border-radius: var(--r); }
.o-num { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; margin: 0; text-transform: uppercase; }
.o-sum { margin: 0 0 2px; font-weight: 600; }
.ocard .muted { margin: 0; }
.o-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pill-status { padding: 4px 12px; background: var(--c-black); color: var(--c-white); font-weight: 700; border-radius: 999px; font-size: 0.95rem; }
.todo { margin: 8px 0 0; padding-left: 1.1em; color: var(--c-err-l); font-weight: 700; }
.panel { background: var(--c-white); border: 1px solid var(--line-l); border-top: 6px solid var(--c-black); border-radius: var(--r); padding: clamp(18px, 3vw, 30px); margin-bottom: 22px; }
.panel h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-style: normal; }
.panel h2:focus { outline: none; }
.panel h3 { font-size: 1.4rem; margin-top: 18px; }
.todo-box { margin-top: 18px; padding: 14px 18px; background: var(--c-paper); border-left: 6px solid var(--c-blue); }
.todo-box ul { margin: 6px 0 0; padding-left: 1.2em; }
.stages { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.stages li { position: relative; text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--c-gray-l); padding-top: 26px; }
.stages .dot { position: absolute; top: 0; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 3px solid var(--c-field-line); background: var(--c-white); }
.stages li.done .dot { background: var(--c-blue); border-color: var(--c-blue); }
.stages li.current .dot { background: var(--c-yellow); border-color: var(--c-black); width: 22px; height: 22px; margin-left: -11px; top: -2px; }
.stages li.current { color: var(--c-black); font-weight: 800; }
.stages li.done { color: var(--c-black); }
.stages li.off { opacity: 0.7; }
@media (max-width: 640px) { .stages { grid-template-columns: 1fr; gap: 10px; } .stages li { text-align: left; padding: 0 0 0 32px; } .stages .dot { left: 0; top: 2px; margin-left: 0; } .stages li.current .dot { margin-left: -2px; top: 0; } }
.kvs { display: grid; gap: 0; margin: 16px 0 0; }
.kvs > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--line-l); }
.kvs dt { color: var(--c-gray-l); font-weight: 600; }
.kvs dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .kvs > div { grid-template-columns: 1fr; gap: 0; } }
.updates { list-style: none; margin: 8px 0 0; padding: 0; }
.updates li { padding: 8px 0; border-bottom: 1px solid var(--line-l); }
.updates span { display: block; color: var(--c-gray-l); font-size: 0.95rem; }
@media (min-width: 640px) { .updates span { display: inline-block; min-width: 190px; } }
.status-card { margin-top: 28px; background: var(--c-white); border: 1px solid var(--line-l); border-top: 6px solid var(--c-blue); border-radius: var(--r); padding: clamp(18px, 3vw, 30px); }
.status-card h2 { font-style: normal; }
.status-card h2:focus { outline: none; }
.proof-cur { display: grid; gap: 22px; }
@media (min-width: 760px) { .proof-cur { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.proof-img { background: var(--c-paper); border: 1px solid var(--line-l); border-radius: var(--r); min-height: 200px; display: grid; place-items: center; overflow: hidden; padding: 8px; }
.proof-btn { border: 0; padding: 0; background: none; cursor: zoom-in; width: 100%; }
.proof-btn img, .full-img { width: 100%; height: auto; display: block; max-height: 70vh; object-fit: contain; background: var(--c-white); }
.proof-ph { padding: 20px; text-align: center; }
.decide { display: grid; gap: 22px; margin-top: 22px; }
@media (min-width: 900px) { .decide { grid-template-columns: 1fr 1fr; } }
.dform { padding: 18px; background: var(--c-paper); border-radius: var(--r); border: 1px solid var(--line-l); margin-top: 14px; }
.dform h3 { margin-top: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; font-weight: 600; }
.check input { width: 26px; height: 26px; flex: none; margin-top: 2px; accent-color: var(--c-blue); }
.ok-note { padding: 12px 16px; background: var(--c-paper); border-left: 6px solid var(--c-ok-l); color: var(--c-black); margin: 16px 0 0; font-weight: 600; }
.hist { margin-top: 18px; }
.hist summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.hist ul { padding-left: 1.1em; }
.hist li { margin-bottom: 10px; }
.receipts { list-style: none; margin: 8px 0 0; padding: 0; }
.receipts li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-l); }
.panel .afiles { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.panel .afiles li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-l); border-radius: var(--r); }
.af-main { display: grid; min-width: 0; }
.af-main b { overflow-wrap: anywhere; }
.af-main small { color: var(--c-gray-l); }
.thread { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.thread li { padding: 10px 14px; border-radius: var(--r); background: var(--c-paper); max-width: 90%; }
.thread li.shop { background: var(--c-white); border: 1px solid var(--line-l); border-left: 5px solid var(--c-blue); }
.thread li.customer { justify-self: end; }
.thread p { margin: 4px 0 0; }
.test-flag { padding: 10px 14px; background: var(--c-yellow); color: var(--c-black); border-radius: 3px; }
.receipt .kvs { margin-top: 8px; }
@media print { body:has(.overlay) > *:not(.overlay) { display: none !important; } .overlay { position: static; background: none; padding: 0; } .modal { border: 0; max-width: none; } .modal-head .x, .modal-foot { display: none; } }

/* ---------- phase 4: fan stores ---------- */
.h3like { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 1.7rem; line-height: 1; margin: 0 0 0.3em; }
.sbadge { display: inline-block; margin: 0 0 8px; padding: 3px 12px; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--c-black); color: var(--c-white); transform: skewX(var(--slant)); }
.pcard-body p.sbadge { color: var(--c-white); }
.sbadge.open { background: var(--c-blue); }
.sbadge.upcoming, .pcard-body p.sbadge.upcoming { background: var(--c-yellow); color: var(--c-black); }
.store-logo { background: var(--c-white); }
.store-logo img { object-fit: contain; padding: 12px; }
.store-logo-big { margin: 0 0 18px; }
.store-logo-big img { max-height: 120px; width: auto; height: auto; object-fit: contain; }
.sbanner { padding: 14px 18px; margin-bottom: 26px; border-left: 8px solid var(--c-blue); background: var(--c-white); border-top: 1px solid var(--line-l); border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); font-size: 1.1rem; }
.sbanner.soon { border-left-color: var(--c-yellow); }
.sbanner.closed { border-left-color: var(--c-black); }
.clines { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.cline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 14px; background: var(--c-paper); border: 1px solid var(--line-l); border-radius: var(--r); }
.clines.left .cline { background: var(--c-white); text-align: left; }
.cl-act { display: flex; align-items: center; gap: 10px; }
.cq { width: 84px; text-align: center; }
.cl-price { font-weight: 800; min-width: 80px; text-align: right; }
.cnote.bad { display: block; color: var(--c-err-l); font-weight: 700; }
.csub { font-size: 1.15rem; text-align: right; margin: 0 0 14px; }
.review-box { padding: 14px 18px; margin-bottom: 18px; background: var(--c-white); border: 2px solid var(--c-err-l); border-left-width: 8px; border-radius: var(--r); }
.review-box ul { margin: 6px 0 0; padding-left: 1.2em; }
.cartbar { position: fixed; right: 12px; bottom: 12px; z-index: 140; padding: 0 22px; min-height: 52px; display: inline-flex; align-items: center; background: var(--c-black); color: var(--c-white); border: 3px solid var(--c-yellow); border-radius: 999px; font-weight: 800; text-decoration: none; box-shadow: 0 6px 20px -4px var(--shade-2); }
.cartbar:focus-visible { outline-color: var(--c-white); }
@media (max-width: 760px) { .cartbar { right: auto; left: 12px; bottom: 76px; } }
.lbl-sm { font-weight: 700; padding: 0; margin-bottom: 6px; }
.contact-form { margin-top: 28px; }
/* ---------- round 6: the new look (switch `restyle`, Preview first), camo, buy-ins, jobs, the Made in the USA flag ----------
   Everything below uses NEW class names or sits under html.rs / html.has-camo, so the public (Live) view is untouched. */
:root {
    --flag-red: #b22234;      /* Old Glory Red, official */
    --flag-blue: #3c3b6e;     /* Old Glory Blue, official */
    --flag-white: #ffffff;
    --camo-veil: rgba(0, 0, 0, 0.8);   /* dark overlay over any camo image: worst case a white pixel under it still gives white text 12.6:1 */
    --camo-size: 1500px;   /* the 2400 px tile drawn 1500 css px wide: 1.6 px per css px (crisp on a 2x phone) and wider than a desktop hero, so it never repeats on screen */
}
.usflag { display: inline-block; vertical-align: middle; flex: none; max-width: none; }
.fl-r { fill: var(--flag-red); } .fl-b { fill: var(--flag-blue); } .fl-w { fill: var(--flag-white); }
html.v2-wait #main { visibility: hidden; }

/* camo: only where the owner's print (or the Preview stand-in) exists */
html.has-camo .camo-bg { background-image: linear-gradient(var(--camo-veil), var(--camo-veil)), var(--camo-url); background-size: auto, var(--camo-size); background-position: 0 0, center; }
html.has-camo.rs .page-hero { background-image: linear-gradient(var(--camo-veil), var(--camo-veil)), var(--camo-url); background-size: auto, var(--camo-size); }
.h2-veil { display: none; }

/* utility bar and sport strip */
.util { background: var(--c-blue-deep); color: var(--c-white); font-weight: 600; font-size: 0.98rem; }
.util-in { max-width: 1400px; margin-inline: auto; padding: 0 var(--gut); display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; min-height: 44px; }
.util a { color: var(--c-white); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.util a:hover { text-decoration: underline; }
.u-nomin { margin-left: auto; padding: 2px 12px; background: var(--c-yellow); color: var(--c-black); font-family: var(--font-head); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transform: skewX(var(--slant)); }
@media (max-width: 760px) { .util .u-email, .util .u-turn { display: none; } .util-in { justify-content: space-between; } .u-nomin { margin-left: 0; } }
.sports { background: var(--c-ink); border-bottom: 3px solid var(--c-blue); color: var(--c-white); }
.sports-in { max-width: 1400px; margin-inline: auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 14px; }
.sports-l { flex: none; font-family: var(--font-head); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-yellow); font-size: 1.05rem; }
.sports ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.sports a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; color: var(--c-white); text-decoration: none; font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.07em; text-transform: uppercase; border-bottom: 4px solid transparent; }
.sports a:hover { border-bottom-color: var(--c-yellow); }
@media (max-width: 560px) { .sports-l { display: none; } }

/* the preview home */
.h2-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(36px, 6vw, 88px); background-color: var(--c-black); background-image: repeating-linear-gradient(115deg, var(--band-faint) 0 46px, transparent 46px 150px); }
.h2-hero.has-photo { background-image: linear-gradient(var(--photo-veil-a), var(--photo-veil-a)); }
.h2-hero .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.h2-hero-in { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; }
@media (min-width: 980px) { .h2-hero-in { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); } }
.h2-hero h1 { font-size: clamp(2.7rem, 10vw, 3.7rem); line-height: 0.95; margin: 0 0 0.35em; }
.h2-card .help, .h2-card .hint, .h2-card .field-note { color: var(--c-gray-l); }
.h2-hero h1 span { display: block; }
.h2-hero h1 .hl { color: var(--c-white); position: relative; display: inline-block; }
.h2-hero h1 .hl::after { content: ''; position: absolute; left: -1%; right: 14%; bottom: -0.05em; height: 0.1em; background: var(--c-blue); transform: skewX(var(--slant)); }
.h2-hero .lead { max-width: 34ch; }
.h2-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 28px 0 0; padding: 0; }
.h2-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--line-d); border-left: 5px solid var(--c-blue); background: var(--c-ink-2); color: var(--c-white); font-weight: 700; font-size: 1rem; }
.h2-chips li.chip-hot { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-black); }
.h2-card { background: var(--c-white); color: var(--c-black); border-top: 8px solid var(--c-blue); border-radius: var(--r); padding: clamp(18px, 3vw, 30px); --link: var(--c-blue); --focus: var(--c-blue); box-shadow: 0 24px 50px -24px var(--shade-2); }
.h2-card-h { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 0.15em; }
.h2-nomin { margin: 0 0 14px; font-weight: 700; color: var(--c-blue); }
.h2-card .form-card { box-shadow: none; border: 0; border-top: 0; padding: 0; background: none; border-radius: 0; }
.h2-card .form-grid { grid-template-columns: 1fr; }
.h2-card .in-hero .opt-more { display: none; }
.h2-card .in-hero.more-open .opt-more { display: block; }
.more-btn { display: block; margin: 0 0 14px; }
.h2-promo { background: var(--c-black); }
.h2-promo-fig { margin: 0; line-height: 0; }
.h2-promo-fig img { width: 100%; height: auto; display: block; }
.h2-promo-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-block: clamp(22px, 3vw, 38px); }
.h2-promo-in h2 { margin: 0 0 0.15em; font-size: clamp(2rem, 5vw, 3.4rem); }
.h2-promo-in p { margin: 0; color: var(--c-gray-d); }
.h2-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.h2-tile { flex: 1 1 260px; max-width: 360px; background: var(--c-ink); color: var(--c-white); border-left: 8px solid var(--c-blue); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.h2-tile a { display: block; position: relative; height: 100%; padding: 26px 24px 30px; color: var(--c-white); text-decoration: none; --focus: var(--c-yellow); }
.h2-tile a:hover { background: var(--c-ink-2); }
.h2-ico { width: 64px; color: var(--c-blue-glow); display: block; margin-bottom: 12px; }
.h2-num { position: absolute; top: 18px; right: 20px; font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: 2rem; color: var(--c-yellow); }
.h2-tile h3 { color: var(--c-white); margin-bottom: 0.2em; font-size: 2rem; }
.h2-tile p { color: var(--c-gray-d); margin: 0 0 14px; }
.h2-go { display: inline-block; font-family: var(--font-head); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-yellow); border-bottom: 3px solid var(--c-yellow); }
.h2-tile .sbadge { margin-bottom: 8px; }
.h2-spec { margin-top: 26px; }
.h2-band { position: relative; isolation: isolate; padding-block: clamp(44px, 6vw, 84px); background-color: var(--c-ink); }
.h2-band.blue { background-color: var(--c-blue); }
.h2-band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 36px; }
.h2-band-in h2, .h2-band h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); margin-bottom: 0.2em; }
.h2-band p { max-width: 52ch; font-size: 1.15rem; }
.h2-band-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.h2-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.h2-steps li { padding: 20px 20px 24px; background: var(--c-ink-2); border-top: 6px solid var(--c-blue); }
.h2-stepn { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; background: var(--c-yellow); color: var(--c-black); font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: 2rem; transform: skewX(var(--slant)); }
.h2-steps h3 { margin-bottom: 0.2em; }
.h2-steps p { margin: 0; color: var(--c-gray-d); }
.h2-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.h2-trio li { padding: 24px; background: var(--c-white); border: 1px solid var(--line-l); border-top: 6px solid var(--c-blue); }
.h2-trio h3 { font-size: 2rem; } .h2-trio p { margin: 0; color: var(--c-gray-l); }
.h2-usa { padding-block: clamp(56px, 8vw, 110px); }
.h2-usa-in { display: grid; gap: clamp(26px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .h2-usa-in { grid-template-columns: auto minmax(0, 1fr); } }
.h2-usa-flag { text-align: center; }
.h2-usa-flag .usflag { max-width: 100%; height: auto; box-shadow: 0 14px 34px -12px var(--shade-2); }
.h2-usa-cap { margin: 12px 0 0; font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: 1.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-white); }
.h2-usa h2 { font-size: clamp(2.6rem, 7vw, 5.2rem); }
.h2-4 { grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; display: grid; }
@media (max-width: 700px) { .h2-4 { grid-template-columns: 1fr 1fr; } }
.h2-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 18px 0 0; padding: 0; }
.h2-pills a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; background: var(--c-white); color: var(--c-black); text-decoration: none; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; transform: skewX(var(--slant)); }
.h2-pills a:hover { background: var(--c-yellow); }
.h2-local-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 36px; }
.h2-local h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.nomin-line { display: block; text-align: center; margin: 0 auto 22px; padding: 10px 16px; max-width: 520px; background: var(--c-yellow); color: var(--c-black); font-size: 1.1rem; }
.foot-usa { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; color: var(--c-white); font-family: var(--font-head); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.chip-usa .usflag { box-shadow: 0 0 0 1px var(--line-d); }

/* ---------- motion: nothing waits on a script to become visible ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print { .hdr, .pv-bar, .skip, .menu { display: none !important; } body { background: var(--c-white); color: var(--c-black); } }

/* the owner's script wordmark: an accent on dark panels (Preview). The DD monogram in the header stays the primary mark. */
.dd-script { display: block; max-width: 100%; height: auto; }
.dd-script-hero { margin: 0 0 18px; }
.dd-script-sig { margin: 18px 0 0; }
.foot-brand img.dd-script-foot, .dd-script-foot { width: 150px; max-width: 100%; height: auto; margin: 14px 0 0; opacity: 0.95; }

/* ---------- round 8 (Preview only: every rule starts with html.rs, so the public placeholder keeps its blue exactly) ----------
   1. Black, white and grey theme. The royal blue (#1313f4), deep blue (#222a84) and the blue tints are re-pointed through the SAME tokens the whole site already uses, per context:
      on dark surfaces the "blue" role is white, on light surfaces it is black (links, borders, focus rings, primary buttons). Yellow is the one accent.
   2. Camo strength: html.camo-strong / html.camo-medium (site-data.js camoStrength) pick the veil that goes with each tile.
   3. Accent switch: html.acc-none (site-data.js accent: 'none') turns the yellow into white: pure black and white, no color at all.
   4. Header and footer run edge to edge; their inner content sits on the same column as the page. */
html.rs {
    --c-blue: #ffffff; --c-blue-deep: #262626; --c-blue-glow: #ffffff; --on-blue: #000000;
    --c-ink: #0d0d0d; --c-ink-2: #1a1a1a; --c-gray-d: #ececec;
    --c-paper: #f2f2f2; --c-gray-l: #4a4a4a; --line-l: #cfcfcf;
    --camo-veil: rgba(0, 0, 0, 0.72);
}
html.rs.camo-medium { --camo-veil: rgba(0, 0, 0, 0.70); }
html.rs.acc-none { --c-yellow: #ffffff; }

/* light surfaces (sections and white cards, also when they sit on a dark section): the "blue" role is black */
html.rs .light, html.rs .h2-card, html.rs .form-card, html.rs .modal, html.rs .pcard, html.rs .off-note, html.rs .contact-card, html.rs .status-card, html.rs .ocard,
html.rs .sbanner, html.rs .prose .callout, html.rs .h2-trio li, html.rs .todo-box, html.rs .thread li.shop, html.rs .drop, html.rs .btn-mini {
    --c-blue: #000000; --c-blue-glow: #000000; --on-blue: #ffffff;
}
/* dark panels that sit inside a light section go back to the dark values */
html.rs .h2-tile, html.rs .card, html.rs .soon, html.rs .gate-card, html.rs .stage-chips li, html.rs .h2-steps li, html.rs .h2-chips li, html.rs .step, html.rs .turn, html.rs .hdr, html.rs .foot, html.rs .util, html.rs .sports {
    --c-blue: #ffffff; --c-blue-glow: #ffffff; --on-blue: #000000;
}
html.rs .pv-bar { --c-blue: #000000; }

/* primary button: white on black on dark surfaces, black on white on light ones; secondary stays outlined */
html.rs .btn.btn-blue { color: var(--on-blue); }
html.rs .sbadge.open { color: var(--on-blue); }
html.rs .util { background: var(--c-ink-2); border-bottom: 1px solid var(--line-d); }

/* the white "See everything we offer" band (was the royal blue band) */
html.rs .h2-band.blue { background-color: #ffffff; color: #000000; --c-blue: #000000; --c-blue-glow: #000000; --on-blue: #ffffff; --fg: #000000; --link: #000000; --focus: #000000; }
html.rs .h2-band.blue h2, html.rs .h2-band.blue p { color: #000000; }
html.rs .h2-band.blue .h2-pills a { background: #000000; color: #ffffff; }
html.rs .h2-band.blue .h2-pills a:hover { background: var(--c-yellow); color: #000000; box-shadow: inset 0 0 0 2px #000000; }

/* no-yellow variant: a white badge on a light page needs an edge to read as a badge */
html.rs.acc-none .nomin-line, html.rs.acc-none .sample-flag, html.rs.acc-none .test-flag, html.rs.acc-none .sbadge.upcoming, html.rs.acc-none .tag-soon, html.rs.acc-none .skip { box-shadow: inset 0 0 0 2px #000000; }
html.rs.acc-none .pv-bar { box-shadow: 0 0 0 2px #000000; }

/* header and footer: edge to edge bars (plain block-level boxes, width 100%, never 100vw), inner content on the page's own column */
html.rs .hdr-in, html.rs .util-in, html.rs .sports-in, html.rs .foot .wrap { max-width: none; padding-inline: clamp(16px, 2.5vw, 44px); } /* 2026-10-08 Eddie: full bleed means the content too: logo at the left edge, menu at the right edge, footer columns across the width, not a centered column inside a wide bar */
html.rs .foot-barwrap { border-top: 1px solid var(--line-d); }
html.rs .foot-bar { border-top: 0; }
/* very narrow phones (320): the bar content must still fit inside the edge-to-edge bar, so the brand and the two buttons tighten up */
@media (max-width: 360px) {
    html.rs .hdr-in { gap: 8px; }
    html.rs .brand { gap: 8px; }
    html.rs .brand .mark { width: 30px; }
    html.rs .brand-name { font-size: 1.2rem; letter-spacing: 0.02em; }
    html.rs .hdr-cta { margin-left: auto; }
    html.rs .hdr-phone, html.rs .menu-btn { width: 44px; height: 44px; }
}

/* ---------- viewing lanes (round 9): the "Our work" gallery, one swipeable row per category ---------- */
.lanes { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vw, 42px); --lane-h: 240px; }
.lane { min-width: 0; }
@media (max-width: 700px) { .lanes { --lane-h: 190px; } }
.lane-hint { margin: 0; color: var(--muted); font-size: 1rem; }
.lane-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.lane-head h3 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.lane-n { font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 6px; }
.lane-btns { display: flex; gap: 8px; flex: none; }
.lane-btn { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 2px solid var(--fg, var(--c-black)); border-radius: var(--r); background: var(--bg-2, var(--c-white)); color: var(--fg, var(--c-black)); cursor: pointer; }
.lane-btn svg { width: 22px; height: 22px; }
.lane-btn:hover:not(:disabled) { background: var(--fg, var(--c-black)); color: var(--bg-2, var(--c-white)); }
.lane-btn:disabled { opacity: 0.35; cursor: default; }
.lane-btn[hidden] { display: none; }
.lane-track { display: flex; gap: 12px; margin: 0; padding: 3px 3px 14px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 3px; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.lane-track:focus-visible { outline-offset: 2px; }
.lane-track .wk { position: relative; flex: none; height: var(--lane-h); overflow: hidden; border-radius: 4px; background: var(--c-ink); scroll-snap-align: start; }
.lane-track .wk-btn { position: static; display: block; width: auto; height: 100%; cursor: zoom-in; }
.lane-track .wk-btn picture { display: block; height: 100%; }
.lane-track .wk-btn img { display: block; height: 100%; width: auto; max-width: none; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
    .lane-track { scroll-behavior: auto; }
    .lane-track .wk-btn img { transition: none; }
    .lane-track .wk-btn:hover img, .lane-track .wk-btn:focus-visible img { transform: none; }
}

/* ---------- round 10: the public home shows the same design; what is not open yet is a plain label or a card, never a link ---------- */
.h2-ribbon { background: var(--c-ink-2); border-bottom: 3px solid var(--c-yellow); color: var(--c-white); }
.h2-ribbon .wrap { display: flex; align-items: center; gap: 14px; padding-block: 10px; }
.h2-ribbon p { margin: 0; font-size: 1.02rem; }
.h2-ribbon .hazard { flex: none; width: 36px; height: 18px; animation: none; }
.soon-pill { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 1px 9px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; }
.h2-tile .h2-tile-in { display: block; position: relative; height: 100%; padding: 26px 24px 30px; color: var(--c-white); }
.h2-pill-off { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 2px dashed currentColor; color: inherit; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; transform: skewX(var(--slant)); }
.h2-pill-off .soon-pill { transform: skewX(calc(var(--slant) * -1)); }
html.rs .h2-band.blue .h2-pill-off { color: #000000; }
@media (prefers-reduced-motion: reduce) { .h2-ribbon .hazard { animation: none; } }

/* 2026-10-08 Eddie items 2 to 4: bigger script mark angled down a little; hero content full bleed like the header so the headline keeps "apparel" on the first line. */
html.rs .h2-hero-in { max-width: none; padding-inline: clamp(16px, 2.5vw, 44px); }
@media (min-width: 980px) { html.rs .h2-hero-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
html.rs .dd-script-hero { width: clamp(220px, 24vw, 340px); height: auto; transform: rotate(4deg); transform-origin: left bottom; margin: 0 0 0.55em 0.1em; }
html.rs .h2-hero h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); }
html.rs .h2-hero h1 span { display: block; white-space: nowrap; }
@media (max-width: 700px) { html.rs .h2-hero h1 span { white-space: normal; } }
/* 2026-10-08 Eddie item 9: the call and email buttons sit to the RIGHT of the "we're local" text on wide screens, under it on phones. */
@media (min-width: 900px) { html.rs .h2-local-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; } html.rs .h2-local-in .h2-band-cta { justify-self: end; display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } }
/* 2026-10-08 Eddie item 10: the floating accessibility button covered the footer credit link on phones; give the footer room under it. */
@media (max-width: 760px) { html.rs .foot { padding-bottom: 92px; } }
/* 2026-10-08 Eddie item 11: the Made in the USA band: bigger flag, the row full bleed, plenty of space. */
html.rs .h2-usa { padding-block: clamp(72px, 10vw, 150px); }
html.rs .h2-usa-in { max-width: none; padding-inline: clamp(16px, 2.5vw, 44px); gap: clamp(32px, 5vw, 80px); }
@media (min-width: 900px) { html.rs .h2-usa-in { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); } }
html.rs .h2-usa-flag .usflag { width: clamp(260px, 34vw, 520px); max-width: 100%; height: auto; }
html.rs .h2-usa-cap { font-size: clamp(1.6rem, 2.6vw, 2.6rem); margin-top: 18px; }
/* 2026-10-08 Eddie item 12: on phones the sport strip wraps onto two rows instead of scrolling sideways. */
@media (max-width: 760px) { html.rs .sports ul { flex-wrap: wrap; justify-content: center; overflow: visible; white-space: normal; gap: 0 2px; } html.rs .sports a { min-height: 44px; padding: 0 12px; font-size: 0.95rem; } html.rs .sports-in { justify-content: center; } }
/* 2026-10-08 Eddie item 13: the hero script mark straight (no angle) and bigger, biggest on phones where it has the room. */
html.rs .dd-script-hero { transform: none; width: clamp(300px, 28vw, 440px); margin: 0 0 0.5em 0; }
@media (max-width: 760px) { html.rs .dd-script-hero { width: min(88vw, 420px); margin-bottom: 0.6em; } }
/* 2026-10-08 Eddie item 14: on phones the promo band's button sits at the right. */
@media (max-width: 760px) { html.rs .h2-promo-in > .btn { margin-left: auto; } }
/* 2026-10-08 Eddie item 17: on phones the four step tiles (Design, Print, Cut, Sew) are centered. */
@media (max-width: 760px) { html.rs .h2-usa .steps.h2-4 .step { text-align: center; align-items: center; justify-content: center; } }
/* 2026-10-08 Eddie item 18: on phones "See everything we offer" is a tidy stacked list: one full-width row per item, no skew, the "coming soon" tag at the right. */
@media (max-width: 760px) {
  html.rs .h2-pills { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  html.rs .h2-pills li { display: block; }
  html.rs .h2-pills li > a, html.rs .h2-pills li > .h2-pill-off { display: flex; width: 100%; box-sizing: border-box; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; transform: none; clip-path: none; text-align: left; }
  html.rs .h2-pills li > a > *, html.rs .h2-pills li > .h2-pill-off > * { transform: none; }
  html.rs .h2-pills .h2-pill-off .tag, html.rs .h2-pills .h2-pill-off small, html.rs .h2-pills .h2-pill-off span:last-child { margin-left: auto; }
}
/* 2026-10-08 Eddie item 20: desktop hero script mark much larger inside the same space (it overlaps the room above it instead of pushing the headline down). */
@media (min-width: 761px) { html.rs .dd-script-hero { width: clamp(400px, 38vw, 640px); margin: -0.45em 0 0.1em -0.04em; } }
/* 2026-10-08 Eddie item 21: the hero fact chips sit inline as one tidy row on desktop: same height, same gap, nothing floating apart. */
@media (min-width: 761px) {
  html.rs .h2-chips { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 22px 0 0; padding: 0; }
  html.rs .h2-chips li { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 46px; padding: 0 16px; line-height: 1.2; white-space: nowrap; }
  html.rs .h2-chips li.h2-nomin, html.rs .h2-chips li:last-child { margin-left: 0; }
}
/* 2026-10-08 Eddie item 22: on desktop the hero call and email buttons are centered over the fact-chip row below them. */
@media (min-width: 761px) { html.rs .h2-hero .h2-copy .cta-row { justify-content: center; } html.rs .h2-hero .h2-copy .h2-chips { justify-content: center; } }

/* ---------- round 11: the "What we make" cards: tall photo, numbered tag, title, one sentence, checklist ---------- */
.mk-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 520px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 900px) { .mk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 22px; } }
.mk-card { display: flex; flex-direction: column; background: var(--c-ink); color: var(--c-white); border-radius: var(--r); overflow: hidden; --focus: var(--c-yellow); --link: var(--c-white); }
.mk-photo { position: relative; aspect-ratio: 4 / 5; background: var(--c-ink-2); overflow: hidden; }
.mk-photo picture { display: block; width: 100%; height: 100%; }
.mk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }
.mk-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.86)); pointer-events: none; }
.mk-panel { width: 100%; height: 100%; display: grid; place-items: center; background: var(--c-ink-2); background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 46px, transparent 46px 150px); }
.mk-panel::before { content: ''; position: absolute; inset: 16px; border: 2px dashed rgba(255, 255, 255, 0.28); border-radius: 4px; }   /* a stitched edge */
.mk-panel .mark { width: 46%; color: rgba(255, 255, 255, 0.9); }
.mk-tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 14px; background: var(--c-yellow); color: var(--c-black); font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; transform: skewX(var(--slant)); }
.mk-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 26px; }
.mk-body h3 { margin: 0 0 6px; font-size: clamp(1.9rem, 3vw, 2.3rem); color: var(--c-white); }
.mk-body p { margin: 0; color: var(--c-gray-d); font-size: 1.05rem; }
.mk-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; flex: 1; align-content: start; }
.mk-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--c-white); font-weight: 500; line-height: 1.35; }
.mk-ck { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--c-yellow); }
.mk-go { align-self: flex-start; margin-top: 22px; display: inline-block; font-family: var(--font-head); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-yellow); border-bottom: 3px solid var(--c-yellow); text-decoration: none; }
html.rs .mk-card { --c-blue: #ffffff; --c-blue-glow: #ffffff; --on-blue: #000000; }
/* 2026-10-08 Eddie item 27: header links for pages not open yet show as plain items that read "Coming soon" on hover, focus or tap. */
html.rs .nav .nav-soon .soon-item, html.rs .menu .nav-soon .soon-item { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--c-white); opacity: 0.85; cursor: default; font: inherit; letter-spacing: inherit; text-transform: inherit; }
html.rs .nav-soon .soon-item .s { display: none; color: var(--c-yellow); }
html.rs .nav-soon .soon-item:hover .t, html.rs .nav-soon .soon-item:focus .t, html.rs .nav-soon .soon-item:focus-visible .t { display: none; }
html.rs .nav-soon .soon-item:hover .s, html.rs .nav-soon .soon-item:focus .s, html.rs .nav-soon .soon-item:focus-visible .s { display: inline; }
html.rs .nav-soon .soon-item:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 4px; }
/* 2026-10-08 Eddie item 28: the script signature in the flag band sits at the right on desktop, a little bigger. */
@media (min-width: 761px) { html.rs .h2-usa .dd-script-sig { display: block; margin: 22px 0 0 auto; width: clamp(240px, 22vw, 340px); } }
/* 2026-10-08 Eddie item 30: less blank space between stacked sections on desktop (the "Why Dyenamic" trio and the work gallery sat far apart). */
@media (min-width: 761px) { html.rs .sec { padding-block: clamp(40px, 5vw, 64px); } html.rs .sec.light + .sec.light { padding-top: clamp(16px, 2vw, 28px); } html.rs .sec-head { margin-bottom: clamp(18px, 2.5vw, 30px); } }
/* 2026-10-08 Eddie item 32: on phones all five sports fit on ONE row (smaller type that scales with the screen, tighter padding). */
@media (max-width: 760px) { html.rs .sports ul { flex-wrap: nowrap; justify-content: space-between; gap: 0; width: 100%; } html.rs .sports a { padding: 0 4px; font-size: clamp(0.66rem, 2.9vw, 0.95rem); letter-spacing: 0.04em; min-height: 42px; white-space: nowrap; } html.rs .sports-in { padding-inline: 10px; } }
/* 2026-10-08 Eddie item 33: the coming-soon header items wear exactly the same type as the real links (bar and menu). */
html.rs .nav .nav-soon .soon-item { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-white); opacity: 1; border-bottom: 3px solid transparent; }
html.rs .nav .nav-soon .soon-item:hover, html.rs .nav .nav-soon .soon-item:focus-visible { border-bottom-color: var(--c-yellow); }
html.rs .menu .nav-soon .soon-item { display: flex; width: 100%; font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-white); opacity: 1; }
/* 2026-10-08 item 33 follow-up: the menu's coming-soon items match .menu li a exactly (800 weight, 1.7rem, 0.04em, 52px rows). */
html.rs .menu .nav-soon .soon-item { min-height: 52px; font-weight: 800; font-size: 1.7rem; letter-spacing: 0.04em; }
/* 2026-10-08 Eddie item 34: desktop hero: the left column no longer floats in the middle of the taller quote card, so the script mark sits near the top with the dead space gone. */
@media (min-width: 980px) { html.rs .h2-hero { padding-top: clamp(28px, 3vw, 52px); } html.rs .h2-hero-in { align-items: start; } html.rs .h2-hero .h2-copy { padding-top: 0; } html.rs .dd-script-hero { margin-top: 0; } }
/* 2026-10-08 Eddie item 35: desktop hero left column centered: script mark, headline, lead, buttons and chips all on one center line. */
@media (min-width: 980px) { html.rs .h2-hero .h2-copy { text-align: center; } html.rs .h2-hero .h2-copy .dd-script-hero { margin-left: auto; margin-right: auto; } html.rs .h2-hero h1 { text-align: center; } html.rs .h2-hero h1 .hl { display: inline-block; } html.rs .h2-hero .lead { margin-left: auto; margin-right: auto; } html.rs .h2-hero-in { align-items: center; } }

/* 2026-10-09 dedup: the fabric and stitching lines (Eddie 10-08 item 26) now sit in the Made in the USA band, under its lead. */
.h2-usa-fab { margin: 14px 0 0; max-width: 56ch; color: var(--c-white); opacity: 0.92; }

/* Error text: the "Please call ... or email ..." sentence stays on one line (2026-10-10) */
.reach-line { white-space: nowrap; }
@media (max-width: 480px) { .reach-line { white-space: normal; } }