/* ==========================================================================
   All Details Valet — Houston, TX
   Static one-page site. No build step, no JS.
   ========================================================================== */

:root {
  --bg:        #1E1C18;  /* warm near-black */
  --text:      #FFFFFF;  /* primary  17.0:1 on --bg */
  --cream:     #D8D3C8;  /* secondary 11.5:1 on --bg */
  --muted:     #8C8880;  /* muted      4.8:1 on --bg — AA for normal text */
  --hairline:  #3A3833;
  --panel:     rgba(216, 211, 200, 0.035);

  --wrap: 1120px;
  --gutter: 1.25rem;
  --track: 0.18em;

  color-scheme: dark;
}

/* --------------------------------------------------------- reset / base */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Must exceed the sticky header, or anchor targets land behind it. The header
     has three sizes: logo + button only below 768px, plus a stacked nav row from
     768px, then a single row from 860px. Each value is checked against the
     measured header height at that width. */
  scroll-padding-top: 6rem;
}

@media (min-width: 768px) {
  html { scroll-padding-top: 10rem; }
}

@media (min-width: 860px) {
  html { scroll-padding-top: 6.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* The rotated decorative rules are clipped by .hero / .site-footer rather than
   by body — overflow on body can break `position: sticky` on the header. */

h1, h2, h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

p { margin: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a { color: inherit; }

object { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------- focus */

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--cream);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* --------------------------------------------------- shared type styles */

.label {
  margin: 0 0 1.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--cream);
}

.label--muted { color: var(--muted); }

h2 {
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  max-width: 18ch;
}

.h2--xl {
  font-size: clamp(2.125rem, 8vw, 3.75rem);
  font-weight: 500;
  max-width: 15ch;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
}

.lede {
  margin-top: 1.5rem;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--cream);
}

.lede--feature {
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  max-width: 62ch;
}

.rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9375rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--solid {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--bg);
}

.btn--solid:hover { background: var(--text); border-color: var(--text); }

.btn--ghost {
  background: transparent;
  border-color: var(--hairline);
  color: var(--text);
}

.btn--ghost:hover { border-color: var(--cream); }

.btn--sm {
  padding: 0.6875rem 1.125rem;
  font-size: 0.75rem;
  min-height: 44px; /* tap target */
}

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

@media (max-width: 400px) {
  .btn-row .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------- logo */

.logo {
  display: block;
  flex: none;
  text-decoration: none;
  color: var(--text);
}

.logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  pointer-events: none; /* keeps the wrapping <a> clickable */
}

/* Fallback lockup — rendered by the browser only when the PNG is missing. */
.logo-lockup {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 100%;
  font-size: var(--lockup-size, 1rem);
  line-height: 1;
  color: var(--cream);
}

.logo-mark {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.logo-words {
  display: flex;
  flex-direction: column;
  gap: 0.28em;
  padding-left: 0.5em;
  border-left: 1px solid var(--hairline);
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo--sm { width: 128px; height: 44px; --lockup-size: 0.875rem; } /* 44 = tap target */
.logo--md { width: 168px; height: 54px; --lockup-size: 1rem; }
.logo--lg { width: 190px; height: 62px; --lockup-size: 1.125rem; }

@media (min-width: 768px) {
  .logo--lg { width: 232px; height: 76px; --lockup-size: 1.375rem; }
}

/* ------------------------------------------------------ diagonal motif */

/* The cluster is a fixed-size clipping box. Rotated children are free to spill
   out of it, but `overflow: hidden` means that spill can never reach the page —
   the box's own width is the only thing the document layout ever sees. The box
   is sized to contain the ink at rest, so the clip is a guarantee, not a crop.

   It sits in normal flow as its own right-aligned row rather than being
   absolutely positioned over the content. Absolute placement can't be made safe
   below ~414px: the content column is the whole viewport there, so any corner
   the cluster is pinned to is a corner some text or the logo also occupies. A
   flow row cannot share a band with content at any width. */
.diagonals {
  display: block;
  width: 100px;
  height: 100px;
  margin-left: auto;          /* right-aligned within its row */
  margin-right: 1.25rem;
  /* Inset inside the clip box. The right inset matters: each bar pivots on its
     right end, so its corner swings ~2.5/√2 ≈ 1.8px past the pivot and would
     otherwise be shaved off by the clip. */
  padding: 4px 3px 0 0;
  overflow: hidden;
  pointer-events: none;
}

.diagonals-lines {
  display: block;
}

/* Each rule pivots on its own right end, and the right ends are aligned in a
   vertical stack (margin-left:auto) — that keeps the rules parallel. Letting
   them stay left-aligned makes the four segments collinear, which reads as one
   long dashed line rather than a cluster. */
.diagonals-lines span {
  display: block;
  width: var(--len);
  height: 5px;
  margin-left: auto;
  margin-bottom: 0.875rem;
  background: var(--cream);
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
}

.diagonals-lines span:nth-child(1) { --len: 84px; }
.diagonals-lines span:nth-child(2) { --len: 66px; }
.diagonals-lines span:nth-child(3) { --len: 48px; }
.diagonals-lines span:nth-child(4) { --len: 30px; }

@media (min-width: 768px) {
  .diagonals { width: 148px; height: 116px; margin-right: 2.5rem; }

  .diagonals-lines span:nth-child(1) { --len: 132px; }
  .diagonals-lines span:nth-child(2) { --len: 104px; }
  .diagonals-lines span:nth-child(3) { --len: 76px; }
  .diagonals-lines span:nth-child(4) { --len: 48px; }
}

/* ------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.875rem;
}

.header-inner .logo { margin-right: auto; }

.header-cta { order: 2; }

.site-nav {
  order: 3;
  flex-basis: 100%;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hairline);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* No row gap: the links' own vertical padding supplies the separation and
     keeps each row exactly one 44px tap target tall. */
  gap: 0 1.25rem;
}

.site-nav a {
  display: inline-block;
  padding: 0.8125rem 0; /* 19px line box + 26px = 45px tap target */
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  transition: color 0.18s ease;
}

.site-nav a:hover { color: var(--text); }

/* Below 768px the header is logo + quote button only. The anchor nav is dropped
   rather than collapsed into a menu: it cost ~110px of sticky header on a phone,
   and every section it pointed at is reachable by scrolling this one page. */
@media (max-width: 767px) {
  .site-nav { display: none; }
}

/* At 320px the logo and the quote button no longer fit one row at the default
   gap, and the button wrapping pushed the sticky header to 205px tall. */
@media (max-width: 479px) {
  .header-inner { gap: 0.75rem 0.75rem; }
  .header-cta { padding-inline: 0.875rem; }
}

@media (min-width: 860px) {
  .header-inner {
    flex-wrap: nowrap;
    gap: 2rem;
    padding-block: 1.125rem;
  }

  .site-nav {
    order: 0;
    flex-basis: auto;
    padding-top: 0;
    border-top: 0;
  }

  .site-nav ul { flex-wrap: nowrap; gap: 2rem; }

  .header-cta { order: 0; }
}

/* --------------------------------------------------------------- hero */

/* Hero photo. The overlay colour is the page background, so when
   assets/hero.jpg is absent the gradient composites against background-color
   and the hero renders as flat #1E1C18 — identical to having no photo. A CSS
   background also can't produce a broken-image icon or shift layout, which an
   <img> would. That is why the hero photo is a background and not an <img>.

   Held at 0.92 across the left third (where the headline and lede sit) instead
   of ramping immediately, so the text column keeps its contrast regardless of
   what the photo is doing behind it. Measured against a 220-value highlight —
   about the brightest a mid-tone photo goes — cream #D8D3C8 clears AA across
   the whole text column. See the contrast note in assets/README.txt. */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 12vw, 7.5rem) clamp(4rem, 13vw, 8.5rem);
  background-color: var(--bg);
  background-image:
    linear-gradient(
      90deg,
      rgba(30, 28, 24, 0.92) 0%,
      rgba(30, 28, 24, 0.92) 33%,
      rgba(30, 28, 24, 0.62) 100%
    ),
    url("../assets/hero.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* Bias the frame right so the photo's subject sits right-of-centre and the
     left third stays visually quiet under the headline. */
  background-position: 75% center;
}

/* Below 768px the text column spans the full width, so a left-to-right ramp
   would leave text near the right edge sitting on only 0.62 overlay (3.9:1
   against a bright photo — under AA). Flatten it to a near-uniform 0.90/0.86
   vertical wash instead: 8.0:1 in the same worst case. */
@media (max-width: 767px) {
  .hero {
    background-image:
      linear-gradient(
        180deg,
        rgba(30, 28, 24, 0.90) 0%,
        rgba(30, 28, 24, 0.86) 100%
      ),
      url("../assets/hero.jpg");
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* Readability panel over the hero photo.

   The default background is the 0.75 fallback, and the translucent 0.5 version
   is applied only inside @supports — so a browser without backdrop-filter keeps
   the more opaque panel rather than the one that assumes a blur it can't do. */
.hero-panel {
  background: rgba(30, 28, 24, 0.75);
  border: 1px solid rgba(216, 211, 200, 0.18);
  border-radius: 8px;
  padding: 1.75rem 1.5rem;
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .hero-panel {
    background: rgba(30, 28, 24, 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

@media (min-width: 768px) {
  .hero-panel { padding: 2.5rem 2.25rem; }
}

@media (min-width: 1024px) {
  /* Left-aligned and roughly half the container, not full bleed, so the right
     side of the photo stays visible. */
  .hero-panel {
    max-width: 55%;
    padding: 3rem 2.75rem;
  }
}

/* Capped lower than the old full-width hero. Inside a 55% panel the previous
   4.5rem/72px cap put "Professional" at ~475px against ~445px of usable content
   width at 1024, which overflowed the panel and the page with it. */
.hero h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 500;
  line-height: 1.04;
  max-width: 16ch;
}

.hero .lede { margin-top: 1.75rem; }

/* Clears the CTA row above it. At 320px the buttons go full-width, so this row
   sits directly under them and needs real separation, not just no overlap. */
.hero .diagonals { margin-top: clamp(2.5rem, 8vw, 4rem); }

/* ------------------------------------------------------------ sections */

.section {
  padding-block: clamp(3.5rem, 11vw, 7rem);
}

.section--tight {
  padding-block: clamp(2.5rem, 7vw, 4rem);
}

.section--feature {
  padding-block: clamp(4.5rem, 15vw, 9.5rem);
  background:
    linear-gradient(180deg, rgba(216, 211, 200, 0.03), rgba(216, 211, 200, 0));
}

/* ------------------------------------------------------------ services */

.service-list {
  margin-top: clamp(2.5rem, 7vw, 4rem);
  border-top: 1px solid var(--hairline);
}

.service-list li {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--hairline);
}

.service-list p {
  margin-top: 0.5rem;
  color: var(--cream);
  font-size: 0.9375rem;
  max-width: 52ch;
}

@media (min-width: 768px) {
  .service-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 2.5rem;
    align-items: baseline;
    padding-block: 2.25rem;
  }

  .service-list h3 { font-size: 1.375rem; }
  .service-list p { margin-top: 0; font-size: 1rem; }
}

/* ---------------------------------------------------------- for venues */

.venue-grid {
  display: grid;
  gap: 1px;
  margin-top: clamp(2.5rem, 7vw, 4rem);
  background: var(--hairline); /* 1px gap reads as a hairline grid */
  border: 1px solid var(--hairline);
}

.venue-grid li {
  padding: 1.75rem 1.5rem;
  background: var(--bg);
}

.venue-grid p {
  margin-top: 0.625rem;
  color: var(--cream);
  font-size: 0.9375rem;
}

@media (min-width: 720px) {
  .venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venue-grid li { padding: 2.25rem 2rem; }
  .venue-grid li:last-child { grid-column: 1 / -1; background: var(--panel); }
}

/* -------------------------------------------------------- how it works */

.steps {
  display: grid;
  gap: 1px;
  margin-top: clamp(2.5rem, 7vw, 4rem);
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}

.steps li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.75rem;
  background: var(--bg);
}

.step-num {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--track);
  color: var(--muted);
  padding-top: 0.2rem;
}

.steps p {
  margin-top: 0.5rem;
  color: var(--cream);
  font-size: 0.9375rem;
  max-width: 48ch;
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li { padding: 2.25rem 2rem 2.25rem 0; }
  .steps li:nth-child(even) { padding-left: 2rem; padding-right: 0; }
}

/* ------------------------------------------------------------- gallery */

/* Tiles are added to the HTML one at a time as photos arrive (see the comment
   above the gallery markup). Everything here keys off whether any tiles are
   actually present in the markup — which is something CSS *can* test, via
   :has() — rather than off whether the image files load, which it cannot.

   Both rules below fail closed: if :has() is unsupported the strip stays
   hidden and the empty state stays visible, which is the safe state. */

.gallery-strip {
  display: none;
  padding-block: clamp(3rem, 8vw, 5rem);
  /* Stands in for the <hr class="rule"> that would otherwise follow, so
     hiding the section removes its separator too. */
  border-bottom: 1px solid var(--hairline);
}

.gallery-strip:has(.gallery-grid li) { display: block; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gallery-tile {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--panel);
}

/* aspect-ratio + object-fit means the grid is immune to whatever dimensions
   the supplied photos actually have — a portrait phone shot and a wide DSLR
   frame both render as the same 4:3 tile. */
.gallery-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* An empty <figcaption> collapses, so a tile with no caption shows no bar.
   This needs the tag to be *completely* empty — <figcaption></figcaption>
   with no space between. Deleting the whole line works too. */
.gallery-caption {
  border-top: 1px solid var(--hairline);
  padding: 0.625rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
}

.gallery-caption:empty { display: none; }

.gallery-more {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  text-align: center;
}

/* Tiles on gallery.html are links to the full-size file. */
.gallery-tile a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.gallery-tile a:hover img { opacity: 0.88; }
.gallery-tile img { transition: opacity 0.18s ease; }

/* ------------------------------------------------------- gallery page */

.gallery-page { padding-block: clamp(3rem, 9vw, 5.5rem); }

.gallery-page h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 500;
  line-height: 1.04;
  max-width: 16ch;
}

.gallery-page .lede { margin-top: 1.25rem; }

.gallery-page .gallery-grid { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

.gallery-empty {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(2.5rem, 8vw, 4rem) 1.5rem;
  border: 1px dashed var(--hairline);
  border-radius: 4px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}

.gallery-grid:has(li) ~ .gallery-empty { display: none; }

.gallery-back {
  margin-top: clamp(3rem, 8vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

/* ------------------------------------------------------------ coverage */

.coverage-line {
  font-size: clamp(1.125rem, 3.5vw, 1.625rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 40ch;
}

/* ------------------------------------------------------------- contact */

.contact-grid {
  display: grid;
  gap: clamp(2.5rem, 8vw, 4rem);
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 4.5rem;
    align-items: start;
  }
}

.direct {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

.direct-line {
  font-size: 1.0625rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* inline-block + vertical padding gets these to a 44px tap target. The rule is
   drawn with text-decoration rather than a border so it stays tight to the
   text instead of dropping to the bottom of the padding box. */
.direct-line a {
  display: inline-block;
  padding-block: 0.625rem;
  min-height: 44px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.18s ease;
}

.direct-line a:hover { text-decoration-color: var(--cream); }

/* ---------------------------------------------------------------- form */

.quote-form {
  display: grid;
  gap: 1.25rem;
}

.field {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.field-row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 560px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}

.req {
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: none;
}

.field input,
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 0.875rem 1rem;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  font-family: inherit;
  font-size: 1rem; /* 16px — prevents iOS zoom-on-focus */
  font-weight: 300;
  line-height: 1.5;
  color: var(--text);
  transition: border-color 0.18s ease;
}

.field textarea {
  resize: vertical;
}

.field input:hover,
.field textarea:hover { border-color: var(--muted); }

.field input:focus,
.field textarea:focus { border-color: var(--cream); }

/* iOS renders date inputs as an inline-block that ignores width — pin it down
   and match the intrinsic height of the surrounding text inputs. */
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  max-width: 100%;
  min-height: 3.375rem;
}

.quote-form .btn { margin-top: 0.5rem; }

/* ---------------------------------------------------- thanks.html only */

/* Block flow, not flex: the decoration row is a sibling of .thanks-inner and
   must stack below it rather than become a second flex column. */
.thanks {
  overflow: hidden;
  min-height: 74vh;
  padding-block: clamp(3.5rem, 12vw, 7rem);
}

.thanks .logo--lg { margin-bottom: clamp(2.5rem, 8vw, 4rem); }

.thanks h1 {
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 500;
  line-height: 1.05;
  max-width: 16ch;
}

.thanks .lede { margin-top: 1.5rem; max-width: 46ch; }

.thanks .diagonals { margin-top: clamp(2.5rem, 8vw, 4rem); }

.thanks-contact {
  margin-top: 2.5rem;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.thanks-contact a {
  display: inline-block;
  padding-block: 0.625rem;
  min-height: 44px;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

.thanks-contact a:hover { color: var(--text); text-decoration-color: var(--cream); }

.thanks-footer { padding-block: 0 2.5rem; }
.thanks-footer .copyright { margin-top: 0; }

/* -------------------------------------------------------------- footer */

.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 10vw, 5.5rem) 2.5rem;
  border-top: 1px solid var(--hairline);
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 720px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

/* Clears the footer columns above it — at 768px the social list ends only ~8px
   above this row, which reads as a collision even though nothing intersects. */
.site-footer .diagonals { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

.footer-col .label { margin-bottom: 0.875rem; }

.social li { line-height: 1.4; }

.social a {
  display: inline-block;
  min-width: 44px;          /* "TikTok" is only 43px wide on its own */
  padding-block: 0.625rem;  /* 21px line box + 20px = 41px... see min-height */
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

.social a:hover {
  color: var(--text);
  text-decoration-color: var(--hairline);
}

.copyright {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 9vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem;
  color: var(--muted);
}