/* ── Palette ───────────────────────────────────────────────────
   Approved 26 Aug. `warm` is the display tone; `warm-ink` is the
   deeper mix that holds up at small sizes on the photograph. */
:root{
  --cool:#00A0CE;
  --warm:#E0561F;
  --warm-ink:#BE481A;
  --navy:#0D1526;
  --paper:#FFFFFF;
  --soft:#D6E4F0;
  --dim:#B0C2D6;
  --rule:rgba(214,228,240,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--navy);
  color:var(--paper);
  font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* ── The page is one full-height panel ─────────────────────────
   The photograph is a background layer, not an <img>, so the scrim
   can sit over it without a stacking dance. Two renditions: a phone
   never pulls the desktop file. */
.page{
  position:relative;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:
    max(20px,env(safe-area-inset-top))
    max(20px,env(safe-area-inset-right))
    max(20px,env(safe-area-inset-bottom))
    max(20px,env(safe-area-inset-left));
  overflow:hidden;
}
.page::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("room-mobile.jpg");
  background-size:cover;
  background-position:58% 38%;
  z-index:0;
}
@media (min-width:820px){
}
/* The scrim. Dark at both ends so the lockup reads against the ceiling
   and the contact block reads against the cabinet, clear through the
   middle so the room is still visible — the whole point of the picture. */
.page::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom,
      rgba(13,21,38,.94) 0%,
      rgba(13,21,38,.72) 12%,
      rgba(13,21,38,.30) 24%,
      rgba(13,21,38,.58) 40%,
      rgba(13,21,38,.90) 50%,
      rgba(13,21,38,.93) 72%,
      rgba(13,21,38,.97) 100%);
}
@media (min-width:820px){
  .page::before{ background-image:url("room-desktop.jpg"); background-position:center 42%; }
  /* On a wide screen the headline falls across the bright slatted wall, where
     the cyan line measured 2.5:1 — under the 3:1 large-text floor. The phone
     crop puts it on darker material and passes at 3.5:1, so this deepens the
     middle of the scrim on wide viewports only, rather than darkening the
     photograph for everyone. Measured, not eyeballed. */
  .page::after{
    background:
      linear-gradient(to bottom,
        rgba(13,21,38,.94) 0%,
        rgba(13,21,38,.74) 12%,
        rgba(13,21,38,.42) 22%,
        rgba(13,21,38,.88) 38%,
        rgba(13,21,38,.96) 48%,
        rgba(13,21,38,.94) 72%,
        rgba(13,21,38,.97) 100%);
  }
}

.page > *{ position:relative; z-index:2 }

.wrap{ width:100%; max-width:960px; margin:0 auto; display:flex; flex-direction:column; flex:1 }

/* ── Lockup: mark + wordmark, spanning the top ─────────────────── */
.lockup{ display:flex; align-items:center; gap:clamp(10px,2.8vw,22px); }
.lockup svg{ width:clamp(58px,15.5vw,124px); height:auto; flex:none }
.wordmark{
  font-weight:700;
  font-size:clamp(40px,13.4vw,106px);
  letter-spacing:-.03em;
  line-height:1;
  white-space:nowrap;
}
/* H warm, C cool — heating and cooling, said in two letters.
   Approved 26 Aug; do not restyle. */
.wordmark .h{ color:var(--warm) }
.wordmark .c{ color:var(--cool) }
.lockup-text{ min-width:0 }
.descriptor{
  margin:clamp(2px,.6vw,6px) 0 0;
  color:var(--soft);
  font-size:clamp(11.5px,3.1vw,20px);
  font-weight:400;
  letter-spacing:.01em;
  white-space:nowrap;
}

/* ── The headline sits low, as it does on the poster ───────────── */
.body-block{ margin-top:auto; padding-top:clamp(36px,12vh,110px) }
h1{
  margin:0;
  font-weight:700;
  font-size:clamp(34px,10.4vw,72px);
  line-height:1.02;
  letter-spacing:-.032em;
  text-shadow:0 2px 18px rgba(13,21,38,.55);
}
h1 .second{ color:var(--warm); display:block }

.lede{
  margin:clamp(16px,3.4vw,24px) 0 0;
  max-width:34ch;
  color:var(--soft);
  font-size:clamp(15px,3.9vw,19px);
  line-height:1.5;
}
.services{
  margin:clamp(18px,4vw,28px) 0 0;
  color:var(--cool);
  font-weight:500;
  font-size:clamp(14px,3.6vw,18px);
  letter-spacing:.01em;
}
.services span{ color:var(--dim); padding:0 .45em }
.works{
  margin:clamp(7px,1.6vw,10px) 0 0;
  color:var(--soft);
  font-size:clamp(14px,3.6vw,17px);
}

/* Veteran line — stated once, quietly, and never dressed up. No badge and no
   insignia: regimental marks are MOD-controlled and need permission for
   commercial use, so this says it in words. */
.service{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.1em;
  margin:clamp(20px,4.4vw,30px) 0 0;
  color:var(--dim);
  font-size:clamp(11px,2.9vw,13px);
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.service .sep{ color:var(--warm); padding:0 .55em; letter-spacing:0 }
@media (max-width:559px){
  .service{ display:block; line-height:1.65; position:relative; padding-left:1.7em }
  .service .pip{ position:absolute; left:0; top:.36em; margin:0 }
  .service .sep{ display:none }
  .service .unit{ display:block }
}
.service .pip{
  width:9px; height:9px; margin-right:.85em; flex:none;
  border:1.5px solid var(--warm);
  transform:rotate(45deg);
}

hr{
  border:0; height:1px; background:var(--rule);
  margin:clamp(22px,5vw,34px) 0 clamp(18px,4vw,26px);
}

/* ── Contact. The number is the point of the whole page. ───────── */
.name{ color:var(--dim); font-weight:500; font-size:clamp(13px,3.4vw,16px); margin:0 }
.tel{
  display:inline-block;
  margin:.18em 0 .12em;
  color:var(--paper);
  text-decoration:none;
  font-weight:700;
  font-size:clamp(33px,9.6vw,56px);
  letter-spacing:-.02em;
  line-height:1.08;
  /* A phone number you tap with a thumb in a van doorway. */
  min-height:48px;
}
.tel:hover,.tel:focus-visible{ color:var(--cool) }
.mail{ display:inline-block; color:var(--cool); text-decoration:none; font-size:clamp(14px,3.8vw,18px); padding:6px 0; min-height:44px }
.mail:hover,.mail:focus-visible{ text-decoration:underline }
.area{ margin:.1em 0 0; color:var(--dim); font-size:clamp(13px,3.5vw,16px) }

a:focus-visible{ outline:2px solid var(--cool); outline-offset:3px; border-radius:3px }

@media (min-width:820px){
  .body-block{ max-width:760px }
  .lede{ font-size:19px }
}
@media (prefers-reduced-motion:no-preference){
  .lockup,.body-block{ animation:rise .7s cubic-bezier(.16,1,.3,1) both }
  .body-block{ animation-delay:.1s }
  @keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
}

/* ══════════════════════════════════════════════════════════════
   Beyond the holding page — added 28 Aug when the one-pager
   became a site. The hero styles above are unchanged; everything
   below is for the inner pages and the shared furniture.
   ══════════════════════════════════════════════════════════════ */

/* ── Site nav ─────────────────────────────────────────────────
   No hamburger. Four links fit on a phone if they're short, and a
   menu you have to open is a menu half the visitors never see. */
.nav{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:14px 0 0;
}
.nav-mark{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none }
.nav-mark svg{ width:34px; height:auto }
.nav-mark .wm{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:700; font-size:22px; letter-spacing:-.02em; color:var(--paper);
  white-space:nowrap;
}
.nav-mark .wm .h{ color:var(--warm) }
.nav-mark .wm .c{ color:var(--cool) }
.nav-links{ display:flex; gap:clamp(14px,4vw,28px); align-items:center; flex-wrap:wrap }
.nav-links a{
  color:var(--dim); text-decoration:none;
  font-size:clamp(13px,3.4vw,15px); font-weight:500;
  padding:6px 0; min-height:32px;
}
.nav-links a:hover,.nav-links a:focus-visible{ color:var(--paper) }
.nav-links a[aria-current="page"]{ color:var(--cool) }

/* ── Inner-page shell ─────────────────────────────────────────
   No photograph behind these — the picture earns its place on the
   home page and would fight the reading anywhere else. */
.sheet{
  background:var(--navy); color:var(--paper);
  min-height:100svh; display:flex; flex-direction:column;
}
.sheet .wrap{ padding-bottom:0 }
.pad{
  width:100%; max-width:960px; margin:0 auto;
  padding:0 max(20px,env(safe-area-inset-left));
}
main.page-body{ flex:1; padding:clamp(28px,7vw,64px) 0 clamp(40px,9vw,90px) }

h2.page-title{
  margin:0 0 clamp(14px,3vw,20px);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:700; font-size:clamp(30px,8vw,54px);
  line-height:1.04; letter-spacing:-.03em;
}
h2.page-title .accent{ color:var(--cool); display:block }
.standfirst{
  margin:0 0 clamp(26px,6vw,44px); max-width:46ch;
  color:var(--soft); font-size:clamp(16px,4.2vw,20px); line-height:1.55;
}
h3{
  margin:clamp(30px,7vw,52px) 0 clamp(10px,2vw,14px);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:700; font-size:clamp(19px,5vw,26px); letter-spacing:-.02em;
}
.prose{ max-width:62ch }
.prose p{ margin:0 0 1.05em; color:var(--soft); font-size:clamp(15px,4vw,17px); line-height:1.65 }
.prose strong{ color:var(--paper); font-weight:600 }
.prose a{ color:var(--cool) }
.prose ul{ margin:0 0 1.2em; padding-left:1.1em; color:var(--soft); font-size:clamp(15px,4vw,17px); line-height:1.65 }
.prose li{ margin-bottom:.5em }
.prose li::marker{ color:var(--warm) }

/* ── Cards: the three trades on the home page ─────────────────── */
.cards{ display:grid; gap:14px; margin:clamp(26px,6vw,40px) 0 0 }
@media (min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr) } }
.card{
  display:block; text-decoration:none;
  border:1px solid var(--rule); border-radius:14px;
  padding:clamp(18px,4vw,24px);
  background:rgba(255,255,255,.02);
  transition:border-color .18s, background .18s, transform .18s;
}
.card:hover,.card:focus-visible{
  border-color:color-mix(in oklab, var(--cool) 55%, transparent);
  background:rgba(255,255,255,.045);
  transform:translateY(-2px);
}
.card h4{
  margin:0 0 6px; color:var(--paper);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:700; font-size:clamp(17px,4.4vw,19px); letter-spacing:-.01em;
}
.card p{ margin:0; color:var(--dim); font-size:clamp(13.5px,3.6vw,15px); line-height:1.5 }
.card .more{ display:inline-block; margin-top:12px; color:var(--cool); font-size:13.5px; font-weight:500 }

/* ── The "ring me" strip, repeated at the foot of every page ──── */
.callstrip{
  margin:clamp(36px,8vw,64px) 0 0;
  border-top:1px solid var(--rule);
  padding-top:clamp(22px,5vw,32px);
}
.callstrip .lab{ color:var(--dim); font-size:13px; font-weight:500; margin:0 }
.callstrip .num{
  display:inline-block; margin:.15em 0 .1em;
  color:var(--paper); text-decoration:none;
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:700; font-size:clamp(30px,8.6vw,46px); letter-spacing:-.02em;
  min-height:48px;
}
.callstrip .num:hover,.callstrip .num:focus-visible{ color:var(--cool) }
.callstrip .sub{ margin:.2em 0 0; color:var(--dim); font-size:clamp(13px,3.5vw,15px) }
.callstrip .sub a{ color:var(--cool); text-decoration:none }
.callstrip .sub a:hover{ text-decoration:underline }

/* ── Site footer ─────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--rule);
  padding:clamp(22px,5vw,30px) 0 clamp(28px,6vw,40px);
  color:var(--dim); font-size:13px; line-height:1.7;
}
.foot .row{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:10px }
.foot a{ color:var(--dim); text-decoration:none }
.foot a:hover{ color:var(--paper) }
.foot .legal{ color:#7f92a8; font-size:12px; max-width:60ch }

/* ── Area list ───────────────────────────────────────────────── */
.areas{ display:flex; flex-wrap:wrap; gap:8px; margin:clamp(14px,3vw,20px) 0 0; padding:0; list-style:none }
.areas li{
  border:1px solid var(--rule); border-radius:999px;
  padding:6px 13px; color:var(--soft); font-size:13.5px;
}

/* ══════════════════════════════════════════════════════════════
   THE MILITARY LAYER — added 28 Aug at Nick's request.

   Researched from his own unit: 9 Parachute Squadron RE's
   last-pattern DZ flash is a midnight-blue DIAMOND. So the diamond
   is the device the site borrows — a shape, not a badge. Airborne
   maroon comes in as a third accent, used sparingly.

   WHAT THIS DELIBERATELY IS NOT: no Pegasus, no cap badge, no
   reproduction of the DZ flash itself, no camouflage, no stencil
   display face. Those are either MOD-controlled or fancy dress.
   The feel comes from STRUCTURE — plates, rules, stencilled
   labels, a shape used consistently — which is what actually reads
   as military, and survives being looked at for five years.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Airborne maroon. Third accent only — never a background, never
     more than a marker, or the page stops being a trade site. */
  --maroon:#7B2D42;
  --maroon-lift:#9A3A55;
}

/* ── The diamond ──────────────────────────────────────────────
   Used as the section marker and the list bullet. One shape,
   used consistently, is what makes a design feel deliberate. */
.dia{
  display:inline-block; width:8px; height:8px;
  border:1.5px solid var(--warm);
  transform:rotate(45deg);
  flex:none;
}
.dia.solid{ background:var(--cool); border-color:var(--cool) }
.dia.maroon{ border-color:var(--maroon-lift) }

/* Section eyebrow: stencilled label with the diamond, over a rule.
   This is the page's most military element and it's just type. */
.eyebrow{
  display:flex; align-items:center; gap:11px;
  margin:0 0 clamp(12px,2.6vw,18px);
  color:var(--dim);
  font-size:clamp(10.5px,2.8vw,12px);
  font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.eyebrow::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(to right, var(--rule), transparent);
}

/* Diamond bullets instead of discs. */
.prose ul.dia-list{ list-style:none; padding-left:0 }
.prose ul.dia-list li{
  position:relative; padding-left:1.6em; margin-bottom:.6em;
}
.prose ul.dia-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px;
  border:1.5px solid var(--warm); transform:rotate(45deg);
}

/* ── The plate ────────────────────────────────────────────────
   A bordered block with a stencilled header — the "stencilled onto
   a flight case" idea, done with type and a rule rather than a
   texture. Used for the things worth setting apart. */
.plate{
  border:1px solid var(--rule);
  border-left:3px solid var(--maroon-lift);
  border-radius:4px;
  padding:clamp(16px,4vw,22px);
  margin:clamp(24px,5vw,34px) 0;
  background:rgba(255,255,255,.02);
}
.plate .plate-head{
  display:flex; align-items:center; gap:10px;
  margin:0 0 10px;
  color:var(--soft);
  font-size:clamp(10.5px,2.8vw,12px);
  font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.plate p:last-child{ margin-bottom:0 }

/* Square corners on the cards — a rounded rectangle is a consumer
   app, a square-ish one is equipment. Kept slightly soft so it
   doesn't look like a table. */
.card{ border-radius:4px }
.card::before{
  content:""; display:block; width:9px; height:9px;
  border:1.5px solid var(--cool); transform:rotate(45deg);
  margin:0 0 14px 2px;
}

/* Nav gets a hairline under it — a rule across the page reads as
   structure, and structure is the whole trick. */
.nav{ border-bottom:1px solid var(--rule); padding-bottom:12px }