/* ==========================================================================
   Guess Company Limited — site stylesheet
   One file for every page. Every page links this and nothing else.

   THIS FILE IS IN THREE PARTS, IN THIS ORDER:

     1. BASE        Lifted from the live guesscoltd.com, unchanged. This is
                    exactly how the site looks today.
     2. MULTI-PAGE  New rules the one-page site never needed — the phone
                    menu, the page headers, the two-way split on the home
                    page, marking which nav link you're on. Needed whichever
                    look we end up with. Do not delete.
     3. TIGHTENING  Small adjustments on top of BASE. Deleting part 3 puts
                    the site back to exactly the look that is live today.
                    That is the whole point of keeping it separate.
   ========================================================================== */


/* ==========================================================================
   1. BASE — as live on guesscoltd.com
   ========================================================================== */

:root {
  --brand-navy:#203347; --brand-cream:#F7F2E8;
  --bg:#FFFFFF; --surface-alt:#F4F6F8; --ink:var(--brand-navy); --muted:#526477; --border:#D9DEE3;
  --cream-soft:#FBF8F2; --cream-edge:#E7DCCB; --navy-soft:#2C4358;
  --accent:var(--brand-navy); --dark:var(--brand-navy); --dark-2:#172A3D; --footer-bg:#172A3D;
  --card:#FFFFFF; --light-accent:#F4F6F8;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); }
a { color:inherit; }
img { max-width:100%; display:block; }
.wrap { max-width:1180px; margin:0 auto; }

header { display:flex; align-items:center; justify-content:space-between; padding:18px 40px; background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
header > a:first-child { display:block; flex:0 0 auto; }
header > a:first-child img { width:clamp(210px,18vw,260px); height:auto; }
nav { display:flex; gap:26px; font-size:14px; font-weight:500; color:var(--muted); }
nav a { text-decoration:none; }
nav a:hover { color:var(--ink); }
.nav-toggle { display:none; font-size:22px; background:none; border:none; cursor:pointer; }
.btn { font-size:13px; font-weight:600; padding:11px 20px; border-radius:4px; text-decoration:none; display:inline-block; border:none; cursor:pointer; font-family:inherit; }
.btn-outline { border:1.5px solid var(--ink); color:var(--ink); background:transparent; }
.btn-outline-light { border:1.5px solid rgba(255,255,255,0.72); color:#fff; background:transparent; }
.btn-primary { background:var(--brand-cream); color:var(--dark); }
.btn-accent { background:var(--accent); color:#fff; }

.hero { position:relative; padding:88px 40px 0; text-align:center; overflow:hidden;
  background: linear-gradient(160deg, var(--dark-2) 0%, var(--dark) 100%); }
.gold-rule { width:64px; height:2px; background:var(--brand-cream); margin:0 auto 24px; opacity:.95; }
.hero h1 { font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:0.01em; text-transform:uppercase;
  font-size:clamp(32px,4.8vw,54px); margin-bottom:18px; color:#fff; }
.hero p { font-size:16.5px; color:rgba(255,255,255,0.8); max-width:600px; margin:0 auto 30px; line-height:1.6; }
.hero-ctas { display:flex; gap:14px; justify-content:center; margin-bottom:38px; flex-wrap:wrap; }
.badges { display:flex; gap:0; justify-content:center; flex-wrap:wrap; font-size:12.5px; font-weight:600; padding:22px 20px; border-top:1px solid rgba(255,255,255,0.12); }
.badges span { padding:0 18px; border-right:1px solid rgba(255,255,255,0.22); color:rgba(255,255,255,0.9); }
.badges span:last-child { border-right:none; }

section { padding:76px 40px; }
.eyebrow { font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; font-size:14px; color:var(--accent); margin-bottom:10px; }
.section-head { text-align:center; max-width:640px; margin:0 auto 48px; }
.section-head h2 { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:34px; margin-bottom:14px; color:var(--ink); }
.section-head p { color:var(--muted); font-size:15px; line-height:1.6; }

.services-grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.service-panel { background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.service-panel .body { padding:26px 28px; }
.service-panel h3 { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:23px; margin-bottom:6px; }
.service-panel .tag { font-size:13px; color:var(--muted); margin-bottom:16px; }
.service-panel ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.service-panel li { font-size:13.5px; color:var(--ink); padding-left:16px; position:relative; }
.service-panel li::before { content:'\2713'; position:absolute; left:0; color:var(--accent); font-weight:700; font-size:12px; }

.why { background:var(--surface-alt); }
.why-grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.why-item { text-align:center; }
.why-item .num { width:38px; height:38px; border-radius:50%; background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:600; margin:0 auto 16px; }
.why-item h4 { font-size:15.5px; font-weight:700; margin-bottom:8px; }
.why-item p { font-size:13px; color:var(--muted); line-height:1.55; }
.why .pay-note { max-width:1000px; margin:34px auto 0; text-align:center; font-size:13.5px; color:var(--muted); }
.why .credential { max-width:720px; margin:28px auto 0; padding-top:26px; border-top:1px solid var(--border); text-align:center; }
.why .credential p { font-size:14.5px; line-height:1.65; color:var(--ink); }
.why .credential .sig { margin-top:12px; font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent); }

.area { text-align:center; }
.town-list { max-width:720px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.town-list span { font-size:13.5px; font-weight:600; padding:9px 18px; border:1px solid var(--border); border-radius:30px; color:var(--ink); background:var(--bg); }

.contact { background:var(--dark); color:#fff; }
.contact .section-head h2 { color:#fff; }
.contact .section-head p { color:rgba(255,255,255,0.72); }
.contact-grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; }
.contact-info a { display:block; font-size:15px; font-weight:600; margin-bottom:14px; color:#fff; text-decoration:none; }
.quote-form { background:#fff; border-radius:10px; padding:30px; color:var(--ink); }
.quote-form h3 { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:600; margin-bottom:18px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quote-form input, .quote-form select, .quote-form textarea {
  width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:5px; font-size:13.5px; font-family:inherit; margin-bottom:12px;
}
.quote-form textarea { min-height:80px; resize:vertical; }
.quote-form button { width:100%; background:var(--accent); color:#fff; border:none; padding:13px; border-radius:5px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }
.quote-form button:disabled { opacity:0.6; cursor:not-allowed; }
.form-msg { font-size:13px; margin-top:10px; display:none; padding:10px 12px; border-radius:5px; }
.form-msg.success { display:block; background:#E6F4EA; color:#1E7A34; }
.form-msg.error { display:block; background:#FBEAEA; color:#B23A3A; }
.form-msg.notice { display:block; background:var(--light-accent); color:var(--brand-navy); }

footer { background:var(--footer-bg); color:rgba(255,255,255,0.75); padding:40px; text-align:center; font-size:13px; }
footer img { width:250px; height:auto; margin:0 auto 14px; }
footer .ftag { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.92); }
footer .ftag2 { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:4px; }
footer .flinks { display:flex; gap:20px; justify-content:center; margin:14px 0; font-size:13px; flex-wrap:wrap; }
footer .flinks a { text-decoration:none; }
footer .copy { margin-top:14px; color:rgba(255,255,255,0.5); font-size:12px; }

@media (max-width: 860px) {
  header { padding:16px 20px; }
  header > a:first-child img { width:180px; }
  section { padding:56px 20px; }
  .hero { padding:56px 20px 0; }
  .services-grid, .why-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
}


/* ==========================================================================
   2. MULTI-PAGE — rules a one-page site never needed. Keep these.
   ========================================================================== */

/* --- The phone menu --------------------------------------------------------
   The live site hides `nav` entirely below 860px and never replaces it. That
   was survivable when every link was an anchor to a section further down the
   same page — you could scroll to all of it. It is not survivable now: the
   homeowner and business pages are only reachable through the nav, so a phone
   with no menu is a phone that cannot see most of the site.

   Same pattern the CRM back office uses: a burger that becomes an x.
   Every tap target here is at least 44px.
--------------------------------------------------------------------------- */
.nav-toggle { min-width:44px; min-height:44px; line-height:1; color:var(--ink); }
.nav-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width: 860px) {
  header { flex-wrap:wrap; row-gap:0; }
  .nav-toggle { display:flex; align-items:center; justify-content:center; order:3; }
  header .btn-outline { order:2; margin-left:auto; margin-right:8px; }
  nav { display:none; }
  /* open state is set on <header> by site.js, so nav needs no state of its own */
  header.nav-open nav {
    display:flex; order:4; flex-basis:100%; flex-direction:column; gap:0;
    margin:12px -20px -1px; border-top:1px solid var(--border);
  }
  header.nav-open nav a {
    padding:15px 20px; font-size:15px; color:var(--ink);
    border-bottom:1px solid var(--border);
  }
}

/* --- Which page am I on ---------------------------------------------------
   Five pages means the nav has to answer "where am I". Underline rather than
   a colour change, because the nav's resting colour is already muted grey and
   a second grey would read as nothing.
--------------------------------------------------------------------------- */
nav a.here { color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--brand-navy); }
@media (max-width: 860px) {
  header.nav-open nav a.here { box-shadow:inset 3px 0 0 var(--brand-navy); }
}

/* --- Navigation dropdowns -------------------------------------------------
   Native details elements keep the desktop dropdowns and nested phone menu
   usable with a keyboard and without adding or changing any JavaScript.
--------------------------------------------------------------------------- */
nav { align-items:center; }
.nav-dropdown { position:relative; }
.nav-dropdown > summary {
  display:flex; min-height:44px; align-items:center; gap:8px;
  list-style:none; cursor:pointer; white-space:nowrap;
}
.nav-dropdown > summary::-webkit-details-marker { display:none; }
.nav-dropdown > summary::after {
  content:''; width:7px; height:7px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg);
  transition:transform .16s ease;
}
.nav-dropdown[open] > summary::after { transform:translateY(2px) rotate(225deg); }
.nav-dropdown.here > summary { color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--brand-navy); }
.nav-dropdown > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.nav-dropdown-menu {
  position:absolute; top:calc(100% + 8px); left:50%; min-width:260px;
  padding:7px; transform:translateX(-50%); border:1px solid var(--border);
  border-radius:7px; background:var(--bg); box-shadow:0 14px 38px rgba(34,48,59,.13);
}
.nav-dropdown-menu a {
  display:block; min-height:44px; padding:12px 11px; border-radius:4px;
  color:var(--ink); font-size:13px; line-height:1.4;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a[aria-current="page"] {
  background:var(--surface-alt); color:var(--accent);
}
@media (min-width:861px) and (max-width:1080px) {
  header { padding-right:24px; padding-left:24px; }
  nav { gap:17px; font-size:13px; }
  header > .btn-outline { padding-right:13px; padding-left:13px; }
}
@media (max-width:860px) {
  header.nav-open nav { align-items:stretch; }
  .nav-dropdown { border-bottom:1px solid var(--border); }
  .nav-dropdown > summary {
    min-height:53px; justify-content:space-between; padding:15px 20px;
    color:var(--ink); font-size:15px;
  }
  .nav-dropdown.here > summary { box-shadow:inset 3px 0 0 var(--brand-navy); }
  .nav-dropdown-menu {
    position:static; min-width:0; padding:4px 0 7px; transform:none;
    border:0; border-radius:0; background:var(--surface-alt); box-shadow:none;
  }
  header.nav-open nav .nav-dropdown-menu a {
    min-height:44px; padding:12px 20px 12px 38px; border:0; font-size:14px;
  }
}

/* --- Page header ----------------------------------------------------------
   The home page keeps the full `.hero`. The four inner pages get a shorter
   version of the same thing — same gradient, same gold rule, no badges and no
   button row, because the tall hero is a front-door device and repeating it
   on every page just pushes the content down.
--------------------------------------------------------------------------- */
.page-head { background:linear-gradient(160deg,var(--dark-2) 0%,var(--dark) 100%); color:#fff; text-align:center; padding:56px 40px; }
.page-head .gold-rule { margin-bottom:18px; }
.page-head h1 { font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.01em; font-size:clamp(28px,3.6vw,40px); margin-bottom:12px; }
.page-head p { font-size:15.5px; color:rgba(255,255,255,0.8); max-width:620px; margin:0 auto; line-height:1.6; }
@media (max-width:860px) { .page-head { padding:40px 20px; } }

/* --- The two-way split on the home page -----------------------------------
   The one thing the home page now has to do that it never did before: send a
   homeowner one way and a business the other, without making either feel like
   the afterthought. Two equal cards, no visual hierarchy between them.
--------------------------------------------------------------------------- */
.split-grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.split-card { display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--border); border-radius:8px; overflow:hidden; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.split-card:hover, .split-card:focus-visible { border-color:var(--accent); box-shadow:0 6px 22px rgba(34,48,59,0.09); }
.split-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.split-card .body { padding:26px 28px; display:flex; flex-direction:column; flex:1; }
.split-card h3 { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:23px; margin-bottom:8px; }
.split-card p { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:18px; }
.split-card .go { margin-top:auto; font-size:13.5px; font-weight:700; color:var(--accent); }
@media (max-width:860px) { .split-grid { grid-template-columns:1fr; } }

/* --- Section rhythm ---------------------------------------------------------
   Alternating grounds so the welcome page reads as distinct blocks rather
   than one long scroll: hero (dark) / who (grey) / split (white) /
   how it works (grey) / service area (white) / contact (dark).
--------------------------------------------------------------------------- */
.who { background:var(--surface-alt); }

/* Teaser line inside a split card — the categories that live behind the link,
   so the choice is made on content rather than on the heading alone. */
.split-card .teaser {
  font-size:12.5px; color:var(--muted); line-height:1.7;
  padding:12px 0 16px; border-top:1px solid var(--border); margin-top:2px;
}

/* --- Plain prose blocks ---------------------------------------------------
   The inner pages carry more written text than the one-page site ever did.
--------------------------------------------------------------------------- */
.prose { max-width:720px; margin:0 auto; }
.prose p { font-size:15px; line-height:1.7; color:var(--ink); margin-bottom:16px; }
.prose p:last-child { margin-bottom:0; }
.prose ul { list-style:none; margin:0 0 16px; }
.prose li { font-size:15px; line-height:1.7; padding-left:20px; position:relative; margin-bottom:6px; }
.prose li::before { content:'\2713'; position:absolute; left:0; color:var(--accent); font-weight:700; font-size:13px; }

/* A single wide services panel, for pages that only have one list to show. */
.services-grid.one { max-width:640px; grid-template-columns:1fr; }

/* --- TODO marker ----------------------------------------------------------
   Bright on purpose. Anything still unwritten wears one of these so it cannot
   reach the live site unnoticed. Grep the folder for "todo" before going live.
--------------------------------------------------------------------------- */
.todo { display:block; max-width:1000px; margin:0 auto 20px; padding:12px 16px; border:1px dashed var(--brand-navy); border-radius:6px; background:var(--light-accent); color:var(--brand-navy); font-size:13.5px; font-weight:600; }

/* --- Staging banner -------------------------------------------------------
   Shown by site.js on any host that is not guesscoltd.com, so a staging tab
   left open for three days is never mistaken for the live site.
--------------------------------------------------------------------------- */
.staging-bar { background:#0F2133; color:#fff; text-align:center; font-size:12.5px; font-weight:600; padding:7px 16px; letter-spacing:0.02em; }


/* --- Service categories ---------------------------------------------------
   The backbone of the homeowner and business pages, and the reason those
   pages work without photographs.

   Each category is a native <details> element: closed it reads as a short
   scannable list of trades, open it shows every specific thing we take on
   under that heading. No JavaScript — the browser does the opening, which
   means it also works if a script fails, and Google reads the closed content
   the same as the open content.

   Closed-state hint text matters more than it looks: a customer skimming
   twelve headings needs to know "Doors" covers their broken closer without
   opening anything.
--------------------------------------------------------------------------- */
.svc-list { max-width:860px; margin:0 auto; display:grid; gap:10px; }

.svc {
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.svc[open] { border-color:var(--accent); box-shadow:0 4px 18px rgba(34,48,59,.07); }
.svc:hover:not([open]) { border-color:#C3D0D9; }

.svc summary {
  list-style:none; cursor:pointer; padding:18px 22px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px;
}
.svc summary::-webkit-details-marker { display:none; }
.svc summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }

.svc .svc-name {
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:21px;
  letter-spacing:.01em; color:var(--ink); display:block; line-height:1.2;
}
.svc .svc-hint {
  display:block; font-size:13px; color:var(--muted); margin-top:3px; line-height:1.5;
}
.svc[open] .svc-name { color:var(--accent); }

/* Chevron. Rotates on open; the transform is the only animation on the page. */
.svc .chev {
  width:11px; height:11px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg);
  transition:transform .18s ease; margin-right:4px; flex:none;
}
.svc[open] .chev { transform:rotate(-135deg); border-color:var(--accent); }

.svc .svc-body { padding:0 22px 20px; }
.svc ul {
  list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 22px;
  border-top:1px solid var(--border); padding-top:16px;
}
.svc li {
  font-size:14px; color:var(--ink); padding-left:17px; position:relative; line-height:1.5;
}
.svc li::before {
  content:'\2713'; position:absolute; left:0; top:1px;
  color:var(--accent); font-weight:700; font-size:11.5px;
}
.svc .svc-foot { margin-top:14px; font-size:13px; color:var(--muted); font-style:italic; }

@media (max-width:700px) {
  .svc summary { padding:16px 18px; }
  .svc .svc-body { padding:0 18px 18px; }
  .svc ul { grid-template-columns:1fr; gap:9px; }
  .svc .svc-name { font-size:19px; }
}

/* --- "Anything not listed" closer -----------------------------------------
   Every service list is incomplete by definition. Saying so is better than
   letting someone decide we don't do their job.
--------------------------------------------------------------------------- */
.catch-all {
  max-width:860px; margin:26px auto 0; text-align:center;
  padding:22px; border:1px dashed var(--border); border-radius:8px;
  background:var(--surface-alt);
}
.catch-all p { font-size:14.5px; color:var(--ink); margin-bottom:14px; line-height:1.6; }
.catch-all p:last-child { margin-bottom:0; }

/* --- Home page intro ------------------------------------------------------
   The welcome page opens with who we are rather than what we sell, so it
   needs a block of real prose set larger than body copy.
--------------------------------------------------------------------------- */
.intro { max-width:680px; margin:0 auto; text-align:center; }
.intro p { font-size:16.5px; line-height:1.7; color:var(--ink); margin-bottom:16px; }
.intro p:last-child { margin-bottom:0; }
.intro .sig {
  margin-top:20px; font-family:'Barlow Condensed',sans-serif; font-size:15px;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
}

/* --- Trust strip ----------------------------------------------------------
   Four short facts under the intro. Replaces the photo grid as the thing that
   makes the page feel substantiated.
--------------------------------------------------------------------------- */
.facts {
  max-width:940px; margin:44px auto 0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:8px; overflow:hidden;
}
.facts div {
  background:var(--bg); padding:22px 18px; text-align:center;
  display:flex; flex-direction:column;
}
.facts .big {
  font-family:'Barlow Condensed',sans-serif; font-size:27px; font-weight:600;
  color:var(--accent); line-height:1.1; margin-bottom:8px; text-wrap:balance;
}
/* Pushed to the bottom of the cell so the four labels line up even when one
   of the headings wraps to two lines. */
.facts .lbl { font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:auto; }
@media (max-width:760px) { .facts { grid-template-columns:1fr 1fr; } }

/* --- Commercial maintenance programs --------------------------------------
   The business side now includes a dedicated preventive-maintenance page.
   These rules use the same colours, type and spacing as the existing pages.
--------------------------------------------------------------------------- */
.page-head-actions {
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:12px; margin-top:24px;
}
.page-kicker {
  font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  margin-bottom:10px;
}
.maintenance-page-head { padding:70px 40px 44px; }
.maintenance-page-head h1 { max-width:760px; margin-left:auto; margin-right:auto; }
.maintenance-trust {
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px;
  margin-top:30px; color:rgba(255,255,255,.78); font-size:12.5px; font-weight:600;
}
.maintenance-trust span { position:relative; }
.maintenance-trust span + span::before {
  content:''; position:absolute; width:4px; height:4px; border-radius:50%;
  background:#fff; left:-13px; top:8px;
}

.maintenance-feature { background:var(--dark-2); color:#fff; }
.maintenance-feature-inner {
  max-width:1060px; margin:0 auto; display:grid;
  grid-template-columns:1.1fr .9fr; align-items:center; gap:72px;
}
.maintenance-feature .eyebrow { color:#fff; }
.maintenance-feature h2 {
  font-family:'Barlow Condensed',sans-serif; font-size:39px; font-weight:600;
  line-height:1.1; margin-bottom:16px;
}
.maintenance-feature-copy > p {
  color:rgba(255,255,255,.79); font-size:14.5px; line-height:1.75;
  margin-bottom:14px;
}
.feature-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.maintenance-feature-points { border-top:1px solid rgba(255,255,255,.18); }
.maintenance-feature-points > div {
  display:grid; gap:5px; padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.maintenance-feature-points strong { font-size:14px; }
.maintenance-feature-points span { color:rgba(255,255,255,.72); font-size:13px; }

.program-preview-grid {
  max-width:1000px; margin:0 auto; display:grid;
  grid-template-columns:repeat(3,1fr); gap:18px;
}
.program-preview-card {
  padding:24px 22px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg);
}
.program-preview-featured { border-color:var(--accent); background:var(--surface-alt); }
.program-preview-card h3 {
  font-family:'Barlow Condensed',sans-serif; font-size:23px; font-weight:600;
  margin:8px 0;
}
.program-preview-card p { color:var(--muted); font-size:13.5px; line-height:1.65; }
.section-actions {
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:18px; margin-top:30px;
}
.text-link { font-size:13.5px; font-weight:600; color:var(--accent); text-decoration:none; }
.business-services, .business-area { background:var(--surface-alt); }
.business-services .catch-all { background:var(--bg); }
.commercial-expectations { background:var(--bg); }

.check-grid {
  max-width:1060px; margin:0 auto; display:grid;
  grid-template-columns:repeat(3,1fr); gap:18px;
}
.check-card {
  padding:24px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg);
}
.check-card h3 {
  font-family:'Barlow Condensed',sans-serif; font-size:21px; font-weight:600;
  margin-bottom:8px;
}
.check-card p { color:var(--muted); font-size:13.5px; line-height:1.65; }

.maintenance-plans, .maintenance-properties { background:var(--surface-alt); }
.maintenance-plans .section-head { max-width:700px; }
.plan-grid {
  max-width:1120px; margin:0 auto; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch;
}
.plan-card {
  position:relative; display:flex; flex-direction:column; min-width:0;
  padding:28px 24px; border:1px solid var(--border); border-radius:9px;
  background:var(--bg);
}
.plan-card-featured { border:2px solid var(--accent); padding:27px 23px; }
.plan-ribbon {
  align-self:flex-start; padding:6px 10px; margin-bottom:15px; border-radius:4px;
  background:var(--dark); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.plan-kicker {
  color:var(--accent); font-size:11.5px; font-weight:700;
  letter-spacing:.075em; text-transform:uppercase;
}
.plan-card h3 {
  font-family:'Barlow Condensed',sans-serif; font-size:29px; font-weight:600;
  margin-top:8px;
}
.plan-frequency { color:var(--accent); font-size:13px; font-weight:600; margin-top:2px; }
.plan-summary {
  color:var(--muted); font-size:13.5px; line-height:1.65;
  padding:17px 0; margin-top:15px; border-top:1px solid var(--border);
}
.plan-card ul, .scope-card ul { list-style:none; }
.plan-card ul { display:grid; gap:10px; margin:0 0 25px; }
.plan-card li, .scope-card li {
  position:relative; padding-left:18px; font-size:13.2px; line-height:1.55;
}
.plan-card li::before, .scope-card li::before {
  content:'\2713'; position:absolute; left:0; top:1px;
  color:var(--accent); font-size:12px; font-weight:700;
}
.plan-button { width:100%; margin-top:auto; text-align:center; }
.plan-fine-print {
  max-width:720px; margin:24px auto 0; color:var(--muted);
  text-align:center; font-size:12.5px; line-height:1.6;
}

.maintenance-process .why-item .num { background:var(--accent); }
.maintenance-scope { background:var(--surface-alt); }
.maintenance-properties { background:var(--bg); }
.scope-grid {
  max-width:960px; margin:0 auto; display:grid;
  grid-template-columns:1fr 1fr; gap:22px;
}
.scope-card {
  padding:27px 26px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg);
}
.scope-card h3 {
  font-family:'Barlow Condensed',sans-serif; font-size:23px; font-weight:600;
  margin-bottom:16px;
}
.scope-card ul { display:grid; gap:11px; }
.property-list {
  max-width:760px; margin:0 auto; display:flex; justify-content:center;
  flex-wrap:wrap; gap:10px;
}
.property-list span {
  padding:10px 15px; border:1px solid var(--border); border-radius:30px;
  background:var(--surface-alt); font-size:13px; font-weight:600;
}
.contact-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.contact-maintenance-note {
  max-width:360px; margin-top:30px; padding-top:23px;
  border-top:1px solid rgba(255,255,255,.2);
}
.contact-maintenance-note strong { display:block; font-size:14px; }
.contact-maintenance-note p {
  color:rgba(255,255,255,.74); font-size:13.5px; line-height:1.65; margin-top:8px;
}
.contact-maintenance-note a { margin-top:10px; font-size:13.5px; }

/* --- Home services and two maintenance audiences -------------------------
   Service photos answer "what kind of work?" while maintenance cards answer
   "which property?" Each image supports an actual decision or page link.
--------------------------------------------------------------------------- */
.plan-paths, .service-highlights { background:var(--surface-alt); }
.plan-path-grid {
  max-width:1030px; margin:0 auto; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;
}
.plan-path-card, .service-highlight-card {
  min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:8px;
  background:var(--bg); text-decoration:none;
}
.plan-path-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.plan-path-copy { padding:24px 25px 25px; }
.plan-path-copy h3, .service-highlight-copy h3 {
  font-family:'Barlow Condensed',sans-serif; font-size:25px; font-weight:600;
  line-height:1.18; margin:7px 0 8px;
}
.plan-path-copy p, .service-highlight-copy p {
  color:var(--muted); font-size:13.5px; line-height:1.7; margin-bottom:15px;
}
.plan-path-copy > span, .service-highlight-copy > span {
  color:var(--accent); font-size:13px; font-weight:600;
}
.plan-path-card:hover .plan-path-copy > span,
.service-highlight-card:hover .service-highlight-copy > span { text-decoration:underline; }
.service-highlight-grid {
  max-width:1000px; margin:0 auto; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
}
.service-highlight-card img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.service-highlight-card-copyonly {
  display:flex; align-items:stretch; background:var(--brand-navy); color:#fff;
}
.service-highlight-card-copyonly > div { width:100%; }
.service-highlight-brand {
  width:100%; aspect-ratio:4/3; padding:34px 28px; display:flex; flex-direction:column;
  justify-content:flex-end; background:linear-gradient(145deg,#162A3E,var(--brand-navy));
}
.service-highlight-brand strong {
  font-family:'Barlow Condensed',sans-serif; font-size:clamp(34px,4vw,52px);
  line-height:.95; letter-spacing:.025em; text-transform:uppercase;
}
.service-highlight-brand span {
  margin-top:15px; color:rgba(255,255,255,.72); font-size:12px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.service-highlight-card-copyonly .service-highlight-copy { background:var(--card); color:var(--ink); }
.service-highlight-copy { padding:22px 20px 23px; }
.service-highlight-copy h3 { font-size:23px; }
.service-highlight-note {
  max-width:760px; margin:25px auto 0; text-align:center;
  color:var(--muted); font-size:13.5px; line-height:1.65;
}
.service-highlight-note strong { color:var(--ink); }
.service-highlight-note a { color:var(--accent); font-weight:600; text-decoration:none; }
.service-standards, .service-faq { background:var(--bg); }
.service-standard-grid {
  max-width:1030px; margin:0 auto; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
}
.service-standard-card, .service-detail-card, .commercial-work-card {
  min-width:0; padding:25px 23px; border:1px solid var(--border);
  border-radius:8px; background:var(--bg);
}
.service-standard-card h3, .service-detail-card h3, .commercial-work-card h3 {
  font-family:'Barlow Condensed',sans-serif; font-size:23px; font-weight:600;
  line-height:1.2; margin-bottom:10px;
}
.service-standard-card p, .service-detail-card p, .commercial-work-card p {
  color:var(--muted); font-size:13.5px; line-height:1.72;
}
.commercial-work-grid {
  max-width:1060px; margin:0 auto; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px;
}
.commercial-work-featured { border-color:var(--accent); }
.commercial-work-featured > a {
  display:inline-block; margin-top:15px; color:var(--accent);
  font-size:13px; font-weight:600; text-decoration:none;
}
.service-page-head h1 { max-width:770px; }
.service-page-head > p { max-width:690px; }
.service-intro { background:var(--surface-alt); }
.service-detail-grid {
  max-width:1000px; margin:0 auto; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px;
}
.service-emphasis { background:var(--surface-alt); }
.service-emphasis-inner { max-width:760px; margin:0 auto; text-align:center; }
.service-emphasis-inner h2 {
  font-family:'Barlow Condensed',sans-serif; font-size:35px;
  font-weight:600; line-height:1.15; margin-bottom:16px;
}
.service-emphasis-inner p {
  max-width:690px; margin:0 auto 14px; color:var(--muted);
  font-size:14.5px; line-height:1.75;
}
.service-emphasis-inner .btn { margin-top:8px; }
.inspection-testimonial {
  max-width:690px; margin:26px auto 20px; padding:24px 26px 22px;
  text-align:left; background:#fff; border:1px solid var(--cream-edge);
  border-left:5px solid var(--brand-navy); box-shadow:0 10px 28px rgba(32,51,71,.06);
}
.service-emphasis-inner .inspection-testimonial p {
  margin:0; color:var(--brand-navy); font-family:'Barlow Condensed',sans-serif;
  font-size:23px; font-weight:600; line-height:1.3;
}
.inspection-testimonial cite {
  display:block; margin-top:14px; color:var(--muted); font-size:11px;
  font-style:normal; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.service-maintenance-bridge { background:var(--bg); }
.service-faq { background:var(--surface-alt); }
.service-faq-list { max-width:790px; margin:0 auto; display:grid; gap:10px; }
.service-faq-item {
  overflow:hidden; border:1px solid var(--border); border-radius:7px;
  background:var(--bg);
}
.service-faq-item summary {
  position:relative; min-height:56px; padding:17px 48px 17px 20px;
  list-style:none; color:var(--ink); font-size:14px;
  font-weight:600; cursor:pointer;
}
.service-faq-item summary::-webkit-details-marker { display:none; }
.service-faq-item summary::after {
  content:'+'; position:absolute; right:19px; top:13px;
  color:var(--accent); font-size:21px; font-weight:400;
}
.service-faq-item[open] summary::after { content:'\2212'; }
.service-faq-item summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.service-faq-item > p {
  padding:0 20px 18px; color:var(--muted); font-size:13.5px; line-height:1.7;
}
.home-program-feature { background:var(--bg); }
.home-maintenance-head .page-head-background { object-position:center 58%; }
.home-photo-band .photo-band-background { object-position:center 45%; }
#handyman-repairs, #painting, #remodeling-improvements,
#inspection-repairs, #home-services { scroll-margin-top:104px; }

@media (max-width:980px) {
  .plan-grid { grid-template-columns:1fr; max-width:610px; }
  .plan-card-featured { order:-1; }
  .check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .commercial-work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .maintenance-page-head { padding:52px 20px 38px; }
  .maintenance-feature-inner { grid-template-columns:1fr; gap:34px; }
  .maintenance-feature h2 { font-size:34px; }
  .program-preview-grid { grid-template-columns:1fr; max-width:560px; }
  .scope-grid { grid-template-columns:1fr; }
  .plan-path-grid { grid-template-columns:1fr; max-width:570px; }
  .service-highlight-grid { grid-template-columns:1fr; max-width:500px; }
  .service-highlight-card img { aspect-ratio:16/9; }
  .service-highlight-brand { aspect-ratio:16/9; }
  .service-standard-grid { grid-template-columns:1fr; max-width:570px; }
  .service-detail-grid { grid-template-columns:1fr; max-width:570px; }
  .service-emphasis-inner h2 { font-size:31px; }
}
@media (max-width:560px) {
  .check-grid { grid-template-columns:1fr; }
  .commercial-work-grid { grid-template-columns:1fr; }
  .maintenance-trust { gap:8px 16px; }
  .maintenance-trust span + span::before { left:-10px; }
  .feature-actions .btn, .page-head-actions .btn, .contact-actions .btn {
    width:100%; text-align:center;
  }
  .section-actions { flex-direction:column; }
}

/* --- Photography -----------------------------------------------------------
   Editorial service photography is part of the layout, not a project gallery.
   Dark overlays keep every heading readable and the images stay contained on
   narrow screens. Decorative hero photos have empty alt text in the markup;
   images that explain a service carry a useful description.
--------------------------------------------------------------------------- */
.hero-photographic {
  position:relative; display:flex; min-height:560px; flex-direction:column;
  justify-content:flex-end; isolation:isolate;
}
.hero-background, .page-head-background, .photo-band-background {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-background { z-index:-2; object-position:center 46%; }
.hero-photographic::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(18,27,36,.66) 0%,rgba(18,27,36,.59) 52%,rgba(18,27,36,.48) 100%);
}
.hero-photographic h1 { text-shadow:0 2px 18px rgba(0,0,0,.2); }
.hero-photographic .badges { background:rgba(22,32,41,.34); }

.split-card-photo { width:100%; aspect-ratio:16/9; object-fit:cover; }
.split-card:hover .split-card-photo { filter:brightness(1.035); }
.maintenance-feature-media { min-width:0; }
.feature-photo {
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:7px;
  border:1px solid rgba(255,255,255,.15);
}
.maintenance-feature-media .maintenance-feature-points { margin-top:17px; }

.page-head-photo {
  position:relative; display:flex; min-height:315px; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden; isolation:isolate;
}
.page-head-background { z-index:-2; object-position:center 48%; }
.page-head-photo::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(27,38,48,.87) 0%,rgba(27,38,48,.73) 56%,rgba(27,38,48,.60) 100%);
}
.residential-page-head .page-head-background { object-position:center 57%; }
.commercial-page-head .page-head-background { object-position:center 55%; }
.maintenance-photo-head { min-height:440px; }
.contact-page-head { min-height:260px; }
.service-page-head { min-height:380px; }

.visual-intro-grid {
  max-width:1040px; margin:0 auto; display:grid;
  grid-template-columns:1fr 1fr; align-items:center; gap:60px;
}
.visual-intro-media { min-width:0; }
.visual-intro-media img {
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px;
  box-shadow:0 14px 40px rgba(34,48,59,.10);
}
.visual-intro-media img.before-after-photo {
  aspect-ratio:2/1; object-fit:contain; background:var(--brand-navy);
}
.visual-intro-media img.painting-finished-photo {
  aspect-ratio:3/2; object-fit:cover; object-position:center 46%;
}
.visual-intro-media img.handyman-repair-photo {
  aspect-ratio:3/2; object-fit:cover; object-position:center;
}
.visual-intro-copy { min-width:0; }
.visual-intro-copy h2 {
  font-family:'Barlow Condensed',sans-serif; font-size:35px; font-weight:600;
  line-height:1.13; margin-bottom:15px;
}
.visual-intro-copy p { color:var(--muted); font-size:14.5px; line-height:1.76; margin-bottom:14px; }
.visual-intro-copy .btn { margin-top:7px; }
.visual-sig {
  margin-top:18px; font-family:'Barlow Condensed',sans-serif; font-size:15px;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
}

.program-photo { max-width:1000px; margin:-4px auto 24px; overflow:hidden; border-radius:8px; }
.program-photo img { width:100%; height:235px; object-fit:cover; object-position:center 48%; }

.maintenance-photo-band {
  position:relative; display:flex; min-height:340px; align-items:center;
  justify-content:center; overflow:hidden; isolation:isolate;
}
.photo-band-background { z-index:-2; object-position:center 55%; }
.maintenance-photo-band::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(25,37,47,.85),rgba(25,37,47,.69));
}
.photo-band-copy { max-width:680px; color:#fff; text-align:center; }
.photo-band-copy .eyebrow { color:#fff; }
.photo-band-copy h2 {
  font-family:'Barlow Condensed',sans-serif; font-size:39px; font-weight:600;
  line-height:1.14; margin-bottom:12px;
}
.photo-band-copy p { color:rgba(255,255,255,.8); font-size:15px; line-height:1.7; }

@media (max-width:860px) {
  .hero-photographic { min-height:510px; }
  .page-head-photo { min-height:285px; }
  .maintenance-photo-head { min-height:390px; }
  .contact-page-head { min-height:245px; }
  .service-page-head { min-height:340px; }
  .visual-intro-grid { grid-template-columns:1fr; gap:28px; max-width:570px; }
  .visual-intro-copy h2 { font-size:31px; }
  .program-photo img { height:195px; }
  .maintenance-photo-band { min-height:295px; }
  .photo-band-copy h2 { font-size:33px; }
}
@media (max-width:560px) {
  .hero-photographic { min-height:485px; }
  .hero-background { object-position:62% center; }
  .split-card-photo { aspect-ratio:16/10; }
  .visual-intro-media img { aspect-ratio:16/11; }
  .visual-intro-media img.before-after-photo { aspect-ratio:2/1; }
  .visual-intro-media img.painting-finished-photo { aspect-ratio:3/2; }
  .program-photo img { height:165px; }
  .maintenance-photo-band { min-height:270px; }
}

/* ==========================================================================
   3. TIGHTENING — delete this whole block to return to today's live look
   Nothing above depends on anything below.
   ========================================================================== */

/* Body text on the live site sits at the browser default line-height, which
   is tight for 15px Inter. */
body { line-height:1.55; -webkit-font-smoothing:antialiased; }

/* Keyboard focus is invisible on the live site. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

/* Phone tap targets. Measured in Chromium at 390px: on the live site the
   header button, the contact links, the footer links and every form field
   come in under the 44px minimum. The footer links were the worst at 20px —
   five links that size, side by side, are a coin toss to hit. */
@media (max-width:860px) {
  .btn { padding:14px 20px; }
  header > a:first-child { padding:5px 0; }
  .contact-info a { padding:12px 0; margin-bottom:2px; }
  footer .flinks { gap:8px 20px; }
  footer .flinks a { display:inline-block; padding:12px 4px; }
  .quote-form input, .quote-form select, .quote-form textarea { padding:14px 12px; }
  .quote-form button { padding:15px; }
}

/* Section padding on a phone is 56px top and bottom, which stacks up to a lot
   of empty screen once there are five pages to move through. */
@media (max-width:860px) { section { padding:48px 20px; } }


/* ==========================================================================
   4. BRAND REFINEMENT — white foundation, warm details, plainspoken character
   ========================================================================== */

/* Cream is an accent, not the page background. It marks promises, proof and
   deliberate decision points while the main reading surface stays white. */
.btn { border-radius:3px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary:hover { box-shadow:0 7px 22px rgba(0,0,0,.16); }
.btn-accent:hover { background:var(--navy-soft); box-shadow:0 7px 20px rgba(32,51,71,.16); }
.section-head { max-width:700px; }
.section-head h2 { font-size:clamp(32px,3.5vw,42px); line-height:1.08; }
.eyebrow { color:var(--brand-navy); }

/* The home page now leads with the company's operating standard rather than
   repeating a list of services in several different sections. */
.company-standard { background:#fff; padding-bottom:58px; }
.company-standard-grid {
  max-width:1080px; margin:0 auto; display:grid;
  grid-template-columns:1.2fr .8fr; gap:58px; align-items:center;
}
.company-standard-copy h2 {
  max-width:680px; font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(36px,4.3vw,52px); font-weight:600; line-height:1.02;
  text-transform:uppercase; letter-spacing:.01em; margin-bottom:18px;
}
.company-standard-copy > p { max-width:660px; color:var(--muted); font-size:15px; line-height:1.75; }
.company-standard-note {
  position:relative; margin:0; padding:32px 30px 29px;
  border:1px solid var(--cream-edge); border-left:5px solid var(--brand-navy);
  background:var(--cream-soft);
}
.company-standard-note::before {
  content:'G'; position:absolute; right:18px; top:3px;
  font-family:'Barlow Condensed',sans-serif; font-size:84px; font-weight:700;
  line-height:1; color:rgba(32,51,71,.06);
}
.company-standard-note h3 {
  position:relative; font-family:'Barlow Condensed',sans-serif;
  font-size:25px; font-weight:600; line-height:1.25; color:var(--brand-navy);
}
.company-standard-note p {
  position:relative; margin-top:12px; color:var(--muted);
  font-size:13.5px; line-height:1.7;
}
.proof-strip {
  max-width:1080px; margin:48px auto 0; display:grid;
  grid-template-columns:repeat(4,1fr); border:1px solid var(--cream-edge);
  background:var(--cream-soft);
}
.proof-strip > div { min-width:0; padding:20px 22px; border-right:1px solid var(--cream-edge); }
.proof-strip > div:last-child { border-right:0; }
.proof-strip strong {
  display:block; font-family:'Barlow Condensed',sans-serif;
  font-size:22px; font-weight:600; text-transform:uppercase;
}
.proof-strip span { display:block; margin-top:4px; color:var(--muted); font-size:12.5px; line-height:1.5; }

.home-service-menu { background:var(--cream-soft); border-top:1px solid var(--cream-edge); border-bottom:1px solid var(--cream-edge); }
.home-service-grid {
  max-width:1080px; margin:0 auto; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
}
.home-service-grid > a {
  position:relative; min-width:0; padding:27px 27px 25px;
  border:1px solid var(--cream-edge); background:#fff; color:inherit;
  text-decoration:none; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.home-service-grid > a:hover, .home-service-grid > a:focus-visible {
  border-color:var(--brand-navy); transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(32,51,71,.08);
}
.home-service-grid h3 { font-family:'Barlow Condensed',sans-serif; font-size:25px; font-weight:600; line-height:1.1; }
.home-service-grid p { margin:8px 0 16px; color:var(--muted); font-size:13.5px; line-height:1.65; }
.home-service-grid strong { color:var(--brand-navy); font-size:12.5px; }

.work-proof { background:#fff; }
.work-proof-grid {
  max-width:1080px; margin:0 auto; display:grid;
  grid-template-columns:.72fr 1.28fr; gap:48px; align-items:center;
}
.work-proof-copy h2 {
  font-family:'Barlow Condensed',sans-serif; font-size:clamp(34px,4vw,46px);
  font-weight:600; line-height:1.05; margin-bottom:16px;
}
.work-proof-copy > p { color:var(--muted); font-size:14.5px; line-height:1.7; }
.work-proof-copy .work-proof-note {
  margin-top:20px; padding-top:18px; border-top:1px solid var(--cream-edge);
  color:var(--brand-navy); font-size:12.5px; font-weight:700;
}
.work-proof-photos { display:grid; grid-template-columns:1.08fr .92fr; gap:12px; }
.work-proof-photos img { width:100%; height:330px; object-fit:cover; border:1px solid var(--border); }
.work-proof-photos img:last-child { object-position:center; }

.split { background:var(--surface-alt); }
.split-card { border-radius:3px; }
.split-card .body { border-top:4px solid var(--brand-cream); }
.split-card h3 { font-size:28px; }

.maintenance-path { background:var(--brand-navy); color:#fff; }
.maintenance-path-grid {
  max-width:1080px; margin:0 auto; display:grid;
  grid-template-columns:1fr 1fr; align-items:center; gap:58px;
}
.maintenance-path-grid > img { width:100%; aspect-ratio:16/10; object-fit:cover; border:1px solid rgba(255,255,255,.2); }
.maintenance-path .eyebrow { color:var(--brand-cream); }
.maintenance-path h2 {
  font-family:'Barlow Condensed',sans-serif; font-size:clamp(36px,4vw,48px);
  font-weight:600; line-height:1.05; margin-bottom:16px;
}
.maintenance-path p { color:rgba(255,255,255,.76); font-size:14.5px; line-height:1.75; }
.maintenance-path-links { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:24px; }
.maintenance-path-links a { color:var(--brand-cream); font-size:13.5px; font-weight:700; text-decoration:none; }
.maintenance-path-links a:hover { text-decoration:underline; }
.why-grid-three { grid-template-columns:repeat(3,1fr); max-width:880px; }

/* Inner pages get the same warmth in supporting moments, not over every
   surface. This keeps service pages crisp while giving the brand a pulse. */
.service-intro { background:var(--cream-soft); border-bottom:1px solid var(--cream-edge); }
.service-emphasis { background:var(--cream-soft); border-top:1px solid var(--cream-edge); border-bottom:1px solid var(--cream-edge); }
.service-faq { background:#fff; }
.service-faq-item { border-radius:3px; }
.service-faq-item[open] { border-color:var(--cream-edge); box-shadow:inset 4px 0 0 var(--brand-cream); }
.service-standard-card, .service-detail-card, .commercial-work-card,
.check-card, .scope-card, .plan-card, .program-preview-card { border-radius:3px; }
.service-finish-feature { background:#fff; }
.service-progress-feature { background:var(--surface-alt); }
.remodeling-page-head .page-head-background { object-position:center 48%; }
.commercial-program { background:var(--cream-soft); border-top:1px solid var(--cream-edge); border-bottom:1px solid var(--cream-edge); }
.commercial-program-grid {
  max-width:1000px; margin:0 auto; display:grid;
  grid-template-columns:1.15fr .85fr; align-items:center; gap:50px;
}
.commercial-program h2 {
  font-family:'Barlow Condensed',sans-serif; font-size:clamp(33px,3.7vw,43px);
  font-weight:600; line-height:1.08; margin-bottom:13px;
}
.commercial-program p { color:var(--muted); font-size:14.5px; line-height:1.72; }
.commercial-program-actions { display:flex; flex-direction:column; align-items:flex-start; gap:17px; }
.commercial-program-actions .btn { min-width:220px; text-align:center; }
.contact-intro { margin-bottom:28px; }
.contact-intro .eyebrow { color:var(--brand-cream); }
.contact-intro h2 {
  max-width:430px; font-family:'Barlow Condensed',sans-serif;
  font-size:34px; line-height:1.08; margin-bottom:12px;
}
.contact-intro p { max-width:430px; color:rgba(255,255,255,.72); font-size:13.5px; line-height:1.68; }
.quote-form { border:1px solid var(--cream-edge); border-top:5px solid var(--brand-cream); border-radius:3px; }
.town-list span { border-radius:3px; }

@media (max-width:900px) {
  .company-standard-grid, .work-proof-grid, .maintenance-path-grid,
  .commercial-program-grid { grid-template-columns:1fr; gap:30px; }
  .proof-strip { grid-template-columns:repeat(2,1fr); }
  .proof-strip > div:nth-child(2) { border-right:0; }
  .proof-strip > div:nth-child(-n+2) { border-bottom:1px solid var(--cream-edge); }
  .work-proof-photos img { height:290px; }
  .commercial-program-actions { flex-direction:row; align-items:center; flex-wrap:wrap; }
}
@media (max-width:860px) {
  .why-grid-three { grid-template-columns:1fr; }
  .home-service-grid { grid-template-columns:1fr; }
  .company-standard { padding-bottom:48px; }
  .company-standard-note { padding:27px 25px; }
  .work-proof-photos img { height:250px; }
}
@media (max-width:560px) {
  .proof-strip { grid-template-columns:1fr; }
  .proof-strip > div { border-right:0; border-bottom:1px solid var(--cream-edge); }
  .proof-strip > div:last-child { border-bottom:0; }
  .home-service-grid > a { padding:24px 20px 22px; }
  .work-proof-photos { grid-template-columns:1fr; }
  .work-proof-photos img { height:auto; aspect-ratio:16/10; }
  .maintenance-path-links { flex-direction:column; gap:12px; }
  .commercial-program-actions { flex-direction:column; align-items:stretch; }
  .commercial-program-actions .btn { min-width:0; width:100%; }
}

/* --- Mobile finish --------------------------------------------------------
   Keep the desktop composition intact while giving phone-width trust facts,
   paired calls to action and the footer directory a deliberate structure.
--------------------------------------------------------------------------- */
@media (max-width:560px) {
  .badges {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px; padding:16px 14px 18px; font-size:11.5px;
  }
  .badges span {
    display:flex; min-height:36px; align-items:center; justify-content:center;
    padding:8px 7px; border:1px solid rgba(255,255,255,.16);
    border-radius:3px; background:rgba(23,38,52,.34);
    line-height:1.3; text-align:center;
  }
  .badges span:last-child { border-right:1px solid rgba(255,255,255,.16); }

  .maintenance-trust {
    display:grid; justify-items:center; gap:6px; margin-top:24px;
    line-height:1.35; text-align:center;
  }
  .maintenance-trust span + span::before { display:none; }

  .hero-ctas,
  .page-head-actions,
  .feature-actions,
  .contact-actions,
  .contact > div[style*="text-align:center"] {
    display:flex; width:100%; max-width:360px; flex-direction:column;
    align-items:stretch; gap:12px; margin-right:auto; margin-left:auto;
  }
  .hero-ctas { margin-bottom:28px; }
  .hero-ctas .btn,
  .page-head-actions .btn,
  .feature-actions .btn,
  .contact-actions .btn,
  .contact > div[style*="text-align:center"] .btn {
    display:flex; width:100%; min-height:50px; align-items:center;
    justify-content:center; margin-left:0 !important; text-align:center;
  }

  footer { padding:36px 20px 30px; }
  footer .flinks {
    display:grid; max-width:360px; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 14px; margin:18px auto 10px; text-align:left;
  }
  footer .flinks a {
    display:flex; min-height:44px; align-items:center; padding:9px 8px;
    line-height:1.35;
  }
}

@media (max-width:360px) {
  header { padding:12px 14px; }
  header > a:first-child img { width:145px; }
  header .btn-outline { margin-right:6px; padding:10px 12px; font-size:12px; }
  header.nav-open nav { margin-right:-14px; margin-left:-14px; }
}