/* Weathershield Property Maintenance | roofersmarlow.co.uk
   Colours from the firm's own logo and flyers: the sky blue of "WEATHERSHIELD", the
   deep navy of "Property Maintenance" and of the newer flyer, and the royal blue of the
   flyers' panels. Headings are set in Barlow Semi Condensed, a sturdy condensed sans that
   echoes the bold "ROOFING / UPVC / PAINTING" lettering on the firm's banner, and text in
   Source Sans 3. The sky-blue bar, slanted like the logo's italic capitals, sits under
   every heading and along the photos.
   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:"Barlow Semi Condensed";src:url("barlow-semi-condensed-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("source-sans-3-var-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --navy:#12285a;
  --navy-deep:#0b1b40;
  --navy-soft:#1e3a72;
  --blue:#1d5fbf;
  --blue-dark:#164c9a;
  --sky:#48a8e0;
  --sky-pale:#bfe0f6;
  --mist:#eef5fb;
  --mist-deep:#dde9f5;
  --ink:#0f1f3d;
  --text:#2f3b52;
  --muted:#526079;
  --line:#d2dce9;
  --white:#fff;
  --pale:#c7d4e8;
  --err:#b3261e;
  --gutter:16px;
  --radius:6px;
  --head:"Barlow Semi Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d5fbf' 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");
  --tick-sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348a8e0' 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.0938rem;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:700;line-height:1.1;margin:0 0 .5em;text-wrap:balance;font-variant-numeric:lining-nums}
h1{font-size:clamp(2.5rem,10.5vw,4.4rem);letter-spacing:-.005em;line-height:1.02}
h2{font-size:clamp(1.85rem,6.4vw,2.7rem)}
h3{font-size:1.36rem;line-height:1.18}
p{margin:0 0 1.05em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--blue-dark);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sky);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(--blue);border-radius:var(--radius);background:var(--blue);color:var(--white);font-family:var(--sans);font-weight:700;font-size:1.04rem;letter-spacing:.01em;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(--blue-dark);border-color:var(--blue-dark);color:var(--white)}
.btn .ico{width:18px;height:18px}
.btn--light{background:var(--sky);border-color:var(--sky);color:var(--ink)}
.btn--light:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn--line{background:var(--white);border-color:var(--navy);color:var(--navy)}
.btn--line:hover{background:var(--navy);border-color:var(--navy);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(--blue);font-weight:700;text-decoration:none}
a.more:hover{text-decoration:underline}
.on-dark .more{color:var(--sky-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}
.ticks--two{display:grid;gap:0 24px;margin:4px 0 26px}
.ticks--two li{color:var(--ink);font-weight:600}
@media (min-width:600px){.ticks--two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ticks--light li{color:var(--white);font-weight:600}
.ticks--light li::before{background-image:var(--tick-sky)}

.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(--navy);border-radius:999px;background:var(--white);color:var(--navy);font-size:.97rem;font-weight:650;text-decoration:none}
.jump a:hover{background:var(--navy);color:var(--white)}

/* --------------------------------------------------------------- header -- */
.topbar{background:var(--navy-deep);font-size:.86rem;font-weight:500;line-height:1.3}
.topbar__in{display:flex;align-items:center;justify-content:center;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(--sky)}
a.topbar__item:hover span{text-decoration:underline}
.topbar__msg,.topbar__mail{display:none}
@media (min-width:600px){.topbar__in{justify-content:space-between}.topbar__mail{display:flex}}
@media (min-width:1200px){.topbar__msg{display:flex}.topbar__rate{margin-left:auto}}

.header{position:sticky;top:0;z-index:50;background:var(--white);box-shadow:0 1px 0 var(--line),0 6px 18px rgba(15,31,61,.08)}
.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-weight:700;font-size:1.1rem;text-decoration:none;white-space:nowrap}
.header__tel .ico{width:19px;height:19px;color:var(--blue)}
.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:.9rem}
.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(--navy);border-radius:var(--radius);background:var(--white);cursor:pointer}
.burger span{display:block;height:2px;background:var(--navy);border-radius:2px}
html:not(.js) .burger{display:none}

.nav{font-weight:650;font-size:1.06rem}
.nav__list a{display:block;padding:12px 14px;border-radius:6px;color:var(--ink);text-decoration:none}
.nav__list a:hover{color:var(--blue)}
.nav__list a[aria-current="page"]{color:var(--blue)}
.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(--sky);border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(15,31,61,.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:27px}}
@media (min-width:375px){.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:.98rem}
  .burger{width:46px;height:44px}
}
@media (min-width:414px){.brand img{height:30px}}
@media (min-width:480px){.brand img{height:36px}}
@media (min-width:600px){
  :root{--gutter:28px}
  .header__in{min-height:80px;gap:18px}
  .brand img{height:44px}
  .header__actions{gap:16px}
  .header__cta{min-height:46px;padding:10px 22px;font-size:1.04rem}
}
@media (min-width:720px){.header__tel{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 22px;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(--sky);transform:skewX(-20deg)}
  .burger{display:none}
  .header__in{min-height:86px;gap:14px}
  .brand img{height:40px}
  .nav{font-size:1.02rem}
  .header__actions{gap:14px}
  .header__tel{font-size:1.04rem;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 14px}
  .nav__list a[aria-current="page"]::after{left:14px;right:14px}
  .header__in{gap:18px}
  .header__actions{gap:18px}
  .header__tel{font-size:1.12rem;gap:8px}
  .header__tel .ico{width:19px;height:19px}
  .header__cta{padding:10px 22px}
  .brand img{height:48px}
}

/* ----------------------------------------------------------------- hero -- */
.hero,.phero{position:relative;overflow:hidden;background-color:var(--navy)}
.hero{padding:34px 0 44px}
/* one of the firm's own re-roofing photos, under a deep navy wash so the words stay clear */
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,27,64,.9),rgba(11,27,64,.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{content:"";display:block;width:74px;height:8px;margin-top:16px;border-radius:1.5px;background:var(--sky);transform:skewX(-20deg);transform-origin:0 100%}
.hero__card{grid-area:card;padding:22px 18px 20px;border-top:6px solid var(--sky);border-radius:var(--radius);background:var(--white);color:var(--text);box-shadow:0 20px 44px rgba(0,0,0,.32)}
.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:700;line-height:1.25;color:var(--sky-pale)}
.lead{font-size:1.1rem;color:var(--pale);max-width:620px}
.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(--sky)}

.phero{padding:30px 0 40px}
.phero__in{position:relative;z-index:2}
.phero h1{font-size:clamp(1.85rem,8.4vw,3.7rem);max-width:18em}
.phero h1::after{content:"";display:block;width:64px;height:7px;margin-top:16px;border-radius:1.5px;background:var(--sky);transform:skewX(-20deg);transform-origin:0 100%}
.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(--sky)}
.crumbs [aria-current]{color:var(--pale)}

/* the services, in short, under every hero */
.strip{background:var(--navy-deep);border-top:4px solid var(--sky)}
.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:700;font-size:1.22rem;line-height:1.25}
.strip__list{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;color:var(--pale);font-size:.92rem;font-weight:600;letter-spacing:.02em}
.strip__list li{white-space:nowrap}
.strip__list li+li::before{content:"";display:inline-block;width:10px;height:3px;margin:0 10px;border-radius:1px;background:var(--sky);vertical-align:.3em;transform:skewX(-20deg)}

@media (min-width:600px){
  .hero{padding:50px 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(11,27,64,.95) 0%,rgba(11,27,64,.88) 46%,rgba(11,27,64,.62) 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{gap:4px;padding-block:17px 19px}
}

/* ------------------------------------------------------------- sections -- */
.section{padding:58px 0}
.section--mist{background:var(--mist)}
.section--tight{padding-bottom:40px}
.head{margin-bottom:22px}
.head h2{margin-bottom:0}
.head h2::after,.service h2::after{content:"";display:block;width:56px;height:6px;margin-top:16px;border-radius:1.5px;background:var(--blue);transform:skewX(-20deg);transform-origin:0 100%}
.on-dark .head h2::after{background:var(--sky)}
.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 tiles (home page) */
.tiles{display:grid;gap:14px}
.tile{position:relative;display:flex;flex-direction:column;padding:22px 20px 18px;border:1px solid var(--line);border-bottom:5px solid var(--sky);border-radius:var(--radius);background:var(--white);transition:box-shadow .18s,border-color .18s}
.tile:hover{border-color:var(--blue);box-shadow:0 14px 30px rgba(15,31,61,.12)}
.tile__icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:var(--radius);background:var(--navy);color:var(--sky)}
.tile__icon .ico{width:28px;height:28px}
.tile h3{margin-bottom:.35em;font-size:1.42rem}
.tile h3 a{color:var(--ink);text-decoration:none}
.tile h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.tile:hover h3 a{color:var(--blue)}
.tile p{margin-bottom:0;font-size:1rem}
.tile .more{margin-top:auto;padding-top:14px;font-size:.98rem}
@media (max-width:599px){
  /* phones: icon beside the words, so eight tiles do not make the page a mile long */
  .tile{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:16px 15px 15px}
  .tile__icon{grid-row:span 2;width:44px;height:44px;margin:2px 0 0}
  .tile__icon .ico{width:24px;height:24px}
  .tile h3{font-size:1.3rem;margin-bottom:.2em}
  .tile p{font-size:.97rem;line-height:1.5}
  .tile .more{display:none}
}
@media (min-width:600px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}}

/* the Checkatrade score */
.rating{display:inline-flex;align-items:center;gap:16px;margin-top:6px;padding:12px 18px 12px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.rating:hover{border-color:var(--blue);box-shadow:0 10px 24px rgba(15,31,61,.1);color:var(--ink)}
.rating__score{flex:none;display:grid;place-items:center;min-width:76px;height:64px;padding:0 8px;border-radius:var(--radius);background:var(--navy);color:var(--white);font-family:var(--head);font-size:2.1rem;font-weight:700;line-height:1}
.rating__score small{font-size:1.1rem;color:var(--sky-pale)}
.rating__text{display:grid;gap:2px;line-height:1.35;font-size:.98rem}
.rating__text strong{font-size:1.06rem}
.rating__text span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;color:var(--blue);font-weight:650}
.on-dark .rating--dark{background:var(--navy-soft);border-color:var(--navy-soft);color:var(--white)}
.on-dark .rating--dark .rating__score{background:var(--navy-deep)}
.on-dark .rating--dark .rating__text span{color:var(--sky-pale)}
.on-dark .rating--dark:hover{border-color:var(--sky)}

/* reviews */
.reviews{display:grid;gap:16px}
.review{display:flex;flex-direction:column;padding:22px 22px 18px;border-radius:var(--radius);background:var(--mist);border-left:6px solid var(--sky)}
.section--mist .review{background:var(--white)}
.review__score{display:flex;align-items:center;gap:7px;margin:0 0 10px;color:var(--navy);font-weight:700}
.review__score .ico{width:20px;height:20px;color:var(--blue);fill:currentColor}
.review h3{margin-bottom:.35em;font-size:1.3rem}
.review__text{color:var(--ink);font-size:1.04rem}
.review__meta{margin:auto 0 0;padding-top:4px;color:var(--muted);font-size:.92rem}
.reviews__note{margin:22px 0 0;color:var(--muted);font-size:.98rem}
@media (min-width:720px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1000px){.reviews{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-radius:var(--radius);background:var(--white);border:1px solid var(--line)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-bottom:4px solid var(--sky)}
.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{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.gallery--six{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.gallery figcaption{padding:12px 14px 13px;font-size:1rem}}

/* photos */
figure{margin:0}
.shot{position:relative;padding-bottom:6px}
.shot__img{overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;aspect-ratio:4/3;background:var(--mist)}
.shot__img img{width:100%;height:100%;object-fit:cover}
.shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;border-radius:0 0 3px 3px;background:var(--sky)}

/* dark bands */
.band{position:relative;overflow:hidden;padding:62px 0}
.band--dark{background-color:var(--navy)}
.band .prose p,.band__copy p{color:var(--pale)}
.signs{display:grid;gap:14px}
.signs li{padding:20px 20px 18px;border-radius:var(--radius);background:var(--navy-soft);border-left:6px solid var(--sky)}
.signs h3{margin-bottom:.3em;font-size:1.3rem}
.signs p{margin:0;color:var(--pale);font-size:1rem}
.band__grid{display:grid;gap:30px}
.band__list{padding:24px 22px;border-radius:var(--radius);background:var(--navy-soft)}
.band__list h3{font-size:1.32rem;margin-bottom:.45em}
.band__h3b{margin-top:22px}
@media (min-width:600px){.signs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (min-width:1000px){
  .band{padding:96px 0}
  .signs{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .band__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
  .band__list{padding:30px 32px}
}

/* closing call to action (home page) */
.cta{padding:52px 0;background:var(--blue)}
.cta__in{display:grid;gap:10px}
.cta .head{margin-bottom:16px}
.cta .head h2::after{background:var(--white)}
.cta p{color:var(--white);font-size:1.1rem;max-width:620px}
.cta .actions{margin-top:6px}
.cta .btn--light{background:var(--white);border-color:var(--white)}
.cta .btn--light:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:var(--white)}
.cta .btn--ghost{border-color:var(--white)}
@media (max-width:479px){.cta .actions .btn{width:100%}}
@media (min-width:1000px){.cta{padding:72px 0}.cta__in{grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}.cta p{margin-bottom:0}}

/* 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:1px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--text);font-size:1rem;line-height:1.5;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.whatwe a:hover{border-color:var(--blue);box-shadow:0 10px 24px rgba(15,31,61,.1)}
.whatwe .ico{width:26px;height:26px;margin-top:2px;color:var(--blue)}
.whatwe strong{display:block;margin-bottom:3px;color:var(--ink);font-family:var(--head);font-size:1.3rem;font-weight:700}
@media (min-width:600px){.whatwe{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1000px){.whatwe{grid-template-columns:repeat(4,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(--navy);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}}

/* coverage and maps */
.cover{display:grid;gap:30px}
.map{position:relative;height:340px;border-radius:var(--radius);overflow:hidden;background:var(--mist);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(--blue);border-radius:var(--radius);background:var(--white)}
.areas__group h3{margin-bottom:.3em;font-size:1.36rem}
.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(--mist);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-weight:700;font-size:1.06rem;line-height:1.4;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(--blue) 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(--blue)}

/* services page */
.svc-intro{max-width:820px}
/* jump to a service: eight equal tiles */
.svc-nav{margin-top:34px}
.svc-nav__title{margin-bottom:14px;font-size:1.45rem}
.svc-nav ul{display:grid;grid-template-columns:repeat(2,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(--sky);border-radius:var(--radius);background:var(--white);color:var(--ink);font-weight:700;font-size:1rem;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(--blue);color:var(--blue);box-shadow:0 10px 24px rgba(15,31,61,.1)}
.svc-nav__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--radius);background:var(--navy);color:var(--sky)}
.svc-nav__icon .ico{width:24px;height:24px}
.svc-nav__name{text-wrap:balance}
@media (max-width:599px){
  /* phones: icon beside the name, so the tiles stay compact */
  .svc-nav a{flex-direction:row;align-items:center;gap:10px;padding:10px 10px 9px;border-bottom-width:4px;font-size:.96rem;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:600px){.svc-nav ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media (min-width:1100px){.svc-nav{margin-top:44px}.svc-nav ul{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.svc-nav a{padding:20px 8px 16px;font-size:.98rem}}

/* each service: one large photo, the words, one box holding both lists, then the button */
.service__icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:var(--radius);background:var(--navy);color:var(--sky)}
.service__icon .ico{width:28px;height:28px}
.service__grid{display:grid;gap:26px}
.service h2{margin-bottom:.6em}
.service__review .reviews--one{display:block}
.review--feature{padding:30px 28px 24px;border-left:0;border-top:6px solid var(--sky);background:var(--navy)}
.review--feature h3{color:var(--white);font-size:1.6rem}
.review--feature .review__text{color:var(--white);font-size:1.18rem;line-height:1.6}
.review--feature .review__score{color:var(--white)}
.review--feature .review__score .ico{color:var(--sky)}
.review--feature .review__meta{color:var(--pale)}
.section--mist .review--feature{background:var(--navy)}
.service__review .reviews__note{margin-top:12px}
.details{display:grid;margin-top:30px;border:1px solid var(--line);border-top:6px solid var(--blue);border-radius:var(--radius);background:var(--white)}
.section--mist .details{background:var(--white)}
.detail{padding:20px 20px 8px}
.detail--know{border-top:1px solid var(--line)}
.detail h3{margin-bottom:.4em;font-size:1.32rem}
.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(--sky);transform:skewX(-20deg)}
.service__cta{margin-top:24px}
@media (min-width:720px){
  .details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail{padding:24px 28px 12px}
  .detail--know{border-top:0;border-left:1px solid var(--line)}
}
@media (min-width:1000px){
  .service__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
  .service--flip .service__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .service--flip .service__grid>:first-child{order:2}
  .details{margin-top:44px}
}

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

/* ----------------------------------------------------------------- form -- */
.contact{display:grid;gap:30px}
.contact__tel{font-variant-numeric:lining-nums;display:inline-flex;align-items:center;gap:12px;margin:6px 0 18px;color:var(--ink);font-family:var(--head);font-size:clamp(2rem,8vw,2.7rem);font-weight:700;line-height:1.1;text-decoration:none;white-space:nowrap}
.contact__tel .ico{width:28px;height:28px;color:var(--blue)}
.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(--blue)}
.contact__list a{color:var(--ink);font-weight:650}
.contact__form{padding:24px 20px;border:1px solid var(--line);border-top:6px solid var(--blue);border-radius:var(--radius);background:var(--white);box-shadow:0 14px 34px rgba(15,31,61,.09)}
.form{display:grid;gap:15px}
.form__row{display:grid;gap:15px}
.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 #8f9bb0;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(--sky);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 104px;background-color:var(--navy-deep);font-size:1rem}
.footer__grid{display:grid;gap:34px}
/* the logo's navy script needs a light ground, so it sits on a white plate */
.footer__logo{display:inline-block;margin-bottom:18px;padding:10px 14px;border-radius:var(--radius);background:var(--white)}
.footer__logo img{width:auto;height:44px}
.footer__about p{max-width:340px;color:var(--pale)}
.footer h2{margin-bottom:14px;font-size:1.3rem}
.footer h2::after{content:"";display:block;width:34px;height:4px;margin-top:9px;border-radius:1px;background:var(--sky);transform:skewX(-20deg);transform-origin:0 100%}
.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(--sky)}
.footer__legal{margin:38px 0 0;padding-top:22px;border-top:1px solid #23345c;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}.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(--blue);color:var(--white);font-weight:700;font-size:1.06rem;text-decoration:none;white-space:nowrap;box-shadow:0 10px 26px rgba(11,27,64,.38);transition:background-color .15s}
.fcall:hover{background:var(--blue-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,.signs p,.band .prose p,.band__copy p{color:#000!important}
}