/* Citta Care — soft peach, frosted glass, bright orange.
   The ground is a warm peach wash with soft out-of-focus shapes behind it. Content sits on
   frosted glass panels with generous corner radii and wide, soft shadows. The brand orange
   stays sharp on the small things: buttons, rules, ticks, links. Nothing is hard-edged. */

:root {
  /* The whole page lives in orange. Four tints of it carry the paper, from the lightest
     warm cream to a proper peach, so a section can change colour without anything shouting. */
  --paper:       #FEF6EE;
  --paper-deep:  #FBE8D5;
  --paper-tint:  #F6D7B8;
  --paper-edge:  #F0C79E;
  --ink:         #2A2522;
  --ink-soft:    #5F564D;   /* darkened so it still clears AA on the deepest tint */
  --rule:        #EDC9A1;
  --orange:      #EE741C;   /* the brand orange: buttons, rules, marks */
  --orange-mid:  #F08A3C;
  --orange-deep: #D15E0C;
  --orange-ink:  #8A3A05;   /* orange dark enough to be read on paper */
  /* Large fields are never flooded with the brand orange: light text on it is 2.94:1
     and fails, and dark text on it goes muddy. The tints above carry the colour instead. */
  --field:       #B8440A;   /* the deepest orange, for rules and small marks only */
  --orange-warm: #FDF0E3;
  --plum:        #872C5D;
  --plum-deep:   #6B2049;
  --white:       #FFFFFF;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* corners and glass */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --glass:      rgba(255, 252, 249, .72);
  --glass-soft: rgba(255, 252, 249, .52);
  --glass-line: rgba(255, 255, 255, .75);

  /* wide and soft, warm rather than grey */
  --lift:   0 1px 2px rgba(146, 74, 24, .05), 0 6px 18px rgba(146, 74, 24, .07);
  --lift-2: 0 2px 6px rgba(146, 74, 24, .06), 0 16px 40px rgba(146, 74, 24, .10);
  --lift-3: 0 4px 10px rgba(146, 74, 24, .07), 0 30px 70px rgba(146, 74, 24, .14);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::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;
  /* the ground is peach, not off-white; the glass panels are what lighten the page */
  background-color: var(--paper-deep);
  background-image: linear-gradient(168deg, var(--paper-tint) 0%, var(--paper-deep) 46%, var(--paper) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Soft out-of-focus shapes sit behind everything, the way the reference does it:
   nothing readable, just warmth and depth under the glass. */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(38rem 30rem at 82% 4%,  rgba(238, 116, 28, .38), transparent 62%),
    radial-gradient(32rem 28rem at 6%  26%, rgba(240, 160, 86, .40), transparent 64%),
    radial-gradient(34rem 28rem at 94% 70%, rgba(238, 116, 28, .26), transparent 66%),
    radial-gradient(28rem 26rem at 22% 94%, rgba(240, 160, 86, .30), transparent 62%);
  filter: blur(10px);
}

/* ---------- browser surfaces, themed rather than left default ---------- */
::selection { background: var(--plum); color: #fff; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 2px; }
:where(a) { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: .22em; text-decoration-thickness: 1px; }
:where(a:hover) { text-decoration-color: var(--plum); }
html { scrollbar-color: var(--rule) var(--paper); caret-color: var(--plum); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--paper); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #cdbba3; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.25rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -.018em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.012em; }
h4 { font-size: 1.0625rem; letter-spacing: -.006em; }
p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; }
.lede { font-size: clamp(1.15rem, 1.9vw, 1.375rem); line-height: 1.5; color: inherit; }
.caption { font-size: .8125rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; letter-spacing: .005em; }
.tnum { font-variant-numeric: tabular-nums; }

/* Icons are inline type-sized objects. Without this an icon with no class rule
   expands to fill its container, which is how a map pin once ate a whole column. */
svg { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--plum); color: #fff; padding: .75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- shell: a top bar, the way a care provider's site is read ---------- */
.head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(254, 246, 238, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.head__in {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-inline: max(var(--gutter), (100% - 86rem) / 2);
  padding-block: .55rem;
}
.head__mark { flex: none; display: block; height: 5rem; }
.head__mark img { display: block; height: 100%; width: auto; }
.head__nav { flex: 1 1 auto; min-width: 0; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem clamp(.2rem, 1vw, .9rem); }
.menu a {
  display: block; position: relative;
  padding: .55rem .72rem; border-radius: var(--r-sm);
  font-size: .9375rem; font-weight: 550; line-height: 1.2;
  color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.menu a::after {
  content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .26rem; height: 2px;
  background: transparent; border-radius: 2px;
}
.menu a:hover { background: var(--paper-deep); }
.menu a:hover::after { background: var(--orange-mid); }
/* the current section is marked by weight and a rule, never by colour alone */
.menu a[aria-current="page"],
.menu .is-here > a { font-weight: 700; }
.menu a[aria-current="page"]::after,
.menu .is-here > a::after { background: var(--orange); }

.head__call {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .9375rem; font-weight: 650; color: var(--ink); text-decoration: none;
  padding: .55rem .95rem; border-radius: 99px; border: 1px solid var(--glass-line);
  background: var(--paper-deep);
}
.head__call:hover { border-color: var(--orange); }
.head__call svg { width: 1em; height: 1em; color: var(--orange-deep); }

/* a section's own pages, shown only while you are inside that section */
.subrow { background: var(--paper-deep); border-top: 1px solid var(--rule); }
.subrow__in { padding-inline: max(var(--gutter), (100% - 86rem) / 2); }
.subrow ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 clamp(.25rem, 1vw, 1rem); }
.subrow a {
  display: block; padding: .5rem .5rem; font-size: .875rem; color: var(--ink-soft);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.subrow a:hover { color: var(--ink); border-bottom-color: var(--paper-edge); }
.subrow a[aria-current="page"] { color: var(--ink); font-weight: 650; border-bottom-color: var(--orange); }
.subrow__all a { font-weight: 650; color: var(--ink); }

@media (max-width: 59.99rem) { .head { display: none; } }

/* ---------- mobile bar and drawer: no hover dependency anywhere ---------- */
.bar { display: none; }
/* mobile bar carries the colour as well */
@media (max-width: 59.99rem) {
  .bar {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    position: sticky; top: 0; z-index: 30;
    padding: .7rem var(--gutter);
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
            backdrop-filter: blur(18px) saturate(1.15);
    border-bottom: 3px solid var(--orange);
  }
  .bar img { height: 2.9rem; width: auto; display: block; }
  .bar__btn {
    display: inline-flex; align-items: center; gap: .45rem;
    font: inherit; font-size: .9375rem; font-weight: 600;
    background: var(--white); color: var(--ink);
    border: 1px solid var(--glass-line); border-radius: 99px;
    padding: .55rem .85rem; cursor: pointer; min-height: 44px;
  }
  .drawer {
    position: fixed; inset: 0; z-index: 40;
    background: var(--paper);
    padding: 1.25rem var(--gutter) 2rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .36s var(--ease);
  }
  .drawer[data-open] { transform: none; }
  .drawer .tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  .drawer .tabs a {
    display: block; position: relative;
    font-size: 1.0625rem; font-weight: 550; padding: .8rem 1rem .8rem 1.15rem; min-height: 44px;
    color: var(--ink); text-decoration: none; border-radius: var(--r-sm);
  }
  .drawer .tabs a::before {
    content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 3px;
    background: transparent; border-radius: 2px;
  }
  .drawer .tabs a:hover { background: var(--paper-deep); }
  .drawer .tabs a[aria-current="page"] { font-weight: 700; background: var(--paper-deep); }
  .drawer .tabs a[aria-current="page"]::before { background: var(--orange); }
  .drawer .tabs__sub { list-style: none; margin: 0 0 .25rem; padding: 0 0 0 1.15rem; }
  .drawer .tabs__sub a { font-size: .9375rem; font-weight: 400; color: var(--ink-soft); padding: .55rem 1rem; }
  .drawer .tabs__sub a[aria-current="page"] { color: var(--ink); }
  .drawer__close { position: absolute; top: 1rem; right: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

/* ---------- page body ---------- */
.page { padding: 0 0 5rem; }
.wrap { padding-inline: var(--gutter); max-width: 74rem; }
.wrap--wide { max-width: 86rem; }

/* The opening: a book cover, not a hero banner. */
.cover { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
/* The hero is the deepest tint, so it reads as a warm orange field without becoming a slab. */
.cover--orange {
  background-color: var(--paper-tint);
  background-image:
    radial-gradient(ellipse 90% 120% at 88% 0%, rgba(238, 116, 28, .22), transparent 68%),
    linear-gradient(170deg, var(--paper-edge) 0%, var(--paper-tint) 58%, var(--paper-deep) 100%);
  color: var(--ink);
  border-bottom: 3px solid var(--orange);
  padding-block: clamp(3.25rem, 7vw, 6rem);
  max-width: none;
  padding-inline: max(var(--gutter), (100% - 86rem) / 2);
}
.cover--orange:not(.cover--plate) {
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}

/* The hero is the deepest tint, so it reads as a warm orange field without becoming a slab. */
.cover--orange {
  background-color: var(--paper-tint);
  background-image:
    radial-gradient(ellipse 90% 120% at 88% 0%, rgba(238, 116, 28, .22), transparent 68%),
    linear-gradient(170deg, var(--paper-edge) 0%, var(--paper-tint) 58%, var(--paper-deep) 100%);
  color: var(--ink);
  border-bottom: 3px solid var(--orange);
  padding-block: clamp(3.25rem, 7vw, 6rem);
  max-width: none;
  padding-inline: max(var(--gutter), (100% - 86rem) / 2);
}
.cover--orange:not(.cover--plate) {
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}
.cover__kind {
  font-size: .8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--plum); margin: 0 0 1.1rem;
}
.cover h1 { max-width: 18ch; }
.cover .lede { margin-top: 1.4rem; max-width: 46ch; }
.cover--plate { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) { .cover--plate { grid-template-columns: 1.02fr .98fr; } }

/* ---------- the one action ---------- */
/* Dark ink on the brand orange, not white: white on #EE741C is 2.94:1 and fails AA,
   and muddying the orange to carry white text would lose the colour the client asked for.
   Ink on orange is 5.19:1 and keeps it bright. */
.act {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--orange); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 650; line-height: 1;
  padding: 1.05rem 1.75rem; border: 0; border-radius: 99px;
  text-decoration: none; cursor: pointer; min-height: 48px;
  box-shadow: 0 1px 2px rgba(138, 58, 5, .2), 0 10px 24px rgba(238, 116, 28, .22);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.act:hover, .act:focus-visible { background: #F7832E; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(138, 58, 5, .22), 0 14px 32px rgba(238, 116, 28, .28); }
.act:active { transform: translateY(0); }
.act svg { width: 1.1em; height: 1.1em; flex: none; }
.act__after { display: block; margin-top: .7rem; font-size: .875rem; color: var(--ink-soft); max-width: 42ch; }

/* a quiet second route, never orange */
.alt { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.alt:hover { border-color: var(--plum); }
.alt svg { width: 1em; height: 1em; }

/* ---------- sections ---------- */
.sheet { padding: clamp(2.5rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--rule); }
.sheet--deep { background: var(--paper-deep); border-top-color: var(--rule); }

/* A full orange field. Ink on #EE741C is 5.19:1, so the colour stays bright and the
   text stays legible; white on this orange is 2.94:1 and fails, so it is never used. */
.sheet--orange {
  background-color: var(--paper-tint);
  border-top-color: var(--paper-edge);
  color: var(--ink);
}
/* on an orange field the action inverts, so it still reads as the one thing to press */
.sheet__head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.sheet:not(.sheet--orange) .sheet__head h2 { color: var(--orange-ink); }
.sheet:not(.sheet--orange) .home h2 { color: var(--orange-ink); }
.sheet__head p { margin-top: .9rem; }

/* ---------- photographs, tipped in and breaking the column ---------- */
.plate { margin: 0; }
.plate img {
  display: block; width: 100%; height: auto;
  background: var(--white);
  padding: .5rem; border-radius: var(--r-lg);
  box-shadow: var(--lift-2);
}
.plate figcaption { margin-top: .75rem; }
.plate--bleed { margin-inline: calc(var(--gutter) * -0.5); }

.spread { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
@media (min-width: 55rem) {
  .spread { grid-template-columns: 1.05fr .95fr; }
  .spread--flip > :first-child { order: 2; }
  .spread--wide-plate { grid-template-columns: 1.15fr .85fr; }
}

/* the authored moment: a print being laid down */
.settle { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .settle { animation: settle .9s var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes settle {
    from { opacity: .55; transform: translateY(14px) rotate(-.35deg) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- the homes: a sequence of places, not a grid of tiles ---------- */
.homes { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4.5rem); }
.home { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 55rem) { .home { grid-template-columns: 1fr 1fr; align-items: start; } .home:nth-child(even) > .plate { order: 2; } }
.home__name { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.home__where { font-size: .9375rem; color: var(--ink-soft); }
.home__facts { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.home__facts li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; }
/* a home's name is a name, so it does not break across lines mid-way */
.home__facts a { text-decoration: none; font-weight: 650; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.home__facts a:hover { border-color: var(--plum); }
.home__facts .muted { border: 0; }
.home__facts svg { width: 1.05em; height: 1.05em; flex: none; margin-top: .28em; color: var(--orange); }
.home__line { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); font-size: .9375rem; }
.home__line b { font-weight: 650; }

/* ---------- people ---------- */
.people { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
@media (min-width: 46rem) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .people { grid-template-columns: repeat(3, 1fr); } }
.person img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%;
  background: var(--glass); padding: .45rem; border-radius: var(--r-lg); box-shadow: var(--lift-2);
}
.person h3 { margin-top: 1rem; }
.person__role { font-size: .875rem; color: var(--orange-ink); font-weight: 600; margin: .2rem 0 .7rem; }
.person p { font-size: .9375rem; }

/* someone real closes each section */
.signoff { display: flex; gap: 1.1rem; align-items: center; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.signoff img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; box-shadow: var(--lift); }
.signoff__who { font-size: .9375rem; }
.signoff__who b { display: block; font-family: var(--serif); font-size: 1.125rem; font-weight: 600; }
.signoff__who span { color: var(--ink-soft); }

/* ---------- quotes ---------- */
.quotes { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 55rem) { .quotes { grid-template-columns: repeat(2, 1fr); } }
.quote { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.quote p { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.45; }
.quote cite { display: block; margin-top: .9rem; font-style: normal; font-size: .875rem; color: var(--ink-soft); }
.quote cite b { display: block; color: var(--ink); font-style: normal; font-weight: 650; }

/* ---------- the index: every route named ---------- */
.index { border-top: 3px solid var(--orange); background: var(--paper-deep); padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem; }
.index__grid { display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 46rem) { .index__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .index__grid { grid-template-columns: repeat(4, 1fr); } }
.index h2 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 650; letter-spacing: .02em; margin-bottom: .9rem; color: var(--orange-ink); }
.index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.index a { font-size: .9375rem; color: var(--ink); text-decoration: none; }
.index a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.index__meta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; font-size: .8125rem; color: var(--ink-soft); }
.marks { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.marks img { height: 2.5rem; width: auto; opacity: .75; }

/* ---------- forms ---------- */
.form { max-width: 34rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .9375rem; font-weight: 600; margin-bottom: .35rem; }
.field .req { color: var(--plum); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: rgba(255, 255, 255, .78); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  padding: .7rem .8rem; min-height: 46px;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--plum); outline-offset: 1px; }
.field__help { display: block; margin-top: .35rem; font-size: .8125rem; color: var(--ink-soft); }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin-top: 1rem; font-size: .9375rem; }
.form__status[data-error] { color: #9A2214; font-weight: 600; }

/* ---------- small print ---------- */
.foot { padding: 1.75rem 0 0; font-size: .8125rem; color: var(--ink-soft); }
.foot a { color: var(--ink-soft); }

.stack > * + * { margin-top: var(--s, 1.25rem); }
.muted { color: var(--ink-soft); }
.hide { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* Which home a manager runs. Sits between the role and the biography so the
   answer to "who would I be dealing with?" is one line, not a paragraph. */
.person__home { margin-top: .3rem; font-size: .9375rem; }
.person__home a { font-weight: 600; }

/* ---------- orange through the detail, not just the fields ----------
   The brand orange earns its place on the small marks: the rule above a section heading,
   the edge of a tipped-in photograph, the ticks in a list, a link's underline. */
.sheet__head { position: relative; }
.sheet__head::before {
  content: ""; display: block; width: 3.5rem; height: 3px;
  background: var(--orange); border-radius: 99px; margin-bottom: 1.1rem;
}
.plate img { box-shadow: 0 0 0 1px var(--paper-edge), var(--lift-2); }
.cover--orange .plate img { box-shadow: 0 0 0 1px rgba(184, 68, 10, .25), var(--lift-2); }
.sheet--orange .home__facts svg,
.sheet--deep .home__facts svg { color: var(--orange-deep); }
.sheet--orange .home__line,
.sheet--deep .home__line { border-top-color: var(--paper-edge); }
.sheet--orange .quote,
.sheet--deep .quote { border-left-color: var(--orange); }
.sheet--orange .home__facts a,
.sheet--deep .home__facts a { border-bottom-color: var(--paper-edge); }

/* the drawer's phone link is a tap target like any other */
@media (max-width: 59.99rem) {
  .drawer .alt { min-height: 44px; align-items: center; font-size: 1.0625rem; }
}

/* ================= the soft surface =================
   Content rides on frosted panels over the peach ground: translucent, blurred behind,
   a hairline of white on the top edge and a wide soft shadow underneath. */

.page, .head, .index, .bar, .drawer { position: relative; z-index: 1; }

/* ---- tinted sections become floating panels rather than full-bleed bands ---- */
.sheet--deep,
.sheet--orange {
  border-top: 0;
  background: none;
  padding-block: clamp(1rem, 2vw, 1.75rem);
}
.sheet--deep > .wrap,
.sheet--orange > .wrap {
  border-radius: var(--r-xl);
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
  box-shadow: inset 0 1px 0 var(--glass-line), var(--lift-2);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
          backdrop-filter: blur(18px) saturate(1.1);
  /* the gutter has to come back inside the panel now that it is the panel's own padding */
  padding-inline: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 80rem; margin-inline: auto;
}
.sheet--deep > .wrap { background: var(--glass); }
.sheet--orange > .wrap { background: rgba(255, 238, 222, .62); }
.sheet { border-top: 0; }

/* ---- the hero is the same panel language, just bigger ---- */
.cover--orange {
  background-image: none;
  background-color: transparent;
  border-bottom: 0;
}
.cover--orange > *,
.cover--orange > .plate { position: relative; z-index: 1; }

/* ---- cards ---- */
.person,
.quote {
  background: var(--glass);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: inset 0 1px 0 var(--glass-line), var(--lift);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.quote { padding-left: clamp(1.25rem, 2.5vw, 1.75rem); border-left: 0; }
.quote::before {
  content: ""; display: block; width: 2.25rem; height: 3px;
  background: var(--orange); border-radius: 99px; margin-bottom: 1rem;
}
.person img { width: 100%; }

/* ---- photographs ---- */
.plate img {
  box-shadow: inset 0 1px 0 var(--glass-line), var(--lift-3);
  background: var(--glass);
}
.plate figcaption { padding-inline: .5rem; }

/* ---- the one action, softened ---- */
.act {
  box-shadow: 0 2px 6px rgba(209, 94, 12, .22), 0 14px 32px rgba(238, 116, 28, .26);
}
.act:hover, .act:focus-visible {
  box-shadow: 0 3px 8px rgba(209, 94, 12, .24), 0 20px 44px rgba(238, 116, 28, .32);
}

/* ---- the bar at the top floats rather than sits on a line ---- */
.head {
  background: var(--glass-soft);
  border-bottom: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
          backdrop-filter: blur(18px) saturate(1.15);
}
.subrow {
  background: rgba(255, 252, 249, .4);
  border-top: 1px solid var(--glass-line);
}

/* ---- the footer index is one last panel ---- */
.index {
  border-top: 0;
  background: none;
  padding-block: 0 2.5rem;
}
.index > .wrap {
  background: var(--glass);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-block: clamp(2.5rem, 5vw, 4rem) 2.5rem;
  padding-inline: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 80rem; margin-inline: auto;
  box-shadow: inset 0 1px 0 var(--glass-line), var(--lift-2);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}

/* ---- form fields ---- */
.field input, .field textarea, .field select { box-shadow: inset 0 1px 2px rgba(146, 74, 24, .04); }

@media (prefers-reduced-motion: no-preference) {
  .act { transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease); }
}

/* A card with its own padding does not also need the photograph in a mount:
   that reads as a frame inside a frame. The image fills the card's top instead. */
.person { padding: 0; overflow: hidden; }
/* Every staff photograph is a portrait (source ratios run 0.52 to 1.0), so a landscape
   crop cut the tops of heads off. A 4:5 frame is close to the source shape, and the focal
   point sits high because a face sits high in a portrait. */
.person img {
  background: none; padding: 0; border-radius: 0; box-shadow: none;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, center 22%);
}
.person h3 { margin-top: 1.1rem; }
.person h3, .person > p { padding-inline: clamp(1.1rem, 2.2vw, 1.5rem); }
.person > :last-child { padding-bottom: clamp(1.25rem, 2.4vw, 1.6rem); }

/* The welcome film sits in the same glass frame as a photograph. */
.plate--film video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #FBF6EF;
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--glass-line), var(--lift-3);
}
.plate--film { position: relative; }

/* These biographies run from three lines to twenty, which left the short cards mostly empty.
   Every card now shows the same amount and opens on request. The clamp is CSS only, so the
   full text is always in the page for search engines and for anyone without JavaScript;
   the button is revealed by script only on the cards that are actually truncated. */
/* the clamp goes on the paragraph: -webkit-line-clamp does not apply through a block child */
.person__bio p {
  margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8;
  overflow: hidden;
}
.person[data-open] .person__bio p { -webkit-line-clamp: unset; overflow: visible; }

.person__more {
  align-self: start;
  /* sits at the foot of the card, so the buttons line up across a row */
  margin-top: auto; padding-top: .75rem;
  font: inherit; font-size: .875rem; font-weight: 650;
  color: var(--orange-ink); background: none; border: 0;
  border-bottom: 1px solid var(--rule);
  padding: .3rem 0; cursor: pointer; min-height: 32px;
}
.person__more:hover { border-bottom-color: var(--orange); }
.person__more[hidden] { display: none; }

/* the card is a column so the button can sit under the text, and the cards match in height */
.person { display: flex; flex-direction: column; }
.person__bio, .person__more { padding-inline: clamp(1.1rem, 2.2vw, 1.5rem); }
.people { align-items: stretch; }

/* no JavaScript: show everything rather than a silently cut-off biography */
.no-js .person__bio p { -webkit-line-clamp: unset; overflow: visible; }

/* ---------- PRIDE ----------
   The initials are set large in the serif so they read straight down the page as the word
   PRIDE, which is the whole point of the acronym and was lost when they were the same size
   as the rest of the line. Done with ::first-letter rather than a separate element, so the
   text a screen reader announces is simply "Putting our people first", unbroken.
   #8A3A05 clears AA as normal text on every tint this list sits on, at any size. */
.pride { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .7rem; }
.pride li {
  font-size: .9375rem;
  line-height: 1.4;
  padding-left: 2.1rem;
  text-indent: -2.1rem;
}
.pride li::first-letter {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--orange-ink);
  letter-spacing: .5rem;
}

/* ---------- the mark ----------
   Emblem plus the name as live text. The supplied artwork is a stacked lockup whose wordmark
   renders about 8px tall at any sensible header height, which is illegible however cleanly it
   is cut, so the name is typeset instead. Both colours clear AA on every tint. */
.head__mark, .bar__mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }

/* The mark sits straight on the header, no white chip behind it. A chip was tried
   on 13 Oct and removed: white rounded containers in this header mean "control"
   (that is what the Menu button is), so putting the brand in one made it read as a
   button while its own wordmark sat on the peach beside it. The pill also clipped
   the mark, because a 99px radius on a near-square box draws a circle whose edge
   falls exactly where a circular logo is widest. */
.head__mark { height: auto; }
.head__mark img, .bar__mark img { display: block; height: 3.2rem; width: auto; }
.head__name {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  line-height: 1;
}
.head__name b { font-weight: 700; color: var(--orange-ink); }
@media (max-width: 26rem) { .head__name { font-size: .9375rem; letter-spacing: .07em; } }

/* a policy page is for reading, so the line length is held down */
.measure > p, .measure > h2 { max-width: var(--measure); }
.measure > h2 { margin-top: 2.25rem; }

.cover h1 .word { display: inline-block; will-change: transform, opacity; }

/* the play control the motion script adds while the film is circular */
.film-play {
  /* low in the circle, in the clear area: centred it covers the logo on the poster frame */
  position: absolute; left: 50%; top: 74%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--orange); color: var(--ink);
  box-shadow: 0 2px 6px rgba(209,94,12,.26), 0 14px 34px rgba(238,116,28,.3);
  display: grid; place-items: center; padding: 0;
  transition: background .2s var(--ease);
}
.film-play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }
.film-play:hover { background: #F7832E; }
.film-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* ---------- the five years ribbon ----------
   A strip above the header on every page. It sits before the sticky header in the document,
   so it scrolls away once and the header then pins to the top exactly as it did before.

   It belongs to the same paper ladder as the rest of the site: the deepest two tints, no new
   colour, and orange only on the ring round the numeral and under the link. Orange is never a
   field here for the same reason it is never a field anywhere on this site.

   Measured on --paper-edge: --ink 9.64:1, --orange-ink 4.97:1, --ink-soft 4.57:1, all AA.
   --orange itself is 1.87:1 there and is never used for text.

   .anni-off is set in the head by a visitor who has already closed it, before first paint. */
.anni-off .ribbon { display: none; }

/* The strip steps DOWN the paper ladder, so it reads as its own band against the page and
   against the glass header below it. The orange bloom behind the numeral is the same move the
   hero makes, at the same low alpha, which is what ties the two ends of the page together. */
.ribbon {
  position: relative;
  background-color: var(--paper-tint);
  background-image:
    radial-gradient(ellipse 20rem 140% at 4rem 50%, rgba(238, 116, 28, .17), transparent 70%),
    linear-gradient(90deg, var(--paper-tint) 0%, var(--paper-edge) 100%);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.ribbon__in {
  display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap;
  padding-inline: max(var(--gutter), (100% - 86rem) / 2);
  padding-block: .6rem;
}

/* The numeral, the same motif as the band below it and a tenth of the size. Drawn, so it is
   aria-hidden and the sentence beside it carries the meaning. */
.ribbon__mark {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border: 2px solid var(--orange); border-radius: 50%;
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-line);
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem; line-height: 1;
  color: var(--orange-ink);
}
/* It is a real <button> because it sets the celebration off, so it is keyboard reachable and
   announced rather than being a decoration that happens to respond to a mouse. It carries no
   information, so nothing is lost if a visitor never presses it. */
.ribbon__mark { transform-origin: 50% 50%; padding: 0; cursor: pointer; }
.ribbon__mark:hover { border-color: var(--orange-deep); }
.ribbon__mark:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }

/* ---------- the celebration: paper ----------
   The site's own palette plus white, in four shapes. Fixed and pointer-events:none, so a piece
   in flight can never take a click or add a scrollbar, and every layer removes itself. It sits
   above the opening moment (z 75 over 70) so the paper falls in front of the plum and carries
   on falling onto the page after the curtain has gone. */
.anni-confetti {
  position: fixed; inset: 0; z-index: 75;
  pointer-events: none; overflow: hidden;
}
.anni-confetti i {
  position: absolute; display: block;
  width: 10px; height: 14px; border-radius: 1.5px;
  box-shadow: 0 1px 3px rgba(60, 20, 10, .3);
  will-change: transform, opacity;
}
.anni-confetti .pc--square   { width: 9px;  height: 9px; }
.anni-confetti .pc--dot      { width: 8px;  height: 8px;  border-radius: 50%; }
.anni-confetti .pc--streamer { width: 5px;  height: 24px; border-radius: 3px; }

/* ---------- the celebration: the opening moment ----------
   The first page of a visit opens with the lights down. The head script decides, before first
   paint, by adding .anni-intro to <html>; without that class none of this exists on screen.

   Plum is the field here, deliberately. Orange is never a field anywhere on this site because
   text on it fails contrast; plum does not have that problem, and darkness is what makes a lit
   numeral and paper read as an event. The darkest stop is plum-deep taken further toward
   black, not a new hue. Measured on every stop of the ground: --paper is 7.70:1 at worst and
   10.18:1 where the words actually sit; --paper-edge is 5.25:1 at worst, on the plum bloom at
   the very bottom, and 6.93:1 behind the words. All AA.

   With no script the whole overlay fades itself out at 5.4s. The script adds .is-js the moment
   it takes over, which stands that failsafe down and lets it drive the timings instead. */
.intro { display: none; }
.anni-intro .intro {
  display: block;
  position: fixed; inset: 0; z-index: 70;
  animation: intro-failsafe .45s ease 5.4s forwards;
}
.intro.is-js { animation: none; }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }

.intro__ground {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 80% at 50% 115%, rgba(135, 44, 93, .9) 0%, rgba(135, 44, 93, 0) 62%),
    linear-gradient(180deg, #45122F 0%, #6B2049 58%, #561A3B 100%);
}

.intro__stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--gutter) clamp(3rem, 8vh, 5rem);
  text-align: center;
}

/* The numeral and its two rings. Sized from the smaller of the two viewport sides so it is
   the same presence on a phone held upright and a desktop. Nothing in here carries a CSS
   transform, because the script animates scale and position and the two would fight. */
.intro__emblem {
  position: relative;
  width: min(42vh, 64vw); aspect-ratio: 1;
  display: grid; place-items: center;
}
.intro__glow {
  position: absolute; inset: -55%; border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 116, 28, .5) 0%, rgba(238, 116, 28, .16) 34%, rgba(238, 116, 28, 0) 66%);
  pointer-events: none;
}
.intro__flash {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 246, 238, .95) 0%, rgba(254, 246, 238, 0) 68%);
  opacity: 0; pointer-events: none;
}
.intro__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__ring, .intro__ring2 { fill: none; stroke-linecap: round; }
.intro__ring  { stroke: var(--orange); stroke-width: 2.6; }
.intro__ring2 { stroke: var(--paper-edge); stroke-width: .7; opacity: .55; }
/* drawn clockwise from twelve o'clock, the way a hand would draw it */
.intro__rings circle { transform: rotate(-90deg); transform-origin: 50% 50%; }

.intro__five {
  position: relative;
  font-family: var(--serif); font-weight: 600;
  font-size: calc(min(42vh, 64vw) * .6); line-height: 1;
  margin-top: -.06em;
  color: var(--paper);
  text-shadow: 0 6px 40px rgba(238, 116, 28, .45);
}

.intro__head {
  margin: clamp(1.25rem, 3.2vh, 2.25rem) 0 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1.06; letter-spacing: -.012em;
  color: var(--paper);
  text-wrap: balance; max-width: 18ch;
}
.intro__w { display: inline-block; }
.intro__sub {
  margin: .8rem 0 0;
  font-family: var(--sans); font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.45;
  color: var(--paper-edge); max-width: 34ch;
  text-wrap: balance;          /* it was leaving "it." alone on a second line */
}

/* With no script, the words still arrive rather than sitting there from the first frame. The
   delay leaves the script time to take over first, so there is never a jump between the two. */
.anni-intro .intro:not(.is-js) .intro__stage > * {
  opacity: 0; animation: intro-in .7s ease .9s forwards;
}
@keyframes intro-in { to { opacity: 1; } }

.intro__skip {
  position: absolute;
  right: max(var(--gutter), 1rem);
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  color: var(--paper);
  background: rgba(254, 246, 238, .08);
  border: 1px solid rgba(254, 246, 238, .38); border-radius: 99px;
  padding: .55rem 1.15rem; min-height: 44px; min-width: 44px;
  cursor: pointer;
}
.intro__skip:hover { background: rgba(254, 246, 238, .18); }
.intro__skip:focus-visible { outline: 2px solid var(--paper-edge); outline-offset: 3px; }

.ribbon__line {
  margin: 0; flex: 0 1 auto;
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.3;
  color: var(--ink);
}

.ribbon__link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  color: var(--orange-ink); text-decoration: underline;
  text-decoration-color: var(--orange); text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  min-height: 44px;              /* the whole row is short, so the target is not */
}
.ribbon__link svg { width: 1em; height: 1em; transition: transform .25s ease; }
.ribbon__link:hover { color: var(--field); text-decoration-color: var(--field); }
.ribbon__link:hover svg { transform: translateX(3px); }

/* pushed to the end of the row, and still 44px of target on a phone */
.ribbon__close {
  margin-inline-start: auto;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--ink-soft); cursor: pointer;
}
.ribbon__close svg { width: 1.1rem; height: 1.1rem; }
.ribbon__close:hover { background: var(--glass); color: var(--ink); }

.ribbon__link:focus-visible, .ribbon__close:focus-visible {
  outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 6px;
}

@media (max-width: 34rem) {
  .ribbon__in { gap: .25rem .7rem; padding-block: .45rem; }
  .ribbon__line { font-size: 1rem; }
  .ribbon__mark { width: 1.85rem; height: 1.85rem; font-size: 1rem; }
  /* the link drops to its own line rather than squeezing the sentence */
  .ribbon__link { flex-basis: 100%; min-height: 38px; }
  .ribbon__close { position: absolute; top: .3rem; right: .4rem; }
}

/* ---------- the anniversary band ----------
   A celebration that still belongs to the rest of the page: the same paper tints, the same
   serif, no new colour. The numeral is a drawn element rather than a heading, so screen
   readers skip it and the h2 carries the meaning. White on #EE741C fails contrast, so the
   mark is an outline on paper, never a filled orange disc with light text on it. */
.anni {
  background:
    radial-gradient(120% 140% at 12% 0%, var(--paper-deep) 0%, var(--paper-tint) 55%, var(--paper-edge) 100%);
  border-top: 3px solid var(--orange);
  /* The ribbon links here from every other page, so the landing wants a little air above the
     orange rule rather than butting it against the top edge.
     NOTE: both headers declare position:sticky and are then overridden to position:relative by
     the `.page, .head, .index, .bar, .drawer` rule further down this file, so nothing is
     pinned and no header-height offset is needed. That override looks accidental and predates
     this work; if it is ever corrected, this has to become the header height instead. */
  scroll-margin-top: 1.25rem;
}
.anni__wrap {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 56rem) { .anni__wrap { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }

/* the numeral, drawn once and large */
.anni__mark {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; width: clamp(8rem, 22vw, 15rem);
  border: 3px solid var(--orange);
  border-radius: 50%;
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-line), var(--lift-2);
}
.anni__mark::after {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid var(--paper-edge); border-radius: 50%;
}
.anni__mark span {
  font-family: var(--serif);
  font-size: clamp(4.5rem, 13vw, 8.5rem);
  line-height: 1;
  font-weight: 600;
  color: var(--orange-ink);
  transform: translateY(-.03em);
}

.anni__kicker {
  font-family: var(--sans);
  font-size: .8125rem; font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: .6rem;
}
.anni h2 { max-width: 20ch; }
.anni__lede { max-width: 54ch; margin-top: .9rem; font-size: 1.0625rem; }

.anni__facts {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0;
  display: grid; gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--paper-edge);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (min-width: 34rem) { .anni__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .anni__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.anni__facts b {
  display: block;
  font-family: var(--serif); font-size: 1.375rem; font-weight: 600;
  color: var(--ink);
}
.anni__facts span {
  display: block; margin-top: .2rem;
  font-size: .9375rem; line-height: 1.45; color: var(--ink-soft);
}

.anni__thanks {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--serif); font-size: 1.125rem; font-style: italic;
  color: var(--orange-ink); max-width: 56ch;
}

@media (prefers-reduced-motion: no-preference) {
  .anni__mark { transition: transform .4s ease; }
}