/* ==========================================================================
   MAX TEAM RENOVATION & CONSTRUCTION SERVICES LTD
   Design system. Built by Marca Mercari.
   Tokens follow "MAXTEAM Brand Guide & Visual Identity System".
   Colour ratio target: 60% white/neutral, 25% black/charcoal, 10% red, 5% blue.
   ========================================================================== */

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

:root {
  /* Brand */
  --red:        #B1271C;
  --red-dark:   #8E1F16;
  --red-tint:   #FBEFED;
  --black:      #000000;
  --charcoal:   #1A1A1A;
  --blue:       #123FE0;
  --white:      #FFFFFF;

  /* Extended neutrals */
  --concrete:   #F4F4F2;
  --line:       #E5E5E5;
  --line-dark:  #2E2E2E;
  --gray:       #6B6B6B;

  /* Semantic */
  --bg:         var(--white);
  --text:       var(--black);
  --text-muted: var(--gray);
  --text-invert:var(--white);

  /* Type */
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-display: clamp(3.25rem, 8.2vw, 6.25rem);
  --t-h1:      clamp(2.6rem, 6vw, 4.5rem);
  --t-h2:      clamp(2.1rem, 4.4vw, 3.25rem);
  --t-h3:      clamp(1.35rem, 2.2vw, 1.75rem);
  --t-h4:      1.125rem;
  --t-lead:    clamp(1.0625rem, 1.4vw, 1.1875rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-label:   0.75rem;

  /* Space */
  --gutter:  clamp(20px, 5vw, 40px);
  --section: clamp(68px, 9vw, 124px);
  --maxw:    1200px;
  --maxw-narrow: 720px;

  /* Form */
  --radius: 0px;
  --tap:    48px;
  --focus:  var(--blue);
  --dur:    180ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 2. BASE ------------------------------------------------------------ */

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

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

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

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

h1, h2, h3, h4 {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: 900; font-size: var(--t-h1); }
h2 { font-weight: 800; font-size: var(--t-h2); }
h3 { font-weight: 700; font-size: var(--t-h3); line-height: 1.05; }
h4 { font-family: var(--body); font-weight: 700; font-size: var(--t-h4); line-height: 1.35;
     text-transform: none; letter-spacing: 0; }

p  { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--red); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.on-dark :focus-visible { outline-color: #7E9BFF; }

ul { margin: 0; padding: 0; }

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

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--black); color: var(--white);
  padding: 12px 18px; font-weight: 700; text-decoration: none;
  transition: top var(--dur) ease;
}
.skip-link:focus { top: 8px; color: var(--white); }

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

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

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--concrete { background: var(--concrete); }
.section--dark { background: var(--charcoal); color: var(--text-invert); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p { color: #C9C9C9; }

/* Section head: eyebrow label + rule, per brand guide label spec */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--body); font-size: var(--t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--red); margin: 0 0 18px;
}
.eyebrow::after { content: ""; flex: 0 0 48px; height: 3px; background: var(--red); }
.eyebrow--center { justify-content: center; }
.on-dark .eyebrow { color: #FF6A5C; }
.on-dark .eyebrow::after { background: #FF6A5C; }

.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head p { color: var(--text-muted); font-size: var(--t-lead); margin-top: 16px; }
.section--dark .sec-head p { color: #B8B8B8; }

.sec-head--split {
  max-width: none; display: grid; gap: 20px 60px;
  grid-template-columns: 1fr; align-items: end;
}
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0,1fr) minmax(0,380px); }
  .sec-head--split .sec-head__aside { padding-bottom: 6px; }
}

.lead { font-size: var(--t-lead); color: var(--text-muted); }

/* --- 4. BUTTONS --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 13px 26px;
  font-family: var(--body); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background var(--dur) ease, color var(--dur) ease,
              border-color var(--dur) ease, transform var(--dur) ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn--primary { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: var(--white); }

.btn--dark { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--dark:hover { background: var(--red); border-color: var(--red); color: var(--white); }

.btn--outline { background: transparent; color: var(--black); border-color: var(--black); }
.btn--outline:hover { background: var(--black); color: var(--white); }

.btn--light { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--light:hover { background: transparent; color: var(--white); border-color: var(--white); }

.btn--onphoto { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn--onphoto:hover { background: var(--white); color: var(--black); border-color: var(--white); }

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

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Text link with arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.03em;
  text-transform: uppercase; text-decoration: none; color: var(--black);
  padding: 9px 0; min-height: var(--tap);
}
.arrow-link span { border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.arrow-link svg { transition: transform var(--dur) ease; }
.arrow-link:hover { color: var(--red); }
.arrow-link:hover svg { transform: translateX(5px); }
.on-dark .arrow-link { color: var(--white); }
.on-dark .arrow-link:hover { color: #FF6A5C; }

/* --- 5. MOCKUP NOTICE (remove at launch, see README) -------------------- */

.mockup-bar {
  background: var(--charcoal); color: var(--white);
  border-bottom: 2px solid var(--blue);
  font-size: 0.8125rem; line-height: 1.45; position: relative; z-index: 60;
}
.mockup-bar__in {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-block: 9px;
}
.mockup-bar strong { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; }
.mockup-bar p { margin: 0; flex: 1 1 260px; color: #B5B5B5; }
.mockup-bar strong { color: #8FA6FF; }
.mockup-bar button {
  background: transparent; border: 1px solid rgba(255,255,255,.5); color: var(--white);
  font: inherit; font-size: 0.75rem; padding: 5px 14px; cursor: pointer;
  min-height: 44px;
}
.mockup-bar button:hover { background: rgba(255,255,255,.15); }

/* --- 6. HEADER ---------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.site-header__in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 78px;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 50px; width: auto; }
@media (min-width: 640px) { .brand img { height: 62px; } }

.nav { display: none; }
@media (min-width: 1040px) {
  .nav { display: flex; align-items: center; gap: 30px; }
  .nav a {
    font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; text-decoration: none; color: var(--black);
    padding: 6px 0; border-bottom: 2px solid transparent;
  }
  .nav a:hover { color: var(--red); border-bottom-color: var(--red); }
  .nav a[aria-current="page"] { border-bottom-color: var(--red); }
}

.header-cta { display: none; }
@media (min-width: 1040px) { .header-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 10px 14px;
  background: var(--black); color: var(--white); border: 0; cursor: pointer;
  font: inherit; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
@media (min-width: 1040px) { .nav-toggle { display: none; } }
.nav-toggle__bars { display: grid; gap: 4px; }
.nav-toggle__bars i { display: block; width: 18px; height: 2px; background: currentColor; }

.mobile-nav {
  display: none; border-top: 1px solid var(--line); background: var(--white);
  padding-block: 12px 20px;
}
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 1040px) { .mobile-nav { display: none !important; } }
.mobile-nav ul { list-style: none; }
.mobile-nav a {
  display: block; padding: 14px 2px; min-height: var(--tap);
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  text-transform: uppercase; text-decoration: none; color: var(--black);
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--red); }
.mobile-nav .btn { margin-top: 20px; }

/* --- 7. HERO ------------------------------------------------------------ */

.hero { position: relative; background: var(--black); color: var(--white); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.76) 42%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.15) 100%);
}
.hero__in { padding-block: clamp(72px, 12vw, 148px); }
.hero__body { max-width: 640px; }
.hero__eyebrow {
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #FFB3AB; margin: 0 0 18px;
}
.hero h1 { font-size: var(--t-display); line-height: 0.88; }
.hero h1 em { font-style: normal; color: #FF5A4A; }
.hero__sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: #DEDEDE;
  max-width: 52ch; margin: 24px 0 34px;
}
.hero__foot {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22);
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  font-size: 0.875rem; color: #C6C6C6;
}
.hero__foot span { display: inline-flex; align-items: center; gap: 8px; }
.hero__foot svg { color: #FF5A4A; flex: none; }

/* Gerry in the hero. He sits behind the copy and rises out of the bottom edge
   of the section, cropped at the waist, so he reads as part of the scene rather
   than as a second column competing with the headline. A soft red over black
   wash sits behind him so a white shirt keeps its edge against whatever part of
   the photograph lands underneath. */

/* The copy is lifted into its own stacking context so the portrait, at
   z-index -1, can slide underneath it while still sitting above the photo
   and its scrim. */
.hero__in { position: relative; z-index: 1; }

.hero__figure { position: absolute; z-index: -1; bottom: 0; }
.hero__figure::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: -14%; translate: -50% 0;
  width: 178%; aspect-ratio: 1;
  background:
    radial-gradient(closest-side, rgba(177, 39, 28, 0.50), rgba(177, 39, 28, 0) 70%),
    radial-gradient(closest-side, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0) 74%);
}
.hero__portrait {
  display: block; width: auto; max-width: none;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.62));
}

/* Phones only. The copy runs the full width here and stops well above the foot
   of the section, so the hero grows a band of bottom padding for him to stand
   in. From 780px up the section is already tall enough and the band would just
   read as a hole under the copy. */
@media (max-width: 779px) {
  .hero__in { padding-bottom: calc(clamp(72px, 12vw, 148px) + 76px); }
}

/* Phone and tablet. There is no free column here, the copy runs the full width,
   so he is pushed off the right edge until only his face and near shoulder are
   in frame and the rest of him falls outside the viewport. The wash goes heavier
   too, because a white shirt over a sunlit photo has nowhere else to hide. */
@media (max-width: 1039px) {
  /* The portrait is a fixed 654 x 1104 crop, so its width is always its height
     x 0.5924. Everything below is derived from that one number, which is why it
     lives on the section: the figure offset, its size, and how much room the
     reassurance line has left over. */
  .hero { --gerry-h: clamp(340px, 106vw, 460px); }
  .hero__figure {
    /* Pushes a consistent 28% of him past the right edge at every screen size,
       which a percentage of the container would not do. `right` rather than a
       transform, because GSAP owns the transform on this element. */
    right: calc(var(--gerry-h) * 0.5924 * -0.28);
  }
  .hero__portrait { height: var(--gerry-h); }
  /* The buttons are solid blocks and read fine sitting over his jacket. This
     line is small grey text and does not, so it stops where he starts. On a
     phone that simply stacks it, which is no worse than the ragged two column
     wrap it had before. */
  .hero__foot {
    max-width: calc(100% - (var(--gerry-h) * 0.5924 * 0.72) - 14px);
  }
  .hero__figure::before {
    width: 150%; bottom: -10%;
    background:
      radial-gradient(closest-side, rgba(177, 39, 28, 0.46), rgba(177, 39, 28, 0) 70%),
      radial-gradient(closest-side, rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0) 76%);
  }
}

@media (min-width: 1040px) {
  .hero__figure {
    /* Anchored to the right edge of the content column, then pulled out toward
       the viewport edge as the screen widens past the 1200px wrap, so he never
       ends up standing in open space on a large monitor. Capped at 0 so he can
       never cross back into the headline on a narrow desktop. */
    right: clamp(-200px, calc((1200px - 100vw) / 2 + 40px), 0px);
  }
  .hero__portrait { height: min(62vh, 520px); }
}

@media (min-width: 1240px) {
  .hero__portrait { height: min(76vh, 660px); }
}

/* Page hero for interior pages */
.pagehero { position: relative; background: var(--black); color: var(--white); isolation: isolate; }
.pagehero__media { position: absolute; inset: 0; z-index: -2; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(0,0,0,.90), rgba(0,0,0,.62));
}
.pagehero__in { padding-block: clamp(56px, 8vw, 104px); }
.pagehero h1 { font-size: var(--t-h1); max-width: 20ch; }
.pagehero p { color: #D6D6D6; font-size: var(--t-lead); max-width: 56ch; margin-top: 24px; }

.crumbs {
  display: flex; gap: 8px; flex-wrap: wrap; list-style: none;
  font-size: 0.8125rem; color: #A9A9A9; margin: 0 0 20px;
}
.crumbs a { color: #D6D6D6; text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #6E6E6E; }

/* --- 8. QUICK CONTACT BAR ---------------------------------------------- */

.quickbar { background: var(--white); border-bottom: 4px solid var(--red); }
.quickbar__grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 780px) { .quickbar__grid { grid-template-columns: repeat(3, 1fr); } }
.quickbar__item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 24px 0; text-decoration: none; color: var(--black);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 780px) {
  .quickbar__item { padding: 30px 28px; border-bottom: 0; border-right: 1px solid var(--line); }
  .quickbar__item:first-child { padding-left: 0; }
  .quickbar__item:last-child { border-right: 0; padding-right: 0; }
}
.quickbar__item:last-child { border-bottom: 0; }
.quickbar__item:hover { color: var(--red); }
.quickbar__icon { flex: none; color: var(--red); margin-top: 3px; }
.quickbar__label {
  display: block; font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray);
}
.quickbar__value { display: block; font-family: var(--display); font-size: 1.5rem;
  font-weight: 800; text-transform: uppercase; line-height: 1.1; margin-top: 2px; }
.quickbar__note { display: block; font-size: 0.875rem; color: var(--gray); margin-top: 3px; }

/* --- 9. BEFORE / AFTER (signature component) ---------------------------- */

.ba {
  --pos: 50%;
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--charcoal); user-select: none; touch-action: pan-y;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; }
.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 4px; margin-left: -2px; background: var(--red); pointer-events: none;
}
.ba__knob {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 54px; height: 54px; background: var(--red); color: var(--white);
  display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(0,0,0,.18);
}
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 100%; background: transparent; }
.ba__range::-moz-range-thumb { width: 1px; height: 100%; border: 0; background: transparent; }
.ba:has(.ba__range:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }

.ba__tag {
  position: absolute; top: 16px; z-index: 2;
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 7px 13px; pointer-events: none;
}
.ba__tag--before { left: 16px; background: rgba(0,0,0,.78); color: var(--white); }
.ba__tag--after  { right: 16px; background: var(--white); color: var(--black); }

.ba-split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .ba-split { grid-template-columns: 1.25fr 1fr; } }

.ba-hint {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: 0.875rem; font-weight: 600; color: var(--gray);
}
.ba-hint svg { color: var(--red); }

.ba-card { border: 1px solid var(--line); background: var(--white); }
.ba-card__body { padding: 22px 24px 26px; }
.ba-card__meta {
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--red); margin-bottom: 8px;
}
.ba-card__body p { color: var(--text-muted); font-size: var(--t-small); margin-top: 8px; }

/* --- 10. SERVICE CARDS -------------------------------------------------- */

.grid { display: grid; gap: clamp(24px, 3vw, 34px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
/* Four testimonials want a clean 2 by 2, not the 3 plus 1 that auto-fit gives
   at desktop width. */
.grid--quotes { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid--quotes { grid-template-columns: repeat(2, 1fr); } }

.svc {
  display: flex; flex-direction: column; text-decoration: none; color: var(--black);
  background: var(--white); border: 1px solid var(--line);
  transition: border-color var(--dur) ease, transform var(--dur) ease;
}
.svc:hover { border-color: var(--black); transform: translateY(-3px); color: var(--black); }
.svc__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.svc__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.svc:hover .svc__media img { transform: scale(1.05); }
.svc__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.svc h3 { margin-bottom: 10px; }
.svc:hover h3 { color: var(--red); }
.svc p { color: var(--text-muted); font-size: var(--t-small); flex: 1; }
.svc__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--red);
}
.svc:hover .svc__more svg { transform: translateX(4px); }
.svc__more svg { transition: transform var(--dur) ease; }

/* --- 11. TRUST POINTS --------------------------------------------------- */

.trust { display: grid; gap: clamp(30px, 4vw, 46px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.trust--stack { grid-template-columns: 1fr; }
.trust__item { padding-top: 20px; border-top: 3px solid var(--red); }
.trust__item h3 { font-size: 1.375rem; margin-bottom: 8px; }
.trust__item p { color: var(--text-muted); font-size: var(--t-small); }
.trust__icon { color: var(--red); margin-bottom: 14px; }

/* --- 12. PROCESS (a real sequence, so it is numbered) ------------------- */

.process { display: grid; gap: 0; }
.process__step {
  display: grid; gap: 6px 28px; padding-block: 26px;
  border-top: 1px solid var(--line);
  grid-template-columns: 96px 1fr;
  align-items: start;
}
@media (min-width: 820px) {
  .process__step { grid-template-columns: 150px minmax(190px, 250px) 1fr; align-items: baseline; gap: 8px 40px; }
}
.process__step:last-child { border-bottom: 1px solid var(--line); }
.process__n {
  font-family: var(--display); font-size: 2.25rem; font-weight: 900;
  line-height: 1; color: var(--red);
}
.process__step h3 { font-size: 1.5rem; }
.process__step p { color: var(--text-muted); font-size: var(--t-small); grid-column: 2 / -1; }
@media (min-width: 820px) { .process__step p { grid-column: 3; } }
.section--dark .process__step { border-color: var(--line-dark); }
.section--dark .process__step p { color: #B8B8B8; }
.section--dark .process__n { color: #FF5A4A; }

/* --- 13. TESTIMONIALS --------------------------------------------------- */

.quote { border-top: 3px solid var(--red); padding-top: 22px; }
.quote blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.65; }
.quote blockquote p::before { content: "\201C"; }
.quote blockquote p::after  { content: "\201D"; }
.quote__by { margin-top: 18px; font-size: var(--t-small); }
.quote__by strong { display: block; font-weight: 700; }
.quote__by span { color: var(--text-muted); }
.section--dark .quote__by span { color: #A0A0A0; }

/* --- 14. PROJECT GALLERY ------------------------------------------------ */

.gallery { display: grid; gap: 6px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--concrete); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 20px 18px; color: var(--white);
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  font-size: var(--t-small); font-weight: 600;
}
.gallery figcaption em { display: block; font-style: normal; font-weight: 400;
  font-size: 0.8125rem; color: #CFCFCF; margin-top: 2px; }

/* --- 15. CTA BAND ------------------------------------------------------- */

.ctaband { position: relative; background: var(--black); color: var(--white); isolation: isolate; }
.ctaband__media { position: absolute; inset: 0; z-index: -2; }
.ctaband__media img { width: 100%; height: 100%; object-fit: cover; }
.ctaband::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 55%, rgba(0,0,0,.55) 100%);
}
.ctaband__in { padding-block: clamp(60px, 8vw, 104px); }
.ctaband__grid { display: grid; gap: clamp(34px, 5vw, 64px); }
@media (min-width: 940px) { .ctaband__grid { grid-template-columns: 1fr minmax(400px, 460px); } }
.ctaband h2 { color: var(--white); margin-bottom: 18px; }
.ctaband p { color: #CFCFCF; }
.ctaband__points { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.ctaband__points li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-small); color: #DEDEDE; }
.ctaband__points svg { flex: none; color: #FF5A4A; margin-top: 3px; }

/* --- 16. FORMS ---------------------------------------------------------- */

.formcard { background: var(--white); color: var(--black); padding: clamp(24px, 3.4vw, 36px); border-top: 5px solid var(--red); }
.formcard h3 { font-size: 1.75rem; margin-bottom: 6px; }
.formcard > p { color: var(--text-muted); font-size: var(--t-small); margin-bottom: 24px; }

.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 7px;
}
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  font-family: var(--body); font-size: 1rem; color: var(--black);
  background: var(--white); border: 1px solid #BFBFBF; border-radius: var(--radius);
  transition: border-color var(--dur) ease;
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--black); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }
.field__hint { font-size: 0.8125rem; color: var(--gray); margin-top: 6px; }

.field-row { display: grid; gap: 18px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.form-note { font-size: 0.8125rem; color: var(--gray); margin-top: 14px; }

.form-status {
  display: none; margin-top: 18px; padding: 16px 18px;
  border-left: 4px solid var(--red); background: var(--red-tint);
  font-size: var(--t-small);
}
.form-status[data-visible="true"] { display: block; }
.form-status strong { display: block; font-weight: 700; margin-bottom: 3px; }

/* Success reads green so it is not mistaken for the error state at a glance.
   Colour is never the only signal: the wording differs and so does the icon
   free heading, which is what a colour blind visitor actually reads. */
.form-status[data-state="success"] {
  border-left-color: #1B7A3E; background: #EDF7F0;
}
.form-status[data-state="error"] {
  border-left-color: var(--red); background: var(--red-tint);
}

/* Contrast on #EDF7F0 and #FBEFED both clear 4.5:1 against the body colour. */
.form-status__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.form-status__links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 10px 16px;
  background: var(--black); color: #fff; text-decoration: none;
  font-weight: 700; font-size: var(--t-small);
}
.form-status__links a:hover { background: var(--red); }

/* Server side validation message, sat under the input it belongs to. */
.field__error {
  margin: 6px 0 0; font-size: var(--t-small); font-weight: 600; color: #8E1E15;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--red);
}

.form-note--warn { border-left: 3px solid var(--red); padding-left: 12px; }

/* Honeypot. Off screen rather than display:none, because a bot that fills
   every field is exactly what this is here to catch. */
.hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- 17. FAQ ------------------------------------------------------------ */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; min-height: var(--tap); cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.375rem; font-weight: 700;
  text-transform: uppercase; line-height: 1.15;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary .faq__sign {
  flex: none; width: 26px; height: 26px; position: relative; color: var(--red);
}
.faq summary .faq__sign::before,
.faq summary .faq__sign::after {
  content: ""; position: absolute; background: currentColor; inset-block: 12px; inset-inline: 0; height: 2px;
}
.faq summary .faq__sign::after { rotate: 90deg; transition: rotate var(--dur) ease; }
.faq details[open] summary .faq__sign::after { rotate: 0deg; }
.faq details[open] summary { color: var(--red); }
.faq__answer { padding: 0 0 24px; max-width: 68ch; color: var(--text-muted); }

/* --- 18. SPLIT CONTENT -------------------------------------------------- */

/* A heading in a split column is never left sitting on its body copy.
   .trust__item h3 is more specific, so trust cards keep their tighter gap. */
.split h2, .split h3, .ba-split h2, .ba-split h3 { margin-bottom: 18px; }
.split .eyebrow + h2, .ba-split .eyebrow + h2 { margin-bottom: 18px; }

/* Stacked splits, one service after another down the services page. */
.split--stacked + .split--stacked, .split--stacked { margin-bottom: clamp(56px, 7vw, 96px); }
.split--stacked:last-child { margin-bottom: 0; }

.split { display: grid; gap: clamp(30px, 4.5vw, 66px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-right .split__media { order: 2; }
}
.split__media img { width: 100%; }
.split__media--stack { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; align-items: start; }
.split__media--stack img:first-child { margin-top: 34px; }

.statrow { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 34px; }
.stat__n { font-family: var(--display); font-size: 3rem; font-weight: 900; line-height: 1; color: var(--red); }
.stat__l { font-size: var(--t-small); color: var(--text-muted); margin-top: 4px; }
.section--dark .stat__l { color: #A8A8A8; }

.ticklist { list-style: none; display: grid; gap: 13px; margin-top: 22px; }
.ticklist li { display: flex; gap: 13px; align-items: flex-start; font-size: var(--t-body); }
.ticklist svg { flex: none; color: var(--red); margin-top: 5px; }

/* --- 19. FOOTER --------------------------------------------------------- */

.site-footer { background: var(--black); color: #B9B9B9; border-top: 5px solid var(--red); }
.site-footer__grid {
  display: grid; gap: 40px; padding-block: clamp(48px, 6vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.site-footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .site-footer__brand { grid-column: auto; max-width: 320px; } }
.site-footer__brand img { height: 60px; width: auto; background: var(--white); padding: 10px 14px; }
.site-footer__brand p { margin-top: 18px; font-size: var(--t-small); }
/* h2 so the heading order never skips, including on the 404 page where
   the footer follows the h1 directly. */
.site-footer h2 {
  color: var(--white); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px;
}
.site-footer ul { list-style: none; display: grid; gap: 4px; }
.site-footer li { font-size: var(--t-small); line-height: 1.5; }
.site-footer li a { display: inline-block; padding: 7px 0; }
/* Footer links are navigation, not prose, so they get real touch targets. */
@media (max-width: 779px) {
  .site-footer ul { gap: 0; }
  .site-footer li { padding: 6px 0; }
  .site-footer li a { display: block; padding: 13px 0; }
}
.site-footer a { color: #B9B9B9; text-decoration: none; font-size: var(--t-small); }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer__bar {
  border-top: 1px solid var(--line-dark); padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 0.8125rem;
}
.site-footer__bar p { margin: 0; }
.site-footer__mm { display: inline-flex; align-items: center; gap: 8px; }

.socials { display: flex; gap: 10px; }
.socials a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-dark); color: #B9B9B9;
}
.socials a:hover { background: var(--red); border-color: var(--red); color: var(--white); }

/* --- 20. STICKY MOBILE CALL BAR (contracted: every page, mobile) -------- */

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.2);
}
@media (min-width: 780px) { .mobile-cta { display: none; } }
.mobile-cta a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 56px; text-decoration: none; color: var(--white);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.mobile-cta a:first-child { background: var(--red); }
.mobile-cta a:last-child  { background: var(--black); }
@media (max-width: 779px) { body { padding-bottom: 56px; } }

/* --- 20b. PHOTO GALLERY -------------------------------------------------- */
/* Its own page. 52 photographs, filterable by trade, each one openable full
   size. Every control is a real <button>, so keyboard and screen reader work
   without any extra handling. */

.gfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 10px 16px;
  border: 1px solid var(--line); background: var(--white); color: var(--text);
  font-family: var(--body); font-size: var(--t-small); font-weight: 600;
  cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.chip:hover { border-color: var(--black); }
.chip__n {
  display: inline-block; min-width: 22px; padding: 1px 6px;
  background: var(--concrete); color: var(--gray);
  font-size: 0.75rem; font-weight: 700; text-align: center;
}
/* aria-pressed is the state, so the styling hangs off it rather than a class */
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); }
.chip[aria-pressed="true"] .chip__n { background: rgba(255,255,255,.22); color: var(--white); }

.gcount { margin: 0 0 18px; font-size: var(--t-small); color: var(--text-muted); }
.gempty { margin: 40px 0; font-size: var(--t-small); color: var(--text-muted); }

.ggrid { display: grid; gap: 6px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .ggrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .ggrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .ggrid { grid-template-columns: repeat(4, 1fr); } }

.gitem { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--concrete); }
.gitem[hidden] { display: none; }
.gitem__btn {
  display: block; width: 100%; height: 100%; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.gitem__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.gitem__btn:hover img { transform: scale(1.04); }
.gitem__zoom {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 36px; height: 36px;
  background: rgba(0,0,0,.55); color: var(--white);
  opacity: 0; transition: opacity 200ms ease;
}
.gitem__btn:hover .gitem__zoom,
.gitem__btn:focus-visible .gitem__zoom { opacity: 1; }
.gitem figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  padding: 40px 20px 18px; color: var(--white);
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  font-size: var(--t-small); font-weight: 600;
}
.gitem figcaption em { display: block; font-style: normal; font-weight: 400;
  font-size: 0.8125rem; color: #CFCFCF; margin-top: 2px; }

/* Video tiles. Same grid cell as a photograph, with a play badge and the
   running time, so nobody taps into a two minute clip by accident. */
.gitem__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 58px; height: 58px;
  border-radius: 50%; background: rgba(177,39,28,.92); color: #fff;
  transition: transform 200ms ease, background 200ms ease;
}
.gitem__btn:hover .gitem__play { background: var(--red); transform: translate(-50%, -50%) scale(1.08); }
.gitem__dur {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 8px; background: rgba(0,0,0,.72); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .02em;
}
.gitem--video .gitem__zoom { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gitem__play { transition: none; }
  .gitem__btn:hover .gitem__play { transform: translate(-50%, -50%); }
}

/* --- lightbox ----------------------------------------------------------- */

.lightbox {
  /* Above the sticky header (50), the mobile call bar (70) and the skip link
     (200). A modal that lets the header show through is not a modal. */
  position: fixed; inset: 0; z-index: 300;
  display: grid; align-items: center;
  grid-template-columns: 64px 1fr 64px;
  background: rgba(0,0,0,.94);
}
.lightbox[hidden] { display: none; }
.lightbox__bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px;
}
.lightbox__count { margin: 0; color: #B9B9B9; font-size: var(--t-small); font-weight: 600; }
.lightbox__close, .lightbox__nav {
  display: grid; place-items: center;
  min-width: var(--tap); min-height: var(--tap);
  border: 0; background: rgba(255,255,255,.10); color: var(--white); cursor: pointer;
  transition: background 160ms ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--red); }
.lightbox__nav { justify-self: center; width: 48px; height: 48px; }
.lightbox__fig {
  grid-column: 2; margin: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 64px 0 28px;
}
.lightbox__fig img,
.lightbox__fig video {
  max-width: 100%; max-height: calc(100vh - 170px);
  width: auto; height: auto; object-fit: contain;
}
.lightbox__fig video { background: #000; }
.lightbox__fig [hidden] { display: none; }
.lightbox__fig figcaption {
  color: var(--white); font-size: var(--t-small); font-weight: 600; text-align: center;
  max-width: 60ch;
}
.lightbox__fig figcaption em {
  display: block; font-style: normal; font-weight: 400; color: #B9B9B9; margin-top: 3px;
}

/* On a phone the arrows move under the picture, so the photograph itself gets
   the full width rather than losing 128px to two buttons. */
@media (max-width: 700px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox__fig { grid-column: 1; grid-row: 1; padding: 58px 12px 8px; }
  .lightbox__fig img,
  .lightbox__fig video { max-height: calc(100vh - 230px); }
  /* Both arrows share one grid cell and are pushed to opposite ends, rather
     than being dragged into line with a negative margin. */
  .lightbox__nav {
    grid-column: 1; grid-row: 2; width: 56px; height: 56px; margin: 0 18px 22px;
  }
  .lightbox__nav--prev { justify-self: start; }
  .lightbox__nav--next { justify-self: end; }
}

/* The sticky call bar is z-index 70, well under the lightbox, but it still sits
   exactly where the mobile arrows land. Take it out while the viewer is open:
   the photograph is the job, and Call and WhatsApp are one tap away on close. */
body.lb-open .mobile-cta { display: none; }

body.lb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .gitem__btn img, .gitem__zoom, .chip { transition: none; }
  .gitem__btn:hover img { transform: none; }
}

/* --- 21. UTILITIES ------------------------------------------------------ */

.center { text-align: center; }
.mt-l { margin-top: clamp(32px, 4vw, 48px); }
.stack-sm > * + * { margin-top: 12px; }

/* --- 22. MOTION --------------------------------------------------------
   Driven by GSAP + ScrollTrigger in site.js. Deliberately almost nothing
   lives here.

   Nothing on this page is hidden by CSS. Every start state is set at runtime
   by GSAP, which writes inline styles, and inline styles beat stylesheets.
   That means: JavaScript off, GSAP failed to load, or a tween that never
   ran, and the page is simply a normal, fully visible page. An earlier
   version pre-hid elements in CSS and revealed them with a class, and a
   specificity collision left the gallery permanently invisible. This
   approach makes that class of bug impossible.

   The only two things CSS owns are the chalk line variable, because GSAP
   cannot touch a pseudo element directly, and the header shadow.
   ---------------------------------------------------------------------- */

/* Chalk line. Defaults to 1, so with no JS the rule is simply drawn. */
.eyebrow::after { transform: scaleX(var(--line-scale, 1)); transform-origin: left center; }

/* Parallax needs overscan, or moving the photo would expose the edge.
   The section must clip, or that overscan spills over its neighbours
   without the dark scrim that sits on top of the photo. */
.hero,
.pagehero,
.ctaband { overflow: hidden; }

.hero__media,
.pagehero__media,
.ctaband__media { inset: -9% 0; }

.hero__media img,
.pagehero__media img,
.ctaband__media img { will-change: transform; }

/* Headline mask. Each line clips its own inner span, which GSAP slides up. */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero h1 .line > span { display: block; }

.site-header { transition: box-shadow var(--dur) ease; }
.site-header.is-stuck { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13); }

@media (prefers-reduced-motion: reduce) {
  .site-header.is-stuck { box-shadow: none; }
  .hero__media, .pagehero__media, .ctaband__media { inset: 0; }
}

/* --- 23. LOADING SCREEN ------------------------------------------------
   Shown once per browser session, never under reduced motion. The markup
   is in the page but display:none by default; an inline script in <head>
   adds .has-loader to <html> only when it should appear. So JavaScript off
   means no loader at all, and no flash of one either.

   The keyframe below is a failsafe. If the dismiss script never runs, for
   any reason, CSS alone clears the overlay at 5s. A loading screen that can
   trap the page is worse than no loading screen.
   ---------------------------------------------------------------------- */

.loader { display: none; }

.has-loader .loader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--black);
  padding: var(--gutter);
  animation: loaderFailsafe 5s forwards;
  transition: transform 620ms cubic-bezier(0.76, 0, 0.24, 1),
              opacity 260ms ease 360ms;
}

/* The overlay lifts away like a shutter going up. */
.has-loader .loader.is-done {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

@keyframes loaderFailsafe {
  0%, 92%  { transform: translateY(0); opacity: 1; }
  100%     { transform: translateY(-100%); opacity: 0; visibility: hidden; }
}

.has-loader body { overflow: hidden; }

.loader__inner {
  width: min(640px, 100%);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 22px;
}

/* The logo carries black lettering, so on a black field it needs a plate.
   Same treatment the footer already uses. */
.loader__logo {
  height: 58px; width: auto;
  background: var(--white);
  padding: 9px 16px;
  opacity: 0;
  animation: loaderIn 500ms ease 60ms forwards;
}
@media (min-width: 640px) { .loader__logo { height: 68px; } }

.loader__stage {
  width: min(460px, 82vw);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: loaderIn 620ms ease 200ms forwards;
}
.loader__stage img,
.loader__stage video {
  width: 100%; height: 100%;
  object-fit: contain;
}

.loader__word {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--white);
  opacity: 0;
  animation: loaderIn 520ms ease 380ms forwards;
}
.loader__word em { font-style: normal; color: #FF5A4A; }

.loader__bar {
  width: min(280px, 70vw);
  height: 4px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.loader__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  animation: loaderBar 1250ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.loader.is-done .loader__bar span { width: 100%; transition: width 220ms ease; }

@keyframes loaderIn  { to { opacity: 1; } }
@keyframes loaderBar { to { width: 88%; } }

/* --- 24. MASCOTS -------------------------------------------------------
   The supplied 3D crew, used as accents only. They sit on flat brand
   backgrounds, never on top of photography, so the glossy render never
   fights the editorial layout.
   ---------------------------------------------------------------------- */

.mascot {
  display: block;
  width: auto;
  height: auto;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.28));
}

/* Step marker: mascot sitting above its number. */
.process__marker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.process__marker .mascot { max-height: 92px; }
@media (min-width: 820px) {
  .process__marker .mascot { max-height: 132px; }
}

.section--dark .mascot { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); }

/* --- Standing on something -------------------------------------------
   Any mascot that must look planted rather than floating uses .mascot-stand.
   Three things make it work, and all three are needed:
     1. the rule is a border-BOTTOM, so there is ground under the feet
     2. the image is trimmed to its own alpha, so the bottom edge of the file
        is the sole of the boot, and it is pulled down by the border width
     3. filter is none, because the standard drop-shadow renders below the
        box and would print across the line it is meant to be standing on
   If a mascot ever looks like it is hanging in the sky, it is missing this.
   ---------------------------------------------------------------------- */
.mascot-stand {
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 2.5vw, 26px);
  border-bottom: 3px solid var(--red);
}
.mascot-stand .mascot {
  flex: none;
  margin-bottom: 0;      /* soles land exactly on the top edge of the rule */
  filter: none;
}

/* Contact page: figure with a line of copy beside it. */
.mascot-aside { margin-top: clamp(28px, 4vw, 40px); }
.mascot-aside .mascot { max-height: 172px; }
.mascot-aside p {
  color: var(--text-muted);
  font-size: var(--t-small);
  margin: 0;
  padding-bottom: 24px;
}

/* 404 */
.notfound { text-align: center; padding-block: clamp(60px, 10vw, 130px); }
.notfound .mascot { max-height: 290px; margin: 0 auto clamp(28px, 4vw, 40px); }
.notfound h1 { font-size: var(--t-h1); }
.notfound p { color: var(--text-muted); font-size: var(--t-lead); max-width: 46ch; margin: 20px auto 0; }
.notfound .btn-row { justify-content: center; margin-top: clamp(28px, 4vw, 38px); }
.notfound__call { margin-top: 28px; }
.notfound__code {
  font-family: var(--display); font-weight: 900; line-height: 1;
  font-size: clamp(4rem, 12vw, 8rem); color: var(--red); margin-bottom: 4px;
}

/* Trust cards where the crew replaces the line icon. */
.trust__figure { display: flex; align-items: flex-end; min-height: 130px; margin-bottom: 16px; }
.trust__figure .mascot { max-height: 130px; }
@media (min-width: 700px) {
  .trust__figure { min-height: 150px; }
  .trust__figure .mascot { max-height: 150px; }
}

/* Service blocks: a mascot standing beside the section number. */
.svc-lead { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 14px; }
.svc-lead__figure { flex: none; }
.svc-lead__figure .mascot { max-height: 118px; }
@media (min-width: 700px) { .svc-lead__figure .mascot { max-height: 152px; } }
.svc-lead .eyebrow { margin: 0 0 6px; }

/* CTA band: the copy column becomes a flex column so the mascot can be
   pushed to its foot, which also closes the dead space that opened up
   beside the taller form card. */
.ctaband__grid > div:first-child { display: flex; flex-direction: column; }
.ctaband__mascot { margin-top: auto; padding-top: clamp(26px, 4vw, 40px); }
.ctaband__mascot .mascot { max-height: 190px; }
@media (min-width: 940px) { .ctaband__mascot .mascot { max-height: 235px; } }

@media (prefers-reduced-motion: reduce) {
  .loader__logo, .loader__stage, .loader__word { opacity: 1; animation: none; }
  .loader__bar span { width: 100%; animation: none; }
}