/* ==========================================================================
   BlueRobin Cleaning Services Inc. — Design System
   Palette: deep navy (dominant) · powder blue (secondary) · gold (accent, sparing)
   ========================================================================== */

:root{
  /* Brand */
  --navy-900:#001B3D;
  --navy-800:#002A5C;
  --navy-700:#073C77;
  --navy-600:#0F4E92;

  --powder-600:#0069A8;
  --powder-500:#0080C6;
  --powder-400:#4FAEE0;
  --powder-200:#B9DDF2;
  --powder-100:#E6F2FA;
  --powder-050:#F2F8FC;

  --gold-500:#FFC20E;
  --gold-600:#E0A800;
  --gold-100:#FFF5D6;

  --maple:#D52B1E;

  /* Neutrals */
  --ink:#0E1B2A;
  --body:#4B5C6E;
  --muted:#6E7F91;
  --line:#DCE5EC;
  --line-soft:#EDF2F6;
  --bg:#FFFFFF;
  --bg-alt:#F5F8FB;

  /* System */
  --radius:14px;
  --radius-sm:9px;
  --radius-lg:22px;
  --wrap:1180px;
  --shadow-sm:0 1px 2px rgba(0,42,92,.06), 0 2px 8px rgba(0,42,92,.05);
  --shadow-md:0 2px 4px rgba(0,42,92,.05), 0 12px 32px rgba(0,42,92,.09);
  --shadow-lg:0 30px 70px rgba(0,27,61,.16);
  --ease:cubic-bezier(.22,.61,.36,1);

  --ff-display:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --ff-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.68;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block;}
a{color:var(--powder-600);text-decoration:none;}
a:hover{color:var(--navy-700);}
::selection{background:var(--powder-200);color:var(--navy-900);}

h1,h2,h3,h4,h5{
  font-family:var(--ff-display);
  color:var(--ink);
  margin:0 0 .5em;
  letter-spacing:-.021em;
  line-height:1.14;
  font-weight:700;
}
h1{font-size:clamp(2.35rem,4.6vw,3.85rem);letter-spacing:-.032em;}
h2{font-size:clamp(1.85rem,3.1vw,2.65rem);letter-spacing:-.027em;}
h3{font-size:clamp(1.16rem,1.7vw,1.36rem);line-height:1.28;}
h4{font-size:1.02rem;line-height:1.35;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
strong{color:var(--ink);font-weight:650;}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px;}
.wrap-narrow{max-width:820px;}
.section{padding:clamp(64px,8vw,110px) 0;}
.section-sm{padding:clamp(48px,5vw,72px) 0;}
.bg-alt{background:var(--bg-alt);}
.bg-powder{background:var(--powder-050);}
.bg-navy{background:var(--navy-800);color:#C9DCEC;}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff;}
.divider-top{border-top:1px solid var(--line-soft);}

.grid{display:grid;gap:26px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr;}}

/* ---------- Eyebrow / section head ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-display);
  font-size:.735rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--powder-600);margin:0 0 16px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-500);border-radius:2px;}
.bg-navy .eyebrow{color:var(--powder-400);}
.section-head{max-width:720px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .eyebrow::before{display:none;}
.lede{font-size:1.09rem;color:var(--body);}
.bg-navy .lede{color:#B6CDE2;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-display);font-size:.95rem;font-weight:650;letter-spacing:-.005em;
  padding:15px 26px;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;transition:all .22s var(--ease);white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none;}
.btn-primary{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--navy-700);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-accent{background:var(--gold-500);color:var(--navy-900);}
.btn-accent:hover{background:var(--gold-600);color:var(--navy-900);transform:translateY(-1px);box-shadow:0 10px 24px rgba(224,168,0,.28);}
.btn-ghost{background:#fff;color:var(--navy-800);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--powder-400);color:var(--navy-700);background:#fff;}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.34);}
.btn-outline-light:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff;}
.btn-lg{padding:17px 32px;font-size:1rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:13px;align-items:center;}

.link-arrow{
  font-family:var(--ff-display);font-weight:650;font-size:.92rem;
  display:inline-flex;align-items:center;gap:7px;color:var(--powder-600);
}
.link-arrow::after{content:"→";transition:transform .22s var(--ease);}
.link-arrow:hover::after{transform:translateX(4px);}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--navy-900);color:#9FBBD4;font-size:.815rem;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:42px;}
.topbar-list{display:flex;gap:24px;align-items:center;margin:0;padding:0;list-style:none;}
.topbar-list li{display:flex;align-items:center;gap:7px;}
.topbar svg{width:14px;height:14px;opacity:.75;flex:none;}
.topbar a{color:#DCE9F5;font-weight:600;}
.topbar a:hover{color:var(--gold-500);}
@media(max-width:860px){.topbar-left{display:none;}.topbar .wrap{justify-content:center;}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{display:flex;align-items:center;gap:26px;min-height:78px;}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;}
.brand-mark{width:40px;height:40px;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.brand-name{font-family:var(--ff-display);font-weight:800;font-size:1.19rem;color:var(--navy-800);letter-spacing:-.028em;}
.brand-name em{font-style:normal;color:var(--powder-500);}
.brand-sub{font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:3px;}

.nav{display:flex;align-items:center;gap:4px;}
.nav a{
  font-family:var(--ff-display);font-size:.925rem;font-weight:600;color:var(--ink);
  padding:10px 14px;border-radius:8px;transition:.18s var(--ease);
}
.nav a:hover{background:var(--powder-050);color:var(--navy-700);}
.nav a.active{color:var(--powder-600);}
.header-cta{display:flex;align-items:center;gap:12px;}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:9px;cursor:pointer;}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy-800);border-radius:2px;}
.nav-toggle span+span{margin-top:5px;}
@media(max-width:1120px){
  .nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;
    padding:12px 20px 22px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);display:none;
  }
  .nav.open{display:flex;}
  .nav a{padding:13px 8px;border-bottom:1px solid var(--line-soft);border-radius:0;}
  .nav-toggle{display:block;order:3;}
  .header-cta .btn{display:none;}
  .header-cta .btn-phone{display:inline-flex;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#CFE1F0;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(0,128,198,.42), transparent 62%),
    radial-gradient(760px 460px at 8% 108%, rgba(15,78,146,.55), transparent 60%),
    linear-gradient(158deg,#00214A 0%,#002A5C 46%,#053C74 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 70% 30%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 70% 30%,#000,transparent 72%);
}
.hero .wrap{position:relative;z-index:2;}
.hero-main{padding:clamp(70px,9vw,124px) 0 clamp(56px,6vw,84px);max-width:800px;}
.hero h1{color:#fff;}
.hero h1 .accent{
  background:linear-gradient(96deg,var(--powder-400),var(--gold-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lede{font-size:clamp(1.06rem,1.5vw,1.19rem);color:#BDD4E8;max-width:620px;margin-bottom:32px;}
.hero-pill{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  padding:8px 16px 8px 10px;border-radius:100px;
  font-family:var(--ff-display);font-size:.82rem;font-weight:600;color:#DDEBF7;
}
.hero-pill b{color:var(--gold-500);font-weight:700;}
.hero-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 4px rgba(255,194,14,.2);}
.hero-note{margin-top:20px;font-size:.87rem;color:#9FBBD4;display:flex;align-items:center;gap:8px;}
.hero-note svg{width:15px;height:15px;flex:none;color:var(--powder-400);}

/* Hero credential strip */
.credbar{border-top:1px solid rgba(255,255,255,.13);position:relative;z-index:2;}
.credbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.cred{padding:24px 26px 26px;border-right:1px solid rgba(255,255,255,.11);}
.cred:first-child{padding-left:0;}
.cred:last-child{border-right:0;}
.cred-k{font-family:var(--ff-display);font-size:1.42rem;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1;margin-bottom:7px;}
.cred-k .lf{color:var(--gold-500);}
.cred-v{font-size:.845rem;color:#9EBBD5;line-height:1.45;}
@media(max-width:860px){
  .credbar .wrap{grid-template-columns:repeat(2,1fr);}
  .cred{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.11);}
  .cred:nth-child(2n){border-right:0;}
  .cred:first-child{padding-left:18px;}
}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;transition:.26s var(--ease);height:100%;
}
.card:hover{border-color:var(--powder-200);box-shadow:var(--shadow-md);transform:translateY(-3px);}
.card h3{margin-bottom:9px;}
.card p{font-size:.945rem;line-height:1.62;margin-bottom:0;}
.card .link-arrow{margin-top:16px;}
.card-flat{border-radius:var(--radius);border:1px solid var(--line);background:#fff;padding:28px;}

.icon-box{
  width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--powder-100);color:var(--navy-700);border:1px solid var(--powder-200);
}
.icon-box svg{width:22px;height:22px;stroke-width:1.6;}
.icon-box.gold{background:var(--gold-100);border-color:#F5DF9B;color:#8A6400;}
.icon-box.leaf{background:#E7F5EC;border-color:#BFE3CC;color:#1F7A45;}

/* Industry card w/ top rule */
.ind-card{position:relative;overflow:hidden;}
.ind-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--powder-500);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.ind-card:hover::before{transform:scaleX(1);}
.ind-card ul{margin:14px 0 0;padding:0;list-style:none;}
.ind-card li{font-size:.885rem;color:var(--muted);padding-left:16px;position:relative;line-height:1.55;margin-bottom:4px;}
.ind-card li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--powder-400);}

/* ---------- Check lists ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:13px;}
.checks li{position:relative;padding-left:32px;font-size:.97rem;line-height:1.6;}
.checks li::before{
  content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--powder-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230069A8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
.checks.on-navy li{color:#C4D8EA;}
.checks.on-navy li::before{background-color:rgba(255,255,255,.13);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC20E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");}
.checks.two{grid-template-columns:1fr 1fr;gap:13px 30px;}
@media(max-width:640px){.checks.two{grid-template-columns:1fr;}}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center;}
.split.wide-left{grid-template-columns:1.2fr .8fr;}
@media(max-width:940px){.split,.split.wide-left{grid-template-columns:1fr;}}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:0;}
.step{position:relative;padding:0 0 34px 62px;counter-increment:s;}
.step:last-child{padding-bottom:0;}
.step::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--ff-display);font-weight:800;font-size:.85rem;
  background:var(--navy-800);color:#fff;
}
.step::after{content:"";position:absolute;left:20.5px;top:48px;bottom:8px;width:1px;background:var(--line);}
.step:last-child::after{display:none;}
.step h3{margin-bottom:6px;}
.step p{font-size:.94rem;margin-bottom:0;}
.bg-navy .step::before{background:var(--gold-500);color:var(--navy-900);}
.bg-navy .step::after{background:rgba(255,255,255,.16);}

/* ---------- Badges ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:10px;}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-display);font-size:.815rem;font-weight:650;
  padding:9px 15px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--ink);
}
.badge svg{width:15px;height:15px;flex:none;}
.badge-canada{border-color:#F3C7C3;background:#FDF1F0;color:#8E2018;}
.badge-canada svg{color:var(--maple);}
.badge-eco{border-color:#BFE3CC;background:#EFF8F2;color:#1B6B3C;}
.badge-eco svg{color:#1F7A45;}
.badge-navy{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#DCEAF6;}

.maple{width:16px;height:16px;color:var(--maple);flex:none;}

/* ---------- Stat / promise tiles ---------- */
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;height:100%;}
.tile .k{font-family:var(--ff-display);font-size:2.15rem;font-weight:800;color:var(--navy-800);letter-spacing:-.035em;line-height:1;margin-bottom:8px;}
.tile .v{font-size:.9rem;color:var(--muted);line-height:1.5;}

/* ---------- Quote / testimonial ---------- */
.pullquote{
  border-left:3px solid var(--gold-500);padding:4px 0 4px 26px;
  font-family:var(--ff-display);font-size:1.22rem;line-height:1.5;color:var(--ink);font-weight:500;letter-spacing:-.015em;
}
.bg-navy .pullquote{color:#EAF3FA;}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(140deg,#002A5C 0%,#073C77 62%,#0069A8 100%);
  border-radius:var(--radius-lg);padding:clamp(38px,5vw,62px);color:#C6DAEC;position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,194,14,.22),transparent 70%);
}
.cta-band > *{position:relative;z-index:2;}
.cta-band h2{color:#fff;max-width:640px;}
.cta-band p{color:#B7CFE5;max-width:600px;}

/* ---------- Forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,3.4vw,42px);box-shadow:var(--shadow-md);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1/-1;}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}.field.full{grid-column:auto;}}
.field label{font-family:var(--ff-display);font-size:.845rem;font-weight:650;color:var(--ink);}
.field label .req{color:var(--maple);}
.field .hint{font-size:.79rem;color:var(--muted);}
.field input,.field select,.field textarea{
  font-family:var(--ff-body);font-size:.955rem;color:var(--ink);
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  transition:.18s var(--ease);width:100%;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6;}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7F91' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:40px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--powder-500);box-shadow:0 0 0 3px rgba(0,128,198,.14);}
.field input:disabled{background:var(--bg-alt);}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--maple);box-shadow:0 0 0 3px rgba(213,43,30,.1);}
.err{font-size:.79rem;color:var(--maple);display:none;font-weight:500;}
.field.invalid .err{display:block;}

.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;}
@media(max-width:700px){.checkbox-grid{grid-template-columns:1fr;}}
.check-item{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;cursor:pointer;line-height:1.45;}
.check-item input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--powder-500);flex:none;cursor:pointer;}

.form-status{display:none;border-radius:var(--radius-sm);padding:16px 18px;font-size:.93rem;margin-bottom:20px;}
.form-status.show{display:block;}
.form-status.ok{background:#ECF8F0;border:1px solid #BFE3CC;color:#186B39;}
.form-status.bad{background:#FDF1F0;border:1px solid #F3C7C3;color:#8E2018;}

.form-aside{background:var(--navy-800);color:#BDD4E8;border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,40px);height:100%;}
.form-aside h3{color:#fff;}
.form-aside .phone-big{
  font-family:var(--ff-display);font-size:1.72rem;font-weight:800;color:#fff;letter-spacing:-.03em;
  display:inline-flex;align-items:center;gap:11px;margin:4px 0 4px;
}
.form-aside .phone-big:hover{color:var(--gold-500);}
.form-aside .phone-big svg{width:22px;height:22px;color:var(--gold-500);}

/* ---------- Page header (interior pages) ---------- */
.page-head{
  background:linear-gradient(150deg,#00214A,#002A5C 55%,#063E79);
  color:#BDD4E8;padding:clamp(56px,6.5vw,88px) 0 clamp(52px,6vw,78px);position:relative;overflow:hidden;
}
.page-head::after{
  content:"";position:absolute;inset:0;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 78% 20%,#000,transparent 70%);
  mask-image:radial-gradient(circle at 78% 20%,#000,transparent 70%);
}
.page-head .wrap{position:relative;z-index:2;}
.page-head h1{color:#fff;max-width:880px;font-size:clamp(2.05rem,3.9vw,3.15rem);}
.page-head .lede{color:#B6CDE2;max-width:660px;}
.crumbs{font-size:.82rem;color:#7FA3C4;margin-bottom:16px;}
.crumbs a{color:#A9C6DE;}
.crumbs a:hover{color:var(--gold-500);}

/* ---------- Anchor nav (sticky sub nav) ---------- */
.subnav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:78px;z-index:40;}
.subnav .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.subnav .wrap::-webkit-scrollbar{display:none;}
.subnav a{
  font-family:var(--ff-display);font-size:.875rem;font-weight:600;color:var(--muted);
  padding:16px 14px;white-space:nowrap;border-bottom:2px solid transparent;
}
.subnav a:hover{color:var(--navy-800);border-bottom-color:var(--powder-200);}

/* ---------- Service block ---------- */
.svc{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:30px 0;border-bottom:1px solid var(--line-soft);}
.svc:last-child{border-bottom:0;}
.svc h3{margin-bottom:7px;}
.svc p{font-size:.955rem;margin-bottom:12px;}
.svc .tags{display:flex;flex-wrap:wrap;gap:7px;}
.svc .tag{font-size:.78rem;font-weight:600;font-family:var(--ff-display);color:var(--navy-700);background:var(--powder-050);border:1px solid var(--powder-100);padding:5px 11px;border-radius:100px;}
@media(max-width:640px){.svc{grid-template-columns:1fr;gap:14px;}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--ff-display);font-weight:650;font-size:1.03rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:19px;font-size:1.5rem;font-weight:400;color:var(--powder-500);line-height:1;transition:.2s var(--ease);
}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 30px 24px 0;font-size:.955rem;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:#8FAFCB;padding:70px 0 0;font-size:.925rem;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:52px;}
@media(max-width:940px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h4{color:#fff;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px;}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.site-footer a{color:#A9C6DE;}
.site-footer a:hover{color:var(--gold-500);}
.footer-brand .brand-name{color:#fff;}
.footer-brand .brand-name em{color:var(--powder-400);}
.footer-brand .brand-sub{color:#7FA3C4;}
.footer-brand p{margin-top:18px;max-width:330px;font-size:.9rem;line-height:1.65;color:#8FAFCB;}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;}
.footer-contact svg{width:16px;height:16px;color:var(--powder-400);margin-top:3px;flex:none;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0 30px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.83rem;color:#6E92B4;
}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0;}
.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.mt-32{margin-top:32px;}
.mb-0{margin-bottom:0;}
.text-center{text-align:center;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold-500);color:var(--navy-900);padding:12px 20px;z-index:200;font-weight:700;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  *{animation:none!important;}
}

@media print{
  .site-header,.topbar,.site-footer,.subnav,.btn{display:none!important;}
  body{font-size:12pt;color:#000;}
}

/* ---------- Quote page layout ---------- */
@media(max-width:980px){
  .quote-layout{grid-template-columns:1fr!important;}
}
.form-aside .steps .step::after{left:20.5px;}
.form-aside h4{margin-bottom:5px;}

/* ---------- Small-screen refinements ---------- */
@media(max-width:860px){
  .topbar-list{flex-wrap:wrap;justify-content:center;gap:8px 18px;}
  .topbar .wrap{padding-top:8px;padding-bottom:8px;}
}
@media(max-width:660px){
  .wrap{padding:0 20px;}
  .site-header .wrap{gap:12px;min-height:68px;}
  .brand-mark{width:34px;height:34px;}
  .brand-name{font-size:1.06rem;}
  .brand-sub{font-size:.6rem;letter-spacing:.15em;}
  .header-cta .btn-phone{padding:12px;font-size:0;gap:0;}
  .header-cta .btn-phone svg{width:19px;height:19px;}
  .btn{white-space:normal;text-align:center;}
  .btn-lg{padding:15px 22px;font-size:.95rem;}
  .btn-row .btn{flex:1 1 100%;}
  .cta-band{border-radius:16px;}
  .card{padding:26px 22px;}
  .step{padding-left:54px;}
}
@media(max-width:420px){
  .subnav{top:68px;}
}

/* ---------- Layout polish ---------- */
.nav a{white-space:nowrap;}
.brand-sub{white-space:nowrap;}
.topbar-list li{white-space:nowrap;}
.split,.split.wide-left{align-items:start;}
.hero h1 .accent{
  background:linear-gradient(97deg,#5FB8E8 0%,#9BD3F0 55%,#CFE9F8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(max-width:1120px){
  .nav{gap:0;}
}

/* ---------- Header fit ---------- */
@media(min-width:1121px){
  /* the quote CTA button already covers this — keep it in the mobile menu only */
  .nav a[data-nav="quote"]{display:none;}
}
@media(max-width:1440px){
  .nav a{padding:10px 11px;font-size:.9rem;}
  .header-cta .btn-phone{display:none;}
}

/* ---------- Top bar fit ---------- */
@media(max-width:1400px){ .topbar-left li:nth-child(2){display:none;} }
@media(max-width:1080px){ .topbar-left{display:none;} }

/* ---------- Quote aside step markers ---------- */
.form-aside .step::before{background:var(--gold-500);color:var(--navy-900);}
.form-aside .step::after{background:rgba(255,255,255,.16);}

/* ---------- Hero pill on small screens ---------- */
@media(max-width:560px){
  .hero-pill{font-size:.76rem;border-radius:14px;line-height:1.45;padding:9px 15px 9px 12px;}
}

/* ==========================================================================
   Vertical rhythm — tightened and consistent across every section
   One pair of tokens drives all section spacing site-wide.
   ========================================================================== */
:root{
  --sp-section:clamp(50px,5.2vw,74px);
  --sp-section-sm:clamp(34px,3.6vw,50px);
  --sp-head:clamp(26px,2.8vw,38px);
}
.section{padding:var(--sp-section) 0;}
.section-sm{padding:var(--sp-section-sm) 0;}
.section-head{margin-bottom:var(--sp-head);}
.section-head.center{margin-bottom:var(--sp-head);}

.hero-main{padding:clamp(40px,4.6vw,62px) 0 clamp(32px,3.6vw,46px);}
.hero-lede{margin-bottom:26px;}
.hero-pill{margin-bottom:20px;}
.hero-note{margin-top:16px;}
.cred{padding:20px 26px 22px;}
.cred:first-child{padding-left:0;}

.page-head{padding:clamp(38px,4.2vw,56px) 0 clamp(34px,3.6vw,48px);}
.page-head .crumbs{margin-bottom:12px;}

.cta-band{padding:clamp(30px,3.6vw,46px);}
.card{padding:26px 24px;}
.card-flat{padding:26px 24px;}
.form-card{padding:clamp(24px,2.8vw,34px);}
.form-aside{padding:clamp(24px,2.8vw,34px);}
.svc{padding:24px 0;}
.step{padding-bottom:26px;}
.faq summary{padding:18px 44px 18px 0;}
.faq details p{padding:0 30px 20px 0;}

.site-footer{padding-top:clamp(42px,4.4vw,58px);}
.footer-grid{padding-bottom:clamp(30px,3.2vw,42px);}
.footer-bottom{padding:18px 0 26px;}

.mt-32{margin-top:26px;}
.mt-24{margin-top:20px;}

@media(max-width:660px){
  .card,.card-flat{padding:24px 20px;}
  .cred{padding:18px 16px;}
  .cred:first-child{padding-left:16px;}
}

/* every section band uses the identical rhythm */
.section-sm{padding:var(--sp-section) 0;}

/* ---------- Hero headline: single gold accent word, no sub-paragraph ---------- */
.hero h1 .accent{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:var(--gold-500);
  -webkit-text-fill-color:var(--gold-500);
}
.hero h1{margin-bottom:0;}
.hero-main .btn-row{margin-top:clamp(26px,3vw,38px);}

/* ---------- Hero eyebrow (replaces the pill) ---------- */
.hero-eyebrow{
  display:block;
  font-family:var(--ff-display);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--powder-400);
  margin:0 0 18px;
}
/* balanced blue: equal breathing room above the eyebrow and below the hero note */
.hero-main{padding:clamp(34px,3.6vw,48px) 0 clamp(34px,3.6vw,48px);}
@media(max-width:560px){
  .hero-eyebrow{font-size:.7rem;letter-spacing:.15em;margin-bottom:14px;}
}

/* ==========================================================================
   Industries carousel — auto-sliding ribbon of image tiles
   Drop photos into assets/img/industries/ using the filenames in index.html
   and they appear automatically; until then each tile shows a navy gradient.
   ========================================================================== */
.carousel{position:relative;}
.car-viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 0 6px;
  border-radius:var(--radius);
}
.car-viewport::-webkit-scrollbar{display:none;}
.car-viewport:focus-visible{outline:2px solid var(--powder-500);outline-offset:4px;}
.car-track{display:flex;gap:20px;width:max-content;}

.ind-tile{
  position:relative;flex:0 0 clamp(252px,26vw,326px);
  min-height:326px;border-radius:var(--radius);overflow:hidden;
  scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-color:var(--navy-800);
  background-image:var(--img,none),linear-gradient(158deg,#0E5091 0%,#00306B 55%,#001B3D 100%);
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ind-tile:nth-child(2n){background-image:var(--img,none),linear-gradient(158deg,#0A4784 0%,#002A5C 58%,#001631 100%);}
.ind-tile:nth-child(3n){background-image:var(--img,none),linear-gradient(158deg,#12599D 0%,#053668 55%,#001B3D 100%);}
.ind-tile:nth-child(4n){background-image:var(--img,none),linear-gradient(158deg,#0B4276 0%,#002450 60%,#00142E 100%);}
.ind-tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,20,46,.18) 0%,rgba(0,20,46,.55) 42%,rgba(0,20,46,.9) 100%);
}
.ind-tile::after{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 75% 12%,#000,transparent 70%);
  mask-image:radial-gradient(circle at 75% 12%,#000,transparent 70%);
}
.ind-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}

.ind-tile-body{position:relative;z-index:2;padding:24px 22px 22px;}
.ind-tile .icon-box{
  width:40px;height:40px;margin-bottom:16px;border-radius:10px;
  background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.24);color:#fff;
  backdrop-filter:blur(2px);
}
.ind-tile .icon-box svg{width:20px;height:20px;}
.ind-tile h3{color:#fff;font-size:1.12rem;margin-bottom:10px;}
.ind-tile ul{list-style:none;margin:0 0 16px;padding:0;}
.ind-tile li{
  position:relative;padding-left:15px;margin-bottom:5px;
  font-size:.855rem;line-height:1.5;color:#C2D8EB;
}
.ind-tile li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--gold-500);}
.tile-link{
  font-family:var(--ff-display);font-weight:650;font-size:.875rem;
  display:inline-flex;align-items:center;gap:7px;color:var(--gold-500);
}
.tile-link::after{content:"→";transition:transform .22s var(--ease);}
.tile-link:hover{color:#fff;}
.tile-link:hover::after{transform:translateX(4px);}

/* arrows */
.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--navy-800);
  box-shadow:var(--shadow-md);transition:.2s var(--ease);
}
.car-btn svg{width:19px;height:19px;}
.car-btn:hover{background:var(--navy-800);color:#fff;border-color:var(--navy-800);}
.car-prev{left:-18px;}
.car-next{right:-18px;}
@media(max-width:1260px){
  .car-prev{left:8px;}
  .car-next{right:8px;}
}
@media(max-width:700px){
  .car-btn{display:none;}
  .car-track{gap:14px;}
  .ind-tile{flex:0 0 min(78vw,300px);min-height:300px;}
}

/* ---------- Carousel controls: a right-aligned row, never over the tiles ---------- */
.car-nav{display:flex;justify-content:flex-end;gap:10px;margin:-4px 0 18px;}
.car-btn{
  position:static;transform:none;
  width:42px;height:42px;box-shadow:var(--shadow-sm);
}
.car-btn:active{transform:scale(.94);}
@media(max-width:700px){
  .car-btn{display:grid;}
  .car-nav{margin-bottom:14px;}
}

/* ---------- Carousel: transform-driven seamless loop ---------- */
.car-viewport{
  overflow:hidden;
  scroll-snap-type:none;
  scroll-behavior:auto;
  padding:10px 0 16px;
  touch-action:pan-y;
}
.car-track{will-change:transform;}
.ind-tile{scroll-snap-align:none;}

/* ==========================================================================
   Industry tile photographs
   --------------------------------------------------------------------------
   Paths below are relative to THIS file (assets/css/), so ../img/... points at
   assets/img/industries/. Drop a photo in with the matching filename and it
   appears behind that tile; if the file is missing the tile keeps its navy
   gradient and nothing breaks.
   ========================================================================== */
.ind-offices          {--img:url("../img/industries/offices.jpg");}
.ind-dealerships      {--img:url("../img/industries/dealerships.jpg");}
.ind-grocery          {--img:url("../img/industries/grocery.jpg");}
.ind-restaurants      {--img:url("../img/industries/restaurants.jpg");}
.ind-dental           {--img:url("../img/industries/dental.jpg");}
.ind-post-construction{--img:url("../img/industries/post-construction.jpg");}
.ind-industrial       {--img:url("../img/industries/industrial.jpg");}

/* a photo sits under a deeper scrim so the white text always holds up */
.ind-tile::before{
  background:linear-gradient(180deg,rgba(0,20,46,.34) 0%,rgba(0,20,46,.62) 40%,rgba(0,22,50,.93) 100%);
}

/* Photos are tinted toward brand navy so light and dark images sit together as a set */
.ind-tile::before{
  background:
    linear-gradient(180deg,rgba(0,18,42,.20) 0%,rgba(0,18,42,.58) 42%,rgba(0,20,46,.94) 100%),
    linear-gradient(0deg,rgba(0,45,98,.46),rgba(0,45,98,.46));
}

/* ==========================================================================
   Carousel arrows: flanking the tiles, vertically centred
   The control row is dissolved (display:contents) so the buttons position
   against .carousel itself — which also reclaims ~60px of vertical space.
   ========================================================================== */
.car-nav{display:contents;}
.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;
}
.car-btn:hover{transform:translateY(-50%);}
.car-btn:active{transform:translateY(-50%) scale(.94);}

/* wide screens: the arrows live in the page margin, clear of the tiles */
@media(min-width:1261px){
  .car-prev{left:-58px;right:auto;}
  .car-next{right:-58px;left:auto;}
}
/* mid screens: a gutter on each side of the ribbon holds the arrows */
@media(max-width:1260px){
  .carousel{padding:0 54px;}
  .car-prev{left:0;right:auto;}
  .car-next{right:0;left:auto;}
}
/* phones: swipe instead — no gutters stealing tile width */
@media(max-width:700px){
  .carousel{padding:0;}
  .car-btn{display:none;}
}

/* ==========================================================================
   Industry tabs (industries.html)
   ========================================================================== */
.tabs{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:clamp(24px,3vw,34px);
  padding-bottom:2px;
}
.tab{
  font-family:var(--ff-display);font-size:.9rem;font-weight:650;letter-spacing:-.005em;
  padding:11px 18px;border-radius:100px;cursor:pointer;white-space:nowrap;
  background:#fff;border:1px solid var(--line);color:var(--body);
  transition:.2s var(--ease);
}
.tab:hover{border-color:var(--powder-400);color:var(--navy-700);background:var(--powder-050);}
.tab.is-active{
  background:var(--navy-800);border-color:var(--navy-800);color:#fff;
  box-shadow:0 6px 18px rgba(0,42,92,.22);
}
.tab.is-active:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff;}
.tab:focus-visible{outline:2px solid var(--powder-500);outline-offset:3px;}
@media(max-width:760px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{font-size:.85rem;padding:10px 15px;}
}

.tab-panel[hidden]{display:none;}
.tab-panel .split{align-items:stretch;}
.tab-panel.is-active{animation:tabIn .38s var(--ease);}
@keyframes tabIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.tab-panel.is-active{animation:none;}}

/* the photo panel */
.tab-visual{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  background-color:var(--navy-800);
  background-image:var(--img,none),linear-gradient(158deg,#0E5091 0%,#00306B 55%,#001B3D 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.tab-visual::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,18,42,.18) 0%,rgba(0,18,42,.56) 44%,rgba(0,20,46,.93) 100%),
    linear-gradient(0deg,rgba(0,45,98,.44),rgba(0,45,98,.44));
}
.tab-visual::after{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 78% 12%,#000,transparent 70%);
  mask-image:radial-gradient(circle at 78% 12%,#000,transparent 70%);
}
.tab-visual-body{position:relative;z-index:2;padding:clamp(26px,3vw,38px);}
.tab-visual .eyebrow{color:var(--powder-400);margin-bottom:12px;}
.tab-visual h2{
  color:#fff;margin:0;
  font-size:clamp(1.42rem,2.3vw,2rem);line-height:1.16;
}
@media(max-width:940px){
  .tab-visual{min-height:250px;}
}

/* ==========================================================================
   Industry tabs — navy ribbon with the active tab merging into the panel
   ========================================================================== */
.tabwrap{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  background:#fff;
}

.tabs{
  display:flex;flex-wrap:nowrap;gap:0;margin:0;padding:0;
  background:var(--navy-800);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.tabs::-webkit-scrollbar{display:none;}

.tab{
  position:relative;flex:0 0 auto;
  font-family:var(--ff-display);font-size:.92rem;font-weight:650;letter-spacing:-.005em;
  padding:17px 24px 16px;white-space:nowrap;cursor:pointer;
  background:transparent;border:0;border-radius:0;
  color:#A9C6DE;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.tab::after{
  content:"";position:absolute;right:0;top:14px;bottom:14px;width:1px;
  background:rgba(255,255,255,.12);
}
.tab:last-child::after{display:none;}
.tab:hover{background:rgba(255,255,255,.09);color:#fff;}

.tab.is-active,
.tab.is-active:hover{
  background:#fff;color:var(--navy-800);
  border-radius:12px 12px 0 0;
  box-shadow:none;
}
.tab.is-active::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--gold-500);
  border-radius:12px 12px 0 0;
}
.tab.is-active::after{display:none;}
.tab:focus-visible{outline:2px solid var(--gold-500);outline-offset:-3px;}

.tab-panels{background:#fff;padding:clamp(24px,3vw,38px);}
.tab-panel .split{align-items:stretch;gap:clamp(28px,3.4vw,48px);}
.tab-visual{border-radius:var(--radius);min-height:330px;}
.tab-scope h3{margin-bottom:18px;}

@media(max-width:760px){
  .tab{font-size:.86rem;padding:15px 17px 14px;}
  .tab-visual{min-height:220px;}
}

/* the "not on the list" strip lives inside the same card as the tabs */
.tab-footer{
  border-top:1px solid var(--line);
  background:var(--bg-alt);
  padding:clamp(24px,3vw,34px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,40px);align-items:center;
}
.tab-footer .eyebrow{margin-bottom:10px;}
.tab-footer h3{margin-bottom:8px;}
.tab-footer p{font-size:.93rem;line-height:1.6;margin:0;max-width:620px;}
.tab-footer .btn-row{flex-wrap:wrap;justify-content:flex-end;}
@media(max-width:900px){
  .tab-footer{grid-template-columns:1fr;}
  .tab-footer .btn-row{justify-content:flex-start;}
}

/* the gold header CTA keeps a little more presence against white */
.header-cta .btn-accent{box-shadow:0 2px 10px rgba(224,168,0,.28);}

/* single-button footer strip: give the copy room, keep the button snug right */
.tab-footer{grid-template-columns:minmax(0,1fr) auto;align-items:center;}
.tab-footer p{max-width:660px;}
.tab-footer .btn-row{flex:0 0 auto;}
@media(max-width:900px){
  .tab-footer{gap:22px;}
}

/* ==========================================================================
   Industry tab bar — white, evenly spread, underlined active tab
   (overrides the navy ribbon treatment above)
   ========================================================================== */
.tabs{
  background:#fff;
  border-bottom:1px solid var(--line);
  justify-content:space-between;
  padding:0 clamp(10px,1.4vw,18px);
}
.tab{
  color:var(--muted);
  font-weight:600;
  padding:18px 14px 16px;
  border-bottom:3px solid transparent;
  background:transparent;
}
.tab::after{display:none;}
.tab.is-active::before{display:none;}
.tab:hover{
  background:transparent;
  color:var(--navy-800);
  border-bottom-color:var(--powder-200);
}
.tab.is-active,
.tab.is-active:hover{
  background:transparent;
  color:var(--navy-800);
  font-weight:700;
  border-radius:0;
  border-bottom-color:var(--gold-500);
}
.tab:focus-visible{outline:2px solid var(--powder-500);outline-offset:-4px;}

@media(max-width:1100px){
  .tabs{justify-content:flex-start;padding:0 6px;}
  .tab{padding:16px 13px 14px;}
}
@media(max-width:760px){
  .tab{font-size:.86rem;padding:15px 11px 13px;}
}

/* interior page headers share the home hero's eyebrow and vertical rhythm */
.page-head{padding:clamp(34px,3.6vw,48px) 0;}
.page-head .hero-eyebrow{color:var(--powder-400);margin-bottom:18px;}
.page-head h1{margin-bottom:0;}
.page-head .lede{margin-top:18px;}

/* ==========================================================================
   Industry tab bar — full-bleed, edge to edge, matching the services subnav
   ========================================================================== */
.tabbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;top:78px;z-index:40;
}
.tabbar .wrap{padding:0 28px;}
.tabs{
  background:transparent;
  border-bottom:0;
  padding:0;
  justify-content:space-between;
}
.tab{
  padding:18px 4px 15px;
  border-bottom:3px solid transparent;
  color:var(--muted);font-weight:600;
}
.tab:hover{color:var(--navy-800);border-bottom-color:var(--powder-200);background:transparent;}
.tab.is-active,
.tab.is-active:hover{
  color:var(--navy-800);font-weight:700;
  background:transparent;border-radius:0;
  border-bottom-color:var(--powder-500);
}

/* the panel and the CTA strip are now plain page bands */
.tab-panels{background:transparent;padding:0;}
.tab-footer{border-top:0;background:transparent;padding:0;}

@media(max-width:1100px){
  .tabs{justify-content:flex-start;gap:6px;}
  .tab{padding:16px 10px 13px;}
}
@media(max-width:760px){
  .tabbar .wrap{padding:0 20px;}
  .tab{font-size:.86rem;padding:15px 9px 12px;}
}
@media(max-width:660px){
  .tabbar{top:68px;}
}

/* ==========================================================================
   Service panel visuals — gradient variants (no photo needed)
   To add a photo later, drop a file in assets/img/services/ and uncomment the
   matching rule below, e.g.  .svc-janitorial{--img:url("../img/services/janitorial.jpg");}
   ========================================================================== */
.gv-1{background-image:var(--img,none),linear-gradient(158deg,#0E5091 0%,#00306B 55%,#001B3D 100%);}
.gv-2{background-image:var(--img,none),linear-gradient(158deg,#0A4784 0%,#002A5C 58%,#001631 100%);}
.gv-3{background-image:var(--img,none),linear-gradient(158deg,#12599D 0%,#053668 55%,#001B3D 100%);}
.gv-4{background-image:var(--img,none),linear-gradient(158deg,#0B4276 0%,#002450 60%,#00142E 100%);}

/* nine tabs need a little less air than seven */
@media(min-width:1101px){
  .tabbar .tabs{gap:2px;}
}

/* ==========================================================================
   No utility bar — the header carries the phone number itself
   ========================================================================== */
@media(min-width:1281px){
  .header-cta .btn-phone{display:inline-flex;}
}
@media(max-width:1440px){
  .nav a{padding:10px 10px;font-size:.885rem;}
}

/* ==========================================================================
   Service panel photographs
   Paths are relative to this file (assets/css/), so ../img/services/ points at
   assets/img/services/. Add a file with the matching name and uncomment its
   line; a missing file simply leaves the navy gradient in place.
   ========================================================================== */
.svc-janitorial      {--img:url("../img/services/janitorial.jpg");}
.svc-dayporter       {--img:url("../img/services/dayporter.jpg");}
.svc-washrooms       {--img:url("../img/services/washrooms.jpg");}
.svc-floorcare       {--img:url("../img/services/floorcare.jpg");}
.svc-windows         {--img:url("../img/services/windows.jpg");}
.svc-disinfection    {--img:url("../img/services/disinfection.jpg");}
.svc-postconstruction{--img:url("../img/services/postconstruction.jpg");}
.svc-seasonal        {--img:url("../img/services/seasonal.jpg");}
.svc-supplies        {--img:url("../img/services/supplies.jpg");}

/* a section that opens straight onto its cards needs less air above */
.section-tight{padding-top:clamp(30px,3vw,42px);}
.section-head.head-label{margin-bottom:clamp(18px,2vw,26px);}
.section-head.head-label .eyebrow{margin-bottom:0;}

/* ==========================================================================
   Hero portrait — the studio backdrop is black, so a screen blend drops it
   straight out onto the navy and an elliptical mask feathers the rest away.
   ========================================================================== */
.hero-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);
  align-items:end;
  max-width:none;
}
.hero-copy{max-width:660px;}
.hero-figure{
  align-self:end;
  margin-bottom:calc(-1 * clamp(34px,3.6vw,48px));
  pointer-events:none;
}
.hero-figure img{
  display:block;
  width:clamp(250px,25vw,340px);
  height:auto;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 44%, #000 52%, rgba(0,0,0,.55) 76%, transparent 100%);
  mask-image:radial-gradient(ellipse 60% 58% at 50% 44%, #000 52%, rgba(0,0,0,.55) 76%, transparent 100%);
}
@media(max-width:1000px){
  .hero-main{grid-template-columns:1fr;}
  .hero-figure{display:none;}
}

/* the portrait must blend against the hero itself, so isolate the hero and
   drop the decorative grid behind the content rather than above it */
.hero{isolation:isolate;}
.hero::after{z-index:-1;}
.hero .wrap{z-index:auto;}
.credbar{position:relative;z-index:1;}

/* slightly larger figure, tighter feather so the studio glow reads as rim light */
.hero-figure img{
  width:clamp(260px,27vw,378px);
  -webkit-mask-image:radial-gradient(ellipse 57% 55% at 50% 42%, #000 48%, rgba(0,0,0,.45) 74%, transparent 97%);
  mask-image:radial-gradient(ellipse 57% 55% at 50% 42%, #000 48%, rgba(0,0,0,.45) 74%, transparent 97%);
}

/* ==========================================================================
   Hero portrait — hard-edged cut-out, no blending
   ========================================================================== */
.hero{isolation:auto;}
.hero::after{z-index:auto;}
.hero .wrap{z-index:2;}
.hero-figure img{
  width:clamp(250px,25vw,352px);
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
  filter:drop-shadow(0 22px 40px rgba(0,10,26,.38));
}

/* centre the hero copy so the navy above and below it is even; the portrait
   still stands on the credentials bar */
.hero-copy{align-self:center;}

/* ==========================================================================
   Header dropdown menus (Industries / Services)
   The parent link still goes to the page; the menu is a shortcut straight to
   one tab. Opens on hover and on keyboard focus.
   ========================================================================== */
.nav-item{display:flex;flex-direction:column;}
.nav-item>a{display:inline-flex;align-items:center;gap:5px;}
.nav-caret{
  width:12px;height:12px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.5;
  transition:transform .18s var(--ease),opacity .18s var(--ease);
}
.nav-menu{display:flex;flex-direction:column;}
.nav-menu a{font-family:var(--ff-display);font-weight:600;white-space:nowrap;}

@media(min-width:1121px){
  .nav{align-self:stretch;}
  .nav-item{position:relative;align-self:stretch;justify-content:center;}
  .nav-item:hover>a,.nav-item:focus-within>a{background:var(--powder-050);color:var(--navy-700);}
  .nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg);opacity:.85;}
  .nav-menu{
    position:absolute;top:100%;left:0;min-width:238px;z-index:70;
    background:#fff;border:1px solid var(--line);border-radius:12px;
    box-shadow:0 18px 40px rgba(0,26,58,.14),0 2px 8px rgba(0,26,58,.06);
    padding:8px;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px);
    transition:opacity .17s var(--ease),transform .17s var(--ease),visibility .17s;
  }
  .nav-item:hover>.nav-menu,.nav-item:focus-within>.nav-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  }
  .nav-menu a{font-size:.885rem;padding:9px 12px;border-radius:8px;color:var(--ink);}
  .nav-menu a:hover{background:var(--powder-050);color:var(--powder-600);}
  .nav-menu-all{
    margin-top:6px;padding-top:12px!important;border-top:1px solid var(--line-soft);
    border-radius:0 0 8px 8px;color:var(--powder-600)!important;
  }
}

@media(max-width:1120px){
  .nav-item{display:block;}
  .nav-item>a{display:flex;}
  .nav-caret{display:none;}
  .nav-menu{padding:4px 0 10px 14px;}
  .nav-menu a{
    padding:9px 8px;font-size:.885rem;color:var(--muted);
    border-bottom:none;border-radius:6px;
  }
  .nav-menu a:hover{color:var(--powder-600);background:transparent;}
  .nav-menu-all{color:var(--powder-600);}
}

/* deep-linked tab panels clear the sticky header + tab bar */
.tab-panel{scroll-margin-top:150px;}

/* ---------- Header fit with the dropdown carets ----------
   The phone button is hidden on desktop by default and switched back on by
   main.js only when it genuinely fits, so the header can never overflow no
   matter how wide the fonts render. */
@media(min-width:1121px){
  .site-header .wrap{gap:18px;}
  .nav{gap:2px;}
  .nav a{padding:10px 10px;}
  .header-cta .btn-phone{display:none;}
  .site-header.phone-fits .header-cta .btn-phone{display:inline-flex;}
}
.site-header.measuring .nav-menu{display:none;}

@media(min-width:1121px){
  .brand-sub{letter-spacing:.155em;}
  .nav a{padding:10px 9px;}
  .header-cta{gap:10px;}
  .header-cta .btn-phone{padding-left:13px;padding-right:13px;}
}

/* ---------- Credentials bar: short statements, no sub-copy ---------- */
.cred{display:flex;align-items:center;padding-top:22px;padding-bottom:22px;}
.cred-k{
  font-size:1rem;font-weight:700;line-height:1.32;
  letter-spacing:-.012em;margin-bottom:0;
}
@media(max-width:1120px){
  .credbar .wrap{grid-template-columns:repeat(2,1fr);}
  .cred{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.11);}
  .cred:nth-child(2n){border-right:0;}
  .cred:nth-child(n+3){border-bottom:0;}
  .cred:first-child{padding-left:18px;}
}

/* ---------- Credentials bar: short statements, no sub-copy ---------- */
.cred{display:flex;align-items:center;padding-top:22px;padding-bottom:22px;}
.cred-k{
  font-size:1rem;font-weight:700;line-height:1.32;
  letter-spacing:-.012em;margin-bottom:0;
}
@media(max-width:1120px){
  .credbar .wrap{grid-template-columns:repeat(2,1fr);}
  .cred{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.11);}
  .cred:nth-child(2n){border-right:0;}
  .cred:nth-child(n+3){border-bottom:0;}
  .cred:first-child{padding-left:18px;}
}

/* ---------- Hero: tighter navy above the portrait, even above/below the copy ---------- */
@media(min-width:861px){
  .hero-main{
    --hpad:clamp(18px,1.9vw,26px);
    padding-top:var(--hpad);
    padding-bottom:var(--hpad);
  }
  .hero-figure{margin-bottom:calc(-1 * var(--hpad));}
}

/* two sections sharing the same tint read as one band, so drop the doubled gap */
.section.bg-alt + .section.bg-alt{padding-top:0;}

/* ---------- CTA band: copy left, buttons stacked on the right ---------- */
@media(min-width:861px){
  .cta-band{display:flex;align-items:center;gap:clamp(30px,3.6vw,58px);}
  .cta-copy{flex:1 1 auto;min-width:0;}
  .cta-band .cta-actions{
    flex:0 0 auto;flex-direction:column;align-items:stretch;
    margin-top:0;min-width:250px;
  }
  .cta-band .cta-actions .btn{width:100%;justify-content:center;}
  .cta-band .cta-copy > *:last-child{margin-bottom:0;}
}

/* ---------- Credentials bar: glowing gold bullets instead of rules ---------- */
.cred,
.cred:first-child,
.cred:nth-child(2n),
.cred:nth-child(n+3){border-right:0;border-bottom:0;}
.cred-k{position:relative;padding-left:22px;}
.cred-k::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:var(--gold-500);
  box-shadow:0 0 0 4px rgba(255,194,14,.15),0 0 14px 3px rgba(255,194,14,.55);
}

/* ---------- Brand mark (loon + mop lockup) ---------- */
.brand-mark{width:auto;height:42px;flex:none;overflow:visible;}
.site-footer .brand-mark,
.hero .brand-mark,
.cta-band .brand-mark{
  --mk-body:#E9F2FB;
  --mk-spot:#0B2A57;
  --mk-wave:#4FAEE0;
  --mk-wave2:#7FC6EC;
  --mk-mop:#9FC6E4;
}
@media(max-width:560px){
  .brand-mark{height:36px;}
}

/* ---------- Brand logo (raster lockup) ---------- */
.brand{display:flex;align-items:center;margin-right:auto;gap:0;}
.brand-logo{display:block;width:auto;height:46px;}
.site-footer .brand-logo{height:52px;}
@media(max-width:1440px){ .brand-logo{height:42px;} }
@media(max-width:560px){ .brand-logo{height:36px;} .site-footer .brand-logo{height:42px;} }

/* ---------- Footer: logo left, Services/Industries stacked ---------- */
.footer-grid{grid-template-columns:1.4fr 1fr 1.1fr;}
@media(max-width:940px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-nav{display:grid;gap:16px;align-content:start;}
.footer-nav h4{margin-bottom:0;}
.footer-nav h4 a{color:#fff;}
.footer-nav h4 a:hover{color:var(--gold-500);}
.site-footer .brand-logo{height:56px;}
@media(max-width:560px){.site-footer .brand-logo{height:46px;}}

/* ---------- Footer: contact laid out horizontally, no heading ---------- */
@media(min-width:941px){
  .footer-grid{
    grid-template-columns:auto auto 1fr;
    gap:clamp(28px,4vw,60px);
    align-items:center;
  }
  .site-footer .footer-contact{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
    gap:10px clamp(18px,2.4vw,34px);
  }
  .footer-contact li{align-items:center;}
  .footer-contact svg{margin-top:0;}
  .footer-nav{gap:12px;}
}
@media(max-width:940px){
  .site-footer .footer-contact{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;}
  .footer-contact li{align-items:center;}
  .footer-contact svg{margin-top:0;}
}

/* Services and Industries side by side on one line */
@media(min-width:941px){
  .footer-nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,36px);}
}
@media(max-width:940px){
  .footer-nav{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;}
}

/* Our story: one left-aligned column */
.story-block{max-width:none;margin-left:0;margin-right:0;text-align:left;}

/* About: the story heading is now the page h1 */
.story-title{font-size:clamp(1.95rem,3.3vw,2.85rem);letter-spacing:-.028em;}

/* Green page: "why it matters" as a plain checklist */
.green-checks{max-width:880px;gap:20px;}
.green-checks li{font-size:1rem;line-height:1.68;padding-left:36px;}
.green-checks li::before{top:.3em;}

/* Hero note sits evenly between the buttons and the credentials bar */
@media(min-width:861px){
  .hero-copy{
    align-self:stretch;display:flex;flex-direction:column;
    margin-top:calc(-1 * var(--hpad,26px));
    margin-bottom:calc(-1 * var(--hpad,26px));
  }
  .hero-copy > :first-child{margin-top:auto;}
  .hero-copy .hero-note{margin-top:auto;margin-bottom:auto;}
}

/* half the usual top padding */
.section.section-half-top{padding-top:calc(var(--sp-section) / 2);}

/* ---------- Service-area map ---------- */
.map-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 22px 54px rgba(0,8,22,.38);
  background:#0B3364;
}
.service-map{width:100%;height:clamp(330px,40vw,520px);}
.map-fallback{
  padding:26px 28px;margin:0;color:#B7CFE5;font-size:.95rem;line-height:1.9;
}
.service-map.is-live + .map-fallback{display:none;}
.map-note{
  margin:14px 0 0;font-size:.85rem;color:#8FAFCB;
}
.leaflet-container{font-family:var(--ff-body);background:#DDE6EE;}
.leaflet-container a{color:var(--powder-600);}
.leaflet-control-attribution{font-size:.68rem;background:rgba(255,255,255,.86);}
.leaflet-tooltip.town-tip{
  background:var(--navy-800);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:7px;padding:5px 9px;font-family:var(--ff-display);
  font-size:.78rem;font-weight:700;letter-spacing:.005em;box-shadow:0 6px 18px rgba(0,10,26,.35);
}
.leaflet-tooltip.town-tip::before{border-top-color:var(--navy-800);}
.leaflet-bar a{color:var(--navy-800);}
.town-pin{filter:drop-shadow(0 2px 4px rgba(0,20,45,.35));}

/* Service-area intro runs the full width, matching the map below it */
.section-head.section-head-wide{max-width:none;}
.section-head.section-head-wide h2{max-width:none;}
.section-head.section-head-wide .lede{max-width:none;}

/* Mute the OSM tiles so the gold pins read as the focus */
.service-map .leaflet-tile-pane{
  filter:grayscale(.62) contrast(.9) brightness(1.06) saturate(.85);
}

/* ==========================================================================
   Journey map — How we work
   ========================================================================== */
.journey{position:relative;padding-top:16px;}
.journey-band{position:relative;height:118px;margin-bottom:10px;}
.journey-wave{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.journey-wave path{
  fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;
}
.journey-wave .wave-base{stroke:var(--powder-500);stroke-width:2.5;opacity:.45;}

/* a slow current of colour travelling left to right along the wave */
.journey-wave .wave-flow{stroke-width:3;}
@media(prefers-reduced-motion:reduce){
  .journey-wave .wave-flow{display:none;}
}
.journey-dot{
  position:absolute;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--gold-500);border:3px solid var(--navy-800);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-weight:800;font-size:1.02rem;color:var(--navy-800);
  box-shadow:0 0 0 7px rgba(255,194,14,.15);
}
.journey-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:28px;
}
.journey-steps .when{
  display:block;font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--powder-600);font-weight:700;margin-bottom:7px;
}
.journey-steps h3{font-size:1rem;margin-bottom:8px;letter-spacing:-.018em;}
.journey-steps p{font-size:.895rem;line-height:1.63;color:var(--muted);margin:0;}

@media(max-width:1079px){
  .journey-band{display:none;}
  .journey-steps{
    grid-template-columns:1fr;gap:0;position:relative;
    padding-left:58px;counter-reset:jstep;
  }
  .journey-steps::before{
    content:"";position:absolute;left:21px;top:14px;bottom:26px;
    width:2px;background:var(--powder-100);
  }
  .journey-steps li{position:relative;padding-bottom:30px;}
  .journey-steps li:last-child{padding-bottom:0;}
  .journey-steps li::before{
    counter-increment:jstep;content:counter(jstep);
    position:absolute;left:-58px;top:-3px;width:44px;height:44px;border-radius:50%;
    background:var(--gold-500);border:3px solid var(--navy-800);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--ff-display);font-weight:800;font-size:1.02rem;color:var(--navy-800);
    box-shadow:0 0 0 6px rgba(255,194,14,.13);
  }
}
@media(max-width:560px){
  .journey-steps{padding-left:50px;}
  .journey-steps li::before{left:-50px;width:38px;height:38px;font-size:.94rem;}
  .journey-steps::before{left:18px;}
}


/* ---------- Hero portrait caption ----------
   Absolutely positioned so it costs the hero no height: the photo and the
   credbar stay exactly where they were. Sits in the clear blue to the right
   of his head, level with the eyebrow line. Hidden with the photo <=1000px. */
@media(min-width:1001px){
  .hero-figure{position:relative;margin-top:0;margin-left:0;margin-right:0;}
  .hero-figcap{
    position:absolute;top:4px;right:0;width:46%;
    text-align:right;line-height:1.2;pointer-events:auto;z-index:2;
  }
  .figcap-name{
    display:block;color:#fff;font-weight:700;
    font-size:clamp(.98rem,1.1vw,1.08rem);letter-spacing:.005em;
  }
  .figcap-role{
    display:block;margin-top:.2rem;color:rgba(255,255,255,.7);
    font-size:clamp(.75rem,.82vw,.82rem);letter-spacing:.015em;
  }
}


/* small footnote line under a section's content */
.section-note{
  margin:26px 0 0;
  font-size:.86rem;
  color:var(--muted);
  line-height:1.6;
}

/* ==========================================================================
   Mobile navigation: a self-scrolling drawer with collapsible sub-menus
   The panel used to be an absolutely positioned block inside the sticky
   header, so anything past the fold was unreachable — the page scrolled
   behind it instead. It is now fixed, capped to the viewport and scrolls
   on its own, with the page locked while it is open.
   ========================================================================== */
@media(max-width:1120px){
  .nav{
    position:fixed;
    top:var(--header-h,78px);
    left:0;right:0;
    max-height:calc(100vh - var(--header-h,78px));
    max-height:calc(100dvh - var(--header-h,78px));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:calc(26px + env(safe-area-inset-bottom,0px));
  }

  /* sub-menus stay closed until their row is tapped */
  .nav-menu{display:none;}
  .nav-item.open>.nav-menu{display:flex;}

  /* the caret is the affordance that says "this opens" */
  .nav-caret{display:block;margin-left:auto;opacity:.55;}
  .nav-item>a{justify-content:space-between;}
  .nav-item.open>a{color:var(--powder-600);}
  .nav-item.open>a .nav-caret{transform:rotate(180deg);opacity:.85;}
}

/* page behind the open drawer must not scroll */
body.nav-locked{overflow:hidden;}

/* the phone number's memory aid, footer only */
.tel-mnemonic{
  margin-left:9px;
  font-size:.82rem;
  color:#7FA3C4;
  white-space:nowrap;
}
.tel-mnemonic b{
  color:#A9C6DE;
  font-weight:600;
  letter-spacing:.03em;
}