/* ==========================================================================
   Bellsway Healthcare Solutions - Jubilee House
   Supported Accommodation for Young People Aged 16-25

   Navy #0F2537 . Gold #D4AF37 . Montserrat + Source Sans 3

   Typography follows the brand guidelines (slide 7): Montserrat for H1, H2,
   buttons and navigation. Open Sans was specified for body text and has been
   substituted for Source Sans 3 - same humanist, highly-readable character,
   better proportions, a true italic and better numerals.

   HOUSE RULE: no photograph is ever cropped. There is no object-fit:cover
   anywhere in this file. Every <img> renders at its natural aspect ratio;
   galleries use masonry columns so portrait and landscape frames can sit
   together without anything being cut off.

   SIGNATURE: the gold arc (.arc). A shallow cradle drawn from the open-hands
   and tree-canopy emblem in the brand mark. It appears at exactly three
   scales - under a section eyebrow, beneath each statistic, and holding the
   motto - and nowhere else.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --navy:       #0F2537;
  --navy-deep:  #0A1A27;
  --navy-lift:  #1C3A52;
  --gold:       #D4AF37;
  --gold-soft:  #E6CB78;
  --gold-ink:   #7D6114;   /* gold-toned text on light: bright gold is 2.1:1 on white */
  --mist:       #EDF3F8;
  --white:      #ffffff;

  --ink:        #12212E;
  --muted:      #566A78;
  --line:       #DCE5EC;

  /* Brand guidelines, slide 7: Montserrat for H1, H2 and buttons.
     Open Sans was specified for body and has been substituted for Source Sans 3
     - the same humanist, highly-readable character the guidelines ask for, but
     with properly drawn proportions, a true italic and better numerals. */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sp-1: .5rem;  --sp-2: 1rem;  --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;   --sp-6: 4rem;  --sp-7: 5.5rem;  --sp-8: 7rem;

  --r-sm: 6px;  --r-md: 12px;  --r-lg: 18px;  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(15,37,55,.06), 0 2px 8px rgba(15,37,55,.05);
  --sh-2: 0 4px 12px rgba(15,37,55,.08), 0 14px 34px rgba(15,37,55,.07);
  --sh-3: 0 14px 30px rgba(15,37,55,.13), 0 30px 66px rgba(15,37,55,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
  --wrap: 1240px;
  --nav-h: 86px;
}

/* ---------- 2. 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; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

/* No object-fit. An image is as wide as its box and as tall as its own ratio
   demands, which is what keeps every frame whole. */
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
p { margin: 0; }

/* Montserrat per the brand guidelines. Set at 600 rather than 700 and tracked
   in tightly: at display sizes Bold reads heavy and generic, whereas SemiBold
   with negative tracking reads tailored. The weight and spacing are doing the
   work that a display serif would otherwise do. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0;
  color: var(--navy);
  font-feature-settings: "kern" 1, "liga" 1;
}
h1 { letter-spacing: -.032em; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--navy); color: #fff; padding: .9rem 1.4rem;
  font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

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

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
@media (max-width: 640px) { .wrap { padding-inline: 1.15rem; } }

.section { padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-5); }
.section--flush { padding-top: 0; }
.section--mist  { background: var(--mist); }
.section--navy  { background: var(--navy); color: rgba(255,255,255,.86); }
.section--navy h2, .section--navy h3 { color: #fff; }
@media (max-width: 780px) { .section { padding-block: var(--sp-5); } }

.grid { display: grid; gap: 1.5rem; }
.grid > * { min-width: 0; }        /* stop unshrinkable content widening a track */
.g-1 { grid-template-columns: 1fr; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .g-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .g-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .g-3, .g-4, .g-6 { grid-template-columns: 1fr; } }

/* ---------- 4. SIGNATURE: the gold rule ----------
   A straight hairline. Three widths, used nowhere else: under a section
   eyebrow, beneath each statistic, and holding the motto. */
.arc {
  display: block;
  width: 52px; height: 0;
  border-bottom: 1.5px solid var(--gold);
  border-radius: 0;
  margin-top: .3rem;
}
.arc--wide { width: 210px; margin-top: .75rem; }
.arc--stat { width: 40px; margin: .6rem auto .5rem; }

/* Eyebrow: label, then the small arc beneath it. */
.eyebrow {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.05rem;
}
/* Every hero is navy, so the eyebrow there must be the bright gold. The
   darker --gold-ink is for light surfaces only; on navy it measured 2.68:1. */
.section--navy .eyebrow,
.hero .eyebrow,
.pane--navy .eyebrow,
.panel .eyebrow { color: var(--gold); }
.head--center .eyebrow { align-items: center; }

/* ---------- 5. Section heading ---------- */
.head { max-width: 62ch; margin-bottom: var(--sp-4); }
.head--center { margin-inline: auto; text-align: center; }
.head h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); margin-bottom: .8rem; }
.head p { color: var(--muted); font-size: 1.06rem; }
.section--navy .head p { color: rgba(255,255,255,.76); }
.h2--left { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 1.2rem; }

/* ---------- 6. Buttons ---------- */
/* Montserrat, per the guidelines' Buttons row. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .58rem;
  font-family: var(--font-display); font-weight: 600; font-size: .875rem;
  letter-spacing: .015em;
  padding: .9rem 1.65rem; min-height: 48px;
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold  { background: var(--gold); color: var(--navy); box-shadow: var(--sh-1); }
.btn--gold:hover { background: var(--gold-soft); box-shadow: var(--sh-2); }
.btn--navy  { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-lift); box-shadow: var(--sh-2); }
.btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.btn--ghost:hover { border-color: var(--gold); background: rgba(212,175,55,.14); }
.btn--outline { border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.pane--navy .btn--outline { border-color: rgba(255,255,255,.5); color: #fff; }
.pane--navy .btn--outline:hover { background: #fff; color: var(--navy); }

/* ---------- 7. Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 900;
  background: var(--navy);
  border-bottom: 1px solid rgba(212,175,55,.2);
  transition: box-shadow .3s var(--ease);
}
.hdr.is-stuck { box-shadow: 0 8px 28px rgba(10,26,39,.3); }
.hdr .wrap { max-width: 1440px; }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--nav-h); }

.logo { display: flex; align-items: center; gap: .78rem; flex: none; }
.logo__mark { width: 50px; height: 50px; flex: none; }
.logo__txt { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.22rem; letter-spacing: .13em; }
.logo__sub  { font-family: var(--font-display); font-weight: 500; color: var(--gold); font-size: .545rem; letter-spacing: .24em; margin-top: .38rem; }

/* Montserrat, per the guidelines' Buttons/navigation row. */
.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
  position: relative; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500;
  font-size: .8rem; letter-spacing: .005em; color: rgba(255,255,255,.87);
  padding: .8rem .52rem; border-radius: var(--r-sm);
  transition: color .25s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: .52rem; right: .52rem; bottom: .34rem;
  height: 2px; background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--gold); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.hdr__cta { flex: none; padding-inline: 1.3rem; }

.burger {
  display: none; width: 46px; height: 46px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-sm);
}
.burger span { display: block; position: relative; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: background .2s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: inline-flex; }
}

.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 890;
  background: var(--navy-deep); padding: 1.4rem 1.5rem 3rem; overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drawer.is-open { opacity: 1; transform: none; visibility: visible; }
.drawer a { display: block; font-family: var(--font-display); font-weight: 500; color: rgba(255,255,255,.9); font-size: 1rem; padding: .95rem .25rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.drawer a[aria-current="page"] { color: var(--gold); }
.drawer .btn { width: 100%; margin-top: 1.5rem; }
body.nav-open { overflow: hidden; }

/* ---------- 8. Hero ---------- */
.hero { background: var(--navy); color: rgba(255,255,255,.86); position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: auto -10% -55% auto;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.13), transparent 66%);
  pointer-events: none;
}
.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero--single .hero__in { grid-template-columns: 1fr; }
.hero__copy--wide { max-width: 74ch; }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.04; letter-spacing: -.022em; margin-bottom: 1rem; }
.hero__sub { font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 500; letter-spacing: -.012em; color: var(--gold); line-height: 1.38; margin-bottom: 1.2rem; max-width: 28ch; }
.hero--single .hero__sub { max-width: 42ch; }
.hero__lede { color: rgba(255,255,255,.82); font-size: 1.09rem; line-height: 1.72; max-width: 62ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* The photograph is shown whole. Its own ratio decides the height of this
   column; nothing is cropped to make the two columns match. */
.hero__figure { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); }
.hero__figure img { width: 100%; }

.hero--page .hero__in { padding-block: clamp(2.6rem, 5vw, 4rem); }
.hero--page h1 { font-size: clamp(2.05rem, 4.4vw, 3.1rem); }

@media (max-width: 1000px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__figure { max-width: 520px; margin-inline: auto; }
}

.note {
  display: flex; gap: .95rem; align-items: flex-start; margin-top: 1.8rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(212,175,55,.28);
  border-radius: var(--r-md); padding: 1.15rem 1.3rem; max-width: 54ch;
}
.note svg { width: 26px; height: 26px; color: var(--gold); flex: none; margin-top: .1rem; }
.note p { font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.9); }

/* ---------- 9. Motto lockup ---------- */
.motto { margin-top: 1.7rem; max-width: 46ch; }
.motto__t { font-family: var(--font-display); font-weight: 600; letter-spacing: -.028em; font-size: clamp(1.28rem, 2.6vw, 1.75rem); line-height: 1.26; color: #fff; }
.motto__t em { font-style: italic; font-weight: 600; color: var(--gold); }
.motto .arc--wide { margin-top: .6rem; }
.motto__sub { margin-top: .9rem; font-size: 1rem; color: rgba(255,255,255,.78); }
.motto--on-navy { margin-top: 1.3rem; }

/* ---------- 10. Rail of chips over the hero ---------- */
.rail {
  position: relative; z-index: 5;
  margin-top: -2.6rem; margin-bottom: var(--sp-5);
  gap: 0;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden;
}
.rail--mist { background: var(--mist); }
.rail .chip { border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
.rail .chip:last-child { border-right: 0; }
.rail .chip:hover { transform: none; box-shadow: none; background: rgba(212,175,55,.06); }
@media (max-width: 1100px) { .rail .chip:nth-child(3n) { border-right: 0; } }
@media (max-width: 560px)  { .rail { margin-top: -1.4rem; } .rail .chip { border-right: 0; border-bottom: 1px solid var(--line); } .rail .chip:last-child { border-bottom: 0; } }

/* ---------- 11. Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.7rem; height: 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: rgba(212,175,55,.55); }
.card__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--mist); color: var(--navy); margin-bottom: 1.1rem; transition: background .35s var(--ease), color .35s var(--ease); }
.card__ico svg { width: 26px; height: 26px; }
.card:hover .card__ico { background: var(--navy); color: var(--gold); }
.card h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .95rem; line-height: 1.62; }

.section--navy .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section--navy .card p { color: rgba(255,255,255,.76); }
.section--navy .card__ico { background: rgba(212,175,55,.15); color: var(--gold); }

/* Chip: compact, centred, icon over label */
.chip {
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
  text-align: center; padding: 1.6rem 1.05rem; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.chip:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.chip__ico { display: grid; place-items: center; width: 42px; height: 42px; color: var(--navy); }
.chip__ico svg { width: 30px; height: 30px; }
.chip h3 { font-family: var(--font-display); font-weight: 600; font-size: .845rem; line-height: 1.38; letter-spacing: -.008em; }
.chip p { font-size: .855rem; color: var(--muted); line-height: 1.58; }
.section--navy .chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section--navy .chip h3 { color: #fff; }
.section--navy .chip p { color: rgba(255,255,255,.72); }
.section--navy .chip__ico { color: var(--gold); }

/* Disc: the circular value buttons */
.disc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; }
.disc__ico {
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); color: var(--navy);
  box-shadow: var(--sh-1);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.disc__ico svg { width: 30px; height: 30px; }
.disc:hover .disc__ico { background: var(--navy); color: var(--gold); transform: translateY(-3px); }
.disc h3 { font-family: var(--font-display); font-weight: 600; font-size: .93rem; }
.disc p { font-size: .885rem; color: var(--muted); line-height: 1.6; max-width: 30ch; }

/* Deep card: icon, heading, bullet list */
.deep { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.7rem; height: 100%; transition: box-shadow .35s var(--ease), border-color .35s var(--ease); }
.deep:hover { box-shadow: var(--sh-2); border-color: rgba(212,175,55,.5); }
.deep__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: var(--gold); margin-bottom: 1rem; }
.deep__ico svg { width: 24px; height: 24px; }
.deep h3 { font-size: 1.08rem; margin-bottom: .8rem; }

.dots li { position: relative; padding-left: 1.25rem; margin-bottom: .42rem; font-size: .92rem; color: var(--muted); line-height: 1.55; }
.dots li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- 12. Statistics bar ---------- */
.stats { background: var(--navy); color: #fff; }
.stats__in { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); padding-block: 2.6rem; }
.stat { text-align: center; padding-inline: 1rem; border-right: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; align-items: center; }
.stat:last-child { border-right: 0; }
.stat__ico { color: var(--gold); margin-bottom: .55rem; }
.stat__ico svg { width: 30px; height: 30px; }
.stat__v { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; font-size: clamp(1.55rem, 3.3vw, 2.25rem); line-height: 1.05; color: var(--gold); font-variant-numeric: tabular-nums; }
.stat__l { font-family: var(--font-display); font-weight: 500; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); }
@media (max-width: 900px) {
  .stats__in { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 460px) { .stats__in { grid-template-columns: 1fr; } .stat { border-right: 0; } }

/* ---------- 13. Ticked lists ---------- */
.ticks { gap: .3rem 1.5rem; }
.ticks li { display: flex; align-items: flex-start; gap: .65rem; font-size: .95rem; color: var(--muted); line-height: 1.55; padding-block: .34rem; }
.ticks li svg { width: 17px; height: 17px; flex: none; margin-top: .28rem; color: var(--gold); stroke-width: 2.6; }
.pane--navy .ticks li, .section--navy .ticks li { color: rgba(255,255,255,.84); }

/* ---------- 14. Band (photo + copy) ---------- */
.band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.band__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.band__media img { width: 100%; }
.band .btn { margin-top: 1.4rem; }
@media (max-width: 900px) { .band { grid-template-columns: 1fr; } }

/* ---------- 15. Masonry gallery ----------
   CSS columns, not grid. A fixed-ratio grid would force every photograph into
   the same box and crop the difference away; columns let each frame keep its
   own height so the whole picture survives. */
.masonry { columns: 3; column-gap: 1.4rem; }
.masonry--4 { columns: 3; }
@media (max-width: 980px) { .masonry, .masonry--4 { columns: 2; } }
@media (max-width: 620px) { .masonry, .masonry--4 { columns: 1; } }

.shot {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 1.4rem;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--mist); border: 1px solid var(--line);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.shot:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.shot img { width: 100%; }
.shot figcaption {
  padding: .85rem 1rem;
  font-family: var(--font-body); font-weight: 600; font-size: .875rem;
  color: var(--navy); background: #fff; border-top: 1px solid var(--line);
}

.note-line {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-top: 1.6rem; font-size: .92rem; color: var(--muted); line-height: 1.6;
}
.note-line svg { width: 20px; height: 20px; flex: none; margin-top: .22rem; color: var(--gold-ink); }

/* ---------- 16. Quote ---------- */
.quote { max-width: 60ch; margin-inline: auto; text-align: center; }
.quote p { font-family: var(--font-display); font-weight: 600; letter-spacing: -.025em; font-size: clamp(1.25rem, 2.7vw, 1.75rem); line-height: 1.32; color: var(--navy); }
.quote footer { margin-top: 1.1rem; font-size: 1.02rem; color: var(--muted); line-height: 1.68; }
.quote .arc--wide { margin: 1.5rem auto 0; }

/* ---------- 17. Panels and panes ---------- */
.panel { background: var(--navy); color: rgba(255,255,255,.86); border-radius: var(--r-lg); padding: clamp(1.7rem, 3.4vw, 2.6rem); position: relative; overflow: hidden; }
.panel--alt { background: linear-gradient(140deg, var(--navy-lift), var(--navy)); }
.panel h2 { color: #fff; font-size: 1.55rem; margin-bottom: .8rem; }
.panel__ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(212,175,55,.16); color: var(--gold); margin-bottom: 1.1rem; }
.panel__ico svg { width: 25px; height: 25px; }

.pane { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 3.2vw, 2.3rem); position: relative; }
/* height:100% only when the pane IS the grid cell. Applied unconditionally it
   resolves against the whole column, so two panes stacked in one cell each
   take the full height and the second runs down into the footer. */
.grid > .pane { height: 100%; }
.pane + .pane { margin-top: 1.5rem; }
.pane--tight { padding: clamp(1.4rem, 2.6vw, 1.9rem); }
.pane--navy { background: var(--navy); color: rgba(255,255,255,.86); border-color: transparent; }
.pane--navy h2 { color: #fff; }
.pane h2 { font-size: 1.4rem; margin-bottom: .8rem; }
.pane__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mist); color: var(--navy); margin-bottom: 1.05rem; }
.pane--navy .pane__ico { background: rgba(212,175,55,.16); color: var(--gold); }
.pane__ico svg { width: 26px; height: 26px; }
.pane__lede { color: var(--muted); margin-bottom: 1rem; }
.pane--navy .pane__lede { color: rgba(255,255,255,.78); }
.pane__foot { margin-top: 1.1rem; font-size: .88rem; color: var(--muted); }
.pane--navy .pane__foot { color: rgba(255,255,255,.62); }
.pane__big { margin: .7rem 0 .5rem; }
.pane__big a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: 1.62rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.pane__big a:hover { text-decoration: underline; }
.pane__seal { display: grid; place-items: center; margin-top: 1.2rem; color: var(--gold); }
.pane__seal svg { width: 34px; height: 34px; }
.pane .btn { margin-top: 1.2rem; }

/* ---------- 18. Full-width banner ---------- */
.banner {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: start;
  background: var(--navy); color: rgba(255,255,255,.86);
  border-left: 4px solid var(--gold); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
}
.banner h2 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: .7rem; }
.banner__ico { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--gold); color: var(--navy); flex: none; }
.banner__ico svg { width: 30px; height: 30px; }
.banner__cta { margin-top: 1.2rem; }
.banner--centred { text-align: left; }
@media (max-width: 640px) { .banner { grid-template-columns: 1fr; } }

/* ---------- 19. Creed banner (staff training) ---------- */
.creed { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--navy); border-radius: var(--r-lg); padding: clamp(1.7rem, 3.6vw, 2.6rem); }
.creed__side { display: flex; align-items: center; gap: 1.2rem; }
.creed__side--quote { border-left: 1px solid rgba(255,255,255,.18); padding-left: clamp(1.5rem, 4vw, 3rem); align-items: flex-start; }
.creed__ico { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: var(--r-md); background: rgba(212,175,55,.16); color: var(--gold); }
.creed__ico svg { width: 32px; height: 32px; }
.creed__t { font-family: var(--font-display); font-weight: 600; letter-spacing: -.022em; font-size: clamp(1.1rem, 2.2vw, 1.42rem); line-height: 1.28; color: #fff; }
.creed__mark { font-family: var(--font-display); font-weight: 700; font-size: 2.8rem; line-height: .82; color: var(--gold); flex: none; }
.creed__side--quote p { color: rgba(255,255,255,.86); font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 800px) {
  .creed { grid-template-columns: 1fr; }
  .creed__side--quote { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.6rem; }
}

/* ---------- 20. Numbered steps ----------
   Numbered because a referral genuinely is a sequence: step 3 cannot happen
   before step 2. */
.steps { counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.6rem; height: 100%; }
.step__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin-bottom: .95rem; }
.step h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.step p { color: var(--muted); font-size: .93rem; line-height: 1.6; }

/* ---------- 21. Info cards (contact) ---------- */
.info { border-radius: var(--r-md); padding: 1.7rem; text-align: center; background: var(--mist); border: 1px solid var(--line); }
.grid > .info { height: 100%; }
.info--navy { background: var(--navy); border-color: transparent; color: rgba(255,255,255,.85); }
.info__ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--gold); color: var(--navy); margin: 0 auto 1rem; }
.info__ico svg { width: 26px; height: 26px; }
.info h3 { font-size: 1.15rem; margin-bottom: .55rem; }
.info--navy h3 { color: var(--gold); }
.info p { font-size: .93rem; line-height: 1.62; color: var(--muted); }
.info--navy p { color: rgba(255,255,255,.82); }
.info__foot { margin-top: .55rem; font-weight: 600; }
.info__big { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: .6rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -.018em; font-size: 1.22rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.info--navy .info__big { color: var(--gold); }
.info__big:hover { text-decoration: underline; }
.info__big--mail { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; font-size: .95rem; word-break: normal; overflow-wrap: break-word; }

/* ---------- 22. Map ---------- */
.mapwrap { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--mist); }
.mapwrap__frame { display: block; width: 100%; height: 420px; border: 0; }
.mapwrap__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding: 1.05rem 1.3rem; background: #fff; border-top: 1px solid var(--line); }
.mapwrap__bar p { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .94rem; color: var(--navy); }
.mapwrap__bar svg { width: 18px; height: 18px; flex: none; color: var(--gold-ink); }
@media (max-width: 700px) { .mapwrap__frame { height: 320px; } .mapwrap__bar { flex-direction: column; align-items: flex-start; } .mapwrap__bar .btn { width: 100%; } }

/* ---------- 23. Form ---------- */
.form { display: grid; gap: .9rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .765rem; letter-spacing: .01em; color: var(--navy); margin-bottom: .42rem; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .78rem .95rem; min-height: 48px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.2); }
.field small { display: block; color: var(--muted); font-size: .8rem; margin-top: .3rem; }
.req { color: #B3261E; }
.form__status { background: var(--mist); border-left: 3px solid var(--gold); border-radius: var(--r-sm); padding: .9rem 1rem; font-size: .92rem; }
.field-error { display: block; color: #B3261E; font-size: .82rem; margin-top: .3rem; }

/* ---------- 24. CTA strip ---------- */
.cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.7rem; flex-wrap: wrap;
  background: var(--mist); border: 1px solid rgba(212,175,55,.35); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3.4vw, 2.3rem);
}
.cta h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: .35rem; }
.cta p { color: var(--muted); font-size: .98rem; }
@media (max-width: 760px) { .cta { flex-direction: column; align-items: flex-start; } .cta .btn { width: 100%; } }

/* ---------- 25. Policy gate ---------- */
.gate__lock {
  max-width: 560px; margin-inline: auto; text-align: center;
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.9rem, 4vw, 3rem);
}
.gate__ico { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--navy); color: var(--gold); margin: 0 auto 1.2rem; }
.gate__ico svg { width: 30px; height: 30px; }
.gate__lock h2 { font-size: 1.55rem; margin-bottom: .7rem; }
.gate__lock > p { color: var(--muted); font-size: .98rem; }
.gate__form { display: grid; gap: .85rem; margin-top: 1.6rem; text-align: left; }
.gate__form .btn { width: 100%; }
.gate__msg { margin-top: 1rem; font-size: .92rem; font-weight: 600; min-height: 1.4em; }
.gate__msg.is-bad { color: #B3261E; }
.gate__msg.is-good { color: #1B6B3A; }
.gate__help { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; font-size: .88rem; color: var(--muted); }
.gate__help svg { width: 17px; height: 17px; color: var(--gold-ink); }
/* Inline in a sentence, but still a real 44px target. */
.gate__help a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-weight: 600; text-decoration: underline; }

.gate__open { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.9rem; }
.gate__open h2 { font-size: 1.5rem; }
.gate__open p { color: var(--muted); font-size: .95rem; }
.gate__open .btn { margin-left: auto; }
.gate__ico--open { width: 54px; height: 54px; margin: 0; background: var(--gold); color: var(--navy); }
.gate__ico--open svg { width: 25px; height: 25px; }

.polgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 1024px) { .polgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .polgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .polgrid { grid-template-columns: 1fr; } }

.pol {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.35rem 1.25rem;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pol:hover { box-shadow: var(--sh-2); border-color: rgba(212,175,55,.5); transform: translateY(-2px); }
.pol.is-pending { background: var(--mist); border-style: dashed; }
.pol.is-pending:hover { box-shadow: none; transform: none; border-color: var(--line); }
.pol__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--mist); color: var(--navy); }
.pol.is-pending .pol__ico { background: #E2EAF1; color: var(--muted); }
.pol__ico svg { width: 21px; height: 21px; }
.pol h3 { font-family: var(--font-display); font-weight: 600; font-size: .925rem; line-height: 1.38; }
.pol p { font-size: .8rem; color: var(--muted); }
.pol__dl { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-top: auto; padding: .5rem .9rem; border: 1.5px solid var(--navy); border-radius: var(--r-sm); font-family: var(--font-display); font-weight: 600; font-size: .78rem; color: var(--navy); transition: background .25s var(--ease), color .25s var(--ease); }
.pol__dl svg { width: 16px; height: 16px; }
.pol__dl:hover { background: var(--navy); color: #fff; }
.pol__pending { margin-top: auto; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font-display); font-size: .655rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }

/* ---------- 26. Footer ---------- */
.ftr { background: var(--navy-deep); color: rgba(255,255,255,.72); padding-top: var(--sp-6); }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: 2.4rem; padding-bottom: var(--sp-5); }
@media (max-width: 980px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__grid > :first-child, .ftr__grid > :last-child { grid-column: 1 / -1; } }
.ftr__h { font-family: var(--font-display); font-weight: 600; font-size: .715rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.ftr a { color: rgba(255,255,255,.72); font-size: .92rem; transition: color .25s var(--ease); }
.ftr a:hover { color: var(--gold); }
.ftr li a { display: inline-flex; align-items: center; min-height: 44px; }
.ftr__blurb { font-size: .92rem; line-height: 1.7; max-width: 36ch; margin-top: 1rem; }
.ftr__contact li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; line-height: 1.6; padding-block: .2rem; }
.ftr__contact svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: .68rem; }
.ftr__contact li a { word-break: normal; overflow-wrap: break-word; }
.ftr__badge { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; background: rgba(255,255,255,.07); border: 1px solid rgba(212,175,55,.3); border-radius: var(--r-sm); padding: .5rem .8rem; font-size: .73rem; font-weight: 600; letter-spacing: .06em; color: var(--gold); }
.ftr__badge svg { width: 15px; height: 15px; }
.ftr__soc { display: flex; gap: .6rem; margin-top: 1.3rem; }
.soc { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--gold); transition: background .25s var(--ease), transform .25s var(--ease); }
.soc svg { width: 19px; height: 19px; }
.soc:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); }

.ftr__motto { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.9rem; text-align: center; }
.ftr__motto .motto__t { font-size: clamp(1.15rem, 2.4vw, 1.45rem); }
.ftr__motto .arc--wide { margin: .6rem auto 0; }
.ftr__base { padding-block: 1.7rem; font-size: .84rem; text-align: center; color: rgba(255,255,255,.6); }

/* ---------- 27. Motion ----------
   Reveal styles are gated on .js, set by an inline script in <head>. If
   JavaScript never runs the page renders fully visible rather than blank. */
.js [data-reveal], .js [data-seq] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in, .js [data-seq].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal], .js [data-seq] { opacity: 1 !important; transform: none !important; }
  .btn:hover, .card:hover, .chip:hover, .shot:hover, .pol:hover, .disc:hover .disc__ico { transform: none !important; }
}

/* ---------- 28. Print ---------- */
@media print {
  .hdr, .drawer, .cta, .btn, .mapwrap__bar, .gate__lock { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding-block: 1rem; }
  .masonry { columns: 2; }
}