/* ==========================================================================
   Thind Construction London — Design System
   ========================================================================== */


/* ==========================================================================
   The [hidden] attribute must win over any component display rule.
   Without this, an element hidden by script still occupies space whenever
   its own class sets display (e.g. .eyebrow { display:inline-block }).
   ========================================================================== */
[hidden] { display: none !important; }

:root {
  --navy: #0b1731;
  --navy-2: #132449;
  --navy-tint: #eef1f8;
  --gold: #c8862f;
  --gold-dark: #a86e22;
  --ink: #1c2333;
  --gray: #5b6272;
  --gray-light: #8991a3;
  --line: #e4e7ee;
  --bg: #ffffff;
  --bg-alt: #f6f7fa;
  --success: #2f7a4f;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 4px 20px rgba(11, 23, 49, 0.08);
  --shadow-lg: 0 12px 40px rgba(11, 23, 49, 0.14);
  --max-width: 1180px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--navy);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--gray); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { padding-left: 1.2em; color: var(--gray); }

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

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(200, 134, 47, 0.1);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.section {
  padding: 88px 0;
}
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy h2, .section--navy h3, .section--navy .eyebrow { color: #fff; }
.section--navy p { color: #c4cbdc; }

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head p { font-size: 1.05rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn:disabled:hover { transform: none; }
.btn-primary { background: var(--gold); color: #fff; box-shadow: 0 8px 24px rgba(200,134,47,0.35); }
.btn-primary { background: var(--gold); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--gold) 35%, transparent); }
.btn-primary:hover { background: var(--gold-dark); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.btn-outline:hover { border-color: #fff; }
.btn-outline-navy { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 16px 34px; font-size: 1rem; }

/* Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* A gap rather than spacing alone: with a long company name the brand and
     the first nav item would otherwise sit flush against each other at wide
     widths, which reads as broken rather than tight. */
  gap: 22px;
  padding: 14px 24px;
  /* Wider than the body container on purpose. The bar has to hold a long
     company name, seven nav labels and a call to action on one line; at
     --max-width a 36-character name ran out of room on screens that had
     plenty of it. The header spanning wider than the content below it is a
     deliberate look, not an accident. */
  max-width: min(1320px, 100%);
  margin: 0 auto;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  /* Fixed, not viewport-scaled: the bar is capped at --max-width, so type
     that keeps growing past that cap only ever makes a long name too big for
     a container that stopped growing. The size bands further down do the
     adapting instead. */
  font-size: 1.15rem;
  color: var(--navy);
  /* The brand is the only elastic thing in the bar: every nav label is
     nowrap by design, so nothing else can give. It is allowed to shrink
     (min-width: 0) and it CLIPS rather than spilling — a flex item that may
     shrink but has nowrap text and no overflow rule paints its text straight
     over whatever is beside it, which is how the name ended up running
     through the nav links. */
  min-width: 0;
  flex: 0 1 auto;
}
/* text-overflow needs a block-level box of its own; the anchor is a flex
   container, so the name gets its own span. Ellipsis is the last resort, not
   the normal state — the size bands below keep the full name visible on any
   ordinary screen. */
.nav-logo .brand-name { min-width: 0; }
/* One line wherever the full nav is showing: a brand wrapping to three lines
   pushes the bar apart far more visibly than an ellipsis does. Below the
   burger breakpoint the name has the whole width to itself and may wrap,
   because forcing nowrap on a phone makes the logo wider than the viewport. */
@media (min-width: 861px) {
  .nav-logo { white-space: nowrap; overflow: hidden; }
  .nav-logo .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.nav-logo span.mark {
  width: 38px; height: 38px;
  background: var(--navy);
  color: var(--gold);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  flex-shrink: 0;
}
.nav-logo span.mark svg {
  width: 23px;
  height: 23px;
  color: var(--gold);
}
.footer-brand-mark {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.footer-brand-mark svg { width: 24px; height: 24px; color: var(--gold); }
.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  /* A nav label must never break across two lines. Without this, a long
     label silently wraps as the bar tightens and the whole header falls
     apart — and because wrapping makes the header taller rather than wider,
     an overflow check won't catch it. */
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold-dark); border-color: var(--gold); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: ''; display: block; width: 22px; height: 2px; background: var(--navy);
  position: relative; transition: all 0.2s;
}
.nav-toggle::before { margin-bottom: 5px; }
.nav-toggle::after { margin-top: 5px; }

/* Between the burger breakpoint and a comfortable desktop width there isn't
   room for the full six-item nav at its normal size — the brand name gets
   squeezed onto two lines. Tighten the nav through that band instead of
   hiding it on what are perfectly ordinary laptop screens. */
@media (min-width: 861px) and (max-width: 1320px) {
  .nav { padding: 12px 18px; }
  .nav-logo { font-size: 0.98rem; }
  .nav-logo span.mark { width: 34px; height: 34px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 0.88rem; }
  .nav-actions .btn { padding: 12px 20px; font-size: 0.88rem; }
}
/* Tightest band — the nav only just fits, so buy back a little more room. */
@media (min-width: 861px) and (max-width: 1080px) {
  .nav-logo { font-size: 0.92rem; gap: 8px; }
  .nav-links { gap: 13px; }
  .nav-links a { font-size: 0.83rem; }
  .nav-actions { gap: 10px; }
  .nav-actions .btn { padding: 11px 15px; font-size: 0.82rem; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  /* Hide the call to action outright rather than hiding just its label —
     that left an unlabelled gold pill sitting next to the burger. Estimate
     is in the menu, so nothing becomes unreachable. */
  .nav-actions .btn { display: none; }
  .nav-logo { font-size: 1rem; line-height: 1.2; }
}
@media (max-width: 420px) {
  .nav { padding: 12px 16px; }
  .nav-logo { font-size: 0.92rem; gap: 8px; }
  .nav-logo span.mark { width: 32px; height: 32px; }
  .nav-logo span.mark svg { width: 19px; height: 19px; }
}
@media (max-width: 860px) {
  .site-header.open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    padding: 20px 24px;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
}

/* Hero */
.hero {
  position: relative;
  padding: 100px 0 90px;
  background:
    radial-gradient(1000px 480px at 85% -10%, rgba(200,134,47,0.25), transparent 60%),
    radial-gradient(1000px 480px at 85% -10%, color-mix(in srgb, var(--gold) 25%, transparent), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 55%, var(--navy-2)) 55%, var(--navy-2) 100%);
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.hero-logo-bg {
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: min(52vw, 680px);
  height: auto;
  color: var(--gold);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .hero-logo-bg { display: none; }
}
.hero-inner { position: relative; z-index: 1; max-width: 700px; }
.hero h1 { color: #fff; }
.hero p.lead { color: #cbd3e6; font-size: 1.15rem; max-width: 560px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.hero-stats {
  display: flex; gap: 40px; margin-top: 56px; flex-wrap: wrap;
}
.hero-stats div strong {
  display: block; font-size: 2rem; color: #fff; font-weight: 800;
}
.hero-stats div span { color: #a9b2c8; font-size: 0.88rem; }

/* Trust bar */
.trust-bar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.trust-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: center;
}
.trust-badge {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 0.88rem; color: var(--navy);
  opacity: 0.85;
}
.trust-badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
}

/* Grids */
.grid {
  display: grid;
  gap: 28px;
}
/* minmax(0, 1fr) rather than a bare 1fr throughout: a grid track's default
   minimum is its content, so a wide child (a form field, a nowrap button,
   an email address) stops the column shrinking and pushes the whole page
   past the viewport. */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card .icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--gold);
}
.card .icon svg { width: 26px; height: 26px; }

/* Service card with pricing */
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card .photo {
  height: 150px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--gold-dark) 130%);
  position: relative;
}
.service-card .photo .icon-badge {
  position: absolute; bottom: -22px; left: 24px;
  width: 52px; height: 52px; border-radius: 12px;
  background: #fff; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-dark);
}
.service-card .body { padding: 34px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.service-card h3 { margin-bottom: 8px; }
.service-card .desc { flex: 1; font-size: 0.95rem; }
.price-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.price-tiers div { text-align: center; }
.price-tiers .tier-name {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray-light); font-weight: 700; margin-bottom: 4px;
}
.price-tiers .tier-price { font-weight: 800; color: var(--navy); font-size: 0.95rem; }
.price-tiers .tier-price small { font-weight: 500; color: var(--gray-light); font-size: 0.7rem; }
.price-note {
  font-size: 0.78rem; color: var(--gray-light); font-style: italic; margin: 0 0 16px;
}

/* Process timeline */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } }
.timeline-step {
  position: relative;
  padding-top: 44px;
}
.timeline-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* Testimonials */
.testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.testimonial .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 12px; font-size: 1rem; }
.testimonial .who {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
}
.testimonial .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy-tint); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.testimonial .who strong { display: block; font-size: 0.9rem; color: var(--navy); }
.testimonial .who span { font-size: 0.78rem; color: var(--gray-light); }

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-light);
  margin-top: 10px;
}
.source-badge a { color: var(--gold-dark); text-decoration: underline; }
.sample-tag {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--gray-light);
  border: 1px dashed var(--line);
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 10px;
}

/* Gallery placeholder */
.gallery-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy-tint), #fff 60%);
  border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-light);
  font-size: 0.82rem;
  text-align: center;
  padding: 16px;
}

/* CTA banner */
.cta-banner {
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  border-radius: var(--radius-lg);
  padding: 56px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-banner h2, .cta-banner p { color: #fff; }
.cta-banner p { color: #c4cbdc; margin: 0; }

/* Forms */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
/* Inputs default to a ~170px intrinsic width that resists shrinking. */
.field input, .field select, .field textarea { min-width: 0; width: 100%; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.field input, .field select, .field textarea {
  padding: 13px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-family: var(--font);
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,134,47,0.15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 15%, transparent);
}
.field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 0.8rem; color: var(--gray-light); }

/* Quote calculator — multi-line items */
.quote-line {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--line);
}
.quote-line .field { flex: 1; min-width: 130px; margin-bottom: 0; }
.quote-line .qLineSizeField { max-width: 140px; }
.quote-line .qLineTierField { max-width: 150px; }
.qLineRemove {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--gray-light);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.qLineRemove:hover { background: #fdecec; color: #c0392b; border-color: #f3c8c8; }
.qLineRemove:disabled { opacity: 0.35; cursor: not-allowed; }
.qLineBespokeNote {
  flex-basis: 100%;
  color: var(--gray-light);
  font-style: italic;
}
.bespoke-card {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.bespoke-card h3 { color: #fff; }
.bespoke-card p { color: #c4cbdc; margin: 0; max-width: 480px; }

/* Quote calculator */
.quote-tool {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}
@media (max-width: 860px) { .quote-tool { grid-template-columns: 1fr; } }
.quote-form-panel { padding: 44px; }
.quote-result-panel {
  background: var(--navy);
  color: #fff;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quote-result-panel h3 { color: #fff; }
.quote-result-panel p { color: #b9c1d6; }
.result-figure {
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  margin: 14px 0 6px;
}
.result-figure span { color: var(--gold); }
.result-breakdown {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.88rem;
}
.result-breakdown div { display: flex; justify-content: space-between; margin-bottom: 8px; color: #cbd3e6; }
.result-placeholder { color: #8994ad; font-size: 0.95rem; }
.disclaimer-box {
  background: rgba(200,134,47,0.08);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border: 1px solid rgba(200,134,47,0.35);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.82rem;
  color: var(--gold-dark);
  margin-top: 20px;
}
.section--navy .disclaimer-box, .quote-result-panel .disclaimer-box {
  background: rgba(200,134,47,0.15);
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  color: #f0c98a;
  border-color: rgba(200,134,47,0.4);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}

/* Footer */
.site-footer {
  background: var(--navy);
  color: #b9c1d6;
  padding: 56px 0 28px;
}
.site-footer h4 { color: #fff; font-size: 0.95rem; margin-bottom: 16px; }
.footer-grid {
  display: grid;
  /* minmax(0, …) rather than a bare fr: a grid track's default minimum is
     its content, and the unbroken admin@ email address is wide enough to
     force the whole footer past the viewport on a phone. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid a:hover { color: #fff; }
/* Long unbroken strings (the email address) must be allowed to break. */
.footer-grid a, .footer-grid p { overflow-wrap: anywhere; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: #8994ad;
}

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed;
  bottom: 24px; right: 24px;
  background: #25D366;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 90;
  transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }

/* Reviews editor (edit-reviews.html) */
.review-editor-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
  background: #fff;
}
.review-editor-row .field-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .review-editor-row .field-grid { grid-template-columns: repeat(2, 1fr); }
}
.review-editor-row textarea { width: 100%; min-height: 90px; }
.review-editor-row .sample-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--gray-light); margin-top: 10px;
}
.review-editor-remove {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--gray-light);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.review-editor-remove:hover { background: #fdecec; color: #c0392b; border-color: #f3c8c8; }

/* People illustrations */
.illustration-card {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.illustration-card svg {
  width: 100%;
  height: auto;
  max-width: 420px;
  color: var(--gold);
}
.illustration-card--light {
  background: var(--navy-tint);
}
.illustration-card--light svg { color: var(--navy); }

/* Pricing editor (edit-prices.html) */
.price-editor-wrap { overflow-x: auto; }
.price-editor { width: 100%; border-collapse: collapse; min-width: 640px; }
.price-editor th, .price-editor td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.price-editor th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-light);
  font-weight: 700;
}
.price-editor td.svc-name-col { font-weight: 700; color: var(--navy); }
.price-editor td.unit-col { color: var(--gray-light); font-size: 0.85rem; white-space: nowrap; }
.price-editor input[type="number"] {
  width: 110px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.92rem;
  color: var(--ink);
}
.price-editor input[type="number"]:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,134,47,0.15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 15%, transparent);
}
.editor-status {
  display: none;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 20px;
}
.editor-status.show { display: block; }
.editor-status.success { background: rgba(47,122,79,0.1); color: var(--success); border: 1px solid rgba(47,122,79,0.3); }
.editor-status.info { background: rgba(11,23,49,0.06); color: var(--navy); border: 1px solid rgba(11,23,49,0.15); }
.editor-status.info { background: color-mix(in srgb, var(--navy) 6%, transparent); color: var(--navy); border: 1px solid color-mix(in srgb, var(--navy) 15%, transparent); }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.small { font-size: 0.85rem; }

/* ==========================================================================
   Projects / case studies
   ========================================================================== */

/* Photo, or a styled placeholder when no photo has been added yet */
.project-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-photo--empty {
  /* The gradient stays as the base layer so the tile still looks intentional
     if the illustration fails to load. */
  background-color: var(--navy);
  background-image: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, var(--gold-dark) 145%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.project-photo__note {
  width: 100%;
  padding: 26px 16px 12px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(to top, rgba(8, 17, 38, 0.85), rgba(8, 17, 38, 0));
}

/* Card */
.project-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  height: 100%;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.project-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-tint);
}
.project-card__flag {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(11, 23, 49, 0.86);
  background: color-mix(in srgb, var(--navy) 86%, transparent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: 999px;
}
.project-card__body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.project-card__meta {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-dark);
}
.project-card h3 { margin: 8px 0 8px; font-size: 1.12rem; }
.project-card p { font-size: 0.92rem; flex: 1; margin-bottom: 16px; }
.project-card__foot { display: flex; flex-wrap: wrap; gap: 8px; }
.project-chip {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--navy-tint);
  border-radius: 999px;
  padding: 5px 12px;
}

/* Filter pills */
.filter-group { margin-bottom: 18px; }
.filter-group__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-light);
  margin-bottom: 10px;
}
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-pill:hover { border-color: var(--navy); color: var(--navy); }
.filter-pill.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.filter-pill:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ==========================================================================
   Case study detail
   ========================================================================== */

.hero--project { padding: 56px 0 64px; }
.crumbs { font-size: 0.85rem; color: #a9b2c8; margin-bottom: 18px; }
.crumbs a { color: #fff; text-decoration: underline; }
.crumbs span { color: #8994ad; }

.project-hero-media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-tint);
  margin-bottom: 48px;
}

/* Before / after slider */
.ba-slider {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 48px;
  background: var(--navy-tint);
  user-select: none;
}
.ba-slider__layer { position: absolute; inset: 0; }
/* Both layers stay full size and perfectly aligned; the "before" layer is
   clipped from the right as the divider moves, so the two images never
   scale or shift relative to each other. */
.ba-slider__layer--before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-slider__tag {
  position: absolute;
  bottom: 14px;
  background: rgba(11, 23, 49, 0.86);
  background: color-mix(in srgb, var(--navy) 86%, transparent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 2;
}
.ba-slider__tag--before { left: 14px; }
.ba-slider__tag--after { right: 14px; }
.ba-slider__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}
.ba-slider__handle span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
}
.ba-slider__handle span::before,
.ba-slider__handle span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.ba-slider__handle span::before { left: 11px; border-right: 7px solid var(--navy); }
.ba-slider__handle span::after { right: 11px; border-left: 7px solid var(--navy); }
.ba-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
}
.ba-slider__range:focus-visible + .ba-slider__handle,
.ba-slider:focus-within .ba-slider__handle { box-shadow: 0 0 0 3px var(--gold); }

/* Layout: story + sidebar */
.project-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) { .project-layout { grid-template-columns: 1fr; gap: 36px; } }

.story-block { margin-bottom: 30px; }
.story-block h3 { font-size: 1.15rem; margin-bottom: 10px; }
.story-block p { margin: 0; font-size: 1rem; }

.project-quote {
  margin: 36px 0 0;
  padding: 28px 30px;
  background: var(--bg-alt);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.project-quote blockquote {
  margin: 0 0 12px;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--navy);
  font-weight: 500;
}
.project-quote figcaption { font-size: 0.85rem; color: var(--gray-light); font-weight: 600; }

.project-aside { position: sticky; top: 96px; display: grid; gap: 20px; }
@media (max-width: 900px) { .project-aside { position: static; } }

.project-facts {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  background: #fff;
}
.project-facts h3 { font-size: 1rem; margin-bottom: 16px; }
.project-facts dl { margin: 0; }
.project-facts .fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.project-facts .fact:last-child { border-bottom: 0; padding-bottom: 0; }
.project-facts dt { color: var(--gray-light); }
.project-facts dd { margin: 0; font-weight: 600; color: var(--navy); text-align: right; }

.scope-list { margin: 0; padding-left: 18px; font-size: 0.9rem; }
.scope-list li { margin-bottom: 8px; }

.project-cta {
  background: linear-gradient(140deg, var(--navy), var(--navy-2));
  border-radius: var(--radius-lg);
  padding: 26px;
  color: #fff;
}
.project-cta h3 { color: #fff; font-size: 1.05rem; margin-bottom: 8px; }
.project-cta p { color: #b9c1d6; font-size: 0.9rem; margin-bottom: 18px; }

.project-gallery-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-tint);
}

/* Projects editor (edit-projects.html) */
.project-editor-row .field { margin-bottom: 14px; }
.project-editor-more {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 14px;
}
.project-editor-more > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.project-editor-more > summary::-webkit-details-marker { display: none; }
.project-editor-more > summary::before {
  content: '';
  width: 0; height: 0;
  border-left: 6px solid var(--gold);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.project-editor-more[open] > summary::before { transform: rotate(90deg); }

/* Legal / long-form text pages */
.legal-doc { max-width: 760px; margin: 0 auto; }
.legal-doc h2 {
  font-size: 1.3rem;
  margin-top: 40px;
  margin-bottom: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 24px; }
.legal-doc ul { margin: 0 0 1em; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc a { color: var(--gold-dark); text-decoration: underline; }

/* ==========================================================================
   Service detail pages
   ========================================================================== */

/* Finish-level comparison */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }

.tier-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tier-card--featured {
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}
.tier-card__flag {
  position: absolute;
  top: -12px; left: 26px;
  background: var(--gold);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
}
.tier-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.tier-card__price {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 4px;
}
.tier-card__price small {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-light);
  margin-top: 4px;
}
.tier-card__note {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gray-light);
  margin-bottom: 18px;
}
.tier-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
  font-size: 0.9rem;
}
.tier-card li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}
.tier-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* Included / not included */
.scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 760px) { .scope-grid { grid-template-columns: 1fr; } }

.scope-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.scope-col h3 { font-size: 1.05rem; margin-bottom: 18px; }
.scope-col ul { list-style: none; padding: 0; margin: 0; font-size: 0.93rem; }
.scope-col li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}
.scope-col li::before {
  position: absolute;
  left: 0; top: 0;
  width: 20px;
  text-align: center;
  font-weight: 800;
}
.scope-col--in li::before { content: '\2713'; color: var(--success); }
.scope-col--out li::before { content: '\00D7'; color: var(--gray-light); font-size: 1.1rem; line-height: 1.4; }
.scope-col--out { background: var(--bg); }
.scope-col--out li { color: var(--gray-light); }

/* Phased timeline */
.phase-list { max-width: 820px; margin: 0 auto; }
.phase {
  display: flex;
  gap: 22px;
  padding-bottom: 28px;
  position: relative;
}
.phase:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px; top: 44px; bottom: 0;
  width: 2px;
  background: var(--line);
}
.phase__num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
}
.phase__body { padding-top: 6px; }
.phase__body h3 { font-size: 1.05rem; margin-bottom: 6px; }
.phase__dur {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-dark);
  background: rgba(200, 134, 47, 0.1);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: 2px;
}
.phase__body p { margin: 0; font-size: 0.93rem; }

/* FAQ accordion */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq > summary {
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-weight: 600;
  color: var(--navy);
  position: relative;
  list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: '';
  position: absolute;
  right: 24px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--gold-dark);
  border-bottom: 2px solid var(--gold-dark);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
.faq[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq > summary:hover { background: var(--bg-alt); }
.faq > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.faq p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 0.95rem;
}

/* Service catalogue grouping */
.category-head {
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.category-head h2 { font-size: 1.5rem; margin-bottom: 6px; }
.category-head p { margin: 0; font-size: 0.95rem; }
.category-block { margin-bottom: 64px; }
.category-block:last-of-type { margin-bottom: 0; }

.service-card__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ==========================================================================
   Narrow-screen overflow guards
   Buttons are white-space:nowrap by design, which is right for short labels
   but breaks the layout when the label is something like a full email
   address. These keep every page inside the viewport on a phone.
   ========================================================================== */

/* Opt-in wrapping for buttons whose label is long or unbreakable. */
.btn--wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.btn { max-width: 100%; }

@media (max-width: 560px) {
  .bespoke-card { padding: 30px 22px; }
  .cta-banner { padding: 36px 24px; }
  .btn-lg { padding: 15px 22px; font-size: 0.95rem; }
  .quote-form-panel, .quote-result-panel { padding: 28px 22px; }
  .scope-col, .project-facts, .project-cta, .card { padding: 24px 20px; }
}

/* ==========================================================================
   Social links & form results
   ========================================================================== */

.footer-social { margin-top: 26px; }
.footer-social h4 { margin-bottom: 12px; }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-link {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex; align-items: center; justify-content: center;
  color: #b9c1d6;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.social-link svg { width: 18px; height: 18px; fill: currentColor; }
.social-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}
.social-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Inline form success / error, replacing the redirect to Formspree */
.form-result {
  border-radius: var(--radius-lg);
  padding: 30px;
  border: 1px solid var(--line);
  background: #fff;
}
.form-result h3 { margin-bottom: 8px; }
.form-result p { margin: 0; }
.form-result a { color: var(--gold-dark); text-decoration: underline; }
.form-result--success {
  border-color: rgba(47, 122, 79, 0.35);
  background: rgba(47, 122, 79, 0.06);
}
.form-result--success h3 { color: var(--success); }
.form-result--error {
  grid-column: 1 / -1;
  margin-top: 16px;
  border-color: rgba(192, 57, 43, 0.35);
  background: rgba(192, 57, 43, 0.06);
  padding: 20px 22px;
}
.form-result--error h3 { color: #c0392b; font-size: 1rem; }

/* ==========================================================================
   Guided project planner
   ========================================================================== */

.planner {
  max-width: 880px;
  margin: 0 auto;
}

/* Progress rail */
.planner__bar {
  display: flex;
  gap: 6px;
  margin-bottom: 26px;
}
.planner__pip {
  flex: 1;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  color: var(--gray-light);
}
.planner__pip:disabled { cursor: default; }
.planner__pipnum {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--navy-tint);
  color: var(--gray-light);
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 8px;
  transition: all 0.18s ease;
}
.planner__piplabel {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: 3px solid var(--line);
  padding-top: 10px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.planner__pip.is-done .planner__pipnum { background: var(--navy); color: var(--gold); }
.planner__pip.is-done .planner__piplabel { border-top-color: var(--navy); color: var(--navy); }
.planner__pip.is-current .planner__pipnum { background: var(--gold); color: #fff; }
.planner__pip.is-current .planner__piplabel { border-top-color: var(--gold); color: var(--gold-dark); }
@media (max-width: 640px) {
  .planner__piplabel { display: none; }
  .planner__bar { gap: 8px; }
  .planner__pipnum { margin-bottom: 0; }
}

/* Panel */
.planner__panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px;
}
@media (max-width: 640px) { .planner__panel { padding: 26px 20px; } }
.planner__count {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-light);
  margin: 0 0 10px;
}
.planner__panel h2 { font-size: 1.6rem; margin-bottom: 8px; }
.planner-lead { font-size: 1rem; margin-bottom: 26px; }
.planner__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.planner__hint {
  display: none;
  margin: 18px 0 0;
  color: #c0392b;
  font-size: 0.9rem;
  font-weight: 600;
}
.planner__hint.show { display: block; }

/* Multi-select service tiles */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 16px 40px 16px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.choice:hover { border-color: var(--navy); transform: translateY(-2px); }
.choice__icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--navy-tint);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.choice__icon svg { width: 19px; height: 19px; }
.choice__label { font-size: 0.9rem; font-weight: 600; color: var(--navy); line-height: 1.3; }
.choice__tick {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  transition: all 0.15s ease;
}
.choice.is-on { border-color: var(--gold); background: rgba(200, 134, 47, 0.05); }
.choice.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 5%, transparent); }
.choice.is-on .choice__icon { background: var(--gold); color: #fff; }
.choice.is-on .choice__tick { background: var(--gold); border-color: var(--gold); }
.choice.is-on .choice__tick::after {
  content: '';
  position: absolute;
  left: 5px; top: 5px;
  width: 8px; height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Single-select pills */
.field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice-row--stack { flex-direction: column; align-items: flex-start; }
.choice-row--stack .pill { width: 100%; text-align: left; }
.pill {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pill:hover { border-color: var(--navy); color: var(--navy); }
.pill.is-on { border-color: var(--gold); background: rgba(200, 134, 47, 0.08); color: var(--navy); }
.pill.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--navy); }
.pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.opt { font-weight: 400; color: var(--gray-light); }

.pill--tier {
  border-radius: var(--radius);
  padding: 12px 18px;
  text-align: left;
  flex: 1;
  min-width: 150px;
}
.pill--tier strong { display: block; font-size: 0.92rem; color: var(--navy); }
.pill--tier small { display: block; font-size: 0.76rem; color: var(--gray-light); font-weight: 500; }

.planner-note {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--gray);
}
.planner-note--good { color: var(--success); font-weight: 600; }

/* Per-service sizing block */
.sizer {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 18px;
}
.sizer__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sizer__head h3 { margin: 0; font-size: 1.05rem; }
.sizer__price { font-weight: 800; color: var(--gold-dark); white-space: nowrap; }
.sizer__slider { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.sizer__slider input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--gold);
  height: 6px;
}
.sizer__slider output {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.9rem;
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}
.sizer__note { margin: 14px 0 0; font-size: 0.82rem; color: var(--gray-light); font-style: italic; }

/* Result */
.estimate-headline {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 20px;
}
.estimate-headline span { color: var(--gold); }
.estimate-breakdown {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-bottom: 20px;
}
.estimate-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.estimate-breakdown div:last-child { border-bottom: 0; }
.estimate-breakdown small { display: block; color: var(--gray-light); font-weight: 500; }
.estimate-breakdown strong { color: var(--navy); white-space: nowrap; }
.estimate-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
@media (max-width: 560px) {
  .estimate-actions { flex-direction: column; }
  .estimate-actions .btn { width: 100%; justify-content: center; }
}

/* Text button */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font);
  font-size: inherit;
  color: var(--gray-light);
  text-decoration: underline;
  cursor: pointer;
}
.linkish:hover { color: var(--navy); }

/* ==========================================================================
   Areas we cover — schematic map
   ========================================================================== */

.areamap-wrap { max-width: 780px; margin: 0 auto; }
.areamap {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(150deg, var(--navy) 0%, #0e1c3d 60%, var(--navy-2) 100%);
  border-radius: var(--radius-lg);
  padding: 8px;
}
.areamap__river {
  fill: none;
  stroke: rgba(120, 170, 220, 0.35);
  stroke-width: 16;
  stroke-linecap: round;
}
.areamap__rivertag {
  fill: rgba(160, 200, 235, 0.75);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.areamap__tile rect {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.5;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
.areamap__tile text {
  fill: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}
.areamap__tile .areamap__count {
  fill: var(--gold);
  font-size: 11px;
  font-weight: 600;
}
.areamap__tile:hover rect { fill: var(--gold); stroke: var(--gold); }
.areamap__tile:hover .areamap__count { fill: #fff; }
.areamap__tile:focus-visible rect { stroke: #fff; stroke-width: 3; }
.areamap__caption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--gray-light);
  margin: 16px 0 0;
}

/* Flat list of areas — also carries any area with no map position */
.area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}
.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
  transition: all 0.15s ease;
}
.area-chip:hover { border-color: var(--navy); background: var(--navy); color: #fff; transform: translateY(-2px); }
.area-chip span {
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
}

/* ==========================================================================
   Planning permission guidance tool
   ========================================================================== */

.pt { max-width: 760px; margin: 0 auto; }
.pt-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px;
}
@media (max-width: 640px) { .pt-card { padding: 26px 20px; } }
.pt-card h2 { font-size: 1.5rem; margin-bottom: 10px; }
.pt-help { font-size: 0.92rem; color: var(--gray-light); margin-bottom: 22px; }

.pt-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.pt-trail span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-light);
  background: var(--bg-alt);
  border-radius: 999px;
  padding: 4px 12px;
}

.pt-answers { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.pt-answer {
  font-family: var(--font);
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  color: var(--navy);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pt-answer:hover {
  border-color: var(--gold);
  background: rgba(200, 134, 47, 0.05);
  background: color-mix(in srgb, var(--gold) 5%, transparent);
  transform: translateX(3px);
}
.pt-answer:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.pt-nav { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }

.pt-verdict {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.pt-verdict--good { background: rgba(47, 122, 79, 0.12); color: var(--success); }
.pt-verdict--maybe { background: rgba(200, 134, 47, 0.14); color: var(--gold-dark); }
.pt-verdict--maybe { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold-dark); }
.pt-verdict--needed { background: rgba(192, 57, 43, 0.1); color: #c0392b; }

.pt-next {
  background: var(--bg-alt);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 20px 0;
  font-size: 0.95rem;
  color: var(--gray);
}
.pt-next strong { color: var(--navy); }
.pt-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
@media (max-width: 560px) {
  .pt-actions { flex-direction: column; }
  .pt-actions .btn { width: 100%; justify-content: center; }
}

/* Region bands on the coverage map */
.areamap__region {
  fill: rgba(255, 255, 255, 0.34);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.areamap__divider {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  stroke-dasharray: 5 6;
}

/* ==========================================================================
   Demo-mode banner (see SITE_CONFIG.demoMode)
   ========================================================================== */
.demo-banner {
  position: relative;
  z-index: 2000;
  padding: 10px 16px;
  background: #8a3b00;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
}
.demo-banner strong { font-weight: 700; }
@media (max-width: 600px) {
  .demo-banner { font-size: 0.82rem; padding: 9px 12px; }
}

/* ==========================================================================
   Unpublished-preview banner + editor error state
   ========================================================================== */
.preview-banner {
  position: relative;
  z-index: 1999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 11px 16px;
  background: #1f3a63;
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
}
.preview-banner__clear {
  flex: none;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.preview-banner__clear:hover { background: rgba(255, 255, 255, 0.14); }

.editor-status.error {
  background: #fdeceb;
  border-color: #e4b4ae;
  color: #7c2019;
}
.editor-status a { color: inherit; text-decoration: underline; font-weight: 600; }
@media (max-width: 600px) {
  .preview-banner { font-size: 0.8rem; gap: 10px; }
}

/* ==========================================================================
   Brand mark — monogram placeholder or the client's uploaded logo
   ========================================================================== */
.brand-monogram {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: 0.95em;
}
.nav-logo span.mark .brand-logo,
.footer-brand-mark .brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.footer-brand-mark { overflow: hidden; }

/* Neutral form result, used when no endpoint is connected yet (demo builds).
   Shares the error variant's layout so it sits correctly inside the form grid. */
.form-result--info {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding: 20px 22px;
  border-color: rgba(11, 23, 49, 0.2);
  border-color: color-mix(in srgb, var(--navy) 20%, transparent);
  background: rgba(11, 23, 49, 0.05);
  background: color-mix(in srgb, var(--navy) 5%, transparent);
}
.form-result--info h3 { color: var(--navy); font-size: 1rem; }