/* TMES site stylesheet.
   Tokens are named after the Figma variables in file f0N6M8Il1lfupaIjxbWvGQ
   ("TMES Concept C — Colour / Spacing / Type scale"). Values were read from the
   file, not eyeballed. Mobile first: base rules are the 390 frame (22:2), the
   min-width blocks at the end are the 1440 frame (15:2). */

/* Self-hosted rather than Google Fonts: no third-party request, so the CSP
   stays 'self' and visitors' IPs never reach Google. Both are variable fonts,
   latin subset, one file covering every weight used. OFL licences sit beside
   the files. Renamed with the upstream version, so they are safe to cache
   forever; a new version gets a new filename. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-v25.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/roboto-mono-latin-v31.woff2") format("woff2");
}

:root {
  --ground-deepest: #050706;
  --ground-manual: #0b0e0d;
  --ground-card: #131817;
  --ground-scrim: #151b19;
  --type-bone: #f4f2ec;
  --type-body-grey: #949c98;
  --type-utility-grey: #7c847f;
  --label-sage: #8fb0a1;
  --brass-signal: #cc8f1a;
  --brass-hover: #b87d12;
  --line-rule: #333c38;
  --line-nav: #242b28;
  /* Not a Figma token. Form fields in the design use line/rule #333C38, which
     is 1.58:1 on the field and fails WCAG 1.4.11 (3:1 for component edges).
     This is the dimmest value that clears 3:1 on both the field and the page. */
  --line-field: #5f6763;
  /* Not a Figma token. Error text and edges on the dark grounds: 8.2:1 on
     ground/manual, 7.5:1 on ground/card. */
  --signal-error: #f28b82;

  --gutter: 20px;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
  /* Mono labels use 1.32, Roboto Mono's own ascent plus descent, which is
     Figma's "auto" line height (8px sets 11 tall, 9px sets 12). Browsers
     resolve "normal" a pixel shorter, and it adds up down the page. */

  /* Hero scrim. Flat #151B19 plus a vertical #050706 gradient with its 78%
     plateau centred on the text block. Mobile plateau runs 0.08 to 0.92. */
  --hero-scrim: 0.46;
  --hero-gradient: linear-gradient(180deg,
    rgb(5 7 6 / 0.08) 0%, rgb(5 7 6 / 0.78) 8%,
    rgb(5 7 6 / 0.78) 92%, rgb(5 7 6 / 0.55) 100%);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Column flex so the footer sits at the bottom of short pages (the 404). */
body {
  display: flex; flex-direction: column; min-height: 100vh;
  margin: 0;
  background: var(--ground-manual);
  color: var(--type-body-grey);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, figure { margin: 0; }
main { flex: 1 0 auto; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
/* <picture> wraps most images for WebP. As a block it takes the grid area
   the <img> used to, and the <img> fills it. */
picture { display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--brass-signal); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px;
}
.skip-link:focus {
  left: var(--gutter); top: 8px; z-index: 10;
  padding: 8px 12px; background: var(--brass-signal); color: var(--ground-deepest);
  font-weight: 600; text-decoration: none;
}

/* ---------- Shared type ---------- */

.eyebrow {
  display: flex; align-items: center; gap: 8px;
  color: var(--label-sage);
  font: 500 8px/1.32 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: pre;
}
.eyebrow::before {
  content: ""; flex: none;
  width: 12px; height: 2px; background: var(--label-sage);
}
.eyebrow--brass::before { background: var(--brass-signal); }

.section-title {
  color: var(--type-bone);
  font: 900 32px/38px var(--font-display);
  letter-spacing: -0.02em;
}

/* ---------- Buttons (Button / Hero, radius 0) ---------- */

.btn {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border: 1px solid transparent;
  /* Transparent for <button>s, which bring the browser's own fill. */
  background: transparent;
  /* 14px label line, Archivo's "auto" in Figma: 42 tall on mobile, 46 on desktop. */
  font: 600 13px/14px var(--font-display);
  text-decoration: none;
  transition: background-color 400ms ease-out, color 400ms ease-out;
}
.btn > span { flex: 1; text-align: center; }
.btn__chevron {
  flex: none; width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* No border: Figma's solid button is pad + label only (46 tall on desktop).
   Forced-colours mode gets one back so the button keeps a visible edge. */
.btn--solid { border-width: 0; background: var(--brass-signal); color: var(--ground-deepest); }
@media (forced-colors: active) { .btn--solid { border: 1px solid ButtonText; } }
.btn--solid:hover { background: var(--brass-hover); }
/* Outline: brass rule at rest that ignites to solid gold on hover. */
.btn--outline { border-color: var(--brass-signal); color: var(--brass-signal); padding-block: 13px; }
.btn--outline:hover { background: var(--brass-signal); color: var(--ground-deepest); }
.btn--block { width: 100%; }

/* ---------- Utility bar and navigation ---------- */

.utility {
  display: flex; justify-content: center;
  padding: 9px var(--gutter);
  background: var(--ground-deepest);
  color: var(--type-utility-grey);
  /* 11px line box: the bar is 29 tall at 390 and 33 at 1440 in the frames. */
  font: 400 8px/11px var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: pre;
}
.utility__services { display: none; }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  background: var(--ground-manual);
  border-bottom: 1px solid var(--line-nav);
}
.nav__logo img { width: 91px; height: auto; }
.nav__links { display: none; }
.nav__menu {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  padding: 8px 0;
}
.nav__menu span { width: 24px; height: 2px; background: var(--type-bone); }

/* Menu overlay (frame 135:185). */
.menu { display: none; }
.menu:target {
  display: block;
  position: fixed; inset: 0; z-index: 20;
  overflow-y: auto;
  background: var(--ground-deepest);
}
/* Everything behind the open menu leaves the tab order too, so Tab cannot
   wander onto the hidden header. */
body:has(.menu:target) > :not(.menu) { visibility: hidden; }
.menu .nav { border-bottom-color: var(--line-nav); }
.menu__close { display: flex; padding: 6px; color: var(--type-bone); }
.menu__close svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.menu__body {
  padding: 24px var(--gutter) 28px;
  background: var(--ground-manual);
  border-bottom: 1px solid var(--line-nav);
}
.menu__body .eyebrow { gap: 10px; font-size: 9px; }
.menu__body .eyebrow::before { width: 14px; }
.menu__list { margin: 18px 0 24px; border-top: 1px solid var(--line-nav); }
.menu__list li { border-bottom: 1px solid var(--line-nav); }
.menu__list a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 18px 0;
  color: var(--type-bone);
  font: 900 24px/normal var(--font-display);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.menu__list a > span:first-child {
  flex: none; width: 22px;
  color: var(--label-sage);
  font: 400 11px/1.32 var(--font-mono);
}

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

/* One grid, overlapping areas, no absolute positioning.
   Mobile rows: pipe copy (348) / 78px two-summit divider / civil copy (348).
   Frame 22:2 has civil at 426; it now matches pipe, so neither panel carries
   dead space under the shorter copy (Marco, 20 Oct 2026).
   Pipe leads, civil follows: Doyle's instruction at the 20 Oct 2026 meeting,
   which supersedes frames 15:2 / 22:2 (civil first there). The divider path is unchanged; only the content moved sides.
   Each photo spans its copy row plus the divider row and is masked to its side
   of the peak. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(348px, auto) 78px minmax(348px, auto);
  background: var(--ground-deepest);
  overflow: hidden;
}

/* contain: size keeps the photos out of track sizing: the panels' copy and
   min-heights set the hero's height, and the photo just fills it. Without it
   a square photo stretches the hero to its own width. */
.hero__media {
  display: grid;
  contain: size;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.hero__media > * { grid-area: 1 / 1; }
/* The scaled <img> becomes a stacking context on hover and would otherwise
   paint above every non-positioned sibling, i.e. above its own scrims,
   leaving the copy on raw photography. Making every layer relative keeps
   them all in one paint phase, stacked in DOM order. */
.hero__media > *, .hero__media::after { position: relative; }
.hero__media picture { height: 100%; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform 400ms ease-out;
}
.hero__media::after {
  content: ""; grid-area: 1 / 1;
  background: var(--hero-gradient);
}
.hero__scrim {
  background: var(--ground-scrim);
  opacity: var(--hero-scrim);
  transition: opacity 400ms ease-out;
}
/* 12% black veil on the receding side. The layer in Figma is named and set to
   12%; two older captions say 22%. 12% matches the file. */
.hero__veil {
  background: #000;
  opacity: 0;
  transition: opacity 400ms ease-out;
}

/* Masks: a solid block for the body of the panel plus an SVG polygon for the
   divider zone, sized in px so the peak keeps its authored height. The layers
   overlap by 1px so no seam opens at fractional pixel sizes. */
.hero__media--pipe {
  grid-area: 1 / 1 / 3 / 2;
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 78' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 390,0 390,78 255,0 134,70 77,35 0,78'/%3E%3C/svg%3E");
  mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 78' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 390,0 390,78 255,0 134,70 77,35 0,78'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% calc(100% - 77px), 100% 78px;
  mask-size: 100% calc(100% - 77px), 100% 78px;
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
}
.hero__media--civil {
  grid-area: 2 / 1 / 4 / 2;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 78' preserveAspectRatio='none'%3E%3Cpolygon points='0,78 77,35 134,70 255,0 390,78'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 78' preserveAspectRatio='none'%3E%3Cpolygon points='0,78 77,35 134,70 255,0 390,78'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 78px, 100% calc(100% - 77px);
  mask-size: 100% 78px, 100% calc(100% - 77px);
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
}

/* Placeholder until TMES drill pipe photography exists. Neutral hatch so it
   reads as "missing", never as a finished image. */
.hero__media--placeholder {
  background:
    repeating-linear-gradient(135deg, #4a524e 0 1px, transparent 1px 14px),
    #1d2220;
}
.placeholder-badge {
  /* Above the ::after gradient, which is otherwise the top layer. */
  z-index: 1;
  /* Outer edge of the pipe panel, away from the peak: the top on mobile,
     the left on desktop (pipe leads, per Doyle at the 20 Oct 2026 meeting). */
  align-self: start; justify-self: center;
  margin: 10px 12px 0;
  padding: 5px 8px;
  background: var(--ground-deepest);
  border: 1px dashed var(--brass-signal);
  color: var(--brass-signal);
  font: 500 8px/1.4 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

/* Positioned for the same reason as the media layers: masked elements are
   stacking contexts, so an unpositioned SVG would paint underneath them.
   contain: size for the same reason as .hero__media: the 150×760 viewBox
   would otherwise hold the desktop hero at 760 tall. */
.hero__edge { contain: size; position: relative; pointer-events: none; overflow: visible; fill: none; }
.hero__edge polyline { vector-effect: non-scaling-stroke; }
.hero__edge-rule { stroke: var(--line-rule); stroke-width: 1; }
.hero__edge-brass { stroke: var(--brass-signal); stroke-width: 3; opacity: 0; transition: opacity 400ms ease-out; }
.hero__edge--stack { grid-area: 2 / 1; width: 100%; height: 100%; }
.hero__edge--split { display: none; }

.hero__panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 26px var(--gutter);
  text-align: center;
  /* Above the media layers in paint order; grid items stack by DOM order. */
  position: relative;
}
.hero__panel--pipe { grid-area: 1 / 1; }
.hero__panel--civil { grid-area: 3 / 1; }
/* Mobile only: room under the top-edge placeholder badge. Drops out on its
   own once the pipe photo replaces .hero__media--placeholder. */
.hero:has(.hero__media--placeholder) .hero__panel--pipe { padding-top: 44px; }

.hero__title {
  max-width: 350px;
  color: var(--type-bone);
  font: 900 40px/46px var(--font-display);
  letter-spacing: -0.03em;
}
.hero__tagline {
  max-width: 330px;
  margin-top: 10px;
  color: var(--brass-signal);
  font: 500 14px/22px var(--font-display);
}
.hero__desc {
  max-width: 330px;
  margin-top: 8px;
  color: var(--type-body-grey);
  font-size: 13px; line-height: 22px;
}
/* The design writes a shorter description for mobile than for desktop. */
.hero__desc--long { display: none; }
.hero__actions {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 350px;
  margin-top: 24px;
}

/* ---------- Stats band ---------- */

.stats {
  padding: 40px var(--gutter);
  background: var(--ground-deepest);
  border-block: 1px solid var(--line-rule);
}
.stats__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 20px;
}
/* Stacked below 1024: icon, numeral and label centred in each column. */
.stat { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.stat__icon {
  width: 48px; height: 48px;
  fill: none; stroke: var(--label-sage); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
}
.stat__value { display: flex; flex-direction: column; gap: 10px; }
.stat__num {
  color: var(--type-bone);
  font: 900 30px/normal var(--font-display);
  letter-spacing: -0.02em;
}
.stat__label {
  color: var(--label-sage);
  font: 400 8px/1.32 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Carousel ---------- */

/* Track and arrows share one grid cell, so the arrows sit over the photos
   without absolute positioning. */
.carousel { display: grid; background: var(--ground-card); }
.carousel > * { grid-area: 1 / 1; min-width: 0; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -3px; }

.slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  height: 280px;
  scroll-snap-align: start;
}
.slide > picture, .slide__scrim { grid-area: 1 / 1 / 3 / 3; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
/* Flat 45% #151B19 plus a bottom plateau at 80% #050706 behind the caption. */
.slide__scrim {
  background:
    linear-gradient(180deg, rgb(5 7 6 / 0) 0%, rgb(5 7 6 / 0) 62%, rgb(5 7 6 / 0.8) 76%, rgb(5 7 6 / 0.8) 100%),
    rgb(21 27 25 / 0.45);
}
.slide__caption {
  grid-area: 2 / 1;
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 12px 24px var(--gutter);
  position: relative;
}
.slide__index {
  color: var(--label-sage);
  font: 500 8px/1.32 var(--font-mono);
  letter-spacing: 0.24em;
}
.slide__title {
  color: var(--type-bone);
  font: 600 14px/normal var(--font-display);
}
.slide__dots {
  grid-area: 2 / 2;
  align-self: end;
  display: flex; gap: 10px;
  padding: 0 var(--gutter) 24px 0;
  position: relative;
}
.slide__dots a {
  width: 8px; height: 8px; border-radius: 4px;
  background: var(--type-body-grey);
}
.slide__dots a[aria-current] { background: var(--brass-signal); }
/* Prev / next. The row lets clicks through to the photos; only the buttons
   take them. 70% #050706 keeps the bone chevron above 3:1 over white. */
.carousel__arrows {
  align-self: center;
  display: flex; justify-content: space-between;
  padding-inline: 12px;
  pointer-events: none;
  position: relative;
}
.carousel__arrows[hidden] { display: none; }
.carousel__arrow {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-rule);
  background: rgb(5 7 6 / 0.7);
  color: var(--type-bone);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 400ms ease-out, color 400ms ease-out, border-color 400ms ease-out;
}
.carousel__arrow:hover { border-color: var(--brass-signal); background: var(--brass-signal); color: var(--ground-deepest); }
.carousel__arrow svg {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Where we work ---------- */

/* The Canada map is a background: WebP through image-set(), with the PNG
   declared first as the fallback (1.25 MB PNG; WebP 72 KB at the 350px
   mobile size, 113 KB on desktop; only one is fetched). It is faded to 12% by laying the section colour over it at 88%,
   the same result as opacity: 0.12 without a positioned layer. 15% is the hard ceiling: the map's baked-in white province borders
   push 14px body copy below 4.5:1 above that. */
.where {
  padding: 56px var(--gutter);
  background:
    linear-gradient(rgb(5 7 6 / 0.88), rgb(5 7 6 / 0.88)),
    url("../img/canada-map.png") center / 350px 270px no-repeat,
    var(--ground-deepest);
  background:
    linear-gradient(rgb(5 7 6 / 0.88), rgb(5 7 6 / 0.88)),
    image-set(url("../img/canada-map-700.webp") type("image/webp"), url("../img/canada-map.png") type("image/png")) center / 350px 270px no-repeat,
    var(--ground-deepest);
}
.where .section-title { margin-top: 20px; }
.where__lede { margin-top: 16px; max-width: 720px; font-size: 13px; line-height: 22px; }
.where__regions { display: flex; flex-direction: column; margin-top: 24px; }
.region {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 0;
  border-top: 1px solid var(--line-rule);
}
.region h3 {
  color: var(--type-bone);
  font: 900 22px/normal var(--font-display);
  letter-spacing: -0.01em;
}
.region p { font-size: 13px; line-height: 22px; }

/* ---------- Services ---------- */

.services { padding: 56px var(--gutter); background: var(--ground-manual); }
.services__header { display: flex; align-items: center; justify-content: space-between; }
.services__cards { display: flex; flex-direction: column; gap: 40px; margin-top: 28px; }
.card { display: flex; flex-direction: column; align-items: flex-start; }
.card__media { display: grid; width: 100%; height: 230px; overflow: hidden; }
.card__media > * { grid-area: 1 / 1; }
.card__media picture { height: 100%; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* 45% #151B19. Reconstructed in the design round, not recovered from approved
   Concept C (which had no card scrim). Flagged for Marco; 0 restores Concept C. */
.card__media::after { content: ""; grid-area: 1 / 1; background: rgb(21 27 25 / 0.45); }
.card__index {
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px;
  color: var(--brass-signal);
  font: 500 10px/1.32 var(--font-mono);
  letter-spacing: 0.12em;
}
.card__index::after { content: ""; width: 20px; height: 1px; background: var(--line-rule); }
.card__title {
  margin-top: 14px;
  color: var(--type-bone);
  font: 900 22px/normal var(--font-display);
  letter-spacing: -0.01em;
}
.card__body { margin-top: 10px; font-size: 13px; line-height: 22px; }
.card__link {
  margin-top: 16px;
  color: var(--label-sage);
  font: 600 12px/normal var(--font-display);
  text-decoration: none;
  white-space: pre;
}
.card__link:hover { text-decoration: underline; }

/* ---------- Prequalification ---------- */

.prequal { padding: 48px var(--gutter); background: var(--ground-card); }
.prequal--wide { display: none; }
.prequal__title {
  margin-top: 18px;
  color: var(--type-bone);
  font: 900 26px/32px var(--font-display);
  letter-spacing: -0.01em;
}
.prequal__marks { display: flex; gap: 24px; margin-top: 28px; }
.prequal__mark { flex: 1; min-width: 0; height: 64px; }
.prequal__mark picture { display: block; height: 100%; }
.prequal__mark img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Contact ---------- */

.contact { padding: 56px var(--gutter); background: var(--ground-manual); }
.contact__title { margin-top: 20px; font-size: 30px; line-height: 36px; }
.contact__phone {
  margin-top: 20px;
  font: 900 34px/normal var(--font-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.contact__phone a { color: var(--brass-signal); text-decoration: none; }
.contact__email { margin-top: 8px; font-size: 13px; }
.contact__email a { color: var(--type-body-grey); text-decoration: none; }
.contact__email a:hover, .contact__phone a:hover { text-decoration: underline; }

.contact__form { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; }
/* display:flex outranks the browser's [hidden] rule; without this the emptied
   form stays on screen under "Enquiry sent." */
.contact__form[hidden] { display: none; }
.contact__form-label {
  margin-bottom: 10px;
  color: var(--type-utility-grey);
  font: 500 9px/1.32 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.field {
  width: 100%; height: 52px;
  padding: 0 16px;
  background: var(--ground-card);
  border: 1px solid var(--line-field);
  border-radius: 0;
  color: var(--type-bone);
  font: 400 15px/normal var(--font-display);
}
.field::placeholder { color: var(--type-utility-grey); opacity: 1; }
.field--area { height: 96px; padding-top: 16px; resize: vertical; }
.field:focus-visible { outline-offset: 0; border-color: var(--brass-signal); }
/* Turnstile renders a 65px iframe after load; holding the space keeps the
   send button from jumping when it arrives. */
.cf-turnstile { min-height: 65px; }
.btn--send { align-self: flex-start; padding: 16px 26px; cursor: pointer; }
.btn--send:disabled { cursor: progress; opacity: 0.7; }

/* Explicit outcome states. A form that fails silently looks identical to one
   that works, so every path ends in visible text: inline field errors, a
   status line, or one of the two notices. */
.field[aria-invalid="true"] { border-color: var(--signal-error); }
.field-error { margin-top: -4px; color: var(--signal-error); font-size: 13px; line-height: 20px; }
.form-status:empty { display: none; }
.form-status { font-size: 14px; line-height: 22px; color: var(--type-bone); }
.form-status--error {
  padding: 12px 14px;
  border: 1px solid var(--signal-error);
  color: var(--type-bone);
}
.notice {
  padding: 20px;
  border: 1px solid var(--label-sage);
  background: var(--ground-card);
  color: var(--type-bone);
  font-size: 15px; line-height: 24px;
}
.notice a { color: var(--brass-signal); }
.notice__title { margin-bottom: 6px; font: 900 22px/28px var(--font-display); letter-spacing: -0.01em; }
.notice--failed { border-color: var(--signal-error); }
/* No-JavaScript path: contact.php redirects to #contact-sent or
   #contact-failed, and the fragment reveals the matching notice. */
.notice:target { display: block; }
.notice--sent:target ~ .contact__form { display: none; }
.contact__side { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.contact__side .contact__form { margin-top: 0; }

/* ---------- Footer ---------- */

.footer {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px var(--gutter);
  background: var(--ground-deepest);
  color: var(--type-utility-grey);
  font-size: 10px; line-height: normal;
}
.footer__links { display: flex; gap: 14px; }
.footer__links span { display: none; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* Cookie bar. Sticky, not fixed: it is the last child of body, so it rides
   the bottom of the viewport and comes to rest after the footer, without
   taking the page out of flow. */
.cookie-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--ground-card);
  border-top: 1px solid var(--line-rule);
  color: var(--type-body-grey);
  font-size: 13px; line-height: 20px;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar a { color: var(--brass-signal); }
.cookie-bar__actions { display: flex; gap: 10px; }
/* Same box for both: equal prominence is the point. */
.cookie-bar__btn { flex: 1; justify-content: center; cursor: pointer; }

/* =====================================================================
   Tablet, ≥ 768. The design has no 768 frame; this widens the mobile
   layout and brings in the desktop type ramp where it fits.
   ===================================================================== */

@media (min-width: 768px) {
  .cookie-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .cookie-bar__btn { flex: none; min-width: 120px; }
  :root { --gutter: 40px; }

  .utility { justify-content: space-between; padding-block: 11px; }
  .utility__services { display: block; }

  .eyebrow { gap: 10px; font-size: 9px; }
  .eyebrow::before { width: 14px; }

  .section-title { font-size: 46px; line-height: 54px; }

  .hero__actions { max-width: 350px; }

  .carousel .slide { height: clamp(280px, 43.06vw, 620px); }
  .slide__caption { padding-bottom: 48px; }
  .slide__index { font-size: 9px; }
  .slide__title { font-size: 15px; }
  .slide__dots { gap: 12px; padding-bottom: 48px; }
  .carousel__arrows { padding-inline: 24px; }
  .carousel__arrow { width: 52px; height: 52px; }

  .where {
    padding-block: 88px;
    background:
      linear-gradient(rgb(11 14 13 / 0.88), rgb(11 14 13 / 0.88)),
      url("../img/canada-map.png") right -1347px top calc(50% - 205px) / 2363px 1825px no-repeat,
      var(--ground-manual);
    background:
      linear-gradient(rgb(11 14 13 / 0.88), rgb(11 14 13 / 0.88)),
      image-set(url("../img/canada-map.webp") type("image/webp"), url("../img/canada-map.png") type("image/png")) right -1347px top calc(50% - 205px) / 2363px 1825px no-repeat,
      var(--ground-manual);
  }
  .where .section-title { max-width: 900px; margin-top: 30px; }
  .where__lede { margin-top: 20px; font-size: 16px; line-height: 28px; }
  .where__regions { flex-direction: row; margin-top: 40px; }
  .region { flex: 1; gap: 12px; padding: 30px 40px 0 0; }
  /* Desktop reads west to east; the 390 frame leads with Alberta. */
  .region--bc { order: -1; }
  .region h3 { font-size: 24px; line-height: 30px; }
  .region p { max-width: 320px; font-size: 14px; line-height: 24px; }

  .services { padding-block: 88px; }
  .services__cards { flex-direction: row; margin-top: 44px; }
  .card { flex: 1; min-width: 0; }
  .card__media { height: auto; aspect-ratio: 620 / 380; }
  .card__index { margin-top: 26px; letter-spacing: 0.16em; }
  .card__title { margin-top: 16px; font-size: 24px; line-height: 30px; }
  .card__body { max-width: 540px; margin-top: 12px; font-size: 15px; line-height: 26px; }
  .card__link { margin-top: 22px; }

  .prequal { padding-block: 64px; }
  .prequal--wide { display: block; }
  .prequal__title { max-width: 640px; margin-top: 30px; font-size: 34px; line-height: 42px; letter-spacing: -0.02em; }

  .contact { padding-block: 96px; }
  .contact__title { margin-top: 30px; }
  .contact__phone { margin-top: 34px; font-size: 54px; }
  .contact__email { margin-top: 16px; font-size: 16px; }

  .footer {
    flex-direction: row; justify-content: space-between; align-items: center;
    padding-block: 28px;
    font: 400 9px/1.32 var(--font-mono);
    letter-spacing: 0.12em;
  }
  .footer__links { gap: 16px; }
  .footer__links span { display: inline; }
}

/* =====================================================================
   Desktop, ≥ 1024. Frame 15:2 (1440).
   ===================================================================== */

@media (min-width: 1024px) {
  .nav { padding-block: 24px; }
  .nav__logo img { width: 147px; }
  .nav__menu { display: none; }
  .menu:target { display: none; }
  body:has(.menu:target) > :not(.menu) { visibility: visible; }
  .nav__links { display: flex; align-items: center; gap: 36px; }
  .nav__links a {
    color: var(--type-body-grey);
    font-size: 13px; line-height: normal;
    text-decoration: none;
  }
  .nav__links a:hover { color: var(--type-bone); }
  .nav__links .nav__call {
    padding: 11px 20px;
    background: var(--brass-signal);
    color: var(--ground-deepest);
    font-size: 12px; font-weight: 600;
    transition: background-color 400ms ease-out;
  }
  .nav__links .nav__call:hover { background: var(--brass-hover); color: var(--ground-deepest); }

  /* Split hero. Columns reproduce the 1440 geometry exactly:
     pipe copy 637 | 16 | divider zone 150 | civil copy 637.
     The divider zone is fixed at 150px so the peak keeps its authored angles
     at every width; the copy columns absorb the rest. Pipe photo spans
     columns 1-3, civil photo columns 3-4, meeting inside the divider zone.
     Rows: two flexible rows top and bottom centre the copy, and a last 8px
     row reproduces the panel's 56 top / 64 bottom padding offset; the four rows
     between are shared by both panels through subgrid, so title, tagline,
     description and buttons stay row-aligned across the divider at every
     desktop width, however many lines either description runs. */
  :root {
    --hero-scrim: 0.5;
    --hero-gradient: linear-gradient(180deg,
      rgb(5 7 6 / 0.08) 0%, rgb(5 7 6 / 0.78) 21.8%,
      rgb(5 7 6 / 0.78) 77.1%, rgb(5 7 6 / 0.55) 100%);
  }
  .hero {
    grid-template-columns: minmax(0, 637fr) minmax(0, 16fr) 150px minmax(0, 637fr);
    grid-template-rows: minmax(0, 1fr) repeat(4, auto) minmax(0, 1fr) 8px;
    /* Frame 15:2 is 760 tall; cut to 640 at 1440 (Marco, 20 Oct 2026) and never
       taller than the screen under the 155px header, so the stats band shows.
       Never below 520: the copy rows need about 440. */
    min-height: max(520px, min(clamp(540px, 44.44vw, 640px), calc(100svh - 155px)));
  }
  .hero__media--pipe {
    grid-area: 1 / 1 / -1 / 4;
    -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 760' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 83,149 16,261 150,497 0,760'/%3E%3C/svg%3E");
    mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 760' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 83,149 16,261 150,497 0,760'/%3E%3C/svg%3E");
    -webkit-mask-size: calc(100% - 149px) 100%, 150px 100%;
    mask-size: calc(100% - 149px) 100%, 150px 100%;
    -webkit-mask-position: left, right;
    mask-position: left, right;
  }
  .hero__media--civil {
    grid-area: 1 / 3 / -1 / 5;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 760' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 150,0 150,760 0,760 150,497 16,261 83,149'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 760' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 150,0 150,760 0,760 150,497 16,261 83,149'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 150px 100%, calc(100% - 149px) 100%;
    mask-size: 150px 100%, calc(100% - 149px) 100%;
    -webkit-mask-position: left, right;
    mask-position: left, right;
  }
  .placeholder-badge { align-self: start; justify-self: start; margin: 20px 0 0 20px; }
  .hero__edge--stack { display: none; }
  .hero__edge--split { display: block; grid-area: 1 / 3 / -1 / 4; width: 100%; height: 100%; }

  .hero__panel {
    display: grid; grid-template-rows: subgrid; justify-items: center;
    /* An explicit full-width column: the inherited justify-content: center
       would otherwise shrink the implicit track to its content. */
    grid-template-columns: minmax(0, 1fr);
    padding: 56px clamp(24px, 3.9vw, 56px) 64px;
  }
  .hero__panel--pipe { grid-area: 1 / 1 / -1 / 2; }
  .hero:has(.hero__media--placeholder) .hero__panel--pipe { padding-top: 56px; }
  .hero__panel--civil { grid-area: 1 / 4 / -1 / 5; }
  .hero__title { grid-row: 2; }
  .hero__tagline { grid-row: 3; }
  .hero__desc { grid-row: 4; align-self: center; }
  .hero__actions { grid-row: 5; justify-self: stretch; }
  .hero__title {
    max-width: 520px;
    font-size: clamp(40px, 4.17vw, 60px);
    line-height: 1.1;
  }
  .hero__tagline { max-width: 440px; margin-top: 16px; font-size: 18px; line-height: 28px; }
  /* Both descriptions are at least three lines (78px), as in frame 15:2, and
     centred in their shared row; pipe runs one line, civil three at 1440. */
  .hero__desc {
    display: flex; flex-direction: column; justify-content: center;
    max-width: 440px; min-height: 78px; margin-top: 12px;
    font-size: 15px; line-height: 26px;
  }
  .hero__desc--short { display: none; }
  .hero__desc--long { display: block; }
  .hero__actions {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 12px 28px;
    max-width: none; margin-top: 32px;
  }
  /* Fixed 240 in the design so both panels stay symmetrical; allowed to
     shrink to 180 before wrapping on narrower desktops. */
  .hero__actions .btn { flex: 0 1 240px; min-width: 180px; padding: 16px 26px; }
  .hero__actions .btn--outline { padding-block: 15px; }

  .stats { padding-block: 64px; }
  .stats__row { display: flex; justify-content: space-between; gap: 20px; }
  .stat { flex-direction: row; align-items: flex-start; gap: 20px; text-align: left; }
  .stat__icon { flex: none; width: 56px; height: 56px; }
  /* Icon centres on the numeral, not the numeral-plus-label block. */
  .stat__value { padding-top: 6px; }
  .stat__num { font-size: 40px; }

  .prequal { display: flex; align-items: center; gap: 60px; }
  .prequal__copy { flex: 1; min-width: 0; }
  .prequal__marks { flex: none; gap: 48px; margin-top: 0; }
  .prequal__mark { flex: none; }
  /* Colour marks from TMUSA, cropped to their artwork (21 Oct 2026). */
  .prequal__mark--cw { width: 144px; height: 116px; }
  .prequal__mark--isn { width: 110px; height: 100px; }
  .prequal__mark--8am { width: 127px; height: 116px; }

  .contact { display: flex; gap: 100px; }
  .contact__side { margin-top: 0; }
  .contact__copy, .contact__side { flex: 1; min-width: 0; }
  .contact__form-label { margin-bottom: 10px; }
}

/* Between 1024 and 1279 the civil description runs four lines at the
   narrower measure, so both boxes pin to four to keep the rows aligned. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__desc { min-height: 104px; }
}

/* Content caps at 1200, the same measure as TMUSA (Marco, 20 Oct 2026): the
   gutter is 80 until the viewport passes 1360, then grows to centre a 1200
   column. vw, not %, so every element that reads --gutter gets the same value
   whatever its containing block. The split hero stays full-bleed. */
@media (min-width: 1280px) {
  :root { --gutter: max(80px, (100vw - 1200px) / 2); }
}

/* ---------- Hover: fine pointers on the desktop split only ----------
   Never fires on touch. The move is a transform on the photograph, never on
   the panel, so the type stays sharp. focus-within gives keyboard users the
   same state. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .hero:has(.hero__panel--civil:is(:hover, :focus-within)) .hero__media--civil img,
  .hero:has(.hero__panel--pipe:is(:hover, :focus-within)) .hero__media--pipe img {
    transform: scale(1.08);
  }
  .hero:has(.hero__panel--civil:is(:hover, :focus-within)) .hero__media--civil .hero__scrim,
  .hero:has(.hero__panel--pipe:is(:hover, :focus-within)) .hero__media--pipe .hero__scrim {
    opacity: 0.4; /* Figma 45%; a touch brighter on Marco's request, 28 Oct 2026. AA holds: 13.0 / 5.20 / 5.17 on white. */
  }
  .hero:has(.hero__panel--civil:is(:hover, :focus-within)) .hero__media--pipe .hero__scrim,
  .hero:has(.hero__panel--pipe:is(:hover, :focus-within)) .hero__media--civil .hero__scrim {
    opacity: 0.66;
  }
  .hero:has(.hero__panel--civil:is(:hover, :focus-within)) .hero__media--pipe .hero__veil,
  .hero:has(.hero__panel--pipe:is(:hover, :focus-within)) .hero__media--civil .hero__veil {
    opacity: 0.12;
  }
  .hero:has(.hero__panel:is(:hover, :focus-within)) .hero__edge-brass { opacity: 1; }
  .hero__panel:is(:hover, :focus-within) .btn--solid { background: var(--brass-hover); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img, .hero__scrim, .hero__veil, .hero__edge-brass, .btn { transition: none; }
}

/* =====================================================================
   Inner pages: Civil Consulting (158:180 / 163:187) and Team (109:58 /
   113:124). Mobile first again, with their own breakpoints below.
   ===================================================================== */

/* ---------- Page hero ----------
   Photo, scrim and copy share one grid cell; no absolute positioning. The
   <picture> is art-directed: a portrait crop below 768, the wide crop above. */
.page-hero {
  display: grid;
  /* Every inner page matches the Drill Pipe hero: 470 here, 620 from 768
     (Marco, 20 Oct 2026). Team was 380 / 520. */
  min-height: 470px;
  background: var(--ground-deepest);
  overflow: hidden;
}
/* Team carries only its title now, so its banner is shorter: 340 / 440
   (Marco, 28 Oct 2026). */
.page-hero--team { min-height: 340px; }
.page-hero > picture, .page-hero__placeholder, .page-hero::after, .page-hero__content { grid-area: 1 / 1; }
/* Drill pipe: hatched stand-in until a TMES photo exists, badge top right as
   in frames 103:49 and 111:121. */
.page-hero__placeholder { display: grid; }
.page-hero__placeholder .placeholder-badge { align-self: start; justify-self: end; margin: 20px 20px 0 0; }
.page-hero > picture { contain: size; }
.page-hero img { width: 100%; height: 100%; object-fit: cover; }
/* Keep the pin ends in frame when the wide crop trims top and bottom. */
.page-hero--pipe img { object-position: center 70%; }
/* Flat #151B19 at the hero scrim strength, then the #050706 gradient with its
   78% plateau behind the copy. Same recipe as the split hero. */
.page-hero::after {
  content: "";
  background:
    linear-gradient(180deg, rgb(5 7 6 / 0.05) 0%, rgb(5 7 6 / 0.78) 30%, rgb(5 7 6 / 0.78) 95%, rgb(5 7 6 / 0.55) 100%),
    rgb(21 27 25 / var(--hero-scrim));
}
.page-hero--team::after {
  background:
    linear-gradient(180deg, rgb(5 7 6 / 0.05) 0%, rgb(5 7 6 / 0.78) 34%, rgb(5 7 6 / 0.78) 95%, rgb(5 7 6 / 0.55) 100%),
    rgb(21 27 25 / var(--hero-scrim));
}
.page-hero__content {
  position: relative;
  align-self: end;
  padding: 24px var(--gutter) 32px;
}
/* 40px from 390 up; scales down on narrower phones so a long single word
   ("Representatives" on Team) never runs past the gutter. */
.page-hero__title {
  margin-top: 18px;
  color: var(--type-bone);
  font: 900 clamp(30px, 10.25vw, 40px)/1.15 var(--font-display);
  letter-spacing: -0.03em;
}
/* No eyebrow above (Drill Pipe hero): the title needs no top margin. */
.page-hero__title:first-child { margin-top: 0; }
.page-hero__lede { margin-top: 16px; max-width: 720px; font-size: 13px; line-height: 22px; }
.page-hero__lede--long { display: none; }
.page-hero__actions { display: flex; align-items: center; gap: 28px; margin-top: 24px; }
.page-hero__actions .btn { flex: 1; }

.section-title--xl { margin-top: 20px; }

/* ---------- Service offerings: numbered entries ---------- */
.offerings, .points-section, .directory { padding: 56px var(--gutter); background: var(--ground-deepest); }
.entries { margin-top: 28px; border-bottom: 1px solid var(--line-rule); }
.entry {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 0;
  border-top: 1px solid var(--line-rule);
}
.entry__num, .point__num {
  color: var(--brass-signal);
  font: 900 28px/normal var(--font-display);
  letter-spacing: -0.02em;
}
.entry__title {
  color: var(--type-bone);
  font: 600 18px/normal var(--font-display);
  letter-spacing: -0.01em;
}
.entry__body { font-size: 13px; line-height: 22px; }

/* Frame 103:49 stacks title over body beside the number, with no closing rule. */
.entries--stacked { border-bottom: 0; }

/* Copy that differs between the 390 and 1440 frames. */
.copy--long, .br--wide { display: none; }

/* ---------- Drill pipe inventory: a plain list, not a table ----------
   Point cards without the number slot; two columns from 768. */
.spec { padding: 56px var(--gutter); background: var(--ground-manual); }
.carry { display: flex; flex-direction: column; margin-top: 24px; }
.carry__list { display: flex; flex-direction: column; gap: 6px; color: var(--type-bone); font-size: 15px; line-height: 24px; }

/* ---------- Image band ---------- */
.band { display: flex; flex-direction: column; gap: 2px; background: var(--ground-manual); }
.band__item { display: grid; height: 240px; overflow: hidden; }
.band__item > * { grid-area: 1 / 1; }
.band__item picture { height: 100%; }
.band__item img { width: 100%; height: 100%; object-fit: cover; }
/* 45% #151B19, as the Services cards. Also reconstructed, not read from an
   approved frame; flagged with the card scrims. */
.band__item::after { content: ""; grid-area: 1 / 1; background: rgb(21 27 25 / 0.45); }

/* ---------- Benefits and steps ---------- */
.points { margin-top: 24px; }
.point {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 0;
  border-top: 1px solid var(--line-rule);
}
/* Benefits carry a second rule inside the top border (frames 158:180 and
   163:187); the process steps do not. */
.points--4 .point::before { content: ""; height: 1px; background: var(--line-rule); }
.point__num { font-size: 26px; }
.point__title {
  color: var(--type-bone);
  font: 600 17px/normal var(--font-display);
  letter-spacing: -0.01em;
}
.point__body { font-size: 13px; line-height: 22px; }

/* ---------- Team directory ---------- */
.team { display: flex; flex-direction: column; gap: 40px; margin-top: 28px; }
.member { display: flex; flex-direction: column; align-items: flex-start; }
/* Placeholder until the real headshots arrive: the same neutral hatch as the
   missing pipe photo, so it can never pass for a finished portrait. */
.placeholder {
  background:
    repeating-linear-gradient(135deg, #4a524e 0 1px, transparent 1px 14px),
    #1d2220;
}
.member__portrait {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 350 / 470;
  padding: 16px;
}
.member__portrait--photo { padding: 0; overflow: hidden; }
.member__portrait--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.member__portrait .placeholder-badge { margin: 0; align-self: center; justify-self: center; }
.member__index {
  margin-top: 22px;
  color: var(--brass-signal);
  font: 500 10px/1.32 var(--font-mono);
  letter-spacing: 0.12em;
}
.member__name {
  margin-top: 12px;
  color: var(--type-bone);
  font: 600 22px/normal var(--font-display);
  letter-spacing: -0.01em;
}
.member__role {
  margin-top: 8px;
  color: var(--label-sage);
  font: 400 9px/1.32 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.member__contact { margin-top: 16px; }
/* LinkedIn mark, as on TMUSA. A 20px glyph in a 24px box, the minimum target size. */
.member__linkedin { display: inline-flex; margin-top: 10px; padding: 2px; color: var(--type-body-grey); }
.member__linkedin:hover { color: var(--brass-signal); }
.member__linkedin svg { width: 20px; height: 20px; fill: currentColor; }
.member__contact a {
  color: var(--type-bone);
  font: 600 15px/normal var(--font-display);
  text-decoration: none;
}
.member__contact a:hover { text-decoration: underline; }

/* ---------- Head office ---------- */
.office { padding: 56px var(--gutter); background: var(--ground-manual); }
.office__details { margin: 24px 0 0; }
.office__item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--line-rule);
}
.office__item dt {
  color: var(--label-sage);
  font: 400 8px/1.32 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.office__item dd {
  margin: 0;
  color: var(--type-bone);
  font: 600 15px/normal var(--font-display);
  letter-spacing: -0.01em;
}
.office__item a { text-decoration: none; }
.office__item a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .page-hero { min-height: 620px; }
  .page-hero--team { min-height: 440px; }
  .page-hero__placeholder .placeholder-badge { margin: 32px var(--gutter) 0 0; }
  .page-hero::after {
    background:
      linear-gradient(180deg, rgb(5 7 6 / 0.08) 0%, rgb(5 7 6 / 0.78) 13.71%, rgb(5 7 6 / 0.78) 89.52%, rgb(5 7 6 / 0.55) 100%),
      rgb(21 27 25 / var(--hero-scrim));
  }
  .page-hero--team::after {
    background:
      linear-gradient(180deg, rgb(5 7 6 / 0.05) 0%, rgb(5 7 6 / 0.78) 40.385%, rgb(5 7 6 / 0.78) 89.615%, rgb(5 7 6 / 0.55) 100%),
      rgb(21 27 25 / var(--hero-scrim));
  }
  .page-hero__content { padding: 32px var(--gutter) 80px; }
  .page-hero__title { margin-top: 26px; font-size: clamp(56px, 5.28vw, 76px); line-height: 1.08; }
  .page-hero__lede { margin-top: 24px; font-size: 18px; line-height: 30px; }
  .page-hero__lede--short { display: none; }
  .page-hero__lede--long { display: inline; }
  .page-hero__actions { margin-top: 32px; }
  .page-hero__actions .btn { flex: none; width: 240px; padding: 16px 26px; }
  .page-hero__actions .btn--outline { padding-block: 15px; }

  .offerings, .points-section, .directory { padding-block: 96px; }
  .section-title--xl { margin-top: 30px; font-size: clamp(46px, 3.89vw, 56px); line-height: 1.107; }
  .entries { margin-top: 40px; }
  /* Tablet: number beside a stacked title and body. The three-column row of
     the 1440 frame only has room from 1024. */
  .entry { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px 20px; padding: 32px 0; }
  .entry__num { grid-row: span 2; font-size: 40px; }
  .entry__title { font-size: 22px; }
  .entry__body { max-width: 800px; font-size: 16px; line-height: 28px; }
  .entries--stacked .entry { grid-template-columns: 80px minmax(0, 1fr); gap: 12px 40px; }
  .entries--stacked .entry__body { max-width: none; }
  .section-title--900 { max-width: 900px; }
  .copy--short, .br--narrow { display: none; }
  .copy--long, .br--wide { display: inline; }
  .spec { padding-block: 96px; }
  .carry { display: grid; margin-top: 40px; }
  .carry__list { font-size: 18px; line-height: 30px; }

  .band { flex-direction: row; height: 400px; }
  .band__item { flex: 1; height: auto; }

  .points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 40px; }
  .point { gap: 14px; padding: 18px 0 0; }
  .point__num { font-size: 34px; }
  .point__title { font-size: 20px; }
  .point__body { font-size: 15px; line-height: 26px; }
  .points--steps .point { padding-top: 30px; }

  .team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 20px; margin-top: 48px; }
  .member__portrait { aspect-ratio: 413 / 470; }
  .member__role { font-size: 9px; }

  .office { padding-block: 80px; }
  .office__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 40px; }
  .office__item { gap: 14px; padding: 28px 0 24px; }
  .office__item dt { font-size: 9px; }
  .office__item dd { font-size: 17px; }
}

@media (min-width: 1024px) {
  .entry { grid-template-columns: 100px minmax(0, 340px) minmax(0, 800px); }
  .entry__num { grid-row: auto; }
  .entries--stacked .entry { grid-template-columns: 80px minmax(0, 1fr); }
  .entries--stacked .entry__num { grid-row: span 2; }
  .points--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .office__details { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Privacy and 404: long-form text ---------- */
/* The measure is capped on the children, not on .legal: --gutter grows past
   1360 to centre the 1200 column, and a 760 cap that included it left 520px
   of text at 1440 and almost none at 1920. Left edge stays on the gutter,
   aligned with the logo. */
.legal {
  padding: 56px var(--gutter) 72px;
  color: var(--type-body-grey);
  font-size: 15px; line-height: 26px;
}
.legal > * { max-width: 680px; }
.legal__draft {
  margin-bottom: 32px;
  padding: 10px 14px;
  border: 1px dashed var(--brass-signal);
  color: var(--brass-signal);
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.legal__title {
  margin: 20px 0 12px;
  color: var(--type-bone);
  font: 900 32px/38px var(--font-display);
  letter-spacing: -0.02em;
}
.legal__meta { color: var(--type-utility-grey); font-size: 13px; }
.legal h2 {
  margin: 40px 0 12px;
  color: var(--type-bone);
  font: 900 22px/28px var(--font-display);
  letter-spacing: -0.01em;
}
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 14px; }
.legal ul { margin-top: 14px; padding-left: 20px; list-style: disc; }
.legal li + li { margin-top: 8px; }
.legal strong { color: var(--type-bone); font-weight: 600; }
.legal a { color: var(--brass-signal); }
.legal--404 { min-height: 50vh; }
.legal--404 ul { list-style: none; padding: 0; }

@media (min-width: 768px) {
  .legal { padding-block: 88px 112px; font-size: 16px; line-height: 28px; }
  .legal__title { font-size: 46px; line-height: 54px; }
}