/* ============================================================================
   Windmill Garage - "Cinematic" design system  (v3, photography-led)
   Dark, dramatic, full-bleed imagery. Bold neutral sans. Windmill blue accent.
   The photography carries the page; type and chrome get out of its way.
   ========================================================================== */

:root {
  --bg:    #0b0c0e;      /* near-black canvas */
  --bg-2:  #141619;      /* raised surface */
  --bg-3:  #1c1f23;
  --text:  #f5f5f4;
  --muted: rgba(245,245,244,.60);
  --faint: rgba(245,245,244,.40);
  --line:  rgba(245,245,244,.14);
  --line-2:rgba(245,245,244,.08);

  --blue:   #2b9fe3;     /* brighter Windmill blue - reads on dark */
  --blue-d: #0170b9;     /* the brand blue, for solid fills */
  --blue-ink:#015d9b;

  --max: 1320px;
  --gutter: clamp(20px, 4vw, 64px);

  --display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;

  --fs-hero: clamp(3rem, 1.2rem + 8vw, 8rem);
  --fs-h2:   clamp(2.2rem, 1.3rem + 3.4vw, 4.6rem);
  --fs-h3:   clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }
body {
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img,svg,iframe { display:block; max-width:100%; }
a { color: var(--text); text-decoration: none; transition: color .2s var(--ease); }
ul,ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

h1,h2,h3,h4 { font-family: var(--display); font-weight: 680; line-height: .98; letter-spacing: -0.03em; color: var(--text); }

.wrap { width:100%; max-width: var(--max); margin-inline:auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 8vw, 160px); }
.kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 12px; }
.kicker::before { content:""; width: 28px; height: 1px; background: var(--blue); }
.kicker--c { justify-content: center; }
.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.5; }

/* ---------- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 17px 30px; border-radius: 100px;
  font-family: var(--sans); font-weight: 600; font-size: .98rem; letter-spacing: -0.01em;
  background: var(--text); color: var(--bg); border: 1px solid var(--text);
  transition: transform .3s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }
.btn .ico { width: 17px; height: 17px; }
.btn--blue { background: var(--blue-d); border-color: var(--blue-d); color:#fff; }
.btn--blue:hover { background: var(--blue); border-color: var(--blue); }
.btn--ghost { background: transparent; color: var(--text); border-color: rgba(255,255,255,.28); }
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; color:#fff; transform: translateY(-2px); }
.tlink { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.98rem; color: var(--text); }
.tlink .ico { width:16px;height:16px; transition: transform .25s var(--ease); color: var(--blue); }
.tlink:hover { color: var(--blue); } .tlink:hover .ico { transform: translateX(4px); }

/* ---------- header ------------------------------------------------------- */
.site-header { position: fixed; top:0; left:0; right:0; z-index: 100; transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(11,12,14,.72); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom-color: var(--line-2); }
.nav { display:flex; align-items:center; gap: 30px; height: 80px; }
.brand { display:flex; align-items:center; gap: 11px; }
.brand__mark { width: 30px; height: 30px; color: var(--blue); }
.brand__name { font-family: var(--display); font-weight: 700; font-size: 1.28rem; letter-spacing: -0.03em; color:#fff; }
.nav__menu { display:flex; align-items:center; gap: 30px; margin-left:auto; }
.nav__link { font-weight: 500; font-size: .95rem; color: rgba(255,255,255,.82); }
.nav__link:hover { color:#fff; }
.nav__actions { display:flex; align-items:center; gap: 18px; }
.nav__phone { font-family: var(--mono); font-weight:700; font-size:.82rem; letter-spacing:.03em; color:#fff; display:inline-flex; align-items:center; gap:8px; }
.nav__phone .ico { width:15px;height:15px;color:var(--blue); }
.nav__phone:hover{color:var(--blue)}
.nav__toggle { display:none; width:46px;height:46px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:transparent;align-items:center;justify-content:center; }
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:"";display:block;width:18px;height:1.5px;background:#fff;transition:transform .3s var(--ease)}
.nav__toggle span::before{transform:translateY(-5px)} .nav__toggle span::after{transform:translateY(3.5px)}
@media (max-width: 980px){
  .nav__toggle{display:inline-flex;margin-left:auto}
  .nav__menu{display:none}
  .nav__menu.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:rgba(11,12,14,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:10px var(--gutter) 26px}
  .nav__menu.is-open .nav__link{padding:16px 0;font-size:1.15rem;border-bottom:1px solid var(--line-2)}
  .nav__menu.is-open .nav__actions{flex-direction:column;align-items:stretch;gap:14px;margin-top:20px}
  .nav__menu.is-open .nav__phone{justify-content:center}
  .nav__menu.is-open .btn{justify-content:center}
}

/* ---------- hero - full-bleed cinematic --------------------------------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width:100%; height:100%; object-fit: cover; transform: scale(1.06); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(11,12,14,.66) 0%, rgba(11,12,14,.18) 32%, rgba(11,12,14,.55) 72%, rgba(11,12,14,.96) 100%); }
.hero__inner { width:100%; padding-bottom: clamp(48px, 7vw, 110px); padding-top: 140px; }
.hero h1 { font-size: var(--fs-hero); font-weight: 720; letter-spacing: -0.045em; max-width: 16ch; }
.hero h1 .accent { color: var(--blue); }
.hero__sub { margin-top: 26px; font-size: var(--fs-lead); color: rgba(245,245,244,.86); max-width: 46ch; }
.hero__cta { display:flex; flex-wrap:wrap; gap: 16px; margin-top: 38px; }
.hero__facts { display:flex; flex-wrap:wrap; gap: 14px 40px; margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--line); }
.hero__fact { display:flex; flex-direction:column; gap:5px; }
.hero__fact b { font-family: var(--display); font-size: 1.5rem; font-weight: 680; color:#fff; letter-spacing:-0.02em; }
.hero__fact span { font-family: var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: var(--faint); }
.scrollcue { position:absolute; right: var(--gutter); bottom: clamp(48px,7vw,110px); z-index:1; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color: var(--faint); writing-mode: vertical-rl; display:flex; align-items:center; gap:12px; }
.scrollcue::after { content:""; width:1px; height:46px; background:linear-gradient(var(--blue),transparent); }
@media (max-width: 760px){ .scrollcue{display:none} }

/* ---------- section heads (dark) ---------------------------------------- */
.shead { max-width: 820px; margin-bottom: clamp(40px,4vw,72px); }
.shead--c { margin-inline:auto; text-align:center; }
.shead h2 { font-size: var(--fs-h2); margin-top: 22px; }
.shead p { margin-top: 22px; font-size: var(--fs-lead); color: var(--muted); }

/* ---------- service tiles (image-led) ----------------------------------- */
.tiles { display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media (max-width: 720px){ .tiles{grid-template-columns:1fr} }
.tile { position: relative; display:block; min-height: clamp(300px, 34vw, 460px); border-radius: 18px; overflow: hidden; isolation: isolate; }
.tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform .9s var(--ease); }
.tile::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(11,12,14,.1) 30%, rgba(11,12,14,.85) 100%); transition: background .5s; }
.tile:hover img { transform: scale(1.07); }
.tile:hover::after { background: linear-gradient(180deg, rgba(11,12,14,.2) 20%, rgba(43,159,227,.30) 100%); }
.tile__body { position:absolute; left:0; right:0; bottom:0; padding: clamp(24px,2.4vw,38px); display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.tile__num { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color: rgba(255,255,255,.7); }
.tile h3 { font-size: var(--fs-h3); color:#fff; margin-top: 8px; }
.tile p { color: rgba(255,255,255,.78); font-size:.96rem; margin-top:8px; max-width: 38ch; }
.tile__go { width:46px;height:46px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;transition:background .3s,border-color .3s; }
.tile__go .ico{width:18px;height:18px;color:#fff}
.tile:hover .tile__go{background:var(--blue);border-color:var(--blue)}

/* ---------- full-bleed feature band ------------------------------------- */
.band { position: relative; isolation: isolate; min-height: clamp(440px, 64vh, 720px); display:flex; align-items:center; overflow:hidden; }
.band__media { position:absolute; inset:0; z-index:-2; }
.band__media img { width:100%;height:100%;object-fit:cover; }
.band--left::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(11,12,14,.92) 0%, rgba(11,12,14,.6) 45%, rgba(11,12,14,.15) 100%); }
.band--center::after { content:""; position:absolute; inset:0; z-index:-1; background: rgba(11,12,14,.62); }
.band__inner { max-width: 640px; }
.band--center .band__inner { max-width: 760px; margin-inline:auto; text-align:center; }
.band h2 { font-size: var(--fs-h2); }
.band p { margin-top: 20px; font-size: var(--fs-lead); color: rgba(245,245,244,.84); }
.band .hero__cta { margin-top: 36px; }
.band--center .hero__cta { justify-content:center; }

/* ---------- figures ------------------------------------------------------ */
.figures { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: 16px; overflow:hidden; }
@media (max-width:680px){ .figures{grid-template-columns:1fr 1fr} }
.figures > div { background: var(--bg); padding: clamp(28px,3vw,46px); }
.figures b { display:block; font-family:var(--display); font-weight:700; font-size: clamp(2.6rem,1.5rem+3vw,4.4rem); letter-spacing:-0.04em; color:#fff; line-height:1; }
.figures b sup { color: var(--blue); font-size:.4em; vertical-align: super; }
.figures span { display:block; margin-top:14px; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }

/* ---------- split (about) ----------------------------------------------- */
.split { display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px,5vw,84px); align-items:center; }
@media (max-width:880px){ .split{grid-template-columns:1fr} }
.split__media { border-radius: 18px; overflow:hidden; aspect-ratio: 4/5; }
.split__media img { width:100%;height:100%;object-fit:cover; }
.checklist { margin-top: 30px; border-top:1px solid var(--line); }
.checklist li { display:grid; grid-template-columns:auto 1fr; gap:18px; padding: 22px 0; border-bottom:1px solid var(--line); }
.checklist .n { font-family:var(--mono); font-size:.74rem; color:var(--blue); padding-top:3px; }
.checklist b { font-family:var(--display); font-weight:640; font-size:1.18rem; color:#fff; display:block; margin-bottom:5px; }
.checklist p { font-size:.98rem; color: var(--muted); }

/* ---------- reviews ------------------------------------------------------ */
.bigscore { display:flex; align-items:baseline; gap: 22px; flex-wrap:wrap; }
.bigscore b { font-family:var(--display); font-weight:720; font-size: clamp(4rem,2rem+8vw,9rem); letter-spacing:-0.05em; color:#fff; line-height:.8; }
.bigscore .stars { color:#f0a500; font-size:1.5rem; letter-spacing:3px; }
.bigscore span { font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---------- news --------------------------------------------------------- */
.news { border-top:1px solid var(--line); }
.news a.news-row { display:grid; grid-template-columns: 150px 1fr auto; gap:24px; align-items:center; padding:28px 4px; border-bottom:1px solid var(--line); transition: padding-left .3s var(--ease); }
.news a.news-row:hover { padding-left: 10px; }
.news .tag { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.news h3 { font-size:1.3rem; font-weight:600; color: var(--text); }
.news .ico { width:18px;height:18px;color:var(--faint); justify-self:end; }
.news a.news-row:hover .ico{color:var(--blue)}
@media (max-width:640px){ .news a.news-row{grid-template-columns:1fr auto} .news .tag{grid-column:1} }

/* ---------- footer ------------------------------------------------------- */
.site-footer { background: var(--bg); border-top:1px solid var(--line); padding-block: clamp(60px,5vw,92px) 30px; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; }
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;gap:36px} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand .brand__name{color:#fff}
.footer-brand p { margin-top:18px; font-size:.95rem; color:var(--muted); max-width:34ch; }
.footer-social { display:flex; gap:10px; margin-top:20px; }
.footer-social a { width:42px;height:42px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--text); }
.footer-social a:hover { background:var(--blue);border-color:var(--blue);color:#fff; }
.footer-col h4 { font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.footer-col li { margin-bottom:12px; }
.footer-col a,.footer-contact a { color:var(--muted); font-size:.95rem; }
.footer-col a:hover,.footer-contact a:hover { color:#fff; }
.footer-contact li { display:flex; gap:12px; margin-bottom:15px; font-size:.94rem; align-items:flex-start; color:var(--muted); }
.footer-contact .ico { width:16px;height:16px;color:var(--blue);flex:0 0 auto;margin-top:3px; }
.footer-bottom { margin-top:50px;padding-top:26px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--faint); }
.footer-bottom a{color:var(--muted)}

/* ---------- reveal ------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}[data-reveal-delay="2"]{transition-delay:.16s}[data-reveal-delay="3"]{transition-delay:.24s}

/* ============================================================================
   INNER-PAGE COMPONENTS (dark cinematic) - added for the full rollout
   ========================================================================== */

/* alt surface + section-head alias (inner pages use .section-head / .section--paper) */
.section--alt, .section--paper { background: var(--bg-2); }
.section-head { max-width: 820px; margin-bottom: clamp(40px,4vw,72px); }
.section-head--center, .section-head--c { margin-inline:auto; text-align:center; }
.section-head h2 { font-size: var(--fs-h2); margin-top: 22px; }
.section-head p { margin-top: 22px; font-size: var(--fs-lead); color: var(--muted); max-width: 62ch; }
.rule { height:1px; background: var(--line); border:0; }

/* ---------- inner page hero (shorter cinematic band) -------------------- */
.page-hero { position: relative; isolation: isolate; min-height: clamp(420px, 62vh, 640px); display:flex; align-items:flex-end; overflow:hidden; }
.page-hero__media { position:absolute; inset:0; z-index:-2; }
.page-hero__media img { width:100%; height:100%; object-fit:cover; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(11,12,14,.7) 0%, rgba(11,12,14,.35) 36%, rgba(11,12,14,.72) 100%); }
.page-hero__inner { width:100%; padding-block: clamp(40px,6vw,84px); padding-top: 150px; }
.page-hero h1 { font-size: clamp(2.6rem,1.4rem+4.6vw,5.2rem); font-weight:720; letter-spacing:-0.04em; max-width: 18ch; }
.page-hero h1 .accent { color: var(--blue); }
.page-hero__lead { margin-top: 22px; font-size: var(--fs-lead); color: rgba(245,245,244,.86); max-width: 52ch; }
.breadcrumb { font-family: var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--faint); margin-bottom: 18px; display:flex; gap:10px; flex-wrap:wrap; }
.breadcrumb a { color: var(--faint); } .breadcrumb a:hover{ color: var(--blue); }
.breadcrumb span { color: rgba(245,245,244,.3); }
.page-hero .hero__cta { margin-top: 32px; }

/* ---------- spec table (dark) ------------------------------------------- */
.spec { border-top:1px solid var(--line); }
.spec__row { display:grid; grid-template-columns: 110px 1.1fr 1.5fr auto; gap:24px; align-items:center; padding:30px 6px; border-bottom:1px solid var(--line); transition: background .25s var(--ease), padding-left .25s var(--ease); }
.spec__row:hover { background: var(--bg-2); padding-left: 14px; }
.spec__num { font-family:var(--mono); font-size:.78rem; color:var(--blue); letter-spacing:.04em; }
.spec__name { font-family:var(--display); font-weight:640; font-size: var(--fs-h3); color:#fff; }
.spec__desc { color: var(--muted); font-size: 1rem; }
.spec__go { justify-self:end; }
@media (max-width:820px){ .spec__row{ grid-template-columns: 56px 1fr; gap:6px 16px; } .spec__desc{grid-column:2} .spec__go{grid-column:2;justify-self:start;margin-top:8px} }

/* generic price/spec table */
.dtable { width:100%; border:1px solid var(--line); border-radius:14px; overflow:hidden; border-collapse:separate; border-spacing:0; }
.dtable th, .dtable td { text-align:left; padding:16px 20px; border-bottom:1px solid var(--line); font-size:.96rem; }
.dtable th { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); background: var(--bg-2); }
.dtable td { color: var(--muted); } .dtable td:first-child { color:#fff; }
.dtable tr:last-child td { border-bottom:0; }
.dtable .price { font-family:var(--display); font-weight:680; color:#fff; }

/* ---------- panel / cards ----------------------------------------------- */
.panel { background: var(--bg-2); border:1px solid var(--line); border-radius:16px; padding: clamp(24px,3vw,40px); }
.cardgrid { display:grid; gap:16px; }
.cardgrid--2{ grid-template-columns:repeat(2,1fr) } .cardgrid--3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:820px){ .cardgrid--2,.cardgrid--3{ grid-template-columns:1fr } }
.icard { background: var(--bg-2); border:1px solid var(--line); border-radius:16px; padding: clamp(22px,2.4vw,32px); transition: border-color .3s, transform .3s var(--ease); }
.icard:hover { border-color: rgba(43,159,227,.5); transform: translateY(-3px); }
.icard h3 { font-size:1.25rem; color:#fff; margin-bottom:10px; }
.icard p { color: var(--muted); font-size:.97rem; }

/* feature checklist on dark (reuse .checklist; add a tick variant) */
.ticks { margin-top: 26px; display:grid; gap:16px; }
.ticks li { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:flex-start; color:var(--muted); }
.ticks .tick { width:24px;height:24px;border-radius:50%;background:rgba(43,159,227,.14);color:var(--blue);display:grid;place-items:center;flex:0 0 auto;margin-top:2px; }
.ticks .tick .ico{ width:14px;height:14px } .ticks b{ color:#fff; font-family:var(--display); font-weight:600; }

/* ---------- visit / hours / map (dark) ---------------------------------- */
.visit { display:grid; grid-template-columns: 1fr 1.25fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
@media (max-width:860px){ .visit{grid-template-columns:1fr} }
.visit__info { padding: clamp(26px,3vw,44px); border-right:1px solid var(--line); background: var(--bg-2); }
@media (max-width:860px){ .visit__info{ border-right:0; border-bottom:1px solid var(--line) } }
.hours-list { margin-top:14px; border-top:1px solid var(--line); }
.hours-list li { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line-2); font-family:var(--mono); font-size:.82rem; letter-spacing:.03em; }
.hours-list li:last-child{ border-bottom:0 }
.hours-list .day { color:#fff; text-transform:uppercase; } .hours-list .closed{ color:var(--faint) } .hours-list .now{ color:var(--blue) }
.visit__addr { margin-top:22px; display:flex; gap:12px; font-size:.96rem; color:var(--muted); }
.visit__addr .ico{ width:18px;height:18px;color:var(--blue);flex:0 0 auto;margin-top:3px }
.map-frame { min-height: 360px; }
.map-frame iframe { width:100%; height:100%; min-height:360px; border:0; filter: grayscale(1) invert(.92) contrast(.9); transition: filter .4s var(--ease); }
.map-frame:hover iframe { filter: grayscale(.2) invert(.9) contrast(.95); }

/* ---------- forms (dark) ------------------------------------------------- */
.form { display:grid; gap:18px; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr } }
.form__field { display:flex; flex-direction:column; gap:8px; }
.form__field label { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.form input, .form textarea, .form select {
  width:100%; padding:14px 16px; background: var(--bg); color:var(--text);
  border:1px solid var(--line); border-radius:10px; font:inherit; font-size:1rem; transition: border-color .2s;
}
.form input::placeholder, .form textarea::placeholder { color: var(--faint); }
.form input:focus, .form textarea:focus, .form select:focus { outline:none; border-color: var(--blue); }
.form textarea { min-height:140px; resize:vertical; }

/* ---------- CTA band (dark, when not using full .band) ------------------ */
.cta { border:1px solid var(--line); border-radius:20px; background: var(--bg-2); padding: clamp(40px,5vw,72px) clamp(26px,4vw,60px); }
.cta h2 { font-size: var(--fs-h2); max-width: 20ch; }
.cta p { margin-top:18px; max-width:50ch; font-size:var(--fs-lead); color:var(--muted); }
.cta .hero__cta { margin-top:32px; }

/* ---------- portrait fallback (when no photo yet) ----------------------- */
.portrait { aspect-ratio:4/5; border:1px solid var(--line); border-radius:18px; background: var(--bg-2); position:relative; overflow:hidden; }
.portrait img { width:100%; height:100%; object-fit:cover; }
.portrait__label { position:absolute; left:18px; bottom:16px; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); z-index:1; }

/* ---------- long-form article (guide page) ------------------------------ */
.article { display:grid; grid-template-columns: 240px 1fr; gap: clamp(32px,5vw,72px); align-items:start; }
@media (max-width:900px){ .article{ grid-template-columns:1fr } .toc{ position:static!important; display:none } }
.toc { position: sticky; top: 110px; }
.toc h2 { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.toc li { margin-bottom:11px; } .toc a { font-size:.92rem; color:var(--muted); } .toc a:hover{ color:var(--blue) }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: clamp(1.6rem,1.2rem+1.4vw,2.3rem); margin-top: 1.8em; color:#fff; }
.prose h3 { font-size: 1.35rem; margin-top: 1.5em; color:#fff; }
.prose p, .prose li { color: rgba(245,245,244,.78); font-size: 1.08rem; line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-top:.5em; } .prose ul li { list-style: disc; } .prose ol li { list-style: decimal; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left:2px solid var(--blue); padding:6px 0 6px 22px; margin-left:0; color:#fff; font-family:var(--display); font-size:1.3rem; font-weight:500; }
.prose strong { color:#fff; }
.callout { border:1px solid var(--line); border-radius:14px; background: var(--bg-2); padding:22px 24px; }
.callout .kicker{ margin-bottom:10px } .callout p{ color:var(--muted) }
.article-hero { padding-top: 160px; }
.article-meta { font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-top:20px; }

/* ---------- review cards (customer reviews page) ------------------------ */
.reviews-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
@media (max-width:760px){ .reviews-grid{ grid-template-columns:1fr } }
.review-card { background: var(--bg-2); border:1px solid var(--line); border-radius:16px; padding: clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:18px; }
.review-card--wide { grid-column: 1 / -1; }
@media (max-width:760px){ .review-card--wide{ grid-column:auto } }
.review-card__meta { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line-2); }
.review-card__stars { color:#f0a500; font-size:.92rem; letter-spacing:3px; }
.review-card__when { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.review-card__text { color: rgba(245,245,244,.78); font-size:1.02rem; line-height:1.7; flex:1; white-space:pre-line; }
.review-card__author { font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; display:inline-flex; align-items:center; gap:12px; }
.review-card__author::before { content:""; width:22px; height:1px; background: var(--blue); }

/* ---------- MOT checker -------------------------------------------------- */
.section--tight { padding-block: clamp(40px, 4vw, 72px); }
.mot-check { background: var(--bg-2); border:1px solid var(--line); border-radius:18px; padding: clamp(26px,3.4vw,48px); display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,4vw,64px); align-items:center; }
@media (max-width:860px){ .mot-check{ grid-template-columns:1fr } }
.mot-check h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); margin-top: 18px; }
.mot-check__sub { margin-top: 14px; color: var(--muted); font-size: 1rem; max-width: 44ch; }
.mot-check__form { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
@media (max-width:520px){
  .mot-check__form{ flex-direction:column; align-items:stretch }
  .mot-check__form .btn{ justify-content:center }
  .mot-check__form .plate{ flex:0 0 auto; width:100%; }
}

/* UK number-plate input: blue GB band + yellow plate face */
.plate { display:flex; align-items:stretch; border-radius:6px; overflow:hidden; border:2px solid #14151a; flex:1 1 240px; max-width: 340px; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
@media (max-width:520px){ .plate{ max-width:none } }
.plate__band { flex:0 0 38px; background:#003399; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:7px; font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.02em; }
.plate__input { flex:1; min-width:0; border:0; background:#FBD938; color:#0b0c0e;
  font-family: var(--display); font-weight:800; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem); letter-spacing:.08em;
  text-transform: uppercase; text-align:center; padding: 12px 10px; }
.plate__input::placeholder { color: rgba(11,12,14,.38); font-weight:700; }
.plate__input:focus { outline:none; background:#ffe14d; }
.plate:focus-within { border-color: var(--blue); }

/* result states */
.mot-check__result { margin-top: 22px; border-top:1px solid var(--line); padding-top: 20px; }
.mot-check__result[hidden] { display:none; }
.mot-check__vehicle { font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.mot-check__due { font-family:var(--display); font-weight:700; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); letter-spacing:-0.02em; color:#fff; line-height:1.05; }
.mot-check__due--urgent { color:#ff7a59; }
.mot-check__msg { margin-top:10px; color: var(--muted); font-size:.98rem; max-width: 48ch; }
.mot-check__msg a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.mot-check__msg b { color:#fff; }
.mot-check__cta { margin-top: 20px; }
.mot-check__result--error .mot-check__msg { color: rgba(255,176,150,.92); }
.mot-check__result .tlink { margin-top: 14px; }
.mot-check__note { margin-top: 18px; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: var(--faint); }

/* ---------- brand tagline ------------------------------------------------ */
.brand__text { display:flex; flex-direction:column; gap:3px; line-height:1; }
.brand__tag { font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
@media (max-width:560px){ .brand__tag{display:none} }

/* ---------- family car cross-section ------------------------------------ */
.xsection { display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px,4vw,72px); align-items:center; }
@media (max-width:880px){ .xsection{grid-template-columns:1fr} }
.xsection__fig { position:relative; }
.xsection__fig svg { width:100%; height:auto; display:block; }
.xsection__cap { margin-top:14px; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); text-align:center; }
.xnotes { border-top:1px solid var(--line); }
.xnotes li { display:grid; grid-template-columns:auto 1fr; gap:16px; padding:17px 0; border-bottom:1px solid var(--line); }
.xnotes .n { font-family:var(--mono); font-size:.74rem; color:var(--blue); padding-top:4px; }
.xnotes b { font-family:var(--display); font-weight:640; font-size:1.1rem; color:#fff; display:block; }
.xnotes p { font-size:.93rem; color:var(--muted); margin-top:3px; }
.xnotes__go { font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.xnotes__go:hover { color:#fff; }

/* ---------- hero MOT checker (frosted panel above the facts row) --------- */
.hero__mot {
  margin-top: 40px; max-width: 620px;
  background: rgba(11,12,14,.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  text-align: center;
}
.hero__mot-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(245,245,244,.66); margin-bottom: 16px; }
.hero__mot .mot-check__form { justify-content: center; }
.hero__mot .mot-check__form .plate { box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.hero__mot .mot-check__result { text-align: left; background: rgba(11,12,14,.55); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-top: 18px; }

/* contact form success state */
.form-success { text-align: left; }
.form-success .kicker { color: var(--blue); }

/* ---------- skip link (a11y, hidden until keyboard focus) ----------------- */
.skip-link {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1000;
  padding: 12px 22px;
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: .9rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  transform: translateY(-200%);
  transition: transform .2s var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}