/* broadstairselectrical.co.uk - Broadstairs, Kent. Seaside Victorian palette. Fraunces + Nunito Sans. */
:root {
  /* Broadstairs identity - mandatory */
  --bg: #e0eee6;            /* sea foam pale */
  --surface: #f2f7f3;       /* paler cream-foam */
  --text: #1e2b45;          /* Victorian navy */
  --text-soft: #4b5b7a;     /* navy softened */
  --accent: #e28873;        /* soft coral */
  --accent-alt: #c48a3b;    /* brass */
  --border: #c9d8ce;

  /* Legacy-compat aliases */
  --paper: #f4f9f5;
  --chalk: #e0eee6;
  --ink: #1e2b45;
  --ink-soft: #4b5b7a;
  --moss-deep: #1e2b45;     /* navy */
  --moss: #2e3d5c;
  --moss-bright: #3c5178;
  --yew: #1e2b45;
  --rust: #e28873;          /* coral */
  --rust-deep: #c46b58;
  --gold: #c48a3b;          /* brass */
  --stone: #b6c6bc;
  --stone-light: #d8e5dc;
  --cream: #f2f7f3;
  --rule: #c9d8ce;
  --rule-dark: #a7bbaf;

  --shadow: 0 1px 3px rgba(30, 43, 69, 0.06), 0 2px 8px rgba(30, 43, 69, 0.04);
  --shadow-lg: 0 4px 16px rgba(30, 43, 69, 0.08), 0 12px 32px rgba(30, 43, 69, 0.06);
  --max: 1100px;
  --content: 720px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .serif {
  font-family: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 40;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--moss-deep);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0 0 0.5em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.4rem); margin: 1.8em 0 0.6em; }
h3 { font-size: 1.35rem; margin: 1.4em 0 0.4em; }
p { margin: 0 0 1.1em; }

a { color: var(--moss); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rust); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.prose { max-width: var(--content); margin: 0 auto; padding: 0 1.5rem; }

/* Topbar */
.topbar {
  background: var(--moss-deep);
  color: var(--cream);
  font-size: 0.875rem;
  padding: 0.5rem 0;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.topbar a { color: var(--stone-light); text-decoration: none; }
.topbar a:hover { color: var(--cream); }
.topbar span em {
  color: var(--gold);
  font-style: italic;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 500;
}

/* Header */
header.site {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow);
}
header.site .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { font-family: 'Fraunces', serif; font-size: 1.65rem; font-weight: 600; color: var(--moss-deep); text-decoration: none; line-height: 1; }
.brand .ampersand { color: var(--rust); font-style: italic; padding: 0 0.1em; }
.brand small { display: block; font-family: 'Nunito Sans', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.2rem; }
nav.primary ul { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
nav.primary a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; position: relative; padding: 0.25rem 0; }
nav.primary a:hover { color: var(--rust); }
nav.primary a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.4rem; height: 2px; background: var(--rust); }

/* Hero - navy + brass with a subtle bathing-house stripe silhouette */
.hero {
  background:
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.20) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='90' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 L0 60 Q40 55 80 60 Q120 65 160 55 Q200 45 240 58 Q280 71 320 55 Q360 40 400 55 Q440 70 480 55 Q520 40 560 55 Q600 70 640 55 Q680 40 720 55 Q760 70 800 55 Q840 40 880 55 Q920 70 960 55 Q1000 40 1040 55 Q1080 70 1120 55 Q1160 40 1200 55 L1200 90 Z' fill='%23000' opacity='0.20'/%3E%3C/svg%3E") bottom/100% 90px no-repeat,
    linear-gradient(160deg, var(--moss-deep) 0%, #253458 55%, #3c5178 100%);
  color: var(--paper);
  padding: 5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* Gaslight ornamental low-opacity motif */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23c48a3b' stroke-width='0.7' opacity='0.10'%3E%3Cpath d='M80 26 C74 40 68 46 60 48 C68 52 72 60 72 68 M80 26 C86 40 92 46 100 48 C92 52 88 60 88 68 M80 68 L80 116 M64 116 L96 116 M68 126 L92 126 M74 134 L86 134'/%3E%3Ccircle cx='80' cy='22' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; right: -100px; bottom: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle at center, rgba(196,138,59,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 720px; color: var(--paper); }
.hero .lede { font-size: 1.2rem; max-width: 600px; color: rgba(255,255,255,0.88); margin-bottom: 2rem; }
.hero .section-eyebrow { color: var(--gold); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero.hero-light {
  background: linear-gradient(180deg, var(--chalk) 0%, var(--paper) 100%);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 3.5rem 0 2.5rem;
}
.hero.hero-light::after { display: none; }
.hero.hero-light::before { opacity: 0.05; }
.hero.hero-light h1 { color: var(--moss-deep); }
.hero.hero-light .lede { color: var(--ink-soft); }
.hero.hero-light .section-eyebrow { color: var(--rust); }

/* Gaslight ornamental divider */
.gaslight-divider {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 24px;
  margin: 2.5rem auto;
  color: var(--gold);
  opacity: 0.7;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.95rem 1.8rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.15s ease;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: var(--rust); color: #fff; border-color: var(--rust); }
.btn-primary:hover { background: var(--rust-deep); border-color: var(--rust-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn-ghost:hover { background: var(--paper); color: var(--moss-deep); }
.hero-light .btn-ghost, section:not(.hero) .btn-ghost { color: var(--moss-deep); border-color: var(--moss-deep); }
.hero-light .btn-ghost:hover, section:not(.hero) .btn-ghost:hover { background: var(--moss-deep); color: var(--paper); }

/* Sections */
section { padding: 4rem 0; background: var(--paper); }
section.tight { padding: 2rem 0; }
section.alt { background: var(--chalk); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section-eyebrow { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--rust); margin: 0 0 0.5em; }

/* Grids */
.grid { display: grid; gap: 1.6rem; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
  .grid-4 .card { padding: 1.4rem; }
}

/* Cards */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.8rem;
  border-radius: 3px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--shadow);
}
section.alt .card { background: var(--paper); border-color: var(--rule-dark); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--rust); }
.card h3 { margin-top: 0; }
.card a.card-link { color: var(--moss-deep); text-decoration: none; }
.card a.card-link:hover { color: var(--rust); }
.card .more { display: inline-block; margin-top: 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--rust); text-decoration: none; }
.card .more::after { content: ' →'; }

/* Guarantees strip */
.guarantees {
  background: linear-gradient(180deg, var(--paper) 0%, var(--chalk) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.guarantees .grid { gap: 1.4rem; }
.guarantees .promise {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 1.6rem; border-radius: 3px;
  border-left: 3px solid var(--rust);
  box-shadow: var(--shadow);
}
.guarantees .promise h3 {
  margin: 0 0 0.5em; font-size: 1.15rem; color: var(--moss-deep);
  font-family: 'Fraunces', serif; font-weight: 600;
}
.guarantees .promise p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
.guarantees .promise .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--moss-deep); color: var(--gold);
  font-family: 'Fraunces', serif; font-weight: 600;
  margin-bottom: 0.8rem; font-size: 1.15rem;
}
.guarantee-pill {
  display: inline-block; background: var(--moss-deep); color: var(--gold);
  padding: 0.35rem 0.85rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  margin: 0.5rem 0.5rem 0 0;
}

/* Featured panel */
.panel {
  background: var(--moss-deep);
  color: var(--paper);
  padding: 2.5rem;
  border-radius: 3px;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.panel h2 { color: var(--paper); margin-top: 0; }
.panel .lede { color: rgba(255,255,255,0.88); }
.panel a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; font-weight: 700; }
.panel a:hover { color: var(--paper); }

/* Footer */
footer.site {
  background: var(--moss-deep);
  color: var(--stone-light);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}
footer.site h4 { color: var(--cream); font-size: 1rem; margin: 0 0 0.8em; font-family: 'Nunito Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin: 0.4rem 0; }
footer.site a { color: var(--stone-light); text-decoration: none; font-size: 0.95rem; }
footer.site a:hover { color: var(--cream); }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot-bottom {
  border-top: 1px solid rgba(216, 229, 220, 0.2);
  margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.85rem; color: var(--stone);
}

/* Article */
article.guide { padding: 3rem 0; }
article.guide .meta { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.1em; }
article.guide .meta a { color: var(--moss); }
article.guide blockquote {
  border-left: 3px solid var(--rust);
  margin: 1.8em 0; padding: 0.5em 0 0.5em 1.5em;
  font-style: italic; color: var(--ink-soft);
  font-family: 'Fraunces', serif; font-size: 1.2rem; line-height: 1.5;
}
article.guide ul, article.guide ol { margin: 0 0 1.2em; padding-left: 1.5em; }
article.guide li { margin: 0.4em 0; }
article.guide .callout {
  background: var(--stone-light);
  border-left: 3px solid var(--gold);
  padding: 1.2rem 1.5rem;
  margin: 1.8em 0;
  border-radius: 0 2px 2px 0;
}
article.guide .callout h4 { margin-top: 0; color: var(--moss-deep); }

/* Jobs feed */
.job {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: start;
  padding: 1.5rem 0; border-bottom: 1px solid var(--rule);
}
.job:last-child { border-bottom: none; }
.job-date { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--rust); font-weight: 700; min-width: 95px; }
.job-where { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 0.3rem; }
.job h3 { margin: 0 0 0.4em; font-size: 1.15rem; }
.job p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.job .price { font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--moss-deep); font-weight: 700; white-space: nowrap; }

/* Utility */
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.divider-rule { height: 1px; background: var(--rule); margin: 3rem 0; max-width: 80px; }
.divider-rule.center { margin-left: auto; margin-right: auto; }

@media (max-width: 700px) {
  nav.primary ul { gap: 1rem; font-size: 0.9rem; }
  header.site .container { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero { padding: 2.5rem 0 2rem; }
  .panel { padding: 2rem 1.5rem; }
  .job { grid-template-columns: 1fr; gap: 0.4rem; }
  .job-date { font-size: 0.95rem; }
}

/* WhatsApp button + QR */
.wa-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #25d366; color: #fff !important;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  font-weight: 700; font-size: 0.85rem; text-decoration: none !important;
  transition: background 0.15s ease;
}
.wa-btn:hover { background: #1ebe57; color: #fff !important; }
.wa-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn.wa-btn-lg { background: #25d366; border-color: #25d366; color: #fff; padding: 0.95rem 1.6rem; border-radius: 2px; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1rem; }
.btn.wa-btn-lg:hover { background: #1ebe57; border-color: #1ebe57; color: #fff; }
.btn.wa-btn-lg svg { width: 20px; height: 20px; }
.topbar .wa-btn { padding: 0.25rem 0.7rem; font-size: 0.8rem; }
.topbar .wa-btn svg { width: 14px; height: 14px; }

@media (max-width: 700px) { .topbar .wa-btn { display: none; } }

.wa-qr-card {
  background: var(--cream); border: 1px solid var(--rule); padding: 1.5rem; border-radius: 2px;
  text-align: center; max-width: 280px;
}
.wa-qr-card img { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto 0.8rem; }
.wa-qr-card p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.wa-qr-card .num { font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--moss-deep); display: block; margin-top: 0.4rem; }

/* Form (used minimally - contact.html has no form, but keeping utilities available) */
label, legend { font-weight: 700; font-size: 0.9rem; display: block; margin-bottom: 0.4rem; color: var(--moss-deep); }