/* DC Jones Plastering | plasteringhighwycombe.co.uk
   The look comes from the firm's own logo: its bright red lettering, the red bar
   that fades out under "High Wycombe Plastering Services", and the charcoal of the
   trowel. That fading red bar returns under every heading, along the service strip
   and under the photos. The pale pink of the tinted sections is the colour of fresh
   plaster as it dries. Headings are set in Jost, a clean geometric sans like the
   logo's capitals, and text in Figtree.
   No section labels above headings and no step numbers: both were taken out on
   request in an earlier build, and the layout sweep checks they stay out.
   Mobile first. Breakpoints: 360, 380, 414, 480, 600, 720, 1000 (also in main.js), 1200. */

@font-face{font-family:"Jost";src:url("jost-var-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("figtree-var-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --char:#1c1c1f;
  --char-deep:#131315;
  --char-soft:#2a2a30;
  --steel:#6e6e7c;
  --red:#c62828;
  --red-dark:#a11f1f;
  --red-light:#ff3d3d;
  --red-pale:#ffc9c4;
  --plaster:#f8efea;
  --plaster-deep:#efe1d8;
  --ink:#1a1a1a;
  --text:#3b3b41;
  --muted:#5e5e68;
  --line:#e6dbd4;
  --white:#fff;
  --pale:#c8c8d0;
  --err:#b3261e;
  --gutter:16px;
  --radius:6px;
  --head:"Jost","Avenir Next","Century Gothic",system-ui,sans-serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --bar:linear-gradient(90deg,var(--red) 0%,var(--red) 35%,rgba(198,40,40,0) 100%);
  --bar-light:linear-gradient(90deg,var(--red-light) 0%,var(--red-light) 35%,rgba(255,61,61,0) 100%);
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;font-weight:400;line-height:1.68;color:var(--text);background:var(--white);overflow-x:clip}
img,svg{max-width:100%;height:auto;display:block}
svg{flex:none}
h1,h2,h3{color:var(--ink);font-family:var(--head);font-weight:600;line-height:1.14;margin:0 0 .55em;text-wrap:balance}
h1{font-size:clamp(2.35rem,9.6vw,4rem);font-weight:700;letter-spacing:-.01em;line-height:1.04}
h2{font-size:clamp(1.75rem,6vw,2.5rem);letter-spacing:-.005em}
h3{font-size:1.28rem;line-height:1.25}
p{margin:0 0 1.05em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--red);text-underline-offset:3px}
a:hover{color:var(--red-dark);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--red-light);outline-offset:3px;border-radius:4px}
strong{color:inherit;font-weight:650}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3{color:var(--white)}
.on-dark a:not(.btn){color:var(--white)}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:860px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--white);color:var(--ink);padding:10px 16px;border-radius:6px;font-weight:700}
.skip:focus{top:12px}

/* --------------------------------------------------------------- pieces -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:11px 26px;border:2px solid var(--red);border-radius:var(--radius);background:var(--red);color:var(--white);font-family:var(--head);font-weight:600;font-size:1.06rem;letter-spacing:.02em;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--white)}
.btn .ico{width:18px;height:18px}
.btn--light{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn--light:hover{background:var(--plaster);border-color:var(--plaster);color:var(--ink)}
.btn--line{background:var(--white);border-color:var(--char);color:var(--char)}
.btn--line:hover{background:var(--char);border-color:var(--char);color:var(--white)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.75);color:var(--white)}
.btn--ghost:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.on-dark .btn--light,.on-dark .btn--light:hover{color:var(--ink)}
.on-dark .btn--ghost:hover{color:var(--ink)}
.btn[disabled]{opacity:.65;cursor:progress}

.more{display:inline-flex;align-items:center;gap:7px;color:var(--red);font-weight:700;text-decoration:none}
a.more:hover{text-decoration:underline}
.on-dark .more{color:var(--red-pale)}
.tel-link{font-weight:700;color:var(--ink);white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:26px 0 0}
.intro{max-width:780px;margin-bottom:30px}
.prose p:last-child{margin-bottom:0}

.prose>.ticks{margin-bottom:1.05em}
.steps+p,.jump+p{margin-top:26px}
.ticks li{position:relative;padding:5px 0 5px 30px}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:19px;height:19px;background:var(--tick) center/contain no-repeat}
@media (min-width:600px){.ticks--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}}

.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.pills li{padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font-size:.97rem;font-weight:600}

.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.jump a{display:block;padding:8px 16px;border:1.5px solid var(--char);border-radius:999px;background:var(--white);color:var(--char);font-size:.97rem;font-weight:650;text-decoration:none}
.jump a:hover{background:var(--char);color:var(--white)}

/* --------------------------------------------------------------- header -- */
.topbar{background:var(--char-deep);font-size:.86rem;font-weight:500;line-height:1.3}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:10px 22px;min-height:36px;padding-block:6px}
.topbar__item{display:flex;align-items:center;gap:7px;margin:0;color:var(--white);text-decoration:none;white-space:nowrap}
.on-dark a.topbar__item{color:var(--white)}
.topbar__item .ico{width:15px;height:15px;color:var(--red-light)}
.topbar__msg{display:none}
.topbar__mail{margin-left:auto}
.topbar__mail:hover span{text-decoration:underline}

/* the header ends in the logo's fading red bar */
.header{position:sticky;top:0;z-index:50;background:var(--white);box-shadow:0 6px 18px rgba(26,26,26,.08)}
.header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--bar)}
.header__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:64px}
.brand{flex:none;display:block;padding:8px 0}
.brand img{width:auto;height:24px}
.header__actions{flex:none;display:flex;align-items:center;gap:8px}
.header__tel{display:none;align-items:center;gap:8px;color:var(--ink);font-family:var(--head);font-weight:600;font-size:1.14rem;text-decoration:none;white-space:nowrap}
.header__tel .ico{width:19px;height:19px;color:var(--red)}
.header__tel:hover{color:var(--ink)}
.header__tel:hover span{text-decoration:underline}
.header__cta{flex:none;min-height:42px;padding:8px 10px;font-size:.92rem}
.burger{flex:none;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:42px;padding:0 11px;border:2px solid var(--char);border-radius:var(--radius);background:var(--white);cursor:pointer}
.burger span{display:block;height:2px;background:var(--char);border-radius:2px}
html:not(.js) .burger{display:none}

.nav{font-family:var(--head);font-weight:500;font-size:1.1rem}
.nav__list a{display:block;padding:12px 14px;border-radius:6px;color:var(--ink);text-decoration:none}
.nav__list a:hover{color:var(--red)}
.nav__list a[aria-current="page"]{color:var(--red)}
.js .nav{display:none;position:absolute;top:100%;left:0;right:0;padding:8px;background:var(--white);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(26,26,26,.2)}
.js .nav.is-open{display:block}
html:not(.js) .header__in{flex-wrap:wrap}
html:not(.js) .nav{order:3;width:100%;padding-bottom:8px}
html:not(.js) .nav__list{display:flex;flex-wrap:wrap}

@media (min-width:360px){.brand img{height:29px}}
@media (min-width:375px){.header__in{gap:10px}}
@media (min-width:380px){
  :root{--gutter:20px}
  .header__cta{padding:9px 14px;font-size:1rem}
  .burger{width:46px;height:44px}
}
@media (min-width:380px){.brand img{height:32px}}
@media (min-width:414px){.brand img{height:35px}}
@media (min-width:480px){.brand img{height:40px}}
@media (min-width:600px){
  :root{--gutter:28px}
  .header__in{min-height:80px;gap:18px}
  .brand img{height:46px}
  .header__actions{gap:16px}
  .header__cta{min-height:46px;padding:10px 22px;font-size:1.06rem}
}
@media (min-width:720px){.header__tel{display:flex}.topbar__msg{display:flex}}
@media (min-width:1000px){
  .js .nav,.nav,html:not(.js) .nav{display:block;position:static;order:0;width:auto;margin:0 auto 0 20px;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .nav__list,html:not(.js) .nav__list{display:flex;flex-wrap:nowrap;gap:0}
  .nav__list a{position:relative;padding:10px 9px}
  .nav__list a[aria-current="page"]::after{content:"";position:absolute;left:9px;right:9px;bottom:2px;height:4px;border-radius:1.5px;background:var(--red)}
  .burger{display:none}
  .header__in{min-height:88px;gap:14px}
  .brand img{height:50px}
  .nav{font-size:1.06rem}
  .header__actions{gap:14px}
  .header__tel{font-size:1.06rem;gap:6px}
  .header__tel .ico{width:17px;height:17px}
  .header__cta{padding:10px 16px}
}
@media (min-width:1200px){
  .nav,.js .nav{margin-left:34px}
  .nav__list{gap:4px}
  .nav__list a{padding:10px 13px}
  .nav__list a[aria-current="page"]::after{left:13px;right:13px}
  .header__in{gap:18px}
  .header__actions{gap:18px}
  .header__tel{font-size:1.16rem;gap:8px}
  .header__tel .ico{width:19px;height:19px}
  .header__cta{padding:10px 22px}
  .brand img{height:60px}
}

/* ----------------------------------------------------------------- hero -- */
.hero,.phero{position:relative;overflow:hidden;background-color:var(--char)}
.hero{padding:32px 0 44px}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,19,21,.88),rgba(19,19,21,.93))}
.hero__in{position:relative;z-index:2;display:grid;grid-template-areas:"head" "card" "copy";gap:24px}
.hero__head{grid-area:head}
.hero__head h1{margin:0}
.hero__head h1::after,.phero h1::after{content:"";display:block;width:140px;height:7px;margin-top:16px;border-radius:1.5px;background:var(--bar-light)}
.hero__card{grid-area:card;padding:22px 18px 20px;border-top:6px solid var(--red);border-radius:var(--radius);background:var(--white);color:var(--text);box-shadow:0 20px 44px rgba(0,0,0,.34)}
.hero__card .hero__card-title{margin-bottom:.2em;color:var(--ink);font-size:clamp(1.6rem,6vw,2rem)}
.hero__card-intro{margin-bottom:16px;color:var(--muted);font-size:1rem}
.hero__card .field textarea{min-height:92px}
.hero__copy{grid-area:copy}
.hero__sub{margin:0 0 .8em;font-family:var(--head);font-size:clamp(1.3rem,4.8vw,1.6rem);font-weight:500;line-height:1.3;color:var(--red-pale)}
.lead{font-size:1.1rem;color:var(--pale);max-width:640px}
.hero .actions{margin-top:22px}
@media (max-width:479px){.hero .actions .btn{width:100%}}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:24px 0 0;color:var(--white);font-weight:600;font-size:1rem}
.hero__trust li{display:flex;align-items:center;gap:8px}
.hero__trust .ico{width:20px;height:20px;color:var(--red-light)}

.phero{padding:30px 0 40px;background-image:radial-gradient(120% 140% at 100% 0%,#2e2e35 0%,var(--char) 55%)}
.phero__in{position:relative;z-index:2}
.phero h1{font-size:clamp(1.8rem,7.8vw,3.5rem);max-width:18em}
.phero .lead{margin-bottom:0;max-width:720px}
.crumbs{margin-bottom:20px;font-size:.94rem;font-weight:500}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--red-light)}
.crumbs [aria-current]{color:var(--pale)}

/* the services, in short, on a red bar that fades out like the one in the logo */
.strip{background-color:var(--red-dark);background-image:linear-gradient(90deg,var(--red) 0%,var(--red-dark) 55%,var(--char-deep) 100%)}
.strip__in{display:grid;gap:6px;padding-block:15px;text-align:center}
.strip__lead{margin:0;color:var(--white);font-family:var(--head);font-weight:600;font-size:1.14rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.strip__list{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;color:var(--white);font-size:.93rem;font-weight:600;letter-spacing:.02em}
.strip__list li{white-space:nowrap}
.strip__list li+li::before{content:"";display:inline-block;width:6px;height:6px;margin:0 11px;border-radius:50%;background:rgba(255,255,255,.7);vertical-align:.2em}

@media (min-width:600px){
  .hero{padding:48px 0 60px}
  .hero__card{padding:28px 28px 24px}
  .phero{padding:44px 0 56px}
}
@media (min-width:1000px){
  .hero{padding:64px 0 72px}
  .hero__bg::after{background:linear-gradient(90deg,rgba(19,19,21,.95) 0%,rgba(19,19,21,.86) 46%,rgba(19,19,21,.45) 100%)}
  .hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"head card" "copy card";column-gap:60px;row-gap:22px;align-items:start}
  .hero__head{align-self:end;padding-top:24px}
  .hero__head h1{font-size:clamp(4rem,6vw,5rem)}
  .lead{font-size:1.14rem}
  .phero{padding:58px 0 70px}
  .strip__in{display:flex;align-items:center;justify-content:center;gap:10px 28px;padding-block:17px}
}

/* ------------------------------------------------------------- sections -- */
.section{padding:58px 0}
.section--plaster{background:var(--plaster)}
.section--tight{padding-bottom:40px}
.head{margin-bottom:22px}
.head h2{margin-bottom:0}
.head h2::after,.service h2::after{content:"";display:block;width:110px;height:6px;margin-top:16px;border-radius:1.5px;background:var(--bar)}
.on-dark .head h2::after{background:var(--bar-light)}
.split-head{display:grid;gap:8px;margin-bottom:34px}
.split-head .head{margin-bottom:14px}
@media (min-width:1000px){
  .section{padding:92px 0}
  .section--tight{padding-bottom:52px}
  .head{margin-bottom:30px}
  .split-head{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start;margin-bottom:46px}
}

/* service cards: a large photo of our own work on each */
.cards{display:grid;gap:18px}
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);transition:box-shadow .18s,border-color .18s}
.card:hover{border-color:var(--red);box-shadow:0 14px 30px rgba(26,26,26,.12)}
.card__img{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--plaster)}
.card__img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--bar)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.card:hover .card__img img{transform:scale(1.03)}
.card__body{display:flex;flex-direction:column;flex:1;min-width:0;padding:20px 20px 18px}
.card h3{margin-bottom:.35em;font-size:1.4rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.card:hover h3 a{color:var(--red)}
.card p{margin-bottom:0;font-size:1rem}
.card .more{margin-top:auto;padding-top:16px;font-size:.98rem}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* inside and outside */
.sides{display:grid;gap:16px}
.side{padding:22px 22px 8px;border:1px solid var(--line);border-top:6px solid var(--red);border-radius:var(--radius);background:var(--white)}
.side+.side{border-top-color:var(--char)}
.side h3{margin-bottom:.4em;font-size:1.35rem}
.side .more{margin-top:12px}
@media (min-width:720px){.sides{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.side{padding:28px 30px 12px}}

/* photos */
figure{margin:0}
.shot{position:relative}
.shot__img{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;background:var(--plaster)}
.shot__img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--bar)}
.shot__img img{width:100%;height:100%;object-fit:cover}
.shot figcaption{margin-top:10px;color:var(--muted);font-size:.95rem;font-weight:600}
@media (min-width:1000px){.about__side .shot__img,.service__photo .shot__img{aspect-ratio:4/5}}

/* dark bands */
.band{position:relative;overflow:hidden;padding:62px 0}
.band--dark{background-color:var(--char)}
.band .prose p,.band__copy p{color:var(--pale)}
.band__grid{display:grid;gap:30px}
@media (min-width:1000px){
  .band{padding:96px 0}
  .band__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
}

/* how we work (about page) */
.signs{display:grid;gap:14px}
.signs li{padding:20px 20px 18px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);border-left:6px solid var(--red)}
.signs h3{margin-bottom:.3em;font-size:1.25rem}
.signs p{margin:0;font-size:1rem}
@media (min-width:600px){.signs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (min-width:1000px){.signs{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}

/* what we do (about page) */
.whatwe{display:grid;gap:12px}
.whatwe a{display:flex;align-items:flex-start;gap:14px;height:100%;padding:18px;border-radius:var(--radius);background:var(--char-soft);color:var(--pale);font-size:1rem;line-height:1.5;text-decoration:none;transition:background-color .15s}
.whatwe a:hover{background:#34343b}
.whatwe .ico{width:26px;height:26px;margin-top:2px;color:var(--red-light)}
.whatwe strong{display:block;margin-bottom:3px;color:var(--white);font-family:var(--head);font-size:1.22rem;font-weight:600}
.on-dark .whatwe a{color:var(--pale)}
@media (min-width:600px){.whatwe{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1000px){.whatwe{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}

/* how it works: no numbers, on request */
.steps{display:grid;gap:14px}
.steps li{padding:22px;border:1px solid var(--line);border-top:6px solid var(--char);border-radius:var(--radius);background:var(--white)}
.steps h3{margin-bottom:.3em}
.steps p{margin:0;font-size:1rem;overflow-wrap:break-word}
@media (min-width:720px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media (min-width:1000px){.steps li{padding:26px 24px 24px}}

/* customer comments, summarised in our own words */
.comments{display:grid;gap:16px}
.comment{display:flex;flex-direction:column;padding:22px 22px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.section--plaster .comment{border-color:var(--white)}
.comment__mark{display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:50%;background:var(--red);color:var(--white)}
.comment__mark .ico{width:22px;height:22px;fill:currentColor;stroke:none}
.comment h3{margin-bottom:.35em;font-size:1.3rem}
.comment__text{color:var(--ink);font-size:1.04rem}
.comment__who{margin:auto 0 0;padding-top:6px;color:var(--muted);font-size:.95rem;font-weight:600}
.comments__note{margin:22px 0 0;color:var(--muted);font-size:.98rem}
@media (min-width:720px){.comments{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1000px){.comments{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* gallery of the firm's own work */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gallery figure{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;border-bottom:4px solid var(--red)}
.gallery figcaption{padding:10px 12px 11px;color:var(--ink);font-size:.95rem;font-weight:650;line-height:1.35}
@media (min-width:600px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1000px){.gallery--four{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.gallery--three{gap:24px}.gallery figcaption{padding:12px 14px 13px;font-size:1rem}}

/* coverage and maps */
.cover{display:grid;gap:30px}
.map{position:relative;height:340px;border-radius:var(--radius);overflow:hidden;background:var(--plaster);border:1px solid var(--line)}
.map__fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center;font-size:1rem}
.map__fallback strong{font-size:1.15rem;color:var(--ink)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.areas{display:grid;gap:16px}
.areas__group{padding:24px 22px;border:1px solid var(--line);border-top:6px solid var(--red);border-radius:var(--radius);background:var(--white)}
.areas__group h3{margin-bottom:.3em;font-size:1.32rem}
.areas__group>p{font-size:1rem;color:var(--muted)}
.areas__list li{padding:8px 0;border-top:1px solid var(--line);line-height:1.4}
.areas__list strong{color:var(--ink);font-weight:650}
.area__code{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:var(--plaster);color:var(--ink);font-size:.84rem;font-weight:650;vertical-align:1px}
@media (min-width:600px){
  .areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .areas__list{columns:2;column-gap:24px}
  .areas__list li{break-inside:avoid}
}
@media (min-width:1000px){
  .cover{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:60px;align-items:center}
  .map{height:440px}
  .areas{gap:24px}
}

/* faq */
.faq details{margin-bottom:10px;border-radius:var(--radius);background:var(--white);color:var(--text)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;font-family:var(--head);font-weight:600;font-size:1.12rem;line-height:1.35;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--red) var(--chev) center/17px no-repeat;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .answer{padding:0 18px 18px;font-size:1.02rem}
.faq .answer p{margin:0}
.on-dark .faq a:not(.btn){color:var(--red)}

/* closing call to action, on the red bar */
.cta{padding:48px 0;background-color:var(--red);background-image:linear-gradient(100deg,var(--red) 0%,var(--red-dark) 60%,#7f1818 100%)}
.cta__in{display:grid;gap:8px}
.cta h2{margin-bottom:.3em}
.cta p{margin:0;color:var(--white);font-size:1.1rem}
.cta .actions{margin-top:18px}
@media (max-width:479px){.cta .actions .btn{width:100%}}
@media (min-width:1000px){.cta{padding:60px 0}.cta__in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}.cta .actions{margin:0}}

/* services page */
.svc-intro{max-width:820px}
/* jump to a service: six equal tiles */
.svc-nav{margin-top:34px}
.svc-nav__title{margin-bottom:14px;font-size:1.32rem}
.svc-nav ul{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.svc-nav a{display:flex;flex-direction:column;align-items:center;gap:10px;height:100%;padding:18px 10px 15px;border:1px solid var(--line);border-bottom:5px solid var(--red);border-radius:var(--radius);background:var(--white);color:var(--ink);font-family:var(--head);font-weight:600;font-size:1.04rem;line-height:1.3;text-align:center;text-decoration:none;transition:border-color .15s,box-shadow .15s,color .15s}
.svc-nav a:hover{border-color:var(--red);color:var(--red);box-shadow:0 10px 24px rgba(26,26,26,.1)}
.svc-nav__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--radius);background:var(--char);color:var(--red-light)}
.svc-nav__icon .ico{width:24px;height:24px}
.svc-nav__name{text-wrap:balance}
@media (max-width:599px){
  /* phones: icon beside the name, one or two to a row, so the six tiles stay compact */
  .svc-nav a{flex-direction:row;align-items:center;gap:10px;padding:10px 10px 9px;border-bottom-width:4px;font-size:1rem;line-height:1.25;text-align:left}
  .svc-nav__icon{flex:none;width:38px;height:38px}
  .svc-nav__icon .ico{width:21px;height:21px}
}
@media (min-width:480px){.svc-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:600px){.svc-nav ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:1000px){.svc-nav{margin-top:44px}.svc-nav ul{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.svc-nav a{padding:22px 12px 18px}}

/* each service: one large photo, the words, one box holding both lists, then the call to action */
.service__icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:var(--radius);background:var(--char);color:var(--red-light)}
.service__icon .ico{width:28px;height:28px}
.service__grid{display:grid;gap:26px}
.service h2{margin-bottom:.6em}
.details{display:grid;gap:0;margin-top:32px;border:1px solid var(--line);border-top:6px solid var(--red);border-radius:var(--radius);background:var(--white)}
.section--plaster .details{border-color:var(--white);border-top-color:var(--red)}
.detail{padding:20px 20px 8px}
.detail+.detail{border-top:1px solid var(--line)}
.detail h3{margin-bottom:.4em;font-size:1.25rem}
.rows li{position:relative;padding:10px 0 10px 30px;border-top:1px solid var(--line);color:var(--ink);line-height:1.45}
.rows--tick li::before{content:"";position:absolute;left:0;top:12px;width:19px;height:19px;background:var(--tick) center/contain no-repeat}
.rows--bar li::before{content:"";position:absolute;left:2px;top:19px;width:15px;height:5px;border-radius:1.5px;background:var(--red)}
.service__cta{margin-top:26px}
@media (min-width:720px){.details{grid-template-columns:repeat(2,minmax(0,1fr))}.detail{padding:24px 28px 12px}.detail+.detail{border-top:0;border-left:1px solid var(--line)}}
@media (min-width:1000px){
  .service__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
  .service--flip .service__grid>:first-child{order:2}
  .service--flip .service__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .details{margin-top:48px}
}

/* about */
.about{display:grid;gap:30px}
@media (min-width:1000px){.about{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}}

/* ----------------------------------------------------------------- form -- */
.contact{display:grid;gap:30px}
.contact__tel{display:inline-flex;align-items:center;gap:12px;margin:6px 0 18px;color:var(--ink);font-family:var(--head);font-size:clamp(1.85rem,7.6vw,2.5rem);font-weight:600;line-height:1.1;text-decoration:none;white-space:nowrap}
.contact__tel .ico{width:28px;height:28px;color:var(--red)}
.contact__tel:hover{color:var(--ink)}
.contact__tel:hover span{text-decoration:underline}
.contact__list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.contact__list .ico{width:21px;height:21px;color:var(--red)}
.contact__list a{color:var(--ink);font-weight:650}
.contact__form{padding:24px 20px;border:1px solid var(--line);border-top:6px solid var(--red);border-radius:var(--radius);background:var(--white);box-shadow:0 14px 34px rgba(26,26,26,.09)}
.form{display:grid;gap:15px}
.form__row{display:grid;gap:15px;align-items:end}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{min-width:0}
.field label{display:block;margin-bottom:5px;font-size:.98rem;font-weight:650;color:var(--ink)}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{display:block;width:100%;min-width:0;padding:12px 14px;border:1px solid #9a9aa4;border-radius:var(--radius);background:var(--white);color:var(--ink);font:inherit;font-size:1rem}
.field textarea{min-height:124px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--red-light);outline-offset:1px;border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:var(--err);border-width:2px}
.field__error{margin:5px 0 0;font-size:.94rem;font-weight:650;color:var(--err)}
.form__status{margin:0;padding:12px 14px;border-left:4px solid var(--err);border-radius:4px;background:#fdecea;color:var(--ink);font-size:1rem}
.form__status a{font-weight:700;white-space:nowrap}
.form .btn{width:100%}
.form__note{display:flex;align-items:center;gap:8px;margin:0;font-size:.92rem;color:var(--muted)}
.form__note .ico{width:16px;height:16px}
@media (min-width:600px){
  .form__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact__form{padding:32px}
  .form .btn{width:auto}
}
@media (min-width:1000px){.contact{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}}

/* --------------------------------------------------------------- footer -- */
.footer{position:relative;overflow:hidden;padding:54px 0 100px;background-color:var(--char-deep);font-size:1rem}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--bar-light)}
.footer__grid{display:grid;gap:34px}
/* the logo has a white background of its own, so it sits on a white panel */
.footer__logo{display:inline-block;margin-bottom:18px;padding:10px 14px;border-radius:var(--radius);background:var(--white)}
.footer__logo img{width:auto;height:52px}
.footer__about p{max-width:340px;color:var(--pale)}
.footer h2{margin-bottom:14px;font-size:1.2rem}
.footer h2::after{content:"";display:block;width:60px;height:4px;margin-top:9px;border-radius:1px;background:var(--bar-light)}
.footer__h2b{margin-top:26px}
.footer__col li{padding:4px 0;color:var(--pale)}
.footer__col a:not(.btn){text-decoration:none}
.footer__col a:not(.btn):hover{text-decoration:underline}
.footer__areas{margin-bottom:8px;color:var(--pale)}
.footer__contact li{display:flex;align-items:flex-start;gap:10px;overflow-wrap:anywhere}
.footer__contact .ico{width:19px;height:19px;margin-top:.3em;color:var(--red-light)}
.footer__legal{margin:38px 0 0;padding-top:22px;border-top:1px solid #2c2c32;color:var(--pale);font-size:.92rem}
@media (min-width:600px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}
@media (min-width:1000px){.footer{padding-top:76px;padding-bottom:110px}.footer__grid{grid-template-columns:1.2fr 1fr .8fr 1.4fr;gap:44px}}

/* the call button that floats in the bottom right corner of every page */
.fcall{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;width:60px;height:60px;border:3px solid var(--white);border-radius:999px;background:var(--red);color:var(--white);font-family:var(--head);font-weight:600;font-size:1.1rem;text-decoration:none;white-space:nowrap;box-shadow:0 10px 26px rgba(19,19,21,.4);transition:background-color .15s}
.fcall:hover{background:var(--red-dark);color:var(--white)}
.fcall .ico{width:24px;height:24px}
.fcall__num{display:none}
@media (min-width:720px){
  .fcall{right:22px;bottom:22px;width:auto;padding:0 24px 0 20px}
  .fcall__num{display:inline}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}
@media print{
  .topbar,.header__actions,.nav,.fcall,.map,.strip,.hero__bg{display:none!important}
  .hero,.phero,.band,.footer,.cta{background:#fff!important;color:#000!important}
  .on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark a:not(.btn),.lead,.band .prose p,.band__copy p,.cta p{color:#000!important}
}