:root {
  --dark: #07120c;
  --green: #55df83;
  --paper: #f4f5f0;
  --paper-ink: #172019;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--paper-ink);
  background: #fff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.container { width: min(var(--site-content-width), calc(100% - 48px)); margin-inline: auto; }

.about-hero { padding: clamp(72px,7vw,94px) 0 clamp(76px,8vw,102px); color: #eef5f0; background: var(--dark); }
.about-hero-inner { max-width: 980px; }
.about-label, .section-label { margin: 0 0 21px; color: var(--green); font-size: .75rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.about-hero h1 { max-width: 930px; margin: 0; font-size: clamp(2.9rem,5vw,4.55rem); font-weight: 720; letter-spacing: -.058em; line-height: 1; }
.about-hero h1 span { color: var(--green); }
.about-hero-inner > p:last-child { margin: 28px 0 0; color: #a9b6ac; font-size: clamp(1.1rem,1.8vw,1.35rem); line-height: 1.55; }

.about-story { padding: clamp(78px,8vw,104px) 0; background: var(--paper); }
.story-grid { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr); gap: clamp(60px,9vw,126px); align-items: start; }
.about-story .section-label { color: #087b3a; }
.about-story h2 { max-width: 390px; margin: 0; color: #17231b; font-size: clamp(2.2rem,3.4vw,3.1rem); font-weight: 680; letter-spacing: -.05em; line-height: 1.04; }
.story-copy { border-top: 1px solid #cfd7d1; }
.story-copy p { margin: 0; padding: 25px 0; border-bottom: 1px solid #cfd7d1; color: #5f6b62; font-size: 1.04rem; line-height: 1.78; }
.story-copy p:first-child { color: #344038; font-size: 1.12rem; }

.about-tailored { padding: clamp(74px,7vw,96px) 0; color: #eaf3ec; background: #0a160e; }
.tailored-grid { display: grid; grid-template-columns: minmax(230px,.55fr) minmax(0,1.45fr); gap: clamp(55px,9vw,128px); align-items: start; }
.tailored-grid .section-label { margin-top: 8px; }
.about-tailored h2 { margin: 0; font-size: clamp(2.25rem,3.8vw,3.4rem); font-weight: 680; letter-spacing: -.052em; line-height: 1.03; }
.about-tailored div > p { max-width: 720px; margin: 24px 0 0; color: #a7b4aa; font-size: 1.05rem; line-height: 1.72; }

.footer { padding: 52px 0 30px; color: #9caaa0; background: #07120c; }
.footer-top { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 60px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.11); }
.footer-brand img { width: 132px; height: auto; filter: invert(1); }
.footer-brand p { max-width: 330px; margin: 18px 0 0; font-size: .82rem; line-height: 1.65; }
.footer h3 { margin: 0 0 16px; color: #e5ece7; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-links { display: grid; gap: 11px; }
.footer-links a { width: fit-content; color: #9caaa0; text-decoration: none; font-size: .82rem; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; color: #6f7c72; font-size: .72rem; }
.footer-powered { display: inline-flex; align-items: center; gap: 8px; }
.footer-powered img { width: auto; height: 16px; filter: brightness(0) invert(1); opacity: .7; }

:focus-visible { outline: 3px solid rgba(85,223,131,.55); outline-offset: 4px; border-radius: 5px; }

@media (max-width: 980px) {
  .story-grid, .tailored-grid { grid-template-columns: 1fr; gap: 42px; }
  .about-story h2 { max-width: 680px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .container { width: min(100% - 32px,var(--site-content-width)); }
}

@media (max-width: 680px) {
  .about-hero { padding: 62px 0 72px; }
  .about-hero h1 { font-size: clamp(2.8rem,13vw,4rem); }
  .about-story, .about-tailored { padding: 72px 0; }
  .story-grid, .tailored-grid { gap: 32px; }
  .about-story h2, .about-tailored h2 { font-size: clamp(2.2rem,10vw,3rem); }
  .story-copy p { padding: 21px 0; font-size: 1rem; }
  .story-copy p:first-child { font-size: 1.04rem; }
  .footer { padding-top: 42px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

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