/* ============================================================
   DESIGN TOKENS
   Navy is the trust anchor, amber is used only in small,
   deliberate areas (CTA fills, rules, icon strokes) so it never
   muddies against the warm wood tones in the photography.
   ============================================================ */
:root{
  --ink:        #0e2135;
  --navy:       #1a365d;
  --navy-deep:  #12263f;
  --navy-soft:  #2b4d7a;

  --amber:      #e67e22;
  --amber-ink:  #b45309;   /* amber that passes 4.9:1 as text on white */
  --amber-soft: #fdf0e3;

  --body:       #44546a;   /* 7.6:1 on white */
  --muted:      #64748b;   /* 4.9:1 on white */

  --surface:    #ffffff;
  --surface-alt:#f4f6f9;
  --line:       #dde3ea;
  --line-soft:  #eaeff4;

  --focus:      #e67e22;

  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 48px);
  --sect: clamp(44px, 5vw, 66px);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(14,33,53,.06), 0 2px 8px rgba(14,33,53,.05);
  --shadow-md: 0 4px 12px rgba(14,33,53,.08), 0 12px 32px rgba(14,33,53,.07);
  --shadow-lg: 0 18px 60px rgba(14,33,53,.22);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%;
  overflow-x:clip; /* the off-canvas menu sits to the right; never let it create a scrollbar */
}

body{
  margin:0;
  font-family:var(--font-ui);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--surface);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:600;
}
h1,h2{ font-family:var(--font-display); font-variation-settings:"SOFT" 0,"WONK" 0; }
h1{ font-size:clamp(2.1rem, 5.2vw, 3.7rem); }
h2{ font-size:clamp(1.85rem, 3.9vw, 2.75rem); }
h3{ font-size:1.22rem; font-family:var(--font-ui); font-weight:600; letter-spacing:-.01em; }
p{ margin:0 0 1rem; }
a{ color:var(--amber-ink); }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sect); }
.section--alt{ background:var(--surface-alt); }

/* Deep navy band. Breaks up the run of white sections and gives the
   white review cards something to sit against. */
.section--navy{ background:var(--navy); }
.section--navy h2{ color:#fff; }
.section--navy .section-head p{ color:#a9c0da; }
.section--navy .quote{ border-color:transparent; box-shadow:0 10px 30px rgba(8,20,36,.22); }
.section--navy .dots button::before{ background:rgba(255,255,255,.32); }
.section--navy .dots button.is-on::before{ background:var(--amber); }

/* ---------- Limited-time offer ---------- */
.offer{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 18px; border-radius:var(--r-md);
  background:rgba(230,126,34,.14); border:1px solid rgba(230,126,34,.45);
}
.offer__badge{
  flex:none; background:var(--amber); color:var(--ink);
  font-weight:700; font-size:.82rem; letter-spacing:.02em;
  padding:6px 12px; border-radius:100px; white-space:nowrap;
}
.offer p{ margin:0; font-size:.96rem; color:#f0e2d3; }
/* On light backgrounds the same component needs darker text to stay readable */
.offer--light{ background:var(--amber-soft); border-color:rgba(230,126,34,.5); }
.offer--light p{ color:var(--ink); }
.offer--light + .form-card{ margin-top:16px; }

/* Seam rule — echoes the grout/plank seams in the flooring photos.
   Used as a structural divider, not decoration. */
.seam{
  width:56px; height:2px; border:0; margin:0 0 16px;
  background:var(--amber);
}
.section-head{ max-width:62ch; margin-bottom:clamp(24px,2.8vw,32px); }
.section-head p{ font-size:1.06rem; color:var(--muted); margin-bottom:0; }
.section-head--center{ margin-inline:auto; text-align:center; max-width:56ch; }
.section-head--center .seam{ margin-inline:auto; }

.lede{ font-size:1.09rem; color:var(--body); }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:3px;
}

.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;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px;
  border-radius:var(--r-sm); font-weight:600; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:12px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px;
  font-family:var(--font-ui); font-size:1rem; font-weight:600; letter-spacing:-.005em;
  border-radius:var(--r-md); border:2px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }

/* Amber fill carries near-navy text: 5.5:1, and keeps the exact brand orange */
.btn--primary{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.btn--primary:hover{ background:#d9700f; border-color:#d9700f; }

.btn--navy{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--navy:hover{ background:var(--navy-deep); border-color:var(--navy-deep); }

.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.btn--outline{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn--outline:hover{ border-color:var(--navy); background:var(--surface-alt); }

.btn--wide{ width:100%; }
.btn svg{ flex:none; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.topbar{
  background:var(--navy-deep); color:#cdd9e8;
  font-size:.875rem;
}
.topbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:42px; flex-wrap:wrap;
}
.topbar__areas{ display:flex; align-items:center; gap:8px; }
.topbar__areas svg{ flex:none; color:var(--amber); }
.topbar__badges{ display:flex; gap:18px; }
.topbar__badges span,.topbar__badges a{ display:flex; align-items:center; gap:7px; }
.topbar__badges a{ color:inherit; text-decoration:none; }
.topbar__badges a:hover{ color:#fff; text-decoration:underline; }
.topbar__badges svg{ color:var(--amber); flex:none; }
@media (max-width:860px){ .topbar__badges{ display:none; } }

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.site-header.is-stuck{ box-shadow:var(--shadow-sm); border-bottom-color:var(--line); }

.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; }

.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; min-width:0; }
.brand > span{ min-width:0; }
.brand img{ width:46px; height:46px; object-fit:contain; flex:none; }
.brand__name{
  font-family:var(--font-display); font-weight:600; font-size:1.12rem;
  color:var(--ink); line-height:1.15; letter-spacing:-.015em;
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand__sub{
  font-family:var(--font-ui); font-size:.72rem; font-weight:500;
  color:var(--muted); letter-spacing:.06em; text-transform:uppercase;
  display:block; white-space:nowrap;
}
/* Two straplines, one visible at a time. Clipping the long one mid-word read
   like a rendering fault, so below 1320px the short form takes over instead. */
.brand__sub--short{ display:none; }
@media (max-width:1320px){
  .brand__sub--long{ display:none; }
  .brand__sub--short{ display:inline; }
}

.nav__links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav__links a{
  display:block; padding:10px 14px; border-radius:var(--r-sm);
  color:var(--body); text-decoration:none; font-weight:500; font-size:.97rem;
  position:relative;
  transition:color .16s var(--ease), background-color .16s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:var(--surface-alt); }
.nav__links a.is-active{ color:var(--ink); font-weight:600; }
.nav__links a.is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px;
  height:2px; background:var(--amber); border-radius:2px;
}

.nav__actions{ display:flex; align-items:center; gap:12px; flex:none; }
.nav__tel{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--ink); font-weight:600; font-size:1.02rem; padding:8px 4px;
  white-space:nowrap;
}
.nav__tel svg{ color:var(--amber-ink); flex:none; }
.nav__tel span small{ display:block; font-size:.7rem; font-weight:500; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.nav__cta{ min-height:46px; padding:11px 20px; font-size:.95rem; }

.hamburger{
  display:none; width:48px; height:48px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; color:var(--ink);
}
.hamburger span{
  display:block; width:22px; height:2px; background:currentColor; border-radius:2px;
  position:relative; transition:background-color .18s var(--ease);
}
.hamburger span::before,.hamburger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .22s var(--ease), top .22s var(--ease);
}
.hamburger span::before{ top:-7px; }
.hamburger span::after{ top:7px; }
.hamburger[aria-expanded="true"] span{ background:transparent; }
.hamburger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* The nav now carries a sixth item, so it folds into the menu sooner. */
@media (max-width:1180px){
  .nav__links,.nav__tel{ display:none; }
  .hamburger{ display:flex; }
}
@media (max-width:560px){ .nav__cta{ display:none; } }

.mobile-panel{
  position:fixed; inset:0 0 0 auto; width:min(380px,88vw); z-index:110;
  background:#fff; border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .28s var(--ease);
  display:flex; flex-direction:column; padding:22px var(--gut) 32px;
  overflow-y:auto; visibility:hidden;
}
.mobile-panel.is-open{ transform:translateX(0); visibility:visible; }
.mobile-panel__top{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.mobile-panel__close{
  width:48px; height:48px; border:1px solid var(--line); background:#fff;
  border-radius:var(--r-sm); cursor:pointer; color:var(--ink); font-size:1.3rem; line-height:1;
}
.mobile-panel ul{ list-style:none; margin:0 0 22px; padding:0; }
.mobile-panel ul a{
  display:block; padding:15px 4px; text-decoration:none; color:var(--ink);
  font-size:1.12rem; font-weight:500; border-bottom:1px solid var(--line-soft);
}
.mobile-panel__tel{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  padding:16px; background:var(--surface-alt); border-radius:var(--r-md);
  color:var(--ink); font-weight:600; font-size:1.15rem; margin-bottom:12px;
}
.mobile-panel__tel svg{ color:var(--amber-ink); flex:none; }
.scrim{
  position:fixed; inset:0; background:rgba(14,33,53,.55); z-index:105;
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s;
}
.scrim.is-open{ opacity:1; visibility:visible; }

/* ============================================================
   HERO — full-bleed photo, navy scrim raked from the left so the
   sunlit right side of the room stays visible.
   ============================================================ */
.hero{ position:relative; isolation:isolate; color:#fff; }
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(14,33,53,.94) 0%, rgba(18,38,63,.88) 34%, rgba(18,38,63,.55) 60%, rgba(18,38,63,.22) 100%);
}
.hero__in{ padding-block:clamp(48px,6vw,78px); }
.hero__copy{ max-width:40rem; }
.hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.9rem; font-weight:600; color:#f6c18a;
  margin-bottom:20px;
}
.hero__kicker svg{ flex:none; }
.hero h1{ color:#fff; margin-bottom:20px; text-wrap:balance; }
.hero__sub{
  font-size:clamp(1.06rem,2vw,1.22rem); color:#d5e0ee;
  max-width:36rem; margin-bottom:26px;
}
.hero__sub strong{ color:#fff; font-weight:600; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px; }
.hero__cta .btn{ min-height:56px; padding:16px 30px; font-size:1.04rem; }

.hero__proof{
  display:flex; flex-wrap:wrap; gap:14px 34px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.22);
}
.hero__proof div{ display:flex; align-items:center; gap:10px; font-size:.95rem; color:#cddaea; }
.hero__proof svg{ color:var(--amber); flex:none; }

/* ============================================================
   SERVICES
   Cards are deliberately not identical chips: each leads with a
   photo, and the price rail is the structural element.
   ============================================================ */
.services__grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:560px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .services__grid{ grid-template-columns:repeat(4,1fr); } }
.svc{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.svc:hover{ border-color:#c6d2e0; box-shadow:var(--shadow-md); transform:translateY(-3px); }
.svc__media{ aspect-ratio:16/10; background:var(--surface-alt); overflow:hidden; }
.svc__media img{ width:100%; height:100%; object-fit:cover; }
.svc__body{ padding:22px 20px 20px; display:flex; flex-direction:column; flex:1; }
.svc__icon{
  width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--amber-soft); color:var(--amber-ink);
  display:grid; place-items:center; margin-bottom:16px;
}
.svc h3{ margin-bottom:8px; }
.svc__desc{ color:var(--muted); font-size:.98rem; margin-bottom:20px; }
/* Pushes the button to the bottom so all four cards line up regardless of
   how long each description runs. */
.svc__cta{ margin-top:auto; }

/* "Not listed?" band under the service cards */
.svc-any{
  display:grid; gap:18px; align-items:center; margin-top:20px;
  grid-template-columns:1fr;
  padding:24px 26px; border-radius:var(--r-lg);
  background:var(--navy); color:#c5d5e8;
}
@media (min-width:860px){
  .svc-any{ grid-template-columns:auto 1fr auto; gap:22px; }
}
.svc-any__ic{
  width:52px; height:52px; border-radius:var(--r-md); flex:none;
  background:rgba(255,255,255,.1); color:var(--amber);
  display:grid; place-items:center;
}
.svc-any h3{ color:#fff; margin-bottom:4px; }
.svc-any p{ margin:0; font-size:.97rem; color:#b3c6dc; max-width:62ch; }
.svc-any .btn{ white-space:nowrap; }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
/* Explicit counts rather than auto-fit: with four cards, auto-fit drops to
   three-plus-one at mid widths, which leaves an orphan. 1 / 2 / 4 never does. */
.why-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:540px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .why-grid{ grid-template-columns:repeat(4,1fr); } }
.wcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 20px 24px; text-align:center;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.wcard:hover{ border-color:#c6d2e0; box-shadow:var(--shadow-sm); }
.wcard__ic{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:var(--surface-alt); color:var(--navy);
  display:grid; place-items:center;
}
.wcard h3{ font-size:1.02rem; margin-bottom:7px; letter-spacing:-.005em; }
.wcard p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--muted); }
/* On the tinted section the icon disc needs to stay distinct from the card */
.section--alt .wcard__ic{ background:#eef2f7; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
/* One scrolling row at every width. Six reviews stacked two-deep took up more
   height than the section deserved; a rail keeps it to a single band and makes
   it obvious there is more to see. The bleed lets a card run to the page edge. */
.quotes{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  gap:16px; padding-bottom:6px;
  margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
  scrollbar-width:none;
}
.quotes::-webkit-scrollbar{ display:none; }
.quote{
  flex:0 0 min(86%, 320px); scroll-snap-align:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 20px; display:flex; flex-direction:column;
}
.quote__stars{ display:flex; gap:3px; color:var(--amber); margin-bottom:12px; }
.quote__stars .star{ width:16px; height:16px; fill:currentColor; flex:none; }
.quote blockquote{ margin:0 0 16px; font-size:.95rem; color:var(--ink); line-height:1.58; }
.quote__who{ margin-top:auto; display:flex; align-items:center; gap:11px; }
.quote__av{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--navy); color:#fff; display:grid; place-items:center;
  font-weight:600; font-size:.9rem; font-family:var(--font-ui);
}
.quote__who b{ display:block; color:var(--ink); font-size:.93rem; }
.quote__who span{ font-size:.82rem; color:var(--muted); }

.dots{ display:flex; justify-content:center; gap:2px; margin-top:6px; }
/* 44x44 hit area, 9px visual — the tap target is the button, the dot is drawn inside it */
.dots button{
  width:44px; height:44px; padding:0; border:0; background:none;
  cursor:pointer; display:grid; place-items:center;
}
.dots button::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--line);
  transition:background-color .2s var(--ease), width .2s var(--ease);
}
.dots button.is-on::before{ background:var(--amber); width:26px; border-radius:100px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:840px; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:24px 2px; font-family:var(--font-ui);
  font-size:1.08rem; font-weight:600; color:var(--ink); line-height:1.4;
}
.faq__q:hover{ color:var(--amber-ink); }
.faq__sign{
  flex:none; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--line); color:var(--navy);
  display:grid; place-items:center; margin-top:2px;
  transition:transform .24s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.faq__q[aria-expanded="true"] .faq__sign{
  transform:rotate(45deg); background:var(--navy); border-color:var(--navy); color:#fff;
}
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease); }
.faq__a > div{ overflow:hidden; }
.faq__q[aria-expanded="true"] + .faq__a{ grid-template-rows:1fr; }
.faq__a p{ padding:0 44px 26px 2px; margin:0; color:var(--body); }

.faq__foot{
  margin-top:30px; padding:24px 28px;
  background:var(--navy); border-radius:var(--r-lg);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.faq__foot p{ margin:0; color:#cddaea; }
.faq__foot b{ display:block; color:#fff; font-size:1.14rem; font-weight:600; margin-bottom:3px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ display:grid; gap:clamp(26px,3.5vw,44px); grid-template-columns:1fr; align-items:start; }
@media (min-width:980px){ .contact{ grid-template-columns:1.18fr .82fr; } }

.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,4vw,38px); box-shadow:var(--shadow-sm);
}
.field{ margin-bottom:20px; }
.field label{
  display:block; font-size:.92rem; font-weight:600; color:var(--ink); margin-bottom:7px;
}
.field .req{ color:var(--amber-ink); }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; min-height:50px;
  font-family:var(--font-ui); font-size:1rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea{ min-height:108px; resize:vertical; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:#c3cfdd; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--amber); box-shadow:0 0 0 3px rgba(230,126,34,.16); outline:none;
}
.field .hint{ font-size:.85rem; color:var(--muted); margin-top:6px; }
.field .err{ display:none; font-size:.87rem; color:#b42318; margin-top:6px; font-weight:500; }
.field.has-error input,.field.has-error select{ border-color:#b42318; }
.field.has-error .err{ display:block; }
.row2{ display:grid; gap:0 18px; grid-template-columns:1fr; }
@media (min-width:600px){ .row2{ grid-template-columns:1fr 1fr; } }

.form-note{ font-size:.87rem; color:var(--muted); margin:14px 0 0; text-align:center; }
.form-error{
  margin:14px 0 0; padding:12px 14px; text-align:center;
  font-size:.92rem; font-weight:500; color:#8a1c14;
  background:#fdf0ef; border:1px solid #f3c4c0; border-radius:var(--r-sm);
}
.form-error a{ color:#8a1c14; }
#submitBtn[aria-busy="true"]{ opacity:.7; pointer-events:none; }

.confirm{
  display:none; padding:30px 26px; text-align:center;
  background:#f0f9f2; border:1.5px solid #b7e0c4; border-radius:var(--r-md);
}
.confirm.is-on{ display:block; }
.confirm__ic{
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  background:#1a7f42; color:#fff; display:grid; place-items:center;
}
.confirm h3{ color:#12602f; margin-bottom:8px; }
.confirm p{ color:#2c6b43; margin:0; }

.info__block{ padding:15px 0; border-bottom:1px solid var(--line); display:flex; gap:16px; }
.info__block:last-of-type{ border-bottom:0; }
.info__ic{
  width:42px; height:42px; border-radius:var(--r-sm); flex:none;
  background:var(--amber-soft); color:var(--amber-ink); display:grid; place-items:center;
}
.info__block b{ display:block; color:var(--ink); font-size:.86rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px; }
.info__block a{
  color:var(--ink); text-decoration:none; font-size:1.06rem; font-weight:500;
  display:inline-flex; align-items:center; min-height:44px;
}
.info__block a:hover{ color:var(--amber-ink); text-decoration:underline; }
.info__block p{ margin:0; color:var(--body); }

.map{
  margin-top:24px; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line); background:var(--surface-alt);
}
.map iframe{ display:block; width:100%; height:270px; border:0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:#a9bace; padding-block:clamp(38px,5vw,54px) 0; }
.footer__grid{
  display:grid; gap:30px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  padding-bottom:34px;
}
.footer__brand{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.footer__brand img{ width:52px; height:52px; object-fit:contain; background:#fff; border-radius:50%; padding:5px; }
.footer__brand b{ font-family:var(--font-display); font-size:1.16rem; color:#fff; font-weight:600; letter-spacing:-.015em; }
.site-footer h4{ color:#fff; font-size:.83rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:16px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.site-footer li{ padding:2px 0; }
.site-footer a{ color:#a9bace; text-decoration:none; display:inline-block; padding:9px 0; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer__bar a{ padding:4px 0; }
.social{ display:flex; gap:11px; margin-top:6px; }
.social a{
  width:44px; height:44px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.08); color:#cfdcea;
  display:grid; place-items:center;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.social a:hover{ background:var(--amber); color:var(--ink); }
.footer__bar{
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:22px; display:flex; flex-wrap:wrap; gap:12px 26px;
  justify-content:space-between; font-size:.88rem;
}
.footer__bar ul{ display:flex; gap:20px; flex-wrap:wrap; }

/* ============================================================
   MOBILE STICKY CALL BAR
   ============================================================ */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:none; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.98); border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(14,33,53,.10);
}
.callbar .btn{ flex:1; min-height:52px; padding:12px 8px; font-size:.94rem; gap:7px; }
.callbar__text{ background:#fff; }
/* Slides out of the way while the quote form is on screen, so it can never
   cover the submit button. */
.callbar{ transition:transform .25s var(--ease); }
.callbar.is-hidden{ transform:translateY(130%); }
@media (max-width:767px){
  .callbar{ display:flex; }
  /* Keeps the bar clear of footer content instead of sitting on top of it. */
  body{ padding-bottom:calc(82px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header,.callbar,.mobile-panel,.scrim,.lb,.hero__media{ display:none !important; }
}

/* ============================================================
   ADDITIONS
   Everything below follows the tokens above: navy structure,
   amber only for emphasis, same radii, same card treatment.
   ============================================================ */

/* ---------- Service card without a photo on file yet ---------- */
.svc__media--blank{
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);
  color:rgba(255,255,255,.62);
}
.svc__media--blank svg{ width:46px; height:46px; }

/* ---------- Optional-field chip on form labels ---------- */
.field label .opt{
  font-weight:500; font-size:.78rem; color:var(--muted);
  text-transform:none; letter-spacing:0; margin-left:4px;
}
/* Honeypot. Off screen rather than display:none, which some bots skip. */
.hp{
  position:absolute !important; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}
#submitBtn[disabled],#pmSubmitBtn[disabled]{ opacity:.65; cursor:progress; }
.form-note--sms{ margin-top:8px; }
.form-note--sms a{ font-weight:600; white-space:nowrap; }
.info__fine{ font-size:.88rem; color:var(--muted); }

/* ---------- Why-choose-us card that links out ---------- */
a.wcard{ text-decoration:none; color:inherit; display:block; }
a.wcard:hover{ border-color:var(--navy); }
.wcard__more{
  display:inline-block; margin-top:10px;
  font-size:.86rem; font-weight:600; color:var(--amber-ink);
}

/* ============================================================
   HOW IT WORKS
   Numbered steps on a single connecting rule, so the three read
   as one process rather than three unrelated cards.
   ============================================================ */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px; grid-template-columns:1fr;
  counter-reset:step;
}
@media (min-width:860px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
  /* The rule that ties the three numbers together */
  .steps::before{
    content:""; position:absolute; left:14%; right:14%; top:27px;
    height:2px; background:var(--line); z-index:0;
  }
}
.step{
  display:flex; gap:16px; align-items:flex-start;
  position:relative; z-index:1;
}
@media (min-width:860px){
  .step{ flex-direction:column; text-align:center; align-items:center; gap:14px; }
  .step p{ max-width:34ch; margin-inline:auto; }
}
.step__n{
  flex:none; width:54px; height:54px; border-radius:50%;
  background:var(--navy); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.4rem; font-weight:600;
  border:4px solid var(--surface-alt);
}
.step h3{ margin-bottom:6px; }
.step p{ margin:0; color:var(--muted); font-size:.98rem; }
.steps__cta{ margin:clamp(26px,3vw,36px) 0 0; text-align:center; }

/* ============================================================
   RATING SUMMARY
   Sits above the review rail on the navy band.
   ============================================================ */
.rating{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
  margin-bottom:22px; padding:12px 18px; border-radius:100px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  width:fit-content; color:#cddaea; font-size:.97rem;
}
.rating__stars{ display:flex; color:var(--amber); }
.rating__stars .star{ width:19px; height:19px; fill:currentColor; }
.rating strong{ color:#fff; font-size:1.18rem; font-weight:700; }
.rating a{ color:#f6c18a; font-weight:600; text-decoration:none; }
.rating a:hover{ text-decoration:underline; }

/* ============================================================
   PROPERTY MANAGERS
   Two columns: the case on the left, a short form on the right.
   ============================================================ */
.pm{ background:var(--surface-alt); }
.pm__grid{
  display:grid; gap:clamp(28px,4vw,48px); grid-template-columns:1fr; align-items:start;
}
@media (min-width:980px){ .pm__grid{ grid-template-columns:1fr .92fr; } }
.pm__intro .lede{ color:var(--body); margin-bottom:26px; max-width:52ch; }
.pm__list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.pm__list li{ display:flex; gap:14px; align-items:flex-start; }
.pm__ic{
  flex:none; width:42px; height:42px; border-radius:var(--r-sm);
  background:#fff; border:1px solid var(--line); color:var(--navy);
  display:grid; place-items:center;
}
.pm__list b{ display:block; color:var(--ink); font-size:1rem; margin-bottom:2px; }
.pm__list span{ font-size:.94rem; color:var(--muted); }
.form-card--pm{ padding:clamp(22px,3vw,30px); }
.pm__form-title{ margin-bottom:4px; }
.pm__form-note{ font-size:.93rem; color:var(--muted); margin-bottom:20px; }

/* ============================================================
   CITY LANDING PAGES
   ============================================================ */
.cityhero{ position:relative; isolation:isolate; color:#fff; background:var(--navy); }
.cityhero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.cityhero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.cityhero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(14,33,53,.95) 0%, rgba(18,38,63,.9) 40%, rgba(18,38,63,.62) 100%);
}
.cityhero__in{ padding-block:clamp(42px,5.5vw,70px); }
.cityhero h1{ color:#fff; margin-bottom:18px; max-width:22ch; }
.cityhero__sub{ color:#d5e0ee; font-size:clamp(1.02rem,1.8vw,1.16rem); max-width:62ch; margin-bottom:24px; }
.cityhero__cta{ display:flex; flex-wrap:wrap; gap:13px; }

.crumbs{ font-size:.88rem; color:#a9c0da; margin-bottom:18px; }
.crumbs a{ color:#cddaea; text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs span{ opacity:.55; margin-inline:7px; }

/* ============================================================
   WARRANTY PAGE
   Long-form text, so the measure is tightened and the two lists
   are colour-coded rather than relying on the wording alone.
   ============================================================ */
.pagehead{ background:var(--navy); color:#fff; }
.pagehead__in{ padding-block:clamp(36px,4.6vw,58px); }
.pagehead h1{ color:#fff; margin-bottom:12px; max-width:20ch; }
.pagehead p{ color:#cddaea; max-width:60ch; font-size:1.06rem; margin:0; }

.prose{ max-width:760px; }
.prose h2{ font-size:clamp(1.45rem,2.6vw,1.9rem); margin-top:clamp(34px,4vw,48px); }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--body); }
.prose > p:first-of-type{ font-size:1.09rem; }

.wlist{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:12px; }
.wlist li{
  display:flex; gap:13px; align-items:flex-start;
  padding:14px 16px; border-radius:var(--r-md);
  border:1px solid var(--line); background:#fff;
}
.wlist li svg{ flex:none; margin-top:2px; }
.wlist--yes li{ border-color:#bfe2cb; background:#f4fbf6; }
.wlist--yes svg{ color:#1a7f42; }
.wlist--no li{ border-color:var(--line); background:var(--surface-alt); }
.wlist--no svg{ color:#94a3b4; }

.claim{
  margin-top:clamp(30px,4vw,44px); padding:26px 28px;
  background:var(--navy); border-radius:var(--r-lg); color:#c5d5e8;
}
.claim h2{ color:#fff; margin-top:0; }
.claim p{ color:#c5d5e8; }
.claim .btn{ margin-top:6px; }
.claim__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }

.footer__lic{ font-size:.88rem; color:#8fa3ba; margin:0; }

/* Standalone links need a 44px target on touch. Links sitting inside a
   sentence are exempt and are left at their natural size. */
.rating a,
.footer__bar a,
.form-note--sms a{
  display:inline-flex; align-items:center; min-height:44px;
}

/* ---------- Our Partners page ---------- */
.pm__aside{
  margin-top:26px; padding:20px 22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
}
.pm__aside p{ margin:0 0 14px; font-size:.96rem; color:var(--body); }
.claim__tel{ color:#f6c18a; }