/* ============================================================
   SV AUTO GARAGE — Premium Design System
   Deep Black · Carbon Fiber · Metallic Silver · Performance Red
   ============================================================ */

/* ---------- Fonts ---------- */
/* Sora (display) + Inter (body) + Rajdhani (automotive labels) loaded via <link> in HTML */

/* ---------- Design Tokens ---------- */
:root {
  /* Core palette */
  --black:        #0A0A0A;
  --black-2:      #0E0E10;
  --black-3:      #131316;
  --panel:        #16161a;
  --panel-2:      #1c1c22;
  --red:          #D60000;
  --red-bright:   #ff1a1a;
  --red-deep:     #8f0000;
  --silver:       #d8dce2;
  --silver-2:     #a7adb8;
  --silver-dim:   #6b7178;
  --white:        #f4f6fa;
  --gold:         #c9a24b;
  --gold-bright:  #f6c513;

  /* Functional */
  --text:         #e8eaee;
  --text-dim:     #9aa0aa;
  --line:         rgba(255,255,255,.09);
  --line-strong:  rgba(255,255,255,.16);

  /* Gradients */
  --grad-red:     linear-gradient(135deg, #ff2b2b 0%, #D60000 45%, #8f0000 100%);
  --grad-steel:   linear-gradient(135deg, #f4f6fa 0%, #b9bfc9 40%, #6b7178 100%);
  --grad-dark:    linear-gradient(180deg, #131316 0%, #0A0A0A 100%);
  --grad-glass:   linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.015) 55%, rgba(255,255,255,0));

  /* Carbon fiber weave (pure CSS) */
  --carbon:
    linear-gradient(27deg, #141417 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #141417 5px, transparent 5px) 10px 0,
    linear-gradient(27deg, #0d0d10 5px, transparent 5px) 0 10px,
    linear-gradient(207deg, #0d0d10 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #17171b 10px, transparent 10px),
    linear-gradient(#101013 25%, #0c0c0f 25%, #0c0c0f 50%, transparent 50%, transparent 75%, #0c0c0f 75%, #0c0c0f);

  /* Shadows */
  --shadow-card:  0 24px 60px -20px rgba(0,0,0,.85);
  --shadow-red:   0 12px 40px -8px rgba(214,0,0,.55);
  --glow-red:     0 0 0 1px rgba(214,0,0,.35), 0 0 28px -4px rgba(214,0,0,.6);

  /* Layout */
  --container:    1280px;
  --radius:       18px;
  --radius-sm:    12px;
  --nav-h:        84px;

  /* Type */
  --f-display: 'Sora', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-label:   'Rajdhani', system-ui, sans-serif;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  background: var(--black);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection { background: var(--red); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #060606; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--red-deep), var(--red)); border-radius: 20px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; color: var(--white); }
.eyebrow {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: .38em;
  font-weight: 600;
  font-size: .78rem;
  color: var(--red-bright);
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before { content:''; width: 34px; height: 2px; background: var(--red); display: inline-block; }
.eyebrow.center::after { content:''; width: 34px; height: 2px; background: var(--red); display: inline-block; }
.section-title { font-size: clamp(2.1rem, 5vw, 4rem); margin: .6rem 0 1rem; }
.section-title .accent { color: transparent; -webkit-text-stroke: 1.4px var(--silver-2); }
.lead { color: var(--text-dim); font-size: 1.08rem; max-width: 620px; }
.text-red { color: var(--red-bright); }
.text-steel {
  background: var(--grad-steel);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 28px; }
.section { position: relative; padding: clamp(70px, 10vw, 140px) 0; }
.section-head { max-width: 760px; margin-bottom: 60px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.grid { display: grid; gap: 26px; }
.bg-carbon { background: var(--carbon); background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 40px; background-color: var(--black); }
.divider-glow { height: 1px; background: linear-gradient(90deg, transparent, var(--red) 50%, transparent); opacity: .5; }

/* Section top hairline sheen */
.section::before {
  content:''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 20%, rgba(214,0,0,.5) 50%, rgba(255,255,255,.12) 80%, transparent);
  opacity: .35;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 15px 30px;
  font-family: var(--f-label);
  font-weight: 700; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 100px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
  overflow: hidden; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--grad-red); color: #fff; box-shadow: var(--shadow-red); }
.btn-primary::after {
  content:''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--glow-red), 0 18px 40px -12px rgba(214,0,0,.7); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--white); border: 1px solid var(--line-strong); backdrop-filter: blur(6px); }
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--red); color: #fff; box-shadow: var(--glow-red); }
.btn-sm { padding: 11px 22px; font-size: .85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Navbar ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .45s var(--ease), box-shadow .45s, height .45s, border-color .45s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  height: 68px;
  background: rgba(8,8,9,.82);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 40px -18px #000;
}
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 800; letter-spacing: -.01em; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--grad-red); color: #fff; font-size: 1.15rem; font-weight: 800;
  box-shadow: var(--shadow-red); letter-spacing: -.04em;
}
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-txt b { font-size: 1.15rem; color: #fff; letter-spacing: .02em; }
.brand-txt span { font-family: var(--f-label); font-size: .62rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
  position: relative; padding: 10px 15px; font-size: .93rem; font-weight: 500; color: var(--silver-2);
  transition: color .3s; border-radius: 8px;
}
.nav-links a::after {
  content:''; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-phone { display: flex; align-items: center; gap: 8px; font-family: var(--f-label); font-weight: 600; letter-spacing: .05em; color: var(--white); }
.nav-phone svg { width: 18px; color: var(--red-bright); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 30px; }
.nav-toggle span { height: 2px; background: #fff; border-radius: 2px; transition: .3s; }
body.menu-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: rgba(6,6,7,.97); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 90px 32px 40px;
  transform: translateX(100%); transition: transform .5s var(--ease); visibility: hidden;
}
body.menu-open .mobile-menu { transform: translateX(0); visibility: visible; }
.mobile-menu a { font-family: var(--f-display); font-size: 1.8rem; font-weight: 700; color: var(--silver-2); padding: 10px 0; border-bottom: 1px solid var(--line); }
.mobile-menu a.active { color: var(--red-bright); }

/* ---------- HERO (shared page hero) ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  overflow: hidden;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(6,6,7,.72) 0%, rgba(6,6,7,.35) 45%, rgba(6,6,7,.15) 100%),
    linear-gradient(0deg, rgba(6,6,7,.85) 0%, transparent 40%, rgba(6,6,7,.55) 100%);
}
.hero-content { position: relative; z-index: 3; width: 100%; }
.hero h1 { font-size: clamp(2.8rem, 8vw, 6.6rem); letter-spacing: -.03em; }
.hero .lead { font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 1.6rem 0 2.4rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-cta.center { justify-content: center; }

/* Video hero */
.hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.hero-overlay.center {
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(6,6,7,.35) 0%, rgba(6,6,7,.62) 60%, rgba(6,6,7,.86) 100%),
    linear-gradient(0deg, rgba(6,6,7,.9) 0%, transparent 38%, rgba(6,6,7,.55) 100%);
}
.hero-content.center { text-align: center; }

/* SV / auto detailing lockup */
.hero-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hl-sv {
  font-family: var(--f-display); font-weight: 800; color: #fff;
  font-size: clamp(8rem, 30vw, 24rem); letter-spacing: -.05em; line-height: .78;
  text-shadow: 0 24px 70px rgba(0,0,0,.65), 0 2px 12px rgba(0,0,0,.55);
}
.hl-script {
  font-family: 'Kaushan Script', cursive; color: var(--gold-bright);
  font-size: clamp(3.4rem, 15vw, 11rem); line-height: 1;
  margin-top: -.36em; padding-right: .12em;
  text-shadow: 0 10px 34px rgba(0,0,0,.6), 0 0 28px rgba(246,197,19,.28);
  transform: rotate(-3deg);
}
.hero-tagline {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .22em;
  font-size: clamp(.72rem, 1.6vw, .95rem); color: var(--silver); margin: 1.8rem 0 2.2rem;
}

/* Page hero (inner pages) */
.page-hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; overflow: hidden; padding-bottom: 60px; }
.page-hero .bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.08); }
.page-hero::after {
  content:''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,6,7,.6) 0%, rgba(6,6,7,.5) 40%, rgba(10,10,10,.95) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.breadcrumb { font-family: var(--f-label); letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; color: var(--silver-dim); margin-top: 14px; }
.breadcrumb a:hover { color: var(--red-bright); }
.breadcrumb .sep { color: var(--red); margin: 0 8px; }

/* Scroll indicator */
.scroll-ind {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--f-label); letter-spacing: .3em; font-size: .68rem; text-transform: uppercase; color: var(--silver-2);
}
.scroll-ind .mouse { width: 26px; height: 42px; border: 2px solid var(--line-strong); border-radius: 20px; position: relative; }
.scroll-ind .mouse::after {
  content:''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 3px; background: var(--red-bright);
  transform: translateX(-50%); animation: wheel 1.8s infinite;
}
@keyframes wheel { 0%{opacity:0; transform: translate(-50%,0);} 40%{opacity:1;} 80%{opacity:0; transform: translate(-50%,14px);} 100%{opacity:0;} }

/* ---------- Marquee / Trust bar ---------- */
.marquee-wrap {
  position: relative; overflow: hidden; padding: 22px 0;
  background: var(--carbon); background-size: 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 36px;
  border-block: 1px solid var(--line);
}
.marquee-wrap::before, .marquee-wrap::after {
  content:''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--black), transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(270deg, var(--black), transparent); }
.marquee { display: flex; width: max-content; animation: marquee 55s linear infinite; }
.marquee.reverse { animation-direction: reverse; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 12px; padding: 0 34px;
  font-family: var(--f-label); font-weight: 600; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--silver); white-space: nowrap;
}
.marquee-item svg { width: 20px; color: var(--red-bright); flex: none; }
.marquee-item .chk { color: var(--red-bright); }
.marquee-sep { color: var(--red); opacity: .6; font-size: 1.4rem; align-self: center; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sponsors bar (single, carbon bg moves with logos) ---------- */
.sponsor-bar {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--line-strong);
  background: #060607;
}
.sponsor-bar::before, .sponsor-bar::after {
  content:''; position: absolute; top: 0; bottom: 0; width: 130px; z-index: 3; pointer-events: none;
}
.sponsor-bar::before { left: 0;  background: linear-gradient(90deg, #060607, transparent); }
.sponsor-bar::after  { right: 0; background: linear-gradient(270deg, #060607, transparent); }
.sponsor-track {
  display: flex; width: max-content;
  /* Carbon texture lives on the moving track, so it scrolls in perfect
     sync (same direction + speed) with the sponsor logos. */
  background-image: url('../assets/carbon.jpg');
  background-repeat: repeat;
  background-size: auto 100%;
  animation: sponsor-move 48s linear infinite;
}
.sponsor-bar:hover .sponsor-track { animation-play-state: paused; }
/* Rightward motion: track slides from -50% back to 0, looping seamlessly. */
@keyframes sponsor-move { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.sponsor-set { display: flex; align-items: center; gap: 30px; padding: 26px 15px; }
.sponsor-logo {
  flex: none; height: 96px; min-width: 160px; padding: 12px 28px;
  background: #fff; border-radius: 16px; display: grid; place-items: center;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.6);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.sponsor-logo:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 18px 40px -14px rgba(214,0,0,.55), 0 0 0 1px rgba(214,0,0,.4); }
.sponsor-logo img { max-height: 100%; max-width: 200px; width: auto; object-fit: contain; display: block; }
@media (max-width: 640px){
  .sponsor-logo { height: 74px; min-width: 120px; padding: 10px 18px; }
  .sponsor-set { gap: 18px; padding: 18px 9px; }
}
@media (prefers-reduced-motion: reduce){ .sponsor-track { animation: none; } }

/* ---------- Cards ---------- */
.card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.card::before {
  content:''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: var(--grad-glass); opacity: 0; transition: opacity .5s;
}
.card:hover { transform: translateY(-8px); border-color: rgba(214,0,0,.4); box-shadow: var(--shadow-card), var(--glow-red); }
.card:hover::before { opacity: 1; }

/* Service card */
.service-card { display: flex; flex-direction: column; min-height: 420px; }
.service-card .media { position: relative; height: 220px; overflow: hidden; }
.service-card .media img, .service-card .media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.service-card:hover .media img, .service-card:hover .media .ph { transform: scale(1.12); }
.service-card .media::after { content:''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--panel)); }
.service-card .num {
  position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--f-display); font-weight: 800;
  font-size: 1rem; color: #fff; background: rgba(214,0,0,.9); width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; box-shadow: var(--shadow-red);
}
.service-card .body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.service-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
.service-card p { color: var(--text-dim); font-size: .96rem; margin-bottom: 16px; }
.service-card .benefits { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.service-card .benefits li { display: flex; gap: 9px; align-items: center; font-size: .9rem; color: var(--silver-2); }
.service-card .benefits svg { width: 15px; color: var(--red-bright); flex: none; }
.service-card .card-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-label);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; color: var(--red-bright);
}
.service-card .card-link svg { width: 16px; transition: transform .3s; }
.service-card:hover .card-link svg { transform: translateX(5px); }

/* Placeholder gradient tiles (for imagery you'll swap) */
.ph {
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(214,0,0,.35), transparent 55%),
    linear-gradient(135deg, #1c1c22, #0c0c0f);
  display: grid; place-items: center;
}
.ph svg { width: 54px; height: 54px; color: rgba(255,255,255,.12); }
.ph .lbl { position: absolute; bottom: 12px; left: 14px; font-family: var(--f-label); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.3); }

/* ---------- Stats ---------- */
.stat { text-align: center; padding: 30px 18px; }
.stat .num { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1;
  background: var(--grad-steel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .num .suffix { color: var(--red-bright); -webkit-text-fill-color: var(--red-bright); }
.stat .label { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .18em; font-size: .82rem; color: var(--silver-2); margin-top: 12px; }

/* ---------- Glass / testimonial ---------- */
.glass {
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 20px 50px -30px #000;
}

/* ---------- Before/After slider ---------- */
.ba {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; cursor: ew-resize;
  border: 1px solid var(--line); user-select: none; box-shadow: var(--shadow-card);
}
.ba .layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ba .after { clip-path: inset(0 0 0 50%); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--red); z-index: 3; transform: translateX(-50%); box-shadow: 0 0 16px rgba(214,0,0,.8); }
.ba .grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%;
  background: var(--grad-red); display: grid; place-items: center; box-shadow: var(--glow-red); }
.ba .grip svg { width: 22px; color: #fff; }
.ba .tag { position: absolute; top: 14px; z-index: 4; font-family: var(--f-label); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; font-size: .72rem; padding: 5px 12px; border-radius: 6px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.ba .tag.b { left: 14px; } .ba .tag.a { right: 14px; color: var(--red-bright); }

/* ---------- Floating decorative wheel ---------- */
.float-wheel { position: absolute; pointer-events: none; z-index: 0; opacity: .9; filter: drop-shadow(0 40px 60px rgba(0,0,0,.7)); }
.spin { animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Reveal animations ---------- */
/* Hidden-start state only applies when JS is active (html.js) so the site
   degrades gracefully to fully-visible content if JS fails or is disabled. */
html.js .reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; }
.reveal.d4 { transition-delay: .4s; } .reveal.d5 { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee, .spin, .scroll-ind .mouse::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Footer ---------- */
.footer { position: relative; padding-top: 90px; background: var(--carbon); background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 40px; border-top: 1px solid var(--line); }
.footer::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 60px; }
.footer h4 { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .18em; font-size: .9rem; color: #fff; margin-bottom: 22px; }
.footer-links a { display: block; color: var(--silver-2); padding: 6px 0; transition: color .3s, padding .3s; font-size: .95rem; }
.footer-links a:hover { color: var(--red-bright); padding-left: 8px; }
.footer p.muted { color: var(--text-dim); font-size: .95rem; max-width: 320px; }
.footer .socials { display: flex; gap: 12px; margin-top: 22px; }
.footer .socials a { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--line); transition: .35s; }
.footer .socials a:hover { background: var(--grad-red); border-color: transparent; transform: translateY(-4px); box-shadow: var(--shadow-red); }
.footer .socials svg { width: 18px; color: #fff; }
.footer .hours li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--silver-2); font-size: .92rem; }
.footer .hours li span:last-child { color: #fff; font-weight: 600; }
.footer-bottom { border-top: 1px solid var(--line); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--text-dim); font-size: .88rem; }
.footer-bottom .made { font-family: var(--f-label); letter-spacing: .1em; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; text-align: center; padding: clamp(80px,12vw,150px) 0; }
.cta-band .bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.05); }
.cta-band::after { content:''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,6,7,.82), rgba(140,0,0,.35), rgba(6,6,7,.9)); }
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { font-size: clamp(2.3rem, 6vw, 4.6rem); }

/* ---------- Pills / chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); font-family: var(--f-label); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; color: var(--silver); }
.chip svg { width: 15px; color: var(--red-bright); }

/* ---------- Pricing cards ---------- */
.price-card { padding: 34px 30px; display: flex; flex-direction: column; }
.price-card.featured { border-color: rgba(214,0,0,.5); box-shadow: var(--glow-red); }
.price-card .tier-tag { position: absolute; top: 18px; right: 18px; font-family: var(--f-label); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; background: var(--grad-red); color: #fff; }
.price-card h3 { font-size: 1.5rem; }
.price-card .cat { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--red-bright); margin-bottom: 6px; }
.price-card .price { font-family: var(--f-display); font-weight: 800; font-size: 2.6rem; color: #fff; margin: 14px 0 4px; }
.price-card .price small { font-size: .95rem; color: var(--text-dim); font-weight: 500; }
.price-card .from { font-size: .8rem; color: var(--silver-dim); text-transform: uppercase; letter-spacing: .1em; font-family: var(--f-label); }
.price-card ul { margin: 22px 0 26px; display: flex; flex-direction: column; gap: 11px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--silver-2); }
.price-card li svg { width: 16px; color: var(--red-bright); flex: none; margin-top: 3px; }

/* ---------- Gallery / masonry ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 46px; }
.filter-btn { padding: 10px 22px; border-radius: 100px; border: 1px solid var(--line-strong); font-family: var(--f-label); letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; color: var(--silver-2); transition: .35s; }
.filter-btn:hover { color: #fff; border-color: var(--red); }
.filter-btn.active { background: var(--grad-red); color: #fff; border-color: transparent; box-shadow: var(--shadow-red); }
.masonry { columns: 3; column-gap: 20px; }
.masonry .tile { break-inside: avoid; margin-bottom: 20px; position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); cursor: pointer; }
.masonry .tile .ph, .masonry .tile img { width: 100%; display: block; transition: transform .8s var(--ease); }
.masonry .tile:hover .ph, .masonry .tile:hover img { transform: scale(1.1); }
.masonry .tile .cap { position: absolute; inset: auto 0 0 0; padding: 22px 18px 16px; background: linear-gradient(transparent, rgba(0,0,0,.85)); opacity: 0; transform: translateY(10px); transition: .4s; z-index: 2; }
.masonry .tile:hover .cap { opacity: 1; transform: none; }
.masonry .tile .cap h4 { font-size: 1.05rem; } .masonry .tile .cap span { font-family: var(--f-label); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--red-bright); }
.tile[data-h="s"] .ph { height: 240px; } .tile[data-h="m"] .ph { height: 340px; } .tile[data-h="l"] .ph { height: 440px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(4,4,5,.95); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 40px; }
.lightbox.open { display: flex; }
.lightbox .frame { max-width: 900px; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); }
.lightbox .ph { height: 60vh; }
.lightbox .close { position: absolute; top: 26px; right: 30px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); color: #fff; font-size: 1.5rem; display: grid; place-items: center; }
.lightbox .close:hover { background: var(--red); }

/* ---------- Accordion (FAQ) ---------- */
.acc-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; background: var(--panel); transition: border-color .4s; }
.acc-item.open { border-color: rgba(214,0,0,.45); }
.acc-q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 26px; font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; color: #fff; }
.acc-q .ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(214,0,0,.15); color: var(--red-bright); font-size: 1.3rem; transition: .4s; }
.acc-item.open .acc-q .ic { background: var(--grad-red); color: #fff; transform: rotate(135deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.acc-a .inner { padding: 0 26px 26px; color: var(--text-dim); }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--silver-2); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line-strong); border-radius: 10px;
  color: #fff; font-family: var(--f-body); font-size: .98rem; transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(214,0,0,.15); }
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- Contact channel buttons ---------- */
.channel { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); transition: .4s; }
.channel:hover { transform: translateX(6px); border-color: rgba(214,0,0,.4); box-shadow: var(--glow-red); }
.channel .ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.channel .ic svg { width: 22px; color: #fff; }
.channel b { display: block; color: #fff; font-size: 1rem; } .channel span { color: var(--text-dim); font-size: .88rem; }
.ic-wa { background: linear-gradient(135deg,#25d366,#128c4b); } .ic-tg { background: linear-gradient(135deg,#2aabee,#1e88c7); }
.ic-ms { background: linear-gradient(135deg,#a033ff,#0078ff,#00c6ff); } .ic-ig { background: linear-gradient(135deg,#feda75,#d62976,#962fbf,#4f5bd5); }
.ic-call { background: var(--grad-red); }

/* ---------- Timeline / process ---------- */
.step { position: relative; padding: 30px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); transition: .5s; overflow: hidden; }
.step:hover { border-color: rgba(214,0,0,.4); transform: translateY(-6px); }
.step .n { font-family: var(--f-display); font-weight: 800; font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px rgba(214,0,0,.5); margin-bottom: 14px; }
.step h4 { font-size: 1.25rem; margin-bottom: 10px; }
.step p { color: var(--text-dim); font-size: .94rem; }

/* ---------- Blog cards ---------- */
.post { display: flex; flex-direction: column; height: 100%; }
.post .media { height: 220px; position: relative; overflow: hidden; }
.post .media .ph { height: 100%; }
.post:hover .media .ph { transform: scale(1.08); }
.post .cat-tag { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--f-label); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; background: var(--grad-red); color: #fff; }
.post .body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.post .meta { font-family: var(--f-label); letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; color: var(--silver-dim); margin-bottom: 12px; }
.post h3 { font-size: 1.25rem; margin-bottom: 10px; transition: color .3s; }
.post:hover h3 { color: var(--red-bright); }
.post p { color: var(--text-dim); font-size: .93rem; }

/* ---------- Instagram grid ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ig-cell { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.ig-cell .ph { height: 100%; }
.ig-cell::after { content:''; position: absolute; inset: 0; background: rgba(214,0,0,.4); opacity: 0; transition: .4s; display: grid; place-items: center; }
.ig-cell:hover::after { opacity: 1; }
.ig-cell .ig-ic { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; opacity: 0; transition: .4s; }
.ig-cell:hover .ig-ic { opacity: 1; }
.ig-cell .ig-ic svg { width: 28px; color: #fff; }

/* ---------- Logo strip ---------- */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 54px; }
.logos span { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; color: rgba(255,255,255,.28); letter-spacing: -.02em; transition: color .3s; }
.logos span:hover { color: rgba(255,255,255,.7); }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.rev .media-col { order: 2; }
.feature-media { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.feature-media .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* ---------- Utility ---------- */
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}
.center{text-align:center}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
.note { font-size:.8rem;color:var(--silver-dim);font-style:italic;margin-top:10px }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr;gap:36px} .split.rev .media-col{order:0}
  .masonry{columns:2}
  .ig-grid{grid-template-columns:repeat(4,1fr)}
  .cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 820px){
  .nav-links, .nav-phone{display:none}
  .nav-toggle{display:flex}
  .cols-3, .cols-4{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .hero-overlay{background:linear-gradient(0deg, rgba(6,6,7,.9) 0%, transparent 55%, rgba(6,6,7,.5) 100%)}
}
@media (max-width: 640px){
  .container{padding-inline:20px}
  .masonry{columns:1}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .hero-cta .btn{flex:1}
}

/* ============================================================
   LIGHT THEME  — white background across the site.
   Hero / page-hero / CTA remain dark photographic banners
   (media backgrounds) with light text; everything else is light.
   ============================================================ */
:root{
  --black:#ffffff;
  --black-2:#f6f7f9;
  --black-3:#eceef2;
  --panel:#ffffff;
  --panel-2:#f3f4f7;
  --text:#252932;
  --text-dim:#5d6470;
  --silver:#3b414c;
  --silver-2:#5b6270;
  --silver-dim:#98a0ad;
  --white:#0f1116;                 /* now the "ink" for headings/labels */
  --line:rgba(16,18,22,.10);
  --line-strong:rgba(16,18,22,.16);
  --grad-dark:linear-gradient(180deg,#ffffff 0%,#f4f5f8 100%);
  --grad-steel:linear-gradient(135deg,#2b3037 0%,#6b7178 55%,#20242b 100%);
  --grad-glass:linear-gradient(150deg, rgba(0,0,0,.05), rgba(0,0,0,.015) 55%, rgba(0,0,0,0));
  --shadow-card:0 22px 55px -26px rgba(20,22,28,.28);
}
body{ background:#ffffff; color:var(--text); }

/* Section surfaces */
.bg-carbon{ background:#f5f6f8; }
.section::before{ background:linear-gradient(90deg, transparent, rgba(0,0,0,.06) 20%, rgba(214,0,0,.45) 50%, rgba(0,0,0,.06) 80%, transparent); opacity:.6; }
.divider-glow{ opacity:.4; }

/* Cards & glass */
.card{ background:#ffffff; border-color:var(--line); box-shadow:0 14px 40px -22px rgba(20,22,28,.22); }
.card:hover{ box-shadow:0 22px 46px -20px rgba(20,22,28,.30), var(--glow-red); }
.glass{ background:#ffffff; border-color:var(--line-strong); box-shadow:0 20px 50px -30px rgba(20,22,28,.30); }
.step{ background:#ffffff; }
.acc-item{ background:#ffffff; }
.acc-q{ color:var(--white); }
.price-card .price{ color:var(--white); }
.channel{ background:#ffffff; }

/* Buttons / chips / inputs on light */
.btn-ghost{ background:#ffffff; color:var(--white); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--red); color:#fff; border-color:transparent; }
.chip{ background:#ffffff; color:var(--silver); border-color:var(--line-strong); }
.field input,.field textarea,.field select{ background:#ffffff; color:var(--text); border-color:var(--line-strong); }

/* Navbar: light text over the dark hero at top; white bar once scrolled */
.nav:not(.scrolled) .brand-txt b{ color:#fff; }
.nav:not(.scrolled) .nav-links a{ color:rgba(255,255,255,.82); }
.nav:not(.scrolled) .nav-links a:hover,.nav:not(.scrolled) .nav-links a.active{ color:#fff; }
.nav:not(.scrolled) .nav-phone{ color:#fff; }
.nav.scrolled{ background:rgba(255,255,255,.9); border-bottom-color:var(--line); box-shadow:0 10px 30px -18px rgba(20,22,28,.28); }
.nav.scrolled .brand-txt b{ color:var(--white); }
.nav.scrolled .nav-links a{ color:var(--silver-2); }
.nav.scrolled .nav-links a:hover,.nav.scrolled .nav-links a.active{ color:var(--red); }
.nav.scrolled .nav-phone{ color:var(--white); }
.nav.scrolled .nav-toggle span{ background:#14151a; }
body.menu-open .nav-toggle span{ background:#14151a; }

/* Mobile drawer light */
.mobile-menu{ background:rgba(255,255,255,.98); }
.mobile-menu a{ color:var(--silver); border-bottom-color:var(--line); }
.mobile-menu a.active{ color:var(--red); }

/* Footer light */
.footer{ background:#f1f2f5; }
.footer::before{ background:linear-gradient(90deg, transparent, var(--red), transparent); }
.footer h4{ color:var(--white); }
.footer .muted{ color:var(--text-dim); }
.footer .socials a{ background:#ffffff; border-color:var(--line); }
.footer .socials svg{ color:var(--silver); }
.footer .socials a:hover{ background:var(--grad-red); border-color:transparent; }
.footer .socials a:hover svg{ color:#fff; }
.footer .hours li span:last-child{ color:var(--white); }

/* ---- Keep hero / page-hero / CTA banners dark with light text ---- */
.hero-tagline{ color:#e7e9ee; }
.scroll-ind{ color:rgba(255,255,255,.8); }
.scroll-ind .mouse{ border-color:rgba(255,255,255,.4); }
.hero .btn-ghost, .cta-band .btn-ghost{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.35); }
.hero .btn-ghost:hover, .cta-band .btn-ghost:hover{ background:var(--red); border-color:transparent; }
.page-hero h1{ color:#fff; }
.page-hero .breadcrumb{ color:rgba(255,255,255,.72); }
.page-hero .breadcrumb a:hover{ color:var(--red-bright); }
.cta-band h2{ color:#fff; }
.cta-band .lead{ color:rgba(255,255,255,.85); }
.hero .text-steel, .cta-band .text-steel{
  background:linear-gradient(135deg,#ffffff 0%,#c3c8d1 60%,#8b909b 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Light scrollbar + misc */
::-webkit-scrollbar-track{ background:#eceef2; }
.car-dots button{ background:rgba(0,0,0,.18); }
.masonry .tile{ background:#f2f3f6; }

/* ============================================================
   SERVICES — horizontal full-width rows (Industries-style)
   ============================================================ */
.svc-section{ background:#ffffff; }
.svc-list{ border-bottom:1px solid var(--line); }
.svc-row{ display:block; position:relative; border-top:1px solid var(--line); background:#ffffff; }
.svc-row-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block: clamp(22px, 3.6vw, 46px); }
.svc-name{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1; font-size:clamp(1.6rem, 5.4vw, 4.6rem);
  color:#14161b; transition:color .45s var(--ease); margin:0;
}
.svc-right{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); flex:none; }
.svc-chip{
  width:clamp(52px,6vw,74px); height:clamp(52px,6vw,74px); border-radius:18px;
  background:rgba(214,0,0,.10); border:1px solid rgba(214,0,0,.18);
  display:grid; place-items:center; perspective:520px; flex:none;
  transition:background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.svc-chip svg{ width:44%; height:44%; color:var(--red); transform-style:preserve-3d;
  animation:svcSpinY 7s linear infinite; }
@keyframes svcSpinY{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }
.svc-arrow{ color:#9aa0ab; display:grid; place-items:center; flex:none;
  transition:color .45s var(--ease), transform .45s var(--ease); }
.svc-arrow svg{ width:clamp(24px,2.4vw,34px); height:auto; }
.svc-progress{ position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--red); transition:width .5s var(--ease); }
/* Hover — name, chip and arrow animate together */
.svc-row:hover .svc-name{ color:var(--red); }
.svc-row:hover .svc-chip{ background:rgba(214,0,0,.18); border-color:rgba(214,0,0,.38); transform:scale(1.07); }
.svc-row:hover .svc-arrow{ color:var(--red); transform:translate(6px,-6px); }
.svc-row:hover .svc-progress{ width:100%; }
.reveal.d6{ transition-delay:.6s; }
@media (max-width:560px){
  .svc-name{ font-size:1.5rem; }
  .svc-arrow{ display:none; }
}

/* ============================================================
   CAR GALLERY — fluid two-row drifting photo wall
   ============================================================ */
.gallery-sec{ background:#ffffff; overflow:hidden; }
.gallery-wall{ position:relative; }
.gallery-wall::before,.gallery-wall::after{ content:''; position:absolute; top:0; bottom:0; width:110px; z-index:3; pointer-events:none; }
.gallery-wall::before{ left:0;  background:linear-gradient(90deg,#fff,transparent); }
.gallery-wall::after{ right:0; background:linear-gradient(270deg,#fff,transparent); }
.gallery-row{ display:flex; gap:22px; width:max-content; margin-bottom:22px; will-change:transform; }
.gallery-row.left{  animation:gal-left  64s linear infinite; }
.gallery-row.right{ animation:gal-right 58s linear infinite; margin-bottom:0; }
@keyframes gal-left{  from{ transform:translateX(0); }        to{ transform:translateX(-50%); } }
@keyframes gal-right{ from{ transform:translateX(-50%); }      to{ transform:translateX(0); } }
.gallery-wall:hover .gallery-row{ animation-play-state:paused; }
.gal-item{
  flex:none; width:clamp(250px,26vw,400px); aspect-ratio:4/3;
  border-radius:16px; overflow:hidden; position:relative;
  border:1px solid var(--line); box-shadow:0 18px 40px -24px rgba(20,22,28,.4);
}
.gal-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); }
.gal-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(10,10,12,.35)); opacity:0; transition:opacity .5s; }
.gal-item:hover img{ transform:scale(1.09); }
.gal-item:hover::after{ opacity:1; }
.gal-item:hover{ box-shadow:0 24px 50px -22px rgba(214,0,0,.5); border-color:rgba(214,0,0,.4); }
@media (prefers-reduced-motion: reduce){ .gallery-row{ animation:none; } }
@media (max-width:560px){ .gal-item{ width:74vw; } }

/* ============================================================
   CAR GALLERY — layered editorial collage (no auto-scroll)
   ============================================================ */
.collage-sec{ background:#ffffff; overflow:hidden; }
.col-feature,.col-split{ display:grid; gap:clamp(30px,5vw,70px); align-items:center; }
.col-feature{ grid-template-columns:0.82fr 1.18fr; }
.col-split{ grid-template-columns:1.15fr 0.85fr; margin-top:clamp(70px,10vw,140px); }

/* text + service blurbs */
.svc-blurbs{ display:flex; flex-direction:column; gap:16px; margin:30px 0 34px; }
.svc-blurb{ display:flex; gap:14px; align-items:flex-start; }
.svc-blurb .bi{ width:44px; height:44px; border-radius:12px; background:rgba(214,0,0,.10);
  border:1px solid rgba(214,0,0,.20); display:grid; place-items:center; flex:none; color:var(--red); }
.svc-blurb .bi svg{ width:21px; height:21px; }
.svc-blurb b{ display:block; color:var(--white); font-family:var(--f-display); font-weight:700; font-size:1.06rem; margin-bottom:2px; }
.svc-blurb span{ color:var(--text-dim); font-size:.93rem; line-height:1.5; }

/* image frames + clusters */
.frame{ border-radius:18px; overflow:hidden; position:relative; border:1px solid var(--line);
  box-shadow:0 26px 55px -26px rgba(20,22,28,.45); }
.frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); }
.frame:hover img{ transform:scale(1.06); }
.cluster,.split-media{ position:relative; }
.c-big{ aspect-ratio:5/4; }
.c-tall{ aspect-ratio:4/5; }
.c-over,.c-over2{ position:absolute; z-index:2; border:6px solid #fff; border-radius:18px;
  box-shadow:0 30px 60px -22px rgba(20,22,28,.55); aspect-ratio:4/3; }
.c-over{ width:54%; left:-7%; bottom:-13%; animation:floaty 6s ease-in-out infinite; }
.c-over2{ width:50%; right:-8%; top:-11%; animation:floaty 7s ease-in-out infinite .6s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.badge-float{ position:absolute; z-index:3; right:8%; top:8%; padding:12px 18px; border-radius:14px;
  background:var(--grad-red); color:#fff; box-shadow:var(--shadow-red);
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.06em; }
.badge-float b{ display:block; font-size:1.5rem; line-height:1; }
.badge-float span{ font-size:.7rem; letter-spacing:.18em; opacity:.9; }

/* mosaic */
.mosaic{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:150px; gap:16px;
  margin-top:clamp(56px,8vw,100px); }
.mtile{ border-radius:16px; overflow:hidden; position:relative; border:1px solid var(--line);
  box-shadow:0 16px 40px -24px rgba(20,22,28,.4); }
.mtile img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.mtile:hover img{ transform:scale(1.08); }
.mtile .cap{ position:absolute; inset:auto 0 0 0; padding:20px 16px 15px; z-index:2;
  background:linear-gradient(transparent,rgba(8,8,10,.82)); opacity:0; transform:translateY(8px); transition:.45s; }
.mtile:hover .cap{ opacity:1; transform:none; }
.mtile .cap b{ color:#fff; display:block; font-size:1rem; }
.mtile .cap span{ color:var(--red-bright); font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; }
.m1{ grid-column:span 4; grid-row:span 2; } .m2{ grid-column:span 2; grid-row:span 2; }
.m3{ grid-column:span 2; grid-row:span 2; } .m4{ grid-column:span 4; grid-row:span 2; }
.m5{ grid-column:span 3; grid-row:span 2; } .m6{ grid-column:span 3; grid-row:span 2; }

@media (max-width:900px){
  .col-feature,.col-split{ grid-template-columns:1fr; }
  .col-split .split-media{ order:-1; }
  .c-over{ position:static; width:74%; margin:-46px 0 0 auto; }
  .c-over2{ position:static; width:74%; margin:-46px auto 0 0; }
  .c-tall{ aspect-ratio:5/4; }
}
@media (max-width:640px){
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .m1,.m2,.m3,.m4,.m5,.m6{ grid-column:span 1; grid-row:span 1; }
  .mtile .cap{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .c-over,.c-over2{ animation:none; } }

/* ============================================================
   NAV — taller, solid black bar + image logo
   ============================================================ */
:root{ --nav-h:122px; }
.nav{ background:#0a0a0a; border-bottom:1px solid rgba(255,255,255,.08); }
.nav.scrolled{ height:96px; background:#0a0a0a; border-bottom-color:rgba(255,255,255,.12);
  box-shadow:0 12px 34px -16px #000; backdrop-filter:none; }
/* logo image */
.brand-logo{ height:80px; width:auto; display:block; transition:height .4s var(--ease); }
.nav.scrolled .brand-logo{ height:64px; }
.brand-fallback{ display:none; align-items:center; gap:9px; font-family:var(--f-display);
  font-weight:800; letter-spacing:.02em; font-size:clamp(1.3rem,2.2vw,1.7rem); color:#e9edf3; }
.brand-fallback b{ color:#fff; }
.brand.no-logo .brand-fallback{ display:inline-flex; }
/* links/phone/toggle stay light on the black bar in BOTH states */
.nav .nav-links a, .nav.scrolled .nav-links a{ color:rgba(255,255,255,.82); }
.nav .nav-links a:hover, .nav .nav-links a.active,
.nav.scrolled .nav-links a:hover, .nav.scrolled .nav-links a.active{ color:#fff; }
.nav .nav-phone, .nav.scrolled .nav-phone{ color:#fff; }
.nav .nav-toggle span, .nav.scrolled .nav-toggle span, body.menu-open .nav-toggle span{ background:#fff; }
/* mobile drawer to match the black bar */
.mobile-menu{ background:rgba(8,8,9,.98); }
.mobile-menu a{ color:rgba(255,255,255,.82); border-bottom-color:rgba(255,255,255,.10); }
.mobile-menu a.active{ color:var(--red-bright); }

/* ============================================================
   HERO — silver "SV" + gold script + bold silver sub-line
   ============================================================ */
.hl-sv{
  color:transparent; text-shadow:none;
  background:linear-gradient(180deg,#ffffff 0%,#dfe3e9 40%,#9aa1ac 54%,#f3f5f8 82%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.55));
}
.hero-tagline{
  font-weight:700; letter-spacing:.18em;
  color:transparent; -webkit-text-fill-color:transparent;
  background:linear-gradient(180deg,#ffffff 0%,#c6cbd4 58%,#969ca7 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
}

/* ============================================================
   GLOBAL BLACK THEME  — reverts the site to dark.
   (Appended last so it overrides the earlier light-theme layer.)
   ============================================================ */
:root{
  --black:#0A0A0A; --black-2:#0E0E10; --black-3:#131316;
  --panel:#16161a; --panel-2:#1c1c22;
  --text:#e8eaee; --text-dim:#9aa0aa;
  --silver:#d8dce2; --silver-2:#a7adb8; --silver-dim:#6b7178;
  --white:#f4f6fa;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --grad-dark:linear-gradient(180deg,#131316 0%,#0A0A0A 100%);
  --grad-steel:linear-gradient(135deg,#f4f6fa 0%,#b9bfc9 40%,#6b7178 100%);
  --grad-glass:linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.015) 55%, rgba(255,255,255,0));
  --shadow-card:0 24px 60px -20px rgba(0,0,0,.85);
}
body{ background:var(--black); color:var(--text); }
::-webkit-scrollbar-track{ background:#060606; }
.section::before{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 20%,rgba(214,0,0,.5) 50%,rgba(255,255,255,.12) 80%,transparent); opacity:.35; }

/* carbon surfaces */
.bg-carbon{
  background:var(--carbon);
  background-size:20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 40px;
  background-color:var(--black);
}
.footer{
  background:var(--carbon);
  background-size:20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 40px;
  background-color:var(--black);
}
.footer .socials a{ background:rgba(255,255,255,.05); border-color:var(--line); }
.footer .socials svg{ color:#fff; }

/* cards / panels / glass */
.card{ background:var(--panel); box-shadow:var(--shadow-card); }
.card:hover{ box-shadow:var(--shadow-card), var(--glow-red); }
.glass{ background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border-color:var(--line-strong); box-shadow:0 20px 50px -30px #000; }
.step,.acc-item,.channel{ background:var(--panel); }
.price-card.featured{ background:var(--panel); }
.masonry .tile{ background:#111214; }
.car-dots button{ background:rgba(255,255,255,.2); }

/* buttons / chips / inputs on dark */
.btn-ghost{ background:rgba(255,255,255,.04); color:var(--white); border-color:var(--line-strong); }
.btn-ghost:hover{ background:transparent; color:#fff; border-color:var(--red); }
.chip{ background:rgba(255,255,255,.04); color:var(--silver); border-color:var(--line-strong); }
.field input,.field textarea,.field select{ background:rgba(255,255,255,.03); color:#fff; border-color:var(--line-strong); }

/* new sections → dark */
.svc-section{ background:var(--black); }
.svc-row{ background:transparent; }
.svc-name{ color:#f4f6fa; }
.collage-sec{ background:var(--black); }

/* ---- Hero script: silver instead of gold ---- */
.hl-script{
  color:transparent; -webkit-text-fill-color:transparent; text-shadow:none;
  background:linear-gradient(180deg,#ffffff 0%,#d3d8df 55%,#9aa0aa 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.5));
}

/* ============================================================
   FONT REFRESH (modern + bold) · RECTANGULAR BUTTONS · HERO LOWER
   ============================================================ */
:root{
  --f-display:'Space Grotesk', system-ui, sans-serif;
  --f-body:'DM Sans', system-ui, sans-serif;
  --f-label:'Space Grotesk', system-ui, sans-serif;
}
body{ font-family:var(--f-body); }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; }
.eyebrow{ font-weight:600; }

/* Rectangular buttons */
.btn, .btn-sm, .btn-block{ border-radius:2px; }
.btn-primary::after{ border-radius:2px; }
.filter-btn{ border-radius:2px; }

/* Move the homepage hero lockup lower */
.hero .hero-content{ transform:translateY(9vh); }

/* ============================================================
   SERVICES section → white background (dark text)
   ============================================================ */
.svc-section{ background:#ffffff; }
.svc-section .section-title{ color:#0f1116; }
.svc-section .section-title .accent{ -webkit-text-stroke-color:rgba(20,22,27,.55); }
.svc-section .lead{ color:#5d6470; }
.svc-name{ color:#14161b; }
.svc-section .svc-row{ border-top-color:rgba(16,18,22,.12); }
.svc-section .svc-list{ border-bottom-color:rgba(16,18,22,.12); }
.svc-section .section::before,
.svc-section::before{ opacity:0; }

/* ============================================================
   INSTAGRAM — 3 big phones showing reels
   ============================================================ */
.phone-row{ display:flex; justify-content:center; align-items:center; gap:clamp(18px,3.4vw,50px); flex-wrap:wrap; padding:20px 0 10px; }
.phone{
  position:relative; flex:none;
  width:clamp(240px,25vw,340px); aspect-ratio:9/18.7;
  background:linear-gradient(150deg,#54565b 0%,#1b1c1f 38%,#0b0b0d 100%);
  border-radius:46px; padding:11px;
  box-shadow:0 46px 90px -34px rgba(0,0,0,.95), 0 0 0 2px #202126, inset 0 0 0 2px rgba(255,255,255,.07);
  animation:phone-float 6.5s ease-in-out infinite;
}
.phone:nth-of-type(2){ animation-delay:1s; }
.phone:nth-of-type(3){ animation-delay:2s; }
@keyframes phone-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.phone .screen{ position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; background:#000;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6); }
.phone .screen img{ width:100%; height:100%; object-fit:cover; display:block; }
.phone .island{ position:absolute; z-index:3; top:18px; left:50%; transform:translateX(-50%);
  width:32%; height:25px; background:#000; border-radius:16px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
/* side buttons */
.phone::before{ content:''; position:absolute; left:-3px; top:24%; width:3px; height:8%; background:#2a2b2f; border-radius:3px 0 0 3px; box-shadow:0 4.4rem 0 #2a2b2f, 0 7rem 0 #2a2b2f; }
.phone::after{ content:''; position:absolute; right:-3px; top:30%; width:3px; height:12%; background:#2a2b2f; border-radius:0 3px 3px 0; }
/* soft glow so phones pop on black */
.ig-glow{ position:relative; }
.ig-glow::before{ content:''; position:absolute; inset:-10% 0 -10% 0; z-index:0;
  background:radial-gradient(60% 55% at 50% 45%, rgba(214,0,0,.16), transparent 70%); pointer-events:none; }
.ig-glow .phone-row{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .phone{ animation:none; } }
@media (max-width:820px){ .phone{ width:clamp(200px,44vw,260px); } }

/* Homepage hero: smaller SV + script lockup */
.hl-sv{ font-size:clamp(5rem, 17vw, 14rem); }
.hl-script{ font-size:clamp(2.1rem, 8.5vw, 6.5rem); margin-top:-.3em; }

/* Hero lockup: solid white (no silver gradient) */
.hl-sv, .hl-script{
  background:none !important;
  -webkit-text-fill-color:#ffffff;
  color:#ffffff;
  text-shadow:0 12px 34px rgba(0,0,0,.5);
}

/* Hero lockup fonts: bolder modern SV + thin modern subtitle */
.hl-sv{
  font-family:'Archivo Black','Space Grotesk',sans-serif;
  font-weight:900; letter-spacing:-.03em;
}
.hl-script{
  font-family:'Outfit','DM Sans',sans-serif;
  font-weight:300; letter-spacing:.02em; text-transform:lowercase;
  transform:none; margin-top:.04em; padding-right:0;
}

/* ============================================================
   HERO — image lockup: wordmark (small, top) + BEST IN MOLDOVA (big, middle)
   ============================================================ */
.hero .hero-content{ transform:none; }              /* center the big headline */
.hero-wordmark{
  position:absolute; top:20%; left:50%; transform:translateX(-50%);
  z-index:4; width:min(360px, 40vw); height:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));
  pointer-events:none;
}
.hero-headline{
  width:min(860px, 86vw); height:auto; margin-inline:auto;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.55));
}
@media (max-width:640px){
  .hero-wordmark{ top:17%; width:64vw; }
  .hero-headline{ width:88vw; }
}

/* Hero image spacing tweak */
.hero .hero-content{ transform:translateY(7vh); }
.hero-wordmark{ top:18%; }

/* Hero text images — force strong contrast over the video */
.hero-overlay.center{
  background:
    radial-gradient(ellipse 85% 62% at 50% 46%, rgba(6,6,7,.55), rgba(6,6,7,.5) 55%, rgba(6,6,7,.82) 100%),
    linear-gradient(0deg, rgba(6,6,7,.92) 0%, rgba(6,6,7,.3) 45%, rgba(6,6,7,.7) 100%);
}
.hero-wordmark{
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.95)) drop-shadow(0 10px 28px rgba(0,0,0,.85));
}
.hero-headline{
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.98)) drop-shadow(0 16px 44px rgba(0,0,0,.9));
}

/* Hero images: bigger headline (middle), smaller wordmark (upper) */
.hero-headline{ width:min(1000px, 92vw); }
.hero-wordmark{ width:min(300px, 34vw); top:15%; }
.hero .hero-content{ transform:translateY(6vh); }
@media (max-width:640px){
  .hero-headline{ width:92vw; }
  .hero-wordmark{ top:16%; width:58vw; }
}

/* ============================================================
   SPONSORS BAR — carbon-fiber bg, bold heading, uniform bigger cards
   ============================================================ */
.sponsor-bar{
  padding:38px 0 44px;
  background:
    linear-gradient(rgba(6,6,8,.42), rgba(6,6,8,.42)),
    url('../assets/carbon.jpg');
  background-size:auto, 300px;
  background-repeat:repeat, repeat;
  background-color:#0b0b0d;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.sponsor-head{ position:relative; z-index:2; text-align:center; margin-bottom:30px; }
.sponsor-head h3{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  letter-spacing:.24em; font-size:clamp(1.3rem,2.6vw,2.1rem); color:#fff;
  display:inline-flex; align-items:center; gap:18px;
  text-shadow:0 4px 18px rgba(0,0,0,.7);
}
.sponsor-head h3::before, .sponsor-head h3::after{ content:''; width:52px; height:2px; background:var(--red); }
/* logos ride over the static carbon (remove carbon from the track) */
.sponsor-track{ background:none !important; }
.sponsor-set{ gap:30px; padding:0 15px; }
.sponsor-logo{
  flex:none; width:240px; height:150px; min-width:0; padding:22px 28px;
  border-radius:16px; background:#fff;
  box-shadow:0 20px 44px -16px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.5);
}
.sponsor-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.sponsor-logo:hover{ transform:translateY(-6px) scale(1.03); box-shadow:0 24px 50px -16px rgba(214,0,0,.5), 0 0 0 1px rgba(214,0,0,.4); }
/* edge fades match the carbon dark */
.sponsor-bar::before{ width:120px; background:linear-gradient(90deg,#0b0b0d,transparent); }
.sponsor-bar::after{ width:120px; background:linear-gradient(270deg,#0b0b0d,transparent); }
@media(max-width:640px){
  .sponsor-logo{ width:172px; height:112px; padding:16px 20px; }
  .sponsor-set{ gap:18px; }
}

/* ============================================================
   TITLES → Porsche-style font (Titillium Web), bold
   ============================================================ */
:root{ --f-display:'Titillium Web','Space Grotesk',sans-serif; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; }
.section-title{ font-weight:700; }

/* ============================================================
   GALLERY (collage) section → white bg, dark text,
   no check-marks, smaller photos
   ============================================================ */
.collage-sec{ background:#ffffff; }
.collage-sec .section-title{ color:#0f1116; }
.collage-sec .section-title .accent{ -webkit-text-stroke-color:rgba(20,22,27,.5); }
.collage-sec .lead{ color:#5d6470; }
.collage-sec .svc-blurb b{ color:#14161b; }
.collage-sec .svc-blurb span{ color:#5d6470; }
/* remove the check-mark chips before the text */
.collage-sec .svc-blurb .bi{ display:none; }
.collage-sec .svc-blurbs{ gap:14px; }
/* smaller photos */
.collage-sec .cluster{ max-width:440px; margin-inline:auto; }
.collage-sec .split-media{ max-width:440px; margin-inline:auto; }
.collage-sec .c-over{ box-shadow:0 24px 46px -20px rgba(20,22,28,.5); }
.collage-sec .c-over2{ box-shadow:0 24px 46px -20px rgba(20,22,28,.5); }
.collage-sec .frame{ box-shadow:0 22px 44px -22px rgba(20,22,28,.4); }
.mosaic{ grid-auto-rows:112px; gap:14px; }
.collage-sec .badge-float{ transform:scale(.85); transform-origin:top right; }

/* ============================================================
   SERVICES — big car-image cards, car-shade gradient, grow on hover
   ============================================================ */
.svc-section{ background:#ffffff; padding-block:clamp(100px,14vw,200px); }
.svc-cards{ display:flex; flex-direction:column; gap:28px; }
.svc-card{
  position:relative; display:flex; align-items:stretch; overflow:hidden; text-decoration:none;
  border-radius:24px; min-height:230px; background:var(--g,#222);
  box-shadow:0 28px 64px -30px rgba(15,17,22,.55);
  transition:transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s;
  transform-origin:center; will-change:transform;
}
.svc-card:hover{ transform:scale(1.035); box-shadow:0 46px 92px -34px rgba(15,17,22,.6); z-index:3; }
.svc-photo{ width:46%; flex:none; overflow:hidden; }
.svc-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,#000 74%, transparent 100%);
          mask-image:linear-gradient(90deg,#000 74%, transparent 100%);
}
.svc-card:hover .svc-photo img{ transform:scale(1.09); }
.svc-txt{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 clamp(28px,4.5vw,60px); }
.svc-section .svc-card .svc-name{
  color:#ffffff; font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1.03; margin:0;
  font-size:clamp(1.7rem,3.4vw,3.1rem); text-shadow:0 2px 16px rgba(0,0,0,.3);
}
.svc-arrow{ flex:none; color:rgba(255,255,255,.85); display:grid; place-items:center;
  transition:transform .5s var(--ease), color .5s; }
.svc-arrow svg{ width:clamp(28px,3vw,44px); height:auto; }
.svc-card:hover .svc-arrow{ transform:translate(9px,-9px); color:#fff; }
@media (max-width:720px){
  .svc-card{ flex-direction:column; min-height:0; border-radius:18px; }
  .svc-photo{ width:100%; height:190px; }
  .svc-photo img{ -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent); mask-image:linear-gradient(180deg,#000 70%,transparent); }
  .svc-txt{ padding:22px 24px 26px; }
}

/* Fix: consistent big card height (image cover-cropped) */
.svc-card{ height:clamp(240px, 21vw, 300px); min-height:0; }
@media (max-width:720px){ .svc-card{ height:auto; } }

/* ============================================================
   SERVICES cards — full width, sharp, no gaps, dark-grey +
   black-tinted full car image
   ============================================================ */
.svc-cards{ gap:0; width:100%; max-width:none; }
.svc-card{
  height:clamp(230px,20vw,290px);
  border-radius:0;
  background:linear-gradient(115deg,#3a3e45 0%,#212429 52%,#121418 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:none;
  transition:transform .5s var(--ease), box-shadow .5s;
}
.svc-card:first-of-type{ border-top:1px solid rgba(255,255,255,.06); }
.svc-card:hover{ transform:scale(1.02); box-shadow:0 30px 60px -18px rgba(0,0,0,.6); z-index:3; }
.svc-photo{ width:38%; background:#0a0a0a; position:relative; }
.svc-photo img{
  object-fit:contain;                 /* show the full car */
  -webkit-mask-image:none; mask-image:none;
  filter:brightness(.6) contrast(1.05);   /* black tint */
  transition:transform .8s var(--ease), filter .5s;
}
.svc-card:hover .svc-photo img{ transform:scale(1.05); filter:brightness(.82) contrast(1.05); }
.svc-photo::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,8,10,.3) 0%, transparent 28%, transparent 62%, #131519 100%); }
.svc-txt{ padding:0 clamp(30px,5vw,80px); }
@media (max-width:720px){
  .svc-card{ flex-direction:column; height:auto; }
  .svc-photo{ width:100%; height:210px; }
  .svc-photo::after{ background:linear-gradient(180deg, transparent 70%, #131519); }
}

/* ============================================================
   SERVICES section → all black (transparent car cutouts, black tint)
   ============================================================ */
.svc-section{ background:#050506; }
.svc-section .section-title{ color:#ffffff; }
.svc-section .section-title .accent{ -webkit-text-stroke-color:rgba(255,255,255,.5); }
.svc-section .lead{ color:#9aa0aa; }
/* cards on pure black, subtle divider */
.svc-card{ background:linear-gradient(115deg,#26292e 0%,#16181c 52%,#0b0c0e 100%); border-bottom-color:rgba(255,255,255,.05); }
.svc-card:first-of-type{ border-top-color:rgba(255,255,255,.05); }
.svc-photo{ background:#000; }
.svc-photo::after{ background:linear-gradient(90deg, rgba(0,0,0,.3) 0%, transparent 30%, transparent 62%, #0b0c0e 100%); }
/* keep the black tint on the car cutouts */
.svc-photo img{ filter:brightness(.62) contrast(1.03); }
.svc-card:hover .svc-photo img{ filter:brightness(.82) contrast(1.03); }

/* ============================================================
   LANGUAGE SWITCH (white) + hide Google Translate banner
   ============================================================ */
.lang-switch{ display:inline-flex; align-items:center; background:#ffffff; border-radius:4px;
  padding:3px; gap:2px; box-shadow:0 10px 26px -12px rgba(0,0,0,.7); }
.lang-switch button{ font-family:var(--f-label); font-weight:700; font-size:.82rem; letter-spacing:.06em;
  padding:8px 13px; border-radius:2px; color:#191b1f; background:transparent; cursor:pointer;
  transition:background .25s, color .25s; line-height:1; }
.lang-switch button:hover{ color:var(--red); }
.lang-switch button.active{ background:var(--red); color:#fff; }
@media (max-width:820px){ .lang-switch button{ padding:7px 10px; font-size:.78rem; } }

/* keep Google Translate machinery invisible / non-shifting */
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame, .skiptranslate.goog-te-gadget{ display:none !important; visibility:hidden !important; height:0 !important; }
body{ top:0 !important; position:static !important; }
#goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .goog-text-highlight{ display:none !important; background:none !important; box-shadow:none !important; }
.goog-logo-link, .goog-te-gadget span{ display:none !important; }

/* Fully hide Google Translate top banner (keep translation active) */
iframe.skiptranslate,
.skiptranslate > iframe,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd { display:none !important; visibility:hidden !important; height:0 !important; }
body { top:0 !important; position:static !important; }

/* ============================================================
   SERVICES cadrans — cinematic studio background behind cars
   ============================================================ */
.svc-card{
  background:#0a0a0b url('../assets/studio-bg.png') center/cover no-repeat;
}
.svc-photo{ background:transparent; }         /* car floats on the studio bg */
.svc-photo::after{ display:none; }
/* subtle darkening on the text side for legibility */
.svc-txt{ position:relative; }
.svc-card::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 40%, rgba(6,6,8,.28) 100%); }
.svc-photo, .svc-txt{ position:relative; z-index:1; }
/* let the cars read on the moody studio */
.svc-photo img{ filter:brightness(.72) contrast(1.04); }
.svc-card:hover .svc-photo img{ filter:brightness(.9) contrast(1.04); }

/* ============================================================
   BATCH: hero wordmark · services light · reel phones · socials
   ============================================================ */

/* Hero wordmark → upper-middle (same size) */
.hero-wordmark{ top:27%; }

/* Services: bigger cars, white focus light beneath car, darker grey, stronger hover */
.svc-photo{ width:47%; }
.svc-photo img{ transform:scale(1.14); filter:brightness(.82) contrast(1.05); }
.svc-card:hover .svc-photo img{ transform:scale(1.26); filter:brightness(.98) contrast(1.05); }
.svc-card{
  background:
    radial-gradient(56% 40% at 23% 96%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.14) 32%, transparent 62%),
    linear-gradient(rgba(2,2,3,.52), rgba(2,2,3,.52)),
    url('../assets/studio-bg.png');
  background-repeat:no-repeat;
  background-size:auto, auto, cover;
  background-position:center, center, center;
}
.svc-card:hover{ transform:scale(1.05); z-index:5; box-shadow:0 50px 100px -30px rgba(0,0,0,.75); }

/* ---- Reel phones: realistic, cut bottom + fade + reel UI ---- */
.phone-row{ align-items:flex-start;
  -webkit-mask-image:linear-gradient(180deg,#000 58%, transparent 100%);
          mask-image:linear-gradient(180deg,#000 58%, transparent 100%); }
.phone{ animation:none; }
.phone .island{ position:absolute; }
.phone .island::after{ content:''; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #33455a, #05070a);
  box-shadow:inset 0 0 2px rgba(120,170,230,.6); }
.phone .screen{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.35); }
.phone .screen::after{ content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 24%); }
.phone .screen::before{ content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 55%, rgba(0,0,0,.4) 100%); }
/* Instagram reel UI */
.reel-ui{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.reel-handle{ position:absolute; top:15px; left:12px; display:flex; align-items:center; gap:7px;
  color:#fff; font-family:var(--f-body); font-weight:600; font-size:.72rem; letter-spacing:.01em;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.8)); }
.reel-handle .dot{ width:22px; height:22px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#feda75,#d62976,#4f5bd5); box-shadow:0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.3); }
.reel-actions{ position:absolute; right:9px; top:38%; display:flex; flex-direction:column; gap:16px; align-items:center; color:#fff; }
.reel-actions .ra{ display:flex; flex-direction:column; align-items:center; gap:3px; filter:drop-shadow(0 2px 5px rgba(0,0,0,.7)); }
.reel-actions .ra svg{ width:25px; height:25px; }
.reel-actions .ra b{ font-family:var(--f-label); font-size:.6rem; font-weight:700; }
/* bottom lighting where phones fade */
.ig-glow{ padding-bottom:0; }
.ig-glow::after{ content:none; }

/* ---- Social icons row ---- */
.ig-socials{ display:flex; justify-content:center; gap:16px; margin-top:20px; }
.soc-ic{ width:58px; height:58px; border-radius:15px; display:grid; place-items:center;
  background:rgba(255,255,255,.05); border:1px solid var(--line-strong); color:#fff; transition:transform .35s var(--ease), background .35s, box-shadow .35s, border-color .35s; }
.soc-ic svg{ width:25px; height:25px; }
.soc-ic:hover{ transform:translateY(-6px); }
.soc-ic.ig:hover{ background:linear-gradient(135deg,#feda75,#d62976,#962fbf,#4f5bd5); border-color:transparent; box-shadow:0 16px 34px -12px rgba(214,41,118,.65); }
.soc-ic.tt:hover{ background:#000; border-color:#25f4ee; box-shadow:0 0 0 1px #25f4ee, 0 16px 34px -14px rgba(37,244,238,.4); }
.soc-ic.fb:hover{ background:#1877f2; border-color:transparent; box-shadow:0 16px 34px -14px rgba(24,119,242,.65); }

/* Services group headers: Detailing / Service */
.svc-group-head{ display:flex; align-items:center; justify-content:center; gap:22px;
  padding:clamp(44px,6vw,72px) 20px clamp(28px,3.5vw,40px); }
.svc-group-head span{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  letter-spacing:.22em; font-size:clamp(1.4rem,2.8vw,2.2rem); color:#fff; }
.svc-group-head::before, .svc-group-head::after{ content:''; width:clamp(40px,7vw,80px); height:2px; background:var(--red); }
.svc-group-head + .svc-card{ border-top:1px solid rgba(255,255,255,.06); }

/* ============================================================
   NAV dropdown (Services → Detailing / Service)
   ============================================================ */
.nav-drop{ position:relative; }
.nav-drop > a{ display:inline-flex; align-items:center; gap:6px; }
.nav-drop > a .caret{ transition:transform .3s var(--ease); opacity:.7; }
.nav-drop:hover > a .caret{ transform:rotate(180deg); }
/* hover bridge so the gap doesn't drop the menu */
.nav-drop::after{ content:''; position:absolute; left:0; right:0; top:100%; height:22px; }
.nav-menu{
  position:absolute; top:calc(100% + 16px); left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:320px; background:#101216; border:1px solid var(--line-strong);
  border-radius:16px; padding:10px; box-shadow:0 34px 70px -24px #000, 0 0 0 1px rgba(255,255,255,.03);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index:130;
}
.nav-menu::before{ content:''; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:14px; height:14px; background:#101216; border-left:1px solid var(--line-strong); border-top:1px solid var(--line-strong); }
.nav-drop:hover .nav-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nm-item{ display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:12px;
  transition:background .25s; }
.nm-item:hover{ background:rgba(255,255,255,.06); }
.nm-item::after{ display:none; }  /* cancel the underline used on nav links */
.nm-ic{ width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:rgba(214,0,0,.12); border:1px solid rgba(214,0,0,.22); color:var(--red-bright); }
.nm-ic svg{ width:21px; height:21px; }
.nm-item:hover .nm-ic{ background:var(--grad-red); border-color:transparent; color:#fff; }
.nm-tx{ display:flex; flex-direction:column; gap:2px; }
.nm-tx b{ color:#fff; font-family:var(--f-display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.nm-tx b i{ color:var(--silver-2); font-style:normal; font-weight:500; font-size:.9rem; }
.nm-tx > span{ color:var(--text-dim); font-size:.8rem; }
/* scroll offset so the fixed nav doesn't cover the anchored group heads */
.svc-group-head{ scroll-margin-top:150px; }

/* Service page — white hero with big display title */
.svc-hero-white{ background:#ffffff; min-height:60vh; display:flex; align-items:center; padding:150px 0 64px; }
.svc-hero-white::after{ display:none !important; }
.svc-hero-title{ display:flex; flex-direction:column; margin:0;
  font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase;
  line-height:.86; letter-spacing:-.03em; }
.svc-hero-title .fill{ color:#0e0f12; font-size:clamp(2rem,6vw,5rem); }
.svc-hero-title .outline{ color:transparent; -webkit-text-stroke:clamp(1.5px,.32vw,3px) #0e0f12;
  font-size:clamp(3.6rem,12vw,10rem); }
.svc-hero-white .breadcrumb{ color:#5d6470; margin-top:26px; font-size:.9rem; }
.svc-hero-white .breadcrumb a{ color:#5d6470; }
.svc-hero-white .breadcrumb a:hover{ color:var(--red); }
.svc-hero-white .breadcrumb .sep{ color:var(--red); }

/* ============================================================
   WHY CHOOSE — light grey, stats column (left) + car collage (right)
   ============================================================ */
.why-sec{ background:#e9ebef; }
.why-sec::before{ opacity:0; }
.why-grid{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(32px,5vw,66px); align-items:center; }
.why-stats{ display:flex; flex-direction:column; }
.why-stat{ padding:22px 2px; border-bottom:1px solid rgba(15,17,22,.12); }
.why-stat:first-child{ padding-top:0; }
.why-stat:last-child{ border-bottom:none; }
.why-stat .num{ font-family:var(--f-display); font-weight:700; line-height:1;
  font-size:clamp(2.6rem,4.6vw,4.1rem); color:#0f1116; letter-spacing:-.02em; }
.why-stat .num .suffix{ color:var(--red); }
.why-stat .label{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.16em;
  font-size:.82rem; color:#5d6470; margin-top:8px; }
.why-media{ display:grid; grid-template-columns:1.55fr 1fr; gap:16px; height:clamp(360px,42vw,540px); }
.wm-big{ border-radius:20px; overflow:hidden; box-shadow:0 34px 64px -30px rgba(15,17,22,.4); }
.wm-big img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.wm-big:hover img{ transform:scale(1.05); }
.wm-side{ display:grid; grid-template-rows:1fr 1fr; gap:16px; }
.wm-small{ border-radius:16px; overflow:hidden; box-shadow:0 24px 46px -28px rgba(15,17,22,.4); }
.wm-small img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.wm-small:hover img{ transform:scale(1.07); }
@media (max-width:820px){
  .why-grid{ grid-template-columns:1fr; }
  .why-media{ height:auto; grid-template-columns:1fr; }
  .wm-big{ height:240px; }
  .wm-side{ grid-template-columns:1fr 1fr; grid-template-rows:none; } .wm-small{ height:160px; }
}

/* ============================================================
   SERVICE PAGE — white pricing section + currency switch + bg photos
   ============================================================ */
.pricing-white{ background:#f3f4f6; position:relative; overflow:hidden; }
.pricing-white::before{ opacity:0; }
.pricing-white .section-title{ color:#0f1116; }
.pricing-white .section-title .accent{ -webkit-text-stroke-color:rgba(15,17,22,.5); }
.pricing-white .lead{ color:#5d6470; }
.pricing-white .container{ position:relative; z-index:2; }
/* decorative background photos */
.pw-bg{ position:absolute; z-index:0; pointer-events:none; filter:grayscale(.25); }
.pw-bg1{ top:-3%; right:-5%; width:min(560px,42vw); opacity:.10; }
.pw-bg2{ bottom:-6%; left:-7%; width:min(460px,34vw); opacity:.08; }
.pw-bg3{ top:52%; right:-3%; width:min(300px,22vw); opacity:.09; }
.pw-bg4{ top:24%; left:-6%; width:min(340px,24vw); opacity:.07; }
/* currency switch */
.cur-switch{ display:inline-flex; gap:4px; background:#fff; border:1px solid rgba(15,17,22,.12);
  border-radius:100px; padding:4px; margin-top:26px; box-shadow:0 10px 26px -14px rgba(15,17,22,.3); }
.cur-switch button{ font-family:var(--f-label); font-weight:700; letter-spacing:.08em; font-size:.9rem;
  padding:10px 22px; border-radius:100px; color:#5d6470; cursor:pointer; transition:background .25s,color .25s; }
.cur-switch button:hover{ color:var(--red); }
.cur-switch button.active{ background:var(--grad-red); color:#fff; box-shadow:var(--shadow-red); }
/* category label */
.pw-cat{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:#0f1116; font-size:clamp(1.15rem,2vw,1.5rem); margin:clamp(44px,5vw,64px) 0 22px; display:flex; align-items:center; gap:18px; }
.pw-cat::after{ content:''; flex:1; height:1px; background:rgba(15,17,22,.12); }
.pw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pw-card{ position:relative; z-index:1; background:#fff; border:1px solid rgba(15,17,22,.09);
  border-radius:18px; padding:28px 26px; box-shadow:0 20px 44px -26px rgba(15,17,22,.22);
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s; display:flex; flex-direction:column; }
.pw-card:hover{ transform:translateY(-7px); border-color:rgba(214,0,0,.4); box-shadow:0 28px 56px -24px rgba(214,0,0,.3); }
.pw-card.pw-featured{ border-color:rgba(214,0,0,.45); box-shadow:0 26px 54px -24px rgba(214,0,0,.28); }
.pw-tag{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--red); margin-bottom:6px; }
.pw-card h3{ color:#0f1116; font-size:1.35rem; }
.pw-card .from{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:#98a0ac; margin-top:8px; }
.pw-card .price{ font-family:var(--f-display); font-weight:800; font-size:2.5rem; color:#0f1116; margin:8px 0 18px; letter-spacing:-.02em; }
.pw-card ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.pw-card li{ display:flex; gap:9px; align-items:flex-start; color:#5d6470; font-size:.92rem; }
.pw-card li svg{ width:16px; height:16px; color:var(--red); flex:none; margin-top:3px; }
.pw-card .btn{ margin-top:auto; }
.pw-quote{ margin-top:56px; background:#fff; border:1px solid rgba(15,17,22,.1); border-radius:20px;
  padding:36px; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  box-shadow:0 24px 50px -30px rgba(15,17,22,.28); position:relative; z-index:1; }
.pw-quote h3{ color:#0f1116; font-size:1.5rem; }
.pw-quote p{ color:#5d6470; margin-top:6px; }
@media (max-width:900px){ .pw-grid{ grid-template-columns:1fr; } }

/* Why Choose — photos LEFT, stats RIGHT, photos fill top-to-bottom */
.why-grid{ grid-template-columns:1.22fr 0.78fr; align-items:stretch; }
.why-media{ order:-1; height:clamp(440px,44vw,600px); }
.why-stats{ justify-content:space-between; }
.why-stat{ padding:18px 2px; }
.why-stat:first-child{ padding-top:0; }
.why-stat:last-child{ padding-bottom:0; }
@media (max-width:820px){
  .why-grid{ grid-template-columns:1fr; }
  .why-media{ order:-1; height:auto; }
  .why-stats{ justify-content:flex-start; }
}

/* ============================================================
   SERVICES page — full-width service banners (hover reveals)
   ============================================================ */
.svc-banners{ display:flex; flex-direction:column; background:#050506; }
.svc-banner{ position:relative; display:block; width:100%; height:clamp(200px,22vw,340px); overflow:hidden; }
.sb-img{ position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(.4); transition:transform .8s var(--ease), filter .55s var(--ease); }
.svc-banner:hover .sb-img{ transform:scale(1.05); filter:brightness(.95); }
.sb-txt{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(2.3rem,7vw,6.4rem); line-height:1; color:rgba(188,194,203,.42);
  transition:color .55s var(--ease); pointer-events:none; text-align:center; padding:0 24px; }
.svc-banner:hover .sb-txt{ color:rgba(233,237,242,.95); }
.sb-arrow{ position:absolute; right:clamp(20px,4vw,64px); top:50%; z-index:3; color:#fff;
  transform:translateY(-50%) translateX(22px); opacity:0; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.svc-banner:hover .sb-arrow{ opacity:1; transform:translateY(-50%) translateX(0); }
.sb-arrow svg{ width:clamp(30px,3vw,46px); height:auto; }
/* ensure Archivo Black loads on services page */

/* Service banners 2x bigger */
.svc-banner{ height:clamp(400px,44vw,680px); }

/* Homepage Services header — white band with big "SERVICES" */
.svc-section{ padding-top:0; }
.svc-head-white{ background:#ffffff; padding:clamp(64px,9vw,120px) 24px; text-align:center; }
.svc-head-title{ font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase;
  font-size:clamp(3rem,13vw,11rem); color:#0f1116; letter-spacing:-.03em; line-height:.9; margin:0; }

/* Services page hero — simple white + big "SERVICES" */
.svc-hero-solid{ margin:0; font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase;
  font-size:clamp(3.4rem,15vw,13rem); color:#0f1116; letter-spacing:-.03em; line-height:.88; }

/* fix: Services page hero title must be dark on white (beats .page-hero h1{color:#fff}) */
.svc-hero-white .svc-hero-solid{ color:#0f1116; }

/* ============================================================
   SERVICES page — centered hero, white process scheme, fun pricing
   ============================================================ */
.svc-hero-center .container{ text-align:center; }
.svc-hero-center .breadcrumb{ justify-content:center; }

/* Process flow scheme (white) */
.proc-white{ background:#f4f5f7; }
.proc-white .section-title{ color:#0f1116; }
.proc-white .section-title .accent{ -webkit-text-stroke-color:rgba(15,17,22,.5); }
.proc-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; }
.proc-flow .proc-line{ position:absolute; top:40px; left:12.5%; right:12.5%; height:3px; z-index:0;
  background:repeating-linear-gradient(90deg, var(--red) 0 14px, transparent 14px 26px); opacity:.5; }
.proc-step{ position:relative; z-index:1; text-align:center; }
.proc-node{ width:82px; height:82px; border-radius:50%; margin:0 auto 24px; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:1.7rem; color:#fff; background:var(--grad-red);
  box-shadow:0 16px 34px -10px rgba(214,0,0,.55); border:5px solid #f4f5f7; transition:transform .4s var(--ease); }
.proc-step:hover .proc-node{ transform:translateY(-6px) scale(1.06); }
.proc-step h4{ color:#0f1116; font-size:1.25rem; margin-bottom:8px; }
.proc-step p{ color:#5d6470; font-size:.93rem; }
@media (max-width:820px){ .proc-flow{ grid-template-columns:1fr; gap:34px; } .proc-flow .proc-line{ display:none; } }

/* Fun pricing (white, playful sticker badges) */
.funprice{ background:#ffffff; }
.funprice .section-title{ color:#0f1116; }
.funprice .section-title .accent{ -webkit-text-stroke-color:rgba(15,17,22,.5); }
.funprice .lead{ color:#5d6470; }
.fp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:22px; }
.fp-card{ position:relative; display:block; text-decoration:none; text-align:center;
  background:#f4f5f7; border:1px solid rgba(15,17,22,.07); border-radius:24px; padding:36px 26px 30px;
  box-shadow:0 20px 44px -28px rgba(15,17,22,.25); transition:transform .45s var(--ease), box-shadow .45s; }
.fp-card:hover{ transform:translateY(-9px) rotate(-1.2deg); box-shadow:0 32px 62px -26px rgba(214,0,0,.35); }
.fp-badge{ position:relative; display:inline-grid; place-items:center; width:132px; height:132px; border-radius:50%;
  background:var(--grad-red); color:#fff; border:6px solid #fff; margin-bottom:22px; transform:rotate(-8deg);
  box-shadow:0 18px 36px -12px rgba(214,0,0,.6); transition:transform .45s var(--ease); }
.fp-card:hover .fp-badge{ transform:rotate(0deg) scale(1.07); }
.fp-badge small{ position:absolute; top:26px; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.6rem; opacity:.85; }
.fp-badge .amt{ font-family:'Archivo Black','Space Grotesk',sans-serif; font-size:1.8rem; margin-top:8px; }
.fp-card b{ display:block; color:#0f1116; font-family:var(--f-display); font-weight:700; font-size:1.3rem; margin-bottom:6px; }
.fp-card > span:last-child{ color:#5d6470; font-size:.9rem; }
@media (max-width:900px){ .fp-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .fp-grid{ grid-template-columns:1fr; } }

/* ============================================================
   DETAILING SERVICES section — dark luxury + live price estimator
   ============================================================ */
.ds-sec{ --neon:#b6ff1a; background:#0d0e10; }
.ds-sec::before{ opacity:.25; }
.ds-split{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.ds-title{ font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,4.4vw,3.4rem); color:#fff; letter-spacing:-.02em; margin:.5rem 0 22px; }
.ds-title span{ color:var(--neon); }
.ds-list{ display:flex; flex-direction:column; }
.ds-list li{ display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:17px 14px; border-bottom:1px solid rgba(255,255,255,.09); border-radius:12px;
  transition:background .25s var(--ease), transform .25s var(--ease); }
.ds-list li:hover{ background:rgba(255,255,255,.04); transform:translateX(8px); }
.ds-name{ color:#e6e8ec; font-size:1.05rem; }
.ds-price{ color:var(--neon); font-family:var(--f-display); font-weight:700; font-size:1.15rem; transition:text-shadow .25s; }
.ds-list li:hover .ds-price{ text-shadow:0 0 16px rgba(182,255,26,.65); }

.ds-right{ position:relative; }
.ds-right::before{ content:''; position:absolute; inset:8% 4%; z-index:0;
  background:radial-gradient(circle, rgba(182,255,26,.16), transparent 62%); filter:blur(34px); }
.ds-img{ position:relative; z-index:1; transform:translateY(-8px); }
.ds-img img{ width:100%; display:block; filter:drop-shadow(0 46px 54px rgba(0,0,0,.7)); transition:transform .6s var(--ease); }
.ds-img:hover img{ transform:scale(1.05); }

.ds-estimator{ margin-top:clamp(52px,7vw,96px); background:#15171a; border:1px solid rgba(255,255,255,.08);
  border-radius:26px; padding:clamp(28px,4vw,50px); box-shadow:0 40px 90px -40px #000; }
.ds-est-head h3{ color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); } .ds-est-head h3 span{ color:var(--neon); }
.ds-est-head p{ color:var(--text-dim); margin:8px 0 28px; }
.ds-est-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ds-check{ display:flex; align-items:center; gap:12px; padding:16px 18px; background:#1c1e22;
  border:1px solid rgba(255,255,255,.08); border-radius:14px; cursor:pointer;
  transition:border-color .25s, background .25s, transform .25s var(--ease); }
.ds-check:hover{ border-color:rgba(182,255,26,.45); transform:translateY(-3px); }
.ds-check input{ position:absolute; opacity:0; pointer-events:none; }
.ds-box{ width:22px; height:22px; border-radius:7px; border:2px solid rgba(255,255,255,.28); flex:none;
  display:grid; place-items:center; transition:.2s; }
.ds-check input:checked + .ds-box{ background:var(--neon); border-color:var(--neon); }
.ds-check input:checked + .ds-box::after{ content:'✓'; color:#0d0e10; font-weight:900; font-size:.86rem; line-height:1; }
.ds-check:has(input:checked){ border-color:var(--neon); background:#20261a; }
.ds-lbl{ color:#e6e8ec; font-size:.95rem; flex:1; }
.ds-amt{ color:var(--neon); font-weight:700; font-family:var(--f-display); }
.ds-total-bar{ display:flex; align-items:center; gap:22px; margin-top:30px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.1); flex-wrap:wrap; }
.ds-total-label{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.16em; color:var(--text-dim); }
.ds-total{ font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,4.5vw,3.2rem);
  color:var(--neon); text-shadow:0 0 26px rgba(182,255,26,.45); margin-right:auto; transition:transform .2s var(--ease); }
.ds-book{ padding:15px 34px; border-radius:100px; background:var(--neon); color:#0d0e10;
  font-family:var(--f-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:transform .3s, box-shadow .3s; }
.ds-book:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -10px rgba(182,255,26,.55); }
@media (max-width:900px){ .ds-split{ grid-template-columns:1fr; } .ds-est-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .ds-est-grid{ grid-template-columns:1fr; } }

/* ============================================================
   DETAILING — full-screen video-game style section
   ============================================================ */
.game-sec{ position:relative; min-height:100vh; background:#cfd0d2; overflow:hidden;
  display:flex; align-items:stretch; padding:130px 0 44px; }
.game-sec::before{ content:''; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px) 0 0/100% 42px,
             linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px) 0 0/42px 100%; }
.game-wrap{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(24px,4vh,48px); flex:1; }
.game-head{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; }
.game-eye{ font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.16em; color:#111; font-size:.82rem; }
.game-title{ font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase; color:#0a0a0a;
  line-height:.84; letter-spacing:-.02em; font-size:clamp(3rem,8.5vw,8rem); margin-top:14px; }
.game-car{ justify-self:end; }
.game-car img{ width:min(560px,46vw); filter:drop-shadow(0 34px 44px rgba(0,0,0,.4)); }
.game-panel{ display:flex; flex-direction:column; gap:16px; }
.game-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.game-svc{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 20px;
  background:#2b2c30; color:#fff; border:2px solid transparent; border-radius:6px; cursor:pointer;
  font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.02em; font-size:.8rem;
  transition:transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s; text-align:left; }
.game-svc b{ color:#fff; white-space:nowrap; }
.game-svc:hover{ transform:translateY(-3px); background:#37383d; }
.game-svc.active{ background:#0a0a0a; border-color:#0a0a0a; box-shadow:0 0 0 3px rgba(10,10,10,.18), 0 12px 24px -8px rgba(0,0,0,.55); }
.game-svc.active span::before{ content:'▸ '; }
.game-hud{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:#0a0a0a; border-radius:8px; padding:18px 28px; }
.game-total{ display:flex; align-items:baseline; gap:16px; }
.game-total span{ font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.22em; color:#8a8c90; font-size:.85rem; }
.game-total b{ font-family:'Archivo Black',sans-serif; color:#fff; font-size:clamp(1.9rem,4vw,3rem); transition:transform .16s var(--ease); }
.game-book{ font-family:'Space Mono',monospace; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  padding:14px 30px; background:#35363b; color:#fff; border-radius:6px; transition:background .25s, color .25s, transform .25s; }
.game-book:hover{ background:#fff; color:#0a0a0a; transform:translateY(-2px); }
@media (max-width:820px){ .game-sec{ min-height:auto; padding-top:120px; } .game-head{ grid-template-columns:1fr; } .game-car{ justify-self:center; } .game-car img{ width:70vw; } .game-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .game-grid{ grid-template-columns:1fr; } .game-hud{ flex-direction:column; align-items:stretch; text-align:center; } }

/* ============================================================
   DETAILING game section v2 — services column L, car focus R, estimate bottom
   ============================================================ */
.game-sec{ background:radial-gradient(135% 115% at 72% 36%, #34363b 0%, #212327 46%, #131417 100%) !important; }
.game-sec::before{ display:none; }
.game-head{ grid-template-columns:0.8fr 1.2fr; }
.game-eye{ color:#9a9da3; }
.game-left{ align-self:center; }
.game-list{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.game-svc{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:9px; cursor:pointer;
  font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.02em; font-size:.8rem; color:#e6e8ec;
  transition:transform .2s var(--ease), background .2s, border-color .2s, color .2s; text-align:left; }
.game-svc b{ color:#fff; white-space:nowrap; transition:color .2s; }
.game-svc:hover{ transform:translateX(7px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24); }
.game-svc.active{ background:#ffffff; color:#0a0a0a; border-color:#fff; box-shadow:0 10px 26px -10px rgba(0,0,0,.6); }
.game-svc.active b{ color:#0a0a0a; }
.game-svc.active span::before{ content:'▸ '; }
.game-car{ position:relative; justify-self:center; }
.game-car::before{ content:''; position:absolute; inset:-6% -4%; z-index:0;
  background:radial-gradient(circle at 50% 56%, rgba(255,255,255,.16), transparent 60%); filter:blur(34px); }
.game-car img{ position:relative; z-index:1; width:min(700px,54vw); filter:drop-shadow(0 44px 52px rgba(0,0,0,.65)); }
.game-cadran{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:rgba(10,11,13,.72); border:1px solid rgba(255,255,255,.13); border-radius:14px; padding:20px 32px; backdrop-filter:blur(10px); }
.game-total{ display:flex; align-items:baseline; gap:16px; }
.game-total span{ font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.2em; color:#9a9da3; font-size:.82rem; }
.game-total b{ font-family:'Archivo Black',sans-serif; color:#fff; font-size:clamp(2rem,4vw,3rem); transition:transform .16s var(--ease); }
.game-book{ font-family:'Space Mono',monospace; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  padding:14px 32px; background:#e9ebef; color:#0a0a0a; border-radius:8px; transition:transform .25s, box-shadow .25s; }
.game-book:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(0,0,0,.6); }
@media (max-width:820px){ .game-sec{ min-height:auto; } .game-head{ grid-template-columns:1fr; } .game-car{ order:-1; } .game-car img{ width:74vw; } }
@media (max-width:560px){ .game-cadran{ flex-direction:column; align-items:stretch; text-align:center; } .game-total{ justify-content:center; } }

/* Compact the game section so it fits in one screen */
.game-sec{ padding:100px 0 30px; }
.game-wrap{ gap:clamp(16px,2.6vh,28px); }
.game-list{ gap:6px; margin-top:12px; }
.game-svc{ padding:10px 18px; }
.game-eye{ font-size:.74rem; }
.game-car img{ width:min(620px,48vw); }
.game-cadran{ padding:16px 30px; }
@media (max-height:760px){
  .game-svc{ padding:8px 16px; font-size:.75rem; }
  .game-car img{ width:min(520px,42vw); }
  .game-sec{ padding-top:92px; }
}

/* Ensure fit on typical laptop heights */
@media (max-height:900px){
  .game-sec{ padding:88px 0 22px; }
  .game-wrap{ gap:16px; }
  .game-svc{ padding:8px 16px; font-size:.76rem; }
  .game-list{ gap:5px; margin-top:10px; }
  .game-car img{ width:min(540px,44vw); }
  .game-cadran{ padding:14px 28px; }
}

/* ============================================================
   Game section v3 — estimate bar connected to the services column
   ============================================================ */
.game-wrap{ justify-content:center !important; align-items:center; }
.game-head{ grid-template-columns:0.92fr 1.08fr; align-items:stretch; }
.game-panelL{ display:flex; flex-direction:column; justify-content:center; }
.game-list{ margin-top:14px; }
/* the estimate bar sits right under the column and reads as one connected unit */
.game-cadran{ margin-top:8px; border-top-left-radius:4px; border-top-right-radius:4px; }
.game-panelL .game-list::after{ content:''; display:block; height:8px; }
.game-car{ display:flex; align-items:center; justify-content:center; }
.game-car img{ width:100%; max-width:640px; }
@media (max-width:820px){ .game-head{ grid-template-columns:1fr; } .game-car{ order:-1; } .game-car img{ max-width:74vw; } }
@media (max-height:900px){ .game-car img{ max-width:520px; } }

/* tighten the connection between column and estimate bar */
.game-panelL .game-list::after{ display:none; }
.game-cadran{ margin-top:6px; }

/* ============================================================
   Game section v4 — bigger far-left column, bigger car, full-width bar
   ============================================================ */
.game-sec{ display:flex; flex-direction:column; min-height:100vh; padding:0 !important; }
.game-head{ display:grid; grid-template-columns:0.95fr 1.35fr; align-items:center; gap:clamp(24px,3vw,54px);
  flex:1; padding:112px clamp(24px,4vw,60px) 26px clamp(18px,2.4vw,40px); }
.game-left{ align-self:center; }
.game-eye{ font-size:.92rem; letter-spacing:.16em; color:#9a9da3; }
.game-list{ display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.game-svc{ padding:16px 24px; font-size:.94rem; border-radius:10px; }
.game-svc b{ font-size:1.05rem; }
.game-car{ justify-self:end; }
.game-car img{ width:100% !important; max-width:820px; }
.game-car::before{ inset:-4% -2%; }
/* full-width horizontal estimate bar, connected below the column */
.game-cadran{ width:100%; margin:0 !important; border-radius:0; border:none; border-top:1px solid rgba(255,255,255,.14);
  background:#0a0b0d; backdrop-filter:none; padding:22px clamp(24px,5vw,80px); }
.game-total b{ font-size:clamp(2.2rem,4.4vw,3.4rem); }
.game-book{ padding:16px 40px; font-size:.9rem; }
@media (max-width:820px){
  .game-sec{ min-height:auto; }
  .game-head{ grid-template-columns:1fr; padding:100px 22px 24px; }
  .game-car{ order:-1; justify-self:center; } .game-car img{ max-width:82vw; }
  .game-cadran{ flex-direction:column; align-items:stretch; text-align:center; }
}
@media (max-height:900px) and (min-width:821px){ .game-car img{ max-width:740px; } .game-svc{ padding:13px 22px; } }

/* ============================================================
   Contact section — white, big logo, phones + email + socials + form
   ============================================================ */
.contact-sec{ background:#fff !important; color:#0f1116; padding:clamp(64px,8vw,110px) 0; }
.contact-sec .bg{ display:none !important; }
.contact-logo{ text-align:center; margin-bottom:clamp(30px,5vw,58px); }
.contact-logo img{ width:min(460px,72vw); height:auto; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start;
  max-width:1080px; margin:0 auto; }
.contact-eye{ font-family:'Space Mono','DM Mono',monospace; font-size:.8rem; letter-spacing:.22em;
  text-transform:uppercase; color:#d60000; }
.contact-title{ font-family:'Archivo Black',sans-serif; font-weight:900; line-height:.92;
  font-size:clamp(2.8rem,6.4vw,5rem); letter-spacing:-.01em; color:#0f1116; margin:.35rem 0 1rem; text-transform:uppercase; }
.contact-lead{ color:#4a4d55; font-size:1.05rem; max-width:30ch; margin:0 0 2rem; }
.contact-lines{ display:flex; flex-direction:column; gap:14px; margin-bottom:2rem; }
.c-line{ display:flex; align-items:center; gap:16px; padding:14px 18px; border:1px solid #e7e7ea;
  border-radius:14px; background:#fafafa; color:#0f1116; text-decoration:none; transition:.25s; }
.c-line:hover{ border-color:#0f1116; transform:translateX(4px); box-shadow:0 10px 30px rgba(0,0,0,.06); }
.c-ico{ width:44px; height:44px; flex:0 0 44px; border-radius:11px; background:#0f1116; color:#fff;
  display:grid; place-items:center; }
.c-ico svg{ width:20px; height:20px; }
.c-line:hover .c-ico{ background:#d60000; }
.c-line-txt{ display:flex; flex-direction:column; line-height:1.25; }
.c-line-txt b{ font-family:'Archivo Black',sans-serif; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
.c-line-txt em{ font-style:normal; font-size:1.12rem; font-weight:600; color:#0f1116; }
.contact-socials{ display:flex; gap:12px; }
.contact-socials a{ width:50px; height:50px; border-radius:50%; border:1.6px solid #0f1116;
  display:grid; place-items:center; color:#0f1116; transition:.25s; }
.contact-socials a svg{ width:22px; height:22px; }
.contact-socials a:hover{ background:#0f1116; color:#fff; transform:translateY(-3px); }
/* form */
.contact-form{ background:#0f1116; border-radius:22px; padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; gap:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.18); }
.cf-field{ display:flex; flex-direction:column; gap:7px; }
.cf-field label{ font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#8b8f97; }
.cf-field input,.cf-field select,.cf-field textarea{ width:100%; background:#17191e; border:1px solid #2a2d34; border-radius:11px;
  padding:14px 16px; color:#fff; font-family:inherit; font-size:.98rem; transition:.2s; resize:none; }
.cf-field input::placeholder,.cf-field textarea::placeholder{ color:#5c6069; }
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{ outline:none; border-color:#d60000; box-shadow:0 0 0 3px rgba(214,0,0,.18); }
.cf-send{ margin-top:6px; background:#d60000; color:#fff; border:none; border-radius:11px; padding:16px 22px; cursor:pointer;
  font-family:'Archivo Black',sans-serif; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; transition:.22s; }
.cf-send:hover{ background:#ff1a1a; transform:translateY(-2px); box-shadow:0 14px 34px rgba(214,0,0,.34); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } .contact-title{ font-size:clamp(2.6rem,12vw,4rem); } }

/* ---- Contact section: homepage variant (logo on the right, no form) ---- */
.contact-home .contact-grid{ align-items:center; }
.contact-logo-side{ display:grid; place-items:center; }
.contact-logo-side img{ width:100%; max-width:560px; height:auto; }
@media (max-width:820px){ .contact-logo-side{ order:-1; margin-bottom:18px; } .contact-logo-side img{ max-width:78vw; } }

/* ============================================================
   "OUR WORK" — luxury white portfolio gallery
   ============================================================ */
body.ow-page{ background:#fff; }
body.ow-page .nav{ background:rgba(12,12,14,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.06); }

/* hero */
.ow-hero{ background:#fff; text-align:center; padding:clamp(150px,20vh,250px) 20px clamp(30px,5vw,70px); }
.ow-eyebrow{ display:block; font-family:'Space Mono','DM Mono',monospace; font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; color:#d60000; }
.ow-title{ font-family:'Archivo Black',sans-serif; font-weight:900; font-size:clamp(3rem,9vw,7rem); letter-spacing:-.02em; line-height:.92; color:#0f1116; margin:.4rem 0 1.1rem; text-transform:uppercase; }
.ow-sub{ color:#6a6d75; font-size:1.06rem; max-width:48ch; margin:0 auto; }
.ow-sec-eye{ display:block; text-align:center; font-family:'Space Mono',monospace; font-size:.76rem; letter-spacing:.28em; text-transform:uppercase; color:#d60000; margin-bottom:6px; }
.ow-sec-title{ text-align:center; font-family:'Archivo Black',sans-serif; font-size:clamp(1.7rem,3.4vw,2.6rem); color:#0f1116; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 clamp(26px,4vw,52px); }

/* marquee */
.ow-marquee{ background:#fff; padding:clamp(18px,3vw,44px) 0 clamp(46px,8vw,100px); display:flex; flex-direction:column; gap:clamp(14px,2vw,26px); overflow:hidden; }
.ow-row{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
.ow-track{ display:flex; gap:clamp(12px,1.4vw,22px); width:max-content; will-change:transform; }
.ow-track--right{ animation:owRight 34s linear infinite; }
.ow-track--left{ animation:owLeft 34s linear infinite; }
.ow-row:hover .ow-track{ animation-play-state:paused; }
@keyframes owLeft{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes owRight{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
.ow-mq-item{ flex:0 0 auto; height:clamp(150px,20vw,280px); border-radius:14px; overflow:hidden; cursor:pointer; background:#f2f2f4; }
.ow-mq-item img{ height:100%; width:auto; display:block; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.ow-mq-item:hover img{ transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){ .ow-track--right,.ow-track--left{ animation:none; } }

/* featured 3 */
.ow-featured{ padding:clamp(10px,2vw,30px) 0 clamp(40px,6vw,80px); }
.ow-featured-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); }
.ow-feat{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; cursor:pointer;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.4); transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.ow-feat img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; }
.ow-feat::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.4) 48%,transparent 60%); transform:translateX(-130%); transition:transform .85s ease; }
.ow-feat:hover{ transform:translateY(-6px); box-shadow:0 46px 90px -22px rgba(0,0,0,.5); }
.ow-feat:hover img{ transform:scale(1.06); filter:brightness(1.1); }
.ow-feat:hover::after{ transform:translateX(130%); }

/* editorial masonry */
.ow-editorial{ padding:clamp(50px,8vw,120px) 0; }
.ow-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(115px,14vw,190px);
  grid-auto-flow:dense; gap:clamp(14px,1.6vw,26px); }
.ow-item{ position:relative; grid-column:span 1; grid-row:span 2; border-radius:14px; overflow:hidden; cursor:pointer; background:#f2f2f4; }
.ow-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .5s; }
.ow-item:hover img{ transform:scale(1.05); filter:brightness(1.06); }
.ow-item.span-wide{ grid-column:span 2; grid-row:span 2; }
.ow-item.span-tall{ grid-column:span 1; grid-row:span 3; }
.ow-item.span-big{ grid-column:span 2; grid-row:span 3; }

/* bottom collage */
.ow-collage{ padding:0 0 clamp(70px,11vw,150px); }
.ow-collage-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(60px,7vw,110px); grid-auto-flow:dense; gap:clamp(14px,1.8vw,30px); }
.ow-col-item{ position:relative; border-radius:14px; overflow:hidden; cursor:pointer; background:#f2f2f4; }
.ow-col-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .5s; }
.ow-col-item:hover img{ transform:scale(1.05); filter:brightness(1.08); }
.ow-col-0{ grid-column:span 3; grid-row:span 5; }
.ow-col-1{ grid-column:span 3; grid-row:span 4; margin-top:clamp(20px,4vw,64px); }
.ow-col-2{ grid-column:span 2; grid-row:span 4; }
.ow-col-3{ grid-column:span 4; grid-row:span 4; margin-top:clamp(18px,3.4vw,54px); }
.ow-col-4{ grid-column:span 4; grid-row:span 5; }
.ow-col-5{ grid-column:span 2; grid-row:span 4; margin-top:clamp(10px,2.6vw,40px); }

/* scroll reveal */
.ow-anim{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.ow-anim.in{ opacity:1; transform:none; }

/* lightbox */
.ow-lb{ position:fixed; inset:0; z-index:200; display:none; place-items:center; background:rgba(8,8,10,.94); backdrop-filter:blur(6px); padding:4vw; }
.ow-lb.open{ display:grid; }
.ow-lb-img{ max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:0 40px 120px rgba(0,0,0,.6); object-fit:contain; }
.ow-lb-close{ position:absolute; top:20px; right:26px; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; transition:.2s; }
.ow-lb-close:hover{ background:#d60000; border-color:#d60000; }
.ow-lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:58px; height:58px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#fff; font-size:2rem; line-height:1; cursor:pointer; transition:.2s; }
.ow-lb-nav:hover{ background:#d60000; border-color:#d60000; }
.ow-lb-prev{ left:22px; } .ow-lb-next{ right:22px; }
.ow-lb-count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7);
  font-family:'Space Mono',monospace; font-size:.82rem; letter-spacing:.14em; }

/* responsive */
@media (max-width:900px){
  .ow-featured-grid{ grid-template-columns:1fr; }
  .ow-grid{ grid-template-columns:repeat(2,1fr); }
  .ow-item.span-wide,.ow-item.span-big{ grid-column:span 2; }
  .ow-collage-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(80px,22vw,140px); }
  .ow-collage-grid [class*=ow-col-]{ grid-column:span 1 !important; grid-row:span 3 !important; margin-top:0 !important; }
  .ow-lb-prev{ left:10px; } .ow-lb-next{ right:10px; } .ow-lb-nav{ width:48px; height:48px; }
}

/* ============================================================
   "OUR WORK" v2 — airier, background motifs, dark editorial
   ============================================================ */
/* shared section background motif (dot grid + big faint index number) */
.ow-featured, .ow-editorial, .ow-collage, .ow-hero{ position:relative; overflow:hidden; }
.ow-featured > .container, .ow-editorial > .container, .ow-collage > .container, .ow-hero-inner{ position:relative; z-index:1; }
.ow-secbg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ow-secbg::before{ content:''; position:absolute; inset:0; background-size:26px 26px; }
.light-motif::before{ background-image:radial-gradient(rgba(15,17,22,.05) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(90% 80% at 74% 16%, #000, transparent 78%); mask-image:radial-gradient(90% 80% at 74% 16%, #000, transparent 78%); }
.dark-motif::before{ background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); opacity:.7; }
.ow-bignum{ position:absolute; top:-.20em; right:-.01em; line-height:.8; font-family:'Archivo Black',sans-serif;
  font-size:clamp(8rem,22vw,22rem); letter-spacing:-.03em; }
.light-motif .ow-bignum{ color:rgba(15,17,22,.035); }
.dark-motif .ow-bignum{ color:rgba(255,255,255,.04); }

/* hero — airier + soft glow + red rule */
.ow-hero{ padding:clamp(155px,20vh,250px) 20px clamp(26px,4vw,56px); }
.ow-secbg.light-motif ~ .ow-hero-inner{ position:relative; }
.ow-hero .ow-secbg{ background:radial-gradient(58% 46% at 50% 32%, rgba(0,0,0,.045), transparent 72%),
  radial-gradient(circle at 86% 12%, rgba(214,0,0,.08), transparent 46%); }
.ow-hero-line{ display:block; width:58px; height:3px; border-radius:2px; background:#d60000; margin:clamp(20px,3vw,30px) auto 0; }

/* marquee — a touch airier, fewer tiles */
.ow-marquee{ padding:clamp(26px,4vw,58px) 0 clamp(60px,9vw,112px); gap:clamp(16px,2.4vw,30px); }
.ow-track{ gap:clamp(16px,1.8vw,30px); }

/* featured — more space */
.ow-featured{ padding:clamp(58px,8vw,110px) 0; }
.ow-featured-grid{ gap:clamp(24px,2.8vw,44px); margin-top:clamp(6px,1vw,14px); }

/* editorial — DARK GREY, airier grid, light text */
.ow-editorial{ background:#191a1e; padding:clamp(78px,10vw,150px) 0; }
.ow-editorial .ow-secbg{ background:radial-gradient(circle at 84% 6%, rgba(214,0,0,.15), transparent 44%),
  radial-gradient(circle at 8% 98%, rgba(90,104,126,.13), transparent 46%); }
.ow-sec-title.light{ color:#fff; }
.ow-sec-eye.light{ color:#ff5555; }
.ow-grid{ gap:clamp(20px,2.2vw,38px); grid-auto-rows:clamp(120px,14vw,190px); }
.ow-editorial .ow-item{ background:#26272c; }

/* collage — soft light-grey to delimit, only 4 images */
.ow-collage{ background:#f5f5f6; padding:clamp(66px,9vw,124px) 0 clamp(88px,12vw,158px); }
.ow-collage-grid{ grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(64px,7.5vw,116px); gap:clamp(20px,2.4vw,40px); }
.ow-col-0{ grid-column:span 4; grid-row:span 5; }
.ow-col-1{ grid-column:span 2; grid-row:span 4; margin-top:clamp(24px,5vw,80px); }
.ow-col-2{ grid-column:span 2; grid-row:span 4; }
.ow-col-3{ grid-column:span 4; grid-row:span 5; margin-top:clamp(24px,5vw,80px); }

/* section eyebrows as centered heads (delimiters) */
.ow-featured .ow-sec-eye, .ow-collage .ow-sec-eye{ display:block; text-align:center; margin-bottom:clamp(24px,3.4vw,48px); }

@media (max-width:900px){
  .ow-collage-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(90px,24vw,150px); }
  .ow-collage-grid [class*=ow-col-]{ grid-column:span 1 !important; grid-row:span 3 !important; margin-top:0 !important; }
  .ow-bignum{ font-size:clamp(6rem,30vw,12rem); }
}

/* ============================================================
   Services dropdown — bigger/taller, no icons, sharp edges
   ============================================================ */
.nav-menu{ min-width:340px; border-radius:0; padding:8px; }
.nav-menu::before{ border-radius:0; }
.nm-ic{ display:none !important; }               /* remove icon chips before text */
.nav-menu a.nm-item{ border-radius:0; gap:0; padding:22px 24px; align-items:flex-start; flex-direction:column; }
.nm-tx{ gap:5px; }
.nm-tx b{ font-size:1.16rem; }
.nm-tx b i{ font-size:.95rem; }
.nm-tx > span{ font-size:.86rem; }

/* service card — description subtitle under the name (keeps original car-card design) */
.svc-txt-main{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.svc-desc{ color:rgba(255,255,255,.62); font-weight:400; line-height:1.5;
  font-size:clamp(.86rem,1vw,1rem); max-width:52ch; }
@media (max-width:720px){ .svc-desc{ font-size:.88rem; } }

/* ============================================================
   IG "Follow the Build" — fanned phones (middle front, sides oblique behind)
   ============================================================ */
.ig-glow .phone-row{
  position:relative; display:block; width:100%; max-width:940px; margin:0 auto;
  height:clamp(470px,55vw,690px); padding:0;
  -webkit-mask-image:none; mask-image:none;
}
.ig-glow .phone{
  position:absolute; left:50%; bottom:0; margin:0; flex:none; animation:none;
  width:clamp(206px,21vw,298px); transform-origin:bottom center;
  transition:transform .55s var(--ease), filter .55s var(--ease);
}
/* middle — upright, in front, covers the base of the side phones */
.ig-glow .phone:nth-of-type(2){ transform:translateX(-50%) scale(1.06); z-index:5;
  box-shadow:0 62px 110px -34px rgba(0,0,0,.95), 0 0 0 2px #1f2025, inset 0 0 0 2px rgba(255,255,255,.09); }
/* left — tilts out obliquely from behind the middle */
.ig-glow .phone:nth-of-type(1){ transform:translateX(-50%) translateX(-6%) rotate(-19deg) scale(.95);
  z-index:2; filter:brightness(.8) saturate(.96); }
/* right — mirror */
.ig-glow .phone:nth-of-type(3){ transform:translateX(-50%) translateX(6%) rotate(19deg) scale(.95);
  z-index:2; filter:brightness(.8) saturate(.96); }
/* hover lifts a side phone forward and straightens it */
.ig-glow .phone:nth-of-type(1):hover{ transform:translateX(-50%) translateX(-6%) rotate(-11deg) scale(1); filter:none; z-index:6; }
.ig-glow .phone:nth-of-type(3):hover{ transform:translateX(-50%) translateX(6%) rotate(11deg) scale(1); filter:none; z-index:6; }

/* more realistic mockup — tighter frame, titanium rail, refined island + home bar */
.phone{ border-radius:46px; padding:8px;
  background:linear-gradient(155deg,#71747a 0%,#34363b 24%,#151619 58%,#0a0a0c 100%); }
.phone .screen{ border-radius:38px; }
.phone .island{ top:13px; width:28%; height:22px; border-radius:14px; background:#050506;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.phone .reel-ui::after{ content:''; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:32%; height:4px; border-radius:3px; background:rgba(255,255,255,.72); }

@media (max-width:820px){
  .ig-glow .phone-row{ height:clamp(340px,88vw,480px); }
  .ig-glow .phone{ width:clamp(140px,39vw,196px); }
  .ig-glow .phone:nth-of-type(1){ transform:translateX(-50%) translateX(-5%) rotate(-15deg) scale(.94); }
  .ig-glow .phone:nth-of-type(3){ transform:translateX(-50%) translateX(5%) rotate(15deg) scale(.94); }
}

/* ============================================================
   Service page — bold-stripe services list (names + descriptions)
   ============================================================ */
.svc-banners .svc-banner{ height:clamp(160px,17vw,250px); }   /* fit a 12-item list */
.svc-banners .sb-txt{ flex-direction:column; gap:clamp(6px,1vw,14px); padding:0 clamp(24px,8vw,120px); }
.sb-name{ font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(1.45rem,4.3vw,3.5rem); line-height:.98; color:rgba(190,196,205,.5); transition:color .55s var(--ease); }
.svc-banner:hover .sb-name{ color:#ffffff; }
.sb-sub{ max-width:64ch; font-family:var(--f-body),sans-serif; font-weight:500; text-transform:none; letter-spacing:0;
  font-size:clamp(.82rem,1.05vw,1rem); line-height:1.5; color:rgba(205,210,218,.42); transition:color .55s var(--ease); }
.svc-banner:hover .sb-sub{ color:rgba(224,228,234,.92); }
/* category divider bands */
.sb-group{ background:#050506; text-align:center; padding:clamp(48px,6vw,88px) 24px clamp(18px,2.4vw,30px); }
.sb-group-eye{ display:block; font-family:'Space Mono','DM Mono',monospace; letter-spacing:.3em;
  text-transform:uppercase; font-size:.78rem; color:#d60000; margin-bottom:10px; }
.sb-group-title{ font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase;
  font-size:clamp(1.7rem,4vw,3rem); color:#fff; letter-spacing:-.01em; margin:0; line-height:1; }

/* ============================================================
   Service bold-stripes — WHITE section, RED text, no images, bigger
   ============================================================ */
.svc-banners{ background:#ffffff !important; }
.svc-banners .sb-img{ display:none !important; }              /* remove photos */
.svc-banners .svc-banner{ height:clamp(280px,30vw,470px); background:#ffffff;
  border-bottom:1px solid #ececf0; transition:background .4s var(--ease); }
.svc-banners .svc-banner:first-of-type{ border-top:1px solid #ececf0; }
.svc-banners .sb-txt{ padding:0 clamp(24px,8vw,120px); }
.svc-banners .sb-name{ color:#d60000; font-size:clamp(2.3rem,6.6vw,5.8rem); }
.svc-banners .sb-sub{ color:#5d636e; font-size:clamp(.98rem,1.4vw,1.35rem); max-width:70ch; }
.svc-banners .sb-arrow{ color:#d60000; }
/* red-fill hover with white text */
.svc-banners .svc-banner:hover{ background:#d60000; }
.svc-banners .svc-banner:hover .sb-name{ color:#ffffff; }
.svc-banners .svc-banner:hover .sb-sub{ color:rgba(255,255,255,.92); }
.svc-banners .svc-banner:hover .sb-arrow{ color:#ffffff; }
/* group headings on white */
.svc-banners .sb-group{ background:#ffffff; padding:clamp(60px,7vw,110px) 24px clamp(24px,3vw,40px); }
.svc-banners .sb-group-eye{ color:#d60000; }
.svc-banners .sb-group-title{ color:#d60000; font-size:clamp(2rem,4.6vw,3.6rem); }

/* ============================================================
   Service bold-stripes — dark grey stripes, WHITE heading bands
   ============================================================ */
.svc-banners{ background:#202127 !important; }
.svc-banners .svc-banner{ background:#202127; border-bottom:1px solid rgba(255,255,255,.08); }
.svc-banners .svc-banner:first-of-type{ border-top:none; }
.svc-banners .sb-sub{ color:rgba(212,216,224,.62); }
.svc-banners .svc-banner:hover{ background:#d60000; }           /* keep red-fill hover */
/* heading bands stay white with red text */
.svc-banners .sb-group{ background:#ffffff; }
.svc-banners .sb-group-eye{ color:#d60000; }
.svc-banners .sb-group-title{ color:#d60000; }

/* ============================================================
   GARAGE SERVICES — editorial two-column (car + red stacked menu)
   ============================================================ */
.garage-sec{ display:flex; width:100%; height:clamp(760px,92vh,940px); background:#111111; overflow:hidden;
  border-block:1px solid rgba(0,0,0,.35); }
/* LEFT — car image */
.garage-left{ position:relative; width:39%; flex:none; overflow:hidden; background:#0b0b0d; }
.garage-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.garage-left:hover .garage-img{ transform:scale(1.03); }
.garage-left::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,.26); }
.garage-word{ position:absolute; z-index:2; left:-.05em; bottom:-.18em; margin:0; pointer-events:none;
  font-family:'Anton','Archivo Black',Impact,sans-serif; font-weight:900; text-transform:uppercase;
  letter-spacing:-3px; line-height:.78; font-size:clamp(5rem,13vw,12rem); color:#000; }
/* RIGHT — red stacked menu */
.garage-right{ width:61%; flex:none; display:flex; flex-direction:column; }
.garage-row{ position:relative; flex:1; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:#E1261C; border:1px solid rgba(0,0,0,.35); padding:0 clamp(22px,3vw,52px);
  text-decoration:none; overflow:hidden; cursor:pointer; transition:background .3s ease; }
.garage-row + .garage-row{ margin-top:-1px; }        /* collapse to a uniform 1px grid */
.garage-row::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045;
  background:repeating-linear-gradient(45deg,#000 0 2px, transparent 2px 10px); }
.gr-title{ position:relative; z-index:1; color:#000; font-family:'Anton','Archivo Black',Impact,sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:-3px; line-height:.84;
  font-size:clamp(2.1rem,5.2vw,5.4rem); transition:transform .3s ease; }
.gr-label{ position:relative; z-index:1; align-self:flex-start; margin-top:clamp(16px,2.2vw,32px);
  color:#000; opacity:.7; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.16em; white-space:nowrap; transition:transform .3s ease; }
.garage-row:hover{ background:#ef3222; }              /* slightly brighter */
.garage-row:hover .gr-title,
.garage-row:hover .gr-label{ transform:translateX(8px); }

@media (max-width:820px){
  .garage-sec{ flex-direction:column; height:auto; }
  .garage-left{ width:100%; height:clamp(300px,62vw,430px); }
  .garage-right{ width:100%; }
  .garage-row{ min-height:120px; padding:18px clamp(18px,5vw,30px); }
  .gr-title{ font-size:clamp(1.7rem,7.4vw,2.7rem); letter-spacing:-2px; }
  .garage-word{ font-size:clamp(3.4rem,20vw,7rem); }
}

/* garage page — clear the fixed nav, solid nav, dark page bg */
body.garage-page{ background:#111111; }
body.garage-page .nav{ background:#0d0d0f; border-bottom:1px solid rgba(255,255,255,.06); }
body.garage-page .garage-sec{ margin-top:122px; }
@media (max-width:820px){ body.garage-page .garage-sec{ margin-top:86px; } }

/* garage rows — white, airier, smaller (no overlap) + white statement section */
.garage-row .gr-title{ color:#ffffff; font-size:clamp(1.5rem,3.4vw,3.3rem); line-height:1.08; letter-spacing:-1px; }
.garage-row .gr-label{ color:#ffffff; opacity:.7; }
.garage-row{ padding:0 clamp(26px,3.6vw,60px); }
@media (max-width:820px){ .garage-row .gr-title{ font-size:clamp(1.5rem,6vw,2.2rem); letter-spacing:-1px; } }

/* white statement section */
.garage-note{ background:#ffffff; padding:clamp(72px,11vw,150px) 24px; text-align:center; }
.garage-note-txt{ max-width:22ch; margin:0 auto; color:#0f1116;
  font-family:'Archivo Black','Space Grotesk',sans-serif; font-weight:900; letter-spacing:-.01em;
  font-size:clamp(1.5rem,3.6vw,3rem); line-height:1.24; }
.garage-note-txt::after{ content:''; display:block; width:64px; height:4px; background:#d60000; margin:clamp(22px,3vw,34px) auto 0; border-radius:2px; }

/* detailing page — same as garage page, taller (9 services) */
body.detailing-page{ background:#111111; }
body.detailing-page .nav{ background:#0d0d0f; border-bottom:1px solid rgba(255,255,255,.06); }
body.detailing-page .garage-sec{ margin-top:122px; height:auto; }
body.detailing-page .garage-row{ flex:0 0 auto; min-height:clamp(112px,12vw,146px); }
body.detailing-page .garage-word{ font-size:clamp(3rem,8.5vw,8.5rem); }
@media (max-width:820px){
  body.detailing-page .garage-sec{ margin-top:86px; }
  body.detailing-page .garage-row{ min-height:118px; }
}

/* ============================================================
   Detailing price menu — dark premium list, red accents
   ============================================================ */
.price-sec{ background:#141416; color:#fff; padding:clamp(70px,9vw,132px) 0; }
.price-wrap{ max-width:940px; margin:0 auto; padding:0 clamp(20px,4vw,44px); }
.price-head{ text-align:center; margin-bottom:clamp(28px,4vw,52px); }
.price-eye{ display:block; font-family:'Space Mono','DM Mono',monospace; letter-spacing:.3em;
  text-transform:uppercase; color:#E1261C; font-size:.8rem; margin-bottom:12px; }
.price-title{ font-family:'Anton','Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:-1px;
  font-size:clamp(2.6rem,6.5vw,5rem); line-height:.95; color:#fff; }
.price-colhead{ display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:12px;
  font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#8b8e96; }
.price-group{ margin-top:clamp(30px,4vw,52px); }
.price-group-title{ font-family:'Anton','Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:-.5px;
  color:#E1261C; font-size:clamp(1.35rem,3vw,2.15rem); line-height:1; margin:0 0 6px;
  padding-bottom:14px; border-bottom:2px solid #E1261C; }
.price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:16px 4px; border-bottom:1px solid rgba(255,255,255,.08); transition:background .25s var(--ease), padding .25s var(--ease); }
.price-row:hover{ background:rgba(225,38,28,.07); padding-inline:14px 10px; }
.pr-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(1rem,1.4vw,1.14rem); color:#eceef2; }
.pr-name small{ display:block; margin-top:4px; color:#9498a1; font-weight:400; font-size:.82rem; line-height:1.4; }
.pr-val{ flex:none; white-space:nowrap; font-family:'Space Grotesk',sans-serif; }
.pr-val b{ font-weight:800; font-size:clamp(1.02rem,1.5vw,1.24rem); color:#ffffff; letter-spacing:-.01em; }
.pr-val span{ margin-left:7px; font-size:.72em; font-weight:700; letter-spacing:.06em; color:#E1261C; }
@media (max-width:560px){
  .pr-name{ font-size:.98rem; } .pr-val b{ font-size:1rem; }
  .price-row{ gap:12px; }
}

/* ============================================================
   services.html — "Servicii de Detailing" price list beside the car
   ============================================================ */
.game-prices{ min-height:auto !important; padding:clamp(60px,8vw,120px) 0 !important; }
.game-prices .game-head{ grid-template-columns:1.05fr .9fr !important; align-items:center; flex:none !important;
  gap:clamp(30px,4vw,66px); padding:0 clamp(24px,5vw,72px) !important; }
.game-prices .game-left{ align-self:center; }
.game-prices .game-eye{ display:block; margin-bottom:20px; }
.game-prices .price-colhead{ margin-bottom:6px; }
.game-prices .game-car{ justify-self:center; align-self:center; }
.game-prices .game-car img{ width:100% !important; max-width:min(540px,92%) !important; }
@media (max-width:820px){
  .game-prices .game-head{ grid-template-columns:1fr !important; }
  .game-prices .game-car{ order:-1; }
}

/* ============================================================
   services.html — compress the top (hero + first group heading)
   ============================================================ */
.svc-hero-white{ min-height:auto; padding:138px 0 16px; }
.svc-hero-solid{ font-size:clamp(2.6rem,9vw,7.6rem); line-height:.9; }
.svc-hero-white .breadcrumb{ margin-top:12px; }
.svc-banners .sb-group{ padding:clamp(22px,2.8vw,40px) 24px clamp(14px,1.8vw,24px); }
@media (max-width:820px){ .svc-hero-white{ padding:92px 0 10px; } }

/* ============================================================
   Floating WhatsApp contacts (bottom-right, all pages)
   ============================================================ */
.wa-fab{ position:fixed; right:20px; bottom:20px; z-index:140; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.wa-btn{ display:flex; align-items:center; gap:12px; background:#25D366; color:#fff; text-decoration:none;
  border-radius:999px; padding:8px 8px 8px 18px; box-shadow:0 12px 30px rgba(0,0,0,.3);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.wa-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 42px rgba(0,0,0,.4); }
.wa-label{ display:flex; flex-direction:column; line-height:1.18; text-align:right; }
.wa-label b{ font-family:var(--f-display),'Space Grotesk',sans-serif; font-weight:700; font-size:.86rem; letter-spacing:-.01em; }
.wa-label em{ font-style:normal; font-size:.72rem; opacity:.92; margin-top:1px; }
.wa-ic{ width:46px; height:46px; flex:none; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; }
.wa-ic svg{ width:26px; height:26px; color:#fff; }
@media (max-width:600px){
  .wa-fab{ right:14px; bottom:14px; gap:10px; }
  .wa-label{ display:none; }
  .wa-btn{ padding:9px; }
}

/* ============================================================
   About page — white editorial
   ============================================================ */
body.about-page{ background:#ffffff; color:#0f1116; }
body.about-page .nav{ background:#0d0d0f; border-bottom:1px solid rgba(255,255,255,.06); }
.about-page .ab-eye{ display:block; font-family:'Space Mono','DM Mono',monospace; letter-spacing:.3em;
  text-transform:uppercase; color:#d60000; font-size:.8rem; }
.about-page .ab-eye.center{ text-align:center; }
.ab-h2{ font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.2vw,3.3rem); line-height:1; color:#0f1116; margin:.55rem 0 1.2rem; }
.ab-h2 span, .ab-red{ color:#d60000; }
.ab-h2.center{ text-align:center; }
/* hero */
.ab-hero{ padding:clamp(140px,17vh,205px) 0 clamp(24px,4vw,52px); }
.ab-title{ font-family:'Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(3.4rem,12vw,10rem); line-height:.88; color:#0f1116; margin:.35rem 0 0; }
.ab-title span{ color:#d60000; }
.ab-hero-sub{ margin-top:1.3rem; max-width:46ch; color:#5d636e; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.6; }
/* story + video */
.ab-story{ padding:clamp(46px,6vw,96px) 0; }
.ab-story-grid{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(30px,5vw,72px); align-items:center; }
.ab-video-card{ position:relative; width:100%; max-width:380px; aspect-ratio:9/13; overflow:hidden; border-radius:16px;
  box-shadow:0 34px 66px -30px rgba(0,0,0,.45); background:#111; }
.ab-video{ width:100%; height:100%; object-fit:cover; display:block; }
.ab-lead{ font-size:clamp(1.1rem,1.7vw,1.32rem); color:#22242a; line-height:1.55; font-weight:600; }
.ab-p{ margin-top:1.1rem; color:#5d636e; line-height:1.7; }
.ab-btn{ display:inline-flex; align-items:center; gap:10px; margin-top:1.9rem; background:#0f1116; color:#fff;
  padding:15px 28px; text-decoration:none; font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:.02em;
  transition:transform .25s var(--ease), background .25s; }
.ab-btn span{ transition:transform .25s var(--ease); }
.ab-btn:hover{ background:#d60000; transform:translateY(-2px); } .ab-btn:hover span{ transform:translateX(4px); }
/* values */
.ab-values{ background:#f5f5f7; padding:clamp(50px,7vw,104px) 0; }
.ab-vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,28px); margin-top:clamp(28px,4vw,52px); }
.ab-val{ background:#fff; border:1px solid #e7e7ec; padding:clamp(26px,2.6vw,40px); transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.ab-val:hover{ transform:translateY(-6px); box-shadow:0 28px 56px -30px rgba(0,0,0,.32); border-color:#0f1116; }
.ab-val .n{ font-family:'Archivo Black',sans-serif; font-size:2rem; color:#d60000; letter-spacing:-.02em; }
.ab-val h4{ margin:.7rem 0 .5rem; font-size:1.16rem; color:#0f1116; }
.ab-val p{ color:#5d636e; line-height:1.6; font-size:.95rem; }
/* stats */
.ab-stats{ padding:clamp(48px,6vw,90px) 0; }
.ab-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.ab-stat .num{ font-family:'Archivo Black',sans-serif; font-size:clamp(2.3rem,4vw,3.4rem); color:#0f1116; letter-spacing:-.02em; }
.ab-stat .num .suffix{ color:#d60000; }
.ab-stat .label{ margin-top:8px; font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:#8b8e96; }
/* team */
.ab-team{ background:#f5f5f7; padding:clamp(50px,7vw,100px) 0 clamp(60px,9vw,130px); }
.ab-team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,28px); margin-top:clamp(28px,4vw,52px); }
.ab-mem{ background:#fff; border:1px solid #e7e7ec; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s; }
.ab-mem:hover{ transform:translateY(-5px); box-shadow:0 26px 54px -30px rgba(0,0,0,.3); }
.ab-mem .ph{ height:280px; background:#eceef1; display:grid; place-items:center; color:#c4c8cf; }
.ab-mem .ph svg{ width:78px; height:78px; }
.ab-mem-info{ padding:22px 24px; }
.ab-mem-info h3{ font-size:1.22rem; color:#0f1116; }
.ab-mem-info .role{ font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:#d60000; margin-top:5px; }
@media (max-width:820px){
  .ab-story-grid{ grid-template-columns:1fr; }
  .ab-video-card{ max-width:320px; margin:0 auto; }
  .ab-vals,.ab-stats-grid,.ab-team-grid{ grid-template-columns:1fr; }
  .ab-stats-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Fix: center hero wordmark independent of transform (reveal sets transform:none) */
.hero-wordmark{ left:0 !important; right:0; margin-inline:auto; }

/* ============================================================
   SPONSORS page — premium editorial
   ============================================================ */
body.sponsors-page{ background:#ffffff; }
body.sponsors-page .nav{ background:rgba(8,8,10,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.05); }
.sponsors-page .sp-eye{ display:block; font-family:'Space Mono','DM Mono',monospace; letter-spacing:.32em; text-transform:uppercase; font-size:.8rem; color:#E1261C; }
.sponsors-page .sp-eye.red{ color:#d60000; }

/* ---- Hero (black, title sponsor) ---- */
.sp-hero{ position:relative; background:#050506; color:#fff; overflow:hidden;
  min-height:100vh; display:flex; align-items:center; padding:clamp(130px,16vh,190px) 0 clamp(120px,14vw,180px); text-align:center; }
.sp-hero-bg{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 60% at 50% 22%, rgba(40,42,50,.55), transparent 70%), radial-gradient(70% 50% at 50% 100%, rgba(214,0,0,.16), transparent 72%); }
.sp-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.sp-glow.g1{ width:42vw; height:42vw; left:-8vw; top:8vh; background:rgba(214,0,0,.22); animation:spDrift1 16s ease-in-out infinite; }
.sp-glow.g2{ width:38vw; height:38vw; right:-6vw; top:20vh; background:rgba(90,110,150,.2); animation:spDrift2 20s ease-in-out infinite; }
.sp-glow.g3{ width:50vw; height:50vw; left:25vw; bottom:-20vh; background:rgba(214,0,0,.14); animation:spDrift1 24s ease-in-out infinite reverse; }
@keyframes spDrift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(4vw,-3vh) scale(1.12);} }
@keyframes spDrift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-4vw,3vh) scale(1.1);} }
.sp-particle{ position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.6);
  box-shadow:0 0 8px 2px rgba(255,255,255,.35); animation:spFloat 8s ease-in-out infinite; }
@keyframes spFloat{ 0%{ transform:translateY(14px); opacity:0;} 20%{opacity:.8;} 80%{opacity:.7;} 100%{ transform:translateY(-30px); opacity:0;} }
@media (prefers-reduced-motion:reduce){ .sp-glow,.sp-particle{ animation:none; } }
.sp-hero-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.sp-hero-h{ font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.6rem,3.4vw,2.9rem); color:#e9ebef; margin:.7rem 0 0; }
.sp-brand{ font-family:'Anton','Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(4.4rem,15vw,13rem); line-height:.9; margin:.1rem 0 0;
  background:linear-gradient(180deg,#fff 0%,#cfd3da 52%,#8b9098 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.6)); }
.sp-hero-desc{ max-width:60ch; margin:1.4rem auto 0; color:#a9adb6; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.65; }
.sp-car{ margin:clamp(24px,4vw,50px) auto 0; width:100%; max-width:min(880px,92vw); }
.sp-car img{ width:100%; height:auto; display:block; filter:drop-shadow(0 40px 60px rgba(0,0,0,.7)); }
.sp-hero-logo{ margin-top:clamp(34px,5vw,66px); }
.sp-hero-logo img{ width:min(230px,54vw); height:auto; opacity:.95; }
.sp-divider{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; }
.sp-divider svg{ width:100%; height:clamp(70px,9vw,130px); display:block; }

/* ---- Partners (white, masonry) ---- */
.sp-partners{ background:#fff; padding:clamp(40px,6vw,90px) 0 clamp(70px,10vw,150px); }
.sp-head{ text-align:center; max-width:640px; margin:0 auto clamp(34px,5vw,60px); }
.sp-h2{ font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(2.4rem,6vw,4.6rem); color:#0f1116; line-height:.95; margin:.5rem 0 1rem; }
.sp-sub{ color:#5d636e; font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.6; }
.sp-grid{ columns:3; column-gap:clamp(16px,1.8vw,26px); }
.sp-card{ position:relative; break-inside:avoid; margin-bottom:clamp(16px,1.8vw,26px);
  background:#fff; border:1px solid #ececf0; border-radius:16px; overflow:hidden;
  box-shadow:0 14px 34px -22px rgba(15,17,22,.4); cursor:pointer;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.sp-card img{ display:block; width:100%; height:auto; transition:transform .5s var(--ease); }
.sp-card:hover{ transform:translateY(-6px) scale(1.02); border-color:#d60000; box-shadow:0 30px 60px -26px rgba(214,0,0,.5); }
.sp-card:hover img{ transform:scale(1.04); }
.sp-card-name{ position:absolute; left:0; right:0; bottom:0; padding:10px 14px; font-family:'Space Mono',monospace;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; text-align:center;
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent); opacity:0; transform:translateY(8px); transition:.35s var(--ease); }
.sp-card:hover .sp-card-name{ opacity:1; transform:translateY(0); }

/* ---- Highlight box ---- */
.sp-highlight{ display:flex; align-items:center; gap:clamp(22px,3vw,42px); margin:clamp(28px,4vw,52px) 0;
  background:linear-gradient(120deg,#141416,#0b0b0d); color:#fff; border:1px solid rgba(255,255,255,.08);
  border-radius:22px; padding:clamp(28px,3.4vw,48px); position:relative; overflow:hidden; }
.sp-highlight::before{ content:''; position:absolute; right:-10%; top:-40%; width:50%; height:180%;
  background:radial-gradient(circle, rgba(214,0,0,.28), transparent 65%); pointer-events:none; }
.sp-hl-ic{ flex:none; width:clamp(64px,7vw,92px); height:clamp(64px,7vw,92px); border-radius:18px;
  display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,#E1261C,#8a0f0a);
  box-shadow:0 18px 40px -14px rgba(214,0,0,.6); position:relative; z-index:1; }
.sp-hl-ic svg{ width:48%; height:48%; }
.sp-hl-txt{ position:relative; z-index:1; }
.sp-hl-h{ font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.5rem,3vw,2.4rem); margin:.4rem 0 .7rem; color:#fff; }
.sp-hl-txt p{ color:#b9bdc5; font-size:clamp(1rem,1.3vw,1.14rem); line-height:1.6; max-width:60ch; }
.sp-accent{ color:#fff; background:linear-gradient(120deg,#ff4d3d,#E1261C); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-weight:800; }

/* ---- Closing ---- */
.sp-closing{ position:relative; overflow:hidden; background:#050506; color:#fff; text-align:center;
  padding:clamp(90px,14vw,190px) 0; }
.sp-closing-bg{ position:absolute; inset:0; pointer-events:none; }
.sp-closing-bg .sp-glow{ filter:blur(90px); }
.sp-closing-bg .c1{ width:44vw; height:44vw; left:-6vw; top:-10vh; background:rgba(214,0,0,.2); animation:spDrift1 18s ease-in-out infinite; }
.sp-closing-bg .c2{ width:40vw; height:40vw; right:-8vw; bottom:-14vh; background:rgba(90,110,150,.18); animation:spDrift2 22s ease-in-out infinite; }
.sp-close-h{ position:relative; z-index:1; font-family:'Archivo Black','Space Grotesk',sans-serif; text-transform:uppercase;
  letter-spacing:-.02em; font-size:clamp(2.2rem,6vw,5rem); line-height:.98; }
.sp-close-h span{ background:linear-gradient(120deg,#ff5a48,#E1261C); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp-close-p{ position:relative; z-index:1; max-width:58ch; margin:1.6rem auto 0; color:#a9adb6; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.7; }

/* highlighted nav link */
.nav-sponsors{ color:#fff !important; }
.nav-links .nav-sponsors{ background:linear-gradient(120deg,#E1261C,#b3140c); padding:7px 15px !important; border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(214,0,0,.7); transition:transform .25s var(--ease), box-shadow .25s; }
.nav-links .nav-sponsors::after{ display:none !important; }
.nav-links .nav-sponsors:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(214,0,0,.8); color:#fff !important; }

@media (max-width:900px){ .sp-grid{ columns:2; } .sp-highlight{ flex-direction:column; text-align:center; } .sp-hl-txt p{ margin-inline:auto; } }
@media (max-width:560px){ .sp-grid{ columns:1; } }

/* ============================================================
   Sponsors v2 — smaller 3-col hero + uniform square grid
   ============================================================ */
/* hero ~half height, car | text | logo */
.sp-hero{ min-height:auto; padding:clamp(126px,15vh,150px) 0 clamp(60px,8vw,110px); }
.sp-hero-inner{ display:grid; grid-template-columns:1fr 1.25fr 1fr; align-items:center; gap:clamp(20px,3vw,50px); text-align:center; }
.sp-hero-car{ display:flex; justify-content:center; }
.sp-hero-car img{ width:100%; max-width:440px; height:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)); }
.sp-hero-mid{ display:flex; flex-direction:column; align-items:center; }
.sp-hero-h{ font-size:clamp(1rem,1.9vw,1.6rem); margin:.4rem 0 0; }
.sp-brand{ font-size:clamp(2.6rem,6vw,5rem); margin:.05rem 0 0; }
.sp-hero-desc{ max-width:42ch; margin:1rem auto 0; font-size:clamp(.9rem,1.15vw,1.05rem); }
.sp-hero-logo-side{ display:flex; justify-content:center; }
.sp-hero-logo-side img{ width:100%; max-width:250px; height:auto; opacity:.96; }

/* partners: uniform square cards, 4 per row */
.sp-partners{ padding:clamp(30px,4vw,70px) 0 clamp(70px,10vw,150px); }
.sp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,24px); columns:auto; }
.sp-card{ aspect-ratio:1/1; margin:0; display:grid; place-items:center; padding:clamp(16px,2vw,32px);
  background:#fff; border:1px solid #ececf0; border-radius:16px; overflow:hidden; }
.sp-card img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:900px){
  .sp-hero-inner{ grid-template-columns:1fr; }
  .sp-hero-car img{ max-width:360px; } .sp-hero-logo-side img{ max-width:220px; }
  .sp-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){ .sp-grid{ grid-template-columns:repeat(2,1fr); } }

/* Sponsors nav button — square, like the language switch, in nav-cta */
.nav-sponsors-btn{ display:inline-flex; align-items:center; font-family:var(--f-label),'Space Grotesk',sans-serif;
  font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; line-height:1;
  padding:11px 16px; border-radius:4px; background:var(--red); color:#fff !important; text-decoration:none;
  box-shadow:0 10px 26px -12px rgba(214,0,0,.75); transition:background .25s var(--ease), transform .25s var(--ease); }
.nav-sponsors-btn:hover{ background:#ff1a1a; transform:translateY(-1px); color:#fff !important; }
.nav-sponsors-btn::after{ display:none !important; }
.nav-sponsors-btn.active{ background:#ff1a1a; }
@media (max-width:820px){ .nav-sponsors-btn{ padding:9px 12px; font-size:.78rem; } }

/* Gallery before/after section */
.ba-sec{ background:#ffffff; padding:clamp(52px,8vw,110px) 0 clamp(70px,10vw,140px); text-align:center; }
.ba-sub{ color:#5d636e; max-width:52ch; margin:14px auto 0; font-size:1.02rem; line-height:1.6; }
.ba-sec .ba{ max-width:1040px; margin:clamp(26px,4vw,52px) auto 0; cursor:ew-resize; }
.ba .tag{ color:#fff; }
.ba .grip{ background:var(--red,#d60000); box-shadow:0 6px 20px rgba(214,0,0,.55); display:grid; place-items:center; }

/* Craftsmanship section — 3-image media (wide top + two below) */
.split-media-3{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1.25fr 1fr;
  gap:clamp(10px,1.3vw,18px); min-height:clamp(360px,40vw,520px); }
.split-media-3 .frame{ position:static; margin:0; width:auto; height:100%; overflow:hidden; }
.split-media-3 .frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.split-media-3 .craft-a{ grid-column:1 / 3; }
@media (max-width:820px){ .split-media-3{ grid-template-rows:1fr 1fr; min-height:300px; } }

/* Gallery — single big moving bar */
.ow-mq-item{ height:clamp(230px,28vw,440px); }

/* ============================================================
   About v2 — team at top (2, bigger), black story section
   ============================================================ */
/* team bigger, 2 across */
.ab-team-top{ padding-top:clamp(40px,6vw,80px); }
.ab-team-2{ grid-template-columns:repeat(2,1fr); max-width:860px; margin-left:auto; margin-right:auto;
  gap:clamp(22px,3vw,44px); }
.ab-team-2 .ab-mem{ }
.ab-team-2 .ph{ height:clamp(360px,42vw,480px); position:relative;
  background:linear-gradient(180deg,#f0f1f4 0%,#e2e4e9 100%); display:block; }
.ab-team-2 .ph img{ position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  height:100%; width:auto; max-width:none; object-fit:contain; object-position:bottom; }
.ab-team-2 .ab-mem-info{ padding:24px 26px 28px; }
.ab-team-2 .ab-mem-info h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
.ab-team-2 .ab-mem-info .role{ font-size:.78rem; margin-top:7px; }

/* story section — BLACK */
.ab-story-dark{ background:#0c0c0e; }
.ab-story-dark .ab-h2{ color:#ffffff; }
.ab-story-dark .ab-lead{ color:#e9ebef; }
.ab-story-dark .ab-p{ color:#9aa0aa; }
.ab-story-dark .ab-btn{ background:#d60000; }
.ab-story-dark .ab-btn:hover{ background:#ff1a1a; }
.ab-story-dark .ab-story-grid{ grid-template-columns:1.05fr 1fr; }
.ab-story-frame{ width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  box-shadow:0 34px 66px -30px rgba(0,0,0,.8); }
.ab-story-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:820px){
  .ab-team-2{ grid-template-columns:1fr; max-width:420px; }
  .ab-story-dark .ab-story-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   FAQ page — dark, full-width big accordion (detailing-style)
   ============================================================ */
body.faq-page{ background:#101012; }
body.faq-page .nav{ background:#0d0d0f; border-bottom:1px solid rgba(255,255,255,.06); }
.faq-hero{ text-align:center; padding:clamp(140px,17vh,205px) 0 clamp(18px,3vw,38px); }
.faq-eye{ display:block; font-family:'Space Mono','DM Mono',monospace; letter-spacing:.3em; text-transform:uppercase; color:#d60000; font-size:.8rem; }
.faq-title{ font-family:'Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(3.4rem,11vw,9rem); line-height:.9; color:#fff; margin:.35rem 0 0; }
.faq-sub{ color:#9aa0aa; margin:1.1rem auto 0; max-width:52ch; font-size:clamp(1rem,1.3vw,1.1rem); }
.faq-sec{ padding:clamp(26px,4vw,60px) 0 clamp(72px,10vw,150px); }
/* full-width big accordion */
.faq-acc{ max-width:1120px; margin:0 auto; border-top:1px solid rgba(255,255,255,.1); }
.faq-acc .acc-item{ border-bottom:1px solid rgba(255,255,255,.1); }
.faq-acc .acc-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:none; border:none; cursor:pointer; text-align:left; color:#f3f4f6;
  font-family:var(--f-display),'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.1vw,1.75rem); line-height:1.25;
  padding:clamp(22px,2.6vw,36px) clamp(6px,1.4vw,18px); transition:color .25s, padding-left .3s var(--ease); }
.faq-acc .acc-q:hover{ color:#ff3b3b; padding-left:clamp(14px,2.4vw,32px); }
.faq-acc .acc-item.open .acc-q{ color:#ff3b3b; }
.faq-acc .ic{ flex:none; width:clamp(40px,3.4vw,52px); height:clamp(40px,3.4vw,52px); border-radius:50%;
  border:1.5px solid rgba(255,255,255,.22); display:grid; place-items:center; line-height:1;
  font-size:clamp(1.4rem,2vw,1.8rem); color:#d60000; transition:.3s var(--ease); }
.faq-acc .acc-item.open .ic{ background:#d60000; color:#fff; border-color:#d60000; transform:rotate(45deg); }
.faq-acc .acc-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-acc .acc-a .inner{ padding:0 clamp(6px,1.4vw,18px) clamp(26px,2.8vw,38px); color:#9aa0aa;
  font-size:clamp(1rem,1.25vw,1.16rem); line-height:1.75; max-width:84ch; }
/* CTA */
.faq-cta{ max-width:1120px; margin:clamp(40px,6vw,80px) auto 0; text-align:center; background:#17181c;
  border:1px solid rgba(255,255,255,.08); padding:clamp(34px,4.4vw,60px); }
.faq-cta h3{ color:#fff; font-family:'Archivo Black',sans-serif; text-transform:uppercase; font-size:clamp(1.4rem,2.6vw,2.1rem); letter-spacing:-.01em; }
.faq-cta p{ color:#9aa0aa; margin:14px auto 26px; max-width:48ch; line-height:1.6; }
.faq-btn{ display:inline-flex; align-items:center; gap:10px; background:#d60000; color:#fff; padding:15px 32px;
  text-decoration:none; font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:.02em; transition:transform .25s var(--ease), background .25s; }
.faq-btn span{ transition:transform .25s var(--ease); }
.faq-btn:hover{ background:#ff1a1a; transform:translateY(-2px); } .faq-btn:hover span{ transform:translateX(4px); }

/* ============================================================
   Footer — carbon-fiber background + badge logo + new contact
   ============================================================ */
.footer{
  background-color:#0f0f0f !important;
  background-image:
    linear-gradient(27deg,  #0d0d0d 5px, transparent 5px),
    linear-gradient(207deg, #0d0d0d 5px, transparent 5px),
    linear-gradient(27deg,  #191919 5px, transparent 5px),
    linear-gradient(207deg, #191919 5px, transparent 5px),
    linear-gradient(90deg,  #121212 10px, transparent 10px),
    linear-gradient(#151515 25%, #121212 25%, #121212 50%, transparent 50%, transparent 75%, #1a1a1a 75%, #1a1a1a) !important;
  background-position:0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0 !important;
  background-size:20px 20px !important;
}
.footer-logo{ height:74px; width:auto; display:block; }
.footer .brand{ align-items:center; }

/* ============================================================
   Contact page — white, simple (info + map, no form)
   ============================================================ */
body.contact-page{ background:#ffffff; }
body.contact-page .nav{ background:#0d0d0f; border-bottom:1px solid rgba(255,255,255,.06); }
.ct-page{ padding:clamp(140px,17vh,200px) 0 clamp(66px,9vw,120px); }
.ct-head{ margin-bottom:clamp(30px,4vw,54px); }
.ct-eye{ display:block; font-family:'Space Mono','DM Mono',monospace; letter-spacing:.3em; text-transform:uppercase; color:#d60000; font-size:.8rem; }
.ct-title{ font-family:'Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(2.8rem,7vw,5.4rem); line-height:.95; color:#0f1116; margin:.35rem 0 0; }
.ct-sub{ color:#5d636e; margin-top:1rem; max-width:54ch; font-size:clamp(1rem,1.3vw,1.1rem); }
.ct-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,4vw,60px); align-items:stretch; }
.ct-info{ display:flex; flex-direction:column; gap:clamp(24px,3vw,40px); }
.ct-label{ display:block; font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#9aa0aa; margin-bottom:10px; }
.ct-row{ display:flex; align-items:center; gap:15px; padding:13px 0; text-decoration:none; color:#0f1116;
  border-bottom:1px solid #ececf0; transition:color .2s, padding-left .25s var(--ease); }
.ct-row:hover{ color:#d60000; padding-left:6px; }
.ct-ic{ width:44px; height:44px; flex:none; border-radius:12px; background:#0f1116; color:#fff; display:grid; place-items:center; transition:background .25s; }
.ct-row:hover .ct-ic{ background:#d60000; }
.ct-ic svg{ width:20px; height:20px; }
.ct-rt{ display:flex; flex-direction:column; line-height:1.3; }
.ct-rt b{ font-size:1.06rem; letter-spacing:-.01em; }
.ct-rt em{ font-style:normal; font-size:.86rem; color:#5d636e; margin-top:2px; }
.ct-socials{ display:flex; flex-wrap:wrap; gap:12px; }
.ct-socials a{ width:50px; height:50px; border-radius:50%; border:1.6px solid #0f1116; display:grid; place-items:center; color:#0f1116; transition:.25s var(--ease); }
.ct-socials a svg{ width:22px; height:22px; }
.ct-socials a:hover{ background:#0f1116; color:#fff; transform:translateY(-3px); }
.ct-map{ position:relative; border-radius:16px; overflow:hidden; min-height:clamp(360px,44vw,560px);
  box-shadow:0 26px 54px -32px rgba(0,0,0,.45); border:1px solid #ececf0; }
.ct-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (max-width:820px){ .ct-grid{ grid-template-columns:1fr; } .ct-map{ min-height:340px; } }

/* translating state */
body.i18n-busy{ cursor:progress; }
body.i18n-busy .lang-switch{ opacity:.7; }

/* ============================================================
   Homepage Services — full service photos on the left, faded/blended
   ============================================================ */
.svc-cards .svc-card::after{ display:none !important; }          /* drop the studio-bg glow */
.svc-cards .svc-photo{ position:relative; width:44%; background:#0b0b0d; overflow:hidden; }
.svc-cards .svc-photo img{ width:100% !important; height:100% !important; object-fit:cover !important;
  transform:none !important; filter:brightness(.6) contrast(1.03) !important;
  transition:transform .7s var(--ease), filter .5s var(--ease); }
.svc-cards .svc-card:hover .svc-photo img{ transform:scale(1.06) !important; filter:brightness(.82) contrast(1.04) !important; }
/* fade the photo into the dark card (right edge) + soft top/bottom vignette */
.svc-cards .svc-photo::after{ content:''; position:absolute; inset:0; z-index:1; display:block !important; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(12,13,15,0) 42%, rgba(20,22,26,.7) 82%, #16181c 100%),
    linear-gradient(180deg, rgba(12,13,15,.35), transparent 26%, transparent 74%, rgba(12,13,15,.35)); }
@media (max-width:720px){
  .svc-cards .svc-photo{ width:100%; height:200px; }
  .svc-cards .svc-photo::after{ background:linear-gradient(180deg, rgba(12,13,15,.25), transparent 40%, transparent 60%, #131519 100%); }
}

/* Jetour as first partner card — dark so the white wordmark shows */
.sp-card-jetour{ background:#0d0d0f !important; border-color:#1c1c20 !important; }
.sp-card-jetour .sp-card-name{ color:#fff; }

/* ---- IG "Follow the Build": clickable phones + tighter vertical rhythm ---- */
.phone[href]{ text-decoration:none; cursor:pointer; }
.ig-glow .phone-row{ height:clamp(430px,50vw,620px); }
.ig-section .section-head{ margin-bottom:14px; }
/* keep social icons clear of the fanned phones */
.ig-section .ig-socials{ margin-top:clamp(40px,6vw,72px); position:relative; z-index:6; }

/* ---- About: smaller hero title ---- */
.ab-title.ab-title-sm{ font-size:clamp(2.4rem,6.4vw,5rem); line-height:.92; }

/* ---- About team: both portraits identical size (3:4), full photo, no crop ---- */
.ab-team-2 .ab-mem .ph{ aspect-ratio:3/4; height:auto; background:#fff; display:block; padding:0; }
.ab-team-2 .ab-mem .ph img{ width:100%; height:100%; object-fit:cover; object-position:bottom center; display:block; }

/* ---- Detailing & Service pages: render all services at once (no scroll-reveal stagger) ---- */
.detailing-page .reveal, .garage-page .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ---- Homepage collage Block B: photos + centered gallery button ---- */
.col-cta-block .col-cta-wrap{ display:flex; align-items:center; justify-content:center; }

/* ============================================================
   MOBILE OPTIMISATION PASS
   ============================================================ */
/* Expandable "Services" group in the mobile drawer */
.mm-group{ display:flex; flex-direction:column; }
.mm-parent{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  background:none; border:0; border-bottom:1px solid rgba(255,255,255,.10); cursor:pointer;
  font-family:var(--f-display); font-size:1.8rem; font-weight:700; color:rgba(255,255,255,.82);
  padding:10px 0; text-align:left; -webkit-tap-highlight-color:transparent; }
.mm-caret{ width:24px; height:24px; flex:none; color:var(--red-bright); transition:transform .32s var(--ease); }
.mm-group.open .mm-parent{ color:#fff; }
.mm-group.open .mm-caret{ transform:rotate(180deg); }
.mm-sub{ max-height:0; overflow:hidden; display:flex; flex-direction:column; transition:max-height .3s ease; }
.mm-sub a{ font-size:1.3rem !important; font-weight:600 !important; color:rgba(255,255,255,.6) !important;
  padding:9px 0 9px 20px !important; border-bottom:1px solid rgba(255,255,255,.06) !important; }
.mm-sub a:last-child{ border-bottom:0 !important; }

/* Smaller SV logo on phones */
@media (max-width:820px){
  .brand-logo{ height:54px; }
  .nav.scrolled .brand-logo{ height:46px; }
}
@media (max-width:480px){
  .brand-logo{ height:46px; }
  .nav.scrolled .brand-logo{ height:42px; }
}

/* Global mobile safety: no sideways scroll, media never overflows */
html, body{ overflow-x:hidden; }
img, video, svg, iframe{ max-width:100%; }
@media (max-width:640px){
  .container{ padding-inline:18px; }
  /* comfortable tap targets in the drawer */
  .mobile-menu a, .mm-parent{ min-height:44px; }
}