/* Madison Castle design system v2
   Colours sampled from the brand mark supplied September 2026.
   Spacing, radii and shadows carried over from madisoncastle.net. One theme: light. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Mulish:wght@400;700&display=swap');

:root {
  /* Colour */
  --surface: #fdfaf1;  /* The page. Warm cream, taken from the ground the mark is drawn on. Grounds ink, ink-muted, ink-subtle, green-deep, blue. */
  --surface-raised: #ffffff;  /* Anything lifted off the page: cards, the review carousel, the header bar. Grounds the same inks as surface. */
  --surface-sunken: #f3ede0;  /* Alternating section band, one step deeper than surface. Grounds ink, ink-muted, ink-subtle. */
  --surface-inverse: #0f3864;  /* Full-bleed navy band and the primary button fill. Grounds on-inverse, on-inverse-muted, on-inverse-subtle, green-light. */
  --surface-tint: #baccda;  /* Cool panel fill, from the spray cloud. Grounds ink at 7.2:1. Use it for callouts and quiet stat blocks. */
  --surface-scrim: #fdfaf1e6;  /* 90% cream over photography so dark text stays legible. Grounds ink and ink-muted. */
  --surface-scrim-inverse: #0f3864cc;  /* 80% navy over photography. Grounds on-inverse and green-light. */
  --navy: #0f3864;  /* The brand's lead colour: primary button fill, the mark's house and figure, and all primary text. 11.3:1 on surface. */
  --navy-hover: #0b2a4b;  /* Hover and active state for any navy fill. 14.5:1 on surface. */
  --green: #5da343;  /* The swoosh and window green. A mark and fill colour only: 3.1:1 on surface-raised and 2.97:1 on surface, so it never carries text and never draws a hairline that must be seen. */
  --green-deep: #497f34;  /* Green as text: section headings, eyebrows, and the hover state of a green fill. 4.6:1 on surface. */
  --green-light: #8fc77c;  /* The window's light facet. Fill on light grounds, and the readable green on surface-inverse at 6.0:1 — the only green that may carry text on navy. */
  --blue: #1679b0;  /* The worker's sleeve. Text links and the focus ring. 4.6:1 on surface, 4.8:1 on surface-raised. */
  --blue-hover: #115e8a;  /* Hover and active state for blue links and fills. 6.7:1 on surface. */
  --mist: #baccda;  /* The spray cloud's light tone. Dividers, chart fills and quiet backgrounds. Not a text colour. */
  --mist-deep: #97a5b2;  /* The spray cloud's shaded tone. Icon fills and illustration only: 2.5:1 on surface. */
  --on-navy: #ffffff;  /* Label colour on any navy fill, including the primary button. 11.8:1. */
  --on-green-light: #0f3864;  /* Text on a green-light fill. 6.0:1. Never set text on plain green instead. */
  --on-blue: #ffffff;  /* Label colour on a blue fill. 4.8:1. */
  --on-tint: #0f3864;  /* Text on surface-tint. 7.2:1. */
  --ink: #0f3864;  /* Headings and primary body copy on surface, surface-raised and surface-sunken. 11.3:1 on surface. */
  --ink-muted: #4a5b6e;  /* Secondary body copy and lead paragraphs on light grounds. 6.7:1 on surface. */
  --ink-subtle: #5a6875;  /* Captions, datelines and field labels on light grounds. 5.5:1 on surface, 4.9:1 on surface-sunken — the lightest ink that may carry text. */
  --on-inverse: #ffffff;  /* Headings and primary copy on surface-inverse. 11.8:1. */
  --on-inverse-muted: #c9d6e4;  /* Body copy on surface-inverse. 8.1:1. */
  --on-inverse-subtle: #8fa3bb;  /* Attribution and captions on surface-inverse. 4.6:1. Never place it on a light ground. */
  --border: #e6e0d3;  /* Decorative hairline on surface: table rules and card edges. 1.3:1, so it is shape only and never signals state. */
  --border-strong: #6f8093;  /* Borders that must be seen: field outlines, toggle edges, chart axes. 3.9:1 on surface. */
  --focus: #1679b0;  /* Focus ring on light grounds: 4.6:1 on surface, 4.8:1 on surface-raised, 4.1:1 on surface-sunken. Always draw it with at least 2px of offset so the ring sits on the page and not on the control — it is only 2.5:1 against a navy fill and would disappear on one. */
  --focus-inverse: #8fc77c;  /* Focus ring on surface-inverse. 6.0:1. */

  /* Type families */
  --font-display: Montserrat, system-ui, sans-serif;
  --font-sans: Mulish, system-ui, sans-serif;

  /* Spacing */
  /* Carried over from the live site. It is not a strict 4px scale below 24px, and 56px is the section rhythm. */
  --space-1: 4px;  /* Promo-bar vertical padding and the compact button's vertical padding. */
  --space-2: 8px;  /* Primary button vertical padding and textarea padding. */
  --space-3: 12px;  /* Header bar vertical padding. */
  --space-4: 24px;  /* Compact button horizontal padding and header bar horizontal padding. */
  --space-5: 32px;  /* Card block padding and the gap between a heading and its lead paragraph. */
  --space-6: 40px;  /* Primary button horizontal padding. */
  --space-7: 56px;  /* Vertical padding on every full-width section. This is the page's rhythm. */

  /* Radius */
  /* Carried over from the live site and not yet revisited against the new mark, which is sharp and geometric. The 48px pill is the most likely thing to change next. */
  --radius-field: 4px;  /* Text inputs, selects and textareas. */
  --radius-pill: 48px;  /* Every button. Large enough to fully round the 40px and 56px button heights. */
  --radius-circle: 50%;  /* The hero disc and the rating badge. */

  /* Shadow */
  --shadow-sm: 0 2px 6px 0 rgba(15, 56, 100, 0.16);  /* Resting elevation on the header. Tinted navy rather than black so it sits on cream. */
  --shadow-strong: 0 2px 6px 0 rgba(15, 56, 100, 0.28);  /* The header once the page is scrolled. */
  --shadow-card: 2px 6px 30px 0 rgba(15, 56, 100, 0.16);  /* Floating cards: the review carousel and the cookie notice. */
}

/* Type styles ------------------------------------------------------------- */

/* Display */
.display-xl { font-family: var(--font-display); font-size: 44px; line-height: 52px; font-weight: 700; }  /* Section headings, in ink on light grounds, green-deep for an accented section, on-inverse on surface-inverse. Drops to 32px/40px below 1024px. */
.display-lg { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 700; }  /* Page title, one per page, in ink. Drops to 26px/32px on phones. */
.eyebrow { font-family: var(--font-display); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }  /* Set in capitals, in green-deep, directly above a heading. Echoes the letterspaced CASTLE in the wordmark — the brand's one typographic signature. Never more than three words. */

/* Headings */
.heading-lg { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 600; }  /* Service and card headings in ink. */
.heading-md { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 600; }  /* The narrow-viewport size of heading-lg; also secondary cards. */
.heading-sm { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; }  /* Form and notice headings in ink. */

/* Text */
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 400; }  /* The paragraph directly under a section heading, in ink-muted. */
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }  /* Default paragraph and navigation text. ink-muted on light grounds, on-inverse-muted on surface-inverse. */
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 400; }  /* Hero subcopy over a scrim, and dense supporting copy. */
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 400; }  /* Footer legal lines and reviewer datelines, in ink-subtle. */

/* Interface */
.button { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }  /* Primary and secondary button labels. Sentence case, never uppercase. */
.button-sm { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }  /* The compact header button and the cookie Accept button. */
.field { font-family: var(--font-sans); font-size: 14px; font-weight: 400; }  /* Form input values, placeholders and floating labels, in ink-subtle. */

/* Components -------------------------------------------------------------- */
/* Markup contract: see madison-castle-brief.md. Namespace: window.MadisonCastle */

/* Button ----------------------------------------------------------------- */
.mc-btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
}

.mc-btn--md {
  font-size: 14px;
  padding: var(--space-2) var(--space-6);
  min-height: 56px;
  line-height: 40px;
}

.mc-btn--sm {
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-4);
  min-height: 40px;
  line-height: 32px;
}

.mc-btn--primary {
  background: var(--navy);
  color: var(--on-navy);
}

.mc-btn--primary:hover {
  background: var(--navy-hover);
}

.mc-btn--secondary {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}

.mc-btn--secondary:hover {
  background: var(--navy);
  color: var(--on-navy);
}

.mc-btn--on-dark {
  background: var(--green-light);
  color: var(--on-green-light);
}

.mc-btn--on-dark:hover {
  background: var(--on-inverse);
}

.mc-btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.mc-btn--on-dark:focus-visible {
  outline-color: var(--focus-inverse);
}

/* PromoBar --------------------------------------------------------------- */
.mc-promo {
  background: var(--surface-inverse);
  padding: var(--space-1) var(--space-4);
  text-align: center;
}

.mc-promo__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--on-inverse-muted);
}

/* SiteHeader ------------------------------------------------------------- */
.mc-header {
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.mc-header--elevated {
  box-shadow: var(--shadow-strong);
}

.mc-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-4);
}

.mc-header__logo {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
}

.mc-header__logo-image {
  display: block;
  width: 86px;
  height: 96px;
  object-fit: contain;
}

.mc-header__wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.mc-header__nav {
  flex: 1 1 auto;
}

.mc-header__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-header__link {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--blue);
  text-decoration: none;
}

.mc-header__link:hover,
.mc-header__link.is-current {
  color: var(--blue-hover);
  text-decoration: underline;
}

.mc-header__link:focus-visible,
.mc-header__logo:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.mc-header__end {
  flex: 0 0 auto;
}

/* HeroBand --------------------------------------------------------------- */
.mc-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: var(--space-7) var(--space-4);
  box-sizing: border-box;
  background: var(--surface-sunken);
}

.mc-hero--photo {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mc-hero__scrim {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
}

.mc-hero--disc .mc-hero__scrim {
  width: 400px;
  height: 400px;
  border-radius: var(--radius-circle);
  background: var(--surface-scrim-inverse);
  padding: var(--space-6);
}

.mc-hero--panel .mc-hero__scrim {
  max-width: 560px;
  background: var(--surface-scrim);
  padding: var(--space-7) var(--space-6);
}

.mc-hero__inner {
  max-width: 320px;
}

.mc-hero__eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mc-hero--disc .mc-hero__eyebrow { color: var(--green-light); }
.mc-hero--panel .mc-hero__eyebrow { color: var(--green-deep); }

.mc-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}

.mc-hero--disc .mc-hero__title { color: var(--on-inverse); }
.mc-hero--panel .mc-hero__title { color: var(--ink); }

.mc-hero__subtitle {
  margin: var(--space-4) 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
}

.mc-hero--disc .mc-hero__subtitle { color: var(--on-inverse-muted); }
.mc-hero--panel .mc-hero__subtitle { color: var(--ink-muted); }

/* SectionHeading --------------------------------------------------------- */
.mc-heading {
  max-width: 720px;
}

.mc-heading__eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-deep);
}

.mc-heading--inverse .mc-heading__eyebrow { color: var(--green-light); }

.mc-heading__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 52px;
  font-weight: 700;
}

.mc-heading--ink .mc-heading__title { color: var(--ink); }
.mc-heading--green .mc-heading__title { color: var(--green-deep); }
.mc-heading--inverse .mc-heading__title { color: var(--on-inverse); }

.mc-heading__lead {
  margin: var(--space-5) 0 0;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 30px;
  color: var(--ink-muted);
}

.mc-heading--inverse .mc-heading__lead { color: var(--on-inverse-muted); }

/* ServiceCard ------------------------------------------------------------ */
.mc-service {
  background: var(--surface-raised);
  max-width: 360px;
}

.mc-service__image {
  display: block;
  width: 100%;
  height: auto;
}

.mc-service__body {
  padding: var(--space-5);
}

.mc-service__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  color: var(--ink);
}

.mc-service__text {
  margin: var(--space-2) 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-muted);
}

/* ReviewCard ------------------------------------------------------------- */
.mc-review {
  margin: 0;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  max-width: 360px;
}

.mc-review__quote {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-muted);
}

.mc-review__meta {
  margin: var(--space-4) 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-subtle);
}

.mc-review--inverse {
  background: var(--surface-inverse);
  box-shadow: none;
}

.mc-review--inverse .mc-review__quote { color: var(--on-inverse-muted); }
.mc-review--inverse .mc-review__meta { color: var(--on-inverse-subtle); }

/* TextField -------------------------------------------------------------- */
.mc-field {
  position: relative;
  display: block;
  max-width: 360px;
}

.mc-field__label {
  position: absolute;
  top: 7px;
  left: 9px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-subtle);
  pointer-events: none;
}

.mc-field__control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 49.5px;
  padding: 23px 8px 7px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-field);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
}

.mc-field--multiline .mc-field__control {
  height: 116px;
  padding: 8px;
  line-height: 24.5px;
  resize: vertical;
}

.mc-field--multiline .mc-field__label {
  position: static;
  display: block;
  margin-bottom: var(--space-1);
}

.mc-field__control::placeholder { color: var(--ink-subtle); }

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

/* SiteFooter ------------------------------------------------------------- */
.mc-footer {
  background: var(--surface-inverse);
  padding: var(--space-7) var(--space-4);
}

.mc-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.mc-footer__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-footer__link {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--on-inverse);
  text-decoration: none;
}

.mc-footer__link:hover {
  color: var(--green-light);
  text-decoration: underline;
}

.mc-footer__link:focus-visible {
  outline: 3px solid var(--focus-inverse);
  outline-offset: 3px;
}

.mc-footer__contact {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--on-inverse-muted);
}

.mc-footer__legal {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  color: var(--on-inverse-subtle);
}