/* ============================================================
   1. TOKENS
   Light and dark differ ONLY in color values.
   Same DOM, same layout, nothing hidden in either mode.
   ============================================================ */
:root {
  --navy:#0B2244; --steel:#597A99; --mist:#BCC8D6; --white:#FFFFFF;
  --mist-25:#EEF1F5; --mist-55:#DAE1E8;
  --navy-40:#3A5777; --navy-70:#223C5E; --navy-85:#172F51; --navy-90:#132B4C;

  color-scheme: light;
  --bg:var(--white); --bg-alt:var(--mist-25); --surface:var(--mist-25);
  --ink:var(--navy); --ink-muted:var(--navy-40);
  --line:#9FB0C4; --line-strong:var(--steel); --accent:var(--steel); --accent-ink:var(--navy-40);
  --chart-line:var(--navy); --chart-band:var(--mist-55); --chart-soft:var(--steel);
  --btn-bg:var(--navy); --btn-ink:var(--white); --btn2-line:var(--navy);
  --badge-bg:var(--navy); --badge-ink:var(--white); --focus:var(--steel);
  --hero-veil-a:rgba(255,255,255,1); --hero-veil-b:rgba(255,255,255,.52);
  --hero-veil-c:rgba(255,255,255,0);
  --band-bg:var(--navy); --band-ink:var(--white); --band-muted:var(--mist); --band-line:var(--navy-40);
  --photo-filter:grayscale(.28) contrast(1.05) brightness(1);
  --photo-cast-a:.06;

  --font-display:"Oswald","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --font-body:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* type scale */
  --t0:10.5px; --t1:12px; --t2:13.5px; --t3:15px; --t4:17px;
  --t5:clamp(18px,1.6vw,21px); --t6:clamp(22px,2.4vw,28px);
  --t7:clamp(28px,4vw,46px); --t8:clamp(38px,6.6vw,80px);
  /* spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --gutter:20px; --maxw:1180px; --radius:4px; --header-h:60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:var(--navy); --bg-alt:#122B50; --surface:#16325C;
    --ink:var(--white); --ink-muted:var(--mist);
    --line:#4A688A; --line-strong:var(--steel); --accent:var(--steel); --accent-ink:var(--mist);
    --chart-line:var(--mist); --chart-band:var(--navy-70); --chart-soft:var(--steel);
    --btn-bg:var(--white); --btn-ink:var(--navy); --btn2-line:var(--mist);
    --badge-bg:var(--white); --badge-ink:var(--navy); --focus:var(--mist);
    --hero-veil-a:rgba(11,34,68,1); --hero-veil-b:rgba(11,34,68,.52);
    --hero-veil-c:rgba(11,34,68,0);
    --band-bg:#16325C; --band-ink:var(--white); --band-muted:var(--mist); --band-line:var(--navy-40);
    --photo-filter:grayscale(.4) contrast(1.02) brightness(.8);
    --photo-cast-a:.2;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:var(--navy); --bg-alt:#122B50; --surface:#16325C;
  --ink:var(--white); --ink-muted:var(--mist);
  --line:#4A688A; --line-strong:var(--steel); --accent:var(--steel); --accent-ink:var(--mist);
  --chart-line:var(--mist); --chart-band:var(--navy-70); --chart-soft:var(--steel);
  --btn-bg:var(--white); --btn-ink:var(--navy); --btn2-line:var(--mist);
  --badge-bg:var(--white); --badge-ink:var(--navy); --focus:var(--mist);
  --hero-veil-a:rgba(11,34,68,1); --hero-veil-b:rgba(11,34,68,.52);
  --hero-veil-c:rgba(11,34,68,0);
  --band-bg:#16325C; --band-ink:var(--white); --band-muted:var(--mist); --band-line:var(--navy-40);
  --photo-filter:grayscale(.4) contrast(1.02) brightness(.8);
  --photo-cast-a:.2;
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
     font-size:17px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
code{font-size:.9em;font-family:ui-monospace,Consolas,monospace}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.rule{border:0;border-top:1px solid var(--line);margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:.01em;margin:0}
h2{font-size:var(--t7);text-transform:uppercase;line-height:1.02}
h3{font-size:var(--t5);text-transform:uppercase;letter-spacing:.03em}
p{margin:0 0 1em}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
         color:var(--accent-ink);margin:0 0 14px}
.lede{font-size:var(--t5);color:var(--ink-muted);max-width:62ch}
.sect{padding:var(--s6) 0}
.pending{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
         color:var(--accent-ink);border:1px dashed var(--line-strong);border-radius:var(--radius);
         padding:2px 7px;white-space:nowrap}

/* ============================================================
   3. HEADER
   ============================================================ */
.site{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.site .wrap{height:var(--header-h);display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand img{width:30px;height:30px;display:block}
.brand span{font-family:var(--font-display);font-size:15px;font-weight:600;
            letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.brand .short{display:none}
.nav{display:flex;align-items:center;gap:20px}
.nav > a:not(.btn){font-size:14px;text-decoration:none;color:var(--ink-muted);white-space:nowrap;
         position:relative;padding:4px 0}
.nav > a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
                background:var(--ink);transition:right .28s ease}
.nav > a:not(.btn):hover{color:var(--ink)} .nav > a:not(.btn):hover::after{right:0}
.nav > a.on:not(.btn){color:var(--ink)} .nav > a.on:not(.btn)::after{right:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;
     font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.08em;
     text-transform:uppercase;border-radius:var(--radius);text-decoration:none;cursor:pointer;
     border:1px solid transparent;box-shadow:none;transition:transform .15s ease,opacity .15s ease}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--btn-bg);color:var(--btn-ink)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--btn2-line)}
.btn-sm{min-height:36px;padding:0 14px;font-size:12px}
.theme{min-height:36px;min-width:44px;padding:0 10px;background:transparent;color:var(--ink-muted);
       border:1px solid var(--line);border-radius:var(--radius);font-family:var(--font-body);
       font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.burger{display:none;min-height:44px;min-width:44px;background:transparent;border:0;cursor:pointer;padding:10px}
.burger i{display:block;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .3s}
.drawer{display:none;border-top:1px solid var(--line);background:var(--bg)}
.drawer.open{display:block}
.drawer a{display:block;padding:15px var(--gutter);text-decoration:none;
          border-bottom:1px solid var(--line);font-family:var(--font-display);
          letter-spacing:.06em;text-transform:uppercase;font-size:15px}

/* ============================================================
   4. SCROLL REVEAL + 3D TILT
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s} .rv.d3{transition-delay:.24s}

/* ============================================================
   5. HERO + FIG.1
   ============================================================ */
.hero{padding:78px 0 40px;text-align:center}
/* ---- hero with the crew photo underneath it ---------------------------
   Measured, not guessed: the photo fills the hero vertically, so there is no
   vertical crop and object-position-y does nothing. The faces sit at 20-30%
   of the photo, which lands exactly where the headline is. More veil erased
   the faces; less veil put the headline on top of their heads.

   So the photo takes the bottom 55% instead. The headline sits on flat
   background with no veil at all, which is the highest contrast either theme
   can give it, and the crew appears whole below the button. The gradient is
   no longer a veil over the text: it is the seam between the page background
   and the top edge of the photo, so the photo does not start with a cut.
   Only the seam COLOURS change between themes. */
.hero.has-photo{position:relative;isolation:isolate;overflow:hidden;
  padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(300px,34vw,430px)}
.hero-bg{position:absolute;left:0;right:0;bottom:0;height:55%;z-index:-2;display:block}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.hero.has-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--hero-veil-a) 0%,var(--hero-veil-b) 24%,
             var(--hero-veil-c) 56%)}
@media (max-width:820px){
  .hero.has-photo{padding-bottom:clamp(230px,58vw,320px)}
  .hero-bg{height:48%}
  .hero.has-photo::after{height:48%}
  .hero-bg img{object-position:50% 28%}
}
.hero h1{font-size:var(--t8);line-height:.96;text-transform:uppercase;margin:0 0 22px}
.hero h1 .l{display:block}
.hero .lede{margin:0 auto 30px;text-align:center;max-width:58ch}
.plate{padding:30px 0 0}
.figlabel{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
          color:var(--accent-ink);margin:0 0 14px}
figure{margin:0}
.trend{display:block;width:100%;height:auto}
.trend .axis{stroke:var(--line);stroke-width:1.5;fill:none}
.trend .tick{stroke:var(--line);stroke-width:1.5}
.trend .band{fill:var(--chart-band);stroke:var(--chart-soft);stroke-width:1;
             stroke-dasharray:3 4;opacity:.9}
.trend .limit{stroke:var(--chart-soft);fill:none}
.trend .limit.action{stroke-width:1.8;stroke-dasharray:10 5}
.trend .limit.alert{stroke-width:1.4;stroke-dasharray:3 5}
.trend .proj{stroke:var(--chart-soft);stroke-width:1.5;stroke-dasharray:5 6;fill:none;opacity:.8}
.trend .data{stroke:var(--chart-line);stroke-width:2.5;fill:none;stroke-linejoin:round;stroke-linecap:round;
             stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.6s cubic-bezier(.33,0,.15,1)}
.trend.in .data{stroke-dashoffset:0}
.trend .pt{fill:var(--chart-line)}
.trend text{font-family:var(--font-body);font-size:13px;fill:var(--chart-soft)}
.trend .lead{stroke:var(--badge-bg);stroke-width:1.2}
.trend .cal rect,.trend .cal circle{fill:var(--badge-bg)}
.trend .cal text{fill:var(--badge-ink);font-weight:600;font-size:12px;letter-spacing:.06em}
.trend .cal{opacity:0;transition:opacity .45s ease 1.5s}
.trend.in .cal{opacity:1}
.trend .num{display:none}
.trend .num circle{fill:var(--badge-bg);r:11}
.trend .num text{fill:var(--badge-ink);font-weight:600;font-size:13px}
h1,h2,h3,.plan .who,figcaption{text-wrap:balance}
p,.lede,.steps p,.find dd,.card p{text-wrap:pretty}
.steps p,.find dd,.card p,.split > div > p{max-width:68ch}
figcaption{margin-top:16px;font-size:14px;font-style:italic;color:var(--ink-muted)}
.legend{display:none;margin:18px 0 0;padding:0;list-style:none}
.legend li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:15px;
           border-top:1px solid var(--line)}
.legend b{flex:0 0 22px;height:22px;border-radius:50%;background:var(--badge-bg);color:var(--badge-ink);
          font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.legend .dots{flex:0 0 22px;margin-top:10px;border-top:2px dotted var(--chart-soft)}
.legend em{font-style:normal;color:var(--ink-muted)}
.proofs{margin-top:46px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
        display:grid;grid-template-columns:repeat(3,1fr)}
.proofs div{padding:26px 24px;text-align:center;border-left:1px solid var(--line)}
.proofs div:first-child{border-left:0}
.proofs b{display:block;font-family:var(--font-display);font-weight:600;
          font-size:var(--t6);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.proofs small{display:block;margin-top:6px;font-size:10.5px;font-weight:600;letter-spacing:.1em;
              text-transform:uppercase;color:var(--accent-ink)}

/* ============================================================
   6. PHOTOGRAPHY
   ============================================================ */
.photo{position:relative;display:block;overflow:hidden;border:1px solid var(--line);
       background:var(--bg-alt)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--photo-filter);
           transition:transform .9s cubic-bezier(.22,1,.36,1)}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--navy);
              opacity:var(--photo-cast-a);mix-blend-mode:multiply}
@media (hover:hover){ .photo:hover img{transform:scale(1.035)} }
.photo.empty{background-image:repeating-linear-gradient(45deg,transparent 0 11px,var(--line) 11px 12px);
             display:grid;place-items:center;padding:14px}
.photo.empty::after{display:none}
.photo.empty span{background:var(--bg);border:1px solid var(--line);padding:6px 11px;font-size:10.5px;
                  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);
                  text-align:center}
.r32{aspect-ratio:3/2} .r11{aspect-ratio:1/1} .r45{aspect-ratio:4/5} .r219{aspect-ratio:21/9}
.src{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);
     border:1px solid var(--line);border-radius:var(--radius);padding:3px 8px;white-space:nowrap}
.cap{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-top:12px}
.cap p{margin:0;font-size:13.5px;color:var(--ink-muted);flex:1 1 240px}

/* ============================================================
   7. GENERIC LAYOUT PIECES
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--surface)}
.card{transition:border-color .2s ease}
@media (hover:hover){ .card:hover{border-color:var(--line-strong)} }
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.steps{counter-reset:s;display:grid;gap:0;margin:34px 0 0;padding:0;list-style:none}
.steps li{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:20px;
          padding:24px 0;border-top:1px solid var(--line)}
.steps li::before{content:"0" counter(s);font-family:var(--font-display);font-size:26px;
                  color:var(--accent-ink);letter-spacing:.04em}
.steps b{display:block;font-family:var(--font-display);font-size:18px;text-transform:uppercase;
         letter-spacing:.03em;margin-bottom:5px}
.steps p{margin:0;color:var(--ink-muted);font-size:15.5px}
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
        gap:var(--s2) var(--s3);margin-top:var(--s3);
        border-top:1px solid var(--line);padding-top:var(--s3)}
.brands div{padding:0}
.brands b{display:block;font-size:var(--t0);font-weight:600;letter-spacing:.1em;
          text-transform:uppercase;color:var(--accent-ink);margin-bottom:4px}
.brands span{font-size:var(--t2);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}
.chips li{border:1px solid var(--line);border-radius:var(--radius);padding:8px 13px;font-size:13px;
          letter-spacing:.03em;color:var(--ink-muted)}
.chips li b{color:var(--ink);font-weight:600}

/* dark band section */
.band{background:var(--band-bg);color:var(--band-ink)}
.band{--accent-ink:var(--band-muted)}
.band .eyebrow,.band .src{color:var(--band-muted)}
.band .lede,.band p{color:var(--band-muted)}
.band .card{background:transparent;border-color:var(--band-line)}
.band .rule{border-color:var(--band-line)}
.band .steps li{border-color:var(--band-line)}
.band .btn-line{color:var(--band-ink);border-color:var(--band-muted)}
.band .chips li{border-color:var(--band-line);color:var(--band-muted)}
.band .chips li b{color:var(--band-ink)}

/* ============================================================
   9. PLANS
   ============================================================ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;
       border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.plan{padding:28px 24px;border-left:1px solid var(--line);position:relative;background:var(--surface)}
.plan:first-child{border-left:0}
.plan.best{background:var(--bg-alt)}
.plan .tag{position:absolute;top:0;right:0;background:var(--badge-bg);color:var(--badge-ink);
           font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px}
.plan h3{font-size:22px;margin-bottom:6px}
.plan .who{font-size:14px;color:var(--ink-muted);min-height:4.2em;margin-bottom:16px}
.plan .hrs{margin:0 0 var(--s1);font-size:var(--t1);color:var(--ink-muted)}
.plan .hrs b{font-family:var(--font-display);font-size:var(--t5);color:var(--ink);
             font-variant-numeric:tabular-nums;letter-spacing:.02em}
.plan .price{font-family:var(--font-display);font-size:30px;letter-spacing:.02em;
             padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.plan ul{list-style:none;margin:0 0 22px;padding:0;font-size:14.5px}
.plan li{padding:7px 0 7px 22px;position:relative;color:var(--ink-muted);border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan li.yes::before{content:"";position:absolute;left:2px;top:14px;width:9px;height:5px;
                     border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);
                     transform:rotate(-45deg)}
.plan li.no{opacity:.45}
.plan li.no::before{content:"";position:absolute;left:2px;top:16px;width:10px;height:1.5px;background:var(--ink-muted)}
.plan li b{color:var(--ink);font-weight:600}
.plan .btn{width:100%}

/* ============================================================
   10. SCHEDULER + PORTAL
   ============================================================ */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-top:48px;flex-wrap:wrap}
.tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;
     padding:14px 20px;font-family:var(--font-display);font-size:14px;letter-spacing:.06em;
     text-transform:uppercase;color:var(--ink-muted);cursor:pointer}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.panel{padding-top:34px}
.panel[hidden]{display:none}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
input,select,textarea{font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;
  min-height:44px;width:100%}
textarea{min-height:104px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--line-strong);outline:none}
.ok{margin-top:24px;border:1px solid var(--line);border-left:3px solid var(--line-strong);
    border-radius:var(--radius);padding:20px;max-width:760px}
.ok b{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em}
.ok .tick{font-family:var(--font-display);font-size:24px;letter-spacing:.06em;
          font-variant-numeric:tabular-nums;color:var(--ink);display:block;margin:8px 0}
.err{color:var(--ink);border-left-color:var(--ink)}

.login{max-width:430px;border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.login .field{margin-bottom:16px}
.demo{margin-top:18px;font-size:13px;color:var(--ink-muted);border-top:1px solid var(--line);padding-top:16px}
.demo code{background:var(--bg-alt);border:1px solid var(--line);border-radius:3px;padding:1px 6px;
           color:var(--ink);font-weight:600}

.acct{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
      border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:34px}
.acct .who b{font-family:var(--font-display);font-size:20px;text-transform:uppercase;display:block;
             letter-spacing:.03em}
.acct .who span{font-size:13.5px;color:var(--ink-muted)}
.kpis{display:flex;gap:26px;flex-wrap:wrap}
.kpis div b{display:block;font-family:var(--font-display);font-size:22px;font-variant-numeric:tabular-nums}
.kpis div small{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink)}

.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:14px}
caption{text-align:left;padding:16px 18px;font-size:11px;font-weight:600;letter-spacing:.12em;
        text-transform:uppercase;color:var(--accent-ink);border-bottom:1px solid var(--line)}
th,td{padding:11px 12px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
thead th{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
         color:var(--accent-ink);border-top:0;white-space:nowrap}
tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
.cal td{text-align:center;padding:9px 4px;font-variant-numeric:tabular-nums}
.cal thead th{text-align:center}
.cal tbody th{text-align:left;min-width:230px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--badge-bg)}
.dot.r{background:transparent;border:1.5px solid var(--badge-bg)}
.dot.o{background:transparent;border:1.5px solid var(--line);opacity:.5}
#limits tbody tr{cursor:pointer;transition:background .15s ease}
#limits tbody tr:hover{background:var(--bg-alt)}
#limits tbody tr.on{background:var(--bg-alt)}
#limits tbody tr.on th{box-shadow:inset 3px 0 0 var(--ink)}
#limits th{min-width:200px}
.callout-row td{color:var(--ink-muted)}
.sev{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
     border:1px solid var(--line-strong);border-radius:var(--radius);padding:2px 7px;white-space:nowrap}
.sev.hi{background:var(--badge-bg);color:var(--badge-ink);border-color:var(--badge-bg)}
.legend-key{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--ink-muted)}
.legend-key span{display:inline-flex;align-items:center;gap:7px}

.find{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);
      margin-bottom:var(--s2);background:var(--surface)}
.find header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.find header h4{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--t5);
                text-transform:uppercase;letter-spacing:.03em}
.find dl{display:grid;grid-template-columns:130px 1fr;gap:8px 18px;margin:0;font-size:14.5px}
.find dt{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
         color:var(--accent-ink);padding-top:3px}
.find dd{margin:0;color:var(--ink-muted)}

/* ---- equipment inspection, maintenance matrix and documents (client portal) ---- */
.eq{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);
    margin-bottom:var(--s2);background:var(--surface)}
.eq > header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:6px}
.eq > header h4{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--t5);
                text-transform:uppercase;letter-spacing:.03em}
.eq .why{margin:0 0 16px;font-size:13.5px;color:var(--accent-ink)}
/* the global table rule carries min-width:720px so the wide data tables scroll
   inside .tblwrap. These tables restack instead, so that floor has to go or they
   push the whole page sideways on a phone. */
.eq table{width:100%;min-width:0;border-collapse:collapse;font-size:14.5px}
.eq thead th{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
             color:var(--accent-ink);text-align:left;padding:0 14px 8px 0}
.eq tbody th,.eq tbody td{text-align:left;vertical-align:top;font-weight:400;
                          padding:10px 14px 10px 0;border-top:1px solid var(--line)}
.eq tbody td:first-child{white-space:nowrap}
.eq tbody td.act{color:var(--ink-muted);padding-right:0}
.eq .note{margin:16px 0 0;font-size:13.5px;color:var(--ink-muted)}
.sev.q{border-color:var(--line);color:var(--ink-muted)}
#pm td{color:var(--ink-muted)}
#pm th[scope=row]{white-space:normal;min-width:150px}
.doclist{display:grid;gap:12px}
.doc{display:flex;gap:16px;align-items:flex-start;text-decoration:none;color:inherit;
     border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
     padding:18px 20px;transition:border-color .2s ease}
@media (hover:hover){ .doc:hover{border-color:var(--line-strong)} }
.doc .ico{width:21px;height:21px;flex:0 0 auto;color:var(--accent);margin-top:3px}
.doc .ico svg{width:100%;height:100%;display:block}
.doc b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--t5);
       text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.doc .desc{display:block;font-size:14px;color:var(--ink-muted);max-width:60ch}
.doc .meta{display:block;margin-top:7px;font-size:10.5px;font-weight:600;letter-spacing:.09em;
           text-transform:uppercase;color:var(--accent-ink)}
@media (max-width:640px){
  .eq thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .eq tbody tr{display:block;border-top:1px solid var(--line);padding:12px 0}
  .eq tbody th,.eq tbody td{display:block;border:0;padding:0}
  .eq tbody th{margin:7px 0 0}
  .eq tbody td.act{margin-top:6px;padding-left:12px;border-left:2px solid var(--line)}
}

/* ============================================================
   11. TEAM + FOOTER
   ============================================================ */
.qr{display:flex;gap:var(--s3);align-items:flex-start;border:1px solid var(--line);
    border-radius:var(--radius);padding:var(--s3);background:var(--surface)}
.qr-code{flex:0 0 190px}
.qr-code svg,.qr-code img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.qr-txt h3{margin-bottom:var(--s1)}
.qr-txt p{font-size:var(--t2);color:var(--ink-muted)}
@media (max-width:700px){.qr{flex-direction:column}.qr-code{flex:0 0 auto;max-width:220px}}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;padding:var(--s2) 0;font-family:var(--font-display);
            font-size:var(--t4);letter-spacing:.02em;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";float:right;color:var(--accent-ink);font-weight:400}
.qa details[open] summary::after{content:"\−"}
.qa details p{max-width:76ch;color:var(--ink-muted);margin:0 0 var(--s2);font-size:var(--t3)}
.team figcaption{font-style:normal;font-size:14px;margin-top:10px}
.team b{display:block;font-family:var(--font-display);letter-spacing:.04em;color:var(--ink);font-size:16px}
.team span{color:var(--ink-muted);font-size:13.5px}
.foot{background:var(--band-bg);color:var(--band-ink);padding:56px 0 40px}
.foot a{color:var(--band-muted)}
.foot .cols3{gap:34px}
.foot h3{font-size:14px;letter-spacing:.1em;margin-bottom:14px;color:var(--band-ink)}
.foot p,.foot li{color:var(--band-muted);font-size:14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:5px 0}
.foot .bottom{border-top:1px solid var(--band-line);margin-top:38px;padding-top:22px;
              font-size:12.5px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

/* ============================================================
   12. RESPONSIVE — layout only, never color
   ============================================================ */
@media (max-width:1000px){
  .split{grid-template-columns:1fr;gap:34px}
  .cols4{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr}
  .plan{border-left:0;border-top:1px solid var(--line)}
  .plan:first-child{border-top:0}
}
@media (max-width:900px){
  .nav > a:not(.btn){display:none}
  .nav .btn{display:none}
  .burger{display:block}
  .brand .long{display:none} .brand .short{display:inline}
  .cols3{grid-template-columns:1fr}
  .sect{padding:var(--s5) 0}
}
@media (max-width:700px){
  :root{--gutter:16px}
  /* brand + CTA + theme + burger does not fit at 390px, and losing the
     burger loses the whole menu. The hero CTA is one scroll away. */
  .nav .btn{display:none}
  .nav{gap:8px}
  .brand span{font-size:13px}
  body{font-size:16px}
  .hero{padding:44px 0 26px}
  .hero .btn{width:100%}
  .trend .cal{display:none}
  .trend .num{display:block}
  .trend .num circle{r:30}
  .trend .num text{font-size:38px}
  .trend text{font-size:36px}
  .trend .projlabel{display:none}
  .legend{display:block}
  .proofs{grid-template-columns:1fr}
  .proofs div{text-align:left;border-left:0;border-top:1px solid var(--line)}
  .proofs div:first-child{border-top:0}
  .cols4{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .find dl{grid-template-columns:1fr;gap:2px 0}
  .find dt{padding-top:10px}
  .steps li{grid-template-columns:44px 1fr;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .trend .data{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .trend .cal{opacity:1;transition:none}
  .photo img{transition:none}
}

/* ---- multi-page additions ---- */
.nav > a[aria-current="page"]:not(.btn){color:var(--ink)}
.nav > a[aria-current="page"]:not(.btn)::after{right:0}
a.card{display:block;text-decoration:none;position:relative}
a.card .num{display:block;font-family:var(--font-display);font-size:var(--t5);
            color:var(--accent-ink);letter-spacing:.06em;margin-bottom:var(--s1)}
a.card .go{display:inline-block;margin-top:var(--s2);font-size:var(--t2);font-weight:600;
           letter-spacing:.04em;color:var(--ink)}
@media (hover:hover){a.card:hover .go{text-decoration:underline}}
.doors .card{min-height:100%}
.page-head{padding:var(--s5) 0 0}
.page-head .back{font-size:var(--t2);color:var(--ink-muted);text-decoration:none}
.page-head .back:hover{color:var(--ink)}