/* Scervino Automotive — Direction B, 1940s–60s dealership showroom.
   Black, charcoal, and silver. Semplicita via local @font-face (WOFF2 + OTF);
   the licence covers web embedding. */
@font-face{font-family:"Semplicita";src:url("fonts/Semplicita-Medium.woff2") format("woff2"),url("fonts/Semplicita-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Semplicita";src:url("fonts/Semplicita-MediumItalic.woff2") format("woff2"),url("fonts/Semplicita-MediumItalic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Semplicita";src:url("fonts/Semplicita-Bold.woff2") format("woff2"),url("fonts/Semplicita-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Semplicita Ombra";src:url("fonts/Semplicita-Ombra.woff2") format("woff2"),url("fonts/Semplicita-Ombra.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --page:#e8eaee; --page-2:#d5dae1; --paper:#f7f8fa; --card:#f3f5f7;
  --black:#14171b; --black-deep:#0a0b0d; --charcoal:#2c3138;
  --gunmetal:#3c4551; --steel:#5c656f;
  --ink:#14171b; --ink-2:#2a3038; --muted:#454c55;
  --on-dark:#f4f5f7; --on-dark-soft:#d7dbe2;
  --silver:#d5d8de; --silver-bright:#e7eaef;
  --chrome:linear-gradient(180deg,#fdfdfd 0%,#c9cbcd 35%,#8e9194 50%,#d9dbdd 65%,#f5f5f5 100%);
  --body:"Semplicita",Futura,"Century Gothic",system-ui,sans-serif;
  --display:"Semplicita Ombra","Semplicita",Futura,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:88px;
  --nav-h:66px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{overflow-x:hidden}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);font-weight:500;font-size:18px;line-height:1.6;overflow-x:hidden;
  background-image:radial-gradient(rgba(16,18,22,.07) 1px,transparent 1px);background-size:5px 5px}
a{color:var(--black)}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.1;margin:0}
p{margin:0 0 var(--s2)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-100px;z-index:100;background:var(--ink);color:var(--on-dark);padding:12px 18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:14px;text-decoration:none;border:3px solid var(--silver)}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--silver-bright)}
.feature :focus-visible,.footer :focus-visible{outline-color:var(--on-dark);box-shadow:0 0 0 6px var(--silver)}



.nav{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,#fbfcfd,#e4e7ec);border-bottom:3px solid var(--black);box-shadow:0 2px 0 #9fa3a6,0 6px 16px rgba(0,0,0,.12)}
.nav-inner{max-width:1180px;margin:0 auto;padding:0 var(--s3);height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex-shrink:0}
.badge-mini{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--black);color:var(--on-dark);font-weight:700;font-size:14px;box-shadow:inset 0 0 0 2px var(--black),inset 0 0 0 4px var(--silver),0 0 0 2px #9fa3a6,0 2px 6px rgba(0,0,0,.25)}
.nav-name{font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:15px}
.nav-name em{font-style:normal;font-weight:500;color:var(--black)}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav-links a{display:block;padding:10px 12px;text-decoration:none;color:var(--ink-2);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.nav-links a:hover{color:var(--on-dark);background:var(--black)}
.nav-toggle,.nav-toggle-label{display:none}

.chrome-rule{height:7px;background:var(--chrome);border-top:1px solid #777;border-bottom:1px solid #777;max-width:240px;margin:var(--s2) auto 0;box-shadow:0 1px 0 #fff inset}

.hero{position:relative;text-align:center;padding:var(--s5) var(--s3) 0;background:
  radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.16),transparent 55%),
  linear-gradient(180deg,#0b0c0e 0%,#14171b 42%,#23272e 100%);
  color:var(--on-dark);border-bottom:8px solid #8e9194;overflow:hidden}
.showroom-frame{position:absolute;inset:16px;border:1px solid rgba(210,216,224,.45);pointer-events:none;box-shadow:inset 0 0 0 8px rgba(0,0,0,.25)}
.hero-inner{max-width:920px;margin:0 auto;padding-bottom:var(--s5);position:relative}
.eyebrow{font-weight:500;letter-spacing:.3em;text-transform:uppercase;font-size:12px;color:var(--silver-bright);margin-bottom:var(--s3)}
.eyebrow span{display:inline-block;margin-right:10px;padding:3px 8px;border:1px solid var(--silver);letter-spacing:.18em}
.neon-badge{width:88px;height:88px;margin:0 auto var(--s3);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#4a515b,var(--black) 58%,var(--black-deep));
  box-shadow:0 0 0 3px var(--silver-bright),0 0 18px rgba(210,216,224,.5),0 0 0 8px rgba(0,0,0,.4),inset 0 0 12px rgba(255,255,255,.2)}
.neon-badge span{font-weight:700;color:var(--on-dark);font-size:28px;text-shadow:0 0 12px rgba(230,234,240,.75)}
.wordmark{margin:0 0 var(--s3)}
.wm-script{display:block;font-family:var(--display);font-weight:400;font-size:clamp(58px,11vw,130px);line-height:.9;color:#f2f4f7;
  text-shadow:0 1px 0 #fff,0 2px 0 #aeb4bc,0 0 16px rgba(210,216,224,.45),2px 3px 0 rgba(0,0,0,.5);letter-spacing:.02em}
.wm-chrome{display:inline-block;margin-top:14px;font-weight:700;font-size:clamp(18px,3vw,28px);letter-spacing:.42em;text-transform:uppercase;padding:10px 28px 10px calc(28px + .42em);
  color:var(--ink);background:var(--chrome);border-top:2px solid #fff;border-bottom:2px solid #666;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.tagline{display:inline-block;margin:0 auto var(--s3);font-style:italic;font-weight:500;font-size:20px;color:var(--on-dark);border-bottom:1px solid rgba(210,216,224,.65);padding-bottom:6px}
.hero-lede{font-size:clamp(17px,2vw,21px);max-width:640px;margin:0 auto var(--s2);color:rgba(228,231,236,.94)}
.hero-ctas{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s2)}

.btn{display:inline-block;font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:13px 22px;border:2px solid transparent;cursor:pointer;text-align:center}
.btn-red{background:var(--black);color:var(--on-dark);border-color:var(--silver);box-shadow:0 0 0 1px var(--black-deep),0 4px 0 var(--black-deep)}
.btn-red:hover{background:var(--charcoal)}
.btn-outline{background:transparent;color:var(--on-dark);border-color:var(--silver-bright)}
.btn-outline:hover{background:var(--silver-bright);color:var(--ink)}
.btn-mustard{background:var(--silver);color:var(--ink);border-color:#6e757e;box-shadow:0 3px 0 #5c636c}
.btn-mustard:hover{background:#eef0f3}
.btn-disabled{background:#e2e5e9;color:#3a4048;border:2px dashed #7b828b;cursor:not-allowed}

.dept-rail{background:var(--paper);border-top:4px solid var(--black);box-shadow:inset 0 8px 0 var(--chrome)}
.dept-rail ol{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(4,1fr)}
.dept-rail li{border-left:1px solid rgba(28,26,23,.15)}
.dept-rail li:first-child{border-left:0}
.dept-rail a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--s3) var(--s1);text-decoration:none;color:var(--ink);height:100%}
.dept-rail a:hover .rail-name{color:var(--black)}
.rail-no{font-family:var(--display);font-size:28px;color:var(--black);line-height:1;text-shadow:1px 1px 0 var(--silver)}
.rail-name{font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:15px}
.rail-sub{font-size:13px;color:var(--muted)}

.section{padding:var(--s6) var(--s3)}
.wrap{max-width:1120px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:var(--s5)}
.sec-kicker{display:inline-block;margin:0 0 var(--s2);font-weight:700;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--on-dark);background:var(--black);padding:6px 16px;box-shadow:0 0 0 2px var(--silver)}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,52px);letter-spacing:.02em;color:var(--black);text-shadow:1px 1px 0 var(--silver)}

.about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s5);align-items:start}
.about-copy p{font-size:18px}
.spec-plate{background:var(--paper);border:2px solid var(--ink);padding:var(--s3);box-shadow:8px 8px 0 var(--black),0 0 0 1px #9fa3a6}
.spec-plate h3{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--black);border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:var(--s2);font-weight:700}
.spec-plate dl{display:grid;grid-template-columns:auto 1fr;gap:10px var(--s2);margin:0;font-size:15px}
.spec-plate dt{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--muted);padding-top:3px}
.spec-plate dd{margin:0}

.services{background:var(--paper);border-top:1px solid var(--page-2);border-bottom:1px solid var(--page-2)}
.dept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}
.dept-card{background:var(--card);border:2px solid var(--ink);padding:var(--s4);position:relative;display:flex;flex-direction:column;border-top-width:14px;box-shadow:0 10px 0 rgba(0,0,0,.06)}
.dept-red{border-top-color:#0e1013} .dept-teal{border-top-color:var(--gunmetal)} .dept-mustard{border-top-color:var(--steel)} .dept-black{border-top-color:#22262c}
.dept-badge{position:absolute;top:-28px;right:20px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--on-dark);font-weight:700;font-size:16px;box-shadow:0 0 0 3px var(--card),0 0 0 5px #8e9194}
.dept-red .dept-badge{background:#0e1013} .dept-teal .dept-badge{background:var(--gunmetal)} .dept-mustard .dept-badge{background:var(--silver);color:var(--ink)} .dept-black .dept-badge{background:#22262c}
.dept-card h3{font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.dept-tag{font-style:italic;color:var(--black);margin:6px 0 var(--s2)}
.dept-card .btn{margin-top:var(--s3);align-self:flex-start}
.process{list-style:none;padding:0;margin:0 0 var(--s1);display:flex;flex-wrap:wrap;gap:var(--s1)}
.process li{font-size:13px;background:var(--paper);border:1px solid var(--black);border-radius:2px;padding:4px 12px 4px 4px;display:flex;align-items:center;gap:8px}
.process span{background:var(--black);color:var(--on-dark);width:22px;height:22px;display:grid;place-items:center;font-size:12px;font-weight:700}

.feature{background:#0c0d10;color:var(--on-dark);background-image:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.08),transparent 50%)}
.sec-head-light h2{color:var(--silver-bright);text-shadow:0 0 16px rgba(210,216,224,.28),1px 1px 0 rgba(0,0,0,.5)}
.sec-head-light .sec-kicker{background:var(--silver);color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.feature-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s5);align-items:center}
.video-card{position:relative;display:block;border:6px solid var(--on-dark);box-shadow:0 0 0 2px #8e9194,12px 12px 0 var(--black);background:#000;aspect-ratio:16/9;overflow:hidden}
.video-card img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:var(--black);box-shadow:0 0 0 4px var(--silver-bright),0 0 20px rgba(210,216,224,.45)}
.play::after{content:"";position:absolute;left:30px;top:22px;border-left:24px solid var(--on-dark);border-top:16px solid transparent;border-bottom:16px solid transparent}
.video-info h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;margin-bottom:var(--s3)}
.spec-table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:var(--s3)}
.spec-table th,.spec-table td{text-align:left;padding:10px 0;border-bottom:1px dashed rgba(220,224,230,.4);vertical-align:top}
.spec-table th{width:120px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--silver-bright);font-weight:700}
.feature-links{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.text-link{color:var(--on-dark)}

.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s5);align-items:start}
.contact-form{background:var(--paper);border:2px solid var(--ink);padding:var(--s4);box-shadow:8px 8px 0 var(--black)}
.form-title{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:var(--s1)}
.form-note{font-size:14px;font-weight:700;color:var(--black);margin-bottom:var(--s3)}
.contact-form fieldset{border:0;margin:0;padding:0;min-width:0}
.contact-form label{display:block;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px}
.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;margin:0 0 var(--s2);font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid var(--ink-2);background:#e7e9ed;color:var(--ink)}
.contact-form fieldset[disabled] input,.contact-form fieldset[disabled] select,.contact-form fieldset[disabled] textarea{border-style:dashed;cursor:not-allowed}
.contact-details h3{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--black);font-weight:700;margin:0 0 var(--s2)}
.contact-details h3:not(:first-child){margin-top:var(--s4)}
.link-list{list-style:none;margin:0;padding:0}
.link-list li{display:flex;flex-wrap:wrap;gap:6px var(--s2);align-items:center;padding:12px 0;border-bottom:1px solid var(--page-2)}
.ll-label{width:100px;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.phone-link{display:inline-block;font-weight:700;font-size:22px;letter-spacing:.08em;color:var(--black);text-decoration:none;border-bottom:2px solid var(--steel);padding-bottom:2px}
.phone-link:hover{color:var(--charcoal)}
.footer-phone{color:var(--silver-bright);text-decoration:none;font-weight:700;letter-spacing:.1em}
.footer-phone:hover{color:var(--on-dark)}
.shop-note{font-size:14px;color:var(--muted);font-style:italic;margin:0 0 var(--s2)}

.footer{background:var(--ink);color:var(--on-dark-soft);padding:0 var(--s3) var(--s4)}
.chrome-bar{height:8px;background:var(--chrome);border-top:1px solid #777;border-bottom:1px solid #555;margin:0 calc(-1 * var(--s3)) var(--s3)}
.footer-inner{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px var(--s3);font-size:13px;letter-spacing:.08em}
.footer-mark{font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--on-dark)}
.footer-mark em{font-style:normal;color:var(--silver-bright)}
.footer-top{color:var(--on-dark)}
.footer-draft{color:var(--silver-bright)}

@media (max-width:960px){.about-grid,.feature-grid,.contact-grid{grid-template-columns:1fr;gap:var(--s4)}}
@media (max-width:820px){
  .nav-inner{padding:0 var(--s2);position:relative}
  .nav-toggle{display:block;position:absolute;opacity:0;width:1px;height:1px}
  .nav-toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 14px;border:2px solid var(--ink);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);user-select:none}
  .burger,.burger::before,.burger::after{display:block;width:18px;height:2px;background:var(--ink);position:relative}
  .burger::before,.burger::after{content:"";position:absolute;left:0}
  .burger::before{top:-6px}.burger::after{top:6px}
  .nav-toggle:checked + .nav-toggle-label{background:var(--black);color:var(--on-dark);border-color:var(--black-deep)}
  .nav-toggle:checked + .nav-toggle-label .burger,.nav-toggle:checked + .nav-toggle-label .burger::before,.nav-toggle:checked + .nav-toggle-label .burger::after{background:var(--on-dark)}
  .nav-menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:3px solid var(--black);box-shadow:0 10px 18px rgba(0,0,0,.15)}
  .nav-toggle:checked ~ .nav-menu{display:block}
  .nav-links{flex-direction:column;gap:0;padding:var(--s1) 0}
  .nav-links a{padding:14px var(--s3);font-size:14px;border-top:1px solid var(--page-2)}
}
@media (max-width:720px){
  body{font-size:16px}
  .section{padding:56px var(--s2)}
  .hero{padding:var(--s4) var(--s2) 0}
  .dept-rail ol{grid-template-columns:repeat(2,1fr)}
  .dept-rail li:nth-child(3){border-left:0}
  .dept-rail li:nth-child(n+3){border-top:1px solid rgba(28,26,23,.15)}
  .dept-grid{grid-template-columns:1fr;gap:var(--s5)}
  .wm-chrome{letter-spacing:.18em;padding-left:calc(14px + .18em);padding-right:14px;max-width:100%;box-sizing:border-box}
  .wm-script{font-size:clamp(48px,12vw,96px)}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .showroom-frame{inset:10px}
}

/* overflow-shadow-fix: hard offset shadows were ~8–12px past a 390px viewport (screenshot was 412px wide) */
@media (max-width:720px){
  .about-grid,.feature-grid,.contact-grid{padding-right:14px}
  .spec-plate{box-shadow:6px 6px 0 var(--black),0 0 0 1px #9fa3a6}
  .contact-form{box-shadow:6px 6px 0 var(--black)}
  .video-card{box-shadow:0 0 0 2px #8e9194,8px 8px 0 var(--black)}
}
.phone-block{margin:var(--s3) 0 0}
.contact-form-static .form-note{font-weight:500;color:var(--muted)}