/* ==========================================================================
   LITTLE DOVES — SHELL, HEADER, NAVIGATION, SECTION GRIDS, FOOTER
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHELL
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.shell--narrow { max-width: 66rem; }
.shell--wide   { max-width: 90rem; }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--tint { background: var(--surface-sage-tint); }
.section--blue-tint { background: var(--surface-blue-tint); }
.section--raised { background: var(--surface-raised); }

.section--dark {
  background: var(--surface-blue);
  color: rgba(255, 255, 255, 0.88);
}
.section--dark .h1,
.section--dark .h2,
.section--dark .h3,
.section--dark .h4,
.section--dark .display,
.section--dark .lead { color: #fff; }

.rule-top { border-top: 1px solid var(--line-hairline); }
.rule-bottom { border-bottom: 1px solid var(--line-hairline); }

/* --------------------------------------------------------------------------
   SECTION HEADS — mono eyebrow / serif title / body deck
   -------------------------------------------------------------------------- */
.section-head {
  display: grid;
  gap: var(--s-5);
  max-width: var(--measure-wide);
}

.section-head .h2 { max-width: 18ch; }
.section-head .lead { max-width: var(--measure); }

.section-head--split {
  display: grid;
  gap: var(--s-6) var(--s-11);
  align-items: end;
  max-width: none;
}

@media (min-width: 60rem) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .section-head--split .h2 { max-width: 14ch; }
}

/* Editorial two-column body */
.editorial {
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 60rem) {
  .editorial {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-11);
  }
  .editorial--offset {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.stack   { display: grid; gap: var(--s-5); }
.stack-6 { display: grid; gap: var(--s-6); }
.stack-8 { display: grid; gap: var(--s-8); }
.stack-9 { display: grid; gap: var(--s-9); }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
/* Solid brand green, matching the rectangle logo. Because the bar is sage
   (2.48:1 against white) nothing in it may be white text — see the nav rules
   below, which use --ink-strong at 5.44:1. The logo itself is exempt: WCAG
   1.4.3 places no contrast requirement on a logotype. */
.ld-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--brand-sage);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow   var(--dur-base) var(--ease-out);
}

.ld-header.is-stuck {
  border-bottom-color: rgba(38, 49, 42, 0.18);
  box-shadow: 0 1px 12px rgba(38, 49, 42, 0.12);
}

.ld-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}

/* Brand lockup ------------------------------------------------------------ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  padding-block: 0;          /* every spare pixel goes to the logo */
  flex: none;
  min-width: 0;
}

/* The supplied rectangle lockup, with its green plate removed so the artwork
   sits directly on the header. Height-driven; width follows the 3.46:1 ratio. */
/* Sized to fill the header rather than sit inside it: the bar is 76px on
   mobile and 88px from 48rem up, less 8px of brand padding, so these heights
   leave roughly 16-20px of breathing room and no more. Raising the lockup is
   what makes "by Feltonfleet" legible — it is the smallest element in the
   artwork and was previously rendering around 5px tall. */
.brand__lockup {
  display: block;
  height: 3.25rem;       /* 52px — smallest phones, where the Menu button also
                            has to fit across 280px of usable width */
  width: auto;
  max-width: 100%;
}

@media (min-width: 23rem) {
  .brand__lockup { height: 3.75rem; }  /* 60px in a 76px bar */
}

@media (min-width: 30rem) {
  .brand__lockup { height: 4rem; }
}

/* 60rem is where --header-h grows to 5.5rem; the lockup steps up with it so
   the breathing room stays even instead of pinching between 48 and 60rem. */
@media (min-width: 60rem) {
  .brand__lockup { height: 4.75rem; }  /* 76px in an 88px bar */
}


/* Desktop navigation ------------------------------------------------------ */
.nav-desktop { display: none; }

@media (min-width: 64rem) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--s-1);
  }
}

.nav-desktop__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-small);
  font-weight: 500;
  /* Marketing found the previous near-black too heavy against the green.
     White is not available: it measures 2.48:1 on this sage and fails at any
     weight or size. #2f3d2a is the LIGHTEST tone that still clears 4.5:1
     (4.65:1) — a green-black that sits with the bar rather than punching
     through it. Tracking matches the 220 used in Canva. */
  color: #2f3d2a;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  font-size: var(--fs-micro);
  text-decoration: none;
  white-space: nowrap;                 /* "Fees & Funding" must never break */
  border-radius: var(--radius-control);
  transition: color var(--dur-fast) var(--ease-out);
}

/* The larger lockup leaves less room between 60 and 75rem, so the nav tucks
   its padding in over that band rather than letting a label wrap. */
/* Wide tracking costs real width. Three tiers keep the header on one row:
   full 0.22em once there is room, easing back as the viewport narrows. */
@media (min-width: 60rem) and (max-width: 69.99rem) {
  .nav-desktop__link { padding-inline: var(--s-1); letter-spacing: 0.07em; }
  .nav-desktop__link::after { left: var(--s-1); right: var(--s-1); }
}

/* A sixth link (Meet the Team) only fits from 80rem; below that it lives in
   the footer and on the About page rather than pushing the header wide. */
@media (max-width: 79.99rem) {
  .nav-desktop__link--wide-only { display: none; }
}

@media (min-width: 70rem) and (max-width: 89.99rem) {
  .nav-desktop__link { padding-inline: var(--s-2); letter-spacing: 0.14em; }
  .nav-desktop__link::after { left: var(--s-2); right: var(--s-2); }
}

.nav-desktop__link::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-2);
  height: 1.5px;
  background: var(--ink-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav-desktop__link:hover { color: #1d2719; }
.nav-desktop__link:hover::after { transform: scaleX(1); }

.nav-desktop__link[aria-current="page"] {
  color: #1d2719;
  font-weight: 700;
}
.nav-desktop__link[aria-current="page"]::after {
  transform: scaleX(1);
  background: #1d2719;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.header-actions .btn { display: none; }

@media (min-width: 64rem) {
  .header-actions .btn { display: inline-flex; }
}

/* Mobile toggle ----------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-4);
  border: 1px solid rgba(38, 49, 42, 0.45);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-strong);
}

@media (min-width: 64rem) {
  .nav-toggle { display: none; }
}

.nav-toggle__bars {
  position: relative;
  width: 1rem;
  height: 0.625rem;
  flex: none;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bars span:nth-child(3) { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  bottom: 50%; transform: translateY(50%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   MOBILE NAV OVERLAY
   -------------------------------------------------------------------------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--surface-page);
  --overlay-top-bg: var(--brand-sage);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition:
    opacity    var(--dur-base) var(--ease-out),
    transform  var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nav-overlay__top {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
  border-bottom: 1px solid rgba(38, 49, 42, 0.18);
}

/* The bar carries .shell, so bleed its green to the viewport edges rather
   than leaving off-white gutters where the header's band used to run. */
.nav-overlay__top::before {
  content: "";
  position: absolute;
  inset: 0;
  margin-inline: calc(var(--shell-pad) * -1);
  background: var(--overlay-top-bg, var(--brand-sage));
  z-index: -1;
}

.nav-overlay__body {
  overflow-y: auto;
  padding-block: var(--s-6) var(--s-8);
  -webkit-overflow-scrolling: touch;
}

.nav-overlay__list {
  display: grid;
  border-top: 1px solid var(--line-soft);
}

.nav-overlay__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.2rem + 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--ink-blue);
  text-decoration: none;
}

.nav-overlay__link .index-num {
  flex: none;
  min-width: 2.25rem;
}

.nav-overlay__link[aria-current="page"] { color: var(--ink-sage); }
.nav-overlay__link[aria-current="page"] .index-num { color: var(--ink-sage); }

.nav-overlay__foot {
  border-top: 1px solid var(--line-hairline);
  padding-block: var(--s-6);
  display: grid;
  gap: var(--s-5);
}

.nav-overlay__contact {
  display: grid;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-muted);
}

.nav-overlay__contact a { color: var(--ink-blue); text-decoration: none; }
.nav-overlay__contact a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.ld-footer {
  background: var(--surface-blue);
  color: rgba(255, 255, 255, 0.82);
  padding-block: var(--s-11) var(--s-9);
  margin-top: auto;
}

.ld-footer a { color: #fff; }

.ld-footer .brand__lockup { height: 3.25rem; }

.ld-footer__grid {
  display: grid;
  gap: var(--s-9);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid var(--line-on-dark);
}

@media (min-width: 48rem) {
  .ld-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68rem) {
  .ld-footer__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--s-8);
  }
}


.footer-coreg {
  display: block;
  font-size: var(--fs-micro);
  color: rgba(255, 255, 255, 0.66);
}

@media (min-width: 40rem) {
  .footer-coreg { display: inline; }
}

.footer-statement {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  line-height: 1.28;
  letter-spacing: var(--tracking-tight);
  color: #fff;
  max-width: 22ch;
  margin-top: var(--s-6);
}

.footer-col__title {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-pale-green);
  margin-bottom: var(--s-5);
}

.footer-list { display: grid; gap: var(--s-3); }

.footer-list a {
  display: inline-block;
  padding-block: var(--s-1);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }

.footer-contact {
  display: grid;
  gap: var(--s-4);
  font-size: var(--fs-small);
  font-style: normal;
  line-height: 1.55;
}

.footer-contact a {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-decoration: none;
  color: #fff;
  display: inline-block;
  padding-block: var(--s-1);
}

.footer-contact a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.footer-hours {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: rgba(255, 255, 255, 0.9);
}

.footer-hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

.footer-hours dt { color: rgba(255, 255, 255, 0.62); }
.footer-hours dd { margin: 0; color: #fff; }



/* Marketing asked for a white button with green text on the green bar. White
   on sage is only 2.48:1, which is under the 3:1 a UI boundary needs, so the
   button carries a deep-green rim (3.05:1 on sage) to define its edge. The
   label itself is 7.56:1 on white. */
.ld-header .btn--primary,
.nav-overlay__foot .btn--primary {
  background: #ffffff;
  color: var(--ink-sage);
  border: 1.5px solid var(--ink-sage);
}

/* The wider uppercase nav squeezes the header row, which was breaking the
   button onto three lines. */
.ld-header .btn--primary { white-space: nowrap; flex: none; }
.ld-header__inner { flex-wrap: nowrap; }

.ld-header .btn--primary:hover,
.nav-overlay__foot .btn--primary:hover {
  background: var(--surface-sage-tint);
  color: var(--ink-sage);
  border-color: var(--ink-strong);
}

/* ==========================================================================
   FOOTER STRIP — white band closing the page, answering the green strip that
   opens it. Legal wording in brand green (7.41:1 on white), crest at the far
   right beside the company number.
   ========================================================================== */
.footer-strip {
  background: #ffffff;
  border-top: 1px solid var(--line-hairline);
  padding-block: var(--s-6);
}

.footer-strip__inner {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}

@media (min-width: 48rem) {
  .footer-strip__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-8);
  }
}

.footer-strip__legal {
  display: grid;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ink-sage);
  max-width: var(--measure-wide);
}

.footer-strip__legal p { margin: 0; }

.footer-strip .footer-coreg { color: var(--ink-sage); opacity: 0.85; }

.footer-strip__crest {
  justify-self: start;
  display: flex;
  align-items: center;
}

@media (min-width: 48rem) {
  .footer-strip__crest { justify-self: end; }
}

.footer-strip__crest img {
  display: block;
  height: 4.5rem;
  width: auto;
}


/* Below 26rem the lockup and a worded Menu button cannot both fit. The word is
   hidden visually but kept in the accessibility tree, so the button is still
   announced as "Menu" / "Close" — that buys back ~45px for the logo. */
@media (max-width: 25.99rem) {
  .nav-toggle { padding-inline: var(--s-3); }
  .nav-toggle > span:not(.nav-toggle__bars) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}