/* ============================================================================
   WADSWORTH QUADS — public site (direction v3)
   Anchored to new-2.jpg (Karpov auto dealer): premium automotive.
   Charcoal concrete hero + red car, red/white headline with a red full-stop,
   dark stats bar under the hero, white bento service grid with ONE red card,
   brand-logo row. Calm and expensive, red as the single accent.
   Type: Archivo (heavy, headings) + Inter (body).
   ============================================================================ */

@font-face{ font-family:'Archivo'; src:url(/assets/fonts/archivo.woff2) format('woff2'); font-weight:100 900; font-display:swap; }
@font-face{ font-family:'Inter'; src:url(/assets/fonts/inter.woff2) format('woff2'); font-weight:100 900; font-display:swap; }

:root{
    --char:#26262A; --char-dk:#1C1C1F; --char-lt:#33333A;
    --red:#E4222B; --red-dk:#C11820; --red-soft:#FCE9EA;
    --page:#FFFFFF; --grey:#F1F1F3; --grey2:#E9E9EC; --tint:#F7F7F9;
    --ink:#191A1E; --muted:#5E5F67; --faint:#6B6C74;
    --line:#E6E6EA; --line-dk:rgba(255,255,255,.12);

    --display:'Archivo',system-ui,sans-serif;
    --body:'Inter',system-ui,-apple-system,sans-serif;

    --wrap:1230px; --gutter:24px;
    --sec:clamp(64px,8vw,116px);
    --r:6px;
    --ease:cubic-bezier(.25,.9,.3,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--page); color:var(--ink); font-family:var(--body);
      font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:#fff; }
:where(a,button,input,select,textarea):focus-visible{ outline:3px solid var(--red); outline-offset:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }

/* Skip link — first focusable element, offscreen until focused. */
.skiplink{ position:absolute; left:-9999px; top:0; z-index:200; }
.skiplink:focus{ left:12px; top:12px; padding:.75rem 1.25rem; background:#fff; color:#141810;
    font-weight:700; border:2px solid #141810; border-radius:3px; }
main:focus{ outline:none; }

/* ---- Type ---- */
h1,h2,h3{ font-family:var(--display); font-weight:750; letter-spacing:-.01em; line-height:1.02; margin:0; }
.kicker{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.kicker::before{ content:""; width:26px; height:2px; background:var(--red); }
.dot{ color:var(--red); }
.sec-head{ margin-bottom:clamp(32px,4vw,52px); }
.sec-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sec-head h2{ font-size:clamp(2.05rem,4.4vw,3.5rem); text-transform:uppercase; letter-spacing:-.022em; text-wrap:balance; }
.sec-head h2 .r{ color:var(--red); }
.sec-head p{ color:var(--muted); max-width:56ch; margin:16px 0 0; }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family:var(--body);
      font-weight:600; font-size:.9rem; padding:.95rem 1.6rem; border-radius:var(--r); border:1.5px solid transparent;
      cursor:pointer; transition:all .2s var(--ease); }
.btn--red{ background:var(--red-dk); color:#fff; }
.btn--red:hover{ background:var(--red); transform:translateY(-1px); box-shadow:0 12px 26px -12px rgba(228,34,43,.55); }
.nav a.btn--red{ color:#fff; }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; transform:translateY(-1px); }
.btn--line{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn--line:hover{ border-color:var(--ink); }
.btn--line-w{ border-color:rgba(255,255,255,.35); color:#fff; background:transparent; }
.btn--line-w:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn .ar{ transition:transform .22s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.tlink{ font-weight:600; font-size:.85rem; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.tlink .ar{ color:var(--red); transition:transform .2s var(--ease); }
.tlink:hover .ar{ transform:translateX(4px); }

/* ---- Header (dark) ---- */
.topbar{ background:var(--char-dk); color:#A9AAB1; font-size:.78rem; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; min-height:36px; gap:12px; }
.topbar a{ color:#fff; } .topbar a:hover{ color:var(--red); }
.topbar .r{ letter-spacing:.1em; text-transform:uppercase; font-size:.68rem; color:#A9AAB1; }

.site-head{ position:sticky; top:0; z-index:80; background:var(--char); border-bottom:1px solid var(--line-dk); transition:box-shadow .25s var(--ease); }
.site-head.scrolled{ box-shadow:0 12px 30px -16px rgba(0,0,0,.7); }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px; }
.logo{ display:flex; align-items:center; gap:12px; }
.logo .mark{ width:42px; height:42px; background:var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.logo .mark svg{ width:24px; height:24px; }
.logo .wm{ font-family:var(--display); font-weight:800; font-size:1.12rem; text-transform:uppercase; letter-spacing:.02em; color:#fff; line-height:1; }
.logo .wm small{ display:block; font-family:var(--body); font-weight:600; font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:#AEAFB6; margin-top:3px; }
.nav{ display:flex; align-items:center; gap:28px; }
.nav a{ font-weight:500; font-size:.9rem; color:#C7C8CE; transition:color .2s; }
.nav a:hover{ color:#fff; }
.nav .phone{ display:inline-flex; align-items:center; gap:9px; border:1.5px solid var(--line-dk); border-radius:var(--r); padding:.55rem .9rem; color:#fff; font-weight:700; font-size:.92rem; }
.nav .phone svg{ width:15px; height:15px; color:var(--red); }
.nav .btn{ padding:.68rem 1.2rem; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; padding:10px; cursor:pointer; }
.mnav{ display:none; background:var(--char); border-bottom:1px solid var(--line-dk); }
.mnav.open{ display:block; }
.mnav nav{ display:flex; flex-direction:column; padding:6px 24px 18px; }
.mnav a{ color:#E4E5E8; font-weight:600; font-size:.95rem; padding:13px 0; border-top:1px solid var(--line-dk); }
.mnav a.sub{ padding-left:18px; font-weight:500; font-size:.9rem; color:#B4B5BC; }

/* ---- Hero ---- */
.hero{ position:relative; background:var(--char); color:#fff; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
/* The machines sit in the lower third of the photograph; bias the crop down so
   they're visible next to the headline instead of cropped off the fold. */
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center bottom; }
/* Left-weighted scrim keeps the headline legible over the machines; the bottom
   wash is kept light so it doesn't grey out the machines it sits on. */
.hero__bg::after{ content:""; position:absolute; inset:0; background:
    linear-gradient(90deg, rgba(28,28,31,.95) 0%, rgba(28,28,31,.8) 32%, rgba(28,28,31,.24) 62%, rgba(28,28,31,.4) 100%),
    linear-gradient(0deg, rgba(20,20,23,.42) 0%, transparent 26%); }
.hero__tex{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.4;
    background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 220px),
                     repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 220px); }
/* Generous bottom padding is compositional, not decorative: it opens a band of
   photograph below the CTA where the machines in the shot actually sit. */
.hero .wrap{ position:relative; z-index:2; padding-top:clamp(54px,6.5vw,88px); padding-bottom:clamp(96px,11vw,150px); }
.hero__inner{ max-width:min(100%,58ch); }
.hero h1{ max-width:19ch; font-size:clamp(2.3rem,4.4vw,3.9rem); text-transform:uppercase; line-height:1; letter-spacing:-.028em; text-wrap:balance; }
.hero h1 .r{ color:var(--red); }
.hero__sub{ max-width:52ch; color:#CFD0D6; font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.68; margin:28px 0 36px; text-wrap:pretty; }
.hero__actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero__phone{ display:inline-flex; align-items:center; gap:0; border:1.5px solid rgba(255,255,255,.22); border-radius:var(--r); overflow:hidden; }
.hero__phone .lab{ display:flex; align-items:center; gap:10px; padding:.7rem 1.1rem; font-family:var(--display); font-weight:750; font-size:1.15rem; color:#fff; }
.hero__phone .lab svg{ width:17px; height:17px; color:var(--red); }
.hero__phone .go{ width:52px; align-self:stretch; background:var(--red); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s var(--ease); }
.hero__phone .go:hover{ background:var(--red-dk); }

/* ---- Yard rail (hero footer): the two yards, phone-first ----
   Replaces the old vanity stat bar. This is a phone-led business; the useful
   thing under the hero is who to ring, not how many brands we stock. */
.yardrail{ position:relative; z-index:2; background:var(--char-dk); color:#fff; border-top:1px solid var(--line-dk); }
.yardrail .wrap{ display:grid; grid-template-columns:1fr 1fr auto; }
.yard{ padding:26px 34px; border-left:1px solid var(--line-dk); }
.yard:first-child{ padding-left:0; border-left:0; }
.yard__n{ display:block; font-family:var(--display); font-weight:750; font-size:1.16rem; text-transform:uppercase; letter-spacing:-.01em; }
.yard p{ margin:6px 0 14px; font-size:.78rem; color:#A9AAB1; }
.yard a{ font-family:var(--display); font-weight:800; font-size:1.42rem; color:#fff; letter-spacing:-.01em; transition:color .2s var(--ease); }
.yard a:hover{ color:var(--red); }
.yard > span{ display:block; margin-top:6px; font-size:.76rem; color:#A9AAB1; }
.yard--now{ display:flex; align-items:center; gap:16px; min-width:230px; }
.yard--now b{ font-family:var(--display); font-weight:800; font-size:2.6rem; line-height:1; color:var(--red); }
.yard--now span{ margin:0; font-size:.76rem; color:#A9AAB1; line-height:1.4; }

/* ---- Sections ---- */
.sec{ padding:var(--sec) 0; }
.sec--tint{ background:var(--tint); }

/* ---- Machines directory ---- */
/* Real links, not JS tabs — the homepage shows 8 of the yard, so filtering
   in place would have lied about what's in stock. These go to the directory. */
.pills{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pills a{ font-weight:600; font-size:.84rem; color:var(--muted); background:#fff; border:1.5px solid var(--line);
    border-radius:999px; padding:.55rem 1.15rem; transition:border-color .2s var(--ease), color .2s var(--ease); }
.pills a:hover{ border-color:var(--ink); color:var(--ink); }

.grid-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
/* Homepage highlights: 4 across, never more than 2 below desktop. */
.grid-cards--home{ grid-template-columns:repeat(4,1fr); gap:14px; }
.mcard{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; overflow:hidden;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.mcard:hover{ transform:translateY(-5px); border-color:transparent; box-shadow:0 26px 50px -26px rgba(20,20,25,.4); }
.mcard.hide{ display:none; }
/* Whole card is the click target (stretched link): the Details link expands to
   cover the card. z-index clears the "New/Sold" tag (z-index 2) so the badge
   area is clickable too; the visible "Details »" text and its aria-label stay. */
.mcard .tlink::after{ content:""; position:absolute; inset:0; z-index:3; }
.mcard:has(.tlink:focus-visible){ outline:3px solid var(--red); outline-offset:2px; }
.mcard .tlink:focus-visible{ outline:none; }
.mcard__media{ position:relative; aspect-ratio:16/11; background:linear-gradient(180deg,#F7F7F9,#EDEDF0); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mcard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.mcard:hover .mcard__media img{ transform:scale(1.04); }
.mcard__media .ghost{ font-family:var(--display); font-weight:800; font-size:2rem; color:#DEDEE2; text-transform:uppercase; }
.tag{ position:absolute; top:14px; left:14px; z-index:2; font-weight:700; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
    padding:.42em .8em; border-radius:999px; background:#fff; color:var(--ink); box-shadow:0 4px 12px -4px rgba(0,0,0,.25); }
.tag--new{ background:var(--red); color:#fff; }
.tag--sold{ background:var(--faint); color:#fff; }
.mcard__body{ padding:20px 22px 0; flex:1; }
.mcard__body h3{ font-family:var(--display); font-weight:700; font-size:1.14rem; text-transform:uppercase; letter-spacing:-.005em; }
.mcard__meta{ font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:7px 0 14px; }
.mcard__spec{ list-style:none; margin:0; padding:0; }
.mcard__spec li{ display:flex; justify-content:space-between; gap:14px; font-size:.86rem; padding:8px 0; border-top:1px solid var(--line); }
.mcard__spec li span{ color:var(--muted); }
.mcard__spec li b{ font-weight:600; text-align:right; }
.mcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 22px; margin-top:16px; background:var(--tint); border-top:1px solid var(--line); }
.price{ font-family:var(--display); font-weight:800; font-size:1.35rem; color:var(--ink); }
.price small{ display:block; font-family:var(--body); font-weight:600; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:3px; }

/* ---- Services BENTO (the new-2 signature) ---- */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:16px; }
.bc{ position:relative; background:var(--grey); border-radius:10px; padding:28px; overflow:hidden; min-height:230px;
    display:flex; flex-direction:column; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.bc:hover{ transform:translateY(-4px); box-shadow:0 24px 44px -28px rgba(20,20,25,.4); }
.bc--wide{ grid-column:span 2; }
.bc--img{ min-height:300px; }
.bc__ico{ width:46px; height:46px; border-radius:var(--r); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--red); margin-bottom:auto; box-shadow:0 6px 16px -8px rgba(0,0,0,.2); }
.bc__ico svg{ width:24px; height:24px; }
.bc h3{ font-family:var(--display); font-weight:750; font-size:1.28rem; text-transform:uppercase; letter-spacing:-.01em; margin-top:20px; }
.bc p{ color:var(--muted); font-size:.9rem; margin:8px 0 0; max-width:34ch; }
.bc .tlink{ margin-top:18px; }
.bc__img{ position:absolute; right:-6%; bottom:-4%; width:56%; max-width:340px; z-index:0; filter:drop-shadow(0 18px 22px rgba(0,0,0,.22)); }
.bc--img h3,.bc--img p,.bc--img .tlink,.bc--img .bc__ico{ position:relative; z-index:1; }
.bc--img p{ max-width:24ch; }
.bc--red{ background:var(--red-dk); color:#fff; }
.bc--red .bc__ico{ background:rgba(255,255,255,.16); color:#fff; box-shadow:none; }
.bc--red p{ color:#FFD9DB; }
.bc--red .tlink{ color:#fff; } .bc--red .tlink .ar{ color:#fff; }
.bc--red .price-lg{ color:#fff; }
/* ---- Homepage: see-all ---- */
.seeall{ display:inline-flex; align-items:center; gap:14px; margin-top:34px; padding:18px 28px; border:1.5px solid var(--line);
    border-radius:var(--r); font-family:var(--display); font-weight:750; font-size:1.05rem; text-transform:uppercase;
    letter-spacing:-.01em; transition:border-color .22s var(--ease), background .22s var(--ease); }
.seeall svg{ width:20px; height:20px; color:var(--red); transition:transform .22s var(--ease); }
.seeall:hover{ border-color:var(--ink); background:var(--tint); }
.seeall:hover svg{ transform:translateX(5px); }

/* ---- Homepage: what we do ----
   Replaces six near-identical icon cards with a ruled capability list plus one
   red panel, so the section has hierarchy instead of repetition. */
.svc{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,72px); align-items:start; }
.svc__lead h2{ font-size:clamp(2.05rem,4.4vw,3.3rem); text-transform:uppercase; letter-spacing:-.022em; text-wrap:balance; }
.svc__lead p{ color:var(--muted); margin:20px 0 26px; max-width:40ch; text-wrap:pretty; }
.caps{ list-style:none; margin:0 0 26px; padding:0; }
.caps li{ display:grid; grid-template-columns:minmax(0,13rem) 1fr; gap:8px 30px; padding:20px 0; border-top:1px solid var(--line); }
.caps li:first-child{ border-top:0; padding-top:0; }
.caps b{ font-family:var(--display); font-weight:750; font-size:1.02rem; text-transform:uppercase; letter-spacing:-.005em; }
.caps span{ color:var(--muted); font-size:.92rem; line-height:1.62; text-wrap:pretty; }
.finance{ display:flex; align-items:flex-end; justify-content:space-between; gap:22px; flex-wrap:wrap;
    background:var(--red-dk); color:#fff; border-radius:10px; padding:30px 32px;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.finance:hover{ transform:translateY(-3px); box-shadow:0 26px 46px -28px rgba(193,24,32,.7); }
.finance h3{ font-family:var(--display); font-weight:750; font-size:1.38rem; text-transform:uppercase; }
.finance p{ margin:10px 0 0; color:#FFD9DB; font-size:.92rem; max-width:44ch; }
.finance .tlink{ color:#fff; white-space:nowrap; }
.finance .tlink .ar{ color:#fff; }

/* ---- Brand strip ---- */
.brands{ border-block:1px solid var(--line); }
.brands .wrap{ display:flex; align-items:center; gap:clamp(20px,4vw,54px); padding:34px var(--gutter); flex-wrap:wrap; justify-content:center; }
.brands .lab{ font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.brands .b{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,2vw,1.6rem); text-transform:uppercase; color:var(--ink); opacity:.4; transition:opacity .2s; }
.brands .b:hover{ opacity:1; }

/* ---- Honda price panel ---- */
.honda{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.honda__stage{ position:relative; background:#fff; border:1px solid var(--line); border-radius:10px; padding:clamp(24px,3vw,42px); box-shadow:0 40px 70px -50px rgba(20,20,25,.5); }
.honda__stage img{ position:relative; }
.honda__h{ font-size:clamp(2rem,4.2vw,3.1rem); text-transform:uppercase; letter-spacing:-.022em; text-wrap:balance; }
.honda .lead{ color:var(--muted); margin:20px 0 0; max-width:52ch; text-wrap:pretty; }
.honda__act{ display:flex; gap:12px; flex-wrap:wrap; }
.hlist{ list-style:none; margin:24px 0 30px; padding:0; }
.hlist li{ display:grid; grid-template-columns:1.2fr 1fr auto; gap:14px; align-items:baseline; padding:11px 2px; border-bottom:1px solid var(--line); font-size:.9rem; }
.hlist li b{ font-weight:650; }
.hlist li span{ color:var(--muted); font-size:.84rem; }
.hlist li .pr{ font-family:var(--display); font-weight:750; color:var(--red); white-space:nowrap; }

/* ---- Trust (charcoal) ---- */
.trust{ background:var(--char); color:#fff; position:relative; overflow:hidden; }
.trust::before{ content:"25+"; position:absolute; right:-1%; top:-14%; font-family:var(--display); font-weight:800; font-size:clamp(8rem,22vw,18rem); color:rgba(255,255,255,.045); line-height:1; }
.trust .wrap{ position:relative; padding-top:var(--sec); padding-bottom:var(--sec); }
.trust h2{ color:#fff; text-transform:uppercase; font-size:clamp(1.9rem,3.6vw,2.7rem); }
.trust h2 .r{ color:var(--red); }
.trust .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 26px; margin-top:44px; }
.trust .t b{ display:block; font-family:var(--display); font-weight:700; font-size:1.06rem; text-transform:uppercase; margin-bottom:10px; padding-top:16px; border-top:2px solid var(--red); }
.trust .t p{ margin:0; color:#A9AAB1; font-size:.88rem; line-height:1.6; }

/* ---- Quotes ---- */
/* Ruled, not boxed — three bordered cards next to the machine cards above made
   the page read as nothing but cards. */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); }
.quote{ margin:0; padding:24px 0 0; border-top:2px solid var(--red); }
.quote p{ margin:0 0 20px; font-size:1.02rem; line-height:1.62; text-wrap:pretty; }
.quote cite{ font-style:normal; font-weight:700; font-size:.82rem; }
.quote cite span{ color:var(--muted); font-weight:500; }

/* ---- Branches ---- */
.branches{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.branch{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:32px; position:relative; overflow:hidden; }
.branch::after{ content:attr(data-n); position:absolute; top:10px; right:22px; font-family:var(--display); font-weight:800; font-size:4rem; color:var(--tint); line-height:1; }
.branch h3{ font-family:var(--display); font-weight:750; font-size:1.4rem; text-transform:uppercase; position:relative; }
.branch .role{ font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin:5px 0 16px; }
.branch address{ font-style:normal; color:var(--muted); font-size:.92rem; line-height:1.7; }
.branch .tel{ font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--ink); display:block; margin:14px 0 3px; }
.branch .hrs{ color:var(--faint); font-size:.84rem; margin:0 0 18px; }

/* ---- CTA ---- */
.cta{ background:var(--red-dk); color:#fff; }
.cta .wrap{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; padding-top:52px; padding-bottom:52px; }
.cta h2{ color:#fff; text-transform:uppercase; font-size:clamp(1.6rem,3.2vw,2.3rem); }
.cta p{ margin:8px 0 0; color:#FFD9DB; }

/* ---- Footer ---- */
.site-foot{ background:var(--char); color:#A9AAB1; }
.site-foot .wrap{ display:grid; grid-template-columns:1.3fr 1fr 1.5fr; gap:36px; padding-top:56px; padding-bottom:40px; }
.site-foot h4{ font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 16px; }
.site-foot a:hover{ color:#fff; }
.site-foot .fnav{ display:flex; flex-direction:column; gap:9px; font-size:.9rem; }
.site-foot address{ font-style:normal; line-height:1.7; font-size:.88rem; }
.site-foot .cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.site-foot .base{ border-top:1px solid var(--line-dk); }
.site-foot .base .wrap{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:18px 24px; font-size:.78rem; color:#A9AAB1; }

/* ---- Reveals ---- */
html.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
html.js .rv.in{ opacity:1; transform:none; }
html.js .rv[data-d="1"]{ transition-delay:.07s; } html.js .rv[data-d="2"]{ transition-delay:.14s; } html.js .rv[data-d="3"]{ transition-delay:.21s; }
html.js .rise{ animation:rise .7s var(--ease) both; }
html.js .rise[data-d="1"]{ animation-delay:.08s; } html.js .rise[data-d="2"]{ animation-delay:.16s; } html.js .rise[data-d="3"]{ animation-delay:.26s; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ---- Responsive ---- */
@media(max-width:1000px){
    .nav a:not(.btn),.nav .phone{ display:none; }
    .nav-toggle{ display:block; }
    .grid-cards{ grid-template-columns:1fr 1fr; }
    .bento{ grid-template-columns:1fr 1fr; }
    .bc--wide{ grid-column:span 2; }
    .honda{ grid-template-columns:1fr; }
    .quotes{ grid-template-columns:1fr; }
    .trust .grid{ grid-template-columns:1fr 1fr; }
    .site-foot .wrap{ grid-template-columns:1fr; gap:28px; }
}
@media(max-width:640px){
    .hero h1{ font-size:clamp(2rem,8.5vw,2.7rem); }
    .grid-cards,.bento{ grid-template-columns:1fr; }
    .bc--wide{ grid-column:span 1; }
    .branches{ grid-template-columns:1fr; }
    .trust .grid{ grid-template-columns:1fr; }
    .topbar .r{ display:none; }
}

/* ---- Homepage responsive (last, so these win over the shared rules above) ---- */
@media(max-width:1100px){
    .grid-cards--home{ grid-template-columns:1fr 1fr; }
    .yardrail .wrap{ grid-template-columns:1fr 1fr; }
    .yard--now{ grid-column:1 / -1; border-left:0; padding-left:0; border-top:1px solid var(--line-dk); }
}
@media(max-width:900px){
    .svc{ grid-template-columns:1fr; }
    .svc__lead p{ max-width:60ch; }
}
@media(max-width:620px){
    .grid-cards--home{ grid-template-columns:1fr; }
    .yardrail .wrap{ grid-template-columns:1fr; }
    .yard{ padding:22px 0; border-left:0; border-top:1px solid var(--line-dk); }
    .yard:first-child{ border-top:0; padding-top:22px; }
    .caps li{ grid-template-columns:1fr; gap:6px; }
    .seeall{ width:100%; justify-content:space-between; }
}
@media(prefers-reduced-motion:reduce){
    html.js .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
    html.js .rise{ animation:none !important; }
    *{ transition-duration:.01ms !important; }
}

/* ============================================================================
   Machines listing page — faceted sidebar directory
   ============================================================================ */
.pagehead{ background:var(--char); color:#fff; position:relative; overflow:hidden; }
.pagehead::before{ content:""; position:absolute; inset:0; opacity:.35;
    background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 220px); }
.pagehead .wrap{ position:relative; padding:clamp(34px,5vw,60px) var(--gutter) clamp(34px,5vw,58px); }
.crumb{ font-size:.8rem; color:#A9AAB1; margin-bottom:16px; }
.crumb a{ color:#C7C8CE; } .crumb a:hover{ color:#fff; } .crumb span{ margin:0 8px; color:#5A5B62; }
.pagehead h1{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(2.1rem,4.4vw,3.3rem); color:#fff; letter-spacing:-.01em; }
.pagehead p{ color:#B9BAC1; max-width:60ch; margin:16px 0 0; }

.listing{ display:grid; grid-template-columns:266px 1fr; gap:32px; align-items:start; }

/* Sidebar */
.sidebar{ position:sticky; top:94px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px 22px 22px; }
/* Visually-hidden: present for screen readers + heading order, off-screen visually. */
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sidebar__head{ display:none; }
.facet{ padding:20px 0; border-bottom:1px solid var(--line); }
.facet:last-of-type{ border-bottom:0; }
.facet h3{ font-family:var(--body); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:0 0 12px; }
.opt{ display:flex; align-items:center; gap:11px; padding:6px 0; cursor:pointer; font-size:.92rem; color:var(--ink); }
.opt input{ width:17px; height:17px; accent-color:var(--red); flex:none; cursor:pointer; }
.opt span{ flex:1; }
.opt em{ font-style:normal; font-size:.78rem; color:var(--faint); }
.opt:hover span{ color:var(--red); }
.facet__actions{ padding-top:20px; }
.reset{ display:block; text-align:center; margin-top:12px; font-weight:600; font-size:.85rem; color:var(--muted); }
.reset:hover{ color:var(--red); }

/* Results */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.rcount{ font-size:.95rem; color:var(--muted); } .rcount b{ font-family:var(--display); font-weight:800; font-size:1.25rem; color:var(--ink); margin-right:4px; }
.sortsel{ display:inline-flex; align-items:center; gap:10px; font-size:.82rem; font-weight:600; color:var(--muted); }
.sortsel select{ font-family:var(--body); font-size:.88rem; font-weight:600; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:var(--r); padding:.55rem 2rem .55rem .8rem; cursor:pointer;
    appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23191A1E' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.chip{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:var(--ink);
    background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:.4rem .85rem; transition:all .18s var(--ease); }
.chip span{ color:var(--faint); font-size:1rem; line-height:1; }
.chip:hover{ border-color:var(--red); color:var(--red); } .chip:hover span{ color:var(--red); }
.chip--clear{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip--clear:hover{ background:var(--red); border-color:var(--red); color:#fff; }

.empty{ text-align:center; padding:60px 24px; border:1px dashed var(--line); border-radius:10px; background:var(--tint); }
.empty h3{ font-family:var(--display); font-weight:750; text-transform:uppercase; font-size:1.35rem; }
.empty p{ color:var(--muted); max-width:44ch; margin:12px auto 0; }

.pager{ display:flex; gap:8px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.pg{ min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px;
    border:1.5px solid var(--line); border-radius:var(--r); font-weight:600; font-size:.88rem; color:var(--ink); background:#fff; transition:all .18s var(--ease); }
.pg:hover{ border-color:var(--ink); }
.pg.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* Filters button (mobile) + drawer */
.filters-btn{ display:none; align-items:center; gap:9px; font-family:var(--body); font-weight:700; font-size:.9rem; color:#fff;
    background:var(--ink); border:0; border-radius:var(--r); padding:.8rem 1.2rem; cursor:pointer; margin-bottom:20px; }
.filters-btn svg{ width:18px; height:18px; }
.filters-btn .badge{ background:var(--red); border-radius:999px; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; padding:0 5px; }
.drawer-scrim{ position:fixed; inset:0; background:rgba(20,20,25,.55); z-index:90; }

@media(max-width:900px){
    .listing{ grid-template-columns:1fr; gap:0; }
    .filters-btn{ display:inline-flex; }
    .sidebar{ position:fixed; top:0; left:0; bottom:0; width:min(340px,86vw); z-index:95; border-radius:0; border:0;
        transform:translateX(-100%); transition:transform .3s var(--ease); overflow-y:auto; padding-top:0; box-shadow:0 0 60px rgba(0,0,0,.3); }
    .sidebar.open{ transform:none; }
    .sidebar__head{ display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff;
        padding:18px 0; border-bottom:1px solid var(--line); margin-bottom:4px; }
    .sidebar__head b{ font-family:var(--display); font-weight:750; text-transform:uppercase; }
    .sidebar__close{ background:none; border:0; font-size:1.8rem; line-height:1; color:var(--muted); cursor:pointer;
        display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin:-8px -8px -8px 0; }
}

/* ============================================================================
   Machine detail page
   ============================================================================ */
.pagehead--slim .wrap{ padding-top:20px; padding-bottom:20px; }

.detail{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start; }

.detail__gallery{ position:sticky; top:94px; }
.gal__main{ position:relative; aspect-ratio:3/2; background:linear-gradient(180deg,#F7F7F9,#EAEAEE); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.gal__main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gal__main .ghost{ font-family:var(--display); font-weight:800; font-size:3rem; text-transform:uppercase; color:#DEDEE2; }
.gal__thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.gal__thumb{ width:84px; height:60px; border:1.5px solid var(--line); border-radius:var(--r); overflow:hidden; padding:0; cursor:pointer; background:#fff; transition:border-color .18s var(--ease); }
.gal__thumb img{ width:100%; height:100%; object-fit:cover; }
.gal__thumb.on,.gal__thumb:hover{ border-color:var(--red); }

.detail__eyebrow{ font-weight:600; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 12px; }
.detail__info h1{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.7rem,3.4vw,2.5rem); letter-spacing:-.01em; line-height:1.03; }

.pricebox{ display:flex; align-items:baseline; gap:16px; margin:22px 0; padding:20px 24px; background:var(--char); border-radius:10px; }
.pricebox__p{ font-family:var(--display); font-weight:800; font-size:2rem; color:#fff; line-height:1; }
.pricebox__p small{ display:block; font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#A9AAB1; margin-top:6px; }
.pricebox__sold{ font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--red); padding:.4em .8em; border-radius:var(--r); }

.sheet{ list-style:none; margin:0 0 24px; padding:0; border-top:1px solid var(--line); }
.sheet li{ display:flex; justify-content:space-between; gap:16px; padding:12px 2px; border-bottom:1px solid var(--line); font-size:.94rem; }
.sheet li span{ color:var(--muted); }
.sheet li b{ font-weight:650; }

.detail__feats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.detail__feats span{ font-size:.82rem; font-weight:600; color:var(--ink); background:var(--grey); border-radius:999px; padding:.42rem .9rem; }
.detail__feats span::before{ content:"✓"; color:var(--red); margin-right:7px; font-weight:800; }

.detail__desc{ color:var(--muted); line-height:1.7; margin-bottom:26px; }
.detail__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.detail__note{ color:var(--faint); font-size:.86rem; margin:16px 0 0; max-width:48ch; }
.detail__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.detail__tags span{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line); border-radius:var(--r); padding:.3rem .6rem; }

@media(max-width:900px){
    .detail{ grid-template-columns:1fr; gap:28px; }
    .detail__gallery{ position:static; }
}

/* ============================================================================
   Nav dropdown + content pages (Servicing / Parts / About / Contact)
   ============================================================================ */
.navdrop{ position:relative; }
.navdrop__t{ display:inline-flex; align-items:center; gap:6px; font-weight:500; font-size:.9rem; color:#C7C8CE; cursor:pointer; }
.navdrop__t:hover{ color:#fff; }
.navdrop__t svg{ transition:transform .2s var(--ease); }
.navdrop:hover .navdrop__t svg{ transform:rotate(180deg); }
.navdrop__menu{ position:absolute; top:100%; left:-14px; margin-top:14px; min-width:210px; background:#fff; border:1px solid var(--line);
    border-radius:8px; box-shadow:0 24px 44px -20px rgba(20,20,25,.4); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; z-index:90; }
.navdrop::after{ content:""; position:absolute; top:100%; left:0; right:0; height:20px; } /* hover bridge */
.navdrop:hover .navdrop__menu,.navdrop:focus-within .navdrop__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.navdrop__menu a{ display:block; padding:10px 14px; font-size:.9rem; font-weight:500; color:var(--ink); border-radius:5px; }
.navdrop__menu a:hover{ background:var(--tint); color:var(--red); }
.navdrop__lab{ display:block; margin-top:6px; padding:12px 14px 6px; border-top:1px solid var(--line);
    font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }

/* Checklist (servicing) */
.checklist{ list-style:none; margin:0; padding:0; columns:2; column-gap:40px; max-width:820px; }
.checklist li{ position:relative; padding:12px 0 12px 34px; border-bottom:1px solid var(--line); font-weight:500; break-inside:avoid; }
.checklist li::before{ content:""; position:absolute; left:2px; top:15px; width:18px; height:18px; border-radius:50%; background:var(--red-soft); }
.checklist li::after{ content:""; position:absolute; left:8px; top:19px; width:7px; height:4px; border-left:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg); }

/* Taxonomy grid (parts / attachments / towns) */
.taxgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.taxgrid--sm{ grid-template-columns:repeat(5,1fr); }
.tax{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 18px; font-weight:600; font-size:.92rem;
    display:flex; align-items:center; gap:10px; transition:border-color .18s var(--ease), transform .18s var(--ease); }
.sec--tint .tax{ background:#fff; }
.tax::before{ content:""; width:8px; height:8px; background:var(--red); border-radius:2px; flex:none; }
.tax:hover{ border-color:var(--red); transform:translateY(-2px); }
.brandline{ display:flex; align-items:center; gap:14px 32px; flex-wrap:wrap; margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.brandline .lab{ font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.brandline .b{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.15rem; color:var(--ink); opacity:.5; }
.brandline .b:hover{ opacity:1; }

/* About head */
.about-head__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:44px; align-items:center; }
.about-head h1{ color:#fff; text-transform:uppercase; font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-.01em; }
.about-head__stats{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line-dk); border:1px solid var(--line-dk); border-radius:10px; overflow:hidden; }
.about-head__stats div{ background:var(--char); padding:24px; }
.about-head__stats b{ font-family:var(--display); font-weight:800; font-size:2rem; color:#fff; display:block; line-height:1; }
.about-head__stats span{ font-size:.78rem; color:#A9AAB1; margin-top:8px; display:block; }

/* Prose (about) */
.prose h2{ font-family:var(--display); }
.prose p{ color:var(--muted); line-height:1.75; margin:14px 0 0; }

/* Contact */
.contact{ display:grid; grid-template-columns:1.35fr .65fr; gap:44px; align-items:start; }
.contact__form form{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:30px; }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; display:flex; flex-direction:column; }
.field label{ font-weight:600; font-size:.86rem; margin-bottom:7px; } .field label em{ color:var(--faint); font-style:normal; font-weight:500; }
.field input,.field select,.field textarea{ font:inherit; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r); background:#fff; color:var(--ink); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--red); }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }
.field .err{ color:var(--red-dk); font-size:.8rem; margin-top:5px; font-weight:600; }
.re-note{ background:var(--tint); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; font-size:.9rem; margin:0 0 20px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; }
.flash-ok{ background:#EAF6EE; border:1px solid #BFE3CC; color:#1C7A3F; border-radius:var(--r); padding:18px 22px; }
.flash-err{ background:var(--red-soft); border:1px solid #F3C2C4; color:var(--red-dk); border-radius:var(--r); padding:16px 20px; margin-bottom:20px; font-weight:600; }
.contact__branches{ display:flex; flex-direction:column; gap:16px; }
.cbranch{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px; }
.cbranch h2{ font-family:var(--display); font-weight:750; text-transform:uppercase; font-size:1.25rem; }
.cbranch .role{ font-weight:600; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:5px 0 14px; }
.cbranch address{ font-style:normal; color:var(--muted); font-size:.9rem; line-height:1.75; }
.cbranch address a{ color:var(--navy,#191A1E); font-weight:600; } .cbranch .tel{ font-family:var(--display); font-weight:750; font-size:1.3rem; color:var(--red); }
.cbranch .hrs{ color:var(--faint); font-size:.84rem; }

@media(max-width:900px){
    .taxgrid,.taxgrid--sm{ grid-template-columns:1fr 1fr; }
    .about-head__grid{ grid-template-columns:1fr; }
    .contact{ grid-template-columns:1fr; }
    .checklist{ columns:1; }
}
@media(max-width:560px){
    .taxgrid,.taxgrid--sm{ grid-template-columns:1fr; }
    .fgrid{ grid-template-columns:1fr; }
    .about-head__stats{ grid-template-columns:1fr; }
}

/* ============================================================================
   v3 polish pass — depth, texture, finish (listings/detail left as-is)
   ============================================================================ */

/* Filmic grain, whisper-quiet, sitewide */
body::after{ content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.028; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Charcoal pageheads: soft red ember + panel texture, text lifted above */
.pagehead{ position:relative; }
.pagehead .wrap{ position:relative; z-index:2; }
.pagehead::after{ content:""; position:absolute; top:-45%; right:-6%; width:min(560px,55vw); height:min(560px,55vw); z-index:1;
    background:radial-gradient(circle, rgba(228,34,43,.15), transparent 60%); pointer-events:none; }

/* Charcoal panels get an inset top highlight (subtle brushed look) */
.pricebox, .statbar .st, .about-head__stats div{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.pricebox{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 54px -36px rgba(0,0,0,.65); }

/* Deeper, more premium shadows on the light content components */
.bc, .serv, .branch, .cbranch, .quote{ box-shadow:0 1px 2px rgba(20,20,25,.04); }
.bc:hover, .serv:hover, .branch:hover{ box-shadow:0 30px 54px -30px rgba(20,20,25,.45); }

/* Section kickers get a touch more presence */
.kicker::before{ height:2px; }
.sec-head h2, .pagehead h1{ text-wrap:balance; }

/* Taxonomy → tidier, tactile chips */
.tax{ border-radius:8px; box-shadow:0 1px 2px rgba(20,20,25,.03); font-family:var(--display); font-weight:600; letter-spacing:.005em; text-transform:uppercase; font-size:.86rem; }
.tax:hover{ box-shadow:0 14px 26px -18px rgba(20,20,25,.35); }

/* Checklist → two-tone rows for a more finished look */
.checklist li{ padding-top:14px; padding-bottom:14px; }

/* Photographic band (atmosphere on content pages) */
.photoband{ position:relative; min-height:clamp(300px,40vw,440px); display:flex; align-items:flex-end; overflow:hidden;
    clip-path:polygon(0 0, 100% clamp(14px,2vw,30px), 100% 100%, 0 calc(100% - clamp(14px,2vw,30px))); }
.photoband img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 34%; }
.photoband::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(20,20,23,.9) 0%, rgba(20,20,23,.6) 46%, rgba(20,20,23,.18) 74%, rgba(228,34,43,.28) 100%),
               linear-gradient(0deg, rgba(20,20,23,.55), transparent 55%); }
.photoband .wrap{ position:relative; z-index:2; color:#fff; padding-bottom:clamp(34px,5vw,56px); }
.photoband .kicker{ color:#E4E5E8; }
.photoband h2{ color:#fff; text-transform:uppercase; font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:20ch; }
.photoband p{ color:#C7C8CE; margin:14px 0 0; max-width:52ch; }
.photoband__stats{ display:flex; gap:34px; margin-top:24px; }
.photoband__stats b{ font-family:var(--display); font-weight:800; font-size:1.9rem; color:#fff; display:block; line-height:1; }
.photoband__stats span{ font-size:.76rem; color:#B9BAC1; }

/* Hero + charcoal sections: hairline top edge for definition */
.statbar, .trust, .cta{ border-top:1px solid rgba(255,255,255,.06); }