/* Fonts are loaded via <link> in the header template part. An @import here
   would land mid-stylesheet inside WordPress's global-styles block, where the
   CSS spec requires browsers to ignore it. */

/* Seawall & Dock: square corners, no shadows, no gradients except photo overlays. */

:root{
  --sd-navy:#0F1E2B;
  --sd-navy-deep:#091520;
  --sd-cream:#F7F4EF;
  --sd-sand:#B8A278;
  /* Sand reads 6.83:1 on navy but only 2.26:1 on cream, so eyebrows and
     small sand text on light sections use this darker tone (4.82:1). */
  --sd-sand-ink:#7A6A45;
  --sd-text:#1C2A35;
  --sd-text-muted:#5A6B78;
  --sd-white:#FFFFFF;

  --sd-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sd-sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;

  --sd-col:720px;      /* body copy column */
  --sd-wide:1100px;    /* text inside full-bleed bands */
  --space-section:96px;
  --space-heading:72px;
  --space-para:20px;
  --space-tight:12px;
  --sd-pad:var(--space-section);
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after{box-sizing:border-box}
/* NOTE: overflow-x:clip here disables position:sticky on the header, a
   non-visible overflow on an ancestor makes sticky behave as static. The
   full-bleed bands must therefore not overflow on their own. */
html,body{max-width:100%}
body{
  background:var(--sd-cream);
  color:var(--sd-text);
  font-family:var(--sd-sans);
  font-size:17px;
  font-weight:400;
  line-height:1.75;
}
img{max-width:100%;height:auto}

/* ---------- Typography ---------- */
:where(.entry-content) h1,.sd-hero h1{
  font-family:var(--sd-serif);
  font-size:clamp(38px,6.5vw,82px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-1.5px;
  overflow-wrap:break-word;
  margin:0 0 .4em;
}
:where(.entry-content) h2,.sd-band h2{
  font-family:var(--sd-serif);
  text-wrap:balance;
  font-size:clamp(26px,3vw,38px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-0.2px;
  color:var(--sd-navy);
  margin:0 0 20px;
}
/* A band already separates sections, so an H2 straight after one does not
   need the full heading rhythm on top of it. */
:where(.entry-content) > .sd-fullbleed + h2{margin-top:32px}

/* 40px sand hairline above each body H2: a mark, not a full-width rule. */
:where(.entry-content) > h2{
  position:relative;
  margin-top:var(--space-heading);
  padding-top:28px;
}
:where(.entry-content) > h2::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:1px;
  background:var(--sd-sand);
}
:where(.entry-content) > h2:first-child{margin-top:0}
:where(.entry-content) h3{
  font-family:var(--sd-sans);
  font-size:17px;
  font-weight:500;
  letter-spacing:.3px;
  color:var(--sd-navy);
  margin:2em 0 .5em;
}
:where(.entry-content) p{margin:0 0 var(--space-para);color:var(--sd-text-muted)}
/* Full-strength text only for the first paragraph after a heading. */
:where(.entry-content) > :where(h2,h3) + p{color:var(--sd-text)}

/* Eyebrows on cream sections need the darker tone to pass 4.5:1, since sand is
   6.83:1 on navy but only 2.26:1 on cream. */
.sd-services .sd-eyebrow,
.sd-intro .sd-eyebrow,
.sd-numbered .sd-eyebrow{color:var(--sd-sand-ink)}
:where(.entry-content) a:where(:not(.sd-btn)){
  color:var(--sd-navy);
  text-decoration:underline;
  text-decoration-color:var(--sd-sand);
  text-underline-offset:3px;
  transition:.2s;
}
:where(.entry-content) a:where(:not(.sd-btn)):hover{color:var(--sd-sand)}
.sd-eyebrow{
  font-family:var(--sd-sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--sd-sand);
  margin:0 0 1.1em;
  line-height:1.5;
}
.sd-muted{color:var(--sd-text-muted)}

/* ---------- Layout ---------- */
/* Every page opens with a full-bleed hero, which must sit flush under the
   sticky header. The theme's block layout puts 40px above .entry-content
   (`:root :where(.is-layout-constrained) > *`), showing as a cream strip.
   That rule is (0,1,0) because of :root, so this needs a class to beat it,
   the generic-rule :where() pattern would lose here. */
.entry-content{
  max-width:var(--sd-wide);
  margin-left:auto;
  margin-right:auto;
  margin-block-start:0;
  padding:0 24px;
}
/* Prose caps at the reading column and centres inside the 1100px container.
   Full-bleed bands opt out. */
.entry-content > *:not(.sd-fullbleed){
  max-width:var(--sd-col);
  margin-left:auto;
  margin-right:auto;
}
/* The theme constrains every child of .entry-content with
   `margin-left/right: auto !important`, which silently defeated the usual
   calc() break-out. Two things are needed: the .alignfull class (the theme's
   own escape hatch, added in the markup) and !important margins to win the
   cascade. Root padding is zeroed below so top-level bands reach the edge too. */
.sd-fullbleed{
  width:100vw!important;
  max-width:100vw!important;
  /* The theme puts 40px margin between children of .entry-content, which showed
     as a cream stripe between two adjacent bands. */
  margin-block-start:0!important;
  margin-block-end:0!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
}
/* Zeroing that margin also removed the breathing room where prose runs into
   the next band: the "Licensed and insured" bullets sat flush against the
   editorial split band on the home page. Restore it only when a band follows
   non-band content, so adjacent bands (hero → trust strip, areas → CTA) stay
   flush. Padded bands get the theme's 48px; the editorial band has no top
   padding of its own (its photo is the edge), so it takes a full section gap. */
.entry-content > :not(.sd-fullbleed) + .sd-fullbleed{margin-block-start:48px!important}
/* The hero's image preload <link> sits before it in the content, which tripped the rule above and left a cream strip under the header. The hero always sits flush. */
.entry-content > link + .sd-hero.sd-fullbleed,.entry-content > .sd-hero.sd-fullbleed:first-child{margin-block-start:0!important}
.entry-content > :not(.sd-fullbleed) + .sd-editorial{margin-block-start:var(--space-section)!important}

/* Work with the theme's constrained layout rather than against it: its own
   rule then centres body copy at our column width. */
:root{
  --wp--style--global--content-size:720px;
  --wp--style--global--wide-size:1100px;
}
/* Padding is handled by .entry-content and .sd-inner, so the global root
   padding only pushed full-width bands off the viewport edges. */
body{
  --wp--style--root--padding-left:0px;
  --wp--style--root--padding-right:0px;
}
.sd-inner{max-width:var(--sd-wide);margin:0 auto;padding:0 24px}
.sd-band{padding:var(--sd-pad) 0}

/* ---------- Lists ---------- */
:where(.entry-content) ul{list-style:none;margin:0 0 1.4em;padding:0}
/* A list following prose needs separating from it: hairline, 40 above, 32 below. */
:where(.entry-content) > p + ul{
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid rgba(28,42,53,.08);
}
:where(.entry-content) ul li{
  position:relative;
  padding-left:16px;
  margin:0 0 var(--space-tight);
  line-height:1.65;
}
:where(.entry-content) ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:1px;
  background:var(--sd-sand);
}
:where(.entry-content) ul li:last-child{margin-bottom:0}

/* ---------- Buttons ---------- */
.sd-btn{
  display:inline-block;
  font-family:var(--sd-sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1.2;
  padding:16px 30px;
  border:1px solid transparent;
  border-radius:0;
  text-decoration:none;
  text-align:center;
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  transition:.2s;
}
a.sd-btn-primary{background:var(--sd-sand);color:var(--sd-navy);border-color:var(--sd-sand)}
a.sd-btn-primary:hover,a.sd-btn-primary:focus{background:var(--sd-navy);color:var(--sd-sand);border-color:var(--sd-sand)}
a.sd-btn-outline{background:transparent;color:var(--sd-cream);border-color:var(--sd-cream)}
a.sd-btn-outline:hover,a.sd-btn-outline:focus{background:var(--sd-cream);color:var(--sd-navy)}
.sd-hero-actions,.sd-cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.sd-hero-actions{justify-content:center;margin-top:2em}
.sd-cta-actions{justify-content:center;margin:2em 0 0}

/* ---------- Header ---------- */
/* Sticky must sit on the theme's template-part wrapper, not on our inner div.
   A sticky element only travels within its parent's box, and that parent is
   exactly 76px tall (the same height), so it had no range to stick through
   and scrolled away immediately. */
header.site-header{position:sticky;top:0;z-index:60}
.sd-site-header{
  background:var(--sd-navy);
  color:var(--sd-cream);
}
.sd-header-inner{
  display:flex;align-items:center;gap:24px;
  height:76px;
  max-width:1280px;margin:0 auto;padding:0 28px;
}
.sd-brand{
  font-family:var(--sd-sans);
  font-size:15px;font-weight:500;letter-spacing:3px;
  text-transform:uppercase;
  color:var(--sd-cream);text-decoration:none;white-space:nowrap;
}
.sd-nav{margin-left:auto}
.sd-nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.sd-nav a{
  font-size:14px;letter-spacing:.5px;
  color:var(--sd-cream);text-decoration:none;transition:.2s;
}
.sd-nav a:hover{color:var(--sd-sand)}
/* Header call button: hidden while the hero's own call button is in view,
   then shown as a small filled sand button at the far right. Without JS it
   is always shown (the sd-js class is set by the header's inline script). */
.sd-header-phone{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;letter-spacing:.5px;padding:9px 16px;white-space:nowrap;
  background:var(--sd-sand);color:var(--sd-navy);border:1px solid var(--sd-sand);border-radius:2px;
  text-decoration:none;font-weight:500;font-variant-numeric:tabular-nums;
  transition:background-color .2s,color .2s;
}
.sd-header-phone svg{width:14px;height:14px;flex:none}
.sd-header-phone:hover{background:var(--sd-cream);border-color:var(--sd-cream);color:var(--sd-navy)}
.sd-header-phone:focus-visible{outline:2px solid var(--sd-cream);outline-offset:3px}
html.sd-ready .sd-header-phone{display:none}
html.sd-ready .sd-header-phone.is-shown{display:inline-flex;animation:sd-phone-in .22s ease-out}
@keyframes sd-phone-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Shake while scrolling only: the class is on for as long as scroll events
   keep arriving and is removed 160ms after they stop. */
html.sd-ready .sd-header-phone.is-shown.is-moving{animation:sd-phone-shake .32s ease-in-out infinite}
@keyframes sd-phone-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){html.sd-ready .sd-header-phone.is-shown{animation:none}html.sd-ready .sd-header-phone.is-shown.is-moving{animation:none}}
@media (min-width:861px){.sd-nav{order:2}.sd-header-phone{order:3}}
/* Phones: the number does not fit beside the brand and menu, so the button
   reads "Call" (the full number stays in its aria-label and tel: link). */
@media (max-width:480px){.sd-header-phone{gap:6px}.sd-header-phone span{display:none}.sd-header-phone::after{content:"Call"}}
.sd-nav-toggle{display:none}
.sd-nav-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

/* ---------- Intro bridge (light) ---------- */
.sd-intro{background:var(--sd-cream);padding:64px 24px 32px}
.sd-intro-inner{
  max-width:860px;
  margin:0 auto;
  position:relative;
  padding-top:36px;
}
.sd-intro-inner::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-20px);
  width:40px;height:1px;background:var(--sd-sand);
}
.sd-intro-copy p{font-size:19px;line-height:1.8;color:var(--sd-text);margin:0 0 var(--space-para)}
.sd-intro-copy p:last-child{margin-bottom:0}
/* Bullets sit 40px under the copy, separated by a hairline, two columns. */
.sd-intro-bullets{
  list-style:none;
  margin:40px 0 0;
  padding:32px 0 0;
  border-top:1px solid rgba(28,42,53,.08);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 48px;
}
.sd-intro-bullets li{
  position:relative;
  padding-left:16px;
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--sd-text);
}
.sd-intro-bullets li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:7px;height:1px;background:var(--sd-sand);
}

/* wpautop can still insert an empty <p> between siblings inside a band. In a
   flex container that becomes a flex item and `margin:0 auto` absorbs the free
   space, shoving the content sideways. Kept at zero specificity via :where(). */
:where(.sd-hero,.sd-ctaband,.sd-trustbar,.sd-formwrap,.sd-editorial,.sd-areas-section) > p:empty{display:none}

/* ---------- Band background images ---------- */
/* Hero and CTA band carry real <img> elements, so the browser gets
   width/height/srcset/fetchpriority. The img sits behind the overlay, the
   overlay behind the content. */
.sd-band-media{position:absolute;inset:0;z-index:0}
.sd-hero-img,.sd-band-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.sd-hero::before,.sd-ctaband::before{z-index:1}
.sd-hero-content,.sd-ctaband-content{z-index:2}

/* Inline section images, inside the reading column. */
.sd-section-figure{margin:32px 0 0;padding:0}
.sd-section-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
}

/* ---------- Hero ---------- */
.sd-hero{
  position:relative;
  min-height:620px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:80px 24px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.sd-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(9,21,32,.62),rgba(9,21,32,.82));
}
.sd-hero-content{position:relative;max-width:860px;margin:0 auto}
.sd-hero h1{color:#FFFFFF}
.sd-hero p{color:var(--sd-cream);font-size:19px;max-width:560px;margin:0 auto 1em}
.sd-lead-rest{margin:0 0 1.6em}
.sd-lead-rest p:first-child{font-size:18px;color:var(--sd-text)}

/* ---------- Trust strip ---------- */
.sd-trustbar{
  background:var(--sd-navy);
  color:var(--sd-cream);
  min-height:56px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-size:13px;letter-spacing:1px;text-transform:uppercase;
  margin:0;padding:14px 20px;
}
.sd-trustbar span{color:var(--sd-sand);margin:0 .85em}

/* ---------- Service cards ---------- */
.sd-services{background:var(--sd-cream);padding:48px 0 64px}
.sd-section-label{text-align:center;margin-bottom:36px}
.sd-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
.sd-card-media{aspect-ratio:4/3;width:100%;overflow:hidden}
.sd-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.sd-card-noimage{
  aspect-ratio:4/3;width:100%;
  background:var(--sd-navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;
}
.sd-card-noimage .sd-rule{width:56px;height:1px;background:var(--sd-sand);margin:0 0 18px}
.sd-card-noimage span{font-family:var(--sd-serif);font-size:28px;color:var(--sd-cream);line-height:1.2}
.sd-card h3{margin:22px 0 0;text-transform:uppercase;font-size:15px;letter-spacing:1.5px;font-weight:500}
.sd-card h3+.sd-rule{width:24px;height:1px;background:var(--sd-sand);margin:14px 0 16px}
.sd-card p{font-size:15px;line-height:1.7;color:var(--sd-text-muted);margin:0}

/* ---------- Editorial band ---------- */
.sd-editorial{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.sd-editorial-media{min-height:560px}
.sd-editorial-media img{width:100%;height:100%;object-fit:cover;display:block}
.sd-editorial-text{
  padding:80px;
  background:var(--sd-navy);
  display:flex;flex-direction:column;justify-content:center;
}
.sd-editorial-text h2{margin-top:0;padding-top:0;color:var(--sd-cream);font-size:38px}
.sd-editorial-text h2::before{display:none}
.sd-editorial-text p{font-size:17px;color:rgba(247,244,239,.82);margin:0 0 var(--space-para)}
.sd-editorial-text .sd-rule{width:40px;height:1px;background:var(--sd-sand);margin:12px 0 22px}
.sd-editorial-close{margin:0!important}
.sd-editorial-close a{
  font-family:var(--sd-serif);
  font-style:italic;
  font-size:19px;
  color:var(--sd-sand);
  text-decoration:none;
}
.sd-editorial-close a:hover{text-decoration:underline;text-decoration-color:var(--sd-sand)}


/* ---------- Numbered list ---------- */
.sd-numbered{background:var(--sd-cream);padding:48px 0}
.sd-numbered h2{text-align:center;margin-bottom:1.4em}
.sd-numbered ol{list-style:none;margin:0 auto;padding:0;max-width:860px}
.sd-numbered li{
  display:grid;grid-template-columns:64px 1fr;gap:20px;
  padding:28px 0;
  border-bottom:1px solid rgba(184,162,120,.3);
}
.sd-numbered li:first-child{border-top:1px solid rgba(184,162,120,.3)}
.sd-numbered .sd-num{font-family:var(--sd-serif);font-size:34px;line-height:1;color:var(--sd-sand)}
.sd-numbered .sd-num-title{font-weight:500;margin:0 0 .3em;color:var(--sd-navy)}
.sd-numbered .sd-num-copy{margin:0;color:var(--sd-text-muted);font-size:16px}

/* ---------- Contact email + form ---------- */
.sd-contact-email{margin:0 0 var(--space-para)}
.sd-contact-email a{
  font-family:var(--sd-sans);
  font-size:16px;
  color:var(--sd-text);
  text-decoration:none;
  transition:.2s;
}
.sd-contact-email a:hover{color:var(--sd-sand-ink)}

/* The sticky header is 76px tall, so an anchor jump would otherwise put the
   form heading underneath it. :where() keeps this at zero specificity, in
   line with the rest of the generic rules. */
:where(#inspection-form){scroll-margin-top:96px}
.sd-formwrap{background:var(--sd-cream);padding:56px 24px 64px}
.sd-formwrap-inner{max-width:640px;margin:0 auto}
.sd-formwrap h2{margin:0 0 32px;padding-top:0}
.sd-formwrap h2::before{display:none}

/* Fluent Forms, restyled to match the site rather than its own defaults. */
.sd-formwrap .fluentform .ff-el-group{margin-bottom:22px}
.sd-formwrap .fluentform .ff-el-input--label label{
  font-family:var(--sd-sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:.2px;
  color:var(--sd-text);
  margin-bottom:8px;
  display:block;
}
.sd-formwrap .fluentform .ff-el-form-control{
  box-sizing:border-box;
  width:100%;
  height:48px;
  padding:0 14px;
  font-family:var(--sd-sans);
  font-size:16px;
  color:var(--sd-text);
  background:var(--sd-white);
  border:1px solid rgba(28,42,53,.15);
  border-radius:0;
  box-shadow:none;
  transition:.2s;
}
.sd-formwrap .fluentform textarea.ff-el-form-control{height:auto;min-height:132px;padding:14px}
.sd-formwrap .fluentform .ff-el-form-control:focus{
  border-color:var(--sd-navy);
  outline:2px solid var(--sd-navy);
  outline-offset:-2px;
  box-shadow:none;
}
.sd-formwrap .fluentform .ff-el-form-control::placeholder{color:var(--sd-text-muted);opacity:.8}
/* Fluent Forms prints a per-form <style> block after ours:
   form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style): (0,3,1), and it
   hardcodes white text. Redefine its own custom property AND override the
   colour explicitly, or the button renders default blue at 3.87:1. */
.sd-formwrap .fluentform{--fluentform-primary:var(--sd-sand)}
.sd-formwrap .fluentform .ff-btn-submit,
.sd-formwrap form.fluentform .ff-btn-submit:not(.ff_btn_no_style){
  background-color:var(--sd-sand)!important;
  color:var(--sd-navy)!important;
}
.sd-formwrap .fluentform .ff-btn-submit:hover,
.sd-formwrap form.fluentform .ff-btn-submit:not(.ff_btn_no_style):hover{
  background-color:var(--sd-navy)!important;
  color:var(--sd-sand)!important;
}
.sd-formwrap .fluentform .ff-btn-submit{
  width:100%;
  height:52px;
  font-family:var(--sd-sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--sd-navy);
  background:var(--sd-sand);
  border:1px solid var(--sd-sand);
  border-radius:0;
  box-shadow:none;
  cursor:pointer;
  transition:.2s;
}
.sd-formwrap .fluentform .ff-btn-submit:hover{background:var(--sd-navy);color:var(--sd-sand)}
.sd-formwrap .fluentform .ff-el-is-error .ff-el-form-control{border-color:#9B2C2C}
.sd-formwrap .fluentform .error-text,.sd-formwrap .fluentform .text-danger{
  font-size:13px;color:#9B2C2C;margin-top:6px;
}
.sd-formwrap .ff-message-success{
  background:var(--sd-teal-light,#E1F5EE);
  border-left:3px solid var(--sd-sand);
  padding:18px 20px;
  font-size:16px;
  color:var(--sd-text);
}

/* ---------- Service index ---------- */
.sd-index{margin:var(--space-heading) 0 0}
.sd-index h2{text-align:left;margin:0 0 8px;padding-top:28px}
.sd-index-grid{
  list-style:none;margin:0!important;padding:0;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:56px;
  /* Rows sized to content: stretching left ~57px of blank inside the grid. */
  grid-auto-rows:min-content;
}
.sd-index-row{margin:0;padding:0;align-self:start;border-bottom:1px solid rgba(184,162,120,.25)}
.sd-index-row::before{display:none!important}
.sd-index-row a{
  display:block;
  padding:20px 0 32px;
  text-decoration:none;
  transition:.2s;
}

.sd-index-num{
  display:block;
  font-family:var(--sd-serif);
  font-size:22px;
  line-height:1.2;
  color:var(--sd-sand-ink);
  margin-bottom:8px;
}
.sd-index-name{
  display:block;
  font-family:var(--sd-sans);
  font-size:17px;
  font-weight:500;
  color:var(--sd-text);
  line-height:1.35;
}
.sd-index-desc{
  display:block;
  font-size:14px;
  color:var(--sd-text-muted);
  margin-top:10px;
}
.sd-index-row a:hover{background:rgba(184,162,120,.08)}
.sd-index-row a:hover .sd-index-name{color:var(--sd-sand-ink)}

/* ---------- Internal link lists ---------- */
.sd-links{margin:72px 0 0}
.sd-links h2{text-align:left;margin-bottom:20px}
.sd-links ul{list-style:none;margin:0;padding:0}
.sd-links li{margin:0 0 14px;padding-left:0}
.sd-links li::before{display:none}
.sd-links a{
  font-family:var(--sd-sans);
  font-size:16px;
  color:var(--sd-text);
  text-decoration:none;
  transition:.2s;
}
.sd-links a:hover{
  color:var(--sd-text);
  text-decoration:underline;
  text-decoration-color:var(--sd-sand);
  text-underline-offset:4px;
}

/* ---------- Service areas ---------- */
.sd-areas-section{position:relative;background:var(--sd-cream);padding:16px 24px 32px}
/* The aerial sits behind the navy card; the card is opaque so the copy never
   sits on the photo. A cream scrim keeps the exposed edges quiet. */
.sd-areas-section::before{content:"";position:absolute;inset:0;background:rgba(247,244,239,.55);z-index:1}
.sd-areas-card{position:relative;z-index:2}
.sd-areas-card{
  max-width:1100px;
  margin:0 auto;
  background:var(--sd-navy);
  color:var(--sd-cream);
  padding:44px;
}

.sd-areas-card h2{color:var(--sd-cream);text-align:center;margin:0 0 14px;padding-top:0}
.sd-areas-card h2::before{display:none}
/* Subhead, rule, then the city grid. */
.sd-areas-sub{
  text-align:center;font-size:15px;color:var(--sd-sand);
  max-width:560px;margin:0 auto;
}
.sd-areas-rule{width:40px;height:1px;background:var(--sd-sand);margin:32px auto}
.sd-area-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px 32px;margin:0;list-style:none;padding:0;
}
.sd-area-grid li{padding-left:0;margin:0}
.sd-area-grid li::before{display:none}
.sd-area-grid a{
  font-size:17px;color:#F7F4EF;
  text-decoration:underline;
  text-decoration-color:var(--sd-sand);
  text-underline-offset:4px;
  transition:.2s;
}
.sd-area-grid a:hover{color:var(--sd-sand);text-decoration-color:var(--sd-sand)}

/* ---------- CTA band ---------- */
.sd-ctaband{
  position:relative;min-height:400px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:48px 24px;
  background-size:cover;background-position:center;
}
.sd-ctaband::before{
  content:"";position:absolute;inset:0;
  background:rgba(9,21,32,.78);
}
.sd-ctaband-content{position:relative;max-width:760px}
.sd-ctaband h2{color:var(--sd-cream);font-size:44px;margin:0 0 var(--space-para);padding-top:0}
.sd-ctaband h2::before{display:none}
.sd-ctaband p{color:var(--sd-cream);font-size:18px;margin:0 auto;max-width:560px}

/* ---------- Footer ---------- */
.sd-footer{background:var(--sd-navy-deep);color:var(--sd-cream);border-top:1px solid var(--sd-sand)}
.sd-footer-inner{max-width:var(--sd-wide);margin:0 auto;padding:72px 24px 0}
.sd-footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.sd-footer h2{
  font-family:var(--sd-sans);
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--sd-sand);margin:0 0 1.2em;font-weight:500;
}
.sd-footer ul{list-style:none;margin:0;padding:0}
/* Single column: at two columns every multi-word city wrapped to two lines. */
.sd-footer-areas{display:block}
.sd-footer-areas li{margin:0 0 6px}
.sd-footer-areas a{white-space:nowrap}
.sd-footer li{margin:0 0 .7em}
.sd-footer a{font-size:14px;color:var(--sd-cream);text-decoration:none;transition:.2s;opacity:.82}
.sd-footer a:hover{color:var(--sd-sand);opacity:1}
.sd-footer-brand{font-size:15px;letter-spacing:3px;text-transform:uppercase;margin:0 0 1em}
.sd-footer-email{
  display:block;
  font-family:var(--sd-sans);
  font-size:16px;
  color:var(--sd-cream)!important;
  opacity:.85!important;
  margin-top:10px;
  transition:.2s;
}
.sd-footer-email:hover{color:var(--sd-sand)!important;opacity:1!important}
.sd-footer-phone{font-family:var(--sd-sans);font-variant-numeric:lining-nums tabular-nums;font-size:22px;font-weight:500;letter-spacing:.5px;color:var(--sd-sand)!important;opacity:1!important}
.sd-footer-bottom{
  border-top:1px solid rgba(184,162,120,.25);
  margin-top:56px;padding:22px 0 28px;
  /* #5A6B78 measured 3.34:1 on navy-deep; this lands about 6.8:1. */
  font-size:12px;line-height:1.7;color:#8FA3B3;
}
.sd-footer-bottom p{margin:0 0 .5em}
/* opacity would blend this back toward the background, so dim via colour. */
.sd-credits{font-size:11px;color:#7E93A5}
.sd-credits a{font-size:11px}


/* ---------- 1024 ---------- */
@media (max-width:1024px){
  .sd-editorial-text{padding:56px}
  .sd-footer-cols{grid-template-columns:repeat(2,1fr);gap:36px}
}

/* ---------- Tablet / mobile nav ---------- */
@media (max-width:900px){
  .sd-index-grid{grid-template-columns:1fr}
}

@media (max-width:860px){
  .sd-header-inner{flex-wrap:wrap;height:auto;padding:14px 20px;gap:12px}
  .sd-nav{order:4;width:100%;margin-left:0;display:none}
  .sd-nav-check:checked ~ .sd-nav{display:block}
  .sd-nav ul{flex-direction:column;gap:0;padding-top:6px}
  .sd-nav li{border-top:1px solid rgba(247,244,239,.15)}
  .sd-nav a{display:block;padding:13px 2px}
  .sd-nav-toggle{
    display:inline-flex;order:2;margin-left:10px;
    background:none;border:1px solid rgba(247,244,239,.4);
    padding:9px 12px;font-size:14px;color:var(--sd-cream);cursor:pointer;
  }
  .sd-brand{margin-right:auto}
  /* Call sits left of Menu so Menu keeps the far right corner. */
  .sd-header-phone{order:2}
  .sd-nav-toggle{order:3!important}
  /* Menu reads as a word at the top of the page and collapses to the bars
     once the visitor scrolls past the hero, making room for the call button. */
  .sd-nav-toggle{align-items:center;line-height:1}
  .sd-toggle-icon{display:none;font-size:18px}
  html.sd-past-hero .sd-toggle-icon{display:inline}
  html.sd-past-hero .sd-toggle-text{display:none}
  .sd-card-grid{grid-template-columns:1fr;gap:44px}
  .sd-editorial{grid-template-columns:1fr}
  .sd-areas-card{padding:48px 32px}
  :where(#inspection-form){scroll-margin-top:140px}
  .sd-editorial.is-reversed .sd-editorial-media{order:0}
  .sd-editorial-media{min-height:300px}
  .sd-area-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Mobile ---------- */
@media (max-width:600px){
  :root{--space-section:56px;--space-heading:48px;--sd-pad:56px}
  body{font-size:16px}
  .sd-hero{min-height:460px;padding:56px 20px}
  .sd-hero p{font-size:17px}
  .sd-hero-actions,.sd-cta-actions{flex-direction:column;align-items:stretch;width:100%}
  .sd-hero-actions .sd-btn,.sd-cta-actions .sd-btn{width:100%}
  .sd-editorial-text{padding:44px 20px}
  .sd-editorial-media{min-height:320px}
  .sd-editorial-text h2{font-size:30px}
  .sd-ctaband h2{font-size:32px}
  .sd-areas-card{padding:40px 24px}
  .sd-intro{padding:48px 20px 40px}
  .sd-areas-section{padding:8px 20px 24px}
  .sd-index{margin-top:48px}
  .sd-intro-bullets{grid-template-columns:1fr;gap:14px}
  .sd-intro-copy p{font-size:17px}
  .sd-services{padding:var(--space-section) 0 72px}
  .sd-numbered li{grid-template-columns:48px 1fr;gap:14px;padding:26px 0}
  .sd-numbered .sd-num{font-size:28px}
  .sd-area-grid{grid-template-columns:1fr;gap:14px;text-align:center}
  .sd-footer-cols{grid-template-columns:1fr;gap:34px}
  .sd-footer-inner{padding:56px 20px 0}
  .sd-trustbar{font-size:11.5px;letter-spacing:.6px;padding:12px 16px}
  .sd-trustbar span{margin:0 .45em}
}

@media (max-width:420px){
  .sd-brand{font-size:13px;letter-spacing:2px}
  .sd-header-phone{padding:10px 13px;font-size:12px;letter-spacing:.5px}
  .sd-nav-toggle{padding:8px 10px;margin-left:8px}
  .sd-header-inner{padding:12px 16px;gap:8px}
}

@media print{.sd-site-header{display:none}}