/* Base, typography and layout */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-4)); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-ink-soft); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { margin: 0 0 var(--space-4); color: var(--color-ink); font-family: var(--font-display); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-4); max-width: 72ch; text-wrap: pretty; }
a { color: var(--color-blue); text-decoration: none; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
a:hover { color: var(--color-berry); }
img,svg { display: block; max-width: 100%; height: auto; } button,input,select,textarea { font: inherit; } button { cursor: pointer; }
ul,ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }
::selection { color: #fff; background: var(--color-blue); }
.container { width: min(100% - 2.5rem, var(--container-max)); margin: 0 auto; }
.container--narrow { max-width: var(--container-narrow); }
.skip-link { position:absolute; left:var(--space-4); top:-4rem; background:var(--color-blue); color:#fff; padding:var(--space-3) var(--space-4); z-index:1000; } .skip-link:focus{top:var(--space-3);color:#fff;}
.section { padding: clamp(3.75rem, 8vw, 7.5rem) 0; border-top: 1px solid var(--color-line); background: #fff; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--soft { background: #fff; }
.section-head { margin-bottom: var(--space-7); max-width: 780px; }
.section-head--center { margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow { display:inline-block; margin-bottom:var(--space-3); color:var(--color-ink-muted); font-size:var(--fs-caption); font-weight:600; letter-spacing:var(--tracking-caption); text-transform:uppercase; }
.section-num { display:block; margin-bottom:var(--space-2); color:var(--color-blue); font-family:var(--font-display); font-size:clamp(1.6rem,2.8vw,2.5rem); font-weight:700; line-height:1; }
.lead { margin:0; max-width: 66ch; color:var(--color-ink-soft); font-size:var(--fs-lead); }
.accent { color:var(--color-blue); }.text-blue{color:var(--color-blue)}.text-green{color:var(--color-green)}.text-berry{color:var(--color-berry)}.text-muted{color:var(--color-ink-muted)}.dot{color:var(--color-berry)}
.grid { display:grid; gap:var(--space-5); }.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.bullet-list { padding:0; list-style:none; }.bullet-list li { position:relative; padding-left:1.1rem; margin-bottom:var(--space-2); }.bullet-list li::before { content:''; position:absolute; left:0; top:.63em; width:6px; height:6px; background:var(--color-berry); border-radius:50%; }
.btn { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:var(--space-2); padding:.7rem 1.15rem; border:1px solid transparent; border-radius:var(--radius-sm); font-size:var(--fs-small); font-weight:600; line-height:1.2; white-space:nowrap; }
.btn--primary{color:#fff;background:var(--color-blue);border-color:var(--color-blue)}.btn--primary:hover{color:#fff;background:var(--color-blue-dark);border-color:var(--color-blue-dark)}
.btn--secondary,.btn--ghost{color:var(--color-ink);background:#fff;border-color:var(--color-ink)}.btn--secondary:hover,.btn--ghost:hover{color:#fff;background:var(--color-ink)}
.btn--berry{color:#fff;background:var(--color-berry);border-color:var(--color-berry)}.btn--berry:hover{color:#fff;background:var(--color-berry-dark)}.btn--arrow::after{content:'→';font-size:1.1em}
.icon { width:34px; height:34px; color:var(--color-blue); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.media-placeholder { display:grid; place-items:center; min-height:260px; aspect-ratio:4/3; border:1px solid var(--color-line); background:linear-gradient(135deg,#EDE6DC,#F7F4EF); color:var(--color-ink-muted); text-align:center; font-size:var(--fs-small); padding:var(--space-5); }
.reveal { opacity:1; transform:none; }
@media (max-width: 900px){.grid--4,.grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 620px){.container{width:min(100% - 2rem,var(--container-max))}.section{padding:var(--space-8) 0}.grid--2,.grid--3,.grid--4,.grid--6{grid-template-columns:1fr}.btn{width:100%}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;}}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }