:root {
  --ink:#142b2b;
  --cream:#f4f0e7;
  --paper:#fffef9;
  --blue:#2f7fe2;
  --green:#20a85c;
  --yellow:#ffd600;
  --rust:#d84b36;
  --muted:#536b68;
  --line:#cec6b7;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans","Avenir Next",sans-serif; line-height:1.65; }
a { color:inherit; }
.about-nav { position:sticky; top:0; z-index:20; min-height:76px; display:flex; align-items:center; justify-content:space-between; padding:12px clamp(20px,5vw,68px); background:rgba(20,43,43,.98); color:white; border-bottom:1px solid rgba(255,255,255,.16); }
.about-brand { display:flex; align-items:center; gap:12px; color:white; text-decoration:none; font-family:"Fraunces",Georgia,serif; font-size:1.08rem; font-weight:700; }
.about-brand > span:last-child { display:flex; flex-direction:column; line-height:1.05; }
.about-brand small { margin-top:5px; font-family:"DM Sans",sans-serif; font-size:.56rem; letter-spacing:.16em; }
.about-mark { display:grid; grid-template-columns:repeat(3,8px); gap:2px; padding:4px; border:2px solid white; }
.about-mark i { width:8px; height:8px; background:var(--yellow); }
.about-mark i:nth-child(2n) { background:var(--blue); }
.about-mark i:nth-child(3n) { background:var(--green); }
.about-mark i:nth-child(5) { background:transparent; border:1px solid white; }
.about-nav-links { display:flex; align-items:center; gap:24px; }
.about-nav-links a { min-height:44px; display:inline-flex; align-items:center; color:white; text-decoration:none; font-weight:700; }
.about-nav-links .cta { padding:0 20px; background:white; color:var(--ink); }
main { overflow:hidden; }
.about-hero, .story-section, .beliefs, .expertise, .local-note, .about-cta { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.about-hero { min-height:650px; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.72fr); gap:clamp(48px,8vw,120px); align-items:center; padding:clamp(70px,10vw,132px) 0; }
.eyebrow { margin:0 0 18px; color:var(--rust); font-size:.77rem; font-weight:800; letter-spacing:.16em; }
h1,h2,h3,blockquote { font-family:"Fraunces",Georgia,serif; }
h1 { max-width:800px; margin:0 0 28px; font-size:clamp(3rem,6.5vw,6.25rem); line-height:.96; letter-spacing:-.055em; }
h2 { margin:0 0 25px; font-size:clamp(2.25rem,4.5vw,4.65rem); line-height:1; letter-spacing:-.045em; }
h3 { margin:14px 0 10px; font-size:1.45rem; line-height:1.1; }
.lede { max-width:750px; margin:0; color:var(--muted); font-size:clamp(1.08rem,2vw,1.35rem); }
.about-hero-art { position:relative; padding:30px 0 0 30px; }
.about-hero-art::before { content:""; position:absolute; inset:0 24px 54px 0; background:var(--yellow); transform:rotate(-2deg); }
.about-hero-art::after { content:""; position:absolute; width:70px; height:70px; top:-18px; right:-14px; border:18px solid var(--blue); }
.story-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:16px; background:var(--ink); aspect-ratio:1; box-shadow:18px 18px 0 rgba(20,43,43,.14); }
.story-grid span { display:block; background:var(--paper); }
.story-grid .yellow { background:var(--yellow); }
.story-grid .blue { background:var(--blue); }
.story-grid .green { background:var(--green); }
.story-grid .opening { border:4px solid var(--paper); background:var(--ink); }
.about-hero-art p { position:relative; z-index:3; width:calc(100% - 28px); margin:28px 0 0; font-weight:800; font-size:1.02rem; }
.story-section { display:grid; grid-template-columns:100px minmax(0,780px); justify-content:center; gap:42px; padding:clamp(80px,12vw,150px) 0; border-top:1px solid var(--line); }
.story-section > div:last-child > p:not(.eyebrow) { margin:0 0 22px; color:#294441; font-size:clamp(1.04rem,1.5vw,1.18rem); }
.story-number { padding-top:7px; color:var(--blue); font-family:"Fraunces",Georgia,serif; font-size:3.5rem; font-weight:700; line-height:1; }
.story-parent { width:100%; max-width:none; grid-template-columns:minmax(20px,1fr) 100px minmax(0,780px) minmax(20px,1fr); background:var(--ink); color:white; border:0; }
.story-parent .story-number { grid-column:2; color:var(--yellow); }
.story-parent > div:last-child { grid-column:3; }
.story-parent .eyebrow { color:var(--yellow); }
.story-parent > div:last-child > p:not(.eyebrow) { color:#dbe4e2; }
blockquote { margin:40px 0 0; padding:28px 0 0; border-top:4px solid var(--yellow); font-size:clamp(1.4rem,3vw,2.35rem); line-height:1.22; }
blockquote p { margin:0; }
.beliefs { padding:clamp(85px,12vw,150px) 0; }
.beliefs-intro { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr); column-gap:80px; align-items:end; margin-bottom:55px; }
.beliefs-intro .eyebrow { grid-column:1/-1; }
.beliefs-intro h2 { margin:0; }
.beliefs-intro > p:last-child { margin:0 0 8px; color:var(--muted); font-size:1.12rem; }
.belief-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.belief-grid article { min-height:270px; padding:34px; background:var(--paper); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.belief-grid article span { color:var(--rust); font-size:.75rem; font-weight:800; letter-spacing:.12em; }
.belief-grid article p { margin:0; color:var(--muted); }
.expertise { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr); gap:clamp(50px,8vw,110px); padding:clamp(75px,10vw,120px); background:var(--blue); color:white; box-shadow:16px 16px 0 var(--yellow); }
.expertise .eyebrow { color:white; }
.expertise h2 { font-size:clamp(2.2rem,4vw,4.15rem); }
.expertise p { margin:0 0 22px; font-size:1.1rem; }
.local-note { max-width:900px; padding:clamp(100px,13vw,160px) 0; text-align:center; }
.local-note h2 { font-size:clamp(2.2rem,4.5vw,4.4rem); }
.local-note > p:not(.eyebrow) { color:var(--muted); font-size:1.08rem; }
.local-note a { display:inline-flex; min-height:48px; align-items:center; margin-top:18px; border-bottom:2px solid var(--rust); color:var(--ink); text-decoration:none; font-weight:800; }
.about-cta { width:100%; max-width:none; padding:clamp(85px,11vw,135px) max(20px,calc((100vw - 1180px)/2)); background:var(--yellow); }
.about-cta h2 { max-width:900px; }
.about-cta > p:not(.eyebrow) { max-width:640px; font-size:1.15rem; }
.about-cta a { display:inline-flex; min-height:52px; align-items:center; margin-top:20px; padding:0 24px; background:var(--ink); color:white; text-decoration:none; font-weight:800; }
footer { display:flex; justify-content:space-between; gap:30px; padding:46px max(20px,calc((100vw - 1180px)/2)); background:var(--ink); color:white; }
footer p { margin:5px 0 0; color:#bdcdca; }
footer > div:last-child { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
footer a { color:white; }
:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}

@media (max-width:800px) {
  .about-nav-links a:not(.cta) { display:none; }
  .about-hero { min-height:auto; grid-template-columns:1fr; gap:60px; }
  .about-hero-art { width:min(430px,86vw); justify-self:center; padding-left:18px; }
  .story-section { grid-template-columns:52px minmax(0,1fr); gap:22px; }
  .story-number { font-size:2.5rem; }
  .story-parent { grid-template-columns:20px 52px minmax(0,1fr) 20px; }
  .beliefs-intro, .expertise { grid-template-columns:1fr; }
  .beliefs-intro { gap:20px; }
  .belief-grid { grid-template-columns:1fr; }
  .expertise { padding:60px 30px; }
}

@media (max-width:520px) {
  .about-nav { min-height:68px; }
  .about-nav-links .cta { padding:0 15px; }
  .about-hero, .story-section, .beliefs, .local-note { width:min(100% - 30px,1180px); }
  .about-hero { padding:58px 0 76px; }
  h1 { font-size:clamp(2.75rem,15vw,4.2rem); }
  .story-section { display:block; padding:75px 0; }
  .story-number { margin-bottom:30px; }
  .story-parent { width:100%; padding:75px 20px; }
  .belief-grid article { min-height:auto; padding:28px; }
  .expertise { width:calc(100% - 30px); }
  footer { flex-direction:column; }
}
