@import url("../fonts/fonts.css");

/* ==========================================================================
   Caregiving Zen — design system
   Palette and type scale lifted from the original Avada theme configuration.
   ========================================================================== */

:root {
  /* brand palette */
  --white:      #ffffff;
  --cream:      #fcf7f6;
  --mint:       #daf2e6;
  --gold:       #eda444;
  --orange:     #f1642b;
  --plum:       #5b4f68;
  --indigo:     #3b3a64;
  --teal:       #09202c;

  --primary:       var(--orange);
  --primary-dark:  #d44f19;
  --accent:        var(--gold);

  --ink:         var(--teal);
  --ink-muted:   #47606b;
  --ink-subtle:  #6b7f88;
  --rule:        #e7e0de;
  --surface:     var(--white);
  --surface-alt: var(--cream);
  --surface-mint: var(--mint);

  /* typography */
  --font-display: "Gentium Book Plus", Georgia, "Times New Roman", serif;
  --font-body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --step-2:  clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --step-3:  clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);
  --step-4:  clamp(1.875rem, 1.45rem + 2.1vw, 2.625rem);
  --step-5:  clamp(2.125rem, 1.5rem + 3.1vw, 3.375rem);

  /* spacing */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --measure: 68ch;
  --container: 1248px;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgba(9, 32, 44, 0.06), 0 2px 8px rgba(9, 32, 44, 0.05);
  --shadow-m: 0 4px 12px rgba(9, 32, 44, 0.07), 0 12px 32px rgba(9, 32, 44, 0.07);
  --shadow-l: 0 8px 24px rgba(9, 32, 44, 0.09), 0 24px 56px rgba(9, 32, 44, 0.1);

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); }

p, ul, ol { margin: 0 0 var(--space-s); }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.35em; }
/* Spacing for prose lists. Lists that lay themselves out — the nav, the
   service-area chips, the footer columns — set their own gaps, and this margin
   only pushed every item after the first out of line with it. Gary spotted it
   as "Home sits slightly higher than the other tabs": Home was the only item
   not being pushed down. */
li + li { margin-top: 0.35em; }
:is(.nav__list, .nav__submenu, .link-list, .site-footer__list) li + li { margin-top: 0; }
li::marker { color: var(--primary); }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-dark); }

strong, b { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-l) 0; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: var(--space-s); z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-s) var(--radius-s);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 0; color: var(--white); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

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

.container--narrow { max-width: 820px; }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--alt  { background: var(--surface-alt); }
.section--mint { background: var(--surface-mint); }
.section--ink  { background: var(--ink); color: #dfe8ec; }
.section--ink :is(h1,h2,h3,h4,h5,h6) { color: var(--white); }

.section--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.stack > * + * { margin-top: var(--space-s); }
.prose { max-width: var(--measure); }
.prose :is(h2, h3, h4) { margin-top: var(--space-l); }
.prose > :first-child { margin-top: 0; }
.prose img { border-radius: var(--radius-m); margin-block: var(--space-m); }
.prose blockquote {
  margin: var(--space-m) 0;
  padding: var(--space-s) var(--space-m);
  border-left: 4px solid var(--primary);
  background: var(--surface-alt);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin-block: var(--space-m); }
.prose :is(th, td) { padding: 0.65rem 0.85rem; border: 1px solid var(--rule); text-align: left; }
.prose th { background: var(--surface-alt); font-weight: 600; }

/* Cards are capped at 22rem so a row of two, or a lone card, doesn't stretch
   to the full container. It also keeps the rendered width predictable, which
   is what makes the `sizes` attribute on the card images honest. */
.grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 22rem));
  justify-content: center;
}
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* A fixed four-up row that folds to 2 x 2, then stacks. Used where the count
   is known and a ragged 3 + 1 would look like a mistake. */
.grid--quarters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
}
@media (max-width: 1100px) {
  .grid--quarters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid--quarters { grid-template-columns: minmax(0, 1fr); }
}

.split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
.split--media-first > .split__media { order: -1; }
.split__media { display: grid; gap: var(--space-s); }
.split__media picture { display: block; }
.split__media :is(img, picture) { border-radius: var(--radius-l); width: 100%; }
.split__text > :last-child { margin-bottom: 0; }

/* Two photographs in one media column are layered, not stacked: the second
   sits high and right, the first overlaps it low and left. That is how the
   original Avada build composed this block, and stacking them loses it.
   The ratio below is the source images' own 942x1056, so the box is exactly
   tall enough for the pair at their offsets and nothing is cropped. */
@media (min-width: 781px) {
  .split__media--layered {
    display: block;
    position: relative;
    aspect-ratio: 1 / 0.92;
  }
  .split__media--layered picture {
    position: absolute;
    width: 70%;
  }
  .split__media--layered picture:first-child {
    left: 0;
    bottom: 0;
    z-index: 1;
  }
  .split__media--layered picture:last-child {
    right: 0;
    top: 0;
  }
  /* No shadow: the original sets the two photographs flat against each other,
     and a shadow here reads as a card stack rather than one composition. */
  .split__media--layered img { display: block; }
}

.section__head {
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: var(--space-l);
  text-align: center;
}
.section__head > :last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-2xs);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.75em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover {
  background: var(--primary-dark);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-m);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--primary);
  border-color: currentColor;
}
.btn--ghost:hover { background: var(--primary); color: var(--white); }

.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--mint); color: var(--ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}
.section__head .btn-row { justify-content: center; }
.hero__actions { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 88px;
}

.brand { flex: 0 0 auto; }
/* Gary, 27 September 2026: the logo "looks underwhelming" against the call to
   action on the other side of the bar. Up from 46px, with the header given the
   room to hold it. */
.brand img { width: auto; height: 58px; }

/* ...and the call to action was "a little too subtle" for the one thing on the
   page we want a worried family to press. */
.nav__cta .btn {
  font-weight: 700;
  padding-inline: 2em;
  box-shadow: 0 0.35rem 1rem rgb(241 100 43 / 0.32);
}
.nav__cta .btn:hover { box-shadow: 0 0.5rem 1.25rem rgb(241 100 43 / 0.42); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 20px; height: 2px; background: var(--ink); }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
  transition: transform var(--transition), top var(--transition);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

.nav { display: flex; align-items: center; gap: var(--space-m); }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: block;
  padding: 0.5rem 0.35rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--primary); }
.nav__item--current > .nav__link { color: var(--primary); border-bottom-color: var(--primary); }

.nav__item--has-children { position: relative; }
.nav__submenu-toggle {
  border: 0; background: none; padding: 0.15rem; margin-left: 0.1rem;
  color: inherit; cursor: pointer; line-height: 0;
}
.nav__submenu-toggle svg { width: 12px; height: 12px; transition: transform var(--transition); }
.nav__item--open .nav__submenu-toggle svg { transform: rotate(180deg); }

/* On the desktop bar the submenu opens on hover, so the chevron is noise.
   It stays in the markup for the mobile drawer, where tapping is the only
   way in. */
@media (min-width: 1101px) {
  .nav__submenu-toggle { display: none; }
}

.nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.4rem;
  min-width: 17rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
/* Bridge the gap between the parent link and the panel so the menu does not
   snap shut as the pointer travels down to it. */
.nav__submenu::before {
  content: "";
  position: absolute;
  inset: -0.6rem 0 auto 0;
  height: 0.6rem;
}
.nav__item--has-children:hover > .nav__submenu,
.nav__item--has-children:focus-within > .nav__submenu,
.nav__item--open > .nav__submenu { opacity: 1; visibility: visible; }

.nav__submenu .nav__link {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-s);
  border-bottom: 0;
  white-space: normal;
}
.nav__submenu .nav__link:hover { background: var(--surface-alt); }

.nav__cta { flex: 0 0 auto; }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--primary); }

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 78px 0 auto 0;
    display: block;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    padding: var(--space-s) var(--gutter) var(--space-l);
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-l);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--rule); }
  .nav__item--has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__item--has-children > .nav__link { flex: 1; }
  .nav__link { padding: 0.9rem 0.25rem; font-size: 1rem; }
  .nav__submenu-toggle { padding: 0.9rem; }
  .nav__submenu {
    position: static; transform: none; width: 100%; min-width: 0;
    border: 0; box-shadow: none; padding: 0 0 0.5rem 0.75rem;
    display: none; opacity: 1; visibility: visible;
  }
  .nav__item--open > .nav__submenu { display: block; }
  .nav__item--has-children:hover > .nav__submenu { display: none; }
  .nav__item--has-children.nav__item--open:hover > .nav__submenu { display: block; }
  .nav__cta { margin-top: var(--space-s); }
  .nav__cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 7vw, 6rem) clamp(5rem, 3rem + 9vw, 11rem);
  background: linear-gradient(170deg, var(--mint) 0%, var(--cream) 62%, var(--white) 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -45% auto;
  width: 34rem;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(241, 100, 43, 0.12), transparent 68%);
  pointer-events: none;
}
/* Page headers are left-aligned, as on the original - the centred treatment
   was a departure. */
.hero__inner { position: relative; z-index: 1; text-align: left; max-width: 46rem; }
.hero h1 { margin-bottom: var(--space-m); }
.hero__lead { font-size: var(--step-1); color: var(--ink-muted); }
.hero__lead > :last-child { margin-bottom: 0; }

/* The orange wedge, carried over from the original design. It is decorative,
   so it is drawn by CSS from the --wedge custom property the page sets. */
/* The wedge sweeps across the foot of every page header, as on the original. */
.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  /* the artwork's own proportions, clipped by the header's height */
  aspect-ratio: 1718 / 548;
  background: var(--wedge) left bottom / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 780px) {
  .hero::before, .page-hero::before { opacity: 0.6; }
}

/* The live design runs the hero photograph to the right edge of the window
   and sets the copy in a half-width column beside it. */
.hero--split { padding-block: 0; overflow: hidden; }
.hero--split .hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.hero__copy {
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  padding-inline: var(--gutter, 1.25rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  margin-inline-start: max(0px, (100vw - var(--container)) / 2);
}
.hero--split .hero__inner { text-align: left; max-width: 34rem; margin-inline: 0; }
.hero--split .hero__actions { justify-content: flex-start; }
.hero h1 .accent { color: var(--primary); }
.hero__media { position: relative; min-height: 24rem; }
.hero__media :is(img, picture) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media picture { position: absolute; inset: 0; }
@media (max-width: 860px) {
  .hero--split .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { margin-inline-start: 0; padding-inline: var(--gutter, 1.25rem); }
  .hero__media { order: -1; min-height: 0; height: 15rem; }
  .hero__media picture { position: static; }
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.75rem + 4vw, 4.5rem) clamp(5rem, 3rem + 9vw, 11rem);
  background: linear-gradient(170deg, var(--mint) 0%, var(--cream) 62%, var(--white) 100%);
  border-bottom: 0;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 52rem; }
.page-hero h1 { margin-bottom: 0; }
.page-hero__lead { margin-top: var(--space-s); color: var(--ink-muted); font-size: var(--step-1); }

/* --------------------------------------------------------------------------
   Quote card - a testimonial set over a photograph
   -------------------------------------------------------------------------- */

.quote-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 20rem;
  padding: var(--space-m);
  border-radius: var(--radius-l, 1rem);
  background-color: var(--teal);
  background-size: cover;
  background-position: center;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.quote-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 32, 44, 0.92) 12%, rgba(9, 32, 44, 0.55) 62%, rgba(9, 32, 44, 0.3) 100%);
  z-index: -1;
}
.quote-card__body > :last-child { margin-bottom: 0; }
.quote-card__body p { color: var(--white); }
.quote-card__cite {
  margin-top: var(--space-s);
  font-weight: 600;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: transparent; }

/* 16:10 like the original, and the crop is anchored above centre so a
   portrait source keeps faces in frame instead of slicing heads off. */
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
/* <picture> is inline by default, so its height collapses to the image's own
   and a wide photo leaves a gap under it instead of filling the 4:3 box. */
.card__media picture { display: block; width: 100%; height: 100%; }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }

.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-m); }
.card__body > :last-child { margin-bottom: 0; }
.card__title { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--primary); }
.card__text { color: var(--ink-muted); }
.card__text > :last-child { margin-bottom: 0; }
.card__actions { margin-top: auto; padding-top: var(--space-s); }

.card__link {
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.card__link::after { content: "→"; transition: transform var(--transition); }
.card__link:hover::after { transform: translateX(3px); }

.card--numbered { position: relative; background: var(--surface-alt); border-color: transparent; }
.card--numbered .card__body { padding-top: var(--space-l); }
.card--numbered .eyebrow {
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: 0;
  color: var(--gold);
  line-height: 1;
}

.card--plain { background: var(--surface-alt); border-color: transparent; }

.post-card__meta {
  font-size: var(--step--1);
  color: var(--ink-subtle);
  margin-bottom: var(--space-2xs);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.tag {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--mint);
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.tag:hover { background: var(--gold); color: var(--teal); }

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: var(--space-xs); }

.faq__item {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--primary); box-shadow: var(--shadow-s); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--primary); }
/* One marker only: the chevron in the markup. The plus/minus this used to
   draw with pseudo-elements sat on top of it. */
.faq__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  color: var(--primary);
}
.faq__icon svg { width: 14px; height: 14px; transition: transform var(--transition); }
.faq__item[open] .faq__icon svg { transform: rotate(180deg); }

.faq__a { padding: 0 var(--space-m) var(--space-m); color: var(--ink-muted); }
.faq__a > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.contact {
  background: var(--ink);
  color: #cfdde3;
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.contact :is(h2, h3) { color: var(--white); }
.contact__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
.contact__detail { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-m); }
.contact__detail a { color: var(--gold); font-weight: 600; text-decoration: none; }
.contact__detail a:hover { color: var(--white); }

.form { display: grid; gap: var(--space-s); }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: var(--step--1); font-weight: 600; color: #cfdde3; }
.field .req { color: var(--gold); }

.field :is(input, textarea) {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  transition: border-color var(--transition);
}
.field :is(input, textarea):focus { outline: none; border-color: var(--primary); }
.field textarea { min-height: 8rem; resize: vertical; }

.form__note { font-size: var(--step--1); color: #9fb3bc; }
.form__note a { color: var(--gold); }

.form__status {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  font-weight: 600;
  display: none;
}
.form__status[data-state="ok"]   { display: block; background: var(--mint); color: var(--teal); }
.form__status[data-state="error"]{ display: block; background: #4a1d12; color: #ffd9cc; }
.form__status[data-state="sending"] { display: block; background: rgba(255,255,255,0.1); color: #cfdde3; }

/* honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Map embeds
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Link lists
   -------------------------------------------------------------------------- */

.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
}
.link-list a {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.link-list a:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumbs { font-size: var(--step--1); color: var(--ink-subtle); margin-bottom: var(--space-s); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--rule); }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */

.article { padding-block: var(--space-xl); }
.article__header { max-width: var(--measure); margin: 0 auto var(--space-l); }
.article__meta { font-size: var(--step--1); color: var(--ink-subtle); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: var(--space-s); }
.article__figure { max-width: 900px; margin: 0 auto var(--space-l); }
.article__figure img { width: 100%; border-radius: var(--radius-l); }
.article__body { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: #b7c8cf;
  padding-block: var(--space-xl) var(--space-m);
  margin-top: var(--space-2xl);
}
.site-footer a { color: #dbe6ea; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }

.site-footer__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.site-footer h2, .site-footer h3 { color: var(--white); font-size: var(--step-1); margin-bottom: var(--space-s); }
.site-footer__brand img { height: 46px; width: auto; margin-bottom: var(--space-s); filter: brightness(0) invert(1); }
.site-footer__tagline { font-family: var(--font-display); font-size: var(--step-2); color: var(--white); line-height: 1.25; }

.site-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: var(--step--1); }

.site-footer__bottom {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  align-items: center;
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.site-footer__nap {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  line-height: 1.6;
  color: #b7c8cf;
}
.site-footer__nap strong { color: var(--white); }

.callout {
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--space-m);
  background: var(--surface-mint);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}
.callout > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Live-design details: card icon, small button, contact band
   -------------------------------------------------------------------------- */

/* The orange tile above each "Why Choose Us" card. */
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-s);
  border-radius: var(--radius-s);
  background: var(--primary);
  color: var(--white);
}
.card__icon svg { width: 1.25rem; height: 1.25rem; }

.grid--quarters .card { background: var(--cream); border-color: transparent; }

.btn--sm { padding: 0.5rem 1.1rem; font-size: 0.875rem; }

/* The enquiry block sits on the warm tint rather than the dark panel, to
   match the live page. */
.section--contact { background: var(--cream); }
.section--contact .contact { background: transparent; box-shadow: none; padding: 0; }
.section--contact .contact h2,
.section--contact .contact p,
.section--contact .contact li { color: var(--ink); }
.section--contact .contact__detail a { color: var(--primary); }
.section--contact .form {
  background: var(--white);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}
/* the fields were drawn for the dark panel - give them visible edges here */
.section--contact .field label { color: var(--ink-muted); }
.section--contact .field .req { color: var(--primary); }
.section--contact .field :is(input, textarea) {
  background: var(--surface-alt);
  border-color: var(--rule);
}
.section--contact .field :is(input, textarea):focus { border-color: var(--primary); }
.section--contact .form__note { color: var(--ink-muted); }
.section--contact .form__note a { color: var(--primary); }
.section--contact .form__status[data-state="sending"] {
  background: var(--surface-alt);
  color: var(--ink-muted);
}
.section--contact .contact__grid { gap: clamp(1.5rem, 1rem + 3vw, 4rem); }

/* --------------------------------------------------------------------------
   Scroll-reveal animations
   Mirrors the fadeInUp / fadeInLeft / fadeInRight / slideInLeft the original
   site ran on scroll-into-view. Elements are only hidden once the script has
   confirmed it can reveal them, so the page is fully readable without JS.
   -------------------------------------------------------------------------- */

[data-anim] { --anim-delay: 0s; }

.js-anim [data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--anim-delay);
}
.js-anim [data-anim="fadeInUp"]    { transform: translate3d(0, 2rem, 0); }
.js-anim [data-anim="fadeInLeft"]  { transform: translate3d(-2rem, 0, 0); }
.js-anim [data-anim="fadeInRight"] { transform: translate3d(2rem, 0, 0); }
.js-anim [data-anim="slideInLeft"] { transform: translate3d(-3rem, 0, 0); }

.js-anim [data-anim].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* the service-areas chip row */
.link-list--centred { justify-content: center; }