/* ==========================================================================
   RTD Electrical & Contracting Services — rtdecs.com
   Design system built on the RTD logo palette.
   Orange #F36B21 · Charcoal #3F3F3F / #242424 · Off-white #F7F7F5
   Type: Barlow Condensed (headings) · Inter (body)
   ========================================================================== */

:root  {
  /* Brand */
  --orange: #F36B21;        /* primary accent (logo orange) */
  --orange-bright: #FF7C33; /* hover state on orange fills */
  --orange-deep: #B84A0A;   /* orange family for small text on light bg (AA) */
  --ink: #242424;           /* deep charcoal */
  --charcoal: #3F3F3F;      /* dark charcoal */
  --charcoal-2: #333333;    /* panel charcoal */
  --paper: #F7F7F5;         /* soft off-white */
  --line: #E6E6E2;          /* light grey borders */
  --white: #FFFFFF;

  /* Derived */
  --body-text: #45464B;
  --muted: #6E6F73;
  --dim-on-dark: #C9C9C5;
  --faint-on-dark: #9C9C99;
  --line-on-dark: rgba(255, 255, 255, 0.13);

  --font-head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ------------------------------------------------------------------------
     Type scale — one ladder, shared by every page and every stylesheet.

     Faces    Barlow Condensed  headings, labels, buttons, phone numbers
              Inter             body copy, form fields, footer links
              Playfair italic   the single accent line inside a headline
     Weights  700 headings and item titles · 600 labels, buttons, controls
              and list entries · 500 nav · 400 body copy
     Rule     a component picks a step off this ladder. It does not invent a
              size, a leading or a tracking of its own.

     Every display step is a clamp, so the ladder scales with the viewport and
     the hierarchy holds at every width without per-page media queries.
     ------------------------------------------------------------------------ */

  /* Headings */
  --fs-display: clamp(2.3rem, 1rem + 5.1vw, 4.1rem);     /* page title */
  --fs-h2:      clamp(2rem, 1.05rem + 2.9vw, 3.25rem);   /* section heading */
  --fs-h3:      clamp(1.7rem, 1rem + 2.2vw, 2.6rem);     /* sub-section heading */
  --fs-h4:      clamp(1.4rem, 1rem + 1.3vw, 1.85rem);    /* panel / form heading */
  --fs-h5:      clamp(1.22rem, 1.05rem + 0.6vw, 1.5rem); /* block heading */
  --fs-h6:      1.125rem;                                /* card / item title */

  /* Copy */
  --fs-lede: 1.0625rem;   /* the sentence under a heading */
  --fs-body: 1rem;        /* default paragraph */
  --fs-sm:   0.9375rem;   /* supporting copy in cards, lists, the footer */
  --fs-xs:   0.875rem;    /* captions, form labels, notes */
  --fs-2xs:  0.8125rem;   /* fine print */

  /* Small uppercase labels */
  --fs-label:    0.78rem; /* kicker above a heading, photo label */
  --fs-label-sm: 0.72rem; /* label inside a component */

  /* Interface */
  --fs-btn:    0.95rem;
  --fs-btn-lg: 1.05rem;
  --fs-btn-sm: 0.875rem;
  --fs-nav:    0.9375rem;

  /* Numbers set in the display face — times, addresses, phone numbers */
  --fs-num:    1.2rem;
  --fs-num-md: 1.35rem;
  --fs-num-lg: 1.9rem;

  /* Leading */
  --lh-display: 0.95;  /* display and section headings */
  --lh-head:    1.1;   /* smaller headings and item titles */
  --lh-snug:    1.3;   /* stacked values */
  --lh-tight:   1.2;   /* buttons, nav, chips */
  --lh-body:    1.65;  /* default */
  --lh-copy:    1.7;   /* paragraphs and ledes */
  --lh-sm:      1.55;  /* captions and dense lists */

  /* Tracking — the extremes, with nothing in the middle but body copy */
  --ls-display: -0.005em;
  --ls-head:    0.012em;
  --ls-head-sm: 0.024em;
  --ls-wide:    0.05em;
  --ls-btn:     0.1em;
  --ls-label:   0.22em;

  --wrap: 1180px;
  --radius: 4px;
  --header-h: 108px;
  --shadow-soft: 0 12px 34px rgba(36, 36, 36, 0.10);
  --shadow-card: 0 1px 2px rgba(36, 36, 36, 0.05);
}

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

html  {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body  {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body-text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, p, ul, ol, figure  { margin: 0; }
ul[role="list"]  { list-style: none; padding: 0; }

a  { color: var(--orange-deep); }

:focus-visible  {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

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

/* ---- Type ----
   The heading tiers. Everything below picks one of these steps: a page title
   is --fs-display, a section heading --fs-h2, and so on down the ladder. The
   two largest tiers share the display leading; the smaller ones open up. */
h1, h2, h3, h4  {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

h1  { font-size: var(--fs-display); }
h2  { font-size: var(--fs-h2); }
h3  { font-size: var(--fs-h5); letter-spacing: var(--ls-head); line-height: var(--lh-head); }
h4  { font-size: var(--fs-h6); letter-spacing: var(--ls-head-sm); line-height: var(--lh-head); }

/* Paragraphs run at the copy leading on every page; the body leading is for
   the interface around them. */
p  { line-height: var(--lh-copy); }

/* ---- Layout ---- */
.wrap  {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 34px);
}

.skip-link  {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.2s;
}
.skip-link:focus  { top: 0; }

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

/* ---- Buttons ---- */
.btn  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: var(--ls-btn);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.btn:active  { transform: translateY(1px); }
.btn svg  { flex: none; }

.btn-primary  { background: var(--orange); color: #1D1200; box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.btn-primary:hover  { background: var(--orange-bright); }

.btn-dark  { background: var(--ink); color: var(--white); }
.btn-dark:hover  { background: var(--charcoal); }

.btn-outline-light  {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}
.btn-outline-light:hover  {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.btn-outline-dark  {
  border-color: rgba(36, 36, 36, 0.38);
  color: var(--ink);
}
.btn-outline-dark:hover  { border-color: var(--ink); background: rgba(36, 36, 36, 0.05); }

.btn-lg  { padding: 15px 28px; font-size: var(--fs-btn-lg); }

/* ---- Header ---- */
.site-header  {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.25s, background-color 0.25s;
}

.site-header.is-scrolled  { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32); }

.header-bar  {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
  transition: min-height 0.25s;
}

.site-header.is-scrolled .header-bar  { min-height: calc(var(--header-h) - 14px); }

.brand  {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding-block: 10px;
}

.brand img  { height: 60px; width: auto; transition: height 0.25s; }
.site-header.is-scrolled .brand img  { height: 52px; }

.site-nav  { margin-left: auto; display: flex; align-items: center; }

.nav-links  {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2vw, 34px);
  margin: 0;
}

.nav-links a  {
  position: relative;
  display: inline-block;
  padding: 7px 2px;
  color: #D8D8D5;
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-decoration: none;
  transition: color 0.16s;
}

.nav-links a::after  {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}

.nav-links a:hover  { color: var(--white); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after  { transform: scaleX(1); }
.nav-links a[aria-current="page"]  { color: var(--white); }

.nav-toggle  {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 12px 11px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle .bar  {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  transition: transform 0.22s, opacity 0.18s;
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(1)  { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2)  { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3)  { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero — the photograph
   A full-viewport RTD photo behind a four-stop dark scrim, with a real <h1>
   over it. The scrim runs deeper than the brief's reference stops because
   this frame is a bright winter sky rather than a dark one: the four-stop
   shape is unchanged (dark, open at 30%, half at 70%, darkest at the foot),
   the values are raised until every piece of hero text clears WCAG AA
   against the pixels actually behind it.
   ========================================================================== */
.hero  {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(90vh, 760px);
  padding-block: clamp(88px, 12vw, 138px) clamp(56px, 8vw, 88px);
  overflow: hidden;
  isolation: isolate;
  /* Held beneath the photograph, so the hero is never flat black while it
     loads and never letterboxes if the image is missing. */
  background:
    radial-gradient(128% 92% at 50% 34%, rgba(243, 107, 33, 0.12), rgba(243, 107, 33, 0) 46%),
    radial-gradient(150% 128% at 50% 6%, #17130e 0%, #0c0b0d 42%, #050406 100%);
}

/* The photograph is the hero. Sized by the frame, positioned so the machines
   stay in shot at every viewport and nothing is cut through the middle.
   The exposure comes down and the blue of the sky comes out, so the frame
   reads as one of the site's ink surfaces and the orange on the machines
   stays the only saturated thing in it — the house rule, applied to a
   photograph. Scaling the exposure keeps the depth that a flat wash of
   black would iron out. */
.hero-photo  {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(0.8) brightness(0.92) contrast(1.02);
}

/* The four-stop scrim. The head sits at the brief's own .55: the header is
   transparent over the hero, so the photograph has to read behind the nav.
   .60 rather than the reference .55 only to keep the nav off the 4.5:1 line
   on an ultrawide, where the crop puts more sky behind it. The lower
   stops stay deeper than the reference — that is where the headline, the
   buttons and the credential line are, on a frame far brighter than the one
   the brief was written against. */
.hero-scrim  {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(7, 6, 8, 0.60) 0%,
      rgba(7, 6, 8, 0.60) 30%,
      rgba(7, 6, 8, 0.70) 70%,
      rgba(7, 6, 8, 0.90) 100%
    );
}

/* Fine industrial grain — static, cheap, keeps the dark surfaces from
   banding and settles the grain of the photograph into the page. */
.hero--photo::after  {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero > .wrap  { position: relative; z-index: 3; width: 100%; min-width: 0; }

.hero-inner  {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

/* The headline's own bed. The four-stop scrim is anchored to the frame, but
   the words are not — they sit at a different height on a phone than on a
   desktop, and on this frame they cross a pale trailer deck. This travels
   with the copy, so the type clears AA at every width while the edges of
   the photograph stay open. Soft and wide enough to read as depth of field
   rather than as a panel. */
.hero-inner::before  {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22% -26%;
  pointer-events: none;
  background: radial-gradient(
    68% 60% at 50% 50%,
    rgba(7, 6, 8, 0.36) 0%,
    rgba(7, 6, 8, 0.26) 46%,
    rgba(7, 6, 8, 0.1) 74%,
    rgba(7, 6, 8, 0) 100%
  );
}

/* The mark leads the frame, as it does on the source. The <h1> stays a real
   heading underneath it rather than being replaced by the image — the brief
   is explicit about that, and it is the one thing the source gets wrong. */
.hero-logo  {
  width: clamp(230px, 30vw, 420px);
  margin: 0 auto clamp(20px, 2.8vw, 32px);
  aspect-ratio: 1200 / 346;
}
.hero-logo img  { width: 100%; height: 100%; object-fit: contain; }

.hero h1  { color: var(--white); }
.hero h1 .accent  { color: var(--orange); }

/* The credential line — the brief's last element inside the hero: the display
   face at the label step, tracked and uppercase like every other kicker on the
   site, white at ~82%. It keeps the copy leading rather than the label's,
   because it wraps to two lines on a phone. What it says is only what RTD has
   confirmed; the source's licence and bond numbers have no RTD equivalent. */
.hero-cred  {
  margin: 26px auto 0;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-body);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.hero-ctas  {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* On a phone the frame turns portrait, and `cover` would show barely a third
   of a landscape photograph — a slice of one machine instead of a loaded
   trailer. So the photograph becomes a band across the top at close to its
   own proportions, dissolving into the hero's dark base: the whole load
   stays in shot, and the headline reads on ink below it. */
@media (max-width: 700px) {
  .hero-photo  {
    height: 42%;
    object-position: 50% 40%;
    -webkit-mask-image: linear-gradient(180deg, #000 56%, rgba(0, 0, 0, 0.3) 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 56%, rgba(0, 0, 0, 0.3) 86%, transparent 100%);
  }
  .hero-scrim  {
    background:
      linear-gradient(
        180deg,
        rgba(7, 6, 8, 0.72) 0%,
        rgba(7, 6, 8, 0.50) 18%,
        rgba(7, 6, 8, 0.70) 46%,
        rgba(7, 6, 8, 0.90) 100%
      );
  }
}

/* The scroll cue, at the foot of the frame. A real link to the next section,
   so it does something when it is clicked and reaches the keyboard. */
.hero-scroll  {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin-top: auto;
  padding: 10px 14px;
  font-family: var(--font-head);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.3s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.hero-scroll:hover  { color: var(--orange); }
.hero-scroll svg  { display: block; }

/* --- Entry --- */
/* CSS only, so there is no script between the photograph and the headline.
   Nothing starts hidden: with motion off the hero simply paints as built. */
@media (prefers-reduced-motion: no-preference) {
  .hero--photo .hero-photo  { animation: hero-settle 1.6s var(--ease, cubic-bezier(.22, 1, .36, 1)) both; }
  .hero--photo .hero-content > *,
.hero--photo .hero-scroll  {
    animation: hero-rise 0.9s var(--ease, cubic-bezier(.22, 1, .36, 1)) both;
  }
  .hero--photo .hero-content > :nth-child(2)  { animation-delay: 0.08s; }
  .hero--photo .hero-content > :nth-child(3)  { animation-delay: 0.16s; }
  .hero--photo .hero-content > :nth-child(4)  { animation-delay: 0.24s; }
  .hero--photo .hero-scroll  { animation-delay: 0.32s; }
  .hero--photo .hero-scroll svg  { animation: hero-nudge 2.4s var(--ease, cubic-bezier(.22, 1, .36, 1)) 1.2s infinite; }
}

@keyframes hero-rise  {
  from  { opacity: 0; transform: translateY(18px); }
}

@keyframes hero-settle  {
  from  { opacity: 0; transform: scale(1.04); }
}

@keyframes hero-nudge  {
  0%, 62%, 100%  { transform: none; }
  78%            { transform: translateY(5px); }
}

.card-link  {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: var(--orange-deep);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.card-link svg  { transition: transform 0.18s; }
.card-link:hover  { text-decoration: underline; }
.card-link:hover svg  { transform: translateX(3px); }

/* ---- Contact section ---- */
.contact-grid  {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) 1.08fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}

.contact-intro h2  { margin-bottom: 14px; }
.contact-channels  { margin-top: 28px; display: grid; gap: 20px; }
.channel  { display: flex; gap: 14px; align-items: flex-start; }

.channel > svg  { flex: none; margin-top: 5px; color: var(--orange); }

.channel .label  {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.channel a  { color: var(--ink); text-decoration: none; }
.channel a:hover  { color: var(--orange-deep); text-decoration: underline; }

.channel-phone a  {
  font-family: var(--font-head);
  font-size: var(--fs-num-lg);
  font-weight: 700;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
}

.channel p  { font-size: var(--fs-body); }
.channel .sub  { display: block; margin-top: 3px; font-size: var(--fs-xs); line-height: var(--lh-sm); color: var(--muted); }

/* ---- Form ---- */
.form-card  {
  padding: clamp(24px, 4vw, 38px);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  box-shadow: var(--shadow-soft);
}

.form-card h3  { margin-bottom: 6px; }
.form-card > p  { font-size: var(--fs-sm); margin-bottom: 22px; }

.form-grid  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field  { display: flex; flex-direction: column; gap: 6px; }
.field.full  { grid-column: 1 / -1; }

.field label  { font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-tight); color: var(--ink); }
.req  { color: var(--orange-deep); }

.field input,
.field select,
.field textarea  {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid #CFCFCB;
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field select  {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233F3F3F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.field textarea  { min-height: 130px; resize: vertical; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible  {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243, 107, 33, 0.22);
}

.field [aria-invalid="true"]  { border-color: #C0392B; }
.field [aria-invalid="true"]:focus-visible  { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18); }

.field-error  {
  font-size: var(--fs-2xs);
  line-height: var(--lh-sm);
  color: #B0301F;
  min-height: 0;
}

.hp-field  { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions  {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
}

.form-note  { font-size: var(--fs-xs); line-height: var(--lh-sm); color: var(--muted); }

.form-status  {
  grid-column: 1 / -1;
  display: none;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border-left: 3px solid var(--orange);
  background: var(--paper);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink);
}

.form-status.is-visible  { display: flex; }
.form-status.is-error  { border-left-color: #C0392B; background: #FBEEEC; }
.form-status a  { color: var(--orange-deep); }

/* ---- Page banner (subpages) ---- */
.page-banner  {
  position: relative;
  background: var(--ink);
  padding-block: clamp(54px, 8vw, 88px);
  border-bottom: 3px solid var(--orange);
  overflow: hidden;
}
.page-banner .wrap  { position: relative; z-index: 3; }
.page-banner h1  { color: var(--white); }
.page-banner p  { max-width: 640px; margin-top: 16px; font-size: var(--fs-lede); line-height: var(--lh-copy); color: var(--dim-on-dark); }

/* Circuit ambience (shares the homepage hero's visual language) — an
   animated canvas of orange "current" flowing through engineered conduit
   behind the page title. banner.js drives it; the gradient here is the
   reduced-motion / no-canvas fallback so the banner is never flat black. */
.page-banner--circuit  {
  isolation: isolate;
  background:
    radial-gradient(120% 128% at 72% 62%, rgba(243, 107, 33, 0.12), rgba(243, 107, 33, 0) 52%),
    radial-gradient(150% 130% at 50% 0%, #17130e 0%, #0c0b0d 44%, #060507 100%);
}
.page-banner--circuit .banner-canvas  {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* Left-weighted scrim keeps the title on rich contrast whatever the
   animation is doing behind it. */
.page-banner--circuit::before  {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(96deg, rgba(6, 5, 7, 0.92) 6%, rgba(6, 5, 7, 0.66) 52%, rgba(6, 5, 7, 0.32) 100%);
}
/* Fine industrial grain, matching the hero. */
.page-banner--circuit::after  {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Footer ---- */
.site-footer  {
  background: var(--ink);
  border-top: 3px solid var(--orange);
  color: var(--dim-on-dark);
}

.footer-grid  {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: clamp(30px, 4vw, 50px);
  padding-block: clamp(48px, 6vw, 66px) clamp(32px, 5vw, 46px);
}

.footer-brand img  { width: 272px; max-width: 100%; height: auto; margin-bottom: 18px; }
.footer-brand p  { font-size: var(--fs-sm); max-width: 320px; }

.site-footer h3  {
  color: var(--white);
  font-size: var(--fs-h6);
  letter-spacing: var(--ls-wide);
  margin-bottom: 16px;
}

.footer-links  { display: grid; gap: 9px; }

.footer-links a  { color: var(--dim-on-dark); font-size: var(--fs-sm); text-decoration: none; }
.footer-links a:hover  { color: var(--white); text-decoration: underline; }

.footer-contact  { display: grid; gap: 12px; }

.footer-contact li  {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: var(--fs-sm);
}

.footer-contact svg  { flex: none; margin-top: 4px; color: var(--orange); }
.footer-contact a  { color: var(--dim-on-dark); text-decoration: none; }
.footer-contact a:hover  { color: var(--white); text-decoration: underline; }

.footer-bottom  { border-top: 1px solid rgba(255, 255, 255, 0.1); }

.footer-bottom .wrap  {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px;
  font-size: var(--fs-2xs);
  color: var(--faint-on-dark);
}

.footer-bottom a  { color: var(--faint-on-dark); }
.footer-bottom a:hover  { color: var(--white); }

/* ---- Reveal animation ---- */
.js .reveal  {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

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

.js .reveal[data-delay="1"]  { transition-delay: 0.08s; }
.js .reveal[data-delay="2"]  { transition-delay: 0.16s; }
.js .reveal[data-delay="3"]  { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal  { opacity: 1; transform: none; transition: none; }
  .btn,
.card-link svg,
.nav-toggle .bar { transition: none !important; }

  /* The hero's entry is already gated on `prefers-reduced-motion:
     no-preference`; this is the belt-and-braces stop. */
  .hero--photo .hero-photo,
  .hero--photo .hero-content > *,
  .hero--photo .hero-scroll,
  .hero--photo .hero-scroll svg  {
    animation: none !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .footer-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {
  :root  { --header-h: 84px; }

  .brand img  { height: 50px; }
  .site-header.is-scrolled .brand img  { height: 44px; }

  .nav-toggle  { display: flex; }

  .site-nav  {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 10px 20px 16px;
    background: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  .site-nav.is-open  { display: flex; }

  .nav-links  { flex-direction: column; align-items: stretch; gap: 0; }

  .nav-links a  {
    padding: 14px 4px;
    font-size: var(--fs-lede);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .nav-links a::after  { display: none; }
  .nav-links a[aria-current="page"]  { color: var(--orange); }

  /* The links are the last thing in the dropdown now, so the final rule
     would hang above the panel's bottom padding. */
  .nav-links li:last-child a  { border-bottom: 0; }

  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .form-grid  { grid-template-columns: 1fr; }
  .field  { grid-column: 1 / -1; }
  .footer-grid  { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom .wrap  { flex-direction: column; }
  .hero  { min-height: 66vh; }
}

@media (max-width: 480px) {
  .hero-ctas .btn,
.form-actions .btn { width: 100%; }
  .brand img  { height: 44px; }
}

/* ---- Business hours ---- */
.hours-list  {
  display: grid;
  gap: 0;
  margin-top: 4px;
}

.hours-list li  {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.hours-list li:last-child  { border-bottom: 0; }

.hours-list .day  { font-weight: 600; color: var(--ink); }

.hours-list .day em  {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}

.hours-list .time  {
  font-family: var(--font-head);
  font-size: var(--fs-num);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
  color: var(--ink);
  white-space: nowrap;
}

.hours-note  {
  margin-top: 16px;
  font-size: var(--fs-xs);
  line-height: var(--lh-sm);
  color: var(--muted);
}

.address-lines  { font-size: var(--fs-body); line-height: var(--lh-snug); }
.address-lines a  { color: var(--ink); text-decoration: none; }
.address-lines a:hover  { color: var(--orange-deep); text-decoration: underline; }

/* ---- Footer emergency line ---- */
.footer-emergency  {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white);
}

.footer-emergency svg  { flex: none; margin-top: 3px; color: var(--orange); }
.footer-contact .address-lines a,
.footer-contact a  { color: var(--dim-on-dark); }

/* ---- Rentals: catalogue toolbar ----
   Replaces the photo-card template that stood here before RTD's catalogue
   arrived. With ~170 items a compact ruled list browses faster than cards,
   and it works with no photography. */
.sr-only  {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.catalogue-bar  {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.catalogue-search  {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  max-width: 420px;
}

.catalogue-search svg  {
  position: absolute;
  left: 14px;
  color: var(--muted);
  pointer-events: none;
}

.catalogue-search input  {
  width: 100%;
  padding: 12px 14px 12px 42px;
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid #CFCFCB;
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.catalogue-search input:focus-visible  {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243, 107, 33, 0.22);
}

.catalogue-status  {
  font-family: var(--font-head);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}

/* No search field without JS; the category links still work as anchors. */
.no-js .catalogue-search  { display: none; }

/* ---- Rentals: category chips ---- */
.cat-nav  {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: clamp(20px, 2.8vw, 28px);
  margin-bottom: clamp(24px, 3.2vw, 34px);
  border-bottom: 1px solid var(--line);
}

.cat-chip  {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-family: var(--font-head);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: var(--ls-head-sm);
  line-height: var(--lh-tight);
  color: var(--charcoal);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.cat-chip b  {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cat-chip:hover  { border-color: var(--charcoal); color: var(--ink); }
.cat-chip.is-active  { background: var(--ink); border-color: var(--ink); color: var(--white); }
.cat-chip.is-active b  { color: rgba(255, 255, 255, 0.62); }

/* ---- Rentals: equipment groups ---- */
.equip-group + .equip-group  { margin-top: clamp(30px, 3.6vw, 44px); }

.equip-group__title  {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--orange);
  font-size: var(--fs-h5);
  letter-spacing: var(--ls-head-sm);
}

.equip-group__count  {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.equip-list  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.equip-item  {
  padding: 13px 24px 14px 0;
  border-bottom: 1px solid var(--line);
}

.equip-item__name  {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-h6);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-head-sm);
  line-height: var(--lh-head);
  color: var(--ink);
}

.equip-item__note  {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  line-height: var(--lh-sm);
  color: var(--muted);
}

.equip-item__variants  {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
  padding: 0;
  list-style: none;
}

.equip-item__variants li  {
  padding: 3px 8px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--charcoal);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.catalogue-empty  {
  margin-top: 24px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  font-size: var(--fs-body);
}

.equip-group[hidden],
.equip-item[hidden]  { display: none; }

/* ---- Contact page: hours inside a channel ---- */
.channel .hours-list  { margin-top: 2px; }
.channel .hours-list li  { padding-block: 8px; }
.channel .card-link  { margin-top: 4px; }

/* ==========================================================================
   Responsive for the components above
   ========================================================================== */

@media (max-width: 1080px) {

  .cat-chip  { font-size: var(--fs-xs); padding: 7px 12px; }
}

@media (max-width: 1000px) {
  .equip-list  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {

  .catalogue-bar  { gap: 10px; }
  .catalogue-search  { flex-basis: 100%; max-width: none; }

  /* 17 categories wrap to most of a phone screen, so the chips become a
     swipeable strip that bleeds to the gutters to show it scrolls. Search
     is the primary way in on mobile. */
  .cat-nav  {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(clamp(20px, 4.5vw, 34px) * -1);
    padding-inline: clamp(20px, 4.5vw, 34px);
    padding-bottom: 18px;
  }

  .cat-nav::-webkit-scrollbar  { display: none; }
  .cat-chip  { flex: none; scroll-snap-align: start; }
}

@media (max-width: 620px) {
  .equip-list  { grid-template-columns: 1fr; }
  .equip-item  { padding-right: 0; }
}

/* ---- Footer hours: keep each time range on one line ---- */
.footer-hours  { display: grid; gap: 4px; }
.footer-hours b  { font-weight: 600; color: var(--white); white-space: nowrap; }