/* ==========================================================================
   Ray Espinoza Plumbing — rayeplumbing.com
   Central Coast palette: oak, dry grass, limestone, weathered metal.
   ========================================================================== */

:root{
  /* Ground — warm limestone, never clinical white */
  --paper:#FFFFFF;
  --paper-2:#F4F4F2;
  --paper-3:#E7E7E4;
  --card:#FFFFFF;

  /* Ink — warm brown-black, not grey */
  --ink:#1C1C1A;
  --ink-2:#43433F;
  --ink-3:#6A6A64;
  --line:rgba(28,28,26,.13);
  --line-strong:rgba(28,28,26,.22);

  /* Deep plates — masthead, footer, call-to-action */
  --plate:#26331F;
  --plate-2:#1B2516;
  --on-plate:#F3EFE4;
  --on-plate-2:#BCC8B0;

  /* Valley oak — primary */
  --oak:#3D5A33;
  --oak-2:#2B4224;
  --oak-3:#6F8F5F;
  --oak-soft:rgba(61,90,51,.09);
  --oak-line:rgba(61,90,51,.30);

  /* Dry grass gold — secondary, used sparingly */
  --gold:#B5842A;
  --gold-2:#93681B;
  --gold-3:#D9A94E;
  --gold-soft:rgba(181,132,42,.11);
  --gold-line:rgba(181,132,42,.32);

  /* Weathered brick — emergencies only */
  --brick:#9B3A1D;
  --brick-2:#78290F;

  /* legacy aliases so older rules keep working */
  --surface:var(--paper-2);
  --surface-2:var(--card);
  --surface-3:var(--card);
  --text:var(--ink);
  --text-2:var(--ink-2);
  --text-3:var(--ink-3);

  --chrome-grad:linear-gradient(180deg,#FFFFFF 0%,#E4DACA 28%,#9E9280 55%,#F6F0E4 78%,#B6AA96 100%);

  --wrap:1200px;
  --wrap-narrow:840px;
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --shadow:0 20px 48px -20px rgba(28,28,26,.28);
  --shadow-sm:0 8px 22px -12px rgba(28,28,26,.22);
  --ease:cubic-bezier(.22,.75,.28,1);

  --header-h:80px;
  --bar-h:38px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:130px}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%;display:block}
a{color:var(--gold-3);text-decoration:none}
a:hover{color:#FFE0AA}
button{font:inherit}
h1,h2,h3,h4{
  font-family:'Bitter',Georgia,serif;
  line-height:1.16;
  margin:0 0 .5em;
  letter-spacing:-.012em;
  font-weight:700;
}
h1{font-size:clamp(2.3rem,5.1vw,3.95rem);font-weight:800;letter-spacing:-.022em}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.018em}
h3{font-size:clamp(1.14rem,1.8vw,1.4rem)}
h4{font-size:1.02rem;font-weight:700}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--line);margin:3rem 0}

::selection{background:var(--gold);color:#1A1613}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

.skip{
  position:fixed;top:0;left:0;z-index:200;
  background:var(--gold);color:#231A08;padding:12px 18px;font-weight:700;
  border-radius:0 0 8px 0;transform:translateY(-150%);
  transition:transform .18s var(--ease);
}
.skip:focus{transform:translateY(0);color:#231A08}

/* ---------- Water layer ----------
   One fixed, full-viewport canvas behind the entire page, so the water reacts
   wherever the cursor goes on any page — not just in the header area. Purely
   decorative: never intercepts a click, and content sits above it. */
#water-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:1;
}
.site-header,.alertbar,.callbar{position:relative}
main,.site-footer{position:relative;z-index:1}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding:clamp(64px,8vw,110px) 0;position:relative;background:rgba(19,17,16,.50)}
.section--tight{padding:clamp(48px,5vw,72px) 0}
.section--alt{background:rgba(26,22,19,.64)}
.section--alt2{background:linear-gradient(180deg,rgba(26,22,19,.64) 0%,rgba(34,29,24,.70) 100%)}

/* subtle paper/dust grain over dark sections */
.section--alt::before,.section--alt2::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(241,233,218,.028) 1px,transparent 1px);
  background-size:4px 4px;
}
.section--alt > .wrap,.section--alt2 > .wrap{position:relative;z-index:1}

.grid{display:grid;gap:26px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.center{text-align:center}
.mx-auto{margin-inline:auto}
.mb-0{margin-bottom:0}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--text-2);line-height:1.64}
.small{font-size:.9rem;color:var(--text-3)}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;
  font-size:.735rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.section-head{max-width:730px;margin-bottom:clamp(36px,4vw,56px)}
.section-head.center{margin-inline:auto}
.section-head.center .eyebrow::after{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(270deg,var(--gold),transparent)}

.chrome-text{
  background:var(--chrome-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:.94rem;letter-spacing:.005em;
  padding:15px 26px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
.btn svg{width:19px;height:19px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--primary{
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-2) 100%);
  color:#231A08;
  box-shadow:0 12px 26px -12px rgba(224,172,76,.6),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary:hover{color:#231A08;box-shadow:0 18px 34px -12px rgba(224,172,76,.7),inset 0 1px 0 rgba(255,255,255,.45)}

.btn--oak{
  background:linear-gradient(180deg,var(--oak) 0%,var(--oak-2) 100%);
  color:#F4F8EF;box-shadow:0 12px 26px -12px rgba(76,102,57,.7),inset 0 1px 0 rgba(255,255,255,.24);
}
.btn--oak:hover{color:#fff}

.btn--chrome{background:var(--chrome-grad);color:#1A1613;box-shadow:0 12px 28px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.7)}
.btn--chrome:hover{color:#1A1613}

.btn--ghost{
  background:rgba(241,233,218,.04);border-color:var(--line-strong);color:var(--text);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{background:rgba(241,233,218,.09);border-color:var(--gold-line);color:#fff}

.btn--lg{padding:18px 34px;font-size:1.02rem}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-row.center{justify-content:center}

.textlink{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.92rem;color:var(--gold-3)}
.textlink svg{width:16px;height:16px;transition:transform .18s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}

/* ---------- Emergency bar ---------- */
.alertbar{
  background:linear-gradient(90deg,var(--brick-2),var(--brick) 45%,var(--brick-2));
  color:#FCEFE9;font-size:.87rem;font-weight:600;position:relative;z-index:60;
}
.alertbar .wrap{min-height:var(--bar-h);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center;padding-block:7px}
.alertbar a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:800}
.alertbar a:hover{color:#fff;text-decoration-thickness:2px}
.alertbar .ab-short{display:none}
@media (max-width:720px){.alertbar .ab-long{display:none}.alertbar .ab-short{display:inline}}
.alertbar .pulse{width:8px;height:8px;border-radius:50%;background:#FFD9C8;flex:none;box-shadow:0 0 0 0 rgba(255,217,200,.85);animation:pulse 2.1s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,217,200,.75)}
  70%{box-shadow:0 0 0 11px rgba(255,217,200,0)}
  100%{box-shadow:0 0 0 0 rgba(255,217,200,0)}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(19,17,16,.80);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.site-header.is-stuck{background:rgba(19,17,16,.95);border-bottom-color:var(--line-strong)}
.site-header .wrap{min-height:var(--header-h);display:flex;align-items:center;gap:22px}

.brand{display:flex;align-items:center;gap:13px;flex:none;padding-block:10px}
.brand img{height:42px;width:auto;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-name{
  font-family:'Bitter',Georgia,serif;font-weight:800;
  font-size:1.005rem;letter-spacing:.03em;text-transform:uppercase;
  background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;white-space:nowrap;
}
.brand-sub{
  font-size:.575rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);margin-top:4px;white-space:nowrap;
}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{color:var(--text-2);font-size:.925rem;font-weight:500;padding:9px 13px;border-radius:var(--r-sm);transition:color .16s,background .16s;white-space:nowrap}
.nav a:hover{color:#fff;background:rgba(241,233,218,.07)}
.nav a[aria-current="page"]{color:#fff;background:rgba(241,233,218,.08)}

.has-drop{position:relative}
.drop-btn{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--text-2);cursor:pointer;
  font-size:.925rem;font-weight:500;padding:9px 13px;border-radius:var(--r-sm);font-family:inherit;
  transition:color .16s,background .16s;
}
.drop-btn:hover,.has-drop:hover .drop-btn,.drop-btn[aria-expanded="true"]{color:#fff;background:rgba(241,233,218,.07)}
.drop-btn svg{width:13px;height:13px;transition:transform .2s var(--ease);opacity:.75}
.has-drop:hover .drop-btn svg,.drop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);min-width:520px;
  background:rgba(28,24,20,.98);backdrop-filter:blur(18px);
  border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);
  padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.has-drop:hover .drop,.drop.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.drop a{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border-radius:9px;color:var(--text);font-size:.9rem;font-weight:600}
.drop a span{font-size:.775rem;font-weight:400;color:var(--text-3);line-height:1.35}
.drop a:hover{background:var(--gold-soft);color:#fff}
.drop a:hover span{color:var(--text-2)}

.header-cta{display:flex;align-items:center;gap:10px;flex:none}
.header-call{padding:12px 20px;font-size:.95rem;white-space:nowrap}
.nav > .btn{display:none}

.nav-toggle{
  display:none;margin-left:auto;width:46px;height:46px;border-radius:10px;
  background:rgba(241,233,218,.06);border:1px solid var(--line-strong);color:var(--text);cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}

/* ==========================================================================
   HERO — interactive water surface
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(66px,9vw,116px) 0 clamp(60px,7vw,96px);
  background:
    radial-gradient(1100px 620px at 76% -14%,rgba(224,172,76,.16),transparent 62%),
    radial-gradient(820px 520px at 6% 106%,rgba(126,156,99,.13),transparent 66%),
    linear-gradient(180deg,rgba(16,14,12,.62) 0%,rgba(28,23,18,.50) 52%,rgba(21,18,16,.66) 100%);
}
/* (canvas styles live in the global layer section below) */
/* scrim: keeps headline contrast while letting the water show on the open side */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,rgba(19,17,16,.58) 0%,rgba(19,17,16,.30) 42%,rgba(19,17,16,.08) 74%,rgba(19,17,16,0) 100%);
}
/* dry-grass horizon glow */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(19,17,16,.72) 62%,var(--ink));
}
.hero .wrap{position:relative;z-index:3}
/* hero text legibility: shadows on the type instead of a heavy scrim, so the
   water stays visible behind it */
.hero h1,.page-hero h1{
  /* drop-shadow, not text-shadow: the headline uses background-clip:text, and a
     text-shadow renders *through* the transparent glyphs and muddies the gold */
  filter:drop-shadow(0 2px 16px rgba(10,8,7,.95)) drop-shadow(0 1px 2px rgba(10,8,7,.85));
}
.hero .lead,.page-hero .lead,.hero .eyebrow,.page-hero .eyebrow,.crumbs,.water-hint{
  text-shadow:0 1px 14px rgba(10,8,7,.95),0 1px 2px rgba(10,8,7,.85)
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,68px);align-items:center}
.hero h1{margin-bottom:.4em}
.hero h1 .accent{
  background:linear-gradient(115deg,var(--gold-3),var(--gold) 52%,#FFDFA4);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.hero .lead{max-width:56ch;margin-bottom:1.8em}
.hero .btn-row{margin-bottom:30px}

/* hint that the hero is interactive */
.water-hint{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.775rem;color:var(--text-3);letter-spacing:.04em;
  margin-bottom:22px;opacity:0;transition:opacity .8s var(--ease) .9s;
}
.water-hint.is-in{opacity:1}
.water-hint svg{width:16px;height:16px;color:var(--gold);flex:none}
@media (hover:none){.water-hint .h-mouse{display:none}}
@media (hover:hover){.water-hint .h-touch{display:none}}

.hero-badges{display:flex;flex-wrap:wrap;gap:10px}
.hbadge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(241,233,218,.05);border:1px solid var(--line);
  padding:8px 14px;border-radius:100px;font-size:.815rem;font-weight:600;color:var(--text-2);
}
.hbadge svg{width:15px;height:15px;color:var(--gold);flex:none}

/* ---------- Cards / forms ---------- */
.hero-card{
  background:linear-gradient(165deg,rgba(44,37,30,.97),rgba(21,18,15,.98));
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,34px);box-shadow:var(--shadow);position:relative;
}
.hero-card::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
  background:linear-gradient(160deg,rgba(241,233,218,.14),transparent 42%);
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
}
.hero-card h2{font-size:1.48rem;margin-bottom:.3em}
.hero-card .small{margin-bottom:22px}

.field{margin-bottom:15px}
.field label{display:block;font-size:.785rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px}
.field .req{color:var(--gold)}
.input,.select,.textarea{
  width:100%;background:rgba(241,233,218,.05);border:1px solid var(--line-strong);
  border-radius:10px;color:var(--text);padding:13px 15px;font-family:inherit;font-size:.97rem;
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.input::placeholder,.textarea::placeholder{color:#7A7061}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(224,172,76,.08);
  box-shadow:0 0 0 4px rgba(224,172,76,.16);
}
.textarea{min-height:112px;resize:vertical}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23968B7A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px;
}
.select option{background:#221D18;color:var(--text)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-note{font-size:.79rem;color:var(--text-3);margin-top:13px;line-height:1.5}
.form-note a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Trust strip ---------- */
.trust{border-block:1px solid var(--line);background:rgba(26,22,19,.68);padding:26px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust-item{display:flex;align-items:center;gap:13px;justify-content:center;text-align:left}
.trust-item svg{width:26px;height:26px;color:var(--gold);flex:none}
.trust-item b{display:block;font-family:'Bitter',serif;font-size:.95rem;font-weight:700;color:#fff;line-height:1.2}
.trust-item span{display:block;font-size:.79rem;color:var(--text-3);line-height:1.35}

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(165deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--line);border-radius:var(--r);padding:28px;
  position:relative;overflow:hidden;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity .22s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--gold-line);box-shadow:var(--shadow-sm)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:.45em}
.card p{color:var(--text-2);font-size:.945rem;margin-bottom:1em}
.card p:last-child{margin-bottom:0}

.card-ico{
  width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-3);margin-bottom:18px;
}
.card-ico svg{width:26px;height:26px}

a.card{display:block;color:inherit}
a.card:hover{color:inherit}
a.card .textlink{margin-top:4px}
.card--flat{background:var(--surface-2);border-color:var(--line)}
.card--flat:hover{transform:none;box-shadow:none}

.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding-left:31px;margin-bottom:11px;color:var(--text-2);font-size:.95rem}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:19px;height:19px;border-radius:50%;background:var(--oak-soft);border:1px solid rgba(126,156,99,.4)}
.checks li::after{content:"";position:absolute;left:6px;top:.72em;width:7px;height:4px;border-left:2px solid var(--oak-3);border-bottom:2px solid var(--oak-3);transform:rotate(-45deg)}

/* ---------- Local fact callout ---------- */
.factbar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.fact{background:var(--surface-2);padding:26px 24px}
.fact b{
  display:block;font-family:'Bitter',serif;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:800;
  line-height:1;margin-bottom:8px;
  background:linear-gradient(180deg,var(--gold-3),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.fact span{display:block;font-size:.9rem;color:var(--text-2);line-height:1.45}
.fact em{display:block;font-style:normal;font-size:.76rem;color:var(--text-3);margin-top:8px}

/* ---------- Photo slots ---------- */
.photo{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-strong);background:var(--surface-2);
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo--owner{aspect-ratio:4/5}
.photo--wide{aspect-ratio:16/10}
.photo-cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 22px 18px;
  background:linear-gradient(180deg,transparent,rgba(19,17,16,.92));
  font-size:.86rem;color:var(--text-2);
}
.photo-cap b{display:block;font-family:'Bitter',serif;color:#fff;font-size:1.02rem;margin-bottom:2px}

/* placeholder state — clearly marked, never looks broken */
.photo--empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:34px 26px;text-align:center;
  border-style:dashed;border-color:var(--line-strong);
  background:
    repeating-linear-gradient(135deg,rgba(241,233,218,.022) 0 12px,transparent 12px 24px),
    var(--surface-2);
  min-height:230px;
}
.photo--empty svg{width:34px;height:34px;color:var(--text-3);opacity:.7}
.photo--empty b{font-family:'Bitter',serif;font-size:.98rem;color:var(--text-2)}
.photo--empty span{font-size:.8rem;color:var(--text-3);max-width:30ch;line-height:1.45}

/* ---------- Process steps ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{position:relative;padding-top:16px}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:'Bitter',serif;font-size:2.8rem;font-weight:800;
  background:linear-gradient(180deg,var(--gold-3),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  display:block;line-height:1;margin-bottom:12px;opacity:.9;
}
.step h3{font-size:1.1rem;margin-bottom:.4em}
.step p{color:var(--text-3);font-size:.9rem;margin:0}

/* ---------- Testimonials ---------- */
.quote{
  background:linear-gradient(165deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;
}
.stars{display:flex;gap:3px;margin-bottom:14px}
.stars svg{width:17px;height:17px;color:var(--gold)}
.quote blockquote{margin:0 0 18px;font-size:.985rem;color:var(--text-2);line-height:1.62;flex:1}
.quote-by{display:flex;align-items:center;gap:12px}
.avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:linear-gradient(160deg,var(--oak),var(--oak-2));color:#F4F8EF;
  display:flex;align-items:center;justify-content:center;font-family:'Bitter',serif;font-weight:700;font-size:.86rem;
}
.quote-by b{display:block;font-size:.9rem;color:#fff;font-family:'Bitter',serif}
.quote-by span{display:block;font-size:.78rem;color:var(--text-3)}

/* ---------- Service area ---------- */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:11px}
.area{
  display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:13px 15px;font-size:.92rem;font-weight:600;color:var(--text-2);
  transition:border-color .18s,color .18s,background .18s;
}
.area svg{width:15px;height:15px;color:var(--oak-3);flex:none}
a.area:hover{border-color:var(--gold-line);color:#fff;background:var(--gold-soft)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;
  background:
    radial-gradient(780px 430px at 20% 0%,rgba(224,172,76,.20),transparent 65%),
    radial-gradient(620px 380px at 88% 100%,rgba(126,156,99,.14),transparent 66%),
    linear-gradient(180deg,rgba(27,22,19,.86),rgba(16,14,12,.92));
  border-block:1px solid var(--line-strong);padding:clamp(56px,7vw,88px) 0;
}
.cta-band h2{margin-bottom:.35em}
.cta-band .lead{margin-bottom:1.6em}

/* ---------- Page hero ---------- */
.page-hero{
  position:relative;overflow:hidden;
  padding:clamp(52px,6vw,84px) 0 clamp(40px,5vw,60px);
  background:
    radial-gradient(840px 450px at 82% -30%,rgba(224,172,76,.14),transparent 62%),
    linear-gradient(180deg,rgba(16,14,12,.58),rgba(26,22,19,.72));
  border-bottom:1px solid var(--line);
}
/* interior pages get the same water surface, dialled back a little */
.page-hero > .wrap{position:relative;z-index:3}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,rgba(19,17,16,.54) 0%,rgba(19,17,16,.28) 46%,rgba(19,17,16,.06) 78%,rgba(19,17,16,0) 100%);
}
.page-hero h1{font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:.35em}
.page-hero .lead{max-width:64ch}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.815rem;color:var(--text-3);margin-bottom:20px;list-style:none;padding:0}
.crumbs li{margin:0;display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:#5A5145}
.crumbs a{color:var(--text-3)}
.crumbs a:hover{color:var(--gold-3)}
.crumbs [aria-current]{color:var(--text-2)}

/* ---------- Prose ---------- */
.prose h2{margin-top:2.2em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.7em;color:#fff}
.prose p,.prose li{color:var(--text-2)}
.prose ul{padding-left:1.2em}
.prose strong{color:#fff;font-weight:600}

.split{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(32px,4vw,56px);align-items:start}
.sticky-side{position:sticky;top:calc(var(--header-h) + 22px)}
.side-card{
  background:linear-gradient(165deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--line-strong);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm);
}
.side-card h3{font-size:1.18rem;margin-bottom:.4em}
.side-card p{font-size:.92rem;color:var(--text-2)}

.deftable{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.94rem}
.deftable th,.deftable td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.deftable th{font-family:'Bitter',serif;color:#fff;font-weight:700;width:38%}
.deftable td{color:var(--text-2)}
.deftable tr:last-child th,.deftable tr:last-child td{border-bottom:0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:'Bitter',serif;font-weight:700;font-size:1.02rem;color:#fff;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq summary:hover{color:var(--gold-3)}
.faq .faq-body{padding:0 0 22px;color:var(--text-2);font-size:.96rem}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.site-footer{background:linear-gradient(180deg,rgba(26,22,19,.78) 0%,rgba(13,11,9,.90) 100%);border-top:1px solid var(--line-strong);padding:clamp(52px,6vw,76px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px}
.foot-brand img{width:168px;height:auto;margin-bottom:18px;margin-left:-10px}
.foot-brand p{font-size:.92rem;color:var(--text-3);max-width:34ch}
.foot h4{font-size:.79rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:700;font-family:'Inter',sans-serif}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:9px}
.foot a{color:var(--text-3);font-size:.92rem}
.foot a:hover{color:var(--gold-3)}
.foot address{font-style:normal;font-size:.92rem;color:var(--text-3);line-height:1.75}
.foot address a{display:inline}
.foot-phone{display:inline-flex;align-items:center;gap:9px;font-family:'Bitter',serif;font-weight:800;font-size:1.22rem;color:#fff !important;margin-bottom:8px}
.foot-phone svg{width:19px;height:19px;color:var(--gold)}
.foot-phone:hover{color:var(--gold-3) !important}

.foot-bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:.83rem;color:#6E6455}
.foot-bottom a{color:#6E6455}
.foot-bottom a:hover{color:var(--text-2)}
.lic{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:100px;
  padding:6px 14px;font-size:.79rem;font-weight:700;color:var(--text-2);letter-spacing:.02em;
}
.lic svg{width:14px;height:14px;color:var(--oak-3)}

/* ---------- Mobile call bar ---------- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(16,14,12,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line-strong);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;
}
.callbar .btn{flex:1;padding:14px 12px;font-size:.92rem}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  #water-canvas{display:none}
  .water-hint{display:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-card{max-width:560px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .sticky-side{position:static}
}
@media (max-width:960px){
  /* An ancestor with backdrop-filter becomes the containing block for its
     position:fixed descendants — which collapsed the full-screen nav overlay
     into the header box. Drop the blur here so the menu can cover the page. */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(19,17,16,.97)}
  .site-header.is-stuck{background:rgba(19,17,16,.99)}

  .nav,.header-call{display:none}
  .nav-toggle{display:flex}
  .header-cta{margin-left:auto}
  .site-header .wrap{gap:12px}
  .nav{
    position:fixed;inset:calc(var(--header-h) + var(--bar-h)) 0 0;
    background:#131110;
    flex-direction:column;align-items:stretch;gap:2px;padding:22px 24px 140px;overflow-y:auto;margin-left:0;
    z-index:55;
  }
  .nav.is-open{display:flex}
  .nav a,.drop-btn{padding:15px 14px;font-size:1.04rem;width:100%;border-bottom:1px solid var(--line);border-radius:0}
  .drop-btn{justify-content:space-between}
  .has-drop{width:100%}
  .drop{
    position:static;transform:none;min-width:0;width:100%;grid-template-columns:1fr;
    background:transparent;border:0;box-shadow:none;padding:0 0 0 12px;
    display:none;opacity:1;visibility:visible;pointer-events:auto;
  }
  /* the desktop rule centres the panel with translate(-50%); that must not
     survive here or the submenu slides off the left edge */
  .drop.is-open,.has-drop:hover .drop{transform:none}
  .drop.is-open{display:grid}
  .has-drop:hover .drop{display:none}
  .has-drop:hover .drop.is-open{display:grid}
  .drop a{border-bottom:1px solid var(--line);border-radius:0;padding:13px 14px}
  .nav > .btn{margin-top:18px;width:100%;display:flex;border-bottom:0}
  .nav > a.btn--primary{color:#231A08}
  .nav > a.btn--primary:hover{color:#231A08}
}
@media (max-width:820px){
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .factbar{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .callbar{display:flex}
  body{padding-bottom:74px}
  .site-footer{padding-bottom:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:20px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:20px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .header-call span{display:none}
  .trust-item{justify-content:flex-start}
  .foot-bottom{flex-direction:column;align-items:flex-start;text-align:left}
  .card{padding:24px}
}

/* ==========================================================================
   MOBILE REFINEMENTS
   ========================================================================== */
@media (max-width:640px){
  /* the brand lockup was pushing the menu button off-screen at 390px */
  .brand{gap:10px;min-width:0}
  .brand img{height:34px}
  .brand-txt{min-width:0}
  .brand-name{font-size:.82rem;letter-spacing:.02em}
  .brand-sub{font-size:.54rem;letter-spacing:.14em}
  .site-header .wrap{gap:8px;padding-inline:16px}
  .nav-toggle{width:44px;height:44px}

  /* comfortable tap targets */
  .foot a{display:inline-block;padding:7px 0;font-size:.95rem}
  .foot li{margin-bottom:2px}
  .foot-bottom a{display:inline-block;padding:6px 0}
  .crumbs a{display:inline-block;padding:4px 0}
  .textlink{padding:8px 0}
  .faq summary{padding-block:22px}

  /* nothing under 12px */
  .small,.form-note,.fact em,.photo-cap,.foot-bottom{font-size:.82rem}
  .eyebrow{font-size:.8rem;letter-spacing:.16em}
  .hbadge{font-size:.8rem}
  .trust-item span{font-size:.82rem}
  .quote-by span{font-size:.82rem}

  /* hero badges two-up instead of a four-row stack, so the form sits higher */
  .hero-badges{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hbadge{padding:9px 11px;font-size:.76rem;justify-content:flex-start}
  .hbadge svg{width:14px;height:14px}
  .hero{padding-top:clamp(34px,7vw,58px)}
  .hero .lead{margin-bottom:1.4em}
  .hero .btn-row{margin-bottom:20px}
  .water-hint{margin-bottom:16px}

  /* photos read better a little taller on a narrow screen */
  .photo--wide{aspect-ratio:4/3}
  .photo--owner{aspect-ratio:3/4}
}

@media (max-width:400px){
  .brand-sub{display:none}
  .brand-name{font-size:.86rem}
  .brand img{height:32px}
}

@media print{
  .site-header,.alertbar,.callbar,.cta-band,.hero-card,#water-canvas{display:none !important}
  body{background:#fff;color:#000}
  a{color:#000}
}

/* ==========================================================================
   LIGHT GROUND — limestone body, deep oak plates
   Overrides the surfaces that were authored for a dark background.
   ========================================================================== */

body{background:var(--paper);color:var(--ink-2)}
h1,h2,h3,h4{color:var(--ink)}
a{color:var(--oak)}
a:hover{color:var(--oak-2)}
::selection{background:var(--oak);color:#fff}
:focus-visible{outline-color:var(--oak)}
hr{border-top-color:var(--line)}

/* ---- water sits under everything, gently ---- */
#water-canvas{opacity:.62}

/* ---- sections ---- */
.section{background:rgba(255,255,255,.86)}
.section--alt{background:rgba(244,244,242,.90)}
.section--alt2{background:linear-gradient(180deg,rgba(244,244,242,.90),rgba(231,231,228,.92))}
.section--alt::before,.section--alt2::before{
  background-image:radial-gradient(rgba(28,28,26,.05) 1px,transparent 1px);opacity:.5;
}
.lead{color:var(--ink-2)}
.small{color:var(--ink-3)}

/* ---- masthead: deep oak plate, so the chrome logo has a home ---- */
.site-header{
  background:var(--plate);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(0,0,0,.25);
}
.site-header.is-stuck{background:var(--plate-2);box-shadow:0 10px 30px -18px rgba(34,29,24,.6)}
.brand-name{-webkit-text-fill-color:initial;background:none;color:var(--on-plate)}
.brand-sub{color:var(--on-plate-2)}
.nav a,.drop-btn{color:var(--on-plate-2)}
.nav a:hover,.drop-btn:hover,.has-drop:hover .drop-btn{color:#fff;background:rgba(255,255,255,.10)}
.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.13)}
.nav-toggle{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:var(--on-plate)}
.drop{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.drop a{color:var(--ink)}
.drop a span{color:var(--ink-3)}
.drop a:hover{background:var(--oak-soft);color:var(--oak-2)}
.drop a:hover span{color:var(--ink-2)}

/* ---- emergency bar ---- */
.alertbar{background:var(--brick);color:#FCEFE9}
.alertbar .pulse{background:#FFD9C8}

/* ---- buttons ---- */
.btn--primary{
  background:var(--oak);color:#F7F4EC;
  box-shadow:0 10px 22px -12px rgba(61,90,51,.55);
}
.btn--primary:hover{background:var(--oak-2);color:#fff;box-shadow:0 14px 28px -12px rgba(61,90,51,.6)}
.btn--ghost{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{background:#fff;border-color:var(--oak);color:var(--oak-2)}
.btn--chrome{background:var(--gold);color:#2A1E06;box-shadow:0 10px 22px -12px rgba(181,132,42,.5)}
.btn--chrome:hover{background:var(--gold-2);color:#fff}
.header-call{background:var(--gold);color:#2A1E06;box-shadow:none}
.header-call:hover{background:var(--gold-3);color:#2A1E06}
.textlink{color:var(--oak)}
.textlink:hover{color:var(--oak-2)}

/* ---- hero ---- */
.hero{
  background:
    radial-gradient(1100px 620px at 78% -16%,rgba(181,132,42,.13),transparent 62%),
    radial-gradient(820px 520px at 4% 108%,rgba(61,90,51,.11),transparent 66%),
    linear-gradient(180deg,rgba(251,247,239,.55) 0%,rgba(244,238,226,.42) 55%,rgba(251,247,239,.70) 100%);
}
.hero::before{
  background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 34%,rgba(255,255,255,.42) 62%,rgba(255,255,255,.06) 100%);
}
.hero::after{background:linear-gradient(180deg,transparent,rgba(255,255,255,.55) 58%,var(--paper))}
.hero h1,.page-hero h1{filter:none;color:var(--ink)}
.hero h1 .accent{
  background:none;-webkit-text-fill-color:initial;color:var(--oak);
}
.eyebrow{color:var(--oak)}
.eyebrow::before{background:linear-gradient(90deg,var(--oak),transparent)}
.section-head.center .eyebrow::after{background:linear-gradient(270deg,var(--oak),transparent)}
.hbadge{background:#fff;border-color:var(--line);color:var(--ink-2)}
.hbadge svg{color:var(--oak)}
.water-hint{color:var(--ink-3);text-shadow:none}
.water-hint svg{color:var(--oak-3)}

.page-hero{
  background:
    radial-gradient(840px 450px at 84% -34%,rgba(181,132,42,.12),transparent 62%),
    linear-gradient(180deg,rgba(244,238,226,.55),rgba(251,247,239,.72));
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  background:linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.84) 38%,rgba(255,255,255,.34) 68%,rgba(255,255,255,0) 100%);
}
.crumbs,.crumbs a{color:var(--ink-3);text-shadow:none}
.crumbs a:hover{color:var(--oak)}
.crumbs li+li::before{color:#B4B4AE}
.hero .lead,.page-hero .lead,.hero .eyebrow,.page-hero .eyebrow{text-shadow:none}

/* ---- cards & panels ---- */
.card,.card--flat,.quote,.side-card,.hero-card{
  background:var(--card);border-color:var(--line);box-shadow:var(--shadow-sm);
}
.hero-card::before{display:none}
.card:hover{border-color:var(--oak-line);box-shadow:var(--shadow)}
.card::after{background:linear-gradient(90deg,var(--oak),transparent)}
.card p,.quote blockquote,.side-card p{color:var(--ink-2)}
.card-ico{background:var(--oak-soft);border-color:var(--oak-line);color:var(--oak)}
.checks li{color:var(--ink-2)}
.checks li::before{background:var(--oak-soft);border-color:var(--oak-line)}
.checks li::after{border-color:var(--oak)}
.stars svg{color:var(--gold)}
.avatar{background:var(--oak);color:#F7F4EC}
.quote-by b{color:var(--ink)}
.quote-by span{color:var(--ink-3)}

/* ---- trust strip ---- */
.trust{background:rgba(244,244,242,.92);border-color:var(--line)}
.trust-item b{color:var(--ink)}
.trust-item span{color:var(--ink-3)}
.trust-item svg{color:var(--oak)}

/* ---- facts ---- */
.factbar{background:var(--line);border-color:var(--line)}
.fact{background:var(--card)}
.fact b{background:none;-webkit-text-fill-color:initial;color:var(--oak)}
.fact span{color:var(--ink-2)}
.fact em{color:var(--ink-3)}

/* ---- steps ---- */
.step::before{background:none;-webkit-text-fill-color:initial;color:var(--gold);opacity:1}
.step p{color:var(--ink-2)}

/* ---- service areas ---- */
.area{background:#fff;border-color:var(--line);color:var(--ink-2)}
.area svg{color:var(--oak-3)}
a.area:hover{background:var(--oak-soft);border-color:var(--oak-line);color:var(--oak-2)}

/* ---- forms ---- */
.field label{color:var(--ink-3)}
.field .req{color:var(--brick)}
.input,.select,.textarea{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.input::placeholder,.textarea::placeholder{color:#98988F}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--oak);background:#fff;box-shadow:0 0 0 4px var(--oak-soft);
}
.select{
  /* full shorthand: the .input/.select/.textarea override above resets
     background-repeat, which was tiling the chevron across the field */
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6456' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/17px;
}
.select option{background:#fff;color:var(--ink)}
.form-note{color:var(--ink-3)}
.form-note a{color:var(--oak)}

/* ---- FAQ ---- */
.faq,.faq details{border-color:var(--line)}
.faq summary{color:var(--ink)}
.faq summary::after{border-color:var(--oak)}
.faq summary:hover{color:var(--oak)}
.faq .faq-body{color:var(--ink-2)}

/* ---- prose & tables ---- */
.prose p,.prose li{color:var(--ink-2)}
.prose h3,.prose strong{color:var(--ink)}
.deftable th{color:var(--ink)}
.deftable td{color:var(--ink-2)}
.deftable th,.deftable td{border-color:var(--line)}

/* ---- photos ---- */
.photo{border-color:var(--line);background:var(--paper-2)}
.photo-cap{background:linear-gradient(180deg,transparent,rgba(27,37,22,.88));color:#E9E4D7}
.photo-cap b{color:#fff}

/* ---- CTA band: deep plate ---- */
.cta-band{
  background:
    radial-gradient(760px 420px at 18% 0%,rgba(111,143,95,.30),transparent 66%),
    linear-gradient(180deg,var(--plate),var(--plate-2));
  border-block:1px solid rgba(0,0,0,.2);
}
.cta-band h2{color:#fff}
.cta-band .lead{color:var(--on-plate-2)}
.cta-band .eyebrow{color:var(--gold-3)}
.cta-band .eyebrow::before,.cta-band .eyebrow::after{background:linear-gradient(90deg,var(--gold-3),transparent)}
.cta-band .btn--ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff}
.cta-band .lic{border-color:rgba(255,255,255,.3);color:var(--on-plate-2)}
.cta-band .lic svg{color:var(--gold-3)}

/* ---- footer: deep plate ---- */
.site-footer{background:linear-gradient(180deg,var(--plate),var(--plate-2));border-top:0}
.site-footer h4{color:#fff}
.foot-brand p{color:var(--on-plate-2)}
.foot a{color:var(--on-plate-2)}
.foot a:hover{color:#fff}
.foot address{color:var(--on-plate-2)}
.foot-phone{color:#fff !important}
.foot-phone svg{color:var(--gold-3)}
.foot-phone:hover{color:var(--gold-3) !important}
.foot-bottom{border-top-color:rgba(255,255,255,.14);color:#9BA893}
.foot-bottom a{color:#9BA893}
.foot-bottom a:hover{color:#fff}
.lic{border-color:rgba(255,255,255,.28);color:var(--on-plate-2)}
.lic svg{color:var(--gold-3)}

/* ---- mobile call bar ---- */
.callbar{background:rgba(255,255,255,.97);border-top:1px solid var(--line-strong)}

/* ---- skip link ---- */
.skip{background:var(--oak);color:#fff}
.skip:focus{color:#fff}

/* ---- mobile menu overlay on the light ground ---- */
@media (max-width:960px){
  .nav{background:var(--plate)}
  .nav a,.drop-btn{border-bottom-color:rgba(255,255,255,.12)}
  .drop a{border-bottom-color:rgba(255,255,255,.10);color:var(--on-plate)}
  .drop a span{color:var(--on-plate-2)}
  .drop a:hover{background:rgba(255,255,255,.08);color:#fff}
  .nav > a.btn--primary,.nav > a.btn--primary:hover{background:var(--gold);color:#2A1E06}
}

/* ==========================================================================
   FADED BLACK & WHITE SCENES
   Ray's own job sites, desaturated and washed back so they read as texture
   behind the content rather than as pictures competing with it.
   ========================================================================== */
.hero{
  background:
    linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.72) 100%);
}
.page-hero{
  background:
    linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.80));
}
.cta-band{
  background:
    radial-gradient(760px 420px at 18% 0%,rgba(111,143,95,.28),transparent 66%),
    linear-gradient(180deg,rgba(38,51,31,.93),rgba(27,37,22,.96));
}
.site-footer{
  background:
    linear-gradient(180deg,rgba(38,51,31,.95),rgba(27,37,22,.985));
}
.section--alt2{
  background:
    linear-gradient(180deg,rgba(246,246,244,.93),rgba(235,235,232,.95));
}
/* C — charcoal plates, crimson accents (most monochrome) */
:root{
  --oak:#9B1B30; --oak-2:#75121F; --oak-3:#C8556A;
  --oak-soft:rgba(155,27,48,.08); --oak-line:rgba(155,27,48,.28);
  --plate:#232322; --plate-2:#161615;
  --on-plate:#F0F0EE; --on-plate-2:#B6B6B1;
  --gold:#B5842A; --gold-2:#93681B; --gold-3:#D9A94E;
}
.cta-band{background:radial-gradient(760px 420px at 18% 0%,rgba(155,27,48,.30),transparent 66%),linear-gradient(180deg,rgba(35,35,34,.93),rgba(22,22,21,.96))}
.site-footer{background:linear-gradient(180deg,rgba(35,35,34,.95),rgba(22,22,21,.985))}
.foot-bottom{color:#9A9A95}.foot-bottom a{color:#9A9A95}

.alertbar{background:linear-gradient(90deg,#7A1523,#A81E35 45%,#7A1523);color:#FBEEF0}
.alertbar .pulse{background:#FFD4DA}

/* photo cards: taller frame, lighter caption so the picture carries it */
.photo--wide{aspect-ratio:3/2}
.photo-cap{
  padding:34px 20px 16px;
  background:linear-gradient(180deg,transparent 35%,rgba(20,20,19,.55) 68%,rgba(20,20,19,.86));
}
.photo-cap b{font-size:1.0rem}

/* header + menu call buttons in crimson, not gold — gold stays for small accents
   only (step numerals, review stars, the footer phone icon) */
.header-call{background:var(--oak);color:#fff;box-shadow:none}
.header-call:hover{background:var(--oak-2);color:#fff}
.btn--chrome{background:var(--oak);color:#fff;box-shadow:0 10px 22px -12px rgba(155,27,48,.5)}
.btn--chrome:hover{background:var(--oak-2);color:#fff}
@media (max-width:960px){
  .nav > a.btn--primary,.nav > a.btn--primary:hover{background:var(--oak);color:#fff}
}

/* water needs more presence on a pale ground than it did on black */
#water-canvas{opacity:.85}

/* Interior pages: give the photography room to read, and bring a scene back
   partway down the page so it isn't a single strip at the top. */
.page-hero{padding:clamp(74px,8vw,124px) 0 clamp(58px,6vw,84px)}
.section--alt{
  background:
    linear-gradient(180deg,rgba(246,246,244,.90),rgba(240,240,237,.92));
}

/* ==========================================================================
   DARK PHOTOGRAPHIC HEADERS
   The page stays light; the hero bands go dark so the photography has weight
   and the water's highlights actually read against it.
   ========================================================================== */
.hero{
  background:
    linear-gradient(180deg,rgba(18,18,17,.62) 0%,rgba(18,18,17,.50) 45%,rgba(18,18,17,.78) 100%);
}
.hero::before{
  background:linear-gradient(100deg,rgba(14,14,13,.86) 0%,rgba(14,14,13,.62) 38%,rgba(14,14,13,.22) 68%,rgba(14,14,13,0) 100%);
}
.hero::after{background:linear-gradient(180deg,transparent 55%,rgba(18,18,17,.35) 80%,var(--paper))}

.page-hero{
  background:
    linear-gradient(180deg,rgba(18,18,17,.66),rgba(18,18,17,.80));
  border-bottom:0;
}
.page-hero::before{
  background:linear-gradient(100deg,rgba(14,14,13,.82) 0%,rgba(14,14,13,.55) 42%,rgba(14,14,13,.16) 74%,rgba(14,14,13,0) 100%);
}

/* type on the dark bands */
.hero h1,.page-hero h1{color:#fff}
.hero h1 .accent{color:#F08497}
.hero .lead,.page-hero .lead{color:#DAD8D2}
.hero .eyebrow,.page-hero .eyebrow{color:#F08497}
.hero .eyebrow::before,.page-hero .eyebrow::before{background:linear-gradient(90deg,#F08497,transparent)}
.crumbs,.crumbs a{color:#B9B7B1}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#DAD8D2}
.crumbs li+li::before{color:#7C7A75}
.water-hint{color:#B9B7B1}
.water-hint svg{color:#F08497}
.hbadge{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#EDEBE6}
.hbadge svg{color:#F08497}
.hero .btn--ghost,.page-hero .btn--ghost{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30);color:#fff;
}
.hero .btn--ghost:hover,.page-hero .btn--ghost:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}

/* the mid-page scene band stays light — contrast against the dark headers */
.section--alt{
  background:
    linear-gradient(180deg,rgba(247,247,245,.93),rgba(241,241,238,.94));
}

/* accent tones on the dark bands: a rich crimson for the big headline (large
   text clears 3:1), a light neutral for the small eyebrow (needs 4.5:1) —
   the earlier light value was reading pink */
.hero h1 .accent{color:#C93B51}
.hero .eyebrow,.page-hero .eyebrow{color:#D8D3C7}
.hero .eyebrow::before,.page-hero .eyebrow::before{background:linear-gradient(90deg,#C93B51,transparent)}
.hbadge svg{color:#D9556A}
.water-hint svg{color:#D9556A}

/* ==========================================================================
   BALANCE PASS
   The header bands were too dark, and the content sections were veiling the
   water so heavily it only ever showed inside a hero. Lighten both.
   ========================================================================== */
.hero{
  background:
    linear-gradient(180deg,rgba(20,20,19,.46) 0%,rgba(20,20,19,.34) 45%,rgba(20,20,19,.62) 100%);
}
.hero::before{
  background:linear-gradient(100deg,rgba(16,16,15,.74) 0%,rgba(16,16,15,.48) 40%,rgba(16,16,15,.14) 70%,rgba(16,16,15,0) 100%);
}
.page-hero{
  background:
    linear-gradient(180deg,rgba(20,20,19,.50),rgba(20,20,19,.66));
}
.page-hero::before{
  background:linear-gradient(100deg,rgba(16,16,15,.70) 0%,rgba(16,16,15,.44) 42%,rgba(16,16,15,.10) 74%,rgba(16,16,15,0) 100%);
}

/* let the water read through the content, not just the hero */
#water-canvas{opacity:1}
.section{background:rgba(255,255,255,.66)}
.section--alt{
  background:
    linear-gradient(180deg,rgba(247,247,245,.80),rgba(241,241,238,.82));
}
.section--alt2{background:linear-gradient(180deg,rgba(246,246,244,.78),rgba(238,238,235,.82))}
.trust{background:rgba(246,246,244,.82)}

/* ==========================================================================
   LAYER ORDER FIX
   The photo used to be painted as the hero's own background, which sits ABOVE
   the fixed canvas — so the water was hidden behind the picture and only ever
   showed through translucent content. The photo now lives on its own fixed
   backdrop UNDER the canvas:

       #backdrop (photo, z -1)  →  #water-canvas (z 0)  →  content (z 1+)

   so the water ripples across the photograph on every page, at any scroll
   position, instead of being trapped behind it.
   ========================================================================== */
html{background:var(--paper)}
body{background:transparent}

#backdrop{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-position:center 34%;
  background-size:cover;
  background-repeat:no-repeat;
}
#backdrop::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,19,.34) 0%,rgba(20,20,19,.20) 38%,rgba(255,255,255,.30) 62%,rgba(255,255,255,.55) 100%);
}
/* heroes keep only their scrim — the picture is on the backdrop now */
.hero{
  background:linear-gradient(180deg,rgba(20,20,19,.30) 0%,rgba(20,20,19,.18) 45%,rgba(20,20,19,.42) 100%);
}
.page-hero{
  background:linear-gradient(180deg,rgba(20,20,19,.34),rgba(20,20,19,.48));
}
.section--alt{background:rgba(247,247,245,.84)}
.section--alt2{background:linear-gradient(180deg,rgba(246,246,244,.82),rgba(238,238,235,.86))}

/* text-heavy bands get slightly more veil than the open ones — the water still
   reads, but body copy never sits directly on a busy photograph */
.section--alt{background:rgba(247,247,245,.89)}
.section{background:rgba(255,255,255,.72)}

/* one scene across the whole site — the interior pages were using a brighter
   photograph, so page 2 onward looked washed out next to the home page */
.page-hero{
  background:linear-gradient(180deg,rgba(20,20,19,.30) 0%,rgba(20,20,19,.18) 45%,rgba(20,20,19,.42) 100%);
}

/* A gradient scrim is scaled to its element's height, so the shorter interior
   headers rendered a different tone than the tall home hero. Use a flat wash
   on both and let the viewport-based backdrop gradient do the falloff — now
   every page reads identically. */
.hero,.page-hero{background:rgba(20,20,19,.26)}

/* The home hero fills the screen (130% of viewport) while interior headers
   only reached ~68%, so page 2 onward showed a band of white below the fold
   and read as "lighter". Match the band height. */
.page-hero{
  min-height:calc(100vh - var(--header-h) - var(--bar-h));
  display:flex;align-items:center;
}
.page-hero > .wrap{width:100%}
@media (max-width:820px){
  /* a full-screen header is too much on a phone — keep it generous, not total */
  .page-hero{min-height:68vh}
}

/* ==========================================================================
   REVERT: CHARCOAL BANDS, NO BACKGROUND PHOTOGRAPHY
   The backdrop stays in place as a flat charcoal panel beneath the water
   canvas — that keeps the correct layer order (charcoal → water → content),
   so ripples still read across the dark bands instead of hiding behind them.
   ========================================================================== */
#backdrop{background-image:none;background:linear-gradient(180deg,#262625 0%,#1E1E1D 100%)}
#backdrop::after{content:none}

/* header bands stay transparent so the charcoal + water show through */
.hero,.page-hero{background:transparent}
.hero::before,.page-hero::before{content:none}
.hero::after{content:none}

/* content sits on near-solid white; a trace of water still moves behind it */
.section{background:rgba(255,255,255,.94)}
.section--alt{background:rgba(246,246,244,.95)}
.section--alt2{background:linear-gradient(180deg,rgba(246,246,244,.95),rgba(238,238,235,.96))}
.trust{background:rgba(246,246,244,.95)}

/* dark plates lose their photographs too */
.cta-band{
  background:
    radial-gradient(760px 420px at 18% 0%,rgba(155,27,48,.28),transparent 66%),
    linear-gradient(180deg,#262625,#1A1A19);
}
.site-footer{background:linear-gradient(180deg,#242423,#161615)}

/* ==========================================================================
   MAKE EVERY PAGE IDENTICAL
   Content surfaces were semi-transparent, so the charcoal backdrop showed
   through them by varying amounts — and because pages open with different
   section types, each page picked up a slightly different tint. Every content
   surface is now fully opaque, so the only place the charcoal (and the water
   over it) appears is the header band, identically on all 17 pages.
   ========================================================================== */
.section{background:#FFFFFF}
.section--alt{background:#F4F4F2}
.section--alt2{background:#F4F4F2}
.trust{background:#F4F4F2}
.section--alt::before,.section--alt2::before{content:none}

/* The phone link is white inside the dark footer, but the contact page reuses
   it inside a white card — where white on white is invisible. */
.side-card .foot-phone,.hero-card .foot-phone{color:var(--ink) !important}
.side-card .foot-phone:hover,.hero-card .foot-phone:hover{color:var(--oak) !important}
.side-card .foot-phone svg,.hero-card .foot-phone svg{color:var(--oak)}

/* captions sit on their own dark gradient, keep them light */
.photo-cap,.photo-cap b{color:#fff}

/* ==========================================================================
   CHARCOAL THROUGHOUT
   The charcoal and the water were confined to the header band; everything
   below it was white. The whole page is charcoal now, so the backdrop and the
   water carry all the way down and every screen reads the same.
   ========================================================================== */
:root{
  --paper:#262625;
  --paper-2:#2C2C2B;
  --paper-3:#333331;
  --card:#302F2E;
  --ink:#F2F0EB;
  --ink-2:#C6C3BC;
  --ink-3:#949089;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
}
html,body{background:#262625}

/* sections stay see-through so the water reads behind the content */
.section{background:transparent}
.section--alt{background:rgba(255,255,255,.035)}
.section--alt2{background:rgba(255,255,255,.035)}
.trust{background:rgba(255,255,255,.05);border-color:var(--line)}

/* type */
h1,h2,h3,h4{color:var(--ink)}
body,.lead,.prose p,.prose li,.card p,.quote blockquote,.side-card p,
.faq .faq-body,.deftable td,.checks li,.fact span,.step p{color:var(--ink-2)}
.small,.form-note,.fact em,.trust-item span,.quote-by span,.foot-bottom{color:var(--ink-3)}
.prose h3,.prose strong,.trust-item b,.quote-by b,.deftable th{color:var(--ink)}

/* panels */
.card,.card--flat,.quote,.side-card,.hero-card{
  background:var(--card);border-color:var(--line);box-shadow:0 18px 40px -22px rgba(0,0,0,.8);
}
.card:hover{border-color:var(--oak-line);box-shadow:0 24px 50px -22px rgba(0,0,0,.9)}
.fact{background:var(--card)}
.area{background:var(--card);border-color:var(--line);color:var(--ink-2)}
a.area:hover{background:rgba(155,27,48,.16);border-color:var(--oak-line);color:#fff}
.photo{background:var(--paper-2)}

/* forms on a dark ground */
.input,.select,.textarea{background:rgba(255,255,255,.06);border-color:var(--line-strong);color:var(--ink)}
.input::placeholder,.textarea::placeholder{color:#8C8880}
.input:focus,.select:focus,.textarea:focus{
  background:rgba(255,255,255,.09);border-color:var(--oak-3);box-shadow:0 0 0 4px rgba(155,27,48,.20);
}
.select{
  background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949089' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/17px;
}
.select option{background:#2C2C2B;color:var(--ink)}
.field label{color:var(--ink-3)}

/* controls */
.btn--ghost{background:rgba(255,255,255,.07);border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{background:rgba(255,255,255,.13);border-color:#fff;color:#fff}
.drop{background:#2C2C2B;border-color:var(--line-strong)}
.drop a{color:var(--ink)}
.drop a span{color:var(--ink-3)}
.drop a:hover{background:rgba(255,255,255,.08);color:#fff}
.callbar{background:rgba(30,30,29,.97);border-top-color:var(--line-strong)}
.faq,.faq details,.deftable th,.deftable td{border-color:var(--line)}
.faq summary{color:var(--ink)}
.crumbs li+li::before{color:#6E6A64}
.side-card .foot-phone,.hero-card .foot-phone{color:var(--ink) !important}

/* the section grain was tuned for a light ground */
.section--alt::before,.section--alt2::before{content:none}
/* muted text was landing at 4.40:1 — just under the 4.5 minimum */
:root{--ink-3:#A6A29A}
.drop a span{color:#ABA79F}

/* Crimson #9B1B30 reads fine on white but only manages 1.65:1 on charcoal.
   Text and icons use a lifted crimson; solid crimson stays for button fills,
   where the white label supplies the contrast. */
:root{--crimson-on-dark:#E8798B}
a{color:var(--crimson-on-dark)}
a:hover{color:#F6A6B2}
.eyebrow{color:var(--crimson-on-dark)}
.eyebrow::before{background:linear-gradient(90deg,var(--crimson-on-dark),transparent)}
.section-head.center .eyebrow::after{background:linear-gradient(270deg,var(--crimson-on-dark),transparent)}
.textlink{color:var(--crimson-on-dark)}
.textlink:hover{color:#F6A6B2}
.fact b{color:var(--crimson-on-dark)}
.field .req{color:var(--crimson-on-dark)}
.hero h1 .accent{color:#E4677E}
.card-ico{
  color:var(--crimson-on-dark);
  background:rgba(232,121,139,.13);border-color:rgba(232,121,139,.32);
}
.trust-item svg,.hbadge svg,.water-hint svg,.foot-phone svg,.lic svg,.area svg{color:var(--crimson-on-dark)}
.checks li::before{background:rgba(232,121,139,.13);border-color:rgba(232,121,139,.34)}
.checks li::after{border-color:var(--crimson-on-dark)}
.faq summary::after{border-color:var(--crimson-on-dark)}
.faq summary:hover{color:var(--crimson-on-dark)}
.crumbs a:hover{color:var(--crimson-on-dark)}
.form-note a{color:var(--crimson-on-dark)}
.step::before{color:var(--gold-3)}
.stars svg{color:var(--gold-3)}
/* buttons keep the deep crimson fill */
.btn--primary,.header-call,.btn--chrome{color:#fff}
.btn--primary:hover,.header-call:hover,.btn--chrome:hover{color:#fff}

/* ==========================================================================
   BACK TO THE DEEP CRIMSON
   The lifted pink is gone. Deep crimson #9B1B30 returns for every fill and for
   the large display accent. Small text that had been crimson becomes cream
   rather than pink — at small sizes deep crimson on charcoal is genuinely hard
   to read, and phone numbers and email addresses have to stay legible.
   ========================================================================== */
:root{--crimson-on-dark:#9B1B30}

/* large display accent — deep crimson, as originally */
.hero h1 .accent{color:#9B1B30}

/* small text: cream, not pink */
a{color:var(--ink)}
a:hover{color:#fff}
.eyebrow{color:#D9D4C9}
.eyebrow::before{background:linear-gradient(90deg,#9B1B30,transparent)}
.section-head.center .eyebrow::after{background:linear-gradient(270deg,#9B1B30,transparent)}
.textlink{color:var(--ink)}
.textlink:hover{color:#fff}
.form-note a,.crumbs a:hover,.faq summary:hover{color:#fff}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(155,27,48,.85);text-decoration-thickness:2px}
.prose a:hover{color:#fff;text-decoration-color:#9B1B30}

/* fills and marks stay deep crimson */
.fact b{color:#C23347}
.field .req{color:#C23347}
.card-ico{color:#E0566E;background:rgba(155,27,48,.22);border-color:rgba(155,27,48,.55)}
.trust-item svg,.hbadge svg,.water-hint svg,.foot-phone svg,.lic svg,.area svg{color:#C23347}
.checks li::before{background:rgba(155,27,48,.20);border-color:rgba(155,27,48,.5)}
.checks li::after{border-color:#D64A61}
.faq summary::after{border-color:#C23347}
.btn--primary,.header-call,.btn--chrome{background:#9B1B30;color:#fff}
.btn--primary:hover,.header-call:hover,.btn--chrome:hover{background:#7C1526;color:#fff}
/* The big water-hardness figures are information people need to read, so they
   get just enough lift to clear 3:1 while staying a deep crimson, not pink. */
.fact b{color:#D14458}
.fact b{color:#D64A5E}

/* --- Nav: highlight the Services button on any services page -------------
   Individual service pages mark their own dropdown entry as current. Without
   this the top-level button shows no active state, so the header looks like
   you're nowhere. :has() lets the parent react to the current child. */
.nav .has-drop:has(a[aria-current="page"]) .drop-btn{
  color:#fff;
  background:rgba(255,255,255,.13);
}