@charset "utf-8";
/* ==========================================================================
   RAMZ CUSTOM FENCING LLC
   Hand-written, no framework.

   THE PALETTE, AND TWO CORRECTIONS TO IT
   The colours come from Esteban's business card, as specified. Two of the
   combinations the spec implies do not pass WCAG AA, and are not used:

     - White text on the orange button measures 2.96:1. The button is the
       site's main call to action, so it takes near-black text instead,
       which measures 6.56:1.
     - Copper #B5601A as text on black measures 4.31:1. Copper is therefore
       used for fills, borders and gradients only — never for type.

   Everything that IS used was measured: orange on black 6.56:1, orange on
   a card 5.37:1, light grey on black 12.10:1, mid grey on black 6.82:1 and
   on a card 5.58:1, gold on black 8.18:1, white on black 19.44:1.
   ========================================================================== */

:root {
  --black:       #0d0d0d;
  --dark:        #1a1a1a;
  --card:        #222222;
  --border:      #2e2e2e;

  --orange:      #e87722;
  --copper:      #b5601a;   /* fills and borders only, never text */
  --gold:        #d4a017;
  --glow:        rgba(232, 119, 34, .25);

  --white:       #ffffff;
  --light:       #cccccc;
  --mid:         #999999;

  --grad-orange: linear-gradient(135deg, #e87722 0%, #b5601a 100%);
  --grad-hero:   linear-gradient(180deg, rgba(13,13,13,.35) 0%, rgba(13,13,13,.72) 55%, #0d0d0d 100%);

  --font-display: 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
  --font-head:    'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --wrap: 1200px;
  --gut: 1.25rem;
  --r: 10px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 8px 32px rgba(0, 0, 0, .55);
  --shadow-glow: 0 8px 32px rgba(232, 119, 34, .15);

  --s1: .5rem; --s2: .75rem; --s3: 1rem;  --s4: 1.5rem;
  --s5: 2rem;  --s6: 3rem;   --s7: 4.5rem; --s8: 6.5rem;
}

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

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

body {
  margin: 0;
  background: var(--black);
  color: var(--light);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: `overflow: hidden` turns the body into a scroll
     container, which drops position:sticky onto a slow path and is a
     well-known source of scroll jank. `clip` does the same visual job
     without creating one. */
  overflow-x: clip;
}

h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: .95;
  color: var(--white);
  text-transform: uppercase;
}
h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
}
h1 { font-size: clamp(2.75rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: 1.5rem; }

p { margin: 0; max-width: 68ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }

/*
 * This has to come after the rule above. `video { display: block }` is an
 * AUTHOR rule, and author rules beat the browser's own `[hidden] { display:
 * none }` regardless of specificity — so the hidden hero video was still
 * being laid out, painting an opaque black box over the poster behind it.
 */
[hidden] { display: none !important; }

/*
 * Base size for the inline icon set. Without this an <svg> with only a
 * viewBox falls back to the SVG default of 300x150, which tore the buttons
 * apart.
 */
.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
a { color: var(--orange); text-underline-offset: .18em; }
a:hover { color: var(--gold); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--orange); color: var(--black); font-weight: 700;
  padding: var(--s3) var(--s4);
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------ layout -- */

.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
@media (min-width: 48rem) { :root { --gut: 2rem; } }

.band { padding-block: clamp(3.5rem, 8vw, var(--s8)); }
.band--dark { background: var(--dark); }
.band--black { background: var(--black); }
.band--tight { padding-block: clamp(2.5rem, 5vw, var(--s7)); }

.eyebrow {
  margin: 0 0 var(--s3);
  font-family: var(--font-head);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange);
}
.lede { margin-top: var(--s4); font-size: 1.1rem; color: var(--light); max-width: 56ch; }
.muted { color: var(--mid); }

.rule {
  width: 72px; height: 4px; margin: var(--s4) auto 0 0;
  background: var(--grad-orange); border: 0; border-radius: 4px;
}

.head-block { margin-bottom: var(--s6); }

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

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1em 1.9em;
  border: 2px solid transparent; border-radius: 4px;
  font-family: var(--font-head); font-weight: 600;
  font-size: 1rem; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
/* Near-black on orange, not white: white measures 2.96:1 here. */
.btn--primary { background: var(--grad-orange); color: var(--black); }
.btn--primary:hover {
  color: var(--black); transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(232, 119, 34, .35);
}
.btn--ghost { background: transparent; color: var(--white); border-color: #4a4a4a; }
.btn--ghost:hover { color: var(--white); border-color: var(--orange); transform: translateY(-2px); }
.btn--lg { padding: 1.15em 2.2em; font-size: 1.05rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

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

.head {
  /* Opaque on purpose. A translucent sticky bar makes the browser
     re-composite the hero image underneath it on every scroll frame; over
     a near-black page the difference is invisible and the scrolling is
     noticeably smoother. */
  position: sticky; top: 0; z-index: 90;
  background: #0d0d0d;
  border-bottom: 1px solid var(--border);
  /* Only the shadow transitions. Nothing here may change the header's
     HEIGHT — see the note on .is-stuck below. */
  transition: box-shadow .25s var(--ease);
}
/* backdrop-filter is deliberately omitted: it has ghosted a duplicate bar
   in Chrome on these builds. A solid background does the same job. */
/*
 * The header used to shrink on scroll — less padding, smaller logo. That
 * cannot be done on a sticky header, because a sticky header is in flow:
 * shrinking it pulls the page up, which changes scrollY, which can drop it
 * back under the threshold, which un-shrinks it, which pushes the page
 * down again. The result was a header that visibly jumped and a scroll
 * that stalled, because every frame of the 0.25s size transition re-ran
 * layout for the whole document.
 *
 * The header is now a fixed height and scrolling only adds a shadow, which
 * is composited and costs no layout at all.
 */
.head.is-stuck { box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }

.head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--s3);
}

.mark { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.mark img { height: 50px; width: auto; }
.mark__txt { display: none; }
@media (min-width: 30rem) {
  .mark__txt { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--white); letter-spacing: .06em; line-height: 1; }
  .mark__txt span { display: block; font-family: var(--font-head); font-size: .6rem; letter-spacing: .28em; color: var(--orange); margin-top: .25em; }
}

.nav { display: flex; align-items: center; gap: var(--s5); }
.nav__list { display: flex; align-items: center; gap: var(--s5); }
.nav__a {
  position: relative; color: var(--light); text-decoration: none;
  font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  letter-spacing: .1em; text-transform: uppercase; padding-block: .4em;
}
.nav__a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__a:hover { color: var(--white); }
.nav__a:hover::after, .nav__a.is-here::after { transform: scaleX(1); }
.nav__a.is-here { color: var(--white); }

.burger { display: none; }
@media (max-width: 62rem) {
  .burger {
    display: inline-flex; align-items: center; gap: .55rem;
    background: none; border: 0; padding: .4rem; cursor: pointer;
    color: var(--white); font-family: var(--font-head); font-size: .85rem;
    letter-spacing: .14em; text-transform: uppercase;
  }
  .burger__bars { display: grid; gap: 4px; width: 24px; }
  .burger__bars i { display: block; height: 2px; background: var(--orange); transition: transform .25s var(--ease), opacity .2s; }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .head__in { flex-wrap: wrap; }
  .nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: var(--s3); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__a { padding-block: .95em; border-bottom: 1px solid var(--border); font-size: 1.05rem; }
  .nav__a::after { display: none; }
  .nav__a.is-here { color: var(--orange); }
  .nav .btn { margin: var(--s3) 0; justify-content: center; }
  /* Script hides this on load; with no script the menu simply stays open. */
  .nav.is-closed { display: none; }
}

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

.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* The poster sits underneath permanently. The film fades in over it once it
   has frames, so there is never a black rectangle and never a gap — and if
   the file never arrives, the poster is simply what you see. */
.hero__media video { opacity: 0; transition: opacity .8s ease; }
.hero__media video.is-on { opacity: 1; }
/*
 * Two scrims, not one.
 *
 * The vertical gradient alone left the eyebrow sitting on bright sky at
 * 1.48:1 — far below AA. The horizontal layer darkens the column the copy
 * actually occupies and fades out before it reaches the fence, so the
 * photograph is still doing its job on the right while the text is legible
 * on the left.
 */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13,13,13,.93) 0%, rgba(13,13,13,.80) 36%, rgba(13,13,13,0) 74%),
    var(--grad-hero);
}
/* Stacked on a phone the copy spans the full width, so the horizontal
   fade has nowhere to hide and the vertical one has to carry it. */
@media (max-width: 46rem) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(13,13,13,.90) 0%, rgba(13,13,13,.82) 70%, rgba(13,13,13,.72) 100%),
      var(--grad-hero);
  }
}

.hero__in { position: relative; z-index: 2; padding-block: clamp(3rem, 12vh, 7rem); }
.hero h1 { max-width: 16ch; }
.hero h1 span { display: block; }
.hero h1 span:nth-child(2) { color: var(--orange); }
.hero__lede { margin-top: var(--s4); font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); color: var(--light); max-width: 48ch; }

/*
 * The tag carries its own dark chip rather than trusting the scrim. It is
 * small uppercase text, so it needs 4.5:1, and it sits high in the hero
 * where the gradient is weakest and the sky behind is brightest — measured
 * at 1.48:1 over the bare photograph.
 *
 * At 92% opacity the chip floors the background at roughly #202020 no
 * matter what is behind it, which puts orange at 5.5:1 and keeps it there
 * if the hero image is ever swapped.
 */
.hero__tag {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--orange);
  margin-bottom: var(--s4);
  background: rgba(13, 13, 13, .92);
  border: 1px solid rgba(232, 119, 34, .40);
  border-radius: 999px;
  padding: .6em 1.1em;
}
.hero__tag::before, .hero__tag::after { content: "\2605"; font-size: .7em; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.25rem; z-index: 3;
  transform: translateX(-50%);
  color: var(--mid); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; display: grid; justify-items: center; gap: .3rem;
}
/*
 * The cue animates transform only, so it stays on the compositor. The
 * version this replaced switched transform-origin halfway through the
 * keyframes, which cannot be composited — it forced a main-thread repaint
 * every frame for as long as the hero was on screen, which is what made
 * scrolling feel like it was hanging.
 */
.hero__scroll span {
  position: relative; display: block; width: 1px; height: 28px;
  background: rgba(255, 255, 255, .16); overflow: hidden;
}
.hero__scroll span::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 1px; height: 14px; background: var(--orange);
  animation: drop 1.9s var(--ease) infinite;
  will-change: transform;
}
@keyframes drop {
  0%   { transform: translateY(-14px); }
  100% { transform: translateY(28px); }
}

/* -------------------------------------------------------------- stats -- */

.stats { background: var(--dark); border-block: 1px solid var(--border); }
.stats__grid { display: grid; gap: var(--s4); padding-block: var(--s5); }
@media (min-width: 40rem) { .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 64rem) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

.stat__n { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); color: var(--orange); line-height: 1; }
.stat__l { font-family: var(--font-head); font-weight: 600; color: var(--white); margin-top: .35rem; font-size: 1.02rem; }
.stat__d { color: var(--mid); font-size: .92rem; margin-top: .15rem; }

/* -------------------------------------------------------------- cards -- */

.grid { display: grid; gap: var(--s4); }
@media (min-width: 46rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 46rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 46rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s5);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: var(--shadow-glow); }
.card__ico {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 8px; background: rgba(232, 119, 34, .12);
  color: var(--orange); margin-bottom: var(--s4);
}
.card__ico svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--mid); font-size: .98rem; }
.card__more {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: auto; padding-top: var(--s4);
  color: var(--orange); font-family: var(--font-head); font-weight: 600;
  font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.card--link { position: relative; }
.card--link h3 a { color: var(--white); text-decoration: none; }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; }
.card--link:hover h3 a { color: var(--orange); }

.ticks { display: grid; gap: var(--s2); margin-top: var(--s4); }
.ticks li { position: relative; padding-left: 1.8rem; color: var(--light); font-size: .97rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .9rem; height: .5rem;
  border-left: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange);
  transform: rotate(-45deg);
}

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

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s5); }
.filter {
  background: var(--card); border: 1px solid var(--border); color: var(--light);
  font-family: var(--font-head); font-size: .88rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .6em 1.1em; border-radius: 999px; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.filter:hover { border-color: var(--orange); color: var(--white); }
.filter.is-on { background: var(--grad-orange); color: var(--black); border-color: transparent; }

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

.shot {
  position: relative; border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; background: var(--card);
  padding: 0; cursor: zoom-in; text-align: left; width: 100%;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.shot:hover { border-color: var(--orange); transform: translateY(-3px); }
/* These are <span>s because a <button> may only contain phrasing content,
   and a span is inline by default — so width, height and padding-bottom
   were being ignored and the picture box collapsed to nothing. */
.shot__img { display: block; position: relative; width: 100%; height: 0; padding-bottom: 72%; }
.shot__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot__body { display: block; padding: var(--s4); }
.shot__tag {
  font-family: var(--font-head); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange);
}
.shot__h { font-size: 1.12rem; margin-top: .3rem; color: var(--white); }
.shot__d { color: var(--mid); font-size: .93rem; margin-top: .4rem; }
.shot.is-hidden { display: none; }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5, 5, 5, .94);
  display: grid; place-items: center; padding: var(--s4);
}
.lb[hidden] { display: none; }
.lb__fig { margin: 0; max-width: 1000px; width: 100%; }
.lb__fig img { width: 100%; height: auto; border-radius: var(--r); }
.lb__cap { color: var(--light); margin-top: var(--s3); font-size: .95rem; }
.lb__cap strong { color: var(--white); font-family: var(--font-head); display: block; font-size: 1.1rem; }
.lb__x {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--card); border: 1px solid var(--border); color: var(--white);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.3rem; line-height: 1;
}
.lb__x:hover { border-color: var(--orange); color: var(--orange); }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--card); border: 1px solid var(--border); color: var(--white);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.2rem;
}
.lb__nav:hover { border-color: var(--orange); color: var(--orange); }
.lb__nav--prev { left: 1rem; }
.lb__nav--next { right: 1rem; }

/* ------------------------------------------------------------- split -- */

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .split--lead { grid-template-columns: 1.1fr .9fr; } }
.split__media img { width: 100%; border-radius: var(--r); border: 1px solid var(--border); }

/* --------------------------------------------------------- his words -- */

.proof { display: grid; gap: var(--s4); }
@media (min-width: 60rem) { .proof { grid-template-columns: repeat(3, 1fr); } }
.proof__i {
  border-top: 3px solid var(--orange); padding-top: var(--s4);
}
.proof__q {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.22rem; line-height: 1.35; color: var(--white);
}
.proof__by { color: var(--mid); font-size: .9rem; margin-top: var(--s3); }
.proof__by a { color: var(--orange); }

/* ------------------------------------------------------------- areas -- */

.areas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s5); }
.areas li {
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: .5em 1em; color: var(--light); font-size: .92rem;
}

/* --------------------------------------------------------------- CTA -- */

.cta-band { background: var(--grad-orange); }
.cta-band .wrap { display: grid; gap: var(--s4); padding-block: var(--s7); justify-items: start; }
.cta-band h2 { color: var(--black); }
.cta-band p { color: rgba(13, 13, 13, .82); font-size: 1.1rem; max-width: 50ch; }
.cta-band .btn { background: var(--black); color: var(--white); border-color: var(--black); }
.cta-band .btn:hover { background: #000; color: var(--white); }
/* The secondary button has to opt out of the rule above, or it is black
   text on a black fill. Near-black on orange measures 6.56:1. */
.cta-band .btn--ghost { background: transparent; color: var(--black); border-color: rgba(13, 13, 13, .45); }
.cta-band .btn--ghost:hover { background: rgba(13, 13, 13, .1); color: var(--black); }

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

.form { display: grid; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 46rem) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } }
.field { display: grid; gap: .45rem; }
.field label { font-family: var(--font-head); font-weight: 500; color: var(--white); font-size: .95rem; letter-spacing: .04em; }
.req { color: var(--orange); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85em 1em;
  font-family: inherit; font-size: 1rem; color: var(--white);
  background: var(--black); border: 1px solid var(--border); border-radius: 6px;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); outline-offset: 0; }
.field input::placeholder, .field textarea::placeholder { color: #6b6b6b; }
/* Off screen rather than display:none — a bot that renders CSS skips a
   hidden field but fills one it can see in the DOM. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note {
  padding: var(--s4) var(--s5); border-left: 4px solid var(--orange);
  background: var(--card); border-radius: 0 var(--r) var(--r) 0;
}
.note--err { border-left-color: #e5484d; }
.note--ok { border-left-color: #46a758; }
.note p + p { margin-top: var(--s2); }

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

.contact-list { display: grid; gap: var(--s4); margin-top: var(--s5); }
.contact-list a { text-decoration: none; }
.contact-list__i { display: flex; gap: var(--s3); align-items: flex-start; }
.contact-list__i svg { width: 22px; height: 22px; color: var(--orange); flex: 0 0 auto; margin-top: .25rem; }
.contact-list__l { font-family: var(--font-head); color: var(--white); font-size: 1.05rem; }
.contact-list__d { color: var(--mid); font-size: .93rem; }

.map { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-top: var(--s6); }
.map iframe { display: block; width: 100%; height: 380px; border: 0; }

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

.foot { background: var(--dark); border-top: 1px solid var(--border); padding-block: var(--s7) var(--s5); }
.foot__in { display: grid; gap: var(--s6); }
@media (min-width: 54rem) { .foot__in { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s7); } }
.foot__blurb { color: var(--mid); margin-top: var(--s4); font-size: .95rem; }
.foot__h {
  font-family: var(--font-head); color: var(--white); font-size: .82rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: var(--s4);
}
.foot__col ul { display: grid; gap: var(--s2); }
.foot__col a:not(.btn) { color: var(--mid); text-decoration: none; }
.foot__col a:not(.btn):hover { color: var(--orange); }
.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-top: var(--s7); padding-top: var(--s4);
  border-top: 1px solid var(--border); color: var(--mid); font-size: .88rem;
}
.social { display: flex; gap: .6rem; }
.social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--border); border-radius: 50%; color: var(--light);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.social a:hover { color: var(--black); background: var(--orange); border-color: var(--orange); }
.social svg { width: 18px; height: 18px; }

/* sticky call bar, phones only */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: 1px; background: var(--border);
}
@media (max-width: 46rem) {
  .dock { display: grid; grid-template-columns: 1fr 1fr; }
  body { padding-bottom: 58px; }
}
.dock a {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  padding: 1em; text-decoration: none;
  font-family: var(--font-head); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  font-size: .9rem;
}
.dock__call { background: var(--grad-orange); color: var(--black); }
.dock__quote { background: var(--card); color: var(--white); }

/* ===================================================================== */
/* MOTION                                                                */
/* ===================================================================== */

[data-reveal] { opacity: 0; transform: translateY(26px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in [data-stagger] { animation: rise .6s var(--ease) both; }
[data-stagger]:nth-child(1) { animation-delay: .05s; }
[data-stagger]:nth-child(2) { animation-delay: .14s; }
[data-stagger]:nth-child(3) { animation-delay: .23s; }
[data-stagger]:nth-child(4) { animation-delay: .32s; }
[data-stagger]:nth-child(5) { animation-delay: .41s; }
[data-stagger]:nth-child(6) { animation-delay: .50s; }

.hero__in > * { animation: rise .9s var(--ease) both; }
.hero__in > *:nth-child(1) { animation-delay: .1s; }
.hero__in > *:nth-child(2) { animation-delay: .25s; }
.hero__in > *:nth-child(3) { animation-delay: .4s; }
.hero__in > *:nth-child(4) { animation-delay: .6s; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/*
 * Reduced motion. Duration AND delay are zeroed: with fill-mode both, a
 * delay alone leaves content invisible for the length of the delay, which
 * is the exact failure this is meant to prevent.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__scroll span { display: none; }
}

@media print {
  .head, .foot, .dock, .hero__media, .btn, .skip, .lb { display: none !important; }
  body { background: #fff; color: #000; }
}