/* ============================================================
   Auto Body & Frame — West Palm Beach, FL
   Direction: "BOOTH"

   One continuous dark ground for the whole site. Photographs
   dissolve into it instead of sitting inside bands. Amber is
   spent on one action per screen and nowhere else.

   THIS FILE IS THE CONTRACT. Pages use these classes.
   Pages do not define their own styling.
   ============================================================ */

/* --- Tokens ------------------------------------------------ */
:root {
  --ground:   #0e0f11;   /* booth shadow, the page ground */
  --raise:    #1a1b1e;   /* raised surface, form fields */
  --bone:     #f4f1ea;   /* booth wall / masking paper, all body copy */
  --mid:      #9a9a97;   /* captions and secondary text */
  --amber:    #f0a02a;   /* the masking tape in the hero photograph */
  --amber-2:  #c07d14;

  --line:     rgba(244, 241, 234, 0.14);
  --line-ink: rgba(14, 15, 17, 0.16);

  --display: "Archivo", "Arial Narrow", sans-serif;
  --body:    "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rivian's damped in-out. Site-wide default. */
  --ease: cubic-bezier(0.83, 0, 0.17, 1);
  --r: 3px;

  --pad-l: 7vw;
  --pad-r: 4.5vw;
  --measure: 58ch;
  --gap-section: clamp(4.5rem, 12vh, 9rem);
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--bone);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.15rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--amber); color: #0e0f11; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* The wet clear coat canvas lives behind everything */
#sheen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  pointer-events: none;
}

.skip {
  position: absolute;
  left: 1rem; top: -5rem;
  z-index: 200;
  background: var(--amber);
  color: #0e0f11;
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r);
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 1rem; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Type -------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* Display: Archivo pushed wide and light, set in caps. */
.display, h1, h2 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 300;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0;
  text-wrap: balance;
  margin-block-end: -0.16em;   /* optical trim on the descender-free caps */
  padding-block-end: 0.16em;
}

h1, .t-display { font-size: clamp(2.35rem, 6.4vw, 6rem); }
h2, .t-h2      { font-size: clamp(1.7rem, 3.1vw, 2.85rem); }

h3, .t-h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
  letter-spacing: -0.012em;
  line-height: 1.25;
  text-transform: none;
}

h4, .t-h4 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.008em;
}

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.measure { max-width: var(--measure); }

.lede {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  line-height: 1.45;
  max-width: 46ch;
}

.dim { color: var(--mid); }

/* Captions carry the second information layer. They replace every
   eyebrow label, chip and pill that used to be on this page. */
.cap {
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--mid);
  max-width: 52ch;
  margin: 0.85rem 0 0;
}

/* --- Layout ------------------------------------------------ */
.wrap {
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
  max-width: 1680px;
}

.section { padding-block: var(--gap-section); }
.section--flush { padding-block-start: 0; }   /* runs straight into the photo above it */
.section--tight { padding-block: clamp(3rem, 7vh, 5rem); }

.stack > * + * { margin-top: 1.6rem; }
.stack-sm > * + * { margin-top: 0.9rem; }
.stack-lg > * + * { margin-top: clamp(2rem, 4vw, 3.25rem); }

.cols {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 60em) {
  .cols--2   { grid-template-columns: 1fr 1fr; }
  .cols--3   { grid-template-columns: repeat(3, 1fr); }
  .cols--wide-left  { grid-template-columns: 1.35fr 1fr; }
  .cols--wide-right { grid-template-columns: 1fr 1.35fr; }
}
@media (min-width: 45em) and (max-width: 59.99em) {
  .cols--3 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Photographs ------------------------------------------- */
.photo {
  position: relative;
  overflow: hidden;
  background: #141518;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }

.photo--3x2  { aspect-ratio: 3 / 2; }
.photo--4x5  { aspect-ratio: 4 / 5; }
.photo--16x9 { aspect-ratio: 16 / 9; }
.photo--9x16 { aspect-ratio: 9 / 16; }
.photo--pano { aspect-ratio: 2500 / 700; }

/* One scrim, never ad-hoc rgba. Bottom weighted so bottom-anchored
   type always survives. */
.photo--scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to top, rgba(4, 4, 4, 0.66), rgba(54, 54, 54, 0.20));
}

/* Darkens the left so overlaid type always has a clean field to sit on,
   whatever the photograph is doing behind it. */
.photo--scrim-left::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to right,
    rgba(6, 6, 7, 0.86) 0%, rgba(6, 6, 7, 0.62) 30%, rgba(6, 6, 7, 0) 62%);
}
@media (max-width: 60em) {
  .photo--scrim-left::before {
    background-image: linear-gradient(to right, rgba(6, 6, 7, 0.72), rgba(6, 6, 7, 0.42));
  }
}

/* Dissolves the bottom of a photograph into the page ground, no seam. */
.photo--dissolve {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

/* The drift: a zoom that never completes, so it reads as breathing. */
.photo--drift img {
  transform: scale(1.0005);
  transition: transform 6s var(--ease);
}
.photo--drift:hover img { transform: scale(1.03); }

.figure { margin: 0; }

/* --- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--amber);
  color: #0e0f11;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover { background: var(--amber-2); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--line {
  background: transparent;
  border-color: var(--line);
  color: var(--bone);
}
.btn--line:hover { background: var(--bone); border-color: var(--bone); color: #0e0f11; }

.btn__arrow { transition: transform 0.35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* Phone set as display type, not as a button. */
.phone-lg {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 400;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  letter-spacing: 0;
  text-decoration: none;
  color: var(--bone);
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.phone-lg:hover { color: var(--amber); border-bottom-color: var(--amber); }

.tlink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.tlink:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* --- Masthead ---------------------------------------------- */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.masthead[data-scrolled="true"] {
  background: rgba(14, 15, 17, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.6rem;
}

.mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--bone);
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 500;
  text-transform: uppercase;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.mark span { color: var(--amber); }

.nav { display: none; }
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2.1rem);
  margin: 0; padding: 0;
  list-style: none;
}
.nav a {
  text-decoration: none;
  color: var(--bone);
  font-size: 0.96rem;
  font-weight: 500;
  opacity: 0.72;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: opacity 0.35s var(--ease), border-color 0.35s var(--ease);
  white-space: nowrap;
}
.nav a:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--amber); }

.masthead__end { display: flex; align-items: center; gap: 0.7rem; }
.masthead__tel { display: none; text-decoration: none; font-weight: 600; white-space: nowrap; }
.masthead__tel:hover { color: var(--amber); }
.masthead .btn { padding: 0.68rem 1.15rem; font-size: 0.92rem; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 11px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.burger i {
  display: block;
  height: 1.5px;
  background: var(--bone);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  display: none;
  background: rgba(14, 15, 17, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-block: 0.5rem 2rem;
}
.drawer[data-open="true"] { display: block; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li + li { border-top: 1px solid var(--line); }
.drawer a {
  display: block;
  padding: 0.95rem 0;
  text-decoration: none;
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 400;
  text-transform: uppercase;
  font-size: 1.45rem;
}
.drawer a[aria-current="page"] { color: var(--amber); }
.drawer__meta { margin-top: 1.5rem; color: var(--mid); font-size: 0.95rem; line-height: 1.7; }

@media (min-width: 62em) {
  .nav { display: block; }
  .burger { display: none; }
  .drawer { display: none !important; }
  .masthead__tel { display: inline-block; }
}

/* --- Sticky call bar (phones only) ------------------------- */
.callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(14, 15, 17, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.callbar a {
  padding: 1rem 0.75rem;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--bone);
}
.callbar a + a { background: var(--amber); color: #0e0f11; }
@media (min-width: 62em) { .callbar { display: none; } }
@media (max-width: 61.99em) { body { padding-bottom: 3.6rem; } }

/* --- Hero -------------------------------------------------- */
.hero { position: relative; }

.hero__media {
  position: relative;
  height: 84vh;
  min-height: 30rem;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero__copy {
  position: absolute;
  inset: auto 0 0 0;
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.hero__copy > * { max-width: min(52%, 46rem); }
@media (max-width: 60em) { .hero__copy > * { max-width: 100%; } }

.hero h1 { margin-bottom: 0; font-size: clamp(2.15rem, 4.7vw, 4.6rem); }
.hero__voice {
  margin-top: 1.5rem;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.4;
  color: var(--bone);
  max-width: 34ch;
}
.hero__tel { margin-top: 1.75rem; }

/* --- Section heads ----------------------------------------- */
.head { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.head p { margin-top: 1.25rem; }

/* --- The paint plate (signature) --------------------------- */
.plate {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.1rem;
}
.plate__chip {
  width: 3.1rem;
  height: 3.1rem;
  flex: none;
  border-radius: 2px;
  border: 1px solid rgba(244, 241, 234, 0.22);
  box-shadow: inset 0 -1.4rem 1.4rem -1.2rem rgba(0, 0, 0, 0.55);
}
.plate__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 105, "wght" 500;
  text-transform: uppercase;
  font-size: 0.98rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.plate__code { color: var(--amber); }
.plate__where {
  color: var(--mid);
  font-size: 0.9375rem;
  line-height: 1.4;
  margin-top: 0.3rem;
}

/* --- Plain fact lists (address, hours, specifics) ---------- */
.facts { margin: 0; display: grid; }
.facts > div {
  display: grid;
  gap: 0.15rem 2rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.facts > div:first-child { border-top: 1px solid var(--line); }
.facts dt { color: var(--mid); }
.facts dd { margin: 0; }
@media (min-width: 38em) {
  .facts > div { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; }
}

/* --- The one background break: the bone contact block ------ */
.invert {
  background: var(--bone);
  color: #0e0f11;
}
.invert h1, .invert h2, .invert h3, .invert h4 { color: #0e0f11; }
.invert .dim, .invert .cap, .invert .facts dt { color: #55575a; }
.invert .facts > div { border-color: var(--line-ink); }
.invert .tlink { border-bottom-color: var(--line-ink); }
.invert .tlink:hover { color: var(--amber-2); border-bottom-color: var(--amber-2); }
.invert .btn--line { border-color: var(--line-ink); color: #0e0f11; }
.invert .btn--line:hover { background: #0e0f11; border-color: #0e0f11; color: var(--bone); }
.invert .phone-lg { color: #0e0f11; }
.invert .phone-lg:hover { color: var(--amber-2); border-bottom-color: var(--amber-2); }

/* --- Forms ------------------------------------------------- */
.form { display: grid; gap: 1.4rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field .req { color: var(--amber); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font: inherit;
  color: var(--bone);
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.35s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239a9a97' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--amber);
}
.field ::placeholder { color: #6d6f73; }
.hint { font-size: 0.9rem; color: var(--mid); line-height: 1.4; }

.invert .field input, .invert .field select, .invert .field textarea {
  background: #fff; color: #0e0f11; border-color: var(--line-ink);
}
.invert .field ::placeholder { color: #8b8d90; }

.field-row { display: grid; gap: 1.4rem; }
@media (min-width: 40em) { .field-row { grid-template-columns: 1fr 1fr; } }

.status {
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--amber);
  background: rgba(240, 160, 42, 0.08);
  font-size: 0.98rem;
}
.status:empty { display: none; }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* --- Map --------------------------------------------------- */
.map {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--raise);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Light fill so a map that fails to load reads as an empty frame
   rather than a black hole in the middle of the bone block. */
.invert .map { border-color: var(--line-ink); background: #e4e2db; }

/* --- Interior page head ------------------------------------ */
.pagehead { position: relative; }
.pagehead__media { position: relative; height: 56vh; min-height: 22rem; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__copy { position: absolute; inset: auto 0 0 0; padding-bottom: clamp(2rem, 5vh, 3.5rem); }
.pagehead__copy > * { max-width: min(60%, 50rem); }
@media (max-width: 60em) { .pagehead__copy > * { max-width: 100%; } }

/* --- Footer ------------------------------------------------ */
.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vh, 4.5rem) 2rem; }
.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 55em) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
}
/* h3 so the footer does not skip a heading level after a page whose last
   main heading is an h2. Styled the same as h4 either way. */
.footer h3, .footer h4 {
  margin-bottom: 1rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.008em;
  text-transform: none;
  line-height: 1.25;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer a { text-decoration: none; color: var(--mid); }
.footer a:hover { color: var(--bone); }
.footer address { font-style: normal; color: var(--mid); line-height: 1.7; }
.footer__base {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  color: var(--mid);
  font-size: 0.9rem;
}

/* --- Reveal ------------------------------------------------
   Gated behind .js so that if the script never runs, every
   photograph is simply visible instead of invisible. */
.js .rev { opacity: 0; transform: translateY(14px); }
.js .rev.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; }
  .photo--drift img { transition: none; }
  .photo--drift:hover img { transform: scale(1.0005); }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Print ------------------------------------------------- */
@media print {
  #sheen, .masthead, .callbar, .drawer, .map { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .photo { break-inside: avoid; }
}