/* 1st Chance Graphics — main stylesheet */

/* ================= Base, hero and menu (from the approved prototype) ================= */
:root {
  --yellow: #ffff00;
  --ink: #050505;
  --text: #f4f4f0;
  --muted: #a9a9a2;
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--ink); color: var(--text); font-family: Barlow, system-ui, sans-serif; }

/* Scroll runway: the hero pins while the video scrubs */
.hero { position: relative; height: 420vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.stage video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--obj-x, 50%) 50%;
}
#loop { opacity: 0; transition: opacity .35s linear; }
.stage.at-end #loop { opacity: 1; }

/* Left-side legibility scrim */
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,5,.8) 0%, rgba(5,5,5,.5) 32%, rgba(5,5,5,0) 58%);
}

/* Step-and-repeat: tone-on-tone logo pattern drifting behind the copy */
.repeat {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-repeat: repeat; background-size: var(--tile-w) var(--tile-h);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 30%, transparent 62%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 30%, transparent 62%);
  animation: repeat-drift 40s linear infinite;
  transition: opacity 1.2s ease;
}
.repeat.on { opacity: 1; }
@keyframes repeat-drift {
  from { background-position: 0 0; }
  to   { background-position: calc(var(--tile-w) * -1) var(--tile-h); }
}

.copy {
  position: absolute; left: clamp(16px, 6vw, 96px); top: 50%; transform: translateY(-50%);
  max-width: min(520px, 42vw); z-index: 2;
}

/* Logo above the copy */
.logo { position: relative; width: min(clamp(220px, 21vw, 360px), calc(32vh * 646 / 566)); aspect-ratio: 646 / 566; margin-bottom: clamp(18px, 2.4vw, 32px); }
.logo svg { position: relative; width: 100%; height: 100%; overflow: visible; display: block; }
.logo .glow {
  position: absolute; inset: -45% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,0,.28), rgba(255,255,0,.08) 45%, rgba(255,255,0,0) 75%);
  mix-blend-mode: screen; opacity: 0; filter: blur(6px); pointer-events: none;
}
/* Acrylic depth: letters sit on standoffs and cast a short shadow on the backer */
.logo #mark { filter: drop-shadow(2px 4px 2px rgba(0,0,0,.85)); }
.logo #border { filter: drop-shadow(0 0 5px rgba(255,255,0,.85)) drop-shadow(0 0 14px rgba(255,255,0,.45)); }
.logo .tag-letter { filter: drop-shadow(0 0 3px rgba(255,255,0,.9)); }
.logo .gloss { mix-blend-mode: screen; }

/* Tagline: hand-lettered brush script, like sign-painter lettering */
.eyebrow {
  font-family: "Yellowtail", cursive; font-weight: 400; letter-spacing: .01em; text-transform: none;
  font-size: clamp(26px, 2.4vw, 38px); line-height: 1.15; color: var(--yellow);
  max-width: 22ch; text-wrap: balance; transform: rotate(-3deg); transform-origin: left center;
  text-shadow: 0 0 18px rgba(255,255,0,.35);
}
/* Desktop: keep the tagline on one line; it may run past the copy column */
@media (min-width: 961px) {
  .eyebrow { white-space: nowrap; max-width: none; font-size: clamp(24px, 1.9vw, 34px); }
}
.copy h1 {
  font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800;
  font-size: clamp(44px, 6.2vw, 96px); line-height: .92; text-transform: uppercase; margin: 14px 0 18px;
}
.lede { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; max-width: 40ch; }
.cta {
  display: inline-block; margin-top: 28px; padding: 15px 26px; background: var(--yellow); color: #000;
  font-weight: 600; text-decoration: none; letter-spacing: .04em; transform: skewX(-10deg);
}
.cta span { display: inline-block; transform: skewX(10deg); }

.hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); transition: opacity .3s; }
.stage.at-end .hint { opacity: 0; }



/* ================= Top menu ================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 76px;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 0 clamp(16px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(5,5,5,.92), rgba(5,5,5,.78));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transform: translateY(-110%); transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.nav.show { transform: none; }
/* Yellow rule that draws across when the menu lands */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--yellow), var(--yellow) 60%, rgba(255,255,0,0));
  box-shadow: 0 0 12px rgba(255,255,0,.6);
  transform: scaleX(0); transform-origin: left; transition: transform .7s .25s cubic-bezier(.2,.8,.2,1);
}
.nav.show::after { transform: scaleX(1); }

.nav-logo { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; color: var(--text); }
.nav-badge { width: 54px; aspect-ratio: 646 / 566; flex: none; filter: drop-shadow(0 0 6px rgba(255,255,0,.45)); }
.nav-badge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nav-word {
  font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase;
  line-height: .9; letter-spacing: .03em; font-size: 17px; white-space: nowrap;
}
.nav-word b { display: block; color: var(--yellow); font-weight: 800; font-size: 13px; letter-spacing: .2em; }

.nav-links { display: flex; align-items: center; gap: clamp(4px, 1vw, 14px); list-style: none; padding: 0; margin: 0 auto 0 clamp(8px, 2vw, 28px); }
.nav-links > li { position: relative; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 76px; padding: 0 12px;
  font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800; font-size: 19px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text); text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
/* Slanted yellow swipe behind the label on hover / active */
.nav-link::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 30px; margin-top: -15px;
  background: var(--yellow); transform: skewX(-12deg) scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.8,.2,1); z-index: -1;
}
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"], .has-menu.open > .nav-link { color: #000; }
.nav-link:hover::before, .nav-link:focus-visible::before, .nav-link[aria-current="page"]::before, .has-menu.open > .nav-link::before { transform: skewX(-12deg) scaleX(1); }
.nav-link:focus-visible { outline: none; }
.nav-link .chev { width: 10px; height: 10px; transition: transform .25s; }
.has-menu.open .chev { transform: rotate(180deg); }

/* Services dropdown */
.menu {
  position: absolute; top: 100%; left: -12px; width: 420px; padding: 10px;
  background: rgba(8,8,8,.97); border: 1px solid #1d1d1d; border-top: 2px solid var(--yellow);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s, visibility .2s;
}
.has-menu.open .menu { opacity: 1; visibility: visible; transform: none; }
.menu a {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 4px 12px; padding: 12px 14px;
  color: var(--text); text-decoration: none; position: relative; overflow: hidden;
}
.menu a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,0,.12), rgba(255,255,0,0)); transform: translateX(-100%); transition: transform .3s; }
.menu a:hover::before, .menu a:focus-visible::before { transform: none; }
.menu .num { grid-row: span 2; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800; font-size: 26px; color: #3a3a3a; transition: color .2s; }
.menu a:hover .num, .menu a:focus-visible .num { color: var(--yellow); }
.menu .t { font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; }
.menu .d { font-size: 13px; color: var(--muted); }

.nav-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.shop-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; margin-right: 8px;
  background: var(--yellow); color: #000; text-decoration: none; transform: skewX(-12deg);
  font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800; font-size: 18px; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 0 0 rgba(255,255,0,0); transition: box-shadow .25s, transform .25s;
}
.shop-btn > span { transform: skewX(12deg); display: inline-block; }
.shop-btn:hover { box-shadow: 0 0 22px rgba(255,255,0,.55); transform: skewX(-12deg) translateY(-1px); }
.icon-btn {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text);
  background: none; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: color .2s, border-color .2s;
}
.icon-btn:hover, .icon-btn:focus-visible { color: var(--yellow); border-color: #2a2a2a; outline: none; }
.icon-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--yellow); color: #000; font: 700 11px/18px Barlow, sans-serif; text-align: center;
}
.burger { display: none; }

/* Mobile full-screen menu */
.mnav {
  position: fixed; inset: 0; z-index: 49; padding: 100px 24px 32px; background: rgba(5,5,5,.98);
  display: flex; flex-direction: column; gap: 6px;
  clip-path: inset(0 0 100% 0); transition: clip-path .5s cubic-bezier(.7,0,.2,1); visibility: hidden;
}
.mnav.open { clip-path: inset(0 0 0 0); visibility: visible; }
.mnav a {
  font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: 44px; line-height: 1.05; color: var(--text); text-decoration: none; display: flex; align-items: baseline; gap: 14px;
}
.mnav a small { font-size: 16px; color: #555; }
.mnav a:active { color: var(--yellow); }
.mnav a.shop-btn { display: inline-flex; align-self: flex-start; margin: 18px 0 0 8px; height: 52px; font-size: 22px; color: #000; }

@media (max-width: 960px) {
  .nav { height: 64px; }
  .nav-links, .shop-btn.desk { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-badge { width: 46px; }
  .nav-word { font-size: 15px; }
  .burger { display: grid; }
  .burger span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .3s, opacity .2s; }
  .burger span + span { margin-top: 5px; }
  .burger .bars { display: block; }
  .nav.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .burger span:nth-child(2) { opacity: 0; }
  .nav.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 760px) {
  .copy { top: auto; bottom: 10vh; transform: none; max-width: calc(100% - 32px); left: 16px; }
  .logo { width: 140px; margin-bottom: 16px; }
  .repeat { -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.8) 40%, transparent 75%); mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.8) 40%, transparent 75%); }
  .scrim { background: linear-gradient(0deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.55) 45%, rgba(5,5,5,0) 70%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100vh; }
  .repeat { animation: none; }
}
/* ================= Site-wide ================= */
:root {
  --line: #1d1d1d;
  --panel: #0c0c0c;
  --display: "Barlow Condensed", sans-serif;
  --nav-h: 76px;
}
html { scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--yellow); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--yellow); color: #000; padding: 10px 16px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Inner pages: the menu is always shown, so leave room for it */
body:not(.has-hero) .site-main { padding-top: var(--nav-h); }
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }

.wrap { width: min(1240px, 100% - 2 * clamp(16px, 4vw, 56px)); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 32px); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 128px); }

.kicker { font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: 13px; color: var(--yellow); margin-bottom: 10px; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .kicker { flex-basis: 100%; margin: 0; }
.section-title, .page-title {
  font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase;
  line-height: .92; letter-spacing: .01em; font-size: clamp(40px, 5.4vw, 80px);
}
.text-link { margin-left: auto; color: var(--text); text-decoration: none; font-weight: 600; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.text-link:hover { color: var(--yellow); }
.empty { color: var(--muted); }

/* Page heading band */
.page-hero { padding: clamp(72px, 10vw, 140px) 0 clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 160px; height: 3px; background: var(--yellow); box-shadow: 0 0 14px rgba(255,255,0,.5); }
/* 404: a "404" decal with its corner peeling up */
@property --peel { syntax: "<length>"; inherits: true; initial-value: 0em; }
.nf { padding: clamp(56px, 8vw, 120px) 0 clamp(56px, 8vw, 110px); }
.nf-top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(24px, 5vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); position: relative; }
.nf-top::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 160px; height: 3px; background: var(--yellow); box-shadow: 0 0 14px rgba(255,255,0,.5); }
.nf-decal { --peel: .3em; position: relative; transform: rotate(-3deg); filter: drop-shadow(0 0 34px rgba(255,255,0,.22)) drop-shadow(0 14px 18px rgba(0,0,0,.6)); font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800; font-size: clamp(120px, 19vw, 280px); line-height: .82; animation: nf-peel 1.1s cubic-bezier(.2,.8,.2,1) .25s both; transition: --peel .5s cubic-bezier(.2,.8,.2,1); }
.nf-decal:hover { --peel: .46em; }
.nf-num { display: block; padding: .1em .2em .06em .12em; background: var(--yellow); color: var(--ink);
  clip-path: polygon(0 0, calc(100% - var(--peel)) 0, 100% var(--peel), 100% 100%, 0 100%); }
/* The folded-back corner: vinyl backing showing, with a shadow where it lifts off the wall. */
.nf-flap { position: absolute; top: 0; right: 0; width: var(--peel); height: var(--peel);
  background: linear-gradient(225deg, transparent 50%, #f4f4ee 50%, #c9c9c0 72%, #e6e6de 100%);
  filter: drop-shadow(-6px 6px 8px rgba(0,0,0,.55)); }
@keyframes nf-peel { from { --peel: 0em; } }
.nf-copy .page-title { margin-bottom: 14px; }
.nf-copy .cta { margin-top: 26px; }
.nf-block { padding-top: clamp(36px, 5vw, 56px); }
.nf-h { font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: .03em; margin-bottom: 18px; }
.nf-services { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); border-top: 1px solid var(--line); }
.nf-services a { display: flex; align-items: baseline; gap: 14px; padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none;
  font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; transition: color .2s, padding .2s; }
.nf-services small { font-family: Barlow, sans-serif; font-style: normal; font-weight: 600; font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.nf-arrow { margin-left: auto; color: var(--yellow); transform: translateX(-6px); opacity: 0; transition: transform .2s, opacity .2s; }
.nf-services a:hover, .nf-services a:focus-visible { color: var(--yellow); padding-left: 10px; }
.nf-services a:hover .nf-arrow, .nf-services a:focus-visible .nf-arrow { transform: none; opacity: 1; }
.nf-links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.nf-links a { display: grid; gap: 6px; height: 100%; padding: 20px 22px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s; }
.nf-links strong { font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 800; font-size: 21px; text-transform: uppercase; }
.nf-links span { color: var(--muted); font-size: 15px; line-height: 1.4; }
.nf-links a:hover, .nf-links a:focus-visible { border-color: var(--yellow); transform: translateY(-2px); }
.nf-reach { margin-top: 28px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.nf-reach a { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--yellow); }
@media (max-width: 760px) {
  .nf-top { grid-template-columns: 1fr; }
  .nf-decal { font-size: clamp(110px, 38vw, 200px); justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-decal { animation: none; transition: none; }
  .nf-services a, .nf-arrow, .nf-links a { transition: none; }
}

/* Services */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.svc-card {
  position: relative; display: grid; align-content: end; gap: 8px; min-height: 280px; padding: 28px;
  background: var(--panel); color: var(--text); text-decoration: none; overflow: hidden; isolation: isolate;
}
/* Photo behind each card: dark at rest, lights up on hover while a yellow line swipes across */
.svc-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.3) contrast(1.15); transition: filter .5s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.svc-card:hover .svc-media img, .svc-card:focus-visible .svc-media img { filter: grayscale(0) brightness(.85) contrast(1.05); transform: scale(1.05); }
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,5,5,.9) 0%, rgba(5,5,5,.45) 45%, rgba(5,5,5,0) 75%); pointer-events: none; }
.svc-swipe { position: absolute; top: -10%; bottom: -10%; left: -30%; width: 10px; z-index: -1; background: var(--yellow); box-shadow: 0 0 24px rgba(255,255,0,.55); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.svc-card:hover .svc-swipe, .svc-card:focus-visible .svc-swipe { animation: svc-swipe .75s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes svc-swipe { 0% { left: -30%; opacity: 1; } 85% { opacity: 1; } 100% { left: 125%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .svc-card:hover .svc-swipe { animation: none; } }
.svc-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.svc-card:hover::after, .svc-card:focus-visible::after { transform: scaleX(1); }
.svc-card .num { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 34px; color: #3a3a3a; transition: color .2s; }
.svc-card:hover .num { color: var(--yellow); }
.svc-title { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 30px; text-transform: uppercase; line-height: 1; }
.svc-text { color: var(--muted); font-size: 15px; }
/* Desktop: rows of three; a last row of two splits the width in half, a lone last card runs full width */
@media (min-width: 900px) {
  .svc-grid { grid-template-columns: repeat(6, 1fr); }
  .svc-card { grid-column: span 2; }
  .svc-card:nth-child(3n+1):nth-last-child(2), .svc-card:nth-child(3n+1):nth-last-child(2) + .svc-card { grid-column: span 3; }
  .svc-card:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}

/* Cards: work and posts */
.work-grid, .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.card-link { display: block; color: var(--text); text-decoration: none; }
.card-media { display: block; aspect-ratio: 9 / 6.4; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.card-link:hover .card-media img { transform: scale(1.05); }
.card-placeholder { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #0b0b0b 0 14px, #101010 14px 28px); }
.card-body { display: grid; gap: 4px; padding-top: 14px; }
.card-meta { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); font-weight: 600; }
.card-title { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.card-link:hover .card-title { color: var(--yellow); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.filters a { padding: 8px 16px; border: 1px solid #2a2a2a; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; transform: skewX(-10deg); }
.filters a[aria-current], .filters a:hover { background: var(--yellow); border-color: var(--yellow); color: #000; }

.nav-links + .pagination, .pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; gap: 6px; margin: 0; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; border: 1px solid #2a2a2a; color: var(--text); text-decoration: none; font-weight: 600; }
.pagination .page-numbers.current, .pagination a.page-numbers:hover { background: var(--yellow); color: #000; border-color: var(--yellow); }

/* CTA band */
.cta-band { border-top: 1px solid var(--line); background: radial-gradient(60% 120% at 0% 50%, rgba(255,255,0,.08), transparent 60%); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band .cta { margin-top: 0; }

/* Single post / page content from the block editor */
.entry-feature { margin-top: clamp(24px, 4vw, 48px); }
.entry-feature img { width: 100%; max-height: 72vh; object-fit: cover; border: 1px solid var(--line); }
.entry-content { padding-block: clamp(40px, 6vw, 80px); font-size: 18px; color: #d8d8d2; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2, .entry-content h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; color: var(--text); line-height: 1; margin-top: 1.6em; }
.entry-content h2 { font-size: 40px; }
.entry-content h3 { font-size: 28px; }
.entry-content img { border: 1px solid var(--line); }
.entry-content .wp-block-gallery { gap: 8px; }
.entry-content blockquote { border-left: 3px solid var(--yellow); padding-left: 20px; font-size: 1.15em; color: var(--text); }
.entry-content .alignwide { width: min(1240px, 100vw - 32px); margin-inline: calc((min(760px, 100vw - 32px) - min(1240px, 100vw - 32px)) / 2); max-width: none; }
.entry-content .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.entry-cta { padding-bottom: 80px; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 80px; }
.post-nav a { color: var(--text); text-decoration: none; font-weight: 600; }
.post-nav a:hover { color: var(--yellow); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 88px) 0 28px; background: #030303; }
.footer-inner { width: min(1240px, 100% - 2 * clamp(16px, 4vw, 56px)); margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 40px; }
.footer-name { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 34px; text-transform: uppercase; line-height: 1; }
.footer-name b { color: var(--yellow); }
.footer-tag { color: var(--muted); margin-top: 10px; font-size: 14px; max-width: 36ch; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.social { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); color: var(--text); transform: skewX(-10deg); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.social svg { transform: skewX(10deg); }
.social:hover, .social:focus-visible { background: var(--yellow); border-color: var(--yellow); color: #000; transform: skewX(-10deg) translateY(-2px); }
.mnav-socials { margin-top: 28px; }
.footer-col h2 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); margin-bottom: 12px; }
.footer-col p { color: #c9c9c3; }
.footer-col a { color: var(--text); text-decoration: none; }
.footer-col a:hover { color: var(--yellow); }
.footer-legal { width: min(1240px, 100% - 2 * clamp(16px, 4vw, 56px)); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid var(--line); color: #8d8d86; font-size: 13px; }
.footer-legal a { color: inherit; }
.footer-legal a:hover { color: var(--yellow); }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }

.menu .menu-all { grid-template-columns: 1fr; border-top: 1px solid var(--line); margin-top: 6px; }
.menu .menu-all .t { font-size: 16px; color: var(--yellow); }

/* ================= Contact page / lead form ================= */
.page-intro { color: #d8d8d2; font-size: clamp(17px, 1.4vw, 20px); max-width: 52ch; margin-top: 18px; }
.page-intro-sub { color: var(--muted); margin-top: 8px; }
.page-intro-sub a { font-weight: 600; }

.contact-layout { padding-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (max-width: 1080px) { .contact-layout { grid-template-columns: 1fr; } }

.lead-card { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--yellow); padding: clamp(20px, 3vw, 40px); }
.lead-form { display: grid; gap: 32px; }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .lead-grid { grid-template-columns: 1fr; } }
.lead-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; align-content: start; min-width: 0; }
.lead-form legend { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 24px; letter-spacing: .02em; margin-bottom: 4px; padding: 0; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #cfcfc9; }
.field b { color: var(--yellow); }
.field i { font-style: normal; text-transform: none; letter-spacing: 0; color: #77776f; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; background: #050505; color: var(--text); border: 1px solid #2a2a2a; border-radius: 0;
  padding: 12px 14px; font: 500 16px/1.4 Barlow, system-ui, sans-serif; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--yellow) 50%), linear-gradient(135deg, var(--yellow) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input::placeholder, .field textarea::placeholder { color: #5f5f59; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,255,0,.15); }
.field input[type="date"] { color-scheme: dark; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

.sms-box { border: 1px solid #222; background: #070707; padding: 14px 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 15px; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--yellow); flex: none; }
.check input:disabled + span { color: #77776f; }
.sms-copy { margin-top: 10px; font-size: 12px; line-height: 1.55; color: #8a8a84; }

.files-help { color: var(--muted); font-size: 14px; }
.file-drop { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; justify-self: start; }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop span { display: inline-block; padding: 12px 22px; border: 1px dashed #3a3a3a; font-weight: 600; letter-spacing: .04em; transition: border-color .2s, color .2s; }
.file-drop:hover span, .file-drop input:focus-visible + span { border-color: var(--yellow); color: var(--yellow); }
.file-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.file-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid #222; padding: 8px 12px; font-size: 14px; }
.file-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list button { background: none; border: 0; color: var(--yellow); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

.lead-error, .lead-note { border: 1px solid rgba(255,80,80,.45); background: rgba(255,60,60,.08); color: #ffb3b3; padding: 12px 14px; font-size: 14px; }
.lead-note { border-color: #333; background: #0a0a0a; color: var(--muted); }
.lead-submit { justify-self: start; margin-top: 0; border: 0; cursor: pointer; font: 600 16px/1 Barlow, system-ui, sans-serif; padding: 18px 34px; }
.lead-submit:disabled { opacity: .4; cursor: not-allowed; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-done { outline: none; }
.lead-done .section-title { font-size: clamp(32px, 4vw, 54px); margin: 8px 0 14px; }
.lead-done p { color: #d8d8d2; max-width: 52ch; }

.contact-info { display: grid; gap: 12px; }
.info-card { border: 1px solid var(--line); background: var(--panel); padding: 20px 22px; }
.info-card h2 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); margin-bottom: 8px; }
.info-card address { font-style: normal; }
.info-card a { color: var(--text); text-decoration: none; font-weight: 600; }
.info-card a:hover { color: var(--yellow); }

/* Page header with a faded black-and-white photo on the right (e.g. the storefront on Contact) */
.page-hero--photo { isolation: isolate; }
.page-hero--photo::before {
  content: ""; position: absolute; inset: 0 0 0 auto; width: min(55%, 760px); z-index: -1;
  background: var(--photo) 50% 34% / cover no-repeat;
  filter: grayscale(1) contrast(1.05); opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 30%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (max-width: 760px) {
  .page-hero--photo::before { width: 100%; opacity: .2; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 60%); mask-image: linear-gradient(0deg, transparent 0%, #000 60%); }
}

/* ================= Animated submit button ================= */
.lead-submit {
  position: relative; overflow: hidden; isolation: isolate; min-width: 250px; text-align: center;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.lead-submit > span { display: inline-flex; align-items: center; gap: 0; position: relative; z-index: 2; transition: gap .3s cubic-bezier(.2,.8,.2,1); }
.btn-arrow { width: 0; height: 18px; opacity: 0; transform: translateX(-8px); transition: width .3s cubic-bezier(.2,.8,.2,1), opacity .2s, transform .3s cubic-bezier(.2,.8,.2,1); }

/* Squeegee gloss sweep */
.lead-submit::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75) 45%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0));
  transform: translateX(-160%) skewX(-20deg);
}
/* Neon outline that ignites on hover */
.lead-submit::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px #000; opacity: 0; transition: opacity .25s;
}

.lead-submit:not(:disabled):hover,
.lead-submit:not(:disabled):focus-visible {
  transform: skewX(-10deg) translateY(-3px);
  box-shadow: 0 0 0 3px #050505, 0 0 0 5px var(--yellow), 0 12px 34px rgba(255,255,0,.45), 0 0 60px rgba(255,255,0,.25);
}
.lead-submit:not(:disabled):hover::before,
.lead-submit:not(:disabled):focus-visible::before { animation: btn-sweep .7s cubic-bezier(.4,0,.2,1) forwards; }
.lead-submit:not(:disabled):hover > span,
.lead-submit:not(:disabled):focus-visible > span { gap: 10px; }
.lead-submit:not(:disabled):hover .btn-arrow,
.lead-submit:not(:disabled):focus-visible .btn-arrow { width: 20px; opacity: 1; transform: none; animation: btn-nudge 1s .35s ease-in-out infinite; }
@keyframes btn-sweep { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(300%) skewX(-20deg); } }
@keyframes btn-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* Press */
.lead-submit:not(:disabled):active {
  transform: skewX(-10deg) translateY(1px) scale(.97);
  box-shadow: 0 0 0 3px #050505, 0 0 0 5px var(--yellow), 0 4px 14px rgba(255,255,0,.35);
  transition-duration: .08s;
}

/* Ink splat from the click point */
.btn-splat {
  position: absolute; z-index: 1; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.55) 0 40%, rgba(0,0,0,0) 70%);
  pointer-events: none; animation: btn-splat .55s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes btn-splat { from { transform: scale(0); opacity: 1; } to { transform: scale(26); opacity: 0; } }

/* Sending: scrolling hazard stripes */
.lead-submit.is-loading {
  opacity: 1 !important; cursor: progress;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 14px, #111 14px 28px);
  background-size: 40px 40px; animation: btn-hazard .6s linear infinite;
}
.lead-submit.is-loading > span { background: var(--yellow); color: #000; padding: 4px 12px; }
.lead-submit.is-loading .btn-arrow { display: none; }
@keyframes btn-hazard { to { background-position: 40px 0; } }

@media (prefers-reduced-motion: reduce) {
  .lead-submit, .lead-submit::before, .btn-arrow, .btn-splat, .lead-submit.is-loading { animation: none !important; transition: none !important; }
}
/* Only the button's outer span counter-skews; inner pieces stay upright relative to it */
.lead-submit .btn-label, .lead-submit .btn-splat { transform: none; }

/* ================= About: Meet the Crew ================= */
.about-story { border-bottom: 1px solid var(--line); }
.about-story .entry-content { font-size: clamp(18px, 1.5vw, 22px); }

.crew { position: relative; padding: clamp(80px, 11vw, 160px) 0 clamp(80px, 10vw, 140px); overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 50% at 85% 0%, rgba(255,255,0,.07), transparent 70%), #050505; }

/* Giant outlined names drifting behind the section */
.crew-marquee { position: absolute; top: clamp(24px, 4vw, 60px); left: 0; right: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.crew-marquee-track { display: flex; width: max-content; animation: crew-marquee 60s linear infinite; }
.crew-marquee span {
  font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(90px, 15vw, 240px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); padding-right: .3em;
}
.crew-marquee i { font-style: normal; -webkit-text-stroke: 1px rgba(255,255,0,.25); font-size: .45em; vertical-align: middle; }
@keyframes crew-marquee { to { transform: translateX(-50%); } }

.crew-head { max-width: 760px; margin-bottom: clamp(48px, 7vw, 96px); }
.crew-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .9; font-size: clamp(48px, 7vw, 112px); }
.crew-title span { color: var(--yellow); text-shadow: 0 0 30px rgba(255,255,0,.25); }
.crew-lede { color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); margin-top: 20px; max-width: 46ch; }

.crew .ch { display: inline-block; will-change: transform; }
.crew-role { display: block; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); }

/* Corner brackets that draw in on hover */
.crew-corners { position: absolute; inset: 14px; pointer-events: none; z-index: 3; }
.crew-corners::before, .crew-corners::after {
  content: ""; position: absolute; width: 28px; height: 28px; border-color: var(--yellow); border-style: solid; opacity: 0;
  transition: opacity .3s, transform .45s cubic-bezier(.2,.8,.2,1);
}
.crew-corners::before { top: 0; left: 0; border-width: 2px 0 0 2px; transform: translate(10px, 10px); }
.crew-corners::after { right: 0; bottom: 0; border-width: 0 2px 2px 0; transform: translate(-10px, -10px); }
.crew-card:hover .crew-corners::before, .crew-card:hover .crew-corners::after,
.crew-card:focus-visible .crew-corners::before, .crew-card:focus-visible .crew-corners::after,
.crew-feature-photo:hover .crew-corners::before, .crew-feature-photo:hover .crew-corners::after { opacity: 1; transform: none; }

/* Featured (owner) spread */
.crew-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-bottom: clamp(64px, 8vw, 120px); }
.crew-feature-photo, .crew-card {
  position: relative; display: block; padding: 0; border: 0; background: #0c0c0c; cursor: pointer; overflow: hidden; color: inherit; text-align: left; font: inherit;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.crew-feature-photo { aspect-ratio: 4 / 5; box-shadow: 24px 24px 0 -1px #111, 24px 24px 0 0 rgba(255,255,0,.35); }
.crew-feature-photo img, .crew-photo img {
  width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.9);
  transition: filter .6s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
.crew-feature-photo:hover img, .crew-card:hover .crew-photo img, .crew-card:focus-visible .crew-photo img { filter: grayscale(0) contrast(1.02) brightness(1); transform: scale(1.05); }
/* Light glint that follows the pointer */
.crew-feature-photo::after, .crew-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,0,.16), transparent 55%);
}
.crew-feature-photo:hover::after, .crew-card:hover::after { opacity: 1; }

.crew-feature-name { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .85; font-size: clamp(88px, 13vw, 210px); color: var(--yellow); margin: 10px 0 28px; overflow: hidden; padding-bottom: .04em; }
.crew-feature-facts { display: grid; gap: 0; margin: 0 0 32px; border-top: 1px solid var(--line); }
.crew-feature-facts div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.crew-feature-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a8a84; padding-top: 3px; }
.crew-feature-facts dd { margin: 0; color: #e4e4de; }
.crew-open { border: 0; cursor: pointer; font: 600 16px/1 Barlow, system-ui, sans-serif; }

/* Team grid */
.crew-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); max-width: 1000px; margin-inline: auto; }
@media (max-width: 1080px) { .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .crew-grid { grid-template-columns: 1fr; } }
.crew-card { aspect-ratio: 4 / 5; container-type: inline-size; }
.crew-card:hover { box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,0,.35); }
.crew-photo { position: absolute; inset: 0; }
.crew-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,0) 40%, rgba(5,5,5,.92) 100%); }
.crew-num { position: absolute; top: 18px; right: 22px; z-index: 3; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 22px; color: rgba(255,255,255,.35); transition: color .3s; }
.crew-card:hover .crew-num { color: var(--yellow); }
.crew-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 20px; display: grid; gap: 5px; }
.crew-name { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .85; font-size: clamp(34px, 17cqi, 72px); white-space: nowrap; overflow: hidden; padding-bottom: .04em; transition: color .3s; }
.crew-card:hover .crew-name { color: var(--yellow); }
.crew-more { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #cfcfc9; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px);
  transition: max-height .4s, opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.crew-more b { color: var(--yellow); font-size: 16px; }
.crew-card:hover .crew-more, .crew-card:focus-visible .crew-more { max-height: 24px; opacity: 1; transform: none; }
.crew-card:focus-visible, .crew-feature-photo:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }

/* Profile viewer */
.crew-dialog { width: min(1080px, calc(100vw - 48px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.crew-dialog::backdrop { background: rgba(3,3,3,.78); backdrop-filter: blur(8px) saturate(.8); }
html.crew-open { overflow: hidden; }

/* "Quote submitted" popup (Services page, after the contact form) */
.quote-sent { width: min(620px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.quote-sent::backdrop { background: rgba(3,3,3,.78); backdrop-filter: blur(8px) saturate(.8); }
.qs-shell { position: relative; padding: clamp(28px, 4vw, 48px); background: #070707; border: 2px solid var(--yellow); box-shadow: 0 0 0 6px #050505, 0 0 0 7px rgba(255,255,0,.25), 0 0 50px rgba(255,255,0,.22), 0 40px 120px rgba(0,0,0,.7); }
.qs-shell .section-title { font-size: clamp(32px, 4vw, 52px); margin: 8px 48px 14px 0; }
.qs-shell p:not(.kicker) { color: #d8d8d2; margin-bottom: 24px; }
.qs-shell a[href^="tel:"] { white-space: nowrap; }
.qs-shell .cta { border: 0; cursor: pointer; font-family: inherit; font-size: inherit; }
.cd-shell {
  position: relative; min-height: min(680px, calc(100vh - 64px)); max-height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  background: #070707; border: 2px solid var(--yellow);
  box-shadow: 0 0 0 6px #050505, 0 0 0 7px rgba(255,255,0,.25), 0 0 50px rgba(255,255,0,.22), 0 40px 120px rgba(0,0,0,.7);
}
/* Die-cut style tab on the top edge */
.cd-shell::before {
  content: "1CG Crew"; position: absolute; top: -2px; left: 28px; transform: translateY(-100%); z-index: 6;
  background: var(--yellow); color: #000; padding: 6px 14px 5px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font-family: var(--display); font-style: italic; font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
}
.cd-photo { margin: 0; position: relative; overflow: hidden; background: #0c0c0c; border-right: 1px solid rgba(255,255,0,.25); }
.cd-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,5,5,.55), transparent 35%); }
.cd-body { padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(22px, 2.4vw, 32px); overflow: hidden; display: flex; flex-direction: column; }
.cd-body > * { flex-shrink: 0; }
.cd-role { font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); }
.cd-name { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .85; font-size: clamp(52px, 5vw, 88px); color: var(--yellow); margin: 4px 0 14px; overflow: hidden; padding-bottom: .04em; }
.cd-name .ch { display: inline-block; }
.cd-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; border-top: 1px solid var(--line); }
.cd-facts li { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto 1fr; gap: 3px 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cd-n { font-family: var(--display); font-style: italic; font-weight: 800; color: #4a4a44; font-size: 15px; line-height: 1.2; }
.cd-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); opacity: .85; line-height: 1.5; }
.cd-value { grid-column: 2; color: #ecece6; font-size: 14.5px; line-height: 1.45; }
.cd-nav { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; }
.cd-arrow { width: 44px; height: 44px; display: grid; place-items: center; background: none; color: var(--text); border: 1px solid #2a2a2a; font-size: 20px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.cd-arrow:hover, .cd-arrow:focus-visible { background: var(--yellow); color: #000; border-color: var(--yellow); outline: none; }
.cd-count { font-family: var(--display); font-style: italic; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.cd-close { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border: 1px solid #2a2a2a; background: rgba(5,5,5,.6); cursor: pointer; z-index: 5; transition: background .2s, transform .3s; }
.cd-close span { position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: var(--text); }
.cd-close span:first-child { transform: rotate(45deg); }
.cd-close span:last-child { transform: rotate(-45deg); }
.cd-close:hover, .cd-close:focus-visible { background: var(--yellow); transform: rotate(90deg); outline: none; }
.cd-close:hover span, .cd-close:focus-visible span { background: #000; }

@media (max-width: 900px) {
  .crew-feature { grid-template-columns: 1fr; }
  .crew-feature-facts div { grid-template-columns: 1fr; gap: 4px; }
  .crew-dialog { width: calc(100vw - 24px); }
  .cd-shell { grid-template-columns: 1fr; grid-template-rows: 26vh minmax(0, 1fr); max-height: calc(100vh - 56px); }
  .cd-photo { border-right: 0; border-bottom: 1px solid rgba(255,255,0,.25); }
  .cd-photo::after { background: linear-gradient(0deg, #070707, transparent 45%); }
  .cd-facts { grid-template-columns: 1fr; }
  .cd-body { overflow-y: auto; }
}
@media (hover: none) { .crew-more { max-height: 24px; opacity: 1; transform: none; } .crew-photo img, .crew-feature-photo img { filter: grayscale(.2); } }
@media (prefers-reduced-motion: reduce) { .crew-marquee-track { animation: none; } .crew-card, .crew-feature-photo { transform: none !important; } }
/* Fills the empty slot in the last row of the crew grid */
.crew-card--cta { background: var(--yellow); color: #000; text-decoration: none; display: block; }
.crew-card--cta .crew-role { color: #000; opacity: .6; }
.crew-card--cta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 16px, transparent 16px 32px); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.crew-card--cta:hover::before { transform: translateX(32px); }
.crew-card--cta::after { display: none; }
.crew-cta-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .88; font-size: clamp(40px, 14cqi, 72px); }
.crew-cta-go { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.crew-cta-go b { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.crew-card--cta:hover .crew-cta-go b { transform: translateX(6px); }
.crew-card--cta:hover { box-shadow: 0 30px 60px rgba(255,255,0,.2); }
.cd-bio { font-size: 15.5px; line-height: 1.5; color: #e4e4de; max-width: 62ch; margin: 0 0 18px; padding-left: 14px; border-left: 3px solid var(--yellow); }

/* Shorter laptop screens: tighten further so every profile still fits without scrolling */
@media (min-width: 901px) and (max-height: 820px) {
  .cd-name { font-size: clamp(44px, 4.2vw, 68px); margin-bottom: 10px; }
  .cd-bio { font-size: 14.5px; margin-bottom: 12px; }
  .cd-facts li { padding: 9px 0; }
  .cd-value { font-size: 13.5px; line-height: 1.4; }
  .cd-body { padding-top: 24px; padding-bottom: 18px; }
  .cd-nav { padding-top: 12px; }
}

/* ================= About: Our Story + timeline ================= */
.story { padding: clamp(72px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); position: relative; overflow: hidden; }
.story-intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.story-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .9; font-size: clamp(44px, 6vw, 96px); }
.story-title span { color: var(--yellow); }
.story-copy { padding: 0; font-size: clamp(17px, 1.35vw, 20px); color: #d8d8d2; }

.story-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(48px, 7vw, 96px) 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-stats > div { padding: 26px 24px 24px 0; }
.story-stats > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.story-stats dt { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #8a8a84; }
.story-stats dd { margin: 8px 0 0; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 4vw, 60px); line-height: .95; color: var(--yellow); }
.story-stats > div:last-child dd { font-size: clamp(20px, 1.8vw, 28px); color: var(--text); line-height: 1.1; }
@media (max-width: 900px) { .story-intro { grid-template-columns: 1fr; } .story-stats { grid-template-columns: 1fr 1fr; } .story-stats > div:nth-child(3) { padding-left: 0; border-left: 0; } .story-stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); } }

/* Timeline — snake layout: rows run left→right, then right→left, joined by bracket turns at the edges */
.timeline { position: relative; margin-top: clamp(56px, 7vw, 96px); padding: 0 34px; --cols: 3; }
.timeline-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.timeline-path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.timeline-path .tp-base { stroke: #242424; stroke-width: 2; }
.timeline-path .tp-fill { stroke: var(--yellow); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255,255,0,.65)); }
.timeline-list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); row-gap: clamp(48px, 5vw, 72px); }
.milestone { position: relative; padding-top: 22px; }
.milestone-dot { position: absolute; left: 18px; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #050505; border: 2px solid #3a3a3a; transform: rotate(45deg); z-index: 2; transition: background .4s, border-color .4s, box-shadow .4s; }
.milestone.is-active .milestone-dot { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 16px rgba(255,255,0,.85); }
.milestone-year { font-family: var(--display); font-style: italic; font-weight: 800; line-height: .9; white-space: nowrap; font-size: clamp(34px, 3vw, 46px);
  color: transparent; -webkit-text-stroke: 1.2px #3a3a3a; margin: 0 0 10px 4px; transition: color .5s, -webkit-text-stroke-color .5s, text-shadow .5s; }
.milestone.is-active .milestone-year { color: var(--yellow); -webkit-text-stroke-color: var(--yellow); text-shadow: 0 0 26px rgba(255,255,0,.25); }
.milestone-card { background: #0b0b0b; border: 1px solid var(--line); padding: 16px 18px; transition: border-color .4s, box-shadow .4s; }
.milestone.is-active .milestone-card { border-color: rgba(255,255,0,.4); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.milestone-card:has(.milestone-photo) { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.milestone-photo { margin: 0; width: 64px; height: 64px; overflow: hidden; border: 1px solid #262626; }
.milestone-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); transition: filter .4s; }
.milestone.is-active .milestone-photo img { filter: none; }
.milestone-body { padding: 0; min-width: 0; }
.milestone-kicker { display: none; }
.milestone-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 21px; line-height: .95; margin: 2px 0 8px; }
.milestone-text { color: #c9c9c3; font-size: 13.5px; line-height: 1.45; }
.milestone-text ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.milestone-text li { position: relative; padding-left: 15px; }
.milestone-text li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--yellow); transform: skewX(-20deg); }
.milestone-text p + p { margin-top: 6px; }
.milestone-team { margin-top: 8px; padding-top: 7px; border-top: 1px dashed #262626; font-size: 12px; color: #9a9a94; }
.milestone-team span { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); margin-right: 6px; }
/* Finale: the 20-year milestone in full yellow */
.milestone.is-finale .milestone-card { background: var(--yellow); border-color: var(--yellow); color: #000; }
.milestone.is-finale .milestone-text, .milestone.is-finale .milestone-text p { color: #1a1a1a; }
.milestone.is-finale .milestone-photo { border-color: #000; }
@media (max-width: 1080px) { .timeline { --cols: 2; } }
@media (max-width: 680px) { .timeline { --cols: 1; padding: 0 0 0 34px; } .timeline-list { row-gap: 26px; } .milestone-year { font-size: 32px; margin-bottom: 6px; } .milestone-dot { left: -16px; top: 18px; } .milestone { padding-top: 0; } }
@media (prefers-reduced-motion: reduce) { .timeline-path .tp-fill { stroke-dashoffset: 0 !important; } }

/* Halftone photo (Chance on a wheelie) faded in behind the story headline */
.story-intro { position: relative; isolation: isolate; }
.story-intro::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: clamp(-120px, -9vw, -60px); bottom: clamp(-80px, -6vw, -40px);
  left: calc((100vw - 100%) / -2); width: calc(55% + (100vw - 100%) / 2);
  background: var(--halftone) 65% 38% / cover no-repeat;
  opacity: .36;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (max-width: 900px) {
  .story-intro::before { width: 100vw; bottom: 45%; opacity: .2;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 35%, #000 80%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0%, #000 35%, #000 80%, transparent 100%); }
}

/* ================= Vehicle Wraps page ================= */
.vw-hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 0;
  background: radial-gradient(60% 70% at 80% 40%, rgba(255,255,0,.08), transparent 70%), #050505; }
.vw-repeat.on { opacity: .7; }
.vw-repeat { -webkit-mask-image: radial-gradient(90% 85% at 30% 45%, #000 0%, rgba(0,0,0,.85) 45%, transparent 85%); mask-image: radial-gradient(90% 85% at 30% 45%, #000 0%, rgba(0,0,0,.85) 45%, transparent 85%); }
.vw-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.vw-eyebrow { white-space: normal !important; }
.vw-h1 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: .06em; color: var(--text); margin: 18px 0 6px; }
.vw-naked { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .82; font-size: clamp(72px, 9.5vw, 168px); margin: 0 0 14px; }
.vw-naked span { display: inline-block; }
.vw-naked span:last-child { color: var(--yellow); text-shadow: 0 0 40px rgba(255,255,0,.3); }
.vw-sub { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; color: #fff; margin-bottom: 14px; }
.vw-lead { color: #c9c9c3; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; max-width: 56ch; }
.vw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.vw-actions .cta { margin-top: 0; }
.vw-call { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.vw-call:hover { color: var(--yellow); }

/* Hero vehicle: before/after with a squeegee pass */
.vw-hero-stage { position: relative; display: block; width: 100%; aspect-ratio: 1080 / 750; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden;
  width: 116%; margin-right: -16%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 960px) { .vw-hero-stage { width: 100%; margin-right: 0; } }
.vw-hero-img, .vwb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vw-hero-after { clip-path: inset(0 100% 0 0); }
.vw-squeegee { position: absolute; top: -4%; bottom: -4%; left: 0; width: 10px; margin-left: -5px; opacity: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--yellow) 12%, #fff 50%, var(--yellow) 88%, transparent);
  box-shadow: 0 0 24px 6px rgba(255,255,0,.55), 0 0 80px 20px rgba(255,255,0,.2); transform: skewX(-8deg); }
.vw-tag { position: absolute; top: 18%; z-index: 4; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .14em;
  padding: 6px 12px; transform: skewX(-10deg); transition: opacity .4s; }
.vw-tag--before { left: 6%; background: #fff; color: #000; }
.vw-tag--after { right: 6%; background: var(--yellow); color: #000; opacity: 0; }
.vw-hero-stage.is-dressed .vw-tag--before { opacity: 0; }
.vw-hero-stage.is-dressed .vw-tag--after { opacity: 1; }
.vw-replay { position: absolute; right: 6%; bottom: 8%; z-index: 4; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #111; background: rgba(255,255,255,.85); padding: 6px 10px; opacity: 0; transition: opacity .3s; }
.vw-hero-stage.is-dressed:hover .vw-replay, .vw-hero-stage:focus-visible .vw-replay { opacity: 1; }
.vw-hero-stage:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }

.vw-ticker { position: relative; z-index: 1; margin-top: clamp(28px, 4vw, 56px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #080808; overflow: hidden; }
.vw-ticker-track { display: flex; width: max-content; animation: crew-marquee 40s linear infinite; }
.vw-ticker span { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; white-space: nowrap; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: .06em; padding: 14px 0; color: #e8e8e2; }

/* Package builder */
.vw-head { max-width: 760px; }
.vw-head-lead { flex-basis: 100%; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); margin-top: 6px; }
.vwb { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.vwb-stage { position: sticky; top: calc(var(--nav-h) + 20px); }
.vwb-frame { position: relative; aspect-ratio: 1080 / 750; overflow: hidden; border: 2px solid var(--yellow); background: #2a2a2a;
  box-shadow: 0 0 0 6px #050505, 0 0 0 7px rgba(255,255,0,.25), 0 30px 80px rgba(0,0,0,.6); }
.vwb-badge { position: absolute; left: 0; top: 0; z-index: 4; background: var(--yellow); color: #000; padding: 7px 14px 6px; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.vwb-views { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vwb-view { border: 1px solid #2a2a2a; background: #0b0b0b; color: var(--text); padding: 10px 16px; font: 600 14px Barlow, system-ui, sans-serif; letter-spacing: .04em; cursor: pointer; transform: skewX(-10deg); transition: background .2s, color .2s, border-color .2s; }
.vwb-view:hover:not(:disabled), .vwb-view.is-on { background: var(--yellow); color: #000; border-color: var(--yellow); }
.vwb-view:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 560px) { .vwb-views { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .vwb-view { padding: 10px 4px; font-size: 12px; white-space: nowrap; } }

.vwb-tabs { display: grid; gap: 8px; margin-bottom: 26px; }
.vwb-tab { position: relative; display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; gap: 0 12px; align-items: center; text-align: left;
  border: 1px solid #222; background: #0a0a0a; color: var(--text); padding: 14px 16px; cursor: pointer; font: inherit; overflow: hidden; transition: border-color .25s, background .25s; }
.vwb-tab::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,0,.14), transparent 70%); transform: translateX(-101%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.vwb-tab:hover::before, .vwb-tab.is-on::before { transform: none; }
.vwb-tab.is-on { border-color: var(--yellow); background: #0f0f08; }
.vwb-tab-n { grid-row: span 2; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 26px; color: #3a3a3a; position: relative; transition: color .25s; }
.vwb-tab.is-on .vwb-tab-n { color: var(--yellow); }
.vwb-tab-name { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1; position: relative; }
.vwb-tab-tag { grid-column: 2; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8a8a84; position: relative; }
.vwb-cover { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 4px; position: relative; }
.vwb-cover i { width: 10px; height: 22px; background: #222; transform: skewX(-14deg); transition: background .3s; }
.vwb-cover i.on { background: #555; }
.vwb-tab.is-on .vwb-cover i.on { background: var(--yellow); box-shadow: 0 0 8px rgba(255,255,0,.6); }

.vwb-name { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 3.4vw, 54px); line-height: .9; }
.vwb-name small { display: block; font-family: Barlow, sans-serif; font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: .2em; color: var(--yellow); margin-top: 8px; }
.vwb-line { font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; color: #fff; margin: 14px 0 10px; }
.vwb-copy { color: #c9c9c3; font-size: 16px; line-height: 1.6; }
.vwb-sub { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #8a8a84; margin: 22px 0 10px; }
.vwb-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vwb-gets li { position: relative; padding-left: 26px; color: #e4e4de; }
.vwb-gets li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; background: var(--yellow); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.vwb-best { margin-top: 20px; padding: 14px 16px; border-left: 3px solid var(--yellow); background: #0b0b0b; color: #d8d8d2; font-size: 15px; }
.vwb-best span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); margin-bottom: 4px; }
.vwb-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 16px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.vwb-buy .cta { margin-top: 0; }
.vw-fine { color: #77776f; font-size: 13px; margin-top: 24px; }
.vw-unsure { color: #d8d8d2; margin-top: 8px; font-size: 16px; }
.vw-unsure a { font-weight: 600; }
@media (max-width: 960px) { .vw-hero-grid, .vwb { grid-template-columns: 1fr; } .vwb-stage { position: static; } }

/* Why 1CG */
.vw-why { border-top: 1px solid var(--line); }
.vw-why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.vw-why-item { background: #070707; padding: clamp(22px, 2.6vw, 34px); position: relative; overflow: hidden; transition: background .3s; }
.vw-why-item::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.vw-why-item:hover { background: #0c0c0a; }
.vw-why-item:hover::after { transform: scaleX(1); }
.vw-why-n { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px #3a3a3a; transition: color .3s, -webkit-text-stroke-color .3s; }
.vw-why-item:hover .vw-why-n { color: var(--yellow); -webkit-text-stroke-color: var(--yellow); }
.vw-why-item h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1; margin: 14px 0 10px; }
.vw-why-item p { color: #bdbdb7; font-size: 15px; }
@media (max-width: 960px) { .vw-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vw-why-grid { grid-template-columns: 1fr; } }

/* How it works */
.vw-steps { border-top: 1px solid var(--line); background: #060606; }
.vw-steps-track { position: relative; }
.vw-steps-line { position: absolute; left: 0; right: 0; top: 26px; height: 2px; background: #1e1e1e; }
.vw-steps-line span { position: absolute; inset: 0; background: var(--yellow); box-shadow: 0 0 12px rgba(255,255,0,.6); transform-origin: left; }
.vw-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); position: relative; }
.vw-step-n { display: grid; place-items: center; width: 52px; height: 52px; background: var(--yellow); color: #000; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 26px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); margin-bottom: 18px; }
.vw-step h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1; margin-bottom: 8px; }
.vw-step p { color: #bdbdb7; font-size: 15px; }
@media (max-width: 860px) { .vw-steps-list { grid-template-columns: 1fr 1fr; row-gap: 32px; } .vw-steps-line { display: none; } }
@media (max-width: 520px) { .vw-steps-list { grid-template-columns: 1fr; } }

/* Fleet */
.vw-fleet { background: var(--yellow); color: #000; position: relative; overflow: hidden; }
.vw-fleet::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 22px, transparent 22px 44px); }
.vw-fleet-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding-block: clamp(48px, 6vw, 80px); }
.vw-fleet-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(44px, 6vw, 88px); line-height: .9; margin-bottom: 12px; }
.vw-fleet p { font-size: clamp(16px, 1.3vw, 19px); max-width: 60ch; color: #1a1a1a; }
.vw-fleet-btn { display: inline-flex; gap: 12px; align-items: center; background: #000; color: var(--yellow); text-decoration: none; padding: 18px 28px; transform: skewX(-10deg);
  font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 20px; letter-spacing: .04em; transition: transform .25s, box-shadow .25s; }
.vw-fleet-btn > * { transform: skewX(10deg); }
.vw-fleet-btn b { transition: transform .25s; }
.vw-fleet-btn:hover { transform: skewX(-10deg) translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.vw-fleet-btn:hover b { transform: skewX(10deg) translateX(5px); }
@media (max-width: 760px) { .vw-fleet-inner { grid-template-columns: 1fr; } }

/* FAQ */
.vw-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.vw-faq-side { color: var(--muted); margin-top: 16px; }
.vw-faq-side a { font-weight: 600; }
.vw-faq-list { border-top: 1px solid var(--line); }
.vw-faq-item { border-bottom: 1px solid var(--line); }
.vw-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 0;
  font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.05; transition: color .2s; }
.vw-faq-item summary::-webkit-details-marker { display: none; }
.vw-faq-item summary:hover, .vw-faq-item[open] summary { color: var(--yellow); }
.vw-faq-item summary span { position: relative; flex: none; width: 18px; height: 18px; }
.vw-faq-item summary span::before, .vw-faq-item summary span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .3s; }
.vw-faq-item summary span::after { transform: rotate(90deg); }
.vw-faq-item[open] summary span::after { transform: rotate(0deg); }
.vw-faq-item p { color: #c9c9c3; padding: 0 0 22px; max-width: 62ch; }
@media (max-width: 860px) { .vw-faq-grid { grid-template-columns: 1fr; } }

/* Final CTA */
.vw-final { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: #050505; }
.vw-final-media { position: absolute; inset: 0 0 0 auto; width: min(68%, 1300px); pointer-events: none; }
.vw-final-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(0deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(0deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.vw-final-inner { position: relative; z-index: 1; padding-block: clamp(80px, 11vw, 160px); display: grid; justify-items: start; }
.vw-final-inner > * { max-width: min(520px, 42vw); }
.vw-final-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 4.6vw, 80px); line-height: .9; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.vw-final-title em { font-style: inherit; color: var(--yellow); }
.vw-final p { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); margin-top: 18px; }
@media (max-width: 760px) {
  .vw-final { text-align: center; }
  .vw-final-media { inset: 0; width: 100%; opacity: .4; }
  .vw-final-video { -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0%, #000 25%, #000 75%, transparent 100%); }
  .vw-final-inner { justify-items: center; }
  .vw-final-inner > * { max-width: 100%; }
  .vw-final .vw-actions { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .vw-ticker-track { animation: none; } .vw-hero-after { clip-path: none; } }

/* ================= Google reviews band ================= */
.reviews { border-top: 1px solid var(--line); background: radial-gradient(50% 80% at 0% 0%, rgba(255,255,0,.06), transparent 70%), #050505; }
.reviews-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.reviews-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 4.4vw, 68px); line-height: .92; }
.reviews-link { color: var(--yellow); font-weight: 600; border-bottom: 2px solid var(--yellow); padding-bottom: 4px; white-space: nowrap; }
.reviews-link b { display: inline-block; transition: transform .2s; }
.reviews-link:hover b { transform: translateX(4px); }
.reviews-widget { min-height: 120px; }
/* Trustindex widget, re-skinned to the 1CG look */
.reviews-widget .ti-widget.ti-goog .ti-review-item > .ti-inner { background: #0b0b0b !important; border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; transition: border-color .25s, transform .25s; }
.reviews-widget .ti-widget.ti-goog .ti-review-item:hover > .ti-inner { border-color: var(--yellow) !important; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255,255,0,.08) !important; }
.reviews-widget .ti-widget.ti-goog .ti-name { font-family: var(--display) !important; font-style: italic; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .02em; font-size: 17px !important; color: #fff !important; }
.reviews-widget .ti-widget.ti-goog .ti-date { color: var(--muted) !important; }
.reviews-widget .ti-widget.ti-goog .ti-review-content, .reviews-widget .ti-widget.ti-goog .ti-review-text-container { color: #c9c9c3 !important; }
.reviews-widget .ti-widget.ti-goog .ti-read-more span, .reviews-widget .ti-widget.ti-goog .ti-read-more { color: var(--yellow) !important; }
.reviews-widget .ti-widget.ti-goog .ti-stars .ti-star { filter: hue-rotate(10deg) saturate(1.4) brightness(1.15); }
.reviews-widget .ti-widget.ti-goog .ti-controls .ti-next, .reviews-widget .ti-widget.ti-goog .ti-controls .ti-prev { background: var(--yellow) !important; border-radius: 0 !important; }
.reviews-widget .ti-widget.ti-goog .ti-controls .ti-next::before, .reviews-widget .ti-widget.ti-goog .ti-controls .ti-prev::before,
.reviews-widget .ti-widget.ti-goog .ti-controls .ti-next::after, .reviews-widget .ti-widget.ti-goog .ti-controls .ti-prev::after { border-color: #000 !important; }

/* ================= Embroidery page ================= */
.em-hero { position: relative; overflow: hidden; background: #050505; padding: clamp(48px, 7vw, 110px) 0 0; min-height: min(92vh, 900px); display: flex; flex-direction: column; justify-content: center; }
.em-hero-bg { position: absolute; right: 0; top: 46%; transform: translateY(-50%); width: min(58%, 1100px); aspect-ratio: 1672 / 941; }
.em-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.em-hero-bg::after { content: ""; position: absolute; inset: -1px; background: linear-gradient(90deg, #050505 0%, rgba(5,5,5,.5) 18%, rgba(5,5,5,0) 40%), linear-gradient(0deg, #050505 0%, transparent 18%), linear-gradient(180deg, #050505 0%, transparent 14%); }
.em-hero-inner { position: relative; z-index: 1; }
.em-hero-copy { max-width: 600px; }
.em-display { position: relative; display: inline-block; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .82; font-size: clamp(72px, 9.5vw, 160px); margin: 0 0 clamp(30px, 3.4vw, 48px); padding-bottom: .08em; }
/* Satin-stitch letters: fine diagonal thread lines + a sheen that sweeps across like light on thread */
.em-word { display: inline-block; padding-right: .06em;
  background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%), repeating-linear-gradient(-58deg, #f4f4f0 0 2px, #cfcfc8 2px 3px, #f4f4f0 3px 5px);
  background-size: 250% 100%, auto; background-position: 160% 0, 0 0; background-repeat: no-repeat, repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: em-sheen 5.5s ease-in-out 2.4s infinite; }
.em-word--y { background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.75) 50%, transparent 58%), repeating-linear-gradient(-58deg, #ffff00 0 2px, #d9d900 2px 3px, #ffff00 3px 5px);
  filter: drop-shadow(0 0 22px rgba(255,255,0,.28)); animation-delay: 2.7s; }
@keyframes em-sheen { 0% { background-position: 160% 0, 0 0; } 40%, 100% { background-position: -60% 0, 0 0; } }
.em-stitch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.em-st { stroke: var(--yellow); stroke-width: 5; stroke-linecap: round; fill: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.em-st-hi { fill: none; stroke: #fffbd0; stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.em-hole { fill: #000; stroke: rgba(255,255,255,.16); stroke-width: 1; }
.em-tail { fill: none; stroke: var(--yellow); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.em-trail { fill: none; stroke: var(--yellow); stroke-width: 1.6; opacity: .85; }
.em-needle { opacity: 0; }
.em-needle-shaft { stroke: #e9e9e9; stroke-width: 2.4; stroke-linecap: round; }
.em-needle-eye { fill: #050505; }
@media (prefers-reduced-motion: reduce) { .em-word { animation: none; } }
.em-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line); }
.em-stat { padding: 22px 0 26px; }
.em-stat + .em-stat { border-left: 1px solid var(--line); padding-left: clamp(16px, 3vw, 40px); }
.em-stat dt { font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--yellow); text-shadow: 0 0 30px rgba(255,255,0,.25); }
.em-stat dd { color: var(--muted); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }

/* Patch cards: dashed "merrow" stitch inside the edge */
.em-items { border-top: 1px solid var(--line); }
.em-items-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.em-patch { position: relative; background: #0b0b0b; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .3s, border-color .3s; }
.em-patch::after { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(255,255,0,.18); pointer-events: none; transition: border-color .3s; }
.em-patch:hover { transform: translateY(-4px); border-color: #2a2a2a; }
.em-patch:hover::after { border-color: var(--yellow); }
.em-patch-img { aspect-ratio: 4 / 4.2; overflow: hidden; margin: 14px 14px 0; }
.em-patch-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.em-patch:hover .em-patch-img img { transform: scale(1.05); }
.em-patch-body { padding: 18px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.em-patch h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; margin-bottom: 10px; }
.em-patch p { color: #c9c9c3; font-size: 15px; line-height: 1.55; flex: 1; }
.em-patch-link { position: relative; z-index: 1; margin-top: 16px; color: var(--yellow); font-weight: 600; font-size: 14px; }
.em-patch-link b { display: inline-block; transition: transform .2s; }
.em-patch-link:hover b { transform: translateX(4px); }

/* Watch it sew */
.em-sew { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; background: #060606; border-top: 1px solid var(--line); }
.em-sew-media { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.em-sew-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-sew-rec { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; }
.em-sew-rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff2a2a; animation: em-rec 1.4s ease-in-out infinite; }
@keyframes em-rec { 50% { opacity: .25; } }
.em-sew-copy { padding: clamp(32px, 5vw, 80px); }
.em-sew-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 4.6vw, 76px); line-height: .9; margin-bottom: 18px; }
.em-sew-copy p:not(.kicker) { color: #c9c9c3; line-height: 1.6; max-width: 46ch; }

/* One logo, any color */
.em-colors { border-top: 1px solid var(--line); }
.em-colors-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.em-colors-img { position: relative; }
.em-colors-img::after { content: ""; position: absolute; inset: -10px; border: 2px dashed rgba(255,255,0,.35); pointer-events: none; }
.em-colors-img img { width: 100%; display: block; }
.em-colors-copy p:not(.kicker) { color: #c9c9c3; line-height: 1.6; margin-top: 14px; max-width: 48ch; }
.em-swatches { display: flex; gap: 12px; margin-top: 24px; list-style: none; padding: 0; }
.em-swatches li { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #050505, 0 0 0 4px #333; background-image: repeating-linear-gradient(115deg, rgba(255,255,0,0) 0 3px, rgba(255,255,255,.18) 3px 4px); }

/* Gallery */
.em-gallery { border-top: 1px solid var(--line); background: #060606; }
.em-gallery-head { justify-content: space-between; }
.em-gallery-grid { columns: 3 260px; column-gap: 14px; }
.em-shot { position: relative; display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: none; cursor: zoom-in; break-inside: avoid; overflow: hidden; }
.em-shot img { width: 100%; display: block; transition: transform .6s, filter .4s; }
.em-shot:hover img, .em-shot:focus-visible img { transform: scale(1.04); filter: brightness(.7); }
.em-shot-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; text-align: left; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 18px; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); transform: translateY(100%); transition: transform .35s; }
.em-shot:hover .em-shot-cap, .em-shot:focus-visible .em-shot-cap { transform: none; }
.em-lightbox { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; border: 2px solid var(--yellow); background: #050505; padding: 0; max-width: min(calc(100vw - 48px), 1000px); max-height: calc(100vh - 48px); color: #fff; overflow: hidden; box-shadow: 0 0 60px rgba(255,255,0,.12); }
.em-lightbox[open] { animation: em-pop .25s ease-out; }
@keyframes em-pop { from { opacity: 0; transform: scale(.96); } }
.em-lightbox::backdrop { background: rgba(0,0,0,.85); }
.em-lightbox img { display: block; width: auto; height: auto; max-width: min(calc(100vw - 52px), 996px); max-height: calc(100vh - 110px); margin: 0 auto; }
.em-lightbox-cap { padding: 12px 18px; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; }
.em-lightbox-close { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: 0; background: var(--yellow); color: #000; font-size: 26px; line-height: 1; cursor: pointer; }

/* Stacy + match */
.em-crew { border-top: 1px solid var(--line); }
.em-crew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.em-stacy { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; background: #0b0b0b; border: 1px solid var(--line); padding: 22px; position: relative; }
.em-stacy::after { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(255,255,0,.18); pointer-events: none; }
.em-stacy img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.em-stacy-name { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 40px; line-height: .95; margin-bottom: 10px; }
.em-stacy-name span { display: block; font-size: 16px; letter-spacing: .1em; color: var(--yellow); margin-top: 4px; }
.em-stacy p:not(.kicker) { color: #c9c9c3; margin-bottom: 16px; }
.em-match { background: repeating-linear-gradient(135deg, var(--yellow) 0 22px, #f1f100 22px 44px); color: #000; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.em-match .kicker { color: #000; }
.em-match-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 3.4vw, 52px); line-height: .92; margin-bottom: 14px; }
.em-match p:not(.kicker) { font-weight: 500; line-height: 1.55; max-width: 46ch; }
.em-match-btn { align-self: flex-start; margin-top: 20px; background: #000; color: var(--yellow); padding: 14px 22px; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; transform: skewX(-10deg); transition: transform .2s; }
.em-match-btn > * { display: inline-block; transform: skewX(10deg); }
.em-match-btn:hover { transform: skewX(-10deg) translateY(-2px); }

/* Final CTA image */
.em-final-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; opacity: .75;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }

@media (max-width: 1080px) { .em-items-grid { grid-template-columns: repeat(2, 1fr); } .em-crew-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .em-sew, .em-colors-grid { grid-template-columns: 1fr; }
  .em-hero { min-height: 0; }
  .em-hero-bg { inset: 0; width: 100%; top: 0; transform: none; aspect-ratio: auto; }
  .em-hero-bg img { object-position: 70% 30%; opacity: .55; }
  .em-hero-bg::after { background: linear-gradient(0deg, #050505 0%, rgba(5,5,5,.75) 60%, rgba(5,5,5,.45) 100%); }
}
@media (max-width: 560px) {
  .em-items-grid { grid-template-columns: 1fr; }
  .em-stats { grid-template-columns: repeat(3, 1fr); }
  .em-stat dd { font-size: 11px; }
  .em-stacy { grid-template-columns: 110px 1fr; gap: 16px; }
  .em-stacy-name { font-size: 30px; }
  .em-final-media img { -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0%, #000 25%, #000 75%, transparent 100%); }
}

/* ================= Screen Printing page ================= */
.sp-hero-media { position: absolute; right: 0; top: 46%; transform: translateY(-50%); width: min(58%, 1100px); aspect-ratio: 16 / 9; }
.sp-hero-media::after { content: ""; position: absolute; inset: -1px; background: linear-gradient(90deg, #050505 0%, rgba(5,5,5,.55) 20%, rgba(5,5,5,0) 45%), linear-gradient(0deg, #050505 0%, transparent 20%), linear-gradient(180deg, #050505 0%, transparent 16%); }
.sp-hero-video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.05); }
.sp-display { position: relative; display: inline-block; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .82; font-size: clamp(72px, 9.5vw, 160px); margin: 0 0 clamp(22px, 2.4vw, 34px); cursor: default; }
.sp-ink { display: block; padding-right: .06em; }
.sp-ink--outline { color: transparent; -webkit-text-stroke: 2px rgba(244,244,240,.55); }
.sp-ink--outline .sp-y { -webkit-text-stroke-color: rgba(255,255,0,.6); }
.sp-ink--fill { position: absolute; inset: 0; color: #f4f4f0; }
.sp-ink--fill .sp-y { color: var(--yellow); text-shadow: 0 0 40px rgba(255,255,0,.3); }
/* the squeegee: a rubber blade in a metal holder riding the ink edge */
.sp-blade { position: absolute; top: -6%; bottom: -6%; left: -2%; width: 14px; opacity: 0; pointer-events: none; transform: skewX(-11deg) translateX(-50%);
  background: linear-gradient(90deg, #8a8a8a 0 5px, #d9d9d9 5px 7px, #6b6b6b 7px 9px, var(--yellow) 9px 14px); box-shadow: 6px 0 18px rgba(255,255,0,.35); }
.sp-items-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sp-card { position: relative; background: #0b0b0b; border: 1px solid var(--line); padding: 26px 24px 24px; display: flex; flex-direction: column; overflow: hidden; transition: transform .3s, border-color .3s; }
.sp-card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: var(--yellow); transition: width .4s ease; }
.sp-card:hover { transform: translateY(-4px); border-color: #2a2a2a; }
.sp-card:hover::before { width: 100%; }
.sp-card { padding-top: 14px; }
.sp-card-img { aspect-ratio: 4 / 4.2; overflow: hidden; margin: 0 -10px 18px; }
.sp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.sp-card:hover .sp-card-img img { transform: scale(1.05); }
.sp-card-n { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,0,.6); }
.sp-card-inks { display: flex; gap: 6px; list-style: none; padding: 0; margin: 18px 0 16px; }
.sp-card-inks li { width: 28px; height: 10px; background: var(--c); transform: skewX(-12deg); transition: width .3s; }
.sp-card:hover .sp-card-inks li { width: 40px; }
.sp-card h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; margin-bottom: 10px; }
.sp-card p { color: #c9c9c3; font-size: 15px; line-height: 1.55; flex: 1; }
.sp-detail { border-top: 1px solid var(--line); }
.sp-detail-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sp-detail-copy { position: relative; }
.sp-detail-copy p:not(.kicker) { color: #c9c9c3; line-height: 1.6; margin-top: 14px; max-width: 48ch; position: relative; z-index: 1; }
.sp-halftone { height: 120px; margin-top: 26px; background-image: radial-gradient(circle, var(--yellow) 0 var(--r, 2px), transparent calc(var(--r, 2px) + .5px)); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); opacity: .8; }
.sp-presses { list-style: none; padding: 0; display: grid; gap: 14px; }
.sp-press { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; background: #0b0b0b; border: 1px solid var(--line); padding: 14px; }
.sp-press img, .sp-press-ph { width: 110px; height: 86px; object-fit: cover; display: block; }
.sp-press-ph { background: repeating-linear-gradient(135deg, #141414 0 10px, #0e0e0e 10px 20px); }
.sp-press-year { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 28px; color: var(--yellow); line-height: 1; }
.sp-press h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 20px; margin: 4px 0; }
.sp-press p { color: #c9c9c3; font-size: 14px; line-height: 1.5; }
.sp-match-links { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1080px) { .sp-items-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .sp-detail-grid { grid-template-columns: 1fr; }
  .sp-hero-media { inset: 0; width: 100%; top: 0; transform: none; aspect-ratio: auto; opacity: .45; }
  .sp-hero-media::after { background: linear-gradient(0deg, #050505 0%, rgba(5,5,5,.7) 60%, rgba(5,5,5,.4) 100%); }
}
@media (max-width: 560px) { .sp-items-grid { grid-template-columns: 1fr; } .sp-press { grid-template-columns: 84px 1fr; } .sp-press img, .sp-press-ph { width: 84px; height: 70px; } }

/* Screen printing hero: pinned stage, scroll scrubs the box-packing video */
.sp-scroll { position: relative; height: 260vh; background: #050505; margin-top: calc(-1 * var(--nav-h)); } /* stage tucks under the fixed nav so it fills the screen */
.sp-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
/* video sits on the right; its left edge fades into the black so the tape slides in out of the dark */
.sp-scrub { position: absolute; right: -2%; top: 50%; transform: translateY(-46%); width: min(70%, 1500px); aspect-ratio: 16 / 9; height: auto; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 92%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 92%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.sp-stage-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,5,5,.85) 0%, rgba(5,5,5,.35) 30%, rgba(5,5,5,0) 44%); }
.sp-stage-inner { position: relative; z-index: 1; padding-top: var(--nav-h, 80px); }
.sp-hint { position: absolute; left: 66%; bottom: 34px; transform: translateX(-50%); z-index: 1; display: flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: var(--display); font-style: italic; font-weight: 800; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: #fff; transition: opacity .4s, transform .4s; animation: sp-hint-in .6s ease-out 2.2s backwards; }
@keyframes sp-hint-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.sp-hint span { border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.sp-hint-mouse { position: relative; width: 22px; height: 34px; border: 2px solid var(--yellow); border-radius: 12px; flex: none; }
.sp-hint-mouse i { position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--yellow); animation: sp-wheel 1.5s ease-in-out infinite; }
@keyframes sp-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.sp-scroll.is-moving .sp-hint { opacity: 0; transform: translate(-50%, 10px); }
@media (max-width: 860px) { .sp-hint { display: none; } }
.sp-stats-band { background: #050505; }
.sp-stats-band .em-stats { margin-top: 0; }
@media (max-width: 860px) {
  .sp-scroll { height: 230vh; }
  .sp-scrub { right: 0; left: 0; top: calc(var(--nav-h) + 8px); transform: none; width: 100%; aspect-ratio: 1200 / 1080; object-fit: cover;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%); mask-image: linear-gradient(0deg, transparent 0%, #000 22%); }
  .sp-stage { align-items: flex-end; }
  .sp-stage-shade { background: linear-gradient(0deg, #050505 0%, rgba(5,5,5,.9) 34%, rgba(5,5,5,0) 52%); }
  .sp-stage-inner { padding-bottom: 70px; }
  .sp-stage .vw-lead { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sp-scroll { height: auto; } .sp-stage { position: relative; min-height: 100vh; } .sp-hint { display: none; } }
@media (min-width: 861px) and (max-width: 1240px) {
  .sp-scrub { width: 64%; right: -9%; }
  .sp-stage .em-hero-copy { max-width: 46%; }
  .sp-hint { left: 70%; }
}

/* ================= Homepage: philosophy + mission ================= */
.philo { border-top: 1px solid var(--line); background: radial-gradient(60% 70% at 100% 0%, rgba(255,255,0,.06), transparent 70%), #050505; }
.philo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.philo-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(42px, 5.2vw, 84px); line-height: .9; margin: 6px 0 22px; }
.philo-lead { color: #c9c9c3; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; max-width: 52ch; }
.philo-photo { margin: 28px 0 0; position: relative; max-width: 420px; transform: rotate(-2deg); }
.philo-photo img { width: 100%; display: block; border: 8px solid #f4f4f0; border-bottom-width: 44px; box-shadow: 0 20px 50px rgba(0,0,0,.6); filter: saturate(.9); }
.philo-photo figcaption { position: absolute; left: 14px; right: 14px; bottom: 10px; font-family: Yellowtail, cursive; font-size: 24px; color: #111; }
.philo-mission { margin: 0 0 28px; padding: 28px 30px; background: var(--yellow); color: #000; position: relative; transform: skewX(-4deg); }
.philo-mission > * { transform: skewX(4deg); }
.philo-mission-label { font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; margin-bottom: 10px; }
.philo-mission-text { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.05; }
.philo-mission footer { margin-top: 14px; font-family: Yellowtail, cursive; font-size: 24px; }
.philo-list { list-style: none; padding: 0; display: grid; gap: 2px; }
.philo-item { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.philo-n { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 40px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--yellow); }
.philo-item h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1; margin-bottom: 6px; }
.philo-item p { color: #c9c9c3; line-height: 1.6; font-size: 15px; }
@media (max-width: 900px) { .philo-grid { grid-template-columns: 1fr; } .philo-photo { max-width: 320px; } }

/* ================= Service Areas ================= */
.sa-title { max-width: 20ch; }
.sa-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 20px; }
.sa-meta span { border: 1px solid #2a2a2a; background: rgba(0,0,0,.5); padding: 6px 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.sa-meta span:first-child { border-color: var(--yellow); color: var(--yellow); }
.sa-intro { max-width: 62ch; color: #d4d4ce; line-height: 1.7; font-size: clamp(16px, 1.2vw, 18px); }
.sa-intro p + p { margin-top: 12px; }
.sa-hero .vw-actions { margin-top: 24px; }
.sa-services { border-top: 1px solid var(--line); }
.sa-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sa-svc { color: inherit; text-decoration: none; }
.sa-why { border-top: 1px solid var(--line); background: #060606; }
.sa-why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sa-why-lead { color: #c9c9c3; line-height: 1.7; margin-top: 16px; max-width: 48ch; }
.sa-nearby { border-top: 1px solid var(--line); padding-block: clamp(32px, 4vw, 48px); }
.sa-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sa-chips a { display: inline-block; border: 1px solid #2a2a2a; padding: 9px 16px; color: var(--text); font-weight: 600; transform: skewX(-10deg); transition: background .2s, color .2s, border-color .2s; }
.sa-chips a:hover { background: var(--yellow); color: #000; border-color: var(--yellow); }
.sa-archive-lead { color: #d4d4ce; max-width: 56ch; margin-top: 14px; line-height: 1.6; }
.sa-town-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sa-town { position: relative; display: grid; gap: 4px; padding: 22px 22px 24px; background: #0b0b0b; border: 1px solid var(--line); color: inherit; transition: border-color .25s, transform .25s; }
.sa-town:hover { border-color: var(--yellow); transform: translateY(-3px); }
.sa-town-miles { font-family: var(--display); font-style: italic; font-weight: 800; color: var(--yellow); font-size: 20px; }
.sa-town-name { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; }
.sa-town-county { color: var(--muted); font-size: 14px; }
.sa-town b { position: absolute; right: 20px; top: 22px; color: var(--yellow); transition: transform .2s; }
.sa-town:hover b { transform: translateX(4px); }
.footer-areas ul { list-style: none; padding: 0; columns: 2; column-gap: 18px; }
.footer-areas li { margin-bottom: 6px; }
.footer-areas a { color: var(--muted); }
.footer-areas a:hover, .footer-areas h2 a:hover { color: var(--yellow); }
.footer-areas h2 a { color: inherit; }
@media (max-width: 900px) { .sa-svc-grid, .sa-why-grid { grid-template-columns: 1fr; } }

/* ================= Work project: related links ================= */
.work-related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; gap: 18px; justify-items: start; }
.work-related-title { font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(24px, 3vw, 34px); text-transform: uppercase; }
.work-related-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.work-related-links a { color: var(--yellow); text-decoration: none; font-weight: 600; }
.work-related-links a:hover { text-decoration: underline; }
.work-related-areas { color: var(--muted); font-size: 15px; }
.work-related-areas a { color: var(--text); }

/* ================= Sticky call / quote bar (phones) ================= */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1.4fr;
    border-top: 1px solid var(--line); background: var(--ink); padding-bottom: env(safe-area-inset-bottom);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .mbar a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px;
    font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  }
  .mbar-call { color: var(--text); }
  .mbar-quote { background: var(--yellow); color: #000; }
  /* On the homepage the bar waits for the scroll hero to finish (the same moment the menu appears) */
  body.has-hero:not(.nav-on) .mbar { transform: translateY(110%); }
  body:has(.mbar) .site-footer { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body:has(.mnav.open) .mbar { transform: translateY(110%); }
}

/* ================= Reduced motion: no smooth-scroll or long transitions anywhere ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ================= Signs & Decals page ================= */
/* hero: the sign "powers on" with a quick flicker */
.sg-hero-bg img { animation: sg-power 2.2s steps(1, end) .4s both; }
@keyframes sg-power {
  0% { filter: brightness(.12) saturate(.4); } 12% { filter: brightness(1); } 16% { filter: brightness(.15) saturate(.4); }
  24% { filter: brightness(1.05); } 27% { filter: brightness(.3) saturate(.6); } 34%, 100% { filter: brightness(1); }
}
.sg-display { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .82; font-size: clamp(72px, 9.5vw, 160px); margin: 0 0 clamp(22px, 2.4vw, 34px); }
.sg-display span { display: inline-block; }
.sg-y { color: var(--yellow); text-shadow: 0 0 24px rgba(255,255,0,.55), 0 0 60px rgba(255,200,0,.35); animation: sg-glow 2.2s steps(1, end) .4s both; }
@keyframes sg-glow { 0% { color: #3a3a1a; text-shadow: none; } 12% { color: var(--yellow); } 16% { color: #3a3a1a; text-shadow: none; } 24% { color: var(--yellow); } 27% { color: #55551f; text-shadow: none; } 34%, 100% { color: var(--yellow); } }
@media (prefers-reduced-motion: reduce) { .sg-hero-bg img, .sg-y { animation: none; } }

.sg-make { border-top: 1px solid var(--line); }
.sg-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sg-group { position: relative; background: #0b0b0b; border: 1px solid var(--line); padding: 28px 26px 26px; display: flex; flex-direction: column; transition: border-color .3s, transform .3s; }
.sg-group::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: var(--yellow); box-shadow: 0 0 16px rgba(255,255,0,.5); transition: width .45s ease; }
.sg-group:hover { border-color: #2a2a2a; transform: translateY(-4px); }
.sg-group:hover::before { width: 100%; }
.sg-group-n { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,0,.6); }
.sg-group h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; margin: 14px 0 6px; }
.sg-group-lead { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.sg-group ul { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; }
.sg-group li { padding: 11px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.sg-group li b { font-weight: 700; color: #fff; }
.sg-group li span { color: #a9a9a2; font-size: 14px; line-height: 1.45; }

.sg-walls { border-top: 1px solid var(--line); }
.sg-walls-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sg-walls-copy p:not(.kicker) { color: #c9c9c3; line-height: 1.65; margin-top: 14px; max-width: 48ch; }
.sg-walls-copy .cta { margin-top: 24px; }
.sg-walls-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sg-shot { margin: 0; }
.sg-shot img { aspect-ratio: 3 / 4; object-fit: cover; }
.sg-shot--1 img { aspect-ratio: 4 / 3; }
.sg-shot--1 { grid-column: span 2; order: -1; }

.sg-decals { position: relative; overflow: hidden; background: #050505; border-top: 1px solid var(--line); min-height: 560px; display: flex; align-items: center; scroll-margin-top: var(--nav-h); }
.sg-decals-media { position: absolute; inset: 0 0 0 auto; width: min(66%, 1100px); }
.sg-decals-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.sg-decals-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #050505 0%, rgba(5,5,5,.5) 24%, rgba(5,5,5,0) 50%); }
.sg-decals-inner { position: relative; z-index: 1; padding-block: clamp(64px, 8vw, 110px); }
.sg-decals-copy { max-width: 520px; }
.sg-decals-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(54px, 7vw, 116px); line-height: .85; margin-bottom: 18px; }
.sg-decals-title span { color: var(--yellow); }
.sg-decals-copy > p:not(.kicker) { color: #c9c9c3; line-height: 1.65; }
.sg-ticks { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 10px; }
.sg-ticks li { position: relative; padding-left: 30px; font-weight: 600; }
.sg-ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; background: var(--yellow); transform: skewX(-12deg); }
@media (max-width: 1080px) { .sg-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .sg-walls-grid { grid-template-columns: 1fr; }
  .sg-decals-media { inset: 0; width: 100%; opacity: .35; }
  .sg-decals-media::after { background: linear-gradient(0deg, #050505 10%, rgba(5,5,5,.4)); }
}
@media (max-width: 620px) { .sg-groups { grid-template-columns: 1fr; } }

/* ================= Wall Wraps page ================= */
.ww-scroll { position: relative; height: calc(var(--beats) * 100vh + 60vh); background: #050505; margin-top: calc(-1 * var(--nav-h)); }
.ww-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ww-beat { position: absolute; inset: 0; display: flex; align-items: center; padding-top: var(--nav-h); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.ww-beat.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.ww-beat-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ww-copy { transform: translateY(16px); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ww-beat.is-active .ww-copy { transform: none; }
.ww-heading { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(42px, 5.4vw, 92px); line-height: .9; margin: 10px 0 18px; }
.ww-beat:first-child .ww-heading { margin-top: 14px; }
.ww-body { color: #c9c9c3; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; max-width: 46ch; }
.ww-copy .vw-actions { margin-top: 26px; }
.ww-frame { position: relative; margin: 0; justify-self: center; height: min(74vh, 760px); aspect-ratio: 3 / 4; max-width: 100%; border: 2px solid var(--yellow); box-shadow: 0 0 60px rgba(255,255,0,.12), 0 30px 80px rgba(0,0,0,.6); background: #111; }
.ww-beat[data-beat="2"] .ww-frame { aspect-ratio: 4 / 3; height: auto; width: 100%; }
.ww-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ww-frame figcaption { position: absolute; left: -2px; bottom: -2px; background: var(--yellow); color: #000; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 14px; padding: 7px 12px; }
.ww-frame figcaption span { opacity: .6; margin-right: 4px; }
.ww-dots { position: absolute; right: clamp(14px, 2vw, 28px); top: 50%; transform: translateY(-50%); list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; z-index: 2; }
.ww-dots li { width: 6px; height: 22px; background: #2a2a2a; transform: skewX(-12deg); transition: background .3s, height .3s; }
.ww-dots li.is-on { background: var(--yellow); height: 38px; box-shadow: 0 0 14px rgba(255,255,0,.5); }
.ww-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 12px; white-space: nowrap; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: #fff; transition: opacity .4s; }
.ww-scroll.is-moving .ww-hint { opacity: 0; }
.ww-who { border-top: 1px solid var(--line); }
.ww-who-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ww-who-card { background: #0b0b0b; border: 1px solid var(--line); padding: 22px 20px 24px; transition: border-color .3s, transform .3s; }
.ww-who-card:hover { border-color: var(--yellow); transform: translateY(-3px); }
.ww-who-card h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1; margin: 12px 0 8px; }
.ww-who-card p { color: #a9a9a2; font-size: 14px; line-height: 1.5; }
.ww-options { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ww-options li { border: 1px solid #2a2a2a; padding: 9px 16px; font-weight: 600; transform: skewX(-10deg); }
.ww-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; align-items: stretch; }
.ww-gallery .em-shot { margin: 0; }
.ww-gallery img { height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 1080px) { .ww-who-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .ww-beat { align-items: flex-start; }
  .ww-beat-grid { grid-template-columns: 1fr; gap: 18px; }
  .ww-frame { order: -1; height: 44vh; margin-top: 12px; }
  .ww-beat[data-beat="2"] .ww-frame { height: auto; width: 100%; }
  .ww-heading { font-size: clamp(32px, 9vw, 46px); }
  .ww-body { font-size: 15px; }
  .ww-hint, .ww-dots { display: none; }
  .ww-who-grid { grid-template-columns: 1fr 1fr; }
  .ww-gallery { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ww-scroll { height: auto; } .ww-stage { position: relative; height: auto; } .ww-beat { position: relative; opacity: 1; visibility: visible; padding-block: 60px; } }
.ww-walk { position: relative; margin: 0 0 14px; break-inside: avoid; border: 2px solid var(--yellow); }
.ww-walk-video { width: 100%; display: block; aspect-ratio: 9 / 16; object-fit: cover; }
.ww-walk figcaption { position: absolute; left: 0; bottom: 0; background: var(--yellow); color: #000; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 14px; padding: 7px 12px; display: flex; align-items: center; gap: 8px; }
.ww-walk figcaption i { width: 9px; height: 9px; border-radius: 50%; background: #e3262e; animation: em-rec 1.4s ease-in-out infinite; }
.ww-acrylic { border-top: 1px solid var(--line); }
.ww-acrylic-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ww-acrylic-copy p:not(.kicker) { color: #c9c9c3; line-height: 1.65; margin: 14px 0 24px; max-width: 48ch; }
.ww-acrylic-shots { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ww-acrylic-shots .em-shot { margin: 0; }
.ww-acrylic-shots img { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 860px) { .ww-acrylic-grid { grid-template-columns: 1fr; } }

/* crew profiles turned off: cards are display-only */
.crew-card.no-profiles, .crew-feature.no-profiles .crew-feature-photo { cursor: default; }

/* Wall Wraps hero: subtle black & white loop of walls getting wrapped, faded to black */
.ww-hero { min-height: min(92vh, 900px); }
.ww-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.ww-hero-video { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ww-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #050505 0%, rgba(5,5,5,.88) 30%, rgba(5,5,5,.45) 62%, rgba(5,5,5,.6) 100%), linear-gradient(0deg, #050505 0%, transparent 30%), linear-gradient(180deg, #050505 0%, transparent 18%); }
.ww-display { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .82; font-size: clamp(72px, 9.5vw, 160px); margin: 0 0 clamp(22px, 2.4vw, 34px); }
.ww-display span { color: var(--yellow); text-shadow: 0 0 40px rgba(255,255,0,.3); }
.ww-points { border-top: 1px solid var(--line); }
.ww-points-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ww-point { background: #0b0b0b; border: 1px solid var(--line); padding: 24px 22px 26px; transition: border-color .3s, transform .3s; }
.ww-point:hover { border-color: var(--yellow); transform: translateY(-3px); }
.ww-point h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1; margin: 12px 0 10px; }
.ww-point p { color: #a9a9a2; font-size: 14px; line-height: 1.55; }
@media (max-width: 1080px) { .ww-points-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ww-points-grid { grid-template-columns: 1fr; } .ww-hero-video { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .ww-hero-video { display: none; } .ww-hero-bg { background: url('../media/wallwraps/hero-bg-poster.jpg') center / cover; opacity: .5; } }

/* "Coming soon" tag on the Shop button (remove the badge span in header.php when the shop opens) */
.shop-btn { position: relative; overflow: visible; }
.shop-btn > .soon-badge { position: absolute; top: -11px; right: -14px; transform: skewX(12deg) rotate(6deg); background: #050505; color: var(--yellow); border: 1.5px solid var(--yellow); font-family: Barlow, system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; padding: 4px 6px; white-space: nowrap; box-shadow: 0 0 10px rgba(255,255,0,.35); pointer-events: none; }

/* ================= OBPrint plugin, styled for 1CG ================= */
body .obp {
  --obp-accent: var(--yellow); --obp-accent-text: #000; --obp-bg: #0b0b0b; --obp-panel: #121212; --obp-text: var(--text);
  --obp-muted: var(--muted); --obp-line: #262626; --obp-radius: 0px; --obp-display: var(--display); --obp-danger: #ff6b6b;
}
.obp { margin-inline: auto; }
.obp-title, .obp-price-total, .obp-track-num { font-style: italic; font-weight: 800; text-transform: uppercase; }
.obp-btn { font-family: var(--display); font-style: italic; text-transform: uppercase; letter-spacing: .04em; transform: skewX(-10deg); }
.obp-btn:hover { transform: skewX(-10deg) translateY(-1px); box-shadow: 0 0 22px rgba(255,255,0,.4); filter: none; }
.obp-btn--ghost { border-color: #3a3a3a; }
.obp-chip span { border-radius: 0; transform: skewX(-10deg); }
.obp-price { border-left: 4px solid var(--yellow); }
.obp-portal-frame iframe { border: 2px solid var(--yellow); }

/* ================= Vehicle Graphics page ================= */
.vg-hero-shot { margin: 0; cursor: default; }
.vg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vg-col { background: #0b0b0b; border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; align-items: flex-start; }
.vg-col--graphics { border: 2px solid var(--yellow); box-shadow: 0 0 40px rgba(255,255,0,.08); }
.vg-col h3 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3vw, 44px); line-height: 1; }
.vg-col--graphics h3 { color: var(--yellow); }
.vg-col-lead { color: var(--muted); margin-top: 6px; }
.vg-col .sg-ticks { flex: 1; }
.vg-col .cta { margin-top: 0; }
@media (max-width: 760px) { .vg-compare { grid-template-columns: 1fr; } }

/* ================= Banners page ================= */
.bn-hero { padding-bottom: 0; }
.bn-stage { position: relative; padding: 70px 4% 30px; perspective: 900px; }
.bn-banner {
  position: relative; aspect-ratio: 2 / 1; background: var(--yellow); color: #000; display: grid; place-items: center; align-content: center; gap: .3em; text-align: center;
  box-shadow: inset 0 0 0 10px #f2f200, 0 30px 60px rgba(0,0,0,.6), 0 0 80px rgba(255,255,0,.15);
  transform-origin: 50% -60px; animation: bn-sway 6s ease-in-out infinite;
}
.bn-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%); pointer-events: none; }
@keyframes bn-sway { 0%, 100% { transform: rotateY(-4deg) rotateZ(-.6deg); } 50% { transform: rotateY(4deg) rotateZ(.6deg); } }
.bn-grommet { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #050505; box-shadow: 0 0 0 4px #b9b9b9, 0 0 0 5px #777; }
.bn-grommet:nth-of-type(1) { top: 14px; left: 14px; } .bn-grommet:nth-of-type(2) { top: 14px; right: 14px; }
.bn-grommet:nth-of-type(3) { bottom: 14px; left: 14px; } .bn-grommet:nth-of-type(4) { bottom: 14px; right: 14px; }
.bn-cord { position: absolute; top: -70px; width: 2px; height: 92px; background: linear-gradient(#222, #555); }
.bn-cord--l { left: 21px; transform: rotate(-14deg); transform-origin: bottom; } .bn-cord--r { right: 21px; transform: rotate(14deg); transform-origin: bottom; }
.bn-logo { font-family: Yellowtail, cursive; font-size: clamp(18px, 1.8vw, 28px); line-height: 1; }
.bn-words { display: grid; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 5vw, 86px); line-height: .9; }
.bn-words b { grid-area: 1 / 1; opacity: 0; animation: bn-word 12s infinite; }
.bn-words b:nth-child(2) { animation-delay: 3s; } .bn-words b:nth-child(3) { animation-delay: 6s; } .bn-words b:nth-child(4) { animation-delay: 9s; }
@keyframes bn-word { 0% { opacity: 0; transform: translateY(14px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-14px); } }
.bn-phone { font-weight: 700; letter-spacing: .12em; font-size: clamp(13px, 1.1vw, 17px); }
@media (prefers-reduced-motion: reduce) { .bn-banner { animation: none; } .bn-words b { animation: none; } .bn-words b:first-child { opacity: 1; } }
@media (max-width: 960px) { .bn-stage { padding: 80px 8% 10px; } }

.bn-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; }
.bn-size { display: grid; gap: 6px; background: #0b0b0b; border: 1px solid var(--line); padding: 26px; text-decoration: none; color: inherit; transition: border-color .3s, transform .3s; height: 100%; align-content: end; }
.bn-size:hover, .bn-size:focus-visible { border-color: var(--yellow); transform: translateY(-4px); outline: none; }
.bn-size-box { display: grid; place-items: center; width: calc(var(--w) / 8 * 100%); aspect-ratio: var(--w) / var(--h); background: var(--yellow); color: #000; margin-bottom: 14px; box-shadow: inset 0 0 0 5px #f2f200; }
.bn-size-box b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(18px, 1.8vw, 28px); }
.bn-size-title { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; }
.bn-size-text { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .bn-sizes { grid-template-columns: 1fr; } }

.bn-final { background: radial-gradient(50% 90% at 85% 50%, rgba(255,255,0,.12), transparent 70%), #050505; }