/* ============================================================================
   NORTHLINE PROPERTY CARE, SITE STYLESHEET
   Brand: navy #1F3864 · green #2E7D32 · ice #4FA3E3 · gold #957000 on screen
   (#BF8F00 in print, WCAG governs pixels, not ink; they are not interchangeable)
   Mobile-first. No frameworks, no build step. Edit the variables below to
   restyle the whole site.
   ========================================================================= */

:root{
  --navy:#1F3864;
  --navy-d:#16294A;
  --green:#2E7D32;
  --green-l:#6FBF73;
  --green-p:#F3F8F3;
  --ice:#4FA3E3;
  --ice-p:#F1F8FE;
  --navy-p:#F4F6FA;
  --gold:#957000;          /* WEB gold. Print gold is #BF8F00 (brand.py), see 04/07 accessibility row 3 */
  --gold-p:#FFF9EC;
  --char:#222222;
  --body:#4A4A4A;
  --mut:#6B7280;
  --line:#E4E8ED;
  --bg:#FFFFFF;
  --bg-alt:#F7F9FC;
  --radius:10px;
  --shadow:0 2px 10px rgba(31,56,100,.07);
  --shadow-lg:0 8px 30px rgba(31,56,100,.12);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Bypass Blocks (WCAG 2.0 A §2.4.1). Thirteen header controls repeat on all 28 pages, so a
   keyboard or screen-reader visitor needs one key to get past them. The link is the first
   thing in the DOM, off-screen until it takes focus (round 19, web W3). */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200}
.skip-link:focus{
  left:0;top:0;width:auto;padding:12px 20px;background:var(--navy);color:#fff;
  font-weight:700;border-radius:0 0 8px 0;outline:3px solid #fff;outline-offset:-6px}
main:focus{outline:none}
body{
  margin:0;font-family:var(--font);color:var(--body);
  font-size:17px;line-height:1.65;background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
/* A link on a dark surface must not inherit the green above: green on navy is 2.27:1 and
   green on the green CTA band is 1.00:1, both far under WCAG 2.0 AA's 4.5:1. The nav and
   the footer set their own colours further down and win on source order, so this only
   catches a plain link dropped into a dark band (round 19, web contrast). */
.site-header a,.hero a,.page-hero a,.cta-band a,.sec--navy a{color:#FFFFFF}
.sec--navy .card a{color:var(--navy)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px;margin-left:auto;margin-right:auto}

/* ---------- typography ---------- */
h1,h2,h3,h4{color:var(--navy);line-height:1.22;margin:0 0 .5em;font-weight:700}
h1{font-size:2.6rem;letter-spacing:-.5px}
h2{font-size:1.95rem;margin-top:0;letter-spacing:-.3px}
h3{font-size:1.28rem}
h4{font-size:1.05rem}
p{margin:0 0 1.1em}
.lead{font-size:1.2rem;line-height:1.6;color:var(--char)}
.eyebrow{
  text-transform:uppercase;letter-spacing:2px;font-size:.78rem;
  font-weight:700;color:var(--green);margin:0 0 .7em;
}
.eyebrow--light{color:var(--green-l)}

/* ---------- brand tagline ---------- */
.tagline{
  font-style:italic;font-weight:600;letter-spacing:.3px;line-height:1.4;
  color:var(--green);margin:0;
}
.tagline--hero{
  display:inline-flex;align-items:center;gap:14px;color:#8FD094;font-size:1.06rem;
  margin:30px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);width:100%;
}
.tagline--hero::before{
  content:"";flex:0 0 auto;width:26px;height:2px;background:var(--green-l);border-radius:2px;
}
.tagline--cta{color:#E3F3E4;font-size:1.05rem;margin:26px 0 0}
.tagline--page{color:var(--green-l);font-size:1rem;margin:18px 0 0}
strong{color:var(--char)}
/* A dark surface has to win the strong colour back, or var(--char) #222 lands on navy at
   1.37:1, the HST disclosure in the add-ons hero (round 18, web W1). The navy CARD rule
   further down is more specific and still keeps charcoal inside a white card. */
.hero strong,.page-hero strong,.cta-band strong,.sec--navy strong,.site-footer strong{color:#fff}

/* ---------- header ---------- */
.site-header{background:var(--navy);position:sticky;top:0;z-index:100}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo-mark{flex:0 0 auto}
.logo-text{line-height:1.1}
.logo-text .name{display:block;color:#fff;font-weight:700;font-size:1.2rem;letter-spacing:.5px;white-space:nowrap}
.logo-text .sub{display:block;color:#9FB0CC;font-weight:700;font-size:.54rem;letter-spacing:2.4px;white-space:nowrap}
.logo-text .svc{display:inline-block;margin-top:3px;background:var(--green);color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.6px;white-space:nowrap;padding:2px 9px;border-radius:3px}
.nav{display:flex;align-items:center;gap:19px}
.nav a{color:#D8E1EE;font-size:.92rem;font-weight:500;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;text-decoration:none}
.nav a[aria-current="page"]{border-bottom:2px solid var(--green-l);padding-bottom:2px}
.header-cta{display:flex;align-items:center;gap:14px}
.header-phone{color:#fff;font-weight:700;font-size:1rem;white-space:nowrap}
.header-phone:hover{text-decoration:none;color:var(--green-l)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:15px 30px;border-radius:8px;font-weight:700;
  font-size:1rem;text-align:center;border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:#276b2a;color:#fff}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:#7A5C00;color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(0,0,0,.16);color:#fff}
.btn--outline{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--outline:hover{border-color:var(--navy);color:var(--navy)}
.btn--sm{padding:11px 20px;font-size:.92rem}
.header-cta .btn{white-space:nowrap}
.nav-cta{display:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* ---------- sections ---------- */
section{padding:76px 0}
.sec--alt{background:var(--bg-alt)}
.sec--navy{background:var(--navy);color:#D8E1EE}
.sec--navy h2,.sec--navy h3{color:#fff}
.sec--tight{padding:52px 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto 46px}
.sec-head p{font-size:1.1rem;color:var(--mut)}
.sec-head--left{text-align:left;margin-left:0}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-d) 100%);
  color:#D8E1EE;padding:84px 0 76px;position:relative;overflow:hidden;
}
.hero h1{color:#fff;max-width:16ch}
.hero .lead{color:#C3D0E2;max-width:52ch;font-size:1.24rem}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.hero-badges li{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:7px 15px;font-size:.86rem;color:#E4EBF4;font-weight:600;
}
.hero-card{
  background:#fff;border-radius:14px;padding:30px;box-shadow:var(--shadow-lg);color:var(--body);
}
.hero-card h2{font-size:1.3rem;margin-bottom:6px}
.hero-card .price{font-size:3rem;font-weight:700;color:var(--green);line-height:1;margin:14px 0 2px}
.hero-card .price small{font-size:1rem;color:var(--mut);font-weight:600}
.hero-card ul{list-style:none;margin:18px 0 0;padding:0}
.hero-card li{padding:7px 0 7px 28px;position:relative;font-size:.96rem}
.hero-card li::before{
  content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- trust strip ---------- */
.trust{background:var(--green-p);border-top:1px solid #DCE9DC;border-bottom:1px solid #DCE9DC;padding:22px 0}
.trust ul{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;
  list-style:none;margin:0;padding:0}
.trust li{font-weight:700;color:var(--navy);font-size:.95rem;display:flex;align-items:center;gap:9px}
.trust .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:26px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow);
}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.card--flush{padding:0;overflow:hidden}
.card--flush .card-body{padding:26px 28px 30px}
.card-top{height:5px}
.card-top--green{background:var(--green)}
.card-top--ice{background:var(--ice)}
.card-top--gold{background:var(--gold)}
.card-top--navy{background:var(--navy)}

.step{position:relative;padding-left:60px}
.step .num{
  position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;
  background:var(--green);color:#fff;font-weight:700;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
}
.step--ice .num{background:#1C6FB0}   /* --ice is a fill colour; white text on it is 2.73:1 */
.step--gold .num{background:var(--gold)}
.step--navy .num{background:var(--navy)}
.step h3{margin-bottom:.35em}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.plan{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.plan--featured{border:2px solid var(--gold);box-shadow:var(--shadow-lg);position:relative}
.plan-flag{background:var(--gold);color:#fff;text-align:center;font-size:.78rem;
  font-weight:700;letter-spacing:1.6px;padding:7px}
.plan-head{padding:28px 28px 22px;text-align:center;border-bottom:1px solid var(--line)}
.plan-head .tier{font-size:1.45rem;font-weight:700;color:var(--navy);margin:0}
.plan-head .tag{color:var(--mut);font-size:.92rem;margin:2px 0 0}
.plan-head .price{font-size:2.9rem;font-weight:700;line-height:1;margin:18px 0 0;color:var(--navy)}
.plan-head .per{color:var(--mut);font-size:.94rem}
.plan-head .yr{font-size:.86rem;color:var(--mut);margin-top:8px}
.plan--silver .price{color:var(--green)}
.plan--gold .price{color:var(--gold)}
.plan--platinum .price{color:var(--navy)}
.plan-body{padding:24px 28px;flex:1}
.plan-body ul{list-style:none;margin:0;padding:0}
.plan-body li{padding:8px 0 8px 28px;position:relative;font-size:.95rem;border-bottom:1px solid #F1F4F8}
.plan-body li:last-child{border-bottom:0}
.plan-body li::before{
  content:"";position:absolute;left:0;top:14px;width:16px;height:16px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plan-body li.no{color:var(--mut)}
/* #7F8FA2, not #D6DBE1. The cross is stroked in white, and white on #D6DBE1 is
   1.39:1 against the 3:1 that WCAG 2.1 SC 1.4.11 requires of a graphical object a
   reader has to resolve. Round 20 fixed this once; the stylesheet adopted from the
   live site on 8 September never carried the fix. Same hue, same saturation,
   darkened until white clears 3:1 with margin: 3.31:1. */
.plan-body li.no::before{background:#7F8FA2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}
.plan-foot{padding:0 28px 28px}
.plan-foot .btn{width:100%}

/* ---------- callouts ---------- */
.note{border-radius:var(--radius);padding:24px 28px;margin:30px 0;border:2px solid}
.note h2{margin-top:0;margin-bottom:.5em;font-size:1.12rem;letter-spacing:0;line-height:1.3}
.note p:last-child{margin-bottom:0}
.note--green{background:var(--green-p);border-color:var(--green)}
.note--gold{background:var(--gold-p);border-color:var(--gold)}
.note--ice{background:var(--ice-p);border-color:var(--ice)}
.note--navy{background:var(--navy-p);border-color:var(--navy)}
/* filled navy highlight band, for a single headline figure */
.note--band{background:var(--navy);border-color:var(--navy);color:#E8EEF7;text-align:center}
.note--band strong{display:block;color:#fff;font-size:1.3rem;line-height:1.25;margin-bottom:8px}
.note.narrow{margin-left:auto;margin-right:auto}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;margin:26px 0;font-size:.96rem;background:#fff}
.tbl th{background:var(--navy);color:#fff;text-align:left;padding:13px 16px;font-size:.82rem;
  text-transform:uppercase;letter-spacing:1px}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:nth-child(even) td{background:var(--bg-alt)}
.tbl .price-cell{font-weight:700;color:var(--green);white-space:nowrap}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);padding:0}
.faq-item summary{
  cursor:pointer;padding:22px 40px 22px 0;font-weight:700;color:var(--navy);
  font-size:1.08rem;position:relative;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:8px;top:19px;font-size:1.6rem;
  color:var(--green);font-weight:400;line-height:1;
}
.faq-item[open] summary::after{content:"\00d7"}
.faq-item .faq-body{padding:0 0 22px}
.faq-item .faq-body p:last-child{margin-bottom:0}

/* ---------- photo slots ---------- */
.photo{
  background:var(--bg-alt);border:2px dashed #C3CCD8;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:34px 24px;color:var(--mut);font-size:.88rem;min-height:220px;
}
.photo strong{display:block;color:var(--navy);margin-bottom:6px;font-size:.95rem}
.photo em{display:block;margin-top:8px;font-size:.8rem;color:var(--mut)}
figure{margin:0}
figure img{border:1px solid var(--line);border-radius:var(--radius)}

/* ---- Content graphics -------------------------------------------------
   The customer graphics are 1590px wide. They were sitting in
   figure.narrow (820px), so every word inside them rendered at 52% of
   native size. These rules show them at the full page width, and let them
   break out wider than the text column on large screens, so the type in
   them lands near its native size. Each one is also a link to the full
   resolution file, which is the only thing that helps on a phone, where a
   bitmap cannot reflow no matter how sharp it is. ---------------------- */
figure, figure.narrow{max-width:none;width:auto}
figure figcaption{max-width:70ch;margin-left:auto;margin-right:auto}
.fig-zoom{display:block;cursor:zoom-in}
.fig-zoom:focus-visible{outline:3px solid var(--green);outline-offset:3px}
@media (min-width:1240px){
  /* left:50% offsets without changing the layout width; margin-left:50% did
     change it, so on the wider .wrap column the figure pushed the document
     207px sideways on desktop. */
  /* Only figure.narrow breaks out. index.html has one bare <figure> nested
     inside a card, where a viewport-width breakout pushed the document 207px
     sideways on desktop; nested figures stay in flow. */
  figure.narrow{
    position:relative;
    width:min(1400px, calc(100vw - 64px));
    left:50%;
    margin-left:0;
    margin-right:0;
    transform:translateX(-50%);
  }
}

figcaption{font-size:.86rem;color:var(--mut);text-align:center;margin-top:10px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--green);color:#fff;text-align:center;padding:64px 0}
.cta-band h2{color:#fff;margin-bottom:.3em}
.cta-band p{color:#E8F5E9;font-size:1.12rem;max-width:60ch;margin:0 auto 8px}
.cta-band .btn-row{justify-content:center}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
label{font-weight:700;color:var(--navy);font-size:.92rem}
input,select,textarea{
  font-family:var(--font);font-size:1rem;padding:13px 14px;border:1px solid #CBD2DB;
  border-radius:8px;background:#fff;color:var(--char);width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);border-color:var(--green)}
/* Focus Visible (WCAG 2.0 AA §2.4.7) for every other focusable thing. Two rings so the
   indicator survives on navy, on green and on white alike (round 18, web W4).
   The DEFAULT is the light-surface indicator, navy ring inside a white halo, because
   most of the site is white, and the dark surfaces name themselves and invert it. Round 18
   wrote it the other way round and listed `main a` among the light surfaces; no page
   rendered a <main>, so that arm matched nothing on all 28 pages (round 19, web W3). */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible{
  outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 6px #FFFFFF;border-radius:4px}
.site-header a:focus-visible,.site-header button:focus-visible,.hero a:focus-visible,
.page-hero a:focus-visible,.cta-band a:focus-visible,.sec--navy a:focus-visible,
.site-footer a:focus-visible{outline-color:#FFFFFF;box-shadow:0 0 0 6px var(--navy);color:#FFFFFF}
/* a white card inside a navy band is a light surface again */
.sec--navy .card a:focus-visible{outline-color:var(--navy);box-shadow:0 0 0 6px #FFFFFF;color:var(--navy)}
textarea{min-height:120px;resize:vertical}
.form-note{font-size:.85rem;color:var(--mut)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-d);color:#A9B8CC;padding:56px 0 0;font-size:.94rem}
/* h3 and not h2: the footer is specified in 00_SITE_SETUP.md, not in a page brief, and
   harness check 43 requires every <h2> a page renders to appear in that page's brief. Every
   page carries an <h2> before the footer, so h2 -> h3 skips no level (round 18, web W3). */
.site-footer h3{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:1.6px;
  margin:0 0 16px;line-height:1.22;font-weight:700}
.site-footer a{color:#A9B8CC}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:9px}
.footer-tag{color:var(--green-l);font-style:italic;margin-top:14px}
.footer-bar{
  border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding:20px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;
}

/* ---------- breadcrumb ---------- */
.crumb{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:12px 0;font-size:.86rem;color:var(--mut)}
.crumb a{color:var(--mut)}
.crumb span{margin:0 8px;color:var(--mut)}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-d) 100%);
  color:#C3D0E2;padding:62px 0 58px}
.page-hero h1{color:#fff;margin-bottom:.35em}
.page-hero .lead{color:#C3D0E2;max-width:62ch}

/* ---------- utility ---------- */
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.stack>*+*{margin-top:22px}
.small{font-size:.9rem}
.muted{color:var(--mut)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  h1{font-size:2.15rem}h2{font-size:1.7rem}
}
@media (max-width:1180px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  /* The dropdown is taller than a phone viewport (11 items need ~730px, a
     phone gives ~530px below the header). Without its own scroll, everything
     past "Tips" was unreachable: FAQ, About and Get a Quote. */
  .nav.open{
    display:flex;
    max-height:calc(100vh - 68px);
    max-height:calc(100dvh - 68px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:26px;
  }
  .nav a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:1rem}
  .nav-toggle{display:block;order:3}
  .site-header .wrap{position:relative}
}
@media (max-width:760px){
  /* header: logo + tap-to-call + hamburger only. The quote CTA moves into the menu. */
  .header-cta .btn{display:none}
  .header-phone{font-size:.95rem}
  .logo-mark{width:58px;height:20px}
  .logo-text .name{font-size:1.02rem}
  .logo-text .sub{font-size:.5rem;letter-spacing:1.8px}
  .logo-text .svc{font-size:.62rem;padding:1px 7px}
  .site-header .wrap{gap:10px;padding-top:11px;padding-bottom:11px}
  .nav-cta{
    display:block;background:var(--green);color:#fff !important;text-align:center;
    border-radius:8px;font-weight:700;margin-top:12px;padding:14px 0 !important;border-bottom:0 !important;
  }
  section{padding:52px 0}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  h1{font-size:1.85rem}h2{font-size:1.45rem}
  body{font-size:16px}
  .hero{padding:56px 0 50px}
}
@media print{
  .site-header,.nav,.cta-band,.btn{display:none}
  body{font-size:11pt}
}

/* ---------- article meta strip (Property Care Tips) ---------- */
.artmeta-wrap{padding:22px 0 0}
.artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  font-size:.82rem;letter-spacing:.4px;text-transform:uppercase;color:var(--mut);
  border-bottom:1px solid var(--line);padding-bottom:16px}
.artmeta span{position:relative}
.artmeta span+span::before{content:"";position:absolute;left:-10px;top:50%;
  width:3px;height:3px;border-radius:50%;background:#C3CBD4;transform:translateY(-50%)}
.artmeta-cat{background:var(--green);color:#fff;border-radius:4px;
  padding:4px 10px;font-weight:700;letter-spacing:.6px}
.artmeta-cat+span::before{display:none}
.artmeta-by{margin-left:auto;text-transform:none;letter-spacing:0;font-style:italic}
.artmeta-by::before{display:none!important}
@media(max-width:700px){.artmeta-by{margin-left:0}}

/* ---------- nav breathing room at 10 items (Commercial + Tips added) ---------- */
@media (max-width:1500px){
  .nav{gap:15px}
  .nav a{font-size:.88rem}
  .header-phone{display:none}          /* button stays; phone is in the footer + contact page */
}
@media (max-width:1260px){
  .nav{gap:11px}
  .nav a{font-size:.85rem}
}
@media (max-width:1180px){
  .nav a{font-size:1rem}               /* restore inside the mobile dropdown */
  .header-phone{display:inline-block}
}
/* tighten the run-in between the article meta strip and the first section */
.artmeta-wrap + section{padding-top:34px}

/* ---------- a white card sitting inside a navy band keeps normal text colours ---------- */
.sec--navy .card{color:var(--body)}
.sec--navy .card h3,.sec--navy .card h4{color:var(--navy)}
.sec--navy .card p,.sec--navy .card li,.sec--navy .card strong{color:var(--body)}
.sec--navy .card strong{color:var(--char)}
/* the `.hero strong … {color:#fff}` rule is declared ONCE, above §header. A second
   identical copy stood here for a round: same specificity, later in the file, so an edit
   to the first would have been silently overruled by the copy (round 19, web W6). */

/* ---------- tables become stacked cards on phones ----------
   A five-column pricing table cannot be read on a 390px screen, and a
   horizontal-scroll table hides the columns that matter most. Below 700px each
   row becomes its own card: first cell is the card heading, every other cell is
   a labelled line. No swiping, nothing hidden. */
@media (max-width:700px){
  .tbl-scroll{overflow-x:visible}
  .tbl{display:block;background:transparent;margin:22px 0;font-size:.95rem}
  .tbl thead{display:none}
  .tbl tbody{display:block}
  .tbl tr{display:block;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius);margin:0 0 14px;overflow:hidden;box-shadow:var(--shadow)}
  .tbl tr:nth-child(even) td:not(:first-child){background:transparent}
  .tbl td{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
    padding:10px 15px;border-bottom:1px solid var(--line);text-align:right}
  .tbl td:last-child{border-bottom:0}
  .tbl td::before{content:attr(data-label);flex:0 0 44%;text-align:left;
    font-weight:700;font-size:.72rem;letter-spacing:.5px;text-transform:uppercase;
    color:var(--mut);line-height:1.35}
  .tbl td:empty{display:none}
  /* first cell = the card's heading */
  .tbl tbody tr td:first-child{display:block;text-align:left;background:var(--navy);color:#fff;
    font-weight:700;font-size:.95rem;padding:12px 15px;border-bottom:0}
  .tbl tbody tr td:first-child::before{content:none}
  .tbl tbody tr td:first-child strong{color:#fff}
  .tbl .price-cell{white-space:normal}
}


/* ---------- Conversion hero, and the sticky mobile call to action -------
   The door hanger QR lands on /memberships, on a phone, in someone's hand
   at their own front door. That is the warmest traffic this business gets,
   and the page previously opened with a six-line paragraph and no tap
   target above the fold. These rules put the recommended plan, its price
   and two buttons on the first screen, and keep a call to action pinned to
   the bottom of the viewport for the whole scroll. ---------------------- */
.btn--block{display:block;width:100%}
.btn--call{background:#fff;color:var(--navy);border-color:#fff}
.btn--call:hover{background:#EAF0F8;color:var(--navy)}

.offer{
  background:#fff;border-radius:14px;overflow:hidden;margin-top:26px;
  box-shadow:var(--shadow-lg);max-width:460px;
}
.offer-flag{
  background:var(--gold);color:#fff;text-align:center;margin:0;
  font-size:.76rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:8px;
}
.offer-body{padding:22px 22px 20px}
.offer-tier{margin:0;color:var(--navy);font-size:1.5rem;font-weight:700;line-height:1.1}
.offer-tier span{display:block;color:var(--mut);font-size:.9rem;font-weight:400;margin-top:2px}
.offer-price{margin:12px 0 0;color:var(--gold);font-size:2.7rem;font-weight:700;line-height:1}
.offer-price span{color:var(--mut);font-size:.95rem;font-weight:400}
.offer-sub{margin:4px 0 0;color:var(--mut);font-size:.9rem}
.offer-list{list-style:none;margin:16px 0 18px;padding:0}
.offer-list li{
  position:relative;padding:6px 0 6px 26px;font-size:.95rem;color:var(--body);
}
.offer-list li::before{
  content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.offer-body .btn+.btn{margin-top:10px}
.offer-fine{margin:12px 0 0;font-size:.82rem;color:var(--mut);text-align:center}
.offer-alt{margin-top:20px;font-size:.95rem}
.offer-alt a{color:#fff;text-decoration:underline}
.lead--tight{max-width:46ch}

/* Gold first on a single-column layout: the recommended plan should not be
   the second thing a phone user reaches. */
@media (max-width:980px){
  .plans{display:flex;flex-direction:column}
  .plans .plan--gold{order:1}
  .plans .plan--silver{order:2}
  .plans .plan--platinum{order:3}
}

/* Sticky call to action, phones only. */
.mobile-cta{display:none}
@media (max-width:760px){
  .page-hero--offer{padding:22px 0 30px}
  .page-hero--offer h1{font-size:1.5rem;margin-bottom:.28em;line-height:1.2}
  .page-hero--offer .lead{font-size:1rem;margin-bottom:0}
  .page-hero--offer .tagline{display:none}
  .offer{margin-top:16px;max-width:none}
  .offer-price{font-size:2.3rem;margin-top:8px}
  .offer-body{padding:18px 18px 16px}
  .offer-tier{font-size:1.35rem}
  .offer-list{margin:16px 0 0}
  .offer-fine{margin-top:14px}
  .crumb{padding-top:9px;padding-bottom:9px;font-size:.86rem}

  .mobile-cta{
    display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:200;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(31,56,100,.97);border-top:1px solid rgba(255,255,255,.16);
  }
  .mobile-cta .btn{padding:13px 18px;font-size:.98rem;margin:0}
  .mobile-cta .btn--call{padding-left:22px;padding-right:22px}
  body{padding-bottom:78px}
  .site-footer{margin-bottom:0}
}
@media print{.mobile-cta{display:none}}

/* The white call button only works on the navy sticky bar. Inside the white
   offer card it needs a border or it vanishes. */
.offer .btn--call{background:#fff;color:var(--navy);border-color:#CBD2DB}
.offer .btn--call:hover{background:#F2F5FA;border-color:var(--navy);color:var(--navy)}

/* Desktop: the offer card sits beside the copy instead of leaving half the
   hero empty. Mobile keeps normal block flow, so the order is copy, offer,
   then the link to the other two plans. */
@media (min-width:981px){
  .page-hero--offer .wrap{
    display:grid;grid-template-columns:minmax(0,1fr) 420px;
    column-gap:56px;row-gap:20px;align-items:start;
  }
  .page-hero--offer .hero-copy{grid-column:1;grid-row:1;align-self:center}
  .page-hero--offer .offer{grid-column:2;grid-row:1;margin-top:0}
  .page-hero--offer .hero-after{grid-column:1;grid-row:2}
}
.hero-after .offer-alt{margin-top:0}


/* ---------- Home hero, rebuilt for conversion ---------------------------
   Brand Strategy (02/04) §8: level one message on every surface, level two
   supporting messages with a proof under each. The chips carry Insured,
   Oshawa owned and the real number, which are three rungs of the
   reason-to-believe ladder in §4, above the fold, before any scrolling. */
.hero-proof{
  display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:20px 0 0;padding:0;
}
.hero-proof li{
  position:relative;padding:0 0 0 22px;font-size:.94rem;font-weight:600;color:#DCE5F1;
}
.hero-proof li::before{
  content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--green-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' stroke='%231F3864' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.hero-actions{margin-top:22px}
.hero-link{margin:16px 0 0;font-size:.95rem}
.hero-link a{color:#BFD4EE;text-decoration:underline}
.hero-link a:hover{color:#fff}
.hero .btn--call{background:#fff;color:var(--navy);border-color:#fff}
.hero .btn--call:hover{background:#E8EEF7;color:var(--navy)}

@media (min-width:981px){
  .hero-grid{align-items:center}
  .hero-left{min-width:0}
}
@media (max-width:980px){
  .hero-grid{display:flex;flex-direction:column;gap:30px}
}
@media (max-width:760px){
  .hero{padding:30px 0 40px}
  .hero h1{font-size:1.72rem;line-height:1.18;margin-bottom:.35em}
  .hero .lead{font-size:1rem;line-height:1.5}
  .hero-proof{gap:6px 14px;margin-top:16px}
  .hero-proof li{font-size:.9rem}
  .hero-actions{margin-top:18px;gap:10px}
  .hero-actions .btn{width:100%}
  .tagline--hero{margin-top:22px;padding-top:18px}
}

/* ---------------------------------------------------------------------------
   Inner page heroes, reworked for above-the-fold conversion on a phone.
   Every inner hero now carries the same shape as the home hero: eyebrow, an
   outcome H1, a lead under 25 words, three proof chips, then a primary CTA and
   a tap-to-call button. The 62px top padding was pushing the buttons off a
   390x560 viewport, so the whole block tightens under 760px. The offer hero on
   /memberships keeps its own tighter numbers, hence the :not().
   -------------------------------------------------------------------------- */
.page-hero .btn--call{background:#fff;color:var(--navy);border-color:#fff}
.page-hero .btn--call:hover{background:#E8EEF7;color:var(--navy)}

@media (max-width:760px){
  .crumb{padding:8px 0;font-size:.8rem}
  .page-hero:not(.page-hero--offer){padding:26px 0 34px}
  .page-hero:not(.page-hero--offer) h1{font-size:1.6rem;line-height:1.2;margin-bottom:.35em}
  .page-hero:not(.page-hero--offer) .lead{font-size:1rem;line-height:1.5}
  .page-hero .tagline--page{margin-top:20px;padding-top:16px}
}

/* ---------------------------------------------------------------------------
   Narrow phones (360px and under). The header is a single nowrap flex row:
   logo mark + wordmark + service badge + phone number + hamburger. At 360px
   that row measured 325px inside a 312px content box, so every page scrolled
   13px sideways. Trimming the wrap padding and the header type removes the
   overflow instead of hiding it with overflow-x:hidden, which would have
   broken the sticky header.
   -------------------------------------------------------------------------- */
@media (max-width:420px){
  .wrap{padding:0 16px}
  .site-header .wrap{gap:8px}
  .header-phone{font-size:.9rem}
  .logo{gap:9px}
  .logo-mark{width:50px;height:18px}
  .logo-text .name{font-size:.95rem;letter-spacing:.3px}
  .logo-text .svc{font-size:.58rem;letter-spacing:.3px;padding:1px 6px}
  .nav-toggle{padding:6px 0}
  .nav{padding-left:16px;padding-right:16px}
  .mobile-cta{padding-left:12px;padding-right:12px;gap:8px}
}

/* The offer card on /memberships sits inside .page-hero, so the inner-page
   hero rule above would repaint its call button white on white. Same
   specificity, so this has to come last. */
/* The offer panel is a WHITE card sitting inside a NAVY hero. Every .page-hero text
   rule is coloured for navy (.page-hero .lead is #C3D0E2), and those rules reach inside
   the card, so any lead paragraph in the panel renders pale blue on white at 1.56:1
   against the 4.5:1 AA floor. Repaint the card's own text for its own background. */
.page-hero--offer .offer,
.page-hero--offer .offer p,
.page-hero--offer .offer .lead{color:var(--char)}
.page-hero--offer .offer .offer-sub,
.page-hero--offer .offer .offer-fine{color:var(--mut)}
.page-hero--offer .offer .btn--call{background:#fff;color:var(--navy);border-color:#CBD2DB}
.page-hero--offer .offer .btn--call:hover{background:#F2F5FA;border-color:var(--navy);color:var(--navy)}

/* Very narrow phones (Galaxy Fold outer screen, iPhone SE 1st gen). The
   service badge gained three characters when it became LAWN & SNOW REMOVAL,
   so the header row needs one more step down under 360px. */
@media (max-width:359px){
  .wrap{padding:0 12px}
  .site-header .wrap{gap:6px}
  .header-phone{font-size:.82rem}
  .logo{gap:7px}
  .logo-mark{width:44px;height:16px}
  .logo-text .name{font-size:.88rem;letter-spacing:.2px}
  .logo-text .sub{font-size:.46rem;letter-spacing:1.4px}
  .logo-text .svc{font-size:.53rem;letter-spacing:0;padding:1px 5px}
  .nav-toggle span{width:21px}
}