*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── CSS VARIABLES: LIGHT MODE (DEFAULT) ── */
:root {
  --gold: #9AA4A8;
  --gold-l: #B8C2C6;
  --gold-d: #6A7478;
  --gold-rgb: 154,164,168;

  --bg:        #FAFAF8;
  --bg-2:      #F2F1EE;
  --bg-3:      #E8E6E1;
  --surface:   #FFFFFF;
  --border:    rgba(0,0,0,0.08);
  --border-md: rgba(0,0,0,0.13);
  --border-gold: rgba(154,164,168,0.4);

  --text-1:    #0D0D0D;
  --text-2:    #1A1A1A;
  --text-3:    #1A1A1A;
  --text-inv:  #FAFAF8;

  --nav-bg:    rgba(250,250,248,0.96);
  --hero-bg:   #F5F4F0;
  --hero-rgb:  245,244,240;
  --card-bg:   #FFFFFF;
  --card-hover:#F7F6F2;
  --stats-bg:  #0D0D0D;
  --stats-text:#FAFAF8;
  --footer-bg: #0D0D0D;
  --footer-text:#FAFAF8;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.09);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.12);

  --fa:'Libre Baskerville',Georgia,serif;
  --fb:'Montserrat',sans-serif;
}

/* ── CSS VARIABLES: DARK MODE (AUTO) ── */
@media(prefers-color-scheme:dark){
  :root{
    --gold: #B0BDB8;
    --gold-l: #CDD5D2;
    --gold-d: #7A8A87;
    --gold-rgb: 176,189,184;

    --bg:        #0A0A0A;
    --bg-2:      #111111;
    --bg-3:      #1A1A1A;
    --surface:   #141414;
    --border:    rgba(255,255,255,0.07);
    --border-md: rgba(255,255,255,0.12);
    --border-gold: rgba(176,189,184,0.38);

    --text-1:    #F5F4F0;
    --text-2:    #B8BCC2;
    --text-3:    #666666;
    --text-inv:  #0A0A0A;

    --nav-bg:    rgba(10,10,10,0.96);
    --hero-bg:   #0A0A0A;
    --hero-rgb:  10,10,10;
    --card-bg:   #111111;
    --card-hover:#161616;
    --stats-bg:  #0D0D0D;
    --stats-text:#F5F4F0;
    --footer-bg: #0A0A0A;
    --footer-text:#F5F4F0;

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.5);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.7);
  }
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text-1);font-family:var(--fb);overflow-x:hidden;transition:background .3s,color .3s}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;height:86px;
  background:var(--nav-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.logo{display:flex;align-items:center;text-decoration:none}.logo-svg{height:52px;width:auto;filter:brightness(0)}
.logo .a{font-family:var(--fa);font-style:italic;color:var(--gold);font-size:21px;letter-spacing:.02em}
.logo .s{font-size:7.5px;font-weight:700;letter-spacing:.42em;color:var(--text-3);text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;gap:2.8rem;list-style:none}
.nav-links a{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-cta{
  font-size:13px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  background:var(--gold);color:var(--text-inv);
  padding:11px 26px;border:none;cursor:pointer;font-family:var(--fb);
  transition:background .2s,transform .15s;
}
.nav-cta:hover{background:var(--gold-l)}

/* ── HERO ── */
.hero{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  padding:220px 5vw 0;
  position:relative;overflow:hidden;
}
/* The actual photo sits behind everything */
.hero-bg-img{
  position:absolute;inset:0;
  
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  z-index:0;
}


/* ── HERO LIGHT MODE: Perfected gold→black, buttons black with white text ── */
html:not(.dark) .hero-h1 em {
  color: #000000 !important;
}


/* ── LIGHT MODE: hero button borders black ── */
html:not(.dark) .hero-btns .btn-gold,
html:not(.dark) .hero-btns .btn-outline {
  border-color: #000000 !important;
  color: #000000 !important;
}

/* ── HERO TEXT: force black in light mode ── */
html:not(.dark) .hero-tag,
html:not(.dark) .hero-h1,
html:not(.dark) .hero-sub {
  color: #000000 !important;
}

/* Gradient overlay: site color on left → transparent on right */
.hero-fade{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to right,
    var(--hero-bg) 0%,
    var(--hero-bg) 3%,
    rgba(var(--hero-rgb), 0.96) 17%,
    rgba(var(--hero-rgb), 0.78) 30%,
    rgba(var(--hero-rgb), 0.45) 43%,
    transparent 53%
  );
}
.hero-content{position:relative;z-index:2;padding-right:4vw;max-width:580px}



.hero-tag{
  display:block;
  font-size:13px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin-bottom:2rem;
}
.hero-h1{
  font-size:clamp(40px,5vw,68px);font-weight:700;
  line-height:1.03;letter-spacing:.02em;
  color:var(--text-1);margin-bottom:.3rem;
  padding-left:2.5rem;
}
.hero-h1 em{
  font-family:var(--fb);font-style:normal;font-weight:700;
  color:var(--gold);display:block;font-size:1.06em;letter-spacing:.016em;
}
.hero-sub{
  font-size:14.5px;font-weight:300;color:var(--text-2);
  line-height:1.78;margin-top:1.8rem;margin-right:0;margin-bottom:2.8rem;margin-left:2.68rem;max-width:520px;
}
.hero-btns{display:flex;gap:14px;flex-wrap:nowrap;margin-left:2.75rem;white-space:nowrap;}
.btn-gold{
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--text-1);
  padding:15px 40px;border:1.5px solid var(--border-md);cursor:pointer;font-family:var(--fb);
  transition:all .2s;
}
.btn-gold:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
.btn-outline{
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--text-1);
  padding:15px 40px;border:1.5px solid var(--border-md);
  cursor:pointer;font-family:var(--fb);transition:all .2s;
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}

/* HERO VISUAL */
.hero-visual{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:520px}
.car-stage{
  width:100%;max-width:580px;aspect-ratio:16/9;
  background:var(--bg-2);
  border:1px solid var(--border-md);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
}
.car-stage::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 60%,rgba(var(--gold-rgb),.07) 0%,transparent 65%);
}
.car-stage-label{text-align:center;z-index:1;position:relative}
.csl-model{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.csl-hint{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--gold-rgb),.5)}
/* corner badge */
.stage-badge{
  position:absolute;bottom:0;right:0;
  background:var(--gold);color:var(--text-inv);
  padding:6px 14px;
  font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
/* hotspots */
.hs{position:absolute;cursor:pointer}
.hs-dot{width:11px;height:11px;border-radius:50%;background:var(--gold);position:relative;animation:hsp 2.2s ease-in-out infinite}
.hs-ring{position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--gold);animation:hsr 2.2s ease-in-out infinite}
.hs-lbl{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  white-space:nowrap;background:var(--surface);border:1px solid var(--border-gold);
  padding:4px 11px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);opacity:0;transition:opacity .2s;
  box-shadow:var(--shadow-sm);
}
.hs:hover .hs-lbl{opacity:1}
.hs-1{top:28%;left:19%}
.hs-2{bottom:24%;left:11%}
.hs-3{top:18%;right:22%}
.hs-4{bottom:24%;right:11%}
@keyframes hsp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}
@keyframes hsr{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}

/* ── BRANDS MARQUEE ── */
.brands{
  background:#0a0a0a;
  padding:2.2rem 0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  position:relative;
}
.brands-lbl{
  font-size:13px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:var(--text-3);text-align:center;margin-bottom:1.6rem;
}
/* fade edges */
.brands::before,.brands::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.brands::before{left:0;background:linear-gradient(to right,#0a0a0a,transparent)}
.brands::after{right:0;background:linear-gradient(to left,#0a0a0a,transparent)}

.marquee-wrap{display:flex;overflow:hidden;width:100%}
.marquee-track{
  display:flex;align-items:center;gap:0;
  width:max-content;
  animation:marquee 40s linear infinite;
  flex-shrink:0;
}

@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.brand-logo{
  display:flex;align-items:center;justify-content:center;
  padding:0 2.8rem;height:100px;flex-shrink:0;
  cursor:default;
}
.brand-logo img{
  height:68px;width:auto;
  display:block;
  object-fit:contain;
  mix-blend-mode:screen;
}

/* ── SERVICES ── */
.services{padding:7rem 5vw;background:var(--bg)}
.sec-intro{margin-bottom:4.5rem;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.sec-eyebrow{font-size:13px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.sec-h2{font-size:clamp(28px,3.5vw,44px);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--text-1)}
.sec-h2 em{font-family:var(--fa);font-style:italic;color:var(--gold)}
.sec-p{font-size:14.5px;font-weight:300;color:var(--text-3);line-height:1.75;white-space:nowrap;margin-top:1rem}
.sec-link{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(var(--gold-rgb),.3);padding-bottom:2px;transition:border-color .2s}
.sec-link:hover{border-color:var(--gold)}

.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;background:transparent;border:none;
}
.svc-card{
  background:var(--card-bg);
  padding:2.8rem 2.4rem 2.5rem;
  min-height:260px;
  position:relative;overflow:hidden;cursor:pointer;
  transition:background .22s;
}
.svc-card:hover{background:var(--card-hover)}
.svc-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.svc-card:hover::after{transform:scaleX(1)}
.svc-num{
  font-family:var(--fa);font-style:italic;font-size:40px;
  color:rgba(var(--gold-rgb),.1);line-height:1;margin-bottom:1.1rem;
}
.svc-name{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-1);margin-bottom:.8rem}
.svc-desc{font-size:14px;font-weight:300;color:var(--text-3);line-height:1.68}
.svc-arr{position:absolute;top:2.8rem;right:2.4rem;color:var(--gold);font-size:15px;opacity:0;transition:opacity .2s,transform .2s}
.svc-card:hover .svc-arr{opacity:1;transform:translateX(3px)}








/* ── GLASS CARD ── */
.svc-card-glass {
  
  background-size: cover !important;
  background-position: center 50% !important;
  background-color: transparent !important;
  position: relative; overflow: hidden; padding: 0;
}
.svc-card-glass:hover {
  background: transparent !important;
  
  background-size: cover !important;
  background-position: center 50% !important;
}
.svc-glass-frost {
  position: absolute; inset: 0; z-index: 2;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.25); transition: background .4s ease;
}
.svc-card-glass:hover .svc-glass-frost { background: rgba(0,0,0,0.75); }
.svc-glass-title {
  font-size: 18px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  z-index: 3; opacity: 1; transition: opacity .35s ease; pointer-events: none;
}
.svc-glass-desc {
  font-size: 14px; font-weight: 300; color: #fff; line-height: 1.72;
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
  z-index: 3; opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.svc-card-glass:hover .svc-glass-title { opacity: 0; }
.svc-card-glass:hover .svc-glass-desc { opacity: 1; }

/* ── BESPOKE CREATIONS CARD ── */
.svc-card-bespoke {
  
  background-size: 130% !important;
  background-position: center 57.5% !important;
  background-color: transparent !important;
  position: relative;
  overflow: hidden;
  padding: 0;
  transition: none !important;
}
.svc-card-bespoke:hover {
  background: transparent !important;
  
  background-size: 130% !important;
  background-position: center 57.5% !important;
}
.svc-bespoke-frost {
  position: absolute;
  inset: 0;
  z-index: 2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.25);
  transition: background .4s ease;
}
.svc-card-bespoke:hover .svc-bespoke-frost {
  background: rgba(0,0,0,0.75);
}
.svc-bespoke-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-bespoke-desc {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  line-height: 1.72;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  z-index: 3;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-card-bespoke:hover .svc-bespoke-title {
  opacity: 0;
}
.svc-card-bespoke:hover .svc-bespoke-desc {
  opacity: 1;
}



/* ── GLASS CARD ── */
.svc-card-glass {
  
  background-size: cover !important;
  background-position: center 50% !important;
  background-color: transparent !important;
  position: relative; overflow: hidden; padding: 0;
}
.svc-card-glass:hover {
  background: transparent !important;
  
  background-size: cover !important;
  background-position: center 50% !important;
}
.svc-glass-frost {
  position: absolute; inset: 0; z-index: 2;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.25); transition: background .4s ease;
}
.svc-card-glass:hover .svc-glass-frost { background: rgba(0,0,0,0.75); }
.svc-glass-title {
  font-size: 18px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  z-index: 3; opacity: 1; transition: opacity .35s ease; pointer-events: none;
}
.svc-glass-desc {
  font-size: 14px; font-weight: 300; color: #fff; line-height: 1.72;
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
  z-index: 3; opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.svc-card-glass:hover .svc-glass-title { opacity: 0; }
.svc-card-glass:hover .svc-glass-desc { opacity: 1; }

/* ── BESPOKE CREATIONS CARD ── */
.svc-card-bespoke {
  
  background-size: 130% !important;
  background-position: center 57.5% !important;
  background-color: transparent !important;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.svc-card-bespoke:hover {
  background: transparent !important;
  
  background-size: 130% !important;
  background-position: center 57.5% !important;
}
.svc-bespoke-frost {
  position: absolute; inset: 0; z-index: 2;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.25); transition: background .4s ease;
}
.svc-card-bespoke:hover .svc-bespoke-frost { background: rgba(0,0,0,0.75); }
.svc-bespoke-title {
  font-size: 18px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  z-index: 3; opacity: 1; transition: opacity .35s ease; pointer-events: none;
}
.svc-bespoke-desc {
  font-size: 14px; font-weight: 300; color: #fff; line-height: 1.72;
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
  z-index: 3; opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.svc-card-bespoke:hover .svc-bespoke-title { opacity: 0; }
.svc-card-bespoke:hover .svc-bespoke-desc { opacity: 1; }

/* ── WHEELS & TIRES CARD ── */
.svc-card-wheels {
  
  background-size: cover !important;
  background-position: center 50% !important;
  background-color: transparent !important;
  position: relative;
  overflow: hidden;
  padding: 0;
  transition: none !important;
}
.svc-card-wheels:hover {
  background: transparent !important;
  
  background-size: cover !important;
  background-position: center 50% !important;
}
.svc-wheels-frost {
  position: absolute;
  inset: 0;
  z-index: 2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.25);
  transition: background .4s ease;
}
.svc-card-wheels:hover .svc-wheels-frost {
  background: rgba(0,0,0,0.75);
}
.svc-wheels-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-wheels-desc {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  line-height: 1.72;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  z-index: 3;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-card-wheels:hover .svc-wheels-title {
  opacity: 0;
}
.svc-card-wheels:hover .svc-wheels-desc {
  opacity: 1;
}

/* ── BODY & GLASS CARD ── */
.svc-card-body {
  
  background-size: cover !important;
  background-position: center 40% !important;
  background-color: transparent !important;
  position: relative;
  overflow: hidden;
  padding: 0;
  transition: none !important;
}
.svc-card-body:hover {
  background: transparent !important;
  
  background-size: cover !important;
  background-position: center 40% !important;
}
.svc-body-frost {
  position: absolute;
  inset: 0;
  z-index: 2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.25);
  transition: background .4s ease;
}
.svc-card-body:hover .svc-body-frost {
  background: rgba(0,0,0,0.75);
}
.svc-body-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-body-desc {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  line-height: 1.72;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  z-index: 3;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-card-body:hover .svc-body-title {
  opacity: 0;
}
.svc-card-body:hover .svc-body-desc {
  opacity: 1;
}

/* ── MECHANICAL CARD ── */
.svc-card-mechanical {
  
  background-size: cover !important;
  background-position: center 60% !important;
  background-color: transparent !important;
  position: relative;
  overflow: hidden;
  padding: 0;
  transition: none !important;
}
.svc-card-mechanical:hover {
  background: transparent !important;
  
  background-size: cover !important;
  background-position: center 60% !important;
}
.svc-mech-frost {
  position: absolute;
  inset: 0;
  z-index: 2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.25);
  transition: background .4s ease;
}
.svc-card-mechanical:hover .svc-mech-frost {
  background: rgba(0,0,0,0.75);
}
.svc-mech-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-mech-desc {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  line-height: 1.72;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  z-index: 3;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-card-mechanical:hover .svc-mech-title {
  opacity: 0;
}
.svc-card-mechanical:hover .svc-mech-desc {
  opacity: 1;
}

/* ── PROTECTION CARD ── */
.svc-card-protection {
  
  background-size: cover !important;
  background-position: center 60% !important;
  background-color: transparent !important;
  position: relative;
  overflow: hidden;
  padding: 0;
  transition: none !important;
}
.svc-card-protection:hover {
  background: transparent !important;
  
  background-size: cover !important;
  background-position: center 60% !important;
}
.svc-frost {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.25);
  transition: opacity .4s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.svc-card-protection .svc-name,
.svc-card-protection .svc-desc,
.svc-card-protection .svc-arr {
  color: #fff !important;
}



.svc-prot-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-prot-desc {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  line-height: 1.72;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  z-index: 3;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-card-protection:hover .svc-frost {
  background: rgba(0,0,0,0.75);
}
.svc-card-protection:hover .svc-prot-title {
  opacity: 0;
}
.svc-card-protection:hover .svc-prot-desc {
  opacity: 1;
}

/* ── REVIEWS ── */
.reviews{
  padding:7rem 5vw;
  background:var(--bg-2);
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  margin-top:3rem;
}
.review-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  padding:1.8rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  cursor:pointer;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:border-color .22s, transform .22s;
}
.review-card::before{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease;
}
.review-card:hover{
  border-color:var(--border-gold);
  transform:translateY(-3px);
}
.review-card:hover::before{transform:scaleX(1)}
.review-stars{
  display:flex;
  gap:3px;
  color:#F5B914;
  font-size:15px;
}
.review-text{
  font-size:14.5px;
  font-weight:300;
  color:var(--text-2);
  line-height:1.72;
  flex:1;
}
.review-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:.9rem;
  border-top:1px solid var(--border);
}
.review-name{
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-1);
}
.review-date{
  font-size:11px;
  font-weight:300;
  color:var(--text-3);
}
.reviews-cta{
  text-align:center;
  margin-top:2.8rem;
}
.reviews-cta a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.reviews-cta a:hover{border-color:var(--gold)}

/* ── STATS BAND ── */
.stats{
  background:var(--stats-bg);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgba(255,255,255,.06);
}
.stat{
  background:var(--stats-bg);
  padding:4rem 3vw;text-align:center;
}
.stat-n{font-family:var(--fa);font-style:italic;font-size:clamp(38px,4vw,56px);color:var(--gold);line-height:1;margin-bottom:.5rem}
.stat-l{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.35)}

/* ── ABOUT ── */
.about{
  display:grid;grid-template-columns:1fr 1fr;gap:7vw;
  align-items:center;padding:7rem 5vw;
  background:var(--bg);
}
.about-img{
  aspect-ratio:4/3;
  background:var(--bg-2);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);
  position:relative;overflow:hidden;
}
.about-img::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(var(--gold-rgb),.04) 0%,transparent 60%);
}
.about-ey{font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.about-h2{font-size:clamp(24px,2.8vw,38px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--text-1);margin-bottom:1.4rem}
.about-h2 em{font-family:var(--fa);font-style:italic;color:var(--gold)}
.about-p{font-size:14px;font-weight:300;color:var(--text-2);line-height:1.8;margin-bottom:1.4rem}

/* ── PARTS STRIP ── */
.parts-strip{
  margin:0 5vw 7rem;
  background:var(--bg-2);
  border:1px solid var(--border-gold);
  padding:3.5rem 4rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.ps-h{font-size:clamp(20px,2.5vw,30px);font-weight:700;line-height:1.15;color:var(--text-1)}
.ps-h em{font-family:var(--fa);font-style:italic;color:var(--gold)}
.ps-p{font-size:13px;font-weight:300;color:var(--text-3);margin-top:.5rem;max-width:420px}

/* ── FOOTER ── */
footer{
  background:var(--footer-bg);
  color:var(--footer-text);
  border-top:1px solid rgba(255,255,255,.06);
  padding:4.5rem 5vw 2.5rem;
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-brand .a{font-family:var(--fa);font-style:italic;color:var(--gold);font-size:22px}
.footer-brand .s{font-size:7.5px;font-weight:700;letter-spacing:.4em;color:rgba(255,255,255,.3);text-transform:uppercase;margin-top:3px;margin-bottom:1.1rem}
.footer-brand p{font-size:12.5px;font-weight:300;color:rgba(255,255,255,.35);line-height:1.72}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1.1rem}
.footer-col a{display:block;font-size:13px;font-weight:300;color:rgba(255,255,255,.45);text-decoration:none;margin-bottom:.55rem;transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p,.footer-bottom span{font-size:12px;color:rgba(255,255,255,.2)}

/* HERO VISUAL */
.hero-visual{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:520px}
.hero-img-placeholder{
  width:100%;max-width:580px;aspect-ratio:4/3;
  background:var(--bg-2);
  border:1px solid var(--border-md);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.hero-img-placeholder::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(var(--gold-rgb),.05) 0%,transparent 60%);
}
.hip-inner{text-align:center;z-index:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.hip-icon{font-size:32px;color:rgba(var(--gold-rgb),.2);line-height:1}
.hip-text{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)}
.hip-sub{font-size:10px;font-weight:300;color:rgba(var(--gold-rgb),.4);letter-spacing:.1em}

/* ── THEME TOGGLE FAB (bottom corner) ── */
.theme-fab{
  position:fixed;bottom:2rem;right:2rem;z-index:300;
  width:52px;height:52px;
  background:var(--surface);
  border:1px solid var(--border-md);
  color:var(--text-2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  box-shadow:var(--shadow-md);
  transition:all .2s;
}
.theme-fab:hover{border-color:var(--gold);color:var(--gold);transform:scale(1.06)}



/* ── MANUAL DARK OVERRIDE ── */

/* ── DARK MODE: Explore Services matches View Our Work style ── */

html.dark{
  --gold:#B0BDB8;--gold-l:#CDD5D2;--gold-d:#7A8A87;--gold-rgb:176,189,184;
  --bg:#0A0A0A;--bg-2:#111111;--bg-3:#1A1A1A;--surface:#141414;
  --border:rgba(255,255,255,0.07);--border-md:rgba(255,255,255,0.12);
  --border-gold:rgba(176,189,184,0.38);
  --text-1:#F5F4F0;--text-2:#B8BCC2;--text-3:#666666;--text-inv:#0A0A0A;
  --nav-bg:rgba(10,10,10,0.96);--hero-bg:#0A0A0A;--hero-rgb:10,10,10;
  --card-bg:#111111;--card-hover:#161616;
  --stats-bg:#0D0D0D;--stats-text:#F5F4F0;
  --footer-bg:#0A0A0A;--footer-text:#F5F4F0;
  --shadow-sm:0 1px 4px rgba(0,0,0,.4);
  --shadow-md:0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:0 12px 48px rgba(0,0,0,.7);
}
html.dark .logo-svg,
@media (prefers-color-scheme: dark) { .logo-svg { filter:none; } }
html.dark .logo-svg{filter:none}
html.light{
  --gold:#9AA4A8;--gold-l:#B8C2C6;--gold-d:#6A7478;--gold-rgb:154,164,168;
  --bg:#FAFAF8;--bg-2:#F2F1EE;--bg-3:#E8E6E1;--surface:#FFFFFF;
  --border:rgba(0,0,0,0.08);--border-md:rgba(0,0,0,0.13);
  --border-gold:rgba(154,164,168,0.4);
  --text-1:#0D0D0D;--text-2:#3A3A3A;--text-3:#7A7A7A;--text-inv:#FAFAF8;
  --nav-bg:rgba(250,250,248,0.96);--hero-bg:#F5F4F0;--hero-rgb:245,244,240;
  --card-bg:#FFFFFF;--card-hover:#F7F6F2;
  --stats-bg:#0D0D0D;--stats-text:#FAFAF8;
  --footer-bg:#0D0D0D;--footer-text:#FAFAF8;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 24px rgba(0,0,0,.09);
  --shadow-lg:0 12px 48px rgba(0,0,0,.12);
}

/* ── ABOUT PAGE ── */
.spa-page{display:block}
/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;height:86px;background:var(--nav-bg);border-bottom:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.logo{display:flex;align-items:center;text-decoration:none}
.logo-svg{height:52px;width:auto;filter:brightness(0)}
html.dark .logo-svg{filter:none}
.nav-links{display:flex;gap:2.8rem;list-style:none}
.nav-links a{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-cta{font-size:13px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;background:var(--gold);color:var(--text-inv);padding:11px 26px;border:none;cursor:pointer;font-family:var(--fb);transition:background .2s}
.nav-cta:hover{background:var(--gold-l)}

/* HERO — full bleed dark with large editorial text */
.about-hero{
  min-height:70vh;
  background:var(--bg-2);
  display:flex;align-items:flex-end;
  padding:0 5vw 7rem;
  padding-top:86px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.about-hero::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to bottom, transparent 30%, var(--bg) 100%);
  z-index:1;
  pointer-events:none;
}
.about-hero-inner{
  position:relative;z-index:2;
  max-width:900px;
}
.about-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.38em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.8rem;display:block;
}
.about-h1{
  font-family:var(--fb);font-size:clamp(48px,7vw,96px);
  font-weight:700;line-height:.96;letter-spacing:-.01em;
  color:var(--text-1);margin-bottom:2.4rem;
}
.about-h1 em{
  font-family:var(--fa);font-style:italic;color:var(--gold);display:block;
}
.about-hero-desc{
  font-size:16px;font-weight:300;color:var(--text-2);
  line-height:1.8;max-width:520px;
  border-left:2px solid var(--gold);
  padding-left:1.5rem;
}

/* LARGE YEAR WATERMARK */
.year-mark{
  position:absolute;right:5vw;bottom:4rem;
  font-family:var(--fa);font-style:italic;
  font-size:clamp(120px,18vw,220px);
  font-weight:700;
  color:var(--text-1);
  opacity:.04;
  line-height:1;
  user-select:none;
  pointer-events:none;
  z-index:1;
  letter-spacing:-.02em;
}

/* ORIGIN — two col, text heavy but visually balanced */
.origin{
  display:grid;grid-template-columns:1fr 1fr;
  padding:8rem 5vw;
  gap:8vw;align-items:start;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.origin-left .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;display:block;}
.origin-left h2{font-family:var(--fb);font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.1;color:var(--text-1);margin-bottom:2.5rem;letter-spacing:-.01em;}
.origin-left h2 em{font-family:var(--fa);font-style:italic;color:var(--gold);}
.origin-left p{font-size:15px;font-weight:300;color:var(--text-2);line-height:1.88;margin-bottom:1.5rem;}
.origin-right{display:flex;flex-direction:column;gap:1.5rem;padding-top:1rem;}
.stat-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  padding:2.2rem 2rem;
  position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s;
}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.stat-card:hover{border-color:var(--border-gold);transform:translateY(-2px);}
.stat-card:hover::after{transform:scaleX(1);}
.stat-row{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.5rem;}
.stat-num{font-family:var(--fa);font-style:italic;font-size:52px;line-height:1;color:var(--gold);}
.stat-suf{font-size:22px;color:var(--gold);font-family:var(--fa);font-style:italic;}
.stat-lbl{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);}

/* TIMELINE */
.timeline-section{
  background:var(--bg-2);
  padding:8rem 5vw;
  border-bottom:1px solid var(--border);
}
.tl-head{margin-bottom:5rem;}
.tl-head .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block;}
.tl-head h2{font-family:var(--fb);font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--text-1);letter-spacing:-.01em;}
.tl-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.tl-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  padding:2.4rem 2rem;
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease,border-color .3s;
}
.tl-card.visible{opacity:1;transform:translateY(0);}
.tl-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s;}
.tl-card:hover::after{transform:scaleX(1);}
.tl-card:hover{border-color:var(--border-gold);}
.tl-year{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;}
.tl-num{font-family:var(--fa);font-style:italic;font-size:56px;color:rgba(var(--gold-rgb),.1);line-height:1;margin-bottom:1rem;}
.tl-title{font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--text-1);margin-bottom:.8rem;}
.tl-desc{font-size:13.5px;font-weight:300;color:var(--text-2);line-height:1.78;}

/* VALUES */
.values-section{
  padding:8rem 5vw;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.values-head{margin-bottom:4rem;}
.values-head .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block;}
.values-head h2{font-family:var(--fb);font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--text-1);letter-spacing:-.01em;}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.value-card{
  background:var(--card-bg);border:1px solid var(--border);
  padding:3rem 2.4rem;
  position:relative;overflow:hidden;cursor:default;
  transition:border-color .3s,transform .3s;
}
.value-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s;}
.value-card:hover{border-color:var(--border-gold);transform:translateY(-3px);}
.value-card:hover::after{transform:scaleX(1);}
.value-num{font-family:var(--fa);font-style:italic;font-size:48px;color:rgba(var(--gold-rgb),.1);line-height:1;margin-bottom:1.4rem;}
.value-title{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-1);margin-bottom:.9rem;}
.value-desc{font-size:14px;font-weight:300;color:var(--text-2);line-height:1.8;}

/* FAQ */
.faq-section{padding:8rem 5vw;background:var(--bg-2);border-bottom:1px solid var(--border);}
.faq-inner{max-width:760px;}
.faq-head{margin-bottom:3.5rem;}
.faq-head .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block;}
.faq-head h2{font-family:var(--fb);font-size:clamp(24px,2.8vw,38px);font-weight:700;color:var(--text-1);letter-spacing:-.01em;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%;background:none;border:none;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:1.8rem 0;font-family:var(--fb);font-size:15px;font-weight:600;color:var(--text-1);letter-spacing:.01em;transition:color .2s;gap:1rem;}
.faq-q:hover{color:var(--gold);}
.faq-icon{font-size:22px;color:var(--gold);transition:transform .3s;flex-shrink:0;}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s;font-size:14.5px;font-weight:300;color:var(--text-2);line-height:1.88;}
.faq-item.open .faq-a{max-height:300px;padding-bottom:1.8rem;}

/* CTA */
.about-cta{
  padding:9rem 5vw;
  background:var(--bg);
  display:flex;align-items:center;justify-content:space-between;
  gap:4rem;flex-wrap:wrap;
}
.cta-text .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;display:block;}
.cta-text h2{font-family:var(--fb);font-size:clamp(28px,4vw,56px);font-weight:700;color:var(--text-1);line-height:1.05;letter-spacing:-.01em;}
.cta-text h2 em{font-family:var(--fa);font-style:italic;color:var(--gold);}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn-outline{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:transparent;color:var(--text-1);padding:15px 40px;border:1.5px solid var(--border-md);cursor:pointer;font-family:var(--fb);transition:all .2s;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);}

/* FOOTER */
footer{background:#0A0A0A;border-top:1px solid rgba(255,255,255,.06);padding:3rem 5vw;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.footer-copy{font-size:12px;font-weight:300;color:rgba(255,255,255,.25);letter-spacing:.06em;}
.footer-links{display:flex;gap:2.5rem;list-style:none;}
.footer-links a{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3);text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:var(--gold);}

/* THEME FAB */
.theme-fab{position:fixed;bottom:2rem;right:2rem;z-index:300;width:52px;height:52px;background:var(--surface);border:1px solid var(--border-md);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow-md);transition:all .2s;border-radius:0;}
.theme-fab:hover{border-color:var(--gold);color:var(--gold);transform:scale(1.06);}

/* Disable text selection */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Disable image drag */
img, svg {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
/* Re-enable pointer events on interactive elements */
a, button, input, textarea, select {
  pointer-events: auto;
}

/* ── ABOUT PAGE ── */
.spa-page{display:block}
/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;height:86px;background:var(--nav-bg);border-bottom:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.logo{display:flex;align-items:center;text-decoration:none}
.logo-svg{height:52px;width:auto;filter:brightness(0)}
html.dark .logo-svg{filter:none}
.nav-links{display:flex;gap:2.8rem;list-style:none}
.nav-links a{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-cta{font-size:13px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;background:var(--gold);color:var(--text-inv);padding:11px 26px;border:none;cursor:pointer;font-family:var(--fb);transition:background .2s}
.nav-cta:hover{background:var(--gold-l)}

/* HERO — full bleed dark with large editorial text */
.about-hero{
  min-height:70vh;
  background:var(--bg-2);
  display:flex;align-items:flex-end;
  padding:0 5vw 7rem;
  padding-top:86px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.about-hero::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to bottom, transparent 30%, var(--bg) 100%);
  z-index:1;
  pointer-events:none;
}
.about-hero-inner{
  position:relative;z-index:2;
  max-width:900px;
}
.about-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.38em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.8rem;display:block;
}
.about-h1{
  font-family:var(--fb);font-size:clamp(48px,7vw,96px);
  font-weight:700;line-height:.96;letter-spacing:-.01em;
  color:var(--text-1);margin-bottom:2.4rem;
}
.about-h1 em{
  font-family:var(--fa);font-style:italic;color:var(--gold);display:block;
}
.about-hero-desc{
  font-size:16px;font-weight:300;color:var(--text-2);
  line-height:1.8;max-width:520px;
  border-left:2px solid var(--gold);
  padding-left:1.5rem;
}

/* LARGE YEAR WATERMARK */
.year-mark{
  position:absolute;right:5vw;bottom:4rem;
  font-family:var(--fa);font-style:italic;
  font-size:clamp(120px,18vw,220px);
  font-weight:700;
  color:var(--text-1);
  opacity:.04;
  line-height:1;
  user-select:none;
  pointer-events:none;
  z-index:1;
  letter-spacing:-.02em;
}

/* ORIGIN — two col, text heavy but visually balanced */
.origin{
  display:grid;grid-template-columns:1fr 1fr;
  padding:8rem 5vw;
  gap:8vw;align-items:start;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.origin-left .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;display:block;}
.origin-left h2{font-family:var(--fb);font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.1;color:var(--text-1);margin-bottom:2.5rem;letter-spacing:-.01em;}
.origin-left h2 em{font-family:var(--fa);font-style:italic;color:var(--gold);}
.origin-left p{font-size:15px;font-weight:300;color:var(--text-2);line-height:1.88;margin-bottom:1.5rem;}
.origin-right{display:flex;flex-direction:column;gap:1.5rem;padding-top:1rem;}
.stat-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  padding:2.2rem 2rem;
  position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s;
}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.stat-card:hover{border-color:var(--border-gold);transform:translateY(-2px);}
.stat-card:hover::after{transform:scaleX(1);}
.stat-row{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.5rem;}
.stat-num{font-family:var(--fa);font-style:italic;font-size:52px;line-height:1;color:var(--gold);}
.stat-suf{font-size:22px;color:var(--gold);font-family:var(--fa);font-style:italic;}
.stat-lbl{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);}

/* TIMELINE */
.timeline-section{
  background:var(--bg-2);
  padding:8rem 5vw;
  border-bottom:1px solid var(--border);
}
.tl-head{margin-bottom:5rem;}
.tl-head .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block;}
.tl-head h2{font-family:var(--fb);font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--text-1);letter-spacing:-.01em;}
.tl-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.tl-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  padding:2.4rem 2rem;
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease,border-color .3s;
}
.tl-card.visible{opacity:1;transform:translateY(0);}
.tl-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s;}
.tl-card:hover::after{transform:scaleX(1);}
.tl-card:hover{border-color:var(--border-gold);}
.tl-year{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;}
.tl-num{font-family:var(--fa);font-style:italic;font-size:56px;color:rgba(var(--gold-rgb),.1);line-height:1;margin-bottom:1rem;}
.tl-title{font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--text-1);margin-bottom:.8rem;}
.tl-desc{font-size:13.5px;font-weight:300;color:var(--text-2);line-height:1.78;}

/* VALUES */
.values-section{
  padding:8rem 5vw;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.values-head{margin-bottom:4rem;}
.values-head .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block;}
.values-head h2{font-family:var(--fb);font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--text-1);letter-spacing:-.01em;}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.value-card{
  background:var(--card-bg);border:1px solid var(--border);
  padding:3rem 2.4rem;
  position:relative;overflow:hidden;cursor:default;
  transition:border-color .3s,transform .3s;
}
.value-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s;}
.value-card:hover{border-color:var(--border-gold);transform:translateY(-3px);}
.value-card:hover::after{transform:scaleX(1);}
.value-num{font-family:var(--fa);font-style:italic;font-size:48px;color:rgba(var(--gold-rgb),.1);line-height:1;margin-bottom:1.4rem;}
.value-title{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-1);margin-bottom:.9rem;}
.value-desc{font-size:14px;font-weight:300;color:var(--text-2);line-height:1.8;}

/* FAQ */
.faq-section{padding:8rem 5vw;background:var(--bg-2);border-bottom:1px solid var(--border);}
.faq-inner{max-width:760px;}
.faq-head{margin-bottom:3.5rem;}
.faq-head .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block;}
.faq-head h2{font-family:var(--fb);font-size:clamp(24px,2.8vw,38px);font-weight:700;color:var(--text-1);letter-spacing:-.01em;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%;background:none;border:none;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:1.8rem 0;font-family:var(--fb);font-size:15px;font-weight:600;color:var(--text-1);letter-spacing:.01em;transition:color .2s;gap:1rem;}
.faq-q:hover{color:var(--gold);}
.faq-icon{font-size:22px;color:var(--gold);transition:transform .3s;flex-shrink:0;}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s;font-size:14.5px;font-weight:300;color:var(--text-2);line-height:1.88;}
.faq-item.open .faq-a{max-height:300px;padding-bottom:1.8rem;}

/* CTA */
.about-cta{
  padding:9rem 5vw;
  background:var(--bg);
  display:flex;align-items:center;justify-content:space-between;
  gap:4rem;flex-wrap:wrap;
}
.cta-text .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;display:block;}
.cta-text h2{font-family:var(--fb);font-size:clamp(28px,4vw,56px);font-weight:700;color:var(--text-1);line-height:1.05;letter-spacing:-.01em;}
.cta-text h2 em{font-family:var(--fa);font-style:italic;color:var(--gold);}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn-outline{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:transparent;color:var(--text-1);padding:15px 40px;border:1.5px solid var(--border-md);cursor:pointer;font-family:var(--fb);transition:all .2s;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);}

/* FOOTER */
footer{background:#0A0A0A;border-top:1px solid rgba(255,255,255,.06);padding:3rem 5vw;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.footer-copy{font-size:12px;font-weight:300;color:rgba(255,255,255,.25);letter-spacing:.06em;}
.footer-links{display:flex;gap:2.5rem;list-style:none;}
.footer-links a{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3);text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:var(--gold);}

/* THEME FAB */
.theme-fab{position:fixed;bottom:2rem;right:2rem;z-index:300;width:52px;height:52px;background:var(--surface);border:1px solid var(--border-md);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow-md);transition:all .2s;border-radius:0;}
.theme-fab:hover{border-color:var(--gold);color:var(--gold);transform:scale(1.06);}

/* First section photo: the red NSX, full-resolution original from the shop */
.hero-bg-img { background-image: url('/assets/img/nsx/nsx-5.jpeg') !important; background-position: right 65%; }

/* Header logo at the same size as the new site (92px wide) */
.logo-svg { height: 33px; }

/* Header menu text: solid black in light mode, white in dark mode */
html:not(.dark) .nav-links a { color: #0d0d0d; }
html:not(.dark) .nav-links a:hover, html:not(.dark) .nav-links a.active { color: var(--gold-d); }
html.dark .nav-links a { color: #fff; }
.nav-links a { font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; }
.nav-links { gap: 1.8rem !important; }
html.dark .nav-links a:hover, html.dark .nav-links a.active { color: var(--gold); }

/* Header: no bar of its own; the menu sits in a frosted glass capsule over the photo */
nav {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
nav .nav-links {
  position: absolute; left: 50%; transform: translateX(-50%);
  padding: 13px 26px; border-radius: 6px; align-items: center;
  background: rgba(245,244,240,.5);
  backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%);
  border: 1px solid rgba(0,0,0,.06);
}
html.dark nav .nav-links { background: rgba(10,10,10,.38); border-color: rgba(255,255,255,.08); }
nav .nav-links li, nav .nav-links a { display: block; line-height: 1; }
nav { height: 70px !important; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
/* Hides while scrolling down, slides back in on any scroll up */
nav.is-hidden { transform: translateY(-110%); opacity: 0; }
@media (prefers-reduced-motion: reduce) { nav { transition: none; } }

/* Logo lives in the first section, not the floating header, so it scrolls away with the page */
.hero-logo { position: absolute; z-index: 210; top: 13px; left: 5vw; }
.hero-logo .logo-svg { height: 43px; }
nav .nav-links a { white-space: nowrap; }

/* Tagline above the headline, at double size */
.hero-content .hero-tag { font-size: 26px; letter-spacing: .14em; white-space: nowrap; font-weight: 400; }
html.dark .hero-content .hero-tag { color: #fff; }
/* Headline back, below the description, on a single line, with the buttons under it */
.hero-content .hero-h1 { padding-left: 0; margin: 26px 0 26px; white-space: nowrap; font-size: 26px; }
.hero-content .hero-h1 em { font-size: 1em; }
/* Headline removed from view (delete this line to bring it back) */
.hero-content .hero-h1 { display: none; }
.hero-content .hero-sub { margin-bottom: 2rem !important; }
.hero-content .hero-h1 br { display: none; }
.hero-content .hero-h1 em { display: inline; }
/* Intro text block nudged down */
.hero-content { margin-top: 5px; margin-left: 28px; }
/* Text block sits about halfway down the photo, above the brand bar */
.hero { padding-top: calc((100svh - 70px) / 2 + 10px) !important; }
/* Description and buttons share the headline's left edge */
.hero-content .hero-sub, .hero-content .hero-btns { margin-left: 0 !important; }
/* Description sits closer under the headline */
.hero-content .hero-tag { margin-bottom: 14px !important; }
.hero-content .hero-sub { margin-top: 0 !important; }
/* Intro buttons: same size as the description, regular weight */
.hero-btns .btn-gold, .hero-btns .btn-outline { font-size: 14.5px; font-weight: 400; letter-spacing: normal; text-transform: none; }

/* Services: swipeable card row (from the newer draft) */
.nc-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -5vw; padding: 4px 5vw 8px; scroll-padding: 0 5vw; scrollbar-width: none; overscroll-behavior-x: contain; }
.nc-track::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .nc-track.is-edge-left { cursor: w-resize; } .nc-track.is-edge-right { cursor: e-resize; } }
.nc-card { position: relative; flex: none; width: clamp(260px, 25vw, 340px); aspect-ratio: 1; scroll-snap-align: start; border-radius: 3px; overflow: hidden; background: #1a1b1d; color: #fff; margin: 0; }
.nc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.25,.8,.25,1); }
.nc-card:hover img { transform: scale(1.04); }
.nc-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 32%, rgba(0,0,0,0) 55%), rgba(0,0,0,.22); transition: background-color .5s cubic-bezier(.25,.8,.25,1); }
.nc-card:hover::before { background-color: rgba(0,0,0,.08); }
.nc-text { position: relative; z-index: 2; padding: 26px; }
.nc-text h3 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #fff; text-transform: none; }
@media (prefers-reduced-motion: reduce) { .nc-card img { transition: none; } }
@media (max-width: 768px) { .nc-card { width: 76vw; } }
/* "Scroll for more": a short line with a light traveling along it */
.nc-hint { display: flex; align-items: center; gap: 14px; flex: none; margin: 0; padding-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7076; transition: opacity .4s cubic-bezier(.25,.8,.25,1); }
html.dark .nc-hint { color: rgba(255,255,255,.55); }
.nc-hint.is-done { opacity: 0; }
.nc-hint-touch { display: none; }
@media (hover: none) { .nc-hint-desktop { display: none; } .nc-hint-touch { display: inline; } }
.nc-hint-line { position: relative; width: 64px; height: 1.5px; background: rgba(0,0,0,.12); overflow: hidden; }
html.dark .nc-hint-line { background: rgba(255,255,255,.15); }
.nc-hint-line span { position: absolute; top: 0; left: 0; width: 24px; height: 100%; background: #111214; }
html.dark .nc-hint-line span { background: #fff; }
@media (prefers-reduced-motion: no-preference) { .nc-hint-line span { animation: nc-travel 1.8s cubic-bezier(.25,.8,.25,1) infinite; } }
@keyframes nc-travel { from { transform: translateX(-24px); } to { transform: translateX(64px); } }
/* Services label matches the hero "Reliable Automotive Care" line */
.services .sec-eyebrow { font-size: 26px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; line-height: normal; color: #000; white-space: nowrap; }
html.dark .services .sec-eyebrow { color: #fff; }
/* Services intro: label and description centered; scroll hint stays at the right edge */
.services .sec-intro { position: relative; justify-content: center; }
.services .sec-intro > div { text-align: center; }
.services .sec-intro .sec-p { margin-left: auto; margin-right: auto; }
@media (min-width: 1000px) { .services .nc-hint { position: absolute; right: 0; bottom: 0; } }
/* ── HERO BRAND BAR: frosted strip along the bottom of the first section ── */
.hero { flex-direction: column; justify-content: space-between; padding-bottom: 0; }
.hero-brands {
  position: relative; z-index: 3; align-self: stretch;
  margin: auto -5vw 0; padding: 18px 5vw;
  display: flex; align-items: center; gap: 32px;
  background: rgba(245,244,240,.3);
  backdrop-filter: blur(4px) saturate(120%); -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-top: 1px solid rgba(0,0,0,.06);
}
.hero-brands-label {
  flex: none; max-width: 17ch; line-height: 1.5;
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #3a3a3a;
}
.hb-marquee {
  flex: 1; display: flex; overflow: hidden;
  -webkit-mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.hb-track { list-style: none; margin: 0; padding: 0 28px 0 0; display: flex; align-items: center; gap: 52px; flex: none; }
.hb-track img { height: 30px; width: auto; max-width: 110px; object-fit: contain; opacity: .8; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .hb-track { animation: hb-glide 80s linear infinite; }
  .hb-marquee:hover .hb-track { animation-play-state: paused; }
}
@keyframes hb-glide { to { transform: translateX(-100%); } }

/* Dark mode: darker glass, logos flipped to white */
html.dark .hero-brands { background: rgba(10,10,10,.24); border-top-color: rgba(255,255,255,.08); }
html.dark .hero-brands-label { color: #b8bcc2; }
html.dark .hb-track img { filter: invert(1); opacity: .75; }

@media (max-width: 760px) {
  .hero-brands { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hb-marquee { width: 100%; }
  .hb-track img { height: 24px; }
}

/* ════════ Multi-page site additions ════════ */
main { display: block; }

/* Home heading: "Reliable Automotive Care" is the page's main heading, with "in Los Angeles" under it at the description size */
h1.hero-tag { margin-top: 0; line-height: normal; }
.hero-tag-sub { display: block; font-size: 14.5px; margin-top: 6px; margin-left: 1.8px; } /* nudged to line up under the R above, set by eye */
/* Description removed: the buttons keep the same gap below the heading that they had below the description */
.hero-content h1.hero-tag { margin-bottom: 2rem !important; }

/* Buttons and cards that are now real links */
a.btn-gold, a.btn-outline { display: inline-block; text-decoration: none; }
a.nc-card { display: block; text-decoration: none; }
.nc-text h2 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #fff; text-transform: none; }

/* Services page: every service as a card, in a grid */
.services-all { padding-top: 5rem; }
.nc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.nc-grid .nc-card { width: auto; }

/* Service pages: photo beside the intro */
.page-intro .about-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.page-intro .btn-outline { margin-top: .6rem; }

/* Links inside answers and cards */
.faq-a a, .value-desc a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.value-desc address { font-style: normal; margin-bottom: .6rem; }

/* Contact page */
.contact-section { padding-top: 5rem; }
.contact-hours { margin-top: 3.5rem; }
.contact-hours .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; display: block; }
.contact-hours p { font-size: 15px; font-weight: 300; color: var(--text-2); line-height: 1.88; }

/* Footer contact details */
.footer-address, .footer-hours { display: block; font-style: normal; font-size: 13px; font-weight: 300; color: rgba(255,255,255,.45); line-height: 1.7; margin-bottom: .55rem; }
.footer-bottom a { color: inherit; text-decoration: none; transition: color .2s; }
.footer-bottom a:hover { color: var(--gold); }

/* Phones: stack the two and three column sections */
@media (max-width: 760px) {
  .about, .origin, .page-intro { grid-template-columns: 1fr; gap: 3rem; padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .values-grid, .tl-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .values-section, .faq-section, .about-cta { padding-top: 5rem; padding-bottom: 5rem; }
}

/* ════════ Phones and tablets: same design, scaled to fit ════════ */
.menu-btn { display: none; }

@media (max-width: 820px) {
  /* Menu button in the same frosted glass as the desktop menu, lined up with the logo */
  .menu-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    position: absolute; top: 14px; right: 5vw; width: 44px; height: 42px; padding: 0; cursor: pointer;
    border-radius: 6px; border: 1px solid rgba(0,0,0,.06);
    background: rgba(245,244,240,.5);
    backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%);
    color: #0d0d0d;
  }
  html.dark .menu-btn { background: rgba(10,10,10,.38); border-color: rgba(255,255,255,.08); color: #fff; }
  .menu-btn span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .3s ease; }
  nav.menu-open .menu-btn span:first-child { transform: translateY(3.25px) rotate(45deg); }
  nav.menu-open .menu-btn span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

  /* The links drop down under the button in a frosted panel */
  nav .nav-links {
    display: none; top: 64px; left: auto; right: 5vw; transform: none;
    flex-direction: column; align-items: stretch; gap: 0 !important;
    min-width: 220px; padding: 8px 0;
  }
  nav.menu-open .nav-links { display: flex; }
  nav .nav-links a { padding: 14px 22px; font-size: 16px; }
  html.dark nav .nav-links { background: rgba(10,10,10,.72); }
  html:not(.dark) nav .nav-links { background: rgba(245,244,240,.86); }

  /* Header area on inner pages clears the logo and button */
  .about-hero { padding-top: 120px; min-height: 60vh; padding-bottom: 5rem; }
}

@media (max-width: 760px) {
  /* Home: heading, subline and buttons shrink with the screen instead of running off it */
  .hero-content { margin-left: 0; padding-right: 0; max-width: none; }
  .hero-content .hero-tag { font-size: min(26px, calc(90vw / 19)); }
  .hero-tag-sub { font-size: max(11px, .56em); }
  .hero-btns { gap: 10px; }
  .hero-btns .btn-gold, .hero-btns .btn-outline { font-size: 13.5px; padding: 13px 22px; }

  /* Section intros wrap instead of running off the screen */
  .sec-p { white-space: normal; }
  .services .sec-eyebrow { font-size: min(26px, calc(90vw / 12)); }
  .parts-strip { padding: 2.2rem 1.6rem; margin-bottom: 4.5rem; }
  .about-h1 { font-size: clamp(34px, 10vw, 48px); }
  .year-mark { font-size: 96px; }
  .services, .reviews, .services-all { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .theme-fab { width: 44px; height: 44px; bottom: 1.2rem; right: 1.2rem; font-size: 17px; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .cta-actions { width: 100%; }
  .cta-actions .btn-outline { flex: 1; text-align: center; padding-left: 16px; padding-right: 16px; }
}

/* Reviews: four across on desktop, two on tablets, one on phones */
@media (max-width: 1024px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }

/* Small phones: slimmer hero buttons so both stay on one line */
@media (max-width: 400px) {
  .hero-btns .btn-gold, .hero-btns .btn-outline { font-size: 13px; padding: 12px 16px; }
}

/* Phones: the portrait NSX photo shows whole at its natural shape, fading down into the page;
   the heading and buttons sit just under the car instead of beside it */
@media (max-width: 760px) {
  .hero { min-height: 0; padding-top: 0 !important; justify-content: flex-start; background: var(--hero-bg); }
  .hero-bg-img {
    position: relative; inset: auto; flex: none;
    width: calc(100% + 10vw); margin: 0 -5vw;
    aspect-ratio: 5 / 4; max-height: 42svh;
    background-position: center 70% !important; /* framing shifted up a little: a bit more sky, a bit less road */
  }
  .hero-fade {
    inset: 0 0 auto 0; height: calc(min(80vw, 42svh) + 2px);
    background: linear-gradient(to bottom, rgba(var(--hero-rgb), 0) 55%, rgba(var(--hero-rgb), .8) 80%, var(--hero-bg) 95%, var(--hero-bg) 100%);
  }
  .hero-content { margin-top: -4.5rem; }
  .hero-brands { margin-top: 2.5rem; padding-top: 30px; padding-bottom: 30px; gap: 20px; border-bottom: 1px solid rgba(0,0,0,.06); }
  html.dark .hero-brands { border-bottom-color: rgba(255,255,255,.08); }
}

/* Phones, home page: the logo sits on the sky of the photo, so it's always the official black logo file */
.logo-black { display: none; }
@media (max-width: 760px) {
  body.home-page .hero-logo .logo-svg { display: none; }
  body.home-page .hero-logo .logo-black { display: block; height: 43px; width: auto; }
}

/* Service cards: a light black frost over each photo, which clears on hover */
.nc-card::before {
  background-color: rgba(0,0,0,.34);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: background-color .5s cubic-bezier(.25,.8,.25,1), backdrop-filter .5s cubic-bezier(.25,.8,.25,1);
}
.nc-card:hover::before { background-color: rgba(0,0,0,.08); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }

/* Service card titles: regular weight */
.nc-text h2, .nc-text h3 { font-weight: 400; }

/* Service cards: a little wider and shorter than square, scaled down 25% (title and padding too) */
.nc-card { width: clamp(225px, 21vw, 292px); aspect-ratio: 5 / 4; }
.nc-grid { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }
.nc-text { padding: 20px; }
.nc-text h2, .nc-text h3 { font-size: 20px; }
@media (max-width: 768px) { .nc-card { width: 62vw; } }

/* ════════ Home services: tall photo panels that widen on hover (chosen option 3) ════════ */
.sp-row { display: flex; gap: 8px; height: 440px; }
.sp-panel { position: relative; flex: 1; min-width: 0; border-radius: 3px; overflow: hidden; background: #1a1b1d; text-decoration: none; transition: flex .6s cubic-bezier(.25,.8,.25,1); }
.sp-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Darker black frost, which clears when a panel opens */
.sp-panel::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: background-color .5s, backdrop-filter .5s;
}
.sp-name {
  position: absolute; z-index: 2; left: 50%; bottom: 24px; margin: 0;
  transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  color: #fff; font-size: 15px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .3s;
}
.sp-more { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 24px; color: #fff; opacity: 0; transition: opacity .3s .15s; }
.sp-more b { display: block; font-size: 22px; font-weight: 400; margin-bottom: .4rem; }
.sp-more span { font-size: 13.5px; font-weight: 300; line-height: 1.7; }
@media (hover: hover) {
  .sp-panel:hover { flex: 4; }
  .sp-panel:hover::before { background-color: rgba(0,0,0,.18); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  .sp-panel:hover .sp-name { opacity: 0; }
  .sp-panel:hover .sp-more { opacity: 1; }
}

/* Tablets and phones: the panels stack as wide strips with the name across */
@media (max-width: 820px) {
  .sp-row { flex-direction: column; height: auto; }
  .sp-panel { flex: none; height: 96px; }
  .sp-name { writing-mode: horizontal-tb; transform: translateY(-50%); left: 22px; right: 22px; bottom: auto; top: 50%; white-space: normal; }
}

/* ════════ Parts shop: product cards from the CRM inventory (assets/js/parts-shop.js) ════════ */
.parts-shop { padding: 5rem 5vw 7rem; }
.parts-shop .sec-intro { justify-content: center; }
.parts-shop .sec-intro > div { text-align: center; }
.parts-shop .sec-eyebrow { font-size: 26px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; line-height: normal; color: #000; white-space: nowrap; }
html.dark .parts-shop .sec-eyebrow { color: #fff; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
[data-parts-featured] .ps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ps-grid[hidden], .ps-empty[hidden], .pc-tools[hidden], .pc-filters[hidden] { display: none; }
.ps-empty { text-align: center; }
.ps-empty .ps-p { margin: 0 auto; max-width: 460px; font-size: 14.5px; line-height: 1.75; }
.ps-empty a { color: inherit; }
.ps-actions { display: flex; justify-content: center; margin-top: 3rem; }

.pc-card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; transition: border-color .3s, transform .3s; }
.pc-card:hover { border-color: var(--border-md); transform: translateY(-2px); }
.pc-img { position: relative; aspect-ratio: 1; background: var(--bg-2); overflow: hidden; }
.pc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fa); font-style: italic; font-size: 18px; color: var(--text-3); opacity: .5; }
.pc-body { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem 1.25rem; flex: 1; }
.pc-meta { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.pc-name { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--text-1); }
.pc-num { font-size: 12px; font-weight: 300; color: var(--text-3); }
.pc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .8rem; }
.pc-price { font-size: 15px; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.pc-unit { font-size: 12px; font-weight: 300; color: var(--text-3); }
.pc-stock { font-size: 11.5px; font-weight: 300; color: var(--text-3); white-space: nowrap; }
.pc-stock::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--text-3); opacity: .6; }
.pc-stock.is-in::before { background: #3fae6a; opacity: 1; }

/* Parts page: category chips and search above the catalog */
.parts-catalog { padding-top: 4rem; }
.pc-tools { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.pc-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-chip { font: inherit; font-size: 13px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-md); background: transparent; color: var(--text-2); cursor: pointer; transition: all .2s; }
.pc-chip:hover { color: var(--text-1); }
.pc-chip.is-on { background: var(--text-1); border-color: var(--text-1); color: var(--bg); }
.pc-search { font: inherit; font-size: 14px; padding: 10px 14px; min-width: 260px; border: 1px solid var(--border-md); border-radius: 3px; background: transparent; color: var(--text-1); }

@media (max-width: 1024px) { [data-parts-featured] .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .parts-shop { padding: 4rem 5vw 4.5rem; }
  .parts-shop .sec-eyebrow { font-size: min(26px, calc(90vw / 15)); }
  .ps-grid, [data-parts-featured] .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pc-body { padding: .9rem .9rem 1rem; }
  .pc-foot { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .pc-search { min-width: 0; width: 100%; }
}

/* Home: the parts section follows the services panels with the same gap the services heading has below the brand bar */
.parts-shop[data-parts-featured] { padding-top: 0; }

/* Home parts heading and description sit on the left, like the hero heading */
.parts-shop[data-parts-featured] .sec-intro { justify-content: flex-start; }
.parts-shop[data-parts-featured] .sec-intro > div { text-align: left; }
.parts-shop[data-parts-featured] .sec-p { margin-left: 0; }

/* Parts page "All": one section per category, in CRM order */
.ps-grid.is-grouped { display: block; }
.pc-group + .pc-group { margin-top: 3.5rem; }
.pc-group-title { margin: 0 0 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--text-1); }
.pc-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
@media (max-width: 760px) { .pc-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pc-group + .pc-group { margin-top: 2.5rem; } }

/* ════════ Parts request form (Parts page) and the card button that fills it ════════ */
.pc-request { align-self: flex-start; margin-top: .9rem; padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--border-md); background: none; font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; text-decoration: none; transition: color .2s, border-color .2s; }
.pc-request:hover { color: var(--text-1); border-color: var(--text-1); }

/* The request form opens as a pop-up (native <dialog>) */
.pr-head { margin-bottom: 2.5rem; }
.pr-head .sec-eyebrow { font-size: 26px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; line-height: normal; color: #000; margin-bottom: .6rem; }
html.dark .pr-head .sec-eyebrow { color: #fff; }
.pr-head .sec-p { margin: 0; white-space: normal; }
.pr-form { max-width: 820px; display: flex; flex-direction: column; gap: 2rem; }
.pr-form fieldset { border: 0; margin: 0; padding: 0; }
.pr-form legend { padding: 0; margin-bottom: 1rem; font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.pr-form legend span, .pr-l small { margin-left: .35rem; font-size: 11px; font-weight: 300; letter-spacing: normal; text-transform: none; color: var(--text-3); }
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.pr-grid-3 { grid-template-columns: 1fr 1.4fr 1.4fr; }
.pr-form label { display: flex; flex-direction: column; gap: .45rem; font-size: 13px; color: var(--text-2); }
.pr-form input { font: inherit; font-size: 14.5px; padding: 12px 14px; border: 1px solid var(--border-md); border-radius: 3px; background: transparent; color: var(--text-1); transition: border-color .2s; }
.pr-form input:focus { outline: none; border-color: var(--text-1); }
.pr-form input::placeholder { color: var(--text-3); opacity: .6; }
.pr-form input.is-bad { border-color: #c0392b; }
.pr-selected { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--border-md); border-radius: 3px; font-size: 14px; color: var(--text-2); }
.pr-selected[hidden] { display: none; }
.pr-selected b { font-weight: 600; color: var(--text-1); }
.pr-clear { margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--text-3); text-decoration: underline; cursor: pointer; }
/* Hidden from people, still in the page for bots to fill */
.pr-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pr-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.pr-actions .btn-outline:disabled { opacity: .5; cursor: default; }
.pr-status { margin: 0; font-size: 14px; color: var(--text-2); }

@media (max-width: 760px) {
  .pr-head .sec-eyebrow { font-size: min(26px, calc(90vw / 13)); }
  .pr-grid, .pr-grid-3 { grid-template-columns: 1fr; }
}

/* Request pop-up */
.pr-dialog { margin: auto; width: min(760px, calc(100% - 32px)); max-height: calc(100svh - 48px); padding: 0; border: 1px solid var(--border-md); border-radius: 6px; background: var(--bg); color: var(--text-1); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.pr-dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pr-dialog[open] { animation: pr-in .3s cubic-bezier(.25,.8,.25,1); }
@keyframes pr-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .pr-dialog[open] { animation: none; } }
.pr-inner { padding: 2.6rem 2.6rem 2.4rem; }
.pr-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; background: none; color: var(--text-3); font-size: 26px; line-height: 1; cursor: pointer; transition: color .2s; }
.pr-close:hover { color: var(--text-1); }
.pr-dialog .pr-head { margin-bottom: 2rem; padding-right: 2rem; }
.pr-dialog .pr-head .sec-eyebrow { margin-top: 0; }
.pr-dialog .pr-form { max-width: none; }

/* Catalog tools: search plus the "Request a part" button on the right */
.pc-tools-right { display: flex; gap: 12px; align-items: stretch; }
.pc-tools-right .btn-outline { white-space: nowrap; }
.pr-open-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

@media (max-width: 760px) {
  .pr-inner { padding: 2rem 1.3rem 1.6rem; }
  .pc-tools-right { width: 100%; flex-direction: column; }
}

/* Email quick domains under the email field */
.pr-domains { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-domains[hidden] { display: none; }
.pr-domain { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-md); background: transparent; color: var(--text-2); cursor: pointer; transition: color .2s, border-color .2s; }
.pr-domain:hover { color: var(--text-1); border-color: var(--text-1); }

/* Send request button centered, with its status message centered under it */
.pr-actions { flex-direction: column; justify-content: center; align-items: center; gap: .9rem; text-align: center; }

/* Section titles in the request form: black (white in dark mode) instead of silver */
.pr-form legend { color: #000; }
html.dark .pr-form legend { color: #fff; }

/* Request form: description box spans both columns */
.pr-wide { grid-column: 1 / -1; }
.pr-form textarea { font: inherit; font-size: 14.5px; padding: 12px 14px; border: 1px solid var(--border-md); border-radius: 3px; background: transparent; color: var(--text-1); resize: vertical; min-height: 90px; transition: border-color .2s; }
.pr-form textarea:focus { outline: none; border-color: var(--text-1); }
.pr-form textarea::placeholder { color: var(--text-3); opacity: .6; }

/* Request form: photo picker with thumbnails */
.pr-photos { display: flex; flex-direction: column; gap: .6rem; font-size: 13px; color: var(--text-2); }
.pr-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pr-thumbs:empty { display: none; }
.pr-thumb { position: relative; width: 88px; height: 88px; border-radius: 3px; overflow: hidden; border: 1px solid var(--border-md); }
.pr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-thumb button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.pr-add { align-self: flex-start; padding: 10px 16px; border: 1px dashed var(--border-md); border-radius: 3px; font-size: 13px; color: var(--text-2); cursor: pointer; transition: color .2s, border-color .2s; }
.pr-add:hover { color: var(--text-1); border-color: var(--text-1); }
.pr-add[hidden] { display: none; }

/* Legal pages (privacy policy, terms) */
.legal-hero{padding:166px 5vw 3rem;background:var(--bg-2);border-bottom:1px solid var(--border);text-align:center;}
.legal-hero .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block;}
.legal-hero h1{font-family:var(--fb);font-size:clamp(36px,5vw,56px);font-weight:700;letter-spacing:-.01em;color:var(--text-1);margin-bottom:.8rem;}
.legal-updated{font-size:13px;color:var(--text-3);}
.legal-body{max-width:760px;margin:0 auto;padding:4.5rem 5vw 6rem;}
.legal-toc{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:1.5rem 1.75rem;margin-bottom:3.5rem;}
.legal-toc h2{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);margin-bottom:1rem;}
.legal-toc ol{columns:2;column-gap:2rem;list-style:none;padding:0;margin:0;counter-reset:toc;}
.legal-toc li{counter-increment:toc;margin-bottom:.6rem;break-inside:avoid;}
.legal-toc li a{font-size:14px;color:var(--text-2);text-decoration:none;}
.legal-toc li a::before{content:counter(toc) ". ";color:var(--gold);font-weight:700;}
.legal-toc li a:hover{color:var(--gold);}
.legal-section{margin-bottom:3rem;scroll-margin-top:106px;}
.legal-section h2{font-family:var(--fb);font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--text-1);margin-bottom:1.2rem;letter-spacing:-.01em;}
.legal-section p{font-size:15px;font-weight:300;color:var(--text-2);line-height:1.85;margin-bottom:1.1rem;}
.legal-section ul{margin:0 0 1.1rem;padding-left:1.3rem;}
.legal-section li{font-size:15px;font-weight:300;color:var(--text-2);line-height:1.85;margin-bottom:.6rem;}
.legal-section strong{color:var(--text-1);font-weight:600;}
.legal-section a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
@media (max-width: 768px){
  .legal-hero{padding:146px 6vw 2.5rem;}
  .legal-body{padding:3rem 6vw 4rem;}
  .legal-toc ol{columns:1;}
}

/* ════════ Get a quote form (Contact page) ════════ */
.quote-section { --qf-line: #767676; --qf-hint: #5f5f5f; --qf-err: #b3261e; padding: 5rem 5vw; background: var(--bg); border-bottom: 1px solid var(--border); scroll-margin-top: 90px; }
html.dark .quote-section { --qf-line: #7d7d7d; --qf-hint: #a3a3a3; --qf-err: #ff9088; }
.quote-head { max-width: 820px; margin-bottom: 2.6rem; }
.quote-head .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--text-2); margin-bottom: 1rem; display: block; }
.quote-head h2 { font-family: var(--fb); font-size: clamp(26px, 3vw, 40px); font-weight: 700; color: var(--text-1); letter-spacing: -.01em; margin-bottom: 1rem; }
.quote-head p { font-size: 15px; font-weight: 300; color: var(--text-2); line-height: 1.8; }
.quote-head a, .qf-privacy a, .qf-summary a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.qf { max-width: 820px; display: flex; flex-direction: column; gap: 2rem; }
.qf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.qf legend { padding: 0; margin-bottom: 1rem; font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--text-1); }
.qf-note { margin: -.6rem 0 0; font-size: 13px; color: var(--qf-hint); }
.qf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.qf-grid-3 { grid-template-columns: 1fr 1.4fr 1.4fr; }
.qf-wide { grid-column: 1 / -1; }
.qf-field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.qf-field label { font-size: 13px; font-weight: 600; color: var(--text-1); }
.qf-field label small { margin-left: .35rem; font-size: 12px; font-weight: 400; color: var(--qf-hint); }
.qf input:not([type=checkbox]), .qf select, .qf textarea { font: inherit; font-size: 15px; width: 100%; padding: 12px 14px; border: 1px solid var(--qf-line); border-radius: 3px; background: transparent; color: var(--text-1); transition: border-color .2s; }
.qf textarea { resize: vertical; min-height: 110px; }
.qf select { appearance: auto; }
.qf select option { background: var(--bg); color: var(--text-1); }
.qf input::placeholder, .qf textarea::placeholder { color: var(--qf-hint); opacity: 1; }
.qf input:focus-visible, .qf select:focus-visible, .qf textarea:focus-visible, .qf-checkbox input:focus-visible, .qf button:focus-visible, .qf-summary:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.qf [aria-invalid="true"] { border-color: var(--qf-err); box-shadow: inset 3px 0 0 var(--qf-err); }
.qf-error { margin: 0; font-size: 13px; font-weight: 600; color: var(--qf-err); }
.qf-error[hidden] { display: none; }
.qf-error::before { content: "Error: "; }

.qf-summary { padding: 1.1rem 1.3rem; border: 2px solid var(--qf-err); border-radius: 3px; color: var(--text-1); }
.qf-summary[hidden] { display: none; }
.qf-summary-title { margin: 0 0 .5rem; font-size: 15px; font-weight: 700; color: var(--qf-err); }
.qf-summary ul { margin: 0; padding-left: 1.2rem; font-size: 14px; line-height: 1.7; }

.qf-checkbox { display: inline-flex; align-items: center; gap: .7rem; font-size: 15px; color: var(--text-1); cursor: pointer; }
.qf-checkbox input { width: 22px; height: 22px; margin: 0; accent-color: var(--text-1); cursor: pointer; flex: none; }
.qf-check .qf-error { margin-top: .45rem; }

.qf-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.qf-submit { min-width: 220px; }
.qf-submit[aria-disabled="true"] { opacity: .6; cursor: progress; pointer-events: none; }
.qf-submit.is-loading::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .8em; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: qf-spin .8s linear infinite; }
@keyframes qf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qf-submit.is-loading::after { animation-duration: 2.4s; } }
.qf-status { margin: 0; font-size: 14px; color: var(--text-2); }
.qf-privacy { margin: -.6rem 0 0; font-size: 13px; line-height: 1.7; color: var(--qf-hint); }
.qf-turnstile { min-height: 65px; }

@media (max-width: 760px) {
  .quote-section { padding: 4rem 6vw; }
  .qf-grid, .qf-grid-3 { grid-template-columns: 1fr; }
  .qf-submit { width: 100%; }
}

/* Thank-you page */
.thanks-section { padding: 5rem 5vw 7rem; background: var(--bg); }
.thanks-inner { max-width: 640px; }
.thanks-inner p { font-size: 16px; font-weight: 300; color: var(--text-2); line-height: 1.85; margin-bottom: 1.2rem; }
.thanks-inner a:not(.btn-outline) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.thanks-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2rem; }
.page-intro .btn-outline { margin-right: 10px; }