/* ============================================================
   Harmony View — Night Glass Design System (iOS-inspired)
   Elementor-compatible: flexbox only, no CSS grid, no JS layout
   ============================================================ */

:root{
  --bg:#101310;
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.085);
  --glass-border:rgba(255,255,255,.12);
  --glass-border-hover:rgba(201,176,138,.55);
  --text:#F4F6F8;
  --muted:#A7B1BD;
  --accent:#c9b08a;
  --accent-hover:#dbc9ab;
  --line:rgba(255,255,255,.09);
  --radius:22px;
  --shadow:0 14px 44px rgba(0,0,0,.38);
  --shadow-hover:0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(201,176,138,.25), 0 0 42px rgba(201,176,138,.14);
  --font-head:'Lora',serif;
  --font-body:'Mulish',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Ambient light field baked into the body background so glass has
   something to refract and there are no flat black dead zones */
body{
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(201,176,138,.14), transparent 60%),
    radial-gradient(1100px 700px at 100% 18%, rgba(122,134,148,.10), transparent 65%),
    radial-gradient(1000px 900px at 50% 100%, rgba(201,176,138,.08), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
img{max-width:100%;display:block;}
a{color:var(--accent);text-decoration:none;transition:color .25s var(--ease);}
a:hover{color:var(--accent-hover);}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.15;color:var(--text);letter-spacing:-.025em;}
h1{font-size:clamp(2.3rem,5vw,3.7rem);}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem);}
h4{font-size:1.1rem;}
p{color:var(--muted);}
strong{color:var(--text);}

.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.container-narrow{max-width:860px;margin:0 auto;padding:0 24px;}

/* ---------- Sections ---------- */
.section{padding:100px 0;}
.section-alt{
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.section-head{max-width:760px;margin:0 auto 60px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;}
.eyebrow{
  color:var(--accent);
  font-family:var(--font-head);
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.24em;
}
.lead{font-size:1.15rem;color:var(--muted);}

/* ---------- Scroll reveal (progressive enhancement, JS adds .in-view) ---------- */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
html.js .reveal.in-view{opacity:1;transform:none;}
html.js .reveal-d1{transition-delay:.08s;}
html.js .reveal-d2{transition-delay:.16s;}
html.js .reveal-d3{transition-delay:.24s;}
html.js .reveal-d4{transition-delay:.32s;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  html.js .reveal{opacity:1;transform:none;transition:none;}
  .chart-fill{transition:none;}
  .quote-track,.star-pop,.explode-svg .x-layer{animation:none !important;}
}

/* ---------- Flex layout helpers ---------- */
.row{display:flex;flex-wrap:wrap;gap:28px;}
.row-center{align-items:center;}
.col{flex:1 1 300px;min-width:0;}
.col-2{flex:1 1 46%;min-width:280px;}
.col-3{flex:1 1 30%;min-width:260px;}
.col-4{flex:1 1 22%;min-width:220px;}
.split{display:flex;flex-wrap:wrap;gap:56px;align-items:center;}
.split > *{flex:1 1 440px;min-width:300px;}
.split-img img{
  border-radius:var(--radius);box-shadow:var(--shadow);width:100%;height:auto;
  border:1px solid var(--glass-border);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.split-img:hover img{transform:translateY(-6px) scale(1.015);box-shadow:var(--shadow-hover);}

/* ---------- Buttons ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-head);font-weight:600;font-size:.95rem;
  padding:16px 32px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:all .3s var(--ease);text-align:center;
}
.btn::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease);
}
.btn:hover::after{left:130%;}
.btn-primary{background:linear-gradient(135deg,var(--accent),#8a6f4d);color:#23261f;box-shadow:0 10px 28px rgba(201,176,138,.28);}
.btn-primary:hover{color:#23261f;transform:translateY(-3px);box-shadow:0 16px 38px rgba(201,176,138,.4);}
.btn-outline{
  border-color:rgba(255,255,255,.28);color:var(--text);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px);}
.btn-ghost{color:var(--text);padding:16px 10px;}
.btn-ghost:hover{color:var(--accent);}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(16,19,16,.6);
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;max-width:1320px;margin:0 auto;}
.logo{display:flex;align-items:center;gap:12px;color:var(--text);transition:transform .3s var(--ease);}
.logo:hover{color:var(--text);transform:translateY(-1px);}
.logo svg{height:40px;width:auto;flex:0 0 auto;}
.logo-text{display:flex;flex-direction:column;line-height:1.05;}
.logo-name{font-family:var(--font-head);font-weight:700;font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;}
.logo-tag{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);}

.main-nav{display:flex;align-items:center;gap:6px;}
.main-nav > a, .nav-item > a{
  color:var(--text);font-size:.92rem;font-weight:500;
  padding:10px 13px;border-radius:12px;display:inline-flex;align-items:center;gap:6px;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.main-nav > a:hover, .nav-item > a:hover{color:var(--accent);background:rgba(255,255,255,.06);}
.main-nav a.active{color:var(--accent);}

.nav-item{position:relative;}
.dropdown{
  position:absolute;top:100%;left:0;min-width:250px;
  background:rgba(20,23,19,.85);
  backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  border:1px solid var(--glass-border);border-radius:18px;
  box-shadow:var(--shadow);padding:10px;
  display:none;flex-direction:column;gap:2px;
}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown,.nav-item.open .dropdown{display:flex;animation:dropIn .28s var(--ease);}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.dropdown a{color:var(--text);font-size:.9rem;padding:9px 14px;border-radius:10px;display:block;transition:all .2s var(--ease);}
.dropdown a:hover{background:rgba(255,255,255,.07);color:var(--accent);padding-left:18px;}
.dropdown-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);padding:10px 14px 4px;}

.header-cta{display:flex;align-items:center;gap:14px;}
.header-phone{color:var(--text);font-family:var(--font-head);font-weight:600;font-size:.95rem;white-space:nowrap;}
.header-phone:hover{color:var(--accent);}
.header-cta .btn{padding:12px 24px;font-size:.88rem;}

.nav-toggle{
  display:none;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:12px;
  width:46px;height:46px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--text);transition:all .3s var(--ease);}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;
  background-size:cover;background-position:center;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,19,16,.5) 0%,rgba(16,19,16,.28) 45%,rgba(16,19,16,.82) 100%);
}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:28px;max-width:820px;padding:140px 0 120px;animation:heroIn 1s var(--ease) both;}
@keyframes heroIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
.hero .lead{font-size:1.25rem;color:#DAE0E6;}
.hero-page{min-height:56vh;}
.hero-page .hero-inner{padding:110px 0 80px;}

/* ---------- Trust cards (separated, hoverable, animated) ---------- */
.trust-bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:10px 0;}
.trust-item{
  flex:1 1 170px;min-width:150px;max-width:230px;
  display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:18px;
  padding:22px 16px;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.trust-item:hover{
  transform:translateY(-8px) scale(1.03);
  border-color:var(--glass-border-hover);
  background:var(--glass-strong);
  box-shadow:var(--shadow-hover);
}
.trust-num{font-family:var(--font-head);font-weight:700;font-size:1.55rem;color:var(--accent);transition:transform .35s var(--ease);}
.trust-item:hover .trust-num{transform:scale(1.12);}
.trust-label{font-size:.8rem;color:var(--muted);line-height:1.45;}
@media (max-width:640px){
  .trust-item{flex:1 1 40%;min-width:140px;max-width:none;padding:18px 12px;}
  .trust-num{font-size:1.35rem;}
  .trust-label{font-size:.75rem;}
}

/* ---------- Stats & animated charts ---------- */
.stat-row{justify-content:center;}
.stat-card{
  flex:1 1 230px;min-width:210px;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:34px 26px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.stat-card:hover{transform:translateY(-8px);border-color:var(--glass-border-hover);box-shadow:var(--shadow-hover);}
.stat-num{font-family:var(--font-head);font-weight:700;font-size:2.6rem;color:var(--accent);line-height:1;}
.stat-label{font-size:.92rem;color:var(--muted);}
.stat-src{font-size:.75rem;color:rgba(167,177,189,.65);}

.chart-card{
  flex:1 1 440px;min-width:300px;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:36px 32px;display:flex;flex-direction:column;gap:22px;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.chart-card:hover{transform:translateY(-6px);border-color:var(--glass-border-hover);box-shadow:var(--shadow-hover);}
.chart-card h3{font-size:1.15rem;}
.chart{display:flex;flex-direction:column;gap:18px;}
.chart-row{display:flex;flex-direction:column;gap:8px;}
.chart-top{display:flex;justify-content:space-between;gap:14px;align-items:baseline;}
.chart-label{font-size:.9rem;color:var(--muted);}
.chart-val{font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--text);white-space:nowrap;}
.chart-track{
  height:12px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);overflow:hidden;
}
.chart-fill{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#8a6f4d,var(--accent),var(--accent-hover));
  box-shadow:0 0 16px rgba(201,176,138,.45);
  transition:width 1.4s var(--ease);
}
.chart-src{font-size:.75rem;color:rgba(167,177,189,.65);}

/* ---------- Cards ---------- */
.card{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-8px) scale(1.01);border-color:var(--glass-border-hover);box-shadow:var(--shadow-hover);}
.card img{width:100%;height:240px;object-fit:cover;transition:transform .6s var(--ease);}
.card:hover img{transform:scale(1.06);}
.card-body{padding:28px;display:flex;flex-direction:column;gap:12px;flex:1;}
.card-body h3{color:var(--text);}
.card-body p{font-size:.95rem;flex:1;}
.card-link{font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--accent);display:inline-flex;align-items:center;gap:8px;}
.card-link::after{content:"→";transition:transform .3s var(--ease);}
.card:hover .card-link::after{transform:translateX(6px);}

/* ---------- Icon boxes ---------- */
.icon-box{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:32px 28px;display:flex;flex-direction:column;gap:14px;flex:1 1 250px;min-width:230px;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.icon-box:hover{border-color:var(--glass-border-hover);transform:translateY(-7px);box-shadow:var(--shadow-hover);}
.icon-box .icon{
  width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(201,176,138,.2),rgba(201,176,138,.06));
  border:1px solid rgba(201,176,138,.25);
  color:var(--accent);font-size:1.5rem;
  transition:transform .35s var(--ease);
}
.icon-box:hover .icon{transform:scale(1.12) rotate(-4deg);}
.icon-box h3{font-size:1.1rem;}
.icon-box p{font-size:.92rem;}

/* ---------- Feature / spec lists (separated glass blocks) ---------- */
.spec-list{list-style:none;display:flex;flex-direction:column;gap:12px;}
.spec-list li{
  display:flex;gap:14px;align-items:flex-start;color:var(--muted);
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:16px;
  padding:16px 20px;
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.spec-list li:hover{
  transform:translateX(8px);
  border-color:var(--glass-border-hover);
  background:var(--glass-strong);
  box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 24px rgba(201,176,138,.1);
}
.spec-list li::before{
  content:"✓";flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:rgba(201,176,138,.16);border:1px solid rgba(201,176,138,.3);color:var(--accent);font-size:.8rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
  transition:transform .3s var(--ease);
}
.spec-list li:hover::before{transform:scale(1.15);}
.spec-text{display:flex;flex-direction:column;gap:3px;}
.spec-text strong{font-family:var(--font-head);font-weight:600;}
.spec-text span{font-size:.92rem;color:var(--muted);}
.spec-table{
  display:flex;flex-direction:column;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;
}
.spec-row{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);transition:background .25s var(--ease);}
.spec-row:hover{background:rgba(255,255,255,.045);}
.spec-row:last-child{border-bottom:none;}
.spec-row dt{flex:1 1 220px;padding:16px 22px;font-family:var(--font-head);font-size:.9rem;font-weight:600;}
.spec-row dd{flex:2 1 300px;padding:16px 22px;color:var(--muted);font-size:.95rem;}

/* ---------- Stars & testimonials ---------- */
.stars{color:var(--accent);font-size:1.05rem;letter-spacing:3px;text-shadow:0 0 14px rgba(201,176,138,.5);}
.testimonial{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:34px;display:flex;flex-direction:column;gap:16px;flex:1 1 300px;min-width:280px;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.testimonial:hover{transform:translateY(-7px);border-color:var(--glass-border-hover);box-shadow:var(--shadow-hover);}
.testimonial p{font-size:.98rem;font-style:italic;color:#CBD3DB;flex:1;}
.testimonial .who{font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--text);}

/* ---------- Steps ---------- */
.step{
  flex:1 1 230px;min-width:220px;display:flex;flex-direction:column;gap:14px;padding:30px 26px;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:var(--radius);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.step:hover{transform:translateY(-7px);border-color:var(--glass-border-hover);box-shadow:var(--shadow-hover);}
.step-num{
  font-family:var(--font-head);font-weight:700;font-size:2.4rem;line-height:1;
  background:linear-gradient(135deg,var(--accent),rgba(201,176,138,.35));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.step h3{font-size:1.1rem;}
.step p{font-size:.92rem;}

/* ---------- Accordion (FAQ) ---------- */
.accordion{display:flex;flex-direction:column;gap:14px;}
.accordion details{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:18px;overflow:hidden;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.accordion details:hover{border-color:var(--glass-border-hover);}
.accordion details[open]{border-color:var(--glass-border-hover);background:var(--glass-strong);}
.accordion summary{
  cursor:pointer;list-style:none;padding:20px 26px;
  font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--text);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary::after{content:"+";color:var(--accent);font-size:1.4rem;font-weight:400;flex:0 0 auto;transition:transform .3s var(--ease);}
.accordion details[open] summary::after{transform:rotate(45deg);}
.accordion .acc-body{padding:0 26px 22px;color:var(--muted);font-size:.96rem;}

/* ---------- Gallery ---------- */
.gallery-flex{display:flex;flex-wrap:wrap;gap:20px;}
.gallery-flex a{
  flex:1 1 340px;min-width:280px;display:block;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--glass-border);position:relative;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.gallery-flex a:hover{transform:translateY(-6px);border-color:var(--glass-border-hover);box-shadow:var(--shadow-hover);}
.gallery-flex img{width:100%;height:280px;object-fit:cover;transition:transform .6s var(--ease);}
.gallery-flex a:hover img{transform:scale(1.06);}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(201,176,138,.16),rgba(201,176,138,.04)),var(--glass);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(201,176,138,.32);border-radius:26px;
  padding:64px 48px;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.cta-band:hover{border-color:var(--glass-border-hover);box-shadow:var(--shadow-hover);}
.cta-band h2{max-width:560px;}
.cta-band .btn-row{flex:0 1 auto;min-width:0;}

/* ---------- Forms ---------- */
.form{display:flex;flex-direction:column;gap:18px;}
.form-row{display:flex;flex-wrap:wrap;gap:18px;}
.form-row > *{flex:1 1 240px;}
.form label{display:flex;flex-direction:column;gap:8px;font-family:var(--font-head);font-size:.85rem;font-weight:600;}
.form input,.form select,.form textarea{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);border-radius:14px;
  padding:14px 16px;color:var(--text);font-family:var(--font-body);font-size:.95rem;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(201,176,138,.15);}
.form textarea{min-height:130px;resize:vertical;}
.form .btn{align-self:flex-start;}
.form-note{font-size:.82rem;color:var(--muted);}

/* ---------- Parallax image banners ---------- */
.banner{
  position:relative;min-height:420px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background-size:cover;background-position:center;background-attachment:fixed;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;
}
.banner::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,19,16,.62),rgba(16,19,16,.34) 50%,rgba(16,19,16,.62));
}
.banner-inner{
  position:relative;z-index:1;max-width:760px;margin:0 24px;
  background:rgba(19,22,18,.42);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:26px;
  padding:52px 48px;display:flex;flex-direction:column;gap:20px;align-items:center;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.banner-inner:hover{border-color:var(--glass-border-hover);box-shadow:var(--shadow-hover);transform:translateY(-4px);}
.banner-inner h2{font-size:clamp(1.5rem,3vw,2.2rem);}
.banner-inner p{color:#D4DAE1;}
@media (max-width:1080px){
  .banner{background-attachment:scroll;min-height:340px;}
  .banner-inner{padding:38px 28px;}
}

/* ---------- Typographic rhythm (kills bunched text) ---------- */
.split h2,.container-narrow h2{margin-bottom:20px;}
.split p{margin-bottom:16px;}
.split p:last-child{margin-bottom:0;}
.split .spec-list{margin-top:24px;}
.split .btn-row{margin-top:26px;}
.container-narrow > p{margin-bottom:16px;}
.acc-body p{margin-bottom:12px;}
.acc-body p:last-child{margin-bottom:0;}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.breadcrumbs a{color:var(--muted);}
.breadcrumbs a:hover{color:var(--accent);}
.breadcrumbs span{color:var(--text);}

/* ---------- Article ---------- */
.article{max-width:820px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:26px;}
.article h2{margin-top:26px;}
.article h3{margin-top:10px;}
.article img{border-radius:var(--radius);border:1px solid var(--glass-border);box-shadow:var(--shadow);}
.article ul,.article ol{padding-left:24px;color:var(--muted);display:flex;flex-direction:column;gap:10px;}
.article blockquote{
  border-left:3px solid var(--accent);padding:16px 0 16px 24px;color:#CBD3DB;font-style:italic;
  background:linear-gradient(90deg,rgba(201,176,138,.07),transparent);border-radius:0 14px 14px 0;
}
.article-meta{display:flex;gap:16px;align-items:center;font-size:.85rem;color:var(--muted);}

/* ---------- Footer ---------- */
.site-footer{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.25));
  border-top:1px solid var(--line);padding:80px 0 0;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.footer-cols{display:flex;flex-wrap:wrap;gap:44px;padding-bottom:56px;}
.footer-col{flex:1 1 220px;display:flex;flex-direction:column;gap:14px;}
.footer-col h3,.footer-col h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);}
.footer-col a{color:var(--muted);font-size:.92rem;transition:color .25s var(--ease),padding-left .25s var(--ease);}
.footer-col a:hover{color:var(--accent);padding-left:5px;}
.footer-col p{font-size:.92rem;}
.footer-bottom{border-top:1px solid var(--line);padding:24px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;max-width:1320px;margin:0 auto;}
.footer-bottom p{font-size:.82rem;}
.social-row{display:flex;gap:10px;flex-wrap:wrap;}
.social-row a{
  font-size:.85rem;color:var(--muted);
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--glass-border);
  transition:all .3s var(--ease);
}
.social-row a:hover{color:var(--accent);border-color:var(--glass-border-hover);transform:translateY(-3px);}

/* ---------- Floating call button (mobile) ---------- */
.call-fab{
  display:none;position:fixed;bottom:20px;right:20px;z-index:1200;
  background:linear-gradient(135deg,var(--accent),#8a6f4d);color:#23261f;border-radius:999px;
  padding:16px 24px;font-family:var(--font-head);font-weight:700;font-size:.95rem;
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 24px rgba(201,176,138,.35);
  animation:fabPulse 2.8s var(--ease) infinite;
}
@keyframes fabPulse{0%,100%{box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 0 rgba(201,176,138,.45);}50%{box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 14px rgba(201,176,138,0);}}
.call-fab:hover{color:#23261f;transform:scale(1.06);}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:999;
    height:calc(100vh - 78px);
    background:rgba(16,19,16,.96);
    flex-direction:column;align-items:stretch;gap:4px;
    padding:24px 24px 120px;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .site-header{position:sticky;}
  .nav-open .main-nav{display:flex;animation:menuIn .3s var(--ease);}
  @keyframes menuIn{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
  .main-nav > a,.nav-item > a{font-size:1.05rem;padding:14px 12px;border-bottom:1px solid var(--line);width:100%;border-radius:0;}
  .nav-item{width:100%;}
  .dropdown{position:static;display:flex;border:none;box-shadow:none;background:transparent;padding:0 0 8px 16px;backdrop-filter:none;-webkit-backdrop-filter:none;}
  .nav-toggle{display:flex;}
  .header-cta .btn{display:none;}
  .call-fab{display:inline-flex;}
  .section{padding:72px 0;}
  .hero{min-height:72vh;}
}
@media (max-width:640px){
  body{font-size:16px;}
  .section{padding:56px 0;}
  .cta-band{padding:44px 28px;}
  .header-phone{display:none;}
  .hero-inner{padding:100px 0 80px;}
  .card img{height:200px;}
  .stat-card{min-width:150px;flex:1 1 150px;}
}

/* ============================================================
   v4 — Ultra-glass refinement layer (overrides base tokens)
   ============================================================ */
:root{
  --glass:rgba(255,255,255,.075);
  --glass-strong:rgba(255,255,255,.115);
  --glass-border:rgba(255,255,255,.16);
}
body{
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(201,176,138,.17), transparent 60%),
    radial-gradient(1100px 700px at 100% 18%, rgba(122,134,148,.12), transparent 65%),
    radial-gradient(1000px 900px at 50% 100%, rgba(201,176,138,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* Tighter vertical rhythm, less dead space */
.section{padding:84px 0;}
.section-head{margin-bottom:46px;gap:14px;}
.section-head::after{
  content:"";width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),rgba(201,176,138,0));
}

/* Split columns: top-aligned text, sticky image follows the scroll
   so long sections never leave an empty dark hole beside the copy */
.split{align-items:flex-start;}
.split-img{align-self:stretch;}
.split-img img{position:sticky;top:110px;}

/* iOS glass: inner top highlight on every glass surface */
.card,.icon-box,.step,.testimonial,.stat-card,.chart-card,.trust-item,
.accordion details,.spec-list li,.spec-table,.banner-inner,.cta-band,.dropdown{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 36px rgba(0,0,0,.32);
}

/* Loose cross-link paragraphs: centred, readable, deliberate */
.section .container > p{
  max-width:860px;margin-left:auto;margin-right:auto;text-align:center;
}

/* Dropdown: brighter glass + mega-menu columns that fit on screen */
.dropdown{background:rgba(20,23,19,.92);}
.dropdown.mega{
  flex-direction:row;align-items:flex-start;gap:8px;
  min-width:680px;padding:16px;
  max-height:76vh;overflow-y:auto;
}
.mega-col{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-width:180px;}
.nav-item .caret{display:inline-block;transition:transform .3s var(--ease);font-size:.7em;}
.nav-item:hover .caret,.nav-item.open .caret{transform:rotate(180deg);color:var(--accent);}
@media (max-width:1080px){
  .dropdown.mega{flex-direction:column;min-width:0;max-height:none;overflow:visible;padding:0 0 8px 16px;background:transparent;box-shadow:none;}
  .split-img img{position:static;}
}

/* ============================================================
   v5 — Pre-launch essentials
   ============================================================ */

/* Sticky mobile CTA bar (replaces single call fab) */
.mobile-cta-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:1200;
  gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(16,19,16,.82);
  backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  border-top:1px solid var(--glass-border);
}
.mobile-cta-bar .btn{flex:1 1 50%;padding:14px 10px;font-size:.92rem;}
@media (max-width:1080px){
  .mobile-cta-bar{display:flex;}
  .site-footer{padding-bottom:96px;}
}

/* Response time promise badge */
.response-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(201,176,138,.14);border:1px solid rgba(201,176,138,.4);
  color:var(--accent-hover);border-radius:999px;
  padding:10px 22px;font-family:var(--font-head);font-weight:600;font-size:.9rem;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:fabPulse 3.2s var(--ease) infinite;
}
.response-note{color:var(--accent);font-size:.88rem;font-family:var(--font-head);font-weight:600;}

/* Team cards + placeholder frames */
.team-card{
  flex:1 1 260px;min-width:240px;max-width:340px;
  background:var(--glass);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.team-card:hover{transform:translateY(-7px);border-color:var(--glass-border-hover);box-shadow:var(--shadow-hover);}
.team-body{padding:22px 24px;display:flex;flex-direction:column;gap:4px;}
.team-name{font-family:var(--font-head);font-weight:600;font-size:1.05rem;}
.team-role{color:var(--accent);font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-head);font-weight:600;}
.ph-frame{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:260px;background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--glass-border);
  color:var(--muted);text-align:center;padding:24px;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 18px,rgba(255,255,255,.025) 18px,rgba(255,255,255,.025) 36px);
}
.ph-frame .ph-icon{font-size:2.2rem;opacity:.7;}
.ph-frame small{font-size:.8rem;max-width:260px;}

/* 404 page */
.error-code{
  font-family:var(--font-head);font-weight:700;font-size:clamp(6rem,18vw,11rem);line-height:1;
  background:linear-gradient(135deg,var(--accent),rgba(201,176,138,.25));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   v6 — Hero testimonial marquee (trust bar)
   ============================================================ */
.quote-marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  overflow:hidden;
  background:rgba(16,19,16,.55);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border-top:1px solid var(--glass-border);
}
.quote-track{
  display:flex;align-items:center;gap:56px;
  width:max-content;padding:15px 0;
  animation:marqueeScroll 46s linear infinite;
}
.quote-marquee:hover .quote-track{animation-play-state:paused;}
.quote-item{
  display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  font-size:.92rem;color:#D6DCE2;
}
.quote-item .q-stars{color:var(--accent);letter-spacing:2px;font-size:.85rem;text-shadow:0 0 12px rgba(201,176,138,.5);}
.quote-item .q-who{color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:.82rem;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:640px){
  .quote-item{font-size:.82rem;gap:8px;}
  .quote-track{gap:36px;padding:12px 0;}
}

/* ============================================================
   v7 — Official Harmony View brand pack applied
   Palette: #2f332b green charcoal · #c9b08a sand (P4665C) · #8a6f4d bronze (P4655C)
   Type: Lora Medium headings · Mulish text · Mulish Semibold highlights
   ============================================================ */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.008em;}
h1{font-weight:600;}
body{font-weight:400;}
.lead{font-weight:300;}
strong{font-weight:600;}
.eyebrow,.btn,.trust-num,.stat-num,.chart-val,.step-num,.logo-name{font-family:'Mulish',sans-serif;}
.eyebrow{font-weight:700;}
.btn{font-weight:600;}

/* HV monogram logo (brand book primary reversed version) */
.logo-mark{
  font-family:'Lora',serif;font-weight:500;
  width:46px;height:46px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--accent);color:var(--accent);
  font-size:1.4rem;line-height:1;letter-spacing:-.08em;
  padding-right:3px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.logo:hover .logo-mark{background:var(--accent);color:#2f332b;}
.logo-name{font-family:'Lora',serif;font-weight:500;font-size:1.08rem;letter-spacing:.14em;text-transform:uppercase;}
.logo-tag{
  display:flex;align-items:center;gap:8px;
  font-family:'Mulish',sans-serif;font-weight:600;
  font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);
}
.logo-tag::before,.logo-tag::after{content:"";height:1px;width:14px;background:rgba(201,176,138,.55);flex:0 0 auto;}

/* ============================================================
   v8 — Photographic glass chips replace emoji icons
   ============================================================ */
.icon-box{position:relative;}
.icon-box::before{
  content:"";position:absolute;top:0;left:26px;right:26px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,176,138,.5),transparent);
}
.icon-box .icon.icon-img{
  width:66px;height:66px;border-radius:16px;overflow:hidden;padding:0;
  background:none;
  border:1px solid rgba(201,176,138,.4);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.icon-box .icon.icon-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--ease),filter .55s var(--ease);
}
.icon-box:hover .icon.icon-img img{transform:scale(1.16);filter:brightness(1.12);}
.icon-box:hover .icon.icon-img{transform:none;}

/* ============================================================
   v9 — Logo fix · star pop · 3D charts · glass v2 · exploded diagram
   ============================================================ */

/* Logo lockup must never split (name wrapping pushed tag away on some widths) */
.logo{flex:0 0 auto;min-width:0;}
.logo-name{white-space:nowrap;}
.logo-tag{white-space:nowrap;}
@media (max-width:400px){.logo-name{font-size:.92rem;}.logo-tag{font-size:.52rem;}}

/* Hero stars: pop in one by one */
.star-pop{display:inline-block;opacity:0;transform:scale(0);color:var(--accent);text-shadow:0 0 14px rgba(201,176,138,.6);animation:starPop .5s var(--ease) forwards;}
.star-pop:nth-child(1){animation-delay:.5s;}
.star-pop:nth-child(2){animation-delay:.75s;}
.star-pop:nth-child(3){animation-delay:1s;}
.star-pop:nth-child(4){animation-delay:1.25s;}
.star-pop:nth-child(5){animation-delay:1.5s;}
@keyframes starPop{0%{opacity:0;transform:scale(0) rotate(-40deg);}70%{opacity:1;transform:scale(1.35) rotate(8deg);}100%{opacity:1;transform:scale(1) rotate(0);}}

/* Glass v2: inner sheen + edge light on every glass component */
.card,.icon-box,.step,.testimonial,.stat-card,.chart-card,.trust-item,.accordion details,.cta-band,.banner-inner{position:relative;}
.card::before,.step::before,.testimonial::before,.stat-card::before,.chart-card::before,.trust-item::before,.cta-band::before,.banner-inner::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 34%,transparent 60%);
}
.card,.icon-box,.step,.testimonial,.stat-card,.chart-card,.trust-item{
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.12);
}
.card > *,.step > *,.testimonial > *,.stat-card > *,.chart-card > *,.trust-item > *{position:relative;z-index:1;}

/* 3D animated charts */
.chart-3d{perspective:900px;}
.chart-3d .chart{transform:rotateX(14deg);transform-style:preserve-3d;}
.chart-3d .chart-track{
  height:16px;border-radius:10px;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(255,255,255,.06));
  box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 2px 4px rgba(0,0,0,.5);
}
.chart-3d .chart-fill{
  border-radius:10px;
  background:linear-gradient(180deg,#e8dcc2 0%,var(--accent) 45%,#8a6f4d 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.4),0 0 18px rgba(201,176,138,.5),inset 0 1px 0 rgba(255,255,255,.55);
  position:relative;overflow:hidden;
}
.chart-3d .chart-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-100%);animation:barSheen 3.2s var(--ease) infinite 1.6s;
}
@keyframes barSheen{0%{transform:translateX(-100%);}55%{transform:translateX(100%);}100%{transform:translateX(100%);}}

/* Exploded louvre diagram (scroll-driven via --explode 0..1 set by JS) */
.explode-wrap{
  --explode:0;
  background:var(--glass);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:26px;box-shadow:var(--shadow);
  padding:40px 30px 30px;display:flex;flex-direction:column;gap:8px;align-items:center;overflow:hidden;position:relative;
}
.explode-svg{width:100%;max-width:640px;height:auto;display:block;}
.explode-svg .x-layer{transition:transform .1s linear;will-change:transform;}
.explode-svg .x-louvres{transform:translateY(calc(var(--explode) * -78px));}
.explode-svg .x-led{transform:translateY(calc(var(--explode) * -46px));}
.explode-svg .x-frame{transform:translateY(calc(var(--explode) * -18px));}
.explode-svg .x-posts{transform:translateY(calc(var(--explode) * 16px));}
.explode-label{opacity:calc((var(--explode) - .35) * 2);transition:opacity .15s linear;}
.explode-cap{font-size:.85rem;color:var(--muted);text-align:center;max-width:520px;}
@media (prefers-reduced-motion: reduce){
  .explode-wrap{--explode:1 !important;}
  .star-pop{animation:none;opacity:1;transform:none;}
}

/* ============================================================
   v10 — flat glassy charts · full-width card media · spacing ·
   mega menu · hero video · donuts · clickable cards
   ============================================================ */

/* Charts: FLAT glassy, tinted, pulsing (overrides the 3D look) */
.chart-3d{perspective:none;}
.chart-3d .chart{transform:none;}
.chart-3d .chart-track{
  height:14px;border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid var(--glass-border);
  box-shadow:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.chart-3d .chart-fill{
  border-radius:999px;
  background:linear-gradient(90deg,rgba(201,176,138,.5),rgba(201,176,138,.9));
  box-shadow:0 0 14px rgba(201,176,138,.4);
  animation:fillPulse 2.8s var(--ease) infinite;
}
@keyframes fillPulse{0%,100%{box-shadow:0 0 8px rgba(201,176,138,.3);}50%{box-shadow:0 0 24px rgba(201,176,138,.7);}}

/* Donut charts (pure CSS conic, pulsing) */
.donut-card{align-items:center;text-align:center;}
.donut{
  width:150px;height:150px;border-radius:50%;position:relative;margin:6px auto 2px;
  animation:donutPulse 3s var(--ease) infinite;
}
.donut::after{content:"";position:absolute;inset:15px;border-radius:50%;background:#181b16;border:1px solid var(--glass-border);}
.donut-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;font-family:'Mulish',sans-serif;font-weight:700;font-size:1.45rem;color:var(--accent);line-height:1.1;}
.donut-val small{font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
@keyframes donutPulse{0%,100%{filter:drop-shadow(0 0 8px rgba(201,176,138,.3));}50%{filter:drop-shadow(0 0 22px rgba(201,176,138,.6));}}

/* Section spacing repair: consistent breathing room */
.section{padding:112px 0;}
.section-head{margin-bottom:66px;}
.section .container > .btn-row{margin-top:40px;}
.btn-row + p{margin-top:16px;}
p + .btn-row{margin-top:22px;}
.row + .btn-row{margin-top:44px;}
.spec-table + p{margin-top:24px;}

/* Card media: chips span the full card width with parallax + glass hover */
.icon-box{overflow:hidden;}
.icon-box .icon.icon-img{
  width:calc(100% + 56px);height:158px;
  margin:-32px -28px 12px;
  border-radius:0;border:none;border-bottom:1px solid var(--glass-border);
  box-shadow:none;position:relative;
}
.icon-box .icon.icon-img img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.07);
  transition:transform .9s var(--ease),filter .9s var(--ease);
}
.icon-box .icon.icon-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,19,16,.05),rgba(16,19,16,.45));
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  transition:backdrop-filter .5s var(--ease),background .5s var(--ease);
}
.icon-box:hover .icon.icon-img img{transform:scale(1.16) translateY(-7px);filter:brightness(1.1);}
.icon-box:hover .icon.icon-img::after{
  background:linear-gradient(180deg,rgba(201,176,138,.08),rgba(16,19,16,.3));
  backdrop-filter:blur(2px) saturate(140%);-webkit-backdrop-filter:blur(2px) saturate(140%);
}
.icon-box::before{display:none;}

/* Mega menu */
.caret{font-size:.68em;opacity:.75;margin-left:2px;}
.dropdown.mega{
  min-width:680px;flex-direction:row;gap:14px;padding:20px;
  left:50%;transform:translateX(-45%);
}
.mega-col{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;}
@media (max-width:1080px){
  .dropdown.mega{min-width:0;flex-direction:column;left:auto;transform:none;padding:0 0 8px 16px;}
}

/* Hero video layer */
.hero{overflow:hidden;}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero::before{z-index:1;}
.hero-inner{z-index:2;}
.quote-marquee{z-index:3;}

/* Clickable cards */
.card[data-href]{cursor:pointer;}

/* ============================================================
   v12 — hero glass gradient (left-anchored) · layout repairs
   ============================================================ */

/* Hero: left-justified text over a horizontal glass gradient that
   darkens the video on the left and stays transparent on the right */
.hero::before{
  background:
    linear-gradient(90deg, rgba(16,19,16,.82) 0%, rgba(16,19,16,.55) 38%, rgba(16,19,16,.22) 68%, rgba(16,19,16,.05) 100%),
    linear-gradient(180deg, rgba(16,19,16,.35) 0%, transparent 30%, transparent 70%, rgba(16,19,16,.55) 100%);
  backdrop-filter:blur(1.5px) saturate(120%);
  -webkit-backdrop-filter:blur(1.5px) saturate(120%);
}
.hero-inner{align-items:flex-start;text-align:left;}

/* Layout repairs from audit */
.spec-table{overflow:hidden;}                       /* rows can't poke past rounded corners */
.spec-row:last-child dt,.spec-row:last-child dd{border-bottom:none;}
.section > .container > p:last-child{margin-bottom:0;padding-bottom:6px;}
.cta-band + p, .cta-band ~ p{margin-top:28px;}      /* text after CTA bands breathes */
.section-alt .spec-table{margin-bottom:28px;}
.spec-table + p strong{display:inline;}
.banner{margin-top:0;}
.section + .banner, .section-alt + .banner{margin-top:0;}
.banner + .section, .banner + .section-alt{border-top:none;}
.section .row:last-child{margin-bottom:6px;}
.acc-body{overflow-wrap:anywhere;}
.chart-card .chart-src{margin-top:4px;}
.donut-card{padding-bottom:30px;}

/* v12.1 — reveal transients can never visually break section boundaries */
html.js .reveal{transform:translateY(14px);transition-duration:.55s;}
main > section{position:relative;z-index:1;}
main > section.banner{z-index:0;}


/* ============================================================
   v13 CSS — mobile performance: no fixed backgrounds, no video
   decode on phones, composited marquee
   ============================================================ */
.quote-track{will-change:transform;transform:translateZ(0);}
@media (max-width:1080px){
  body{background-attachment:scroll;}
  .banner{background-attachment:scroll;}
}
@media (max-width:767px){
  .hero-video{display:none;}
}

/* ============================================================
   v14 CSS — ultra-smooth runtime: blur & shadow budget
   Backdrop blur is the #1 scroll-jank source; keep it only where
   it matters (header, dropdowns, banner glass) and give cards a
   pre-multiplied glass tint that needs no per-frame filtering.
   ============================================================ */
.card,.icon-box,.step,.testimonial,.stat-card,.chart-card,.trust-item,.accordion details,.spec-table,.form input,.form select,.form textarea,.donut-card{
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  background-color:rgba(30,33,28,.72);
}
.accordion details[open]{background-color:rgba(36,39,33,.8);}
.card:hover,.icon-box:hover,.step:hover,.testimonial:hover,.stat-card:hover,.chart-card:hover,.trust-item:hover{background-color:rgba(40,43,37,.8);}
.cta-band{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background-color:rgba(34,32,24,.85);}
.section-alt{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.btn-outline{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:rgba(42,45,40,.6);}
/* cheaper shadows: one layer instead of stacked glows */
.card,.icon-box,.step,.testimonial,.stat-card,.chart-card,.trust-item{
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.card:hover,.icon-box:hover,.step:hover,.testimonial:hover,.stat-card:hover,.chart-card:hover,.trust-item:hover{
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 24px rgba(201,176,138,.12);
}
/* transform/opacity-only transitions on cards (no all/backdrop transitions) */
.card,.icon-box,.step,.testimonial,.stat-card,.chart-card,.trust-item{
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
}
/* hero as static image now */
.hero-video{display:none !important;}

/* ============================================================
   v15 CSS — interlocked HV monogram (brand reference match)
   ============================================================ */
.logo-mark{
  position:relative;width:48px;height:44px;
  background:#262A25;
  border:1.5px solid rgba(201,176,138,.28);
  padding:0;overflow:hidden;
}
.logo-mark i,.logo-mark b{
  position:absolute;font-family:'Lora',serif;font-style:normal;font-weight:500;
  color:var(--accent);line-height:1;
}
.logo-mark i{font-size:26px;left:7px;top:5px;}
.logo-mark b{font-size:34px;right:4px;top:9px;font-weight:500;}
.logo:hover .logo-mark{background:var(--accent);}
.logo:hover .logo-mark i,.logo:hover .logo-mark b{color:#262A25;}

/* Footer small print */
.footer-smallprint{border-top:1px solid var(--line);max-width:1320px;margin:0 auto;padding:22px 24px 4px;}
.footer-smallprint p{font-size:.72rem;line-height:1.7;color:rgba(167,177,189,.62);}
.footer-smallprint a{color:rgba(201,176,138,.8);}

/* ============================================================
   v16 CSS — official brand logo assets (horizontal gold lockup;
   compact symbol on phones). Replaces the hand-built lockup.
   ============================================================ */
.logo-img{display:block;}
.logo-img-full{height:44px;width:auto;}
.logo-img-compact{display:none;height:42px;width:auto;border-radius:6px;}
.logo:hover{transform:translateY(-1px);opacity:.92;}
@media (max-width:479px){
  .logo-img-full{display:none;}
  .logo-img-compact{display:block;}
}
/* retired hand-built mark (kept for safety, unused) */
.logo-mark{display:none;}

/* ============================================================
   v17 CSS — LIGHT SECTIONS: every .section-alt is now a white
   section with reversed brand colours (ivory ground, deep green
   text, sand + bronze accents). Dark hero/sections/footer stay.
   ============================================================ */
.section-alt{
  background:#F7F5F0;
  border-top:1px solid #E8E4DA;border-bottom:1px solid #E8E4DA;
}
.section-alt h1,.section-alt h2,.section-alt h3,.section-alt h4{color:#2F332B;}
.section-alt p,.section-alt .lead{color:#575E52;}
.section-alt strong{color:#2F332B;}
.section-alt .eyebrow{color:#8A6F4D;}
.section-alt a{color:#8A6F4D;}
.section-alt a:hover{color:#6E5A40;}

/* Cards & tiles on light: white with soft warm borders */
.section-alt .card,.section-alt .icon-box,.section-alt .step,.section-alt .testimonial,
.section-alt .stat-card,.section-alt .chart-card,.section-alt .trust-item,.section-alt .donut-card{
  background-color:#FFFFFF;
  border-color:rgba(47,51,43,.13);
  box-shadow:0 10px 28px rgba(47,51,43,.09);
}
.section-alt .card:hover,.section-alt .icon-box:hover,.section-alt .step:hover,.section-alt .testimonial:hover,
.section-alt .stat-card:hover,.section-alt .chart-card:hover,.section-alt .trust-item:hover{
  background-color:#FFFDF8;
  border-color:rgba(138,111,77,.5);
  box-shadow:0 18px 44px rgba(47,51,43,.16),0 0 24px rgba(201,176,138,.18);
}
.section-alt .card-body h3,.section-alt .icon-box h3,.section-alt .step h3,.section-alt .chart-card h3{color:#2F332B;}
.section-alt .card-body p,.section-alt .icon-box p,.section-alt .step p{color:#575E52;}
.section-alt .card::before,.section-alt .step::before,.section-alt .testimonial::before,
.section-alt .stat-card::before,.section-alt .chart-card::before,.section-alt .trust-item::before{
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.2) 34%,transparent 60%);
}
.section-alt .card-link{color:#8A6F4D;}

/* Checklists */
.section-alt .spec-list li{background:#FFFFFF;border-color:rgba(47,51,43,.13);color:#575E52;}
.section-alt .spec-list li:hover{background:#FFFDF8;border-color:rgba(138,111,77,.5);}
.section-alt .spec-text strong{color:#2F332B;}
.section-alt .spec-text span{color:#6B7264;}
.section-alt .spec-list li::before{background:rgba(138,111,77,.12);border-color:rgba(138,111,77,.35);color:#8A6F4D;}

/* Spec tables */
.section-alt .spec-table{background:#FFFFFF;border-color:rgba(47,51,43,.13);}
.section-alt .spec-row{border-color:rgba(47,51,43,.1);}
.section-alt .spec-row:hover{background:rgba(201,176,138,.08);}
.section-alt .spec-row dt{color:#2F332B;}
.section-alt .spec-row dd{color:#575E52;}

/* Accordions */
.section-alt .accordion details{background:#FFFFFF;border-color:rgba(47,51,43,.13);}
.section-alt .accordion details[open]{background:#FFFDF8;border-color:rgba(138,111,77,.5);}
.section-alt .accordion summary{color:#2F332B;}
.section-alt .accordion summary::after{color:#8A6F4D;}
.section-alt .accordion .acc-body{color:#575E52;}

/* Stats, counters, charts, donuts */
.section-alt .trust-num,.section-alt .stat-num{color:#8A6F4D;}
.section-alt .trust-label,.section-alt .stat-label{color:#6B7264;}
.section-alt .stat-src,.section-alt .chart-src{color:rgba(107,114,100,.75);}
.section-alt .chart-label{color:#575E52;}
.section-alt .chart-val{color:#2F332B;}
.section-alt .chart-3d .chart-track,.section-alt .chart-track{background:#ECE8DF;border-color:rgba(47,51,43,.1);}
.section-alt .donut::after{background:#FFFFFF;border-color:rgba(47,51,43,.1);}
.section-alt .donut-val{color:#8A6F4D;}
.section-alt .donut-val small{color:#6B7264;}
.section-alt .step-num{background:linear-gradient(135deg,#8A6F4D,rgba(138,111,77,.4));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* Testimonials & stars */
.section-alt .testimonial p{color:#575E52;}
.section-alt .testimonial .who{color:#2F332B;}
.section-alt .stars,.section-alt .q-stars{color:#B98E3E;text-shadow:none;}

/* Buttons on light */
.section-alt .btn-outline{border-color:rgba(47,51,43,.35);color:#2F332B;background:rgba(255,255,255,.6);}
.section-alt .btn-outline:hover{border-color:#8A6F4D;color:#8A6F4D;}
.section-alt .btn-primary{box-shadow:0 10px 24px rgba(138,111,77,.3);}

/* CTA bands sitting in light sections become white cards */
.section-alt .cta-band{
  background:#FFFFFF;border-color:rgba(138,111,77,.4);
  box-shadow:0 14px 40px rgba(47,51,43,.12);
}
.section-alt .cta-band h2{color:#2F332B;}
.section-alt .cta-band p{color:#575E52;}
.section-alt .cta-band::before{background:linear-gradient(160deg,rgba(201,176,138,.14),transparent 60%);}

/* Forms in light sections */
.section-alt .form input,.section-alt .form select,.section-alt .form textarea{
  background:#FFFFFF;border-color:rgba(47,51,43,.2);color:#2F332B;
}
.section-alt .form label{color:#2F332B;}
.section-alt .form-note{color:#6B7264;}

/* gallery tiles + dividers */
.section-alt .gallery-flex a{border-color:rgba(47,51,43,.13);}
.section-alt .breadcrumbs,.section-alt .breadcrumbs a{color:#6B7264;}

/* ============================================================
   v17.1 — mobile logo: always the FULL horizontal lockup
   ============================================================ */
.logo-img-compact{display:none !important;}
.logo-img-full{display:block !important;}

/* ============================================================
   v19 — mobile header logo: large, legible full lockup
   Height stays at 46px so the header remains 78px tall, which
   the mobile menu panel height calc(100vh - 78px) depends on.
   ============================================================ */
@media (max-width:900px){
  .header-inner{gap:12px;padding:16px 18px;}
  .logo-img-full{height:46px;}
  .logo{flex:1 1 auto;}
}
@media (max-width:359px){
  .logo-img-full{height:40px;}
}

/* ---- gallery captions on real project photography ---- */
.gallery-flex a{display:flex;flex-direction:column;}
.gallery-flex img{flex:0 0 auto;}
.gal-cap{
  display:block;padding:12px 14px;font-size:.82rem;line-height:1.45;
  color:var(--muted);background:rgba(30,33,28,.55);flex:1 1 auto;
}
.section-alt .gal-cap{color:#575E52;background:rgba(47,51,43,.045);}

/* ============================================================
   v20 — frosted trust band + lightbox gallery viewer
   ============================================================ */

/* trust band sits on the dark ground again, cards read as frosted glass */
.trust-band{padding:34px 0 38px;}
.trust-band .trust-item{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.30);
  /* deliberate exception to the v14 blur budget: one band, above the fold */
  -webkit-backdrop-filter:blur(16px) saturate(140%) !important;
  backdrop-filter:blur(16px) saturate(140%) !important;
  box-shadow:0 8px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.trust-band .trust-item:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);}
.trust-band .trust-num{color:var(--accent);}
.trust-band .trust-label{color:rgba(255,255,255,.92);}

/* ---- lightbox ---- */
body.lb-open{overflow:hidden;}
.lightbox{
  position:fixed;inset:0;z-index:2000;display:none;
  align-items:center;justify-content:center;padding:70px 24px 96px;
  background:rgba(12,14,11,.72);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  backdrop-filter:blur(22px) saturate(130%);
}
.lightbox.open{display:flex;animation:lbIn .28s var(--ease);}
@keyframes lbIn{from{opacity:0;}to{opacity:1;}}
.lb-stage{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:1180px;width:100%;
}
.lb-img{
  max-width:100%;max-height:calc(100vh - 190px);width:auto;height:auto;
  border-radius:16px;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  background:rgba(255,255,255,.04);
  animation:lbImg .32s var(--ease);
}
@keyframes lbImg{from{opacity:0;transform:scale(.985);}to{opacity:1;transform:none;}}
.lightbox.is-loading .lb-img{opacity:.35;}
.lb-cap{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  padding:11px 20px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.lb-text{color:#fff;font-size:.92rem;letter-spacing:.01em;}
.lb-count{color:var(--accent);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;}
.lb-close,.lb-nav{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;line-height:1;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.lb-close:hover,.lb-nav:hover{background:rgba(201,176,138,.34);border-color:rgba(201,176,138,.6);transform:scale(1.07);}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.lb-close{top:20px;right:22px;width:46px;height:46px;border-radius:50%;font-size:1.7rem;padding-bottom:4px;}
.lb-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;font-size:2rem;padding-bottom:5px;}
.lb-nav:hover{transform:translateY(-50%) scale(1.07);}
.lb-prev{left:22px;}
.lb-next{right:22px;}
@media (max-width:767px){
  .lightbox{padding:64px 12px 92px;}
  .lb-img{max-height:calc(100vh - 176px);border-radius:12px;}
  .lb-nav{width:44px;height:44px;font-size:1.6rem;bottom:22px;top:auto;transform:none;}
  .lb-nav:hover{transform:scale(1.07);}
  .lb-prev{left:calc(50% - 62px);}
  .lb-next{right:calc(50% - 62px);}
  .lb-cap{padding:9px 16px;}
  .lb-text{font-size:.82rem;}
}

/* ---- Services nav item: link navigates, caret opens the mega menu ---- */
.nav-item-linked{display:flex;align-items:center;}
.caret-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:6px 8px;margin-left:-6px;
  color:inherit;font:inherit;cursor:pointer;line-height:1;
}
.caret-btn .caret{transition:transform .3s var(--ease);}
.nav-item-linked.open .caret-btn .caret{transform:rotate(180deg);}
.caret-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
@media (max-width:900px){
  .nav-item-linked{width:100%;justify-content:flex-start;}
  .caret-btn{padding:10px 14px;margin-left:0;}
}

/* Services sits well along the nav bar, so its mega panel is centred on the
   header rather than on the nav item, which keeps it inside the viewport at
   every desktop width. The item goes position:static so the sticky header
   becomes the containing block. */
@media (min-width:901px){
  .nav-item-linked{position:static;}
  /* centred with margin, not transform: the dropIn keyframe ends at
     transform:none and would cancel a translateX here. */
  .nav-item-linked .dropdown.mega{
    left:50%;right:auto;margin-left:-340px;
    max-width:min(760px,calc(100vw - 48px));
  }
}

/* ============================================================
   v22 — very narrow phones (320px to 400px)
   Flex children carry min-width values sized for 375px and up.
   Below that they cannot shrink far enough and push the page
   about 4px wider than the viewport, so relax them here.
   ============================================================ */
@media (max-width:400px){
  .container{padding:0 18px;}
  /* Keep the intended minimum, but never let it exceed the container.
     A flat min-width:0 would let these shrink into 2 and 3 up rows on a
     phone, so min() preserves single column stacking while killing the
     4px overflow. */
  .split > *{min-width:min(300px,100%);}
  .col-2{min-width:min(280px,100%);}
  .col-3{min-width:min(260px,100%);}
  .chart-card{min-width:min(300px,100%);}
  .testimonial{min-width:min(280px,100%);}
  .gallery-flex a{min-width:min(280px,100%);}
}

/* ============================================================
   v22 — mobile menu becomes an accordion
   With every dropdown expanded at once the panel scrolled to
   roughly 3,000px. Sections now start collapsed and open on tap
   (the existing .open toggle already drives this), so the menu
   opens at one readable screen.
   ============================================================ */
@media (max-width:1080px){
  .dropdown{display:none;}
  .nav-item.open > .dropdown{display:flex;}
  /* hover and focus-within must not auto expand on touch */
  .nav-item:hover > .dropdown:not(.forced),
  .nav-item:focus-within > .dropdown{display:none;}
  .nav-item.open:hover > .dropdown,
  .nav-item.open:focus-within > .dropdown{display:flex;}
  /* the caret sits on the right of the row and gets a real tap target */
  .nav-item > a{display:flex;align-items:center;justify-content:space-between;}
  .nav-item-linked{flex-wrap:wrap;}
  .nav-item-linked > a{flex:1 1 auto;width:auto;border-bottom:none;}
  .nav-item-linked > .caret-btn{
    border-bottom:1px solid var(--line);
    min-width:52px;min-height:52px;justify-content:center;
  }
  .nav-item.open > a .caret{transform:rotate(180deg);}
  .caret{transition:transform .3s var(--ease);}
}

/* Menu panel must read as solid: at .96 over a bright hero the headline
   showed through. Near opaque plus a blur for the glass feel, and the
   page behind is locked so it cannot scroll under the open menu. */
@media (max-width:1080px){
  .main-nav{
    background:rgba(14,17,14,.985);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    backdrop-filter:blur(22px) saturate(140%);
  }
  body.nav-open{overflow:hidden;}
}

/* iOS Safari zooms the page when a focused field is under 16px.
   Hold form controls at 16px on touch widths so tapping a field
   does not jump the layout. */
@media (max-width:1080px){
  .form input,.form select,.form textarea{font-size:16px;}
}

/* ============================================================
   v24 — dropdown hover stability
   1. .dropdown.mega centred itself with transform:translateX(-45%), but
      the dropIn keyframe animates transform from translateY(-8px) to
      none. While the animation runs it owns the transform property, so
      the panel sat 306px to the right; the moment the animation ended
      the stylesheet value reapplied and the panel snapped left. Centre
      with margin instead so the animation only ever controls Y.
   2. The Services rules were written at min-width:901px, but the desktop
      nav only appears above 1080px. Between 901 and 1080 they were
      positioning a submenu inside the mobile panel. Both now sit at
      min-width:1081px to match the nav breakpoint.
   3. Dropdown links grew their left padding on hover, shifting the text
      under the cursor. The cue is now an inset bar, which does not move
      anything.
   ============================================================ */
@media (min-width:1081px){
  .dropdown.mega{
    transform:none;
    left:50%;
    margin-left:-306px;
  }
  .nav-item-linked{position:static;}
  .nav-item-linked .dropdown.mega{
    left:50%;right:auto;margin-left:-340px;
    max-width:min(760px,calc(100vw - 48px));
  }
}
@media (max-width:1080px){
  /* inside the mobile panel the submenu is a plain stacked list */
  .dropdown.mega,
  .nav-item-linked .dropdown.mega{
    left:auto;right:auto;margin-left:0;transform:none;max-width:none;
  }
  .nav-item-linked{position:relative;}
  /* .nav-item-linked is a flex row (link + caret). Force the panel onto
     its own full width line, otherwise at tablet widths there is room for
     it to sit beside the label and it renders as a narrow column. */
  .nav-item-linked > .dropdown{flex:1 0 100%;width:100%;}
}

/* hover cue that does not move the text */
.dropdown a{box-shadow:inset 0 0 0 0 var(--accent);transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);}
.dropdown a:hover,.dropdown a:focus-visible{
  padding-left:14px;
  background:rgba(255,255,255,.07);
  color:var(--accent);
  box-shadow:inset 3px 0 0 0 var(--accent);
}

/* The Services panel is positioned against the sticky header (so it can be
   centred without overflowing), which leaves an 18px dead strip between the
   Services label and the top of the panel. Crossing it dropped :hover and
   the menu closed before the pointer arrived. This invisible bridge extends
   the panel's hover area up to meet the label. Hover resolves through the
   DOM, so hovering the bridge keeps .nav-item:hover true. */
@media (min-width:1081px){
  /* the generic mega rule sets overflow-y:auto, which clips the bridge
     because it sits outside the panel box; this panel is ~400px tall so
     it never needs to scroll */
  .nav-item-linked .dropdown.mega{overflow:visible;max-height:none;}
  .nav-item-linked .dropdown.mega::before{
    content:"";position:absolute;left:0;right:0;top:-24px;height:24px;
  }
}

/* ---- enquiry form: honeypot and server side notices ---- */
.hv-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}
.form-notice{
  border-radius:14px;padding:14px 18px;margin-bottom:18px;font-size:.95rem;
  border:1px solid rgba(201,176,138,.45);background:rgba(201,176,138,.12);color:var(--text);
}
.form-notice.is-error{border-color:rgba(214,109,92,.55);background:rgba(214,109,92,.14);}
.section-alt .form-notice{color:#2F332B;background:rgba(138,111,77,.10);border-color:rgba(138,111,77,.35);}
.section-alt .form-notice.is-error{background:rgba(179,74,58,.10);border-color:rgba(179,74,58,.4);}