/* Evermark Heating & Air: site styles
   Fluid, responsive, no external fonts or scripts.
   Breakpoints: 1200 / 1080 (menu) / 960 (2-col) / 760 (phone bar) / 560 (1-col) / 380 (small phones) */

:root {
  --ink: #14283A;
  --ink-2: #4B5B69;
  --cream: #F5F2EC;
  --paper: #ffffff;
  --sand: #EAE3D6;
  --line: #DCD4C4;
  --teal: #17756F;
  --teal-deep: #0E5552;
  --teal-soft: #DCEEEB;
  --teal-light: #8FD0C8;
  --ember: #B94D1C;
  --ember-deep: #963D14;
  --note: #FCF0E6;
  --ember-soft: #FBE7DC;
  --on-dark: #DDE7EC;
  --on-dark-2: #B5C6CF;
  --radius: 18px;
  --gutter: clamp(20px, 4vw, 40px);
  --shadow: 0 1px 2px rgba(20, 40, 58, .06), 0 10px 28px rgba(20, 40, 58, .07);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: var(--teal-deep); text-underline-offset: 3px; overflow-wrap: anywhere; }
h1, h2, h3 {
  font-family: var(--serif);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--ink);
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem); font-weight: 600; }
h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.32rem); font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1180px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section--paper { background: var(--paper); }
.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: #DDE7EC; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section-head { max-width: 700px; margin-bottom: clamp(30px, 4vw, 52px); }
.section-head p { color: var(--ink-2); font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); margin: 0; }
.section--ink .section-head p { color: #B5C6CF; }
.eyebrow {
  display: block;
  font: 600 .78rem/1.2 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.section--ink .eyebrow { color: var(--teal-light); }
.lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem); color: var(--ink-2); max-width: 60ch; }
.skip-link { position: absolute; left: -9999px; top: 12px; }
.skip-link:focus { left: 16px; background: #fff; padding: 8px 12px; z-index: 100; border-radius: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: 600 1rem/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-feedback) var(--ease-standard), color var(--dur-feedback) var(--ease-standard), border-color var(--dur-feedback) var(--ease-standard), transform var(--dur-feedback) var(--ease-standard);
  max-width: 100%;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--ember); color: #fff; }
.btn-primary:hover { background: var(--ember-deep); color: #fff; }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--sand); }
.btn-ghost-light { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-small { min-height: 44px; padding: 10px 18px; font-size: .93rem; }
.btn-block { width: 100%; }
.btn-link { font-weight: 600; text-decoration: none; color: var(--teal-deep); }
.btn-link:hover { text-decoration: underline; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Icons ---------- */
.icon { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: middle; }
.btn .icon { width: 18px; height: 18px; }
.card-icon .icon { width: 26px; height: 26px; }
.contact-list .ico .icon { width: 22px; height: 22px; }








/* Desktop navigation */






.chev { width: 16px; height: 16px; transition: transform .2s ease; }
















/* Header actions */







/* Full-screen mobile menu */


@keyframes menu-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }





















/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 6vw, 96px) 0 clamp(56px, 7vw, 100px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 24px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .92rem; color: var(--ink-2); margin: 0; padding: 0; list-style: none; }
.hero-note li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: 9px;
  vertical-align: middle;
}


/* ---------- Trust strip ---------- */
.trust { background: var(--paper); border-block: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust-item { padding: clamp(20px, 2.6vw, 28px) clamp(18px, 2.2vw, 24px); border-right: 1px solid var(--line); }
.trust-item:last-child { border-right: 0; }
.trust-item strong { display: block; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; margin-bottom: 4px; }
.trust-item span { font-size: .93rem; color: var(--ink-2); }

/* ---------- Cards and grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 22px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 22px); }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.card p { color: var(--ink-2); margin: 0; }
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--teal-soft);
  color: var(--teal-deep);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}
.card-icon svg { width: 26px; height: 26px; }
.card .btn-link { margin-top: auto; padding-top: 8px; }
.card--accent { border-top: 4px solid var(--ember); }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 24px); counter-reset: step; }
.steps li { counter-increment: step; border-top: 3px solid var(--teal); padding-top: 20px; min-width: 0; }
.steps li::before {
  content: "Step " counter(step);
  display: block;
  font: 600 .8rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 12px;
}
.steps h3 { font-size: 1.15rem; }
.steps p { color: var(--ink-2); font-size: .97rem; margin: 0; }

/* ---------- Repair vs replace ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.rule-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.rule-list li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 18px 58px;
  position: relative;
  color: var(--ink-2);
}
.rule-list li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 21px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%23174f4d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
}
.rule-list strong { color: var(--ink); }

.notice {
  background: var(--note);
  border-left: 4px solid var(--ember);
  border-radius: 12px;
  padding: clamp(18px, 2.4vw, 22px);
  margin: 28px 0;
  color: #4A2A17;
}
.notice strong { color: #351C0D; }
.notice p:last-child { margin-bottom: 0; }

/* ---------- Promise band ---------- */
.promise-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.promise-list li {
  padding: 22px 0 22px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  position: relative;
  font-size: clamp(1rem, .96rem + .3vw, 1.08rem);
  color: #DDE7EC;
}
.promise-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-light);
  box-shadow: inset 0 0 0 5px var(--ink);
}

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 22px); }
.review {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.review blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.05rem, 1rem + .3vw, 1.14rem); line-height: 1.55; color: var(--ink); }
.review blockquote p { margin: 0; }
.review figcaption {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .95rem;
  color: var(--ink-2);
}
.review figcaption strong { color: var(--ink); font-size: 1rem; }
.stars { color: var(--ember); letter-spacing: 3px; font-size: 1rem; line-height: 1; }
.reviews-note { margin-top: 22px; font-size: .92rem; color: var(--ink-2); }

/* ---------- Service area ---------- */
.area-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.map-frame {
  position: relative;
  width: 100%;
  min-height: 360px;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--teal-soft), var(--sand));
  box-shadow: var(--shadow);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: var(--teal-deep);
}
.map-fallback strong { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.map-fallback span { color: var(--ink-2); max-width: 32ch; }
.map-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-top: 14px; font-size: .95rem; color: var(--ink-2); }
.map-caption a { font-weight: 600; }
.area-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.area-panel h3 { margin: 0; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.6rem); }
.area-panel > p { color: var(--ink-2); margin: 0; }
.area-facts { margin: 0; display: grid; gap: 14px; }
.area-facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.area-facts dt { font: 600 .78rem/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); padding-top: 3px; }
.area-facts dd { margin: 0; color: var(--ink); }
.area-panel .btn { margin-top: auto; }
.area-panel .small { font-size: .92rem; color: var(--ink-2); margin: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; width: 100%; max-width: 820px; min-width: 0; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 0 clamp(16px, 2.2vw, 22px); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--teal-deep); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); padding: 0 0 20px; margin: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--teal-deep);
  color: #fff;
  border-radius: clamp(22px, 3vw, 28px);
  padding: clamp(26px, 4.5vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 32px;
  flex-wrap: wrap;
}
.cta-band > div:first-child { flex: 1 1 320px; min-width: 0; }
.cta-band h2 { color: #fff; margin-bottom: 10px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.cta-band p { color: #D3E7E3; margin: 0; max-width: 56ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Inner page hero ---------- */
.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(30px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.crumbs { font-size: .88rem; color: var(--ink-2); margin-bottom: 18px; }
.crumbs a { color: var(--ink-2); }
.page-hero h1 { max-width: 22ch; }
.page-hero .lead { margin: 0; }

/* ---------- Service detail ---------- */
.content { max-width: 760px; min-width: 0; }
.content h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 2rem); margin-top: 1.4em; }
.content h2:first-child { margin-top: 0; }
.checks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.checks li { padding-left: 32px; position: relative; color: var(--ink-2); }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--teal); font-weight: 700; }
.aside-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 30px);
  box-shadow: var(--shadow);
  position: sticky;
  top: 100px;
  min-width: 0;
}
.aside-card h3 { margin-bottom: 8px; }
.aside-card p { color: var(--ink-2); font-size: .97rem; }
.aside-card .btn { width: 100%; margin-bottom: 10px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(32px, 5vw, 72px); align-items: start; }

/* ---------- Contact and form ---------- */
.form-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.contact-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; }
.contact-list .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--teal-soft); color: var(--teal-deep); display: grid; place-items: center; }
.contact-list .ico svg { width: 22px; height: 22px; }
.contact-list strong { display: block; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.contact-list a { display: block; font-size: clamp(1.02rem, 1rem + .3vw, 1.1rem); font-weight: 600; color: var(--ink); text-decoration: none; }
.contact-list span { display: block; color: var(--ink-2); }
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: clamp(22px, 4vw, 44px);
  box-shadow: var(--shadow);
  min-width: 0;
}
.form h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 6px; scroll-margin-top: 100px; }
.form > p { color: var(--ink-2); margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; min-width: 0; }
.field label { font-weight: 600; font-size: .95rem; }
.field .req { color: var(--ember); }
.field .hint { font-size: .86rem; color: var(--ink-2); font-weight: 400; }
input, select, textarea {
  font: inherit;
  color: var(--ink);
  background: #FBFAF7;
  border: 1.5px solid #CDC3B0;
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 52px;
  width: 100%;
  max-width: 100%;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.consent {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-radius: 14px;
  background: #FBFAF7;
  border: 1px solid var(--line);
  margin-bottom: 14px;
  font-size: .93rem;
  color: var(--ink-2);
}
.consent input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--teal); cursor: pointer; }
.consent label { cursor: pointer; }
.consent a { color: var(--teal-deep); }
.form-submit { width: 100%; margin-top: 8px; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-size: .97rem; display: none; }
.form-status.is-error { display: block; background: #fdecea; color: #7a1f14; }
.form-status.is-success { display: block; background: var(--teal-soft); color: #0E5552; }
.form-small { font-size: .87rem; color: var(--ink-2); margin: 14px 0 0; }

/* ---------- Legal pages ---------- */
.legal { max-width: 780px; min-width: 0; }
.legal h2 { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem); margin-top: 1.9em; }
.legal h3 { font-size: 1.12rem; margin-top: 1.4em; }
.legal p, .legal li { color: #2C3E4C; }
.legal .updated { color: var(--ink-2); font-size: .95rem; }
.legal .sms-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  padding: clamp(18px, 2.6vw, 26px);
  margin: 1.2em 0;
}
.legal .sms-box p:last-child { margin-bottom: 0; }
.toc { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; margin: 28px 0 8px; max-width: 780px; }
.toc strong { display: block; margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin: 4px 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #C9D6DE; padding: clamp(48px, 6vw, 68px) 0 28px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px clamp(20px, 3vw, 36px); }
.site-footer h2 { font: 600 .82rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-footer a { color: #C9D6DE; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .brand { color: #fff; }
.site-footer .brand-name small { color: #A9BCC4; }
.footer-about { margin: 16px 0 0; max-width: 36ch; color: #A9BCC4; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 44px;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  font-size: .86rem;
  color: #A9BCC4;
}


/* ---------- Responsive ---------- */

/* Wide desktop: show the full header; the menu layer stays hidden */




/* Tablets and smaller laptops: menu button replaces the navigation */
@media (max-width: 1080px) {
  
  
  
  
  
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(2) { border-right: 0; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  
}



/* Tablets portrait and phones landscape: single column layouts */
@media (max-width: 960px) {
  .hero-grid, .split, .form-wrap, .two-col, .area-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .aside-card { position: static; }
  .map-frame { min-height: 340px; height: auto; aspect-ratio: 4 / 3; }
}

/* Phones */
@media (max-width: 760px) {
  .promise-list { grid-template-columns: minmax(0, 1fr); }
  
  
  
  
  
  
  
  .cta-band .actions .btn { flex: 1 1 100%; }
}

/* Small phones and tablets portrait */
@media (max-width: 620px) {
  .grid-3, .grid-2, .reviews-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-3 > :last-child:nth-child(odd), .reviews-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .trust-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-item:last-child { border-bottom: 0; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn, .btn-row .btn { flex: 1 1 100%; }
  .area-facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid > :first-child { grid-column: auto; }
  .faq summary { font-size: 1rem; }
  .map-caption { flex-direction: column; align-items: flex-start; }
  .map-frame { aspect-ratio: 1 / 1; }
}

/* Very small phones */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  
  
  .btn { padding-inline: 18px; }
  .consent { grid-template-columns: 24px minmax(0, 1fr); padding: 14px; gap: 10px; }
  .consent input[type="checkbox"] { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.area-groups { display: grid; gap: 14px; }
.area-group h4 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); font-family: inherit; font-weight: 700; }
.area-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.area-list li { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: .95rem; }

/* ---------- Homepage (v2): photo-led, calm, human ---------- */
.kicker { margin: 0 0 14px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); font-weight: 700; }
.home-hero { padding: clamp(36px, 5vw, 80px) 0 clamp(48px, 6vw, 88px); }
.home-hero {
  background:
    radial-gradient(60% 75% at 100% 0%, rgba(220, 238, 235, .95) 0%, rgba(220, 238, 235, 0) 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(251, 231, 220, .85) 0%, rgba(251, 231, 220, 0) 70%),
    var(--cream);
}
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.home-hero h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.9rem); line-height: 1.05; margin: 0 0 20px; max-width: 17ch; }
.home-hero .lead { color: var(--ink-2); font-size: clamp(1.02rem, .98rem + .25vw, 1.18rem); max-width: 52ch; margin: 0; }
.home-hero .hero-actions { margin: 30px 0 0; }
.home-hero .btn .icon { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.home-hero__facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--ink-2); font-size: .95rem; }
.home-hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.home-hero__facts .icon { width: 18px; height: 18px; color: var(--teal); }
.home-hero__media { margin: 0; position: relative; }
.home-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px -34px rgba(20, 40, 58, .45); }
.home-hero__note { position: absolute; left: 18px; bottom: 18px; max-width: 300px; background: #fff; border-radius: 18px; padding: 14px 18px; display: grid; gap: 2px; box-shadow: 0 18px 36px -20px rgba(20, 40, 58, .4); }
.home-hero__note strong { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.home-hero__note span { font-size: .9rem; color: var(--ink-2); }

.home-trust { background: #fff; border-block: 1px solid var(--line); }
.home-trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-trust__item { display: flex; gap: 12px; align-items: flex-start; padding: 22px 20px; }
.home-trust__item + .home-trust__item { border-left: 1px solid var(--line); }
.home-trust__item > .icon { width: 24px; height: 24px; color: var(--teal); flex: none; margin-top: 2px; }
.home-trust__item strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin-bottom: 2px; }
.home-trust__item span { color: var(--ink-2); font-size: .92rem; }

.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.svc { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.svc-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--teal-soft); color: var(--teal-deep); display: grid; place-items: center; margin-bottom: 6px; }
.svc-icon .icon { width: 24px; height: 24px; }
.svc h3 { font-size: 1.3rem; margin: 0; }
.svc p { margin: 0; color: var(--ink-2); }
.svc a { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--teal-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.svc a .icon { width: 16px; height: 16px; }
.svc a:hover { text-decoration: underline; }
.svc--accent { background: var(--teal-deep); border-color: var(--teal-deep); }
.svc--accent h3 { color: #fff; }
.svc--accent p { color: #D3E7E3; }
.svc--accent a { color: #fff; }
.svc--accent .svc-icon { background: rgba(255, 255, 255, .14); color: #fff; }

.home-decide { align-items: start; }
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: step; }
.home-steps li { counter-increment: step; position: relative; padding-top: 60px; }
.home-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--ember); color: #fff; font-family: var(--serif); font-weight: 600; display: grid; place-items: center; }
.home-steps h3 { font-size: 1.2rem; margin: 0 0 6px; }
.home-steps p { margin: 0; color: var(--ink-2); }

.home-promise { background: var(--sand); }
.home-promise .promise-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.home-promise .promise-list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); }
.home-promise .promise-list .icon { width: 20px; height: 20px; color: var(--teal); flex: none; margin-top: 3px; }

.home-cta { background: var(--teal-deep); color: #fff; border-radius: 28px; padding: clamp(28px, 4vw, 52px); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.home-cta h2 { color: #fff; margin: 0 0 8px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); max-width: 24ch; }
.home-cta p { margin: 0; color: #D3E7E3; max-width: 52ch; }
.home-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.home-cta .btn .icon { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }

@media (max-width: 960px) {
  .home-hero__grid, .home-decide { grid-template-columns: minmax(0, 1fr); }
  .home-hero__media img { aspect-ratio: 4 / 3; }
  .home-trust__grid { grid-template-columns: 1fr 1fr; }
  .home-trust__item:nth-child(3) { border-left: 0; }
  .home-trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .home-steps { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}
@media (max-width: 620px) {
  .svc-grid, .home-steps, .home-promise .promise-list { grid-template-columns: 1fr; }
  .home-trust__grid { grid-template-columns: 1fr; }
  .home-trust__item + .home-trust__item { border-left: 0; border-top: 1px solid var(--line); }
  .home-trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .home-hero__note { position: static; max-width: none; margin-top: 12px; }
  .home-hero__media img { border-radius: 22px; }
  .home-cta .actions .btn { flex: 1 1 100%; }
}
.home-promise .promise-list li { color: var(--ink); background: none; border-radius: 0; font-size: 1.02rem; }
.home-promise .promise-list li::before, .home-promise .promise-list li::after { content: none; display: none; }
/* ---------- Site header v6: logo at the left, links beside it, actions at the right ---------- */
:root { --ember-on-dark: #F2A27A; }
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 253, 249, .97); color: var(--ink);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.2) blur(8px);
  box-shadow: 0 14px 30px -30px rgba(20, 40, 58, .7);
}
.header-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 36px; min-height: 88px;
}

/* Brand: standalone mark (no enclosure) and a two-line wordmark */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; justify-self: start; }
.brand-mark { display: block; flex: none; line-height: 0; }
.site-header .brand-mark { width: 44px; height: 52px; }
.site-footer .brand-mark { width: 40px; height: 48px; }
.brand-mark .logo-svg { display: block; width: 100%; height: 100%; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.42rem; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.brand-name small {
  display: block; margin-top: 6px; font-family: var(--sans); font-size: .64rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--teal-deep);
}

/* Main links sit right beside the logo; the actions stay at the far right */
.nav-left { display: flex; justify-content: flex-start; min-width: 0; justify-self: stretch; }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; justify-self: end; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-list > li > a, .nav-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px;
  border: 0; background: none; color: var(--ink-2);
  font: 500 .97rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nav-list > li > a::after, .nav-trigger::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 9px; height: 2px; border-radius: 2px;
  background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-list > li > a:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); }
.nav-list > li > a:hover::after, .nav-trigger:hover::after, .nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-list > li > a[aria-current="page"], .nav-trigger[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-list > li > a[aria-current="page"]::after, .nav-trigger[aria-current="page"]::after { transform: scaleX(1); }
.nav-trigger .icon { width: 16px; height: 16px; opacity: .7; transition: transform .2s ease; }
.nav-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 14px); left: -16px;
  width: min(760px, 92vw); padding: 12px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dropdown.is-open { opacity: 1; visibility: visible; transform: none; }
.dropdown a { color: var(--ink); }
.dropdown-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.dd-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; text-decoration: none; }
.dd-item:hover, .dd-item:focus-visible { background: var(--cream); }
.dd-icon { width: 42px; height: 42px; border-radius: 13px; background: var(--teal-soft); color: var(--teal-deep); display: grid; place-items: center; flex: none; }
.dd-icon .icon { width: 20px; height: 20px; }
.dd-text { display: grid; gap: 2px; }
.dd-text strong { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.dd-text small { color: var(--ink-2); font-size: .88rem; }
.dropdown-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 6px 2px; padding: 14px 10px 6px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; }
.dropdown-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--teal-deep); text-decoration: none; }
.dropdown-foot .icon { width: 16px; height: 16px; }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.header-book {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--ember); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 24px -18px rgba(185, 77, 28, .9);
}
.header-book:hover { background: var(--ember-deep); color: #fff; }
.header-call {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 4px;
  border-radius: 999px; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.header-call-icon {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-deep);
}
.header-call .icon { width: 18px; height: 18px; }
.header-call:hover .header-call-icon { background: var(--teal); color: #fff; }
.header-call-text { font-size: 1rem; font-variant-numeric: tabular-nums; }
.menu-button {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px;
  border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font: 600 .95rem/1 var(--sans); cursor: pointer;
}
.menu-button .icon { width: 18px; height: 18px; }
.menu-button:hover { background: var(--teal-deep); }

.site-header a:focus-visible, .site-header button:focus-visible,
.menu-panel a:focus-visible, .menu-panel button:focus-visible {
  outline: 3px solid var(--teal-light); outline-offset: 2px;
}

/* Menu: one plain list. Floating rounded bar, four pages, two actions. */
.menu-panel {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain;
  background: var(--cream); color: var(--ink); animation: menu-in .2s ease;
}
.menu-panel[hidden] { display: none; }
body.menu-open { overflow: hidden; }
.menu-inner {
  min-height: 100%; max-width: 560px; margin: 0 auto;
  padding: 12px var(--gutter) max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.menu-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 8px 8px 8px 18px; margin: 0 calc(-1 * var(--gutter) + 12px);
  background: var(--paper); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(20,40,58,.06), 0 8px 24px -12px rgba(20,40,58,.18);
}
.menu-brand {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1;
}
.menu-brand img { width: 24px; height: auto; display: block; flex: none; }
.menu-brand small {
  display: block; margin-top: 4px; font: 700 .58rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal);
}
.menu-close {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none;
  border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); cursor: pointer;
  transition: background .15s ease;
}
.menu-close:hover { background: var(--sand); }
.menu-close .icon { width: 20px; height: 20px; }

.menu-links { margin-top: 28px; }
.menu-main, .menu-main ul { list-style: none; margin: 0; padding: 0; }
.menu-main > li + li { border-top: 1px solid var(--line); }
.menu-main > li > a {
  display: flex; align-items: center; min-height: 58px;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1;
  color: var(--ink); text-decoration: none;
}
.menu-main > li > a:hover { color: var(--teal-deep); }
.menu-main > li > a[aria-current="page"] { color: var(--ember-deep); }
.menu-sub { padding: 0 0 10px; }
.menu-sub a {
  display: flex; align-items: center; min-height: 44px; padding-left: 14px;
  border-left: 2px solid var(--line);
  font: 500 1rem/1.3 var(--sans); color: var(--ink-2); text-decoration: none;
}
.menu-sub a:hover { color: var(--ink); border-left-color: var(--teal); }

.menu-cta { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }
.menu-cta .btn { width: 100%; justify-content: center; min-height: 52px; border-radius: 14px; }

.menu-panel a:focus-visible, .menu-panel button:focus-visible {
  outline: 3px solid var(--teal-light); outline-offset: 2px;
}

@media (min-width: 760px) {
  .menu-inner { max-width: 600px; padding-top: 16px; }
  .menu-top { margin: 0; }
  .menu-links { margin-top: 44px; }
  .menu-main > li > a { font-size: 1.8rem; min-height: 66px; }
  .menu-sub a { font-size: 1.08rem; min-height: 46px; }
  .menu-cta { grid-template-columns: 1fr 1fr; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Breakpoints */
@media (max-width: 1340px) {
  .header-call-text { display: none; }
  .header-call { padding: 0; }
}
@media (max-width: 1180px) {
  .header-bar { grid-template-columns: minmax(0, 1fr) auto; min-height: 76px; gap: 14px; }
  .nav-left, .header-book { display: none; }
  .brand { justify-self: start; }
  .nav-right { justify-content: flex-end; }
  .menu-button { display: inline-flex; }
  .header-call { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .header-call-icon { width: 44px; height: 44px; background: #fff; border: 1px solid var(--line); }
  .header-call:hover .header-call-icon { background: var(--teal-soft); color: var(--teal-deep); border-color: var(--teal-soft); }
}
@media (min-width: 1181px) {
  .menu-panel { display: none; }
}
@media (max-width: 760px) {
  .header-bar { min-height: 70px; gap: 10px; }
  .site-header .brand-mark { width: 40px; height: 47px; }
  .brand-name { font-size: 1.22rem; }
  .brand-name small { font-size: .58rem; letter-spacing: .16em; margin-top: 5px; }
  .header-actions { gap: 8px; }
}
@media (max-width: 359px) {
  .menu-button { width: 44px; padding: 0; justify-content: center; }
  .menu-button span { display: none; }
}
@media (max-width: 360px) {
  .brand-name { font-size: 1.08rem; }
  .brand-name small { font-size: .54rem; letter-spacing: .12em; }
  .site-header .brand-mark { width: 36px; height: 43px; }
  .brand { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .dropdown, .nav-trigger .icon, .nav-list > li > a::after, .nav-trigger::after { animation: none; transition: none; }
}

/* Closed header matches the open menu top bar (v9).
   Same card, height, logo and brand size, and round buttons in both states. */
.site-header, .menu-panel { --bar-w: min(560px, calc(100vw - 24px)); }
@media (min-width: 760px) and (max-width: 1180px) {
  .site-header, .menu-panel { --bar-w: min(600px, calc(100vw - 24px)); }
}
@media (max-width: 1180px) {
  .site-header { background: var(--cream); border-bottom: 0; box-shadow: none; backdrop-filter: none; }
  .site-header .header-bar {
    width: var(--bar-w); max-width: none; min-height: 60px; gap: 12px;
    margin: 12px auto; padding: 8px 8px 8px 18px;
    background: var(--paper); border-radius: 20px;
    box-shadow: 0 1px 2px rgba(20,40,58,.06), 0 8px 24px -12px rgba(20,40,58,.18);
  }
  .site-header .brand { gap: 10px; }
  .site-header .brand-mark { width: 24px; height: 29px; }
  .site-header .brand-name { font-size: 1.2rem; }
  .site-header .brand-name small { font-size: .58rem; letter-spacing: .18em; margin-top: 4px; color: var(--teal); }
  .site-header .header-actions { gap: 8px; }
  .site-header .header-call-icon { width: 44px; height: 44px; background: var(--cream); border: 0; }
  .site-header .header-call .icon { width: 20px; height: 20px; }
  .site-header .menu-button {
    display: inline-grid; place-items: center; position: relative;
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    background: var(--cream); color: var(--ink);
  }
  .site-header .menu-button:hover { background: var(--sand); }
  .site-header .menu-button .icon { width: 20px; height: 20px; }
  .site-header .menu-button span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (min-width: 760px) and (max-width: 1180px) {
  .site-header .header-bar { margin: 16px auto; }
}
.menu-panel .menu-top { width: var(--bar-w); margin: 0 calc((100% - var(--bar-w)) / 2); }

/* Full-width top bar (v10): the closed header and the open menu top bar
   span the whole screen with the same height and the same side gutters. */
@media (max-width: 1180px) {
  .site-header { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: none; }
  .site-header .header-bar {
    width: 100%; max-width: none; min-height: 72px; margin: 0; gap: 12px;
    padding: 0 var(--gutter); background: var(--paper); border-radius: 0; box-shadow: none;
  }
  .menu-panel .menu-inner { padding-top: 0; }
  .menu-panel .menu-top {
    width: 100vw; margin: 0 calc(50% - 50vw); min-height: 72px;
    padding: 0 var(--gutter); background: var(--paper); border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--line);
  }
}

/* Rounded top bar (v11): full width, soft rounded bottom edges, same in both states. */
@media (max-width: 1180px) {
  .site-header { background: var(--cream); border-bottom: 0; box-shadow: none; }
  .site-header .header-bar {
    border-radius: 0 0 24px 24px;
    box-shadow: 0 1px 2px rgba(20,40,58,.06), 0 12px 24px -16px rgba(20,40,58,.35);
  }
  .menu-panel .menu-top {
    border-radius: 0 0 24px 24px; border-bottom: 0;
    box-shadow: 0 1px 2px rgba(20,40,58,.06), 0 12px 24px -16px rgba(20,40,58,.35);
  }
}

/* Rounded top bar, all sides (v12): full width, 24px radius on all four corners,
   with an 8px cream strip above so the top corners do not touch the screen edge. */
@media (max-width: 1180px) {
  .site-header { padding-top: 8px; background: var(--cream); }
  .site-header .header-bar { border-radius: 24px; }
  .menu-panel .menu-inner { padding-top: 8px; }
  .menu-panel .menu-top { border-radius: 24px; }
}

/* Rectangular top bar (v13): full width, square on all sides, thin bottom divider.
   Same in the closed header and the open menu. */
@media (max-width: 1180px) {
  .site-header { padding-top: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: none; }
  .site-header .header-bar { border-radius: 0; box-shadow: none; }
  .menu-panel .menu-inner { padding-top: 0; }
  .menu-panel .menu-top {
    border-radius: 0; box-shadow: none;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
}

/* Desktop header: logo on the left (v14).
   The bar spans the full width, the logo sits at the left gutter, and the links and buttons group on the right. */
@media (min-width: 1181px) {
  .site-header .header-bar {
    width: auto; max-width: none; margin: 0; padding: 0 var(--gutter);
    grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px;
  }
  .site-header .brand { justify-self: start; }
  .site-header .nav-left { justify-self: end; justify-content: flex-end; }
}

/* Gentle lift on service cards for mouse users only (signals they are clickable). Off for reduced motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .svc { transition: transform var(--dur-panel) var(--ease-standard), box-shadow var(--dur-panel) var(--ease-standard), border-color var(--dur-panel) var(--ease-standard); }
  .svc:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(20,40,58,.35); }
}

/* How it works, redesigned (v17).
   Desktop >=1000px: a sticky guide column (title, intro, live step index) beside one column of
   steps. The index fills its rail as you scroll and jumps to a step on click. Step titles rise
   out of a mask, hairlines draw in, and each step ends with a checked outcome line.
   Below 1000px: one column, index hidden. Reduced motion and no-JS: everything shows, no movement. */
.process-shell {
  display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 92px); align-items: start;
}
.process-aside { position: sticky; top: 92px; }
.process-aside h2 { margin-bottom: .45em; }
.process-intro { color: var(--ink-2); margin-bottom: 26px; }
.process-note { margin: 22px 0 0; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }

/* Step index: numbered dots on a rail. The teal fill grows to the active step. */
.process-index { list-style: none; margin: 0; padding: 0; position: relative; }
.process-index::before, .process-index::after {
  content: ""; position: absolute; left: 15px; top: 25px; width: 2px; border-radius: 1px;
}
.process-index::before { bottom: 25px; background: var(--line); }
.process-index::after { height: 0; background: var(--teal); }
.process-index[data-active="1"]::after { height: calc((100% - 50px) / 3); }
.process-index[data-active="2"]::after { height: calc((100% - 50px) * 2 / 3); }
.process-index[data-active="3"]::after { height: calc(100% - 50px); }
.process-index li { margin: 0; }
.index-btn {
  display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 14px;
  width: 100%; padding: 9px 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--ink-2);
}
.index-num {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream); border: 1.5px solid var(--line); color: var(--ink-2);
  font-family: var(--sans); font-size: .82rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.index-label { font-size: .95rem; font-weight: 600; letter-spacing: .01em; }
.index-btn:hover .index-label, .index-btn[aria-current="step"] .index-label { color: var(--teal-deep); }
.index-btn[aria-current="step"] .index-num { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }

/* Steps: ghost number, icon chip, masked title, text, checked outcome. */
.process-steps { list-style: none; margin: 0; padding: 0; min-width: 0; }
.process-step {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr);
  gap: 4px 26px; padding: 34px 0;
}
.process-step:first-child { padding-top: 4px; }
.process-step + .process-step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line); transform-origin: left center;
}
.step-num {
  font-family: var(--serif); font-size: 2.7rem; font-weight: 600; line-height: 1;
  letter-spacing: -.02em; color: var(--teal-light); font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.step-head { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.step-chip {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-deep);
}
.step-chip .icon { width: 21px; height: 21px; }
.step-title { margin: 0; font-size: clamp(1.25rem, 1.08rem + .7vw, 1.62rem); }
.mask { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.mask > span { display: block; }
.step-text { color: var(--ink-2); max-width: 56ch; margin: 0 0 14px; }
.step-outcome {
  display: flex; align-items: flex-start; gap: 9px; margin: 0;
  color: var(--teal-deep); font-size: .95rem; font-weight: 700;
}
.step-outcome .icon { width: 17px; height: 17px; flex: none; margin-top: .24em; }

/* Closing band */
.process-close {
  margin-top: clamp(36px, 5vw, 64px); padding: clamp(22px, 3vw, 30px) clamp(22px, 3.4vw, 36px);
  background: var(--teal-soft); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap;
}
.process-close p { margin: 0; max-width: 46ch; color: var(--ink); }
.process-close .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Arriving motion: only with JS and only when the visitor allows it. */
@media (prefers-reduced-motion: no-preference) {
  .js .process-index::after { transition: height .55s var(--ease-arrive); }
  .js .index-num, .js .index-label { transition: background-color .25s var(--ease-standard), border-color .25s var(--ease-standard), color .25s var(--ease-standard); }
  .js .process-step + .process-step::before { transition: transform .9s var(--ease-arrive) .15s; }
  .js .process-step + .process-step:not(.is-visible)::before { transform: scaleX(0); }
  .js .process-step .mask > span { transition: transform .7s var(--ease-arrive) .1s; }
  .js .process-step:not(.is-visible) .mask > span { transform: translateY(115%); }
  .js .process-step .step-chip { transition: opacity .45s linear .16s, transform .45s var(--ease-arrive) .16s; }
  .js .process-step:not(.is-visible) .step-chip { opacity: 0; transform: scale(.85); }
  .js .process-step .step-num { transition: opacity .6s linear .05s; }
  .js .process-step:not(.is-visible) .step-num { opacity: 0; }
}

/* Tablet and phone: one column, index hidden, tighter rhythm. */
@media (max-width: 999px) {
  .process-shell { grid-template-columns: 1fr; gap: 30px; }
  .process-aside { position: static; }
  .process-index, .process-note { display: none; }
  .process-intro { margin-bottom: 0; }
  .process-step { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 18px; padding: 26px 0; }
  .step-num { font-size: 2.1rem; padding-top: 3px; }
}
@media (max-width: 599px) {
  .process-step { grid-template-columns: 38px minmax(0, 1fr); gap: 2px 14px; padding: 22px 0; }
  .step-num { font-size: 1.8rem; }
  .step-head { gap: 11px; margin-bottom: 10px; }
  .step-chip { width: 40px; height: 40px; border-radius: 11px; }
  .step-chip .icon { width: 19px; height: 19px; }
  .process-close { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1000px) and (max-height: 660px) {
  .process-aside { position: static; }
}

/* Spam trap: hidden from people and screen readers, still visible to bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Layout helpers (moved out of inline style attributes so a strict Content Security Policy can block all inline styles) */
.notice.notice-gap { margin-top: 32px; }
h2.svc-title { font-size: 1.45rem; }
p.note-tight { margin: 12px 0 0; font-size: .88rem; }
.section.flush-top { padding-top: 0; }

/* Map: the frame starts with a button; the embed appears only after the visitor presses it */
.map-frame iframe[hidden], .map-fallback [hidden] { display: none; }
.map-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; }
.map-note { font-size: .9rem; color: var(--ink-2); max-width: 34ch; }

/* ---------- Motion (v1) ----------
   Durations follow Nielsen Norman Group guidance: most interface motion takes 100 to 500 ms,
   small feedback about 100 ms, and things that arrive take a little longer than things that leave.
   Only opacity and transform move. Visitors whose device asks for reduced motion see no movement. */
:root {
  --ease-arrive: cubic-bezier(0, 0, .2, 1);     /* arriving: quick start, soft landing */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);  /* changing state in place */
  --dur-feedback: 150ms;                         /* buttons, links, icons */
  --dur-panel: 240ms;                            /* menus, dropdowns, messages */
  --dur-arrive: 520ms;                           /* headlines, scroll reveals, map */
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Page load: the headline block arrives top to bottom, so the eye reads in order.
   The hero photo stays still: it is the largest element on the page and should be ready at once. */
.home-hero__copy > *, .page-hero .wrap > * { animation: rise var(--dur-arrive) var(--ease-arrive) both; }
.home-hero__copy > :nth-child(2), .page-hero .wrap > :nth-child(2) { animation-delay: 90ms; }
.home-hero__copy > :nth-child(3), .page-hero .wrap > :nth-child(3) { animation-delay: 180ms; }
.home-hero__copy > :nth-child(4) { animation-delay: 270ms; }
.home-hero__copy > :nth-child(5) { animation-delay: 360ms; }

/* Scroll reveal: JavaScript adds the hidden state, and only to content that starts below the fold. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { transition: opacity var(--dur-arrive) var(--ease-arrive), transform var(--dur-arrive) var(--ease-arrive); }
  .js [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(18px); }
  .js [data-reveal][data-step="1"] { transition-delay: 80ms; }
  .js [data-reveal][data-step="2"] { transition-delay: 160ms; }
  .js [data-reveal][data-step="3"] { transition-delay: 240ms; }
}
@media print {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Header: a soft shadow appears once the page scrolls under the sticky bar. */
.site-header { transition: box-shadow var(--dur-panel) var(--ease-standard); }
.site-header.is-scrolled { box-shadow: 0 14px 30px -18px rgba(20, 40, 58, .4); }

/* Buttons: a small lift on hover and a press on click. Kept brief, because these repeat often. */
.btn:hover { transform: translateY(-1px); }
.btn:active, .header-book:active { transform: scale(.98); }
.header-book { transition: background-color var(--dur-feedback) var(--ease-standard), transform var(--dur-feedback) var(--ease-standard), box-shadow var(--dur-panel) var(--ease-standard); }
.header-book:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -18px rgba(185, 77, 28, .9); }

/* Service cards: the card border tints and the arrow moves when its link is hovered or focused.
   Cards with no link (reviews, for example) do not react, so they do not look clickable. */
.svc { transition: border-color var(--dur-panel) var(--ease-standard); }
.svc:has(a:hover) { border-color: var(--teal-light); }
.svc a .icon { transition: transform var(--dur-feedback) var(--ease-standard); }
.svc a:hover .icon, .svc a:focus-visible .icon { transform: translateX(3px); }

/* Menu rows arrive one after another each time the menu opens. */
.menu-main > li { animation: rise var(--dur-panel) var(--ease-arrive) both; }
.menu-main > li:nth-child(2) { animation-delay: 45ms; }
.menu-main > li:nth-child(3) { animation-delay: 90ms; }
.menu-main > li:nth-child(4) { animation-delay: 135ms; }

/* Answers, the map, and form messages fade in when they appear. */
.faq details[open] p { animation: fade var(--dur-panel) var(--ease-standard) both; }
.map-frame iframe:not([hidden]) { animation: fade var(--dur-arrive) var(--ease-standard) both; }
.form-status.is-error, .form-status.is-success { animation: rise var(--dur-panel) var(--ease-arrive) both; }

/* Links to a section land below the sticky header, not under it. */
html { scroll-behavior: smooth; scroll-padding-top: 104px; }

/* Moving between pages: a short fade where the browser supports it (Chrome, Edge, and Safari).
   Other browsers change pages as they always did. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-panel); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-hero__copy > *, .page-hero .wrap > *, .menu-main > li,
  .faq details[open] p, .map-frame iframe, .form-status { animation: none; }
  .btn:hover, .btn:active, .header-book, .header-book:hover, .header-book:active { transform: none; }
  .svc a .icon, .svc a:hover .icon, .svc a:focus-visible .icon { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* ---------- What we do: service navigator (v18) ----------
   A deliberate departure from generic, equal-weight cards: visitors start with the
   symptom they recognise, then discover the supporting services at their own pace. */
.service-portal {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(55rem 32rem at 100% 5%, rgba(220, 238, 235, .82) 0%, rgba(220, 238, 235, 0) 66%),
    linear-gradient(180deg, #fff 0%, #F8F6F1 100%);
}
.service-portal::before {
  content: "";
  position: absolute;
  width: min(38vw, 520px);
  aspect-ratio: 1;
  left: -20vw;
  bottom: -26vw;
  border: 1px solid rgba(23, 117, 111, .12);
  border-radius: 50%;
  pointer-events: none;
}
.service-portal .wrap { position: relative; }
.service-portal__intro {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .62fr);
  gap: 26px clamp(34px, 7vw, 112px);
  align-items: end;
}
.service-portal__intro h2 { max-width: 20ch; margin-bottom: 0; }
.service-portal__intro > p { max-width: 37ch; padding-bottom: 4px; }

.service-portal__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(240px, .72fr);
  grid-template-areas:
    "cool heat urgent"
    "directory directory urgent";
  gap: 12px;
  align-items: stretch;
}
.service-route, .service-directory, .service-urgent { border-radius: 20px; }
.service-route {
  position: relative;
  min-height: 310px;
  padding: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 20px 38px -34px rgba(20, 40, 58, .65);
  transition: transform var(--dur-panel) var(--ease-standard), box-shadow var(--dur-panel) var(--ease-standard);
}
.service-route--cool { grid-area: cool; background: linear-gradient(135deg, #0E5552 0%, #143D50 100%); }
.service-route--heat { grid-area: heat; background: linear-gradient(135deg, #9B3F18 0%, #C45B28 100%); }
.service-route::before, .service-route::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.service-route::before { width: 260px; height: 260px; right: -104px; top: -112px; }
.service-route::after { width: 390px; height: 390px; right: -170px; top: -178px; }
.service-route__top, .service-route__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-route__number { font: 600 .78rem/1 var(--sans); letter-spacing: .13em; color: rgba(255,255,255,.72); }
.service-route__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.service-route__icon .icon { width: 23px; height: 23px; }
.service-route__copy { display: grid; gap: 8px; max-width: 29ch; }
.service-route__eyebrow { font: 700 .72rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.76); }
.service-route__copy strong { font: 600 clamp(1.55rem, 1.22rem + 1vw, 2.05rem)/1.08 var(--serif); color: #fff; letter-spacing: -.01em; }
.service-route__copy > span:last-child { color: rgba(255,255,255,.86); line-height: 1.48; font-size: .96rem; }
.service-route__foot { font-size: .91rem; font-weight: 700; color: #fff; }
.service-route__foot .icon { width: 18px; height: 18px; transition: transform var(--dur-feedback) var(--ease-standard); }
.service-route__line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left center; background: rgba(255,255,255,.85); }
.service-route:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 27px 46px -32px rgba(20, 40, 58, .72); }
.service-route:hover .service-route__foot .icon, .service-route:focus-visible .service-route__foot .icon { transform: translateX(4px); }

.service-directory {
  grid-area: directory;
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px clamp(20px, 2.4vw, 30px) 10px;
}
.service-directory__head { display: flex; justify-content: space-between; gap: 18px; align-items: end; padding-bottom: 13px; }
.service-directory__label { color: var(--teal-deep); font: 700 .7rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.service-directory h3 { margin: 0; font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem); }
.service-directory__list { list-style: none; margin: 0; padding: 0; }
.service-directory__list li { border-top: 1px solid var(--line); }
.service-directory__list a {
  min-height: 70px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  color: var(--ink);
  text-decoration: none;
}
.service-directory__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--teal-soft); color: var(--teal-deep); }
.service-directory__icon .icon { width: 17px; height: 17px; }
.service-directory__list strong, .service-directory__list small { display: block; }
.service-directory__list strong { font: 600 1rem/1.2 var(--serif); }
.service-directory__list small { margin-top: 3px; color: var(--ink-2); font-size: .78rem; line-height: 1.25; }
.service-directory__list > li > a > .icon { width: 17px; height: 17px; color: var(--teal-deep); transition: transform var(--dur-feedback) var(--ease-standard); }
.service-directory__list a:hover strong, .service-directory__list a:focus-visible strong { color: var(--teal-deep); }
.service-directory__list a:hover > .icon, .service-directory__list a:focus-visible > .icon { transform: translateX(3px); }

.service-urgent {
  grid-area: urgent;
  position: relative;
  padding: 24px clamp(20px, 2.1vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.service-urgent::after { content: ""; position: absolute; width: 210px; height: 210px; right: -118px; bottom: -96px; border: 1px solid rgba(143,208,200,.3); border-radius: 50%; }
.service-urgent__signal { display: inline-flex; align-items: center; gap: 7px; font: 700 .7rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-light); }
.service-urgent__signal > span { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-light); }
.service-urgent__icon { width: 44px; height: 44px; margin: clamp(24px, 3vw, 40px) 0 20px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; }
.service-urgent__icon .icon { width: 23px; height: 23px; }
.service-urgent h3 { margin: 0 0 12px; color: #fff; font-size: clamp(1.3rem, 1.1rem + .65vw, 1.65rem); }
.service-urgent p { margin: 0 0 22px; color: var(--on-dark); font-size: .91rem; line-height: 1.5; }
.service-urgent a { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: .89rem; text-decoration: none; }
.service-urgent a .icon { width: 17px; height: 17px; transition: transform var(--dur-feedback) var(--ease-standard); }
.service-urgent a:hover .icon, .service-urgent a:focus-visible .icon { transform: translateX(3px); }

.service-portal__footer {
  margin-top: 18px;
  padding: 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  border-top: 1px solid var(--line);
}
.service-portal__footer p { max-width: 60ch; margin: 0; color: var(--ink-2); font-size: .93rem; }
.service-portal__footer p strong { color: var(--ink); }
.service-portal__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.service-portal__all { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--teal-deep); font-size: .92rem; font-weight: 700; text-decoration: none; }
.service-portal__all .icon { width: 16px; height: 16px; transition: transform var(--dur-feedback) var(--ease-standard); }
.service-portal__all:hover .icon, .service-portal__all:focus-visible .icon { transform: translateX(3px); }

/* The line and signal provide a gentle sense of activation after a panel enters view.
   Nothing is hidden when JavaScript is unavailable, and reduced-motion users get the final state. */
@media (prefers-reduced-motion: no-preference) {
  .js .service-route__line { transition: transform .72s var(--ease-arrive) .12s; }
  .js .service-route:not(.is-visible) .service-route__line { transform: scaleX(0); }
  .js .service-route__icon { animation: service-breathe 5s var(--ease-standard) infinite; }
  .js .service-urgent.is-visible .service-urgent__signal > span { animation: service-pulse 2.7s var(--ease-standard) infinite; }
}
@keyframes service-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes service-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143,208,200,.45); }
  55% { box-shadow: 0 0 0 6px rgba(143,208,200,0); }
}
@media (max-width: 999px) {
  .service-portal__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "cool heat" "directory directory" "urgent urgent";
  }
  .service-urgent { min-height: 230px; }
  .service-urgent__icon { margin: 18px 0 14px; }
  .service-urgent p { max-width: 48ch; }
}
@media (max-width: 699px) {
  .service-portal__intro { display: block; }
  .service-portal__intro h2 { max-width: 18ch; }
  .service-portal__intro > p { margin-top: 18px; }
  .service-portal__stage { grid-template-columns: 1fr; grid-template-areas: "cool" "heat" "directory" "urgent"; }
  .service-route { min-height: 264px; }
  .service-directory { padding: 20px 18px 8px; }
  .service-directory__head { display: block; }
  .service-directory h3 { margin-top: 7px; }
  .service-directory__list a { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 10px; }
  .service-portal__footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 389px) {
  .service-route { padding: 20px; }
  .service-route__copy strong { font-size: 1.43rem; }
  .service-portal__actions { align-items: flex-start; flex-direction: column; }
}