/* Imagine Installations | kitchenfittershawlands.co.uk
   The look comes from the firm's own branding on imagineinstallations.co.uk:
   the deep green and gold of its house emblem, the warm cream it uses for
   backgrounds, and its two typefaces, Playfair Display for headings and Inter
   for text. The emblem draws a gold outline offset from a green one; the photo
   frames and the gold rule under each heading echo that double line. The
   firm's list of trades runs under every 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: 375, 480, 600, 720, 1000 (also in main.js), 1200. */

@font-face{font-family:"Playfair Display";src:url("playfair-var-latin.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("inter-var-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --green:#033816;
  --green-deep:#022a10;
  --green-logo:#1b3d2f;
  --pine:#0f2e1c;
  --pine-deep:#0b2416;
  --pine-soft:#1a3d29;
  --gold:#b89a3a;
  --gold-light:#d1a84b;
  --gold-pale:#e6ca91;
  --cream:#f8f5ee;
  --cream-deep:#eeebe4;
  --ink:#1b241d;
  --text:#343e36;
  --muted:#4e594f;
  --line:#dad7d0;
  --white:#fff;
  --pale:#c9cfc4;
  --err:#b3261e;
  --gutter:16px;
  --radius:6px;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",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='%23033816' 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-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1a84b' 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.7;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(--serif);font-weight:700;line-height:1.14;margin:0 0 .55em;text-wrap:balance;font-variant-numeric:lining-nums}
h1{font-size:clamp(2.4rem,10vw,4rem);letter-spacing:-.01em;line-height:1.06}
h2{font-size:clamp(1.75rem,6vw,2.5rem);letter-spacing:-.005em}
h3{font-size:1.24rem;line-height:1.25}
p{margin:0 0 1.05em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--green);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gold-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(--green);border-radius:var(--radius);background:var(--green);color:var(--cream);font-family:var(--sans);font-weight:650;font-size:1rem;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(--green-deep);border-color:var(--green-deep)}
.btn .ico{width:18px;height:18px}
.btn--gold{background:var(--gold-light);border-color:var(--gold-light);color:var(--ink)}
.btn--gold:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn--line{background:var(--white);color:var(--green)}
.btn--line:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
.btn--ghost{background:transparent;border-color:rgba(248,245,238,.7);color:var(--cream)}
.btn--ghost:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.on-dark .btn--gold{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(--green);font-weight:650;text-decoration:none}
a.more:hover{text-decoration:underline}
.on-dark .more{color:var(--gold-light)}
.tel-link{font-weight:650;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:.95rem;font-weight:550}

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

/* --------------------------------------------------------------- header -- */
.topbar{background:var(--pine-deep);font-size:.82rem;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(--cream);text-decoration:none;white-space:nowrap}
.on-dark a.topbar__item{color:var(--cream)}
.topbar__item .ico{width:15px;height:15px;color:var(--gold-light)}
.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(--white);box-shadow:0 1px 0 var(--line),0 6px 18px rgba(27,36,29,.07)}
.header__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:66px}
.brand{flex:none;display:block;padding:8px 0}
.brand img{width:auto;height:36px}
.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:650;font-size:1.08rem;text-decoration:none;white-space:nowrap}
.header__tel .ico{width:19px;height:19px;color:var(--green)}
.header__tel:hover span{text-decoration:underline}
.header__cta{flex:none;min-height:42px;padding:8px 10px;font-size:.88rem}
.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(--green);border-radius:var(--radius);background:var(--white);cursor:pointer}
.burger span{display:block;height:2px;background:var(--green);border-radius:2px}
html:not(.js) .burger{display:none}

.nav{font-weight:600;font-size:1.02rem}
.nav__list a{display:block;padding:12px 14px;border-radius:6px;color:var(--ink);text-decoration:none}
.nav__list a:hover{color:var(--green)}
.nav__list a[aria-current="page"]{color:var(--green)}
.js .nav{display:none;position:absolute;top:100%;left:0;right:0;padding:8px;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold-light);border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(27,36,29,.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:375px){
  .brand img{height:38px}
  .header__in{gap:10px}
}
@media (min-width:380px){
  :root{--gutter:20px}
  .header__cta{padding:9px 16px;font-size:.95rem}
  .burger{width:46px;height:44px}
}
@media (min-width:480px){.brand img{height:44px}}
@media (min-width:600px){
  :root{--gutter:28px}
  .header__in{min-height:80px;gap:18px}
  .brand img{height:50px}
  .header__actions{gap:16px}
  .header__cta{min-height:46px;padding:10px 22px;font-size:1rem}
}
@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}
  .nav__list a[aria-current="page"]::after{content:"";position:absolute;left:9px;right:9px;bottom:2px;height:3px;border-radius:2px;background:var(--gold-light)}
  .burger{display:none}
  .header__in{min-height:88px;gap:14px}
  .brand img{height:50px}
  .nav{font-size:.98rem}
  .header__actions{gap:14px}
  .header__tel{font-size:1rem;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.08rem;gap:8px}
  .header__tel .ico{width:19px;height:19px}
  .header__cta{padding:10px 22px}
  .brand img{height:58px}
}

/* ----------------------------------------------------------------- hero -- */
.hero,.phero{position:relative;overflow:hidden;background-color:var(--green)}
.hero{padding:36px 0 44px}
.hero__in{position:relative;display:grid;gap:34px}
.hero__copy{position:relative;z-index:2}
.hero h1{margin-bottom:.3em}
.hero__sub{margin:0 0 .85em;font-family:var(--serif);font-size:clamp(1.2rem,4.6vw,1.5rem);font-weight:600;line-height:1.35;color:var(--gold-pale)}
.lead{font-size:1.06rem;color:var(--pale);max-width:620px}
.hero .actions{margin-top:24px}
@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(--cream);font-weight:550;font-size:.97rem}
.hero__trust li{display:flex;align-items:center;gap:8px}
.hero__trust .ico{width:20px;height:20px;color:var(--gold-light)}

/* the photo frame: a gold outline offset from the picture, like the emblem's two outlines */
.hero__photo{position:relative;margin:0 14px 14px 0}
.hero__photo img{position:relative;z-index:1;width:100%;object-fit:cover;border-radius:var(--radius)}
.hero__photo img{aspect-ratio:16/10;background:var(--pine-soft)}
.hero__photo::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--gold-light);border-radius:var(--radius)}
.hero__photo figcaption{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;width:fit-content;max-width:calc(100% - 24px);margin:0;padding:6px 12px;border-radius:4px;background:rgba(11,36,22,.86);color:var(--cream);font-size:.82rem;font-weight:500;line-height:1.35}

.phero{padding:30px 0 40px}
.phero__in{position:relative;z-index:2}
.phero h1{font-size:clamp(2.1rem,8vw,3.4rem);max-width:18em}
.phero .lead{margin-bottom:0;max-width:700px}
.crumbs{margin-bottom:20px;font-size:.9rem;font-weight:500}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--gold-light)}
.crumbs [aria-current]{color:var(--pale)}

/* the firm's list of trades */
.trades{background:var(--pine-deep);border-top:3px solid var(--gold-light)}
.trades__in{display:grid;gap:6px;padding-block:15px;text-align:center}
.trades__lead{margin:0;color:var(--cream);font-family:var(--serif);font-weight:600;font-size:1.12rem;line-height:1.3}
.trades__list{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;color:var(--pale);font-size:.84rem;font-weight:550;letter-spacing:.04em}
.trades__list li{white-space:nowrap}
.trades__list li+li::before{content:"";display:inline-block;width:5px;height:5px;margin:0 10px;border-radius:50%;background:var(--gold-light);vertical-align:.2em}

@media (min-width:600px){
  .hero{padding:52px 0 60px}
  .phero{padding:44px 0 56px}
}
@media (min-width:1000px){
  .hero{padding:70px 0 80px}
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
  .hero h1{font-size:clamp(3.4rem,5vw,4.2rem)}
  .lead{font-size:1.1rem}
  .hero__photo img{aspect-ratio:4/3.6}
  .hero__photo{margin:0 18px 18px 0}
  .hero__photo::after{inset:18px -18px -18px 18px}
  .phero{padding:58px 0 70px}
  .trades__in{gap:4px;padding-block:17px 19px}
  .trades__list{font-size:.84rem}
}

/* ------------------------------------------------------------- sections -- */
.section{padding:58px 0}
.section--cream{background:var(--cream)}
.section--tight{padding-bottom:40px}
.head{margin-bottom:22px}
.head h2{margin-bottom:0}
.head h2::after,.service h2::after{content:"";display:block;width:64px;height:3px;margin-top:16px;border-radius:2px;background:var(--gold);box-shadow:0 7px 0 -1px var(--green)}
.on-dark .head h2::after{background:var(--gold-light);box-shadow:0 7px 0 -1px var(--cream)}
.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 */
.cards{display:grid;gap:16px}
.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(--gold);box-shadow:0 14px 30px rgba(27,36,29,.12)}
.card__img{overflow:hidden;aspect-ratio:3/2;background:var(--cream);border-bottom:3px solid var(--gold-light)}
.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.32rem}
.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(--green)}
.card p{margin-bottom:0;font-size:.97rem}
.card .more{margin-top:auto;padding-top:16px;font-size:.95rem}
@media (max-width:599px){
  /* phones: photo beside the words, so six cards do not make the page a mile long */
  .card{flex-direction:row;min-height:138px}
  .card__img{position:relative;flex:none;width:36%;aspect-ratio:auto;border-bottom:0;border-right:3px solid var(--gold-light)}
  .card__img img{position:absolute;inset:0}
  .card__body{padding:14px 14px 13px}
  .card .more{display:none}
  .card h3{font-size:1.16rem}
  .card p{font-size:.93rem;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(3,minmax(0,1fr));gap:24px}}

/* kitchen styles */
.styles{display:grid;gap:18px}
.style{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);background:var(--white);box-shadow:0 1px 0 var(--cream-deep),0 10px 26px rgba(27,36,29,.07)}
.style__img{aspect-ratio:16/9;overflow:hidden;background:var(--cream-deep)}
.style__img img{width:100%;height:100%;object-fit:cover}
.style__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 20px}
.style h3{margin-bottom:.3em;font-size:1.5rem}
.style p{font-size:.98rem}
.style .style__eg{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
@media (min-width:800px) and (max-width:999px){
  .style{flex-direction:row}
  .style__img{flex:none;width:40%;aspect-ratio:auto}
}
@media (min-width:1000px){.styles{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.style__img{aspect-ratio:4/3}}

/* what a fitting includes */
.included{display:grid;gap:30px}
.ticks--card{padding:22px 22px 18px;border:1px solid var(--line);border-top:3px solid var(--gold-light);border-radius:var(--radius);background:var(--cream)}
.ticks--card li{padding-block:8px;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}.ticks--card{padding:28px 30px 24px}}

/* photos */
figure{margin:0}
figcaption{margin-top:10px;font-size:.9rem;line-height:1.45;color:var(--muted)}
.shot__img{overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;background:var(--cream)}
.shot__img img{width:100%;height:100%;object-fit:cover}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.pair .shot__img{aspect-ratio:3/4}
.pair figcaption{font-size:.86rem}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
.tile__img{overflow:hidden;border-radius:var(--radius);aspect-ratio:1/1;background:var(--cream-deep)}
.tile__img img{width:100%;height:100%;object-fit:cover}
.tile figcaption{margin-top:8px;font-size:.9rem;font-weight:550;color:var(--ink)}
@media (min-width:600px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}.pair{gap:18px}}
@media (min-width:1000px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px}}

/* testimonial */
.testimonial{margin-top:24px;padding:24px 22px;border-left:3px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;background:var(--white)}
.testimonial__icon{display:block;width:30px;height:30px;margin-bottom:10px;color:var(--gold)}
.testimonial__icon .ico{width:30px;height:30px;fill:currentColor;stroke:none}
.testimonial h3{margin-bottom:.35em;font-size:1.2rem}
.testimonial p{font-size:.98rem}
.testimonial figcaption{margin-top:0;font-size:.84rem}

/* dark bands */
.band{position:relative;overflow:hidden;padding:62px 0}
.band--dark{background-color:var(--pine)}
.reasons{display:grid;gap:22px 30px}
.reasons li{padding-top:16px;border-top:2px solid var(--gold-light)}
.reasons h3{margin-bottom:.35em;font-size:1.26rem}
.reasons p{margin:0;color:var(--pale)}
.band__grid{display:grid;gap:30px}
.band__copy p{color:var(--pale)}
@media (min-width:600px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .band{padding:96px 0}
  .reasons{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 46px}
  .band__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
}

/* how it works: no numbers, on request */
.steps{display:grid;gap:14px}
.steps li{padding:22px;border:1px solid var(--line);border-top:3px solid var(--green);border-radius:var(--radius);background:var(--white)}
.steps h3{margin-bottom:.3em}
.steps p{margin:0;font-size:.97rem}
@media (min-width:600px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (min-width:1000px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
  .steps li{padding:26px 22px 24px}
  .steps--three{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* brands */
.brands{display:grid;gap:30px}
.brands__list{margin:0;border-top:2px solid var(--gold)}
.brands__list div{padding:14px 0;border-bottom:1px solid var(--line)}
.brands__list dt{font-family:var(--serif);font-size:1.12rem;font-weight:700;color:var(--ink)}
.brands__list dd{margin:2px 0 0;color:var(--text)}
@media (min-width:1000px){.brands{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}}

/* coverage and maps */
.cover{display:grid;gap:30px}
.map{position:relative;height:340px;border-radius:var(--radius);overflow:hidden;background:var(--cream);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.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:3px solid var(--gold-light);border-radius:var(--radius);background:var(--white)}
.areas__group h3{margin-bottom:.3em;font-size:1.3rem}
.areas__group>p{font-size:.97rem;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(--cream);color:var(--ink);font-size:.8rem;font-weight:600;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:600;font-size:1.02rem;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(--green) 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:.98rem}
.faq .answer p{margin:0}
.on-dark .faq a:not(.btn){color:var(--green)}

/* services page */
.svc-intro{display:grid;gap:28px}
.bars{padding:20px;border-radius:var(--radius);background:var(--pine)}
.bars__title{margin-bottom:14px;color:var(--white);font-size:1.3rem;text-align:left}
.bars ul{display:grid;gap:6px}
.bars a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;background:var(--pine-soft);color:var(--white);font-weight:600;font-size:.97rem;line-height:1.25;text-decoration:none;transition:background-color .15s,color .15s}
.bars a .ico{width:20px;height:20px;color:var(--gold-light)}
.bars a:hover{background:var(--gold-light);color:var(--ink)}
.bars a:hover .ico{color:var(--ink)}
@media (min-width:480px){.bars ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.service__icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:var(--radius);background:var(--green);color:var(--gold-pale)}
.service__icon .ico{width:28px;height:28px}
.service__grid{display:grid;gap:26px}
.service h2{margin-bottom:.6em}
.lists{display:grid;gap:22px;margin-top:30px}
.lists h3{margin-bottom:.5em;font-size:1.15rem}
@media (min-width:600px){.lists{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}}
@media (min-width:1000px){
  .svc-intro{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
  .service__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:center}
  .service--flip .service__grid>:first-child{order:2}
  .lists{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(--serif);font-size:clamp(1.8rem,7.4vw,2.4rem);font-weight:700;line-height:1.1;text-decoration:none;white-space:nowrap}
.contact__tel .ico{width:28px;height:28px;color:var(--green)}
.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(--green)}
.contact__list a{color:var(--ink);font-weight:600}
.contact__form{padding:24px 20px;border:1px solid var(--line);border-top:3px solid var(--gold-light);border-radius:var(--radius);background:var(--white);box-shadow:0 14px 34px rgba(27,36,29,.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:.92rem;font-weight:600;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 #a7ada3;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(--gold-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:.9rem;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:.98rem}
.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:.88rem;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 96px;background-color:var(--pine-deep);font-size:.96rem}
.footer__grid{display:grid;gap:34px}
.footer__logo{display:inline-block;margin-bottom:16px}
.footer__logo img{width:auto;height:58px}
.footer__about p{max-width:340px;color:var(--pale)}
.footer h2{margin-bottom:14px;font-size:1.15rem}
.footer h2::after{content:"";display:block;width:34px;height:2px;margin-top:9px;border-radius:2px;background:var(--gold-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(--gold-light)}
.footer__legal{margin:38px 0 0;padding-top:22px;border-top:1px solid #23402f;color:var(--pale);font-size:.88rem}
@media (min-width:600px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}
@media (min-width:700px){.footer{padding-bottom:44px}}
@media (min-width:1000px){.footer{padding-top:76px}.footer__grid{grid-template-columns:1.2fr 1fr .8fr 1.4fr;gap:44px}}

/* phone bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:1px;background:var(--white);box-shadow:0 -4px 16px rgba(27,36,29,.22)}
.mbar a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:7px;min-height:54px;padding:8px 6px;font-weight:650;font-size:.95rem;text-decoration:none;white-space:nowrap}
.mbar .ico{width:19px;height:19px}
.mbar__call{background-color:var(--green);color:var(--cream)}
.mbar__form{background-color:var(--gold-light);color:var(--ink)}
@media (min-width:380px){.mbar a{gap:9px;padding:8px 12px;font-size:1rem}}
@media (min-width:700px){.mbar{display:none}}

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