/* The area page kit (16 Oct 2026): the branded pieces every town, city and county page is made from. Markup:
   src/lib/area-kit.mjs. Each page also has its own stylesheet, assets/areas/<slug>.css, for its own layout.

   The brand, as on the home, solar and batteries, prices, reviews, areas, About and Contact pages: daylight sky fading
   to white at the top, white and pale blue sections taking turns, the sun gradient (the logo's ring) and the faded sun
   arc, the sun ring round every icon, white cards with a soft shadow, the ratings pill and "Get My Free Solar Quote".
   No dark bands (James, 14 Oct 2026). */

.ak { --ak-radius: 20px; --ak-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 18px 40px -28px rgba(38, 40, 42, .4);
  --ak-lift: 0 1px 3px rgba(38, 40, 42, .08), 0 24px 56px -16px rgba(38, 40, 42, .32);
  --ak-sun: linear-gradient(135deg, var(--sun-coral), var(--sun-amber));
  --ak-ring-bg: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }

/* Icons: thin ink lines with one warm stroke, inside the sun ring */
.ak .sp-icon { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ak .sp-icon .warm { stroke: var(--sun-coral); stroke-width: 1.8; }
.ak-ring { flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid transparent; background: var(--ak-ring-bg); }
.ak-ring--lg { width: 60px; height: 60px; border-width: 3px; }
.ak-ring--lg .sp-icon { width: 30px; height: 30px; stroke-width: 1.6; }
.ak-head .ak-ring--lg, .ak-text > .ak-ring--lg { margin-bottom: 18px; }

/* ---------- Heroes ---------- */
.ak-hero { position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 44px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, var(--sky) 0%, #f5f8fa 52%, var(--paper) 100%); }
.ak-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ak-hero h1 { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; }
.ak-hero h1 .kicker { font: 500 1.125rem/1.4 var(--text); color: var(--ink-soft); }
.ak-hero h1 .display { font-size: clamp(2.375rem, 1.45rem + 3.1vw, 4rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.ak-hero .page-lede { max-width: 36rem; }
.ak-hero .crumbs ol { margin-bottom: 20px; }
.ak-hero .page-actions { margin-top: 0; }
.ak-hero-aside { position: relative; min-width: 0; }
.ak-hero-aside::before { content: ""; position: absolute; z-index: 0; width: 560px; height: 560px; right: -230px; top: -200px;
  background: url("sun-arc.svg") center / contain no-repeat; pointer-events: none; }
.ak-hero-aside > * { position: relative; z-index: 1; }
.ak-hero-quote .hero-form { box-shadow: var(--ak-lift); }
.ak-call { display: flex; flex-direction: column; line-height: 1.3; }
.ak-call a { font-weight: 600; font-size: 1.125rem; color: var(--ink); text-decoration: none; }
.ak-call a:hover { text-decoration: underline; text-decoration-color: var(--sun-coral); }
.ak-call span { color: var(--ink-soft); font-size: 1rem; }
/* The accreditation logos, quietly. Never recoloured (the schemes' rules). */
.ak-acc { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; max-width: 34rem; }
.ak-acc li { display: flex; align-items: center; }
.ak-acc img { display: block; width: auto; height: calc(var(--h) * .78); max-width: none; }

@media (min-width: 1000px) {
  .ak-hero--split .ak-hero-grid, .ak-hero--wide .ak-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text aside" "act aside";
    column-gap: clamp(48px, 6vw, 96px); row-gap: 30px; align-items: start; }
  .ak-hero--split .ak-hero-text, .ak-hero--wide .ak-hero-text, .ak-hero--flip .ak-hero-text { grid-area: text; }
  .ak-hero--split .ak-hero-aside, .ak-hero--wide .ak-hero-aside, .ak-hero--flip .ak-hero-aside { grid-area: aside; margin-top: 30px; }
  .ak-hero--split .ak-hero-act, .ak-hero--wide .ak-hero-act, .ak-hero--flip .ak-hero-act { grid-area: act; }
  .ak-hero--wide .ak-hero-aside { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter))); }
  .ak-hero--flip .ak-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "aside text" "aside act";
    column-gap: clamp(48px, 6vw, 96px); row-gap: 30px; align-items: start; }
  .ak-hero--flip .ak-hero-aside::before { right: auto; left: -230px; }
  .ak-hero--stack .ak-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text text" "aside act"; column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  .ak-hero--stack .ak-hero-text { grid-area: text; }
  .ak-hero--stack .ak-hero-aside { grid-area: aside; }
  .ak-hero--stack .ak-hero-act { grid-area: act; align-self: center; }
  .ak-hero--stack h1 { max-width: 52rem; }
  .ak-hero--stack .page-lede { max-width: 46rem; }
}
.ak-hero--center .ak-hero-text { text-align: center; justify-items: center; }
.ak-hero--center h1, .ak-hero--center .page-lede { margin-left: auto; margin-right: auto; }
.ak-hero--center h1 { align-items: center; max-width: 48rem; }
.ak-hero--center .page-lede { max-width: 42rem; }
.ak-hero--center .crumbs ol { justify-content: center; }
.ak-hero--center .hh-rating { margin-left: auto; margin-right: auto; }
.ak-hero--center .ak-hero-act { display: flex; flex-direction: column; align-items: center; }
.ak-hero--center .ak-acc { justify-content: center; margin-left: auto; margin-right: auto; }
.ak-hero--center .ak-hero-aside::before { right: -120px; top: -260px; }
@media (max-width: 999px) {
  .ak-hero-aside::before { width: 380px; height: 380px; right: -170px; top: -150px; }
}
@media (max-width: 700px) {
  .ak-hero-aside::before { width: 300px; height: 300px; right: -200px; top: -40px; }
}
.ak-hero + .section { padding-top: clamp(40px, 5vw, 72px); }

/* ---------- Sections ---------- */
.ak-sec .section-head { max-width: 44rem; }
.ak-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.ak-split--start { align-items: start; } .ak-split--center { align-items: center; } .ak-split--end { align-items: end; }
@media (min-width: 900px) {
  .ak-split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); }
  .ak-split--6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
  .ak-split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 80px); }
  .ak-split--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(40px, 5vw, 80px); }
  .ak-split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 80px); }
  .ak-split--flip > .ak-aside { order: -1; }
}
.ak-text > p, .ak-text > ul, .ak-text > ol, .ak-text > .ak-note, .ak-text > div { margin-top: 16px; }
.ak-text > h2 + p, .ak-text > .ak-intro { margin-top: 18px; }
.ak-text > p { max-width: 42rem; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.65; }
.ak-text > p.ak-intro { color: var(--ink); font-size: 1.1875rem; }
.ak-text h3 { margin-top: 30px; font-size: 1.25rem; }
.ak-text a { color: var(--ink); }
.ak-body > p { max-width: 46rem; margin-top: 16px; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.65; }
.ak-body > p:first-child { margin-top: 0; }
.ak-body > h3 { margin-top: 30px; font-size: 1.25rem; }
.ak-aside { min-width: 0; }

/* ---------- Cards ---------- */
.ak-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 700px) { .ak-cards--2, .ak-cards--3, .ak-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ak-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ak-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ak-card { position: relative; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--ak-radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); }
.section--sky .ak-card { box-shadow: var(--ak-shadow); }
.ak-card .ak-ring { margin-bottom: 16px; }
.ak-card h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.ak-card h3 a { color: var(--ink); text-decoration: none; }
.ak-card h3 a::after { content: " \2192"; color: var(--sun-coral); }
.ak-card--link:hover { box-shadow: 0 0 0 2px var(--sun-coral), var(--ak-shadow); }
.ak-card p { margin-top: 8px; color: var(--ink-soft); line-height: 1.6; font-size: 1.0625rem; }
.ak-card > p:first-child { margin-top: 0; }
.ak-cards--num { counter-reset: ak-card; }
.ak-cards--num .ak-card { counter-increment: ak-card; }
.ak-cards--num .ak-card::after { content: counter(ak-card, decimal-leading-zero); position: absolute; top: 24px; right: 24px; font: 600 .9375rem/1 var(--text); color: var(--star); }
.ak-tag { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; background: var(--ak-sun); font-weight: 600; font-size: .875rem; color: var(--ink); }

/* Ticks */
.ak-ticks--cards { display: grid; gap: 12px; }
.ak-ticks--cards li { padding: 16px 18px 16px 52px; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); }
.ak-ticks--cards li::before { left: 16px; top: 17px; }
@media (min-width: 800px) { .ak-ticks--two { columns: 2; column-gap: 40px; } .ak-ticks--two li { break-inside: avoid; } }

/* Chips */
.ak-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.ak-chips span, .ak-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px -12px rgba(38, 40, 42, .4); color: var(--ink); font-weight: 500; font-size: 1rem; line-height: 1.3; text-decoration: none; }
.ak-chips a:hover { box-shadow: 0 0 0 2px var(--sun-coral); }

/* Steps */
.ak-steps { list-style: none; margin: 0; padding: 0; counter-reset: ak-step; }
.ak-steps li { position: relative; counter-increment: ak-step; }
.ak-steps li::before { content: counter(ak-step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 500 1.125rem/1 var(--display); color: var(--ink); border: 3px solid transparent; background: var(--ak-ring-bg); }
.ak-steps h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.ak-steps p { margin-top: 4px; color: var(--ink-soft); line-height: 1.55; font-size: 1.0625rem; }
.ak-steps--column li { padding: 0 0 26px 64px; }
.ak-steps--column li::before { position: absolute; left: 0; top: -6px; }
.ak-steps--column li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(var(--sun-amber), var(--line)); }
.ak-steps--row { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .ak-steps--row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 20px; }
  .ak-steps--row li::after { content: ""; position: absolute; left: 52px; right: -14px; top: 21px; height: 2px; background: linear-gradient(90deg, var(--sun-amber), var(--line)); }
  .ak-steps--row li:last-child::after { display: none; }
}
.ak-steps--row li::before { margin-bottom: 16px; }
.ak-steps--cards { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 700px) { .ak-steps--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ak-steps--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ak-steps--cards li { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--ak-radius); background: var(--paper); box-shadow: var(--ak-shadow); }
.ak-steps--cards li::before { margin-bottom: 16px; }

/* Stats */
.ak-stats { margin: 0; display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.ak-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.ak-stats dt { margin-top: 8px; color: var(--ink-soft); font-size: 1rem; line-height: 1.45; }
.ak-stats dd { margin: 0; font: 500 clamp(2.25rem, 1.6rem + 2vw, 3.25rem)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.ak-stats dd.ak-stats-src { order: -1; margin-top: 6px; font: 400 .875rem/1.4 var(--text); color: var(--ink-soft); letter-spacing: 0; }
.ak-stats--tiles > div { padding: 22px; border-radius: 18px; background: var(--paper); box-shadow: var(--ak-shadow); border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)) 1; }
.ak-stats--strip { gap: 0; }
.ak-stats--strip > div { padding: 6px 24px; border-left: 1px solid var(--line); }
.ak-stats--strip > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 600px) { .ak-stats--strip > div { border-left: 0; padding: 12px 0; border-top: 1px solid var(--line); } .ak-stats--strip > div:first-child { border-top: 0; } }
.ak-stats--ring > div { align-items: center; text-align: center; }
.ak-stats--ring dd:not(.ak-stats-src) { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; border: 6px solid transparent; background: var(--ak-ring-bg);
  font-size: 2.25rem; }

/* Bars */
.ak-bars { margin: 0; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--ak-radius); background: var(--paper); box-shadow: var(--ak-shadow); }
.ak-bars ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ak-bars li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 4rem; gap: 14px; align-items: center; }
.ak-bars-label { font-weight: 500; line-height: 1.3; }
.ak-bars-track { position: relative; height: 14px; border-radius: 999px; background: var(--sky); }
.ak-bars-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)); }
.ak-bars-cmp { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.ak-bars-value { font: 600 1.125rem/1 var(--display); text-align: right; }
.ak-bars figcaption { margin-top: 18px; color: var(--ink-soft); font-size: .9375rem; line-height: 1.5; }
.ak-bars-key { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; }
.ak-bars-cmp-key { display: inline-block; width: 3px; height: 16px; border-radius: 2px; background: var(--ink); }
@media (max-width: 520px) { .ak-bars li { grid-template-columns: minmax(0, 1fr) 3.5rem; } .ak-bars-track { grid-column: 1 / -1; order: 3; } }

/* Note and panel */
.ak-note { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); }
.section--sky .ak-note { box-shadow: var(--ak-shadow); }
.ak-note p { color: var(--ink); line-height: 1.6; }
.ak-note p + p { margin-top: 10px; }
.ak-panel { position: relative; padding: clamp(22px, 2.8vw, 34px); border-radius: var(--ak-radius); border: 3px solid transparent;
  background: url("sun-arc.svg") right -130px top -150px / 260px 260px no-repeat padding-box, linear-gradient(var(--paper), var(--paper)) padding-box, var(--ak-sun) border-box;
  box-shadow: var(--ak-shadow); }
.ak-panel > p { color: var(--ink-soft); line-height: 1.6; }
.ak-panel > p + p { margin-top: 12px; }
.ak-panel h3 { font-size: 1.375rem; margin-bottom: 10px; }

/* Price */
.ak-price { padding: clamp(22px, 2.8vw, 32px); border-radius: var(--ak-radius); border: 3px solid transparent;
  background: url("sun-arc.svg") right -140px top -170px / 260px 260px no-repeat padding-box, linear-gradient(var(--paper), var(--paper)) padding-box, var(--ak-sun) border-box; box-shadow: var(--ak-shadow); }
.ak-price-fig { margin: 0 0 14px; font: 500 clamp(2.6rem, 1.8rem + 2.6vw, 3.6rem)/1 var(--display); letter-spacing: -0.02em; }
.ak-price-fig small { display: block; margin-bottom: 8px; font: 500 1rem/1.3 var(--text); color: var(--ink-soft); letter-spacing: 0; }
.ak-price p { color: var(--ink-soft); }
.ak-price .btn { margin-top: 20px; }

/* Services */
.ak-services { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ak-services a { display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 14px; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); color: var(--ink); font-weight: 600; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.ak-services a::after { content: "\2192"; margin-left: auto; padding-left: 12px; color: var(--sun-coral); font-size: 1.2rem; }
.ak-services a:hover { box-shadow: 0 0 0 2px var(--sun-coral), var(--ak-shadow); transform: translateY(-2px); }
@media (min-width: 800px) { .ak-services--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ak-services--pills { display: flex; flex-wrap: wrap; }
.ak-services--pills a { border-radius: 999px; padding: 8px 18px 8px 8px; }
.ak-services--pills .ak-ring { width: 40px; height: 40px; } .ak-services--pills .sp-icon { width: 22px; height: 22px; }

/* Photo */
.ak-photo { position: relative; margin: 0; padding: clamp(10px, 1.4vw, 14px); border-radius: 22px; border: 3px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--ak-sun) border-box; box-shadow: var(--ak-lift); }
.ak-photo img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--line); }
.ak-photo-tag { position: absolute; z-index: 2; top: clamp(22px, 2.4vw, 28px); left: clamp(22px, 2.4vw, 28px); margin: 0; padding: 6px 14px; border-radius: 999px;
  background: var(--ak-sun); font-weight: 600; font-size: .9375rem; color: var(--ink); box-shadow: 0 8px 18px -10px rgba(38, 40, 42, .55); }
.ak-photo figcaption { margin-top: 12px; padding: 0 6px 4px; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }

/* ---------- Reviews ---------- */
.ak-reviews { display: grid; gap: 16px; }
@media (min-width: 800px) { .ak-reviews--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ak-reviews--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ak-reviews--feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 20px; }
  .ak-reviews--feature .ak-review--big { grid-row: span 2; } }
.ak-review { position: relative; margin: 0; padding: 18px 22px 16px; border-radius: 16px; background: var(--paper); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 14px 30px -20px rgba(38, 40, 42, .35); }
.ak-sec:not(.section--sky) .ak-review { box-shadow: 0 0 0 1px var(--line), 0 14px 30px -20px rgba(38, 40, 42, .35); }
.ak-review::before { content: ""; position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; opacity: .2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ec7a4a' transform='rotate(180 12 12)' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ak-review-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; padding-right: 44px; font-size: .875rem; color: var(--ink-soft); }
.ak-review-top .stars { color: var(--star); letter-spacing: 2px; font-size: 1rem; }
.ak-review-src { font-weight: 600; color: var(--ink); }
.ak-review blockquote { margin: 0 0 auto; padding: 0; border: 0; }
.ak-review blockquote p { font: 400 1.125rem/1.45 var(--display); color: var(--ink); }
.ak-review--big { padding: 28px 30px 22px; border: 3px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--ak-sun) border-box; }
.ak-review--big blockquote p { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.35; }
.ak-review--big::before { width: 64px; height: 64px; top: 20px; right: 22px; }
.ak-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ak-review-initial { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 .9375rem/1 var(--text); color: var(--ink);
  border: 2px solid transparent; background: var(--ak-ring-bg); }
.ak-review-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: .9375rem; color: var(--ink-soft); }
.ak-review-who strong { font-weight: 600; color: var(--ink); }
.ak-reviews--quote .ak-review { padding: clamp(28px, 4vw, 48px); text-align: center; align-items: center; border: 3px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--ak-sun) border-box; }
.ak-reviews--quote .ak-review blockquote p { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem); line-height: 1.3; max-width: 44rem; }
.ak-reviews--quote .ak-review-top { padding-right: 0; justify-content: center; }
.ak-reviews--quote .ak-review figcaption { justify-content: center; border-top: 0; }
.ak-ratings { margin-top: 24px; }

/* ---------- FAQs ---------- */
@media (min-width: 900px) {
  .ak-faq--two .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-items: start; }
}
.ak-faq--cards .faq { display: grid; gap: 12px; }
@media (min-width: 900px) { .ak-faq--cards .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } }
.ak-faq--cards .faq details { padding: 4px 20px; border: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--ak-shadow); }
.ak-sec:not(.section--sky).ak-faq--cards .faq details { box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); }

/* ---------- Places ---------- */
.ak-chips--links a::after { content: "\2192"; margin-left: 8px; color: var(--sun-coral); }
.ak-near-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ak-near-cards a { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--ak-shadow); color: var(--ink); text-decoration: none; }
.ak-sec:not(.section--sky) .ak-near-cards a { box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); }
.ak-near-cards a:hover { box-shadow: 0 0 0 2px var(--sun-coral), var(--ak-shadow); }
.ak-near-cards strong { display: block; font-weight: 600; }
.ak-near-cards span span { display: block; color: var(--ink-soft); font-size: .9375rem; }
.ak-near-list { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.ak-near-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ak-near-list a { font-weight: 600; color: var(--ink); }
.ak-near-list span { color: var(--ink-soft); }
.ak-more { margin-top: 22px; }

/* Related */
.ak-related--cards .related { display: grid; gap: 16px; }
@media (min-width: 800px) { .ak-related--cards .related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.ak-related--cards .related li { padding: 20px 22px; border: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--ak-shadow); }
.ak-sec:not(.section--sky).ak-related--cards .related li { background: var(--sky); box-shadow: none; }
.ak-related--cards .related li a { font-weight: 600; }

/* ---------- Maps ---------- */
.ak-map { margin: 0; padding: clamp(10px, 1.4vw, 16px); border-radius: var(--ak-radius); background: var(--paper); box-shadow: var(--ak-shadow); }
.ak-sec:not(.section--sky) .ak-map { box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); }
.ak-map-svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.ak-map figcaption:not(.visually-hidden) { margin-top: 10px; padding: 0 4px; font-size: .9375rem; color: var(--ink-soft); }
.lm-sea { fill: #e3ecf2; }
.lm-land { fill: #fff; stroke: #b9c6d0; stroke-linejoin: round; }
.lm-ring { fill: none; opacity: .55; }
.lm-route { stroke: var(--ink); opacity: .6; }
.lm-miles rect { fill: var(--ink); }
.lm-miles text { fill: #fff; font-family: var(--text); font-weight: 600; }
.lm-town { fill: var(--ink); stroke: #fff; }
.lm-place { fill: #7d8790; }
.lm-base { fill: #fff; }
.lm-here { fill: #fff; }
.lm-here-dot { fill: var(--sun-coral); }
.lm-label { font-family: var(--text); font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-linejoin: round; }
.lm-label--minor { fill: #5b6168; font-weight: 400; }
.lm-label--base { font-weight: 700; }
.lm-label--here, .lm-label--hi { font-family: var(--display); font-weight: 600; }
.ak-map svg a { cursor: pointer; }
.ak-map svg a:hover .lm-town { fill: var(--sun-coral); }

/* ---------- Milestone and journey ---------- */
.ak-mile { display: flex; align-items: center; gap: 18px; }
.ak-mile-dial { flex: none; width: 128px; }
.ak-mile-dial svg { width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(38, 40, 42, .14)); }
.ak-mile-ticks line { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.ak-mile-arrow { fill: var(--sun-coral); }
.ak-mile-num { font: 500 34px/1 var(--display); fill: var(--ink); letter-spacing: -0.02em; }
.ak-mile-unit { font: 600 12px/1 var(--text); fill: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }
.ak-mile-text strong { display: block; font: 500 1.5rem/1.2 var(--display); }
.ak-mile-text span { display: block; margin-top: 4px; color: var(--ink-soft); line-height: 1.45; }
.ak-journey { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 999px; background: var(--paper); box-shadow: var(--ak-shadow); }
.ak-journey-end { display: flex; align-items: center; gap: 10px; font-weight: 600; line-height: 1.2; }
.ak-journey-end small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .875rem; }
.ak-journey-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 4px solid transparent; background: var(--ak-ring-bg); }
.ak-journey-dot--base { background: var(--ink); border-color: var(--ink); width: 14px; height: 14px; border-width: 0; }
.ak-journey-line { position: relative; flex: 1 1 auto; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 11px); opacity: .7; min-width: 40px; }
.ak-journey-line span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: .875rem; white-space: nowrap; opacity: 1; }
.ak-journey-end--to { text-align: right; }
@media (max-width: 480px) { .ak-journey { border-radius: 20px; padding: 14px 16px; gap: 10px; } .ak-journey-end { font-size: .9375rem; } }
.ak-faq--two .faq, .ak-faq--cards .faq, .ak-faq--side .faq { max-width: none; }
.ak-faq--cards .faq { border-top: 0; }
.ak-faq--side .ak-text > .ak-ring--lg { margin-bottom: 18px; }

/* Warranties */
.ak-warr { margin: 0; display: grid; gap: 14px; }
.ak-warr dt { font-weight: 600; }
.ak-warr dd { margin: 4px 0 0; color: var(--ink-soft); line-height: 1.5; }
.ak-warr--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.ak-warr--cards > div, .ak-warr--rings > div { display: flex; flex-direction: column; padding: 22px; border-radius: 18px; background: var(--paper); box-shadow: var(--ak-shadow); }
.ak-sec:not(.section--sky) .ak-warr--cards > div { box-shadow: 0 0 0 1px var(--line), var(--ak-shadow); }
.ak-warr .ak-warr-fig { order: -1; margin: 0 0 10px; font: 500 1.875rem/1.1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.ak-warr--rings > div { align-items: flex-start; }
.ak-warr--rings .ak-warr-fig { display: inline-flex; align-items: center; min-height: 52px; padding: 0 18px; border-radius: 999px; border: 3px solid transparent; background: var(--ak-ring-bg); font-size: 1.25rem; }
.ak-warr--rows { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--ak-radius); background: var(--paper); box-shadow: var(--ak-shadow); gap: 0; }
.ak-warr--rows > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ak-warr--rows > div:first-child { padding-top: 0; } .ak-warr--rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ak-warr--rows strong { display: inline-block; margin-right: 8px; color: var(--ink); }
.ak-map { position: relative; }
.ak-map-badge { position: absolute; z-index: 2; top: clamp(20px, 2.4vw, 28px); left: clamp(20px, 2.4vw, 28px); margin: 0; padding: 7px 14px; border-radius: 999px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 10px 22px -14px rgba(38, 40, 42, .5); font-weight: 600; font-size: .9375rem; line-height: 1.3; max-width: calc(100% - 48px); }
.ak-map-badge::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--ak-sun); vertical-align: 0; }
@media (min-width: 1000px) { .ak-hero--wide .ak-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ak-map--badge { padding-top: clamp(58px, 6vw, 66px); } .ak-map--badge .ak-map-badge { top: clamp(12px, 1.4vw, 16px); left: clamp(12px, 1.4vw, 16px); }

/* ---------- Fixes after the first build (16 Oct 2026) ---------- */
/* Two-column ticks: .ticks is a grid in styles.css, so columns, not CSS columns. */
@media (min-width: 800px) { .ak-ticks--two { columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
/* Map labels on phones: the drawing shrinks to the screen, so the words are drawn larger (--k: map units per pixel). */
/* Only big maps (.ak-map--grow, set by the kit) are enlarged: small ones and phone-only ones are already sized for phones. */
@media (max-width: 600px) {
  .ak-map--grow .lm-label { font-size: calc(var(--k) * 21px) !important; stroke-width: calc(var(--k) * 5.5px) !important; }
  .ak-map--grow .lm-label--here, .ak-map--grow .lm-label--hi { font-size: calc(var(--k) * 25px) !important; }
  /* The badge sits above the map on phones, so it never covers a label. */
  .ak-map-badge { position: static; display: inline-block; margin: 0 0 10px; }
  .ak-map--badge { padding-top: clamp(10px, 1.4vw, 16px); }
}
/* The journey's miles pill stays solid: the dashes fade, not the pill. */
.ak-journey-line { opacity: 1; background: none; }
.ak-journey-line::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 11px); opacity: .7; }
.ak-journey-line span { z-index: 1; }
/* Related cards: one column until there's room for three. */
@media (max-width: 799px) { .ak-related--cards .related { grid-template-columns: minmax(0, 1fr); } }
/* Stack heroes: the faded sun arc rises from the hero's top right corner, clear of the words. */
.ak-hero--stack .ak-hero-aside::before { display: none; }
.ak-hero--stack { background: url("sun-arc.svg") right -170px top -230px / 520px 520px no-repeat, linear-gradient(180deg, var(--sky) 0%, #f5f8fa 52%, var(--paper) 100%); }
/* Stat tiles: the sun line on top follows the rounded corners. */
.ak-stats--tiles > div { position: relative; overflow: hidden; border-top: 0; border-image: none; }
.ak-stats--tiles > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)); }
/* The ratings pill on one line in a two-column hero on smaller laptops. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .ak-hero--split .hh-rating, .ak-hero--wide .hh-rating, .ak-hero--flip .hh-rating { font-size: .8125rem; padding: 7px 14px; gap: 6px 12px; }
}