/* No webfont. The brand was the only thing set in it, and it is now the drawn
   wordmark from the identity kit, so the font — and the request for it — is
   gone. Body copy is the system stack. */

/* The palette is the brand palette from the identity kit (logo/README.md):
   dark navy ground, the blue and the teal of the b!t mark as accents. Nothing
   here is picked for its own sake — the header logo has to look like it
   belongs on the page rather than like a sticker. */
:root {
  --bg: #0A1B33;
  --card: #12294A;
  --text: #e8eefc;
  --muted: #b8c3e6;
  --accent: #5FB4FF;
  --accent2: #34D8A8;
  /* Two further hues, deliberately desaturated, so that not every card runs at
     the same temperature. Amber carries anything time-sensitive (the Windows 10
     deadline), mint the softer cues. Both are used at low alpha for fills and
     borders — full strength only on small text, where they still clear 4.5:1
     against the card background. */
  --accent3: #f0b783;
  --accent4: #86d9bd;
  --border: rgba(255, 255, 255, .12);
  --shadow: 0 18px 60px rgba(0, 0, 0, .45);
  --radius: 18px;
  --max: 1120px;
  /* The header bar runs wider than the page column, but not edge to edge. */
  --header-max: 1280px;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  padding-top: var(--header-offset);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color: var(--text);
  /* The two lower washes matter: without them the page ran blue-teal across the
     top and everything below the fold sat on flat navy. */
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(95, 180, 255, .18), transparent 55%),
    radial-gradient(700px 450px at 85% 15%, rgba(52, 216, 168, .18), transparent 55%),
    radial-gradient(620px 430px at 94% 58%, rgba(240, 183, 131, .10), transparent 60%),
    radial-gradient(760px 520px at 6% 74%, rgba(134, 217, 189, .09), transparent 60%),
    radial-gradient(900px 650px at 55% 95%, rgba(95, 180, 255, .10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

a {
  color: inherit;
  text-decoration: none
}

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

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(10, 27, 51, .9), rgba(10, 27, 51, .55));
  border-bottom: 1px solid var(--border);
}

/* The header sits a little wider than the 1120px column the rest of the page
   uses, so the row reads as a bar across the top rather than as a centred block
   — but it still stops short of the window edges, which is what kept the
   wordmark and the buttons from looking flung into opposite corners. Only the
   width changes; the gutters stay the page's own, so below 1280px this is
   indistinguishable from any other .wrap. */
header .wrap {
  max-width: var(--header-max);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

/* The brand is deliberately not an <h1>: the page headline is. The SVG canvas
   is trimmed to the letters, so this height is the height of the wordmark
   itself. width:auto with the intrinsic size on the element keeps the box
   reserved, so the row never reflows.

   One height at every width. The old 38px needed stepping down on narrow
   screens to keep the button row on one line; at this size it fits everywhere,
   so the breakpoint overrides are gone. */
.brand-title {
  display: block;
  height: 32px;
  width: auto;
}

.brand small {
  display: block;
  color: var(--muted);
  font-weight: 500
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

nav a {
  color: var(--muted);
  padding: 10px 10px;
  border-radius: 12px;
}

nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .06)
}

.cta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Positioned so the label clipped away on narrow screens stays inside the
     button rather than being placed against the page. */
  position: relative;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select: none;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .18)
}

.btn.primary {
  border-color: rgba(95, 180, 255, .35);
  background: linear-gradient(135deg, rgba(95, 180, 255, .18), rgba(52, 216, 168, .16));
}

.btn.primary:hover {
  border-color: rgba(95, 180, 255, .55)
}

.btn svg {
  width: 18px;
  height: 18px;
  opacity: .95
}

.btn .icon {
  display: none;
}

.hero {
  padding: 56px 0 26px
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}


.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero .left {
  padding: 28px 26px
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.hero p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  max-width: 70ch
}

.bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .16);
  color: var(--text);
  font-size: 13px;
}

.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 4px rgba(95, 180, 255, .12);
}

/* Five advantages that used to carry five identical dots. Cycling the palette
   costs nothing and stops the list reading as one grey block. */
.bullets li:nth-child(2) .dot {
  background: linear-gradient(135deg, var(--accent2), var(--accent4));
  box-shadow: 0 0 0 4px rgba(52, 216, 168, .12);
}

.bullets li:nth-child(3) .dot {
  background: linear-gradient(135deg, var(--accent4), var(--accent));
  box-shadow: 0 0 0 4px rgba(134, 217, 189, .12);
}

.bullets li:nth-child(4) .dot {
  background: linear-gradient(135deg, var(--accent3), var(--accent2));
  box-shadow: 0 0 0 4px rgba(240, 183, 131, .12);
}

.bullets li:nth-child(5) .dot {
  background: linear-gradient(135deg, var(--accent), var(--accent4));
  box-shadow: 0 0 0 4px rgba(95, 180, 255, .12);
}

section {
  padding: 26px 0
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.section-head h2 {
  margin: 0;
  font-size: 22px
}

.section-head p {
  margin: 0;
  color: var(--muted);
  max-width: 70ch
}

.price-card {
  padding: 16px;
  /* No max-width. The three-column table needs the container, and the section
     had been sitting narrower than every one around it since the price list
     stopped sharing a row with a social embed. */
}

.price-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(52, 216, 168, .45);
  background: rgba(52, 216, 168, .10);
  border-radius: 12px;
}

.price-badge strong {
  font-size: 16px;
}

.price-badge span {
  color: var(--muted);
  font-size: 14px;
}

.price-table {
  display: grid;
}

.price-head,
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(92px, .7fr) minmax(0, 1.6fr);
  gap: 2px 16px;
  align-items: baseline;
}

.price-head {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.price-row {
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.price-head + .price-row {
  border-top: 0;
}

.price-row b {
  font-weight: 600;
}

.price-notes {
  color: var(--muted);
  font-size: 13px;
}

/* Below this the three columns stop fitting. Service and price stay on one
   line — that pairing is the whole point of the table — and the note drops
   underneath rather than squeezing the name to two characters. */
@media (max-width: 720px) {
  .price-head {
    display: none;
  }

  .price-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "service labour"
      "notes notes";
    gap: 2px 12px;
  }

  .price-row b {
    grid-area: service;
  }

  .price-row .price {
    grid-area: labour;
  }

  .price-row .price-notes {
    grid-area: notes;
  }
}

.price {
  font-weight: 700;
  white-space: nowrap
}

.note {
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px
}

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.contact .panel {
  padding: 16px
}

.field {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

label {
  font-size: 13px;
  color: var(--muted)
}

input,
textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .20);
  color: var(--text);
  outline: none;
}

textarea {
  min-height: 110px;
  resize: vertical
}

input:focus,
textarea:focus {
  border-color: rgba(95, 180, 255, .45)
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  overflow: hidden;
  background: rgba(0, 0, 0, .18);
}

.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


footer {
  padding: 22px 0 34px;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, .10);
  margin-top: 18px;
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr
  }

  .contact {
    grid-template-columns: 1fr
  }

  nav ul {
    display: none
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 0 12px;
  }

  .nav {
    gap: 8px;
  }

  header .cta {
    gap: 6px;
  }

  /* Clipped, not display:none. At this width these buttons are the icon alone,
     and the icon is aria-hidden — with the label removed from the
     accessibility tree as well, a screen reader announces two links with no
     name at all, and Lighthouse fails them on "links have a discernible name".
     Clipping keeps the name and shows nothing. */
  header .cta .btn .btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  header .cta .btn .icon {
    display: block;
    width: 18px;
    height: 18px;
  }

  header .cta .btn {
    padding: 8px;
  }

  .hero h2 {
    text-align: left;
  }

  .gradient-text {
    text-align: left;
  }

  .hero .cta {
    flex-direction: column;
  }

  .hero .cta .btn {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .wrap {
    padding: 0 8px;
  }

  .cta .btn {
    padding: 7px;
  }

  .cta .btn .icon {
    width: 16px;
    height: 16px;
  }
}

.gradient-text {
  display: block;
  text-align: center;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  background: linear-gradient(90deg, #5FB4FF, #34D8A8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn.whatsapp {
  border-color: rgba(37, 211, 102, .45);
  background: linear-gradient(135deg,
      rgba(37, 211, 102, .25),
      rgba(37, 211, 102, .12));
}

.btn.whatsapp:hover {
  border-color: rgba(37, 211, 102, .7);
  background: linear-gradient(135deg,
      rgba(37, 211, 102, .35),
      rgba(37, 211, 102, .18));
}


.btn.whatsapp:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
}

:root {
  --header-offset: 84px;
}

section {
  scroll-margin-top: var(--header-offset);
}

.mobile-cta {
  display: none;
}

@media (max-width: 480px) {
  .gradient-text {
    text-align: left;
    padding-top: 3%;
  }

  .mobile-cta {
    display: block;
    margin-top: 20px;
  }

  .mobile-cta .btn {
    width: 100%;
  }
}

/* Language switcher: one button per language the visitor is not already
   reading, kept visible at every breakpoint so the other languages are always
   one tap away. Two buttons at a time leaves the phone-width button row room to
   spare, so these keep full size all the way down. */
.lang-switch {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}

.lang-switch:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
}

.hero-area {
  color: var(--text);
  font-weight: 600;
}

/* Honeypot: must stay reachable to bots but hidden from people and screen
   readers, so it cannot use display:none. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#formStatus:empty {
  margin-top: 0;
}

#formStatus[data-state="ok"] {
  color: #6ee7b7;
}

#formStatus[data-state="error"] {
  color: #fca5a5;
}

@media (max-width: 360px) {
  .lang-switch {
    padding: 7px 8px;
    font-size: 13px;
  }
}

/* --- Service catalogue -------------------------------------------------- */

.expand-hint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}

/* The single-column rule lives here rather than with the other max-width:900px
   collapses further up the file: this block comes later, so at equal
   specificity the two-column default won there and the cards stayed side by
   side on a phone — narrow enough that a long word pushed the page wider than
   the screen and the whole site scrolled sideways. */
@media (max-width: 900px) {
  .categories {
    grid-template-columns: 1fr;
  }
}

.category {
  padding: 0;
}

.category>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  /* Removes the default disclosure triangle in both engine families. */
  list-style: none;
  border-radius: var(--radius);
}

.category>summary::-webkit-details-marker {
  display: none;
}

.category>summary:hover {
  background: rgba(255, 255, 255, .04);
}

.category>summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.category-heading {
  display: grid;
  gap: 4px;
}

.category-title {
  font-weight: 700;
}

.category-summary {
  color: var(--muted);
  font-size: 13px;
}

.category-marker {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .15s ease;
}

.category[open] .category-marker {
  transform: rotate(-135deg);
}

.category-body {
  padding: 0 16px 16px;
}

.category-body ul {
  margin: 0 0 14px;
  padding-left: 18px;
  color: var(--muted);
}

.category-body li {
  margin: 6px 0;
}

.quote-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 70ch;
}

/* --- Russian / Ukrainian notice (English pages only) -------------------- */

.languages {
  padding: 18px;
  display: grid;
  gap: 4px;
  justify-items: start;
  /* Mint rather than cyan: this card sits directly above the amber deadline
     banner, and two differently coloured edges read as two separate things
     rather than one long stack of cards. */
  border-color: rgba(134, 217, 189, .32);
  background:
    linear-gradient(180deg, rgba(134, 217, 189, .08), rgba(134, 217, 189, .02)),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
}

.languages-title {
  margin: 0;
  font-weight: 600;
}

.languages-note {
  margin: 6px 0 12px;
  color: var(--muted);
}

.languages-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- Windows 10 deadline banner ---------------------------------------- */

.deadline {
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-color: rgba(52, 216, 168, .35);
}

.deadline-body {
  flex: 1 1 320px;
}

.deadline-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(95, 180, 255, .35);
  border-radius: 999px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.deadline-title {
  margin: 0 0 6px;
  font-size: 18px;
}

.deadline-text {
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

/* The Windows 10 banner is the one genuinely time-sensitive thing on the home
   page, so it is the one block that takes the amber accent. `.deadline` on its
   own is reused for the plain "get in touch" card at the foot of every area
   page, which should stay neutral — hence a modifier rather than restyling the
   base class. */
.deadline.w11 {
  position: relative;
  overflow: hidden;
  padding-left: 22px;
  border-color: rgba(240, 183, 131, .38);
  background:
    linear-gradient(180deg, rgba(240, 183, 131, .10), rgba(240, 183, 131, .02)),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
}

/* A strip down the leading edge rather than a filled panel: enough to catch the
   eye on the way past without turning the card into a warning box. */
.deadline.w11::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent3), rgba(52, 216, 168, .55));
}

.deadline.w11 .deadline-label {
  border-color: rgba(240, 183, 131, .45);
  background: rgba(240, 183, 131, .08);
  color: var(--accent3);
}

/* The date is the whole point of the sentence, so it carries the colour and the
   rest of the headline stays plain. */
.deadline-date {
  color: var(--accent3);
  white-space: nowrap;
}

.deadline.w11 .btn.primary {
  border-color: rgba(240, 183, 131, .42);
  background: linear-gradient(135deg, rgba(240, 183, 131, .20), rgba(52, 216, 168, .14));
}

.deadline.w11 .btn.primary:hover {
  border-color: rgba(240, 183, 131, .62);
}

/* --- Long-form pages ---------------------------------------------------- */

.article-head {
  padding: 28px 26px;
}

.article-head h1 {
  margin: 8px 0 12px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.article-head .lead {
  color: var(--text);
  font-size: 17px;
  max-width: 74ch;
}

.article-head p {
  margin: 0 0 14px;
  color: var(--muted);
  max-width: 74ch;
}

.article-sections {
  display: grid;
  gap: 14px;
}

.article-section {
  padding: 20px;
}

.article-section h2 {
  margin: 0 0 10px;
  font-size: 18px;
}

.article-section p {
  margin: 0 0 12px;
  color: var(--muted);
  max-width: 78ch;
}

.article-section ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.article-section li {
  margin: 6px 0;
}

@media (max-width: 480px) {
  .deadline .btn {
    width: 100%;
  }

  .article-head {
    padding: 22px 18px;
  }
}

/* --- Trust signals ------------------------------------------------------ */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.trust-item {
  padding: 16px;
}

/* One tinted edge per card, cycling the four accents. Four cards, four hues, so
   the grid never repeats a colour next to itself. */
.trust-item:nth-child(1) {
  border-top-color: rgba(95, 180, 255, .40);
}

.trust-item:nth-child(2) {
  border-top-color: rgba(52, 216, 168, .40);
}

.trust-item:nth-child(3) {
  border-top-color: rgba(134, 217, 189, .40);
}

.trust-item:nth-child(4) {
  border-top-color: rgba(240, 183, 131, .40);
}

.trust-item:nth-child(5) {
  border-top-color: rgba(255, 176, 102, .40);
}

.trust-item h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.trust-item p {
  margin: 0;
  color: var(--muted);
}

/* --- Reviews ------------------------------------------------------------ */

/* The rating line above the cards, and its twin in the hero. Both are built
   from data/reviews.json, so neither appears until there are reviews. */
.reviews-aggregate {
  margin: 0 0 14px;
  font-size: 15px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.review {
  margin: 0;
  padding: 18px;
}

.review blockquote {
  margin: 0 0 12px;
  color: var(--text);
}

.review blockquote::before {
  content: "\201C";
  margin-right: 2px;
  color: var(--accent);
}

.review blockquote::after {
  content: "\201D";
  margin-left: 2px;
  color: var(--accent);
}

.review figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  color: var(--muted);
  font-size: 13px;
}

.review-author {
  color: var(--text);
  font-weight: 600;
}

/* The stars and the month. --accent4 rather than --accent: five of these in a
   row at full brightness pulls the eye away from the words above them, which
   are the part worth reading. */
.review-meta {
  color: var(--accent4);
  letter-spacing: .04em;
}

.reviews-link {
  margin: 14px 0 0;
}

/* --- Consent checkbox --------------------------------------------------- */

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.consent input {
  width: auto;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.consent a {
  color: var(--accent);
  text-decoration: underline;
}

/* --- Long-form prose (privacy notice) ----------------------------------- */

.prose {
  padding: 24px 26px;
  max-width: 78ch;
}

.prose h2 {
  margin: 26px 0 10px;
  font-size: 18px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0 0 12px;
  color: var(--muted);
}

.prose-list {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--muted);
}

/* Sections that are prose only still emit the list element. */
.prose-list:empty {
  display: none;
}

.prose-list li {
  margin: 6px 0;
}

.prose-meta {
  color: var(--muted);
  font-size: 13px;
}

/* --- Footer links ------------------------------------------------------- */

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  font-size: 13px;
}

.foot-links a {
  color: var(--muted);
}

.foot-links a:hover {
  color: var(--text);
}

.foot-areas {
  border-bottom: 0;
  padding-bottom: 0;
}



.foot-contacts a {
  color: var(--accent);
}

.foot-contacts a:hover {
  color: var(--text);
}

.contact-direct {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}

.contact-direct a {
  color: var(--accent);
}

.contact-direct a:hover {
  color: var(--text);
}

.foot-areas-title {
  color: var(--muted);
  opacity: .7;
}

/* --- Cross-links between area pages ------------------------------------- */

.nearby {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 14px;
}

.nearby-title {
  color: var(--muted);
}

.nearby a {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
}

.nearby a:hover {
  color: var(--text);
  background: rgba(95, 180, 255, .10);
  border-color: rgba(95, 180, 255, .35);
}

@media (max-width: 480px) {
  .prose {
    padding: 20px 18px;
  }
}

/* Respect a system-level request to reduce motion. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover {
    transform: none;
  }
}

/* T11 — the footer was a flat sheet: three links, then thirteen town buttons,
   then contacts. Four labelled columns instead, collapsing to one on a phone. */
.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px 28px;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.foot-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
}

.foot-col-title {
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.foot-col a {
  color: var(--muted);
}

.foot-col a:hover {
  color: var(--text);
}

.foot-note {
  color: var(--muted);
}

/* Thirteen towns as a comma-run rather than thirteen separate targets: it is a
   coverage statement, and reading it as a sentence takes a fraction of the
   vertical space. The commas are decorative, so they stay out of the a11y tree. */
.foot-areas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px 6px;
}

.foot-areas a:not(:last-child)::after {
  content: ",";
  color: var(--muted);
}

.foot-areas-title {
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  width: 100%;
}

/* T1 — both of these sit on the same gate as the reviews data itself, so
   neither renders until real reviews exist. */
.hero-rating {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.hero-rating a {
  color: var(--accent);
}


/* T10 — portrait beside the text, workshop shots beneath. Empty until the
   photographs arrive, at which point the section appears whole. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 14px;
}

.about-portrait,
.about-shot {
  margin: 0;
  padding: 10px;
  overflow: hidden;
}

.about-portrait img,
.about-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.about-portrait figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.about-body {
  padding: 16px;
}

.about-shot {
  grid-column: span 1;
}

@media (max-width: 760px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* T3 — the confirmation replaces the form rather than appearing as one more
   line of status text under it. */
.form-thanks {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(52, 216, 168, .45);
  background: rgba(52, 216, 168, .10);
  border-radius: 12px;
}

.form-thanks strong {
  display: block;
  margin-bottom: 6px;
}

.form-thanks p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* T4 — the map is centred on the town, so the address line carries what the
   pin used to imply. */
.map-location {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}