/* ===========================================================
   Kingston's Locksmiths — Oxford
   Base styles — no external fonts/CDNs (system font stack only)
   Palette: black / gold / beige
   =========================================================== */

:root {
  --black: #000000;
  --black-soft: #000000;
  --gold: #cda45a;
  --gold-dark: #a67f34;
  --gold-dark-text: #755924; /* darker than --gold-dark so small gold text meets 4.5:1 contrast on white/beige */
  --gold-shine: linear-gradient(135deg, #fbe8b8 0%, #e8c375 22%, #b8863a 48%, #f2d68f 72%, #cda45a 100%);
  --gold-shine-hover: linear-gradient(135deg, #f2d68f 0%, #d9ad5f 22%, #a3792f 48%, #e8c375 72%, #b8863a 100%);
  --red: #a13a2a;
  --beige-50: #f6efe0;
  --beige-100: #ecdfc4;
  --beige-200: #d8c6a0;
  --brown-600: #6b5d47;
  --ink: #211c15;
  --radius: 10px;
  --max-width: 1120px;
  --shadow: 0 4px 16px rgba(20, 17, 13, 0.14);
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: var(--black);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--black); }

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

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

ul.plain { list-style: none; margin: 0; padding: 0; }

/* Screen-reader-only heading: keeps document heading order valid for
   assistive tech and SEO without changing the visual design. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Top emergency bar ---------- */
.emergency-bar {
  background: var(--red);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 12px;
}

.emergency-bar a {
  color: #fff;
  text-decoration: underline;
}

/* ---------- Header / nav ---------- */
header.site-header {
  background: var(--black);
  color: #fff;
}

.nav-close {
  display: none;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 32px;
}

.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo {
  height: 48px;
  width: auto;
  max-width: 100%;
  display: block;
}

.logo-img {
  height: 150px;
  width: auto;
  max-width: 100%;
  display: block;
}

nav.main-nav {
  flex: 1 1 auto;
}

nav.main-nav ul {
  display: flex;
  row-gap: 26px;
  column-gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

nav.main-nav a {
  position: relative;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 2px;
  transition: color 0.25s ease;
  white-space: nowrap;
}

nav.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold-shine);
  transition: right 0.25s ease;
}

nav.main-nav a:hover,
nav.main-nav a[aria-current="page"] {
  color: var(--gold);
}

nav.main-nav a:hover::after,
nav.main-nav a[aria-current="page"]::after {
  right: 0;
}

.call-btn .icon-inline,
.btn .icon-inline {
  margin-right: 8px;
}

.call-btn-text {
  margin-left: 4px;
}

.call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--gold-shine);
  background-size: 200% auto;
  color: var(--black-soft);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 8px rgba(166,127,52,0.35);
  transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.call-btn:hover {
  background: var(--gold-shine-hover);
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 16px rgba(166,127,52,0.5);
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
  color: #fff;
  padding: 64px 0;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.hero h1 { color: #fff; }

.hero p.lead {
  font-size: 1.15rem;
  color: var(--beige-50);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
  background: var(--gold-shine);
  background-size: 200% auto;
  color: var(--black-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 10px rgba(166,127,52,0.35);
  transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
  background: var(--gold-shine-hover);
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 20px rgba(166,127,52,0.5);
}

.btn-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: #075e54;
  color: #fff;
  box-shadow: 0 3px 10px rgba(7,94,84,0.35);
}

.btn-whatsapp:hover {
  background: #0a6b60;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(7,94,84,0.45);
}

.hero-badges {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-size: 0.9rem;
  color: var(--beige-200);
}

.hero-badges li { display: flex; align-items: center; gap: 8px; }

.hero-panel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(205,164,90,0.35);
  border-radius: var(--radius);
  padding: 26px;
}

.hero-panel h2 {
  background: var(--gold-shine);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gold);
  -webkit-text-fill-color: transparent;
  font-size: 1.3rem;
}

.hero-panel ul { margin: 0; padding-left: 1.1em; color: var(--beige-50); }
.hero-panel li { margin-bottom: 8px; }

/* ---------- Sections ---------- */
section {
  padding: 56px 0;
}

section.alt { background: var(--beige-50); }

.section-head {
  max-width: 60ch;
  margin: 0 auto 36px;
  text-align: center;
}

.section-head p { color: var(--brown-600); }

/* ---------- Service cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

/* Plain card grids: 4 across, then 2, then 1, with any leftover cards centred
   on the last row instead of sitting alone on the left. (Photo/work grids keep
   their own layouts below.) */
.card-grid:not(.work-grid):not(.services-photo-grid) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.card-grid:not(.work-grid):not(.services-photo-grid) > * {
  flex: 0 1 calc((100% - 3 * 22px) / 4);
  min-width: 0;
}
.card-grid:not(.work-grid):not(.services-photo-grid) > :only-child { flex-basis: 100%; }
@media (max-width: 1099px) {
  .card-grid:not(.work-grid):not(.services-photo-grid) > * { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 639px) {
  .card-grid:not(.work-grid):not(.services-photo-grid) > * { flex-basis: 100%; }
}

.card {
  background: #fff;
  border: 1px solid var(--beige-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}

.card h3 { margin-bottom: 8px; }
.card p { color: var(--brown-600); margin-bottom: 12px; }
.card a.card-link { font-weight: 600; text-decoration: none; color: var(--gold-dark-text); }
.card a.card-link::after { content: " →"; }
.card h3 a { color: inherit; text-decoration: none; }

/* ---------- Callout / CTA band ---------- */
.cta-band {
  background: var(--black);
  color: #fff;
  text-align: center;
  padding: 48px 0;
}

.cta-band h2 { color: #fff; }
.cta-band p { color: var(--beige-200); max-width: 55ch; margin: 0 auto 22px; }

/* ---------- Lists / area coverage ---------- */
.area-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.area-list li {
  padding: 10px 14px;
  background: var(--beige-50);
  border-radius: 6px;
  border: 1px solid var(--beige-100);
}

/* ---------- Trust strip ---------- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
  padding: 26px 0;
  border-top: 1px solid var(--beige-100);
  border-bottom: 1px solid var(--beige-100);
  color: var(--brown-600);
  font-size: 0.92rem;
  text-align: center;
}

/* ---------- Forms ---------- */
form {
  display: grid;
  gap: 16px;
  max-width: 560px;
}

form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.92rem;
}

form input,
form select,
form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--beige-200);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}

form textarea { min-height: 120px; resize: vertical; }

form button {
  justify-self: start;
}

.form-note {
  font-size: 0.85rem;
  color: var(--brown-600);
}

/* ---------- Contact / info blocks ---------- */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.55);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-toggle:hover {
  background: rgba(255,255,255,0.16);
  border-color: #fff;
}

@media (max-width: 1279px) {
  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .brand { margin-right: 0; min-width: 0; overflow: hidden; }
  .call-btn { min-width: 0; }

  .nav-toggle { display: inline-flex; order: 3; padding: 0 22px; font-size: 1rem; height: 46px; }
  .header-row .call-btn { height: 46px; padding: 0 24px; font-size: 1rem; }
  .nav-toggle .icon-inline svg { width: 1.1em; height: 1.1em; }
  .header-row .call-btn { order: 2; margin-left: auto; }
  .call-btn .call-btn-text { display: none; }

  nav.main-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--black);
    z-index: 2000;
    padding: 90px 28px 40px;
    overflow-y: auto;
  }

  nav.main-nav.open { display: block; }

  .nav-close {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: var(--gold);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }

  nav.main-nav.open .nav-close { display: flex; }
  .nav-close .icon-inline svg { width: 28px; height: 28px; }

  nav.main-nav ul {
    flex-direction: column;
    gap: 8px;
    padding-top: 0;
    justify-content: flex-start;
  }

  nav.main-nav li {
    border-bottom: 1px dashed rgba(205,164,90,0.45);
  }

  nav.main-nav li:last-child { border-bottom: none; }

  nav.main-nav a {
    display: block;
    padding: 20px 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

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

@media (max-width: 600px) {
  .header-row { gap: 8px; padding: 12px 16px; }
  .header-row .call-btn { padding: 0 16px; font-size: 0.78rem; height: 36px; }
  .brand { min-width: 0; }
  .brand-logo { height: 46px; }
  .nav-toggle { padding: 0 14px; font-size: 0.78rem; height: 36px; }
}

@media (max-width: 380px) {
  .header-row .call-btn { padding: 0 12px; font-size: 0.72rem; height: 34px; }
  .nav-toggle { padding: 0 12px; font-size: 0.72rem; height: 34px; }
  .brand-logo { height: 38px; }
}

@media (max-width: 330px) {
  .header-row .call-btn { padding: 0 10px; font-size: 0.66rem; height: 32px; }
  .nav-toggle { padding: 0 10px; font-size: 0.66rem; height: 32px; }
  .brand-logo { height: 34px; }
}

@media (max-width: 1279px) {
  header.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  }
}

/* ---------- Floating action buttons ---------- */
.floating-actions a {
  position: fixed;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  z-index: 500;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.floating-actions a:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}

.floating-actions a svg {
  width: 28px;
  height: 28px;
}

.fab-whatsapp {
  left: 20px;
  background: #25d366;
}

.fab-whatsapp:hover { background: #1ebe57; }

.fab-call {
  right: 20px;
  background: var(--gold-shine);
  background-size: 200% auto;
}

.fab-call:hover { background-position: right center; }

@media (max-width: 480px) {
  .floating-actions a { width: 52px; height: 52px; bottom: 16px; }
  .fab-whatsapp { left: 14px; }
  .fab-call { right: 14px; }

  /* The floating Call/WhatsApp buttons are fixed at the bottom corners of the
     screen (roughly x:14-66px on each side). Card text can otherwise scroll
     to sit right behind them. Insetting card content past that zone means
     the buttons can only ever overlap empty padding, never the words. */
  .feature-strip .container { padding-left: 58px; padding-right: 58px; }
  /* text-only card grids now run full width too; the floating buttons only pass over words briefly while scrolling */
}

/* Guaranteed clear space at the true end of every page, so the last section's
   content never ends flush with the bottom of the viewport where the
   floating buttons sit. */
main { padding-bottom: 70px; }

/* ---------- Ask a Question widget ---------- */
/* A quiet, monochrome side tab (not a colourful floating button) so it never
   gets mistaken for the Call / WhatsApp buttons. */
.faq-bot-toggle {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 40px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #000;
  color: #fff;
  border: 1px solid #fff;
  border-right: none;
  border-radius: 8px 0 0 8px;
  box-shadow: -3px 4px 14px rgba(0,0,0,0.25);
  cursor: pointer;
  z-index: 500;
  transition: width 0.15s ease, padding 0.15s ease;
}
.faq-bot-toggle:hover { width: 44px; }
.faq-bot-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.faq-bot-toggle span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.faq-bot-panel {
  position: fixed;
  top: 50%;
  right: 46px;
  transform: translateY(-50%) translateX(10px) scale(0.98);
  width: 340px;
  max-width: calc(100vw - 66px);
  max-height: min(480px, 82vh);
  background: var(--beige-50);
  border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(0,0,0,0.28);
  z-index: 600;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.faq-bot-panel.open {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
  pointer-events: auto;
}

.faq-bot-header {
  background: var(--black);
  color: var(--gold);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.faq-bot-close {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -10px -10px -10px 0;
}
.faq-bot-close svg { width: 18px; height: 18px; }

.faq-bot-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
}

.faq-bot-bubble {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.faq-bot-bubble a { color: inherit; text-decoration: underline; }
.faq-bot-bubble-bot {
  background: #fff;
  border: 1px solid var(--beige-100);
  color: var(--black);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.faq-bot-bubble-user {
  background: var(--gold-shine);
  color: var(--black-soft);
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}

.faq-bot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
  flex-shrink: 0;
}
.faq-bot-chip {
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--beige-200);
  background: #fff;
  color: var(--brown-600);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.faq-bot-chip:hover { border-color: var(--gold-dark); color: var(--black); }

.faq-bot-form {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--beige-100);
  flex-shrink: 0;
}
.faq-bot-input {
  flex: 1;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--beige-200);
  font-size: 0.9rem;
  font-family: inherit;
}
.faq-bot-form .btn { padding: 9px 16px; font-size: 0.9rem; }

.faq-bot-disclaimer {
  font-size: 0.72rem;
  color: var(--brown-600);
  text-align: center;
  padding: 0 14px 10px;
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .faq-bot-toggle { width: 34px; padding: 10px 6px; }
  .faq-bot-toggle span { font-size: 0.6rem; }
  .faq-bot-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 75vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(12px) scale(0.98);
  }
  .faq-bot-panel.open {
    transform: translateY(0) scale(1);
  }
}

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--black-soft);
  color: var(--beige-200);
  padding: 40px 0 24px;
  font-size: 0.9rem;
}

footer.site-footer .container {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;  /* 4 across, then 2x2, then 1: never 3 + 1 */
  gap: 28px 24px;
}
@media (max-width: 999px) {
  footer.site-footer .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  footer.site-footer .container { grid-template-columns: 1fr; }
  /* long link lists split into two short columns on phones */
  footer.site-footer ul.plain:not(.footer-contact) { columns: 2; column-gap: 20px; }
  footer.site-footer ul.plain:not(.footer-contact) li { break-inside: avoid; }
}

footer.site-footer .footer-heading {
  color: var(--gold);
  font-size: 1rem;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
}
footer.site-footer a { color: var(--beige-200); text-decoration: none; }
footer.site-footer a:hover { color: var(--gold); text-decoration: underline; }

/* Same line spacing for link and non-link lists; links keep a comfortable tap area */
footer.site-footer ul.plain li { margin: 0; padding: 6px 0; }
footer.site-footer ul.plain li:has(> a) { padding: 0; }
footer.site-footer ul.plain li > a { display: inline-block; padding: 6px 0; }
footer.site-footer .fine-print {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(216,198,160,0.15);
  margin-top: 10px;
  padding-top: 16px;
  font-size: 0.82rem;
  color: rgba(216,198,160,0.6);
}

.footer-logo { height: auto; max-height: 56px; width: auto; max-width: 100%; margin-bottom: 12px; }
.footer-brand p { margin: 6px 0 12px; font-size: 0.85rem; }

.social-links { display: flex; gap: 12px; }

.social-links a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(216,198,160,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-links a:hover { border-color: var(--gold); background: rgba(205,164,90,0.12); }
.social-links .icon-inline { width: 16px; height: 16px; }

.footer-contact li { display: flex; align-items: center; gap: 8px; }
.footer-contact li > a { display: inline-block; padding: 6px 0; overflow-wrap: anywhere; }

/* ---------- Icons (generic) ---------- */
.icon, .icon-inline { display: inline-flex; }
.icon svg { width: 100%; height: 100%; }
.icon-inline svg { width: 1em; height: 1em; vertical-align: -0.15em; }

/* ---------- Feature strip ---------- */
.feature-strip {
  background: var(--black);
  padding: 34px 0;
}

.feature-strip .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  text-align: center;
}

.feature-strip .feature-item {
  flex: 1 1 140px;
  max-width: 200px;
}

.feature-item .icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  color: var(--gold);
  border: 1.5px solid rgba(205,164,90,0.4);
  border-radius: 50%;
  padding: 9px;
}

.feature-item strong {
  display: block;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.feature-item span {
  display: block;
  font-size: 0.82rem;
  color: var(--beige-200);
}

/* ---------- How It Works steps ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 across, then 2x2, then 1: never 3 + 1 */
  gap: 28px;
  counter-reset: step;
}
@media (max-width: 899px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 519px) { .steps-grid { grid-template-columns: 1fr; } }

.step-item {
  position: relative;
  text-align: center;
  padding: 8px 6px 0;
}

.step-item .step-icon {
  position: relative;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  background: #fff;
  border: 1.5px solid rgba(205,164,90,0.4);
  border-radius: 50%;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-item .step-icon .icon {
  width: 28px;
  height: 28px;
  color: var(--gold-dark);
}

.step-item .step-num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold-dark);
  color: var(--black);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step-item p { color: var(--brown-600); font-size: 0.92rem; }

/* ---------- Service card icons ---------- */
.card .service-icon {
  width: 46px;
  height: 46px;
  color: var(--gold-dark);
  background: var(--beige-50);
  border-radius: 50%;
  padding: 11px;
  margin-bottom: 14px;
}

/* ---------- Photo placeholder ---------- */
.photo-placeholder {
  border: 2px dashed var(--beige-200);
  border-radius: var(--radius);
  background: var(--beige-50);
  color: var(--brown-600);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 40px 24px;
  min-height: 220px;
}

.photo-placeholder .icon { width: 42px; height: 42px; color: var(--gold-dark); }
.photo-placeholder strong { color: var(--black); font-size: 0.95rem; }
.photo-placeholder span { font-size: 0.82rem; }

.photo-placeholder.dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(205,164,90,0.35);
  color: var(--beige-200);
}
.photo-placeholder.dark strong { color: #fff; }

.job-media {
  border: 2px dashed var(--beige-200);
  border-radius: calc(var(--radius) - 4px);
  background: var(--beige-50);
  color: var(--brown-600);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 16px;
}

.job-media .icon { width: 34px; height: 34px; color: var(--gold-dark); }
.job-media strong { color: var(--black); font-size: 0.85rem; font-weight: 600; }

.job-media video,
.job-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius) - 4px);
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.before-after.three { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

.before-after figure {
  margin: 0;
  position: relative;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.before-after img,
.before-after video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.before-after figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

/* ---------- Our Work: larger cards + play button ---------- */
.work-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}
/* Job cards: centre an odd card left on the last row instead of leaving it on the left */
.card-grid.work-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.card-grid.work-grid > * { flex: 1 1 380px; max-width: calc((100% - 22px) / 2); min-width: 0; }
.card-grid.work-grid[style*="max-width"] > * { max-width: 100%; }
@media (max-width: 819px) { .card-grid.work-grid > * { max-width: 100%; } }

.services-photo-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .services-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .services-photo-grid { grid-template-columns: 1fr; }
}

.work-photo {
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
}

.home-work-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-work-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.home-work-card .work-photo,
.home-work-card .work-video-full {
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
}

.home-work-card h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.home-work-card p {
  color: var(--brown-600);
  margin-bottom: 0;
}

.our-work-preview-card h3 {
  margin-top: auto;
  margin-bottom: 0;
}

.work-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work-grid .before-after figure { aspect-ratio: 4 / 3; }
.work-grid .before-after.three figure { aspect-ratio: 3 / 4; }

.video-figure { cursor: pointer; position: relative; }

.work-video-full {
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  margin-bottom: 16px;
}

.work-video-full video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 2px solid rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.video-figure.is-playing .play-badge { pointer-events: none; }

.play-badge .icon { width: 22px; height: 22px; color: #fff; margin-left: 3px; }

.video-figure.is-playing .play-badge { opacity: 0; }

.hero-photo {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(205,164,90,0.35);
  box-shadow: var(--shadow);
  max-height: 480px;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

.hero-photo-portrait {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  position: relative;
  max-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-photo-portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: 46%;
  height: 22px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 75%);
  z-index: 0;
  pointer-events: none;
}

.hero-photo-wide {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  max-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-photo-wide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
}

.hero-photo-portrait img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  max-height: 520px;
  width: auto;
  max-width: 100%;
}

/* ---------- About section ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.trust-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--beige-50);
  border: 1px solid var(--beige-100);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brown-600);
}

.trust-badges .icon-inline { color: var(--gold-dark); }

/* ---------- Reviews ---------- */
.review-card {
  background: #fff;
  border: 1px solid var(--beige-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.review-stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 12px; }
.review-stars .icon-inline { width: 16px; height: 16px; }
.review-card p.review-text { font-style: italic; color: var(--ink); }
.review-card .review-author { font-weight: 700; color: var(--black); font-size: 0.9rem; }
.review-example-tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gold-dark-text);
  background: var(--beige-50);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 10px;
}

.reviews-note {
  background: var(--beige-50);
  border: 1px solid var(--beige-100);
  border-radius: var(--radius);
  padding: 20px 24px;
  color: var(--brown-600);
  font-size: 0.92rem;
}

/* ---------- Dual CTA band ---------- */
.dual-cta { background: var(--black-soft); padding: 40px 0; }

.dual-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.dual-cta-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(205,164,90,0.25);
  border-radius: var(--radius);
  padding: 20px;
  flex-wrap: wrap;
}

.dual-cta-icon {
  width: 34px;
  height: 34px;
  color: var(--gold);
  flex-shrink: 0;
}

.dual-cta-box div { flex: 1; min-width: 160px; }
.dual-cta-box strong { display: block; color: #fff; }
.dual-cta-box span { display: block; color: var(--beige-200); font-size: 0.85rem; }

/* ---------- FAQ accordion ---------- */
.faq-item {
  border: 1px solid var(--beige-100);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-item summary {
  padding: 16px 20px;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--beige-50);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon-inline { color: var(--gold-dark); transition: transform 0.2s ease; }
.faq-item[open] summary .icon-inline { transform: rotate(180deg); }
.faq-item p { padding: 16px 20px; margin: 0; color: var(--brown-600); }

/* ---------- Pin list (areas) ---------- */
.pin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pin-list li { display: flex; align-items: center; gap: 8px; }
.pin-list .icon-inline { color: var(--gold-dark); }

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

/* ---------- Areas We Cover: coverage map (drawn by coverage_map.py) ---------- */
.coverage-map { width: 100%; height: auto; display: block; background: var(--beige-50, #faf6ee); border-radius: var(--radius, 14px); }
.coverage-map .cm-area { fill: rgba(205,164,90,0.13); stroke: rgba(166,127,52,0.55); stroke-width: 2; stroke-dasharray: 6 6; }
.coverage-map text { font-family: inherit; font-size: 17px; fill: #5a4a38; }
.coverage-map .cm-town circle { fill: #cda45a; stroke: #111; stroke-width: 1.5; }
.coverage-map .cm-main circle { fill: #c9a24e; stroke: #111; stroke-width: 3; }
.coverage-map .cm-main text { font-size: 24px; font-weight: 700; fill: #111; }
.coverage-map .cm-main:hover text { text-decoration: underline; }
.coverage-map .cm-ref circle { fill: none; stroke: #9b9b9b; stroke-width: 2; }
.coverage-map .cm-ref text { fill: #8f8f8f; font-style: italic; font-size: 15px; }
@media (max-width: 600px) {
  /* on phones keep the five main towns readable; the full list sits under the map */
  .coverage-map .cm-town text, .coverage-map .cm-ref { display: none; }
  .coverage-map .cm-town circle { r: 8px; }
  .coverage-map .cm-main text { font-size: 37px; }
  .coverage-map .cm-main circle { r: 16px; }
}

/* Real street map (js/coverage-map.js). Fixed height so nothing jumps when it swaps in. */
.cov-map { position: relative; height: 560px; background: var(--beige-50); }
.cov-fallback { position: absolute; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: var(--beige-50); transition: opacity 0.45s ease; }
.cov-fallback .coverage-map { height: 100%; width: 100%; border-radius: 0; }
.cov-map.tiles-ready .cov-fallback { opacity: 0; pointer-events: none; }
.cov-loading { display: flex; align-items: center; gap: 10px; color: var(--brown-600); font-size: 0.95rem; }
.cov-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(166,127,52,0.25); border-top-color: var(--gold-dark); animation: cov-spin 0.8s linear infinite; }
@keyframes cov-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cov-spinner { animation: none; } }
.cov-map .leaflet-container, .cov-map.leaflet-container { font-family: inherit; background: var(--beige-50); }
.cov-map .leaflet-tile-pane { filter: saturate(0.6) contrast(0.96); }
.cov-pin { background: none; border: 0; }
.cov-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.cov-label.leaflet-tooltip { background: #111; color: #fff; border: 0; border-radius: 6px; padding: 3px 8px; font-weight: 700; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.cov-label.leaflet-tooltip-right::before { border-right-color: #111; }
.cov-label.leaflet-tooltip-left::before { border-left-color: #111; }
.cov-label.leaflet-tooltip-top::before { border-top-color: #111; }
.cov-small.leaflet-tooltip { background: rgba(255,255,255,.92); color: var(--ink); border: 1px solid var(--beige-200); border-radius: 5px; padding: 1px 6px; font-size: 12px; box-shadow: none; }
.cov-small.leaflet-tooltip::before { display: none; }
.cov-map.zoomed-out .cov-small { display: none; }
.cov-map.zoomed-out .cov-small.show { display: block; }
.cov-map .leaflet-popup-content { margin: 12px 14px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.cov-map .leaflet-popup-content strong { display: block; font-size: 16px; margin-bottom: 2px; }
.cov-map .leaflet-popup-content a.cov-go { display: inline-block; margin-top: 8px; padding: 7px 12px; border-radius: 6px; background: var(--gold-shine); color: #111; font-weight: 700; text-decoration: none; }
.cov-map .leaflet-popup-content a.cov-call { display: block; margin-top: 8px; color: var(--gold-dark-text); font-weight: 700; }
.cov-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 500; margin: 0; background: rgba(17,17,17,.82); color: #fff; font-size: 13px; padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; transition: opacity .3s; }
.cov-hint.gone { opacity: 0; }
@media (max-width: 600px) {
  .cov-map { height: 470px; }
  .cov-label.leaflet-tooltip { font-size: 12px; padding: 2px 6px; }
  .cov-hint { font-size: 12px; left: auto; right: 10px; transform: none; }
}

/* ---------- Phones: wider photos in photo cards ----------
   The 58px side inset above keeps card text clear of the floating Call/WhatsApp
   buttons, but it also squeezed the photos to about half the screen. For cards
   with photos, the card now spans the full width and the photo fills it; only the
   words keep the inset, so they still never sit behind the buttons. */
@media (max-width: 480px) {
  .card-grid.services-photo-grid, .card-grid.work-grid { padding-left: 0; padding-right: 0; }
  .services-photo-grid > .card, .work-grid > .card { padding: 12px 12px 22px; }
  .services-photo-grid > .card > :not(.work-photo):not(.before-after):not(.work-video-full):not(.job-media):not(figure),
  .work-grid > .card > :not(.work-photo):not(.before-after):not(.work-video-full):not(.job-media):not(figure) {
    padding-left: 4px; padding-right: 4px; /* words line up with the photo edge; the floating buttons only pass over them briefly while scrolling */
  }
}

/* ---------- Services: "Just moved in?" panel + key system options ---------- */
.info-panel {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--beige-100);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
}
.info-panel h3 { font-size: 1.5rem; margin-bottom: 12px; }
.info-panel p { color: var(--brown-600); }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tick-list li { position: relative; padding-left: 32px; color: var(--brown-600); line-height: 1.5; }
.tick-list li strong { color: var(--ink); }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center / 13px no-repeat;
}
#moving-home, #master-key { scroll-margin-top: 110px; }
@media (min-width: 820px) {
  .key-systems .card-grid:not(.work-grid):not(.services-photo-grid) > * { flex-basis: calc((100% - 2 * 22px) / 3); }
}
@media (max-width: 820px) {
  .info-panel { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
}

/* ---------- Homepage service cards (computers/tablets): bigger photos ----------
   Same idea as phones: the photo fills the card with a slim frame, and the words
   sit just inside it, so the photos are larger and the cards look less boxed-in. */
@media (min-width: 481px) {
  .services-photo-grid > .card { padding: 12px 12px 24px; }
  .services-photo-grid > .card > .work-photo { margin-bottom: 16px; }
  .services-photo-grid > .card > :not(.work-photo) { padding-left: 10px; padding-right: 10px; }
}

/* Homepage service cards on big screens: let the row spread wider than the text
   column so the four cards and their photos aren't bunched up in the middle. */
@media (min-width: 1200px) {
  .card-grid.services-photo-grid {
    width: min(1340px, calc(100vw - 80px));
    position: relative; left: 50%; transform: translateX(-50%);
    gap: 30px;
  }
}

/* Feature strip under the hero: all seven points on one line on laptops/desktops,
   with slightly bigger icons. */
.feature-item .icon { width: 50px; height: 50px; padding: 12px; margin-bottom: 12px; }
@media (min-width: 1250px) {
  .feature-strip .container { max-width: 1360px; flex-wrap: nowrap; gap: 18px; }
  .feature-strip .feature-item { flex: 1 1 0; max-width: none; min-width: 0; }
}
/* In-between screens: a neat 4 + 3 instead of leaving one on its own */
@media (min-width: 700px) and (max-width: 1249px) {
  .feature-strip .container { max-width: 980px; row-gap: 28px; }
  .feature-strip .feature-item { flex: 0 1 calc((100% - 3 * 22px) / 4); max-width: none; }
}

/* Homepage: three reviews side by side on laptops/desktops, stacked on phones */
.card-grid.home-reviews { max-width: 1120px; margin: 0 auto; align-items: stretch; }
@media (min-width: 900px) {
  .card-grid.home-reviews:not(.work-grid):not(.services-photo-grid) > * { flex-basis: calc((100% - 2 * 22px) / 3); }
}
@media (max-width: 899px) {
  .card-grid.home-reviews:not(.work-grid):not(.services-photo-grid) > * { flex-basis: 100%; max-width: 640px; }
}
.home-reviews .review-card { display: flex; flex-direction: column; }
.home-reviews .review-card .review-author { margin-top: auto; margin-bottom: 0; }

/* Services page: section icons above each heading (they had no size set, so they
   were showing huge). Small gold circle to match the rest of the site. */
.section-head .service-icon {
  width: 56px; height: 56px; padding: 13px; margin-bottom: 14px;
  color: var(--gold-dark); background: var(--beige-50);
  border: 1.5px solid rgba(205,164,90,0.45); border-radius: 50%;
}
section.alt .section-head .service-icon { background: #fff; }

/* Services page pricing: all five points on one line on laptops/desktops */
@media (min-width: 1200px) {
  .card-grid.pricing-grid { flex-wrap: nowrap; gap: 16px; }
  .card-grid.pricing-grid:not(.work-grid):not(.services-photo-grid) > * { flex: 1 1 0; }
  .pricing-grid .card { padding: 22px 18px; }
  .pricing-grid .card h3 { font-size: 1.05rem; }
}

/* Areas We Cover: plain-English note under the map */
.cov-note { max-width: 760px; margin: 18px auto 0; text-align: center; }
.cov-note p { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.cov-note a { color: var(--gold-dark-text); font-weight: 700; white-space: nowrap; }
.cov-note .cov-note-tip { margin-top: 6px; font-size: 0.85rem; color: var(--brown-600); }

/* FAQs page group headings */
.faq-group-title { font-size: 1.35rem; margin: 40px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); display: inline-block; }
.faq-group-title:first-child { margin-top: 0; }

/* Services page: alternate the photo side (right, left, right...) on laptops/desktops.
   On phones the text always comes first, then the photo. */
@media (min-width: 761px) {
  .about-grid.flip > .hero-photo { order: -1; }
}