/* ==========================================================================
   SkyTech — skytech.co.nz stylesheet
   Source of truth: Marketing Designs/website-design/ (approved 2026-07-31)
   Tokens + components per "05 Component Sheet"; layouts per page mockups.
   Contrast rule (hard): text on Ag Green is ALWAYS ink #12351f, never white.
   White text on green only on Deep Green #007a2e.
   ========================================================================== */

/* ---- Fonts (self-hosted, latin subsets) ---- */
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/rajdhani-600.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/rajdhani-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/nunito-sans-var.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2'); }

/* ---- Tokens ---- */
:root {
  --navy: #0c1c30;          /* site frame, dark sections, neutral CTAs */
  --navy-deep: #08131f;     /* trust bar, footer */
  --navy-mid: #1a3a5c;      /* navy hover */
  --green: #00cc44;         /* green-world CTAs + accents (ink text only) */
  --green-hover: #00b53c;
  --green-deep: #007a2e;    /* only green allowed under white text */
  --green-ink: #12351f;     /* text on Ag Green */
  --green-label: #00a838;   /* green text on white */
  --green-nav: #4be07a;     /* green links on navy */
  --green-nav-hover: #8df2ad;
  --green-foot: #7ee2a0;
  --chip-green-bg: rgba(0,204,68,.14);
  --chip-green-ink: #0a7a2e;
  --blue: #1a6aff;          /* blue-world CTAs + accents */
  --blue-hover: #3b82f6;
  --blue-nav: #6ea8ff;
  --blue-nav-hover: #a4c8ff;
  --blue-foot: #8db8ff;
  --chip-blue-bg: rgba(26,106,255,.12);
  --chip-blue-ink: #1a4fd0;
  --ice: #7fd0ff;           /* microtext on dark */
  --ink: #1F2B38;           /* body ink */
  --body-grey: #3a4652;     /* body text on light */
  --muted: #5a6478;
  --placeholder: #9aa3ad;
  --line: #e3e7ec;
  --line-soft: #e8ecf1;
  --input-border: #d2d9e2;
  --bg-light: #f5f7fa;
  --bg-section: #eef1f5;
  --tint-green: #f2f7f2;
  --tint-green-border: #d8e8d8;
  --tint-blue: #f4f8ff;
  --tint-blue-2: #f0f5fd;
  --tint-blue-border: #cfe0f8;
  --font-display: 'Rajdhani', Arial, sans-serif;
  --font-body: 'Nunito Sans', Arial, Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
  --radius-btn: 4px;
  --radius-card: 6px;
  --max-w: 1280px;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
.wrap { max-width: var(--max-w); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--navy); padding: 10px 16px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Focus: 2px offset outline in the element's own colour (per component sheet) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.btn-green:focus-visible { outline-color: var(--green); }
.btn-blue:focus-visible { outline-color: var(--blue); }
.btn-navy:focus-visible, .btn-outline-navy:focus-visible { outline-color: var(--navy); }
.btn-white:focus-visible { outline-color: #fff; }

/* ---- Type helpers ---- */
.kicker {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.kicker-ice { color: var(--ice); }
.kicker-green { color: var(--green-nav); }
.kicker-blue { color: var(--blue-nav); }
h1, h2, h3, .display {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; color: var(--navy); margin: 0;
}
.h2 { font-size: 26px; line-height: 1.15; }
.lead { font-size: 16px; line-height: 1.65; color: var(--body-grey); }
.mono { font-family: var(--font-mono); font-weight: 500; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 14px 24px; border-radius: var(--radius-btn);
  border: 0; cursor: pointer; text-align: center;
  min-height: 44px; transition: background .15s, color .15s, border-color .15s;
}
.btn-green { background: var(--green); color: var(--green-ink); }
.btn-green:hover { background: var(--green-hover); color: var(--green-ink); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-hover); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-mid); color: #fff; }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: #dbe6f5; color: var(--navy); }
.btn-outline-navy { background: transparent; border: 2px solid var(--navy); color: var(--navy); padding: 12px 22px; }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-outline-blue { background: #fff; border: 2px solid var(--blue); color: var(--blue); padding: 12px 22px; }
.btn-outline-blue:hover { background: var(--tint-blue); color: var(--blue); }
.btn-outline-white { background: transparent; border: 2px solid rgba(255,255,255,.5); color: #fff; padding: 13px 24px; }
.btn-outline-white:hover { border-color: #fff; color: #fff; }
.btn-header { font-size: 15px; padding: 10px 18px; min-height: 0; white-space: nowrap; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12,28,48,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-header-minimal { position: static; }
.header-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 68px;
}
.header-logo img { height: 38px; width: auto; display: block; }
.header-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-phone {
  display: none; font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  color: rgba(255,255,255,.85); white-space: nowrap;
}
.header-phone:hover { color: #fff; }
.site-header-minimal .header-phone { display: block; }
.burger {
  display: block; background: none; border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-btn); width: 42px; height: 42px;
  font-size: 17px; cursor: pointer; color: #fff;
}
.mobile-nav {
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid rgba(255,255,255,.1);
  background: var(--navy); padding: 8px 24px 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  text-transform: uppercase; letter-spacing: .04em;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a { padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-nav-phone { color: #fff !important; font-family: var(--font-mono); font-size: 14px; font-weight: 500; padding-top: 16px !important; border-bottom: 0 !important; }
.nav-green { color: var(--green-nav); } .nav-green:hover { color: var(--green-nav-hover); }
.nav-blue { color: var(--blue-nav); } .nav-blue:hover { color: var(--blue-nav-hover); }
.nav-plain { color: rgba(255,255,255,.85); } .nav-plain:hover { color: #fff; }
.header-nav a.is-active.nav-green { border-bottom: 2px solid var(--green); padding-bottom: 2px; }
.header-nav a.is-active.nav-blue { border-bottom: 2px solid var(--blue); padding-bottom: 2px; }
.header-nav a.is-active.nav-plain { color: #fff; border-bottom: 2px solid #fff; padding-bottom: 2px; }

/* ---- Trust bar ---- */
.trustbar { background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.trustbar-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 13px 24px;
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px;
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75);
}
.trust-item { display: flex; align-items: center; gap: 8px; padding-right: 24px; margin-right: 24px; border-right: 1px solid rgba(255,255,255,.15); }
.trust-extra { color: rgba(255,255,255,.5); padding-right: 24px; }
.trust-phone { color: #fff; font-family: var(--font-mono); }
.trust-phone:hover { color: var(--ice); }

/* ---- Hero (single-panel service/about pages) ---- */
.hero {
  position: relative; overflow: hidden; background: var(--navy);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Narrow hero panels crop a landscape photo to a thin vertical slice, so the
   subject has to be aimed at deliberately. Ag panel: the crew loading the drone
   sit left of centre in the ute shot. */
.hero-media-aim-left img { object-position: 34% center; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; }
.hero-rule { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.hero-inner { position: relative; max-width: var(--max-w); margin: 0 auto; padding: 72px 24px 60px; }
.hero-copy { max-width: 640px; }
.hero-copy h1 { font-size: 32px; line-height: 1.02; color: #fff; margin: 14px 0 0; text-wrap: pretty; }
.hero-copy .hero-sub { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 16px 0 0; max-width: 52ch; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.scrim-green { background: linear-gradient(100deg, rgba(7,26,14,.93) 0%, rgba(9,30,20,.72) 50%, rgba(12,28,48,.25) 100%); }
.scrim-blue { background: linear-gradient(100deg, rgba(6,20,44,.9) 0%, rgba(10,28,58,.6) 45%, rgba(12,28,48,.12) 100%); }
.scrim-blue-deep { background: linear-gradient(100deg, rgba(6,20,44,.93) 0%, rgba(10,28,58,.7) 50%, rgba(12,28,48,.2) 100%); }
.scrim-navy { background: linear-gradient(100deg, rgba(6,20,44,.93) 0%, rgba(10,28,58,.72) 50%, rgba(12,28,48,.25) 100%); }

/* ---- Split hero (homepage) ---- */
.split-hero { position: relative; display: grid; grid-template-columns: 1fr; background: var(--navy); }
.split-panel {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 62vh; transition: filter .2s;
}
.split-panel:hover { filter: brightness(1.12); }
.split-panel .hero-rule { height: 4px; }
.split-copy { position: relative; padding: 28px 24px 40px; width: 100%; }
.split-line { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .22em; margin-bottom: 10px; }
.split-copy h2 {
  font-size: 30px; line-height: .98; color: #fff; letter-spacing: .01em;
}
.split-copy .split-sub { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.78); margin-top: 12px; max-width: 40ch; }
.split-copy .btn { margin-top: 18px; font-size: 16px; padding: 13px 22px; }
/* Mobile: four stacked doors (ag · lifestyle · commercial · residential),
   each keeping its own colour rule. The graduation is a desktop-only device. */
.hero-grad-rule { display: none; }
.split-hero-4 .split-panel { min-height: 38vh; }
.split-hero-4 .split-copy { padding-top: 22px; padding-bottom: 30px; }
.split-hero-4 .split-copy h2 { font-size: 26px; }
.split-hero-4 .split-sub { font-size: 14px; }
.split-scrim-green { background: linear-gradient(10deg, rgba(7,26,14,.94) 0%, rgba(9,30,20,.55) 45%, rgba(12,28,48,.25) 100%); }
.split-scrim-blue { background: linear-gradient(-10deg, rgba(6,20,44,.94) 0%, rgba(10,28,58,.55) 45%, rgba(12,28,48,.25) 100%); }
/* Bridge panel — green at the base (land leads), navy-blue toward the top */
.split-scrim-bridge { background: linear-gradient(0deg, rgba(7,26,14,.95) 0%, rgba(9,28,34,.68) 45%, rgba(10,26,52,.35) 100%); }

/* In the four-column hero the diagonal scrims leave copy sitting on bright sky
   in the narrow panels — go bottom-heavy vertical so text is legible whatever
   the photo does. Applies at every width. */
.split-hero-4 .split-scrim-green { background: linear-gradient(0deg, rgba(7,26,14,.96) 0%, rgba(8,28,20,.80) 30%, rgba(12,28,48,.30) 100%); }
.split-hero-4 .split-scrim-blue { background: linear-gradient(0deg, rgba(6,20,44,.96) 0%, rgba(8,24,52,.80) 30%, rgba(12,28,48,.24) 100%); }
.split-hero-4 .split-scrim-bridge { background: linear-gradient(0deg, rgba(7,26,14,.96) 0%, rgba(9,28,34,.78) 32%, rgba(10,26,52,.30) 100%); }
.hero-badge { display: none; }

/* ---- Sections ---- */
.section { padding: 56px 0; }
.section-light { background: var(--bg-section); }
.section-white { background: #fff; }
.section-navy { background: var(--navy); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-note { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.section-navy .section-note { color: rgba(255,255,255,.5); }
.section-navy h2 { color: #fff; }

/* ---- Cards (component sheet) ---- */
.card-rule-green { background: var(--tint-green); border-left: 4px solid var(--green); border-radius: 0 var(--radius-card) var(--radius-card) 0; padding: 16px 18px; }
.card-rule-blue { background: var(--tint-blue-2); border-left: 4px solid var(--blue); border-radius: 0 var(--radius-card) var(--radius-card) 0; padding: 16px 18px; }
.card-rule-green .card-title, .card-rule-blue .card-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--navy); text-transform: uppercase; }
.card-rule-green p, .card-rule-blue p { font-size: 14px; line-height: 1.55; color: var(--body-grey); margin: 4px 0 0; }
.step-card { background: var(--tint-blue); border-top: 4px solid var(--blue); border-radius: 0 0 var(--radius-card) var(--radius-card); padding: 22px 24px; }
.step-card .step-n { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .18em; color: var(--blue); }
.step-card .step-t { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--navy); text-transform: uppercase; margin-top: 8px; }
.step-card p { font-size: 14.5px; line-height: 1.6; color: var(--body-grey); margin: 6px 0 0; }
.navy-panel { background: var(--navy); border-radius: var(--radius-card); padding: 20px 22px; }
.navy-panel .kicker { color: var(--ice); font-size: 10.5px; letter-spacing: .2em; }
.navy-panel p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.8); margin: 8px 0 0; }

/* ---- Check rows / step rows ---- */
.check-row { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.check-row .tick { font-weight: 700; font-size: 15px; flex-shrink: 0; }
.check-row p { font-size: 15px; line-height: 1.55; color: var(--body-grey); margin: 0; }
.check-row b { color: var(--navy); }
.step-row { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.step-row .step-num { font-family: var(--font-mono); font-weight: 500; font-size: 12px; width: 26px; flex-shrink: 0; }
.step-row p { font-size: 15px; line-height: 1.55; color: var(--body-grey); margin: 0; }
.step-row b { color: var(--navy); }

/* ---- Chips ---- */
.chip {
  display: inline-block; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--input-border);
  background: #fff; color: var(--muted); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chip[aria-pressed="true"].chip-green, .chip.is-on.chip-green { border-color: var(--green); background: var(--chip-green-bg); color: var(--chip-green-ink); }
.chip[aria-pressed="true"].chip-blue, .chip.is-on.chip-blue { border-color: var(--blue); background: var(--chip-blue-bg); color: var(--chip-blue-ink); }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  border: 1.5px solid var(--input-border); border-radius: var(--radius-btn);
  padding: 12px 14px; font-size: 15px; font-family: inherit; font-weight: 400; color: var(--ink);
  width: 100%;
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
form[data-accent="green"] .field input:focus, form[data-accent="green"] .field textarea:focus { border-color: var(--green); outline: none; }
form[data-accent="blue"] .field input:focus, form[data-accent="blue"] .field textarea:focus { border-color: var(--blue); outline: none; }
.photo-drop {
  border: 1.5px dashed #b9c3cf; border-radius: var(--radius-btn); padding: 18px;
  text-align: center; font-size: 13.5px; color: var(--muted); font-weight: 400; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.photo-drop:hover, .photo-drop.is-drag { border-color: var(--blue); color: var(--blue); }
.photo-drop-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.photo-drop-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
/* Honeypot — visually gone, still in the DOM for bots */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Footer ---- */
.footer { background: var(--navy-deep); }
.footer a { color: rgba(255,255,255,.85); }
.footer a:hover { color: #fff; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 56px 24px 36px; }
.footer-cols { display: flex; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.footer-brand { max-width: 320px; }
.footer-brand img { width: 190px; height: auto; }
.footer-brand p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.55); margin: 16px 0 0; }
.footer-links { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.footer-kicker { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.foot-green { color: var(--green-foot) !important; } .foot-green:hover { color: #a5f0be !important; }
.foot-blue { color: var(--blue-foot) !important; } .foot-blue:hover { color: #b3cfff !important; }
.footer-phone { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff !important; }
.footer-phone:hover { color: var(--ice) !important; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 36px; padding-top: 18px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
}
.footer-compact-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 36px 24px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center;
}
.footer-compact img { width: 170px; height: auto; }
.footer-compact-legal { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.footer-compact .footer-phone { font-size: 18px; }

/* ---- Homepage: video section ---- */
.video-frame { position: relative; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-card); overflow: hidden; background: #000; }
.video-stage { position: relative; aspect-ratio: 16/9; }
.video-stage img.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.video-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12,28,48,.2) 0%, rgba(12,28,48,.75) 100%); pointer-events: none; }
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
}
.video-play .play-ring {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px; padding-left: 6px;
}
.video-play .play-hint { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .22em; color: #fff; }
.telemetry { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.14); background: var(--navy-deep); font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.telemetry > div { padding: 12px 22px; border-right: 1px solid rgba(255,255,255,.1); }
.telemetry .k { color: rgba(255,255,255,.45); }
.telemetry .v { color: var(--ice); }

/* ---- Homepage: checklist ---- */
.checklist-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.checklist-card { background: var(--navy); border-radius: var(--radius-card); padding: 8px 0; box-shadow: 0 20px 60px rgba(12,28,48,.25); }
.checklist-title { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ice); padding: 16px 26px 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.checklist-row { display: flex; align-items: baseline; gap: 16px; padding: 14px 26px; border-bottom: 1px solid rgba(255,255,255,.07); }
.checklist-row:last-child { border-bottom: 0; }
.checklist-row .cl-n { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: rgba(255,255,255,.4); width: 24px; flex-shrink: 0; }
.checklist-row .cl-t { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; text-transform: uppercase; letter-spacing: .04em; width: 110px; flex-shrink: 0; }
.checklist-row .cl-d { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.65); }
.checklist-row .cl-check { margin-left: auto; color: var(--green-nav); font-size: 14px; flex-shrink: 0; }

/* ---- Before / after ---- */
.ba-frame { position: relative; border-radius: var(--radius-card); overflow: hidden; background: #dfe4ea; margin-top: 22px; border: 1px solid var(--input-border); }
.ba-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 200px; }
.ba-cell { position: relative; min-width: 0; }
.ba-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-cell + .ba-cell { border-left: 3px solid #fff; }
.ba-tag {
  position: absolute; top: 12px; z-index: 2; background: var(--navy); color: #fff;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .18em;
  padding: 6px 12px; border-radius: 3px;
}
.ba-tag-after { background: var(--blue); }
.ba-credit { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* ---- Media / gallery ---- */
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
.gallery-item { position: relative; border-radius: var(--radius-card); overflow: hidden; min-height: 240px; }
.gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-panel { position: relative; border-radius: var(--radius-card); overflow: hidden; min-height: 260px; background: var(--navy); }
.media-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(transparent, rgba(12,28,48,.85));
  padding: 40px 20px 14px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.8);
}

/* ---- Two-column feature rows ---- */
.two-col { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.two-col-center { align-items: center; }
.three-col { display: grid; grid-template-columns: 1fr; gap: 18px; }

/* ---- CTA panels ---- */
.cta-panel-green { background: var(--tint-green); border: 1px solid var(--tint-green-border); border-radius: var(--radius-card); padding: 28px 30px; }
.cta-panel-blue { background: var(--tint-blue-2); border: 1px solid var(--tint-blue-border); border-radius: var(--radius-card); padding: 28px 30px; }
.cta-panel-navy { background: var(--navy); border-radius: var(--radius-card); padding: 28px 24px; display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.cta-panel-actions { align-items: flex-start; }
.cta-panel-light { background: var(--bg-section); border-radius: var(--radius-card); padding: 28px 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--navy); text-transform: uppercase; margin-top: 8px; }
.cta-alt { font-size: 13px; color: var(--muted); margin-top: 12px; }
.cta-alt a { font-weight: 700; }

/* ---- Crew cards (about) ---- */
.crew-card { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.crew-photo { position: relative; min-height: 280px; background: linear-gradient(160deg, #12253d 0%, var(--navy) 60%, var(--navy-deep) 100%); }
.crew-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crew-photo-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center;
}
.crew-photo-placeholder img { position: static; width: 96px; height: auto; opacity: .9; }
.crew-photo-placeholder span { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; color: rgba(255,255,255,.55); }
.crew-meta { padding: 20px 22px; border-top: 4px solid var(--navy); }
.crew-meta .crew-role { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.crew-meta .crew-name { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--navy); text-transform: uppercase; margin-top: 4px; }
.crew-meta p { font-size: 14px; line-height: 1.6; color: var(--body-grey); margin: 6px 0 0; }

/* ---- Cert points (about, navy section) ---- */
.cert-point { display: flex; gap: 14px; align-items: baseline; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-card); padding: 14px 18px; }
.cert-point .tick { color: var(--green-nav); font-weight: 700; }
.cert-point p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.85); margin: 0; }

/* ---- Quote page ---- */
.quote-page { background: var(--navy); min-height: 100vh; }
.quote-wrap { max-width: 760px; margin: 0 auto; padding: 28px 18px 48px; }
.quote-head { text-align: center; }
.quote-head h1 { font-size: 28px; line-height: 1.05; color: #fff; margin: 12px 0 0; }
.service-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.picker-btn {
  cursor: pointer; text-align: left; font-family: inherit;
  background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--radius-card); padding: 14px 16px; transition: all .15s;
}
.picker-btn .p-line { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.4); }
/* Two-line block so "Lifestyle property" wrapping doesn't knock the shorter
   titles' descriptions out of alignment across the picker row. */
.picker-btn .p-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.05; text-transform: uppercase; color: rgba(255,255,255,.65); min-height: 2.1em; }
.picker-btn .p-desc { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 2px; }
.picker-btn.is-on .p-title { color: #fff; }
.picker-btn.is-on .p-desc { color: rgba(255,255,255,.75); }
.picker-btn.is-on.picker-green { background: rgba(0,204,68,.12); border-color: var(--green); }
.picker-btn.is-on.picker-green .p-line { color: var(--green-nav); }
.picker-btn.is-on.picker-blue { background: rgba(26,106,255,.14); border-color: var(--blue); }
.picker-btn.is-on.picker-blue .p-line { color: var(--blue-nav); }
.quote-card { background: #fff; border-radius: var(--radius-card); border-top: 5px solid var(--blue); margin-top: 14px; padding: 20px 18px; transition: border-color .2s; }
.quote-card[data-accent="green"] { border-top-color: var(--green); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.field-group { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.contact-band { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.submit-band { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
.btn-submit { font-size: 18px; padding: 16px; width: 100%; }
.quote-note { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.quote-talk { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.quote-talk a { font-weight: 700; color: var(--navy); }
.quote-trust {
  display: flex; justify-content: center; flex-wrap: wrap; row-gap: 6px; margin-top: 18px;
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.quote-trust > div { padding: 0 14px; border-right: 1px solid rgba(255,255,255,.2); }
.quote-trust > div:last-child { border-right: 0; }
.form-error { background: #fef2f2; border: 1.5px solid #dc2626; color: #7f1d1d; border-radius: var(--radius-btn); padding: 12px 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.form-success { text-align: center; padding: 28px 10px; }
.form-success .s-kicker { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.form-success h2 { font-size: 26px; margin-top: 10px; }
.form-success p { font-size: 15px; color: var(--body-grey); }
.form-success .s-ref { font-family: var(--font-mono); font-weight: 500; font-size: 13px; background: var(--bg-light); border: 1px solid var(--line); border-radius: var(--radius-btn); display: inline-block; padding: 8px 14px; margin-top: 8px; }

/* ---- Iteration 2: services layer ---- */

/* Breadcrumb bar — the way back on service pages (real links, never history.back) */
.crumbbar { background: var(--navy-deep); border-bottom: 1px solid rgba(255,255,255,.08); }
.crumbbar-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 10px; min-height: 46px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
}
.crumb-back {
  display: inline-flex; align-items: center; gap: 8px; color: #fff;
  padding: 8px 12px 8px 10px; margin-left: -10px; border-radius: var(--radius-btn);
  transition: background .15s;
}
.crumb-back:hover { background: rgba(255,255,255,.1); color: #fff; }
.crumb-arrow { font-size: 14px; line-height: 1; }
.crumb-link { color: rgba(255,255,255,.7); }
.crumb-link:hover { color: #fff; }
.crumb-sep { color: rgba(255,255,255,.3); }
.crumb-current { color: rgba(255,255,255,.5); }
.crumb-hide-sm { display: none; }

/* Sibling services strip at the foot of a service page */
.siblings { background: var(--navy); border-top: 1px solid rgba(255,255,255,.08); }
.siblings-inner { padding-top: 30px; padding-bottom: 34px; }
.siblings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.siblings-all { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.siblings-all:hover { color: var(--ice); }

/* WHAT WE DO strip — genre pages, directly above the trust bar */
.wwd { background: var(--navy); border-top: 1px solid rgba(255,255,255,.08); }
.wwd-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
}
.wwd-kicker { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .22em; color: rgba(255,255,255,.5); }
.wwd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wwd-chip {
  display: inline-block; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  padding: 8px 15px; border-radius: 999px; border: 1.5px solid;
  transition: background .15s, color .15s;
}
.wwd-chip-green { border-color: rgba(0,204,68,.55); color: var(--green-nav); }
.wwd-chip-green:hover { background: rgba(0,204,68,.14); color: var(--green-nav-hover); }
.wwd-chip-blue { border-color: rgba(26,106,255,.6); color: var(--blue-nav); }
.wwd-chip-blue:hover { background: rgba(26,106,255,.16); color: var(--blue-nav-hover); }

/* Services index — image tiles, not text cards. The site's strongest visual
   device is photo + bottom-up scrim + world-colour rule; the index now uses it
   so it reads like the rest of the site rather than a price list. */
.services-hero { position: relative; overflow: hidden; background: var(--navy); }
.services-hero .hero-media { position: absolute; inset: 0; }
.services-hero-scrim { background: linear-gradient(90deg, rgba(6,16,28,.95) 0%, rgba(6,16,28,.86) 50%, rgba(6,16,28,.62) 100%); }
.services-hero-copy { position: relative; padding-top: 52px; padding-bottom: 48px; }
.services-hero h1 { color: #fff; font-size: 40px; margin-top: 12px; }
.services-hero p { color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.6; max-width: 62ch; margin: 16px 0 0; }
.services-hero .hero-grad-rule { display: block; position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 3;
  background: linear-gradient(90deg, #00cc44 0%, #00cc44 18%, #00c266 30%, #00b58a 42%, #00a5b4 54%, #0f8ada 68%, #1a6aff 82%, #1a6aff 100%); }

/* Linked service cards on the GENRE pages (not the index tiles) — these keep the
   flat tinted-card treatment from the approved component sheet. */
.svc-card { display: flex; flex-direction: column; }
.svc-card .card-title { transition: color .15s; }
.svc-card:hover .card-title { color: var(--navy-mid); }
.svc-card-go { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; margin-top: 10px; }
.card-rule-green .svc-card-go { color: var(--green-label); }
.card-rule-blue .svc-card-go { color: var(--blue); }

.svc-group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.svc-genre-link { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.svc-genre-link:hover { color: var(--navy-mid); }

.svc-tiles { display: grid; grid-template-columns: 1fr; gap: 16px; }
.svc-tile {
  position: relative; display: block; overflow: hidden; background: var(--navy);
  border-radius: var(--radius-card); min-height: 310px;
  transition: transform .18s, box-shadow .18s;
}
.svc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(12,28,48,.28); }
.svc-tile:hover img { transform: scale(1.06); }
.svc-tile-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,16,28,.96) 0%, rgba(6,16,28,.80) 42%, rgba(6,16,28,.30) 100%); }
.svc-tile-rule { position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3; }
.svc-rule-split { display: flex; }
.svc-rule-split span { flex: 1; }
.svc-tile-body { position: relative; z-index: 2; min-height: 310px; padding: 22px 22px 24px; display: flex; flex-direction: column; justify-content: flex-end; }
.svc-tile-kicker { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.svc-tile-title { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.08; color: #fff; text-transform: uppercase; margin-top: 6px; }
.svc-tile-body p { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 8px 0 0; }
.svc-tile-go { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; margin-top: 14px; }

.svc-wide-tile { position: relative; display: block; overflow: hidden; background: var(--navy); border-radius: var(--radius-card); min-height: 300px; transition: transform .18s, box-shadow .18s; }
.svc-wide-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .5s ease; }
.svc-wide-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(12,28,48,.28); }
.svc-wide-tile:hover img { transform: scale(1.04); }
.svc-wide-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,16,28,.96) 0%, rgba(6,16,28,.72) 48%, rgba(6,16,28,.28) 100%); }
.svc-wide-body { position: relative; z-index: 2; min-height: 300px; padding: 26px 24px 28px; display: flex; flex-direction: column; justify-content: flex-end; }
.svc-wide-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.06; color: #fff; text-transform: uppercase; margin-top: 8px; }
.svc-wide-body p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.8); margin: 10px 0 0; max-width: 60ch; }

/* Lifestyle page — the five-job package grid */
.pack-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pack-card {
  display: block; border-radius: var(--radius-card); padding: 20px 22px;
  border-top: 4px solid; transition: transform .15s, box-shadow .15s;
}
.pack-card p { font-size: 14px; line-height: 1.6; color: var(--body-grey); margin: 6px 0 0; }
.pack-green { background: var(--tint-green); border-top-color: var(--green); }
.pack-blue { background: var(--tint-blue); border-top-color: var(--blue); }
.pack-cta { background: var(--navy); border-top-color: var(--green); }
a.pack-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(12,28,48,.14); }
.pack-n { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; color: var(--muted); }
.pack-green .pack-n { color: var(--green-label); }
.pack-blue .pack-n { color: var(--blue); }
.pack-t { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--navy); text-transform: uppercase; margin-top: 6px; }
.pack-t-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pack-tag {
  font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .18em;
  background: var(--green); color: var(--green-ink); padding: 3px 8px; border-radius: 3px;
}
.pack-go { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; margin-top: 12px; }
.pack-green .pack-go { color: var(--green-label); }
.pack-blue .pack-go { color: var(--blue); }
.pack-note {
  display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--input-border); background: #fff; border-radius: 3px; padding: 4px 9px;
}

/* Lifestyle page */
.hero-rule-split { position: absolute; top: 0; left: 0; right: 0; height: 5px; display: flex; }
.hero-rule-split span { flex: 1; }
.life-blue-card {
  display: block; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-left: 4px solid var(--blue); border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 16px 18px; transition: background .15s;
}
.life-blue-card:hover { background: rgba(26,106,255,.12); }
.life-blue-card .card-title { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 19px; text-transform: uppercase; }
.life-blue-card p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.75); margin: 4px 0 0; }

/* ---- Full-bleed detail band (service pages) ---- */
/* NOTE: block, not flex. As a flex child .wrap shrink-to-fits, so max-width stops
   forcing full width and margin:0 auto centres the shrunken box — which pushed the
   copy off the page grid. */
.detail-band { position: relative; overflow: hidden; background: var(--navy); display: block; }
.detail-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 66%; }
.detail-band-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,16,28,.90) 0%, rgba(6,16,28,.66) 42%, rgba(6,16,28,.22) 100%);
}
.detail-band-copy { position: relative; padding-top: 56px; padding-bottom: 60px; min-height: 300px; box-sizing: content-box; }
.detail-band-copy p {
  font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.12;
  text-transform: uppercase; color: #fff; margin: 12px 0 0; max-width: 22ch;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
@media (min-width: 900px) {
  .detail-band-copy { padding-top: 76px; padding-bottom: 80px; min-height: 240px; }
  .detail-band-copy p { font-size: 32px; max-width: 26ch; }
}

/* ---- 404 ---- */
.page-404 { background: var(--navy); min-height: 100vh; }
.page-404 main { max-width: 620px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.page-404 img.drone { width: 150px; height: auto; margin: 0 auto 18px; }
.page-404 h1 { color: #fff; font-size: 40px; }
.page-404 p { color: rgba(255,255,255,.75); }

/* ---- Utilities ---- */
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; } .mt-22 { margin-top: 22px; } .mt-30 { margin-top: 30px; }
.center { text-align: center; }
.center-block { max-width: 640px; margin-left: auto; margin-right: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   ≥700px — quote form widens
   ========================================================================== */
@media (min-width: 700px) {
  .quote-wrap { padding: 48px 24px 72px; }
  .quote-head h1 { font-size: 40px; }
  .service-picker { grid-template-columns: repeat(4, 1fr); }
  .picker-btn .p-title { font-size: 22px; }
  .quote-card { padding: 28px 30px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .submit-band.has-book { grid-template-columns: 1.4fr 1fr; }
}

/* ==========================================================================
   ≥900px — desktop
   ========================================================================== */
@media (min-width: 900px) {
  .h2 { font-size: 34px; }
  .section { padding: 80px 0; }
  .section-tight { padding: 72px 0; }
  /* Six nav items now — tighten to fit beside the logo, phone and CTA.
     Sizes step back up at 1180px+ where there's room. */
  .header-nav {
    display: flex; align-items: center; gap: 16px;
    font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
    letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  }
  .header-phone { display: none; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }

  .hero-inner { padding: 100px 24px 90px; }
  .hero-copy h1 { font-size: 48px; }

  .split-hero { grid-template-columns: 1fr 1fr; min-height: 78vh; }
  .split-panel { min-height: 78vh; }
  .split-panel-left { clip-path: polygon(0 0, 100% 0, calc(100% - 56px) 100%, 0 100%); margin-right: -28px; }
  .split-panel-right { clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%); margin-left: -28px; }
  .split-copy { padding: 48px 48px 56px; }
  .split-copy h2 { font-size: clamp(30px, 3vw, 42px); }
  .split-panel-right .split-copy { text-align: right; }
  .split-panel-right .split-sub { margin-left: auto; }

  /* Four EQUAL doors: Agricultural | Lifestyle | Commercial | Residential.
     Equal columns by design — no panel outranks another. Slant narrowed to
     40px and padding trimmed so the copy still breathes at ~320px columns. */
  .split-hero-4 { grid-template-columns: repeat(4, 1fr); }
  .split-hero-4 .split-panel { min-height: 78vh; }
  .split-hero-4 .split-panel-left {
    clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
    margin-right: -20px;
  }
  .split-hero-4 .split-panel-mid {
    clip-path: polygon(40px 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
    margin-left: -20px; margin-right: -20px;
  }
  .split-hero-4 .split-panel-right {
    clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -20px;
  }
  .split-hero-4 .split-copy { padding: 40px 26px 46px 34px; text-align: left; }
  .split-hero-4 .split-panel-right .split-copy { text-align: left; }
  .split-hero-4 .split-panel-right .split-sub { margin-left: 0; }
  .split-hero-4 .split-copy h2 { font-size: clamp(22px, 1.95vw, 27px); line-height: 1.02; }
  .split-hero-4 .split-sub { font-size: 13.5px; line-height: 1.5; max-width: 30ch; }
  .split-hero-4 .split-line { font-size: 10.5px; letter-spacing: .18em; }
  .split-hero-4 .split-copy .btn { font-size: 14px; padding: 11px 16px; margin-top: 16px; }

  /* The graduation: one rule spanning the hero, green through teal to blue.
     Per-panel rules are suppressed so it reads as a single unbroken line. */
  .split-hero-4 .split-panel .hero-rule { display: none; }
  .split-hero-4 .hero-grad-rule {
    display: block; position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 6;
    background: linear-gradient(90deg,
      #00cc44 0%, #00cc44 18%, #00c266 30%, #00b58a 42%,
      #00a5b4 54%, #0f8ada 68%, #1a6aff 82%, #1a6aff 100%);
  }
  .hero-badge {
    display: block; position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
    z-index: 5; pointer-events: none; text-align: center;
  }
  .hero-badge-box {
    background: var(--navy); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-card);
    padding: 18px 26px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  }
  .hero-badge-box img { width: 190px; height: auto; display: block; margin: 0 auto; }
  .hero-badge-box .badge-cert { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .24em; color: var(--ice); margin-top: 10px; white-space: nowrap; }

  .crumb-hide-sm { display: inline; }
  .svc-tiles-2 { grid-template-columns: repeat(2, 1fr); }
  .svc-tiles-3 { grid-template-columns: repeat(3, 1fr); }
  .svc-tiles-2 .svc-tile, .svc-tiles-2 .svc-tile-body { min-height: 340px; }
  .services-hero-copy { padding-top: 76px; padding-bottom: 72px; }
  .services-hero h1 { font-size: 54px; }
  .svc-wide-tile, .svc-wide-body { min-height: 340px; }
  .svc-wide-body { padding: 40px 44px; }
  .svc-wide-title { font-size: 34px; }
  .pack-grid { grid-template-columns: repeat(3, 1fr); }
  .checklist-grid { grid-template-columns: 0.9fr 1.1fr; }
  .checklist-row .cl-t { width: 170px; }
  .ba-grid { min-height: 420px; }
  .gallery-grid { grid-template-columns: 1fr 1fr 1fr; }
  .two-col { grid-template-columns: 1fr 1fr; }
  .three-col { grid-template-columns: 1fr 1fr 1fr; }
  .media-panel { min-height: 380px; }
  .cta-panel-navy { grid-template-columns: 1fr 1fr; padding: 40px 44px; }
  .cta-panel-actions { align-items: flex-end; }
  .cta-panel-light { padding: 36px 44px; }
  .crew-photo { min-height: 280px; }
}

/* ==========================================================================
   ≥1180px — room for the phone number and full-size nav again
   ========================================================================== */
@media (min-width: 1180px) {
  .header-nav { gap: 22px; font-size: 15.5px; letter-spacing: .04em; }
  .header-phone { display: block; }
}