:root{
  /* Color tokens */
  --color-bg:#f7f7f2;
  --color-text:#1b1b1b;
  --color-muted:#525252;
  --color-border:#d8d7d3;
  --color-accent:#0c5167;
  --color-accent-2:#0f6a43;

  /* Spacing scale */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.75rem;
  --space-7:2.5rem;
  --space-8:3.5rem;
  --space-9:4.5rem;
  --space-10:5.5rem;

  /* Typography tokens */
  --font-size-xs:clamp(0.8rem,calc(0.75rem + 0.2vw),0.9rem);
  --font-size-sm:clamp(0.95rem,calc(0.9rem + 0.3vw),1rem);
  --font-size-base:clamp(1.05rem,calc(1rem + 0.5vw),1.15rem);
  --font-size-lg:clamp(1.35rem,calc(1.25rem + 0.7vw),1.5rem);
  --font-size-xl:clamp(1.75rem,calc(1.55rem + 0.9vw),2rem);
  --line-height-base:1.65;
  --line-height-heading:1.25;
  --prose-max-width:70ch;

  /* Radius + shadows */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;
  --shadow-level-1:0 6px 20px rgba(15,15,15,0.08);
  --shadow-level-2:0 12px 28px rgba(15,15,15,0.12);
  --shadow-level-3:0 20px 45px rgba(12,20,28,0.18);

  /* Motion */
  --motion-duration-fast:150ms;
  --motion-duration-base:280ms;
  --motion-ease-standard:cubic-bezier(0.4,0,0.2,1);
  --motion-ease-smooth:cubic-bezier(0.3,0,0.1,1);
  --motion-focus:0 0 0 3px rgba(12,81,103,0.25);
}

@media (prefers-reduced-motion:reduce){
  :root{
    --motion-duration-fast:1ms;
    --motion-duration-base:1ms;
  }

  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }

  .link-cta::after{
    transition:none;
  }
}

:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

.container{
  width:min(1200px,100%);
  margin-inline:auto;
  padding-inline:var(--space-4);
}

.section{
  padding-block:var(--space-7);
}

.prose{
  max-width:var(--prose-max-width);
  margin-inline:auto;
  color:var(--color-text);
  font-size:var(--font-size-base);
  line-height:var(--line-height-base);
}

.prose>*{
  margin-top:0;
}

.prose>*+*{
  margin-top:var(--space-4);
}

.prose ul,
.prose ol{
  padding-left:var(--space-5);
  margin:var(--space-3) 0;
  line-height:var(--line-height-base);
}

.prose li+li{
  margin-top:var(--space-2);
}

.card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-level-1);
  padding:var(--space-5);
  color:inherit;
}

.card:focus-visible{
  box-shadow:var(--shadow-level-2),var(--motion-focus);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:44px;
  padding:0 var(--space-4);
  border-radius:var(--radius-md);
  font-size:var(--font-size-sm);
  line-height:1;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  transition:background var(--motion-duration-base) var(--motion-ease-standard),box-shadow var(--motion-duration-base) var(--motion-ease-standard),color var(--motion-duration-base) var(--motion-ease-standard),border-color var(--motion-duration-base) var(--motion-ease-standard);
  cursor:pointer;
}

.btn:focus-visible{
  box-shadow:var(--motion-focus);
}

.btn-primary{
  background:var(--color-accent);
  color:#fff;
}

.btn-primary:hover{
  background:#0a4251;
}

.btn-secondary{
  background:#fff;
  color:var(--color-text);
  border-color:var(--color-border);
}

.btn-secondary:hover{
  border-color:var(--color-accent);
  color:var(--color-accent);
}

.btn-quiet{
  padding:0;
  background:transparent;
  color:var(--color-muted);
  border-color:transparent;
  font-weight:500;
}

.btn-quiet:hover{
  color:var(--color-accent);
}

.link-cta{
  position:relative;
  color:var(--color-accent);
  text-decoration:none;
  font-weight:600;
  padding-bottom:2px;
}

.link-cta::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:var(--color-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--motion-duration-base) var(--motion-ease-standard);
}

.link-cta:hover::after,
.link-cta:focus-visible::after{
  transform:scaleX(1);
}

.media-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--color-border);
}

.media-frame>img,
.media-frame>video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.media-frame:focus-visible{
  box-shadow:var(--motion-focus);
}

.grid-2,
.grid-3{
  display:grid;
  gap:var(--space-6);
}

.grid-2{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.grid-3{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}