:root{
    --navy:#3a2150; --navy-deep:#241033; --green:#4a8163; --green-dk:#2f6b4f;
    --gold:#f9d46b; --gold-lt:#fbebbc; --gold-deep:#8a5a0a; --cream:#f7f2e8; --paper:#ffffff;
    --ink:#2a1c33; --muted:#574a60; --line:#e7ded0;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:86px}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.18;letter-spacing:-.01em}
  a{color:inherit}

  /* NAV */
  /* Cream bar over the deep plum hero — the contrast is the point, not another dark tone. */
  nav{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid color-mix(in srgb,var(--navy) 16%,transparent);transition:box-shadow .25s ease}
  nav.scrolled{box-shadow:0 8px 26px rgba(36,16,51,.16)}
  nav .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}
  .brand{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:0;overflow:hidden}
  .brand img{height:86px;width:auto;display:block;mix-blend-mode:multiply;filter:saturate(1.3) contrast(1.12)}
  .brand span{font-family:var(--serif);font-size:29px;color:var(--navy-deep);letter-spacing:.02em;line-height:1;white-space:nowrap}
  .navright{display:flex;align-items:center;gap:18px;flex:none}
  .navlinks a{color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;opacity:.85}
  .navlinks a:hover{opacity:1;color:var(--navy-deep)}
  /* Flat yellow reads as mustard; a light-to-gold sheen reads as metal. */
  .btn{display:inline-block;background:linear-gradient(168deg,color-mix(in srgb,var(--gold) 45%,#fff) 0%,var(--gold) 62%,color-mix(in srgb,var(--gold) 90%,#b8862f) 100%);color:var(--navy-deep);text-decoration:none;font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:8px;border:1px solid color-mix(in srgb,var(--gold) 82%,#b8862f);transition:.15s}
  .btn:hover{background:linear-gradient(168deg,#fff 0%,var(--gold-lt) 70%,var(--gold) 100%);color:var(--navy-deep)}
  .btn.ghost{background:transparent;color:var(--gold-lt);border-color:color-mix(in srgb,var(--gold-lt) 50%,transparent)}
  .btn.ghost:hover{background:color-mix(in srgb,var(--gold-lt) 10%,transparent);color:#fff}

  /* MENU (hamburger at all sizes) */
  .menu-btn{display:block;background:none;border:0;padding:10px;margin:-10px -6px -10px 0;cursor:pointer;color:var(--navy-deep)}
  .menu-btn svg{display:block}
  .menu-btn .icon-close{display:none}
  nav.open .menu-btn .icon-open{display:none}
  nav.open .menu-btn .icon-close{display:block}
  .navlinks{display:none;position:absolute;top:100%;right:24px;flex-direction:column;align-items:stretch;gap:0;min-width:280px;background:var(--cream);border:1px solid color-mix(in srgb,var(--navy) 16%,transparent);border-top:none;border-radius:0 0 14px 14px;box-shadow:0 18px 30px rgba(36,16,51,.2);
    /* Eight items no longer fit a phone held sideways. Let the menu scroll rather
       than clip, or "Request a Pilot" becomes unreachable in landscape. */
    max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  nav.open .navlinks{display:flex}
  .navlinks a:not(.btn){padding:15px 24px;font-size:16px;opacity:1;border-top:1px solid color-mix(in srgb,var(--navy) 14%,transparent)}
  .navlinks a:not(.btn):first-child{border-top:none}
  .navlinks .btn{margin:14px 24px 20px;text-align:center}
  @media(max-width:860px){
    .navlinks{left:0;right:0;min-width:0;border-radius:0;border-left:none;border-right:none}
    .brand img{height:70px}
    .brand span{font-size:22px}
  }
  @media(max-width:640px){
    .nav-cta{display:none}
    nav .wrap{min-height:64px;gap:8px}
    .brand{gap:9px}
    .brand img{height:52px}
    .brand span{font-size:19px}
    html{scroll-padding-top:70px}
  }
  @media(max-width:400px){
    .brand img{height:44px}
    .brand span{font-size:16px}
    nav .wrap{min-height:58px}
  }
  @media(min-width:641px){.navlinks .btn{display:none}}

  /* HERO — the original plum gradient: lighter navy falling to navy-deep, with a warm
     gold glow. Flattening this to a single value is what made the plum look changed. */
  header.hero{background:radial-gradient(72% 62% at 78% 10%, color-mix(in srgb,var(--gold) 15%,transparent), transparent 62%),linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);color:#e8dff0;padding:30px 0 34px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}header.hero{padding:32px 0 36px}}
  .hero-tag{font-family:var(--sans);text-transform:uppercase;letter-spacing:.19em;font-size:11.5px;font-weight:700;color:var(--gold);margin:0 0 18px}
  header.hero h1{font-family:var(--serif);font-size:clamp(32px,4.1vw,44px);line-height:1.08;color:#fdf6ec;margin:0 0 15px;max-width:15ch;letter-spacing:-.022em}
  /* Families headline runs 15 percent under the shared hero size. The
     measure widens with it because ch scales with the font: at the shared
     15ch cap the smaller type would have sat in the same narrow tower, just
     smaller. Both classes matched so it outranks header.hero h1. */
  header.hero.hero-families h1{font-size:clamp(27px,3.5vw,37.5px);max-width:26ch}
  /* Landed between gold and cream after three passes: two steps up from
     gold and one back down. */
  header.hero p.sub b{color:#fdedc3;font-weight:600}
  header.hero p.sub{font-family:var(--sans);font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.6;color:#bdaacd;max-width:62ch;margin:0 0 20px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-family:var(--sans);font-size:12.5px;color:#9a89ab}
  .hero-trust span{display:flex;align-items:center;gap:8px}
  .hero-trust span::before{content:"";width:4px;height:4px;border-radius:50%;background:#6d5a7f;flex:none}
  .btn.ghost{background:transparent;color:var(--gold);border-color:var(--gold)}
  .btn.ghost:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold)}

  /* TAGLINE — a quiet breath between the hero and the positioning statement */
  .tagband{background:var(--cream);border-bottom:1px solid var(--line);padding:16px 0;text-align:center}
  .tagband p{margin:0;font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(17px,2.25vw,22.5px);color:var(--navy-deep);letter-spacing:.01em}

  /* HERO — resident care profile card */
  /* Warm frame: champagne ring, warm paper inside, so it reads as a keepsake not a dialog. */
  .callcard{background:#fdfaf4;color:var(--ink);border-radius:20px;padding:8px;
    box-shadow:0 32px 64px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent)}
  .callcard-in{border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);border-radius:13px;padding:16px}
  .cc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:11px}
  .cc-top b{font-family:var(--serif);font-size:19px;font-weight:600}
  .cc-top span{font-size:10.5px;color:var(--muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.11em;font-weight:700}
  .cc-block{padding:9px 0;border-top:1px solid color-mix(in srgb,var(--navy) 16%,transparent)}
  .cc-block .lbl{margin:0 0 10px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--navy)}
  .cc-block .desc{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
  .cc-scale{display:flex;gap:7px}
  .cc-scale i{flex:1;height:7px;border-radius:4px;background:color-mix(in srgb,var(--navy) 14%,transparent)}
  .cc-scale i.on{background:var(--navy)}
  .cc-opts{display:flex;gap:8px;flex-wrap:wrap}
  .cc-opts span{font-size:13px;padding:6px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--navy) 18%,transparent);color:var(--muted)}
  .cc-opts span.sel{background:color-mix(in srgb,var(--navy) 9%,transparent);border-color:color-mix(in srgb,var(--navy) 45%,transparent);color:var(--navy);font-weight:600}
  .cc-note{margin:12px 0 0;padding-top:11px;border-top:1px solid color-mix(in srgb,var(--navy) 16%,transparent);font-size:11.5px;color:var(--muted);text-align:center}

  /* STRIP */
  .strip{color:#eaf3ee;text-align:center;padding:18px 0 19px;border-top:1px solid color-mix(in srgb,var(--gold) 28%,transparent)}
  .strip p{margin:0;font-family:var(--serif);font-size:clamp(15.5px,2.05vw,20.5px);line-height:1.35}
  .strip b{color:var(--gold);font-weight:600}
  .strip .sub{margin:13px auto 0;max-width:58ch;font-size:clamp(14px,1.5vw,16.5px);line-height:1.5;color:#fff}

  /* SECTIONS */
  section{padding:26px 0}
  .eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;font-weight:700;color:var(--gold-deep)}
  section h2{font-size:clamp(19px,2.4vw,26px);margin:5px 0 7px;max-width:24ch}
  .lede{font-size:15.5px;color:var(--muted);max-width:64ch;margin:0 0 5px;line-height:1.55}
  .center{text-align:center}.center h2,.center .lede{margin-left:auto;margin-right:auto}

  .grid{display:grid;gap:12px;margin-top:15px}
  .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:820px){.g4{grid-template-columns:1fr}}
  /* Cards size to their own content instead of stretching to the tallest in the row. */
  .grid.tight{align-items:start}
  @media(max-width:820px){.g3,.g2{grid-template-columns:1fr}}
  .card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:15px;box-shadow:0 1px 3px rgba(20,30,30,.04)}
  .card .ic{width:31px;height:31px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;background:color-mix(in srgb,var(--green) 12%,transparent);margin-bottom:8px}
  .card h3{font-size:16px;margin:0 0 5px}
  /* Patent status sits on the individual capability, not over the whole section, so it
     stays accurate as further filings are decided. Add this tag to each one that is filed. */
  .pat{display:inline-block;vertical-align:middle;margin-left:7px;font-family:var(--sans);
    font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
    color:var(--gold-deep);border:1px solid color-mix(in srgb,var(--gold-deep) 42%,transparent);
    border-radius:999px;padding:3px 8px;white-space:nowrap}
  .card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}

  /* WHY band */
  /* BANDS — cream carries the page. Bold sage and plum are the anchors. Light plum and
     light sage appear here and there, at real saturation rather than as washes. */
  .b-cream{background:var(--cream)}
  .b-sage{background:var(--green-dk);color:#e6f0e9}
  .b-plum{background:linear-gradient(166deg,var(--navy) 0%,var(--navy-deep) 100%);color:#e9e0f0}
  .b-sage .eyebrow,.b-plum .eyebrow{color:var(--gold)}
  .b-sage h2,.b-sage h3,.b-plum h2,.b-plum h3{color:#fff}
  .b-sage .lede,.b-sage .story,.b-sage .closer,.b-sage .tribute .lede{color:#c9ddd0}
  .b-plum .lede,.b-plum .story,.b-plum .closer,.b-plum .tribute .lede{color:#c6b6d4}
  .b-sage .closer b,.b-plum .closer b{color:var(--gold-lt)}
  .b-sage .feat,.b-plum .feat{border-bottom-color:rgba(255,255,255,.18)}
  .b-sage .feat b,.b-plum .feat b{color:#fff}
  .b-sage .feat span{color:#c9ddd0}
  .b-plum .feat span{color:#c6b6d4}
  .b-sage .card,.b-plum .card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  .b-sage .card h3,.b-plum .card h3{color:#fff}
  .b-sage .card p{color:#c9ddd0}
  .b-plum .card p{color:#c6b6d4}
  .b-sage .mvcard,.b-plum .mvcard,.b-sage .trib,.b-plum .trib{border-color:rgba(255,255,255,.22)}
  .alt{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

  /* IMAGERY */
  .splitgrid{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:center}
  .splitgrid.flip{grid-template-columns:.92fr 1.08fr}
  .splitgrid.flip>div:first-child{order:2}
  .splitgrid.flip>div:last-child{order:1}
  @media(max-width:820px){.splitgrid.flip>div:first-child,.splitgrid.flip>div:last-child{order:0}}
  /* .flip must be named here too: .splitgrid.flip is two classes and beats a
     bare .splitgrid inside the media query, so without it the flipped
     sections stayed two columns on a phone. */
  @media(max-width:820px){.splitgrid,.splitgrid.flip{grid-template-columns:1fr;gap:28px}}
  /* Circular badge artwork sits on a solid field with a caption; clipping the container to a
     circle removes both, so no blend or mask is needed on any background colour. */
  .disc{position:relative;border-radius:50%;overflow:hidden;margin:0 auto;aspect-ratio:1;
    box-shadow:0 20px 48px rgba(0,0,0,.34),0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}
  .disc img{position:absolute;left:50%;transform:translate(-50%,-50%);max-width:none;display:block}
  .disc.doves{width:min(238px,63%)}
  /* The beacon badge is a circle on a navy field with a caption printed
     beneath it. The badge is 55.6% of the image width, centred at 46.8%
     down, so the image is scaled to 180% and pushed to 57.6% to land the
     badge centre on the disc centre. The printed caption falls outside
     the crop and is set in text below instead. */
  /* The About hero carries a short heading and a small badge, so the text
     column takes more of the row than the shared 1.05/.95 split allows and
     the heading is uncapped, to keep it on one line. */
  .hero-about .hero-grid{grid-template-columns:1.5fr .5fr}
  /* header.hero h1 is (0,1,2); a bare .hero-about h1 is (0,1,1) and loses to
     it, so both the 15ch cap and the 44px size survived. Matching the
     element and both classes takes it. */
  header.hero.hero-about h1{max-width:none;font-size:clamp(30px,3.4vw,38px)}
  /* Nudge the badge and its caption together, off the centre of their own
     column. Dropped on the single-column layout. */
  .hero-about .hero-grid > div:last-child{transform:translateX(-60px)}
  @media(max-width:900px){.hero-about .hero-grid{grid-template-columns:1fr}
    .hero-about .hero-grid > div:last-child{transform:none}}
  .disc.beacon{width:min(195px,92%)}
  .disc.beacon img{width:180%;top:57.6%}
  .beacon-cap{font-family:var(--serif);color:var(--gold-lt);text-align:center;font-size:15px;letter-spacing:.04em;margin:14px 0 0}
  /* Square crop of the constellation art — the framing mat around it falls away. */
  .disc.sq{border-radius:16px}
  .disc.constellation{width:min(180px,46%)}
  /* Back to the full-field original: the tight crop showed the art's own
     circular edge inside the disc ring. The small version is kept at
     archive/constellation-cropped.jpg. */
  .disc.constellation img{width:140%;top:51%}
  /* Cropped from the concept sheet to the mended-heart tile alone. */
  .scene{width:100%;display:block;border-radius:16px;
    box-shadow:0 22px 50px rgba(0,0,0,.34),0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent)}
  .disc.heart img{width:227%;left:100%;top:-5%}
  /* Cropped to Janet alone; object-position favours the left of the frame. */
  /* Twisted gold cord. Diagonal light/mid/dark bands read as the twist of a rope. */
  .ropetop{position:relative}
  .ropetop::before{content:"";position:absolute;top:-7px;left:0;right:0;height:14px;z-index:2;
    background:linear-gradient(90deg,var(--gold-lt),var(--gold) 26%,var(--gold-lt) 50%,var(--gold) 74%,var(--gold-lt));
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='14'%3E%3Cg fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'%3E%3Cpath d='M0 7C6 1 11 1 17 7S28 13 34 7'/%3E%3Cpath d='M0 7C6 13 11 13 17 7S28 1 34 7'/%3E%3C/g%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='14'%3E%3Cg fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'%3E%3Cpath d='M0 7C6 1 11 1 17 7S28 13 34 7'/%3E%3Cpath d='M0 7C6 13 11 13 17 7S28 1 34 7'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
    -webkit-mask-size:auto 14px;mask-size:auto 14px}

  /* Transparent PNG — needs no blend, mask or frame on any background. */
  .seal{width:min(67%,207px);display:block;margin:0 auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.22))}
  .photo{width:min(57%,259px);display:block;margin:0 auto;
    border-radius:18px;box-shadow:0 22px 50px rgba(0,0,0,.36),0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}
  .disc.doves img{width:115%;top:53%}
  /* The lockup is artwork on near-black. Screen blend drops most of it, clip-path cuts the
     baked-in tagline, and the radial mask feathers the edges so no card outline remains. */
  .givemark{display:block;width:min(300px,68%);margin:0 auto 2px;mix-blend-mode:screen;
    clip-path:inset(0 0 21% 0);
    filter:contrast(1.45) brightness(1.04);
    -webkit-mask-image:radial-gradient(ellipse 88% 84% at 50% 40%, #000 62%, transparent 94%);
    mask-image:radial-gradient(ellipse 88% 84% at 50% 40%, #000 62%, transparent 94%)}
  .story{font-family:var(--serif);font-size:clamp(14.5px,1.5vw,16px);line-height:1.55;color:var(--ink);max-width:66ch;margin:0 0 14px}
  /* The opening narration and its heading run smaller than the section
     defaults: it is the longest single paragraph on the site and at the
     shared size it filled the screen on its own. */
  #how h2{font-size:clamp(18px,2.05vw,23px)}

  /* Cream cards on the purple band. Without this the three operator cards
     are a translucent white over purple, which reads as purple on purple. */
  #facilities .card{background:var(--paper);border-color:var(--line)}
  #facilities .card h3{color:var(--ink)}
  #facilities .card p{color:var(--muted)}

  /* Same treatment in the how-it-is-built section, which is on the green
     band: without this the four cards are a translucent white over green. */
  #built .card{background:var(--paper);border-color:var(--line)}
  #built .card h3{color:var(--ink)}
  #built .card p{color:var(--muted)}
  /* The list below the cards goes white. The subhead is set in green-dk,
     which is the b-sage background colour exactly, so on this band it was
     invisible. */
  #built .lede{color:#fff}
  #built .subhead{color:#fff;font-size:18.5px}
  .caps{text-transform:uppercase;letter-spacing:.06em}
  #built .feat span{color:#fff}

  /* The three answers are the longest card copy on the page, so they sit a
     point below the shared card size. */
  /* 32 characters broke to two lines under the shared 24ch cap. */
  #questions h2{max-width:none}

  /* Proof, not promises: ten percent under the shared sizes. */
  #proof .eyebrow{font-size:10px;color:#754d08}
  #proof .proofnote{margin:6px auto 0;max-width:76ch;color:var(--muted);font-size:14px;text-wrap:pretty}
  #proof .proofnote b{color:var(--ink)}
  #questions .card p{font-size:13.5px}

  /* The note boxes: never-average under the facility offer, HIPAA under the
     feature list, coming-soon on the families page. One class so all three
     stay the same size as each other. */
  .notebox{margin-top:20px;padding:15px 19px;border:1px solid var(--line);border-radius:14px;background:var(--cream)}
  .notebox.paper{background:var(--paper)}
  .notebox.row{display:flex;gap:12px;align-items:flex-start}
  .notebox p{margin:0;color:var(--ink);font-size:14.5px;line-height:1.5}
  .notebox p span{color:var(--muted)}
  .notebox .ico{font-size:19px;line-height:1;flex:none}

  .closer{font-family:var(--serif);font-size:clamp(16px,1.9vw,19px);line-height:1.45;color:var(--ink);margin:16px 0 0;max-width:52ch}
  .closer b{color:var(--green-dk)}
  /* No heading in this block, so the note carries it. White rather than the
     muted sage a lede gets on this band, and its own top margin now that
     there is no h2 above it. Qualified with .b-sage so it outranks that
     rule rather than tying with it. */
  .b-sage .lede.famnote{color:#fff;margin:10px auto 0;max-width:62ch}
  /* The families photograph sits ten percent under its column, centred in
     the space that leaves. */
  #families .scene{width:85.5%;margin-left:auto;margin-right:auto}
  .why .big{font-family:var(--serif);font-size:clamp(13px,1.5vw,15px);line-height:1.6;text-wrap:pretty;max-width:66ch;color:var(--ink);margin:16px auto 6px}
  .why .big b{color:var(--gold-deep);font-weight:600}
  /* In the split the paragraph sits in its own column, so the auto margins
     that centred it full-width have to go. */
  /* Small heart at the left, text right. Square rather than another disc:
     there are already three discs across the site. */
  .why .splitgrid{grid-template-columns:170px 1fr;gap:30px;align-items:center}
  .why .splitgrid > div:not(.heartcrop){padding-left:5%}
  /* 67 characters at the shared 24ch cap breaks to three lines. Wide enough
     for two, not wide enough for one. */
  .why .splitgrid h2{max-width:40ch}

  /* Policy pages: privacy, terms, cancellation. They share the layout now,
     so they need the few elements their own stylesheets used to carry. A
     narrower measure than the marketing pages, because they are read rather
     than scanned. */
  .doc-hero{background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:#fff;padding:24px 0 28px}
  .doc-hero .wrap,.doc .wrap{max-width:800px}
  .doc-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.4vw,33px);color:#fdf6ec;margin:0;letter-spacing:-.015em}
  .doc{padding:30px 0 46px}
  .doc h2{font-family:var(--serif);font-weight:600;font-size:21px;margin:30px 0 7px;color:var(--ink)}
  .doc h3{font-family:var(--serif);font-weight:600;font-size:16.5px;margin:18px 0 4px;color:var(--ink)}
  .doc p,.doc li{font-size:15px;line-height:1.65;color:var(--ink)}
  .doc ul{padding-left:22px;margin:8px 0 14px}
  .doc li{margin-bottom:6px}
  .doc .meta{color:var(--muted);font-size:14px}
  .doc .pull{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold-deep);border-radius:10px;padding:13px 17px;margin:16px 0;font-size:15px}

  /* What we give back runs five percent under the shared sizes across every
     element in it. */
  .whatwedo .eyebrow{font-size:11px}
  .whatwedo h2{font-size:clamp(18px,2.3vw,24.5px);max-width:40ch}
  .whatwedo .lede{font-size:14.5px}
  .whatwedo .closer{font-size:clamp(15px,1.8vw,18px)}
  @media(max-width:820px){.why .splitgrid{grid-template-columns:1fr;gap:18px}
    .why .splitgrid > div:not(.heartcrop){padding-left:0}}
  /* heart.jpg is the tile alone: the heart plus its printed caption. The
     container holds the heart aspect and object-fit crops the caption away. */
  .heartcrop{overflow:hidden;aspect-ratio:380/353;width:min(170px,58%);margin:0}
  .heartcrop img{width:100%;height:100%;object-fit:cover;object-position:50% 7%;display:block}
  .why .splitgrid .big{margin-left:0;margin-right:0;max-width:72ch}
  /* The opening list steps in from the left so the two blocks stagger and
     the right of the column is not left empty. */
  .why .splitgrid .leadlist{margin-left:14%;max-width:none;margin-bottom:12px}
  @media(max-width:820px){.why .splitgrid .leadlist{margin-left:0}}

  /* FEATURES */
  .feat{display:flex;gap:11px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line)}
  .feat:last-child{border-bottom:none}
  .feat .dot{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green-dk);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;margin-top:2px}
  .feat b{display:block;font-size:14.5px;color:var(--ink)}
  .feat span{color:var(--muted);font-size:14.5px;line-height:1.5}
  .subhead{font-family:var(--serif);font-size:17px;color:var(--green-dk);margin:20px 0 0;font-weight:600}
  .subhead + .grid{margin-top:10px}

  /* MISSION & VISION */
  /* On the dark green band the mission cards and tribute photos read as light objects. */
  .mv .mvcard{border-color:rgba(255,255,255,.2)}
  .mv .trib{background:var(--paper);border-color:rgba(255,255,255,.22)}
  .mv .tribute .lede{color:#c9ddd0}
  .mvgrid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:22px}
  @media(max-width:820px){.mvgrid{grid-template-columns:1fr}}
  .mvcard{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold-deep);border-radius:12px;padding:19px}
  /* Quiet label: the statement below it is the line that should land, and when both
     were green the heading competed with it. */
  .mvcard h3{font-size:17.5px;margin:0 0 7px;color:var(--muted)}
  .mvcard p{margin:0 0 9px;color:#3a4a4d;font-size:14.5px;line-height:1.5}
  .mvcard p:last-child{margin-bottom:0}
  .mvcard p.statement{font-size:15.5px;line-height:1.35;font-weight:600;color:var(--green-dk);margin-bottom:9px}
  /* One line per card carries the emphasis, so the eye lands on the claim. */
  .mvcard .pop{color:var(--gold-deep);font-weight:600}

  /* Mission and vision runs ten percent below the shared sizes, every line of
     it. Scoped by id so the rules outrank the class-level defaults they are
     overriding rather than tying with them. */
  #mission .eyebrow{font-size:10.5px}
  #mission h2{font-size:clamp(17px,2.15vw,23.5px)}
  #mission .mvcard h3{font-size:15.5px;color:var(--gold-deep)}
  #mission .mvcard p.statement{font-size:14px;color:#234f3a}
  #mission .mvcard p{font-size:13px}
  /* The card headings take the deep gold of the left rule, and the two
     emphasised phrases sit a step lighter than it so they read as emphasis
     inside the paragraph rather than as another heading. */
  #mission .mvcard .pop{color:#b07614}

  /* VALUES */
  .valgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
  @media(max-width:820px){.valgrid{grid-template-columns:1fr}}
  .val{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px}
  .val h3{font-size:15px;margin:0 0 4px;color:var(--ink)}
  .val h3 .num{font-family:var(--sans);color:var(--gold-deep);font-weight:700;margin-right:8px}
  .val p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

  /* FACILITIES */
  .facilities{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

  /* GIVING */
  .giving{background:var(--green-dk);color:#eaf3ee;text-align:center}
  .giving h2{color:#fff}.giving .lede{color:#cfe2d6}
  .pledge .ph{width:17px;height:17px;flex:none;fill:var(--gold)}
  /* Beloved Hands is sized to land inside one screen. The mark was the bulk
     of it: 300px wide is about 173px tall on a 900x518 file. The paragraphs
     also run to a wider measure here, which costs nothing and saves lines. */
  #giving{padding:20px 0}
  #giving .givemark{width:min(196px,48%)}
  #giving h2{font-size:clamp(19px,2.2vw,23px)}
  #giving .lede{font-size:14.5px;max-width:78ch;margin-bottom:6px}
  #giving .pledge{font-size:14.5px;padding:8px 16px;margin-top:10px}

  .pledge{display:inline-flex;align-items:center;gap:11px;background:rgba(255,255,255,.07);border:1px solid color-mix(in srgb,var(--gold-lt) 40%,transparent);border-radius:999px;padding:9px 18px;margin-top:12px;font-family:var(--serif);font-size:15.5px;color:var(--gold-lt)}

  /* TRIBUTE */
  /* The memorial photographs sit on cream rather than white, so the cards
     read as paper against the plum instead of as cut-outs. */
  #tribute .trib{background:var(--cream)}
  .tribute{margin-top:24px;text-align:center}
  .tribute h3{font-size:clamp(17px,2vw,19px);margin:6px auto 7px;max-width:42ch}
  .tribute .lede{margin-left:auto;margin-right:auto}
  .tribgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:440px;margin:16px auto 0}
  @media(max-width:820px){.tribgrid{grid-template-columns:1fr;max-width:300px}}
  .trib{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px 11px 7px;text-align:center}
  /* Portrait frame, not square. All three source photos are taller than they are wide,
     so a 1:1 crop took the top of the head and the chin. */
  .trib img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;border-radius:9px;display:block}
  .trib figcaption{padding:9px 4px 4px}
  .trib figcaption b{display:block;font-family:var(--serif);font-weight:600;font-size:15.5px;color:var(--ink)}
  .trib figcaption span{font-size:12px;color:var(--muted)}

  /* TEAM */
  .team2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px auto 0}
  @media(max-width:760px){.team2{grid-template-columns:1fr}}
  .person{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:19px;text-align:center}
  .person .av{width:64px;height:64px;border-radius:50%;margin:0 auto 11px;display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:22px;color:#1a1206;font-weight:600;background:radial-gradient(circle at 50% 35%,var(--gold-lt),var(--gold))}
  .person h3{font-size:18px;margin:0}
  .person .role{color:var(--gold-deep);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;margin:3px 0 9px}
  .person p{color:var(--muted);font-size:13.5px;margin:0 0 9px;text-align:left}
  .person p:last-child{margin-bottom:0}

  /* CONTACT */
  .contact{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#eef3f2}
  .contact .split{display:grid;grid-template-columns:1fr 1fr;gap:46px}
  @media(max-width:820px){.contact .split{grid-template-columns:1fr}}
  /* The two notes under the submit button. On a phone the button goes full
     width and they centre under it; left-aligned under a label-width button
     they read as stranded. */
  .formnote{margin:14px 0 0;font-size:14.5px;color:#cfdad9}
  .formnote.fine{margin:7px 0 0;font-size:13.5px;color:#aebebe}
  @media(max-width:820px){
    form .btn{display:block;width:100%;text-align:center}
    .formnote{text-align:center}
  }
  .contact h2{color:#fff}.contact .lede{color:#c7d3d2}
  .contact a.mail{color:var(--gold-lt);font-weight:600;text-decoration:none}
  form label{display:block;font-size:13px;font-weight:600;color:#cdd8d7;margin:14px 0 5px}
  /* Cream fields on the plum panel — a translucent purple-on-purple field disappeared. */
  form input,form textarea{width:100%;background:var(--cream);border:1px solid color-mix(in srgb,var(--navy) 22%,transparent);border-radius:9px;padding:11px 13px;color:var(--ink);font-family:var(--sans);font-size:15px}
  form input::placeholder,form textarea::placeholder{color:#8b8290}
  form input:focus,form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 32%,transparent)}
  form button{margin-top:18px;width:100%;cursor:pointer}

  /* FOOTER */
  footer{background:var(--navy-deep);color:#a9bcbc;padding:15px 0;font-size:12.5px}
  /* Two text blocks and nothing else: links left, the notice right. The
     beacon mark and "A Beacon of Hope" were the tallest things in the band
     and set its height on their own. */
  footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;align-items:flex-start}
  footer .flinks{flex:0 1 auto;opacity:.85}
  footer .flinks a{color:inherit;white-space:nowrap}
  footer .small{flex:1 1 400px;opacity:.75;max-width:none;line-height:1.5}
  /* Royal Plum tweaks */
  .btn{border-radius:999px}.card{border-radius:18px}.mvcard,.val,.stat{border-radius:16px}