/* =========================================================
   Microsite Base — shared styles
   Plain CSS, no build step. Edit freely.
   Brand color and font are driven by CSS variables below so
   a single change re-themes the whole site.
   ========================================================= */

:root {
  --brand:        #22303C;   /* {{BRAND_COLOR}} primary brand / links / buttons */
  --brand-dark:   #16212B;   /* darker shade for hovers */
  --ink:          #15212e;   /* body text */
  --ink-soft:     #4a5a6a;   /* secondary text */
  --line:         #e3e8ee;   /* hairlines / borders */
  --bg:           #ffffff;
  --bg-alt:       #f6f8fa;   /* alternating section background */
  --bg-dark:      #15212e;   /* footer / dark band */
  --max:          1320px;    /* content max width */
  --radius:       10px;
  --font-head: 'Public Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.65;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin-bottom: .6em; }
h3 { font-size: 1.25rem; margin-bottom: .35em; }
p  { margin-bottom: 1rem; color: var(--ink-soft); }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--brand); border: 2px solid var(--brand); }
.btn--ghost:hover { background: var(--brand); color: #fff; }
.btn--lg { padding: 18px 38px; font-size: 1.05rem; }

.muted { color: var(--ink-soft); font-size: .9rem; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px 20px; max-width: var(--max); margin: 0 auto;
}
.nav__logo img { max-height: 46px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 22px; list-style: none; }
.nav__links a { color: var(--ink); font-weight: 500; font-size: .97rem; }
.nav__links a:hover { color: var(--brand); text-decoration: none; }

/* dropdown for services */
.has-dropdown { position: relative; }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  min-width: 250px; padding: 8px 0; box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
/* invisible bridge: fills the gap between the menu item and the dropdown
   so hover isn't lost when the mouse travels down into the submenu */
.has-dropdown::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; display: none;
}
.has-dropdown:hover::after { display: block; }
.has-dropdown:hover .dropdown { display: block; }
.dropdown li { list-style: none; }
.dropdown a { display: block; padding: 9px 18px; font-size: .92rem; }
.dropdown a:hover { background: var(--bg-alt); }

.nav__call {
  background: var(--brand); color: #fff !important;
  padding: 10px 18px; border-radius: var(--radius); font-weight: 600;
}
.nav__call:hover { background: var(--brand-dark); text-decoration: none; }

/* mobile nav toggle */
.nav__toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--ink); }
@media (max-width: 900px) {
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 10px 20px; }
  .nav__links.open { display: flex; }
  .nav__links li { width: 100%; padding: 8px 0; }
  .dropdown { position: static; display: block; box-shadow: none; border: 0; padding: 4px 0 4px 14px; min-width: 0; }
  .nav__toggle { display: block; }
}

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,33,46,.55), rgba(21,33,46,.78)); z-index: 1; }
.hero__inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: 90px 20px; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 600; opacity: .9; }
.hero h1 { color: #fff; margin: 10px 0 16px; max-width: 18ch; }
.hero p { color: rgba(255,255,255,.9); font-size: 1.15rem; max-width: 46ch; }
.hero__cta { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- sections ---------- */
.section { padding: 64px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,.82); }
.section__lead { max-width: 65ch; }
.center { text-align: center; }
.center .section__lead { margin: 0 auto; }

/* two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* feature / why-us grid */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px;
}
.section--alt .card { background: #fff; }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }

/* service / area link list */
.linklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; }
@media (max-width: 800px) { .linklist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .linklist { grid-template-columns: 1fr; } }
.linklist a {
  display: block; padding: 14px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 600;
}
.linklist a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

/* cost table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .96rem; }
th { background: var(--bg-alt); font-family: var(--font-body); font-weight: 700; color: var(--ink); }
tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 20px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 600; font-family: var(--font-head); font-size: 1.1rem; padding: 16px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--brand); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: 16px; margin-bottom: 0; }

/* CTA band */
.cta-band { background: var(--brand); color: #fff; text-align: center; padding: 56px 20px; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); }
.cta-band .btn { background: #fff; color: var(--brand); }
.cta-band .btn:hover { background: #f0f3f7; }

/* ---------- estimate / contact form ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--font-body); font-size: 1rem;
}
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-dark); color: rgba(255,255,255,.8); padding: 56px 0 28px; }
.site-footer h4 { color: #fff; margin-bottom: 14px; font-family: var(--font-body); font-size: 1rem; letter-spacing: .02em; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(255,255,255,.8); font-size: .93rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding-top: 20px; font-size: .85rem; color: rgba(255,255,255,.55); }
.footer-disclaimer { font-size: .82rem; color: rgba(255,255,255,.55); margin-top: 10px; line-height: 1.5; }

/* phone link — class is a stable hook for WhatConverts dynamic number insertion */
.wc-phone { font-weight: 700; }
/* ---- Site identity (colours come from site.json) ---- */
:root{--amber:#C25A28;--amber-dark:color-mix(in srgb,#C25A28 82%,#000);--navy:#22303C}
.wordmark{font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em}.wordmark b{color:var(--brand);font-weight:700}
.btn--amber{background:var(--amber)}.btn--amber:hover{background:var(--amber-dark)}
.btn--white{background:#fff;color:var(--ink)}.btn--white:hover{background:#eef2f1;color:var(--ink)}
.btn--navy{background:var(--navy)}.btn--navy:hover{background:#000}
.hero{background:linear-gradient(180deg,#EAF1F0,#F6F8F8);padding:56px 0 60px;display:block;color:var(--ink)}
.hero::after{display:none}
.hero__split{display:grid;grid-template-columns:1fr 460px;gap:48px;align-items:center}
.hero__inner{padding:0;margin:0;width:100%;max-width:none}
.hero__eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;font-weight:700;color:var(--brand);opacity:1}
.hero h1{color:var(--ink);margin:10px 0 14px;max-width:16ch}
.hero p,.hero p.hero__lead{color:var(--ink-soft)}
.hero p.hero__lead{font-size:1.12rem;max-width:46ch}
.hero .hero__eyebrow{color:var(--brand);opacity:1}
.hero__ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:7px}
.hero__ticks li{position:relative;padding-left:26px;color:var(--ink);font-weight:500;font-size:.97rem}
.hero__ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--amber);border-bottom:2.5px solid var(--amber);transform:rotate(-45deg)}
.hero__form{width:100%}
.hero__form .form-card{max-width:none;margin-top:0;box-shadow:0 18px 44px rgba(20,32,31,.14)}
/* ---- Service-area tiles ---- */
.linklist--areas{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.area-link{display:flex;flex-direction:column;gap:2px;padding:14px 18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.area-link:hover{border-color:var(--brand);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(20,32,31,.08);text-decoration:none}
.area-link__name{display:block;font-weight:700;color:var(--ink);line-height:1.3}
.area-link__city{display:block;font-size:.82rem;color:var(--ink-soft);letter-spacing:.04em}
.shot{margin:26px 0}
.shot img{width:100%;border-radius:12px;box-shadow:0 10px 28px rgba(20,32,31,.14);object-fit:cover;aspect-ratio:3/2}
.shot figcaption{font-size:.88rem;color:var(--ink-soft);padding-top:8px;line-height:1.45}
.logos{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:0;margin:0 0 30px}
.logos li{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;min-height:74px}
.logos img{max-height:42px;width:auto;object-fit:contain}
@media(max-width:800px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.logos{grid-template-columns:repeat(2,1fr)}.shot img{aspect-ratio:4/3}}
.hero__photo img{border-radius:14px;box-shadow:0 18px 44px rgba(20,32,31,.18);width:100%;object-fit:cover;aspect-ratio:1080/925}
@media(max-width:900px){.hero__split{grid-template-columns:1fr;gap:28px}.hero__photo{order:-1}.hero__photo img{aspect-ratio:16/10}}
.ico{width:17px;height:17px;flex:0 0 auto;color:var(--brand);vertical-align:-3px;margin-right:7px}
.trust{background:var(--bg-alt);border-bottom:1px solid var(--line)}.trust__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding:12px 20px;font-size:.92rem;font-weight:600;color:var(--ink);max-width:var(--max);margin:0 auto}
.trust__row a{color:var(--brand)}
.content{max-width:var(--max)}
.content>p,.content>ul,.content>ol,.content>h2,.content>h3{max-width:100%}
.content>p,.content>li{font-size:1.02rem;line-height:1.72}
.content .grid{max-width:100%}.content h2{margin-top:2.2rem}.content h3{margin-top:1.4rem}.content ul,.content ol{margin:0 0 1rem 1.3rem}.content li{margin-bottom:.45rem;color:var(--ink-soft)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 1.25rem}
.content .grid{margin:1.4rem 0 2rem}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;box-shadow:0 1px 2px rgba(20,32,31,.04)}
.card__ico{width:26px;height:26px;color:var(--brand);margin-bottom:10px;display:block}
.content .card h3{margin:0 0 .35em;font-size:1.08rem}
.content .card p{margin:0;font-size:.97rem}
.section--alt .card,.card{background:#fff}
.card--tight{padding:18px 20px}
.content .card--tight h3{font-size:1rem;margin-bottom:.3em}
.content .card--tight p{font-size:.93rem}
.phone-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:48px 0;text-align:center}
.phone-strip .sub{max-width:60ch;margin:0 auto 20px}.phone-strip .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.form-card{max-width:640px;margin-top:1rem}
.footer-legal{max-width:105ch;margin:0 auto 12px;font-size:.78rem;line-height:1.55;opacity:.72}
/* ---- Header nav: two items + phone and quote buttons ---- */
.nav__links{gap:26px}
.nav__links>li>a{font-weight:600}
.nav__caret{display:inline-block;width:7px;height:7px;margin-left:7px;vertical-align:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
/* The phone is the one button in the bar, and it wears the site's own accent colour so it
   matches the call buttons on the page. The base sets `color:#fff !important` — leave that. */
.nav__call{background:var(--amber)}
.nav__call:hover{background:var(--amber-dark)}
.nav__quote{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 17px;font-weight:600}
.nav__quote:hover{background:var(--bg-alt);border-color:#c9d4d2;text-decoration:none}
@media(max-width:900px){
  .nav__call,.nav__quote{display:block;text-align:center}
  .nav__caret{float:right;margin-top:6px}
}
/* ---- Google review badge: floating card over the hero photo ---- */
.hero__photo{position:relative}
.gbadge{position:absolute;right:18px;bottom:18px;z-index:2;
  display:inline-flex;align-items:center;gap:13px;padding:12px 20px;background:#fff;
  border-radius:10px;text-decoration:none;color:var(--ink);
  box-shadow:0 6px 22px rgba(20,32,31,.20);transition:transform .15s,box-shadow .15s}
.gbadge:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(20,32,31,.26)}
.gbadge__g{width:34px;height:34px;flex:none}
.gbadge__body{display:flex;flex-direction:column;gap:1px;text-align:left}
.gbadge__label{font-size:.82rem;font-weight:700;color:var(--ink);line-height:1.25}
.gbadge__line{display:flex;align-items:center;gap:6px}
.gbadge__score{font-size:1.02rem;font-weight:700;line-height:1.2;color:var(--ink)}
/* Two stacked star rows; the amber one is clipped to the rating width, so 4.9 is a
   real 98% rather than five whole stars. */
.gbadge__stars{position:relative;display:inline-block;font-size:.95rem;line-height:1.2;
  color:#d8dedd;letter-spacing:1px;white-space:nowrap}
.gbadge__stars::before{content:"★★★★★"}
.gbadge__stars i{position:absolute;left:0;top:0;overflow:hidden;color:#F2A93B;white-space:nowrap}
.gbadge__stars i::before{content:"★★★★★"}
.gbadge__sub{font-size:.72rem;font-weight:500;color:var(--muted,#5b6b69);line-height:1.3;white-space:nowrap}
@media(max-width:900px){.gbadge{right:12px;bottom:12px;padding:10px 15px;gap:10px}
  .gbadge__g{width:29px;height:29px}.gbadge__label{font-size:.76rem}
  .gbadge__score{font-size:.94rem}.gbadge__stars{font-size:.86rem}.gbadge__sub{font-size:.67rem}}

/* ---- Heroes without a photo, and the review badge when it has no photo to sit on ---- */
.hero__split--solo{grid-template-columns:1fr}
.hero__split--solo .hero__inner{max-width:760px}
.hero__side{display:flex;align-items:center;justify-content:center}
.gbadge--inline{position:static}

/* ---- Light / dark toggle: light for everyone; dark only when the visitor picks it (2026-09-11) ---- */
.nav__links{order:2;margin-left:auto}
.theme-toggle{order:3;flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .i-sun{display:none}
@media (max-width:900px){.theme-toggle{order:0;margin-left:auto}.nav__toggle{order:1}}

/* ---- Dark mode (the tokens, plus the places the base sheet hard-codes #fff) ---- */
:root[data-theme="dark"]{--ink:#e7edf3; --ink-soft:#9fb0c0; --line:#2b3947;
    --bg:#131a21; --bg-alt:#182029; --bg-dark:#0d1319;
    --brand:#7fa9c9; --brand-dark:#a3c3dc;
    --surface:#1c252f;}
:root[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .hero{background:linear-gradient(180deg,#182029,#131a21);color:var(--ink)}
:root[data-theme="dark"] .site-header,:root[data-theme="dark"] .nav{background:var(--bg)}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .section--alt .card,:root[data-theme="dark"] .faq details,:root[data-theme="dark"] .form-card,:root[data-theme="dark"] .phone-strip,:root[data-theme="dark"] .logos li,:root[data-theme="dark"] .nav__quote{background:var(--surface);border-color:var(--line)}
:root[data-theme="dark"] .linklist a,:root[data-theme="dark"] .linklist a.area-link{background:var(--surface);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .linklist a:hover{border-color:var(--brand);color:var(--brand)}
:root[data-theme="dark"] .dropdown{background:var(--surface);border-color:var(--line);box-shadow:0 12px 30px rgba(0,0,0,.45)}
:root[data-theme="dark"] .dropdown a{color:var(--ink)}
:root[data-theme="dark"] .dropdown a:hover{background:var(--bg-alt);color:var(--brand)}
:root[data-theme="dark"] .cta-band .btn{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] .area-link__name{color:var(--ink)}
:root[data-theme="dark"] .area-link__city{color:var(--ink-soft)}
:root[data-theme="dark"] .trust{background:var(--bg-alt);border-color:var(--line)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--bg);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:var(--ink-soft)}
:root[data-theme="dark"] select option{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .gbadge{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] .gbadge__label,:root[data-theme="dark"] .gbadge__score{color:var(--ink)}
:root[data-theme="dark"] .btn--white{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] .btn--ghost,:root[data-theme="dark"] .btn--outline{color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .wordmark{color:var(--ink)}
:root[data-theme="dark"] img{filter:brightness(.9)}
:root[data-theme="dark"] .shot img,:root[data-theme="dark"] .hero__photo img{filter:brightness(.88)}
:root[data-theme="dark"] .nav__links{background:var(--bg)}
:root[data-theme="dark"] .theme-toggle .i-sun{display:inline}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}

/* products from a partner's shop: photo, name, our price, one CTA each */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin:18px 0}
.prod{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;background:var(--card,#fff)}
.prod img{width:100%;height:150px;object-fit:contain;background:#fff;border-radius:8px}
.prod .pname{font-weight:600;margin:0;font-size:15px;line-height:1.35}
.prod .pprice{margin:0;font-size:20px;font-weight:700}
.prod .pnopic{height:150px;border-radius:8px;background:var(--bg-alt,#f2f4f4);display:flex;
  align-items:center;justify-content:center;font-size:13px;opacity:.6}
.prod .btn{margin-top:auto;align-self:flex-start}
:root[data-theme="dark"] .prod{border-color:rgba(255,255,255,.14)}

/* ---- Header nav: collapse to the menu button earlier ----
   The base stylesheet swaps to the menu button at 900px, which assumed a short nav.
   A shop site carries an extra "What's in stock" link, so the bar runs out of room
   around 1150px and the phone button lands on top of the next one. Same rules,
   wider trigger. */
@media(max-width:1180px){
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:10px 20px}
  .nav__links.open{display:flex}
  .nav__links>li{width:100%;padding:8px 0}
  .dropdown{position:static;display:block;box-shadow:none;border:0;padding:4px 0 4px 14px;min-width:0}
  .nav__toggle{display:block;order:1}
  .nav__call,.nav__quote{display:block;text-align:center}
  .nav__caret{float:right;margin-top:6px}
  .theme-toggle{order:0;margin-left:auto}
}
:root[data-theme="dark"] .nav__links{background:var(--bg)}
/* The machine name arrives from the product button — shown, not editable, so the enquiry
   always names the right one. */
.field__locked{background:var(--bg-alt,#f2f4f4);font-weight:600}
.prod .pref{margin:0;font-size:12px;opacity:.6;letter-spacing:.02em}