@charset "UTF-8";
/* ============================================================
   components.css — shared UI (Trust Tint "Showroom Black")
   ============================================================ */

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--display); font-weight:700; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.08em;
  padding:.9em 1.6em; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; gap:.6em; white-space:nowrap;
  transition:background-color var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease);
}
.btn-sm{ padding:.7em 1.2em; font-size:.82rem; }
.btn-primary{ background:var(--gold); color:var(--on-gold); }
.btn-primary:hover{ background:var(--gold-deep); color:#fff; box-shadow:var(--glow-gold); }
.btn-glass{ background:var(--glass); backdrop-filter:blur(var(--blur)); color:var(--gold); border-color:var(--gold-line); }
.btn-glass:hover{ background:rgba(212,175,55,.06); color:var(--gold-hover); border-color:var(--gold); }

/* ---------- Navbar (fixed, transparent over hero) ---------- */
.nav{
  position:sticky; top:0; left:0; right:0; z-index:100;
  background:rgba(0,0,0,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:background var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
}
/* solid state: on scroll, or always on non-hero pages */
.nav.scrolled,
.nav--solid{
  background:rgba(0,0,0,.92); backdrop-filter:blur(10px);
  border-bottom-color:var(--border); box-shadow:var(--sh-md);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:var(--s-4); }
.brand{ font-family:var(--display); font-weight:900; font-size:1.2rem; letter-spacing:.04em; white-space:nowrap; }

.nav-menu{ display:flex; align-items:center; gap:var(--s-4); margin-left:auto; }
.nav-list{ display:flex; align-items:center; gap:2px; }

.nav-link{
  position:relative;
  font-family:var(--display); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
  color:rgba(255,255,255,.85);
  background:none; border:none; cursor:pointer;
  padding:.55em .6em;
  display:inline-flex; align-items:center; gap:.35em;
  transition:color var(--t-fast) var(--ease);
}
.nav-link:hover,
.nav-link.active,
.has-dropdown.active > .dropdown-toggle{ color:#fff; }

/* gold underline that grows left → right */
.nav-link::after{
  content:""; position:absolute; left:.7em; right:.7em; bottom:.15em; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid) var(--ease);
}
.nav-link:hover::after,
.nav-link.active::after,
.has-dropdown.active > .dropdown-toggle::after{ transform:scaleX(1); }

.nav-actions{ display:flex; align-items:center; gap:var(--s-4); }
.nav-actions-mobile{ display:none; }

/* ---------- Dropdown ---------- */
.has-dropdown{ position:relative; }
.caret{ font-size:.7em; transition:transform var(--t-fast) var(--ease); }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:200px;
  background:var(--black-pure); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--sh-md);
  padding:var(--s-2); opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.dropdown li a{
  display:block; padding:.7em .9em; border-radius:var(--r-xs);
  font-family:var(--display); font-weight:600; font-size:.84rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--text-2);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dropdown li a:hover{ background:var(--surface-2); color:var(--gold); }

/* Open state is owned by JS via .open, so Enter and Escape can actually close it.
   :focus-within cannot be used here: it holds the panel open while focus is in it. */
.has-dropdown.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.has-dropdown.open .caret{ transform:rotate(180deg); }

/* open on hover — only on devices that actually hover (desktop) */
@media (hover:hover) and (pointer:fine){
  .has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
  .has-dropdown:hover .caret{ transform:rotate(180deg); }
}

/* ---------- Mobile hamburger ---------- */
.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:42px; height:42px;
  align-items:center; justify-content:center; background:none; border:1px solid var(--border);
  border-radius:var(--r-xs); cursor:pointer;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--gold); transition:transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:1080px){
  .nav-toggle{ display:flex; }
  .nav-actions{ display:none; }
  /* menu panel always solid for legibility, even over a hero */
  .nav-menu{
    position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--black-pure); border-bottom:1px solid var(--border);
    padding:var(--s-4) var(--gutter) var(--s-6);
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease), visibility var(--t-mid);
  }
  .nav-menu.open{ max-height:90vh; opacity:1; visibility:visible; overflow-y:auto; }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-link{ width:100%; padding:.95em .4em; font-size:1rem; border-bottom:1px solid var(--border); }
  .nav-link::after{ display:none; }   /* no underline animation in mobile list */
  .dropdown{
    position:static; opacity:1; visibility:hidden; transform:none; box-shadow:none;
    border:none; background:transparent; padding:0 0 0 var(--s-4);
    max-height:0; overflow:hidden;
    transition:max-height var(--t-mid) var(--ease), visibility var(--t-mid);
  }
  .has-dropdown.open .dropdown{ max-height:300px; visibility:visible; }
  .nav-actions-mobile{ display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-5); }
  .nav-actions-mobile .btn{ justify-content:center; }
}

/* ---------- Hero (full-bleed video) ---------- */
.hero{ position:relative; min-height:min(84svh,780px); display:flex; align-items:center; overflow:hidden; }
.hero .wrap{ width:100%; }
.hero-video, .hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  object-position:30% 46%;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.74) 40%, rgba(0,0,0,.38) 68%, rgba(0,0,0,.15) 85%),
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 22%, transparent 55%, rgba(10,10,10,.96));
}
.hero-content{ position:relative; z-index:2; padding-top:88px; text-align:left; }
.hero-title{ font-size:clamp(2.6rem,7vw,5.5rem); line-height:.98; margin:.18em 0 .35em; }
.hero-sub{
  font-size:clamp(1.02rem,2vw,1.2rem); color:var(--text); max-width:48ch;
  text-shadow:0 1px 2px rgba(0,0,0,.75), 0 2px 14px rgba(0,0,0,.6);
}
/* Hero copy sits over photography, so it carries its own contrast rather
   than relying on the overlay. The eyebrow is solid gold, so text-shadow
   works; the chrome and gold title is painted with background-clip and has
   no fill to shadow, so it needs drop-shadow instead. */
/* The eyebrow crosses from dark bodywork onto a pale door mid-line, so it
   needs an outline rather than a drop shadow. Zero-offset shadows stacked
   at small radii read as a ring, which holds on any background. */
.hero .eyebrow{
  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 4px rgba(0,0,0,.95),
    0 1px 2px rgba(0,0,0,1),
    0 3px 14px rgba(0,0,0,.85);
}
.hero-title .chrome,
.hero-title .gold-metal{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)) drop-shadow(0 4px 18px rgba(0,0,0,.85));
}
.hero-cta{ display:flex; gap:var(--s-4); margin-top:var(--s-6); flex-wrap:wrap; }

/* Hero — mobile: immersive, car-led, content anchored to the bottom */
@media(max-width:1024px){
  .hero{ align-items:flex-end; min-height:82svh; }  /* content drops to the bottom, next section peeks */
  .hero-img, .hero-video{ object-position:74% 42%; } /* frame the car in the portrait slice */
  .hero-overlay{
    background:linear-gradient(180deg,
      rgba(10,10,10,.12) 0%,     /* nav is sticky and opaque, so nothing to protect here */
      rgba(10,10,10,.05) 20%,    /* the unit, the signage and the roofline stay open */
      rgba(10,10,10,.14) 34%,    /* car's upper body, still clear */
      rgba(10,10,10,.62) 43%,    /* bed arrives just as the eyebrow does */
      rgba(10,10,10,.86) 56%,
      rgba(10,10,10,.95) 72%,
      rgba(10,10,10,.97) 100%);
  }
  .hero-content{ padding-top:0; padding-bottom:var(--s-7); }
}
@media(max-width:560px){
  .hero .eyebrow{ letter-spacing:.18em; gap:.5em; }
  .hero .eyebrow::before,
  .hero .eyebrow::after{ display:none; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; justify-content:center; }
}

/* ---------- Trust bar (under hero) ---------- */
.trustbar{ background:var(--black-pure); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trustbar-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s-3) var(--s-6); padding-top:var(--s-4); padding-bottom:var(--s-4);
  color:var(--text-2); font-size:.92rem; text-align:center;
}
.tb-item{ display:inline-flex; align-items:center; gap:.45em; }
.tb-item .stars{ color:var(--gold); letter-spacing:.06em; }
.tb-item strong{ color:var(--text); font-family:var(--display); }

a.tb-item{ transition:color var(--t-fast) var(--ease); }
.tb-tick{ color:var(--gold); font-style:normal; font-size:.95em; }
@media(hover:hover){ a.tb-item:hover{ color:var(--text); } }
@media(max-width:1024px){ .tb-extra:not(.tb-extra-2){ display:none; } }
@media(max-width:620px){
  .trustbar-inner{ padding-top:var(--s-3); padding-bottom:var(--s-3); font-size:.84rem; gap:var(--s-4); }
  .tb-extra{ display:none; }
  .tb-item .stars{ font-size:.9em; }
}

/* ---------- Reviews: book + read-all CTA ---------- */
.reviews-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-5); margin-top:var(--s-6); }
@media(max-width:560px){
  .reviews-cta{ flex-direction:column; }
  .reviews-cta .btn{ width:100%; justify-content:center; }
}

/* ---------- Services (clickable image grid) ---------- */
.services-head{ text-align:center; max-width:62ch; margin:0 auto var(--s-7); }
.services-head p{ margin:var(--s-3) auto 0; }

.svc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:215px;
  gap:var(--s-4);
}
.svc-tile--feature{ grid-column:span 2; grid-row:span 2; }

.svc-tile{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--r-md);
  background-image:var(--svc-img);
  background-size:cover; background-position:center; background-color:#0d0d0d;
  transition:border-color var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
/* Legibility scrim, darkest at the foot where the label sits. .svc-name is 17.9px,
   just under the 18.66px bold threshold, so it needs 4.5:1 rather than 3:1. */
.svc-tile::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.02) 32%, rgba(10,10,10,.62) 62%, rgba(10,10,10,.94) 100%);
  transition:background var(--t-mid) var(--ease);
}

.svc-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; flex-direction:column; gap:.45em; padding:var(--s-5);
}
.svc-name{
  font-family:var(--display); font-weight:900; line-height:1.05; letter-spacing:-.01em;
  font-size:1.12rem; filter:drop-shadow(0 2px 10px rgba(0,0,0,.65));
}
.svc-tile--feature .svc-name{ font-size:clamp(1.7rem,2.6vw,2.4rem); }
.svc-sub{ color:var(--text); opacity:.82; font-size:.92rem; line-height:1.5; max-width:36ch; }

.svc-go{
  display:inline-flex; align-items:center; gap:.5em; margin-top:.15em;
  font-family:var(--display); font-weight:700; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--gold);
}
.svc-go .arr{ transition:transform var(--t-mid) var(--ease); }

.svc-tile:hover, .svc-tile:focus-visible{
  border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--sh-md);
}
.svc-tile:hover::before, .svc-tile:focus-visible::before{
  background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 28%, rgba(10,10,10,.66) 58%, rgba(10,10,10,.96) 100%);
}
.svc-tile:hover .svc-go .arr, .svc-tile:focus-visible .svc-go .arr{ transform:translateX(4px); }

/* tablet: feature full-width, other four in a 2×2 below */
@media(max-width:900px){
  .svc-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:210px; }
  .svc-tile--feature{ grid-column:1 / -1; grid-row:span 1; }
  .svc-tile--feature .svc-name{ font-size:clamp(1.6rem,5vw,2.1rem); }
}
/* mobile: single-column stack */
@media(max-width:560px){
  .svc-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .svc-tile{ min-height:185px; }
  .svc-tile--feature{ min-height:240px; }
}

/* ---------- About (contained split) ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center; }

.about-media{ position:relative; z-index:0; }
/* height:auto leaves object-fit with nothing to do, so a portrait source runs to
   full height. Fixing the ratio makes cover crop instead. */
.about-media img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-md);
}
/* The owner photo is a tall portrait; a square box crops far less than 4:3 and
   still balances the text column beside it. */
.about-media--face img{ aspect-ratio:1/1; object-position:50% 18%; }
/* offset gold accent behind the image (premium layered look) */
.about-media::before{
  content:""; position:absolute; inset:0;
  transform:translate(16px,16px);
  border:1px solid var(--gold-line);
  border-radius:var(--r-md); z-index:-1;
}
/* glass location chip floating on the image */
.about-chip{
  position:absolute; left:var(--s-4); bottom:var(--s-4);
  display:flex; align-items:center; gap:.6em;
  background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-stroke); border-radius:var(--r-sm);
  padding:.6em .9em;
  font-family:var(--display); font-weight:600; font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text);
}
.about-chip .dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.25);
}

.about-body h2{ margin:.15em 0 .55em; }
.about-body p{ margin-bottom:var(--s-4); }
.about-body .btn{ margin-top:var(--s-2); }

/* Reversed split — image right / text left on desktop */
.about-grid--rev .about-body{ order:1; }
.about-grid--rev .about-media{ order:2; }
.about-grid--rev .about-media::before{ transform:translate(-16px,16px); } /* mirror the gold accent outward */

@media(max-width:860px){
  .about-grid{ grid-template-columns:1fr; gap:0; }
  .about-media::before{ display:none; }  /* drop the offset accent on small screens */

  /* body dissolves so the image can sit between the heading and the copy */
  .about-body{ display:contents; }
  .about-body > *{ order:4; }
  .about-body > .eyebrow{ order:1; justify-self:start; }
  .about-body > h2{ order:2; margin-bottom:var(--s-5); }
  .about-grid > :not(.about-body){ order:3; margin-bottom:var(--s-5); }
}
/* ---------- Reviews / trust signals ---------- */
.reviews-head{ text-align:center; max-width:60ch; margin:0 auto var(--s-7); }
.reviews-head h2{ margin:.15em 0 0; }
.rating-summary{
  display:inline-flex; align-items:center; gap:var(--s-3); margin-top:var(--s-4);
  background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-stroke); border-radius:var(--r-sm); padding:.55em 1em;
}
.rating-summary .stars{ color:var(--gold); letter-spacing:.12em; font-size:1rem; }
.rating-summary span{ color:var(--text-2); font-size:.92rem; }
.rating-summary strong{ color:var(--text); font-family:var(--display); }

.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.review{
  position:relative; overflow:hidden;
  background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-stroke); border-radius:var(--r-md);
  padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3);
  transition:border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.review:hover{ border-color:var(--gold-line); transform:translateY(-3px); }
.review::before{
  content:"\201D"; position:absolute; top:-6px; right:16px;
  font-family:Georgia, serif; font-size:5rem; line-height:1; color:var(--gold); opacity:.12;
}
.review .stars{ color:var(--gold); letter-spacing:.15em; font-size:1.05rem; }
.review-text{ color:var(--text); font-size:.98rem; line-height:1.65; margin:0; flex:1; }
.review-author{ display:flex; flex-direction:column; margin-top:var(--s-2); }
.ra-name{ font-family:var(--display); font-weight:700; color:var(--text); font-size:.95rem; }
.ra-meta{ color:var(--text-3); font-size:.8rem; letter-spacing:.02em; }

@media(max-width:860px){ .reviews-grid{ grid-template-columns:1fr; } }

/* ---------- Why Us strip ---------- */
.whyus{ background:var(--black-pure); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* split: heading left, features 2×2 right */
.whyus-split{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--s-8); align-items:center; }
.whyus-head{ text-align:center; max-width:60ch; margin:0 auto var(--s-7); }
.whyus-head h2{ margin:.15em 0 var(--s-4); }
.whyus-head p{ margin:0; }

/* Home "Why Us" is a split — its head stays left in its own column */
.whyus-split .whyus-head{ text-align:left; max-width:38ch; margin:0; }

.whyus-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7) var(--s-6); }

/* feature: icon beside the text at every size */
.why{ display:grid; grid-template-columns:auto 1fr; column-gap:var(--s-4); align-items:start; }
.why h3{ color:var(--text); font-size:1.05rem; margin-bottom:.35em; }
.why p{ color:var(--text-2); font-size:.92rem; }

@media(max-width:900px){
  .whyus-split{ grid-template-columns:1fr; gap:var(--s-6); }
}
@media(max-width:520px){
  .whyus-grid{ grid-template-columns:1fr; gap:var(--s-5); }
}
/* ---------- Ceramic spotlight (split: media left, copy right) ---------- */
.ceramic-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center; }

.ceramic-media{ position:relative; z-index:0; }
.ceramic-media img{
  display:block; width:100%; height:auto; object-fit:cover;
  border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-md);
}
/* offset gold accent behind the image — mirrors About, leans left */
.ceramic-media::before{
  content:""; position:absolute; inset:0;
  transform:translate(-16px,16px);
  border:1px solid var(--gold-line); border-radius:var(--r-md); z-index:-1;
}

.ceramic-body h2{ margin:.15em 0 .5em; }
.ceramic-body > p{ margin-bottom:var(--s-5); }

.ceramic-points{ display:flex; flex-direction:column; gap:var(--s-4); margin-bottom:var(--s-6); }
.ceramic-points li{ display:grid; grid-template-columns:auto 1fr; column-gap:var(--s-4); align-items:center; }
.ceramic-points li > span:last-child{ color:var(--text-2); font-size:.96rem; }

.ceramic-price{
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  color:var(--text); margin-bottom:var(--s-5);
  display:flex; align-items:baseline; gap:.4em; flex-wrap:wrap;
}
.ceramic-price .cp-from{ color:var(--text-3); font-weight:600; font-size:.85em; }
.ceramic-price .gold-metal{ font-weight:900; font-size:1.5em; line-height:1; }

.ceramic-cta{ display:flex; gap:var(--s-4); flex-wrap:wrap; }

@media(max-width:860px){
  .ceramic-split{ grid-template-columns:1fr; gap:var(--s-6); }
  .ceramic-media{ order:-1; }              /* image on top on mobile */
  .ceramic-media::before{ display:none; }  /* drop the offset accent on small screens */
}
@media(max-width:560px){
  .ceramic-cta{ flex-direction:column; align-items:stretch; }
  .ceramic-cta .btn{ width:100%; justify-content:center; }
}
/* ---------- Pricing cards (valeting + service pages) ---------- */
.pricing-head{ text-align:center; max-width:60ch; margin:0 auto var(--s-7); }
.pricing-head h2{ margin:.15em 0 0; }
.pricing-head p{ margin:var(--s-3) auto 0; max-width:52ch; }

.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-bottom:var(--s-6); }
.pcard{
  display:flex; align-items:center; gap:var(--s-4);
  background:#0d0d0d; border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--s-5);
  transition:border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.pcard:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--sh-md); }
.pc-ico{ flex:0 0 auto; width:58px; height:58px; border:1px solid var(--gold-line); border-radius:var(--r-sm); display:grid; place-items:center; }
.pc-ico svg{ width:34px; height:34px; stroke:var(--gold); fill:none; stroke-width:1.4; }
.pc-bar{ width:1px; align-self:stretch; background:var(--border); margin:4px 0; }
.pc-info{ display:flex; flex-direction:column; }
.pc-amt{ font-family:var(--display); font-weight:900; font-size:2rem; line-height:1; }
.pc-lab{ font-family:var(--display); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text); margin-top:.3em; }
.pricing-actions{ display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap; }
.pricing-note{ text-align:center; color:var(--text-3); font-size:.82rem; margin:var(--s-5) auto 0; max-width:60ch; }

@media(max-width:760px){ .price-grid{ grid-template-columns:1fr; } }
@media(max-width:560px){
  .pricing-actions{ flex-direction:column; align-items:stretch; }
  .pricing-actions .btn{ width:100%; justify-content:center; }
}
/* ---------- Final CTA band ---------- */
.cta-band{ position:relative; background:var(--black-pure); border-top:1px solid var(--border); overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, rgba(212,175,55,.12), transparent 70%);
}
.cta-inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center;
  padding-top:var(--s-9); padding-bottom:var(--s-9); }
.cta-title{ margin:.15em 0 .4em; }
.cta-sub{ color:var(--text-2); margin:0 auto; max-width:48ch; }
.cta-actions{ display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap; margin-top:var(--s-6); }
.cta-faq{ color:var(--text-2); font-size:.92rem; margin-top:var(--s-5); }
.cta-faq a{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.84rem; color:var(--gold); white-space:nowrap; }
.cta-faq a:hover{ color:var(--gold-hover); }

.cta-trust{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s-2) var(--s-3); margin-top:var(--s-5);
  color:var(--text-2); font-size:.9rem;
}
.cta-trust .stars{ color:var(--gold); letter-spacing:.08em; }
.cta-trust strong{ color:var(--text); font-family:var(--display); }
.ct-sep{ color:var(--text-3); }
.cta-trust .ct-rating{
  display:inline-flex; align-items:center; gap:.5em;
  color:var(--text-2); border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cta-trust .ct-rating:hover{ color:var(--text); border-bottom-color:var(--gold-line); }
.cta-trust .ct-rating strong{ color:var(--text); font-family:var(--display); }

@media(max-width:560px){
  .cta-actions{ flex-direction:column; align-items:stretch; }
  .cta-actions .btn{ width:100%; justify-content:center; }
  .ct-sep{ display:none; }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--black-pure); border-top:1px solid var(--border); }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-6);
  padding:var(--s-8) var(--gutter);
}
.footer-brand .brand{ font-size:1.6rem; }
.footer-tag{ color:var(--text-2); font-size:.92rem; margin-top:var(--s-3); max-width:34ch; }
.footer-social{ display:flex; gap:var(--s-3); margin-top:var(--s-5); }
.footer-social a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--gold-line); border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease);
}
.footer-social a svg{ width:19px; height:19px; stroke:var(--gold); fill:none; stroke-width:1.7;
  transition:stroke var(--t-fast) var(--ease), fill var(--t-fast) var(--ease); }
.footer-social a svg.ico-solid{ fill:var(--gold); stroke:none; }
@media(hover:hover){
  .footer-social a:hover{ border-color:var(--gold); }
  .footer-social a:hover svg{ stroke:var(--gold-hover); }
  .footer-social a:hover svg.ico-solid{ fill:var(--gold-hover); }
}

.footer-h{
  font-family:var(--display); font-weight:700; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--gold); margin-bottom:var(--s-4);
}
.site-footer address{ font-style:normal; color:var(--text-2); font-size:.92rem; line-height:1.8; }
.footer-contact{ margin-top:var(--s-3); font-size:.92rem; }
.footer-contact a{ color:var(--text); }
.footer-contact a:hover{ color:var(--gold); }
.footer-hours li, .footer-links li{ font-size:.92rem; }
.footer-hours{ max-width:190px; }
.footer-hours li{ display:flex; justify-content:space-between; gap:var(--s-4); color:var(--text-2); padding:.2em 0; }
.footer-links li{ padding:.25em 0; }
.footer-links a{ color:var(--text-2); }
.footer-links a:hover{ color:var(--gold); }

.footer-bottom{ border-top:1px solid var(--border); }
.footer-bottom .wrap{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  padding:var(--s-4) var(--gutter); flex-wrap:wrap; }
.footer-bottom span{ color:var(--text-3); font-size:.82rem; }
.footer-bottom a{ font-family:var(--display); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); }

@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom .wrap{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Footer map band (full content width) ---------- */
.footer-map-band{ border-bottom:1px solid var(--border); padding:var(--s-7) 0; }
.footer-map-band .wrap::after{ content:""; display:block; clear:both; }
.footer-map{ display:block; width:100%; border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; line-height:0; }
.footer-map iframe{ display:block; width:100%; height:300px; border:0; filter:grayscale(.35) contrast(1.05) brightness(.9); }
.footer-map-link{ display:inline-block; margin-top:var(--s-3); font-family:var(--display); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; color:var(--gold); float:right; }
.footer-map-link:hover{ color:var(--gold-hover); }
@media(max-width:640px){ .footer-map iframe{ height:220px; } .footer-map-link{ float:none; } }

/* ---------- Page hero (image background, inner pages) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  min-height:340px; display:flex; align-items:center;
  background-size:cover; background-position:center; background-color:#0d0d0d;
  border-bottom:1px solid var(--border);
}
/* The copy column runs to about 62% of the viewport, so the horizontal scrim has
   to hold its density that far before it releases the photograph. */
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.72) 42%, rgba(0,0,0,.34) 72%, rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 45%, rgba(10,10,10,.75));
}
.page-hero .wrap{ position:relative; z-index:1; width:100%; text-align:left; padding-top:var(--s-7); padding-bottom:var(--s-7); }
/* Lean header — no image, for utility pages (Our Work, FAQ, Contact) */
.page-hero--lean{
  min-height:0;
  background-image:none !important;
  background-color:var(--black);
  border-bottom:1px solid var(--gold-line);
}
.page-hero--lean::before{ display:none; }
.page-hero--lean .wrap{ padding-top:var(--s-5); padding-bottom:var(--s-5); }
.page-hero--lean h1{ font-size:clamp(1.9rem,4vw,2.6rem); }
.page-hero--lean .page-hero-sub{ margin-top:var(--s-3); }
.page-hero--lean .crumbs{ margin-top:var(--s-4); }
.page-hero .eyebrow{ margin-bottom:var(--s-3); }
.page-hero h1{
  font-size:clamp(2.2rem,5.5vw,3.6rem); line-height:1.02; margin:0;
}

/* Hero headings sit over photography, so they carry their own contrast:
   a tight shadow for edge definition, a wide soft one for separation.
   drop-shadow rather than text-shadow, because chrome and gold text is
   painted with background-clip and has no fill colour to shadow. */
.page-hero h1 .chrome,
.page-hero h1 .gold-metal{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)) drop-shadow(0 4px 18px rgba(0,0,0,.85));
}

.page-hero .page-hero-sub{
  color:var(--text); font-size:clamp(1rem,2vw,1.15rem);
  max-width:54ch; margin:var(--s-4) 0 0;
  text-shadow:0 1px 2px rgba(0,0,0,.75), 0 2px 14px rgba(0,0,0,.65);
}

/* breadcrumb */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em; margin-top:var(--s-5);
  font-family:var(--display); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; }
.crumbs a{ color:var(--text-2); }
.crumbs a:hover{ color:var(--gold); }
.crumbs .sep{ color:var(--text-3); }
.crumbs .current{ color:var(--gold); }

/* Breadcrumbs over a photo hero need the same treatment. */
.page-hero .crumbs a,
.page-hero .crumbs .sep{ color:var(--text); }
.page-hero .crumbs{ text-shadow:0 1px 3px rgba(0,0,0,.85); }

@media(max-width:640px){
  .page-hero{ min-height:260px; }
  /* On a phone the copy spans the full width, so the desktop left-to-right
     scrim leaves the end of every line unprotected. Swap it for a vertical
     one: dark behind the heading, lighter through the middle where the car
     usually sits, and firmer again at the foot for the breadcrumb. */
  .page-hero::before{
    background:linear-gradient(180deg,
      rgba(0,0,0,.80) 0%,
      rgba(0,0,0,.56) 52%,
      rgba(0,0,0,.74) 100%);
  }
}

/* ---------- Reasons + process (About page) ---------- */
.reasons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-7) var(--s-6); }
@media(max-width:900px){ .reasons-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .reasons-grid{ grid-template-columns:1fr; } }

.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6); }
/* Steps become 2×2 when placed in a split (About: How it works) */
.whyus-split .steps-grid{ grid-template-columns:1fr 1fr; }
.step h3{ color:var(--text); font-size:1.05rem; margin-bottom:.3em; }
.step p{ color:var(--text-2); font-size:.92rem; }
@media(max-width:820px){ .steps-grid{ grid-template-columns:1fr 1fr; gap:var(--s-7) var(--s-6); } }
@media(max-width:480px){ .steps-grid{ grid-template-columns:1fr; } }

/* ---------- Film Tints page ---------- */
/* Film comparison cards */
.film-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
.film-card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-7); }
.film-card.featured{ border-color:var(--gold-line); }
.film-badge{ position:absolute; top:var(--s-5); right:var(--s-5);
  font-family:var(--display); font-weight:700; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--on-gold); background:var(--gold); padding:.4em .8em; border-radius:var(--r-pill); }
.film-card h3{ color:var(--text); font-size:1.35rem; }
.film-from{ font-family:var(--display); font-weight:900; font-size:1.8rem; margin:.2em 0 var(--s-4); }
.film-from small{ font-family:var(--body); font-weight:500; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); display:block; }
.film-feats li{ display:flex; gap:.6em; color:var(--text-2); padding:.4em 0; font-size:.95rem; }
.film-feats li::before{ content:"\2713"; color:var(--gold); font-weight:700; }
.film-card .btn{ margin-top:var(--s-5); }
@media(max-width:760px){ .film-grid{ grid-template-columns:1fr; } }
@media(max-width:560px){
  .film-card{ padding:var(--s-5); }              /* 48px → 24px, reclaims 48px of width */
  .film-card .btn{ white-space:normal; text-align:center; width:100%; justify-content:center; }
  /* badge drops into flow — no room to float it beside the heading */
  .film-badge{ position:static; display:inline-block; margin-bottom:var(--s-3); }
}

/* Tint shade / VLT swatches */
.shades{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-4); }
.shade{ border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--surface); }
.shade .pane{ position:relative; height:104px; background:linear-gradient(135deg,#8a8a8a,#3a3a3a); }
.shade .pane::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,var(--vlt,.5)); }
.shade .meta{ padding:.7em .6em; text-align:center; }
.shade .vlt{ font-family:var(--display); font-weight:900; color:var(--gold); font-size:1.15rem; line-height:1; }
.shade .nm{ color:var(--text-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; margin-top:.3em; }
@media(max-width:640px){ .shades{ grid-template-columns:repeat(2,1fr); } }

/* Legal note callout */
.legal-note{ display:flex; gap:var(--s-4); align-items:flex-start; margin-top:var(--s-6);
  background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-stroke); border-left:3px solid var(--gold); border-radius:var(--r-sm);
  padding:var(--s-5) var(--s-6); }
.legal-note svg{ width:28px; height:28px; stroke:var(--gold); fill:none; stroke-width:1.8; flex:0 0 auto; margin-top:2px; }
.legal-note h3{ color:var(--text); font-size:1.05rem; margin-bottom:.3em; }
.legal-note p{ color:var(--text-2); font-size:.92rem; margin:0; }


/* Pricing table */
.price-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-md); }
.price-table{ width:100%; border-collapse:collapse; min-width:520px; }
.price-table thead th{ background:var(--black-pure); color:var(--gold); font-family:var(--display); font-weight:700;
  text-align:left; padding:1em 1.1em; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
.price-table thead th.num{ text-align:right; }
/* Vehicle name is now <th scope="row">, so it needs the old td treatment back. */
.price-table td,
.price-table tbody th{ padding:.9em 1.1em; color:var(--text); border-top:1px solid var(--border); font-size:.95rem; }
.price-table tbody th{ font-family:var(--body); font-weight:400; text-align:left; }
.price-table td.price{ font-family:var(--display); font-weight:800; color:var(--text); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Column labels live in the markup; the thead covers this at desktop widths. */
.price-table .ph{ display:none; }
.price-table tbody tr:nth-child(odd){ background:var(--surface-2); }
@media(hover:hover){
  .price-table tbody tr:hover{ background:#242424; }
}

/* Mobile: one card per vehicle — no horizontal scroll */
@media(max-width:640px){
  .price-table-wrap{ overflow-x:visible; border:0; border-radius:0; }
  .price-table{ min-width:0; display:block; }
  .price-table thead{ display:none; }
  .price-table tbody{ display:grid; gap:var(--s-3); }
  .price-table tbody tr,
  .price-table tbody tr:nth-child(odd){
    display:grid; grid-template-columns:1fr 1fr;
    background:var(--surface);
    border:1px solid var(--border); border-radius:var(--r-md);
    overflow:hidden;
  }
  .price-table td,
  .price-table tbody th{ border-top:0; padding:var(--s-3) var(--s-4); }
  .price-table tbody th{
    grid-column:1 / -1;
    background:var(--black-pure);
    font-family:var(--display); font-weight:700; font-size:.95rem;
  }
  .price-table td.price{
    display:flex; flex-direction:column; gap:.15em;
    text-align:left; font-size:1.05rem;
  }
  .price-table .ph{
    display:block;
    font-family:var(--display); font-weight:700; font-size:.62rem;
    text-transform:uppercase; letter-spacing:.1em; color:var(--text-2);
  }
  .price-table td.price + td.price{ border-left:1px solid var(--gold-line); }
}

/* Extras — selectable add-on links */
.extras-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-3); }
.extra{
  display:flex; align-items:center; gap:var(--s-4);
  background:var(--surface); border:1px solid var(--gold-line); border-radius:var(--r-sm);
  padding:.9em 1.1em;
  transition:border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.extra:hover, .extra:focus-visible{ border-color:var(--gold); transform:translateY(-3px); }
.extra .x-name{ color:var(--text); font-size:.95rem; }
.extra .x-price{ font-family:var(--display); font-weight:800; color:var(--gold); white-space:nowrap; font-variant-numeric:tabular-nums; }
.extra .arr{ margin-left:auto; color:var(--text-3); transition:transform var(--t-mid) var(--ease), color var(--t-mid) var(--ease); }
.extra:hover .arr, .extra:focus-visible .arr{ color:var(--gold); transform:translateX(4px); }

/* Mobile: compact centred cards — name over price, arrow beside the price, not full-width */
@media(max-width:560px){
  .extras-grid{ grid-template-columns:1fr; max-width:300px; margin-inline:auto; }
  .extra{ flex-wrap:wrap; }
  .extra .x-name{ flex-basis:100%; }
  .extra .arr{ margin-left:0; }
}

/* ---------- Inline price line (service pages) ---------- */
.price-inline{ font-family:var(--display); font-weight:800; color:var(--text); font-size:1.25rem; margin:var(--s-3) 0 var(--s-5); }
.price-inline .amt{ color:var(--gold); }

/* ---------- Valeting: what's included ---------- */
.include-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
.include-col{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-7); }
.include-col h3{ color:var(--gold); font-size:1.15rem; margin-bottom:var(--s-4); }
.include-col ul li{ display:flex; gap:.6em; color:var(--text-2); padding:.5em 0; font-size:.95rem; border-bottom:1px solid var(--border); }
.include-col ul li:last-child{ border-bottom:none; }
.include-col ul li::before{ content:"\2713"; color:var(--gold); font-weight:700; }
@media(max-width:760px){ .include-grid{ grid-template-columns:1fr; } }

/* ---------- Gallery / Our Work ---------- */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:center; margin-bottom:var(--s-7); }
.filter-btn{
  font-family:var(--display); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-2); background:transparent; border:1px solid var(--border); border-radius:var(--r-pill);
  padding:.6em 1.2em; cursor:pointer;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.filter-btn:hover{ color:var(--gold); border-color:var(--gold-line); }
.filter-btn.active{ color:var(--on-gold); background:var(--gold); border-color:var(--gold); }

.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--s-4); }
.gallery-item{
  position:relative; width:100%; padding:0; cursor:pointer; aspect-ratio:4/3;
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:#0d0d0d;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.gallery-item:hover img{ transform:scale(1.06); }
.gi-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s-4); text-align:left;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.78));
  opacity:0; transition:opacity var(--t-mid) var(--ease);
}
.gallery-item:hover .gi-overlay,
.gallery-item:focus-visible .gi-overlay{ opacity:1; }
.gi-cat{ font-family:var(--display); font-weight:700; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); }
.gi-title{ font-family:var(--display); font-weight:700; color:#fff; font-size:.95rem; margin-top:.2em; }
.gallery-item.is-hidden{ display:none; }
.gallery-empty{ display:none; text-align:center; color:var(--text-3); padding:var(--s-7) 0; }
.gallery-more{ display:flex; justify-content:center; margin-top:var(--s-6); }
/* Lightbox — native <dialog>, so the UA stylesheet needs overriding */
.lightbox{
  position:fixed; inset:0; z-index:200;
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:var(--s-5); border:0; overflow:hidden;
  background:rgba(0,0,0,.92); backdrop-filter:blur(6px); color:var(--text);
  opacity:0;
  --t-lb:.2s;                   /* open and close */
  --lb-out:.13s;                /* image leaving, quick */
  --lb-in:.28s;                 /* image arriving, slower so it lands */
  /* allow-discrete defers display:none until the fade has finished, so the
     dialog can animate out instead of vanishing. */
  transition:opacity var(--t-lb) var(--ease),
             display var(--t-lb) var(--ease) allow-discrete,
             overlay var(--t-lb) var(--ease) allow-discrete;
}
.lightbox[open]{ opacity:1; }
.lightbox:not([open]){ display:none; }
/* Row: arrow, stage, arrow. The arrows are flex siblings rather than pinned to the
   viewport, so they sit against the image whatever its aspect ratio. */
.lightbox[open]{ display:flex; align-items:center; justify-content:center; gap:var(--s-4); }
.lb-stage{ display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
  min-width:0; max-width:1100px; }
.lightbox img{ max-width:100%; max-height:74vh; border:1px solid var(--border); border-radius:var(--r-md);
  transition:opacity var(--t-mid) var(--ease); }
.lightbox img{ max-width:100%; max-height:74vh; border:1px solid var(--border); border-radius:var(--r-md);
  transition:opacity var(--t-mid) var(--ease); }
.lb-cap{ max-width:100%; text-align:center; color:var(--text-2);
  font-family:var(--display); font-size:.9rem; letter-spacing:.04em; }
.lb-cap b{ color:var(--gold); font-weight:700; }
.lb-btn{ position:absolute; background:rgba(255,255,255,.06); border:1px solid var(--glass-stroke); color:var(--gold);
  width:48px; height:48px; border-radius:var(--r-sm); cursor:pointer; font-size:1.5rem; line-height:1; display:grid; place-items:center;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lb-btn:hover{ background:rgba(212,175,55,.15); color:var(--gold-hover); }
.lb-close{ top:var(--s-5); right:var(--s-5); }
.lb-prev, .lb-next{ position:static; transform:none; flex:0 0 auto; }
/* No arrows on phones: close and tap the next thumbnail instead. Focus returns to
   the thumbnail on close, so the grid position is not lost. */
@media(max-width:640px){
  .lb-prev, .lb-next{ display:none; }
  .lb-stage{ max-width:92vw; }
}

/* Lightbox motion. @starting-style supplies the value the entry transition starts
   from; without it an element coming out of display:none has nothing to animate. */
/* Lightbox motion. @starting-style supplies the value the entry transition starts
   from; without it an element coming out of display:none has nothing to animate. */
@starting-style{
  .lightbox[open]{ opacity:0; }
  .lightbox[open] img{ transform:scale(.96); }
}
.lightbox img{
  --dir:0;                                   /* 1 forward, -1 back, 0 on open */
  transform:scale(.96);
  transition:opacity var(--t-lb) var(--ease), transform var(--t-lb) var(--ease);
}
.lightbox[open] img{ transform:translateX(0) scale(1); }

/* Leaving: drift out in the direction of travel. Stops at .3, never black. */
.lightbox[open] img.is-leaving{
  opacity:.3;
  transform:translateX(calc(var(--dir) * -20px)) scale(.985);
  transition:opacity var(--lb-out) cubic-bezier(.4,0,1,1),
             transform var(--lb-out) cubic-bezier(.4,0,1,1);
}
/* Entering: jump to the far side with no transition, ready to be released. */
.lightbox[open] img.is-entering{
  opacity:.3;
  transform:translateX(calc(var(--dir) * 20px)) scale(.985);
  transition:none;
}
/* Settling: the release, slower than the exit so the arrival feels finished. */
.lightbox[open] img.is-settling{
  transition:opacity var(--lb-in) var(--ease), transform var(--lb-in) var(--ease);
}

/* ---------- FAQ accordion ---------- */
.faq-wrap{ max-width:840px; margin:0 auto; }
.faq-group{ margin-bottom:var(--s-8); }
.faq-group:last-child{ margin-bottom:0; }
.faq-group > h2{ font-size:1.5rem; margin:0 0 var(--s-5); }

.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:var(--s-3); }
.faq-item.open{ border-color:var(--gold-line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  background:none; border:0; cursor:pointer; text-align:left; padding:var(--s-5);
  font-family:var(--display); font-weight:700; font-size:1rem; color:var(--text);
  transition:color var(--t-fast) var(--ease);
}
.faq-q:hover, .faq-q:focus-visible, .faq-item.open .faq-q{ color:var(--gold); }
.faq-ico{ flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center;
  color:var(--gold); font-size:1.5rem; line-height:1; transition:transform var(--t-mid) var(--ease); }
.faq-item.open .faq-ico{ transform:rotate(45deg); }
.faq-a{
  max-height:0; overflow:hidden; visibility:hidden;
  transition:max-height var(--t-mid) var(--ease), visibility var(--t-mid);
}
.faq-item.open .faq-a{ visibility:visible; }
.faq-a-inner{ padding:0 var(--s-5) var(--s-5); color:var(--text-2); font-size:.95rem; line-height:1.7; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:var(--s-7); align-items:start; }
@media(max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }

/* Info cards */
.contact-cards{ display:flex; flex-direction:column; gap:var(--s-4); }
.contact-card{ display:flex; gap:var(--s-4); align-items:flex-start;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-5); }
.contact-card h3{ color:var(--text); font-size:.95rem; margin-bottom:.25em; }
.cc-body{ flex:1; }
.contact-card p{ color:var(--text-2); font-size:.95rem; }
.contact-card a{ color:var(--gold); font-size:.95rem; font-weight:600; }
@media(hover:hover){ .contact-card a:hover{ color:var(--gold-hover); } }
/* Whole-card link: the enquiry card is the primary action on this page. */
a.contact-card{ text-decoration:none; color:inherit; cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.cc-link{ color:var(--gold); font-size:.95rem; font-weight:600; }
@media(hover:hover){
  a.contact-card:hover{ border-color:var(--gold); background:var(--surface-2); }
  a.contact-card:hover .cc-link{ color:var(--gold-hover); }
}
.cc-hours{ width:100%; }
.cc-hours li{ display:flex; justify-content:space-between; gap:var(--s-4); color:var(--text-2); font-size:.9rem; padding:.15em 0; }
.cc-social{ display:flex; gap:var(--s-3); margin-top:.7em; }
.cc-social a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--gold-line); border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease);
}

.form-intro{ margin-bottom:var(--s-5); padding-bottom:var(--s-5); border-bottom:1px solid var(--border); }
.form-intro h2{ font-size:1.25rem; margin-bottom:.4em; }
.form-intro p{ color:var(--text-2); font-size:.95rem; }

.cc-social a svg{ width:19px; height:19px; stroke:var(--gold); fill:none; stroke-width:1.7; transition:stroke var(--t-fast) var(--ease); }
@media(hover:hover){
  .cc-social a:hover{ border-color:var(--gold); }
  .cc-social a:hover svg{ stroke:var(--gold-hover); }
}

/* Form */
.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-7); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:.5em; }
.field .req{ color:var(--gold); }
.input, .field textarea, .field select{
  width:100%; background:#101010; border:1px solid var(--border-input); border-radius:var(--r-xs);
  padding:.8em 1em; color:var(--text); font-family:var(--body); font-size:1rem;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; }
.field select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:2.4em;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 1em center;
}
.input::placeholder, .field textarea::placeholder{ color:var(--text-3); }
.input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--gold); box-shadow:var(--glow-gold); }
.field.error .input, .field.error textarea, .field.error select{ border-color:#7a3a44; }
.err-msg{ color:#cf9aa6; font-size:.78rem; margin-top:.35em; }
.form-actions{ margin-top:var(--s-5); display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; }
.form-note{ color:var(--text-3); font-size:.8rem; margin-top:var(--s-4); }
.honeypot{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Service checkbox group */
/* <fieldset> reset: strips the UA border and box so it lays out like a .field.
   min-width:0 is required, or the default min-width:min-content blows the grid out. */
.checks-field{ display:block; border:0; padding:0; margin:0; min-width:0; }
.checks-label{ font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.5em; display:block; padding:0; }
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }
.checks .check{
  display:flex; align-items:center; gap:var(--s-3); cursor:pointer;
  background:#101010; border:1px solid var(--border-input); border-radius:var(--r-xs);
  padding:.7em .9em;
  font-family:var(--body); font-weight:400; font-size:.95rem; letter-spacing:0;
  text-transform:none; color:var(--text); margin-bottom:0;
  transition:border-color var(--t-fast) var(--ease);
}
.check:hover{ border-color:var(--gold-line); }
.check:has(input:checked){ border-color:var(--gold-line); }
.check input{
  appearance:none; -webkit-appearance:none; margin:0; flex:0 0 auto; position:relative;
  width:18px; height:18px; background:#0a0a0a;
  border:1px solid var(--border-input); border-radius:var(--r-xs); cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.check input:checked{ background:var(--gold); border-color:var(--gold); }
.check input:checked::after{
  content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid var(--on-gold); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.check input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.field.error .checks .check{ border-color:#7a3a44; }
@media(max-width:520px){ .checks{ grid-template-columns:1fr; } }
/* Alerts */
.alert{ border-radius:var(--r-sm); padding:var(--s-4) var(--s-5); margin-bottom:var(--s-5); font-size:.95rem; }
.alert-success{ background:rgba(212,175,55,.10); border:1px solid var(--gold-line); color:var(--text); }
.alert-error{ background:rgba(122,58,68,.18); border:1px solid #7a3a44; color:#e3b9c2; }

@media(max-width:520px){
  .form-grid{ grid-template-columns:1fr; }
  .form-card{ padding:var(--s-5); }              /* 48px → 24px, gives fields 48px back */
  .form-actions{ margin-top:var(--s-4); }
  .form-actions .btn{ width:100%; justify-content:center; }
  .form-note{ text-align:center; }
}
@media(max-width:400px){
  .form-card{ padding:var(--s-5) var(--s-3); }   /* tighter sides only — card stays in the gutter */
}
@media(max-width:400px){ .btn{ white-space:normal; } }

/* Reviews — clickable rating badge + see-all link */
.rating-summary{ transition:border-color var(--t-mid) var(--ease); }
.rating-summary:hover{ border-color:var(--gold-line); }
.reviews-more{ text-align:center; margin-top:var(--s-6); }

/* Eyebrows: tighten tracking on small screens so long ones hold one line */
@media(max-width:560px){ .eyebrow{ letter-spacing:.2em; } }


/* ---------- Sticky contact dock (Showroom Black) ---------- */
.dock{
  position:fixed; right:var(--s-5); bottom:var(--s-5); z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
  pointer-events:none;                 /* empty column lets clicks through */
}
.dock-toggle, .dock-btn{ pointer-events:auto; }

/* channel stack — collapsed by default (hidden + non-focusable) */
.dock-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}
.dock-list li{
  opacity:0; transform:translateY(10px);
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

/* channel button — glass circle, gold-line border, gold icon */
.dock-btn{
  position:relative; display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%; color:var(--gold);
  background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--gold-line); box-shadow:var(--sh-sm);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.dock-btn svg{ width:22px; height:22px; }
.dock-btn:hover{ color:var(--gold-hover); border-color:var(--gold); background:rgba(212,175,55,.08); box-shadow:var(--glow-gold); transform:translateY(-2px); }

/* hover label (desktop pointers only) */
.dock-label{
  position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%) translateX(6px);
  white-space:nowrap; pointer-events:none; opacity:0;
  font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text); background:var(--black-pure);
  border:1px solid var(--gold-line); border-radius:var(--r-sm); padding:.5em .8em;
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
/* Bridges the 10px gap so the pointer can travel from button to label without the
   label vanishing on the way (1.4.13 Hoverable). */
.dock-label::after{ content:""; position:absolute; left:100%; top:0; width:10px; height:100%; }
@media (hover:hover) and (pointer:fine){
  .dock-btn:hover .dock-label, .dock-btn:focus-visible .dock-label{
    opacity:1; transform:translateY(-50%) translateX(0); pointer-events:auto;
  }
}

/* launcher — gold fill, tinted-window hover (mirrors .btn-primary) */
.dock-toggle{
  position:relative; display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--gold); color:var(--on-gold); border:1px solid var(--gold);
  cursor:pointer; box-shadow:var(--sh-md);
  transition:background var(--t-mid) var(--ease), color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.dock-toggle:hover{ background:var(--gold-deep); color:#fff; box-shadow:var(--glow-gold); }
.dock-toggle svg{ position:absolute; width:26px; height:26px; transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.dock-ico-close{ opacity:0; transform:rotate(-90deg) scale(.6); }

/* open state */
.dock.open .dock-list{ opacity:1; visibility:visible; transform:none; }
.dock.open .dock-list li{ opacity:1; transform:none; }
.dock.open .dock-list li:nth-child(4){ transition-delay:.04s; }
.dock.open .dock-list li:nth-child(3){ transition-delay:.08s; }
.dock.open .dock-list li:nth-child(2){ transition-delay:.12s; }
.dock.open .dock-list li:nth-child(1){ transition-delay:.16s; }
.dock.open .dock-ico-open{ opacity:0; transform:rotate(90deg) scale(.6); }
.dock.open .dock-ico-close{ opacity:1; transform:rotate(0) scale(1); }

@media(max-width:560px){
  .dock{ right:var(--s-4); bottom:var(--s-4); }
  .dock-toggle{ width:52px; height:52px; }
  .dock-btn{ width:46px; height:46px; }
}

/* ---------- Film comparison (Ceramic vs Non-Metalised) ---------- */
.cmp-head{ text-align:center; max-width:64ch; margin:0 auto var(--s-7); }
.cmp-head p{ margin:var(--s-3) auto 0; }

.cmp{
  max-width:880px; margin:0 auto;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); overflow:clip;
}
.cmp-row{ display:grid; grid-template-columns:1.5fr 1fr 1fr; align-items:stretch; }
.cmp-row + .cmp-row{ border-top:1px solid var(--border); }

.cmp-feature{
  padding:var(--s-4) var(--s-5); align-self:center;
  font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--text);
}
.cmp-feature small{ display:block; font-family:var(--body); font-weight:500; font-size:.76rem; color:var(--text-3); margin-top:.25em; letter-spacing:0; text-transform:none; }

.cmp-cell{
  padding:var(--s-4) var(--s-5); text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em;
}
.cmp-cell--hl{ background:rgba(212,175,55,.035); }
.cmp-row--head .cmp-cell--hl{ box-shadow:inset 0 2px 0 var(--gold); }

.cmp-plan{ font-family:var(--display); font-weight:900; font-size:1.2rem; }
.cmp-tag{
  font-family:var(--display); font-weight:700; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.1em;
  padding:.32em .75em; border-radius:var(--r-pill);
  background:var(--gold); color:var(--on-gold);
}
.cmp-tag--alt{ background:transparent; color:var(--gold); border:1px solid var(--gold-line); }

.meter{ display:inline-flex; gap:5px; }
.meter i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.12); }
.meter i.on{ background:var(--gold); }

.cmp-verdict{ font-family:var(--display); font-weight:700; font-size:.84rem; color:var(--text); display:inline-flex; align-items:center; gap:.4em; }
.cmp-verdict.muted{ color:var(--text-3); font-weight:600; }
.cmp-verdict .tick{ color:var(--gold); }

/* comparison: starting-price row */
.cmp-price{ font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--text-2); display:inline-flex; align-items:baseline; gap:.3em; }
.cmp-price .amt{ font-weight:900; font-size:1.5rem; color:var(--text); line-height:1; }
.cmp-cell--hl .cmp-price .amt{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }

.cmp-foot{ text-align:center; max-width:60ch; margin:var(--s-6) auto 0; }
.cmp-foot p{ margin:0 auto var(--s-5); color:var(--text-2); }
.cmp-foot strong{ color:var(--text); }

@media(max-width:640px){
  .cmp-row{ grid-template-columns:1fr 1fr; }
  .cmp-row .cmp-feature{
    grid-column:1 / -1; text-align:center;
    padding:var(--s-4) var(--s-5) var(--s-2);
  }
  .cmp-row--head .cmp-feature{ display:none; }
  .cmp-cell{ padding-top:var(--s-3); padding-bottom:var(--s-4); }

  /* plan names stay in view for the length of the table */
  .cmp-row--head{
    position:sticky; top:69px; z-index:2;
    background:var(--surface); box-shadow:0 1px 0 var(--border);
  }
  .cmp-row--head .cmp-cell{ padding-top:var(--s-4); }
  .cmp-row--head .cmp-plan{ font-size:1.2rem; }

  /* continuous gold spine marks the recommended column */
  .cmp-cell--hl{ border-left:1px solid var(--gold-line); }

  /* meters read as a filled scale, not loose dots */
  .meter{ gap:4px; }
  .meter i{ width:16px; height:5px; border-radius:1px; }
}

/* Shade picker — interactive car (Window Tinting #shades) */
.shade-picker{ display:grid; grid-template-columns:1.4fr .6fr; gap:var(--s-6); align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-6); }
.shade-picker .shade-stage img{ width:100%; height:auto; border-radius:var(--r-sm); display:block; }

.shade-picker-ctl .shade-legend{
  font-family:var(--display); font-weight:600; font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:.6em;
}

/* Off-page links land on the picker itself, clear of the sticky nav. */
#shade-picker{ scroll-margin-top:24px; }

/* Shade scale — segmented control on a recessed track */
.shade-scale{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  padding:4px;
  background:var(--black);
  border:1px solid var(--gold-line); border-radius:var(--r-md);
}
.shade-scale input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.shade-scale label{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; padding:.5em .4em;
  cursor:pointer; -webkit-user-select:none; user-select:none;
  font-family:var(--display); font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-2);
  background:transparent;
  border:1px solid transparent; border-radius:var(--r-sm);
  transition:background-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
@media(hover:hover){
  .shade-scale label:hover{ background:rgba(212,175,55,.07); color:var(--text); }
}
.shade-scale label:active{ background:rgba(212,175,55,.12); }
.shade-scale input:checked + label{ background:var(--gold); color:var(--on-gold); }
.shade-scale input:focus-visible + label{ outline:2px solid var(--gold); outline-offset:1px; }

.shade-picker-ctl .shade-name{
  font-family:var(--display); font-weight:700; font-size:.95rem;
  color:var(--text); margin-top:var(--s-4);
}
.shade-picker-ctl p{ font-size:.85rem; color:var(--text-3); margin-top:var(--s-3); }

@media(max-width:760px){
  .shade-picker{
    grid-template-columns:1fr;
    padding:var(--s-5);
    gap:var(--s-5);
    overflow:hidden;                 /* keeps the 4px corners clean */
  }

  /* stage breaks out of the card padding — full card width */
  .shade-picker .shade-stage{
    margin:calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0;
  }
  .shade-picker .shade-stage img{
    border-radius:0;
  }
}

/* ---------- Under-CTA text link (shade picker cross-links) ---------- */
.cta-under{ color:var(--text-2); font-size:.92rem; margin-top:var(--s-4); }
.cta-under a{ color:var(--gold); font-weight:600; border-bottom:1px solid var(--gold-line); }
.cta-under a:hover{ color:var(--gold-hover); border-bottom-color:var(--gold); }

/* ---------- Static icon frames ---------- */
/* Decoration, not controls. Deliberately no hover: on this site hover means the
   thing under the cursor does something. Size is the only thing that varies. */
.why-ico, .cp-ico, .cc-ico, .step-n{
  --ico:44px;
  width:var(--ico); height:var(--ico); flex:0 0 auto;
  border:1px solid var(--gold-line); border-radius:var(--r-sm);
  display:grid; place-items:center;
}
.why-ico{ --ico:54px; grid-row:span 2; }
.cp-ico { --ico:42px; }

.why-ico svg, .cp-ico svg, .cc-ico svg{
  width:calc(var(--ico) * .52); height:calc(var(--ico) * .52);
  stroke:var(--gold); fill:none; stroke-width:1.8;
}
.step-n{
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  color:var(--gold); margin-bottom:var(--s-3);
}


/* ---------- Skip link ---------- */
/* Off-screen until focused, then pinned above the sticky nav. Never display:none,
   which would take it out of the tab order and defeat the point. */
.skip-link{
  position:fixed; top:0; left:var(--s-5); z-index:300;
  transform:translateY(-150%);
  background:var(--gold); color:var(--on-gold);
  font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:12px 18px; border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:transform var(--t-fast) var(--ease);
}
.skip-link:focus-visible{ transform:translateY(0); outline-offset:-5px; }

/* ---------- Back to top ---------- */
/* Shares the static icon frame language, but this one is a control, so it hovers.
   Deliberately not in the .why-ico/.cp-ico/.cc-ico/.step-n group above. */
.to-top{
  display:inline-flex; align-items:center; gap:var(--s-3);
  text-decoration:none; transition:color var(--t-fast) var(--ease);
}
.tt-box{
  width:44px; height:44px; flex:0 0 auto;
  border:1px solid var(--gold-line); border-radius:var(--r-sm);
  display:grid; place-items:center;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.to-top svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; }
@media(hover:hover){
  .to-top:hover{ color:var(--gold-hover); }
  .to-top:hover .tt-box{ border-color:var(--gold); background:rgba(212,175,55,.08); }
}

/* ---------- Legal pages ---------- */
.legal-page{ max-width:82ch; }
.legal-page h2{ font-size:1.15rem; margin:var(--s-6) 0 var(--s-3); }
.legal-page h2:first-of-type{ margin-top:0; }
.legal-page p{ color:var(--text-2); margin-bottom:var(--s-4); }
.legal-page a{ color:var(--gold); }
.legal-updated{ font-size:.82rem; color:var(--text-3); margin-bottom:var(--s-6); }
.fb-privacy{ margin-left:var(--s-3); font-family:var(--body); font-weight:400; text-transform:none; letter-spacing:0; font-size:.82rem; }