/* ============================================================================
   MERIDIAN - Design system CSS
   Tokens mapped 1:1 from DESIGN.md frontmatter. Dark-by-default editorial
   system: warm near-black surface scale, Fraunces / Work Sans pairing, one
   restrained brass accent, motion that only reveals.
   ============================================================================ */

:root{
  /* Colors - surface scale */
  --color-background:#0B0B0A;
  --color-surface:#141311;
  --color-surface-elevated:#1D1B17;
  --color-border:#2A2724;

  /* Colors - foreground */
  --color-primary:#F2EFEA;
  --color-text:#F2EFEA;
  --color-text-muted:#A39A8E;

  /* Colors - accent (material, never a fill) */
  --color-accent:#B08552;

  /* Button-primary text is a dark ink, not pure black (per DESIGN.md components) */
  --color-btn-primary-text:#14120F;
  --color-btn-primary-hover:#E4DFD5;

  /* Error red - distinct from accent, tested for contrast on near-black */
  --color-error:#D97B6C;

  /* Typography */
  --font-display:'Fraunces', 'Iowan Old Style', serif;
  --font-body:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.5rem, 5.5vw, 4.75rem);
  --fs-headline: clamp(1.75rem, 3.5vw, 3rem);
  --fs-title: 1.5rem;
  --fs-body: 1.0625rem;
  --fs-label: 0.8125rem;

  /* Radius */
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:6px;
  --radius-xl:8px;

  /* Spacing */
  --space-sm:8px;
  --space-md:24px;
  --space-lg:64px;
  --space-xl:128px;

  /* Motion */
  --duration-subtle:350ms;
  --duration-standard:550ms;
  --ease-subtle: cubic-bezier(0.33, 1, 0.68, 1);   /* power1.out */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);  /* power2.out */

  /* Elevation - Meridian is flat by default; this is the one shadow the
     system allows (sticky nav once scrolled, mobile menu overlay). */
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.4);

  /* Z-index scale */
  --z-content:0;
  --z-nav:10;
  --z-dropdown:20;
  --z-overlay:40;
  --z-toast:100;
}

/* ============================================================================
   Reset & base
   ============================================================================ */

*, *::before, *::after{ box-sizing:border-box; }

html{
  background:var(--color-background);
  scroll-behavior:smooth;
}

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

body{
  margin:0;
  background:var(--color-background);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.menu-open{ overflow:hidden; }

img, svg{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

button{
  font-family:inherit;
  color:inherit;
  background:none;
  border:none;
  cursor:pointer;
}

ul{ list-style:none; margin:0; padding:0; }

h1, h2, h3, p, figure{ margin:0; }

/* Focus - the only place a wide accent ring is intentional (state, not fill) */
:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding-inline:20px;
}

@media (min-width:640px){
  .wrap{ padding-inline:32px; }
}

@media (min-width:1024px){
  .wrap{ padding-inline:48px; }
}

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  top:-48px;
  left:16px;
  background:var(--color-surface-elevated);
  color:var(--color-text);
  padding:12px 20px;
  border-radius:var(--radius-sm);
  z-index:var(--z-toast);
  transition:top var(--duration-subtle) var(--ease-subtle);
}

.skip-link:focus{ top:16px; }

/* ============================================================================
   Typography
   ============================================================================ */

.type-display{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-display);
  line-height:1.05;
  letter-spacing:-0.01em;
}

.type-headline{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-headline);
  line-height:1.15;
  letter-spacing:-0.005em;
}

.type-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-title);
  line-height:1.25;
}

.type-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:var(--fs-title);
  line-height:1.4;
}

.type-label{
  font-family:var(--font-body);
  font-weight:500;
  font-size:var(--fs-label);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}

.type-body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.6;
}

.measure{ max-width:62ch; }

.type-lead{
  font-family:var(--font-body);
  font-weight:400;
  font-size:1.25rem;
  line-height:1.5;
  color:var(--color-text);
}

/* ============================================================================
   Buttons
   ============================================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:14px 28px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  white-space:nowrap;
  transition:background-color var(--duration-subtle) var(--ease-subtle),
             border-color var(--duration-subtle) var(--ease-subtle),
             color var(--duration-subtle) var(--ease-subtle);
}

.btn-primary{
  background:var(--color-primary);
  color:var(--color-btn-primary-text);
}

.btn-primary:hover,
.btn-primary:focus-visible{
  background:var(--color-btn-primary-hover);
}

.btn-secondary{
  background:transparent;
  color:var(--color-text);
  /* DESIGN.md specifies 0.24 alpha here; measured against #0B0B0A that
     resolves to ~1.95:1, below the 3:1 WCAG 1.4.11 floor for a UI
     component boundary. Raised to 0.4 (~3.45:1) - visually still a
     faint ghost-button border, now passes. Flagged in qa_report.md. */
  border-color:rgba(242, 239, 234, 0.4);
}

.btn-secondary:hover,
.btn-secondary:focus-visible{
  background:var(--color-surface-elevated);
  border-color:var(--color-primary);
}

.text-link{
  display:inline-block;
  font-family:var(--font-body);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color-text);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color var(--duration-subtle) var(--ease-subtle),
             color var(--duration-subtle) var(--ease-subtle);
}

.text-link:hover,
.text-link:focus-visible{
  color:var(--color-accent);
  border-bottom-color:var(--color-accent);
}

/* ============================================================================
   Navigation
   ============================================================================ */

.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-nav);
  background:transparent;
  transition:background-color var(--duration-standard) var(--ease-standard),
             box-shadow var(--duration-standard) var(--ease-standard);
}

.site-header.is-scrolled{
  background:var(--color-surface-elevated);
  box-shadow:var(--shadow-elevated);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:20px;
}

.wordmark{
  font-family:var(--font-display);
  font-size:1.125rem;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.primary-nav{
  display:none;
}

@media (min-width:900px){
  .primary-nav{
    display:flex;
    margin-inline:auto 24px;
  }

  .primary-nav ul{
    display:flex;
    gap:32px;
  }
}

.nav-link{
  font-family:var(--font-body);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:color var(--duration-subtle) var(--ease-subtle),
             border-color var(--duration-subtle) var(--ease-subtle);
}

.nav-link:hover,
.nav-link:focus-visible{
  color:var(--color-text);
}

.nav-link.is-active{
  color:var(--color-text);
  border-bottom-color:var(--color-accent);
}

.nav-cta{
  display:none;
}

@media (min-width:640px){
  .nav-cta{
    display:inline-flex;
    padding:10px 20px;
  }
}

.menu-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;
  height:32px;
  padding:0;
}

@media (min-width:900px){
  .menu-toggle{ display:none; }
}

.menu-toggle-bar{
  display:block;
  width:100%;
  height:1px;
  background:var(--color-text);
  transition:transform var(--duration-subtle) var(--ease-subtle),
             opacity var(--duration-subtle) var(--ease-subtle);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:first-child{
  transform:translateY(3px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:last-child{
  transform:translateY(-3px) rotate(-45deg);
}

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);
  background:var(--color-surface-elevated);
  box-shadow:var(--shadow-elevated);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--space-lg);
  padding:32px;
  transform:translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--duration-subtle) var(--ease-subtle),
             transform var(--duration-subtle) var(--ease-subtle);
}

.mobile-menu.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

@media (min-width:900px){
  .mobile-menu{ display:none; }
}

.mobile-menu ul{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.mobile-menu a.nav-link{
  font-size:1.5rem;
  font-family:var(--font-display);
  text-transform:none;
  letter-spacing:0;
  color:var(--color-text);
}

.mobile-menu-close{
  position:absolute;
  top:24px;
  right:20px;
  width:32px;
  height:32px;
  font-family:var(--font-body);
  font-size:1.5rem;
  line-height:1;
  color:var(--color-text);
}

@media (min-width:640px){
  .mobile-menu-close{ right:32px; }
}

/* ============================================================================
   Layout rhythm
   ============================================================================ */

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

@media (min-width:1024px){
  .section{ padding-block:var(--space-xl); }
}

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

.section-header{
  margin-bottom:var(--space-lg);
}

.section-header .type-label{
  display:block;
  margin-bottom:12px;
}

/* ============================================================================
   Hero (Home)
   ============================================================================ */

.hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:640px;
  padding-block:96px 64px;
  overflow:hidden;
}

@media (min-width:1024px){
  .hero{
    min-height:88vh;
    padding-block:64px 96px;
  }
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

/* One-time Ken Burns settle on load - a reveal of the photograph itself,
   never a loop (per DESIGN.md "Reveal, Don't Perform"). */
.hero-media img{
  transform:scale(1.08);
  animation:hero-media-in 1.8s var(--ease-standard) forwards;
}

@keyframes hero-media-in{
  to{ transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .hero-media img{ animation:none; transform:scale(1); }
}

.hero-overlay{
  position:absolute;
  inset:0;
  /* Legibility gradient, not a decorative hue-shift scrim: near-black
     under the copy (bottom, where .hero content sits), most of the
     photograph left to read clearly above it. */
  background:linear-gradient(
    to top,
    rgba(11, 11, 10, 0.55) 0%,
    rgba(11, 11, 10, 0.28) 38%,
    rgba(11, 11, 10, 0.08) 68%,
    rgba(11, 11, 10, 0.02) 100%
  );
  z-index:1;
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:46rem;
}

.hero-content .type-display{
  margin-bottom:var(--space-md);
}

.hero-content .type-body{
  color:var(--color-text);
  margin-bottom:var(--space-md);
  max-width:52ch;
}

/* ============================================================================
   Media placeholders - stand-ins for real project photography.
   Warm dark gradients derived from the surface scale + a faint diagonal
   grain, never a flat banal color and never an external placeholder image.
   ============================================================================ */

.media-placeholder{
  position:relative;
  background-color:var(--color-surface);
  background-image:
    repeating-linear-gradient(115deg, rgba(242,239,234,0.025) 0px, rgba(242,239,234,0.025) 1px, transparent 1px, transparent 4px),
    linear-gradient(155deg, #201E1A 0%, #15130F 55%, #0E0D0B 100%);
  overflow:hidden;
}

.media-placeholder::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 30% 20%, rgba(242,239,234,0.05), transparent 60%);
}

/* Real photography (Pexels-sourced, downloaded locally into images/) sits
   over the gradient base - if a request fails the img hides itself (see
   inline onerror) and the warm gradient placeholder shows through instead
   of a broken-image icon. */
.media-placeholder img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-placeholder--1{ background-image:
    repeating-linear-gradient(115deg, rgba(242,239,234,0.025) 0px, rgba(242,239,234,0.025) 1px, transparent 1px, transparent 4px),
    linear-gradient(150deg, #211E19 0%, #17140F 50%, #0D0C0A 100%); }
.media-placeholder--2{ background-image:
    repeating-linear-gradient(65deg, rgba(242,239,234,0.02) 0px, rgba(242,239,234,0.02) 1px, transparent 1px, transparent 5px),
    linear-gradient(200deg, #1E1C18 0%, #14120E 55%, #0B0A09 100%); }
.media-placeholder--3{ background-image:
    repeating-linear-gradient(140deg, rgba(242,239,234,0.03) 0px, rgba(242,239,234,0.03) 1px, transparent 1px, transparent 6px),
    linear-gradient(170deg, #201D17 0%, #16130E 50%, #0C0B09 100%); }
.media-placeholder--4{ background-image:
    repeating-linear-gradient(95deg, rgba(242,239,234,0.022) 0px, rgba(242,239,234,0.022) 1px, transparent 1px, transparent 5px),
    linear-gradient(190deg, #1D1B17 0%, #151310 55%, #0D0C0A 100%); }
.media-placeholder--5{ background-image:
    repeating-linear-gradient(30deg, rgba(242,239,234,0.024) 0px, rgba(242,239,234,0.024) 1px, transparent 1px, transparent 4px),
    linear-gradient(160deg, #221F1A 0%, #17140F 50%, #0D0C0A 100%); }
.media-placeholder--6{ background-image:
    repeating-linear-gradient(150deg, rgba(242,239,234,0.02) 0px, rgba(242,239,234,0.02) 1px, transparent 1px, transparent 5px),
    linear-gradient(210deg, #1F1C18 0%, #16130F 55%, #0C0B09 100%); }

.hero-media.media-placeholder{
  /* Wins over the later, same-specificity ".media-placeholder { position:relative }"
     rule via the two-class selector, not source order - without this the hero
     media div loses its absolute positioning, collapses to zero height, and the
     img inside (sized to 100% of its height) becomes invisible. */
  position:absolute;
  inset:0;
  background-color:var(--color-background);
}

.media-placeholder-tag{
  position:absolute;
  bottom:12px;
  left:12px;
  font-family:var(--font-body);
  font-size:0.6875rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(163, 154, 142, 0.55);
  z-index:1;
}

/* ============================================================================
   Project cards / grid
   ============================================================================ */

.project-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg) var(--space-md);
}

@media (min-width:640px){
  .project-grid{ grid-template-columns:repeat(2, 1fr); }
}

.project-grid.cols-4{
  gap:var(--space-md);
}

@media (min-width:1024px){
  .project-grid.cols-4{ grid-template-columns:repeat(4, 1fr); }
  .project-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
}

.project-card{
  display:block;
}

/* Three cards on the Projects page (Courtyard House, Mere Coffee Roastery,
   Aldgate Wine Bar) intentionally have no case-study detail and no link -
   see copy_projects.md. ".project-card--static" opts them out of the
   pointer cursor and hover affordance below, so the card never implies a
   click target it can't honor. */
.project-card:not(.project-card--static){ cursor:pointer; }

a.project-card{ text-decoration:none; }

.project-card-media{
  aspect-ratio:4 / 3;
  border-radius:var(--radius-md);
  transition:transform var(--duration-subtle) var(--ease-subtle);
}

.project-card:not(.project-card--static):hover .project-card-media,
.project-card:not(.project-card--static):focus-visible .project-card-media{
  transform:scale(1.02);
}

.project-card-index{
  font-family:var(--font-display);
  font-size:0.75rem;
  color:var(--color-text-muted);
  letter-spacing:0.04em;
  margin-top:16px;
}

.project-card-title{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:500;
  margin-top:4px;
}

.project-card-meta{
  display:inline-block;
  font-family:var(--font-body);
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  border-bottom:1px solid transparent;
  margin-top:6px;
  transition:border-color var(--duration-subtle) var(--ease-subtle);
}

.project-card:not(.project-card--static):hover .project-card-meta,
.project-card:not(.project-card--static):focus-visible .project-card-meta{
  border-bottom-color:var(--color-accent);
}

.project-card-link{
  display:block;
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-top:10px;
  opacity:0;
  transition:opacity var(--duration-subtle) var(--ease-subtle);
}

.project-card:hover .project-card-link,
.project-card:focus-visible .project-card-link{
  opacity:1;
}

/* ============================================================================
   Filter tabs (Projects)
   ============================================================================ */

.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.filter-tab{
  font-family:var(--font-body);
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  padding:10px 18px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  transition:color var(--duration-subtle) var(--ease-subtle),
             border-color var(--duration-subtle) var(--ease-subtle),
             background-color var(--duration-subtle) var(--ease-subtle);
}

.filter-tab:hover,
.filter-tab:focus-visible{
  color:var(--color-text);
}

.filter-tab[aria-pressed="true"]{
  color:var(--color-background);
  background:var(--color-primary);
  border-color:var(--color-primary);
}

/* ============================================================================
   Case-study detail block
   ============================================================================ */

/* No-Line Rule (DESIGN.md): sections are separated by spacing on the
   surface scale, never a drawn divider - padding-block alone (already
   --space-lg on both sides, so ~128px between two case-study blocks)
   carries the separation that a border used to. */
.case-study{
  padding-block:var(--space-lg);
}

.case-study-media{
  aspect-ratio:16 / 9;
  border-radius:var(--radius-md);
  margin-bottom:var(--space-md);
}

@media (min-width:1024px){
  .case-study-media{ aspect-ratio:21 / 9; }
}

.case-study-quote{
  max-width:36ch;
  margin-bottom:var(--space-md);
}

.spec-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px 32px;
  max-width:640px;
  margin-bottom:var(--space-md);
}

@media (min-width:640px){
  .spec-list{ grid-template-columns:1fr 1fr; }
}

.spec-item{
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--color-border);
  padding-bottom:8px;
}

.spec-item .spec-label{
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}

.spec-item .spec-value{
  font-size:0.9375rem;
  text-align:right;
}

/* ============================================================================
   Philosophy layout (Studio)
   ============================================================================ */

.philosophy-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
  align-items:start;
}

@media (min-width:1024px){
  .philosophy-grid{
    grid-template-columns:3fr 2fr;
    gap:var(--space-xl);
  }
}

.philosophy-media{
  aspect-ratio:3 / 4;
  border-radius:var(--radius-md);
}

.philosophy-copy > * + *{
  margin-top:var(--space-md);
}

/* ============================================================================
   Approach / Principle blocks
   ============================================================================ */

.principle-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-md);
}

@media (min-width:640px){
  .principle-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
}

@media (min-width:1024px){
  .principle-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
}

/* No-Line Rule (DESIGN.md): grid gap (--space-md) already separates each
   principle item from its neighbors - a top rule was a redundant
   decorative divider on top of that spacing. */
.principle-item{
  padding-top:var(--space-md);
}

.principle-item .type-label{
  margin-bottom:12px;
}

/* ============================================================================
   Team
   ============================================================================ */

.team-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--space-md) var(--space-md);
}

@media (min-width:640px){
  .team-grid{ grid-template-columns:repeat(3, 1fr); }
}

.team-item-media{
  aspect-ratio:3 / 4;
  border-radius:var(--radius-sm);
  margin-bottom:12px;
}

.team-item-name{
  font-size:0.875rem;
  font-weight:500;
}

.team-item-role{
  font-size:0.75rem;
  color:var(--color-text-muted);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-top:2px;
}

/* ============================================================================
   CTA final block
   ============================================================================ */

/* No-Line Rule (DESIGN.md): the section above already ends with its own
   padding-block, so padding-block here alone reads as a clear break
   without a drawn divider. */
.cta-final{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-md);
  padding-block:var(--space-lg);
}

@media (min-width:900px){
  .cta-final{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

.cta-final-copy{
  max-width:36rem;
}

.cta-final-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.cta-final-micro{
  color:var(--color-text-muted);
  font-size:0.9375rem;
}

/* ============================================================================
   Contact form
   ============================================================================ */

.contact-form{
  max-width:32rem;
}

.form-field{
  margin-bottom:var(--space-lg);
}

.form-field label{
  display:block;
  font-family:var(--font-body);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  margin-bottom:10px;
}

.form-field .field-helper{
  display:block;
  font-size:0.8125rem;
  color:var(--color-text-muted);
  margin-top:8px;
}

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background:var(--color-surface);
  color:var(--color-text);
  border:none;
  border-bottom:1px solid var(--color-border);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  padding:12px 4px;
  font-family:var(--font-body);
  font-size:1rem;
  outline:none;
  transition:border-color var(--duration-subtle) var(--ease-subtle),
             border-width var(--duration-subtle) var(--ease-subtle);
}

.form-field textarea{
  min-height:120px;
  resize:vertical;
}

.form-field select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
                    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:calc(100% - 14px) center, calc(100% - 9px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-bottom:2px solid var(--color-accent);
  padding-bottom:11px;
}

.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown){
  border-bottom-color:var(--color-error);
}

.field-error{
  display:none;
  font-size:0.8125rem;
  color:var(--color-error);
  margin-top:8px;
}

.form-field input:invalid:not(:placeholder-shown) ~ .field-error,
.form-field textarea:invalid:not(:placeholder-shown) ~ .field-error{
  display:block;
}

.form-submit{
  margin-top:var(--space-md);
}

.form-confirmation{
  max-width:36rem;
}

.form-confirmation .type-headline{
  margin-bottom:12px;
}

/* ============================================================================
   Footer
   ============================================================================ */

/* No-Line Rule (DESIGN.md): the footer reads as its own layer via the
   surface tone step (background -> surface), not a drawn line, matching
   the system's stated hierarchy method. */
.site-footer{
  background:var(--color-surface);
  padding-block:var(--space-lg) 48px;
  color:var(--color-text-muted);
}

.site-footer.is-minimal{
  padding-block:48px;
}

.footer-top{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-bottom:24px;
}

@media (min-width:640px){
  .footer-top{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

.footer-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

.footer-nav a{
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  transition:color var(--duration-subtle) var(--ease-subtle);
}

.footer-nav a:hover,
.footer-nav a:focus-visible{
  color:var(--color-text);
}

.footer-disclaimer{
  font-size:0.8125rem;
  font-style:italic;
  max-width:60ch;
}

/* ============================================================================
   Reveal-on-scroll - progressive enhancement only.
   The .js class is added synchronously by an inline script in <head>,
   before first paint, so the hidden state applies with zero flash (no
   visible-then-hidden pop on page load/navigation). script.js then uses a
   native IntersectionObserver (not scroll-position math) to reveal each
   element - GSAP animates it if available, this transition handles it if
   not. Belt and suspenders: if IntersectionObserver is unsupported, or
   the reveal setup throws for any reason, script.js removes the .js class
   entirely and everything renders at its default, fully visible state -
   there is no path left where content can stay stuck invisible.
   ============================================================================ */

.js [data-reveal],
.js [data-reveal-item]{
  opacity:0;
  transform:translateY(14px);
}

.js [data-reveal].reveal-in,
.js [data-reveal-item].reveal-in{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity var(--duration-standard) var(--ease-standard),
    transform var(--duration-standard) var(--ease-standard);
}