:root{
    /* ---- TYPEFACE ---------------------------------------------------
       One place to change the type for the whole site.
       Sans alternatives reviewed: "Libre Franklin", "Public Sans",
       "Source Sans 3", "Archivo".
       If you switch, update the Google Fonts <link> in each HTML file too. */
    --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
    --font-body:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

    --navy:#10305B;
    --navy-deep:#0E2B52;
    --green:#4B6E2C;
    --green-band:#4C6B2B;
    --green-bright:#7CAB37;
    --ink:#243447;
    --rule:rgba(16,48,91,.28);
    --hero-h:clamp(560px, 78vh, 760px);
    /* Flag prominence: 0 = no flag, 1 = full strength */
    --flag-strength:.70;
    --pad:clamp(18px, 3.2vw, 44px);
    /* Content never stretches wider than this on large monitors */
    --maxw:1340px;
    /* Prose line length. Lower = narrower, easier to read. */
    /* Width of the body-text column on interior pages, as a share of the
       content area. 69% lines the right edge up with the left edge of the
       header portrait. Applied once on .layout - children are 100% of it. */
    --measure:69%;
    --gutter:max(var(--pad), calc((100% - var(--maxw)) / 2));
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:#fff;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  .skip{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--navy);color:#fff;padding:12px 18px;font-weight:700;
  }
  .skip:focus{left:8px;top:8px}

  :focus-visible{outline:3px solid var(--green-bright);outline-offset:3px}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:var(--hero-h);
    overflow:hidden;
    isolation:isolate;
    display:flex;flex-direction:column;
  }

  /* Layer 1: hero photograph */
  .hero__bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
  .hero__bg img{
    width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  }

  /* Layer 2: flag. Turn --flag-strength up or down to taste (0 = off, 1 = full). */
  .hero__flag{
    position:absolute;inset:0;z-index:-2;overflow:hidden;
    opacity:var(--flag-strength);
    -webkit-mask-image:radial-gradient(135% 125% at -2% -6%, #000 0%, rgba(0,0,0,.92) 28%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.18) 72%, transparent 88%);
            mask-image:radial-gradient(135% 125% at -2% -6%, #000 0%, rgba(0,0,0,.92) 28%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.18) 72%, transparent 88%);
  }
  .hero__flag img{width:100%;height:100%;object-fit:cover;object-position:20% 40%}

  /* Layer 3: readability wash behind the headline */
  .hero__scrim{
    position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(78% 84% at 16% 62%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.66) 42%, rgba(255,255,255,0) 78%),
      linear-gradient(100deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.34) 30%, rgba(255,255,255,.08) 56%, rgba(255,255,255,0) 74%);
  }

  /* Top fade so the nav stays legible over the photograph */
  .hero::before{
    content:"";position:absolute;top:0;left:0;right:0;height:170px;z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.78) 38%, rgba(255,255,255,.30) 72%, rgba(255,255,255,0) 100%);
  }

  /* ---------- NAV ---------- */
  .nav{
    position:relative;z-index:5;
    display:flex;align-items:center;justify-content:flex-end;
    padding:26px var(--gutter) 0;
  }
  .nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,32px);flex-wrap:wrap;justify-content:flex-end}
  .nav a{
    font-weight:700;font-size:clamp(1rem,1.25vw,1.16rem);letter-spacing:.03em;text-transform:uppercase;
    color:var(--navy);padding:6px 0;border-bottom:3px solid transparent;
    transition:border-color .18s ease,color .18s ease;
  }
  .nav a:hover{color:var(--green)}
  .nav a[aria-current="page"]{border-bottom-color:var(--green)}

  .nav__toggle{
    display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;
  }
  .nav__toggle span{display:block;width:26px;height:2.5px;background:var(--navy);margin:5px 0}

  /* ---------- HERO CONTENT ---------- */
  .hero__inner{
    position:relative;z-index:2;
    /* Left column widened from 1fr/.86fr so the lede runs fewer, longer lines
       and the portrait + pillars sit higher on a 13" laptop. */
    display:grid;grid-template-columns:minmax(0,1.26fr) minmax(0,.80fr);
    align-items:end;
    flex:1 1 auto;
    padding:0 var(--gutter);
  }

  .hero__copy{align-self:start;padding:clamp(6px,1.2vh,16px) 0 clamp(18px,2.6vh,28px);max-width:880px}

  .name{
    /* FOLD KNOB: this two-line lockup is the single tallest thing in the hero
       (~158px at the 5.2rem cap). Lowering the cap to 4.4rem pulls everything
       below it up by roughly 25px and brings more of the pillars onto a 13"
       screen. Change only the third value in the clamp below. */
    font-family:var(--font-display);
    font-weight:700;color:var(--navy);
    font-size:clamp(2.9rem,7.2vw,5.2rem);
    line-height:.95;letter-spacing:-.005em;text-transform:uppercase;
    margin:0;
  }
  .name span{display:block}

  .starrule{
    display:flex;align-items:center;gap:16px;
    margin:clamp(12px,1.7vh,16px) 0 clamp(10px,1.4vh,14px);
    max-width:520px;
  }
  .starrule::before,.starrule::after{content:"";flex:1;height:1px;background:rgba(16,48,91,.55)}
  .starrule .icon{width:26px;height:26px;flex:none}

  /* Names the office directly under the name lockup. Costs ~34px of hero
     height; delete this rule and its <p class="office"> to reclaim it. */
  .office{
    font-family:var(--font-sans);font-weight:700;color:var(--navy);
    font-size:clamp(.92rem,1.25vw,1.08rem);letter-spacing:.11em;text-transform:uppercase;
    margin:0 0 clamp(10px,1.5vh,16px);line-height:1.3;
  }

  .tagline{
    font-family:var(--font-display);
    font-weight:400;color:var(--green);
    font-size:clamp(1.4rem,3.2vw,2.1rem);
    line-height:1.15;margin:0 0 clamp(16px,2.6vh,24px);
  }

  .eyebrow{
    font-weight:700;color:var(--navy);
    font-size:clamp(1.12rem,1.7vw,1.34rem);
    letter-spacing:.13em;text-transform:uppercase;
    margin:0 0 12px;
  }
  .eyebrow + .divider{width:150px;height:1px;background:var(--rule);margin:0 0 18px}

  .lede:last-of-type{margin-bottom:0}
  .lede.close{color:var(--navy);font-weight:700;font-size:clamp(1.16rem,1.75vw,1.38rem);line-height:1.5;margin-top:14px}
  .lede{
    font-size:clamp(1.12rem,1.7vw,1.34rem);line-height:1.58;
    max-width:min(100%,800px);margin:0 0 14px;color:#2E3E51;
  }

  .hero__portrait{
    position:relative;align-self:end;justify-self:center;
    width:100%;max-width:530px;padding:0 clamp(0px,1.6vw,26px);
  }
  .hero__portrait img{
    width:100%;height:auto;display:block;
    filter:drop-shadow(0 22px 44px rgba(12,28,52,.30));
  }

  /* ---------- PILLARS ---------- */
  .pillars{
    background:var(--navy-deep);color:#fff;
    display:grid;grid-template-columns:repeat(4,1fr);
    padding:34px var(--gutter) 38px;
  }
  .pillar{padding:0 clamp(10px,1.4vw,22px);text-align:center;position:relative}
  .pillar + .pillar::before{
    content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
    background:rgba(255,255,255,.22);
  }
  /* Icons removed from the pillars — icon-*.svg files are still on the server
     and remain available for the yard sign and other collateral. */
  .pillar h2{
    font-size:clamp(1.06rem,1.45vw,1.24rem);font-weight:700;letter-spacing:.02em;text-transform:uppercase;
    margin:0 0 9px;
  }
  .pillar p{margin:0;font-size:clamp(1.12rem,1.7vw,1.34rem);line-height:1.5;color:rgba(255,255,255,.92)}

  /* ---------- HOMEPAGE STATEMENT ---------- */
  .statement{padding:clamp(52px,8vh,88px) var(--gutter) clamp(48px,7vh,80px);background:#fff}
  .statement__in{max-width:70ch}
  .statement h2{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;letter-spacing:-.004em;margin:0;
  }
  .statement .hairline{width:64px;height:3px;background:var(--green);margin:16px 0 26px;border-radius:2px}
  .statement p{
    font-size:clamp(1.16rem,1.8vw,1.42rem);line-height:1.66;margin:0 0 18px;color:#2E3E51;
  }
  .statement p:last-of-type{margin-bottom:0}
  .statement p.close{font-family:var(--font-display);color:var(--navy);font-size:clamp(1.24rem,2vw,1.55rem);line-height:1.45;margin-top:26px}

  /* Tinted variant, to separate consecutive statement blocks on the homepage */
  .statement--tint{background:linear-gradient(176deg,#FAFBFC 0%,#EDF1F3 100%)}

  /* Statement block that is followed by its own content (paths, priorities):
     drop the section's bottom padding so the two don't double up. */
  .statement > .statement__in:not(:last-child){margin-bottom:clamp(24px,3.4vh,34px)}

  /* ---------- RECORD / ISSUES PATH LINKS ---------- */
  /* Grid is built for two cards; the second is commented out in index.html
     until issues.html goes public. One card simply sits on its own. */
  .paths{
    display:grid;gap:clamp(14px,2vw,22px);
    grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),420px));
    max-width:880px;
  }
  .path{
    display:block;border:2px solid var(--navy);border-radius:3px;
    padding:clamp(18px,2.4vw,24px);
    transition:background-color .18s ease,border-color .18s ease;
  }
  .path b{
    display:block;font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:clamp(1.3rem,2.1vw,1.62rem);line-height:1.2;letter-spacing:-.002em;
    margin:0 0 7px;transition:color .18s ease;
  }
  .path span{
    display:block;font-size:clamp(1.06rem,1.5vw,1.2rem);line-height:1.5;color:#2E3E51;
    transition:color .18s ease;
  }
  .path:hover,.path:focus-visible{background:var(--navy)}
  .path:hover b,.path:hover span,
  .path:focus-visible b,.path:focus-visible span{color:#fff}

  /* ---------- FORWARD-LOOKING PRIORITIES ---------- */
  .priorities{list-style:none;margin:0;padding:0;max-width:70ch}
  .priorities li{
    position:relative;padding:16px 0 16px 24px;
    border-bottom:1px solid rgba(16,48,91,.13);
  }
  .priorities li::before{
    content:"";position:absolute;left:0;top:25px;width:7px;height:7px;
    background:var(--green);border-radius:1px;
  }
  .priorities li:last-child{border-bottom:0}
  .priorities b{
    display:block;color:var(--navy);font-weight:700;
    font-size:clamp(1.12rem,1.7vw,1.34rem);line-height:1.35;margin-bottom:4px;
  }
  .priorities span{
    display:block;font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.55;color:#2E3E51;
  }

  /* ---------- CONTACT PAGE: invitation + campaign button ---------- */
  .ctablock{display:flex;gap:clamp(18px,3vw,36px);align-items:center;flex-wrap:wrap;margin:0 0 6px}
  .ctablock__text{flex:1 1 320px;min-width:0}
  .ctablock__text p{margin:0}
  .ctablock__badge{flex:0 0 auto;width:clamp(104px,15vw,152px)}
  .ctablock__badge img{width:100%;height:auto;display:block}

  /* ---------- CONTACT CALLOUT ---------- */
  .callout{
    background:var(--navy-deep);color:#fff;
    padding:clamp(36px,5.5vh,56px) var(--gutter);
  }
  .callout__in{max-width:58ch;margin:0 auto;text-align:center}
  /* With the three white sections gone, the callout now butts directly against
     the navy pillars band. A hairline keeps them from reading as one block. */
  .pillars + .callout{border-top:1px solid rgba(255,255,255,.22)}
  .callout h2{
    font-family:var(--font-display);font-weight:700;color:#fff;
    font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.15;letter-spacing:-.004em;
    margin:0 0 14px;
  }
  .callout p{
    margin:0;font-size:clamp(1.12rem,1.7vw,1.34rem);line-height:1.6;
    color:rgba(255,255,255,.92);
  }
  .callout__cta{margin-top:14px !important}

  .callout a{
    color:#fff;font-weight:700;
    border-bottom:2px solid var(--green-bright);padding-bottom:1px;
    transition:color .18s ease,border-color .18s ease;
  }
  .callout a:hover,.callout a:focus-visible{color:var(--green-bright)}

  /* ---------- CLOSING CAMPAIGN ASK ---------- */
  .ask{background:#fff;padding:clamp(40px,6vh,64px) var(--gutter);text-align:center}
  .ask p{
    margin:0 auto;max-width:none;white-space:nowrap;
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    /* SINGLE-LINE KNOB: sized in vw so the sentence stays on one line at any
       desktop width. If it wraps or crowds the edges, nudge the 2.22vw value.
       Below 820px it is allowed to wrap — see the media query. */
    font-size:min(2.22vw,2rem);line-height:1.25;letter-spacing:-.004em;
  }

  /* ---------- NUMBERED POSITION LISTS ---------- */
  .poslabel{
    font-size:.9rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--green);margin:26px 0 14px;
  }
  .positions{counter-reset:pos;list-style:none;margin:0 0 8px;padding:0;max-width:100%}
  .positions li{
    position:relative;padding:0 0 0 46px;margin:0 0 16px;
    font-size:clamp(1.12rem,1.7vw,1.34rem);line-height:1.6;color:#2E3E51;
  }
  .positions li::before{
    counter-increment:pos;content:counter(pos);
    position:absolute;left:0;top:.15em;
    width:30px;height:30px;border-radius:50%;
    background:var(--navy);color:#fff;
    font-family:var(--font-body);font-weight:700;font-size:.92rem;
    display:flex;align-items:center;justify-content:center;
  }

  /* ---------- KEY LINE ---------- */
  .keyline{
    border-left:4px solid var(--green);padding:4px 0 4px 20px;margin:24px 0 22px;
    font-family:var(--font-display);color:var(--navy);
    font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.42;max-width:52ch;
  }

  .glosshint{font-size:1rem !important;color:#5A6B7D}
  .glosshint a{color:var(--green);font-weight:700;border-bottom:1px solid rgba(75,110,44,.4)}

  /* ---------- GLOSSARY TERMS ---------- */
  .term{
    border-bottom:1px dotted rgba(16,48,91,.55);
    color:inherit;text-decoration:none;
  }
  .term:hover,.term:focus{border-bottom-color:var(--green);color:var(--green)}
  .term::after{content:"\2009\25BE";font-size:.62em;vertical-align:.28em;color:var(--green)}

  .glossary{border-top:1px solid rgba(16,48,91,.2);margin-top:clamp(40px,6vh,64px);padding-top:clamp(28px,4vh,40px)}
  .glossary dl{margin:0;max-width:100%}
  .glossary .gitem{padding:14px 14px 14px 0;border-bottom:1px solid rgba(16,48,91,.1);scroll-margin-top:24px}
  .glossary .gitem:target{background:rgba(124,171,55,.16);padding-left:14px;border-radius:3px}
  .glossary dt{font-weight:700;color:var(--navy);font-size:1.1rem;margin:0 0 5px}
  .glossary dd{margin:0;font-size:1.06rem;line-height:1.58;color:#3A4A5C}
  .backlink{display:inline-block;margin-top:6px;font-size:.92rem;font-weight:700;color:var(--green)}

  /* ---------- SUMMARY LIST ---------- */
  .summary{counter-reset:sum;list-style:none;margin:0 0 20px;padding:0}
  .summary li{
    position:relative;padding:0 0 0 34px;margin:0 0 12px;
    font-size:clamp(1.12rem,1.7vw,1.34rem);line-height:1.55;color:#2E3E51;
  }
  .summary li::before{
    counter-increment:sum;content:counter(sum) ".";position:absolute;left:0;top:0;
    color:var(--green);font-weight:700;
  }

  /* ---------- BANNER ---------- */
  .banner{
    background:var(--green-band);color:#fff;
    display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);
    padding:15px var(--gutter);
  }
  .banner__line{flex:0 1 130px;height:1px;background:rgba(255,255,255,.55)}
  .banner .icon{width:15px;height:15px;flex:none}
  .banner p{
    margin:0;font-family:var(--font-display);font-weight:500;
    font-size:clamp(1.02rem,1.5vw,1.2rem);
    letter-spacing:.14em;text-transform:uppercase;text-align:center;
  }
  .banner__group{display:flex;align-items:center;gap:14px;flex:0 1 auto;min-width:0}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:960px){
    .pillars{grid-template-columns:repeat(2,1fr);row-gap:32px}
    .pillar:nth-child(odd)::before{display:none}
    .pillar:nth-child(3)::before{display:none}
  }

  @media (max-width:820px){
    :root{--hero-h:auto}
    .nav{flex-wrap:wrap;justify-content:space-between;padding-top:18px}
    .nav__toggle{display:block}
    .nav__links{
      display:none;width:100%;flex-direction:column;gap:2px;padding:14px 0 4px;
    }
    .nav__links.is-open{display:flex}
    .nav__links a{border-bottom:1px solid rgba(16,48,91,.14);padding:11px 0}
    .nav__links a[aria-current="page"]{border-bottom-color:var(--green)}

    .hero__inner{grid-template-columns:1fr;min-height:0;row-gap:0}
    .hero__copy{padding:26px 0 22px;max-width:none}
    .hero__portrait{max-width:420px;margin:0 auto}
    .hero__scrim{background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 44%, rgba(255,255,255,.34) 100%)}
    .hero__bg img{object-position:50% 42%}
    .lede:last-of-type{margin-bottom:0}
  .lede.close{color:var(--navy);font-weight:700;font-size:clamp(1.16rem,1.75vw,1.38rem);line-height:1.5;margin-top:14px}
  .lede{max-width:100%}
    .banner__line{display:none}
    .ask p{white-space:normal;font-size:clamp(1.35rem,4.6vw,1.9rem);max-width:22ch}
  }

  @media (max-width:560px){
    .pillars{grid-template-columns:1fr}
    .pillar + .pillar::before{display:none}
    .pillar + .pillar{border-top:1px solid rgba(255,255,255,.2);padding-top:26px}
    .banner{gap:12px;padding:14px 20px}
    .banner__group{display:none}
    .banner p{letter-spacing:.14em;line-height:1.7}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  }

  /* =================================================================
     INTERIOR PAGES (about, record, issues, contact)
     ================================================================= */

  .pagehead{
    position:relative;overflow:hidden;isolation:isolate;
    background:linear-gradient(176deg,#FAFBFC 0%,#EDF1F3 62%,#E4EAEC 100%);
    color:var(--ink);
  }

  /* flag only — no plant imagery on interior pages */
  .pagehead__flag{
    position:absolute;inset:0;z-index:-2;overflow:hidden;
    opacity:var(--flag-strength);
    -webkit-mask-image:radial-gradient(135% 125% at -2% -6%, #000 0%, rgba(0,0,0,.92) 28%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.18) 72%, transparent 88%);
            mask-image:radial-gradient(135% 125% at -2% -6%, #000 0%, rgba(0,0,0,.92) 28%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.18) 72%, transparent 88%);
  }
  .pagehead__flag img{width:100%;height:100%;object-fit:cover;object-position:24% 42%}

  .pagehead__scrim{
    position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(72% 88% at 14% 58%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.60) 44%, rgba(255,255,255,0) 80%),
      linear-gradient(100deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.28) 34%, rgba(255,255,255,0) 70%);
  }

  .pagehead::before{
    content:"";position:absolute;top:0;left:0;right:0;height:150px;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.62) 45%, rgba(255,255,255,0) 100%);
  }

  .pagehead .nav,
  .pagehead__inner{position:relative;z-index:2}

  .pagehead__inner{
    padding:clamp(34px,7vh,74px) var(--gutter) 0;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.52fr);
    gap:clamp(20px,4vw,56px);align-items:end;
    min-height:clamp(280px,36vh,380px);
  }
  .pagehead__copy{padding-bottom:clamp(40px,7vh,72px)}

  .pagehead__portrait{align-self:end;justify-self:center;width:100%;max-width:390px}
  /* A taller, full-length cutout (murphy.html) needs a narrower cap so the
     header does not grow. Same rendered height as the standard portrait. */
  .pagehead__portrait--tall{max-width:300px}
  .pagehead__portrait img{
    width:100%;height:auto;display:block;
    filter:drop-shadow(0 16px 34px rgba(12,28,52,.26));
  }

  .pagehead h1{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    text-transform:uppercase;
    font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1;letter-spacing:-.004em;margin:0;
  }

  /* same star divider as the homepage */
  .pagehead .starrule{margin:clamp(16px,2.6vh,26px) 0 clamp(14px,2.2vh,22px);max-width:480px}

  .pagehead .standfirst{
    margin:0;max-width:min(100%,700px);font-size:clamp(1.12rem,1.7vw,1.34rem);
    line-height:1.62;color:#2E3E51;
  }

  .page{padding:clamp(38px,6vw,68px) var(--gutter) 0}

  /* prose column */
  .layout{display:block;max-width:var(--measure)}

  .prose h2{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:clamp(1.5rem,2.5vw,1.98rem);line-height:1.22;letter-spacing:-.002em;
    margin:0 0 4px;
  }
  .prose h2 + .hairline{width:64px;height:3px;background:var(--green);margin:0 0 18px;border-radius:2px}

  /* Sub-headings within a prose section (used on issues.html to break the
     treatment-plant section into parts). */
  .prose h3{
    font-family:var(--font-sans);font-weight:700;color:var(--navy);
    font-size:clamp(1.06rem,1.45vw,1.16rem);letter-spacing:.09em;text-transform:uppercase;
    line-height:1.35;margin:clamp(26px,3.4vh,34px) 0 10px;
  }
  .prose h3:first-of-type{margin-top:4px}
  .prose section{margin:0 0 clamp(34px,5vh,48px)}
  .prose p{font-size:clamp(1.12rem,1.7vw,1.34rem);line-height:1.72;margin:0 0 17px;max-width:100%;color:#2E3E51}
  .prose p:last-child{margin-bottom:0}
  .prose strong{color:var(--navy);font-weight:700}

  /* service list */
  .roles{list-style:none;margin:0;padding:0}
  .roles li{
    padding:15px 0 15px 22px;border-bottom:1px solid rgba(16,48,91,.13);
    font-size:clamp(1.12rem,1.7vw,1.34rem);line-height:1.5;position:relative;
  }
  .roles li::before{
    content:"";position:absolute;left:0;top:20px;width:7px;height:7px;
    background:var(--green);border-radius:1px;
  }
  .roles li:last-child{border-bottom:0}
  .roles b{display:block;color:var(--navy);font-weight:700}
  .roles span{color:#5A6B7D;font-size:1.14rem}

  /* pull quote */
  .pullquote{
    border-left:4px solid var(--green);padding:6px 0 6px 22px;margin:0 0 clamp(34px,5vh,48px);
  }
  .pullquote p{
    font-family:var(--font-display);font-weight:400;color:var(--navy);
    font-size:clamp(1.3rem,2.2vw,1.62rem);line-height:1.45;letter-spacing:0;
    margin:0;max-width:56ch;
  }

  /* next-page link */
  .next{
    display:block;border-top:1px solid rgba(16,48,91,.16);
    padding:26px 0 0;margin:0 0 clamp(40px,6vh,64px);
  }
  .next span{
    display:block;font-size:1.02rem;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:#5A6B7D;margin-bottom:7px;
  }
  .next b{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:clamp(1.32rem,2.1vw,1.66rem);letter-spacing:-.002em;
  }
  .next:hover b{color:var(--green)}
  .next b::after{content:" →"}

  /* =================================================================
     FOOTER
     ================================================================= */
  .foot{background:var(--navy-deep);color:rgba(255,255,255,.82);padding:38px var(--gutter) 30px}
  .foot__in{display:flex;flex-wrap:wrap;gap:26px 48px;align-items:flex-start}
  .foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
  .foot nav a{font-size:1.12rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff}
  .foot nav a:hover{color:var(--green-bright)}
  .foot .disclosure{
    font-size:1.12rem;line-height:1.6;margin:0;color:rgba(255,255,255,.7);max-width:46ch;
  }

  @media (max-width:900px){
    .pagehead__inner{grid-template-columns:1fr;min-height:0}
    .pagehead__portrait{display:none}
    .pagehead__copy{padding-bottom:clamp(40px,7vh,64px)}
  }