/* I FIX Property Maintenance | houserenovationscolchester.co.uk
   The look comes from the firm's own logo and old website: "IFIX" in heavy
   white capitals over a white bar, on a black header, with black, white and
   grey everywhere else and Montserrat for the type. The photos of the firm's
   own jobs bring the colour. The bar in the logo returns under every heading,
   along the bottom of the photos and cards, and above the strip under each hero.
   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: 380, 480, 600, 720, 1000 (also in main.js), 1200. */

@font-face{font-family:"Montserrat";src:url("montserrat-var-latin.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --black:#0d0d0d;
  --char:#161616;
  --char-2:#222222;
  --char-3:#303030;
  --ink:#111111;
  --text:#383838;
  --muted:#595959;
  --line:#dcdcd7;
  --paper:#f4f3f0;
  --paper-deep:#e5e4df;
  --white:#fff;
  --pale:#c9c9c6;
  --soft:#a3a3a0;
  --err:#b3261e;
  --gutter:16px;
  --radius:4px;
  --sans:"Montserrat",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='%23111111' 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='%23ffffff' 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:1rem;font-weight:400;line-height:1.72;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);margin:0 0 .55em;text-wrap:balance}
h1,h2{font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,8.6vw,3.9rem);line-height:1.04}
h2{font-size:clamp(1.7rem,5.6vw,2.45rem);line-height:1.12}
h3{font-size:1.12rem;font-weight:700;line-height:1.35;letter-spacing:-.005em}
p{margin:0 0 1.05em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--black);text-decoration-thickness:2px}
:focus-visible{outline:3px solid #5b8def;outline-offset:3px;border-radius:3px}
strong{color:inherit;font-weight:700}
.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:4px;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(--black);border-radius:var(--radius);background:var(--black);color:var(--white);font-family:var(--sans);font-weight:700;font-size:.98rem;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(--white);color:var(--black);border-color:var(--black)}
.btn .ico{width:18px;height:18px}
.btn--line{background:var(--white);color:var(--black)}
.btn--line:hover{background:var(--black);color:var(--white)}
/* on the black parts of the page: white buttons, as on the old site */
.on-dark .btn,.btn--light{background:var(--white);border-color:var(--white);color:var(--black)}
.on-dark .btn:hover,.btn--light:hover{background:var(--paper-deep);border-color:var(--paper-deep);color:var(--black)}
.on-dark .btn--ghost{background:transparent;border-color:rgba(255,255,255,.75);color:var(--white)}
.on-dark .btn--ghost:hover{background:var(--white);border-color:var(--white);color:var(--black)}
.btn[disabled]{opacity:.65;cursor:progress}

.more{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:700;text-decoration:none}
a.more:hover{text-decoration:underline}
.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}

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

/* --------------------------------------------------------------- header -- */
.topbar{background:var(--char-2);font-size:.8rem;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(--pale);text-decoration:none;white-space:nowrap}
.on-dark a.topbar__item{color:var(--pale)}
.topbar__item .ico{width:15px;height:15px;color:var(--white)}
.topbar__msg{display:none}
.topbar__mail{margin-left:auto}
.topbar__mail:hover span{text-decoration:underline}

.header{position:sticky;top:0;z-index:50;background:var(--black);box-shadow:0 1px 0 #262626,0 6px 18px rgba(0,0,0,.25)}
.header__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:72px}
.brand{flex:none;display:flex;align-items:center;padding:8px 0;text-decoration:none}
.brand img{width:auto;height:50px}
.header__actions{flex:none;display:flex;align-items:center;gap:8px}
.header__tel{display:none;align-items:center;gap:8px;font-weight:700;font-size:1rem;text-decoration:none;white-space:nowrap}
.header__tel .ico{width:18px;height:18px}
.header__tel:hover span{text-decoration:underline}
.header__cta{flex:none;min-height:42px;padding:8px 10px;font-size:.84rem}
.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(--white);border-radius:var(--radius);background:var(--black);cursor:pointer}
.burger span{display:block;height:2px;background:var(--white);border-radius:2px}
html:not(.js) .burger{display:none}

.nav{font-weight:600;font-size:.98rem}
.nav__list a{display:block;padding:12px 14px;border-radius:4px;color:var(--white);text-decoration:none}
.nav__list a:hover{color:var(--white);background:var(--char-3)}
.nav__list a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--white)}
.js .nav{display:none;position:absolute;top:100%;left:0;right:0;padding:8px;background:var(--black);border:1px solid #2a2a2a;border-top:4px solid var(--white);border-radius:0 0 8px 8px;box-shadow:0 14px 30px rgba(0,0,0,.4)}
.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:375px){.header__in{gap:10px}}
@media (min-width:380px){
  :root{--gutter:20px}
  .header__cta{padding:9px 14px;font-size:.9rem}
  .burger{width:46px;height:44px}
}
@media (min-width:600px){
  :root{--gutter:28px}
  .header__in{min-height:84px;gap:16px}
  .brand img{height:58px}
  .header__actions{gap:16px}
  .header__cta{min-height:46px;padding:10px 22px;font-size:.98rem}
}
@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 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;font-size:.94rem}
  .nav__list a:hover{background:none;text-decoration:underline;text-underline-offset:6px}
  .nav__list a[aria-current="page"]{box-shadow:none}
  .nav__list a[aria-current="page"]::after{content:"";position:absolute;left:9px;right:9px;bottom:1px;height:4px;background:var(--white)}
  .burger{display:none}
  .header__in{min-height:90px;gap:12px}
  .brand img{height:58px}
  .header__actions{gap:14px}
  .header__tel{font-size:.96rem;gap:6px}
  .header__cta{padding:10px 16px}
}
@media (min-width:1200px){
  .strip__in{display:flex;justify-content:center;align-items:center;gap:22px;padding-block:16px}
  .nav,.js .nav{margin-left:40px}
  .nav__list{gap:4px}
  .nav__list a{padding:10px 13px;font-size:.98rem}
  .nav__list a[aria-current="page"]::after{left:13px;right:13px}
  .header__in{gap:18px}
  .header__actions{gap:20px}
  .header__tel{font-size:1.04rem;gap:8px}
  .header__cta{padding:10px 22px}
  .brand img{height:62px}
}

/* ----------------------------------------------------------------- hero -- */
.hero,.phero{position:relative;overflow:hidden;background-color:var(--black)}
.hero{padding:30px 0 42px}
/* the old site's hero: a photo of the work behind a dark veil, white type on top */
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,8,.74) 0%,rgba(8,8,8,.62) 40%,rgba(8,8,8,.86) 100%)}
/* phones: the heading, then the enquiry form straight under it, then the rest */
.hero__in{position:relative;z-index:2;display:grid;gap:24px;grid-template-areas:"head" "form" "copy"}
.hero__head{grid-area:head}
.hero__form{grid-area:form;min-width:0}
.hero__copy{grid-area:copy}
.hero h1{margin-bottom:.12em}
.hero h1::after,.phero h1::after{content:"";display:block;width:72px;height:7px;margin-top:14px;background:var(--white)}
.hero__sub{margin:14px 0 0;font-size:clamp(1.04rem,4.2vw,1.22rem);font-weight:600;line-height:1.45;color:var(--white)}
.lead{font-size:1.02rem;color:var(--pale);max-width:640px}
.hero .lead{margin-bottom:0;color:#dededb}
.hero .actions{margin-top:22px}
@media (max-width:479px){.hero .actions .btn{width:100%}}
.hero__trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:24px 0 0;color:var(--white);font-weight:600;font-size:.9rem;line-height:1.35}
.hero__trust li{display:flex;align-items:center;gap:8px}
.hero__trust .ico{width:20px;height:20px}

/* the enquiry form, in a white card on the hero */
.form-card{padding:22px 18px 20px;border-radius:var(--radius);background:var(--white);color:var(--text);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.on-dark .form-card h2{color:var(--ink)}
/* the white card is a light island on the dark hero: its button goes back to black */
.on-dark .form-card .btn{background:var(--black);border-color:var(--black);color:var(--white)}
.on-dark .form-card .btn:hover{background:var(--white);border-color:var(--black);color:var(--black)}
.on-dark .form-card a:not(.btn){color:var(--ink)}
.form-card__title{margin-bottom:.15em;font-size:clamp(1.55rem,6vw,1.9rem)}
.form-card__title::after{content:"";display:block;width:48px;height:5px;margin-top:10px;background:var(--black)}
.form-card__intro{margin:10px 0 16px;font-size:.95rem;color:var(--muted)}

.phero{padding:30px 0 40px;background:var(--black)}
.phero__in{position:relative;z-index:2}
.phero h1{font-size:clamp(1.85rem,7.4vw,3.3rem);max-width:19em}
.phero .lead{margin-bottom:0;max-width:740px}
.crumbs{margin-bottom:18px;font-size:.88rem;font-weight:500}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--soft)}
.crumbs [aria-current]{color:var(--pale)}

/* the services, in short, under every hero */
.strip{background:var(--char);border-top:5px solid var(--white)}
.strip__in{display:grid;gap:4px;padding-block:14px;text-align:center}
.strip__lead{margin:0;color:var(--white);font-weight:800;font-size:1.06rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.strip__list{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;color:var(--pale);font-size:.86rem;font-weight:500;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;background:var(--white);vertical-align:.3em}

@media (min-width:600px){
  .hero{padding:46px 0 56px}
  .form-card{padding:28px 28px 24px}
  .phero{padding:44px 0 54px}
  .hero__trust{display:flex;flex-wrap:wrap}
}
@media (min-width:1000px){
  .hero{padding:72px 0 84px}
  .hero::before{background:linear-gradient(90deg,rgba(8,8,8,.84) 0%,rgba(8,8,8,.64) 48%,rgba(8,8,8,.3) 100%)}
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-areas:"head form" "copy form";column-gap:64px;row-gap:22px;align-items:start}
  .hero__head{align-self:end;padding-top:24px}
  .hero h1{font-size:clamp(3.4rem,5.2vw,4.2rem)}
  .lead{font-size:1.06rem}
  .phero{padding:56px 0 66px}
}

/* ------------------------------------------------------------- sections -- */
.section{padding:56px 0}
.section--paper{background:var(--paper)}
.section--tight{padding-bottom:40px}
.head{margin-bottom:20px}
.head h2{margin-bottom:0}
/* the bar under "IFIX" in the logo, under every section heading */
.head h2::after,.service h2::after{content:"";display:block;width:60px;height:6px;margin-top:14px;background:var(--black)}
.on-dark .head h2::after{background:var(--white)}
.split-head{display:grid;gap:8px;margin-bottom:32px}
.split-head .head{margin-bottom:14px}
@media (min-width:1000px){
  .section{padding:90px 0}
  .section--tight{padding-bottom:52px}
  .head{margin-bottom:28px}
  .split-head{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start;margin-bottom:44px}
}

/* service cards */
.cards{display:grid;gap:14px}
.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,transform .18s}
.card:hover{border-color:var(--black);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.card__img{overflow:hidden;aspect-ratio:4/3;background:var(--paper);border-bottom:5px solid var(--black)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .card__img img{transform:scale(1.04)}
.card__body{display:flex;flex-direction:column;flex:1;min-width:0;padding:18px 18px 18px}
.card h3{margin-bottom:.35em;font-size:1.12rem;font-weight:800}
.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{text-decoration:underline}
.card p{margin-bottom:0;font-size:.93rem;line-height:1.6}
.card .more{margin-top:auto;padding-top:16px;font-size:.92rem}
@media (max-width:599px){
  /* phones: photo beside the words, so eight cards do not make the page a mile long */
  .card{flex-direction:row;min-height:132px}
  .card__img{position:relative;flex:none;width:34%;aspect-ratio:auto;border-bottom:0;border-right:5px solid var(--black)}
  .card__img img{position:absolute;inset:0}
  .card__body{padding:12px 13px 12px}
  .card .more{display:none}
  .card h3{font-size:1.02rem}
  .card p{font-size:.86rem;line-height:1.5}
}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}}

/* a short list in a card beside some text */
.included{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.included__list{padding:24px 22px 18px;border:1px solid var(--line);border-top:6px solid var(--black);border-radius:var(--radius);background:var(--white)}
.included__list .creds{margin-bottom:24px}
.included__title{margin-bottom:.4em;font-size:1.12rem}
.ticks--card li{padding-block:9px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500}
.ticks--card li:last-child{border-bottom:0}
.ticks--card li::before{top:.72em}
@media (min-width:1000px){.included{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:center}.included__list{padding:30px 32px 24px}}

/* the FMB badge and the Checkatrade score */
.creds{display:grid;gap:14px}
.cred{display:flex;align-items:center;gap:18px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.cred h3{margin-bottom:.25em;font-size:1.04rem}
.cred p{margin:0;font-size:.92rem;line-height:1.55}
.cred__badge{flex:none;display:block}
.cred__badge img{width:62px;height:auto}
.cred__score{flex:none;display:flex;align-items:baseline;justify-content:center;width:96px;height:96px;margin:0;padding-top:28px;border-radius:50%;background:var(--black);color:var(--white);line-height:1}
.cred__score strong{font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.cred__score span{font-size:.85rem;font-weight:600;color:var(--pale)}
.section--paper .about__side .cred{box-shadow:0 10px 26px rgba(0,0,0,.06)}
.cred>div{min-width:0}
@media (max-width:479px){.cred{flex-direction:column;align-items:flex-start;gap:12px}}
@media (min-width:480px){.cred{padding:20px 22px}.cred__badge img{width:72px}}

/* 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(--paper)}
.shot__img img{width:100%;height:100%;object-fit:cover}
.shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--black)}

/* the firm's own photos */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gallery figure{height:100%}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;border-bottom:4px solid var(--black);background:var(--paper)}
.gallery figcaption{padding-top:8px;color:var(--ink);font-size:.86rem;font-weight:600;line-height:1.35}
@media (min-width:720px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
@media (min-width:1000px){.gallery{gap:24px}}

/* reviews, paraphrased */
.reviews{display:grid;gap:16px}
.review{position:relative;display:flex;flex-direction:column;padding:22px 22px 20px;border:1px solid var(--line);border-left:6px solid var(--black);border-radius:var(--radius);background:var(--white)}
.review__mark{width:28px;height:auto;margin-bottom:12px;color:var(--black)}
.review h3{margin-bottom:.4em}
.review p{margin:0;font-size:.95rem}
.review .review__who{margin-top:auto;padding-top:14px;color:var(--muted);font-size:.84rem;font-weight:600}
@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:22px}.review{padding:26px 26px 24px}}

/* dark bands */
.band{position:relative;overflow:hidden;padding:60px 0}
.band--dark{background-color:var(--char)}
.band .prose p,.band__copy p{color:var(--pale)}
.band__grid{display:grid;gap:30px}
.why{display:grid;gap:14px}
.why li{padding:22px 20px 20px;border-radius:var(--radius);background:var(--char-2);border-top:4px solid var(--white)}
.why__icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border:2px solid var(--white);border-radius:50%;color:var(--white)}
.why__icon .ico{width:22px;height:22px}
.why h3{margin-bottom:.35em;font-size:1.08rem}
.why p{margin:0;color:var(--pale);font-size:.94rem}
@media (min-width:600px){.why{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (min-width:1000px){
  .band{padding:92px 0}
  .why{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}
}

/* 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-2);color:var(--pale);font-size:.93rem;line-height:1.55;text-decoration:none;transition:background-color .15s}
.whatwe a:hover{background:var(--char-3)}
.whatwe .ico{width:26px;height:26px;margin-top:2px;color:var(--white)}
.whatwe strong{display:block;margin-bottom:4px;color:var(--white);font-size:1.06rem;font-weight:800;line-height:1.25}
.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(4,minmax(0,1fr));gap:18px}}

/* 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(--black);border-radius:var(--radius);background:var(--white)}
.steps h3{margin-bottom:.3em}
.steps p{margin:0;font-size:.95rem;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(--paper-deep);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:.95rem}
.map__fallback strong{font-size:1.1rem;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(--black);border-radius:var(--radius);background:var(--white)}
.areas__group h3{margin-bottom:.3em;font-size:1.12rem}
.areas__group>p{font-size:.93rem;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:600}
.area__code{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:var(--paper-deep);color:var(--ink);font-size:.78rem;font-weight:700;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:1rem;line-height:1.45;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(--black) 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:.96rem}
.faq .answer p{margin:0}
.on-dark .faq a:not(.btn){color:var(--ink)}

/* services page */
.svc-intro{max-width:820px;margin-top:44px}
/* jump to a service: eight equal tiles, first on the page */
.svc-nav__title{margin-bottom:14px;font-size:clamp(1.45rem,5vw,1.8rem)}
.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(--black);border-radius:var(--radius);background:var(--white);color:var(--ink);font-weight:700;font-size:.92rem;line-height:1.3;text-align:center;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.svc-nav a:hover{border-color:var(--black);box-shadow:0 10px 24px rgba(0,0,0,.1)}
.svc-nav__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--radius);background:var(--black);color:var(--white)}
.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 eight tiles stay compact */
  .svc-nav a{flex-direction:row;align-items:center;gap:10px;padding:10px 10px 9px;border-bottom-width:4px;font-size:.84rem;line-height:1.25;text-align:left}
  .svc-nav__icon{flex:none;width:36px;height:36px}
  .svc-nav__icon .ico{width:20px;height:20px}
}
@media (min-width:600px){.svc-nav ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media (min-width:1000px){.svc-nav ul{gap:16px}.svc-nav a{padding:22px 12px 18px;font-size:.96rem}.svc-intro{margin-top:60px}}

/* each service: one large photo, the words, one box with 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(--black);color:var(--white)}
.service__icon .ico{width:28px;height:28px}
.service__grid{display:grid;gap:26px}
.service h2{margin-bottom:.6em}
.details{display:grid;margin-top:30px;border:1px solid var(--line);border-top:6px solid var(--black);border-radius:var(--radius);background:var(--paper)}
.section--paper .details{background:var(--white)}
.detail{padding:20px 20px 8px}
.detail+.detail{border-top:1px solid var(--line)}
.detail h3{margin-bottom:.4em;font-size:1.04rem}
.rows li{position:relative;padding:10px 0 10px 30px;border-top:1px solid var(--line);color:var(--ink);font-size:.95rem;line-height:1.45}
.rows--tick li::before{content:"";position:absolute;left:0;top:11px;width:19px;height:19px;background:var(--tick) center/contain no-repeat}
.rows--bar li::before{content:"";position:absolute;left:2px;top:18px;width:15px;height:5px;background:var(--muted)}
.service .actions{margin-top:26px}
@media (min-width:720px){
  .details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail{padding:24px 26px 10px}
  .detail+.detail{border-top:0;border-left:1px solid var(--line)}
}
@media (min-width:1000px){
  .service__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:60px;align-items:center}
  .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{display:inline-flex;align-items:center;gap:12px;margin:4px 0 18px;color:var(--ink);font-size:clamp(1.8rem,7.6vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1;text-decoration:none;white-space:nowrap}
.contact__tel .ico{width:28px;height:28px}
.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(--ink)}
.contact__list a{color:var(--ink);font-weight:600}
.contact__form{padding:24px 20px;border:1px solid var(--line);border-top:6px solid var(--black);border-radius:var(--radius);background:var(--white);box-shadow:0 14px 34px rgba(0,0,0,.07)}
.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:.9rem;font-weight:700;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 #8f8f8b;border-radius:var(--radius);background:var(--white);color:var(--ink);font:inherit;font-size:1rem}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--black);outline-offset:1px;border-color:var(--black)}
.field [aria-invalid="true"]{border-color:var(--err);border-width:2px}
.field__error{margin:5px 0 0;font-size:.88rem;font-weight:600;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:.95rem}
.form__status a{font-weight:700;white-space:nowrap;color:var(--ink)}
.form .btn{width:100%}
.form__note{display:flex;align-items:center;gap:8px;margin:0;font-size:.85rem;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(--black);font-size:.94rem}
.footer__grid{display:grid;gap:34px}
.footer__brand{display:inline-flex;margin-bottom:18px;text-decoration:none}
.footer__brand img{width:auto;height:64px}
.footer__about p{max-width:340px;color:var(--pale)}
.footer h2{margin-bottom:14px;font-size:1.06rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.2}
.footer h2::after{content:"";display:block;width:34px;height:4px;margin-top:10px;background:var(--white)}
.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:18px;height:18px;margin-top:.25em;color:var(--white)}
.footer__legal{margin:38px 0 0;padding-top:22px;border-top:1px solid #2c2c2c;color:var(--soft);font-size:.86rem}
@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.25fr 1fr .8fr 1.35fr;gap:40px}}

/* the call button, fixed in the bottom right corner: round on phones, with the number from 720px */
.fcall{position:fixed;right:16px;bottom:16px;z-index:45;display:flex;align-items:center;justify-content:center;gap:10px;width:60px;height:60px;border:2px solid var(--white);border-radius:999px;background:var(--black);color:var(--white);font-weight:700;font-size:1rem;text-decoration:none;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:background-color .15s,color .15s}
.fcall:hover{background:var(--white);color:var(--black);border-color:var(--black)}
.fcall .ico{width:25px;height:25px}
.fcall__num{display:none}
@media (min-width:720px){
  .fcall{right:22px;bottom:22px;width:auto;height:56px;padding:0 22px 0 18px}
  .fcall__num{display:inline}
  .fcall .ico{width:21px;height:21px}
}

@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::before{display:none}
  .hero,.phero,.band,.footer,.header{background:#fff!important;color:#000!important}
  .on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark a:not(.btn),.lead,.why p,.band .prose p,.band__copy p{color:#000!important}
}