/* ==========================================================
   AUTOMOTIVE SOLUTIONS, LLC  --  Lilburn, GA
   Built by Tochelle Media Group

   DIRECTION: dark-luxury performance garage.
   Taken from the actual waiting room -- charcoal walls, marbled
   epoxy floor, red seating, performance-marque murals. The page
   is mostly black and mostly empty; the photography and one red
   do the work. Restraint is the premium signal, not decoration.

   Two typefaces, five colors, one angle. Nothing else.
   ========================================================== */

/* ---------- 1. TYPE ---------- */
/* Display: Chakra Petch. Chamfered, squared terminals that echo
   both the logo's angular geometry and the cut corners used
   throughout the page. Body: Archivo, neutral and highly legible,
   carrying every accent Spanish needs. Self-hosted, 107KB total. */
@font-face {
  font-family: "Chakra";
  src: url("/fonts/chakrapetch-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Chakra";
  src: url("/fonts/chakrapetch-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* A custom property must be registered before it can be animated.
   Without this the corner would jump instead of opening. Browsers
   that do not support @property simply get the jump -- no breakage. */
@property --cut {
  syntax: "<length>";
  inherits: false;
  initial-value: 13px;
}

/* ---------- 2. TOKENS ---------- */
:root {
  /* Five colors. Sampled from the logo file, checked against WCAG. */
  --void: #000000;        /* hero, footer, full-bleed bands           */
  --pitch: #0a0a0b;       /* mid-page drift -- 1.06:1 vs void, felt   */
  --bone: #f1efec;        /* 18.3:1. Warm white; pure #fff is harsh   */
  --smoke: #96928d;       /* 6.79:1. Secondary text                   */
  --brand: #c83328;       /* the logo red. Fills only -- 3.96:1       */
  --brand-lift: #ee5a48;  /* 6.19:1. Red TEXT on dark uses this       */

  --hairline: rgba(241, 239, 236, 0.11);
  --hairline-hi: rgba(241, 239, 236, 0.26);
  --field: #121213;

  /* One angle, one cut. Never introduce a second. */
  --cut: 13px;
  --slant: -4deg;

  --measure: 60ch;
  --gutter: 20px;
  --maxw: 1280px;

  --t-mega: clamp(3rem, 13vw, 8.5rem);
  --t-h1: clamp(2.5rem, 9vw, 5.25rem);
  --t-h2: clamp(1.875rem, 6vw, 3.25rem);
  --t-h3: clamp(1.125rem, 3.4vw, 1.5rem);
  --t-lead: clamp(1.0625rem, 2.3vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-fine: 0.8125rem;

  --space: clamp(4.5rem, 11vw, 9rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 3. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  font-variation-settings: "wdth" 100;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--bone), inset 0 0 0 6px var(--void);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 8px; z-index: 300;
  background: var(--bone); color: var(--void);
  padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { top: 8px; }

/* ---------- 4. TYPOGRAPHY ---------- */
h1, h2, h3, .display {
  font-family: "Chakra", "Archivo", sans-serif;
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.12; letter-spacing: 0.005em; }

.lead { font-size: var(--t-lead); line-height: 1.5; max-width: var(--measure); }
p { max-width: var(--measure); }
.muted { color: var(--smoke); }
.fine { font-size: var(--t-fine); color: var(--smoke); line-height: 1.55; }

/* The one place the page raises its voice. */
.sig {
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.13em;
  padding-bottom: 0.06em;
}

/* ---------- 5. LAYOUT + TONAL DRIFT ----------
   Sections step from true black at the hero to a barely-lifted
   black through the middle and back down at the footer. Each step
   is about 1.06:1 -- invisible on its own, felt across the page.
   It is what stops the lower half reading as stacked boxes. */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space); position: relative; }
.section--tight { padding-block: calc(var(--space) * 0.62); }
.t0 { background: var(--void); }
.t1 { background: #060607; }
.t2 { background: var(--pitch); }

.head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); max-width: 56rem; }
.head p { margin-top: 1.125rem; }
.stack > * + * { margin-top: 1.125rem; }

/* A hairline that carries the page angle. Used as a section marker. */
.rule {
  width: 56px; height: 3px; background: var(--brand);
  transform: skewX(var(--slant)); margin-bottom: 1.5rem;
}

.cut {
  clip-path: polygon(
    var(--cut) 0%, 100% 0%, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0% 100%, 0% var(--cut));
}

/* ---------- 6. BUTTONS ----------
   MICRO-INTERACTION: the cut corner opens a little on press, like a
   panel gap widening. It comes from the logo, not from a library. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  padding: 1.125rem 1.875rem;
  min-height: 58px;
  font-family: "Chakra", sans-serif;
  font-weight: 700; font-size: 1rem;
  letter-spacing: 0.035em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  border: 0; cursor: pointer;
  --cut: 13px;
  clip-path: polygon(
    var(--cut) 0%, 100% 0%, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0% 100%, 0% var(--cut));
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              --cut 0.18s var(--ease);
}
.btn:active { --cut: 20px; }
.btn--primary { background: var(--brand); color: var(--bone); }
.btn--primary:hover { background: #d93d31; }
/* An inset ring would be sliced off by the clip-path, so the outline
   is the element's own background and a pseudo paints the fill inside. */
.btn--ghost { position: relative; z-index: 0; background: var(--hairline-hi); color: var(--bone); }
.btn--ghost::before {
  content: ""; position: absolute; inset: 2px; z-index: -1;
  background: var(--void);
  clip-path: polygon(
    var(--cut) 0%, 100% 0%, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0% 100%, 0% var(--cut));
  transition: background-color 0.18s var(--ease);
}
.btn--ghost:hover { background: var(--bone); }
.btn--ghost:hover::before { background: #16161a; }
.btn--bone { background: var(--bone); color: var(--void); }
.btn--bone:hover { background: #ffffff; }
.btn--big { min-height: 70px; font-size: 1.0625rem; padding-inline: 2.25rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.btn-row .btn { flex: 1 1 16rem; }
@media (min-width: 40em) { .btn-row .btn { flex: 0 0 auto; } }

/* MICRO-INTERACTION: the link rule wipes in along the page angle. */
.tlink {
  display: inline-block; position: relative;
  font-family: "Chakra", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.035em;
  text-decoration: none; padding-bottom: 6px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 3px; background: var(--brand);
  transform: skewX(var(--slant)) scaleX(1); transform-origin: left;
  transition: transform 0.32s var(--ease), background-color 0.2s;
}
.tlink:hover::after { background: var(--brand-lift); transform: skewX(var(--slant)) scaleX(1.12); }

/* ---------- 7. TOP BAR + MASTHEAD ---------- */
.topbar { background: var(--void); border-bottom: 1px solid var(--hairline); font-size: var(--t-fine); }
.topbar__in { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 0.8rem; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--brand-lift); }
.topbar__facts { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; color: var(--smoke); line-height: 1.45; }
.topbar__facts strong { color: var(--bone); font-weight: 700; }
.topbar .btn { display: none; }
@media (min-width: 62em) {
  .topbar__in { flex-direction: row; align-items: center; justify-content: space-between; }
  .topbar .btn { display: inline-flex; min-height: 38px; padding: 0.45rem 1.1rem; font-size: var(--t-fine); --cut: 8px; }
}

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand img { width: 42px; height: 42px; flex: none; }
.brand__name {
  font-family: "Chakra", sans-serif; font-weight: 700;
  text-transform: uppercase; line-height: 1; font-size: 1.0625rem;
  letter-spacing: 0.01em;
}
.brand__name span {
  display: block; font-family: "Archivo", sans-serif;
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--smoke); margin-top: 3px;
}

.nav { display: none; }
.nav ul { display: flex; gap: 0.95rem; align-items: center; }
.nav a {
  display: block; position: relative; white-space: nowrap;
  text-decoration: none; font-family: "Chakra", sans-serif;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding-block: 0.5rem;
}
/* MICRO-INTERACTION: wipes in from the left on the page angle. */
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 2px;
  width: 100%; height: 2px; background: var(--brand);
  transform: skewX(var(--slant)) scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: skewX(var(--slant)) scaleX(1); }
.masthead__cta { display: none; white-space: nowrap; }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 11px;
  background: transparent; border: 1px solid var(--hairline-hi); cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--bone); transition: transform 0.22s var(--ease), opacity 0.16s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer { display: none; border-top: 1px solid var(--hairline); background: var(--void); }
.drawer[data-open="true"] { display: block; }
.drawer a {
  display: block; padding: 0.95rem 0; text-decoration: none;
  font-family: "Chakra", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--hairline);
}
.drawer a:hover { color: var(--brand-lift); }

@media (min-width: 78em) {
  .nav { display: block; }
  .masthead__cta { display: inline-flex; padding-inline: 1.25rem; }
  .burger, .drawer { display: none !important; }
}

/* ---------- 8. STICKY CALL BAR ----------
   MICRO-INTERACTION: gains a lift once you are past the hero, so it
   reads as attached to the page at rest and floating once in use. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--void); border-top: 1px solid var(--hairline-hi);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: box-shadow 0.4s var(--ease);
}
.callbar[data-lifted="true"] { box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.75); }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 64px; text-decoration: none;
  font-family: "Chakra", sans-serif; font-weight: 700;
  font-size: 0.9375rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.callbar a:first-child { background: var(--brand); color: var(--bone); }
.callbar a:last-child { background: var(--bone); color: var(--void); }
@media (min-width: 78em) { .callbar { display: none; } body { padding-bottom: 0; } }

/* ---------- 9. HERO ----------
   Two genuinely different layouts, not one squeezed.

   PHONE: the photo gets its own block at the top, cropped so the sign
   and Aldo are actually visible, and the words sit below it on solid
   black. Overlaying the headline buried the sign behind the buttons --
   the exact thing that made the photo worth using.

   DESKTOP: the landscape crop has room, so the type goes over the
   image and the section turns cinematic. */
.hero { position: relative; background: var(--void); }
.hero__media { position: relative; overflow: hidden; }
.hero__img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 55%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.15) 72%, var(--void) 100%);
}
.hero__in { position: relative; z-index: 2; padding-block: 2.25rem 3.25rem; }
.hero h1 { margin-bottom: 1.25rem; max-width: 16ch; }
.hero .lead { color: var(--bone); max-width: 46ch; }
.hero .btn-row { margin-top: 2rem; }
.hero__tags {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline-hi);
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem;
  font-size: var(--t-small); color: var(--smoke);
  font-family: "Chakra", sans-serif; text-transform: uppercase; letter-spacing: 0.07em;
}

@media (min-width: 64em) {
  .hero { min-height: 90svh; display: flex; align-items: flex-end; overflow: hidden; }
  .hero__media { position: absolute; inset: 0; }
  .hero__img { width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 62%; }
  /* The headline lands around 42% of the hero height, over the parked
     cars and the black house on the left of the exterior shot. The horizontal pass keeps the whole text column
     at 80%+ black so the type clears AA regardless of what is behind
     it; the vertical pass only shapes the top and the hand-off to the
     section below. */
  .hero__media::after {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.86) 32%, rgba(0,0,0,0.42) 58%, rgba(0,0,0,0.08) 82%, rgba(0,0,0,0) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 34%, rgba(0,0,0,0.72) 86%, var(--void) 100%);
  }
  .hero__in { width: 100%; padding-block: 5rem; }
}

/* ---------- 10. TRUST STRIP ---------- */
.trust { background: var(--bone); color: var(--void); transform: skewY(var(--slant)); margin-block: -1.5rem; }
.trust__in { transform: skewY(calc(var(--slant) * -1)); padding-block: clamp(3rem, 6vw, 4rem); }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
.trust__item h3 { font-size: clamp(1rem, 3.2vw, 1.3125rem); margin-bottom: 0.35rem; }
.trust__item p { font-size: var(--t-small); line-height: 1.4; color: #55524e; }
.trust__rule { width: 34px; height: 4px; background: var(--brand); transform: skewX(var(--slant)); margin-bottom: 0.9rem; }
@media (min-width: 56em) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 11. SERVICES -- feature + ruled list ----------
   Not six identical cards. One feature with the photo carrying it,
   and five hairline-ruled rows. The asymmetry is the hierarchy. */
.svc { display: grid; gap: 2.5rem; }
@media (min-width: 62em) { .svc { grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: start; } }

.svc__feature { position: relative; }
.svc__feature figure { position: relative; overflow: hidden; }
.svc__feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc__feature .body { padding-top: 1.5rem; }
.svc__feature h3 { font-size: clamp(1.375rem, 4vw, 1.875rem); margin-bottom: 0.6rem; }
.svc__feature p { color: var(--smoke); }

.svc__list li { border-top: 1px solid var(--hairline); padding-block: 1.375rem; }
.svc__list li:last-child { border-bottom: 1px solid var(--hairline); }
.svc__list h3 { margin-bottom: 0.3rem; }
.svc__list p { font-size: var(--t-small); color: var(--smoke); margin: 0; }

/* ---------- 12. FULL-BLEED PHOTO BANDS ----------
   These are what break the stack of sections. One hard red rule,
   one short statement, nothing else. */
.band { position: relative; min-height: 62svh; display: flex; align-items: flex-end; overflow: hidden; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.9) 100%);
}
.band__in { position: relative; z-index: 2; width: 100%; padding-block: 3rem; }
.band__in::before { content: ""; display: block; width: 64px; height: 4px; background: var(--brand); transform: skewX(var(--slant)); margin-bottom: 1.5rem; }
.band h2 { max-width: 18ch; }
.band p { margin-top: 1rem; color: var(--bone); max-width: 44ch; }
.band .btn-row { margin-top: 2rem; }
@media (min-width: 64em) { .band { min-height: 70svh; } .band__in { padding-block: 4.5rem; } }

/* ---------- 13. THE FLOW (a genuine sequence, so it is numbered) ---------- */
.flow { display: grid; gap: 0.5rem; margin-top: 2.5rem; counter-reset: step; }
.flow li {
  counter-increment: step; display: flex; align-items: center; gap: 1rem;
  padding: 1.125rem 1.25rem; background: rgba(241,239,236,0.035);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-family: "Chakra", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1;
}
.flow li::before {
  content: counter(step, decimal-leading-zero);
  flex: none; width: 36px; height: 34px; display: grid; place-items: center;
  background: var(--brand); color: var(--bone); font-size: 0.8125rem;
  clip-path: polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%);
}
.flow li:last-child { background: var(--bone); color: var(--void); box-shadow: none; }
.flow li:last-child::before { background: var(--void); color: var(--bone); }
@media (min-width: 64em) {
  .flow { grid-template-columns: repeat(5, 1fr); }
  .flow li { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.5rem; min-height: 158px; font-size: 1.0625rem; }
}

/* ---------- 14. SPLIT ---------- */
.split { display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 62em) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } .split--flip .split__media { order: 2; } }
.split__body > * + * { margin-top: 1.25rem; }
.split .btn-row { margin-top: 1.875rem; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split--solo { display: block; max-width: 66ch; }   /* photo slot removed for now */

.offer {
  display: inline-block; background: var(--brand); color: var(--bone);
  font-family: "Chakra", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 3.4vw, 1.375rem); line-height: 1.15;
  padding: 0.8rem 1.25rem; --cut: 10px;
}

/* ---------- 15. WHY US ---------- */
.why { display: grid; gap: 0; }
.why li { padding-block: 1.5rem; border-top: 1px solid var(--hairline); display: grid; gap: 0.35rem; }
.why li:last-child { border-bottom: 1px solid var(--hairline); }
.why p { font-size: var(--t-small); color: var(--smoke); margin: 0; }
@media (min-width: 56em) {
  .why { grid-template-columns: repeat(2, 1fr); column-gap: 3.5rem; }
  .why li:nth-last-child(2) { border-bottom: 1px solid var(--hairline); }
}

/* ---------- 15b. TEAM ----------
   Four real portraits, framed in CSS rather than cropped destructively,
   so the framing can be tuned without re-exporting anyone's face. */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; margin-top: 3rem; }
@media (min-width: 62em) { .team { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
@media (min-width: 62em) { .team--3 { grid-template-columns: repeat(3, 1fr); } }
.team figure { margin: 0; }
.team img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: 50% 22%;   /* keeps faces out of the top crop */
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.45s var(--ease);
}
.team figure:hover img, .team figure:focus-within img { filter: grayscale(0) contrast(1); }
.team figcaption { margin-top: 0.875rem; }
.team h3 { font-size: 1.0625rem; }
.team .role {
  display: block; margin-top: 0.25rem;
  font-family: "Chakra", sans-serif; font-size: var(--t-fine);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--brand-lift);
}
.team .note { display: block; margin-top: 0.35rem; font-size: var(--t-small); color: var(--smoke); }
@media (prefers-reduced-motion: reduce) { .team img { filter: none; } }

/* ---------- 16. AWARDS ---------- */
.awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 3rem; }
@media (min-width: 52em) { .awards { grid-template-columns: repeat(2, 1fr); max-width: 46rem; gap: 1.5rem; } }
.awards figure { margin: 0; }
.awards img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.awards figcaption {
  margin-top: 0.75rem; font-family: "Chakra", sans-serif; font-size: var(--t-fine);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--smoke);
}

/* ---------- 17. SPECIALS ---------- */
.special {
  background: rgba(241,239,236,0.035); box-shadow: inset 0 0 0 1px var(--hairline);
  display: flex; flex-direction: column; scroll-margin-top: 96px;
}
.special__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.special__body { padding: 1.875rem 1.625rem; display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.special__offer { color: var(--bone); margin: 0; }
.special__price {
  font-family: "Chakra", sans-serif; font-weight: 700;
  font-size: clamp(2.25rem, 7vw, 3rem); line-height: 1;
  color: var(--brand-lift); letter-spacing: -0.01em;
}
.special .btn { margin-top: auto; }
.special:target { box-shadow: inset 0 0 0 3px var(--brand); }

/* ---------- 18. REVIEWS ---------- */
.grid { display: grid; gap: 1rem; }
@media (min-width: 40em) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.review {
  background: rgba(241,239,236,0.035); box-shadow: inset 0 0 0 1px var(--hairline);
  padding: 1.875rem 1.625rem; display: flex; flex-direction: column; gap: 1rem;
}
.review blockquote { font-size: var(--t-body); line-height: 1.6; }
.review figcaption { margin-top: auto; font-size: var(--t-small); color: var(--smoke); }
.review figcaption strong { display: block; color: var(--bone); font-weight: 700; }
.stars { display: flex; gap: 3px; color: var(--brand-lift); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }

.card { background: rgba(241,239,236,0.035); box-shadow: inset 0 0 0 1px var(--hairline); padding: 1.875rem 1.625rem; }
.card h3 { margin-bottom: 0.6rem; }
.card p { font-size: var(--t-small); color: var(--smoke); margin: 0; }

/* ---------- 19. FAQ -- hand-rolled so it can animate ----------
   Native <details> snaps open. main.js drives the height instead so
   it eases. Without JS the panels are simply always open. */
.faq { border-top: 1px solid var(--hairline); max-width: 56rem; }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  width: 100%; padding: 1.375rem 0; background: none; border: 0; cursor: pointer;
  text-align: left; font-family: "Chakra", sans-serif; font-weight: 600;
  font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0.01em;
  transition: color 0.18s var(--ease);
}
.faq__q:hover { color: var(--brand-lift); }
.faq__q .chev {
  flex: none; width: 13px; height: 13px;
  border-right: 3px solid var(--brand); border-bottom: 3px solid var(--brand);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.3s var(--ease);
}
.faq__q[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-4px, -4px); }
.faq__a { overflow: hidden; }
.faq__a > div { padding-bottom: 1.5rem; }
.faq__a p { color: var(--smoke); font-size: var(--t-small); }
.js .faq__a[hidden] { display: block; height: 0; }
/* The transition lives here, not inline, so the height change and the
   transition rule are never applied in the same style flush. */
.js .faq__a { transition: height 0.3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .faq__a { transition: none; } }

/* ---------- 20. FORM ---------- */
.form { display: grid; gap: 1.125rem; max-width: 38rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--t-small); font-weight: 700; }
.field .req { color: var(--brand-lift); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 0.875rem 1rem;
  background: var(--field); color: var(--bone);
  border: 1px solid var(--hairline-hi); border-radius: 0;
  font: inherit; font-size: 1rem; /* 16px min, or iOS zooms on focus */
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { background: #17171a; }
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6a6762; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--bone); outline-offset: 1px; border-color: transparent;
}
.field--error input, .field--error select, .field--error textarea { border-color: var(--brand-lift); }
.err { font-size: var(--t-fine); color: var(--brand-lift); font-weight: 700; }
.err:empty { display: none; }
.form__note { font-size: var(--t-fine); color: var(--smoke); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { padding: 1.75rem; box-shadow: inset 0 0 0 1px var(--hairline-hi); background: rgba(241,239,236,0.035); }
.form-msg[hidden] { display: none; }
.form-msg h3 { margin-bottom: 0.625rem; }
.form-msg--ok { box-shadow: inset 0 0 0 2px var(--brand); }
.form-msg p { color: var(--smoke); font-size: var(--t-small); }
.form-msg a { color: var(--bone); font-weight: 700; }

/* ---------- 21. FINAL CTA + FOOTER ---------- */
.final { position: relative; overflow: hidden; }
.final img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.72) 50%, var(--void) 100%);
}
.final__in { position: relative; z-index: 2; display: grid; gap: 2.5rem; padding-block: var(--space); }
.final h2 { margin-bottom: 0.75rem; }
.final address { font-style: normal; color: var(--smoke); font-size: var(--t-small); line-height: 1.75; margin-top: 2rem; }
.final address a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--hairline-hi); }
@media (min-width: 62em) { .final__in { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } }
.map { border: 0; width: 100%; height: 340px; box-shadow: 0 0 0 1px var(--hairline-hi); }

.foot { border-top: 1px solid var(--hairline); padding-block: 3.5rem 2.5rem; font-size: var(--t-small); background: var(--void); }
.foot__grid { display: grid; gap: 2.25rem; }
@media (min-width: 52em) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 3.5rem; } }
.foot h3 { font-size: 0.75rem; letter-spacing: 0.16em; margin-bottom: 1.125rem; color: var(--smoke); }
.foot a { text-decoration: none; color: var(--smoke); transition: color 0.16s; }
.foot a:hover { color: var(--bone); }
.foot li + li { margin-top: 0.5rem; }
.foot__legal {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline);
  color: var(--smoke); font-size: var(--t-fine);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}

/* ---------- 22. PLACEHOLDERS (only where a photo is still missing) ---------- */
.ph {
  display: grid; place-items: center; padding: 2rem 1.25rem; min-height: 220px;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(200,51,40,0.13) 14px 16px), #0c0c0d;
  box-shadow: inset 0 0 0 1px var(--hairline-hi);
}
.ph__label {
  font-family: "Chakra", sans-serif; font-size: var(--t-fine); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; text-align: center;
  background: var(--void); padding: 0.5rem 0.875rem;
  box-shadow: inset 0 0 0 1px var(--hairline-hi); max-width: 90%;
}

/* ---------- 23. MOTION ----------
   Two devices only. A single orchestrated hero entrance, and a red
   wipe that uncovers a photo along the page angle -- used twice on
   the page, never on cards. Everything else is response to input. */
/* The cover only exists when scripting is on. If main.js never runs,
   data-shown is never set and an uninverted version would leave a red
   block sitting over the photo for good. */
.reveal { position: relative; }
.js .reveal::after {
  content: ""; position: absolute; inset: -2px; background: var(--brand);
  transform-origin: left; transform: skewX(var(--slant)) scaleX(1);
  transition: transform 0.72s var(--ease);
}
.js .reveal[data-shown="true"]::after { transform: skewX(var(--slant)) scaleX(0); transform-origin: right; }

.rise { opacity: 0; transform: translateY(14px); }
.hero__in.is-in .rise {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.hero__in.is-in .rise:nth-child(2) { transition-delay: 0.08s; }
.hero__in.is-in .rise:nth-child(3) { transition-delay: 0.16s; }
.hero__in.is-in .rise:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rise { opacity: 1; transform: none; }
  .js .reveal::after { display: none; }
}

/* ---------- 17. PROSE (policy pages) ---------- */
.prose { max-width: 66ch; }
.prose h2 { font-size: 1.25rem; margin-top: 2.25rem; }
.prose p { margin-top: 0.875rem; }
.prose a { color: var(--bone); }