/* ==========================================================================
   Agusticks — "Machine Dark Modern" theme
   High-contrast modern engineering. Predominantly white/grey, airy body,
   bookended by a dark top bar and dark footer, with bold near-black "slabs"
   interspersed. Space Grotesk display + monospace technical detailing, tick
   marks, corner brackets and precise machine linework.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* palette — achromatic, high contrast */
  --ink: #14161a;
  --ink-2: #3a3f47;
  --ink-soft: #6c727b;
  --line: rgba(20,22,26,.16);
  --line-soft: rgba(20,22,26,.08);
  --bg: #ffffff;
  --grey: #f1f3f5;
  --grey-2: #e5e8ec;
  --dark: #0e1014;
  --dark-2: #181b21;
  --dark-line: rgba(255,255,255,.14);

  /* semantic tokens consumed by base.css */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --accent: #14161a;          /* black buttons on light */
  --accent-ink: #ffffff;
  --accent-strong: #000000;
  --focus: #14161a;

  --hairline: var(--line);
  --card-bg: #ffffff;
  --header-bg: var(--dark);

  --footer-bg: var(--dark);
  --footer-ink: #aab0b8;

  --radius-btn: 3px;
  --radius-card: 4px;

  --shadow-btn: none;
  --shadow-btn-hover: none;
  --shadow-card: none;
  --shadow-card-hover: 0 16px 36px rgba(20,22,26,.12);
}

body { background: var(--bg); }

/* Typography — geometric, mechanical */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: .98; font-weight: 700; }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
h3 { font-size: 1.2rem; }
p { color: var(--ink-2); }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.35rem); color: var(--ink-soft); font-weight: 400; }

/* mono technical labels */
.mono, .eyebrow, .index-num { font-family: var(--font-mono); }
.eyebrow {
  color: var(--ink); font-weight: 700; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content: "//"; color: var(--ink-soft); font-weight: 700; }
.index-num { color: var(--ink-soft); font-size: .8rem; letter-spacing: .02em; }

/* Buttons — squared, mechanical */
.btn { font-family: var(--font-head); border-radius: var(--radius-btn); font-weight: 600; letter-spacing: .01em; padding: .85rem 1.5rem; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: none; }
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--primary:hover { background: #000; }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Header — dark bar */
.site-header { background: var(--dark); border-bottom: 1px solid var(--dark-line); }
.nav { min-height: 70px; }
.site-header .brand { color: #fff; font-family: var(--font-head); font-weight: 700; }
.site-header .brand .brand-mark { background: #fff; color: var(--dark); border-radius: 3px; box-shadow: none; font-family: var(--font-head); }
.site-header .nav-links a { color: #b8bdc5; font-weight: 500; }
.site-header .nav-links a:hover, .site-header .nav-links a[aria-current="page"] { color: #fff; }
.site-header .nav-links a::after { background: #fff; height: 2px; }
.lang-switch { border-color: rgba(255,255,255,.22); border-radius: 3px; }
.lang-switch a { color: #cfd3da; }
.lang-switch a[aria-current="true"] { background: #fff; color: var(--dark); }
.nav-toggle { color: #fff; }
@media (max-width: 860px) {
  .nav-links { background: var(--dark-2); }
  .nav-links a { color: #cfd3da; border-bottom-color: rgba(255,255,255,.08); }
}

/* corner-bracket utility (engineering frame) */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--ink); }
.bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracket::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* tick rule */
.tick-rule { height: 18px; background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 24px); border-bottom: 1px solid var(--line); }

/* ---- HERO (light) -------------------------------------------------------- */
.md-hero { position: relative; padding: clamp(2.5rem,5vw,4.5rem) 0 0; background:
  linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 100% 32px,
  linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 32px 100%, #fff; }
.md-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.md-hero h1 { margin: 1.1rem 0 1.2rem; }
.md-hero .lead { max-width: 44ch; }
.md-hero .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-figure { position: relative; }
.hero-figure svg { width: 100%; height: auto; display: block; }
.hero-figure .fig-label { position: absolute; top: 0; right: 0; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft); letter-spacing: .04em; }
@media (max-width: 900px) { .md-hero-grid { grid-template-columns: 1fr; } .hero-figure { order: -1; max-width: 520px; } }

/* hero spec bar (mono readout, light) */
.md-specbar { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 1fr; border: 1px solid var(--line); border-radius: 4px; margin-top: 2.5rem; background: #fff; }
.md-specbar .cell { padding: 1rem 1.1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.md-specbar .cell:nth-child(3n) { border-right: 0; }
.md-specbar .cell:nth-last-child(-n+3) { border-bottom: 0; }
.md-specbar .k { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.md-specbar .v { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
.md-specbar .cell--cta { text-decoration: none; color: inherit; transition: background .15s ease; }
.md-specbar .cell--cta:hover { background: var(--paper, #f6f6f4); }
.md-specbar .cell--cta .v { letter-spacing: .15em; }
@media (max-width: 640px) {
  .md-specbar { grid-template-columns: repeat(2,1fr); }
  .md-specbar .cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .md-specbar .cell:nth-child(2n) { border-right: 0; }
  .md-specbar .cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Home stats: fixed 3-up so the six cells form a clean 3×2 block */
.home-stats { grid-template-columns: repeat(3,1fr); grid-auto-rows: 1fr; }
@media (max-width: 760px) { .home-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .home-stats { grid-template-columns: 1fr; } }
.stat--cta { text-decoration: none; color: inherit; transition: opacity .15s ease; }
.stat--cta:hover { opacity: .7; }
.stat--cta .num { letter-spacing: .12em; }

/* Brand strip — continuous one-way panning marquee ------------------------ */
/* Two identical copies of /imgs/brand-strip.jpg sit side by side; translating
   the track by -50% advances exactly one strip width, so the loop is seamless.
   Regenerate the strip with: python tools/build_brand_strip.py */
.brandstrip { padding: 6rem 0 2.6rem; background: #fff; border-block: 1px solid var(--line); overflow: hidden; }
.brandstrip-tag { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); }
.brandstrip-viewport { margin-top: 1rem; width: 100%; overflow: hidden; }
.brandstrip-track { display: flex; width: max-content; will-change: transform; animation: brandstrip-pan 400s linear infinite; }
.brandstrip-track:hover { animation-play-state: paused; }
.brandstrip-img { height: 152px; width: auto; display: block; }
@keyframes brandstrip-pan { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .brandstrip-img { height: 106px; } }
@media (prefers-reduced-motion: reduce) { .brandstrip-track { animation: none; } }

/* machine line draw-on */
.draw { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.5s cubic-bezier(.65,0,.35,1) forwards; }
.draw.d1{animation-delay:.05s} .draw.d2{animation-delay:.3s} .draw.d3{animation-delay:.55s} .draw.d4{animation-delay:.8s} .draw.d5{animation-delay:1s}
.fig-fill { fill: var(--grey-2); }
.fig-anno { animation: fadeIn .5s ease forwards; opacity: 0; animation-delay: 1.3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .draw { stroke-dashoffset: 0; animation: none; } .fig-anno { opacity: 1; animation: none; } }

/* ---- sections ------------------------------------------------------------ */
.section { padding: clamp(3.5rem,7vw,7rem) 0; }
.section--grey { background: var(--grey); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-head { max-width: 660px; margin-bottom: clamp(2rem,4vw,3.25rem); }
.section-head .eyebrow { margin-bottom: 1rem; }

/* dark slab */
.section--dark { background: var(--dark); color: #fff; position: relative; }
.section--dark::before, .section--dark::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 24px); }
.section--dark::before { top: 0; } .section--dark::after { bottom: 0; }
.section--dark p, .section--dark .lead { color: #aab0b8; }
.section--dark .eyebrow { color: #fff; } .section--dark .eyebrow::before { color: #6c727b; }
.section--dark .index-num { color: #7d838c; }
.section--dark .btn--primary { background: #fff; color: var(--dark); border-color: #fff; }
.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.section--dark .stat .num { color: #fff; }

.page-hero { padding: clamp(3.5rem,7vw,6rem) 0 clamp(2rem,4vw,3rem); border-bottom: 1px solid var(--line); background:
  linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 100% 32px,
  linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 32px 100%, #fff; }
.page-hero .lead { max-width: 58ch; }

/* ---- cards --------------------------------------------------------------- */
.card { border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.feature { padding-top: 1rem; border-top: 2px solid var(--ink); }
.feature .index-num { display: block; margin-bottom: .75rem; }
.feature h3 { margin-bottom: .4rem; }
.feature p { color: var(--ink-soft); }

/* stats */
.stat .num { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2.4rem,5vw,3.6rem); color: var(--ink); line-height: 1; }
.stat .label { font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-top: .5rem; }
.section--dark .stat .label { color: #8b9098; }

/* product cards */
.product-card { padding: 0; overflow: hidden; }
.product-card .thumb { aspect-ratio: 16/10; display: grid; place-items: center; background: var(--grey); border-bottom: 1px solid var(--line); position: relative; }
.product-card .thumb::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--line); pointer-events: none; }
.product-card .thumb svg { width: 72%; position: relative; z-index: 1; filter: grayscale(1) contrast(.95); transition: filter .3s ease, transform .3s ease; }
.product-card:hover .thumb svg { filter: grayscale(0); transform: scale(1.03); }
/* schematic line-art thumbnails */
.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 16px 18px; position: relative; z-index: 1; mix-blend-mode: multiply; transition: transform .35s ease; }
.product-card:hover .thumb img { transform: scale(1.04); }
.product-card .body { padding: 1.3rem 1.4rem 1.6rem; }
.product-card .body p { font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
/* prominent category title + intro line */
.section-head .cat-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; color: var(--ink); font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.section-head .cat-desc { margin-top: .85rem; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--ink-soft); line-height: 1.55; }
/* all-light category sections — hairline keeps them distinct */
body[data-page="vehicles"] .section { border-top: 1px solid var(--line-soft); }
/* match the hero's bottom gap to the inter-category gap so every section
   has equal whitespace above and below */
body[data-page="vehicles"] .page-hero { padding-bottom: clamp(3.5rem,7vw,7rem); }
.product-card .body h3 { margin-bottom: .35rem; }
.product-card .spec { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* chips → mono tags */
.chip { background: #fff; border: 1px solid var(--line); border-radius: 3px; box-shadow: none; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); padding: .3rem .6rem; }
.chip .dot { display: none; }

/* logo wall */
.logo-wall .logo { background: #fff; border: 1px solid var(--line); border-radius: 3px; box-shadow: none; font-family: var(--font-head); font-weight: 600; color: var(--ink); }

/* ---- brand slideshow grid (brands page) --------------------------------- */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: 1fr; } }
.brand-tile { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.brand-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.brand-logo { display: flex; align-items: center; justify-content: center; height: 80px; padding: 1rem 1.2rem; background: #fff; border-bottom: 1px solid var(--line); }
.brand-logo-img { height: 36px; width: auto; max-width: 180px; object-fit: contain; }
.brand-shots { position: relative; aspect-ratio: 16 / 10; background: #fff; border-bottom: 1px solid var(--line); }
.brand-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
/* studio renders on white/transparent backgrounds: show the whole machine, unclipped */
.brand-shot.brand-shot--contain { object-fit: contain; padding: 5%; box-sizing: border-box; }
.brand-shot.is-active { opacity: 1; }
.brand-tile-foot { padding: 1rem 1.2rem 1.15rem; }
.brand-name { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em; color: var(--ink); }
.brand-tagline { display: block; margin-top: .25rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em; line-height: 1.3; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .brand-shot { transition: none; } }

/* testimonials */
.quote { border: 1px solid var(--line); font-size: 1.12rem; font-weight: 400; color: var(--ink-2); }
.quote .who { font-family: var(--font-mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin-top: 1.25rem; }

/* forms */
.form-field label { font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.form-field input, .form-field textarea, .form-field select { border: 1px solid var(--line); border-radius: 3px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,22,26,.08); }

/* ---- Request a Machine — engineering "spec request sheet" --------------- */
.rq-sheet { position: relative; max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--ink); border-radius: 4px; }
.rq-sheet::before, .rq-sheet::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid var(--ink); z-index: 2; pointer-events: none; }
.rq-sheet::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rq-sheet::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.rq-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap;
  padding: 1rem 1.2rem 1.05rem; border-bottom: 1px solid var(--line); background: var(--grey); }
.rq-sheet-head .ms-id { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.2rem,2.4vw,1.55rem); letter-spacing: -.01em; color: var(--ink); }
.rq-sheet-head .ms-meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.rq-body { padding: clamp(1.5rem,4vw,2.75rem); }

.rq-group { margin: 0 0 clamp(1.75rem,3.5vw,2.5rem); }
.rq-group:last-of-type { margin-bottom: 0; }
.rq-legend { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.25rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--line); font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.rq-num { font-family: var(--font-mono); font-weight: 700; font-size: .72rem; line-height: 1; color: #fff;
  background: var(--ink); padding: .34rem .5rem; border-radius: 3px; }

.rq-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.rq-fields .span-2 { grid-column: 1 / -1; }
.rq-fields .form-field { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.rq-fields .form-field input, .rq-fields .form-field select, .rq-fields .form-field textarea { width: 100%; padding: .7rem .8rem; background: #fff; color: var(--ink); font: inherit; line-height: 1.4; }
/* normalize the native select so it matches input height exactly + custom caret */
.rq-fields .form-field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2314161a' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: .7rem;
}
.rq-fields .form-field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }

.rq-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.rq-actions .form-status { margin: 0; font-family: var(--font-mono); font-size: .8rem; }
.rq-body > .form-note { margin-top: 1rem; }

@media (max-width: 560px) { .rq-fields { grid-template-columns: 1fr; } }

/* footer */
/* the global `p { color: var(--ink-2) }` rule would otherwise render dark-on-dark here */
.site-footer p { color: var(--footer-ink); }
/* --accent is near-black in this theme, so base.css's accent hover would vanish on the dark footer */
.site-footer a:hover { color: #fff; }
.site-footer h4 { font-family: var(--font-mono); color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; opacity: 1; }
.site-footer .brand { font-family: var(--font-head); }
.site-footer .brand-mark { background: #fff; color: var(--dark); border-radius: 3px; }
/* footer-bottom: © line (dim) on the left, "Designed by Fragatta" credit
   (slightly brighter) on the right — flex space-between handles the split. */
.site-footer .footer-credit { color: #c9ced6; }
.site-footer .footer-credit a { color: #c9ced6; font-weight: 600; text-underline-offset: 3px; transition: color .2s ease; }
.site-footer .footer-credit a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   FINAL version — reimagined hero: the client drawing sits BESIDE the headline
   (where the old animated excavator was), reframed as an engineering "viewport":
   a bracketed grid-paper frame with a FIG tab + ruler, floating over an offset
   dark slab for depth (echoing the theme's dark-slab motif).
   ========================================================================== */
.fv-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.fv-hero-copy h1 { margin: 1.1rem 0 1.2rem; }
.fv-hero-copy .lead { max-width: 46ch; }
.fv-hero-copy .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.fv-coords { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.fv-coords span { position: relative; padding-left: 1.05rem; }
.fv-coords span::before { content: "//"; position: absolute; left: 0; color: var(--ink); }

/* stage: framed image over an offset dark slab (both stay inside the stage box) */
.fv-stage { position: relative; }
.fv-slab { position: absolute; inset: 18px 0 0 18px; z-index: 0; background: var(--dark); border-radius: 4px; }
.fv-frame { position: relative; z-index: 1; margin: 0 18px 18px 0; padding: 14px;
  border: 1px solid var(--ink); border-radius: 4px; background:
  linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 100% 26px,
  linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 26px 100%, #fff; }
/* engineering corner brackets */
.fv-frame::before, .fv-frame::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid var(--ink); z-index: 3; pointer-events: none; }
.fv-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.fv-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.fv-ruler { position: absolute; top: 5px; left: 38px; right: 16px; height: 6px; z-index: 2;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 16px); opacity: .32; }
.fv-tag { position: absolute; top: -13px; left: 18px; z-index: 3; background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; padding: .34rem .6rem; }
.fv-img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
.fv-cap { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: .6rem; text-align: right; }

@media (max-width: 900px) {
  .fv-hero-grid { grid-template-columns: 1fr; }
  .fv-hero-copy { order: 1; }
  .fv-stage { order: 2; max-width: 560px; margin-top: .5rem; }
}