/* Expert Hot Water & Plumbing — design system
   Tokens taken from Brand Guidelines v1.2 (July 2026).
   Deep Teal is a web-only addition: brand teal is 2.19:1 on white and fails WCAG AA for text. */

:root{
  --teal:#30C0D2;
  --teal-deep:#0E6B77;
  --pink:#EC1F52;
  --ink:#000000;
  --charcoal:#3A3A3A;
  --slate:#6E6E6E;
  --fog:#F2F2F2;
  --white:#FFFFFF;
  --line:#E3E5E7;
  --line-dark:#2A2A2A;

  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --font-head:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --header-h:76px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
  --shadow-md:0 2px 4px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.08);
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--charcoal);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);margin:0 0 var(--s4);line-height:1.14;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.15rem,1.35rem + 2.6vw,3.35rem)}
h2{font-size:clamp(1.7rem,1.15rem + 1.9vw,2.6rem)}
h3{font-size:1.2rem;line-height:1.3;font-weight:600;letter-spacing:-.01em}
h4{font-size:1.02rem;font-weight:600;letter-spacing:0}
p{margin:0 0 var(--s4)}
a{color:var(--teal-deep);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
ul,ol{margin:0 0 var(--s4);padding-left:1.15em}
li{margin-bottom:var(--s2)}
strong{color:var(--ink);font-weight:600}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 32px}}
.section{padding:clamp(56px,8vw,104px) 0}
.section--tight{padding:clamp(40px,5vw,64px) 0}
.section--fog{background:var(--fog)}
.section--ink{background:var(--ink);color:#D8DADC}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:var(--white)}
.section--ink a{color:var(--teal)}
.section--ink a:hover{color:var(--white)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---------- eyebrow + heads ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-weight:600;font-size:.78rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--teal-deep);
  margin:0 0 var(--s4);
}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--pink);border-radius:2px;flex:none}
.section--ink .eyebrow{color:var(--teal)}
.head{max-width:44rem}
.head--center{margin:0 auto;text-align:center}
.head p{font-size:1.1rem;color:var(--slate);margin-bottom:0}
.section--ink .head p{color:#B9BDC0}
.lead{font-size:1.14rem;line-height:1.62}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:14px 26px;border-radius:var(--r-pill);
  font-family:var(--font-head);font-weight:600;font-size:1.02rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn svg{flex:none}
.btn--primary{background:var(--ink);color:var(--white);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:#1c1c1c;color:var(--white);box-shadow:var(--shadow-md)}
.btn--light{background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn--light:hover{background:var(--fog);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:#C9CCCF}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.section--ink .btn--ghost{color:var(--white);border-color:#4A4A4A}
.section--ink .btn--ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex;align-items:center;gap:var(--s5);min-height:var(--header-h);max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media(min-width:768px){.header__inner{padding:0 32px}}
.brand{display:flex;align-items:center;flex:none;margin-right:auto}
.brand img{height:38px;width:auto}
@media(min-width:1024px){.brand img{height:44px}}

.nav{display:none}
@media(min-width:1080px){
  .nav{display:block}
  .nav>ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
  .nav>ul>li{margin:0;position:relative}
  .nav a,.nav .navbtn{
    display:flex;align-items:center;gap:5px;padding:10px 13px;border-radius:var(--r-xs);
    font-family:var(--font-head);font-weight:600;font-size:.93rem;color:var(--ink);
    text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--font-head);
  }
  .nav a:hover,.nav .navbtn:hover{background:var(--fog)}
  .nav a[aria-current="page"]{color:var(--teal-deep);box-shadow:inset 0 -2px 0 var(--pink)}
  .nav .chev{transition:transform .2s var(--ease)}
  .nav li:hover .chev,.nav .navbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .submenu{
    position:absolute;top:calc(100% + 6px);left:0;min-width:264px;background:var(--white);
    border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);
    padding:8px;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:.18s var(--ease);
  }
  .nav li:hover .submenu,.submenu:focus-within,.submenu.open{opacity:1;visibility:visible;transform:none}
  .submenu li{margin:0}
  .submenu a{font-weight:500;font-size:.92rem;padding:9px 12px}
}
.header__cta{display:none;align-items:center;gap:var(--s3);flex:none}
@media(min-width:1080px){.header__cta{display:flex}}
.header__phone{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;
  font-size:1rem;color:var(--ink);text-decoration:none;padding:8px 6px;
}
.header__phone svg{color:var(--pink)}
.header__phone:hover{color:var(--teal-deep)}
.header__cta .btn{min-height:46px;padding:11px 22px;font-size:.95rem}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:12px;background:none;border:1px solid var(--line);
  border-radius:var(--r-xs);cursor:pointer;flex:none;
}
@media(min-width:1080px){.burger{display:none}}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobilenav{display:none;border-top:1px solid var(--line);background:var(--white);max-height:calc(100vh - var(--header-h));overflow-y:auto}
.mobilenav.open{display:block}
@media(min-width:1080px){.mobilenav,.mobilenav.open{display:none}}
.mobilenav ul{list-style:none;margin:0;padding:8px 20px 24px}
.mobilenav li{margin:0}
.mobilenav a{display:block;padding:14px 4px;font-family:var(--font-head);font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobilenav .grp{padding:20px 4px 6px;font-family:var(--font-head);font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.mobilenav .sub a{padding-left:14px;font-weight:500}

/* mobile sticky call bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:99;display:flex;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);
}
.callbar .btn{flex:1;min-height:52px;font-size:.98rem;padding:12px 14px}
@media(min-width:1080px){.callbar{display:none}}
@media(max-width:1079px){body{padding-bottom:82px}}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#CFD2D4;position:relative;overflow:hidden;padding:clamp(52px,7vw,92px) 0 0}
.hero::after{
  content:"";position:absolute;top:-220px;right:-180px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(48,192,210,.20) 0%,rgba(48,192,210,0) 68%);pointer-events:none;
}
.hero__grid{position:relative;z-index:1;display:grid;gap:var(--s6);align-items:center}
@media(min-width:960px){.hero__grid{grid-template-columns:1.08fr .92fr;gap:var(--s8)}}
.hero h1{color:var(--white);margin-bottom:var(--s5)}
.hero .lead{color:#B9BDC0;max-width:34rem}
.hero .btn-row{margin-top:var(--s6)}
.hero__aside{
  border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:var(--s6);
  background:linear-gradient(160deg,#141414 0%,#0A0A0A 100%);
}
.hero__aside h2{font-size:1.12rem;font-weight:600;letter-spacing:0;margin-bottom:var(--s4)}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:1rem;line-height:1.5}
.checklist li:last-child{margin-bottom:0}
.checklist svg{flex:none;margin-top:3px;color:var(--teal)}

.trustbar{border-top:1px solid var(--line-dark);margin-top:clamp(48px,6vw,72px);position:relative;z-index:1}
.trustbar ul{
  list-style:none;margin:0;padding:var(--s5) 0;display:grid;gap:var(--s4) var(--s6);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:760px){.trustbar ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trustbar li{margin:0;display:flex;flex-direction:column;gap:2px}
.trustbar .n{font-family:var(--font-head);font-weight:700;font-size:1.32rem;color:var(--white);line-height:1.15;display:flex;align-items:center;gap:7px}
.trustbar .n svg{color:var(--pink)}
.trustbar .t{font-size:.86rem;color:#9AA0A4;line-height:1.4}

/* page hero (inner pages) */
.phero{background:var(--ink);color:#B9BDC0;padding:clamp(44px,6vw,76px) 0 clamp(48px,6vw,80px);position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;top:-260px;left:-140px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(48,192,210,.16) 0%,rgba(48,192,210,0) 70%);pointer-events:none}
.phero__grid{position:relative;z-index:1;display:grid;gap:var(--s5)}
@media(min-width:900px){.phero__grid{grid-template-columns:1.25fr .75fr;gap:var(--s8);align-items:end}}
.phero h1{color:var(--white)}
.phero .lead{color:#B9BDC0;margin-bottom:0}
.phero .btn-row{margin-top:var(--s5)}

.crumbs{position:relative;z-index:1;font-size:.85rem;color:#8E9497;margin-bottom:var(--s5)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li{margin:0;display:flex;gap:8px;align-items:center}
.crumbs li+li::before{content:"/";color:#4C5154}
.crumbs a{color:#8E9497;text-decoration:none}
.crumbs a:hover{color:var(--teal)}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:var(--s4)}
@media(min-width:640px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:640px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:640px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s5);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.card h3{margin-bottom:var(--s2)}
.card p{color:var(--slate);font-size:.98rem;margin-bottom:0}
.card--link:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#CFD3D6}
.card__link::after{content:"";position:absolute;inset:0;border-radius:var(--r-md)}
.card__more{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s4);font-family:var(--font-head);font-weight:600;font-size:.93rem;color:var(--teal-deep);text-decoration:none}
.card--link:hover .card__more{gap:11px;color:var(--ink)}
.card__more svg{transition:transform .2s var(--ease)}
.section--ink .card{background:#111;border-color:var(--line-dark)}
.section--ink .card p{color:#A8AEB2}
.section--fog .card{border-color:#DDE0E2}

.ico{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:var(--r-sm);background:rgba(48,192,210,.13);color:var(--teal-deep);margin-bottom:var(--s4);
}
.section--ink .ico{background:rgba(48,192,210,.14);color:var(--teal)}

/* split */
.split{display:grid;gap:var(--s6)}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}}
.split--wide{grid-template-columns:1fr}
@media(min-width:900px){.split--wide{grid-template-columns:1.1fr .9fr}}
.split img{border-radius:var(--r-lg);width:100%;object-fit:cover}
.figure{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--fog)}
.figure figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:56px 20px 20px;font-size:.88rem;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 38%,rgba(0,0,0,.45) 70%,rgba(0,0,0,0) 100%);
}
.figure figcaption b{display:block;font-family:var(--font-head);font-size:1rem;color:#fff}

/* steps */
/* auto-fit, not viewport media queries. The old rule set four columns at 1060px+ of
   VIEWPORT width, with no idea the grid might be sitting in a half-width column. On the
   suburb pages that gave two items four tracks of 118px, about 71px of usable text, one
   word per line. Sizing to the container makes it correct wherever it is placed. */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.steps li{counter-increment:s;margin:0;padding:var(--s5) var(--s5) var(--s5);border-top:3px solid var(--line);position:relative}
.steps li::before{
  content:"0" counter(s);display:block;font-family:var(--font-head);font-weight:700;font-size:.9rem;
  color:var(--teal-deep);letter-spacing:.06em;margin-bottom:var(--s3);
}
.steps li:first-child{border-top-color:var(--pink)}
.steps h3{font-size:1.08rem;margin-bottom:6px}
.steps p{font-size:.96rem;color:var(--slate);margin:0}
.section--ink .steps li{border-top-color:var(--line-dark)}
.section--ink .steps li::before{color:var(--teal)}
.section--ink .steps p{color:#A8AEB2}

/* reviews */
.rev{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);display:flex;flex-direction:column}
.stars{display:flex;gap:3px;color:var(--pink);margin-bottom:var(--s4)}
.rev blockquote{margin:0 0 var(--s5);font-size:1.04rem;line-height:1.6;color:var(--ink)}
.rev cite{margin-top:auto;font-style:normal;font-size:.9rem;color:var(--slate)}
.rev cite b{display:block;font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:.98rem}
.ratingline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.ratingline .score{font-family:var(--font-head);font-weight:700;font-size:2.4rem;color:var(--ink);line-height:1}

/* areas */
.arealist{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.arealist{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.arealist{grid-template-columns:repeat(5,minmax(0,1fr))}}
.arealist li{margin:0}
.arealist a{
  display:flex;align-items:center;min-height:52px;padding:12px 16px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--white);color:var(--ink);text-decoration:none;
  font-family:var(--font-head);font-weight:600;font-size:.95rem;transition:.18s var(--ease);
}
.arealist a:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{margin:0}
.chips span,.chips a{display:inline-block;padding:7px 14px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line);font-size:.9rem;color:var(--charcoal);text-decoration:none}
.section--ink .chips span,.section--ink .chips a{background:#111;border-color:var(--line-dark);color:#B9BDC0}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);
  padding:22px 0;cursor:pointer;list-style:none;font-family:var(--font-head);font-weight:600;
  font-size:1.06rem;color:var(--ink);min-height:52px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:20px;height:20px;margin-top:3px;background:currentColor;transition:transform .2s var(--ease);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;color:var(--teal-deep)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 24px;max-width:56rem;color:var(--charcoal)}
.faq details>div p:last-child{margin-bottom:0}

/* cta band */
.ctaband{background:var(--ink);color:#B9BDC0;text-align:center;padding:clamp(56px,7vw,96px) 0;position:relative;overflow:hidden}
.ctaband::after{content:"";position:absolute;left:50%;top:-320px;transform:translateX(-50%);width:800px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(48,192,210,.18) 0%,rgba(48,192,210,0) 70%);pointer-events:none}
.ctaband>.wrap{position:relative;z-index:1}
.ctaband h2{color:var(--white);max-width:22ch;margin:0 auto var(--s4)}
.ctaband p{max-width:46ch;margin:0 auto var(--s6);font-size:1.08rem}
.ctaband .btn-row{justify-content:center}

/* form */
.formcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow-sm)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-family:var(--font-head);font-weight:600;font-size:.93rem;color:var(--ink);margin-bottom:7px}
.field .hint{display:block;font-weight:400;font-size:.85rem;color:var(--slate);margin-top:-3px;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:13px 15px;border:1px solid #C9CCCF;border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:1rem;color:var(--ink);background:var(--white);
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal-deep);outline:3px solid rgba(14,107,119,.22);outline-offset:0}
.field--2{display:grid;gap:var(--s4)}
@media(min-width:620px){.field--2{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px}

.contactlist{list-style:none;margin:0;padding:0}
.contactlist li{display:flex;gap:14px;align-items:flex-start;margin-bottom:var(--s5)}
.contactlist svg{flex:none;margin-top:3px;color:var(--teal)}
.contactlist b{display:block;font-family:var(--font-head);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#8E9497;font-weight:600;margin-bottom:3px}
.contactlist a{font-family:var(--font-head);font-weight:600;font-size:1.1rem;text-decoration:none}

/* prose */
.prose{max-width:44rem}
.prose h2{margin-top:var(--s7)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s6)}
.prose ul li::marker{color:var(--teal-deep)}

/* footer */
.footer{background:var(--ink);color:#9AA0A4;padding:clamp(52px,6vw,80px) 0 0;font-size:.95rem}
.footer__grid{display:grid;gap:var(--s6)}
@media(min-width:700px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--s7)}}
.footer h3,.footer h4{color:var(--teal);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:var(--s4);font-weight:700}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:11px}
.footer a{color:#B9BDC0;text-decoration:none}
.footer a:hover{color:var(--teal)}
.footer__logo{height:44px;width:auto;margin-bottom:var(--s4)}
.footer__lic{margin-top:var(--s4);font-size:.85rem;color:#7E8488;line-height:1.6}
.footer__bottom{border-top:1px solid var(--line-dark);margin-top:clamp(40px,5vw,64px);padding:var(--s5) 0;display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;font-size:.86rem;color:#7E8488}
.footer__bottom p{margin:0}
.social{display:flex;gap:10px;margin-top:var(--s4)}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-dark);border-radius:var(--r-sm);color:#B9BDC0}
.social a:hover{border-color:var(--teal);color:var(--teal)}

/* utilities */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.stack>*+*{margin-top:var(--s4)}
.note{background:var(--fog);border-left:3px solid var(--teal);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s5);font-size:.98rem}
.note p:last-child{margin-bottom:0}
.section--ink .note{background:#111;border-left-color:var(--teal);color:#B9BDC0}

/* motion */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .btn:hover{transform:none}
}
@media print{.header,.callbar,.footer,.ctaband{display:none}}


/* ---- QA fixes: dark-surface inheritance for hero, page hero and CTA band ---- */
.hero h2,.hero h3,.hero h4,
.phero h2,.phero h3,.phero h4,
.ctaband h3,.ctaband h4,
.hero__aside h2,.hero__aside h3{color:var(--white)}
.hero .btn--ghost,.phero .btn--ghost,.ctaband .btn--ghost{color:var(--white);border-color:#4A4A4A}
.hero .btn--ghost:hover,.phero .btn--ghost:hover,.ctaband .btn--ghost:hover{border-color:var(--teal);color:var(--teal);background:transparent}
.hero a,.phero a,.ctaband a{color:var(--teal)}
.hero .btn--light,.phero .btn--light,.ctaband .btn--light{color:var(--ink)}
.hero .btn--light:hover,.phero .btn--light:hover,.ctaband .btn--light:hover{color:var(--ink)}
.hero .checklist li,.phero .checklist li{color:#CFD2D4}

/* light checklist, for use on white and fog surfaces */
.checklist--light li{color:var(--charcoal)}
.checklist--light svg{color:var(--teal-deep)}

/* keep the section head from stranding on very wide screens */
.head--wide{max-width:52rem}

/* mobile menu as a fixed overlay panel, so the header never grows past the viewport */
/* the header uses backdrop-filter, which makes it the containing block for fixed children,
   so the panel stays in flow and the header itself is capped and scrolls instead */
.header.is-open{max-height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobilenav{max-height:none}
body.menu-open{overflow:hidden}

/* Dark-surface inheritance, round two.
   Global rules set strong{color:var(--ink)} and a:hover{color:var(--ink)}, which render
   black on black inside the hero, page heroes, ink sections and the CTA band. */
.section--ink strong,.hero strong,.phero strong,.ctaband strong,
.section--ink .note strong,.hero__aside strong{color:var(--white)}
.hero a:hover,.phero a:hover,.ctaband a:hover{color:var(--white)}

/* Measured-contrast fixes (Playwright audit, 1 Sep 2026).
   .hero/.phero/.ctaband are dark but carry no .section--ink class, so the ink-surface
   overrides never reached them. Both of these were failing WCAG AA on the rendered page. */
.hero .eyebrow,.phero .eyebrow,.ctaband .eyebrow{color:var(--teal)}
.hero .eyebrow::before,.phero .eyebrow::before,.ctaband .eyebrow::before{background:var(--pink)}
.section--ink .btn--light,.section--ink .btn--light:hover,
.section--ink .btn--light:focus{color:var(--ink)}

/* Checklist text inside the dark cards was #CFD2D4 on the hero surfaces and inherited
   body charcoal elsewhere, both hard to read on the near-black gradient. White throughout. */
.hero__aside .checklist li,
.hero .checklist li,.phero .checklist li{color:var(--white)}
.hero__aside .checklist li svg,
.hero .checklist li svg,.phero .checklist li svg{color:var(--teal)}
/* the light variant used on white and fog surfaces is unaffected */
.checklist--light li{color:var(--charcoal)}
.checklist--light li svg{color:var(--teal-deep)}