/* ==========================================================================
   Bipesi Gokavo — Structured Bold design system
   Spatial-metaphor naming convention throughout
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500&display=swap');

:root{
  --ink:#14232B;
  --ink-soft:#3B4C53;
  --canvas:#FAF8F4;
  --canvas-alt:#F1ECE1;
  --primary:#1B4B5A;
  --primary-dark:#0F333E;
  --secondary:#3E7C8C;
  --accent:#E2872F;
  --accent-light:#F5C77E;
  --sky:#DCEEF2;
  --sand:#F5E3CF;
  --line:#DAD4C6;
  --white:#FFFDF9;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:22px;
  --radius-xl:34px;

  --shadow-sm:0 1px 2px rgba(20,35,43,.07), 0 1px 1px rgba(20,35,43,.05);
  --shadow-md:0 8px 20px -6px rgba(20,35,43,.14), 0 2px 8px rgba(20,35,43,.08);
  --shadow-lg:0 26px 48px -16px rgba(20,35,43,.24), 0 10px 20px -10px rgba(20,35,43,.14);

  --section-pad:clamp(3.25rem, 6vw, 7rem);
  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --ease:cubic-bezier(.22,.9,.32,1);
}

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

html{ scroll-behavior:smooth; }

body.canvas{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  color:var(--primary-dark);
  line-height:1.12;
  margin-block:0 0.6em;
  letter-spacing:-0.01em;
}

h1{ font-weight:700; }
h2{ font-weight:700; }
h3,h4{ font-weight:600; }

p{ margin-block:0 1em; }

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

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

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

.container{
  width:min(1200px, 100% - 2 * var(--gutter));
  margin-inline:auto;
}

section{ padding-block:var(--section-pad); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-block-end:1rem;
}
.eyebrow::before{
  content:'';
  width:22px; height:2px;
  background:var(--accent);
  display:inline-block;
}


.beacon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding-block:.9rem;
  padding-inline:1.7rem;
  border-radius:var(--radius-md);
  background:var(--accent);
  color:var(--white);
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:.98rem;
  border:1px solid transparent;
  cursor:pointer;
  min-height:44px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.beacon:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  background:color-mix(in srgb, var(--accent) 88%, black);
}
.beacon-outline{
  background:transparent;
  color:var(--primary-dark);
  border:1.5px solid var(--primary-dark);
  box-shadow:none;
}
.beacon-outline:hover{
  background:var(--primary-dark);
  color:var(--white);
}
.beacon-ghost{
  background:transparent;
  color:var(--ink-soft);
  border:1.5px solid var(--line);
  box-shadow:none;
}
.beacon-ghost:hover{
  background:var(--canvas-alt);
}
.beacon-light{
  background:var(--white);
  color:var(--primary-dark);
}
.beacon-light:hover{
  background:var(--sand);
}


.nav-wrap{
  position:sticky;
  top:0;
  inset-inline:0;
  z-index:200;
  background:rgba(250,248,244,.92);
  backdrop-filter:blur(10px);
}
.nav-inner{
  width:min(1200px, 100% - 2 * var(--gutter));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:1rem;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--primary-dark);
}
.nav-logo{ height:34px; width:auto; }
.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(1rem, 2vw, 2.2rem);
}
.signpost{
  position:relative;
  font-size:.95rem;
  font-weight:500;
  color:var(--ink-soft);
  padding-block:.4rem;
  transition:color .3s var(--ease);
}
.signpost::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s var(--ease);
}
.signpost:hover, .signpost.is-active{ color:var(--primary-dark); }
.signpost:hover::after, .signpost.is-active::after{ transform:scaleX(1); }

.nav-toggle{
  display:none;
  width:46px; height:46px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  background:var(--white);
  font-size:1.1rem;
  color:var(--primary-dark);
  cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.nav-toggle:hover{ background:var(--canvas-alt); }
.nav-toggle.is-active{ transform:rotate(90deg); }

.nav-seal{
  height:1px;
  background:var(--line);
  transform:scaleX(0);
  transition:transform .5s var(--ease);
}
.nav-wrap.is-sealed .nav-seal{ transform:scaleX(1); }


.drawer{
  display:none;
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:300;
  background:var(--white);
  border-start-start-radius:var(--radius-lg);
  border-start-end-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding-block:.6rem .9rem;
  padding-inline:.4rem;
  transform:translateY(100%);
  transition:transform .4s var(--ease);
  justify-content:space-around;
  align-items:center;
}
.drawer.is-open{ transform:translateY(0); }
.drawer-tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.25rem;
  font-size:.68rem;
  font-weight:500;
  color:var(--ink-soft);
  padding-block:.5rem;
  padding-inline:.4rem;
  border-radius:var(--radius-sm);
  min-width:56px;
  min-height:44px;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.drawer-tab i{ font-size:1.05rem; }
.drawer-tab.is-active{ color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, white); }


.stage{
  position:relative;
  padding-block:clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
  background:linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 55%, var(--secondary) 100%);
  color:var(--white);
  overflow:hidden;
}
.stage::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(20,35,43,.35), rgba(20,35,43,.55)),
    var(--stage-img, none);
  background-size:cover;
  background-position:center;
  opacity:.55;
  z-index:0;
}
.stage-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.stage h1{
  color:var(--white);
  font-size:clamp(2.4rem, 3vw + 1.6rem, 4.4rem);
  max-width:14ch;
}
.stage p.stage-lead{
  font-size:clamp(1.05rem, .4vw + 1rem, 1.2rem);
  color:rgba(255,253,249,.86);
  max-width:46ch;
  margin-block-end:2rem;
}
.stage-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.stage-figure{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
}
.stage-figure img{ width:100%; height:100%; object-fit:cover; }
.stage-badge{
  position:absolute;
  inset-block-end:1.2rem;
  inset-inline-start:1.2rem;
  background:rgba(20,35,43,.72);
  backdrop-filter:blur(6px);
  color:var(--white);
  padding:.75rem 1.1rem;
  border-radius:var(--radius-md);
  font-size:.82rem;
  max-width:230px;
}


.porch{
  background:var(--white);
  border-block:1px solid var(--line);
}
.porch-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.porch h2{ font-size:clamp(1.9rem, 2vw + 1.2rem, 2.6rem); }


.gallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gutter);
  container-type:inline-size;
}
.gallery-box{
  grid-column:span 1;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem, 2vw, 2.2rem);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.gallery-box:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb, var(--secondary) 40%, var(--line));
}
.gallery-box.span-2{ grid-column:span 2; }
.gallery-box.tinted{ background:var(--sky); }
.gallery-box.dark{ background:var(--primary-dark); color:var(--white); }
.gallery-box.dark h3{ color:var(--white); }
.gallery-box .window{
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:16/9;
}
.gallery-box .window img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-box:hover .window img{ transform:scale(1.05); }
.box-icon{
  width:46px; height:46px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--accent) 16%, white);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
}
.gallery-box.dark .box-icon{ background:rgba(255,255,255,.14); color:var(--accent-light); }
.placard{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--secondary);
  background:color-mix(in srgb, var(--secondary) 12%, white);
  padding:.3rem .7rem;
  border-radius:99px;
  align-self:flex-start;
}
@container (max-width: 260px){
  .gallery-box h3{ font-size:1.05rem; }
}


.pedestal-section{ background:var(--canvas-alt); }
.pedestal-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gutter);
}
.pedestal{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:2rem 1.4rem;
  text-align:center;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.pedestal-number{
  font-family:'Fraunces', serif;
  font-size:clamp(2.2rem, 2vw + 1.6rem, 3rem);
  font-weight:700;
  color:var(--primary);
  display:block;
}
.pedestal-label{
  font-size:.9rem;
  color:var(--ink-soft);
  margin-block-start:.4rem;
}
.pedestal-note{
  margin-block-start:2rem;
  font-size:.86rem;
  color:var(--ink-soft);
  max-width:70ch;
}


.wind-section{
  transition:background-color .1s linear;
  background-color:var(--sky);
}
.wind-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.wind-figure{
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;
}
.wind-figure img{ width:100%; height:100%; object-fit:cover; }
.wind-list{ display:flex; flex-direction:column; gap:1rem; margin-block-start:1.5rem; }
.wind-list li{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  background:rgba(255,253,249,.55);
  padding:1rem 1.2rem;
  border-radius:var(--radius-md);
  border:1px solid rgba(20,35,43,.08);
}
.wind-list i{ color:var(--accent); margin-block-start:.2rem; }


.grid-section{ background:var(--primary-dark); color:var(--white); }
.grid-section h2{ color:var(--white); }
.grid-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.grid-list{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-block-start:1.6rem; }
.grid-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-md);
  padding:1.2rem;
}
.grid-item h4{ color:var(--accent-light); font-size:1rem; margin-block-end:.4rem; }
.grid-item p{ color:rgba(255,253,249,.78); font-size:.9rem; margin:0; }
.grid-figure{ border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.grid-figure img{ width:100%; display:block; }


.shelf{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gutter);
}
.easel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.easel:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.easel .window{ aspect-ratio:16/10; overflow:hidden; }
.easel .window img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.easel:hover .window img{ transform:scale(1.06); }
.easel-body{ padding:1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.easel-date{ font-size:.78rem; color:var(--secondary); font-weight:500; letter-spacing:.03em; }
.easel h3{ font-size:1.2rem; }
.easel p{ color:var(--ink-soft); font-size:.94rem; flex:1; }
.easel-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:500;
  color:var(--accent);
  font-size:.92rem;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  min-height:44px;
  align-self:flex-start;
  transition:gap .3s var(--ease);
}
.easel-link:hover{ gap:.7rem; }


.spotlight{
  background:linear-gradient(120deg, var(--secondary), var(--primary));
  border-radius:var(--radius-xl);
  padding:clamp(2.5rem, 5vw, 4.5rem);
  color:var(--white);
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:2rem;
  align-items:center;
  box-shadow:var(--shadow-lg);
}
.spotlight h2{ color:var(--white); font-size:clamp(1.8rem, 2vw + 1.2rem, 2.6rem); }
.spotlight p{ color:rgba(255,253,249,.86); }
.spotlight-actions{ display:flex; flex-direction:column; gap:.9rem; }


.vault{
  background:var(--primary-dark);
  color:rgba(255,253,249,.82);
  padding-block:clamp(3rem, 5vw, 4.5rem) 2rem;
}
.vault-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(2rem, 4vw, 3rem);
}
.vault h4{ color:var(--white); font-size:1rem; margin-block-end:1rem; }
.vault-brand{ display:flex; align-items:center; gap:.6rem; margin-block-end:1rem; }
.vault-brand span{ font-family:'Fraunces', serif; font-weight:700; color:var(--white); font-size:1.1rem; }
.vault-logo{ height:32px; }
.vault a{ color:rgba(255,253,249,.78); transition:color .3s var(--ease); }
.vault a:hover{ color:var(--accent-light); }
.vault-list{ display:flex; flex-direction:column; gap:.6rem; font-size:.92rem; }
.vault-bottom{
  margin-block-start:2.5rem;
  padding-block-start:1.5rem;
  border-block-start:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  font-size:.8rem;
  color:rgba(255,253,249,.6);
}


.stage-curtain{
  position:fixed;
  inset:0;
  background:rgba(15,25,30,.6);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  z-index:500;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.stage-curtain.is-open{ opacity:1; visibility:visible; }
.modal-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  max-width:640px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  padding:2rem;
  position:relative;
  box-shadow:var(--shadow-lg);
  transform:translateY(16px);
  transition:transform .35s var(--ease);
}
.stage-curtain.is-open .modal-card{ transform:translateY(0); }
.modal-close{
  position:absolute;
  inset-block-start:1rem;
  inset-inline-end:1rem;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--white);
  cursor:pointer;
  font-size:1rem;
  color:var(--ink-soft);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.modal-close:hover{ background:var(--canvas-alt); transform:rotate(90deg); }
.modal-image{ width:100%; border-radius:var(--radius-md); aspect-ratio:16/9; object-fit:cover; margin-block-end:1.2rem; }
.modal-title{ font-size:1.5rem; margin-block-end:.7rem; }
.modal-body p{ color:var(--ink-soft); }


.cookie-link{
  position:fixed;
  inset-block-end:1.1rem;
  inset-inline-start:1.1rem;
  z-index:400;
  display:flex;
  align-items:center;
  gap:.5rem;
  background:var(--white);
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:99px;
  padding:.55rem 1rem;
  font-size:.78rem;
  font-weight:500;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.cookie-link:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.cookie-link i{ color:var(--accent); }
.cookie-link.is-pulsing{ animation:cookiePulse 1.8s ease-in-out 3; }
@keyframes cookiePulse{
  0%,100%{ box-shadow:var(--shadow-sm); }
  50%{ box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 18%, transparent); }
}
.cookie-modal{
  background:var(--white);
  border-radius:var(--radius-lg);
  max-width:480px;
  width:100%;
  padding:2rem;
  position:relative;
  box-shadow:var(--shadow-lg);
}
.cookie-option{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding-block:.9rem;
  border-block-start:1px solid var(--line);
}
.cookie-option p{ font-size:.82rem; color:var(--ink-soft); margin:.2rem 0 0; }
.switch{ position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:var(--line); border-radius:99px; cursor:pointer; transition:background .3s var(--ease); }
.slider::before{ content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:var(--white); border-radius:50%; transition:transform .3s var(--ease); }
.switch input:checked + .slider{ background:var(--accent); }
.switch input:checked + .slider::before{ transform:translateX(18px); }
.switch input:disabled + .slider{ opacity:.5; cursor:default; }
.cookie-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-block-start:1.4rem; }
.cookie-fine-print{ font-size:.78rem; color:var(--ink-soft); margin-block-start:1rem; }


.form-card{
  background:var(--white);
  border-radius:var(--radius-xl);
  padding:clamp(1.8rem, 4vw, 3rem);
  box-shadow:var(--shadow-md);
  border:1px solid var(--line);
}
.form-progress{ display:flex; align-items:center; gap:1rem; margin-block-end:2rem; }
.form-progress-track{ flex:1; height:5px; background:var(--canvas-alt); border-radius:99px; overflow:hidden; }
.form-progress-fill{ height:100%; width:50%; background:var(--accent); transition:width .5s var(--ease); }
.form-step-label{ font-size:.82rem; font-weight:500; color:var(--secondary); white-space:nowrap; }
.form-step{ display:none; flex-direction:column; gap:1.2rem; }
.form-step.is-active{ display:flex; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.88rem; font-weight:500; color:var(--ink-soft); }
.field input, .field textarea{
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  padding:.85rem 1rem;
  font-family:'Inter', sans-serif;
  font-size:.96rem;
  color:var(--ink);
  background:var(--canvas);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  min-height:44px;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--secondary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--secondary) 18%, transparent);
}
.field-check{ display:flex; align-items:flex-start; gap:.7rem; }
.field-check input{ width:20px; height:20px; margin-block-start:.15rem; accent-color:var(--accent); }
.field-check label{ font-size:.86rem; color:var(--ink-soft); font-weight:400; }
.form-actions{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between; align-items:center; }


.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.contact-info-card{
  background:var(--sky);
  border-radius:var(--radius-lg);
  padding:2rem;
  margin-block-end:1.5rem;
}
.contact-info-card .info-row{ display:flex; gap:.9rem; align-items:flex-start; margin-block-end:1.1rem; }
.contact-info-card .info-row:last-child{ margin-block-end:0; }
.contact-info-card i{ color:var(--primary); font-size:1.1rem; margin-block-start:.15rem; }
.map-frame{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line); }
.map-frame iframe{ width:100%; height:280px; border:0; display:block; }

.faq-list{ display:flex; flex-direction:column; gap:1rem; margin-block-start:1.5rem; }
.faq-item{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.2rem 1.4rem; }
.faq-item h4{ font-size:1rem; margin-block-end:.4rem; display:flex; gap:.6rem; align-items:center; }
.faq-item h4 i{ color:var(--accent); }
.faq-item p{ color:var(--ink-soft); font-size:.92rem; margin:0; }


.ledger{ position:relative; margin-block-start:3rem; padding-inline-start:2.2rem; }
.ledger::before{
  content:'';
  position:absolute;
  inset-inline-start:6px;
  top:0; bottom:0;
  width:2px;
  background:var(--line);
}
.milestone{ position:relative; padding-block-end:2.6rem; }
.milestone:last-child{ padding-block-end:0; }
.milestone::before{
  content:'';
  position:absolute;
  inset-inline-start:-2.2rem;
  top:.3rem;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid var(--canvas);
  box-shadow:0 0 0 2px var(--line);
}
.milestone-date{
  display:inline-block;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--secondary);
  background:color-mix(in srgb, var(--secondary) 12%, white);
  padding:.3rem .8rem;
  border-radius:99px;
  margin-block-end:.9rem;
}
.milestone h3, .milestone h4{ margin-block-end:.7rem; }
.milestone p, .milestone li{ color:var(--ink-soft); font-size:.96rem; }
.milestone li{ margin-block-end:.4rem; }
.legal-hero{ background:var(--canvas-alt); border-block-end:1px solid var(--line); }
.legal-hero h1{ font-size:clamp(2rem, 2vw + 1.4rem, 3rem); }


.thanks-stage{ padding-block:clamp(4rem, 8vw, 7rem); text-align:center; }
.envelope-scene{ perspective:900px; display:flex; justify-content:center; margin-block-end:2.5rem; }
.envelope{ position:relative; width:190px; height:130px; }
.envelope-back{
  position:absolute; inset:0;
  background:var(--secondary);
  border-radius:10px;
}
.envelope-letter{
  position:absolute;
  left:14%; right:14%; top:-46px;
  height:86px;
  background:var(--white);
  border-radius:6px;
  box-shadow:0 8px 18px rgba(20,35,43,.18);
  transform:translateY(50px);
  animation:letterUp 1s var(--ease) forwards;
  animation-delay:.9s;
  z-index:1;
  display:flex; align-items:center; justify-content:center;
}
.envelope-letter i{ color:var(--accent); font-size:1.4rem; }
.envelope-front{
  position:absolute; left:0; right:0; bottom:0; height:78px;
  background:var(--primary);
  border-radius:0 0 10px 10px;
  z-index:2;
}
.envelope-flap{
  position:absolute; top:0; left:0; right:0; height:65px;
  background:var(--primary-dark);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform:rotateX(0deg);
  animation:flapOpen .8s var(--ease) forwards;
  animation-delay:.2s;
  z-index:3;
}
@keyframes flapOpen{ to{ transform:rotateX(180deg); } }
@keyframes letterUp{ to{ transform:translateY(-32px); } }
.thanks-stage h1{ font-size:clamp(2rem, 2vw + 1.4rem, 2.8rem); }
.thanks-stage p{ max-width:52ch; margin-inline:auto; color:var(--ink-soft); }


.text-center{ text-align:center; }
.mt-lg{ margin-block-start:3rem; }
.section-head{ max-width:60ch; margin-block-end:2.5rem; }
.section-head.centered{ margin-inline:auto; text-align:center; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px){
  .stage-grid{ grid-template-columns:1fr; }
  .stage-figure{ aspect-ratio:16/10; }
  .porch-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2, 1fr); }
  .gallery-box.span-2{ grid-column:span 2; }
  .pedestal-row{ grid-template-columns:repeat(2, 1fr); }
  .wind-grid{ grid-template-columns:1fr; }
  .grid-columns{ grid-template-columns:1fr; }
  .grid-list{ grid-template-columns:1fr 1fr; }
  .shelf{ grid-template-columns:1fr 1fr; }
  .spotlight{ grid-template-columns:1fr; text-align:left; }
  .vault-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .drawer{ display:flex; }
  .gallery{ grid-template-columns:1fr; }
  .gallery-box.span-2{ grid-column:span 1; }
  .pedestal-row{ grid-template-columns:1fr 1fr; }
  .shelf{ grid-template-columns:1fr; }
  .grid-list{ grid-template-columns:1fr; }
  .vault-grid{ grid-template-columns:1fr; gap:2rem; }
  .form-actions{ flex-direction:column; align-items:stretch; }
  body.canvas{ padding-block-end:78px; }
  .cookie-link span{ display:none; }
  .cookie-link{ padding:.7rem; }
}