/* ============================================================
   Los Angeles Top Openers — stylesheet
   Palette: green #53b049 · yellow #f5e931 · ink #111111
            light #F1F1F1 · text #3C3C3C
   Type:    Poppins

   Green is the action colour (buttons, links, accents). Yellow is a
   highlight only and always carries dark text, because yellow on white
   is unreadable and yellow under white text fails contrast badly.
   ============================================================ */

:root{
  --green:#53b049;
  --green-hover:#63c357;
  --green-deep:#3d8636;
  --yellow:#f5e931;
  --yellow-hover:#fff04d;
  --ink:#111111;
  --panel:#161616;
  --light:#F1F1F1;
  --line:#DEDEDE;
  --text:#3C3C3C;
  --muted:#8A8A8A;
  --wrap:1280px;
}

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

/* lets a keyboard user skip the masthead in one press */
.jump{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 6px 0;
  font-size:.85rem;font-weight:600;
}
.jump:focus{left:0;color:#fff;}
html{scroll-behavior:smooth;scroll-padding-top:160px;}

body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:15px;
  line-height:1.75;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3,h4{
  font-family:inherit;
  font-weight:700;
  color:var(--ink);
  line-height:1.2;
  margin:0 0 .55em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(1.9rem,4.2vw,3rem);text-transform:uppercase;line-height:1.15;}
h2{font-size:clamp(1.45rem,2.6vw,1.95rem);text-transform:uppercase;}
h3{font-size:1.12rem;}
h4{font-size:1rem;}
p{margin:0 0 1.1em;}
strong{color:var(--ink);font-weight:600;}

.bound{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px;}

.kicker{
  color:var(--green);
  text-transform:uppercase;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.12em;
  margin:0 0 .7rem;
}

/* --- actions --- */
.act{
  display:inline-block;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:15px 32px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  text-align:center;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.act--go{background:var(--green);color:#fff;}
.act--go:hover{background:var(--green-hover);color:#fff;box-shadow:0 6px 18px rgba(83,176,73,.34);}
.act--flag{background:var(--yellow);color:var(--ink);}
.act--flag:hover{background:var(--yellow-hover);color:var(--ink);box-shadow:0 6px 18px rgba(245,233,49,.45);}
.act--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);}
.act--ghost:hover{background:#fff;color:var(--ink);}
.act--ink{background:var(--ink);color:#fff;}
.act--ink:hover{background:#333;color:#fff;}
.act--small{padding:12px 26px;font-size:.76rem;}

/* --- masthead --- */
.topbar{
  background:linear-gradient(120deg,#FAFAFA 0%,#EDEDED 55%,#F6F6F6 100%);
  position:sticky;top:0;z-index:70;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.topbar .bound{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;padding-top:12px;padding-bottom:10px;}
.mark{flex:none;}
.marklink{display:block;}
.markimg{height:92px;width:auto;}
.strap{
  margin:2px 0 0;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
  text-align:center;
  white-space:nowrap;
}
.endbar .markimg{height:92px;width:auto;max-width:100%;}
.flags{margin-left:auto;display:flex;align-items:stretch;gap:12px;}
.flag-warranty,.flag-offer{
  margin-left:0;
  display:flex;align-items:center;gap:11px;
  padding:9px 18px;
  border:1px solid #C7E4C3;
  border-radius:10px;
  background:rgba(255,255,255,.75);
}
.flag-offer{background:#EEF9EC;border-color:#C9E9C4;}
.flag-warranty svg,.flag-offer svg{flex:none;}
.flag-warranty span,.flag-offer span{
  display:block;line-height:1.25;font-size:.72rem;color:var(--slate);
  text-transform:uppercase;letter-spacing:.06em;
}
.flag-warranty b,.flag-offer b{
  display:block;font-size:.92rem;font-weight:700;color:var(--ink);letter-spacing:.02em;
}
.flag-offer b{color:var(--green);}
.ringme{
  display:flex;align-items:center;gap:9px;
  font-weight:600;color:var(--ink);font-size:1.02rem;white-space:nowrap;margin-right:8px;
}
.ringme svg{flex:none;}
.ringme:hover{color:var(--green);}

.menu{width:100%;}
.menu ul{list-style:none;display:flex;align-items:center;justify-content:flex-end;gap:0;margin:0;padding:0;flex-wrap:nowrap;white-space:nowrap;}
.menu li{display:flex;align-items:center;}
.menu a{
  text-transform:uppercase;font-size:.8rem;font-weight:600;letter-spacing:.04em;
  color:var(--ink);padding:6px 8px;display:block;
}
.menu a:hover{color:var(--green);}
.menu a.here{color:var(--green);}

.menukey{
  display:none;margin-left:auto;background:var(--ink);border:none;color:#fff;
  padding:11px 16px;border-radius:999px;font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;font-family:inherit;
}

/* --- lead panel --- */
.lead{
  position:relative;
  padding:96px 0 88px;
  color:#EDEDED;
  background-color:#2C2E30;
  background-image:
    linear-gradient(100deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.72) 42%,rgba(20,20,20,.55) 100%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 2px,transparent 2px 84px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px 150px),
    linear-gradient(180deg,#4A4D50 0%,#303234 55%,#232527 100%);
}
.lead-cols{display:grid;grid-template-columns:1.1fr 470px;gap:56px;align-items:center;}

.lead.lead--pale{color:var(--text);}
.lead.lead--pale h1{color:var(--ink);}
.lead.lead--pale .standfirst{color:#454545;}
.lead.lead--pale .trail{color:#6E6E6E;}
.lead.lead--pale .trail a{color:#6E6E6E;}
.lead.lead--pale .trail a:hover{color:var(--green);}
.lead.lead--pale .act--ghost{color:var(--ink);box-shadow:inset 0 0 0 2px rgba(17,17,17,.55);}
.lead.lead--pale .act--ghost:hover{background:var(--ink);color:#fff;}
.lead h1{color:#fff;max-width:17ch;margin-bottom:.5em;}
.lead .standfirst{font-size:1rem;color:#D2D2D2;max-width:52ch;margin-bottom:2rem;}
.lead-buttons{display:flex;gap:14px;flex-wrap:wrap;}
.lead.short{padding:66px 0 62px;}
.lead.short .lead-cols{grid-template-columns:1fr;}
.lead.short h1{max-width:24ch;}
.trail{font-size:.78rem;color:#A7A7A7;margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase;}
.trail a:hover{color:var(--green);}

/* --- booking panel --- */
.booking{
  background:#0E0E0E;border-radius:16px;padding:34px 32px;
  box-shadow:0 22px 50px rgba(0,0,0,.4);
}
.booking h3{
  color:#fff;text-align:center;text-transform:uppercase;font-size:1.42rem;
  letter-spacing:.01em;margin-bottom:.35em;
}
.booking .byline{color:#9C9C9C;text-align:center;font-size:.82rem;margin-bottom:22px;}
.row{margin-bottom:14px;}
.row label{display:block;font-size:.82rem;font-weight:500;color:#EDEDED;margin-bottom:6px;}
.row label .must{color:var(--green);margin-left:2px;}
.row input,.row select,.row textarea{
  width:100%;padding:11px 13px;border:1px solid #D8D8D8;border-radius:7px;
  font-family:inherit;font-size:.92rem;background:#EDEDED;color:#111;
}
.row select{
  appearance:none;-webkit-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.row textarea{min-height:88px;resize:vertical;}
.row input:focus,.row select:focus,.row textarea:focus{
  outline:2px solid var(--green);outline-offset:1px;
}
.booking .act{display:block;margin:20px auto 0;min-width:230px;}
.row-note{font-size:.76rem;color:#9C9C9C;margin:14px 0 0;text-align:center;}

/* --- page blocks --- */
.block{padding:82px 0;}
.block.snug{padding:62px 0;}
.block.pale{
  background:var(--light);
  background-image:linear-gradient(118deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 42%);
}
.block.deep{background:var(--ink);color:#B7B7B7;}
.block.deep h2,.block.deep h3,.block.deep h4{color:#fff;}
.block.deep strong{color:#fff;}
.block-top{max-width:820px;margin-bottom:44px;}
.block-top.mid{margin-left:auto;margin-right:auto;text-align:center;}
.block-top p:last-child{margin-bottom:0;}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
/* grid and flex items start at min-width:auto, so one long unbroken string
   (an email address, say) can shove the column off the screen */
.pair > *{min-width:0;}
.booking{max-width:100%;}
.reach,.reach li,.reach span{min-width:0;}
.reach a,.aside-list a,.endlist a,
.copy a[href^="mailto:"],.copy--one a[href^="mailto:"]{overflow-wrap:anywhere;}
.copy h2{margin-top:0;}

/* body links: legible without dominating the paragraph */
.copy a,
.copy--one a{
  color:var(--green-deep);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  font-weight:500;
}
.copy a:hover,
.copy--one a:hover{
  color:var(--green-hover);
  text-decoration-thickness:2px;
}
.copy a:focus-visible,
.copy--one a:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
/* one-column body text: centred, held to a comfortable line length */
.copy--one{max-width:1032px;}   /* 980px of measure plus the gutter on each side */
.copy--one h2{max-width:24ch;}

.copy h3{margin-top:1.9em;font-size:1.08rem;}

/* ticked list */
.ticks{list-style:none;padding:0;margin:0 0 1.4em;}
.ticks li{position:relative;padding:7px 0 7px 32px;}
.ticks li::before{
  content:"";position:absolute;left:0;top:13px;width:18px;height:18px;border-radius:50%;
  background:var(--green);
}
.ticks li::after{
  content:"";position:absolute;left:6px;top:19px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

.aside-list{list-style:none;padding:0;margin:0;}
.aside-list li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.93rem;}
.aside-list li:last-child{border-bottom:none;}

/* --- service tiles --- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.tile{
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.10);
  display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.tile:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.22);}
.tile-img{
  height:170px;margin:14px 14px 0;border-radius:8px;
  background-color:#3A3D40;
  background-image:
    repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 2px,transparent 2px 42px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 92px),
    linear-gradient(180deg,#585C60 0%,#3C4044 60%,#2C2F32 100%);
}
img.tile-img{width:calc(100% - 28px);object-fit:cover;background-image:none;}
.tile-text{padding:22px 24px 26px;}
.tile h3{margin-bottom:.5em;color:var(--ink);}
.block.deep .tile h3{color:var(--ink);}
.block.deep .tile p{color:var(--text);}
.tile p{font-size:.9rem;margin-bottom:.9em;color:var(--text);}
.tile .onward{color:var(--green);font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}

/* --- ticked points --- */
.points{list-style:none;padding:0;margin:0;}
.points li{position:relative;padding:0 0 26px 46px;font-size:.88rem;line-height:1.65;}
.points li::before{
  content:"";position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:var(--green);
}
.points li::after{
  content:"";position:absolute;left:9px;top:10px;width:7px;height:12px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.points b{color:var(--ink);text-transform:uppercase;font-size:.82rem;letter-spacing:.03em;}
.block.deep .points b{color:#fff;}

/* --- numbered stages --- */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.stage{border-top:3px solid var(--green);padding-top:20px;}
.stage b{display:block;color:var(--green);font-size:1.5rem;font-weight:700;line-height:1;margin-bottom:8px;}
.stage h4{margin-bottom:.4em;}
.stage p{font-size:.86rem;margin:0;}

/* --- coverage list --- */
.patch li{
  break-inside:avoid;padding:5px 0 5px 24px;position:relative;
  font-size:.86rem;font-weight:600;color:var(--ink);
}
.patch li::before{
  content:"";position:absolute;left:2px;top:13px;width:5px;height:9px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* --- customer words --- */
.words{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.word{
  background:#fff;border-radius:10px;padding:26px 26px 24px;
  box-shadow:0 4px 18px rgba(0,0,0,.09);
}
.word-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.score{color:#E8B21F;letter-spacing:.18em;font-size:1rem;}
.source-dot{
  width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#4285F4;
}
.word p{font-size:.85rem;color:#4A4A4A;margin-bottom:1em;}
.word cite{font-style:normal;display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.word cite b{display:block;font-size:.88rem;color:var(--ink);font-weight:600;}
.word cite span{display:block;font-size:.78rem;color:var(--muted);}

/* --- questions --- */
.asks{max-width:900px;margin:0 auto;}
.asks details{border-bottom:1px solid rgba(255,255,255,.14);}
.asks summary{
  cursor:pointer;list-style:none;padding:18px 40px 18px 4px;position:relative;
  font-size:.94rem;font-weight:600;color:#fff;
}
.asks summary::-webkit-details-marker{display:none;}
.asks summary::after{
  content:"";position:absolute;right:10px;top:25px;width:8px;height:8px;
  border:solid #C9C9C9;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s ease;
}
.asks details[open] summary::after{transform:rotate(-135deg);top:29px;}
.asks details p{margin:0 0 20px;padding-right:40px;font-size:.88rem;color:#B7B7B7;}
.asks-foot{text-align:center;margin:34px 0 0;font-size:.86rem;color:#B7B7B7;}
.asks-foot a{color:var(--green);font-weight:600;}

/* --- reach us --- */
.reach{list-style:none;padding:0;margin:26px 0 0;}
.reach li{margin-bottom:22px;}
.reach li > a,
.reach li.flat{display:flex;gap:16px;align-items:center;text-decoration:none;color:inherit;}
.reach-icon{
  flex:none;width:42px;height:42px;border-radius:9px;background:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;
}
.reach b{display:block;text-transform:uppercase;font-size:.84rem;color:var(--ink);letter-spacing:.03em;}
.reach span{font-size:.88rem;color:#6E6E6E;}
.reach a:hover{color:var(--green);}

/* --- full-width prompts --- */
.call-strip{background:var(--ink);padding:54px 0;}
.call-strip h2{color:#fff;margin-bottom:.25em;}
.call-strip p{color:#ADADAD;margin:0;font-size:.92rem;}
.call-strip .bound{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.urgent-strip{background:var(--green-deep);padding:50px 0;}
.urgent-strip h2{color:#fff;margin-bottom:.25em;}
.urgent-strip p{color:#DCF0D8;margin:0;font-size:.92rem;}
.urgent-strip .bound{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.urgent-strip .act{background:var(--yellow);color:var(--ink);}
.urgent-strip .act:hover{background:#fff;color:var(--ink);}

/* --- end matter --- */
.endbar{background:var(--ink);color:#A0A0A0;padding:56px 0 0;font-size:.86rem;}
.endbar h4{color:#fff;text-transform:uppercase;font-size:.92rem;letter-spacing:.06em;margin-bottom:1.1em;}
.endbar a{color:#C9C9C9;}
.endbar a:hover{color:var(--green);}
.endbar .go-link{color:var(--green);}
.endgrid{display:grid;grid-template-columns:1.25fr 1fr 1.05fr 1.1fr;gap:40px;padding-bottom:40px;}
.endlist{list-style:none;padding:0;margin:0;}
.endlist li{padding:4px 0;}
.endnote{
  border-top:1px solid #262626;padding:18px 0;font-size:.78rem;color:#8A8A8A;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}

/* --- thumb bar on handsets --- */
.thumbbar{display:none;}

/* --- width steps --- */
@media (max-width:1300px){
  /* mid-width screens: the chips take the space the strap was using */
  .markimg{height:64px;}
  .strap{display:none;}
  .topbar .bound{gap:10px 16px;}
  .flags{gap:8px;}
  .flag-warranty,.flag-offer{padding:6px 10px;gap:6px;}
  .flag-warranty svg,.flag-offer svg{width:18px;height:21px;}
  .flag-warranty b,.flag-offer b{font-size:.76rem;}
  .flag-warranty span,.flag-offer span{font-size:.6rem;letter-spacing:.03em;}
  .lead-cols{grid-template-columns:1fr 400px;gap:40px;}
  .stages{grid-template-columns:1fr 1fr;}
  .endgrid{grid-template-columns:1fr 1fr;}
}
@media (max-width:1024px){
  .topbar .bound{flex-wrap:wrap;gap:14px;}
  .flags{margin-left:auto;}
  .menukey{display:block;}
  .menu{display:none;width:100%;}
  .menu.shown{display:block;}
  .menu ul{flex-direction:column;align-items:stretch;flex-wrap:wrap;white-space:normal;justify-content:flex-start;}
  .menu li{border-bottom:1px solid #E1E1E1;}
  .menu a{padding:12px 4px;}
  .lead-cols{grid-template-columns:1fr;gap:38px;}
  .tiles,.words{grid-template-columns:1fr 1fr;}
  .pair{grid-template-columns:1fr;gap:34px;}
}
@media (max-width:680px){
  /* handset forms: 16px keeps iOS from zooming the page on focus, and every
     control clears the 44px minimum target */
  .booking{padding:24px 18px;}
  .row{margin-bottom:16px;}
  .row label{font-size:.85rem;margin-bottom:7px;}
  .row input,.row select,.row textarea{
    font-size:16px;padding:13px 14px;min-height:50px;border-radius:8px;
  }
  .row select{background-position:right 16px center;}
  .row textarea{min-height:110px;}
  .booking .act{width:100%;min-width:0;padding:17px 20px;font-size:.92rem;margin-top:22px;}
  .booking h3{font-size:1.3rem;}
  .row-note{font-size:.8rem;}
  .markimg{height:58px;}
  .strap{font-size:.56rem;letter-spacing:.08em;}
  /* the number stays in the header on phones as a full-width tap target; the
     sticky bar at the foot of the screen repeats it once you scroll */
  /* on handsets the chips collapse to one line beneath the mark */
  .flags{order:5;width:100%;margin:0;gap:8px;}
  .flag-warranty,.flag-offer{
    flex:1;justify-content:center;text-align:center;
    padding:7px 8px;gap:6px;border-color:#C9E9C4;
  }
  .flag-warranty svg,.flag-offer svg{display:none;}
  .flag-warranty span,.flag-offer span{display:inline;font-size:.55rem;letter-spacing:.03em;}
  .flag-warranty b,.flag-offer b{display:inline;font-size:.6rem;}
  .block{padding:56px 0;}
  .lead{padding:64px 0 60px;}
  .tiles,.words,.stages{grid-template-columns:1fr;}
  .endgrid{grid-template-columns:1fr;gap:30px;}
  .booking{padding:26px 20px;}
  .thumbbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;}
  .thumbbar a{
    flex:1;text-align:center;padding:15px 8px;font-size:.8rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.05em;
  }
  .thumbbar .thumb-a{background:var(--green);color:#fff;}
  .thumbbar .thumb-b{background:var(--yellow);color:var(--ink);}
  body{padding-bottom:52px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .tile:hover{transform:none;}
}

/* tiny screens: the shield goes so the chip holds one line */
@media (max-width:370px){
  .flag-warranty span,.flag-offer span{font-size:.5rem;}
  .flag-warranty b,.flag-offer b{font-size:.55rem;}
}

/* --- lead panel on handsets ---
   A wide banner cropped into a tall screen loses most of the artwork, so small
   screens get the whole image across the top with the copy on a panel below.
   Each padding-top matches that artwork's own ratio. */
@media (max-width:680px){
  .lead{
    padding:0 0 40px;
    background-repeat:no-repeat;
    background-position:top center;
    background-size:100% auto;
    background-color:var(--ink);
  }
  .lead.short{padding:0 0 36px;}
  .lead .bound{padding-top:26px;}
  .lead h1{font-size:1.85rem;}
  .lead .standfirst{font-size:.95rem;margin-bottom:1.5rem;}
  .lead-buttons{gap:10px;}
  .lead-buttons .act{width:100%;text-align:center;}

  /* pale artwork: the copy sits on a light panel to match it */
  .lead.lead--pale{background-color:#EFEFEF;}

}

/* --- reach-us block on handsets ---
   Phone and email become full-width targets instead of inline links, with the
   booking panel directly beneath them. */
@media (max-width:680px){
  #main .block.pale .pair{gap:24px;}
  #main .block.pale{padding:44px 0;}
  #main .block.pale h2{font-size:1.5rem;}
  .reach{margin-top:20px;}
  .reach li{
    margin-bottom:12px;
    background:#fff;border:1px solid var(--line);border-radius:10px;
  }
  .reach li > a,
  .reach li.flat{gap:14px;padding:13px 15px;min-height:64px;}
  .reach li.flat{background:transparent;}
  .reach li:active{background:#FAFAFA;}
  .reach .reach-icon{width:38px;height:38px;border-radius:9px;box-shadow:none;background:#EEF9EC;}
  .reach b{font-size:.68rem;letter-spacing:.1em;color:var(--muted);margin-bottom:2px;}
  .reach span{font-size:.92rem;}
  .reach a{color:var(--ink);font-weight:600;text-decoration:none;}
  .reach li:first-child a{font-size:1.15rem;letter-spacing:.01em;}
  .reach a[href^="mailto:"]{font-size:.82rem;font-weight:500;}
}

/* --- direct details panel --- */
.reach-panel{margin-top:26px;}

@media (max-width:680px){
  /* on a handset the number outranks the form: a broken door is a phone call */
  .pair > div:last-child{display:flex;flex-direction:column;}
  .reach-panel{order:-1;margin:0 0 24px;}
  .reach-panel h3{font-size:1rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.8em;}
}

/* --- masthead pinning --- */
.topbar{transition:padding .18s ease;}
.markimg{transition:height .18s ease;}

@media (max-width:680px){
  /* an opened menu is capped so it cannot run off the viewport */
  .menu.shown{max-height:calc(100vh - 160px);overflow-y:auto;-webkit-overflow-scrolling:touch;}

  /* once scrolled, the chips and strap have said their piece; the mark and the
     menu key are all that still earn the space */
  .topbar.slim .flags{display:none;}
  .topbar.slim .strap{display:none;}
  .topbar.slim .markimg{height:42px;}
  .topbar.slim .bound{padding-top:8px;padding-bottom:8px;}
}

/* ---------- makes strip -----------------------------------------------------
   The row of opener brands sits flush under the lead artwork: no margin on
   either side of it, and line-height:0 on the wrapper so no baseline gap
   creeps in beneath the image. A single wide raster cannot reflow, so below
   760px a <picture> swaps in a three-by-three version of the same nine logos
   (built by build/brands.py) rather than shrinking the row into a smear.     */
.makers{
  background:#fff;
  border-bottom:1px solid #ECECEC;
  line-height:0;
}
.makers-img{
  display:block;
  width:100%;
  height:auto;
}

@media (max-width:760px){
  /* the phone artwork is the same nine logos stacked three by three, so it
     scales down without the names turning into a smear. No sideways scrolling
     and nothing cropped. */
  .makers{padding:4px 0;}
}

/* ---------- mobile menu -----------------------------------------------------
   The toggle was the word "Menu" in a dark pill. It is now a square hamburger
   that folds into a cross while the panel is open, driven off aria-expanded so
   the state lives in one place and screen readers get it for free. The button
   is 48px square, which clears the minimum tap target on its own.

   The panel itself keeps the light background of the header, but the rows are
   full-width tap targets with the current page marked by a green bar rather
   than by colour alone.                                                      */
@media (max-width:1024px){
  .menukey{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    padding:0;
    border-radius:12px;
    background:var(--green-deep);
  }
  .menukey:hover{background:var(--ink);}
  .menukey .glyph{position:relative;display:block;width:22px;height:16px;}
  .menukey .rule{
    position:absolute;left:0;width:100%;height:2.5px;
    background:#fff;border-radius:2px;
    transition:top .2s ease,transform .2s ease,opacity .15s ease;
  }
  .menukey .rule:nth-child(1){top:0;}
  .menukey .rule:nth-child(2){top:6.75px;}
  .menukey .rule:nth-child(3){top:13.5px;}
  .menukey[aria-expanded="true"] .rule:nth-child(1){top:6.75px;transform:rotate(45deg);}
  .menukey[aria-expanded="true"] .rule:nth-child(2){opacity:0;}
  .menukey[aria-expanded="true"] .rule:nth-child(3){top:6.75px;transform:rotate(-45deg);}

  .menu.shown{
    background:#fff;
    border-radius:12px;
    margin-top:6px;
    padding:4px 0;
    box-shadow:0 12px 30px rgba(0,0,0,.14);
    overflow:hidden;
  }
  .menu li{border-bottom:1px solid #ECECEC;}
  .menu li:last-child{border-bottom:none;}
  .menu a{
    padding:15px 18px;
    font-size:.88rem;
    border-left:4px solid transparent;
  }
  .menu a:hover{background:#F6FAF5;}
  .menu a.here{
    color:var(--green-deep);
    border-left-color:var(--green-deep);
    background:#F2F8F1;
  }
}

/* ---------- quote card on yellow --------------------------------------------
   The form panel (home page contact block and contact page) runs on the brand
   yellow instead of near-black, so every colour inside it has to flip. Nothing
   white survives on yellow: white text measures 1.27:1 and the brand green only
   2.16:1. Ink type is 14.9:1, the muted lines use a dark olive at 5.8:1, and the
   submit button takes the deep green, where white is 4.5:1 and the button still
   separates cleanly from the yellow behind it.                                */
.booking{
  background:var(--yellow);
  box-shadow:0 16px 40px rgba(0,0,0,.22);
}
.booking h3{color:var(--ink);}
.booking .byline{color:#5c5720;}
.booking .row label{color:var(--ink);}
.booking .row label .must{color:#8a1f1f;}
.booking .row input,
.booking .row select,
.booking .row textarea{
  background:#fff;
  border:1px solid rgba(0,0,0,.22);
  color:var(--ink);
}
.booking .row input:focus,
.booking .row select:focus,
.booking .row textarea:focus{
  outline:2px solid var(--ink);
  outline-offset:1px;
}
.booking .act--go{background:var(--green-deep);color:#fff;}
.booking .act--go:hover{background:var(--ink);color:#fff;box-shadow:none;}
.booking .row-note{color:#5c5720;}

/* the honeypot must be unreachable to people and invisible to layout, while
   staying a real focusable field for the bots that fill everything in */
.decoy{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.booking button[disabled]{opacity:.6;cursor:progress;}

/* ---------- card image framing ----------------------------------------------
   The cards crop to a 170px band. On both the residential and the commercial
   photo the opener and the technician sit in the top third of the frame, and a
   centred crop slices the top off the unit, so those two are anchored higher.  */
.tile-img--raised{object-position:center 20%;}

/* ---------- service areas ---------------------------------------------------
   Six rows of nine. Nine columns is the minimum that holds 50 names in six
   rows, and at 1fr each the longest names broke onto a second line, which made
   the block read as ten or more lines rather than six. So the columns are
   sized to their own content and the spare width is shared between them: a
   column of short names takes less room and leaves it for a longer one.

   white-space:nowrap is what guarantees one line per name, and the type steps
   down as the viewport narrows to keep all nine columns fitting. Below 1240px
   there is no font size small enough to hold nine columns, so the layout falls
   back to equal columns with a taller row count.                             */
.patch{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(6,1fr);
  grid-auto-columns:max-content;
  justify-content:space-between;
  column-gap:14px;
  list-style:none;padding:0;margin:0;max-width:none;
}
.patch li{
  display:flex;
  align-items:center;
  white-space:nowrap;
  padding:7px 0 7px 22px;
}
.patch li::before{top:50%;margin-top:-5px;}

@media (max-width:1400px){
  .patch li{font-size:.8rem;padding-left:20px;}
}
@media (max-width:1330px){
  .patch{column-gap:12px;}
  .patch li{font-size:.76rem;padding-left:18px;}
}

/* Below 1240px nine columns will not fit at any readable size, so the row
   count steps up instead. Content-sized columns and nowrap carry through, so
   no name ever breaks onto a second line at any width. */
@media (max-width:1240px){
  .patch{grid-template-rows:repeat(9,1fr);column-gap:18px;}
  .patch li{font-size:.86rem;padding-left:22px;}
}
@media (max-width:1010px){
  .patch{grid-template-rows:repeat(13,1fr);}
}
@media (max-width:680px){
  .patch{grid-template-rows:repeat(17,1fr);}
}
@media (max-width:530px){
  .patch{grid-template-rows:repeat(25,1fr);column-gap:12px;}
}
@media (max-width:380px){
  /* the narrowest phones still in service: two columns only clear at this size */
  .patch li{font-size:.78rem;padding-left:17px;}
}

/* ---------- footer ----------------------------------------------------------
   Four columns: who we are, what we do, where to go next, how to reach us. The
   links are split by intent rather than dumped into one list, the number is the
   largest thing in the contact column because it is the action we want, and the
   map has been removed entirely.                                              */
.endgrid{grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:44px;padding-bottom:46px;}
.endmark p{margin-top:20px;}
.endgap{margin-top:26px;}
.endhours{margin:0;line-height:1.6;}
.endhours b{display:block;color:#fff;font-size:.95rem;}
.endphone{
  display:inline-block;font-size:1.5rem;font-weight:700;color:#fff;
  letter-spacing:.01em;margin:0 0 14px;
}
.endphone:hover{color:var(--yellow);}
.endreach{margin-bottom:20px;}
.endreach li{padding:5px 0;line-height:1.55;}

@media (max-width:1300px){
  .endgrid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media (max-width:680px){
  .endgrid{grid-template-columns:1fr;gap:30px;}
  .endphone{font-size:1.35rem;}
}

/* ---------- home banner hero ------------------------------------------------
   The home artwork carries its own headline and photograph, so it is placed as
   an image running the full width of the column rather than as a background
   with copy laid over it. The h1 and the two buttons sit centred underneath,
   where they cannot land on top of the artwork's own type at any width.

   .lead--pale supplies the dark heading and the dark outline button; this rule
   only has to clear the dark backdrop and the vertical padding the other heroes
   use, since there is nothing to sit on top of here.                          */
.lead--art{
  background:none;
  background-color:#fff;
  padding:0 0 52px;
}
.lead-art{width:100%;height:auto;display:block;}
.lead--art .bound{padding-top:38px;}
.lead--art h1{
  max-width:26ch;
  margin:0 auto .5em;
  text-align:center;
}
.lead--art .standfirst{
  max-width:66ch;
  margin:0 auto 1.9rem;
  text-align:center;
}
.lead--art .lead-buttons{justify-content:center;}

@media (max-width:680px){
  .lead--art{padding:0 0 34px;}
  .lead--art .bound{padding-top:24px;}
  .lead--art h1{font-size:1.6rem;}
  .lead--art .lead-buttons .act{width:100%;}
}

/* ---------- logo sizing -----------------------------------------------------
   The mark is a horizontal wordmark at roughly 3.5:1, so the original height
   steps suit it. The footer is the problem case: the dark green in "OPENERS"
   measures 1.7:1 against the ink background and all but disappears, so down
   there the logo sits on a light plate. Drop the plate if a knockout version
   of the logo (white type for dark backgrounds) turns up later.              */
.markimg{height:92px;}
.endbar .markimg{height:74px;}
/* the tagline is wider than the mark, so the mark is centred over it */
.mark{display:flex;flex-direction:column;align-items:center;}

.endmark .markpad{
  display:inline-block;
  background:#fff;
  border-radius:12px;
  padding:14px 20px;
}

@media (max-width:1300px){
  .markimg{height:64px;}
}
@media (max-width:680px){
  .markimg{height:58px;}
  .topbar.slim .markimg{height:42px;}
}

/* ---------- header row ------------------------------------------------------
   Logo, the two badges and the phone number now share a single line, and the
   Request Estimate button has been removed. Both the badge group and the phone
   carry margin-left:auto, so the spare width is split between them: the logo
   stays hard left, the phone hard right, the badges sit between the two.
   .header-right and .header-top no longer exist in the markup.               */
.topbar .bound{flex-wrap:nowrap;}

/* the number is a button rather than a plain link. It uses the deep green
   because white on the brand green measures 2.74:1 and is unreadable at this
   size; on the deep green it is 4.5:1. */
.ringme-stack{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
}
.ringme-label{
  text-transform:uppercase;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--ink);
  line-height:1;
}
.ringme{
  margin-right:0;
  background:var(--green-deep);
  color:#fff;
  padding:12px 24px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.03em;
  gap:9px;
  white-space:nowrap;
}
.ringme:hover{background:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.22);}

@media (max-width:1024px){
  /* the row wraps once there is no room for four items, and the button drops
     onto its own full-width line under the logo */
  .topbar .bound{flex-wrap:wrap;}
  .ringme-stack{width:100%;margin:4px 0 0;}
  .ringme{width:100%;justify-content:center;font-size:1rem;}
}

@media (max-width:680px){
  /* hidden on phones: the sticky bar pinned to the bottom of the screen
     already carries the number, and it is easier to reach down there */
  .ringme-stack{display:none;}
}

/* ---------- centred nav bar -------------------------------------------------
   The nav now lives in its own strip below the brand row, so the strip can run
   the full width of the header while the links stay aligned to the content
   column. White on the deep green clears 4.5:1; white on the brand green is
   only 2.74:1, which is why the bar is not the lighter shade. The active and
   hovered item is marked with a yellow rule rather than yellow text, since
   yellow on green is far too low in contrast to read.                        */
.menustrip{background:var(--green-deep);}
/* the header's own .bound is a padded flex row; the nav's copy is neither,
   otherwise the band inherits 22px of stray vertical padding */
.menustrip .bound{display:block;padding-top:0;padding-bottom:0;gap:0;}
.menu{width:100%;}
.menu ul{justify-content:center;}
.menu a{
  color:#fff;
  padding:14px 15px;
  border-bottom:3px solid transparent;
  transition:background .15s ease,border-color .15s ease;
}
.menu a:hover,
.menu a.here{
  color:#fff;
  background:rgba(0,0,0,.16);
  border-bottom-color:var(--yellow);
}
.menu a:focus-visible{outline:2px solid var(--yellow);outline-offset:-4px;}

@media (max-width:1024px){
  /* on a handset the strip becomes a dropdown panel under the toggle, so the
     green band is dropped and the original light styling comes back */
  .menustrip{background:transparent;}
  .menu a{color:var(--ink);border-bottom:none;padding:12px 4px;}
  .menu a:hover,
  .menu a.here{color:var(--green-deep);background:transparent;}
}

/* ---------- boxed page shell ----------------------------------------------
   The site sits in a centred column with a visible surround rather than
   running edge to edge. The gutter is a percentage, so the box is obvious on
   a 1280px laptop as well as on a wide monitor, where the column stops
   growing at 1400px. Below 1024px the gutter would eat the content, so
   everything reverts to full width and nothing else here has to know.

   The shadow is cast on the left and right only: the negative spread cancels
   it top and bottom, so the header, main and footer stack without seams.

   There is a gap above and below the column as well as at the sides. The gap
   at the top needs care, because the header is sticky: left alone it would be
   a 22px window with page content scrolling through it above the stuck header.
   The header carries a pseudo-element that fills that window in the surround
   colour, which is enough because the content only ever scrolls within the
   column, and the pseudo-element spans exactly the column's width. */
@media (min-width:1024px){
  body{background:#D9D9D9;padding:22px 0;}
  .topbar,
  .menustrip,
  #main,
  .endbar{
    width:92%;
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
    box-shadow:26px 0 26px -26px rgba(0,0,0,.28),-26px 0 26px -26px rgba(0,0,0,.28);
  }
  /* the nav bar is a separate element now, so it needs the same side shadow */
  /* the header keeps its own hairline under it, plus the side shadow */
  .topbar{
    box-shadow:0 1px 0 rgba(0,0,0,.06),
               26px 0 26px -26px rgba(0,0,0,.28),
               -26px 0 26px -26px rgba(0,0,0,.28);
  }
  #main{background:#fff;}

  /* the strip of surround above the pinned header */
  .topbar{top:22px;}
  .topbar::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-22px;
    height:22px;
    background:#D9D9D9;
  }
}