/* Mason's Yard Care - Beach Intelligence
   Type: Archivo (display) + Source Sans 3 (body).
   Archivo is a grotesque drawn for signage and high-impact headlines, which is
   the register a contractor's yard sign already lives in. Source Sans keeps the
   long service copy readable on a phone, where most of this traffic lands.
   Colour: pulled from the existing logo, navy #2E4576 and brick #A8482F.
   Brick is the only accent; it appears on actions and nowhere else. */

:root{
  --navy:#2E4576; --navy-deep:#22345A; --navy-ink:#1A2842;
  --brick:#A8482F; --brick-deep:#8E3B26;
  --ink:#191C1F; --body:#3E464E; --muted:#616A73;
  --paper:#FFFFFF; --sand:#F6F3EE; --sand-deep:#EDE7DE;
  --line:#DFD9D0; --line-soft:#EBE6DE;
  --ok:#2F6B4F;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --wrap:1180px; --radius:3px;
  --shadow:0 1px 2px rgba(25,28,31,.06), 0 8px 24px -12px rgba(25,28,31,.18);
}
*,*::before,*::after{box-sizing:border-box}
/* WCAG 2.4.11: the sticky header and the phone call bar both sit over the page,
   so a control focused by Tab, or reached by an in-page link, must scroll to
   the clear space between them. Measured 11-07: header 100px above 760px and
   91px at 760 and below, call bar 73px plus the home-indicator inset.
   The top margin is 24px, not 12: Safari scrolls a text field by the text box
   inside it, which sits 10 to 15px inside the border, so at 12px the field's
   6px focus ring still ended under the header. */
:root{--head-h:100px;--bar-h:0px}
@media(max-width:760px){:root{--head-h:91px;--bar-h:calc(73px + env(safe-area-inset-bottom))}}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip;
  scroll-padding-top:calc(var(--head-h) + 24px);scroll-padding-bottom:calc(var(--bar-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,.hero-title,h2,h3,h4,.display{font-family:Archivo,"Source Sans 3",system-ui,sans-serif;
  color:var(--ink);line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1,.hero-title{font-size:clamp(2.4rem,6vw,4.1rem);font-weight:800}
h2{font-size:clamp(1.85rem,3.7vw,2.7rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.lede{font-size:clamp(1.06rem,1.5vw,1.22rem);color:var(--body);max-width:60ch}
.eyebrow{font-family:Archivo,sans-serif;font-size:.76rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brick)}
.section{padding-block:clamp(var(--s8),9vw,var(--s10))}
.section--sand{background:var(--sand)}
.section-head{max-width:62ch;margin-bottom:var(--s7)}
.section-head h2{margin:var(--s3) 0 var(--s4)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:Archivo,sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:14px 26px;border-radius:var(--radius);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .16s ease-out,border-color .16s ease-out,color .16s ease-out}
.btn--primary{background:var(--brick);color:#fff}
.btn--primary:hover{background:var(--brick-deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--light{background:#fff;color:var(--navy-ink)}
.btn--light:hover{background:var(--sand-deep)}
.btn--outline-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--lg{padding:17px 32px;font-size:1.05rem}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--brick);outline-offset:2px;border-radius:2px}

/* ---------- top bar + nav ---------- */
.topbar{background:var(--navy-ink);color:#D8E0EE;font-size:.86rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:2px var(--s5);
  align-items:center;justify-content:space-between;padding-block:9px}
@media(max-width:560px){.topbar{font-size:.8rem}.topbar .wrap{justify-content:center;text-align:center}
  .topbar-hours{width:100%;text-align:center}}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{text-decoration:underline}
.topbar-hours{color:#A9B7CE}
.masthead{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding-block:var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;flex-shrink:0}
.brand img{width:34px;height:auto}
.brand-name{font-family:Archivo,sans-serif;font-weight:800;font-size:1.02rem;
  line-height:1.05;color:var(--navy);letter-spacing:-.015em}
.brand-name span{display:block;font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;align-items:center;gap:var(--s5)}
.nav a{text-decoration:none;font-weight:600;font-size:.97rem;color:var(--ink);padding-block:6px}
.nav a:hover{color:var(--brick)}
.nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--brick)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px;font-family:Archivo,sans-serif;font-weight:700;font-size:.9rem;color:var(--ink)}
@media(max-width:1100px){
  /* Closed menu is display:none. A fixed element parked off-screen with a
     transform still counts toward document scrollWidth, which pushed the whole
     page 315px wide on a phone. display:none is the only thing that removes it. */
  .nav{display:none;position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:88px var(--s5) var(--s5);
    box-shadow:-8px 0 40px rgba(0,0,0,.14);z-index:70}
  .nav[data-open=true]{display:flex;animation:navIn .22s cubic-bezier(.2,.7,.3,1)}
  @keyframes navIn{from{transform:translateX(100%)}to{transform:none}}
  @media (prefers-reduced-motion:reduce){.nav[data-open=true]{animation:none}}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:1.06rem}
  .nav .btn{margin-top:var(--s4)}
  .nav-toggle{display:block;z-index:80}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy-ink);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(20,28,46,.93) 0%,rgba(20,28,46,.82) 42%,rgba(20,28,46,.34) 100%)}
.hero-inner{position:relative;padding-block:clamp(var(--s8),12vw,150px);max-width:38rem}
.hero .hero-title{color:#fff}
.hero .lede{color:#D7DEE9;margin-top:var(--s5);font-size:clamp(1.08rem,1.7vw,1.28rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7)}
.hero-points{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin-top:var(--s7);
  padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.2);
  font-size:.92rem;color:#C3CEDF;list-style:none;padding-left:0}
.hero-points li{display:flex;align-items:center;gap:var(--s2)}
.hero-points svg{flex:none;color:#B9C6DD}

/* ---------- services: deliberately uneven grid ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}
.svc{position:relative;grid-column:span 2;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:290px;padding:var(--s5);border-radius:var(--radius);overflow:hidden;
  background:var(--navy);color:#fff;text-decoration:none;isolation:isolate}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,28,46,.12) 30%,rgba(20,28,46,.86) 100%)}
.svc:hover img{transform:scale(1.045)}
.svc--wide{grid-column:span 3;min-height:340px}
.svc--tall{grid-column:span 2;min-height:400px}
.svc h3{color:#fff;font-size:1.32rem}
.svc p{color:#D3DAE6;font-size:.95rem;margin-top:var(--s2);max-width:34ch}
.svc-more{margin-top:var(--s4);font-family:Archivo,sans-serif;font-weight:700;
  font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:#F0C0A8;
  display:flex;align-items:center;gap:6px}
.svc:hover .svc-more{color:#fff}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc,.svc--wide,.svc--tall{grid-column:span 2;min-height:250px}}

/* ---------- split rows ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(var(--s6),5vw,var(--s8));align-items:center}
.split--flip .split-media{order:-1}
.split-media img{width:100%;border-radius:var(--radius)}
.split h2{margin-bottom:var(--s4)}
.split p+p{margin-top:var(--s4)}
@media(max-width:860px){.split{grid-template-columns:1fr}.split--flip .split-media{order:0}}

/* ---------- before / after ---------- */
.ba{position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:1/1;user-select:none;touch-action:pan-y;cursor:ew-resize;background:var(--sand-deep)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);pointer-events:none}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.ba-handle::before{content:"";position:absolute;top:50%;left:50%;z-index:1;width:13px;height:13px;
  transform:translate(-50%,-50%) rotate(45deg);border-left:2px solid var(--navy);
  border-bottom:2px solid var(--navy)}
.ba-tag{position:absolute;bottom:var(--s4);font-family:Archivo,sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(20,28,46,.72);padding:6px 12px;border-radius:2px}
.ba-tag--b{left:var(--s4)} .ba-tag--a{right:var(--s4)}

/* ---------- gallery ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}
.filter{font-family:Archivo,sans-serif;font-weight:600;font-size:.9rem;padding:9px 17px;
  border:1px solid var(--line);background:#fff;border-radius:100px;color:var(--body);cursor:pointer;
  transition:border-color .16s ease-out,color .16s ease-out,background .16s ease-out}
.filter:hover{border-color:var(--ink);color:var(--ink)}
.filter[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.gal{columns:3;column-gap:var(--s4)}
.gal figure{break-inside:avoid;margin:0 0 var(--s4)}
.gal img{width:100%;border-radius:var(--radius)}
.gal figcaption{font-size:.86rem;color:var(--muted);margin-top:var(--s2)}
@media(max-width:900px){.gal{columns:2}}
@media(max-width:560px){.gal{columns:1}}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:var(--s5);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:var(--s6)}
.trust-item h3{font-size:1.02rem;margin-bottom:6px}
.trust-item p{font-size:.94rem;color:var(--muted)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s6)}
.step h3{margin-bottom:var(--s2)}
.step p{font-size:.96rem}
.step-rule{width:34px;height:3px;background:var(--brick);margin-bottom:var(--s4)}

/* ---------- service page detail ---------- */
.page-head{background:var(--sand);border-bottom:1px solid var(--line-soft)}
.page-head .wrap{padding-block:clamp(var(--s7),6vw,var(--s9))}
.page-head h1{max-width:22ch}
.page-head .lede{margin-top:var(--s5)}
.prose h2{margin-top:var(--s8);margin-bottom:var(--s4)}
.prose h3{margin-top:var(--s6);margin-bottom:var(--s2)}
.prose p+p{margin-top:var(--s4)}
.prose ul{margin:var(--s4) 0 0;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:26px;margin-bottom:var(--s3)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:3px;
  border-radius:2px;background:var(--brick)}
.layout{display:grid;grid-template-columns:1fr 340px;gap:clamp(var(--s6),5vw,var(--s8));align-items:start}
@media(max-width:940px){.layout{grid-template-columns:1fr}}
/* Sticks below the 100px header, not 4px under it. */
.aside{position:sticky;top:calc(var(--head-h) + 16px);background:var(--sand);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s5)}
.aside h3{margin-bottom:var(--s3)}
.aside p{font-size:.95rem}
.aside .btn{width:100%;margin-top:var(--s4)}
.aside-list{list-style:none;padding:0;margin:var(--s4) 0 0;font-size:.94rem}
.aside-list li{padding:9px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s3)}
.aside-list b{color:var(--ink);font-weight:600}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:var(--s5) 0;font-family:Archivo,sans-serif;font-weight:700;
  font-size:1.06rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
/* The sign is decoration: the empty alt text keeps it out of the question's
   accessible name ("Do I need to be home? +"). The plain value first is the
   fallback for engines without the alt syntax. */
.faq summary::after{content:"+";content:"+" / "";color:var(--brick);font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212";content:"\2212" / ""}
.faq-body{padding-bottom:var(--s5);max-width:70ch}

/* ---------- cta band ---------- */
.band{background:var(--navy-ink);color:#fff}
.band .wrap{padding-block:clamp(var(--s8),7vw,var(--s9))}
.band h2{color:#fff;max-width:20ch}
.band p{color:#C3CEDF;margin-top:var(--s4);max-width:52ch}
.band-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* ---------- form ---------- */
.form{display:grid;gap:var(--s4)}
.field{display:grid;gap:6px}
.field label{font-family:Archivo,sans-serif;font-weight:600;font-size:.9rem;color:var(--ink)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:13px 14px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);width:100%}
/* No outline:none here: this rule out-ranked the site-wide ring, so text
   fields and selects showed only a 1px border change on keyboard focus. */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(46,69,118,.16)}
/* Placeholders were the browser gray #A9A9A9, 2.35:1 on white, and the contact
   message box keeps its instruction there. Muted is about 5.4:1 (1.4.3);
   opacity:1 because Firefox fades placeholders by default. */
::placeholder{color:var(--muted);opacity:1}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.hint{font-size:.86rem;color:var(--muted)}

/* ---------- footer ---------- */
.foot{background:var(--navy-ink);color:#B9C4D6;padding-block:var(--s8) var(--s6);font-size:.94rem}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s7)}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot h4{font-family:Archivo,sans-serif;color:#fff;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 var(--s4)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:10px}
.foot-brand img{width:52px;margin-bottom:var(--s4)}
.foot-bottom{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;
  font-size:.85rem;color:#8E9BB2}

/* ---------- sticky mobile actions ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;
  grid-template-columns:1fr 1fr;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(0,0,0,.09);padding:9px 10px calc(9px + env(safe-area-inset-bottom));gap:9px}
.callbar .btn{padding:13px 10px;font-size:.98rem}
@media(max-width:760px){.callbar{display:grid}body{padding-bottom:calc(var(--bar-h) + 16px)}
  /* On a phone the keyboard pushes the bar up over the field being typed in,
     which scroll-padding cannot fix because the visible area shrinks under it
     (2.4.11; house ship checklist). The bar steps aside while a text field has
     focus. Text entry only: a checkbox, the slider or a button keeps the bar.
     The padding above is the bar plus 16px, so the last footer line clears it. */
  body:has(:is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=submit],[type=button]),textarea,select):focus) .callbar{display:none}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:100;background:#fff;color:var(--ink);
  padding:12px 18px;border-radius:var(--radius);box-shadow:var(--shadow)}
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}