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