/* ==========================================================================
   MARJAN ALDHYD TECHNICAL SERVICES LLC
   main.css — hand-built design system

   Design intent
   -------------
   Reference points are engineering drawings and equipment schedules, not
   corporate web templates: hairline rules with tick marks, sheet-metal
   corner notches, spec-sheet labels in condensed caps, oversized outline
   plate numbers, duotone documentary photography, and motion that snaps
   and wipes rather than floats and fades.

   Rules this file follows
   -------------------------
   1. No pill buttons, no uniformly rounded cards. Corners are square or
      notched, the way fabricated metal is.
   2. No single section rhythm. Vertical space is set per section from
      content weight (see the --slab-* scale and .slab modifiers).
   3. Repeated components must vary. Cards alternate treatment through
      :nth-child so no two neighbours look stamped from one die.
   4. Type contrast is extreme and deliberate: plate numerals are enormous,
      subheads are small. There is no smooth modular scale.

   Contents
     01 Tokens              07 Slabs & asymmetric layout
     02 Reset               08 Hero
     03 Texture & rules     09 Services
     04 Type                10 Sectors / process / values
     05 Controls            11 Figures, gallery, licence
     06 Chrome              12 Form, footer, motion, responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---- Brand, per "Marjan - Brand Assets.pdf" -------------------------
     The palette is exactly three colours. Everything else in this file is a
     tint or shade derived from them — no fourth hue is introduced. */
  --maroon: #a9494a;   /* brand */
  --plum:   #3d2837;   /* brand */
  --cream:  #fff6d9;   /* brand */

  /* Maroon ramp. The deep end is mixed toward plum so shadows stay in family. */
  --maroon-600: #954041;
  --maroon-700: #7f3738;
  --maroon-800: #592b30;
  --maroon-900: #44252c;
  --maroon-300: #c67b7c;
  --maroon-100: #f0dcdc;

  /* Plum ramp — the dark surfaces */
  --ink: var(--plum);
  --ink-2: #4a3243;
  --ink-3: #5c3f55;
  --ink-900: #2c1c27;

  /* One step down from brand plum, for the utility bar above the header. */
  --ink-deep: #352330;

  /* Light grounds. The company profile sets its pages on white, not on the
     brand cream, so the page grounds follow it. Cream is kept for type and
     detail on the dark grounds, where the profile also runs a near-white. */
  --paper: #fcfcfc;
  --paper-2: #f4f2f2;
  --cream-2: #fdf3d2;
  --cream-3: #f5e7c2;
  --sand: #ead9ae;

  /* Accent is a tint of the brand maroon, not a new colour */
  --accent: #c67b7c;

  /* State colours are brand colours. Success reads plum, failure reads maroon;
     the two are told apart by icon, wording and weight — never by a fourth hue.
     Nothing outside the three brand colours is introduced, including for
     third-party marks such as WhatsApp. */
  --state-ok: var(--plum);
  --state-err: var(--maroon);

  /* Semantic */
  --bg: var(--paper);
  --fg: var(--plum);
  --fg-2: #6e5c60;
  --fg-3: #8b7a80;
  --rule: rgba(61, 40, 55, .16);
  --rule-soft: rgba(61, 40, 55, .09);
  --rule-invert: rgba(255, 246, 217, .2);
  --rule-invert-soft: rgba(255, 246, 217, .1);

  /* Corner radius, measured off the profile rather than guessed. Sampling the
     rendered slides: content cards round at ~5% of their own width, and
     photographs round at ~12% — photographs are far softer than panels, which
     is most of why the deck reads friendly. Two scales, not one.
     A 430px card at 5% is 22px; a 600px photograph at 12% is 70px. */
  --r-sm: 14px;   /* controls, chips, fields */
  --r: 24px;      /* cards, panels, table blocks */
  --r-fig: clamp(28px, 4.2vw, 64px);  /* photographs */

  /* ---- Type, per brand assets ----------------------------------------
     Exactly two faces: Nafiso for headings, Outfit for everything else.
     No system face is listed ahead of a brand face, so nothing generic
     (Arial, Inter, Segoe UI, system-ui) can win the cascade while the
     webfonts are alive. The bare `sans-serif` at the end is a last-resort
     only reached if both webfonts fail to load entirely.
     Nafiso is not a Google font — see 01b and assets/fonts/README.txt. */
  /* The two faces the brand guide names, and nothing else. Nafiso is served
     from assets/fonts/; Outfit comes from Google Fonts. Outfit is listed after
     Nafiso only as the safety net if the woff2 fails to load — no system face
     is listed ahead of a brand face, so nothing generic can win the cascade.

     Note for anyone comparing the site to the company profile deck: the deck
     does NOT set its headings in Nafiso. Its display face has
     rounded-rectangle bowls, a narrow oval O and a slot for the e aperture,
     none of which Nafiso has. The site follows the brand guide, which is the
     document whose job is to name the brand's font. */
  --f-display: 'Nafiso', 'Outfit', sans-serif;
  --f-spec: 'Outfit', sans-serif;
  --f-body: 'Outfit', sans-serif;

  /* Deliberately non-modular. Plate numerals are huge, subheads are small. */
  --t-plate: clamp(4rem, 15vw, 13rem);
  --t-mega: clamp(2.75rem, 8.2vw, 7.5rem);
  --t-display: clamp(2.25rem, 5.4vw, 4.75rem);
  --t-headline: clamp(1.75rem, 3.4vw, 3.1rem);
  --t-title: clamp(1.35rem, 1.6vw, 1.75rem);
  --t-subhead: 1.0625rem;
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-spec: .8125rem;
  --t-micro: .6875rem;

  /* Vertical rhythm — chosen per section, never global */
  --slab-xs: clamp(1.75rem, 3vw, 2.5rem);
  --slab-s:  clamp(2.5rem, 4.2vw, 3.5rem);
  --slab-m:  clamp(3.25rem, 5.5vw, 4.75rem);
  --slab-l:  clamp(3.75rem, 6.4vw, 5.5rem);
  --slab-xl: clamp(5rem, 9vw, 8rem);

  /* Layout */
  --page: 1440px;
  --gut: clamp(1.15rem, 4vw, 4.5rem);
  --headf: 88px;

  /* Motion — snap and cut, never float */
  --e-snap: cubic-bezier(.16, 1, .3, 1);
  --e-cut:  cubic-bezier(.85, 0, .15, 1);
  --e-drive: cubic-bezier(.3, .85, .2, 1);
  --e-step: steps(7, end);
}

/* --------------------------------------------------------------------------
   01b. BRAND DISPLAY FACE
   NAFISO Regular v1.000 by TWISTY.STD, supplied by the client as
   source/fonts/nafiso.otf and converted to woff2 for the web. Its embedding
   permission is fsType 0, Installable Embedding Permitted, so serving it is
   allowed. 220 glyphs, and every character the site sets in the display face
   is covered.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Nafiso';
  src: url('../fonts/nafiso.woff2') format('woff2');
  /* The family ships one weight, Regular. Claiming the whole range here is
     deliberate: it tells the browser this face answers for every weight, which
     stops it faking a bold by smearing the outlines. Anything that wants real
     bold must use the body face instead — see .sector__t. */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   02. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--headf) + 20px);
  overflow-x: clip;
}

body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 3px;
}
::selection { background: var(--maroon); color: var(--cream); }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
/* Outlined icons opt out of the solid fill. A presentation attribute on the
   SVG loses to the rule above, so the opt-out has to be a class. */
.icon--line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.sr-only {
  position: absolute; 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: 1rem; top: -100px; z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--ink); color: var(--cream);
  font-family: var(--f-spec);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .005em;
  transition: top .2s var(--e-cut);
}
.skip-link:focus-visible { top: 0; }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 1080px; }

/* --------------------------------------------------------------------------
   03. TEXTURE, RULES & SURFACE TREATMENTS
   -------------------------------------------------------------------------- */

/* Grain and the ductwork line-work both used to sit over the dark grounds. The
   profile lays its plum and maroon down flat — no noise, no gradient, no
   drawing behind the type — so both treatments are retired rather than
   softened. The classes stay live because the markup still carries them and
   because a flat ground is the correct answer, not a missing one. */
.grain { position: relative; }

.depth {
  position: relative;
  background-color: var(--ink);
}

/* Hairline with a drawing tick at each end */
.rule {
  position: relative;
  height: 1px;
  background: var(--rule);
}
.rule::before, .rule::after {
  content: '';
  position: absolute; top: -3px;
  width: 1px; height: 7px;
  background: var(--maroon);
}
.rule::before { left: 0; }
.rule::after  { right: 0; }
.rule--invert { background: var(--rule-invert); }
.rule--invert::before, .rule--invert::after { background: var(--accent); }

/* Halftone dot field, used behind plate numerals and quiet corners */
.dots {
  background-image: radial-gradient(var(--maroon) 1px, transparent 1.4px);
  background-size: 11px 11px;
  opacity: .16;
}

/* Profile card — the deck's signature block. A rounded rectangle whose
   top-right corner is stepped in, leaving a cut for the index numeral to sit
   in on the page ground. The shape is the union of two rounded rectangles,
   painted by the pseudo-elements rather than clipped, so it stays fluid at any
   width and needs no path arithmetic. Children must carry z-index 1; the
   element is its own stacking context so nothing leaks out of it. */
.pcard,
.sector,
.step {
  position: relative;
  z-index: 0;
  background: none;
  --pcard-notch-w: 3.6rem;
  --pcard-notch-h: 3rem;
  --pcard-fill: var(--ink);
}
.pcard::before, .pcard::after,
.sector::before, .sector::after,
.step::before, .step::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: var(--r);
  background: var(--pcard-fill);
}
.pcard::before,
.sector::before,
.step::before { inset: 0 var(--pcard-notch-w) 0 0; }
.pcard::after,
.sector::after,
.step::after  { inset: var(--pcard-notch-h) 0 0 0; }
/* Where a card carries no numeral there is nothing to make room for, so the
   step closes up and it reads as a plain rounded card. */
.pcard--plain { --pcard-notch-w: 0rem; --pcard-notch-h: 0rem; }

/* The numeral that sits in the cut, on the page ground rather than the card. */
.pcard__no,
.sector__no,
.step__no {
  position: absolute;
  top: -.15rem; right: .4rem;
  z-index: 1;
  font-family: var(--f-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(61, 40, 55, .18);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   04. TYPE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 700; }

/* Headings follow the company profile: sentence case, geometric display face,
   and — the profile's real signature — two colours inside a single line, the
   emphasised words in maroon against plum (or plum against cream on a dark
   ground). The all-caps setting the site used before appears nowhere in the
   profile, so it is gone. */
.display, .mega, .headline, .plate {
  font-family: var(--f-display);
  line-height: .95;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* Second-colour word(s) inside a heading.
   On a light ground the emphasis is maroon against plum. On a plum ground the
   emphasis uses the maroon tint rather than maroon itself — the profile sets
   maroon straight onto plum, which measures about 1.8:1 and is unreadable, and
   the tint carries the same intent at 3.5:1. */
.hl { color: var(--maroon); }
.on-dark .hl,
.slab--ink .hl { color: var(--accent); }
.slab--maroon .hl, .band .hl { color: rgba(255, 246, 217, .62); }

/* The profile sets its titles at a medium weight and lets size and colour do
   the work. Nothing in the deck is set at 800 or 900, and the heavy setting is
   most of why the site read as a different company from the document. */
.mega { font-size: var(--t-mega); font-weight: 400; letter-spacing: -.022em; }
.display { font-size: var(--t-display); font-weight: 400; letter-spacing: -.02em; }
.headline { font-size: var(--t-headline); font-weight: 400; line-height: 1; }

/* Plate numeral — the recurring structural motif of the site.
   Solid and set back, like a number stencilled on plant and then painted over.
   Never outline-stroked: hollow display type is a tool default, not a choice. */
.plate {
  font-size: var(--t-plate);
  font-weight: 400;
  line-height: .74;
  color: var(--maroon);
  opacity: .12;
  user-select: none;
  pointer-events: none;
}
.plate--solid { opacity: .1; }
.plate--invert { color: var(--cream); opacity: .09; }

/* Section label. Sentence case in Outfit, marked by a rule rather than by
   letter-spacing — the tracked-caps eyebrow is reserved for .eyebrow, which
   appears once per page and nowhere else. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-spec);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--maroon);
}
.kicker::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
}
.kicker--invert { color: var(--accent); }
.kicker--bare::before { display: none; }
/* Maroon is invisible on a maroon ground; on those slabs both small labels
   take the cream the profile uses for the same job. */
.slab--maroon .kicker, .band .kicker,
.slab--maroon .eyebrow, .band .eyebrow { color: rgba(255, 246, 217, .78); }
.slab--maroon .kicker__ref, .band .kicker__ref { color: rgba(255, 246, 217, .5); }
.slab--ink .kicker, .slab--ink .eyebrow { color: var(--accent); }

/* The sheet reference in front of a section label. No box: a bordered badge
   around a number is decoration standing in for hierarchy. */
.kicker__ref {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--maroon-300);
}
.kicker--invert .kicker__ref { color: rgba(255, 246, 217, .5); }

/* The page locator above the title. The profile sets nothing in tracked caps,
   so neither does this — it is the same small label as the kicker, marked by a
   rule and set in sentence case. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--f-spec);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--maroon);
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 34px; height: 1px;
  background: currentColor;
}

/* Body copy */
.lede {
  font-size: clamp(1.0625rem, 1.05vw + .8rem, 1.35rem);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 46ch;
}
.copy { color: var(--fg-2); max-width: 62ch; }
.copy + .copy { margin-top: 1.1rem; }
.copy--tight { max-width: 40ch; }

/* Subhead — deliberately much smaller than the headline above it */
.subhead {
  font-family: var(--f-spec);
  font-size: var(--t-subhead);
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.25;
}

.num {
  font-family: var(--f-spec);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.01em;
}

.on-dark { color: var(--cream); }
.on-dark .copy, .on-dark .lede { color: rgba(255, 246, 217, .72); }

/* --------------------------------------------------------------------------
   05. CONTROLS
   -------------------------------------------------------------------------- */

/* Maroon ground, cream label, Outfit bold, sentence case, rounded to the same
   scale the profile rounds its controls and fields. */
.btn {
  --b-bg: var(--maroon);
  --b-fg: var(--cream);
  --b-wipe: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1rem 1.6rem;
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: var(--f-spec);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .005em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-sm);
  transition: color .3s var(--e-cut);
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--b-wipe);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--e-cut);
  z-index: -1;
}
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.btn .icon { font-size: 1.05em; transition: transform .3s var(--e-cut); }
.btn:hover .icon { transform: translateX(4px); }

/* Kept for the odd cream-on-plum placement, but the primary action anywhere on
   the site is the default maroon button with a cream label. */
.btn--cream { --b-bg: var(--cream); --b-fg: var(--maroon-800); --b-wipe: var(--maroon); }
.btn--cream:hover { color: var(--cream); }

.btn--ghost {
  --b-bg: transparent;
  --b-fg: var(--ink);
  --b-wipe: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.btn--ghost:hover { color: var(--cream); }

.btn--outline {
  --b-bg: transparent;
  --b-fg: var(--cream);
  --b-wipe: var(--cream);
  box-shadow: inset 0 0 0 1px var(--rule-invert);
}
.btn--outline:hover { color: var(--maroon-800); }

/* A maroon button on a maroon ground is invisible. Anywhere the ground is
   already maroon the primary action takes the cream fill instead, which is the
   pairing the profile uses on its maroon pages. */
.band .btn:not(.btn--cream):not(.btn--ghost):not(.btn--outline):not(.btn--wa),
.slab--maroon .btn:not(.btn--cream):not(.btn--ghost):not(.btn--outline):not(.btn--wa) {
  --b-bg: var(--cream);
  --b-fg: var(--maroon-800);
  --b-wipe: var(--ink);
}
.band .btn:not(.btn--cream):not(.btn--ghost):not(.btn--outline):not(.btn--wa):hover,
.slab--maroon .btn:not(.btn--cream):not(.btn--ghost):not(.btn--outline):not(.btn--wa):hover { color: var(--cream); }

/* WhatsApp keeps its glyph but not its green — the palette is three colours. */
.btn--wa { --b-bg: var(--maroon-800); --b-fg: var(--cream); --b-wipe: var(--maroon); }
.btn--wa:hover { color: var(--cream); }
.btn--wa:hover .icon { transform: none; }

.btn--lg { padding: 1.2rem 2.1rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }

/* Mechanical link — arrow travels in discrete steps, like a linear actuator */
.mlink {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--f-spec);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--maroon);
  padding-bottom: .3rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size .3s var(--e-cut);
}
.mlink .icon { transition: transform .28s var(--e-step); }
.mlink:hover { background-size: 100% 1px; }
.mlink:hover .icon { transform: translateX(8px); }
.mlink--invert { color: var(--accent); }

/* --------------------------------------------------------------------------
   06. CHROME — utility bar, header, nav, floating actions
   -------------------------------------------------------------------------- */
.utility {
  background: var(--ink-deep);
  color: rgba(255, 246, 217, .72);
  font-family: var(--f-spec);
  font-size: var(--t-small);
  letter-spacing: .005em;
}
.utility__in {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
}
.utility__list { display: flex; align-items: stretch; }
.utility__list li { display: flex; }
.utility__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-inline: clamp(.6rem, 1.4vw, 1.15rem);
  border-right: 1px solid rgba(255, 246, 217, .12);
  transition: background-color .25s var(--e-cut), color .25s var(--e-cut);
}
.utility__list li:first-child .utility__link { padding-left: 0; }
.utility__link .icon { font-size: 1.05em; color: var(--accent); }
.utility__link:hover { background: var(--maroon); color: var(--cream); }
.utility__link--static { cursor: default; }
.utility__link--static:hover { background: none; color: inherit; }

.utility__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-inline: clamp(.75rem, 1.6vw, 1.3rem);
  background: var(--maroon);
  color: var(--cream);
  font-weight: 700;
  transition: background-color .25s var(--e-cut);
}
.utility__cta:hover { background: var(--accent); color: var(--ink); }
.utility__dot {
  width: 6px; height: 6px;
  background: var(--cream);
  animation: blip 1.9s steps(1, end) infinite;
}
@keyframes blip { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }

/* Header — asymmetric: mark hard left, nav pushed right, no centred pill */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .3s var(--e-cut), background-color .3s var(--e-cut);
}
.header.is-stuck {
  box-shadow: 0 1px 0 var(--rule), 0 18px 34px -30px rgba(61, 40, 55, .7);
}
/* The drawer is a child of the header, so the header's z-index is the one that
   actually competes with the scrim. Left at 90 the scrim (95) painted straight
   over the open drawer and dimmed it. While the drawer is open the header is
   lifted past the scrim so the panel sits in front of it, where it belongs. */
body.is-locked .header { z-index: 96; }
.header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--headf);
}
.header__actions { display: flex; align-items: stretch; gap: .75rem; }
.header__bar {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: var(--maroon);
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo {
  width: auto; height: 60px;
  transition: opacity .25s var(--e-cut);
}
.brand:hover .brand__logo { opacity: .78; }
.brand--footer .brand__logo { height: 100px; }

/* Nav items carry drawing-sheet indices */
.nav__list { display: flex; align-items: center; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .55rem .85rem;
  font-family: var(--f-spec);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--fg-2);
  transition: color .25s var(--e-cut);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: .85rem; right: .85rem; bottom: .3rem;
  height: 1px;
  background: var(--maroon);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--e-cut);
}
.nav__link:hover { color: var(--maroon); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__head, .nav__close, .nav__drawer-foot { display: none; }

.burger {
  display: none;
  width: 46px; height: 46px;
  padding: 14px 11px;
  flex-direction: column;
  justify-content: space-between;
  background: var(--ink);
}
.burger span {
  display: block; height: 2px; width: 100%;
  background: var(--cream);
  transition: transform .3s var(--e-cut), opacity .2s var(--e-cut);
}
.burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; }
.burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Deep enough that the drawer reads as a panel in front of the page. At the
   old .72 plum the scrim and the drawer were near-identical over a plum hero,
   so the panel edge vanished and the page behind looked like drawer content. */
.scrim {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(24, 14, 21, .8);
  opacity: 0;
  transition: opacity .3s var(--e-cut);
}
.scrim.is-visible { opacity: 1; }

/* Floating actions — square, cut corner, no bounce */
.fab {
  position: fixed;
  right: clamp(.9rem, 2vw, 1.6rem);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform .25s var(--e-cut);
}
.fab svg { width: 25px; height: 25px; fill: currentColor; }
.fab:hover { transform: translateY(-3px); }
.fab--wa {
  bottom: clamp(.9rem, 2vw, 1.6rem);
  background: var(--maroon); color: var(--cream);
}
.fab--top {
  bottom: calc(clamp(.9rem, 2vw, 1.6rem) + 62px);
  width: 44px; height: 44px;
  background: var(--ink); color: var(--cream);
}
.fab--top svg { width: 20px; height: 20px; }
.fab[hidden] { display: none; }

/* --------------------------------------------------------------------------
   07. SLABS & ASYMMETRIC LAYOUT
   -------------------------------------------------------------------------- */

/* Sections are "slabs". Padding is chosen per slab, never globally. */
.slab { position: relative; padding-block: var(--slab-m); }
.slab--xs { padding-block: var(--slab-xs); }
.slab--s  { padding-block: var(--slab-s); }
.slab--m  { padding-block: var(--slab-m); }
.slab--l  { padding-block: var(--slab-l); }
.slab--xl { padding-block: var(--slab-xl); }
.slab--top-flush { padding-top: 0; }
.slab--bot-flush { padding-bottom: 0; }
.slab--pull { margin-top: clamp(-7rem, -6vw, -3rem); }

.slab--paper { background: var(--paper); }
.slab--paper2 { background: var(--paper-2); }
.slab--cream { background: var(--cream); }

/* Plum grounds are laid down flat, the way the profile lays them. */
.slab--ink {
  color: var(--cream);
  background-color: var(--ink);
}
.slab--maroon {
  color: var(--cream);
  background-color: var(--maroon);
}

.slab--ink .copy, .slab--maroon .copy,
.slab--ink .lede, .slab--maroon .lede { color: rgba(255, 246, 217, .72); }

/* 12-column bed for off-grid placement */
.bed {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2rem);
}
.c1-5   { grid-column: 1 / 6; }
.c1-6   { grid-column: 1 / 7; }
.c1-7   { grid-column: 1 / 8; }
.c1-8   { grid-column: 1 / 9; }
.c2-7   { grid-column: 2 / 8; }
.c2-8   { grid-column: 2 / 9; }
.c3-9   { grid-column: 3 / 10; }
.c4-13  { grid-column: 4 / 13; }
.c5-13  { grid-column: 5 / 13; }
.c6-13  { grid-column: 6 / 13; }
.c7-13  { grid-column: 7 / 13; }
.c8-13  { grid-column: 8 / 13; }
.c9-13  { grid-column: 9 / 13; }
.c1-13  { grid-column: 1 / 13; }

/* Deliberate vertical offsets so rows never line up flat */
.drop-1 { margin-top: clamp(1.5rem, 4vw, 4rem); }
.drop-2 { margin-top: clamp(2.5rem, 7vw, 7.5rem); }
.lift-1 { margin-top: clamp(-4rem, -4vw, -1.5rem); }

/* Bleed past the container to the viewport edge */
.bleed-r { margin-right: calc(var(--gut) * -1); }
.bleed-l { margin-left: calc(var(--gut) * -1); }
@media (min-width: 1500px) {
  .bleed-r { margin-right: calc((100vw - var(--page)) / -2 - var(--gut)); }
  .bleed-l { margin-left: calc((100vw - var(--page)) / -2 - var(--gut)); }
}

/* Rotated edge marker, like a drawing margin stamp */
.edge-tag {
  position: absolute;
  left: calc(var(--gut) * -1 + .2rem);
  top: 0;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--f-spec);
  font-size: var(--t-spec);
  letter-spacing: .02em;
  color: var(--fg-3);
  pointer-events: none;
}
.edge-tag--invert { color: rgba(255, 246, 217, .38); }

/* Section header block — index, rule, then title. Not centred. */
.shead { position: relative; }
.shead__rule { margin-block: 1.1rem 1.4rem; }
.shead__title { margin-bottom: 0; }
.shead__lede { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   08. HERO
   -------------------------------------------------------------------------- */
/* The profile opens its content pages on white, sets the title in two brand
   colours across one line, and drops the opening paragraph into a maroon
   rounded card beside a full-colour photograph in a rounded frame. The hero is
   built to that page rather than to a separate idea of its own. */
.hero {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  isolation: isolate;
}
.hero__bed {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
  align-items: start;
  padding-top: clamp(2.5rem, 6vw, 5rem);
}
/* Both children are pinned to row 1 so the text overlaps the image. Without an
   explicit row the auto-placement algorithm dodges the explicitly-placed figure
   and drops the text into row 2, stacking them instead of layering them. */
.hero__col {
  grid-column: 1 / 7;
  grid-row: 1;
  position: relative;
  z-index: 3;
  padding-block: clamp(.5rem, 2vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
}

.hero__title { margin-top: .9rem; }
/* Two brand colours, one weight, stacked flush — the profile's title treatment.
   Line three is still part of the h1: it names the trades in a plain sentence
   so the first screen answers "what do these people actually do". */
.hero__l1,
.hero__l2 {
  display: block;
  /* Sized so "and maintain" holds one line inside the six-column measure. The
     mega step is for full-width titles and overflows here. */
  font-size: clamp(2.6rem, 6.1vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -.024em;
  line-height: 1.02;
}
.hero__l1 { color: var(--maroon); }
.hero__l2 { color: var(--plum); }
.hero__l3 {
  display: block;
  margin-top: .8rem;
  max-width: 26ch;
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .004em;
  line-height: 1.4;
  text-transform: none;
  color: var(--fg-2);
}

/* The opening paragraph sits in a maroon card, as it does on the profile's
   company-overview page. */
.hero__lede {
  margin-top: 1.25rem;
  max-width: 46ch;
  padding: clamp(1.15rem, 1.9vw, 1.55rem) clamp(1.25rem, 2.1vw, 1.75rem);
  border-radius: var(--r);
  background: var(--maroon);
  /* .9rem was set when this card held four paragraphs and had to stay out of the
     h1's way. It now holds two short lines, so it can take its proper size. */
  font-size: clamp(.95rem, 1.1vw, 1.075rem);
  line-height: 1.5;
  color: var(--cream);
}
.hero__lede p + p { margin-top: .55rem; }

.hero__cta { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__call {
  margin-top: 1.15rem;
  font-size: .875rem;
  color: var(--fg-2);
}
.hero__call a {
  color: var(--maroon);
  font-weight: 600;
  border-bottom: 1px solid var(--maroon-300);
}
.hero__call a:hover { background: var(--maroon); color: var(--cream); }

/* The photograph is contained in a rounded frame rather than bled off the
   edge, and it is left in full colour. Both are how the profile handles every
   photograph it places. */
.hero__fig {
  grid-column: 7 / 13;
  grid-row: 1;
  position: relative;
  z-index: 1;
  margin-top: clamp(.5rem, 2vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  align-self: stretch;
}
.hero__fig .duo {
  display: block;
  height: 100%;
  min-height: clamp(340px, 46vh, 520px);
  clip-path: none;
  border-radius: var(--r-fig);
}
/* The frame is a stretched grid item, so its height comes from the text column
   beside it. That only works if the photograph contributes nothing to sizing:
   left in flow, the image's own 788x1400 aspect ratio sets the row height and
   the column ends up taller than anything in it. Taking it out of flow makes
   the text the only thing that decides how tall the fold is. */
.hero__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* Closing strip of the hero, carrying the line the profile puts at the foot of
   its company-overview page: the property types we work on. One statement on
   the page ground, no panel around it. */
.hero__index {
  position: relative;
  padding-block: 0 clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--bg);
}
.hero__index-h {
  max-width: 64ch;
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.35vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -.012em;
  color: var(--plum);
}
.hero__index-h em { font-style: normal; color: var(--maroon); }
.hero__index-h:only-child { margin-bottom: 0; }


/* Stat rail — three numerals stepping down the page on a diagonal, not three
   equal cards in a row. The numeral is the whole treatment: no panel, no
   border, no rounded tile behind it. */
.rail {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2rem);
  /* Ground bleeds edge to edge; the grid itself sits on the page measure. */
  padding-inline: max(var(--gut), calc((100% - var(--page)) / 2 + var(--gut)));
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
  color: var(--cream);
  background-color: var(--maroon);
}
/* A datum line runs the full width of the band and each figure hangs from it
   on its own drop, each drop longer than the last. That is where the diagonal
   comes from — it is a dimension line off a drawing, not three cards nudged
   out of alignment. */
.rail::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: clamp(2.25rem, 4.5vw, 3.5rem);
  height: 1px;
  background: rgba(255, 246, 217, .3);
}
.rail__item { position: relative; grid-row: 1; }
.rail__item:nth-child(1) { grid-column: 1 / 5; }
.rail__item:nth-child(2) { grid-column: 5 / 9; }
.rail__item:nth-child(3) { grid-column: 9 / 13; }

/* The drop from the datum to the figure. */
.rail__item::before {
  content: '';
  display: block;
  width: 1px;
  margin-bottom: 1.15rem;
  background: rgba(255, 246, 217, .45);
}
.rail__item:nth-child(1)::before { height: clamp(1.25rem, 2.5vw, 2rem); }
.rail__item:nth-child(2)::before { height: clamp(2.75rem, 6vw, 5rem); }
.rail__item:nth-child(3)::before { height: clamp(4.25rem, 9.5vw, 8rem); }

/* The node where each drop meets the datum. */
.rail__item::after {
  content: '';
  position: absolute;
  left: -3px; top: -3.5px;
  width: 7px; height: 7px;
  background: var(--cream);
  transform: rotate(45deg);
}

.rail__v {
  display: flex;
  align-items: baseline;
  gap: .05rem;
  font-family: var(--f-display);
  font-size: clamp(3.75rem, 9.5vw, 8.5rem);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}
.rail__sfx { font-size: .55em; color: rgba(255, 246, 217, .6); }
.rail__k {
  margin-top: .85rem;
  font-family: var(--f-spec);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--cream);
}
.rail__note {
  margin-top: .3rem;
  font-size: var(--t-small);
  line-height: 1.45;
  max-width: 26ch;
  color: rgba(255, 246, 217, .7);
}

/* Ticker */
.ticker {
  overflow: hidden;
  background: var(--maroon-900);
  border-block: 1px solid rgba(255, 246, 217, .12);
  padding-block: .7rem;
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  animation: roll 42s linear infinite;
}
.ticker__i {
  font-family: var(--f-spec);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .005em;
  color: rgba(255, 246, 217, .62);
  white-space: nowrap;
}
.ticker__d { color: var(--accent); font-size: .5rem; }
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   09. SERVICES — full-width rows, not a card grid
   -------------------------------------------------------------------------- */
.svc { border-top: 1px solid var(--rule); }
.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2rem);
  align-items: center;
  padding-block: clamp(1.85rem, 3.4vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
  transition: background-color .4s var(--e-cut);
}
.svc__row:hover { background: var(--cream); }

.svc__no {
  grid-column: 1 / 3;
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 4.4vw, 4.25rem);
  font-weight: 400;
  line-height: .8;
  color: var(--maroon);
  opacity: .22;
  transition: opacity .4s var(--e-cut);
}
.svc__row:hover .svc__no { opacity: 1; }

.svc__body { grid-column: 3 / 8; }
.svc__t { font-size: clamp(1.35rem, 2vw, 2rem); }
.svc__d { margin-top: .85rem; font-size: var(--t-small); color: var(--fg-2); max-width: 48ch; }
/* Read as a run of plant, separated by a hairline — not boxed badges. */
.svc__tags {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 0;
}
/* Marked with a plus rather than separated by a rule, so the line items on
   this page match the ones on every other page and in the profile. */
.svc__tag {
  font-family: var(--f-spec);
  font-size: var(--t-small);
  letter-spacing: .005em;
  color: var(--fg-2);
  line-height: 1.3;
  padding-left: 1.05rem;
  margin-right: 1.1rem;
  position: relative;
}
.svc__tag::before {
  content: '+';
  position: absolute; left: 0; top: 0;
  font-weight: 500;
  color: var(--maroon);
}
.svc__tag:last-child { margin-right: 0; }
.svc__go { grid-column: 8 / 10; align-self: center; justify-self: start; }

/* Image slides out of the right edge on hover — mechanical, no scale */
.svc__fig {
  grid-column: 10 / 13;
  position: relative;
  overflow: hidden;
  align-self: stretch;
  min-height: 150px;
}
.svc__fig img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 100%);
  transition: clip-path .5s var(--e-cut);
}
.svc__row:hover .svc__fig img { clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------------------
   10. SECTORS / PROCESS / VALUES — varied treatments, never one die
   -------------------------------------------------------------------------- */

/* Sector grid. The cards themselves are profile cards — shape, fill and
   numeral come from the shared rules in 03 and the block near the end of this
   file. Only the grid and the line items are set here.
   Nothing may be hung on .sector::before or .sector::after: both are spoken
   for by the card shape. */
.sectors { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2rem); }

.sector__list { display: grid; gap: .3rem; }
.sector__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-spec);
}
/* The profile marks every line item with a plus. */
.sector__list li::before {
  content: '+';
  position: absolute; left: 0; top: 0;
  font-weight: 500;
  color: var(--accent);
}

/* Process. The profile runs its six steps as a flow of alternating maroon and
   plum blocks on a single ground, three across and three back. They are the
   same profile card the sectors use, so the two pages read as one system.
   Nothing may be hung on .step::before or .step::after — both paint the card. */
.steps {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(.85rem, 1.8vw, 1.15rem);
  row-gap: clamp(.85rem, 1.8vw, 1.15rem);
}
.step {
  grid-column: span 4;
  padding: 1.35rem 1.4rem 1.5rem;
  color: var(--cream);
}
.step:nth-child(even) { --pcard-fill: var(--maroon); }
.step__t, .step__d { position: relative; z-index: 1; }
.step__t { margin-top: 0; padding-right: 3.4rem; font-size: 1.0625rem; font-weight: 700; }
.step__d { margin-top: .5rem; font-size: var(--t-small); line-height: 1.55; color: rgba(255, 246, 217, .78); }

/* Values. The card layout — icon tile beside the text, no box around the
   whole thing — is set with the other profile card layouts near the end of
   this file; only the grid and the type sizes are here. */
.values {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2rem);
  row-gap: clamp(1.6rem, 3vw, 2.5rem);
}
.value__t { font-size: 1.1875rem; }
.value__d { margin-top: .5rem; font-size: var(--t-small); color: rgba(255, 246, 217, .78); }

/* Why choose. The profile sets these six as plain text blocks in three
   columns with no card around them, so this is a rule and two paragraphs.
   The rule alternates colour so the six do not read as one stamped set. */
.why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.7rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 2.8rem);
}
@media (max-width: 1024px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .why { grid-template-columns: 1fr; } }
.why__i { padding-top: 1.05rem; border-top: 2px solid var(--maroon); }
.why__i:nth-child(3n + 2) { border-top-color: var(--plum); }
.why__t { font-family: var(--f-spec); font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.why__d { margin-top: .55rem; font-size: var(--t-small); line-height: 1.6; color: var(--fg-2); }

/* Client register. No logo wall: we hold no artwork for these marks and no
   written permission to reproduce them, and a grid of scraped logos at mixed
   resolutions is the first thing a tender reviewer discounts. So this is a
   schedule of names on hairline rules, numbered, which is the form a reference
   list is actually issued in. Two groups because the work is two kinds of
   work — a maintenance contract and a repair call are not the same claim. */
.reg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.9rem, 3.6vw, 3.25rem);
  align-items: start;
}
/* The .bed has a column gap and no row gap, so once the section stacks the
   register lands hard against the note above it. Nothing else in the bed needs
   this because everything else that stacks carries a .drop-* class. */
@media (max-width: 1024px) { .reg { margin-top: clamp(1.5rem, 4vw, 2.25rem); } }
@media (max-width: 860px)  { .reg { grid-template-columns: 1fr; } }

.reg__h {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--maroon);
  font-family: var(--f-spec);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
}
/* Same alternation as .why — two neighbouring groups must not read as one
   stamped set. */
.reg__g:nth-child(2) .reg__h { border-bottom-color: var(--plum); }

.reg__n {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--t-spec);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}

.reg__l { display: grid; }
.reg__l li {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--rule-soft);
  line-height: 1.35;
}
.reg__l li:last-child { border-bottom: 0; }
.reg__i {
  flex: 0 0 1.4rem;
  font-family: var(--f-spec);
  font-size: var(--t-spec);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--maroon-300);
}
.reg__c { font-weight: 500; }
.reg__note { margin-top: 1.6rem; font-size: var(--t-spec); color: var(--fg-3); }

/* --------------------------------------------------------------------------
   11. FIGURES, GALLERY, LICENCE
   -------------------------------------------------------------------------- */

/* Photograph frame. Full colour, rounded, as the company profile prints them. */
/* The company profile prints its photographs in full colour inside rounded
   frames, so the maroon duotone that used to sit here is gone. The wrapper and
   its two overlay layers are kept but neutral, so a single opacity change
   brings the tone back if it is ever wanted again. */
.duo { display: block; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); }
.duo img { width: 100%; display: block; transition: filter .45s var(--e-cut); }
/* The z-index here is load-bearing, not decoration. `filter` on the image makes
   it a stacking context, so it painted in the same pass as the two z-index:auto
   overlays and — being later in tree order than ::before — covered the maroon
   multiply entirely. Every photograph on the site was rendering as plain
   greyscale; the hero only looked toned because .hero__fig::after lays a
   separate plum gradient over it. Explicit z-index puts the tint back on top. */
.duo::before, .duo::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  transition: opacity .45s var(--e-cut);
}
.duo::before { background: var(--maroon-800); mix-blend-mode: multiply; opacity: 0; z-index: 1; }
.duo::after { background: var(--cream); mix-blend-mode: lighten; opacity: 0; z-index: 2; }
.duo:hover img { filter: none; }
.duo:hover::before, .duo:hover::after { opacity: 0; }
.duo--locked:hover img { filter: none; }
.duo--locked:hover::before { opacity: 0; }
.duo--locked:hover::after { opacity: 0; }

/* Photographs outside a .duo wrapper — galleries, capability trios, service
   rows and service-detail figures. Two thirds of the site's images sit here,
   and in full colour they were the one place a fourth, fifth and sixth hue got
   in. They get the same multiply/lighten pair .duo uses, so the treatment is
   identical rather than merely similar. Hover releases to full colour. */
.gal__i, .trio figure, .sd__fig, .svc__fig { isolation: isolate; }

.gal__i > img,
.trio figure > img,
.sd__fig img,
.svc__fig img { transition: transform .6s var(--e-cut), clip-path .5s var(--e-cut); }

.gal__i::before, .gal__i::after,
.trio figure::before, .trio figure::after,
.sd__fig::before, .sd__fig::after,
.svc__fig::before, .svc__fig::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  transition: opacity .45s var(--e-cut), clip-path .5s var(--e-cut);
}
.gal__i::before, .trio figure::before, .sd__fig::before, .svc__fig::before {
  background: var(--maroon-800); mix-blend-mode: multiply; opacity: 0; z-index: 1;
}
.gal__i::after, .trio figure::after, .sd__fig::after, .svc__fig::after {
  background: var(--cream); mix-blend-mode: lighten; opacity: 0; z-index: 2;
}
/* Captions ride above the tint rather than under it. */
.gal__cap, .trio figcaption { z-index: 3; }

/* The service-row image wipes in from the right, so its tint has to wipe with
   it — otherwise the overlay sits on the bare row background as a maroon slab. */
.svc__fig::before, .svc__fig::after { clip-path: inset(0 0 0 100%); }
.svc__row:hover .svc__fig::before, .svc__row:hover .svc__fig::after { clip-path: inset(0 0 0 0); }


.gal__i:hover::before, .gal__i:hover::after,
.trio figure:hover::before, .trio figure:hover::after,
.sd__fig:hover::before, .sd__fig:hover::after { opacity: 0; }

/* Editorial figure with an overlapping caption plate */
.efig { position: relative; }
.efig img { width: 100%; object-fit: cover; }
.efig__cap {
  position: absolute;
  left: clamp(-1rem, -1vw, 0rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  max-width: 22rem;
  padding: 1rem 1.25rem;
  background: var(--cream);
  color: var(--ink);
  font-size: var(--t-spec);
  line-height: 1.45;
  box-shadow: 0 20px 40px -28px rgba(61, 40, 55, .9);
}
.efig__cap b {
  display: block;
  font-family: var(--f-spec);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--maroon);
  margin-bottom: .2rem;
}
.efig--angle .duo,
.efig--angle > img { clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%); }
.efig--tall img { height: clamp(360px, 62vh, 720px); }

/* Figure paired with a text column across the 12-column bed.
   Its height comes from the text beside it, not from the photograph's own
   aspect ratio. Left to the aspect ratio, a 788x1400 portrait in a bled
   ~950px column rendered about 1700px tall next to roughly 1350px of copy,
   which is where the dead area on the home and company pages came from.
   Taking the image out of flow lets the grid row size itself from the text,
   and the photo then covers whatever height that turns out to be. */
.efig--match {
  height: 100%;
  /* The floor, not the target. It was 46vh when these columns carried three or
     four paragraphs; the copy is now two short ones, so the old floor was what
     decided the row height and the text column sat half empty beside it. */
  min-height: clamp(300px, 34vh, 440px);
}
.efig--match .duo {
  position: absolute;
  inset: 0;
  height: 100%;
}
.efig--match img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

/* Our Commitment. The profile closes on a dark page: the statement held in a
   narrow centred column, with a tall photograph standing at each page edge and
   cropped by it. Both photographs are decorative and carry no information the
   text does not, so they are tinted back into the brand and hidden outright
   once the column has no room to spare. */
.commit { position: relative; overflow: hidden; }
.commit__fig {
  position: absolute;
  z-index: 0;
  top: clamp(2rem, 5vw, 4.5rem);
  bottom: clamp(2rem, 5vw, 4.5rem);
  width: clamp(130px, 15vw, 260px);
  isolation: isolate;
  border-radius: var(--r-fig);
  overflow: hidden;
}
.commit__fig--l { left: -2.75rem; }
.commit__fig--r { right: -2.75rem; }
/* Duotone, not a tint. One of the two photographs is lit blue and the other
   daylight white; multiplying maroon straight over them left one cold and one
   pale. Stripping the colour first and then rebuilding it out of maroon and
   cream puts both in the same key, which is what the profile page does. */
.commit__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.96);
}
.commit__fig::before,
.commit__fig::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.commit__fig::before {
  z-index: 1;
  background: var(--maroon);
  mix-blend-mode: multiply;
  opacity: .82;
}
.commit__fig::after {
  z-index: 2;
  background: var(--cream);
  mix-blend-mode: lighten;
  opacity: .1;
}
.commit__in {
  position: relative;
  z-index: 1;
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.commit__t {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.024em;
}
.commit__d { margin-top: 1.3rem; color: rgba(255, 246, 217, .78); }
.commit__d--lead {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  color: var(--cream);
}

/* Full-bleed documentary band with type sitting over the image */
/* Documentary band. The profile never runs a photograph off the edge of a
   content page, so this one sits on the page measure in a rounded frame with
   the quotation laid over its foot. */
.wide {
  position: relative;
  height: clamp(300px, 52vh, 560px);
  margin-inline: max(var(--gut), calc((100% - var(--page)) / 2 + var(--gut)));
  border-radius: var(--r-fig);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.wide__fig { position: absolute; inset: 0; }
.wide__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.wide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(15deg, rgba(61, 40, 55, .92) 8%, rgba(61, 40, 55, .25) 55%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}
/* The overlay is a .wrap, and the band is already inset to the page measure —
   left alone it would indent a second time. */
.wide__over {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  max-width: none;
  padding-inline: clamp(1.35rem, 3vw, 2.75rem);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
.wide__q {
  margin-top: .8rem;
  max-width: 22ch;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.2vw, 2.85rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--cream);
}
.wide__by {
  margin-top: .9rem;
  font-family: var(--f-spec);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--accent);
}

/* Small capability trio */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1.2vw, 1rem); }
.trio figure { position: relative; overflow: hidden; background: var(--ink); }
.trio img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.trio figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .55rem .7rem;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-spec);
  font-size: var(--t-spec);
  font-weight: 500;
  letter-spacing: .005em;
  text-align: center;
  transform: translateY(0);
  transition: background-color .35s var(--e-cut);
}
.trio figure:hover figcaption { background: var(--maroon); }

/* Gallery — irregular masonry, caption wipes up on hover */
.gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.5rem, 1.2vw, 1rem); }
.gal__i { position: relative; overflow: hidden; background: var(--ink); grid-column: span 4; }
.gal__i img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--e-cut); }
.gal__i:nth-child(6n + 1) { grid-column: span 6; }
.gal__i:nth-child(6n + 1) img { aspect-ratio: 16 / 10; }
.gal__i:nth-child(6n + 4) { grid-column: span 3; }
.gal__i:nth-child(6n + 4) img { aspect-ratio: 3 / 4; }
.gal__i:nth-child(6n + 5) { grid-column: span 3; }
.gal__i:nth-child(6n + 5) img { aspect-ratio: 3 / 4; }
.gal__i:hover img { transform: scale(1.04); }

.gal__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .75rem .9rem;
  background: var(--maroon);
  color: var(--cream);
  font-family: var(--f-spec);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .005em;
  transform: translateY(100%);
  transition: transform .38s var(--e-cut);
}
.gal__i:hover .gal__cap { transform: translateY(0); }
.gal__i.is-hidden { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule); width: max-content; max-width: 100%; }
.filter {
  padding: .7rem 1.15rem;
  font-family: var(--f-spec);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--fg-2);
  border-right: 1px solid var(--rule);
  transition: background-color .25s var(--e-cut), color .25s var(--e-cut);
}
.filter:last-child { border-right: 0; }
.filter:hover { background: var(--cream); color: var(--maroon); }
.filter.is-active { background: var(--ink); color: var(--cream); }

/* Licence — data plate */
.plate-card {
  position: relative;
  color: var(--cream);
  background-color: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 217, .16);
}
.plate-card__hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-invert);
}
.plate-card__no {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: .85;
  color: var(--accent);
  letter-spacing: -.03em;
}
.spec-rows { margin-top: 1.25rem; }
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 1rem;
  padding-block: .7rem;
  border-bottom: 1px solid var(--rule-invert-soft);
  font-size: var(--t-small);
}
.spec-row dt {
  font-family: var(--f-spec);
  font-size: var(--t-small);
  letter-spacing: .005em;
  color: rgba(255, 246, 217, .6);
  padding-top: .05rem;
}
.spec-row dd { font-weight: 500; }

.act-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: .1rem 1.5rem; }
.act-list li {
  position: relative;
  padding: .5rem 0 .5rem 1.6rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-small);
  color: var(--fg-2);
}
.act-list li::before {
  content: '+';
  position: absolute; left: 0; top: .5rem;
  font-weight: 500;
  color: var(--maroon);
}

/* Vision / mission — offset pair, not twin cards */
.vm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2rem); }
.vm__b { position: relative; padding: 1.25rem 0 0; }
.vm__b:nth-child(1) { grid-column: 1 / 6; border-top: 2px solid var(--maroon); }
.vm__b:nth-child(2) { grid-column: 7 / 12; border-top: 2px solid var(--accent); margin-top: clamp(.75rem, 2.2vw, 2.25rem); }
.vm__b:nth-child(3) { grid-column: 3 / 10; border-top: 1px solid var(--rule); margin-top: clamp(1rem, 2.4vw, 2rem); }
.vm__t { font-size: 1.5rem; }
.vm__d { margin-top: .8rem; font-size: var(--t-small); color: var(--fg-2); }

/* Centred statement block. The profile gives its vision and its commitment a
   page each with a single centred column and nothing else on it, so this is
   deliberately plain: label, rule, the statement, then the supporting text. */
.stmt { max-width: 68ch; margin-inline: auto; text-align: center; }
.stmt__rule { width: 3.5rem; height: 2px; margin: 1.3rem auto 1.5rem; background: var(--maroon); }
.stmt__q {
  font-family: var(--f-display);
  font-size: clamp(1.55rem, 3.1vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.2;
  color: var(--plum);
}
.stmt__q .hl { color: var(--maroon); }
.stmt .copy { max-width: none; margin-top: 1.4rem; }

/* Trust strip */
.trust { display: grid; gap: 0; margin-top: 2rem; }
.trust li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--rule);
  transition: padding-left .3s var(--e-cut);
}
.trust li:last-child { border-bottom: 1px solid var(--rule); }
.trust li:hover { padding-left: .75rem; }
.trust .icon { font-size: 1.4rem; color: var(--maroon); }
.trust b { display: block; font-size: var(--t-small); }
.trust span { font-size: var(--t-spec); color: var(--fg-3); }

/* Wide call-to-action band */
.band {
  position: relative;
  background: var(--maroon);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.band__in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2rem);
  align-items: end;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.band__t { grid-column: 1 / 8; }
/* The row this shares with the button stack is as tall as the buttons, and the
   grid bottom-aligns everything. With the copy cut to one line that left a hole
   between the heading and the line, so this one item aligns to the top instead
   and sits where it reads: directly under the heading. */
.band__d { grid-column: 1 / 7; align-self: start; margin-top: 1rem; color: rgba(255, 246, 217, .8); }
.band__a { grid-column: 9 / 13; display: flex; flex-direction: column; gap: .6rem; }
/* The halftone dot field behind the closing band is retired with the rest of
   the textures: the profile's maroon pages are plain colour. */
.band__dots { display: none; }

/* --------------------------------------------------------------------------
   12. FORM, FAQ, FOOTER, 404
   -------------------------------------------------------------------------- */
.form-shell {
  background: var(--paper);
  color: var(--fg);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1.15rem; }
.form__f { display: grid; gap: .4rem; }
.form__l {
  font-family: var(--f-spec);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--fg-2);
}
.form__l span { color: var(--maroon); }

/* Underline fields, not rounded boxes */
.form__i {
  width: 100%;
  padding: .7rem .2rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  transition: border-color .3s var(--e-cut), background-color .3s var(--e-cut);
}
.form__i::placeholder { color: var(--fg-3); }
.form__i:hover { border-bottom-color: var(--maroon-300); }
.form__i:focus {
  outline: none;
  border-bottom-color: var(--maroon);
  background: rgba(169, 73, 74, .05);
}
/* Invalid is a heavier maroon rule, valid is a plum one. Weight and wording
   carry the difference — no red/green is introduced. */
.form__i.is-invalid { border-bottom: 2px solid var(--state-err); background: rgba(169, 73, 74, .08); }
.form__i.is-valid { border-bottom-color: var(--state-ok); }
textarea.form__i { resize: vertical; min-height: 128px; border: 1px solid var(--rule); padding: .8rem .9rem; }

.form__sel { position: relative; }
.form__sel select { appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer; }
.form__sel .icon {
  position: absolute; right: .3rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem; color: var(--fg-3);
  pointer-events: none;
}

.form__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.form__count { font-family: var(--f-spec); font-size: var(--t-spec); letter-spacing: .005em; color: var(--fg-3); }

.form__err {
  font-family: var(--f-spec);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--state-err);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .2s var(--e-cut), transform .2s var(--e-cut);
}
.form__err.is-visible { opacity: 1; transform: none; }

.form__consent { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; font-size: var(--t-small); color: var(--fg-2); }
.form__consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.form__box {
  flex: none;
  width: 20px; height: 20px;
  margin-top: .15rem;
  box-shadow: inset 0 0 0 1px var(--rule);
  position: relative;
  transition: background-color .25s var(--e-cut);
}
.form__box::after {
  content: '';
  position: absolute; inset: 4px;
  background: var(--maroon);
  transform: scale(0);
  transition: transform .25s var(--e-cut);
}
.form__consent input:checked + .form__box::after { transform: scale(1); }
.form__consent input:focus-visible + .form__box { outline: 2px solid var(--maroon); outline-offset: 3px; }
.form__box.is-invalid { box-shadow: inset 0 0 0 2px var(--state-err); }

.form__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading .btn__label::after {
  content: '';
  display: inline-block;
  width: .7em; height: .7em;
  margin-left: .5em;
  border: 2px solid rgba(255, 246, 217, .35);
  border-top-color: var(--cream);
  animation: spin .8s steps(8, end) infinite;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form__status {
  font-size: var(--t-small);
  max-height: 0; padding: 0; overflow: hidden;
  transition: max-height .3s var(--e-cut), padding .3s var(--e-cut);
}
.form__status.is-success { max-height: 220px; padding: .9rem 1.05rem; background: var(--ink); color: var(--cream); border-left: 3px solid var(--accent); }
.form__status.is-error { max-height: 220px; padding: .9rem 1.05rem; background: rgba(169, 73, 74, .1); color: var(--maroon-800); border-left: 3px solid var(--maroon); }

/* Contact detail list */
.cdl { display: grid; }
.cdl li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--rule-invert-soft);
}
.cdl li:last-child { border-bottom: 1px solid var(--rule-invert-soft); }
.cdl dt, .cdl__k {
  font-family: var(--f-spec);
  font-size: var(--t-small);
  letter-spacing: .005em;
  color: var(--accent);
  padding-top: .05rem;
}
.cdl__v { display: block; font-size: var(--t-small); font-weight: 500; word-break: break-word; }
a.cdl__v { transition: color .25s var(--e-cut); }
a.cdl__v:hover { color: var(--accent); }

.mapbox { box-shadow: inset 0 0 0 1px var(--rule-invert); }
.mapbox__frame { position: relative; height: clamp(220px, 32vh, 320px); background: var(--maroon-900); }
.mapbox__frame iframe { width: 100%; height: 100%; border: 0; }
.mapbox__body { padding: 1.35rem 1.4rem 1.5rem; }
.mapbox__coord {
  font-family: var(--f-spec);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--accent);
  margin-block: .5rem .9rem;
}
.mapbox__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* FAQ */
.faq { display: grid; }
.faq__i { border-top: 1px solid var(--rule); }
.faq__i:last-child { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--f-spec);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
  transition: color .25s var(--e-cut);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--maroon); }
.faq__q::after {
  content: '';
  flex: none;
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--maroon), var(--maroon)) center / 100% 1px no-repeat,
    linear-gradient(var(--maroon), var(--maroon)) center / 1px 100% no-repeat;
  transition: transform .3s var(--e-cut);
}
.faq__i[open] .faq__q::after { transform: rotate(180deg); background-size: 100% 1px, 0 100%; }
.faq__a { padding-bottom: 1.25rem; font-size: var(--t-small); color: var(--fg-2); max-width: 70ch; }

/* Footer */
.footer {
  color: rgba(255, 246, 217, .72);
  background-color: var(--ink);
}
.footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2rem);
  row-gap: 2.25rem;
  padding-block: clamp(2.25rem, 4.2vw, 3.5rem);
}
.footer__brand { grid-column: 1 / 5; }
.footer__nav { grid-column: 6 / 8; }
.footer__svc { grid-column: 8 / 11; }
.footer__get { grid-column: 11 / 13; }
.footer__txt { margin-top: 1.25rem; font-size: var(--t-small); max-width: 40ch; }
/* A single line of facts, divided by hairlines — not a row of bordered chips. */
.footer__tags { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; }
.footer__tag {
  font-family: var(--f-spec);
  font-size: var(--t-small);
  letter-spacing: .005em;
  color: rgba(255, 246, 217, .8);
  padding-right: .7rem;
  margin-right: .7rem;
  border-right: 1px solid var(--rule-invert-soft);
}
.footer__tag:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.footer__h {
  font-family: var(--f-spec);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--accent);
  padding-bottom: .9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule-invert-soft);
}
.footer__list { display: grid; gap: .55rem; font-size: var(--t-small); }
.footer__a { display: inline-block; transition: color .25s var(--e-cut), transform .25s var(--e-cut); }
.footer__a:hover { color: var(--accent); transform: translateX(3px); }
.footer__bar { border-top: 1px solid var(--rule-invert-soft); }
.footer__bar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-block: 1.1rem;
  /* The WhatsApp button is fixed to the bottom-right corner, which is exactly
     where the last item in this bar comes to rest. Reserve the button's width
     and its own offset so nothing is ever printed underneath it. Written as
     padding-inline, not padding-right, because .wrap on the same element sets
     padding-inline: a physical longhand alongside a logical one is a cascade
     argument nobody needs to have. */
  padding-inline: var(--gut) calc(52px + clamp(.9rem, 2vw, 1.6rem) + .75rem);
  font-family: var(--f-spec);
  font-size: var(--t-small);
  letter-spacing: .005em;
  color: rgba(255, 246, 217, .5);
}

/* The build credit. It sits in the same muted key as the rest of the bar and is
   marked as a link by a hairline rather than an underline, so it reads as a
   signature and not as navigation competing with the footer above it. */
.footer__credit { margin-left: auto; }
.footer__bar-in a {
  color: rgba(255, 246, 217, .72);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 246, 217, .3);
  transition: color .2s, border-color .2s;
}
.footer__bar-in a:hover,
.footer__bar-in a:focus-visible { color: var(--cream); border-bottom-color: currentColor; }

/* Page header for inner pages, built to the profile's content-page opening:
   white ground, two-colour title on the left, one photograph on the right in a
   rounded frame and full colour. The photograph is a companion to the title,
   not a ground behind it, so there is no scrim and no shear. */
.phero {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  min-height: clamp(240px, 24vw, 340px);
  padding-block: clamp(2rem, 3.6vw, 3rem) clamp(2.25rem, 4.2vw, 3.5rem);
}
.phero__in { position: relative; z-index: 2; }
.phero__t { margin-top: 1.1rem; max-width: 18ch; }
.phero__d { margin-top: 1.4rem; max-width: 46ch; color: var(--fg-2); }

.phero__fig {
  position: absolute;
  top: clamp(2.5rem, 5vw, 4.5rem);
  bottom: clamp(3rem, 6vw, 5.5rem);
  right: max(var(--gut), calc((100% - var(--page)) / 2 + var(--gut)));
  z-index: 1;
  width: min(40%, 560px);
  margin: 0;
}
.phero__fig .duo {
  display: block;
  height: 100%;
  clip-path: none;
  border-radius: var(--r-fig);
}
.phero__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.crumbs {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-family: var(--f-spec);
  font-size: var(--t-small);
  letter-spacing: .005em;
  color: var(--fg-3);
}
.crumbs a { transition: color .25s var(--e-cut); }
.crumbs a:hover { color: var(--maroon); }
.crumbs [aria-current="page"] { color: var(--maroon); }

/* Service detail block */
.sd { position: relative; padding-block: clamp(2.25rem, 4.2vw, 3.75rem); border-top: 1px solid var(--rule); }
.sd:first-of-type { border-top: 0; padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.sd__bed { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2rem); align-items: start; }
.sd__body { grid-column: 1 / 7; grid-row: 1; }
.sd:nth-of-type(even) .sd__body { grid-column: 7 / 13; }
.sd__fig { grid-column: 8 / 13; grid-row: 1; position: sticky; top: calc(var(--headf) + 2rem); }
.sd__fig .duo, .sd__fig > img { display: block; height: clamp(320px, 33vw, 500px); }
.sd__fig .duo img { width: 100%; height: 100%; object-fit: cover; }
.sd:nth-of-type(even) .sd__fig { grid-column: 1 / 6; }
.sd__t { margin-top: 1rem; }
.sd__d { margin-top: 1.25rem; }
.sd__sub { margin-top: 2rem; font-size: 1rem; }
.sd__list {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 0 1.5rem;
}
.sd__list li {
  position: relative;
  padding: .45rem 0 .45rem 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-small);
  color: var(--fg-2);
}
.sd__list li::before {
  content: '+';
  position: absolute; left: 0; top: .45rem;
  font-weight: 500;
  color: var(--maroon);
}
.sd__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* 404 */
.e404 { padding-block: clamp(3rem, 7vw, 5.5rem); }
.e404__code {
  font-family: var(--f-display);
  font-size: clamp(5rem, 22vw, 16rem);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.06em;
  color: var(--maroon);
}
.e404__links { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------------------------
   13. MOTION — reveal wipes, parallax
   -------------------------------------------------------------------------- */

/* Content is uncovered by a wipe, not floated in by a fade.
   The hidden state is gated behind html.js-anim, which the inline head script
   sets only when scripting is alive. If JS is disabled, blocked, or the reveal
   module throws, the gate is never set (or is removed) and every section stays
   plainly visible. A decorative animation must never be able to blank the page. */
.js-anim .rv {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateY(10px);
  transition: opacity .1s linear, clip-path .75s var(--e-cut), transform .75s var(--e-cut);
  will-change: clip-path, transform;
}
.js-anim .rv.is-visible { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
.js-anim .rv--up { clip-path: inset(100% 0 0 0); transform: none; }
.js-anim .rv--up.is-visible { clip-path: inset(0 0 0 0); }
.js-anim .rv--d1 { transition-delay: .08s; }
.js-anim .rv--d2 { transition-delay: .16s; }
.js-anim .rv--d3 { transition-delay: .24s; }

[data-parallax] { will-change: transform; }

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hero__col { grid-column: 1 / 9; }
  .hero__fig { grid-column: 8 / 13; }
  .svc__body { grid-column: 3 / 9; }
  .svc__go { grid-column: 9 / 11; }
  .svc__fig { grid-column: 11 / 13; }
  .footer__brand { grid-column: 1 / 6; }
  .footer__nav { grid-column: 6 / 8; }
  .footer__svc { grid-column: 8 / 11; }
  .footer__get { grid-column: 11 / 13; }
}

@media (max-width: 1024px) {
  :root { --headf: 76px; }

  .commit__fig { display: none; }

  /* Stacked, the photograph stays on the page measure and keeps its frame —
     bleeding it to the edges would undo the rounding it is there for. */
  .hero__bed { display: block; padding-top: clamp(2rem, 5vw, 3rem); }
  .hero__col { padding-bottom: 2rem; }
  .hero__fig { margin-top: 0; margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
  .hero__fig .duo { height: clamp(300px, 42vh, 440px); }

  /* Two cards to a row, then one; the arrow is meaningless without hover. */

  /* Every column-span utility collapses to full width. The c9..c12 starts have to be
     listed by name: [class*="c1-"] does not match "c10-", so leaving them out stranded
     the contact page aside in a 4-column strip on phones. */
  .bed > [class*="c1-"], .bed > [class*="c2-"], .bed > [class*="c3-"],
  .bed > [class*="c4-"], .bed > [class*="c5-"], .bed > [class*="c6-"],
  .bed > [class*="c7-"], .bed > [class*="c8-"], .bed > [class*="c9-"],
  .bed > [class*="c10-"], .bed > [class*="c11-"], .bed > [class*="c12-"] { grid-column: 1 / 13; }
  .drop-1, .drop-2 { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
  .lift-1 { margin-top: 0; }

  /* The numeral gets a content-sized column rather than a fraction of six.
     At 320px a sixth of the measure is 34px and "01" at the clamp floor is
     38px, so a fractional column clipped it. `auto` cannot. */
  .svc__row {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(.9rem, 3vw, 1.5rem);
    row-gap: 1rem;
  }
  .svc__no { grid-column: 1; }
  .svc__body { grid-column: 2; }
  .svc__go { grid-column: 2; }
  .svc__fig { display: none; }

  /* Three big numerals across a tablet is too tight — shrink, keep the step. */
  .rail__v { font-size: clamp(3rem, 7.5vw, 5rem); }
  .rail__k { font-size: 1rem; }

  .sector:nth-child(odd), .sector:nth-child(even) { grid-column: 1 / 13; margin-top: 0; padding-left: 0; }

  .step { grid-column: span 6; }
  .step:nth-child(n) { margin-top: 0; }
  .step:nth-child(even) { margin-top: clamp(1rem, 3vw, 2rem); }

  .value:nth-child(n) { grid-column: 1 / 13; margin-top: 0; }

  .vm__b:nth-child(n) { grid-column: 1 / 13; margin-top: 0; }
  .vm__b + .vm__b { margin-top: 1.75rem; }

  /* Stacked, there is no text column to match — the figure returns to flow. */
  .efig--match { height: auto; min-height: 0; }
  .efig--match .duo { position: static; height: auto; }
  .efig--match img { height: clamp(300px, 44vh, 440px); }

  /* The header photo drops below the text instead of sitting beside it. */
  .phero { min-height: 0; padding-bottom: clamp(2rem, 5vw, 3rem); }
  .phero__fig {
    position: static;
    width: auto;
    margin-top: clamp(2rem, 5vw, 3rem);
  }
  .phero__fig .duo { height: clamp(200px, 30vh, 300px); }

  .sd__bed { display: block; }
  .sd__fig { position: static; margin-bottom: 1.75rem; }

  .band__t, .band__d { grid-column: 1 / 13; }
  .band__a { grid-column: 1 / 13; margin-top: 1.75rem; flex-direction: row; flex-wrap: wrap; }

  .footer__top { row-gap: 2rem; }
  .footer__brand { grid-column: 1 / 13; }
  .footer__nav { grid-column: 1 / 5; }
  .footer__svc { grid-column: 5 / 10; }
  .footer__get { grid-column: 10 / 13; }

  .edge-tag { display: none; }

  /* Drawer — a full panel, not a list floating in an empty box. The mark sits
     at the top, the links fill the middle, and the space that used to be a gap
     now carries the contact detail the utility bar drops on small screens. */
  .burger { display: flex; }
  .nav {
    position: fixed;
    top: 0; right: 0;
    z-index: 96;
    width: min(400px, 92vw);
    height: 100vh; height: 100dvh;
    padding: 0 clamp(1.25rem, 5vw, 2rem);
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    color: var(--cream);
    background-color: var(--ink);
    border-left: 1px solid rgba(255, 246, 217, .16);
    box-shadow: -26px 0 64px -22px rgba(18, 10, 16, .85);
    overscroll-behavior: contain;
    transform: translateX(101%);
    transition: transform .45s var(--e-cut);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .nav.is-open { transform: none; }

  .nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 2;
    margin-inline: calc(clamp(1.25rem, 5vw, 2rem) * -1);
    padding: .75rem clamp(1.25rem, 5vw, 2rem);
    min-height: var(--headf);
    background: var(--ink-3);
    border-bottom: 1px solid var(--rule-invert-soft);
  }
  .nav__logo { width: auto; height: 50px; }
  .nav__close {
    display: grid; place-items: center;
    flex: none;
    width: 44px; height: 44px;
    background: var(--maroon);
    color: var(--cream);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  }
  .nav__close svg { width: 18px; height: 18px; fill: currentColor; }

  .nav__list { flex-direction: column; align-items: stretch; padding-top: .5rem; }
  .nav__item + .nav__item { border-top: 1px solid var(--rule-invert-soft); }
  .nav__link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding-inline: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 246, 217, .85);
    transition: color .25s var(--e-cut), padding-left .25s var(--e-cut);
  }
  .nav__link::after { display: none; }
  .nav__link:hover { color: var(--cream); padding-left: .5rem; }
  /* The current page is marked by a maroon bar, not by a number. */
  .nav__link[aria-current="page"] {
    color: var(--cream);
    padding-left: 1rem;
  }
  .nav__link[aria-current="page"]::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 1.5rem;
    background: var(--maroon);
  }

  .nav__drawer-foot {
    display: grid;
    gap: .35rem;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-invert-soft);
  }
  .nav__foot-h {
    font-family: var(--f-spec);
    font-size: var(--t-small);
    font-weight: 700;
    color: var(--accent);
    margin-bottom: .3rem;
  }
  .nav__contact {
    display: block;
    /* 44px of hit area: the drawer is a touch surface at every width it
       appears at, so this is set here rather than in the phone breakpoint. */
    padding-block: .7rem;
    font-size: var(--t-small);
    color: rgba(255, 246, 217, .82);
    word-break: break-word;
  }
  .nav__contact:hover { color: var(--cream); }
  .nav__lic {
    margin-block: .5rem 1rem;
    font-size: var(--t-spec);
    color: rgba(255, 246, 217, .5);
  }

  /* A ghost button on a plum drawer was plum-on-plum and read as an empty box.
     Anything sitting on the dark panel uses the invert variant. */
  .nav .btn--ghost {
    --b-fg: var(--cream);
    --b-wipe: var(--cream);
    box-shadow: inset 0 0 0 1px var(--rule-invert);
  }
  .nav .btn--ghost:hover { color: var(--maroon-800); }

  /* Two equal square controls, same cut corner, same optical weight — read as
     a matched pair of switch plates rather than two unrelated buttons. */
  .header__actions { gap: .5rem; align-items: center; }
  .header__actions .btn--wa {
    width: 44px; height: 44px;
    padding: 0;
    gap: 0;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  }
  .header__actions .btn--wa span { display: none; }
  .header__actions .btn--wa .icon { font-size: 1.3rem; }
  .burger {
    width: 44px; height: 44px;
    padding: 13px 11px;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  }

  .gal__i:nth-child(n) { grid-column: span 6; }
  .gal__i:nth-child(n) img { aspect-ratio: 4 / 3; }
}

@media (max-width: 768px) {
  .form__i, .form__i select, textarea.form__i { font-size: 16px; }


  /* A dimension line and its drops need horizontal room to mean anything, and
     stacking them just produced arbitrary indents down a very tall block. On a
     phone the figures become a spec table instead: the number on the left, what
     it counts on the right, one hairline between each. Same information, about
     half the height, and nothing is left hanging in space. */
  .rail { display: block; padding-block: clamp(2.25rem, 7vw, 3rem); }
  .rail::before { display: none; }
  .rail__item:nth-child(n) {
    display: grid;
    /* Fixed, not auto: sized to the column each row shares, so "5", "2023" and
       "7" all hand off to their labels at the same x. Sized from auto, the
       four-digit year pushed its own label out of line with the others. */
    grid-template-columns: 6.75rem 1fr;
    column-gap: clamp(.75rem, 3.5vw, 1.25rem);
    align-items: start;
    padding-block: 1.3rem;
    border-top: 1px solid rgba(255, 246, 217, .22);
  }
  .rail__item:first-child { border-top: 0; padding-top: 0; }
  .rail__item:last-child { padding-bottom: 0; }
  .rail__item::before, .rail__item::after { display: none; }
  .rail__v {
    grid-column: 1;
    grid-row: 1 / span 2;
    /* Capped so the widest figure still clears the 6.75rem column. */
    font-size: clamp(2.1rem, 10.5vw, 2.75rem);
  }
  .rail__k { grid-column: 2; grid-row: 1; margin-top: -.2rem; }
  .rail__note { grid-column: 2; grid-row: 2; max-width: none; }

  /* One tap-to-call number and one action, both on a single line. At the larger
     sentence-case size two numbers plus the CTA no longer fit across a phone and
     every item wrapped onto a second line. The rest of the contact detail is in
     the drawer, so nothing is lost by dropping it here. */
  .utility { font-size: var(--t-spec); }
  .utility__in { min-height: 40px; gap: .6rem; }
  .utility__list li:nth-child(n + 2) { display: none; }
  .utility__link {
    min-height: 40px;
    padding-inline: 0;
    border-right: 0;
    white-space: nowrap;
  }
  .utility__cta { white-space: nowrap; padding-inline: 1rem; }

  .brand__logo { height: 50px; }

  .trio { grid-template-columns: 1fr; }
  .gal__i:nth-child(n) { grid-column: span 12; }
  .step { grid-column: span 12; margin-top: 0 !important; }

  .filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { min-height: 46px; white-space: nowrap; }

  .footer__nav, .footer__svc, .footer__get { grid-column: 1 / 13; }
  .footer__bar-in { flex-direction: column; align-items: flex-start; gap: .4rem; }
  /* The auto margin that pushes the credit to the right of the desktop bar
     pushes it across the cross axis once the bar is a column, so it has to go
     or the line hangs off on its own. */
  .footer__credit { margin-left: 0; }

  .fab { width: 48px; height: 48px; }
  .fab--top { width: 40px; height: 40px; }

  .spec-row, .cdl li { grid-template-columns: 1fr; gap: .15rem; }
}

@media (max-width: 560px) {
  :root { --gut: 1.15rem; }
  .btn { width: 100%; }
  .header__actions .btn--wa { width: 44px; }
  .nav__drawer-foot .btn { width: 100%; }
  .efig__cap { position: static; max-width: none; margin-top: -1px; }
  .plate-card { padding: 1.35rem 1.15rem; }

  /* A 7.5rem label column leaves too little for an email address or a street
     address on a phone, so the contact list stacks label over value. */
  .cdl li { grid-template-columns: 1fr; gap: .3rem; }
}

@supports (padding: max(0px)) {
  .wrap {
    padding-inline:
      max(var(--gut), env(safe-area-inset-left))
      max(var(--gut), env(safe-area-inset-right));
  }
  .fab { right: max(clamp(.9rem, 2vw, 1.6rem), env(safe-area-inset-right)); }
  .fab--wa { bottom: max(clamp(.9rem, 2vw, 1.6rem), env(safe-area-inset-bottom)); }
  .fab--top { bottom: calc(max(clamp(.9rem, 2vw, 1.6rem), env(safe-area-inset-bottom)) + 62px); }
  /* This block re-declares .wrap, and it sits after .footer__bar-in in the
     file, so the bar's own padding-inline loses the cascade unless it is
     restated here. Same reservation as above, with the safe-area inset folded
     in because the button uses it too. */
  .footer__bar-in {
    padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
    padding-inline:
      max(var(--gut), env(safe-area-inset-left))
      max(var(--gut), calc(max(clamp(.9rem, 2vw, 1.6rem), env(safe-area-inset-right)) + 52px + .75rem));
  }
}

/* Coarse pointers: no sticky hover states */
@media (hover: none) {
  .btn:hover::before { transform: scaleX(0); }
  .btn:hover .icon, .mlink:hover .icon { transform: none; }
  .svc__row:hover { background: none; }
  .svc__row:hover .svc__no { opacity: .22; }
  .svc__fig img { clip-path: inset(0 0 0 0); }
  .svc__fig::before, .svc__fig::after { clip-path: inset(0 0 0 0); }
  .step:hover, .trust li:hover { transform: none; padding-left: 0; }
  .gal__cap { transform: translateY(0); }
  .duo:hover img { filter: none; }
  .duo:hover::before { opacity: 0; }
  .duo:hover::after { opacity: 0; }
  .footer__a:hover { transform: none; }
  .btn:active { transform: scale(.985); }
}

a, button, summary, label, input, select, textarea {
  -webkit-tap-highlight-color: rgba(169, 73, 74, .16);
}

/* Touch targets. On a phone the footer columns and the inline mechanical links
   sat around 24px tall, half of what a thumb needs. The box is grown with
   padding and pulled back with an equal negative margin, so the link occupies
   42px of hit area while sitting exactly where the design puts it.

   Padding rather than an absolutely-positioned pseudo-element: a pseudo behind
   the text loses the hit test to whatever background is painted over it, and
   one in front of the text swallows taps meant for its neighbours. Growing the
   element's own box has neither problem.

   Keyed on width alone, not on `pointer: coarse` — not every touch device
   reports coarse, and the extra area is invisible, so a narrow desktop window
   picking it up costs nothing. */
@media (max-width: 768px) {
  .footer__a, .mlink, .crumbs a, a.cdl__v {
    padding-block: 9px;
    margin-block: -9px;
  }
  /* The lists carry the extra height as real space so neighbouring hit areas
     meet rather than overlap. */
  .footer__list { gap: 1.3rem; }
  .crumbs { gap: .5rem 1rem; }
  .cdl li + li { margin-top: 1.5rem; }
  /* The two phone numbers are stacked inside one row, so the row spacing above
     does not separate them. Without this their enlarged hit areas overlap and
     the top of the second number dials the first. */
  a.cdl__v + a.cdl__v { margin-top: .5rem; }

  /* The phone number in the hero sentence is deliberately left alone. Padding
     it pushes its border-bottom down onto the following line, and an inline
     link inside a sentence is exempt from the minimum target size anyway. */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; clip-path: none; transform: none; }
  [data-parallax] { transform: none !important; }
}

@media print {
  .utility, .header, .fab, .ticker, .scrim, .form__actions, .band { display: none !important; }
  body { background: #fff; color: #000; }
  .slab { padding-block: 1.25rem; }
  .slab--ink, .slab--maroon, .hero, .phero, .footer, .rail, .depth {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
  }
  .depth::before, .grain::after { display: none !important; }
  .hero__l2, .hero__l3, .rail__v, .rail__k, .rail__note, .hero__index-h { color: #000 !important; }
  .plate, .e404__code { color: #000; opacity: .18; }
  .phero__fig { display: none !important; }
}

/* --------------------------------------------------------------------------
   ROUNDED GEOMETRY — matched to the company profile
   Every card, photograph, panel, field and control in the profile is rounded
   at roughly this scale. Collected here rather than scattered so the radius
   stays one decision.
   -------------------------------------------------------------------------- */
/* Panels round at the card scale. */
.plate-card,
.form-shell,
.mapbox,
.mapbox__frame,
.filters { border-radius: var(--r); overflow: hidden; }

/* Photographs round at the softer figure scale — the profile rounds a picture
   roughly twice as hard as it rounds a panel. */
.efig img,
.efig > img,
.efig--match .duo,
.efig--angle .duo,
.efig--angle > img,
.gal__i,
.trio figure,
.svc__fig,
.sd__fig,
.sd__fig img { border-radius: var(--r-fig); overflow: hidden; clip-path: none; }

/* Controls */
.btn,
.nav__close,
.header__actions .btn--wa,
.burger,
.fab { clip-path: none; border-radius: var(--r-sm); }
.form__i { border-radius: var(--r-sm) var(--r-sm) 0 0; }
textarea.form__i { border-radius: var(--r-sm); }
.form__box { border-radius: 6px; }
.form__status { border-radius: var(--r-sm); }
.utility__cta { border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* --------------------------------------------------------------------------
   PROFILE CARD LAYOUTS — sectors and values
   The profile sets its industries as rounded cards alternating plum and
   maroon, each carrying a large ghost index at the top right, and its values
   as a rounded icon tile beside the text. Both are reproduced here.
   -------------------------------------------------------------------------- */
.sectors { row-gap: clamp(.85rem, 1.8vw, 1.15rem); }
.sector {
  grid-column: span 4;
  margin-top: 0;
  padding: 1.35rem 1.4rem 1.5rem;
  border-top: 0;
  color: var(--cream);
}
.sector:nth-child(odd), .sector:nth-child(even) { grid-column: span 4; margin-top: 0; padding-left: 1.4rem; }
/* Alternating fills, as the profile runs them across the grid. The fill is set
   through the card variable, not through `background` — the shape is painted
   by the pseudo-elements, so a background here would square off the notch. */
.sector:nth-child(3n + 2) { --pcard-fill: var(--maroon); }

/* Everything inside a profile card has to be lifted over the two panels that
   paint its shape; normal-flow content would otherwise sit underneath them. */
.sector__t, .sector__d, .sector__list { position: relative; z-index: 1; }
.sector__t { margin-top: 0; padding-right: 3.4rem; font-size: 1.0625rem; font-weight: 700; color: var(--cream); }
.sector__d { margin-top: .55rem; font-size: var(--t-small); color: rgba(255, 246, 217, .78); max-width: none; }
.sector__list { margin-top: .8rem; }
.sector__list li { color: rgba(255, 246, 217, .72); }

/* Values — icon tile beside the text, no card around the whole block. */
.value:nth-child(n) {
  grid-column: span 4;
  margin-top: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.1rem;
  align-items: start;
}
/* The profile puts a rounded tile beside each value carrying an outlined line
   icon. The tile takes the opposite brand colour to the ground it sits on:
   plum on the maroon slabs, maroon on white. */
.value__ico {
  grid-column: 1;
  grid-row: 1 / span 4;
  width: 4.5rem; height: 4.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--maroon);
  color: var(--cream);
}
.slab--maroon .value__ico,
.band .value__ico { background: var(--ink); }
.value__ico .icon { width: 30px; height: 30px; }
/* Everything else in the card sits in the second column, including a call to
   action in the last one — left to auto-placement it would drop under the
   tile and overlap it. */
.value > :not(.value__ico) { grid-column: 2; }
.value__t { margin-top: .15rem; }
.value .btn { margin-top: 1rem; justify-self: start; }

@media (max-width: 1024px) {
  .sector:nth-child(odd), .sector:nth-child(even) { grid-column: span 6; }
  .value:nth-child(n) { grid-column: span 6; }
  .step { grid-column: span 6; }
}
@media (max-width: 768px) {
  .sector:nth-child(odd), .sector:nth-child(even) { grid-column: 1 / 13; }
  .value:nth-child(n) { grid-column: 1 / 13; }
  .step { grid-column: 1 / 13; }
}

/* --------------------------------------------------------------------------
   WHITE-GROUND CORRECTIONS
   Cream was the page ground until the profile moved it to white. Anything that
   used cream as a *surface* now reads as a yellow patch on white, so those
   surfaces move to white and are separated by a hairline instead. Cream is
   still the type colour on the dark grounds, where it belongs.
   -------------------------------------------------------------------------- */
.slab--cream { background: var(--paper); }
.efig__cap {
  background: var(--paper);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 40px -26px rgba(61, 40, 55, .55), inset 0 0 0 1px var(--rule-soft);
}
.svc__row:hover { background: var(--paper-2); }
.filter:hover { background: var(--paper-2); color: var(--maroon); }
.form-shell { background: var(--paper-2); box-shadow: none; }

/* The last card in the sector grid is a call to action, not an eighth
   industry — the profile lists seven. It is set light against the dark cards
   so it reads as a different kind of thing, and it carries no numeral, so the
   step in its top-right corner closes up. */
.sector--cta,
.sector--cta:nth-child(3n + 2) {
  --pcard-fill: var(--paper-2);
  --pcard-notch-w: 0rem;
  --pcard-notch-h: 0rem;
  color: var(--fg);
}
.sector--cta .sector__t { color: var(--fg); padding-right: 0; }
.sector--cta .sector__d { color: var(--fg-2); }

/* Links inside the sector cards, lifted over the card panels like the rest of
   the card's content. */
.sector > p:not([class]) { position: relative; z-index: 1; }
.sector .mlink { color: var(--accent); }
.sector--cta .mlink { color: var(--maroon); }

/* The closing card in the values grid is a call to action rather than a value,
   so its tile takes the brand's lighter fill. */
.value--cta .value__ico { background: var(--accent); color: var(--ink); }