/* ==========================================================================
   MAJOR COOLING — Site styles
   Built strictly on the variables in tokens.css.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Anchor targets must clear the sticky header, not hide under it. */
  scroll-padding-top: calc(var(--mc-header-h) + 16px);
  /* Horizontal safety net lives here, NOT on body. `overflow-x` on body
     forces its overflow-y to `auto`, which turns body into a scroll
     container and is a well-known cause of position:sticky detaching or
     juddering in Safari. `clip` never creates a scroll container. */
  overflow-x: hidden;
}
@supports (overflow: clip) { html { overflow-x: clip; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--mc-font);
  font-weight: var(--mc-w-body);
  font-size: var(--mc-body-size);
  line-height: var(--mc-body-lh);
  letter-spacing: var(--mc-body-ls);
  background: var(--mc-white);
  color: var(--mc-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Media frames.
   Any box that fixes its own shape with aspect-ratio must take the image
   out of flow, otherwise the image's intrinsic height wins the cyclic
   percentage-height resolution and the frame grows to the photo's ratio
   instead of the one the layout asked for. */
.mc-frame,
.mc-hero__media,
.mc-hero__frame,
.mc-path__media,
.mc-split__media,
.mc-shot { position: relative; overflow: hidden; background: var(--mc-black); }

.mc-frame > picture,
.mc-hero__frame > picture,
.mc-path__media > picture,
.mc-split__media > picture,
.mc-shot > picture { display: contents; }

.mc-frame > picture > img, .mc-frame > img,
.mc-hero__frame > picture > img,
.mc-path__media > picture > img,
.mc-split__media > picture > img,
.mc-shot > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }

a { color: var(--mc-cyan); text-decoration: none; transition: color var(--mc-dur) var(--mc-ease); }

/* Hover resolves per surface. --mc-cyan-bright is 12.70:1 on black and a
   completely illegible 1.65:1 on white, so it can only ever be a dark-ground
   state. On a light ground a cyan link darkens to ink instead — no new colour
   enters the system, and the target is 21:1. */
a:hover { color: var(--mc-black); }
.mc-dark a:hover, .mc-footer a:hover, .mc-header a:hover, .mc-drawer a:hover { color: var(--mc-cyan-bright); }

:focus-visible {
  outline: var(--mc-line) solid var(--mc-cyan-bright);
  outline-offset: 3px;
}

.mc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--mc-cyan); color: var(--mc-black);
  padding: 14px 28px;
  font-weight: var(--mc-w-data); font-size: 13px;
  letter-spacing: var(--mc-label-ls); text-transform: uppercase;
}
.mc-skip:focus { left: 0; color: var(--mc-black); }

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

/* --- 02 Typography -------------------------------------------------------- */

.mc-display {
  font-weight: var(--mc-w-display);
  font-size: var(--mc-display-size);
  line-height: var(--mc-display-lh);
  letter-spacing: var(--mc-display-ls);
  text-transform: uppercase;
  text-wrap: balance;
}

.mc-heading {
  font-weight: var(--mc-w-body);
  font-size: var(--mc-heading-size);
  line-height: var(--mc-heading-lh);
  letter-spacing: var(--mc-heading-ls);
  text-transform: uppercase;
  text-wrap: balance;
}

.mc-name {
  font-weight: var(--mc-w-data);
  font-size: var(--mc-name-size);
  line-height: 1;
  letter-spacing: var(--mc-name-ls);
  text-transform: uppercase;
}

.mc-tagline {
  font-weight: var(--mc-w-body);
  font-size: var(--mc-tagline-size);
  letter-spacing: var(--mc-tagline-ls);
  text-transform: uppercase;
}

.mc-label {
  font-weight: var(--mc-w-body);
  font-size: var(--mc-label-size);
  line-height: 1.4;
  letter-spacing: var(--mc-label-ls);
  text-transform: uppercase;
}
/* Muted labels resolve per surface: the guide's #9a9a9a is legible on black
   (7.46:1) but not on white (2.81:1), so the light ground gets the ink tone. */
.mc-label--muted { color: var(--mc-muted-ink); }
.mc-label--cyan  { color: var(--mc-cyan); }
.mc-dark .mc-label--muted { color: var(--mc-on-black); }

/* The standfirst — sits between a display headline and body copy. */
.mc-lead {
  font-weight: var(--mc-w-body);
  font-size: var(--mc-lead-size);
  line-height: var(--mc-lead-lh);
  letter-spacing: var(--mc-lead-ls);
  max-width: 46ch;
  text-wrap: pretty;
}

.mc-body {
  font-weight: var(--mc-w-body);
  font-size: var(--mc-body-size);
  line-height: var(--mc-body-lh);
  letter-spacing: var(--mc-body-ls);
  max-width: var(--mc-measure);
  text-wrap: pretty;
}
.mc-body--tight { max-width: var(--mc-measure-tight); }
.mc-body + .mc-body { margin-top: 1.1em; }

.mc-data {
  font-weight: var(--mc-w-data);
  font-size: var(--mc-data-size);
  letter-spacing: var(--mc-data-ls);
}

/* --- 03 Wordmark ---------------------------------------------------------
   Live type in Outfit 350, exactly as on the business card. Two lines,
   uppercase, one colour. Never stretched, rotated, outlined, shadowed,
   set in cyan, run on one line, or placed over a photograph. */

.mc-wordmark {
  display: inline-block;
  font-weight: var(--mc-w-body);
  line-height: var(--mc-wordmark-lh);
  letter-spacing: var(--mc-wordmark-ls-1);
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
}
.mc-wordmark > span { display: block; }
.mc-wordmark > span:last-child {
  margin-left: var(--mc-wordmark-offset);
  letter-spacing: var(--mc-wordmark-ls-2);
}
.mc-wordmark--sm  { font-size: 21px; }
.mc-wordmark--md  { font-size: clamp(34px, 5.2vw, 76px); }
.mc-wordmark--lg  { font-size: clamp(44px, 7vw, 92px); }

/* --- 05 Rules ------------------------------------------------------------
   1.5px, always cyan, fixed length. Never a full-width divider. */

.mc-rule {
  border: 0;
  display: block;
  height: var(--mc-line);
  width: var(--mc-rule-heading);
  max-width: 100%;
  background: var(--mc-cyan);
  margin: 28px 0 48px;
}
.mc-rule--display { width: var(--mc-rule-display); margin: 36px 0 24px; }
.mc-rule--short   { width: var(--mc-rule-short);   margin: 14px 0 16px; }
.mc-rule--flush   { margin-top: 0; }

/* Vertical separator — matches the cap height of its neighbours. */
.mc-sep {
  display: inline-block;
  width: var(--mc-line);
  height: 15px;
  background: var(--mc-cyan);
  flex: none;
}

/* --- Surfaces ------------------------------------------------------------- */

.mc-dark  { background: var(--mc-black); color: var(--mc-white); }
.mc-light { background: var(--mc-white); color: var(--mc-black); }
.mc-dark .mc-body { color: var(--mc-white); }
.mc-dark a:not(.mc-btn) { color: var(--mc-cyan); }
.mc-dark a:not(.mc-btn):hover { color: var(--mc-cyan-bright); }

/* Section separator — the guide's own hairline between sections. */
.mc-edge-top { border-top: var(--mc-line) solid var(--mc-cyan); }

/* --- 04 Motif lattice ----------------------------------------------------
   Texture, not a logo. Sits behind content, never behind the wordmark. */

.mc-lattice { position: relative; isolation: isolate; }
.mc-lattice::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: repeat;
  background-size: 440px 380px;
  pointer-events: none;
}
.mc-dark.mc-lattice::before {
  background-image: url('../brand/pattern-lattice-white.svg');
  opacity: 0.36;
}
.mc-light.mc-lattice::before {
  background-image: url('../brand/pattern-lattice-black.svg');
  opacity: 0.13;
}

/* The tile is a fixed 440x380. On a phone that puts a single fan across half
   the screen, which reads as a background picture competing with the
   headline rather than as texture. Scale the tile with the viewport so the
   motif stays a texture at every size. Ratio held at 440:380. */
@media (max-width: 700px) {
  .mc-lattice::before { background-size: 232px 200px; }
  .mc-dark.mc-lattice::before { opacity: 0.32; }
}
@media (max-width: 420px) {
  .mc-lattice::before { background-size: 190px 164px; }
}

/* --- Layout --------------------------------------------------------------- */

.mc-section { padding: var(--mc-pad-section) var(--mc-pad-gutter); }
.mc-inner   { max-width: var(--mc-maxw); margin-inline: auto; width: 100%; }

.mc-section-head { margin-bottom: 8px; }
.mc-section-head .mc-heading { margin-top: 16px; }

.mc-grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.mc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .mc-grid--3, .mc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .mc-grid--2, .mc-grid--3, .mc-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Buttons --------------------------------------------------------------
   14px 28px · 1.5px cyan border · 390 · 13px · 0.2em · uppercase */

.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: var(--mc-line) solid var(--mc-cyan);
  background: var(--mc-cyan);
  color: var(--mc-black);
  font-weight: var(--mc-w-data);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: var(--mc-label-ls);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--mc-dur) var(--mc-ease),
              border-color var(--mc-dur) var(--mc-ease),
              color var(--mc-dur) var(--mc-ease);
}
.mc-btn:hover {
  background: var(--mc-cyan-bright);
  border-color: var(--mc-cyan-bright);
  color: var(--mc-black);
}

.mc-btn--ghost { background: transparent; color: var(--mc-cyan); }
.mc-btn--ghost:hover { background: var(--mc-cyan); border-color: var(--mc-cyan); color: var(--mc-black); }

.mc-btn-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Inline arrow link */
.mc-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--mc-w-data);
  font-size: 13px;
  letter-spacing: var(--mc-label-ls);
  text-transform: uppercase;
  color: var(--mc-cyan);
}
.mc-link::after {
  content: '';
  width: 24px;
  height: var(--mc-line);
  background: currentColor;
  transition: width var(--mc-dur) var(--mc-ease);
}
.mc-link:hover::after { width: 40px; }

/* --- Header --------------------------------------------------------------- */

.mc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mc-black);
  color: var(--mc-white);
  border-bottom: var(--mc-line) solid var(--mc-cyan);
}
.mc-header__inner {
  max-width: var(--mc-maxw);
  margin-inline: auto;
  min-height: var(--mc-header-h);
  padding: 0 var(--mc-pad-gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.mc-header__brand { color: var(--mc-white); flex: none; padding: 14px 0; }
.mc-header__brand:hover { color: var(--mc-white); }

.mc-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.mc-nav__link {
  position: relative;
  color: var(--mc-white);
  font-weight: var(--mc-w-body);
  font-size: var(--mc-label-size);
  letter-spacing: var(--mc-label-ls);
  text-transform: uppercase;
  padding: 6px 0;
}
.mc-nav__link:hover { color: var(--mc-cyan-bright); }
.mc-nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: var(--mc-line);
  background: var(--mc-cyan);
  transition: width var(--mc-dur) var(--mc-ease);
}
.mc-nav__link:hover::after,
.mc-nav__link[aria-current='page']::after { width: 100%; }
.mc-nav__link[aria-current='page'] { color: var(--mc-cyan); }

.mc-header__cta { flex: none; }

.mc-burger {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  background: transparent;
  border: var(--mc-line) solid var(--mc-cyan);
  cursor: pointer;
  position: relative;
}
.mc-burger span {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: var(--mc-line);
  background: var(--mc-white);
  transform: translate(-50%, -50%);
  transition: transform var(--mc-dur) var(--mc-ease), opacity var(--mc-dur) var(--mc-ease);
}
.mc-burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
.mc-burger span:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
.mc-burger[aria-expanded='true'] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.mc-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.mc-burger[aria-expanded='true'] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Mobile drawer */
.mc-drawer {
  display: none;
  position: fixed;
  inset: var(--mc-header-h) 0 0;
  z-index: 99;
  background: var(--mc-black);
  padding: 40px var(--mc-pad-gutter) 120px;
  overflow-y: auto;
}
.mc-drawer[data-open='true'] { display: block; }
.mc-drawer__list { list-style: none; display: flex; flex-direction: column; }
.mc-drawer__list a {
  display: block;
  padding: 20px 0;
  border-bottom: var(--mc-line) solid var(--mc-hairline-black);
  color: var(--mc-white);
  font-weight: var(--mc-w-body);
  font-size: 22px;
  letter-spacing: var(--mc-heading-ls);
  text-transform: uppercase;
}
.mc-drawer__list a[aria-current='page'] { color: var(--mc-cyan); }
.mc-drawer__contact { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 1080px) {
  .mc-nav, .mc-header__cta { display: none; }
  .mc-burger { display: block; }
}

/* --- Hero ----------------------------------------------------------------- */

/* 5:7, not 50/50. An even split reads as a template; giving the imagery the
   larger share makes it a composition and stops the page feeling all type. */
.mc-hero { display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; }

/* The media side is two frames — the building, and the detail that proves it
   was done properly. A 2px black gutter between them, no gradient scrim. */
.mc-hero__media {
  display: grid;
  grid-template-rows: 67% 33%;
  gap: 2px;
}
.mc-hero__cap {
  position: absolute;
  left: 0; bottom: 0;
  padding: 11px 18px;
  background: var(--mc-black);
  color: var(--mc-white);
}
.mc-hero__text {
  padding: clamp(56px, 7vw, 112px) var(--mc-pad-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(78vh, 760px);
  /* svh ignores the collapsing mobile URL bar, so the hero does not resize
     mid-scroll on iOS. Falls back to the vh line above where unsupported. */
  min-height: min(78svh, 760px);
}
.mc-hero__eyebrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 32px;
}
/* The hero headline sits in a half-width column, so it is scaled against
   that column rather than the viewport — 5.4vw of a half page, not of the
   whole one. Keeps "Cooling that / keeps working" on its intended two
   lines instead of breaking to four. */
.mc-hero__text .mc-display { font-size: clamp(30px, 3.5vw, 52px); }
@media (max-width: 900px) {
  .mc-hero__text .mc-display { font-size: var(--mc-display-size); }
}
.mc-hero__media { position: relative; overflow: hidden; background: var(--mc-black); }
.mc-hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .mc-hero { grid-template-columns: minmax(0, 1fr); }
  .mc-hero__text { min-height: 0; padding-block: 38px 44px; }
  .mc-hero__eyebrow { margin-bottom: 24px; }
  .mc-hero .mc-rule--display { margin: 26px 0 22px; }
  /* Imagery comes FIRST on a phone, as a compact band rather than a full
     screen of photograph — the headline and the call button still land early.
     The two frames sit side by side instead of stacked. */
  .mc-hero__media {
    order: -1;
    grid-template-rows: none;
    grid-template-columns: 62% 38%;
    height: 26svh;
    min-height: 168px;
    max-height: 240px;
    aspect-ratio: auto;
  }
  .mc-hero__cap { padding: 9px 14px; font-size: 10.5px; letter-spacing: 0.16em; }
}
@media (max-width: 480px) {
  .mc-hero__cap { display: none; }
}

/* Below this the eyebrow has to wrap, and a wrapped line can end on a
   separator with nothing after it. Stacked terms do not need dividing. */
@media (max-width: 620px) {
  .mc-hero__eyebrow { gap: 6px 20px; }
  .mc-hero__eyebrow .mc-sep { display: none; }
}

/* Full-width buttons on a phone: equal targets, no ragged right edge. */
@media (max-width: 560px) {
  .mc-btn-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .mc-btn { width: 100%; }
}


/* Credentials strip beneath the hero */
.mc-strip {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 40px); flex-wrap: wrap;
  padding: 22px var(--mc-pad-gutter);
  border-top: var(--mc-line) solid var(--mc-cyan);
  border-bottom: var(--mc-line) solid var(--mc-cyan);
  background: var(--mc-black);
  color: var(--mc-white);
  text-align: center;
}

/* --- Path cards (Homes / Commercial) -------------------------------------- */

.mc-path {
  display: flex;
  flex-direction: column;
  background: var(--mc-black);
  color: var(--mc-white);
  border: var(--mc-line) solid var(--mc-hairline-black);
  transition: border-color var(--mc-dur) var(--mc-ease);
}
.mc-path:hover { border-color: var(--mc-cyan); }
.mc-path__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mc-black); }
.mc-path__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--mc-ease);
}
.mc-path:hover .mc-path__media img { transform: scale(1.04); }
.mc-path__body { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; flex: 1; }
.mc-path__body .mc-body { color: var(--mc-white); margin-bottom: 32px; }
.mc-path__body .mc-link { margin-top: auto; }

/* --- Service cards -------------------------------------------------------- */

.mc-service {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
  border: var(--mc-line) solid var(--mc-hairline-white);
  overflow: hidden;
  transition: border-color var(--mc-dur) var(--mc-ease);
}
.mc-service:hover { border-color: var(--mc-cyan); }
.mc-service__mark {
  position: absolute;
  right: -40px; top: -40px;
  width: 190px; height: 190px;
  opacity: 0.09;
  pointer-events: none;
  filter: invert(1);   /* white source mark -> black, for the light surface */
}
.mc-service .mc-body { margin-bottom: 32px; flex: 1; }
.mc-service .mc-link { margin-top: auto; }
/* Cards sit on solid black, not on the texture. Two reasons: the cyan 01/02/03
   labels measure 2.21:1 over the raised motif but 6.93:1 on pure black, and a
   card reads better as a card when the ground behind it is doing the pattern. */
.mc-dark .mc-service { border-color: var(--mc-hairline-black); background: var(--mc-black); }
.mc-dark .mc-service__mark { opacity: 0.28; filter: none; }

/* --- Figures ---------------------------------------------------------------
   A measured value set at display scale. The unit is half the numeral, which
   is what makes it read as an instrument reading rather than a marketing
   statistic. Tabular figures so a row of numbers aligns on its own axis. */

.mc-fig { display: flex; align-items: baseline; gap: 0.14em; }
.mc-fig b {
  font-weight: var(--mc-w-display);
  font-size: var(--mc-fig-size);
  line-height: var(--mc-fig-lh);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.mc-fig i {
  font-style: normal;
  font-weight: var(--mc-w-body);
  font-size: var(--mc-fig-unit);
  line-height: var(--mc-fig-unit-lh);
  letter-spacing: 0.03em;
}
.mc-fig--sm b { font-size: 40px; line-height: 48px; }
.mc-fig--sm i { font-size: 20px; line-height: 28px; }

/* Figure band — hairlines are the 1.5px cyan rule doing structural work,
   scoped to each cell rather than spanning the page. */
.mc-figband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
/* Two real numbers, given room, beat four padded out with filler. */
.mc-figband--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 88px); }
.mc-figband--2 .mc-fig b { font-size: 88px; line-height: 92px; }
.mc-figband--2 .mc-fig i { font-size: 48px; line-height: 52px; }
@media (max-width: 900px) {
  .mc-figband--2 .mc-fig b { font-size: 60px; line-height: 64px; }
  .mc-figband--2 .mc-fig i { font-size: 30px; line-height: 38px; }
}
.mc-figband > div { border-top: var(--mc-line) solid var(--mc-cyan); padding-top: 22px; }
.mc-figband .mc-label { margin-bottom: 18px; }
.mc-figband p { margin-top: 14px; font-size: 15px; line-height: 1.5; letter-spacing: var(--mc-body-ls); }
.mc-dark .mc-figband p { color: var(--mc-on-black); }
.mc-light .mc-figband p { color: var(--mc-muted-ink); }

@media (max-width: 900px) {
  .mc-figband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-fig b { font-size: 48px; line-height: 52px; }
  .mc-fig i { font-size: 24px; line-height: 32px; }
}
@media (max-width: 460px) { .mc-figband { grid-template-columns: minmax(0, 1fr); } }

/* --- Specification list ----------------------------------------------------
   A definition list, not a table: label above value, generous space between
   pairs. Label small, uppercase and widely tracked; value larger, sentence
   case, tabular. The hairline belongs to its own cell — which is the guide's
   "fixed-length accent, never a full-width divider" applied to data. */

.mc-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }
.mc-specs > div { padding: 18px 0; border-top: var(--mc-line) solid var(--mc-cyan); }
.mc-specs dt {
  font-weight: var(--mc-w-body); font-size: var(--mc-label-size);
  letter-spacing: var(--mc-label-ls); text-transform: uppercase; color: var(--mc-muted-ink);
}
.mc-specs dd {
  margin-top: 9px; font-size: 19px; line-height: 1.4; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.mc-dark .mc-specs dt { color: var(--mc-on-black); }
.mc-specs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .mc-specs, .mc-specs--3 { grid-template-columns: minmax(0, 1fr); } }

/* Reference number — the one place tracking opens up on a numeral. */
.mc-ref { display: flex; align-items: baseline; gap: 0.45em; }
.mc-ref span {
  font-size: 24px; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}
.mc-ref span:first-child { color: var(--mc-muted-ink); }
.mc-dark .mc-ref span:first-child { color: var(--mc-on-black); }

/* --- Spec list -------------------------------------------------------------
   Each row separated by a hairline; the cyan tick is the only accent. */

.mc-speclist { list-style: none; margin-top: 8px; }
.mc-speclist li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-bottom: var(--mc-line) solid var(--mc-hairline-white);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--mc-body-ls);
}
.mc-speclist li::before {
  content: '';
  position: absolute;
  left: 0; top: 21px;
  width: 14px; height: var(--mc-line);
  background: var(--mc-cyan);
}
.mc-dark .mc-speclist li { border-bottom-color: var(--mc-hairline-black); }

/* --- Feature list --------------------------------------------------------- */

.mc-feature { border-top: var(--mc-line) solid var(--mc-cyan); padding-top: 24px; }
.mc-feature h3 {
  font-weight: var(--mc-w-data);
  font-size: 17px;
  letter-spacing: var(--mc-data-ls);
  margin-bottom: 12px;
}
.mc-feature p { font-size: 16px; line-height: 1.55; letter-spacing: var(--mc-body-ls); text-wrap: pretty; }
.mc-dark .mc-feature p { color: var(--mc-on-black); }
.mc-light .mc-feature p { color: #4a4a4a; }

/* --- Work gallery --------------------------------------------------------- */

.mc-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 28px); }
/* Default shape, so a figure without a ratio modifier can never collapse. */
.mc-shot { grid-column: span 4; aspect-ratio: 4 / 3; }
.mc-shot--wide { grid-column: span 8; }
.mc-shot--half { grid-column: span 6; }
.mc-shot--full { grid-column: span 12; }
.mc-shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--mc-ease);
}
.mc-shot:hover img { transform: scale(1.03); }
.mc-shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.86), rgba(0,0,0,0));
  color: var(--mc-white);
}
.mc-shot--p { aspect-ratio: 3 / 4; }
.mc-shot--l { aspect-ratio: 4 / 3; }
.mc-shot--w { aspect-ratio: 16 / 9; }

@media (max-width: 900px) {
  .mc-gallery { grid-template-columns: repeat(6, 1fr); }
  .mc-shot, .mc-shot--wide, .mc-shot--half { grid-column: span 3; }
  .mc-shot--full { grid-column: span 6; }
}
@media (max-width: 560px) {
  .mc-shot, .mc-shot--wide, .mc-shot--half, .mc-shot--full { grid-column: span 6; }
}

/* --- Split feature block (image + copy) ----------------------------------- */

.mc-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.mc-split__media { position: relative; overflow: hidden; min-height: 420px; background: var(--mc-black); }
.mc-split__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mc-split__body {
  padding: clamp(44px, 6vw, 88px) var(--mc-pad-gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.mc-split--rev .mc-split__media { order: 2; }

@media (max-width: 900px) {
  .mc-split { grid-template-columns: minmax(0, 1fr); }
  .mc-split__media { min-height: 0; aspect-ratio: 4 / 3; }
  .mc-split--rev .mc-split__media { order: 0; }
}

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

.mc-contact-list { display: flex; flex-direction: column; gap: 14px; list-style: none; }
.mc-contact-row { display: flex; align-items: center; gap: 12px; }
.mc-contact-row img { width: 22px; height: 22px; flex: none; }
.mc-contact-row a { color: inherit; }
.mc-contact-row a:hover { color: var(--mc-cyan-bright); }

/* --- Form ----------------------------------------------------------------- */

.mc-form { display: grid; gap: 24px; }
.mc-field { display: flex; flex-direction: column; gap: 10px; }
.mc-field > label { color: var(--mc-muted); }
.mc-dark .mc-field > label { color: var(--mc-on-black); }
.mc-field input,
.mc-field select,
.mc-field textarea {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: var(--mc-line) solid var(--mc-hairline-white);
  border-radius: 0;
  font-size: var(--mc-data-size);
  font-weight: var(--mc-w-body);
  letter-spacing: var(--mc-data-ls);
  color: var(--mc-black);
  transition: border-color var(--mc-dur) var(--mc-ease);
  -webkit-appearance: none;
  appearance: none;
}
.mc-dark .mc-field input,
.mc-dark .mc-field select,
.mc-dark .mc-field textarea {
  border-color: var(--mc-hairline-black);
  color: var(--mc-white);
}
.mc-field input:focus,
.mc-field select:focus,
.mc-field textarea:focus { border-color: var(--mc-cyan); outline-offset: 1px; }
.mc-field textarea { min-height: 150px; resize: vertical; }
.mc-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--mc-cyan) 50%),
                    linear-gradient(135deg, var(--mc-cyan) 50%, transparent 50%);
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.mc-dark .mc-field select option { background: var(--mc-black); }
.mc-field--wide { grid-column: 1 / -1; }
.mc-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 680px) { .mc-form__grid { grid-template-columns: minmax(0, 1fr); } }

.mc-form__note { font-size: 14px; line-height: 1.55; color: var(--mc-muted); max-width: 52ch; }
.mc-dark .mc-form__note { color: var(--mc-on-black); }

/* Honeypot — hidden from people, visible to bots */
.mc-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

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

.mc-footer { background: var(--mc-black); color: var(--mc-white); border-top: var(--mc-line) solid var(--mc-cyan); }
.mc-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(56px, 6vw, 88px) var(--mc-pad-gutter);
  max-width: var(--mc-maxw);
  margin-inline: auto;
}
.mc-footer__col h4 { margin-bottom: 20px; }
.mc-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.mc-footer__col ul a { color: var(--mc-white); font-size: 16px; letter-spacing: var(--mc-body-ls); }
.mc-footer__col ul a:hover { color: var(--mc-cyan-bright); }
.mc-footer__bottom {
  border-top: var(--mc-line) solid var(--mc-hairline-black);
  padding: 24px var(--mc-pad-gutter);
  max-width: var(--mc-maxw);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  color: var(--mc-on-black);
}
@media (max-width: 900px) { .mc-footer__top { grid-template-columns: minmax(0, 1fr); } }

/* --- Sticky mobile call bar — the primary conversion path ----------------- */

.mc-callbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 98;
  background: var(--mc-cyan);
  color: var(--mc-black);
  border-top: var(--mc-line) solid var(--mc-black);
}
.mc-callbar a {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  color: var(--mc-black);
  font-weight: var(--mc-w-data);
  font-size: 14px;
  letter-spacing: var(--mc-label-ls);
  text-transform: uppercase;
}
.mc-callbar a:hover { color: var(--mc-black); }
.mc-callbar svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 1080px) {
  .mc-callbar { display: block; }
  body { padding-bottom: 62px; }
  .mc-drawer { padding-bottom: 140px; }
}

/* --- Utilities ------------------------------------------------------------ */

.mc-mt-0  { margin-top: 0; }
.mc-mt-24 { margin-top: 24px; }
.mc-mt-32 { margin-top: 32px; }
.mc-mt-40 { margin-top: 40px; }
.mc-mt-56 { margin-top: 56px; }
.mc-mt-64 { margin-top: 64px; }
.mc-mb-24 { margin-bottom: 24px; }
.mc-mb-32 { margin-bottom: 32px; }
.mc-mb-48 { margin-bottom: 48px; }
.mc-mb-56 { margin-bottom: 56px; }

/* No scroll-reveal by design.
   Content is never hidden behind JavaScript: an opacity-0 default fails
   whenever IntersectionObserver is delayed or never fires (backgrounded
   tab, blocked script, crawler), and on a lead-generation site a blank
   section costs an enquiry. The layout carries itself without motion. */

/* --- Phone refinements ----------------------------------------------------
   Everything below is about proportion rather than fit. The page already
   reflowed correctly; it just wore its desktop proportions on a 375px
   screen, which is what made it feel cheap. */

@media (max-width: 620px) {
  /* Section rhythm: less dead air between blocks, since there is no
     horizontal space competing for attention. */
  :root { --mc-pad-section: 52px; }

  /* Buy the hero CTA clear headroom above the sticky call bar. */
  .mc-hero .mc-btn-row { margin-top: 26px; }

  /* The watermark is sized for a 440px card. On a phone card it overwhelms
     the copy and spills past the corner. */
  .mc-service__mark { width: 128px; height: 128px; right: -26px; top: -26px; }

  /* Card padding was scaling down to the point where text touched the rule. */
  .mc-path__body, .mc-service { padding: 30px 26px 34px; }

  /* The credentials strip stacks to three lines; centre it properly and
     give the lines room to breathe rather than crushing them together. */
  .mc-strip { gap: 10px 18px; padding: 20px var(--mc-pad-gutter); line-height: 1.5; }

  /* Section-number eyebrow sat too close to the heading it numbers. */
  .mc-section-head .mc-heading { margin-top: 12px; }
  .mc-rule { margin: 22px 0 34px; }

  /* Figures: 48px numeral is right, but the caption under it was inheriting
     desktop spacing and pushing each figure into its own screenful. */
  .mc-figband { gap: 30px; }
  .mc-figband > div { padding-top: 18px; }
  .mc-figband .mc-label { margin-bottom: 12px; }
  .mc-figband p { margin-top: 10px; }

  /* Spec rows: tighter, and the value no longer needs desktop scale. */
  .mc-specs > div { padding: 15px 0; }
  .mc-specs dd { font-size: 17px; margin-top: 7px; }

  /* Footer columns stack — the wordmark was left at desktop size. */
  .mc-footer__col .mc-wordmark { font-size: 26px !important; }
  .mc-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Genuinely small devices only (iPhone SE 1st gen and similar). 375px and
   390px are mainstream widths and keep the full 38px display size. */
@media (max-width: 350px) {
  :root { --mc-display-size: 33px; --mc-pad-gutter: 20px; }
}

@media print {
  .mc-header, .mc-callbar, .mc-drawer, .mc-burger { display: none !important; }
  body { padding-bottom: 0; }
  .mc-dark { background: #fff !important; color: #000 !important; }
}