/* Carpet Care London brand system — all visual decisions are tokenised here. */
:root {
  /* Brand colours */
  --color-primary: #073d32;
  --color-secondary: #c87941;
  --color-dark: #152a25;
  --color-ivory: #f5f0e7;
  --color-stone: #dad6ce;
  --color-white: #ffffff;
  --color-text-muted: #4c615b;
  --color-success: #216e46;
  --color-error: #9b2c2c;
  --color-disabled: #a7a39c;

  /* Backwards-compatible semantic aliases */
  --ink: var(--color-primary);
  --ink-2: var(--color-dark);
  --blue: var(--color-primary);
  --blue-dark: var(--color-dark);
  --green: var(--color-primary);
  --green-dark: var(--color-primary);
  --mint: var(--color-ivory);
  --cream: var(--color-ivory);
  --white: var(--color-white);
  --muted: var(--color-text-muted);
  --line: var(--color-stone);
  --orange: var(--color-secondary);

  /* Typography */
  --font-heading: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-h4: clamp(1.125rem, 1.5vw, 1.375rem);
  --text-h3: clamp(1.375rem, 2vw, 1.75rem);
  --text-h2: clamp(2rem, 4vw, 3.5rem);
  --text-h1: clamp(2.75rem, 5.4vw, 4.5rem);
  --leading-tight: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.68;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-section: clamp(4.5rem, 8vw, 7rem);

  /* Shape, elevation and interaction */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --radius: var(--radius-lg);
  --shadow-sm: 0 6px 20px rgba(21, 42, 37, 0.08);
  --shadow-md: 0 18px 50px rgba(21, 42, 37, 0.12);
  --shadow: var(--shadow-md);
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --focus-ring: 0 0 0 3px var(--color-secondary);
  --focus-offset: 3px;
  --container: 1180px;
}

html { color-scheme: light; }
body {
  min-width: 320px;
  color: var(--color-dark);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

h1, h2, h3, h4, h5, h6,
.brand, .button, button, .hero-phone, .cta-phone {
  font-family: var(--font-heading);
}
h1 { font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
p, li { font-family: var(--font-body); }
.lead, .hero__lead { font-weight: var(--weight-medium); }

a { transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast); }
a:not(.button):hover { color: var(--color-secondary); }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-ring);
}
::selection { color: var(--color-white); background: var(--color-primary); }

.site-header {
  background: var(--color-primary);
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}
.site-header.is-sticky { box-shadow: var(--shadow-sm); }
.brand strong {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--weight-extrabold);
}
.brand small {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: var(--weight-medium);
  letter-spacing: .30em;
}
.brand__mark { background: transparent; }
.brand__mark svg { fill: var(--color-secondary); }
.menu a {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.menu a:hover, .menu .current-menu-item > a { color: var(--color-white); box-shadow: inset 0 -2px 0 var(--color-secondary); }
.header-phone { color: var(--color-white); font-family: var(--font-body); font-weight: var(--weight-semibold); }
.header-phone span { color: var(--color-secondary); }
.menu-toggle { background: var(--color-white); border-radius: var(--radius-md); }
.menu-toggle span:not(.screen-reader-text) { background: var(--color-primary); }

.button {
  min-height: 3.125rem;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.button:hover { transform: translateY(-1px); filter: none; }
.button--primary, .button--green, .button--blue {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.button--primary:hover, .button--green:hover, .button--blue:hover { color: var(--color-white); background: var(--color-dark); }
.header-cta, .home-hero .button--primary, .home-hero .button--green,
.inner-hero .button--primary, .inner-hero .button--green {
  color: var(--color-dark);
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}
.header-cta:hover, .home-hero .button--primary:hover, .home-hero .button--green:hover,
.inner-hero .button--primary:hover, .inner-hero .button--green:hover { color: var(--color-white); background: var(--color-dark); }
.button--dark { color: var(--color-white); background: var(--color-dark); }
.button--light { color: var(--color-primary); background: var(--color-white); }

.home-hero, .home-hero__copy, .home-hero__copy::after,
.inner-hero, .inner-hero__copy::after, .inner-hero--contact,
.page-hero, .page-hero--service, .how-section, .service-process,
.values-section, .contact-note, .why {
  color: var(--color-white);
  background-color: var(--color-primary);
  background-image: none;
}
.home-hero h1, .inner-hero h1, .page-hero h1,
.simple-heading--light h2, .service-process h2, .values-section h2 { color: var(--color-white); }
.home-hero__copy-inner > p:not(.hero-kicker),
.inner-hero__copy-inner > p:not(.hero-kicker),
.page-hero p:not(.eyebrow), .how-grid p, .value-grid p, .contact-note p { color: #e4ece9; }
.hero-kicker, .eyebrow, .eyebrow--light { color: var(--color-secondary); font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: .12em; }
.home-hero h1, .inner-hero h1, .page-hero h1 { font-size: var(--text-h1); letter-spacing: -.035em; }

.section { padding-block: var(--space-section); }
.section--tint, .photo-story, .areas-section, .inner-quote,
.contact-quote, .service-choice, .about-photo, .not-found { background: var(--color-ivory); }
.surface-section, .home-quote, .quote-section, .contact-options, .legal-section { background: var(--color-white); }
.simple-heading h2, .photo-story h2, .home-quote h2, .areas-section h2,
.section h2, .service-main-copy h2, .service-faq h2, .about-story h2 { color: var(--color-primary); font-family: var(--font-heading); }
.simple-heading > p:last-child, .lead, .service-card p, .surface-grid--services .surface-card p,
.values-grid p, .contact-options article p, .faq-list details p { color: var(--color-text-muted); }

.surface-card, .service-card, .quote-card, .values-grid article,
.contact-cards article, .contact-options article, .faq-list details,
.pricing-card, .testimonial-card {
  background: var(--color-white);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.surface-card:hover, .service-card:hover, .pricing-card:hover { box-shadow: var(--shadow-md); }
.surface-card > span, .service-card h2, .service-card h3,
.values-grid h3, .contact-options article > a, .contact-options article > strong { color: var(--color-primary); }
.surface-card b, .round-link, .service-card__image span,
.icon-tile, .content-callout li span, .how-grid span { color: var(--color-white); background: var(--color-primary); }
.surface-card:hover b, .round-link:hover { color: var(--color-secondary); }

.plain-checks li::before, .check-grid li::before, .check-list li::before,
.faq-list summary span, .value-grid span, .contact-options article > span { color: var(--color-secondary); }
.how-grid li, .value-grid article { border-color: rgba(255,255,255,.24); }
.area-list, .area-list span, .service-menu, .service-menu > a,
.contact-options article, .footer-bottom { border-color: var(--color-stone); }
.area-list span { color: var(--color-primary); }
.area-pills span { color: var(--color-primary); background: var(--color-white); border: 1px solid var(--color-stone); }

.service-menu { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); }
.service-menu h2, .sidebar-call { color: var(--color-white); background: var(--color-primary); }
.service-menu > a.active, .service-menu > a:hover { color: var(--color-primary); background: var(--color-ivory); box-shadow: inset 3px 0 0 var(--color-secondary); }
.service-menu > a span { color: var(--color-secondary); }
.service-menu__call, .content-callout { background: var(--color-ivory); }

.quote-card { padding: var(--space-8); }
.quote-form label { color: var(--color-dark); font-family: var(--font-body); font-weight: var(--weight-semibold); }
.quote-form input, .quote-form textarea, .quote-form select {
  min-height: 2.875rem;
  color: var(--color-dark);
  background: var(--color-white);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
}
.quote-form textarea { min-height: 8rem; }
.quote-form input:focus, .quote-form textarea:focus, .quote-form select:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.form-notice.success { color: var(--color-success); background: #edf7f0; border-left: 4px solid var(--color-success); }
.form-notice.error { color: var(--color-error); background: #fbefed; border-left: 4px solid var(--color-error); }
:disabled, [aria-disabled="true"] { color: var(--color-disabled); cursor: not-allowed; opacity: .75; }

.final-cta, .cta-band {
  position: relative;
  color: var(--color-dark);
  background: var(--color-ivory);
  border-top: 1px solid var(--color-stone);
}
.final-cta::before, .cta-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--color-secondary);
}
.final-cta h2, .cta-band h2 { color: var(--color-primary); }
.final-cta p, .cta-band p { color: var(--color-dark); }
.final-cta .button, .cta-band .button {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.final-cta .button:hover, .cta-band .button:hover { background: var(--color-dark); }
.site-footer { color: #dce6e2; background: var(--color-primary); }
.site-footer h2, .brand--footer { color: var(--color-white); }
.brand--footer { display: inline-block; }
.footer-logo { width: min(100%, 270px); height: auto; }
.footer-grid a:hover { color: var(--color-secondary); }
.footer-bottom { border-color: rgba(255,255,255,.18); }
.whatsapp { outline: 3px solid var(--color-white); }

.inner-hero--wide-photo { background-color: var(--color-primary); box-shadow: inset 0 0 0 100vmax rgba(7,61,50,.74); clip-path: inset(0 -100vmax); }
.inner-breadcrumb, .breadcrumbs { color: #d8e4e0; }
.inner-breadcrumb a:hover, .breadcrumbs a:hover { color: var(--color-secondary); }
.legal-section .prose { border-color: var(--color-stone); border-radius: var(--radius-lg); }
.prose a, .text-link { color: var(--color-primary); text-decoration-color: var(--color-secondary); }
.text-link { border-color: var(--color-secondary); }

@media (max-width: 780px) {
  .primary-nav { background: var(--color-primary); border-top: 1px solid rgba(255,255,255,.14); }
  .menu a { border-color: rgba(255,255,255,.15); }
  .section { padding-block: var(--space-20); }
}

@media (max-width: 520px) {
  :root { --space-section: var(--space-16); }
  body { font-size: var(--text-base); }
  .brand small { letter-spacing: .30em; }
  .quote-card { padding: var(--space-6) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}