/* AutoFeed homepage. Mobile first — every media query below is min-width.
   Tokens come from the design system; nothing here invents a value. */

/* --- shared page furniture --- */
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:60;padding:12px 16px;background:var(--af-orange);color:#fff;border:0;border-radius:var(--radius-sm);font-weight:var(--weight-semibold)}
.skip:focus{top:var(--space-3)}
a.plain{border-bottom:0}
.label{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.label::before{content:"";flex:0 0 auto;width:28px;height:2px;background:var(--af-orange)}
.label .idx{font-family:var(--font-mono);color:var(--af-orange)}
.h-scene{font-size:var(--display-sm);text-transform:uppercase;font-weight:800}
.lede{font-size:var(--text-lg);color:var(--text-body);max-width:46ch}
.support{font-size:var(--text-sm);color:var(--text-muted);max-width:52ch}
.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.stack-loose{display:flex;flex-direction:column;gap:var(--space-7)}
.rule{border:0;border-top:1px solid var(--border-default);margin:0}

/* --- actions --- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--space-6);font-family:var(--font-text);font-size:var(--text-base);font-weight:var(--weight-semibold);border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:var(--transition-control)}
.btn--primary{background:var(--action-bg);border-color:var(--action-bg);color:var(--action-fg)}
.btn--primary:hover{background:var(--action-bg-hover);border-color:var(--action-bg-hover);color:var(--action-fg)}
.btn--primary:active{background:var(--action-bg-active);border-color:var(--action-bg-active)}
.btn--secondary{color:var(--text-heading);border-color:var(--border-strong);background:transparent}
.btn--secondary:hover{background:var(--surface-panel);color:var(--text-heading);border-color:var(--border-strong)}
.btn--lg{min-height:64px;padding:0 var(--space-7);font-size:var(--text-lg)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* Nav jumps clear the sticky header. Scroll geometry only: no dimension,
   spacing or navigation change. */
#main,
main > section[id]{scroll-margin-top:calc(var(--header-height) + var(--space-5))}

/* --- header --- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(24,27,30,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--af-border)}
.hdr{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--header-height)}
.brand{display:flex;align-items:center;gap:var(--space-3)}
.brand img{height:32px;width:auto}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);letter-spacing:.02em;text-transform:uppercase;color:var(--af-white);line-height:1}
.brand-sub{display:none;font-size:10px;font-weight:var(--weight-semibold);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-top:3px}
@media (min-width:600px){.brand-sub{display:block}}
.af-nav a{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-body);border-bottom:0;min-height:44px;display:inline-flex;align-items:center}
.af-nav a:hover{color:var(--af-orange-hover)}
.af-nav[data-open="true"] a{padding-block:var(--space-1)}

/* --- 01 hero: the art-directed brand image carries the scene --- */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:100svh;padding-block:var(--space-9) var(--space-8);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:translateY(var(--iy,0px)) scale(1.04)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(17,19,21,.97) 6%,rgba(17,19,21,.86) 34%,rgba(17,19,21,.3) 66%,rgba(17,19,21,.5) 100%)}
.hero-copy{position:relative;display:flex;flex-direction:column;gap:var(--space-6);width:100%;transform:translateY(var(--sy,0px))}
.hero h1{font-size:clamp(2.35rem,5.4vw,4.75rem);text-transform:uppercase;font-weight:800}
.hero h1 .quiet{color:var(--af-text-secondary)}
.hero p{font-size:var(--text-lg);color:var(--text-body);max-width:38ch}
.hero-meta{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.hero-meta::before{content:"";width:28px;height:2px;background:var(--af-orange)}
@media (min-width:900px){
  /* Desktop shows the landscape art uncropped: image and copy share one grid cell. */
  .hero{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:auto;padding:0}
  .hero-copy{padding-block:var(--space-8)}
  .hero>*{grid-area:1 / 1}
  .hero-bg{position:relative;inset:auto;z-index:0;align-self:stretch}
  .hero-bg img{width:100%;height:100%;aspect-ratio:16 / 9;object-fit:cover;object-position:72% 50%;transform:translateY(var(--iy,0px)) scale(1.02)}
  .hero::after{z-index:1;background:linear-gradient(to right,rgba(17,19,21,.98) 0%,rgba(17,19,21,.95) 38%,rgba(17,19,21,.72) 56%,rgba(17,19,21,.22) 80%)}
  .hero-copy{z-index:2;max-width:none}
  .hero-copy>*{max-width:42ch}
  .hero h1{max-width:15ch}
}

/* --- 04 automotive work: a compact proof strip, not a portfolio chapter --- */
.h-proof{font-size:clamp(1.75rem,3vw,2.75rem);text-transform:uppercase;font-weight:800}
.proof-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
@media (min-width:600px){.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
@media (min-width:1200px){.proof-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}}
.proof{margin:0;display:flex;flex-direction:column;gap:var(--space-4)}
.proof-media{position:relative;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--af-border);border-radius:var(--radius-md);background:var(--af-graphite)}
.proof-media img{width:100%;height:100%;object-fit:cover;object-position:top center}
.proof-cap{display:flex;flex-direction:column;gap:var(--space-2)}
.proof-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.proof-kicker b{color:var(--af-orange);font-weight:var(--weight-medium)}
.proof-name{font-size:var(--text-lg);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.proof p{font-size:var(--text-sm);color:var(--text-body)}

/* --- 03 dealer hub: proof, one primary screenshot per dealer --- */
.hub{background:var(--surface-section)}
.hub-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
@media (min-width:900px){.hub-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-9);align-items:end}}
.note{border-top:1px solid var(--border-default);padding-top:var(--space-4);font-size:var(--text-sm);color:var(--text-muted);max-width:46ch}
.note strong{color:var(--af-white);font-weight:var(--weight-semibold)}
.hub-stack{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-8)}
@media (min-width:900px){.hub-stack{margin-top:var(--space-9);gap:0}}
.dealer{margin:0;display:flex;flex-direction:column;gap:var(--space-4)}
.dealer-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-default)}
.dealer-bar h3{font-size:clamp(1.25rem,2.2vw,1.75rem);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.dealer-bar span{font-size:var(--text-sm);color:var(--text-muted)}
.dealer-shot{position:relative;overflow:hidden;border:1px solid var(--af-border);border-radius:var(--radius-md);background:var(--af-black)}
.dealer-shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
@media (min-width:900px){
  .dealer-shot{aspect-ratio:16/9}
  .hub-stack .dealer{position:sticky;top:calc(var(--header-height) + var(--space-6));background:var(--surface-section);padding-bottom:var(--space-6);margin-bottom:26vh;transform:translateY(calc(var(--p,0) * -14px)) scale(calc(1 - var(--p,0) * .04));opacity:calc(1 - var(--p,0) * .5);transform-origin:50% 0}
  .hub-stack .dealer:last-child{margin-bottom:0}
  .dealer--pair{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);gap:var(--space-5);align-items:start}
  .dealer--pair .dealer-bar{grid-column:1 / -1}
  .dealer--pair .dealer-aside{margin-top:var(--space-8)}
  .dealer--pair .dealer-aside .dealer-shot{aspect-ratio:4/5}
}

/* Live demo panel: the loudest thing in the Dealer Hub scene. */
.live-demo{margin-top:var(--space-7);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-6);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-panel)}
@media (min-width:900px){.live-demo{margin-top:var(--space-8);padding:var(--space-7) var(--space-8)}}
.live-demo-line{font-family:var(--font-display);font-size:clamp(1.375rem,2.6vw,2.125rem);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);text-transform:uppercase;color:var(--text-heading);max-width:22ch}

/* --- 04 vehicle data: bespoke, no project screenshots --- */
.data-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
@media (min-width:900px){.data-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-9);align-items:start}}
.reg-block{display:flex;flex-direction:column;gap:var(--space-6)}
@media (min-width:900px){.reg-block{position:sticky;top:calc(var(--header-height) + var(--space-7))}}
.plate{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:stretch}
.plate input{flex:1 1 220px;min-width:0;height:76px;padding:0 var(--space-5);font-family:var(--font-mono);font-weight:var(--weight-medium);font-size:clamp(1.5rem,3.4vw,2.25rem);letter-spacing:.06em;color:var(--af-white);background:var(--af-graphite);border:1px solid var(--af-border-strong);border-radius:var(--radius-sm)}
.plate .btn{min-height:76px}
.data-panel{position:relative;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-section);padding:var(--space-6)}
@media (min-width:900px){.data-panel{padding:var(--space-8)}}
.data-panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-default);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.data-panel-head .in{color:var(--af-white)}
.data-panel-head .arrow{color:var(--af-orange)}
.spec{display:grid;grid-template-columns:minmax(0,1fr);margin:0}
@media (min-width:1200px){.spec{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-8)}}
.spec div{display:grid;grid-template-columns:minmax(120px,34%) minmax(0,1fr);gap:var(--space-4);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--border-default)}
.spec dt{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.spec dd{margin:0;font-size:var(--text-lg);font-weight:var(--weight-medium);color:var(--text-heading);font-variant-numeric:tabular-nums}
.data-foot{margin-top:var(--space-5)}

/* --- 03 capabilities: the centre of the page --- */
.h-scene--lead{font-size:clamp(2.75rem,5.2vw,5.25rem)}
.caps{border-top:1px solid var(--border-default)}
.cap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);padding:var(--space-7) 0;border-bottom:1px solid var(--border-default)}
@media (min-width:900px){.cap{grid-template-columns:minmax(0,1fr) minmax(0,5fr) minmax(0,6fr);gap:var(--space-8);align-items:baseline;padding:var(--space-8) 0}}
.cap .n{font-family:var(--font-mono);font-size:var(--text-base);color:var(--af-orange)}
.cap h3{font-size:clamp(1.375rem,2.1vw,2rem);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.cap p{font-size:var(--text-lg);color:var(--text-body);max-width:52ch}

/* --- 07 closing --- */
.closing{background:var(--surface-section);border-top:1px solid var(--border-default)}
.closing h2{font-size:var(--display-md);text-transform:uppercase;font-weight:800;max-width:22ch}
.closing p{font-size:var(--text-lg);color:var(--text-body);max-width:44ch}

/* --- footer --- */
.site-footer{border-top:1px solid var(--af-border);background:var(--af-black);padding-block:var(--space-8) var(--space-7)}
.foot{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
@media (min-width:600px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.foot{grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:var(--space-8)}}
.foot-col{display:flex;flex-direction:column;gap:var(--space-3)}
.foot-col h2{font-family:var(--font-text);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.foot-col a{font-size:var(--text-sm);color:var(--text-body);border-bottom:0;min-height:44px;display:inline-flex;align-items:center}
.foot-col a:hover{color:var(--af-orange-hover)}
.foot-brand img{height:40px;width:auto;align-self:flex-start}
.foot-note{margin-top:var(--space-5);font-size:var(--text-xs);color:var(--text-muted)}
.foot-rule{margin-top:var(--space-8)}

/* Values carried over from the reference markup's inline styles. */
.hub-foot{margin-top:var(--space-7)}
.reg-fields{gap:var(--space-3)}

/* --- enhancement: entrance reveals. Content is visible by default; only an
       enhanced document hides it, and only from the md step up. --- */
@media (min-width:900px){
  html[data-enhanced] [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--motion-slow) var(--ease-default),transform var(--motion-slow) var(--ease-default)}
  html[data-enhanced] [data-reveal].is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html[data-enhanced] [data-reveal]{opacity:1 !important;transform:none !important}
  .hero-copy,.hero-bg img,.hub-stack .dealer{transform:none !important;opacity:1 !important}
}