/* ============================================================
   Austin Leak Detection Expert — style.css
   Design tokens sourced from the approved Kadence Build Kit.
   Single stylesheet. No inline CSS anywhere on the site.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Palette */
  --c-tide:#0b7a8f;
  --c-copper:#e0894a;
  --c-copper-hover:#f2a367;
  --c-abyss:#062635;
  --c-deepwater:#0b3448;
  --c-slate:#436070;
  --c-fog:#a9c4d0;
  --c-mist:#cfe1e8;
  --c-paper:#f2f8fa;
  --c-white:#fcfeff;
  --c-aqua:#4cc9dc;
  --c-tide-hover:#09677a;

  /* Semantic */
  --color-heading:var(--c-abyss);
  --color-body:var(--c-slate);
  --color-body-dark:var(--c-fog);
  --color-link:var(--c-tide);
  --color-link-hover:var(--c-deepwater);
  --bg-site:var(--c-white);

  /* Typography */
  --font-heading:"Bricolage Grotesque", Georgia, serif;
  --font-body:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1:56px; --fs-h1-tab:44px; --fs-h1-mob:36px;
  --fs-h2:40px; --fs-h2-tab:34px; --fs-h2-mob:28px;
  --fs-h3:28px; --fs-h3-card:22px; --fs-h3-tab:24px; --fs-h3-mob:22px;
  --fs-h4:22px; --fs-h4-tab:20px; --fs-h4-mob:19px;
  --fs-h5:18px; --fs-h5-mob:17px;
  --fs-eyebrow:14px;
  --fs-body:17px; --fs-body-mob:16px;
  --fs-lead:19px; --fs-lead-mob:18px;
  --fs-small:15px; --fs-small-mob:14px;

  /* Radius */
  --radius-pill:999px;
  --radius-icon:16px;
  --radius-card:24px;
  --radius-picture:28px;

  /* Spacing scale (multiples of 8) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-6:48px; --sp-8:64px; --sp-12:96px;

  --row-pad-y:96px; --row-pad-y-tab:72px; --row-pad-y-mob:56px;
  --col-gap:32px; --col-gap-tab:24px; --col-gap-mob:20px;
  --card-pad:32px; --card-pad-mob:22px;

  /* Shadow */
  --shadow-card:0 22px 44px -32px rgba(6,38,53,.40);
  --shadow-card-hover:0 28px 54px -30px rgba(6,38,53,.55);
  --shadow-call-glow:0 14px 30px -14px rgba(224,137,74,.85);
  --shadow-dropdown:0 24px 48px -24px rgba(6,38,53,.45);
  --shadow-picture:0 40px 80px -40px rgba(0,0,0,.6);

  --content-max:1290px;
  --content-edge:24px;
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:84px; overflow-x:hidden;}
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--color-body);
  background:var(--bg-site);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--color-link); text-decoration:none;}
a:hover{color:var(--color-link-hover);}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:3px solid var(--c-aqua); outline-offset:2px;}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--color-heading);
  margin:0 0 var(--sp-2);
  letter-spacing:-0.02em;
}
h1{font-size:var(--fs-h1); line-height:1.06; letter-spacing:-0.03em;}
h2{font-size:var(--fs-h2); line-height:1.12; letter-spacing:-0.025em;}
h3{font-size:var(--fs-h3); line-height:1.2;}
h4{font-size:var(--fs-h4); line-height:1.25;}
h5{font-size:var(--fs-h5); line-height:1.3;}
p{margin:0 0 var(--sp-2);}
.lead{font-size:var(--fs-lead); line-height:1.6;}
.small{font-size:var(--fs-small); line-height:1.5; font-weight:500;}

mark.aqua{background:none; color:var(--c-aqua);}

.container{max-width:var(--content-max); margin:0 auto; padding:0 var(--content-edge);}

.section{padding:var(--row-pad-y) 0;}
.section--light{background:var(--c-paper);}
.section--white{background:var(--c-white);}
.section--dark{background:var(--c-deepwater); color:var(--color-body-dark);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--c-white);}
.section--dark p{color:var(--color-body-dark);}
.section--abyss{background:var(--c-abyss); color:var(--color-body-dark);}

.eyebrow{
  display:block; font-family:var(--font-body); font-size:var(--fs-eyebrow);
  font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--c-tide); margin:0 0 12px;
}
.section--dark .eyebrow,.section--abyss .eyebrow{color:var(--c-aqua);}

.section-heading{max-width:62ch; margin-bottom:var(--sp-6);}
.section-heading.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-heading p{color:var(--color-body);}
.section--dark .section-heading p,.section--abyss .section-heading p{color:var(--color-body-dark);}

/* ---------- 3. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:17px;
  padding:14px 28px; border-radius:var(--radius-pill);
  min-height:44px; border:none; transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn::before{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .55s ease;
}
.btn:hover::before{left:140%;}
.btn svg{width:20px; height:20px; flex:none; transition:transform .25s ease;}
.btn-call{background:var(--c-copper); color:var(--c-abyss); box-shadow:var(--shadow-call-glow);}
.btn-call:hover{background:var(--c-copper-hover); color:var(--c-abyss); transform:translateY(-2px); box-shadow:0 10px 28px rgba(224,137,74,.45);}
.btn-call:hover svg{transform:rotate(-8deg) scale(1.1);}
.btn-secondary{background:var(--c-tide); color:var(--c-white);}
.btn-secondary:hover{background:var(--c-tide-hover); color:var(--c-white); transform:translateY(-2px);}
.btn-outline{background:transparent; color:var(--c-tide); border:2px solid var(--c-tide); padding:12px 26px;}
.btn-outline:hover{background:var(--c-tide); color:var(--c-white); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--c-white); border:2px solid rgba(255,255,255,.45); padding:12px 26px;}
.btn-ghost:hover{border-color:var(--c-aqua); color:var(--c-aqua); transform:translateY(-2px);}
.btn-large{min-height:60px; font-size:18px; padding:16px 32px;}
.btn-small{min-height:44px; font-size:15px; padding:10px 22px;}
.btn-block{width:100%;}

/* ---------- 4. Pill / chips ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px; width:fit-content;
  padding:8px 16px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:var(--color-body-dark); font-size:14px; font-weight:700;
}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--c-aqua); flex:none; box-shadow:0 0 0 0 rgba(76,201,220,.6); animation:pill-pulse 2.2s ease-out infinite;}
@keyframes pill-pulse{
  0%{box-shadow:0 0 0 0 rgba(76,201,220,.55);}
  70%{box-shadow:0 0 0 7px rgba(76,201,220,0);}
  100%{box-shadow:0 0 0 0 rgba(76,201,220,0);}
}
@media (prefers-reduced-motion: reduce){.pill .dot{animation:none;}}

.chip-list{display:flex; flex-wrap:wrap; gap:12px;}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
  border-radius:var(--radius-pill); border:1px solid var(--c-mist);
  background:var(--c-white); color:var(--c-abyss); font-size:15px; font-weight:600;
  transition:border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.chip:hover{border-color:var(--c-tide); color:var(--c-tide); transform:translateY(-2px); box-shadow:var(--shadow-card);}
.chip svg{width:18px; height:18px; transition:transform .25s ease;}
.chip:hover svg{transform:scale(1.12);}
.section--dark .chip,.section--abyss .chip{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--c-white);}
.section--dark .chip:hover,.section--abyss .chip:hover{border-color:var(--c-aqua); color:var(--c-aqua);}

/* ---------- 5. Cards / grid ---------- */
.grid{display:grid; gap:var(--col-gap);}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--c-white); border:1px solid var(--c-mist); border-radius:var(--radius-card);
  padding:var(--card-pad); box-shadow:var(--shadow-card); transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg, var(--c-tide), var(--c-aqua)); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.card:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-5px); border-color:var(--c-fog);}
.card:hover::before{transform:scaleX(1);}
.section--light .card{background:var(--c-white);}
.section--white .card{background:var(--c-paper);}
.card--dark{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); color:var(--color-body-dark);}
.card--dark h3,.card--dark h4{color:var(--c-white);}
.card--dark:hover{border-color:rgba(76,201,220,.4);}

.icon-tile{
  width:56px; height:56px; border-radius:var(--radius-icon);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-2);
  background:rgba(11,122,143,.10); color:var(--c-tide); flex:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease;
}
.icon-tile svg{width:26px; height:26px;}
.card:hover .icon-tile{transform:scale(1.08) rotate(-4deg); background:var(--c-tide); color:var(--c-white);}
.card--dark:hover .icon-tile{background:var(--c-aqua); color:var(--c-abyss);}
.section--dark .icon-tile,.section--abyss .icon-tile,.card--dark .icon-tile{background:rgba(76,201,220,.14); color:var(--c-aqua);}

.card h3{font-size:var(--fs-h3-card); margin-bottom:8px;}
.card p{margin-bottom:0;}
.learn-more{display:inline-flex; align-items:center; margin-top:var(--sp-2); font-weight:700; color:var(--c-tide); transition:letter-spacing .2s ease, transform .2s ease;}
.learn-more:hover{text-decoration:underline; letter-spacing:.3px; transform:translateX(2px);}

.number-badge{
  width:44px; height:44px; border-radius:50%; background:var(--c-abyss); color:var(--c-copper);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-heading);
  font-weight:700; font-size:20px; margin-bottom:var(--sp-2); flex:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}
.card:hover .number-badge{transform:scale(1.08); background:var(--c-copper); color:var(--c-abyss);}

/* ---------- 6. Check list ---------- */
.check-list li{display:flex; align-items:flex-start; gap:14px; margin-bottom:14px;}
.check-list .check-text{flex:1; min-width:0;}
.check-list li:last-child{margin-bottom:0;}
.check-list .tick{
  width:28px; height:28px; border-radius:50%; background:rgba(11,122,143,.10); color:var(--c-tide);
  display:flex; align-items:center; justify-content:center; flex:none; margin-top:2px;
}
.check-list .tick svg{width:16px; height:16px;}
.section--dark .check-list .tick,.section--abyss .check-list .tick{background:rgba(76,201,220,.14); color:var(--c-aqua);}

/* ---------- 7. Split section (picture + text) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--col-gap); align-items:stretch;}
.split .split-picture{
  border-radius:var(--radius-picture); overflow:hidden; min-height:420px;
  border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow-picture); position:relative;
}
.split .split-picture svg{width:100%; height:100%; display:block;}
.split .split-picture img{width:100%; height:100%; display:block; object-fit:cover;}
.split .split-text{
  border-radius:var(--radius-picture); border:1px solid var(--c-mist);
  background:var(--c-white); padding:var(--card-pad); display:flex; flex-direction:column; justify-content:center;
}
.split.split--reverse{grid-template-columns:1fr 1fr;}
.split.split--reverse .split-picture{order:2;}
.split.split--reverse .split-text{order:1;}

/* ---------- 8. FAQ / accordion ---------- */
.faq-grid{display:grid; grid-template-columns:2fr 3fr; gap:var(--col-gap); align-items:start;}
.faq-callcard{
  margin-top:var(--sp-4); padding:var(--sp-3); border-radius:var(--radius-card);
  background:var(--c-abyss); color:var(--c-white);
}
.faq-callcard p{color:var(--color-body-dark); margin-bottom:var(--sp-2);}

.accordion-item{
  background:var(--c-paper); border:1px solid var(--c-mist); border-radius:18px;
  padding:0; margin-bottom:12px; overflow:hidden;
}
.accordion-item.is-open,.accordion-item[open]{background:var(--c-white); border-color:var(--c-tide);}
.accordion-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 26px; font-family:var(--font-heading); font-weight:700; font-size:19px; color:var(--c-abyss);
}
.accordion-item summary::-webkit-details-marker{display:none;}
.accordion-item summary .icon-plusminus{flex:none; width:22px; height:22px; position:relative;}
.accordion-item summary .icon-plusminus::before,.accordion-item summary .icon-plusminus::after{
  content:""; position:absolute; background:var(--c-tide); border-radius:2px;
}
.accordion-item summary .icon-plusminus::before{width:100%; height:2px; top:50%; left:0; transform:translateY(-50%);}
.accordion-item summary .icon-plusminus::after{height:100%; width:2px; left:50%; top:0; transform:translateX(-50%); transition:transform .2s ease;}
.accordion-item[open] summary .icon-plusminus::after{transform:translateX(-50%) scaleY(0);}
.accordion-item .accordion-body{padding:0 26px 22px; font-size:17px; color:var(--color-body);}

/* ---------- 9. CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg,var(--c-deepwater),var(--c-tide));
  position:relative; overflow:hidden; border-radius:var(--radius-picture);
  padding:var(--sp-6) var(--sp-4);
}
.cta-band::after{
  content:""; position:absolute; top:-20%; right:-10%; width:60%; height:140%;
  background:radial-gradient(circle,rgba(76,201,220,.18),transparent 70%); pointer-events:none;
}
.cta-band-inner{display:grid; grid-template-columns:3fr 2fr; gap:var(--col-gap); align-items:center; position:relative; z-index:1;}
.cta-band h2{color:var(--c-white);}
.cta-band p{color:rgba(255,255,255,.88);}
.cta-band .cta-right{text-align:right;}
.cta-band .cta-right .small{color:var(--c-white); display:block; margin-top:10px;}

/* ---------- 10. Header ---------- */
.site-header{
  background:var(--c-abyss); position:sticky; top:0; z-index:100; height:80px;
  display:flex; align-items:center; transition:height .2s ease, background .2s ease;
}
.site-header.is-stuck{height:64px; background:rgba(6,38,53,.94); box-shadow:0 10px 30px -18px rgba(0,0,0,.6);}
.site-header .container{display:flex; align-items:center; justify-content:space-between; width:100%;}
.site-logo{display:flex; align-items:center; gap:10px; color:var(--c-white);}
.site-logo svg{width:40px; height:40px; flex:none;}
.site-logo .logo-text{display:flex; flex-direction:column; line-height:1.15;}
.site-logo .logo-text .l1{font-family:var(--font-heading); font-weight:800; font-size:22px; color:var(--c-white);}
.site-logo .logo-text .l2{font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-fog);}

.primary-nav{display:flex; align-items:center; gap:28px;}
.primary-nav > ul{display:flex; align-items:center; gap:28px;}
.primary-nav > ul > li > a{color:var(--c-white); font-weight:600; font-size:16px; position:relative; padding-bottom:2px;}
.primary-nav > ul > li > a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--c-aqua); transition:width .25s ease;
}
.primary-nav > ul > li > a:hover{color:var(--c-aqua);}
.primary-nav > ul > li > a:hover::after{width:100%;}
.primary-nav a{color:var(--c-white); font-weight:600; font-size:16px;}
.primary-nav a:hover{color:var(--c-aqua);}
.primary-nav .has-dropdown{position:relative;}
.primary-nav .dropdown{
  position:absolute; top:calc(100% + 14px); left:0; min-width:260px; background:var(--c-white);
  border-radius:18px; box-shadow:var(--shadow-dropdown); padding:10px; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.primary-nav .has-dropdown:hover .dropdown,.primary-nav .has-dropdown:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.primary-nav .dropdown li a{display:block; padding:11px 12px; border-radius:10px; color:var(--c-abyss); font-size:15px; font-weight:600;}
.primary-nav .dropdown li a:hover{background:var(--c-paper); color:var(--c-tide);}
.primary-nav .dropdown.dropdown-2col{display:grid; grid-template-columns:1fr 1fr; min-width:380px;}

.header-actions{display:flex; align-items:center; gap:18px;}
.mobile-call-btn,.menu-toggle{display:none;}
.menu-toggle{
  width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:10px; flex:none;
}
.menu-toggle svg,.mobile-call-btn svg{width:20px; height:20px; flex:none;}
.mobile-call-btn{width:44px; height:44px; padding:0; border-radius:50%; flex:none;}

/* Mobile menu drawer */
.mobile-drawer{
  position:fixed; top:0; right:0; height:100%; width:318px; max-width:86vw; background:var(--c-abyss);
  z-index:200; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column;
}
.mobile-drawer.is-open{transform:translateX(0);}
.mobile-drawer-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:199; opacity:0; visibility:hidden; transition:opacity .25s ease;}
.mobile-drawer-overlay.is-open{opacity:1; visibility:visible;}
.mobile-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; color:var(--c-white);}
.mobile-drawer-head button{background:none; border:none; color:var(--c-white); font-size:28px; line-height:1;}
.mobile-drawer-nav{padding:0 12px; overflow-y:auto; flex:1;}
.mobile-drawer-nav li{border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-drawer-nav > ul > li > a,.mobile-drawer-nav .submenu-toggle{
  display:flex; align-items:center; justify-content:space-between; padding:16px 12px; color:var(--c-white);
  font-size:17px; font-weight:600; width:100%; background:none; border:none; text-align:left;
}
.mobile-drawer-nav .submenu{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.mobile-drawer-nav .submenu.is-open{max-height:800px;}
.mobile-drawer-nav .submenu li a{padding:12px 12px 12px 24px; display:block; color:var(--c-fog); font-size:15px;}
.mobile-drawer-foot{padding:20px 24px;}

/* Sticky mobile call bar */
.call-bar{display:none;}

/* ---------- 11. Footer ---------- */
.site-footer{background:var(--c-abyss); color:var(--c-fog);}
.footer-top{padding:96px 0 56px; display:grid; grid-template-columns:1.25fr .85fr 1.3fr 1fr; gap:var(--col-gap);}
.footer-top h4{color:var(--c-white); font-size:18px; margin-bottom:var(--sp-2);}
.footer-brand .site-logo{margin-bottom:var(--sp-2);}
.footer-brand p{max-width:34ch; color:var(--c-fog);}
.footer-nap{margin-top:var(--sp-2); font-size:15px;}
.footer-nap div{display:flex; align-items:flex-start; gap:10px; margin-bottom:10px;}
.footer-nap svg{width:18px; height:18px; flex:none; color:var(--c-aqua); margin-top:2px;}
.footer-nap a{color:var(--c-fog);}
.footer-top a{color:var(--c-fog); font-size:15px;}
.footer-top a:hover{color:var(--c-aqua);}
.footer-areas-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
.footer-areas-grid li{margin-bottom:10px;}
.footer-services li{margin-bottom:10px;}
.footer-contact p{margin-bottom:8px; font-size:15px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding:28px 0;}
.footer-bottom .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.footer-bottom p{margin:0; font-size:14px; color:var(--c-fog);}
.footer-legal{display:flex; gap:20px;}
.footer-legal a{font-size:14px; color:var(--c-fog);}
.footer-referral-note{font-size:13px; color:var(--c-fog); opacity:.8; max-width:980px; margin:0 0 20px;}

/* ---------- 12. Breadcrumbs ---------- */
.breadcrumbs{
  font-size:14px; color:var(--color-body-dark);
  background:linear-gradient(160deg,var(--c-abyss),var(--c-deepwater));
  padding:14px 0;
}
.breadcrumbs .container{padding-top:0; padding-bottom:0;}
.breadcrumbs a{color:var(--color-body-dark);}
.breadcrumbs a:hover{color:var(--c-aqua);}
.breadcrumbs .sep{margin:0 8px; opacity:.6;}
.breadcrumbs .current{color:var(--c-white);}

/* ---------- 13. Page hero (inner pages) ---------- */
.page-hero{
  background:linear-gradient(160deg,var(--c-abyss),var(--c-deepwater)); position:relative; overflow:hidden;
  padding:40px 0 64px;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px; pointer-events:none; mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.page-hero::after{
  content:""; position:absolute; top:-10%; right:-8%; width:50%; height:120%;
  background:radial-gradient(circle,rgba(76,201,220,.16),transparent 70%); pointer-events:none;
}
.page-hero .container{position:relative; z-index:1;}
.page-hero-grid{display:grid; grid-template-columns:55% 45%; gap:var(--col-gap); align-items:center;}
.page-hero h1{color:var(--c-white);}
.page-hero p{color:var(--c-fog);}
.page-hero .btn-row{display:flex; gap:16px; margin-top:var(--sp-3); flex-wrap:wrap;}
.page-hero-picture{
  border-radius:var(--radius-picture); overflow:hidden; aspect-ratio:14/11; box-shadow:var(--shadow-picture);
  border:1px solid rgba(255,255,255,.14); animation:hero-float 5s ease-in-out infinite;
}
.page-hero-picture svg{width:100%; height:100%; display:block;}
.page-hero-picture img{width:100%; height:100%; display:block; object-fit:cover;}
@keyframes hero-float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
.photo-frame{position:relative;}
.photo-frame.photo-frame--caption::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,38,53,.72) 0%, rgba(6,38,53,.15) 38%, transparent 62%);
  pointer-events:none;
}
.photo-caption{
  position:absolute; left:18px; bottom:18px; right:18px; z-index:1;
  display:inline-flex; align-items:center; gap:8px; width:fit-content; max-width:calc(100% - 36px);
  background:rgba(8,34,48,.82); color:var(--c-white); border:1px solid rgba(255,255,255,.2);
  padding:9px 16px; border-radius:var(--radius-pill); font-size:13px; font-weight:700;
  backdrop-filter:blur(2px);
}
.photo-caption .dot{width:7px; height:7px; border-radius:50%; background:var(--c-aqua); flex:none;}
.photo-frame--contain img{object-fit:contain !important; background:var(--c-abyss,#062635);}
@media (prefers-reduced-motion: reduce){.page-hero-picture{animation:none;}}
.leak-ping{animation:leak-ping 2s ease-out infinite; transform-box:fill-box; transform-origin:center;}
@keyframes leak-ping{
  0%{opacity:1; transform:scale(1);}
  70%{opacity:0; transform:scale(2.4);}
  100%{opacity:0; transform:scale(2.4);}
}
@media (prefers-reduced-motion: reduce){.leak-ping{animation:none;}}

/* ---------- 14. Sidebar ---------- */
.with-sidebar{display:grid; grid-template-columns:2fr 1fr; gap:var(--col-gap); align-items:start;}
.sidebar{display:flex; flex-direction:column; gap:16px; position:sticky; top:100px;}
.sidebar .card{padding:28px;}
.sidebar .card h4{margin-bottom:10px;}
.sidebar .link-list li{border-bottom:1px solid var(--c-mist);}
.sidebar .link-list li:last-child{border-bottom:none;}
.sidebar .link-list a{display:flex; align-items:center; justify-content:space-between; padding:16px 0; height:52px; color:var(--c-abyss); font-weight:600;}
.sidebar .link-list a:hover{color:var(--c-tide);}
.sidebar .link-list svg{width:16px; height:16px;}
.sidebar .card--dark .btn{margin-top:var(--sp-2);}

/* ---------- 15. Stats ---------- */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--col-gap); text-align:center;}
.stat-item .stat-number{font-family:var(--font-heading); font-weight:700; font-size:40px; color:var(--c-aqua);}
.stat-item .stat-label{font-size:15px; color:var(--color-body-dark); margin-top:6px;}

/* ---------- 16. Glossary / definition list ---------- */
.glossary-list dt{font-family:var(--font-heading); font-weight:700; font-size:19px; color:var(--c-abyss); margin-top:var(--sp-3);}
.glossary-list dd{margin:6px 0 0; color:var(--color-body);}

/* ---------- 16b. Prose (resource articles) ---------- */
.prose{margin:0 auto;}
.prose h2{margin-top:40px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:var(--fs-h4); margin-top:28px; margin-bottom:10px;}
.prose p{margin-bottom:16px;}
.prose ul,.prose ol{margin:0 0 16px 22px;}
.prose li{margin-bottom:8px;}
.prose .callout{
  background:var(--c-paper); border:1px solid var(--c-mist); border-left:4px solid var(--c-tide);
  border-radius:12px; padding:18px 20px; margin:20px 0; font-size:15px; color:var(--color-body);
}
.section--dark .prose .callout,.section--abyss .prose .callout{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); border-left-color:var(--c-aqua); color:var(--color-body-dark);}

/* ---------- 17. Utility ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
/* Reveal animation is strictly opt-in via JS: content is fully visible by
   default so it never depends on JavaScript running or an observer firing. */
html.reveal-ready [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
html.reveal-ready [data-reveal].is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- 18. Responsive ---------- */
@media (max-width:1024px){
  :root{--row-pad-y:var(--row-pad-y-tab); --col-gap:var(--col-gap-tab);}
  h1{font-size:var(--fs-h1-tab);} h2{font-size:var(--fs-h2-tab);} h3{font-size:var(--fs-h3-tab);} h4{font-size:var(--fs-h4-tab);}
  .primary-nav{display:none;}
  .header-actions .btn-call:not(.mobile-call-btn){display:none;}
  .mobile-call-btn,.menu-toggle{display:flex;}
  .split,.split.split--reverse,.page-hero-grid,.faq-grid,.with-sidebar,.cta-band-inner{display:block;}
  .split > *,.page-hero-grid > *,.faq-grid > *,.with-sidebar > *,.cta-band-inner > *{width:100%;}
  .split .split-picture{margin-bottom:var(--col-gap); min-height:320px;}
  .split .split-text{margin-top:0;}
  .page-hero-grid > div:first-child{margin-bottom:var(--col-gap);}
  .page-hero-picture{order:0;}
  .split--text-first .split-picture{order:2;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;}
  .cta-band .cta-right{text-align:left;}
  .sidebar{position:static;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  :root{--row-pad-y:var(--row-pad-y-mob); --col-gap:var(--col-gap-mob); --card-pad:var(--card-pad-mob);}
  h1{font-size:var(--fs-h1-mob);} h2{font-size:var(--fs-h2-mob);} h3{font-size:var(--fs-h3-mob);} h4{font-size:var(--fs-h4-mob);}
  body{font-size:var(--fs-body-mob); padding-bottom:76px;}
  .lead{font-size:var(--fs-lead-mob);}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr; padding:56px 0 40px;}
  .footer-areas-grid{grid-template-columns:1fr 1fr;}
  .footer-bottom .container{flex-direction:column; align-items:flex-start;}
  .call-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:150;
    background:rgba(6,38,53,.96); border-top:1px solid rgba(255,255,255,.14);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .call-bar .btn{width:100%;}
  .stats-grid{grid-template-columns:1fr 1fr;}
}