/* ============================================================================
   SECTIONS — one block per section of the page.

   Every rule is keyed to a class, never to DOM position, so that when these
   sections become WordPress template parts and the client reorders them in
   the admin, nothing here breaks.
   ========================================================================= */

/* ══════════════════════════════════════════════════════════════ header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(21, 24, 26, .07); }

.site-header__in {
  display: flex; align-items: center; gap: 2rem;
  min-height: var(--header-h);
}

.site-brand {
  display: flex; align-items: center; gap: 1.1rem;
  /* Never shrink. With min-width:0 the row squeezed this box narrower than
     the Arabic name inside it, and the name — which cannot wrap — spilled
     out over the first menu item. If it ever stops fitting, the brand is
     meant to stack (see the 1280px rule below), not to overlap anything. */
  flex: 0 0 auto;
}
.site-brand .sys-mark { --cap: 21px; flex: none; }

.site-ar {
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--red);
  white-space: nowrap;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
}

.site-nav {
  margin-left: auto;
  align-self: stretch;
  display: flex; align-items: center;
  gap: 1.5rem;
}
.site-nav > ul {
  align-self: stretch;
  display: flex; align-items: center;
  gap: 1.15rem;
}
/* each item fills the header's height so the flyout below it starts flush */
.site-nav > ul > li { display: flex; align-items: center; }
/* scoped to the list, not to every link inside the nav: a bare `.site-nav a`
   is more specific than `.btn--primary` and was repainting the red call
   button's label charcoal on red */
.site-nav > ul a {
  font-family: var(--font-display);
  /* A fixed size, not a vw clamp. The bar is capped at --max, so a label
     that grows with the viewport eats the space between the Arabic name and
     the first menu item — the gap shrank from 50px to 26px between a 1240
     and a 1600 screen for no reason anyone wanted. */
  font-size: .875rem; font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-block: .35rem;
  /* A menu item is a label, not a paragraph. Without this the flex row was
     trimming two or three pixels off each item and "How We Work" and "Why
     Us" dropped their last word onto a second line — at 1440px, with 140px
     of the bar still empty. */
  white-space: nowrap;
}
.site-nav > ul a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--red);
  transition: right .22s ease;
}
.site-nav > ul a:hover::after,
.site-nav > ul a.is-active::after { right: 0; }
.site-call { padding: .6rem 1.05rem; font-size: .875rem; white-space: nowrap; }

.site-nav .has-sub { position: relative; }
.site-sub {
  position: absolute; left: -.9rem; top: 100%;
  /* -1px so the panel overlaps the header's bottom border: a 1px gap is
     enough for the pointer to leave the item and close the panel */
  margin-top: -1px;
  z-index: 10;
  display: none;
  min-width: 288px;
  padding: .4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 18px 38px rgba(21, 24, 26, .16);
}
.has-sub:hover > .site-sub,
.has-sub:focus-within > .site-sub { display: block; }
.site-nav > ul .site-sub a {
  display: block;
  padding: .58rem .75rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 500;
  color: var(--body);
}
.site-nav > ul .site-sub a::after { display: none; }
.site-nav > ul .site-sub a:hover { background: var(--bone); color: var(--ink); }
.site-sub a b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: .1rem;
}

.site-burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 38px;
  padding: 9px 8px;
  background: none; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer;
}
.site-burger span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .22s ease, opacity .18s ease;
}
.site-burger span + span { margin-top: 5px; }
.site-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1239px) {
  /* no room beside the mark any more, so the name goes under it */
  .site-brand { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .site-ar {
    border-left: 0; padding-left: 0;
    font-size: .82rem; line-height: 1.35;
  }
}
@media (max-width: 1100px) {
  .site-burger { display: block; align-self: center; }
  .site-brand .sys-mark { --cap: 17px; }
  .site-ar { font-size: .74rem; }
  .site-header__in { padding-block: .55rem; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px rgba(21, 24, 26, .10);
    padding: .5rem var(--gutter) 1.25rem;
    /* closed by default; opened by .is-open from site.js */
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul a {
    display: block; padding: .85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.02rem;
  }
  .site-nav > ul a::after { display: none; }
  .site-call { margin-top: 1rem; justify-content: center; }

  .site-nav > ul > li { display: block; }
  .nav-chev { display: none; }
  .site-sub {
    position: static;
    display: block;
    margin: 0 0 .4rem;
    min-width: 0;
    padding: .1rem 0 .1rem 1rem;
    background: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .site-nav > ul .site-sub a {
    padding: .62rem 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: .95rem;
  }
  .site-nav > ul .site-sub li:last-child a { border-bottom: 0; }
  .site-nav > ul .site-sub a:hover { background: none; }
}

/* ════════════════════════════════════════════════════════════════ hero */
/* The photographs ARE the hero: the slideshow runs full bleed at the top of
   the page with the copy over them. The copy keeps the approved look — white
   plate, charcoal type, one red — so instead of darkening the picture and
   reversing the type out of it, the picture is washed to white under the
   words. Client's instruction, 2026-10-10.

   Every number here was chosen to hold contrast on the worst frame in the
   set, not on the prettiest one — the black cabinet sits exactly behind the
   card. check-page.py samples the real pixels behind each line on every
   frame and fails the build below AA; the plate's own comment has the
   measured figures. */
.hero {
  position: relative;
  /* the plate, the wash, the dots and the wave stack inside the hero and
     never over the sticky header */
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 76vh, 840px);
  padding-block: clamp(2.4rem, 1.4rem + 3.2vw, 4.6rem);
  /* behind the first paint, and behind the frames while one lazy-loads:
     charcoal, never a white flash */
  background: var(--ink-2);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media .slider,
.hero__media .slider__track,
.hero__media .slider__slide { height: 100%; }

.hero__wash {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(96deg,
      rgba(255, 255, 255, .94)  0%,
      rgba(255, 255, 255, .82) 28%,
      rgba(255, 255, 255, .40) 54%,
      rgba(255, 255, 255, .06) 78%,
      rgba(255, 255, 255,   0) 100%);
}

.hero__inner { position: relative; z-index: 2; }

.hero__plate {
  /* Not a taste: "Three licensed divisions." measures 686px at the headline's
     capped size, and the plate has to hold it on ONE line or the designed
     two-line headline breaks into a ragged three. 50rem leaves a 720px text
     column at 1440 and still leaves 480px of photograph beside it; the 72%
     keeps the photograph from being squeezed to a sliver on the narrow side
     of the breakpoint. Measured at every width from 1101 to 1920 — the
     smallest margin anywhere on that ramp is 44px, and check-page.py fails
     the build if the headline ever takes a third line above 560px. */
  max-width: min(51rem, 72%);
  padding: clamp(1.5rem, 1.0rem + 1.7vw, 2.7rem) clamp(1.35rem, 0.8rem + 1.9vw, 2.7rem);
  /* .90 is the floor for a browser with NO backdrop-filter: it holds AA on
     the darkest frame on its own. The @supports block below is what most
     visitors get — see it for the numbers. */
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 18px 50px rgba(21, 24, 26, .18),
    0 3px 12px rgba(21, 24, 26, .10);
}

/* The owner asked (2026-10-10, evening) for the photograph to show THROUGH
   the card, not just beside it, with the type still perfectly readable. The
   two pull against each other on the darkest frame — the black cabinet sits
   exactly behind the card — so the numbers here are measured, not chosen:
   at .76 over a 20px blur the charcoal lines stay above 9:1 and the red
   "One contract." (60px, so AA asks 3.0) holds 3.3:1; one step lower, .72,
   it drops to 3.05, and at .70 it fails. The small red eyebrow cannot
   survive any of that on its own (3.9:1 at .72, AA wants 4.5), so it sits
   on its own white chip — the only line that gets one. check-page.py samples
   the real pixels behind every line on every frame and fails below AA. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__plate {
    background: rgba(255, 255, 255, .76);
    -webkit-backdrop-filter: blur(20px) saturate(120%) brightness(1.06);
    backdrop-filter: blur(20px) saturate(120%) brightness(1.06);
  }
}
.hero__plate .eyebrow {
  display: inline-block;
  padding: .34rem .62rem .28rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 2px rgba(21, 24, 26, .06);
}

/* The same ramp as every other h1 on the page, capped at 60px instead of 66:
   above about 1264px the page keeps growing but the plate does not, and the
   headline has to stay on two lines. */
.hero h1 { font-size: clamp(2.05rem, 1.30rem + 3.10vw, 3.75rem); }
.hero h1 em { font-style: normal; color: var(--red); }
.hero__lead { margin-top: 1.4rem; max-width: 56ch; }
.hero__actions {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: 2rem;
}
/* an outlined button over a photograph needs something behind it, or the
   picture reads straight through the label */
.hero__actions .btn--ghost {
  background: rgba(255, 255, 255, .74);
  border-color: rgba(33, 37, 40, .22);
}
.hero__actions .btn--ghost:hover { background: #fff; border-color: var(--red); }

.hero .wave {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
}

/* ── phone and small tablet ───────────────────────────────────────────────
   The picture stops being a backdrop and becomes a band the card sits ON.
   That is not a stylistic preference, it is arithmetic: `cover` into a
   390x764 hero shows 32% of a 1600x1000 frame — measured, and four of the
   nine frames came out as an unreadable patch of wall or sky. The same frame
   in a 390x255 band shows 94% of itself. So below 1101px the media is a strip
   in the flow, the card is pulled up over its lower edge, and the whole
   photograph is actually visible.

   1101px because that is where the header already collapses into the burger:
   one breakpoint for the page, not two that can drift apart. It is also the
   width below which a 50rem plate beside a photograph leaves the photograph
   too thin to be worth showing.

   The blur goes too: a backdrop-filter over a sliding photograph repaints the
   whole card every frame, which is the one thing on this page that could
   stutter on a mid-range phone. Nothing is lost but the gloss — the card is
   solid white here, which is the most legible it can be. */
@media (max-width: 1100px) {
  .hero {
    display: block;
    min-height: 0;
    padding: 0 0 calc(clamp(22px, 3.2vw, 44px) + 1.2rem);
    background: var(--paper);
  }
  .hero__media {
    position: relative; inset: auto;
    height: clamp(255px, 60vw, 420px);
  }
  /* only the bottom of the strip is washed — just enough that the card's top
     edge grows out of the picture instead of being pasted onto it */
  .hero__wash {
    background: linear-gradient(180deg,
        rgba(255, 255, 255,   0) 52%,
        rgba(255, 255, 255, .22) 78%,
        rgba(255, 255, 255, .55) 100%);
  }
  .hero__inner { margin-top: clamp(-4.5rem, -11vw, -2.6rem); }
  .hero__plate {
    max-width: none;
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(33, 37, 40, .10);
  }
  /* the phone card is solid white (the whole photograph is visible above it),
     so the chip would be white on white: back to a plain kicker */
  .hero__plate .eyebrow { display: block; padding: 0; background: none; box-shadow: none; }
}
@media (max-width: 560px) {
  /* stacked buttons of different widths read as an accident, not a choice */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
}

/* ───────────────────────────────────────────────── the hero slideshow ─────
   Nine frames on a track, moved one viewport at a time, every four seconds.
   It never stops: no pause on hover, no pause on focus, no controls. The dots
   say where you are and are not clickable, so there is nothing for a mouse to
   do here at all.  Owner's instruction, 2026-10-09; four seconds, 2026-10-10. */
.slider {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);          /* behind the first paint, never white */
}
.slider__track {
  display: flex;
  margin: 0; padding: 0; list-style: none;
  will-change: transform;
  transition: transform .85s cubic-bezier(.4, 0, .2, 1);
}
.slider__slide {
  flex: 0 0 100%;
  min-width: 0;
}
.slider__slide img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Out of the copy's way: bottom right over the picture on a desktop, top
   right over the strip of photograph above the plate on a phone. */
.slider__dots {
  position: absolute; z-index: 4;
  right: var(--gutter);
  bottom: calc(clamp(22px, 3.2vw, 44px) + .9rem);
  display: flex; gap: 9px;
}
.slider__dots i {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: background .35s ease, width .35s ease;
}
.slider__dots i.is-on {
  width: 26px;
  border-radius: 4px;
  background: var(--red);
}
@media (max-width: 1100px) {
  .slider__dots { bottom: auto; top: 1rem; }
}

/* Before the script runs, the first frame must already be the one showing —
   otherwise a slow connection shows a stack of nine images. */
.slider:not([data-ready]) .slider__track { transform: translateX(0); }

/* Someone who has asked their system for less motion gets the first frame and
   nothing moving. That is an accessibility setting, not a mouse. */
@media (prefers-reduced-motion: reduce) {
  .slider__track { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════ trust */
.trust { padding-block: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust__cell {
  text-align: center;
  padding: clamp(1.1rem, .7rem + 1.4vw, 1.9rem) .6rem;
  border-right: 1px solid var(--line);
}
.trust__cell:last-child { border-right: 0; }
.trust__cell dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.32rem, 1.05rem + 1.0vw, 1.95rem);
  color: var(--red);
  line-height: 1;
}
.trust__cell dd {
  margin: .7rem 0 0;
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .trust__grid { grid-template-columns: 1fr 1fr; }
  .trust__cell:nth-child(2n) { border-right: 0; }
  .trust__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ═════════════════════════════════════════════════════════ section head */
.sec-head { max-width: 62ch; }
.sec-head__lead { margin-top: 1.5rem; }

/* ═══════════════════════════════════════════════════ what we do — cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, .6rem + 1.6vw, 1.9rem);
  margin-top: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
}
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink-2);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-top-color .22s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-top-color: var(--red);
  box-shadow: 0 4px 14px rgba(21,24,26,.08), 0 18px 46px rgba(21,24,26,.12);
}
.card__shot { position: relative; margin: 0; }
.card__shot img {
  width: 100%; height: clamp(180px, 20vw, 232px);
  object-fit: cover;
}
.card__num {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; height: 34px;
  padding-inline: .7rem;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: .9rem; letter-spacing: .08em;
  border-radius: 0 6px 0 0;
}
.card__body { padding: 1.5rem 1.45rem 1.7rem; }
.card__kicker {
  margin: 0 0 .5rem;
  font-size: var(--t-label);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-dark);          /* see the note on .eyebrow in base.css */
}
.card h3 { margin-bottom: 1.05rem; }

.ticks li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--body);
}
.ticks li + li { margin-top: .5rem; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 1px;
  background: var(--red);
}

/* the card's way into its own section, pinned to the bottom edge so three
   cards of different lengths still line their links up */
.card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.card__more {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: auto;
  padding-top: 1.15rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .86rem;
  color: var(--red-dark);          /* see the note on .eyebrow in base.css */
  transition: gap .18s ease;
}
.card__more .ic { width: 15px; height: 15px; }
.card:hover .card__more { gap: .75rem; }
.card__more:hover { color: var(--red-dark); }

.what__note {
  margin-top: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 70ch;
}

@media (max-width: 980px) {
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .card__shot img { height: 200px; }
}


/* ═══════════════════════════════════════════════════════ company profile */
/* The book the owner wants reachable from the site: three real pages fanned
   on the left, the facts and the two actions on the right. The pages are
   images of the PDF itself (make-images.py), so what is shown is what opens.
   Both buttons go to the same file — one opens it, one saves it. */
.profile__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1.2rem + 3.2vw, 4.6rem);
  align-items: center;
}
.profile__book {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1.08;
  max-width: 480px;
  justify-self: center;
  width: 100%;
}
.profile__page {
  position: absolute;
  width: 62%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(21, 24, 26, .16), 0 2px 8px rgba(21, 24, 26, .08);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
.profile__page--back  { left: 32%; top: 0;   transform: rotate(6deg); }
.profile__page--mid   { left: 16%; top: 6%;  transform: rotate(2.5deg); }
.profile__page--front { left: 0;   top: 12%; transform: rotate(-3deg); }
.profile__grid:hover .profile__page--back  { transform: rotate(8deg) translateX(10px); }
.profile__grid:hover .profile__page--mid   { transform: rotate(3deg) translateX(4px); }
.profile__grid:hover .profile__page--front { transform: rotate(-4.5deg) translateX(-6px); }

.profile__meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0 clamp(1.2rem, .8rem + 1.4vw, 2.2rem);
  margin: 1.8rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  justify-content: start;
}
.profile__meta > div { display: flex; flex-direction: column; gap: .12rem; }
.profile__meta dt {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.profile__meta dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  color: var(--ink);
  white-space: nowrap;
}
.profile__actions {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: 1.6rem;
}
.profile__actions .btn .ic { width: 17px; height: 17px; }
.profile__note {
  margin: .9rem 0 0;
  font-size: var(--t-small);
  color: var(--muted);
}
@media (max-width: 860px) {
  .profile__grid { grid-template-columns: 1fr; }
  .profile__book { max-width: 360px; }
  .profile__meta { grid-template-columns: repeat(2, auto); gap: .8rem 2rem; }
}
@media (max-width: 560px) {
  .profile__actions { flex-direction: column; align-items: stretch; }
  .profile__actions .btn { justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════ contact */
.contact {
  position: relative;
  background: var(--ink-2);
  color: #fff;
  overflow: hidden;
}
.contact__bg { position: absolute; inset: 0; z-index: 0; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; }
.contact::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg,
    rgba(14, 16, 18, .97) 36%, rgba(27, 30, 32, .90) 64%, rgba(27, 30, 32, .74));
}
.contact .wave--up {
  position: absolute; left: 0; right: 0; top: -1px; z-index: 3;
  transform: scaleY(-1);
}
.contact__in {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 1rem + 4vw, 4.6rem);
  align-items: start;
  padding-top: clamp(4.4rem, 3rem + 5vw, 7rem);
  padding-bottom: clamp(3.4rem, 2.4rem + 4vw, 5.6rem);
}
.contact h2 { color: #fff; }
.contact h2 em { font-style: normal; color: var(--red-light); }
.contact__sub {
  margin-top: 1.4rem;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: #C6C9CC;
  max-width: 46ch;
}

.contact__list { display: grid; gap: 1.5rem; }
.contact__list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact__tx { display: flex; flex-direction: column; min-width: 0; }
.contact__tx b {
  font-size: var(--t-label);
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--red-light);
  margin-bottom: .4rem;
}
.contact__tx a, .contact__tx span {
  color: #E6E8E9;
  font-size: .98rem;
  line-height: 1.55;
  word-break: break-word;
}
.contact__tx a { transition: color .16s ease; }
.contact__tx a:hover { color: var(--red-light); }

@media (max-width: 1000px) {
  .contact__in { grid-template-columns: 1fr; }
  .contact__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .contact__list { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════ footer */
.site-foot {
  background: #0E1012;
  color: #D8DADC;
  border-top: 3px solid var(--red);
  padding-top: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  padding-bottom: 1.4rem;
}
.site-foot__in {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.6rem 2rem;
  padding-bottom: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.site-foot__brand { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.site-foot__brand .sys-mark { --cap: 22px; }
.site-ar--foot {
  color: var(--red-light);
  border-left-color: rgba(255, 255, 255, .16);
  font-size: .98rem;
}
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.site-foot__nav a {
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 600;
  color: #D8DADC;
  transition: color .16s ease;
  /* a thumb target, not a text line: 24px is the WCAG 2.5.8 floor and the
     footer links measured 23-24 on a phone (audit, 2026-10-10) */
  display: inline-block; min-height: 28px; padding-block: .15rem;
}
.site-foot__nav a:hover { color: var(--red-light); }

.site-foot__legal {
  padding-top: 1.3rem;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(216, 218, 220, .52);
  line-height: 1.7;
}

@media (max-width: 640px) {
  .site-ar--foot { border-left: 0; padding-left: 0; }
  .site-foot__in { flex-direction: column; align-items: flex-start; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  PART 2 — the eight sections added when the page was completed           ║
   ║                                                                          ║
   ║  Same rules as part 1: everything is keyed to a class, never to DOM      ║
   ║  position, so a section can be reordered in WordPress without breaking   ║
   ║  anything here. The component vocabulary is the company profile's —      ║
   ║  steps, numbered cards, key/value rows, stat band, note bar — because    ║
   ║  the page has to read as the same document as the PDF the client signed  ║
   ║  off.                                                                    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═════════════════════════════════════════════════════════ shared pieces */

/* Icons come from one <symbol> sprite (sections/icons.html). Size and colour
   live here so an icon inside a dark plate needs no second copy. */
.ic {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-chev { width: 13px; height: 13px; margin-left: .32rem; opacity: .6; }


/* a heading one step below the section title, with the profile's short rule */
.sub-head {
  position: relative;
  font-size: clamp(1.08rem, 1.00rem + .34vw, 1.30rem);
  padding-bottom: .72rem;
  margin-bottom: 1.15rem;
}
.sub-head::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 38px; height: 3px; border-radius: 2px;
  background: var(--red);
}
/* inside a section head the title is an h3, but it is still the title */
.sec-head h3 { font-size: clamp(1.35rem, 1.10rem + 1.05vw, 2.05rem); }
.sec-head h3 em, .sec-head h2 em { font-style: normal; color: var(--red); }
.sec-head--light h2, .sec-head--light h3 { color: #fff; }

/* two columns that become one on a narrow screen. The first column is the
   wider one by default because it is nearly always the text. */
.duo {
  display: grid;
  grid-template-columns: 1.16fr 1fr;
  gap: clamp(1.6rem, 1.0rem + 2.4vw, 3.2rem);
  align-items: start;
}
.duo--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) {
  .duo, .duo--even { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────── photographs ── */
.fig {
  margin: 0;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: clamp(190px, 21vw, 265px);
  object-fit: cover;
}
.fig figcaption {
  padding: .68rem .9rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-size: .80rem;
  letter-spacing: .02em;
  color: var(--muted);
}
.section--bone .fig figcaption { background: var(--bone); }

.figstack { display: grid; gap: clamp(.9rem, .6rem + .8vw, 1.3rem); align-content: start; }
.figrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, .6rem + .8vw, 1.3rem);
}
.figrow--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  .figrow, .figrow--two { grid-template-columns: 1fr; }
}

/* a frame that fills the height of the text beside it rather than floating
   at the top of a tall column */
.fig--tall { height: 100%; display: flex; flex-direction: column; }
.fig--tall img { flex: 1 1 auto; min-height: 320px; height: auto; }

/* ═══════════════════════════════════════════ the division opener plates */
/* The profile's divider page: roman numeral, licence line, chips. The
   photograph behind it is one the cards section has already loaded, so the
   plate costs nothing extra to show. */
.division { display: block; }

.divhead {
  position: relative;
  background: var(--ink-2);
  color: #fff;
  overflow: hidden;
  border-top: 3px solid var(--red);
}
.divhead__bg { position: absolute; inset: 0; z-index: 0; }
.divhead__bg img { width: 100%; height: 100%; object-fit: cover; }
.divhead::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(13, 15, 17, .965) 30%, rgba(21, 24, 26, .90) 62%, rgba(21, 24, 26, .70));
}
.divhead__in {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, .5rem + 2.2vw, 2.8rem);
  align-items: start;
  padding-block: clamp(2.5rem, 1.7rem + 3.2vw, 4.3rem);
}
.divhead__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.2rem, 1.9rem + 6.4vw, 7rem);
  line-height: .80;
  letter-spacing: -.02em;
  color: var(--red);
}
/* an outlined numeral where the browser can draw one; solid red otherwise,
   so the character can never end up invisible */
@supports (-webkit-text-stroke: 2px red) {
  .divhead__num {
    color: transparent;
    -webkit-text-stroke: 2px var(--red);
  }
}
.divhead h2 { color: #fff; }
.divhead h2 em { font-style: normal; color: var(--red-light); }
.divhead__lead {
  margin-top: 1.25rem;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: #C9CCCF;
  max-width: 64ch;
}

.chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.5rem;
}
.chips li {
  padding: .34rem .78rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #D8DADC;
  background: rgba(255, 255, 255, .05);
}

@media (max-width: 700px) {
  .divhead__in { grid-template-columns: 1fr; gap: .2rem; }
  .divhead__num { font-size: clamp(2.8rem, 2rem + 6vw, 4rem); }
}

/* ══════════════════════════════════════ titled list with an icon badge */
/* The profile's tick(): a heading, a sentence, an icon. Used wherever the
   content is "here is a thing we do and here is what it means". */
.tl { display: grid; gap: clamp(1.1rem, .8rem + .8vw, 1.6rem); }
.tl--two { grid-template-columns: 1fr 1fr; column-gap: clamp(1.4rem, 1rem + 2vw, 2.8rem); }
.tl li { display: flex; gap: 1rem; align-items: flex-start; }
.tl h4 {
  font-size: 1.02rem;
  line-height: 1.3;
  margin-bottom: .38rem;
}
.tl p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.58;
  color: var(--body);
  max-width: 62ch;
}
.why .tl p, .contact .tl p { color: #C6C9CC; }
.tl--three { grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.2rem, .9rem + 1.4vw, 2.2rem); }
@media (max-width: 980px) { .tl--three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 880px) { .tl--two { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .tl--three { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════ numbered sequence */
.steps { counter-reset: stcs-step; }
.steps li {
  position: relative;
  counter-increment: stcs-step;
  padding-left: 3.5rem;
  padding-bottom: 1.5rem;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(stcs-step, decimal-leading-zero);
  position: absolute; left: 0; top: -.1rem;
  display: flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--ink-2), var(--ink-3));
  box-shadow: 0 0 0 1px var(--line-red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .02em;
}
/* the thread down the left, drawn between one marker and the next */
.steps li::after {
  content: ''; position: absolute;
  left: 1.15rem; top: 2.5rem; bottom: .3rem;
  width: 1px;
  background: var(--line);
}
.steps li:last-child::after { display: none; }
.steps h4 { font-size: 1.04rem; margin-bottom: .34rem; }
.steps p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.58;
  max-width: 60ch;
}

/* ══════════════════════════════════════════════════════ numbered cards */
.ncards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.9rem, .6rem + 1vw, 1.4rem);
}
.ncards--two { grid-template-columns: repeat(2, 1fr); }
.ncards li {
  background: var(--bone);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink-2);
  border-radius: var(--radius);
  padding: 1.25rem 1.2rem 1.35rem;
  transition: border-top-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.section--bone .ncards li { background: var(--paper); }
.ncards li:hover {
  border-top-color: var(--red);
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(21, 24, 26, .07), 0 14px 34px rgba(21, 24, 26, .09);
}
.ncards__n {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .14em;
  color: var(--red-dark);          /* see the note on .eyebrow in base.css */
}
.ncards h4 { font-size: 1rem; line-height: 1.28; margin-bottom: .5rem; }
.ncards p { margin: 0; font-size: var(--t-small); line-height: 1.56; }
@media (max-width: 1040px) { .ncards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .ncards, .ncards--two { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════ key / value row blocks */
.kv, .reg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.4rem, 1rem + 2.4vw, 3rem);
  margin: 0;
  border-top: 1px solid var(--line);
}
.kv > div, .reg > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .82rem .1rem;
  border-bottom: 1px solid var(--line);
}
.kv dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
}
.kv dd {
  margin: 0;
  font-size: var(--t-small);
  color: var(--muted);
  text-align: right;
}
.reg dt {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .18rem;
}
.reg dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  text-align: right;
}
.pill {
  display: inline-block;
  padding: .12rem .6rem;
  border: 1px solid var(--line-red);
  border-radius: 999px;
  background: rgba(227, 26, 21, .07);
  color: var(--red-dark);          /* see the note on .eyebrow in base.css */
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .kv, .reg { grid-template-columns: 1fr; }
  .kv > div, .reg > div { flex-direction: column; gap: .2rem; }
  .kv dd, .reg dd { text-align: left; }
}

/* ════════════════════════════════════════════════ the registered activities */
/* A list, not a table, since 2026-10-10: the client asked for the six-digit
   activity codes to come off the page, and a one-column table is a list
   wearing a costume. The roman numeral ties each activity to its division. */
.acts__k {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--ink-2);
}
.acts { margin: 0; padding: 0; list-style: none; font-size: var(--t-small); }
.acts li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .4rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
  color: var(--body);
}
.acts li b {
  font-family: var(--font-display);
  color: var(--red-dark);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════ stat band */
.statband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(118deg, var(--ink-2), var(--ink-3));
}
.statband > div {
  padding: clamp(1.1rem, .8rem + 1vw, 1.5rem) .8rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .10);
}
.statband > div:last-child { border-right: 0; }
.statband dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.65rem);
  line-height: 1.1;
  color: #fff;
}
.statband dd {
  margin: .5rem 0 0;
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-light);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .statband { grid-template-columns: 1fr 1fr; }
  .statband > div:nth-child(2n) { border-right: 0; }
  .statband > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.10); }
}

/* ════════════════════════════════════════════════════════════ note bar */
/* Two kinds, and the difference is deliberate: a red bar is something we are
   offering, a charcoal bar is a limit we are putting on ourselves. */
.notebar {
  border-left: 4px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bone);
  padding: 1.25rem clamp(1.1rem, .9rem + .8vw, 1.6rem);
}
.section--bone .notebar { background: var(--paper); }
.notebar--limit { border-left-color: var(--ink-2); }
.notebar__k {
  margin: 0;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-dark);          /* see the note on .eyebrow in base.css */
}
.notebar--limit .notebar__k { color: var(--muted); }
.notebar__big {
  margin: .3rem 0 .55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--ink);
}
.notebar__tx {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  max-width: 86ch;
}

/* ═════════════════════════════════════════════════════ trades, callout */
.trades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.trades li {
  display: flex; align-items: center; gap: .85rem;
  padding: .72rem .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}
@media (max-width: 860px) { .trades { grid-template-columns: 1fr 1fr; } }
@media (max-width: 470px) { .trades { grid-template-columns: 1fr; } }

.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, .6rem + 2vw, 2.4rem);
  align-items: center;
  padding: clamp(1.25rem, .9rem + 1.4vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
}
.callout__fig {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.4rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--red);
}
.callout__lab {
  margin: 0 0 .5rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.callout__tx p:last-child { font-size: var(--t-small); line-height: 1.62; max-width: 76ch; }
@media (max-width: 620px) {
  .callout { grid-template-columns: 1fr; gap: .6rem; }
}

/* ══════════════════════════════════════════════════════════════════ faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.02rem 2.6rem 1.02rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .5rem; top: 1.35rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--red-dark); }
.faq details p {
  margin: -.2rem 0 1.15rem;
  font-size: var(--t-small);
  line-height: 1.62;
  max-width: 80ch;
}

/* ═══════════════════════════════════════════════════════ why System TCS */
.why {
  position: relative;
  overflow: hidden;
  background: #121517;
  color: #fff;
  border-top: 3px solid var(--red);
  padding-block: var(--section);
}
.why__bg { position: absolute; inset: 0; z-index: 0; }
.why__bg img { width: 100%; height: 100%; object-fit: cover; }
.why::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg,
    rgba(12, 14, 16, .96) 34%, rgba(18, 21, 23, .90) 66%, rgba(18, 21, 23, .74));
}
.why__in { position: relative; z-index: 2; }
.why__lead { color: #C6C9CC; }

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.9rem, .6rem + 1.2vw, 1.6rem);
}
.pillars li {
  padding: 1.35rem 1.25rem 1.45rem;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius);
}
.pillars h3 { margin: .95rem 0 .5rem; color: #fff; font-size: 1.05rem; line-height: 1.3; }
.pillars p { margin: 0; font-size: var(--t-small); line-height: 1.58; color: #C6C9CC; }
@media (max-width: 980px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

.commits {
  display: flex; flex-wrap: wrap; gap: .8rem 2rem;
  margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.commits li {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: #fff;
}
.commits .ic { width: 17px; height: 17px; color: var(--red-light); stroke-width: 2.2; }
.why__note {
  margin-top: 1.3rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: #A9ADB1;
  max-width: 80ch;
}

/* ═══════════════════════════════════════════════════ the contact form */
/* It sits on the charcoal plate, so every control is drawn for a dark ground.
   The fields are deliberately large: this is filled in on a phone, with one
   thumb, by someone standing on a site. */
.contact__side { min-width: 0; }

.cform {
  margin-top: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
  padding: clamp(1.15rem, .9rem + 1.2vw, 1.7rem);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
}
.cform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .95rem 1.1rem;
}
.f { margin: 0; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.f--full { grid-column: 1 / -1; }
.f label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #C6C9CC;
}
.f label b { color: var(--red-light); }
.f input, .f select, .f textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .98rem;
  line-height: 1.5;
  color: #fff;
  background: rgba(10, 12, 13, .55);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 6px;
  padding: .72rem .85rem;
  transition: border-color .16s ease, background .16s ease;
}
.f textarea { resize: vertical; min-height: 7.5rem; }
.f input::placeholder, .f textarea::placeholder { color: #8A8F93; }
.f input:hover, .f select:hover, .f textarea:hover { border-color: rgba(255, 255, 255, .34); }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: transparent;
  background: rgba(10, 12, 13, .72);
}
/* :user-invalid, not :invalid. An empty required field IS invalid the moment
   the page loads, and these fields carry no placeholder, so the old
   :not(:placeholder-shown) guard never fired and every required box opened
   outlined in red. :user-invalid waits until the visitor has actually had a
   go at the field; a browser too old to know it simply shows nothing. */
.f input:user-invalid,
.f select:user-invalid,
.f textarea:user-invalid { border-color: var(--red); }
.f select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6C9CC' stroke-width='2' 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 .8rem center;
  background-size: 16px 16px;
}
.f select option { color: #1B1E20; background: #fff; }
.f__hint { font-size: .8rem; line-height: 1.5; color: #A9ADB1; }
.f__hint a { color: var(--red-light); text-decoration: underline; text-underline-offset: 2px; }

/* The honeypot. Off-screen rather than display:none — a bot that skips hidden
   inputs is exactly the bot this is for. */
.cform__hp {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.cform__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem;
  margin-top: 1.25rem;
}
.cform__foot .btn { padding-inline: 1.7rem; }
.cform__note { margin: 0; font-size: .8rem; line-height: 1.5; color: #A9ADB1; max-width: 36ch; }

/* The notice after a submission. Hidden until there is something to say, so
   an empty box never sits above the fields. */
.cform__status { display: none; }
.cform__status.is-on {
  display: block;
  margin-bottom: 1.1rem;
  padding: .85rem 1rem;
  border-radius: 6px;
  font-size: .91rem;
  line-height: 1.55;
}
.cform__status.is-ok {
  background: rgba(31, 142, 86, .18);
  border: 1px solid rgba(86, 201, 140, .45);
  color: #D7F2E3;
}
.cform__status.is-bad {
  background: rgba(227, 26, 21, .15);
  border: 1px solid var(--line-red);
  color: #FFDAD7;
}
.cform__status b { color: #fff; }
.cform__status p { margin: 0; }
.cform__status p + p { margin-top: .5rem; }
.cform__status a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 620px) {
  .cform__grid { grid-template-columns: 1fr; }
  .cform__foot .btn { width: 100%; justify-content: center; }
  .cform__note { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════ the map */
.mapcard {
  margin: clamp(1.3rem, 1rem + 1.2vw, 1.9rem) 0 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  overflow: hidden;
}
.mapcard__frame {
  display: block;
  width: 100%;
  height: clamp(175px, 20vw, 230px);
  border: 0;
  /* the map is context, not decoration — toned down so it cannot compete
     with the red in the brand */
  filter: grayscale(.3) contrast(1.04);
}
.mapcard figcaption {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .4rem 1rem;
  padding: .8rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
  color: #C6C9CC;
}
.mapcard a {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 28px;
  color: var(--red-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
}
.mapcard a:hover { color: #fff; }
.mapcard a .ic { width: 15px; height: 15px; }

/* ════════════════════════════════════════════════════════ footer part 2 */
.site-foot__brandcol { max-width: 38ch; }
.site-foot__tag {
  margin: 1.1rem 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .02em;
  color: #fff;
}
.site-foot__contact { display: grid; gap: .6rem; }
.site-foot__contact li {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-size: .88rem;
  color: #C0C3C6;
}
.site-foot__contact .ic { width: 16px; height: 16px; color: var(--red-light); }
.site-foot__contact a { transition: color .16s ease; display: inline-block; min-height: 28px; padding-block: .15rem; }
.site-foot__contact a:hover { color: var(--red-light); }
.site-foot__contact .sep { color: rgba(216, 218, 220, .4); }

.site-foot__h {
  margin: 0 0 .85rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-light);
}
/* part 1 laid the footer menu out in a row; now it is a map of the page */
.site-foot__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem 2.2rem;
  flex: 1 1 auto;
  max-width: 620px;
}
.site-foot__nav > div { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.site-foot__in { align-items: flex-start; }
@media (max-width: 860px) {
  .site-foot__nav { grid-template-columns: 1fr 1fr; max-width: none; width: 100%; }
}
@media (max-width: 460px) {
  .site-foot__nav { grid-template-columns: 1fr; gap: 1.3rem; }
}

/* ══════════════════════════════════════════════════════════════ utilities */
/* Last on purpose. A utility has to beat the component it is put on, and
   both are single class selectors — so whichever is written later wins.
   `.statband { margin: 0 }` (killing the UA margin on a <dl>) was quietly
   eating the space above the stat band, because it came after this rule. */
.mt-lg { margin-top: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); }