/* ==========================================================================
   ACME Panel Company — design system
   Radford, Virginia. Structural insulated panels since 1980.

   Token layer first, then components. Everything a developer needs to
   rebuild this in WordPress, Webflow or Next.js lives in :root below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand core — taken from the ACME wordmark and the trade show booth.
     Indigo carries the surface. Green is the go color and nothing else. */
  --acme-indigo:        oklch(0.32 0.110 272);
  --acme-indigo-deep:   oklch(0.235 0.090 274);
  --acme-indigo-soft:   oklch(0.44 0.100 272);
  --acme-green:         oklch(0.58 0.145 148);
  --acme-green-deep:    oklch(0.455 0.125 149);
  --acme-green-pale:    oklch(0.94 0.030 150);

  /* Neutrals, tinted toward indigo. Never toward warm. */
  --ink:      oklch(0.215 0.035 275);
  --ink-2:    oklch(0.395 0.025 274);
  --ink-3:    oklch(0.520 0.020 274);
  --bg:       oklch(0.986 0.004 270);
  --surface:  oklch(0.958 0.006 270);
  --surface-2:oklch(0.922 0.008 270);
  --line:     oklch(0.878 0.010 272);
  --line-2:   oklch(0.800 0.014 272);
  --white:    oklch(1 0 0);

  /* Material accent. Oriented strand board. Used at trace amounts only,
     for rules and captions that sit next to product photography. */
  --osb:      oklch(0.700 0.085 68);

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;

  --step--1: clamp(0.86rem, 0.84rem + 0.10vw, 0.92rem);
  --step-0:  clamp(1.06rem, 1.02rem + 0.20vw, 1.19rem);
  --step-1:  clamp(1.28rem, 1.18rem + 0.45vw, 1.55rem);
  --step-2:  clamp(1.62rem, 1.42rem + 0.95vw, 2.15rem);
  --step-3:  clamp(2.05rem, 1.66rem + 1.90vw, 3.10rem);
  --step-4:  clamp(2.55rem, 1.85rem + 3.40vw, 4.40rem);
  --step-5:  clamp(3.00rem, 1.95rem + 5.10vw, 5.60rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
  --sp-10: 8rem;

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --measure: 68ch;
  --shell: 1280px;

  /* Motion */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-1: 180ms;
  --dur-2: 380ms;
  --dur-3: 720ms;

  /* Depth */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-callbar: 300;
  --z-overlay: 400;

  --shadow-lift: 0 1px 2px oklch(0.235 0.09 274 / 0.06),
                 0 8px 24px -12px oklch(0.235 0.09 274 / 0.22);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--surface-2); }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.02em; }
h4 { font-size: var(--step-0); letter-spacing: -0.012em; font-weight: 600; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: inherit; text-underline-offset: 0.18em; }

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

::selection { background: var(--acme-green-pale); color: var(--acme-indigo-deep); }

.visually-hidden {
  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: var(--gutter);
  z-index: var(--z-overlay);
  background: var(--acme-indigo-deep); color: var(--white);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-display); font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

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

.section { padding-block: clamp(3.5rem, 8vw, var(--sp-9)); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--sp-7)); }
.section--ink { background: var(--acme-indigo-deep); color: var(--white); }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--surface { background: var(--surface); }
.section--rule { border-top: 1px solid var(--line); }

.prose { max-width: var(--measure); }
.prose--lead { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
.section--ink .prose--lead { color: oklch(0.88 0.02 272); }

/* Section heading: a rule and a label sitting on the same baseline as the
   heading, rather than the uppercase kicker everyone uses. */
.head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.head__meta {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}
.head__meta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.section--ink .head__meta { color: oklch(0.78 0.03 272); }
.section--ink .head__meta::after { background: oklch(0.40 0.06 274); }

/* --------------------------------------------------------------------------
   4. BUTTONS AND CALL LINKS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 0.95em 1.5em;
  border: 2px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out-quart),
              color var(--dur-1) var(--ease-out-quart),
              border-color var(--dur-1) var(--ease-out-quart),
              transform var(--dur-1) var(--ease-out-quart);
}
.btn:active { transform: translateY(1px); }

.btn--go {
  background: var(--acme-green-deep);
  color: var(--white);
  border-color: var(--acme-green-deep);
}
.btn--go:hover { background: oklch(0.395 0.115 149); border-color: oklch(0.395 0.115 149); }

.btn--line {
  border-color: currentColor;
  color: var(--acme-indigo);
}
.btn--line:hover { background: var(--acme-indigo); color: var(--white); }

/* On a photograph or a dark band, an outline button disappears. It fills
   instead, so the secondary action is legible at rest rather than on hover. */
.hero .btn--line,
.section--ink .btn--line,
.callband .btn--line {
  background: var(--white);
  color: var(--acme-indigo-deep);
  border-color: var(--white);
}
.hero .btn--line:hover,
.section--ink .btn--line:hover,
.callband .btn--line:hover {
  background: oklch(0.88 0.020 272);
  border-color: oklch(0.88 0.020 272);
  color: var(--acme-indigo-deep);
}

.btn--ghost { padding-inline: 0; color: var(--acme-indigo); text-decoration: underline; text-decoration-thickness: 2px; }
.btn--ghost:hover { color: var(--acme-green-deep); }

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* The phone number is the product. Treat it like one. */
.tel {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.tel:hover { color: var(--acme-green-deep); }
.section--ink .tel:hover { color: var(--acme-green); }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: oklch(0.986 0.004 270 / 0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 76px;
  padding-block: var(--sp-3);
}

.brandmark { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brandmark svg { height: 40px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2.2vw, var(--sp-6));
  margin-left: auto;
}
.nav a {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: var(--sp-2);
  position: relative;
  transition: color var(--dur-1) var(--ease-out-quart);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--acme-indigo); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--acme-green);
}

.masthead__call {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--line);
}
.masthead__call .tel { font-size: 1.05rem; color: var(--acme-indigo); }
.masthead__call small {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 0.5rem 0.8rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 960px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    box-shadow: var(--shadow-lift);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding-block: var(--sp-4); border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  .nav a[aria-current="page"]::after { display: none; }
}

@media (min-width: 961px) {
  .nav-toggle { display: none; }
  .masthead__call { display: flex; }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--acme-indigo-deep);
  color: var(--white);
  overflow: clip;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.82;
  filter: saturate(0.88);
}
/* Scrim is heaviest under the headline and clears almost completely on the
   right, so the photograph reads as a photograph rather than a texture.
   White type sits in the 0.84 zone, which keeps contrast well past AA. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      oklch(0.19 0.075 274 / 0.84) 0%,
      oklch(0.19 0.075 274 / 0.62) 46%,
      oklch(0.19 0.075 274 / 0.14) 100%);
}
.hero__inner {
  position: relative;
  z-index: var(--z-base);
  padding-block: clamp(4rem, 12vw, 9rem);
  display: grid;
  justify-items: start;
  gap: var(--sp-6);
}
.hero__inner > * { max-width: min(100%, 56ch); }
.hero h1 { color: var(--white); max-width: 15ch; }
.hero p.hero__lead {
  font-size: var(--step-1);
  line-height: 1.44;
  color: oklch(0.90 0.02 272);
}
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid oklch(0.45 0.06 274);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 550;
  color: oklch(0.82 0.03 272);
}
.hero__foot strong { color: var(--white); font-weight: 700; }

/* Interior page hero, shorter */
.hero--page .hero__inner { padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero--page h1 { font-size: var(--step-4); max-width: 14ch; }

/* --------------------------------------------------------------------------
   7. SPLIT ROWS — the markets, alternating and deliberately uneven
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .split--wide-media { grid-template-columns: 1.25fr 0.85fr; }
  .split--flip > :first-child { order: 2; }
}
.split + .split { margin-top: clamp(3rem, 7vw, 5.5rem); }

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
.split__media figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--ink-3);
  border-top: 2px solid var(--osb);
  padding-top: var(--sp-2);
}
.split__body > * + * { margin-top: var(--sp-4); }
.split__body h3 { font-size: var(--step-2); }

/* --------------------------------------------------------------------------
   8. SPEC TABLE — reads like a product datasheet, because it is one
   -------------------------------------------------------------------------- */

.spec {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  text-align: left;
}
.spec caption {
  text-align: left;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
  padding-bottom: var(--sp-3);
}
.spec th, .spec td {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.spec th {
  font-weight: 550;
  font-size: var(--step--1);
  color: var(--ink-3);
  width: 42%;
}
.spec td {
  font-weight: 650;
  font-size: var(--step-0);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

.section--ink .spec th { color: oklch(0.78 0.03 272); }
.section--ink .spec th, .section--ink .spec td { border-color: oklch(0.36 0.06 274); }

.spec-pair {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 860px) { .spec-pair { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   9. PROJECT GALLERY — varied sizes on purpose, not a card grid
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 780px) { .gallery { grid-template-columns: repeat(6, 1fr); gap: var(--sp-5); } }

.shot { position: relative; margin: 0; overflow: hidden; border-radius: 2px; }
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out-quint);
}
.shot:hover img { transform: scale(1.035); }
.shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, oklch(0.19 0.075 274 / 0.92), transparent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.shot figcaption span {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  color: oklch(0.85 0.03 272);
  margin-top: 2px;
}

/* Desktop: a true mosaic on a fixed row height. Dense packing backfills the
   gaps left by the taller frames, so the block always tiles clean no matter
   how many photographs are in it. */
@media (min-width: 780px) {
  .gallery {
    grid-auto-rows: clamp(86px, 8.6vw, 138px);
    grid-auto-flow: row dense;
  }
  .shot--wide  { grid-column: span 4; grid-row: span 2; }
  .shot--half  { grid-column: span 3; grid-row: span 2; }
  .shot--third { grid-column: span 2; grid-row: span 2; }
  .shot--tall  { grid-column: span 2; grid-row: span 3; }
}
@media (max-width: 779px) {
  .shot { aspect-ratio: 4 / 3; }
  .shot--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   10. REP TABLE — who to call, by state
   -------------------------------------------------------------------------- */

.reps {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 820px) { .reps { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

.rep {
  border: 1px solid var(--line);
  border-top: 3px solid var(--acme-green);
  background: var(--white);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.rep h3 { font-size: var(--step-2); }
.rep .tel {
  display: inline-block;
  margin-block: var(--sp-3) var(--sp-4);
  font-size: var(--step-2);
  color: var(--acme-indigo);
}
.rep__states {
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}
.rep__states strong {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------------------------
   11. CALL BAND + MOBILE STICKY BAR
   -------------------------------------------------------------------------- */

.callband {
  background: var(--acme-indigo);
  color: var(--white);
}
.callband__inner {
  display: grid;
  gap: var(--sp-5);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .callband__inner { grid-template-columns: 1fr auto; gap: var(--sp-8); }
}
.callband h2 { font-size: var(--step-2); }
.callband p { color: oklch(0.88 0.02 272); margin-top: var(--sp-3); max-width: 52ch; }
.callband__nums { display: grid; gap: var(--sp-4); }
.callband__num {
  display: flex; flex-direction: column;
  text-decoration: none;
  border: 1px solid oklch(0.50 0.07 274);
  padding: var(--sp-4) var(--sp-5);
  transition: background var(--dur-1) var(--ease-out-quart), border-color var(--dur-1) var(--ease-out-quart);
}
.callband__num:hover { background: oklch(0.38 0.10 272); border-color: var(--acme-green); }
.callband__num small {
  font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 600;
  color: oklch(0.82 0.03 272);
  letter-spacing: 0.02em;
}
.callband__num .tel { font-size: var(--step-1); margin-top: 2px; }

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-callbar);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--acme-indigo-deep);
  border-top: 2px solid var(--acme-green);
}
.callbar a {
  padding: 0.85rem var(--sp-3);
  text-align: center;
  text-decoration: none;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.callbar a + a { border-left: 1px solid oklch(0.36 0.07 274); }
.callbar small {
  display: block;
  font-weight: 500;
  font-size: 0.68rem;
  color: oklch(0.80 0.03 272);
}
@media (min-width: 700px) { .callbar { display: none; } }
@media (max-width: 699px) { body { padding-bottom: 62px; } }

/* --------------------------------------------------------------------------
   12. PULL QUOTE
   -------------------------------------------------------------------------- */

.pullquote {
  font-family: var(--font-body);
  font-size: var(--step-2);
  line-height: 1.35;
  font-style: italic;
  max-width: 24ch;
}
.pullquote cite {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
}
.section--ink .pullquote cite { color: oklch(0.80 0.03 272); }

/* --------------------------------------------------------------------------
   13. STEPS — the process, as a numbered sequence because it genuinely is one
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 760px) {
  .step { grid-template-columns: 4rem 20ch 1fr; align-items: baseline; }
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--acme-green-deep);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--step-1); }
.step p { color: var(--ink-2); max-width: 58ch; }

/* Same rhythm without the counter, for lists that are not sequences.
   Numbering a genuine five step process is information. Numbering three
   unrelated questions is decoration, so those use this variant. */
.steps--unnumbered { counter-reset: none; }
.steps--unnumbered .step::before { content: none; }
@media (min-width: 760px) {
  .steps--unnumbered .step { grid-template-columns: 22ch 1fr; }
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: var(--acme-indigo-deep);
  color: oklch(0.84 0.025 272);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: 0.95rem;
}
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__grid {
  display: grid;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid oklch(0.36 0.06 274);
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }
.footer h4 {
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.footer__mark svg { height: 38px; width: auto; margin-bottom: var(--sp-4); }
.footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  padding-top: var(--sp-5);
  font-size: 0.85rem;
  color: oklch(0.70 0.03 272);
}

/* --------------------------------------------------------------------------
   15. MOTION
   Content is visible by default. JS opts in, so nothing ships blank.
   -------------------------------------------------------------------------- */

.js-motion [data-rise] {
  opacity: 0;
  transform: translateY(18px);
}
.js-motion [data-rise].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-3) var(--ease-out-quint),
              transform var(--dur-3) var(--ease-out-quint);
}
.js-motion [data-rise].is-in:nth-child(2) { transition-delay: 70ms; }
.js-motion [data-rise].is-in:nth-child(3) { transition-delay: 140ms; }
.js-motion [data-rise].is-in:nth-child(4) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion [data-rise] { opacity: 1; transform: none; }
  .js-motion [data-rise].is-in { transition: none; }
  .shot img { transition: none; }
  .shot:hover img { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   16. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .callbar, .hero__media { display: none; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .hero, .section--ink, .callband, .footer { background: #fff !important; color: #000 !important; }
  .hero h1, .section--ink h2, .callband h2 { color: #000 !important; }
}

/* Contact page: one shared line, two named people to ask for. */
.rep__ask {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 0.95rem;
  color: var(--ink-2);
  margin-block: var(--sp-3) var(--sp-4);
}
.rep__ask .tel { font-size: var(--step-1); color: var(--acme-indigo); }