/* ═══════════════════════════════════════════════════════════════════
   SUPREME PRODUCTION SERVICES — interim landing page
   ───────────────────────────────────────────────────────────────────
   Structure
     1.  Fonts
     2.  Tokens
     3.  Reset & base
     4.  Type scale
     5.  Layout primitives
     6.  Buttons & links
     7.  Header / nav
     8.  Hero
     9.  Certification ribbon
     10. Content sections
     11. Contact & form
     12. Footer
     13. Motion
     14. Responsive
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1. Fonts ────────────────────────────────────────────────────────
   Self-hosted, no external requests. Drop the .woff2 files into
   assets/fonts/ using exactly these names. If a file is missing the
   page degrades to the fallback stack rather than breaking — the
   `size-adjust` values keep the fallback close enough in metrics that
   layout does not jump when the real face arrives.                    */


@font-face {
  font-family: "Balboa Condensed";
  src: url("assets/fonts/Balboa_Condensed.ba2baa1e.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/Archivo.29f195a2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks — reduce layout shift while fonts load. */
@font-face {
  font-family: "Balboa Fallback";
  src: local("Arial Narrow Bold"), local("Haettenschweiler"), local("Impact"),
       local("Arial Narrow"), local("Helvetica Neue Condensed Bold");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Segoe UI"), local("Roboto");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}


/* ── 2. Tokens ─────────────────────────────────────────────────────── */

:root {
  /* Brand palette — locked to the playbook, Section III */
  --oil:        #1E1618;   /* deep brown-black, primary dark ground   */
  --dust:       #F5F2EE;   /* warm off-white, primary light ground    */
  --sand:       #DEBC8B;   /* PMS 3596 — accent, CTAs, rules          */
  --earth:      #A06647;   /* PMS 4265 — secondary accent             */
  --white:      #FFFFFF;

  /* Accessible text tints of the two accents.
     Earth at full strength is 4.19:1 on Dust — just under AA for small
     text — so small copy uses --earth-ink (the same hue, 14% darker,
     5.31:1). Pure Earth is kept for rules and dividers, where contrast
     ratios do not apply. Same idea for --sand-soft on dark grounds. */
  --earth-ink:  #8A583D;   /* 5.31:1 on Dust, 5.93:1 on White */
  --sand-soft:  rgb(222 188 139 / 0.72);   /* 5.68:1 on Oil */

  /* Derived surfaces — tints of the brand palette, nothing new */
  --oil-lift:   #271E21;   /* raised card on an oil ground            */
  --oil-deep:   #150F11;   /* footer, scrim base                      */
  --rule-dark:  rgb(222 188 139 / 0.20);
  --rule-light: rgb(30 22 24 / 0.14);
  --ink-soft:   rgb(30 22 24 / 0.68);
  --dust-soft:  rgb(245 242 238 / 0.72);
  --dust-faint: rgb(245 242 238 / 0.55);   /* 5.4:1 on Oil */

  /* Type roles — per the playbook typography key */
  --font-display: "Balboa Condensed", "Balboa Fallback", "Arial Narrow", sans-serif;
  --font-body:    "Archivo", "Archivo Fallback", system-ui, sans-serif;

  /* Spacing */
  --shell:     78rem;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.55s;
}


/* ── 3. Reset & base ───────────────────────────────────────────────── */

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* Sticky header height + breathing room for anchor targets. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--dust);
  color: var(--oil);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

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

address { font-style: normal; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.5rem;
  background: var(--sand);
  color: var(--oil);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }


/* ── 4. Type scale ─────────────────────────────────────────────────────
   NOTE: every heading class carries an explicit font-family. Setting it
   only on the display class silently drops the brand face on the rest. */

.h-display,
.h-section,
.h-section2,
.h-sub,
.h-card,
.footer-head {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(2.75rem, 6.8vw, 5.75rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
}

.h-section {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  max-width: 18ch;
}

.h-section2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  max-width: 36ch;
}

.h-sub  { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.h-card { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }

/* Eyebrow — Archivo Medium, all caps, wide tracking */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--earth-ink);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  flex: none;
}
.eyebrow--sand { color: var(--sand); }

.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.6;
  max-width: 52ch;
  color: var(--ink-soft);
}

.body { max-width: 62ch; }
.body + .body { margin-top: 1rem; }

/* Emphasis inside the hero headline — the one colour accent in the type */
.h-display em {
  font-style: normal;
  color: var(--sand);
}


/* ── 5. Layout primitives ──────────────────────────────────────────── */

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

.section { padding-block: var(--section-y); }

.section--dust { background: var(--dust); color: var(--oil); }

.section--oil  { background: var(--oil);  color: var(--dust); }
.section--oil .lead { color: var(--dust-soft); }
.section--oil .body { color: var(--dust-soft); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .lead { margin-top: 1.25rem; }


/* ── 6. Buttons & links ────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--sand);
  --btn-fg: var(--oil);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--sand:hover  { --btn-bg: var(--white); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--dust);
  border-color: rgb(245 242 238 / 0.38);
}
.btn--ghost:hover { --btn-bg: rgb(245 242 238 / 0.10); border-color: var(--sand); --btn-fg: var(--sand); }

.btn--lg    { padding: 1.0625rem 2.25rem; font-size: 0.875rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-light);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap 0.22s var(--ease), border-color 0.22s var(--ease);
}
.link-arrow:hover { gap: 0.875rem; border-color: var(--earth-ink); }


/* ── 7. Header / nav ───────────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: transparent;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgb(21 15 17 / 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--rule-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 5.25rem;
  transition: min-height 0.3s var(--ease);
}
.site-header.is-stuck .site-header__inner { min-height: 4.25rem; }

.site-header__logo {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}
.site-header__logo img {
  width: auto;
  height: clamp(2.5rem, 4.4vw, 3.25rem);
  transition: height 0.3s var(--ease);
}
.site-header.is-stuck .site-header__logo img { height: clamp(2.15rem, 3.4vw, 2.6rem); }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.site-nav a {
  color: var(--dust);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-nav a:hover { color: var(--sand); border-bottom-color: var(--sand); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: none;
}

/* One call action in the header. Shows the number on desktop, where
   people read it off the screen and dial elsewhere; becomes a compact
   tap-to-call button on phones, where the number itself is noise. */
.phone-cta {
  padding: 0.75rem 1.375rem;
  white-space: nowrap;
}
.phone-cta__label { display: none; }
.phone-cta__num { letter-spacing: 0.04em; }

.nav-toggle {
  display: none;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.75rem 0.5rem;
  background: none;
  border: 1px solid var(--rule-dark);
  border-radius: 2px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--dust);
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.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); }


/* ── 8. Hero ───────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* Capped deliberately. The source frames top out at 1344px, so a
     taller hero would force the browser to upscale the photograph and
     soften it. At 44rem the crop is used at roughly 1:1. */
  min-height: min(88svh, 44rem);
  padding-block: 8rem clamp(2.5rem, 6vw, 4.5rem);
  background: var(--oil-deep);
  color: var(--dust);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 44%;
}

/* Two-part scrim: a directional wash for legibility on the left, and a
   base gradient so the headline never fights the yard behind it. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgb(21 15 17 / 0.94) 0%, rgb(21 15 17 / 0.80) 34%,
                    rgb(21 15 17 / 0.34) 62%, rgb(21 15 17 / 0.18) 100%),
    linear-gradient(to top, rgb(21 15 17 / 0.86) 0%, rgb(21 15 17 / 0) 46%);
}

.hero__inner { position: relative; width: 100%; }

.hero__title { max-width: 16ch; margin-bottom: 1.75rem; }

.hero__lead {
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  line-height: 1.6;
  color: var(--dust-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.25rem;
}

/* Safe. Accurate. Efficient. — the tagline lockup */
.standard-lockup {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.6vw, 2.25rem);
  margin-top: clamp(2rem, 3.6vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.9vw, 1.625rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sand);
}
.standard-lockup--sm {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  font-size: 1rem;
  gap: 1rem;
}


/* ── 9. Certification ribbon (signature element) ───────────────────────
   Reads like the stencilled markings stamped on the iron itself, and it
   sits directly under the hero because procurement screens the vendor
   before the work is ever scoped. Pauses on hover; becomes a static
   wrapped list when motion is reduced.                                */

.ribbon {
  background: var(--oil);
  border-block: 1px solid var(--rule-dark);
  padding-block: 1.125rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ribbon__track {
  display: flex;
  width: max-content;
  animation: ribbon-scroll 64s linear infinite;
}
.ribbon:hover .ribbon__track,
.ribbon:focus-within .ribbon__track { animation-play-state: paused; }

.ribbon__list { display: flex; align-items: center; }
.ribbon__list li {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 3.4vw, 3rem);
  padding-inline: clamp(0.875rem, 1.7vw, 1.5rem);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--sand);
  white-space: nowrap;
}
.ribbon__list li::after {
  content: "";
  width: 4px; height: 4px;
  background: var(--earth);
  transform: rotate(45deg);
  flex: none;
}

@keyframes ribbon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ── 10. Content sections ──────────────────────────────────────────── */

/* Split: copy alongside a portrait image */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.split__media figcaption {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth-ink);
}
/* Portrait photo. In the stacked layout it must be capped, or on a tablet
   it fills the content width and stands taller than the viewport — and the
   840w source gets upscaled ~1.8x in the process. */
.split__media {
  max-width: 28rem;
  margin-inline: auto;
}
.split__media img { width: 100%; }

.conviction {
  margin-block: 2rem;
  padding-left: clamp(1.25rem, 2.4vw, 2rem);
  border-left: 3px solid var(--sand);
}
.conviction p {
  font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
  line-height: 1.5;
  font-weight: 500;
  max-width: 46ch;
}
.conviction cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--earth-ink);
}

/* Services */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
}
.service {
  background: var(--dust);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  transition: background 0.28s var(--ease);
}
.service:hover { background: var(--white); }
.service .h-card { color: var(--oil); }
.service .body {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.service__meta {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-light);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--earth-ink);
  line-height: 1.7;
}

/* Obstacle / response */
.answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.75rem, 3.4vw, 3rem);
}
.answer { border-top: 2px solid var(--sand); padding-top: 1.5rem; }
.answer__obstacle {
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--dust-faint);
  margin-bottom: 1.125rem;
  max-width: 30ch;
}
.answer .h-card { color: var(--dust); margin-bottom: 0.875rem; }
.answer .body { font-size: 0.9375rem; }



/* ── 10b. Photographic section ground ───────────────────────────────
   A section whose background is a photograph rather than flat colour.
   The layering, bottom to top:

     section background   Oil, so the band is dark even before the image
     .section__media      the photograph at 34% opacity
     ::after              a vertical scrim, heaviest where the section
                          head sits and lightest behind the cards
     content              cards, which carry their own dark panel

   The photograph averages luminance 136 with blown highlights at 255,
   so it cannot sit under text unmanaged. Composited as above, the worst
   possible pixel behind body copy resolves to about #4E4645 — Dust text
   on that measures roughly 12:1. Verified by sampling rendered pixels,
   not estimated.                                                      */

.section--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Hairlines mark the band as deliberate, since the sections either
     side of it are also Oil. */
  border-block: 1px solid var(--rule-dark);
}

.section__media { position: absolute; inset: 0; z-index: -2; }
.section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  opacity: 0.34;
}

.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(30 22 24 / 0.74) 0%,
    rgb(30 22 24 / 0.40) 34%,
    rgb(30 22 24 / 0.40) 66%,
    rgb(30 22 24 / 0.62) 100%
  );
}

/* Cards become dark glass so the iron reads between and behind them. */
.section--photo .services {
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  background: transparent;
  border: 0;
}

.section--photo .service {
  background: rgb(39 30 33 / 0.82);
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease);
}
.section--photo .service:hover {
  background: rgb(39 30 33 / 0.92);
  border-color: rgb(222 188 139 / 0.42);
}

.section--photo .service .h-card    { color: var(--dust); }
.section--photo .service .body      { color: var(--dust-soft); }
.section--photo .service__meta {
  color: var(--sand-soft);
  border-top-color: var(--rule-dark);
}

@supports (backdrop-filter: blur(2px)) {
  .section--photo .service { backdrop-filter: saturate(115%); }
}


/* ── 11. Contact ────────────────────────────────────────────── */

.contact__inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

/* Yard photograph beside the closing CTA. The source frame is near-square
   (1.03), and the SUPREME building sign runs to 98.7% of its width, so no
   fixed crop can hold both the sign and the crew member at the left edge.
   object-fit: cover lets the panel re-crop per breakpoint instead, and
   object-position biases right to protect the sign. */
.contact__media {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 40rem;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
}
.contact__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.contact__inner .eyebrow { justify-content: center; }
.contact__inner .h-section { max-width: 20ch; margin-inline: auto; }
.contact__inner .lead { margin-top: 1.25rem; margin-inline: auto; }

/* The call block is the page's single most important control, so it is
   given more weight than any other button: larger target, and the number
   set in the display face beside it for anyone dialling from a desk. */
.call-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.btn--xl {
  padding: 1.1875rem 2.75rem;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
}

.call-block__num {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  color: var(--sand);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.call-block__num:hover { color: var(--white); border-bottom-color: var(--sand); }

.call-block__alt {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--dust-faint);
}
.call-block__alt a {
  display: inline-block;
  padding: 0.6875rem 0.5rem;
  margin: -0.6875rem -0.5rem;
  color: var(--sand);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--rule-dark);
}
.call-block__alt a:hover { color: var(--white); box-shadow: inset 0 -1px 0 var(--sand); }

/* Connect → Align → Execute: a real three-step sequence, so the numbers
   carry meaning rather than decoration. */
.plan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: 1.25rem;
  border-block: 1px solid var(--rule-dark);
}
.plan li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dust);
}
.plan__n {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--sand);
}

.contact__details {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 2rem;
  text-align: left;
}
.contact__details li { display: grid; gap: 0.3125rem; }
.contact__details a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--sand);
  text-decoration: none;
}
.contact__details a:hover { color: var(--white); text-decoration: underline; }
.contact__details p,
.contact__details address { color: var(--dust-soft); font-size: 0.9375rem; }
.contact__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--sand-soft);
}


/* ── 12. Footer ────────────────────────────────────────────────────── */

.site-footer {
  background: var(--oil-deep);
  color: var(--dust);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.site-footer__brand img { width: auto; height: 4.5rem; }
.site-footer__brand .standard-lockup { max-width: 20rem; }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.75rem, 3.4vw, 3rem);
}

.footer-head {
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  color: var(--sand);
  margin-bottom: 1rem;
}
.site-footer__cols ul { display: grid; gap: 0.25rem; }
.site-footer__cols li,
.site-footer__cols address { font-size: 0.875rem; color: var(--dust-faint); line-height: 1.55; }
.site-footer__cols a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.site-footer__cols li:has(> address) { padding-block: 0.375rem; }
.site-footer__cols a:hover { color: var(--sand); }

.social a { gap: 0.5rem; }

.site-footer__base a {
  display: inline-block;
  padding: 0.6875rem 0.5rem;
  margin: -0.6875rem -0.5rem;
  color: var(--sand);
  text-decoration: none;
}
.site-footer__base a:hover { color: var(--white); text-decoration: underline; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.75rem;
  color: rgb(245 242 238 / 0.55);
}


/* ── 13. Motion ────────────────────────────────────────────────────── */

/* Only hide content once script.js has confirmed it can reveal it again.
   Without JS the `.js-reveal` class is never added and everything is
   visible from the start. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* Staggered hero entrance — one orchestrated moment rather than
   scattered effects elsewhere. */
.js-reveal .hero .reveal { transition-delay: calc(var(--i, 0) * 90ms); }

@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;
  }

  .js-reveal .reveal { opacity: 1; transform: none; }

  /* Marquee becomes a static, wrapped list. */
  .ribbon { -webkit-mask-image: none; mask-image: none; }
  .ribbon__track { width: 100%; animation: none; }
  .ribbon__list { flex-wrap: wrap; justify-content: center; row-gap: 0.5rem; }
  .ribbon__list li[data-clone] { display: none; }
}


/* ── 14. Responsive ────────────────────────────────────────────────── */

@media (min-width: 56rem) {
  .split { grid-template-columns: 1.15fr 0.85fr; }
  /* Column is already narrow here; release the stacked-layout cap. */
  .split__media { max-width: none; margin-inline: 0; }

  /* Contact becomes copy-left / photo-right. The photo bleeds past the
     shell gutter to the viewport edge and past the section padding to the
     band edges, so it reads as a panel rather than a pasted-on thumbnail. */
  .contact { overflow: hidden; }
  .contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
  .contact__media {
    margin-top: 0;
    margin-inline: 0;
    max-width: none;
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 34rem;
    margin-block: calc(var(--section-y) * -1);
    margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--shell)) / 2)));
  }
  /* The panel is much taller than the near-square source, so cover takes a
     narrow vertical slice. Anchored right, the building sign stays whole at
     every width; centred, it was being clipped by up to 520px. The trade is
     the crew member at the far left, who cannot co-exist with the sign in a
     column this narrow. */
  .contact__media img { object-position: 100% 50%; }

  /* The stacked layout centres this block; in two columns it has a left edge
     to sit against, so the centring is released. */
  .contact__inner { max-width: 34rem; margin-inline: 0; text-align: left; }
  .contact__inner .eyebrow { justify-content: flex-start; }
  .contact__inner .h-section,
  .contact__inner .lead { margin-inline: 0; }
  .call-block,
  .plan { justify-content: flex-start; }
  .site-footer__inner { grid-template-columns: 0.8fr 1.2fr; }
}

@media (min-width: 40rem) {
  .contact__details { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; }
}

/* Collapse to the mobile menu before the nav and the phone CTA collide. */
@media (max-width: 68rem) {
  .nav-toggle { display: block; margin-left: auto; }

  .site-nav {
    position: fixed;
    inset: 0 0 auto;
    margin-left: 0;
    padding: 6.5rem var(--gutter) 2.5rem;
    background: rgb(21 15 17 / 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--rule-dark);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.36s var(--ease), visibility 0.36s;
  }
  .site-nav.is-open { transform: translateY(0); visibility: visible; }

  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li + li { border-top: 1px solid var(--rule-dark); }
  .site-nav a {
    display: block;
    padding-block: 1.125rem;
    font-size: 1rem;
    border-bottom: none;
  }

  .site-header__actions { order: 3; }
}

/* Below this width the header has no room for a ten-digit number, so the
   call button shows its label instead. It is still the same tel: link. */
@media (max-width: 34rem) {
  .phone-cta__num   { display: none; }
  .phone-cta__label { display: inline; }
  .phone-cta { padding: 0.75rem 1rem; font-size: 0.75rem; }
}

@media (max-width: 30rem) {
  .hero__actions .btn { width: 100%; }
  .call-block__btn { width: 100%; }
}