/* Comfort Zone And Mechanical - art direction only. kit.css is linked BEFORE this file.

   THE IDEA: a diagnostic desk with a big voice. Display type straight on the dimmed
   condenser-fan clip (H14, measured), a numbers rail as the hero's floor, and a symptom
   desk the visitor operates. Three hues from their logo: navy, light blue, red. The red is
   a full band once (financing) and the call button everywhere.

   GROUNDS alternate navy / light / navy / light / navy / red / light / navy.

   ACCENTS (RULES #2), measured:
     light blue #5DB8EA on navy #0E1B4D   7.1:1   (kickers, numbers, second line of the h1)
     red-ink    #B5151C on light #F4F6FA  6.1:1   (kickers on light)
     white      on red  #E3242B           5.0:1   (the band, the button)
     navy       #0E1B4D on white          15:1    (button on the red band) */

:root {
  --navy:    #0E1B4D;
  --navy-2:  #14265F;
  --navy-3:  #1C3278;
  --light:   #F4F6FA;
  --white:   #FFFFFF;
  --sky:     #5DB8EA;
  --red:     #E3242B;
  --red-ink: #B5151C;

  --on-dark:       #FFFFFF;
  --on-dark-soft:  #C3CCE3;   /* 10.6:1 on navy */
  --on-light:      #0B1330;
  --on-light-soft: #46506B;   /* 7.5:1 on light */

  /* kit token contract */
  --ground: var(--light);
  --ink: var(--on-light);
  --dim: var(--on-light-soft);
  --accent: var(--red);
  --accent-ink: var(--white);
  --line: rgba(14, 27, 77, .16);
  --panel: var(--navy);

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1440px;
  --r: 18px;

  --disp: "Sora", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-h1:   clamp(46px, 8.6vw, 132px);
  --t-h2:   clamp(34px, 4.4vw, 64px);
  --t-h3:   clamp(20px, 1.2vw + 14px, 27px);
  --t-body: clamp(16px, .3vw + 15px, 18px);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

html { background: var(--navy); scroll-padding-top: 80px; }
body { background: var(--light); color: var(--on-light); font-family: var(--body);
       font-size: var(--t-body); line-height: 1.55; }
.wrap { width: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto; padding-inline: 0; }

/* ---- type ---------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--disp); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); max-width: 22ch; }
h1.ph { font-size: var(--t-h2); max-width: 22ch; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.kick { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
        color: var(--red-ink); margin-bottom: 14px; }
.band--dark .kick { color: var(--sky); }
.lede { font-size: clamp(17px, .6vw + 15px, 21px); line-height: 1.5; letter-spacing: -.012em; }
p { letter-spacing: -.008em; }

/* ---- grounds ------------------------------------------------------------- */
section { padding-block: clamp(56px, 7vw, 112px); }
.band--dark  { background: var(--navy);  color: var(--on-dark); }
.band--dark p, .band--dark .lede, .band--dark li { color: var(--on-dark-soft); }
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--on-dark); }
.band--light { background: var(--light); color: var(--on-light); }
.band--light p, .band--light .lede { color: var(--on-light-soft); }
.band--light h1, .band--light h2, .band--light h3 { color: var(--on-light); }
.band--red { background: var(--red); color: var(--white); }
.band--red p, .band--red h2 { color: var(--white); }
.band--red .kick { color: var(--white); opacity: .85; }

.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(28px, 3vw, 48px); }
.sec__head h2 { margin: 0; }
.sec__note { max-width: 380px; margin: 0; font-size: 16px; line-height: 1.55; }
@media (max-width: 760px) { .sec__head { display: block; } .sec__note { margin-top: 18px; max-width: none; } }

/* ---- buttons --------------------------------------------------------------- */
.btn { padding: 0 24px; border-radius: 12px; font-weight: 700; min-height: 50px; text-decoration: none;
       transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease); }
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: #C41C22; transform: translateY(-2px); }
.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--light); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }

/* ---- header ---------------------------------------------------------------- */
/* 2026-09-24 - Will: "make his header bar more transparent". Translucent navy with the page
   blurred behind it, and the hero rides up underneath so the clip shows through on the front
   page. The phone sheet keeps its solid navy (kit: a real colour, never only a blur). */
/* 2026-09-24, kept through the revert (Will: "leave the top banner, the header, transparent
   as it is"): a barely-there navy glass over the clip, the wordmark in its white-ink cut so it
   reads on footage, white nav, the phone a red pill. Near-solid navy once the page scrolls,
   or at once on a page with no hero. */
.hdr { background: rgba(14,27,77,.22); color: var(--on-dark); border-bottom: 1px solid rgba(255,255,255,.10);
       -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
       transition: background-color .25s var(--ease); }
.hdr.is-solid { background: rgba(14,27,77,.96); }
.hdr__in { min-height: 72px; gap: 18px; }
.mark { color: inherit; gap: 12px; }
.mark__img { display: block; width: auto; height: 50px; }
.nav { gap: 28px; }
.nav a { color: var(--on-dark); font-weight: 600; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--sky); }
.hdr__tel { min-height: 44px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
@media (max-width: 859px) { .hdr__tel { display: none; } }
.hdr .burger { border-color: rgba(255,255,255,.3); }
.hdr .burger span { background: var(--white); }
.sheet { inset: 72px 0 auto 0; background-color: var(--navy); border-bottom: 1px solid rgba(255,255,255,.14); }
.sheet a { color: var(--on-dark); border-bottom-color: rgba(255,255,255,.14); font-family: var(--disp); font-weight: 700; }
@media (max-width: 640px) { .mark__img { height: 40px; } }
/* numbered eyebrows (CMY / Dimmer Days), the number a shade lighter than the label */
.kick__n { font-family: var(--disp); font-weight: 700; opacity: .55; margin-right: .35em; letter-spacing: .04em; }

/* ---- hero: display type on the dimmed clip (H14), rail as the floor -------- */
.hero { padding: 0; display: grid; grid-template-rows: 1fr auto; min-height: 100svh; margin-top: -72px; }
/* the kit widens .hero > .wrap to 100%: give it the gutter back, centred to --maxw */
.hero > .wrap, .hero__railb > .wrap { width: 100%; max-width: none;
  padding-inline: max(var(--gut), calc((100% - var(--maxw)) / 2)); }
/* 2026-09-23 sweep - Will: "I don't like the blue tint that's over the hero video. I want to
   remove tint, and going forward don't use any tint over video." No colour overlay on the
   clip: `.hero__scrim` is switched off below and every bit of legibility comes from the
   video's OWN exposure (a filter on the <video> itself, not a layer painted on top of it) -
   darkened further to replace what the gradient used to carry - plus a plain black text-
   shadow on the glyphs, which shades the letters, not the footage. Measured against the
   audit, same as any other hero: RULES #3b's floor, just with the darkening done in the
   video's own filter instead of a scrim. */
.hero--vid > .hero__bg > video, .hero--vid > .hero__bg > img { filter: brightness(.4) contrast(1.08) saturate(.65); transform: scale(1.03); }
.hero--vid > .hero__scrim { background: none; }
.hero__in { padding-top: calc(72px + clamp(64px, 9vh, 120px)); padding-bottom: clamp(36px, 5vh, 64px); display: flex; flex-direction: column; justify-content: flex-end; }
.hero__kick { color: var(--sky); margin-bottom: 22px; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.hero h1 { text-transform: uppercase; color: var(--white); letter-spacing: -.04em; line-height: 1.06; max-width: none;
           font-size: clamp(44px, 7vw, 106px); margin-bottom: clamp(22px, 2.6vw, 36px);
           text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.7); }
.hero h1 span, .hero h1 em { display: block; font-style: normal; }
.hero h1 em { color: var(--sky); }
.hero h1 span, .hero h1 em { animation: riseIn 1s var(--ease) both; }
.hero h1 em { animation-delay: .14s; }
@keyframes riseIn { from { transform: translateY(40px); opacity: 0; clip-path: inset(100% 0 0); }
                    to { transform: none; opacity: 1; clip-path: inset(0); } }
/* the dek and the button sit on a solid navy card: body-size type never on footage (RULES #3b) */
.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hero__copy { background: var(--navy); padding: 26px 28px; border-radius: var(--r); max-width: 560px;
              border-left: 4px solid var(--sky); animation: riseIn .9s var(--ease) .28s both; }
.hero__copy .lede { color: var(--on-dark-soft); margin: 0 0 20px; }
.hero__cta { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 24px; min-height: 0; line-height: 1.15; }
.hero__cta strong { font-size: 16px; }
.hero__cta small { font-size: 12px; font-weight: 600; opacity: .85; }
.hero__side { color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
              text-align: right; line-height: 1.9; margin: 0 0 8px; background: var(--navy); padding: 10px 14px; border-radius: 10px; }
.hero > .wrap:last-child { position: relative; z-index: 2; }
.hero__railb { position: relative; z-index: 2; background: var(--navy); }
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0;
        border-top: 1px solid rgba(93,184,234,.35); padding: 22px 0 26px; }
.rail__i { display: grid; gap: 6px; align-content: start; }
.rail b { font-family: var(--disp); font-weight: 800; font-size: clamp(26px, 2.3vw, 36px); letter-spacing: -.03em; color: var(--white); line-height: 1; }
.rail span { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); }
@media (max-width: 860px) { .rail { grid-template-columns: 1fr 1fr; gap: 16px 20px; } }
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(44px, 12.5vw, 76px); max-width: none; }
  .hero__foot { display: block; }
  .hero__side { display: none; }
  .hero__copy { padding: 20px; }
  .hero__in { padding-top: calc(72px + 40px); }
}

/* ---- the symptom desk (signature) -------------------------------------------
   2026-09-23 sweep - Will: "those pictures will take up the whole half of the screen, and
   then the What is it doing side ... can take up half the screen so it can be split evenly
   so it's not staggered." An even 1fr/1fr grid: the photo on the left fills the row's full
   height; the chips, the moved intro line and the panel stack on the right. */
.desk__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.desk__photo { margin: 0; }
.desk__photo .shape { height: 100%; aspect-ratio: auto; min-height: 420px; }
.desk__side { display: flex; flex-direction: column; }
.desk__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font: inherit; font-weight: 600; font-size: 15px; padding: 12px 18px; min-height: 46px; border-radius: 999px;
        border: 1.5px solid rgba(14,27,77,.28); background: var(--white); color: var(--navy); cursor: pointer;
        transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.chip:hover { border-color: var(--navy); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.desk__intro { margin: 18px 0 0; color: var(--on-light-soft); max-width: 52ch; }
.desk__panels { margin-top: 20px; flex: 1; }
.desk__panel { background: var(--white); border-radius: var(--r); padding: clamp(22px, 2.4vw, 36px); height: 100%;
               box-shadow: 0 20px 60px rgba(14,27,77,.10); border-top: 4px solid var(--red); }
.desk__panel.is-swap { animation: swapIn .45s var(--ease); }
@keyframes swapIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.desk__chip { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); margin: 0 0 10px; }
.desk__panel h3 { font-size: clamp(22px, 1.6vw + 12px, 30px); margin-bottom: 18px; }
.desk__lab { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-light-soft); margin: 0 0 8px; }
.desk__list { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 8px; }
.desk__list li { counter-increment: c; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline;
                 padding: 8px 0; border-top: 1px solid var(--line); color: var(--on-light); font-weight: 500; }
.desk__list li::before { content: counter(c, decimal-leading-zero); font-family: var(--disp); font-weight: 800; color: var(--sky); font-size: 14px; }
.desk__usually { margin: 0 0 20px; color: var(--on-light-soft); }
.desk__usually strong { color: var(--on-light); }
@media (max-width: 960px) {
  .desk__grid { grid-template-columns: 1fr; }
  .desk__photo { order: 2; }
  .desk__side { order: 1; }
  .desk__photo .shape { min-height: 0; aspect-ratio: 16 / 10; }
  .chip { font-size: 14px; padding: 10px 14px; min-height: 42px; }
}

/* ---- services ---------------------------------------------------------------- */
.svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); }
.svc { border-radius: var(--r); }
.svc .shape { margin-bottom: 18px; }
.svc__t { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: 12px; margin-bottom: 12px; }
.svc__n { font-family: var(--disp); font-weight: 800; color: var(--sky); font-size: 14px; letter-spacing: .06em; }
.svc h3 { margin: 0; }
.svc p { margin: 0; font-size: 16px; }
.svc__brands { margin: clamp(28px, 3vw, 44px) 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16);
               font-family: var(--disp); font-weight: 700; font-size: clamp(17px, 1.3vw, 22px); letter-spacing: -.01em; color: var(--white) !important; }
@media (max-width: 960px) { .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc__grid { grid-template-columns: 1fr; } }

/* ---- recent work: their job photographs, biggest first (2026-09-24 sweep) ---------- */
.work__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.work__i .shape { margin: 0; border-radius: var(--r); }
.work__i--wide { grid-column: span 2; }
.work__i--wide .shape { height: 100%; aspect-ratio: 8 / 5; }
@media (max-width: 860px) { .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- proof: the loop ------------------------------------------------------------ */
.proof { padding-bottom: clamp(56px, 7vw, 112px); }
.loop { margin-top: 8px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.loop__track { display: flex; gap: 20px; width: max-content; padding-inline: 20px; animation: loopX 52s linear infinite; }
.loop.is-paused .loop__track { animation-play-state: paused; }
@keyframes loopX { to { transform: translateX(-50%); } }
.qcard { margin: 0; width: clamp(300px, 32vw, 460px); background: var(--white); border-radius: var(--r); padding: 28px 30px;
         display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(14,27,77,.06); }
.qcard blockquote { margin: 0 0 22px; }
.qcard blockquote p { font-family: var(--disp); font-weight: 500; font-size: clamp(17px, 1.05vw + 8px, 22px); line-height: 1.3;
                      letter-spacing: -.015em; color: var(--on-light) !important; margin: 0; }
.qcard cite { margin-top: auto; font-style: normal; font-weight: 700; color: var(--navy); display: grid; gap: 2px; }
.qcard cite small { font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); }
@media (prefers-reduced-motion: reduce) { .loop__track { animation: none; flex-wrap: wrap; width: auto; } .loop { mask-image: none; } }

/* ---- about ------------------------------------------------------------------- */
/* 2026-09-23 sweep: one main picture, not two ("I don't like these pictures ... I'm going to
   get a picture of him"). */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.about__pic .shape { min-height: 360px; }
.about__body { font-size: clamp(17px, .6vw + 15px, 20px); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; }
.fact { display: grid; gap: 4px; }
.fact b { font-family: var(--disp); font-weight: 800; font-size: clamp(22px, 1.8vw, 30px); color: var(--sky); letter-spacing: -.02em; line-height: 1; }
.fact span { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); }
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .fact span { font-size: 11px; } }

/* ---- financing band ------------------------------------------------------------ */
.fin { padding-block: clamp(44px, 5.5vw, 84px); }
.fin__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.fin h2 { color: var(--white); margin-bottom: 12px; }
.fin p { max-width: 60ch; margin: 0; }
.fin .btn { flex: none; }
@media (max-width: 760px) { .fin__in { display: block; } .fin .btn { margin-top: 22px; } }

/* ---- area ------------------------------------------------------------------------ */
.area__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.towns { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.towns li { padding: 8px 14px; border-radius: 999px; border: 1.5px solid rgba(14,27,77,.24); font-weight: 600; font-size: 14px; color: var(--navy); }
.towns li.is-src { background: var(--navy); color: var(--white); border-color: var(--navy); }
@media (max-width: 860px) { .area__grid { grid-template-columns: 1fr; } }

/* ---- contact ---------------------------------------------------------------------- */
.where__grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .where__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
                            .where__grid--page { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 64px); } }
.contact__tel { font-family: var(--disp); font-weight: 800; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.03em; color: var(--sky); text-decoration: none; display: inline-block; margin-bottom: 14px; }
/* the contact page's card: the wordmark on white, then the number, the hours (RULES #7: the
   card names its own colours, it is a light surface inside a navy band) */
.contact__card { background: var(--white); color: var(--on-light); border-radius: var(--r); padding: clamp(24px, 3vw, 40px);
                 border-top: 4px solid var(--red); }
.contact__card p, .contact__card dd { color: var(--on-light-soft); }
.contact__card .hours { border-top-color: var(--line); }
.contact__card .hours dt { color: var(--on-light); }
.contact__logo { display: block; margin-bottom: 26px; }
.contact__img { display: block; width: min(100%, 360px); height: auto; }
.contact__card .contact__tel { color: var(--navy); margin-bottom: 2px; }
.contact__ct { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 18px 0 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 16px; }
.hours dt { font-weight: 700; color: var(--white); }
.hours dd { margin: 0; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-soft); }
.form input, .form textarea { font: inherit; font-size: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
                              background: var(--white); color: var(--on-light); letter-spacing: 0; text-transform: none; }
.form input:focus, .form textarea:focus { outline: 3px solid var(--sky); outline-offset: 2px; }
.form [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.form__ok { display: none; padding: 16px; border-radius: 12px; background: var(--sky); color: var(--navy) !important; font-weight: 600; }
.form.is-sent .form__ok { display: block; }
.form.is-sent button { display: none; }
.form__note { font-size: 14px; }

/* ---- strip (services page) ---------------------------------------------------------- */
.strip { padding-block: clamp(32px, 4vw, 56px); }
.strip__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .strip__i:nth-child(n+4) { display: none; } }

/* ---- footer ------------------------------------------------------------------------ */
/* four columns (CMY): brand, call, where, pages; the credit on its own line under a rule */
.foot { background: var(--navy-2); padding: 56px 0 120px; font-size: 15px; }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot__logo { display: block; margin: 0 0 16px; }
.foot__img { display: block; width: auto; height: 52px; }
.foot__blurb { max-width: 40ch; }
.foot__col p { margin: 0 0 6px; }
.foot__lab { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky) !important; margin-bottom: 10px !important; }
.foot a { color: var(--white); font-weight: 600; }
.foot__tel { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -.02em; text-decoration: none; }
.foot__pages a { display: block; margin-bottom: 6px; text-decoration: none; }
.foot__credit { opacity: .7; margin: 36px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; max-width: none; }
@media (max-width: 860px) { .foot__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__in { grid-template-columns: 1fr; } }
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px var(--gut); background: rgba(14,27,77,.96); display: none; }
.callbar .btn { width: 100%; }
@media (max-width: 640px) { .callbar { display: block; } }

/* ===== the search layer: inner pages (2026-10-26) =================================================
   Same tokens, same grounds: navy page head, light article, navy questions, light links, navy contact.
   Nothing here paints over a photograph; the page head carries no media. */
.pghead { padding-block: calc(72px + clamp(20px, 3vw, 40px)) clamp(32px, 4vw, 56px); }
.pghead__in > * { max-width: 62rem; }
.pghead .lede { margin: 0 0 26px; font-size: clamp(18px, .7vw + 15px, 22px); }
.pghead__act { display: flex; flex-wrap: wrap; gap: 12px; }
.pghead .kick { margin-bottom: 12px; }
.crumbs { margin: 0 0 22px; font-size: 13px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li { color: var(--on-dark-soft); }
.crumbs li + li::before { content: "/"; margin: 0 9px; opacity: .55; }
.crumbs a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--white); font-weight: 600; }

.prose__grid { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .prose__grid { grid-template-columns: minmax(0, 1fr) 340px; } .prose__aside { position: sticky; top: 96px; } }
.prose__main { max-width: 46rem; }
.prose__main h2 { font-size: clamp(26px, 2.4vw + 10px, 38px); max-width: none; margin: 46px 0 14px; }
.prose__main h2:first-child { margin-top: 0; }
.prose__main p { margin: 0 0 16px; font-size: var(--t-body); line-height: 1.65; color: var(--on-light-soft); }
.prose__main a { color: var(--red-ink); font-weight: 600; text-underline-offset: 3px; }
.prose__src { font-size: 13px !important; margin-top: 34px !important; }
.ticks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding: 0 0 0 28px; color: var(--on-light); line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.linklist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.linklist a { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(14,27,77,.24); color: var(--navy); font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color .18s var(--ease), color .18s var(--ease); }
.linklist a:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.prose__cta { margin-top: 26px !important; }
.aq { margin: 0 0 18px; padding: 20px 22px; background: var(--white); border-left: 4px solid var(--red); border-radius: 12px; }
.aq p { margin: 0 0 8px !important; color: var(--on-light) !important; }
.aq cite { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); }

.prose__aside { display: grid; gap: 18px; }
.acard { background: var(--white); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.acard--pic { padding: 0; }
.acard--call { padding: 24px; border-top: 4px solid var(--red); }
.acard--call p { margin: 0 0 8px; color: var(--on-light-soft); }
.acard--call .contact__tel { color: var(--navy); font-size: clamp(28px, 2.2vw, 36px); margin-bottom: 6px; }
.acard__btns { display: grid; gap: 10px; margin-top: 16px; }
.acard__btns .btn { display: flex; justify-content: center; align-items: center; }
.acard__btns .btn--ghost { color: var(--navy); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 34px; }
.stats div { background: var(--white); border-radius: 14px; padding: 18px 20px; border: 1px solid var(--line); }
.stats dt { font-family: var(--disp); font-weight: 800; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.03em; color: var(--navy); line-height: 1; margin: 0 0 6px; }
.stats dd { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-light-soft); }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lcards { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.lcards a { display: grid; gap: 6px; height: 100%; padding: 20px 22px; background: var(--white); border-radius: 14px; border: 1px solid var(--line); text-decoration: none; transition: transform .18s var(--ease), border-color .18s var(--ease); }
.lcards a:hover { transform: translateY(-2px); border-color: var(--navy); }
.lcards b { font-family: var(--disp); font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--navy); line-height: 1.2; }
.lcards span { font-size: 15px; line-height: 1.45; color: var(--on-light-soft); }
.svcindex .lcards { margin-top: 0; }

.faq__list { display: grid; gap: 10px; max-width: 52rem; }
.faq__i { border-radius: 14px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.12); }
.faq__i summary { cursor: pointer; padding: 18px 22px; font-family: var(--disp); font-weight: 700; font-size: clamp(17px, .5vw + 15px, 20px); color: var(--white); letter-spacing: -.01em; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: "+"; flex: none; font-size: 26px; line-height: 1; color: var(--sky); transition: transform .18s var(--ease); }
.faq__i[open] summary::after { transform: rotate(45deg); }
.faq__i summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 14px; }
.faq__i p { margin: 0; padding: 0 22px 20px; color: var(--on-dark-soft); max-width: 60ch; }
.faq .sec__note a { color: var(--sky); font-weight: 600; }

.svc__t h3 a { color: inherit; text-decoration: none; }
.svc__t h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.desk__act { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 4px; }
.desk__more { color: var(--red-ink); font-weight: 700; text-underline-offset: 3px; }
.foot__brand .foot__lab--call { margin-top: 22px; }
.foot__small { margin-top: 10px !important; font-size: 13px; opacity: .75; }
.foot__in { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .foot__in { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot__in { grid-template-columns: 1fr; } }

.proof__more { margin: 22px 0 0; font-weight: 700; }
.proof__more a { color: var(--red-ink); text-underline-offset: 3px; }


/* ===== intro loader (kit/loader.py, RULES #26) ===== */
#intro {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: #0E1B4D;
  overflow: hidden;
  --ld-ease: cubic-bezier(.2,.7,.3,1);
}
#intro[hidden] { display: none !important; }
#intro .intro__stage { position: absolute; inset: 0; }
/* the page is built underneath; this only stops it scrolling behind the cover */
html[data-intro="1"], html[data-intro="1"] body { overflow: hidden !important; }
/* never animate, never cover: reduced motion, screenshots, no-JS */
@media (prefers-reduced-motion: reduce) { #intro { display: none !important; } }
html[data-shot="1"] #intro, html.shot-mode #intro { display: none !important; }
html.no-js #intro { display: none !important; }
#intro { background: #0E1B4D; }
#intro .mow__brand, #intro .ld__brand {
  position: relative; z-index: 4; text-align: center;
  padding-inline: clamp(20px, 5vw, 40px); pointer-events: none;
}
#intro .ld__mark {
  display: block; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(26px, 6.2vw, 62px); line-height: 1.02;
  opacity: 0; animation: ldMark .62s var(--ld-ease) .22s forwards;
}
#intro .ld__line {
  display: block; margin-top: .5em;
  font-size: clamp(13px, 2.1vw, 18px); letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; animation: ldMark .62s var(--ld-ease) .44s forwards;
}
@keyframes ldMark { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.intro__out { animation: introOut 620ms var(--ld-ease) forwards; }

/* ---- chill: the fan blows cold air both ways, then the screen freezes ---- */
#intro { background: #0E1B4D; }
#intro .ch__room { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(70% 60% at 50% 50%, color-mix(in srgb, #0E1B4D 70%, #000 0%) 0%, #0E1B4D 100%); }
/* the cold wash: the room's colour changes behind the air, spreading out from the fan */
/* soft-edged and scaled out from the fan, so the edge of the cold is a gradient that grows,
   never a hard rectangle (the first cut clipped a solid and showed two vertical seams) */
#intro .ch__cold { position: absolute; inset: 0 -20%; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #173B6B 22%, #173B6B 78%, rgba(0,0,0,0) 100%);
  transform: scaleX(.04); animation: chCold 1508ms cubic-bezier(.4,0,.2,1) 290ms forwards; }
@keyframes chCold { to { transform: scaleX(1.15); } }

/* THE FAN: spins up, runs, then stops dead when the frost lands */
#intro .ch__fan { position: absolute; z-index: 4; left: 50%; top: 50%;
  width: clamp(170px, 27vw, 340px); height: clamp(170px, 27vw, 340px);
  margin: calc(clamp(170px, 27vw, 340px) / -2) 0 0 calc(clamp(170px, 27vw, 340px) / -2);
  filter: drop-shadow(0 0 28px rgba(140,200,255,.35)); }
#intro .ch__blades { transform-origin: 0 0; animation: chSpin 2900ms linear forwards; }
@keyframes chSpin {
  0%   { transform: rotate(0); animation-timing-function: cubic-bezier(.5,0,.9,.4); }
  14%  { transform: rotate(160deg); animation-timing-function: linear; }
  62%  { transform: rotate(1560deg); animation-timing-function: cubic-bezier(.1,.6,.2,1); }
  70%  { transform: rotate(1640deg); }
  100% { transform: rotate(1640deg); }
}
#intro .ch__hub { fill: #5DB8EA; animation: chHub 2900ms linear forwards; }
@keyframes chHub { 0% { fill: #5DB8EA; } 62% { fill: #5DB8EA; } 76% { fill: #EAF6FF; } 100% { fill: #EAF6FF; } }

/* THE AIR: each stream grows out of the fan to the edge, then goes as the freeze lands.
   Right-going streams anchor at the hub and scale rightward; the mirrors scale leftward. */
#intro .ch__airs { position: absolute; inset: 0; z-index: 3; filter: url(#chAirF); }
#intro .ch__air { position: absolute; top: var(--top); height: var(--th); width: var(--ln);
  border-radius: 99px; opacity: 0; transform: rotate(var(--tilt)) scaleX(0);
  /* dense where it leaves the fan, thinning to nothing at the edge of the screen */
  background: linear-gradient(90deg, rgba(200,234,255,0) 0%, rgba(225,243,255,.85) 6%, rgba(240,250,255,.9) 30%, rgba(215,240,255,.5) 70%, rgba(200,232,255,0) 100%);
  filter: blur(4px);
  animation: chBlow 1798ms cubic-bezier(.3,0,.25,1) var(--dl) forwards; }
#intro .ch__air--r { left: 50%; transform-origin: 0 50%; }
#intro .ch__air--l { right: 50%; transform-origin: 100% 50%;
  background: linear-gradient(270deg, rgba(200,234,255,0) 0%, rgba(225,243,255,.85) 6%, rgba(240,250,255,.9) 30%, rgba(215,240,255,.5) 70%, rgba(200,232,255,0) 100%); }
@keyframes chBlow {
  0%   { opacity: 0;   transform: rotate(var(--tilt)) scaleX(0); }
  10%  { opacity: .85; }
  62%  { opacity: .85; transform: rotate(var(--tilt)) scaleX(1); }
  84%  { opacity: .5;  transform: rotate(var(--tilt)) scaleX(1); }
  100% { opacity: 0;   transform: rotate(var(--tilt)) scaleX(1); }
}
/* vapour: soft puffs that ride out with the air and thin as they go */
#intro .ch__puff { position: absolute; z-index: 2; top: var(--top); width: var(--sz); height: calc(var(--sz) * .55);
  border-radius: 50%; background: rgba(215,240,255,.55); filter: blur(14px); opacity: 0;
  animation: chPuff 1798ms cubic-bezier(.2,.3,.3,1) var(--dl) forwards; }
#intro .ch__puff--r { left: 50%; --dir: 1; } #intro .ch__puff--l { right: 50%; --dir: -1; }
@keyframes chPuff {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.4); }
  16%  { opacity: .9; }
  100% { opacity: 0;  transform: translate(calc(var(--far) * var(--dir)), -34px) scale(1.7); }
}
/* flakes: small, bright, in the stream; they wobble a little on the way */
#intro .ch__flake { position: absolute; z-index: 5; top: var(--top); width: var(--sz); height: var(--sz);
  border-radius: 50%; background: #F2FAFF; box-shadow: 0 0 8px rgba(200,235,255,.9); opacity: 0;
  animation: chFlake 1450ms cubic-bezier(.25,0,.3,1) var(--dl) forwards; }
#intro .ch__flake--r { left: 50%; --dir: 1; } #intro .ch__flake--l { right: 50%; --dir: -1; }
@keyframes chFlake {
  0%   { opacity: 0; transform: translate(0, 0); }
  12%  { opacity: 1; }
  50%  { transform: translate(calc(var(--far) * var(--dir) * .5), calc(var(--dy) * .6)); }
  100% { opacity: 0; transform: translate(calc(var(--far) * var(--dir)), var(--dy)); }
}

/* THE FREEZE. Frost grows in from every edge; the crystalline margin is an SVG turbulence
   displacement on the gradient, so the edge is jagged like real frost and not a vignette. */
#intro .ch__frost { position: absolute; inset: -6%; z-index: 6; opacity: 0;
  background:
    radial-gradient(48% 42% at 0% 0%,     rgba(236,247,255,.98) 0%, rgba(236,247,255,0) 72%),
    radial-gradient(48% 42% at 100% 0%,   rgba(236,247,255,.98) 0%, rgba(236,247,255,0) 72%),
    radial-gradient(48% 42% at 0% 100%,   rgba(236,247,255,.98) 0%, rgba(236,247,255,0) 72%),
    radial-gradient(48% 42% at 100% 100%, rgba(236,247,255,.98) 0%, rgba(236,247,255,0) 72%),
    linear-gradient(180deg, rgba(225,241,252,.75) 0%, rgba(225,241,252,0) 20%, rgba(225,241,252,0) 80%, rgba(225,241,252,.75) 100%),
    linear-gradient(90deg,  rgba(225,241,252,.8) 0%, rgba(225,241,252,0) 16%, rgba(225,241,252,0) 84%, rgba(225,241,252,.8) 100%);
  filter: url(#chFrostF);
  transform: scale(1.08);
  animation: chFreeze 1044ms cubic-bezier(.2,.6,.2,1) 1856ms forwards; }
@keyframes chFreeze { to { opacity: 1; transform: scale(1); } }
/* the fog on the glass, and the ice grain over everything */
#intro .ch__fog { position: absolute; inset: 0; z-index: 5; opacity: 0;
  -webkit-backdrop-filter: blur(5px) brightness(1.08); backdrop-filter: blur(5px) brightness(1.08);
  background: rgba(200,228,248,.16);
  animation: chFog 1044ms ease-out 1856ms forwards; }
@keyframes chFog { to { opacity: 1; } }
#intro .ch__ice { position: absolute; inset: 0; z-index: 7; opacity: 0; pointer-events: none;
  filter: url(#chIceF); mix-blend-mode: screen;
  animation: chIce 1044ms ease-out 2029ms forwards; }
@keyframes chIce { to { opacity: .28; } }

/* the wordmark is IN the ice: it cannot show until the freeze has landed */
#intro .ld__brand { z-index: 8; transform: translateY(clamp(150px, 24vw, 300px)); }
#intro .ld__mark, #intro .ld__line { color: #FFFFFF; text-shadow: 0 0 22px rgba(120,190,255,.65), 0 1px 2px rgba(0,0,0,.4); }
#intro .ld__mark { animation-delay: 2146ms; }
#intro .ld__line { animation-delay: 2436ms; }
/* on a phone the wordmark wraps to two lines, so it sits on the floor of the screen instead of
   under the fan (measured at 375: translateY(34vw) put it across the lower blades) */
@media (max-width: 640px) {
  #intro .ch__fan { width: 46vw; height: 46vw; margin: -23vw 0 0 -23vw; }
  #intro .ld__brand { transform: none; align-self: end; margin-bottom: 12vh; }
}