/* ============================================================
   SAVS DESIGN SYSTEM — AUS-register corporate system (PLAN.md §1)
   One token set: marketing site + portals + app lineage.
   Gold #C9A227 is the ONLY accent. Blues are one six-step scale.
   ============================================================ */
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --navy-950:#04080F; --navy-900:#0A1628; --navy-800:#0D1C33; --navy-700:#12294B;
  --blue-600:#14457C; --blue-500:#24466F; --blue-100:#DCE6F2;
  --gold:#C9A227; --gold-bright:#E3BC3F; --gold-pale:#F7ECC0;
  --paper:#FFFFFF; --mist:#F2F5F9;
  --ink:#14202E; --ink-dim:#51606F; --ink-inv:#EEF1F6; --ink-inv-dim:#A7B3C4;
  --line:#D5DCE6; --line-navy:#22385C;
  --ok:#3FA46A; --warn:#D9930D; --bad:#C0392B;
  --disp:"Barlow Condensed","Archivo Narrow",sans-serif;
  --text:"Barlow",system-ui,sans-serif;
  --rad:6px; --wrap:1240px;
  --shadow:0 18px 40px rgba(4,8,15,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--text);color:var(--ink);background:var(--paper);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:var(--blue-600)}
h1,h2,h3{font-family:var(--disp);line-height:1.05;margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:96px 0}
section.tight{padding:56px 0}
.eyebrow{font-family:var(--disp);font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.85rem;color:var(--blue-600);margin:0 0 10px}
.eyebrow.gold{color:var(--gold)}
.sec-title{font-size:clamp(2rem,4.6vw,3rem);font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--navy-900)}
.sec-title .u{display:block;width:56px;height:4px;background:var(--gold);margin-top:14px}
.lede{color:var(--ink-dim);max-width:62ch;margin:16px 0 0}
.on-dark{color:var(--ink-inv)} .on-dark .sec-title{color:#fff} .on-dark .lede{color:var(--ink-inv-dim)}
.center{text-align:center}.center .lede{margin-left:auto;margin-right:auto}.center .sec-title .u{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:1rem;padding:14px 28px;border-radius:var(--rad);text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--navy-950);box-shadow:0 8px 20px rgba(201,162,39,.28)}
.btn-gold:hover{box-shadow:0 10px 26px rgba(201,162,39,.4)}
.btn-blue{background:var(--blue-600);color:#fff}
.btn-blue:hover{background:var(--blue-500)}
.btn-navy{background:var(--navy-900);color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.btn-ghost{background:var(--mist);color:var(--blue-600)}
.btn-ghost:hover{background:var(--blue-100)}
.btn-ghost-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px var(--gold)}
.btn-ghost-dark:hover{background:rgba(201,162,39,.12)}
.arrow-link{font-family:var(--disp);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-600);text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease;padding-bottom:3px}
.arrow-link:hover{background-size:100% 2px}

/* ---------- utility bar + header ---------- */
.utilitybar{background:var(--navy-950);color:var(--ink-inv);font-size:.86rem}
.utilitybar .wrap{display:flex;align-items:center;gap:26px;height:38px}
.utilitybar a{color:var(--ink-inv);text-decoration:none;font-family:var(--disp);letter-spacing:.14em;font-weight:600}
.utilitybar a:hover{color:var(--gold-bright)}
.utilitybar .sp{flex:1}
.utilitybar .u-phone{color:var(--gold-bright)}
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy-900)}
.brand img{width:44px;height:44px;object-fit:contain}
.brand .bname{font-family:var(--disp);font-weight:700;font-size:1.28rem;letter-spacing:.04em;line-height:1;text-transform:uppercase}
.brand .bsub{display:block;font-size:.62rem;letter-spacing:.3em;color:var(--blue-600);font-weight:600;margin-top:3px}
.mainnav{display:flex;gap:6px;margin-left:auto}
.mainnav>div{position:relative}
.mainnav a,.mainnav button.navtop{font-family:var(--disp);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:1.02rem;color:var(--navy-900);text-decoration:none;padding:10px 10px;background:none;border:0;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.mainnav a:hover,.mainnav button.navtop:hover{color:var(--blue-600)}
.mainnav a[aria-current]{color:var(--blue-600);box-shadow:inset 0 -3px 0 var(--gold)}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow);min-width:250px;padding:8px;display:none}
.dropdown.open{display:block}
.dropdown a{display:block;padding:10px 12px;border-radius:4px;text-transform:none;letter-spacing:.02em;font-family:var(--text);font-weight:500;font-size:.98rem}
.dropdown a:hover{background:var(--mist)}
.header-cta{display:flex;gap:10px;align-items:center}
.btn-login{background:var(--navy-900);color:#fff;font-family:var(--disp);font-weight:700;letter-spacing:.16em;padding:12px 22px;border-radius:var(--rad);text-decoration:none;text-transform:uppercase}
.btn-login:hover{background:var(--blue-600)}
.btn-phone{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--navy-950);font-family:var(--disp);font-weight:700;letter-spacing:.08em;padding:12px 18px;border-radius:var(--rad);text-decoration:none}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--navy-900);margin:6px 0}
/* The full desktop lockup (badge + wordmark ~325px, 8-item nav ~742px,
   phone pill + LOGIN ~247px, gaps) measures ~1,370px — wider than the
   1,240px content wrap. Flex crush used to land on the brand and the phone
   pill — wordmark wrapping to 3–5 lines, the number stacking in a tall
   box — at every width from 1021px up through desktop (owner-reported on
   tablet, Oct 20). So the two header bars run on a wider wrap than the
   body, the brand and CTA can never be crushed, the phone number can
   never wrap, and any residual slack is absorbed by the nav, which
   collapses at 1360px (below). */
.utilitybar .wrap,.site-header .wrap{max-width:1440px}
.brand{flex:none}
.header-cta{flex:none}
.header-cta .btn{white-space:nowrap}
.mainnav{flex:1 1 auto;min-width:0;justify-content:flex-end}
@media(max-width:1360px){
  /* Tablet + small laptop: the full nav no longer fits beside the brand
     and the CTA, so it collapses to the hamburger panel (the pattern
     phones already use) while the brand, the gold phone pill and LOGIN
     stay together on one clean line at the right. The header sizes to
     its content, never clips it. */
  .site-header .wrap{height:auto;min-height:76px}
  .mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;justify-content:flex-start;padding:12px 24px 20px;box-shadow:var(--shadow)}
  .mainnav.open{display:flex}
  .dropdown{position:static;box-shadow:none;border:0;display:block;padding:0 0 6px 14px}
  .nav-toggle{display:block;margin-left:0}
  .header-cta{margin-left:auto}
}
@media(max-width:1020px){
  .brand .bname{font-size:1.05rem}
}

/* ---------- bands ---------- */
.brand-band{background:var(--blue-600);color:#fff;padding:34px 0}
.brand-band .promise{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.3rem);letter-spacing:.01em;text-transform:uppercase;line-height:1.1}
.brand-band .subline{margin-top:8px;color:var(--blue-100);display:flex;gap:14px;align-items:center;font-size:.98rem}
.brand-band .subline .bar{width:3px;height:18px;background:var(--gold);display:inline-block}
.band-mist{background:var(--mist)}
.band-dark{background:var(--navy-950);color:var(--ink-inv);position:relative}
.band-dark .bgimg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.34}
.band-dark .wrap{position:relative}
.blueprint{background:linear-gradient(135deg,var(--navy-700),var(--blue-600));color:#fff;position:relative;overflow:hidden}
.blueprint::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px);pointer-events:none}
.blueprint .wrap{position:relative}

/* ---------- corner-bracket cards ---------- */
.bracket-card{position:relative;background:var(--paper);padding:34px 30px}
.bracket-card::before,.bracket-card::after,.bracket-card>.corners::before,.bracket-card>.corners::after{content:"";position:absolute;width:26px;height:26px;border:0 solid var(--blue-600);pointer-events:none}
.bracket-card::before{top:0;left:0;border-top-width:3px;border-left-width:3px}
.bracket-card::after{bottom:0;right:0;border-bottom-width:3px;border-right-width:3px}
.bracket-card>.corners{position:absolute;inset:0;pointer-events:none}
.bracket-card>.corners::before{top:0;right:0;border-top-width:3px;border-right-width:3px}
.bracket-card>.corners::after{bottom:0;left:0;border-bottom-width:3px;border-left-width:3px}
.bracket-card.gold::before,.bracket-card.gold::after,.bracket-card.gold>.corners::before,.bracket-card.gold>.corners::after{border-color:var(--gold)}
.on-dark .bracket-card,.bracket-card.dark{background:var(--navy-800);color:var(--ink-inv)}
.on-dark .bracket-card::before,.on-dark .bracket-card::after,.on-dark .bracket-card>.corners::before,.on-dark .bracket-card>.corners::after{border-color:#fff}
.bracket-frame{position:relative;padding:14px}
.bracket-frame::before,.bracket-frame::after{content:"";position:absolute;width:44px;height:44px;border:0 solid #fff;pointer-events:none}
.bracket-frame::before{top:0;left:0;border-top-width:4px;border-left-width:4px}
.bracket-frame::after{bottom:0;right:0;border-bottom-width:4px;border-right-width:4px}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.pillar{text-align:center}
.pillar .icon-chip{width:58px;height:58px;margin:-8px auto 16px;background:var(--blue-100);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue-600)}
.pillar h3{font-size:1.45rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.pillar p{color:var(--ink-dim);margin:10px 0 20px}
@media(max-width:900px){.pillars{grid-template-columns:1fr}}

/* ---------- trust strip ---------- */
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.trust-strip .stat b{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,4.6vw,3.2rem);color:var(--navy-900);display:block;line-height:1}
.trust-strip .stat span{font-family:var(--disp);letter-spacing:.18em;text-transform:uppercase;font-size:.85rem;color:var(--blue-600);font-weight:600}
@media(max-width:900px){.trust-strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- angled tiles ---------- */
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:48px}
@media(max-width:900px){.tile-grid{grid-template-columns:1fr}}
.tile{text-decoration:none;color:inherit;display:block}
.tile .panel{position:relative;height:290px;clip-path:polygon(0 0,100% 0,calc(100% - 34px) 100%,0 100%);overflow:hidden;background:var(--navy-900)}
.tile .panel img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .panel img.ph2{position:absolute;top:0;right:0;width:46%;height:100%;object-fit:cover;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);opacity:.92}
.tile .panel .wash{position:absolute;inset:0;background:linear-gradient(120deg,rgba(10,22,40,.42),rgba(20,69,124,.14) 55%,rgba(10,22,40,.3))}
.tile .panel .streak{position:absolute;left:-4%;bottom:6%;width:112%;opacity:.85;pointer-events:none}
.tile .panel .cutout{position:absolute;left:0;bottom:0;height:96%;object-fit:contain;z-index:2}
.tile .tlabel{font-family:var(--disp);font-weight:600;font-size:1.5rem;text-transform:uppercase;letter-spacing:.03em;color:var(--navy-900);margin-top:14px;display:flex;align-items:center;gap:10px}
.tile .tlabel::after{content:"→";color:var(--gold);font-weight:700}
.tile:hover .tlabel{color:var(--blue-600)}
.tile .tsub{color:var(--ink-dim);margin-top:2px}

/* ---------- photo-top cards ---------- */
.photo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
@media(max-width:900px){.photo-cards{grid-template-columns:1fr}}
.photo-card{background:#fff;color:var(--ink);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow);text-align:center}
.photo-card img{width:100%;height:190px;object-fit:cover}
.photo-card .pc-body{padding:26px 24px 30px}
.photo-card h3{font-size:1.4rem;font-weight:600;text-transform:uppercase}
.photo-card p{color:var(--ink-dim);margin:10px 0 20px}

/* ---------- feature grid (HQ six) ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
@media(max-width:900px){.feature-grid{grid-template-columns:1fr}}
.feature{background:var(--navy-800);border:1px solid var(--line-navy);border-radius:var(--rad);padding:28px 26px}
.feature h3{color:#fff;font-size:1.35rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.feature h3::after{content:"";display:block;width:38px;height:3px;background:var(--gold);margin-top:10px}
.feature p{color:var(--ink-inv-dim);margin:12px 0 0}

/* ---------- insights band ---------- */
.insights{background:var(--blue-100)}
.insights .cols{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:34px;align-items:stretch;margin-top:40px}
@media(max-width:900px){.insights .cols{grid-template-columns:1fr}}
.icon-rows{display:flex;flex-direction:column;gap:14px;justify-content:center}
.icon-row{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.65);padding:16px 18px;border-radius:var(--rad);text-decoration:none;color:var(--ink)}
.icon-row:hover{background:#fff}
.icon-row .ic{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--blue-600);color:#fff;display:flex;align-items:center;justify-content:center}
.icon-row b{font-family:var(--disp);font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;color:var(--navy-900);display:block}
.icon-row b::after{content:"";display:block;width:30px;height:3px;background:var(--gold);margin-top:5px}
.icon-row span{color:var(--ink-dim);font-size:.95rem}
.featured-card{background:var(--navy-900);color:#fff;border-radius:var(--rad);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.featured-card img{height:220px;width:100%;object-fit:cover}
.featured-card .fc-body{padding:24px 26px 28px}
.featured-card h3{font-size:1.6rem;font-weight:600;text-transform:uppercase}
.featured-card p{color:var(--ink-inv-dim);margin:8px 0 14px}

/* ---------- icon grid (closing, 8 destinations) ---------- */
.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
@media(max-width:900px){.icon-grid{grid-template-columns:repeat(2,1fr)}}
.icon-cell{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 10px 20px;background:var(--mist);border-radius:var(--rad);text-decoration:none;color:var(--navy-900)}
.icon-cell svg{color:var(--blue-600);transition:color .15s ease}
.icon-cell:hover svg{color:var(--gold)}
.icon-cell span{font-family:var(--disp);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:1rem;text-align:center}

/* ---------- lists / checklists ---------- */
.checklist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.checklist li{padding-left:32px;position:relative;color:var(--ink-dim)}
.checklist li::before{content:"";position:absolute;left:0;top:4px;width:17px;height:17px;border-radius:50%;background:var(--blue-600)}
.checklist li::after{content:"";position:absolute;left:5.5px;top:8.5px;width:6px;height:3.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.checklist li b{color:var(--ink)}
.benefit-rows{display:grid;gap:18px;margin-top:36px}
.benefit-row{display:flex;gap:18px;align-items:flex-start}
.benefit-row .ic{flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--blue-100);color:var(--blue-600);display:flex;align-items:center;justify-content:center}
.benefit-row h3{font-size:1.3rem;font-weight:600;text-transform:uppercase}
.benefit-row p{color:var(--ink-dim);margin:4px 0 0}

/* ---------- hero (commercial-first) ---------- */
.hero-commercial{background:var(--navy-950);padding:0}
.hero-commercial .frame{max-width:1180px;margin:0 auto;padding:26px 24px 34px}
.video-embed{position:relative;padding-top:56.25%;background:#000;border-radius:var(--rad);overflow:hidden}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hero-text{padding:72px 0 8px}
.hero-text .slogan{font-size:clamp(2.6rem,6.4vw,4.4rem);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;color:var(--navy-900);line-height:1.02}
.hero-text .slogan em{font-style:normal;color:var(--blue-600)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split img.round{border-radius:var(--rad);width:100%;object-fit:cover}
.option-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
@media(max-width:900px){.option-cards{grid-template-columns:1fr}}
.option-card{display:block;text-decoration:none;color:inherit}
.option-card h3{font-size:1.5rem;font-weight:600;text-transform:uppercase}
.option-card p{color:var(--ink-dim);margin:10px 0 18px}

/* ---------- phone demo (interactive, inert screens, tap = HQ page) ---------- */
.phone-stage{position:relative;margin-top:44px}
.phone-track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 18px;scrollbar-width:none}
.phone-track::-webkit-scrollbar{display:none}
.phone{flex:0 0 272px;scroll-snap-align:center;text-decoration:none}
.phone .frame{background:#0b0f16;border:3px solid #2a3444;border-radius:38px;padding:10px;box-shadow:var(--shadow);transition:transform .2s ease}
.phone:hover .frame{transform:translateY(-4px)}
.phone .scr{border-radius:28px;overflow:hidden;background:var(--navy-900);height:480px;overflow-y:auto;scrollbar-width:none;position:relative}
.phone .scr::-webkit-scrollbar{display:none}
.phone .cap{text-align:center;font-family:var(--disp);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-inv);margin-top:14px;font-size:1rem}
.phone-ui{padding:18px 16px;color:var(--ink-inv);font-size:.82rem}
.phone-ui .pu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.phone-ui .pu-title{font-family:var(--disp);font-size:1.15rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.phone-ui .pu-kpi{background:var(--navy-800);border:1px solid var(--line-navy);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.phone-ui .pu-kpi b{font-family:var(--disp);font-size:1.7rem;color:#fff;display:block;line-height:1}
.phone-ui .pu-kpi span{color:var(--ink-inv-dim);letter-spacing:.08em;text-transform:uppercase;font-size:.66rem}
.phone-ui .pu-row{display:flex;justify-content:space-between;gap:8px;background:var(--navy-800);border:1px solid var(--line-navy);border-radius:10px;padding:10px 12px;margin-bottom:8px;color:var(--ink-inv-dim)}
.phone-ui .pu-row b{color:var(--ink-inv);font-weight:600}
.phone-ui .pu-row>span:first-child{min-width:0}
.phone-ui .pu-row>span:last-child{flex:none;white-space:nowrap;align-self:flex-start}
.phone-ui .pu-head .pu-pill,.phone-ui .pu-row .pu-pill{flex:none;white-space:nowrap}
.phone-ui .pu-pill{font-size:.64rem;padding:2px 8px;border-radius:99px;background:rgba(63,164,106,.18);color:#7fd6a4;letter-spacing:.06em;text-transform:uppercase}
.phone-ui .pu-pill.gold{background:rgba(201,162,39,.18);color:var(--gold-bright)}
.phone-ui .pu-pill.red{background:rgba(192,57,43,.22);color:#ff9a8a}
.phone-ui .pu-photo{height:110px;border-radius:10px;object-fit:cover;width:100%;margin-bottom:10px}
.phone-nav{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:6px}
.phone-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-navy);background:var(--navy-800);color:#fff;font-size:1.1rem;cursor:pointer}
.phone-nav .dots{display:flex;gap:8px}
.phone-nav .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-navy);display:block}
.phone-nav .dots i.on{background:var(--gold);width:22px;border-radius:99px}
.phone-hint{text-align:center;color:var(--ink-inv-dim);font-size:.9rem;margin-top:10px}

/* ---------- one-time cinematic intro: real video — Joel pulls up in the SAVS truck
   on a stormy night, opens the tailgate, and the site opens with it.
   Mirrors the approved mock (savs-website-redesign-mockup) treatment exactly. ---------- */
.nh{position:fixed;inset:0;z-index:200;overflow:hidden;background:#000;opacity:0;pointer-events:none;color:#fff}
.nh.play{opacity:1;pointer-events:auto;animation:nhIn .45s ease-out both}
.nh.leaving{animation:nhOut 1.1s ease-in forwards}
@keyframes nhIn{from{opacity:0}to{opacity:1}}
@keyframes nhOut{0%{opacity:1;filter:brightness(1)}100%{opacity:0;filter:brightness(1.9) saturate(.6);visibility:hidden}}
.nh .nh-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#04090F url("img/storm-night.jpg") center 62%/cover no-repeat}
.nh .nh-bar{position:absolute;left:0;right:0;height:11vh;background:#000;z-index:4;transition:height 1.5s cubic-bezier(.65,0,.3,1)}
.nh .nh-bar.top{top:0}
.nh .nh-bar.bottom{bottom:0}
.nh.open .nh-bar{height:0}
.nh .nh-grain{position:absolute;inset:-60px;z-index:3;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E")}
.nh.play .nh-grain{animation:nhGrain .9s steps(4) infinite}
@keyframes nhGrain{0%{transform:translate(0,0)}25%{transform:translate(-22px,14px)}50%{transform:translate(14px,-20px)}75%{transform:translate(-10px,-12px)}100%{transform:translate(0,0)}}
.nh .nh-bloom{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(90% 70% at 50% 46%,rgba(255,196,86,.5),rgba(255,170,60,.16) 55%,transparent 78%);transition:opacity 1.1s ease}
.nh.bloom .nh-bloom{opacity:.85}
.nh .nh-wash{position:absolute;inset:0;z-index:1;opacity:0;mix-blend-mode:screen;pointer-events:none}
.nh .nh-wash.red{background:radial-gradient(120% 92% at 50% 58%,rgba(255,45,38,.45),rgba(255,45,38,.13) 55%,transparent 78%)}
.nh .nh-wash.blue{background:radial-gradient(120% 92% at 50% 58%,rgba(46,124,246,.45),rgba(46,124,246,.13) 55%,transparent 78%)}
.nh.play .nh-wash.red{animation:nhWash 1.06s ease-in-out .35s 6}
.nh.play .nh-wash.blue{animation:nhWash 1.06s ease-in-out .88s 6}
@keyframes nhWash{0%,100%{opacity:0}50%{opacity:.82}}
.nh .nh-skip{position:absolute;top:calc(16px + env(safe-area-inset-top));right:18px;z-index:7;font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#D7E3F0;background:rgba(4,10,20,.45);border:1px solid rgba(215,227,240,.4);padding:9px 16px;cursor:pointer}
.nh .nh-skip:hover{border-color:var(--gold);color:var(--gold-bright)}
/* manual-replay fallback: shown whenever the intro is on screen but not playing —
   a tap here always starts it, so a replay can never dead-end on a black screen */
.nh .nh-tapplay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;background:rgba(4,9,15,.18);border:0;padding:0;cursor:pointer;color:var(--navy-900)}
.nh .nh-tapplay[hidden]{display:none}
.nh .nh-tapplay .disc{width:84px;height:84px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(4,9,15,.55);transition:transform .2s ease,background .2s ease}
.nh .nh-tapplay:hover .disc{transform:scale(1.07);background:var(--gold-bright)}
.nh .nh-tapplay-lbl{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(4,9,15,.8)}
body.intro-done .nh{display:none}
@media(prefers-reduced-motion:reduce){.nh{display:none}}
/* replay-intro row under the hero (findable copy of the footer link) */
.replay-intro-row{background:#fff;text-align:center;padding:16px 24px 18px}
.replay-intro-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;border:0;border-bottom:2px solid var(--gold);padding:4px 2px;font-family:var(--disp);font-weight:600;font-size:15.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-800)}
.replay-intro-btn:hover{color:var(--gold)}

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:860px;margin:40px auto 0}
.faq-item{border:1px solid var(--line);border-radius:var(--rad);margin-bottom:12px;background:#fff;overflow:hidden}
.faq-item summary{cursor:pointer;padding:20px 24px;font-family:var(--disp);font-weight:600;font-size:1.25rem;letter-spacing:.02em;color:var(--navy-900);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--gold);font-weight:700}
.faq-item[open ] summary::after{content:"–"}
.faq-item .faq-a{padding:0 24px 22px;color:var(--ink-dim)}

/* ---------- subpage navy hero (services + properties) ---------- */
.page-hero{background:var(--navy-900);color:var(--ink-inv);padding:56px 0 64px;position:relative;overflow:hidden}
.page-hero .sec-title{color:#fff}
.page-hero .lede{color:var(--ink-inv-dim)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero-panel{position:relative;height:320px;clip-path:polygon(0 0,100% 0,calc(100% - 34px) 100%,0 100%);overflow:hidden;background:var(--navy-800)}
.hero-panel img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-panel img.ph2{position:absolute;top:0;right:0;width:46%;height:100%;object-fit:cover;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);opacity:.92}
.hero-panel .wash{position:absolute;inset:0;background:linear-gradient(120deg,rgba(10,22,40,.42),rgba(20,69,124,.14) 55%,rgba(10,22,40,.3))}
.hero-panel .streak{position:absolute;left:-4%;bottom:6%;width:112%;opacity:.85;pointer-events:none}
.hero-panel .cutout{position:absolute;left:0;bottom:0;height:96%;object-fit:contain;z-index:2}
.hero-panel.icon-panel{display:flex;align-items:center;justify-content:center}
.cta-band .cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.split-narrow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:900px){.split-narrow{grid-template-columns:1fr}}

/* ---------- forms (contact intake) ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:36px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.field label{display:block;font-family:var(--disp);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;color:var(--navy-900);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--rad);font:inherit;color:var(--ink);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue-600);outline-offset:1px}
.field.full{grid-column:1/-1}
.form-note{color:var(--ink-dim);font-size:.92rem}
.form-status{margin-top:16px;padding:14px 18px;border-radius:var(--rad);display:none}
.form-status.ok{display:block;background:rgba(63,164,106,.12);color:#1f6b41}
.form-status.err{display:block;background:rgba(192,57,43,.1);color:#8c2b20}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-950);color:var(--ink-inv-dim);padding:0 0 34px;margin-top:0}
.footer-contact{display:flex;flex-wrap:wrap;gap:14px 0;align-items:center;justify-content:center;padding:30px 0;border-bottom:1px solid var(--line-navy);font-family:var(--disp);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.footer-contact a{color:#fff;text-decoration:none;padding:0 26px}
.footer-contact a:hover{color:var(--gold-bright)}
.footer-contact .sep{width:1px;height:20px;background:var(--gold);opacity:.7}
.footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:34px;padding:48px 0 8px}
@media(max-width:900px){.footer-main{grid-template-columns:1fr 1fr}}
.footer-main h4{font-family:var(--disp);color:#fff;letter-spacing:.16em;text-transform:uppercase;font-size:1rem;margin:0 0 14px}
.footer-main ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-main a{color:var(--ink-inv-dim);text-decoration:none}
.footer-main a:hover{color:var(--gold-bright)}
.footer-brand .tagline{font-family:var(--disp);font-size:1.35rem;color:#fff;text-transform:uppercase;letter-spacing:.03em;margin:14px 0 8px}
.footer-areas{border-top:1px solid var(--line-navy);margin-top:26px;padding-top:22px;font-size:.95rem}
.footer-legal{border-top:1px solid var(--line-navy);margin-top:22px;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:.82rem}
.footer-legal .lic{color:var(--ink-inv)}
.msg-float{position:fixed;right:20px;bottom:20px;z-index:70;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--navy-950);font-family:var(--disp);font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border-radius:99px;box-shadow:var(--shadow)}
.msg-float:hover{filter:brightness(1.05)}

/* ---------- reveal + misc ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease}
.reveal.in{opacity:1;transform:none}
.numbered{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
@media(max-width:900px){.numbered{grid-template-columns:1fr}}
.numbered .n-card{background:var(--mist);border-radius:var(--rad);padding:30px 28px}
.numbered .n-card .num{font-family:var(--disp);font-weight:700;font-size:2.4rem;color:var(--gold);line-height:1}
.numbered .n-card h3{font-size:1.4rem;font-weight:600;text-transform:uppercase;margin-top:10px}
.numbered .n-card p{color:var(--ink-dim);margin:8px 0 0}
.areas-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.areas-list span{background:rgba(255,255,255,.1);border:1px solid var(--line-navy);color:#fff;padding:8px 16px;border-radius:99px;font-family:var(--disp);letter-spacing:.08em;text-transform:uppercase;font-size:.92rem}
.video-band{position:relative;border-radius:var(--rad);overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .nh .nh-grain,.nh .nh-wash{animation:none}
  html{scroll-behavior:auto}
}

/* hero commercial (self-hosted, muted autoplay + controls) */
.video-embed video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0A1628}
.hv-controls{position:absolute;right:14px;bottom:14px;display:flex;gap:10px;z-index:5}
.hv-btn{appearance:none;border:1px solid rgba(255,255,255,.35);background:rgba(10,22,40,.8);color:#fff;font:600 .85rem 'Barlow',sans-serif;padding:10px 16px;border-radius:10px;cursor:pointer}
.hv-btn:hover{border-color:#C9A227;color:#E3C766}

/* ---------- hire-an-officer package system (Oct 20 staging) ---------- */
.pkg-head{text-align:center;max-width:820px;margin:0 auto}
.pkg-head .lede{margin-left:auto;margin-right:auto}
.pkg-strip{margin:30px auto 0;max-width:760px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:12px 26px;font-size:.98rem;color:var(--ink-dim);text-align:center}
.pkg-strip a{font-weight:600}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px;align-items:stretch}
@media(max-width:1000px){.pkg-grid{grid-template-columns:1fr}}
.pkg-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:34px 30px;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(4,8,15,.05)}
.pkg-card.pop{border:2px solid var(--gold);box-shadow:var(--shadow)}
.pkg-card.rec{outline:3px solid var(--blue-600);outline-offset:3px}
.pkg-badge{position:absolute;top:-14px;right:22px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--navy-950);font-family:var(--disp);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;padding:6px 14px;border-radius:99px}
.pkg-rec-badge{position:absolute;top:-14px;left:22px;background:var(--blue-600);color:#fff;font-family:var(--disp);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;padding:6px 14px;border-radius:99px;display:none}
.pkg-card.rec .pkg-rec-badge{display:block}
.pkg-name{font-family:var(--disp);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:1.05rem;color:var(--ink-dim);margin:0}
.pkg-price{margin:16px 0 2px;font-family:var(--disp);font-weight:700;font-size:2rem;line-height:1.1;color:var(--navy-900)}
.pkg-per{color:var(--gold);font-weight:700;font-size:.95rem;margin:0 0 6px}
.pkg-sub{color:var(--ink-dim);font-size:.95rem;margin:0 0 8px}
.pkg-card .checklist{margin-top:14px;gap:10px;font-size:.98rem}
.pkg-card .pkg-add{margin-top:auto;padding-top:26px}
.pkg-add-btn{width:100%;justify-content:center}
.pkg-add-btn.in-cart{background:var(--navy-900);color:#fff;box-shadow:inset 0 0 0 2px var(--gold)}
.pkg-wide{position:relative;margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:34px 30px;display:grid;grid-template-columns:1.2fr .8fr;gap:34px;box-shadow:0 6px 18px rgba(4,8,15,.05)}
@media(max-width:900px){.pkg-wide{grid-template-columns:1fr}}
.pkg-wide h3{font-size:1.5rem;font-weight:600;text-transform:uppercase}
.qty-row{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.qty-ctrl{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.qty-ctrl button{appearance:none;border:0;background:var(--mist);width:42px;height:42px;font-size:1.2rem;cursor:pointer;color:var(--navy-900)}
.qty-ctrl button:disabled{opacity:.35;cursor:not-allowed}
.qty-ctrl output{min-width:52px;text-align:center;font-family:var(--disp);font-weight:700;font-size:1.15rem}
.duty-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
@media(max-width:700px){.duty-grid{grid-template-columns:1fr}}
.duty{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px;cursor:pointer;font-size:.99rem}
.duty input{margin-top:3px;width:19px;height:19px;accent-color:var(--navy-900);flex:none}
.duty:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.rec-box{margin-top:26px;background:var(--navy-900);color:var(--ink-inv);border-radius:var(--rad);padding:24px 26px}
.rec-box h3{color:#fff;font-size:1.3rem;font-weight:600;text-transform:uppercase;margin:0}
.rec-box p{color:var(--ink-inv-dim);margin:8px 0 0}
.rec-box .rec-name{color:var(--gold-bright);font-weight:700}
.cart-panel{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:34px;box-shadow:var(--shadow)}
.cart-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.cart-list li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--line);padding-bottom:10px}
.cart-list li span:last-child{color:var(--ink-dim);white-space:nowrap}
.cart-empty{color:var(--ink-dim)}
.cart-total{margin-top:18px;font-family:var(--disp);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-900)}
.honesty{font-size:.88rem;color:var(--ink-dim);margin-top:18px}
.pkg-price .per{font-size:1.05rem;color:var(--gold);font-weight:600;margin-left:2px}
.pkg-bundles{display:grid;gap:10px;margin-top:18px}
.pkg-bundles .duty{background:var(--mist)}
.pkg-fine{margin:22px auto 0;max-width:820px;text-align:center;font-size:.9rem;color:var(--ink-dim)}

/* ---------- mobile layout repair (Oct 20) ----------
   Joel's phone review of the live preview: letters clipped/overlapped in the
   header, the utility bar wrapping mid-word and mid-number, phone-carousel
   card times wrapping, and the MESSAGE US pill sitting on headings.
   Root cause of the header mess: .utilitybar .wrap and .site-header .wrap
   carried FIXED heights (38px / 76px) — at phone widths the squeezed flex
   items wrapped their text, the content outgrew the fixed box, and
   align-items:center spilled it symmetrically over the neighbouring bands
   (ghosted wordmark over the hero, DPS line over the commercial). Below
   desktop the two bars now size to their content (height:auto + min-height
   in the <=1020px block and below), while the desktop heights stay exactly
   as approved; this block gives the header room to breathe at phone
   widths, following the approved mock's mobile behaviour (mock hides its
   mail link and shrinks the brand at <=680px). */
@media(max-width:680px){
  html{scroll-padding-bottom:84px}
  /* utility bar: one line, nothing wraps mid-word or mid-number;
     the mail link yields (contact stays in the nav, float and footer).
     Height is auto here (desktop keeps its fixed 38px — it fits there). */
  .utilitybar .wrap{height:auto;min-height:38px;gap:16px;padding-top:5px;padding-bottom:5px}
  .utilitybar a{white-space:nowrap;flex:none}
  .utilitybar .u-mail{display:none}
  /* header: brand gets the width; wordmark + DPS line stay fully visible.
     The header LOGIN button yields — LOG IN remains in the utility bar
     directly above — so the wordmark never gets squeezed into a column. */
  .site-header .wrap{gap:14px;min-height:70px;padding-top:10px;padding-bottom:10px}
  .brand{gap:10px;flex:1 1 auto;min-width:0}
  .brand img{width:38px;height:38px}
  .brand .bname{font-size:1.08rem;line-height:1.1}
  .brand .bsub{font-size:.56rem;letter-spacing:.22em;margin-top:4px}
  .header-cta{display:none}
  .nav-toggle{flex:none;padding:8px}
  /* phone carousel: track bleeds to the screen edges (mock behaviour) so a
     272px phone + an honest peek fit inside it; the page itself never
     widens — the track scrolls internally */
  .phone-track{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;scroll-padding-left:24px;scroll-padding-right:24px}
  .phone{flex-basis:min(272px,80vw)}
  /* MESSAGE US: compact pill in the corner; while the page is scrolling it
     fades out entirely (site.js toggles .mf-hide) so it can never sit on a
     heading or the carousel controls while they are being read */
  .msg-float{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:11px 16px;font-size:.82rem;letter-spacing:.08em;transition:opacity .25s ease}
  .msg-float.mf-hide{opacity:0;pointer-events:none}
}