/* ============================================
   Headwaters Steam Co. — Marketing Site
   Palette: deep navy / sky blue / white / soft steel-blue bg
   ============================================ */

:root{
  --navy:       #052554;
  --navy-soft:  #0a3169;
  --blue:       #117aca;
  --blue-light: #50b6ed;
  --white:      #ffffff;
  --bg-light:   #cdd7dc;
  --bg-page:    #f4f7f8;
  --ink:        #0c1b2e;
  --ink-dim:    #4c5c6c;
  --line:       rgba(5,37,84,0.14);
  --line-onnavy:rgba(255,255,255,0.16);
  --radius:     10px;
  --radius-sm:  6px;
  --display: "Quicksand", "Poppins", var(--sans);
  --sans:  "Nunito", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }
button,a,.btn,.price-tab,.service-select-card,.step-btn,.booking-slot-btn{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; color-scheme:light; }
body{
  margin:0;
  background:var(--bg-page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:800;
  margin-bottom:.9em;
  display:block;
}
.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 28px;
}
section{ padding:88px 0; }
@media (max-width:720px){ section{ padding:56px 0; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:14px 30px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--blue); color:var(--white); box-shadow:0 6px 18px rgba(17,122,202,.35); }
.btn-primary:hover{ background:var(--blue-light); }
.btn-outline{ border-color:var(--line-onnavy); color:var(--white); background:transparent; }
.btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,.08); }
.btn-dark{ background:var(--navy); color:var(--white); }
.btn-dark:hover{ background:var(--navy-soft); }

/* ---------- Nav ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(205,215,220,0.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(5,37,84,0.12);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  max-width:1120px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ height:44px; width:auto; border-radius:10px; }
.brand-word{
  font-family:var(--display); color:var(--navy);
  font-size:1.1rem; letter-spacing:.02em; line-height:1.1; font-weight:700;
}
.brand-word small{
  display:block; font-family:var(--sans); font-size:.6rem;
  letter-spacing:.22em; color:var(--blue); font-weight:700; margin-top:2px;
}
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{
  color:var(--navy); text-decoration:none; font-size:.88rem; font-weight:700;
}
.nav-links a:hover{ color:var(--blue); }
.lang-toggle{
  display:flex; border:1px solid rgba(5,37,84,0.25); border-radius:999px; overflow:hidden;
}
.lang-toggle button{
  background:transparent; border:none; color:var(--navy);
  font-size:.75rem; font-weight:800; letter-spacing:.05em;
  padding:6px 12px; cursor:pointer;
}
.lang-toggle button.active{ background:var(--blue); color:var(--white); }
.nav-toggle{ display:none; }

@media (max-width:820px){
  .nav-links a.nav-link-item{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  background:radial-gradient(ellipse at 50% -10%, var(--navy-soft) 0%, var(--navy) 55%), var(--navy);
  color:var(--white);
  padding:90px 0 60px;
  position:relative;
  overflow:hidden;
}
.hero-inner{
  max-width:1120px; margin:0 auto; padding:0 28px;
  text-align:center;
}
.hero h1{
  font-size:clamp(2.4rem, 4.6vw, 3.7rem);
  color:var(--white);
  line-height:1.08;
  max-width:18ch; margin-left:auto; margin-right:auto;
}
.hero h1 em{ font-style:normal; color:var(--blue-light); }
.hero p.lede{
  font-size:1.1rem; color:#c7d3e6; max-width:52ch; margin:0 auto 2em;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero-stats{
  display:flex; gap:34px; margin-top:44px; padding-top:28px;
  border-top:1px solid var(--line-onnavy); flex-wrap:wrap; justify-content:center;
}
.hero-stats .stat b{
  display:block; font-family:var(--display); font-size:1.7rem; color:var(--blue-light); font-weight:700;
}
.hero-stats .stat.stat-check b{ color:#5fd88a; display:flex; justify-content:center; }
.stat-icon{ color:var(--blue-light); vertical-align:-2px; margin-right:3px; }
.hero-stats .stat span{ font-size:.78rem; color:#9fb0c8; letter-spacing:.03em; }

/* ---------- Logo showcase (before/after) ---------- */
.logo-showcase{
  background:var(--bg-light);
  padding:76px 0;
  text-align:center;
}
.logo-showcase img.big-logo{
  width:100%; max-width:600px; margin:0 auto 12px;
}
.logo-showcase .tagline{
  font-family:var(--display); font-weight:700; color:var(--navy);
  font-size:1.3rem; max-width:34ch; margin:18px auto 50px;
}
/* mountain divider */
.ridge{
  height:64px; width:100%;
  background:var(--bg-page);
  clip-path:polygon(0 100%, 0 55%, 6% 30%, 12% 48%, 20% 18%, 27% 44%, 35% 26%, 42% 50%,
    50% 12%, 58% 46%, 66% 24%, 74% 48%, 82% 20%, 90% 46%, 96% 32%, 100% 55%, 100% 100%);
}
.ridge.on-light{ background:var(--bg-light); }
.ridge.flip{ transform:scaleY(-1); background:var(--navy); }

/* ---------- Services ---------- */
.services{ background:var(--bg-page); }
.section-head{ max-width:640px; margin:0 auto 52px; text-align:center; }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.4rem); color:var(--navy); }
.section-head p{ color:var(--ink-dim); font-size:1rem; }

.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
@media (max-width:820px){ .service-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .service-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--white); padding:34px 28px; position:relative;
}
.service-card .num{
  font-family:var(--display); font-size:.85rem; color:var(--blue);
  letter-spacing:.1em; margin-bottom:18px; display:block; font-weight:700;
}
.service-card h3{ font-size:1.2rem; margin-bottom:.4em; color:var(--navy); }
.service-card p{ color:var(--ink-dim); font-size:.92rem; margin:0; }

/* ---------- Process ---------- */
.process{ background:var(--navy); color:var(--white); }
.process .section-head p{ color:#9fb0c8; }
.process .section-head .eyebrow{ color:var(--blue-light); }
.process .section-head h2{ color:var(--white); }
.timeline{
  display:grid; grid-template-columns:repeat(9,1fr); gap:10px; counter-reset:step;
}
@media (max-width:980px){ .timeline{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .timeline{ grid-template-columns:1fr 1fr; } }
.step{
  border-top:3px solid var(--blue); padding-top:14px;
}
.step .step-num{
  font-family:var(--display); font-size:1.3rem; color:var(--blue-light); display:block; margin-bottom:6px; font-weight:700;
}
.step p{ font-size:.82rem; color:#c7d3e6; margin:0; }

/* ---------- Pricing ---------- */
.pricing{ background:var(--bg-page); }
.price-tabs{
  display:flex; gap:8px; justify-content:center; margin-bottom:36px; flex-wrap:wrap;
}
.price-tab{
  padding:10px 22px; border:1px solid var(--line); background:var(--white); border-radius:999px;
  font-family:var(--sans); font-weight:700; font-size:.85rem; cursor:pointer;
  color:var(--ink-dim);
  -webkit-tap-highlight-color:transparent;
}
.price-tab.active{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.price-panel{ display:none; }
.price-panel.active{ display:block; }
.price-table{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; }
.price-table tr{ border-bottom:1px solid var(--line); }
.price-table td{ padding:14px 18px; font-size:.95rem; }
.price-table td:last-child{ text-align:right; font-family:var(--display); font-weight:700; color:var(--blue); white-space:nowrap; }
.price-note{ font-size:.82rem; color:var(--ink-dim); margin-top:20px; }
.addon-list{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:10px 30px; }
@media (max-width:600px){ .addon-list{ grid-template-columns:1fr; } }
.addon-list div{ display:flex; justify-content:space-between; font-size:.92rem; border-bottom:1px dotted var(--line); padding:8px 0; }
.addon-list b{ color:var(--blue); font-weight:700; }

/* ---------- Area ---------- */
.area{ background:var(--blue); color:var(--white); }
.area-inner{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:820px){ .area-inner{ grid-template-columns:1fr; } }
.area .eyebrow{ color:var(--navy); }
.city-list{ display:flex; flex-wrap:wrap; gap:10px; }
.city-chip{
  border:1px solid rgba(255,255,255,.4); padding:8px 16px; font-size:.85rem;
  border-radius:20px; color:var(--white); font-weight:600;
}
.area p.rule{ font-size:.85rem; color:#e3f1fb; margin-top:22px; border-top:1px solid rgba(255,255,255,.28); padding-top:18px; }

/* ---------- Availability ---------- */
.availability{ background:var(--bg-light); }
.avail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:820px){ .avail-grid{ grid-template-columns:1fr; } }
.hours-table{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; }
.hours-table td{ padding:12px 18px; font-size:.92rem; border-bottom:1px solid var(--line); }
.hours-table td:last-child{ text-align:right; font-weight:700; color:var(--navy); }
.avail-note{
  background:var(--white); border-radius:var(--radius); padding:26px;
  border:1px dashed var(--blue);
}
.avail-note b{ color:var(--blue); }

/* ---------- Quote form ---------- */
.quote{ background:var(--bg-page); }
.quote-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; }
@media (max-width:900px){ .quote-grid{ grid-template-columns:1fr; } }
.quote-grid > *{ min-width:0; }
.quote-side h2{ font-size:clamp(1.7rem,3vw,2.2rem); color:var(--navy); }
.quote-side p{ color:var(--ink-dim); }
.pay-methods{ margin-top:30px; }
.pay-methods .eyebrow{ color:var(--blue); }
.pay-chip{ display:inline-block; border:1px solid var(--line); padding:6px 14px; margin:0 8px 8px 0; font-size:.8rem; border-radius:16px; background:var(--white); }
.pay-chip.soon{ opacity:.65; border-style:dashed; }

form.quote-form{
  background:var(--white); border:1px solid var(--line); padding:32px; border-radius:var(--radius);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field.full{ grid-column:1/-1; }
label{ font-size:.78rem; font-weight:700; color:var(--navy); letter-spacing:.02em; }
input,select,textarea{
  font-family:var(--sans); font-size:.95rem; padding:11px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fbfcfd; color:var(--ink);
  width:100%; min-width:0; line-height:normal;
}
input[type="date"],input[type="time"]{
  font-family:-apple-system,system-ui,sans-serif;
  min-height:44px;
}
.date-field-wrap{ position:relative; flex:1; }
.date-field-wrap .booking-date-input{ position:relative; z-index:1; background:transparent; }
.date-placeholder{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  font-family:-apple-system,system-ui,sans-serif; font-size:.95rem; color:var(--ink-dim);
  pointer-events:none; z-index:0; background:#fbfcfd;
}
.date-field-wrap{
  background:#fbfcfd; border:1px solid var(--line); border-radius:var(--radius-sm); display:flex; align-items:center;
}
.date-field-wrap .booking-date-input{ border:none; background:transparent; }
.date-field-wrap .booking-date-input.date-empty{ color:transparent; -webkit-text-fill-color:transparent; }
.date-placeholder.hidden-placeholder{ display:none; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; }
textarea{ resize:vertical; min-height:90px; }
fieldset{ border:none; padding:0; margin:0 0 16px; }
.radio-row{ display:flex; gap:16px; flex-wrap:wrap; }
.radio-row label{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:.88rem; color:var(--ink); }
.check-row{ display:flex; gap:16px; flex-wrap:wrap; }
.check-row label{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:.88rem; color:var(--ink); background:var(--bg-light); padding:8px 14px; border-radius:999px; }
.estimate-box{
  margin-top:6px; margin-bottom:20px; padding:16px 18px;
  background:var(--bg-light); border:1px dashed var(--blue); border-radius:var(--radius-sm); font-size:.9rem;
}
.estimate-box b{ font-family:var(--display); font-size:1.4rem; color:var(--navy); display:block; margin-top:4px; }
.form-note{ font-size:.75rem; color:var(--ink-dim); margin-top:10px; }

/* ---------- Footer social band (light, thin) ---------- */
.footer-social-band{
  background:var(--bg-light);
  padding:16px 0;
  text-align:center;
}
.footer-social-band .social-row{ margin-top:0; }
.footer-wordmark{
  height:auto; width:100%; max-width:380px; margin:0 auto;
  filter:drop-shadow(0 8px 16px rgba(5,37,84,.14));
}
.footer-wordmark-dark{ max-width:360px; }

/* ---------- Footer ---------- */
footer{ background:var(--navy); color:#c7d3e6; padding:56px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:640px; margin:0 auto; text-align:center; }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{
  font-family:var(--sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--blue-light); margin-bottom:14px;
}
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:.9rem; }
.footer-grid a{ text-decoration:none; color:#c7d3e6; }
.footer-grid a:hover{ color:var(--white); }
.footer-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line-onnavy);
  display:flex; justify-content:space-between; font-size:.78rem; color:#8496b0; flex-wrap:wrap; gap:10px;
}

/* language visibility */
[data-i18n-lang]{ display:none; }
[data-i18n-lang].lang-active{ display:initial; }
span[data-i18n-lang].lang-active,
em[data-i18n-lang].lang-active,
b[data-i18n-lang].lang-active{ display:inline; }

/* utility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn:hover{ transform:none; }
}

/* ============================================
   Additions: text-CTA, owner quote, service cards v2,
   how-it-works, FAQ, social icons, section markers, gradients
   ============================================ */

/* section marker — small water-drop dot before eyebrow */
.eyebrow{ position:relative; padding-left:16px; display:inline-block; }
.eyebrow::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50% 50% 50% 0;
  background:var(--blue);
}
.process .eyebrow::before, .quote .eyebrow::before{ background:var(--blue-light); }
.section-head{ display:flex; flex-direction:column; align-items:center; }

/* buttons with icon (Text Andrew) */
.btn-text{ gap:.55em; }
.btn-text svg{ flex-shrink:0; }

/* gradient touches */
.hero{
  background:
    radial-gradient(ellipse at 50% -10%, var(--navy-soft) 0%, var(--navy) 55%),
    linear-gradient(160deg, var(--navy) 0%, #08183a 100%);
}
.btn-primary{ background:linear-gradient(135deg, var(--blue-light), var(--blue)); }
.btn-primary:hover{ background:linear-gradient(135deg, var(--blue), var(--blue-light)); }
.process{ background:linear-gradient(180deg, var(--navy) 0%, #08183a 100%); }
.area{ background:linear-gradient(135deg, var(--blue-light) 0%, var(--blue) 100%); }
.availability{ background:linear-gradient(180deg, var(--bg-light) 0%, #dbe4e8 100%); }
footer{ background:linear-gradient(180deg, var(--navy) 0%, #08183a 100%); }

/* ---------- Owner quote section ---------- */
.owner{
  background:linear-gradient(180deg, #eef4f7 0%, #dfe8ec 100%);
  padding:80px 0;
  position:relative;
}
.owner::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(17,122,202,.18), transparent);
}
.owner-inner{
  display:grid; grid-template-columns:.7fr 1.3fr; gap:52px; align-items:center;
  max-width:1120px; margin:0 auto; padding:0 28px;
}
@media (max-width:780px){ .owner-inner{ grid-template-columns:1fr; text-align:center; } }
.owner-photo-frame{
  aspect-ratio:1/1; border-radius:50%;
  background:linear-gradient(160deg, var(--bg-light), #b9c7ce);
  border:3px solid var(--white); box-shadow:0 20px 40px rgba(5,37,84,.16);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; color:var(--ink-dim); text-align:center; padding:20px; max-width:260px; margin:0 auto;
}
.owner-photo{
  aspect-ratio:1/1; width:100%; max-width:300px; margin:0 auto; display:block;
  border-radius:50%; object-fit:cover;
  border:4px solid var(--white);
  box-shadow:0 20px 40px rgba(5,37,84,.2), inset 0 0 0 2px rgba(17,122,202,.15);
}
.owner blockquote{
  font-family:var(--display); font-size:1.25rem; font-weight:600; color:var(--navy);
  line-height:1.5; margin:0 0 20px; quotes:none; border:none; padding:0;
}
.owner-name{ font-weight:800; color:var(--blue); margin:0 0 22px; }
.owner-name span{ font-weight:600; color:var(--ink-dim); font-size:.9rem; }

/* ---------- Service cards v2 ---------- */
.service-card{
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor:default;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(5,37,84,.14);
  background:linear-gradient(180deg, var(--white) 70%, #eef4f7 100%);
  z-index:2;
}
.service-icon{
  width:42px; height:42px; margin-bottom:16px; color:var(--blue);
  transition:transform .25s ease, color .25s ease;
}
.service-card:hover .service-icon{ color:var(--navy); transform:scale(1.08) rotate(-3deg); }
.service-card .tag{
  display:inline-block; margin-top:14px; padding:5px 12px; border-radius:999px;
  background:var(--bg-light); color:var(--navy); font-size:.72rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- How it works (3-step booking flow) ---------- */
.how{ background:var(--bg-page); }
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:820px){ .how-grid{ grid-template-columns:1fr; } }
.how-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; position:relative;
}
.how-num{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-light), var(--blue)); color:var(--white);
  font-family:var(--display); font-weight:700; font-size:1.1rem; margin-bottom:16px;
}
.how-card h3{ font-size:1.1rem; color:var(--navy); margin-bottom:10px; }
.how-card ul{ margin:0; padding-left:18px; color:var(--ink-dim); font-size:.9rem; display:flex; flex-direction:column; gap:6px; }

/* ---------- FAQ ---------- */
.faq{ background:var(--white); }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:2px; }
.faq-item{
  background:var(--bg-page); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:4px 20px; margin-bottom:10px;
}
.faq-item summary{
  cursor:pointer; padding:16px 0; font-weight:700; color:var(--navy);
  font-family:var(--display); font-size:1.02rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.4rem; color:var(--blue); font-weight:400; margin-left:12px;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin:0 0 18px; color:var(--ink-dim); font-size:.94rem; }

/* ---------- Social icons ---------- */
.social-row{ display:flex; gap:12px; justify-content:center; margin-top:20px; }
.social-icon{
  width:38px; height:38px; border-radius:50%; background:var(--white);
  display:flex; align-items:center; justify-content:center; color:var(--navy);
  border:1px solid var(--line); transition:background .2s ease, color .2s ease, transform .2s ease;
}
.social-icon:hover{ background:var(--blue); color:var(--white); transform:translateY(-2px); }

/* avail icon */
.avail-note{ display:block; }
.avail-icon{ color:var(--blue); margin-bottom:10px; }

/* area pin */
.area h2{ display:flex; align-items:center; gap:10px; }
.area-pin{ color:var(--white); flex-shrink:0; }
@media (max-width:820px){ .area h2{ justify-content:center; } }

/* ---------- Quote CTA (compact, homepage) ---------- */
.quote-cta{
  background:linear-gradient(135deg, var(--navy) 0%, #08183a 100%);
  color:var(--white);
}
.quote-cta-inner{
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
}
.quote-cta h2{ color:var(--white); font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:.3em; }
.quote-cta p{ color:#c7d3e6; margin:0; max-width:44ch; }
@media (max-width:720px){ .quote-cta-inner{ text-align:center; justify-content:center; } }

/* ============================================
   Dynamic estimate builder (offer.html)
   ============================================ */
.estimate-builder{ margin-bottom:28px; }
.eyebrow-mini{
  font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); display:block; margin-bottom:8px;
}
.estimate-title{ font-size:1.4rem; color:var(--navy); margin-bottom:6px; }
.estimate-sub{ font-size:.88rem; color:var(--ink-dim); margin:0 0 20px; }

.service-select-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px;
}
.service-select-card{
  position:relative; display:block; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; cursor:pointer; background:#fbfcfd; transition:border-color .15s ease, background .15s ease;
}
.service-select-card.wide{ grid-column:1/-1; }
.service-select-card input{ position:absolute; opacity:0; width:0; height:0; }
.service-select-card b{ display:block; font-size:.95rem; color:var(--navy); }
.service-select-card small{ display:block; font-size:.78rem; color:var(--ink-dim); margin-top:2px; }
.service-select-card .ssc-check{
  position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:transparent; background:var(--white); transition:all .15s ease;
}
.service-select-card:hover{ border-color:var(--blue-light); }
.service-select-card.selected{ border-color:var(--navy); background:#eef4f8; }
.service-select-card.selected .ssc-check{ background:var(--navy); color:var(--white); border-color:var(--navy); }

#item-panels{ margin-top:18px; }
.item-panel{
  border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:14px; overflow:hidden;
}
.item-panel-head{
  background:var(--bg-light); padding:12px 16px; display:flex; flex-direction:column; gap:2px;
}
.item-panel-head b{ color:var(--navy); font-size:.92rem; }
.item-panel-head span{ font-size:.76rem; color:var(--ink-dim); }
.item-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-top:1px solid var(--line); background:var(--white);
}
.item-row b{ display:block; font-size:.88rem; color:var(--ink); font-weight:700; }
.item-row small{ font-size:.76rem; color:var(--ink-dim); }
.stepper{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.step-btn{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--white); color:var(--navy); font-size:1.1rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
  transition:background .15s ease, border-color .15s ease;
}
.step-btn:hover{ border-color:var(--blue); background:var(--bg-light); }
.step-val{ min-width:18px; text-align:center; font-weight:700; color:var(--navy); font-family:var(--display); }
.notsure-panel{ padding:16px; background:#eef4f8; font-size:.88rem; color:var(--ink-dim); }
.notsure-panel b{ color:var(--navy); }

.estimate-total-box{
  margin-top:18px; padding:16px 18px; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#eef7f0,#dcefe1); border:1px solid #bfe0c8;
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.estimate-total-box b{ display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#2f7d47; }
.estimate-total-box span#estimate-summary-detail{ font-size:.78rem; color:#4c6b52; }
.estimate-total-value{ font-family:var(--display); font-size:1.6rem; font-weight:700; color:#2f7d47; }

.form-divider{ border:none; border-top:1px solid var(--line); margin:28px 0; }

/* Prepare-for expandable fieldset */
.prep-fieldset{
  border:1.5px solid rgba(17,122,202,.35); border-radius:var(--radius-sm); padding:0; margin:0 0 16px; overflow:hidden;
  background:linear-gradient(180deg,#f2f9fd,#eaf5fc);
  box-shadow:0 4px 14px rgba(17,122,202,.08);
}
.prep-toggle-btn{
  width:100%; background:transparent; border:none; padding:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left;
}
.prep-toggle-text{ display:flex; align-items:center; gap:10px; }
.prep-toggle-text::before{
  content:""; flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #4fc4ff 0%, #117aca 46%, #052554 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.28), 0 4px 10px rgba(17,122,202,.35);
}
.prep-toggle-text small{ display:block; font-size:.76rem; color:var(--ink-dim); font-weight:500; margin-top:2px; }
.prep-toggle-copy{ display:block; }
.prep-toggle-badge{
  font-size:.76rem; font-weight:700; color:var(--navy); background:var(--bg-light);
  padding:4px 10px; border-radius:999px; flex-shrink:0;
}
.prep-toggle-icon{ font-size:1.3rem; color:var(--blue); flex-shrink:0; }
.prep-fieldset .check-row{ padding:0 16px 16px; margin:0; }

/* ---------- Prepare-for chips (toggle + summary) ---------- */
.prep-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px 16px;
}
@media (max-width:520px){ .prep-grid{ grid-template-columns:1fr; } }
.prep-chip{
  position:relative; display:flex; align-items:center; gap:8px;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 12px; cursor:pointer; font-size:.86rem; color:var(--ink);
  background:#fbfcfd; transition:border-color .15s ease, background .15s ease;
}
.prep-chip input{ position:absolute; opacity:0; width:0; height:0; }
.prep-chip-check{
  width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:.72rem;
  color:transparent; background:var(--white); flex-shrink:0; transition:all .15s ease;
}
.prep-chip:hover{ border-color:var(--blue-light); }
.prep-chip.selected{ border-color:var(--navy); background:#eef4f8; }
.prep-chip.selected .prep-chip-check{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.prep-summary{
  margin:0 16px 16px; padding:12px 14px; background:var(--bg-light); border-radius:var(--radius-sm);
  font-size:.82rem; color:var(--ink-dim); line-height:1.5;
}

/* ---------- Promo badge + discount price ---------- */
.estimate-builder-topline{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.promo-badge{
  background:linear-gradient(135deg,#2f7d47,#3f9b5b); color:var(--white);
  font-size:.7rem; font-weight:800; letter-spacing:.03em;
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.estimate-total-price{ display:flex; align-items:baseline; gap:10px; }
.estimate-original-value{
  font-family:var(--display); font-size:1.1rem; color:#8a9298; text-decoration:line-through;
}

/* ---------- Live Google Calendar embed ---------- */
.calendar-embed-wrap{
  margin-top:36px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:0 12px 34px rgba(5,37,84,.1);
  background:var(--white);
}
.calendar-embed-wrap iframe{ display:block; }
.calendar-embed-label{ padding:16px 18px; background:var(--bg-light); }
.calendar-embed-label b{ display:block; color:var(--navy); font-size:.95rem; margin-bottom:4px; }
.calendar-embed-label span{ display:block; font-size:.82rem; color:var(--ink-dim); }
.offer-calendar{ margin:24px 0; }
.addons-note{ padding:10px 16px 14px; margin:0; font-size:.78rem; color:var(--ink-dim); background:var(--white); }

/* ---------- Live booking widget ---------- */
.live-booking{ margin:24px 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.booking-date-row{ display:flex; align-items:center; gap:14px; padding:16px 18px; background:var(--white); }
.booking-date-input{
  font-family:var(--sans); font-size:.95rem; padding:10px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fbfcfd; color:var(--ink);
  color-scheme:light;
}
.booking-status{ font-size:.82rem; color:var(--ink-dim); }
.flex-time-check{
  display:flex; align-items:flex-start; gap:10px; margin:4px 18px 14px;
  padding:12px 14px; background:#f4f9fc; border:1px solid var(--line); border-radius:var(--radius-sm);
  cursor:pointer; font-size:.86rem; color:var(--ink);
}
.flex-time-check input{ width:auto; margin-top:2px; accent-color:var(--blue); flex-shrink:0; }
.flex-time-check span{ line-height:1.4; }
.terms-check{
  display:flex; align-items:flex-start; gap:10px; margin:0 0 16px; font-size:.86rem; color:var(--ink-dim); cursor:pointer;
}
.terms-check input{ width:auto; margin-top:3px; accent-color:var(--blue); flex-shrink:0; }
.terms-check a{ color:var(--blue); font-weight:700; text-decoration:underline; }

/* ---------- Terms of Service modal ---------- */
.terms-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.terms-modal-backdrop{
  position:absolute; inset:0; background:rgba(5,37,84,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.terms-modal-panel{
  position:relative; z-index:1; background:var(--white); border-radius:var(--radius-lg,16px);
  max-width:720px; width:100%; max-height:min(82vh,900px); overflow-y:auto;
  padding:44px 32px 36px; box-shadow:0 30px 70px rgba(3,25,54,.4);
  animation:termsModalIn .22s ease;
}
@keyframes termsModalIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.terms-modal-close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  border:none; background:var(--bg-light); color:var(--navy); font-size:1.4rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.terms-modal-close:hover{ background:var(--blue); color:var(--white); }
.terms-modal-body h1{ color:var(--navy); font-size:1.5rem; margin-bottom:.2em; }
.terms-modal-body .legal-updated{ color:var(--ink-dim); font-size:.85rem; margin-bottom:1.6em; }
.terms-modal-body h2{ color:var(--navy); font-size:1.05rem; margin:1.6em 0 .5em; }
.terms-modal-body p, .terms-modal-body li{ color:var(--ink); font-size:.92rem; line-height:1.65; }
.terms-modal-body ul{ padding-left:1.2em; margin:.5em 0; }
.terms-modal-body li{ margin-bottom:.35em; }
.terms-modal-loading{ text-align:center; padding:60px 0; color:var(--ink-dim); }
body.terms-modal-open{ overflow:hidden; }
@media (max-width:600px){
  .terms-modal-panel{ padding:36px 20px 28px; max-height:88vh; }
}
.booking-slots{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:8px;
  padding:0 18px 18px; background:var(--white);
}
.booking-slot-btn{
  padding:9px 6px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:#fbfcfd; color:var(--navy); font-weight:700; font-size:.84rem; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.booking-slot-btn:hover{ border-color:var(--blue); }
.booking-slot-btn.selected{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.booking-selected{
  display:flex; align-items:center; gap:10px; padding:14px 18px;
  background:#eaf7ee; color:#2f7d47; font-weight:700; font-size:.9rem;
}
.booking-clear{
  margin-left:auto; background:none; border:none; color:#2f7d47; cursor:pointer;
  font-size:1rem; opacity:.7;
}
.booking-clear:hover{ opacity:1; }

/* ---------- Estimate approval gate ---------- */
.estimate-disclaimer{
  margin-top:14px; font-size:.8rem; color:var(--ink-dim); text-align:center;
}
#continue-gate{ font-size:1rem; }
#booking-section{ margin-top:8px; }

/* Safety net: [hidden] must always win over any class that sets display,
   regardless of CSS specificity ties (e.g. .form-field{display:flex}). */
[hidden]{ display:none !important; }


/* ============================================
   Premium Headwaters UI refresh
   Visual language: mountain / river / steam / clean fibers
   ============================================ */
:root{
  --navy-deep:#031936;
  --blue-glow:#35b9ff;
  --ice:#eaf7ff;
  --shadow-premium:0 24px 70px rgba(3,25,54,.16);
  --shadow-soft:0 14px 36px rgba(3,25,54,.10);
  --radius-lg:20px;
}
body{ background:linear-gradient(180deg,#f8fbfd 0%,#f1f6f9 100%); }
header.site-nav{
  background:rgba(3,25,54,.94);
  border-bottom:1px solid rgba(80,182,237,.18);
  box-shadow:0 10px 30px rgba(3,25,54,.14);
}
.nav-inner{ padding-top:10px; padding-bottom:10px; }
.brand img{ height:40px; width:auto; object-fit:contain; border-radius:0; background:transparent; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.brand-word{ color:#fff; font-size:1.28rem; }
.brand-word small{ color:var(--blue-light); font-size:.68rem; letter-spacing:.2em; }
.nav-links a{ color:#e9f5ff; }
.nav-links a:hover{ color:var(--blue-light); }
.lang-toggle{ border-color:rgba(255,255,255,.22); }
.lang-toggle button{ color:#dceeff; }

.hero{
  min-height:690px; display:flex; align-items:center;
  background:
    radial-gradient(circle at 50% 15%,rgba(53,185,255,.18),transparent 32%),
    radial-gradient(circle at 10% 70%,rgba(17,122,202,.18),transparent 28%),
    linear-gradient(145deg,#031936 0%,#052554 52%,#071d3e 100%);
}
.hero::before{
  content:""; position:absolute; width:min(900px,85vw); height:260px; left:50%; bottom:-155px; transform:translateX(-50%);
  border:1px solid rgba(80,182,237,.18); border-radius:50%; box-shadow:0 0 80px rgba(53,185,255,.08);
}
.hero-inner{ position:relative; z-index:2; }
.hero h1{ text-shadow:0 10px 40px rgba(0,0,0,.25); }
.hero p.lede{ color:#d4e5f3; }
.hero-ctas .btn-primary{ box-shadow:0 14px 34px rgba(17,122,202,.35); }
.hero-stats{ max-width:820px; margin-left:auto; margin-right:auto; }

/* Give the main logo a premium presentation instead of a flat image block. */
.logo-showcase{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 50% 20%,rgba(80,182,237,.16),transparent 30%),
    linear-gradient(180deg,#eaf4f8 0%,#dce7ec 100%);
  padding:74px 0 64px;
}
.logo-showcase::before,.logo-showcase::after{
  content:""; position:absolute; width:360px; height:360px; border-radius:50%; border:1px solid rgba(17,122,202,.13);
}
.logo-showcase::before{ left:-190px; top:-140px; }
.logo-showcase::after{ right:-210px; bottom:-180px; }
.logo-showcase .big-logo{ filter:drop-shadow(0 24px 38px rgba(3,25,54,.18)); position:relative; z-index:1; max-width:760px; }
.logo-showcase .tagline{ color:var(--navy); position:relative; z-index:1; }

/* Brand story */
.headwaters-story{ position:relative; overflow:hidden; background:var(--white); padding:104px 0; }
.story-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:64px; align-items:center; }
.story-grid-centered{ display:block; text-align:center; max-width:760px; margin:0 auto; }
.story-grid-centered .story-copy h2{ max-width:none; }
.story-grid-centered .story-copy>p{ margin-left:auto; margin-right:auto; }
.story-grid-centered .story-flow{ justify-content:center; }
.story-grid-centered .story-transform{ justify-content:center; }
.story-grid-centered .eyebrow{ display:inline-block; }
.story-copy h2{ color:var(--navy); font-size:clamp(2rem,3.5vw,3rem); line-height:1.08; max-width:14ch; }
.story-copy>p{ max-width:58ch; color:var(--ink-dim); font-size:1.02rem; }
.story-flow{ display:flex; align-items:center; gap:12px; margin-top:30px; flex-wrap:wrap; }
.story-flow span{ display:flex; align-items:center; gap:8px; color:var(--navy); }
.story-flow b{ width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:var(--blue-light); font-size:.72rem; }
.story-flow em{ font-style:normal; font-weight:800; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; }
.story-flow i{ width:34px; height:2px; background:linear-gradient(90deg,var(--blue),var(--blue-light)); border-radius:999px; }
.story-art{ min-height:420px; position:relative; display:grid; place-items:center; }
.story-art img{ width:min(500px,100%); position:relative; z-index:2; filter:drop-shadow(0 25px 35px rgba(3,25,54,.18)); }
.story-ring{ position:absolute; width:360px; height:360px; border-radius:50%; border:1px solid rgba(17,122,202,.22); box-shadow:0 0 0 28px rgba(17,122,202,.035),0 0 0 56px rgba(17,122,202,.025); }
.story-transform{ display:flex; align-items:center; gap:16px; margin-top:34px; }
.story-transform-item{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.story-transform-item img{
  width:76px; height:76px; object-fit:contain; border-radius:50%;
  background:radial-gradient(circle at 35% 25%, #fff 0%, #eef4f8 60%, #dce7ec 100%);
  box-shadow:inset 0 0 0 1px rgba(5,37,84,.08), 0 10px 20px rgba(5,37,84,.12); padding:10px;
}
.story-transform-item span{ font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); }
.story-transform-arrow{ color:var(--blue); font-size:1.4rem; font-weight:800; }
.story-water{ position:absolute; height:70px; border-radius:50%; background:linear-gradient(90deg,transparent,var(--blue-light),transparent); filter:blur(10px); opacity:.45; }
.water-a{ width:320px; transform:rotate(-9deg); bottom:60px; left:12%; }
.water-b{ width:220px; transform:rotate(11deg); top:80px; right:5%; }

/* Services become signature cards rather than generic boxes. */
.services{ background:#f5f9fb; position:relative; overflow:hidden; }
.service-grid{ gap:18px; background:transparent; border:0; overflow:visible; }
.service-card{ border:1px solid rgba(5,37,84,.10); border-radius:var(--radius-lg); padding:34px 30px 30px; box-shadow:0 8px 26px rgba(3,25,54,.05); overflow:hidden; }
.service-card::after{ content:""; position:absolute; right:-70px; bottom:-90px; width:190px; height:190px; border-radius:50%; border:1px solid rgba(17,122,202,.12); }
.service-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-premium); }
.service-icon{
  width:64px; height:64px; padding:14px; border-radius:50%; margin-bottom:18px;
  background:radial-gradient(circle at 34% 28%, #4fc4ff 0%, #117aca 46%, #052554 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.28),
    inset 0 -6px 10px rgba(0,0,0,.28),
    0 10px 22px rgba(17,122,202,.35);
  color:#eaf7ff;
}
.service-icon-img{
  padding:0; background:none; box-shadow:none;
  object-fit:contain; filter:drop-shadow(0 10px 18px rgba(17,122,202,.35));
}
.service-card h3{ font-size:1.28rem; }
.service-card p{ max-width:34ch; }

/* Dark process band gets a subtle river line. */
.process{ position:relative; overflow:hidden; }
.process::after{ content:""; position:absolute; width:850px; height:260px; left:50%; bottom:-190px; transform:translateX(-50%) rotate(-5deg); border:2px solid rgba(80,182,237,.12); border-radius:50%; }
.timeline,.process .section-head{ position:relative; z-index:1; }
.step{ border-top-color:var(--blue-light); }

/* Pricing / forms: premium surfaces, less flat UI. */
.price-table,.hours-table,.avail-note,form.quote-form,.how-card,.faq-item{ box-shadow:0 8px 28px rgba(3,25,54,.05); }
.price-table,.hours-table{ border:1px solid rgba(5,37,84,.08); }
.price-table td,.hours-table td{ padding:16px 20px; }
.price-tab{ transition:all .2s ease; }
.price-tab:hover,
.price-tab:focus-visible{
  border-color:var(--blue); background:#eaf5fc; color:var(--navy); transform:translateY(-1px);
}
.price-tab:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.price-tab.active:hover,
.price-tab.active:focus-visible{ background:var(--navy); color:var(--white); }
.price-tab.active{ box-shadow:0 8px 22px rgba(5,37,84,.18); }
form.quote-form{ border-radius:var(--radius-lg); border-color:rgba(5,37,84,.10); box-shadow:var(--shadow-premium); }
input,select,textarea{ border-radius:12px; }

.area{ position:relative; overflow:hidden; }
.area::before{ content:""; position:absolute; width:700px; height:300px; border:1px solid rgba(255,255,255,.18); border-radius:50%; right:-220px; top:-150px; transform:rotate(12deg); }
.city-chip{ background:rgba(3,25,54,.12); backdrop-filter:blur(6px); }

.footer-brand-band{ background:linear-gradient(180deg,#e5f0f4,#d3e0e6); }
footer{ position:relative; overflow:hidden; }
footer::before{ content:""; position:absolute; width:900px; height:200px; left:50%; top:-120px; transform:translateX(-50%); border:1px solid rgba(80,182,237,.12); border-radius:50%; }

/* ---------- Tagline ribbon (mountain divider bar) ---------- */
.ribbon-img.lang-active{
  display:block; width:100%; max-width:640px; margin:26px auto 0; height:auto;
  filter:drop-shadow(0 10px 22px rgba(3,25,54,.28));
}
.ribbon-bar.lang-active{
  display:block; max-width:640px; margin:26px auto 0; padding:14px 26px;
  background:linear-gradient(180deg,#0a3169 0%,#052554 60%,#031936 100%);
  border:1px solid rgba(80,182,237,.35); border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px rgba(3,25,54,.28);
  text-align:center;
}
.ribbon-bar span{
  color:#eaf7ff; font-weight:800; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- Metallic buttons (matches logo's glossy chrome/blue finish) ---------- */
.btn{
  position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.12);
}
.btn::before{
  content:""; position:absolute; inset:0 0 auto 0; height:46%;
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
  pointer-events:none;
}
.btn-primary{
  background:linear-gradient(180deg, #6cc8f5 0%, var(--blue) 55%, #0d5f9e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(3,25,54,.25),
    0 12px 26px rgba(17,122,202,.4);
  border-color:rgba(255,255,255,.25);
}
.btn-primary:hover{
  background:linear-gradient(180deg, #7fd2ff 0%, #1489dd 55%, #0d5f9e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(3,25,54,.25),
    0 16px 32px rgba(17,122,202,.48);
}
.btn-dark{
  background:linear-gradient(180deg, #123a72 0%, var(--navy) 55%, var(--navy-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 6px rgba(0,0,0,.3),
    0 10px 22px rgba(3,25,54,.3);
  border-color:rgba(255,255,255,.14);
}
.btn-dark:hover{ background:linear-gradient(180deg, #17457f 0%, var(--navy-soft) 55%, var(--navy) 100%); }
.btn-outline{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-outline:hover{ background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); }

/* ---------- Review-before-you-send box ---------- */
.review-box{
  background:linear-gradient(180deg,#f2f9fd,#eaf5fc); border:1.5px solid rgba(17,122,202,.3);
  border-radius:var(--radius-lg,16px); padding:18px 20px; margin:22px 0 18px;
  box-shadow:0 6px 18px rgba(17,122,202,.08);
}
.review-box-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.review-box-head b{ color:var(--navy); font-size:.95rem; }
.review-edit-link{
  background:none; border:none; color:var(--blue); font-weight:700; font-size:.82rem;
  cursor:pointer; text-decoration:underline; padding:0;
}
.review-row{
  display:flex; justify-content:space-between; gap:16px; padding:8px 0;
  border-top:1px solid rgba(17,122,202,.15); font-size:.88rem;
}
.review-row:first-of-type{ border-top:none; }
.review-row span{ color:var(--ink-dim); flex-shrink:0; }
.review-row b{ color:var(--navy); text-align:right; font-weight:700; }

/* ---------- Estimate builder premium finish ---------- */
.service-select-card{
  border-radius:var(--radius-lg,16px);
  box-shadow:0 6px 16px rgba(5,37,84,.06);
  transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.service-select-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(5,37,84,.1); }
.service-select-card.selected{
  background:linear-gradient(180deg,#f2f8fc,#e7f1f7);
  box-shadow:0 10px 24px rgba(5,37,84,.14), inset 0 0 0 1px rgba(5,37,84,.06);
}
.service-select-card .ssc-check{
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
}
.service-select-card.selected .ssc-check{
  background:linear-gradient(180deg,#123a72,var(--navy) 60%,var(--navy-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 8px rgba(5,37,84,.35);
}
.item-panel{
  border-radius:var(--radius-lg,16px); box-shadow:0 8px 22px rgba(5,37,84,.06);
}
.item-panel-head{
  background:linear-gradient(180deg,#123a72,var(--navy) 70%,var(--navy-deep));
}
.item-panel-head b{ color:#fff; }
.item-panel-head span{ color:var(--blue-light,#50b6ed); }
.step-btn{
  background:linear-gradient(180deg,#fff,#f2f6f8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(5,37,84,.08);
}
.step-btn:hover{
  background:linear-gradient(180deg,var(--blue-light,#50b6ed),var(--blue));
  border-color:var(--blue); color:#fff;
  box-shadow:0 4px 10px rgba(17,122,202,.35);
}
.estimate-total-box{
  box-shadow:0 8px 20px rgba(5,37,84,.08);
}

/* ---------- Thank-you booking summary card ---------- */
.ty-summary-card{
  max-width:520px; margin:36px auto 0; text-align:left;
  background:var(--white); border-radius:var(--radius-lg,16px);
  box-shadow:0 16px 40px rgba(3,25,54,.1); padding:26px 28px;
  border:1px solid var(--line);
}
.ty-summary-card h3{ color:var(--navy); font-size:1.05rem; margin:0 0 14px; }
.ty-summary-row{
  display:flex; justify-content:space-between; gap:20px;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem;
}
.ty-summary-row:last-child{ border-bottom:none; }
.ty-summary-row span{ color:var(--ink-dim); flex-shrink:0; }
.ty-summary-row b{ color:var(--navy); text-align:right; font-weight:700; }

/* ---------- Mobile polish ---------- */
@media (max-width:820px){
  .nav-links{ gap:8px; }
  .nav-links a.btn-primary{ display:inline-flex !important; padding:9px 14px !important; font-size:.78rem; }
  .story-grid{ grid-template-columns:1fr; gap:30px; }
  .story-copy h2{ max-width:18ch; }
  .story-art{ min-height:320px; }
}
@media (max-width:560px){
  .nav-inner{ padding-left:16px; padding-right:16px; }
  .brand img{ height:34px; width:auto; }
  .brand-word{ font-size:.92rem; }
  .nav-links{ gap:6px; }
  .nav-links .lang-toggle{ display:none; }
  .hero{ min-height:620px; padding-top:72px; }
  .hero h1{ font-size:clamp(2.15rem,11vw,3rem); }
  .hero-stats{ gap:20px; }
  .story-flow{ gap:8px; }
  .story-flow i{ width:18px; }

  /* Compact the booking form on small screens */
  form.quote-form{ padding:20px 16px; }
  .form-row{ margin-bottom:12px; }
  .form-field{ gap:4px; }
  input,select,textarea{ padding:10px 12px; font-size:.92rem; }
  fieldset{ margin-bottom:12px; }
  .live-booking{ margin:18px 0; }
  .booking-date-row{ padding:12px 14px; }
  .prep-toggle-btn{ padding:12px; flex-wrap:wrap; }
  .prep-toggle-badge{ margin-left:44px; }
  .radio-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
  .radio-row label{ white-space:nowrap; }

  /* Footer sizing/position on small screens */
  .footer-wordmark{ max-width:230px; }
  .footer-wordmark-dark{ max-width:220px; }
  .ribbon-img.lang-active,
  .ribbon-bar.lang-active{ max-width:280px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; text-align:center; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:6px; }
}