/* ===== Wene Cleaning Services Ltd =====================================
   Concept 13 "Spray and Surface", rebuilt 2026-09-23 against the RATIFIED
   brand palette in projects/wenecleaning/brand/guidelines/.

   The previous stylesheet used #1864D6 -- a generic bright blue the brand
   guidelines explicitly prohibit ("generic blue-and-green palettes" are on
   the Don't list). Combined with an oversized tight-tracked geometric sans,
   a floating pill navbar, pill badges and soft-shadowed rounded cards, it
   read as a generated SaaS template rather than a founder-led local trade
   business.

   PALETTE, CEO-DIRECTED 2026-09-23: sharp blue on warm paper, with burgundy
   used only as a line. This departs from the guidelines' Deep Pine, and the
   guidelines do list generic blue palettes on the Don't side -- so the point
   is that the blue here is NOT the generic one. #1550E8 is deliberately
   sharper and more saturated than the #2563EB/#1864D6 defaults, it sits on
   Clean Stone rather than pure white, and the structure carrying it (serif
   display, hairline rules, hard edges, no pills or soft shadows) is what
   actually stopped this reading as generated. Burgundy is the brand's Oxblood
   at 9.38:1 on paper, held back for rules so it registers as a deliberate
   slice rather than a second accent.

   Deliberate deviation, CEO-directed 2026-09-23: display type is a serif
   (Source Serif 4) rather than the guidelines' Plus Jakarta Sans. Source
   Serif 4 and Source Sans 3 are siblings designed to pair, so the body face
   still follows the brand. A serif was chosen specifically because no
   template generator reaches for one -- it is the single strongest signal
   that a person designed this page.
   ==================================================================== */

/* @import must precede every other rule (only @charset may come before it)
   or browsers ignore it per spec. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ---------- Design tokens ---------- */
:root {
  /* Ratified brand palette */
  --ink:         #0B1F3A;  /* deep ground: hero, bands, footer */
  --ink-deep:    #08182E;  /* deepest band */
  --burgundy:    #7A2536;  /* THE SLICE: rules and lines only */
  --burgundy-lift:#8E2C40;
  --blue:        #1550E8;  /* sharp blue: links, buttons, focus. 6.02:1 on
                              Clean Stone -- deliberately sharper and more
                              saturated than the #2563EB/#1864D6 defaults that
                              made the old build read as generated. */
  --blue-deep:   #0F3FBF;  /* blue hover */
  --sky:         #9FC2FF;  /* emphasis ON the ink ground, 9.15:1 */
  --stone:       #FCFAF5;  /* page background */
  --stone-warm:  #F4F0E7;  /* alternating band */
  --slate:       #4A5567;  /* body copy, subdued UI */
  --rule-tint:   #D7D2C7;  /* quiet hairlines on paper */

  /* On-pine text. Brass on pine is about 3.1:1 and fails AA for body copy,
     so it stays on rules and decorative use exactly as the guidelines say.
     These two are the accessible options. */
  --on-ink:        #EEF2F8;
  --on-ink-muted:  #B7C4D6;

  --text:       var(--ink);
  --text-muted: var(--slate);

  /* Hard edges. The old sheet used 16-24px radii and 50px-blur shadows --
     the exact friendly-SaaS-card look being removed here. */
  --radius: 2px;
  --rule: 1px solid var(--rule-tint);
  --rule-strong: 1px solid var(--ink);

  --measure: 34rem;         /* readable line length for body copy */
  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--stone);
  color: var(--text);
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Reduced motion: honoured site-wide, including the JS reveal. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;   /* restrained, not the -0.04em template look */
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.3125rem; font-weight: 600; }

p { max-width: var(--measure); }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Small-caps section label with a leading rule. Replaces the pill badge,
   one of the most recognisable generated-template signatures. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--burgundy);
  flex: none;
}
.on-ink .eyebrow { color: var(--on-ink-muted); }
.on-ink .eyebrow::before { background: var(--rule-tint); }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---------- Navigation: flush to the top edge, no floating pill ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--stone);
  border-bottom: var(--rule);
  padding-top: env(safe-area-inset-top, 0px);
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo { display: flex; align-items: center; margin-right: auto; }
.nav-logo-img { height: 46px; width: auto; display: block; }

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.nav-links a:hover { color: var(--blue); text-decoration: underline; }

/* The phone number is the highest-intent action for a local trade and was
   previously buried in the footer. */
.nav-phone { font-variant-numeric: tabular-nums; white-space: nowrap; }

.nav-cta {
  background: var(--blue);
  color: var(--stone) !important;
  padding: 11px 20px;
  border-radius: var(--radius);
  text-decoration: none !important;
}
.nav-cta:hover { background: var(--blue-deep); }

/* ---------- Hero ----------
   An Ink Navy field rather than more off-white. With no photography yet, the
   page takes its weight from colour and the quote panel reads as the one
   bright object on screen.
   Burgundy is 1.69:1 on Ink and must NEVER be text here -- it appears only as
   the rule closing the hero, which is its whole job in this palette. Headline
   emphasis uses Sky at 9.15:1. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(52px, 8vw, 104px) 0 clamp(60px, 9vw, 112px);
}

/* Concept 13 "Spray and Surface" -- a scattered mist, built from gradients so
   there is no image to load and nothing for the CSP to block. Cool-tinted to
   sit on the ink ground. Deliberately near-threshold: it should register as
   texture, not pattern. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(159,194,255,0.16) 1.6px, transparent 1.7px),
    radial-gradient(circle at 62% 9%,  rgba(159,194,255,0.12) 2.1px, transparent 2.2px),
    radial-gradient(circle at 88% 34%, rgba(159,194,255,0.14) 1.4px, transparent 1.5px),
    radial-gradient(circle at 33% 61%, rgba(159,194,255,0.10) 1.9px, transparent 2.0px),
    radial-gradient(circle at 74% 78%, rgba(159,194,255,0.13) 1.5px, transparent 1.6px),
    radial-gradient(circle at 8% 87%,  rgba(159,194,255,0.09) 2.2px, transparent 2.3px);
  background-size: 420px 380px;
}
.hero > * { position: relative; z-index: 1; }

/* Echoes the polished-surface gleam bars in the logo. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--burgundy) 0%, var(--burgundy) 26%, var(--blue) 26%, var(--blue) 34%, rgba(159,194,255,0.22) 34%, transparent 78%);
}

.hero .eyebrow { color: var(--on-ink-muted); }
.hero .eyebrow::before { background: var(--burgundy); }
.hero h1 { color: var(--stone); }
.hero h1 em { color: var(--sky); }        /* 9.15:1 on ink */
.hero .hero-sub { color: var(--on-ink-muted); }

/* Inverted buttons: the stone fill is the brightest thing in the left column
   and pulls the eye to the call.
   SCOPED TO .hero-actions ON PURPOSE. The quote panel also lives inside
   .hero, so an unscoped `.hero .btn-premium` painted the form's submit button
   stone-on-stone and made the site's primary conversion control look like
   plain text. */
.hero .hero-actions .btn-premium {
  background: var(--stone);
  color: var(--ink);
  border-color: var(--stone);
}
.hero .hero-actions .btn-premium:hover { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.hero .hero-actions .btn-outline { color: var(--stone); border-color: rgba(252,250,245,0.45); }
.hero .hero-actions .btn-outline:hover { background: var(--stone); color: var(--ink); border-color: var(--stone); }

/* Belt and braces: the panel sits on the dark hero but is its own light
   surface, so its button keeps the standard Pine treatment. */
.quote-panel .btn-premium {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.quote-panel .btn-premium:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

.hero .trust-row { color: var(--stone); border-top-color: rgba(159,194,255,0.28); }
.hero .trust-row span::before { background: var(--sky); }

/* Asymmetric on purpose. A 50/50 split reads as generated; this does not. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.hero h1 { margin-bottom: 22px; }
/* Colour is set in the hero block above (Sky, 9.15:1 on ink). Burgundy is
   1.69:1 there and would fail even the large-text threshold, so this rule
   deliberately carries no colour -- it previously did, and being later in the
   cascade it silently overrode the accessible value. */
.hero h1 em { font-style: italic; font-weight: 600; }

.hero-sub { font-size: 1.1875rem; color: var(--slate); margin-bottom: 28px; }

/* Trust row: insurance and DBS are the two things people most want to know
   before letting a stranger into a property. */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 22px;
  border-top: var(--rule);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.trust-row span { display: flex; align-items: center; gap: 9px; }
.trust-row span::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--burgundy);
  flex: none;
}

/* ---------- Quote panel in the hero ---------- */
.quote-panel {
  background: var(--stone);
  /* An ink border would vanish against the ink hero, so the card is edged in
     a quiet tint and capped with the burgundy slice. */
  border: 1px solid var(--rule-tint);
  border-top: 4px solid var(--burgundy);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
}
.quote-panel .form-control { background: #fff; }
.quote-panel h2 { font-size: 1.5rem; margin-bottom: 6px; }
.quote-panel .panel-note { font-size: 0.9375rem; color: var(--slate); margin-bottom: 22px; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--stone);
  border: 1px solid #C9C2B4;
  border-radius: var(--radius);
  padding: 11px 13px;
}
.form-control:focus {
  outline: 3px solid var(--burgundy);
  outline-offset: 1px;
  border-color: var(--ink);
  background: #fff;
}
textarea.form-control { resize: vertical; min-height: 104px; }

/* A select with the native arrow removed and nothing in its place is
   indistinguishable from a text input, so draw the chevron back on. The
   data: URI is covered by img-src 'self' data: in the CSP. */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23515A54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 26px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.btn-premium:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
}
.btn-outline:hover { background: var(--ink); color: var(--stone); }

.form-note { font-size: 0.8125rem; color: var(--slate); margin-top: 14px; max-width: none; }
.form-error {
  font-size: 0.875rem;
  color: #8A2B2D;
  background: #F6EBEA;
  border-left: 3px solid #8A2B2D;
  padding: 10px 12px;
  margin-top: 14px;
  max-width: none;
  outline: none;
}

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-warm { background: var(--stone-warm); }

.divisions-header { margin-bottom: clamp(32px, 4vw, 52px); }
.divisions-header p { font-size: 1.125rem; color: var(--slate); margin-top: 12px; }

.divisions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
  border-top: var(--rule);
}

/* Cards separated by hairlines rather than floated on shadows. */
.division-card {
  padding: 34px clamp(24px, 3vw, 40px) 38px 0;
  border-bottom: var(--rule);
}
.division-card + .division-card {
  border-left: var(--rule);
  padding-left: clamp(24px, 3vw, 40px);
}
.division-card .eyebrow { margin-bottom: 14px; }
.division-card h3 { margin-bottom: 14px; }

.div-services { list-style: none; margin: 18px 0 26px; }
.div-services li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  color: var(--slate);
}
.div-services li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 10px; height: 1px;
  background: var(--burgundy);
}

/* ---------- Pine band ---------- */
.proof-section, .on-ink {
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(52px, 7vw, 92px) 0;
}
.proof-section h2, .on-ink h2, .on-ink h3 { color: var(--on-ink); }
.proof-section p, .on-ink p { color: var(--on-ink-muted); }
.proof-section a, .on-ink a { color: var(--sky); }

.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.proof-list { list-style: none; }
.proof-list li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(159,194,255,0.22);
  color: var(--on-ink-muted);
  max-width: 40rem;
}
.proof-list li:first-child { padding-top: 0; }
.proof-list strong { color: var(--on-ink); font-weight: 700; }

/* ---------- Numbered process ---------- */
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border-top: var(--rule);
}
.how-grid > div {
  padding: 30px clamp(20px, 2.4vw, 32px) 34px 0;
  border-bottom: var(--rule);
}
.how-grid > div + div {
  border-left: var(--rule);
  padding-left: clamp(20px, 2.4vw, 32px);
}
.how-grid .step-no {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 400;
  font-style: italic;
  /* Kept in Slate rather than the rule tint: at 36px these are still text and
     must clear the 3:1 large-text threshold. */
  color: var(--slate);
  line-height: 1;
  margin-bottom: 14px;
}
.how-grid h3 { margin-bottom: 10px; }
.how-grid p { color: var(--slate); font-size: 0.9875rem; }

/* ---------- Contact strip ---------- */
.contact-strip { border-top: var(--rule); padding: clamp(40px, 5vw, 64px) 0; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px;
}
.contact-grid strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 7px;
}
.contact-grid p { font-size: 1.0625rem; }
.contact-grid a { color: var(--ink); font-weight: 600; }
.contact-grid a:hover { color: var(--burgundy); }

/* ---------- Footer ---------- */
footer {
  background: var(--ink-deep);
  color: var(--on-ink-muted);
  padding: clamp(48px, 6vw, 76px) 0 34px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(159,194,255,0.20);
}
/* The logo SVG carries its own Clean Stone ground, so adding a padded panel
   behind it on the dark footer made it read as a stuck-on sticker. */
footer .nav-logo-img { height: 58px; background: none; padding: 0; }
.footer-title {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 14px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 9px; }
.footer-links a, footer a { color: var(--on-ink-muted); text-decoration: none; }
.footer-links a:hover, footer a:hover { color: var(--stone); text-decoration: underline; }
.footer-bottom { padding-top: 26px; font-size: 0.875rem; color: var(--on-ink-muted); }
.footer-bottom p { max-width: none; }

/* ---------- Content pages (privacy, accessibility, 404, thank-you) ---------- */
.privacy-content, .confirm-content, .error-content {
  padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px);
}
.privacy-content h1 { margin-bottom: 10px; }
.privacy-content h2 {
  font-size: 1.375rem;
  margin: 40px 0 12px;
  padding-top: 18px;
  border-top: var(--rule);
}
.privacy-content p, .privacy-content li { color: var(--slate); margin-bottom: 12px; }
.privacy-content ul { padding-left: 20px; margin-bottom: 18px; }

.confirm-content, .error-content { max-width: 46rem; }
.confirm-icon { font-size: 2.5rem; color: var(--burgundy); margin-bottom: 14px; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.text-link { font-weight: 700; color: var(--burgundy); text-decoration: none; border-bottom: 1px solid currentColor; }
.text-link:hover { color: var(--burgundy-lift); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .proof-grid { grid-template-columns: 1fr; }
  .division-card + .division-card { border-left: none; padding-left: 0; }
  .how-grid > div + div { border-left: none; padding-left: 0; }
  .how-grid > div { padding-right: 0; }
}

@media (max-width: 768px) {
  .nav-container { gap: 14px; padding-block: 11px; }
  .nav-logo-img { height: 38px; }
  /* Hide secondary nav items but NEVER the phone or the quote CTA -- on the
     content pages those are the only routes to contact. */
  .nav-links li:not(.nav-keep) { display: none; }
  .nav-links { gap: 14px; }
  .nav-cta { padding: 9px 15px; font-size: 0.875rem; }
  .nav-phone { font-size: 0.875rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .divisions-grid, .how-grid { border-top: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 380px) {
  .nav-phone { display: none; }   /* stop the CTA wrapping on tiny screens */
}


/* ---------- Hero image ----------
   Replaces the quote panel in the hero. The form moved down to its own
   section: on a dark hero the bright form panel was taking the attention that
   the picture of the actual service should hold, and the form converts better
   once someone has read what is being offered. */
.hero-visual {
  position: relative;
  border: 1px solid rgba(159,194,255,0.28);
  border-top: 4px solid var(--burgundy);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.hero-visual img {
  width: 100%;
  height: clamp(300px, 42vw, 540px);
  object-fit: cover;
  object-position: center 55%;
  display: block;
}

/* ---------- Relocated quote section ---------- */
.quote-section { background: var(--stone-warm); }
.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.quote-grid > div:first-child p { color: var(--slate); font-size: 1.0625rem; }
.quote-grid h2 { margin-bottom: 14px; }
.quote-grid .trust-row { margin-top: 28px; }
.quote-section .quote-panel { background: var(--stone); }

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