@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Montserrat:wght@300;400;500;600&display=swap');

:root{
  --paper:#f7f2e8;
  --paper-soft:#fbf8f2;
  --ink:#28353a;
  --muted:#6e7778;
  --sea:#486f7c;
  --sea-dark:#355762;
  --gold:#ad8b5d;
  --line:rgba(62,84,88,.20);
  --shadow:0 20px 55px rgba(38,50,53,.09);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Montserrat", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  text-rendering:optimizeLegibility;
}
img{display:block;width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit}
.skip-link{
  position:fixed;left:1rem;top:-100px;z-index:100;
  background:#fff;padding:.7rem 1rem;border-radius:999px
}
.skip-link:focus{top:1rem}

.hero{
  min-height:min(92svh,900px);
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#d7e3e2;
}
.hero-image{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 58%;
}
.hero-wash{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(247,242,232,.88) 0%,
      rgba(247,242,232,.58) 20%,
      rgba(247,242,232,.18) 48%,
      rgba(247,242,232,.10) 67%,
      rgba(247,242,232,.42) 100%),
    radial-gradient(circle at 50% 20%,
      rgba(247,242,232,.76) 0%,
      rgba(247,242,232,.38) 32%,
      rgba(247,242,232,0) 62%);
}
.hero-content{
  position:relative;z-index:2;text-align:center;
  width:min(880px,88vw);
  margin-top:-8vh;
}
.eyebrow,.section-kicker{
  margin:0 0 .7rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-weight:600;
}
.hero h1{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(3.8rem,8.4vw,7.5rem);
  line-height:.82;
  letter-spacing:-.035em;
  color:#243237;
  text-shadow:
    0 1px 0 rgba(255,255,255,.72),
    0 4px 20px rgba(247,242,232,.88),
    0 0 34px rgba(247,242,232,.62);
}
.hero h1 span{display:block}
.hero h1 em{
  display:block;
  font-size:.56em;
  font-weight:400;
  line-height:.95;
  color:var(--gold);
}
.hero-place{
  margin:1.1rem 0 1.7rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.35rem,3vw,1.8rem);
}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.76rem 1.35rem;
  border:1px solid transparent;border-radius:999px;
  text-decoration:none;cursor:pointer;
  font-size:.78rem;font-weight:600;letter-spacing:.06em;
  transition:.2s ease;
}
.button.primary{background:var(--sea-dark);color:#fff}
.button.primary:hover{background:#27464f;transform:translateY(-1px)}
.hero-cta{box-shadow:0 10px 28px rgba(36,62,69,.20)}
.scroll-cue{
  position:absolute;z-index:2;bottom:1.4rem;left:50%;
  width:34px;height:50px;transform:translateX(-50%);
  display:grid;place-items:center;text-decoration:none;
}
.scroll-cue span{
  width:1px;height:28px;background:rgba(40,53,58,.65);position:relative;
}
.scroll-cue span::after{
  content:"";position:absolute;bottom:0;left:-3px;
  width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}

.place-section{padding:clamp(4rem,8vw,8rem) max(5vw,1.25rem)}
.place-section.reception{background:var(--paper-soft)}
.place-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.35fr);
  gap:clamp(2rem,6vw,6rem);align-items:center;
}
.place-grid.reverse{grid-template-columns:minmax(0,.8fr) minmax(280px,.72fr)}
.place-copy{max-width:470px}
.place-mobile-kicker{display:none}
.place-copy h2,.compact-heading h2{
  margin:.15rem 0 .45rem;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.7rem,5.2vw,4.8rem);
  line-height:.95;
  letter-spacing:-.025em;
}
.place-location{
  margin:.9rem 0 .15rem;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.15em;font-weight:600;
}
.place-date{margin:1.25rem 0 .1rem;font-family:var(--serif);font-size:1.4rem}
.place-note{margin:1.2rem 0 0;max-width:34ch}
.muted{margin:.1rem 0 0;color:var(--muted);font-style:italic;font-family:var(--serif);font-size:1.18rem}
.text-link{
  display:inline-block;margin-top:1.45rem;
  color:var(--sea-dark);text-decoration:none;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  border-bottom:1px solid rgba(53,87,98,.35);padding-bottom:.18rem
}
.text-link span{display:inline-block;margin-left:.35rem;transition:.2s}
.text-link:hover span{transform:translateX(3px)}
.place-figure{margin:0;overflow:hidden;background:#e9e1d5;box-shadow:var(--shadow)}
.place-figure.landscape{border-radius:52% 48% 4% 4% / 8% 8% 4% 4%}
.place-figure.landscape img{aspect-ratio:16/10;object-fit:cover}
.place-figure.portrait{
  border-radius:220px 220px 14px 14px;
  max-width:560px;justify-self:start;
}
.place-figure.portrait img{aspect-ratio:3/4;object-fit:cover}

.day-section{
  padding:clamp(4.5rem,8vw,7rem) max(5vw,1.25rem);
  background:#f2ecdf;
}
.compact-heading{text-align:center;max-width:760px;margin:0 auto 3rem}
.compact-heading .intro{
  margin:.8rem auto 0;max-width:42ch;color:var(--muted);font-family:var(--serif);font-size:1.25rem
}
.day-timeline{max-width:660px;margin:0 auto;position:relative}
.day-timeline::before{
  content:"";position:absolute;left:72px;top:52px;bottom:52px;
  width:1px;background:linear-gradient(var(--line),rgba(173,139,93,.45),var(--line));
}
.day-step{
  position:relative;display:grid;grid-template-columns:145px 1fr;
  align-items:center;min-height:150px;
}
.day-step::after{
  content:"";position:absolute;left:68px;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:1px solid var(--gold);
}
.sketch{
  width:82px;height:82px;display:grid;place-items:center;
  background:rgba(255,255,255,.35);border-radius:50%;
}
.sketch svg{width:64px;height:64px;overflow:visible}
.sketch path,.sketch ellipse{
  fill:none;stroke:var(--sea-dark);stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;
}
.sketch .soft{stroke:var(--gold);stroke-width:1.05}
.day-step h3{
  margin:0;font-family:var(--serif);font-size:2rem;font-weight:500;line-height:1
}
.day-step p{margin:.35rem 0 0;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:1.1rem}

.rsvp-section{padding:clamp(2.25rem,4vw,3.5rem) max(5vw,1.25rem) clamp(4.5rem,8vw,7rem);background:var(--paper-soft)}
.rsvp-banner{
  width:min(1180px,100%);
  margin:0 auto 3rem;
  position:relative;
  overflow:hidden;
}
.rsvp-banner img{
  width:100%;
  display:block;
  aspect-ratio:1952/364;
  object-fit:cover;
  object-position:center center;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  mask-composite:intersect;
}
.rsvp-figure{display:none}
.rsvp-form{
  width:min(760px,100%);margin:0 auto;
  background:rgba(255,255,255,.58);
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(1.3rem,4vw,2.7rem);
  box-shadow:0 20px 60px rgba(62,70,71,.06);
}
.rsvp-form>label,.guest-row label{
  display:grid;gap:.45rem;margin-bottom:1.1rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.10em;font-weight:600;
}
input,select,textarea{
  width:100%;border:1px solid rgba(63,83,87,.23);
  background:rgba(255,255,255,.82);color:var(--ink);
  border-radius:9px;padding:.85rem .9rem;
  font-size:16px;text-transform:none;letter-spacing:normal;font-weight:400;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:var(--sea);box-shadow:0 0 0 3px rgba(72,111,124,.11);
}
.website-field{position:absolute!important;left:-10000px!important}
.attendance-details[hidden]{display:none}
.guests-fieldset{
  border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.2rem 0;margin:1.2rem 0 1.4rem;
}
.guests-fieldset legend{font-family:var(--serif);font-size:1.5rem;padding:0 .5rem 0 0}
.field-help,.form-note{color:var(--muted);font-size:.78rem;line-height:1.6}
.guest-row{
  position:relative;padding:1.15rem;margin:1rem 0;background:rgba(247,242,232,.78);
  border-radius:12px;border:1px solid rgba(63,83,87,.12);
}
.add-guest,.remove-guest{
  border:0;background:none;color:var(--sea-dark);padding:.35rem 0;
  font-weight:600;font-size:.78rem;cursor:pointer
}
.add-guest span{font-size:1.2rem;margin-right:.35rem}
.remove-guest{color:#8a5550}
.submit-button{width:100%;margin-top:.4rem}
.form-status{min-height:1.2rem;margin:.8rem 0 0;text-align:center;font-size:.84rem}
.form-status.error{color:#8d423c}
.form-status.success{color:#456e5b}

.useful-section{padding:clamp(4rem,7vw,6rem) max(5vw,1.25rem)}
.useful-grid{
  max-width:850px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.useful-grid article{background:var(--paper);padding:clamp(1.4rem,4vw,2.4rem)}
.useful-grid h3{margin:0 0 .45rem;font-family:var(--serif);font-size:1.7rem;font-weight:500}
.useful-grid p{margin:0;color:var(--muted);font-size:.9rem}

.closing{text-align:center;padding:4.5rem 1.25rem 5.2rem;background:var(--sea-dark);color:#f8f3e9}
.closing-rule{width:52px;height:1px;background:rgba(255,255,255,.5);margin:0 auto 1.8rem}
.closing-names{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.5rem);margin:0;line-height:1}
.closing-names em{color:#d7bd93;font-weight:400}
.closing-date{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;margin:1rem 0}
.closing-line{font-family:var(--serif);font-style:italic;font-size:1.08rem;margin:0;color:rgba(255,255,255,.78)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width: 820px){
  .hero{min-height:78svh}
  .hero-image{object-position:center center}
  .hero-wash{
    background:
      linear-gradient(180deg,
        rgba(247,242,232,.92) 0%,
        rgba(247,242,232,.64) 24%,
        rgba(247,242,232,.22) 50%,
        rgba(247,242,232,.14) 70%,
        rgba(247,242,232,.46) 100%),
      radial-gradient(circle at 50% 18%,
        rgba(247,242,232,.80) 0%,
        rgba(247,242,232,.42) 34%,
        rgba(247,242,232,0) 67%);
  }
  .hero-content{margin-top:-3vh;width:92vw}
  .hero h1{font-size:clamp(3.5rem,14vw,5.9rem)}
  .place-section{padding:4.2rem 1.1rem}
  .place-grid,.place-grid.reverse{grid-template-columns:1fr;gap:2rem}
  .place-mobile-kicker{display:block;order:0;text-align:center;margin:0 0 -.55rem}
  .place-copy{max-width:100%;text-align:center;order:2;padding:0 .65rem}
  .place-copy>.section-kicker{display:none}
  .place-figure{order:1}
  .place-figure.landscape{border-radius:40px 40px 8px 8px}
  .place-figure.landscape img{aspect-ratio:4/3}
  .place-figure.portrait{width:min(88vw,520px);justify-self:center;border-radius:180px 180px 10px 10px}
  .place-copy h2{font-size:clamp(2.7rem,11vw,4rem)}
  .day-section{padding:4.2rem 1rem}
  .compact-heading{margin-bottom:2rem}
  .compact-heading h2{font-size:3.2rem}
  .day-timeline{max-width:460px}
  .day-timeline::before{left:45px}
  .day-step{grid-template-columns:98px 1fr;min-height:130px}
  .day-step::after{left:41px}
  .sketch{width:72px;height:72px}
  .sketch svg{width:57px;height:57px}
  .day-step h3{font-size:1.8rem}
  .rsvp-section{padding:4.2rem 1rem}
  .rsvp-banner{display:none}
  .rsvp-figure{
    display:block;
    margin:1rem auto 1.35rem;
    width:min(100%,520px);
    max-width:min(88vw,520px);
    overflow:hidden;
    background:transparent;
    box-shadow:none;
    border-radius:0;
  }
  .rsvp-figure img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    object-position:center center;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
    mask-composite:intersect;
  }
  .rsvp-form{padding:1.2rem}
  .useful-section{padding:4rem 1rem}
  .useful-grid{grid-template-columns:1fr}
}
@media (max-width: 480px){
  body{font-size:15px}
  .hero{min-height:72svh}
  .hero-image{object-position:center 55%}
  .hero-content{margin-top:-1rem}
  .eyebrow{font-size:.65rem}
  .hero h1{font-size:clamp(3.1rem,14.5vw,4.5rem)}
  .hero-place{margin:.8rem 0 1.25rem}
  .button{min-height:46px}
  .scroll-cue{display:none}
  .place-section{padding:3.5rem 1rem}
  .place-grid{gap:1.5rem}
  .place-figure.landscape img{aspect-ratio:1.25/1}
  .place-figure.portrait{width:91vw}
  .rsvp-figure{max-width:91vw}
  .rsvp-figure img{width:100%;height:auto;object-fit:contain;object-position:center center}
  .day-step{grid-template-columns:90px 1fr}
  .day-timeline::before{left:41px}
  .day-step::after{left:37px}
  .sketch{width:68px;height:68px}
  .day-step h3{font-size:1.65rem}
  .day-step p{font-size:1rem}
  .useful-grid article{padding:1.4rem}
  .closing-names{
    white-space:nowrap;
    font-size:clamp(1.75rem,7.8vw,2.25rem);
    letter-spacing:-.02em;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}


/* V3.1 — Scroll motion */
.hero-image{
  transform:translate3d(0,var(--hero-parallax,0px),0) scale(1.025);
  will-change:transform;
}
.hero-content{
  transform:translate3d(0,var(--hero-content-shift,0px),0);
  opacity:var(--hero-content-opacity,1);
  will-change:transform,opacity;
}

.reveal{
  --reveal-delay:0ms;
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:
    opacity .85s cubic-bezier(.22,.61,.36,1) var(--reveal-delay),
    transform .85s cubic-bezier(.22,.61,.36,1) var(--reveal-delay);
}
.reveal.reveal-left{transform:translate3d(-28px,14px,0)}
.reveal.reveal-right{transform:translate3d(28px,14px,0)}
.reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

.place-grid > :nth-child(1){--reveal-delay:0ms}
.place-grid > :nth-child(2){--reveal-delay:120ms}
.useful-grid article:nth-child(1){--reveal-delay:0ms}
.useful-grid article:nth-child(2){--reveal-delay:100ms}

/* Timeline progressive drawing */
.day-timeline::before{
  transform-origin:top center;
  transform:scaleY(var(--timeline-progress,0));
  transition:transform .08s linear;
}
.day-step{
  opacity:.18;
  transform:translate3d(0,16px,0);
  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    transform .6s cubic-bezier(.22,.61,.36,1);
}
.day-step.is-active{
  opacity:1;
  transform:translate3d(0,0,0);
}
.day-step::after{
  transform:scale(.6);
  opacity:.35;
  transition:transform .35s ease,opacity .35s ease,background .35s ease;
}
.day-step.is-active::after{
  transform:scale(1);
  opacity:1;
  background:#fffaf2;
}

/* Hand-drawn icon stroke animation */
.sketch svg path,
.sketch svg ellipse{
  stroke-dasharray:180;
  stroke-dashoffset:180;
  transition:stroke-dashoffset 1.05s cubic-bezier(.22,.61,.36,1);
}
.day-step.is-active .sketch svg path,
.day-step.is-active .sketch svg ellipse{
  stroke-dashoffset:0;
}
.day-step:nth-child(1) .sketch svg path,
.day-step:nth-child(1) .sketch svg ellipse{transition-delay:.05s}
.day-step:nth-child(2) .sketch svg path,
.day-step:nth-child(2) .sketch svg ellipse{transition-delay:.10s}
.day-step:nth-child(3) .sketch svg path,
.day-step:nth-child(3) .sketch svg ellipse{transition-delay:.15s}
.day-step:nth-child(4) .sketch svg path,
.day-step:nth-child(4) .sketch svg ellipse{transition-delay:.20s}
.day-step:nth-child(5) .sketch svg path,
.day-step:nth-child(5) .sketch svg ellipse{transition-delay:.25s}

/* Slight image drift only while visible */
.place-figure img{
  transform:scale(1.01) translate3d(0,var(--image-drift,0px),0);
  transition:transform .12s linear;
  will-change:transform;
}

.closing-names,
.closing-date,
.closing-line{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s ease,transform .9s ease;
}
.closing.is-visible .closing-names{opacity:1;transform:none;transition-delay:.05s}
.closing.is-visible .closing-date{opacity:1;transform:none;transition-delay:.18s}
.closing.is-visible .closing-line{opacity:1;transform:none;transition-delay:.32s}

@media (max-width: 820px){
  .hero-image{scale:1.015}
  .reveal.reveal-left,
  .reveal.reveal-right{transform:translate3d(0,20px,0)}
  .place-figure img{transform:scale(1.005) translate3d(0,var(--image-drift,0px),0)}
}

@media (prefers-reduced-motion: reduce){
  .hero-image,
  .hero-content,
  .place-figure img{
    transform:none !important;
    opacity:1 !important;
  }
  .reveal,
  .reveal.reveal-left,
  .reveal.reveal-right,
  .day-step,
  .closing-names,
  .closing-date,
  .closing-line{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .day-timeline::before{
    transform:scaleY(1) !important;
    transition:none !important;
  }
  .sketch svg path,
  .sketch svg ellipse{
    stroke-dashoffset:0 !important;
    transition:none !important;
  }
}

.hero .eyebrow{
  display:inline-block;
  padding:.42rem .72rem;
  border-radius:999px;
  background:rgba(247,242,232,.72);
  border:1px solid rgba(53,87,98,.10);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  color:#2f454c;
  box-shadow:0 4px 20px rgba(247,242,232,.35);
}

.hero-content::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:46%;
  width:min(720px,92vw);
  height:72%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    rgba(247,242,232,.50) 0%,
    rgba(247,242,232,.28) 38%,
    rgba(247,242,232,0) 74%);
  pointer-events:none;
}

.hero .hero-cta{margin-top:1.15rem}


/* V3.4 — Timeline node alignment */
.day-timeline{
  --timeline-x:41px;
}
.day-timeline::before{
  left:var(--timeline-x);
}
.day-step::after{
  left:calc(var(--timeline-x) - 4px);
  z-index:0;
}
.sketch{
  position:relative;
  z-index:2;
}
.day-step > div:last-child{
  position:relative;
  z-index:1;
}

@media (min-width: 821px){
  .day-timeline{
    --timeline-x:41px;
  }
  .day-step{
    grid-template-columns:110px 1fr;
  }
  .sketch{
    justify-self:start;
  }
}

@media (max-width: 820px){
  .day-timeline{
    --timeline-x:41px;
  }
  .day-step::after{
    left:calc(var(--timeline-x) - 4px);
  }
}

@media (max-width: 480px){
  .day-timeline{
    --timeline-x:37px;
  }
  .day-step::after{
    left:calc(var(--timeline-x) - 4px);
  }
}


/* V3.5 — Hero edge layout: keep center image completely free */
.hero-content{
  position:absolute;
  z-index:3;
  top:clamp(1.8rem,4.5vh,3.8rem);
  left:50%;
  width:min(980px,94vw);
  margin:0;
  transform:translate3d(-50%,var(--hero-content-shift,0px),0);
  text-align:center;
  opacity:var(--hero-content-opacity,1);
}
.hero-content::before{
  top:45%;
  width:min(860px,96vw);
  height:150%;
  background:radial-gradient(
    ellipse at center,
    rgba(247,242,232,.68) 0%,
    rgba(247,242,232,.38) 38%,
    rgba(247,242,232,0) 76%
  );
}
.hero h1{
  font-size:clamp(3.15rem,6.7vw,6rem);
  line-height:.80;
}
.hero .eyebrow{
  margin-bottom:.52rem;
}
.hero-cta-edge{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:clamp(1.7rem,4vh,3.2rem);
  width:max-content;
  max-width:calc(100% - 2rem);
  margin:0 auto;
  transform:none !important;
}
.hero-cta-edge:hover,
.hero-cta-edge:focus,
.hero-cta-edge:focus-visible,
.hero-cta-edge:active{
  transform:none !important;
}
.hero-wash{
  background:
    linear-gradient(180deg,
      rgba(247,242,232,.90) 0%,
      rgba(247,242,232,.62) 18%,
      rgba(247,242,232,.08) 38%,
      rgba(247,242,232,0) 68%,
      rgba(247,242,232,.16) 82%,
      rgba(247,242,232,.54) 100%),
    radial-gradient(circle at 50% 8%,
      rgba(247,242,232,.82) 0%,
      rgba(247,242,232,.40) 30%,
      rgba(247,242,232,0) 56%);
}
.scroll-cue{
  bottom:.55rem;
  opacity:.62;
}

@media (max-width: 820px){
  .hero-content{
    top:max(1.2rem,env(safe-area-inset-top));
    width:94vw;
    transform:translate3d(-50%,var(--hero-content-shift,0px),0);
  }
  .hero h1{
    font-size:clamp(2.85rem,11.7vw,4.7rem);
    line-height:.79;
  }
  .hero-content::before{
    width:100vw;
    height:165%;
  }
  .hero-cta-edge{
    bottom:max(1.25rem,calc(env(safe-area-inset-bottom) + .65rem));
  }
  .hero-wash{
    background:
      linear-gradient(180deg,
        rgba(247,242,232,.94) 0%,
        rgba(247,242,232,.67) 20%,
        rgba(247,242,232,.10) 41%,
        rgba(247,242,232,0) 67%,
        rgba(247,242,232,.18) 82%,
        rgba(247,242,232,.58) 100%),
      radial-gradient(circle at 50% 7%,
        rgba(247,242,232,.86) 0%,
        rgba(247,242,232,.43) 31%,
        rgba(247,242,232,0) 58%);
  }
}

@media (max-width: 480px){
  .hero-content{
    top:max(.95rem,env(safe-area-inset-top));
  }
  .hero h1{
    font-size:clamp(2.65rem,11.4vw,4rem);
  }
  .hero .eyebrow{
    font-size:.61rem;
    padding:.34rem .58rem;
  }
  .hero-cta-edge{
    width:min(82vw,310px);
  }
}

/* Parallax must preserve horizontal centering after moving the title to the top edge. */
@media (prefers-reduced-motion: no-preference){
  .hero-content{
    will-change:transform,opacity;
  }
}


/* V3.6 — Remove timeline dots completely */
.day-step::after{
  display:none !important;
}


/* V3.8 — Timeline icon fade + hero cleanup */
.sketch{
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 33%,
      rgba(255,255,255,.72) 58%,
      rgba(255,255,255,.52) 78%,
      rgba(255,255,255,.40) 100%);
  box-shadow:none;
}

@media (min-width: 821px){
  .hero h1{
    white-space:nowrap;
    font-size:clamp(2.9rem,5.3vw,5.1rem);
    line-height:.95;
  }
  .hero h1 span,
  .hero h1 em{
    display:inline;
  }
  .hero h1 em{
    font-size:.72em;
    margin:0 .18em;
    vertical-align:.04em;
  }
}

@media (max-width: 820px){
  .hero h1{
    white-space:normal;
  }
  .hero h1 span,
  .hero h1 em{
    display:block;
  }
}


/* V3.9 — Day section with time | icon | text */
.day-timeline{
  position:relative;
  max-width:980px;
  margin:0 auto;
  --timeline-x:50%;
}
.day-timeline::before{
  left:var(--timeline-x);
  top:58px;
  bottom:58px;
  transform:translateX(-50%) scaleY(var(--timeline-progress,0));
}
.day-step{
  position:relative;
  display:grid;
  grid-template-columns:1fr 120px 1fr;
  align-items:center;
  column-gap:1.25rem;
  min-height:148px;
}
.day-time{
  text-align:right;
  justify-self:end;
  width:100%;
}
.day-time span{
  display:inline-block;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  color:var(--sea-dark);
  opacity:.9;
}
.sketch{
  justify-self:center;
  width:82px;
  height:82px;
}
.day-copy{
  text-align:left;
  justify-self:start;
  width:100%;
}
.day-copy h3{
  margin:0;
  font-family:var(--serif);
  font-size:2rem;
  font-weight:500;
  line-height:1;
}
.day-copy p{
  margin:.35rem 0 0;
  color:var(--muted);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
}

@media (max-width: 820px){
  .day-timeline{
    max-width:640px;
  }
  .day-step{
    grid-template-columns:minmax(84px,1fr) 92px minmax(120px,1fr);
    column-gap:.7rem;
    min-height:138px;
  }
  .day-time span{
    font-size:.68rem;
    letter-spacing:.12em;
  }
  .sketch{
    width:72px;
    height:72px;
  }
  .day-copy h3{
    font-size:1.75rem;
  }
  .day-copy p{
    font-size:1rem;
  }
}

@media (max-width: 480px){
  .day-step{
    grid-template-columns:minmax(72px,1fr) 82px minmax(132px,1fr);
    column-gap:.35rem;
    min-height:126px;
  }
  .day-time span{
    font-size:.62rem;
    letter-spacing:.10em;
  }
  .sketch{
    width:68px;
    height:68px;
  }
  .day-copy h3{
    font-size:1.52rem;
  }
  .day-copy p{
    font-size:.96rem;
  }
}


/* V3.10 — Lower hero image slightly to reveal the foreground house better */
.hero-image{
  object-position:center 62%;
}

@media (max-width: 820px){
  .hero-image{
    object-position:center 60%;
  }
}

@media (max-width: 480px){
  .hero-image{
    object-position:center 59%;
  }
}



/* V3.12 — Correct hero crop direction, no stretching */
.hero-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 34% !important;
}

.hero-cta-edge{
  bottom:clamp(1.35rem,3.2vh,2.4rem) !important;
}

@media (max-width: 820px){
  .hero-image{
    object-position:center 39% !important;
  }
  .hero-cta-edge{
    bottom:max(1rem,calc(env(safe-area-inset-bottom) + .55rem)) !important;
  }
}

@media (max-width: 480px){
  .hero-image{
    object-position:center 41% !important;
  }
  .hero-cta-edge{
    bottom:max(.9rem,calc(env(safe-area-inset-bottom) + .45rem)) !important;
  }
}


/* V4.0 — Scroll-progress Sicilian plant */
.scroll-plant{
  position:fixed;
  left:clamp(.3rem,1.1vw,.95rem);
  top:50%;
  width:88px;
  height:min(76vh,760px);
  transform:translateY(-50%);
  z-index:7;
  pointer-events:none;
  opacity:.92;
  mix-blend-mode:normal;
}
.scroll-plant svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.scroll-plant .plant-trace path,
.scroll-plant .plant-leaves path{
  fill:none;
  stroke:rgba(71,109,96,.82);
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.scroll-plant .plant-leaves path{
  stroke:rgba(102,131,107,.68);
  fill:rgba(133,164,132,.05);
}
.scroll-plant .fruit{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .36s ease, transform .46s cubic-bezier(.22,.61,.36,1);
}
.scroll-plant .fruit.is-grown{
  opacity:1;
}
.scroll-plant .fruit.is-grown[data-fruit-index="0"]{transform:translateY(0) scale(1)}
.scroll-plant .fruit.is-grown[data-fruit-index="1"]{transform:translateY(0) scale(1)}
.scroll-plant .fruit.is-grown[data-fruit-index="2"]{transform:translateY(0) scale(1)}
.scroll-plant .fruit.is-grown[data-fruit-index="3"]{transform:translateY(0) scale(1)}
.scroll-plant .fruit.is-grown[data-fruit-index="4"]{transform:translateY(0) scale(1)}
.scroll-plant .fruit.is-grown[data-fruit-index="5"]{transform:translateY(0) scale(1)}
.scroll-plant .fruit:not(.is-grown){transform:translateY(4px) scale(.7)}
.scroll-plant .fruit ellipse{
  fill:#efcf4a;
  stroke:rgba(180,132,50,.72);
  stroke-width:1.5;
}
.scroll-plant .fruit-line{
  fill:none;
  stroke:rgba(112,133,103,.95);
  stroke-width:1.4;
  stroke-linecap:round;
}
.scroll-plant .fruit-leaf{
  fill:rgba(115,154,110,.92);
  stroke:rgba(91,127,88,.8);
  stroke-width:1.2;
  stroke-linejoin:round;
}

body.has-scroll-plant main{
  position:relative;
}

@media (min-width: 1100px){
  main{
    padding-left:2.4rem;
  }
}
@media (max-width: 1080px){
  .scroll-plant{
    width:72px;
    left:.2rem;
    opacity:.80;
  }
}
@media (max-width: 820px){
  .scroll-plant{
    left:auto;
    right:.1rem;
    width:58px;
    height:min(70vh,620px);
    opacity:.62;
  }
  .scroll-plant .plant-trace path,
  .scroll-plant .plant-leaves path{
    stroke-width:2;
  }
  .scroll-plant .fruit ellipse{
    stroke-width:1.25;
  }
}
@media (max-width: 520px){
  .scroll-plant{
    right:-.15rem;
    width:50px;
    opacity:.50;
  }
}
@media (prefers-reduced-motion: reduce){
  .scroll-plant .fruit{
    transition:none !important;
  }
}


/* V4.1 — Watercolor Sicilian lemon branch progress */
.scroll-plant{
  position:fixed;
  left:clamp(.15rem,.9vw,.8rem);
  top:50%;
  width:112px;
  height:min(82vh,840px);
  transform:translateY(-50%);
  z-index:7;
  pointer-events:none;
  opacity:.94;
}
.scroll-plant svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.scroll-plant .branch{
  fill:none;
  stroke:url(#branchGrad);
  stroke-width:5.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.scroll-plant .branch.side{
  stroke-width:3.9;
}
.scroll-plant .leaf{
  fill:url(#leafGrad);
  stroke:rgba(92,131,92,.48);
  stroke-width:1.15;
  stroke-linejoin:round;
}
.scroll-plant .leaf.vein{
  fill:none;
  stroke:rgba(90,118,86,.44);
  stroke-width:0.9;
}
.scroll-plant .petal{
  fill:rgba(255,255,255,.9);
  stroke:rgba(200,197,178,.55);
  stroke-width:0.75;
}
.scroll-plant .flower-core{
  fill:#e4cf73;
  stroke:rgba(191,168,75,.55);
  stroke-width:0.8;
}
.scroll-plant .lemon{
  opacity:0;
  transition:opacity .42s ease;
}
.scroll-plant .lemon-body,
.scroll-plant .lemon-tip{
  fill:url(#lemonGrad);
  stroke:rgba(197,161,48,.6);
  stroke-width:1.05;
}
.scroll-plant .plant-full{
  opacity:.98;
}
.scroll-plant.is-complete .lemon{
  opacity:1;
}

@media (min-width: 1200px){
  main{
    padding-left:2.9rem;
  }
}
@media (max-width: 1080px){
  .scroll-plant{
    width:92px;
    opacity:.86;
  }
}
@media (max-width: 820px){
  .scroll-plant{
    left:auto;
    right:-.1rem;
    width:74px;
    height:min(75vh,690px);
    opacity:.68;
  }
  .scroll-plant .branch{stroke-width:4.2}
  .scroll-plant .branch.side{stroke-width:3.2}
}
@media (max-width: 520px){
  .scroll-plant{
    width:62px;
    right:-.2rem;
    opacity:.54;
  }
}


/* V4.3 — Real branch growth + uniform botanical pop */
.scroll-plant .plant-full{
  clip-path:none !important;
}

.scroll-plant .branch{
  opacity:1;
  will-change:stroke-dashoffset;
}

/* Leaves, flowers and lemons all use the same visual entrance:
   scale 0.72 -> 1 + opacity 0 -> 1. */
.scroll-plant .leaf:not(.vein),
.scroll-plant .leaf.vein,
.scroll-plant .botanical-pop{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(.72);
  will-change:opacity,transform;
}

.scroll-plant .leaf.is-grown,
.scroll-plant .botanical-pop.is-grown{
  opacity:1;
  transform:scale(1);
}

/* JS drives the progress continuously; transitions only smooth tiny frame differences. */
.scroll-plant .leaf:not(.vein),
.scroll-plant .leaf.vein,
.scroll-plant .botanical-pop{
  transition:
    opacity .10s linear,
    transform .10s linear;
}

.scroll-plant .lemon{
  opacity:1 !important;
}

/* The old lemon-only fade is superseded by botanical-pop. */
.scroll-plant .lemon > .botanical-pop{
  opacity:0;
}

@media (prefers-reduced-motion: reduce){
  .scroll-plant .leaf:not(.vein),
  .scroll-plant .leaf.vein,
  .scroll-plant .botanical-pop{
    transition:none !important;
  }
}


/* V4.4 — Dedicated lateral animation rail
   The botanical animation owns its own viewport column and never overlays site content. */
:root{
  --botanical-rail: clamp(118px, 9vw, 150px);
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

body.has-scroll-plant{
  position:relative;
}

/* Desktop: botanical rail on the left, page content starts after it. */
body.has-scroll-plant main{
  width:calc(100% - var(--botanical-rail));
  margin-left:var(--botanical-rail);
  padding-left:0 !important;
}

.scroll-plant{
  left:0 !important;
  right:auto !important;
  width:var(--botanical-rail) !important;
  padding:0 10px 0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.scroll-plant svg{
  width:100%;
  max-width:118px;
  height:100%;
}

/* Keep every full-width visual bounded by the actual content column. */
.hero,
.place-section,
.day-section,
.rsvp-section,
.useful-section,
.closing{
  width:100%;
  max-width:100%;
}

/* Tablet/mobile: use a slimmer dedicated rail on the right.
   Content never flows underneath the plant. */
@media (max-width: 820px){
  :root{
    --botanical-rail: clamp(50px, 13vw, 68px);
  }

  body.has-scroll-plant main{
    width:calc(100% - var(--botanical-rail));
    margin-left:0;
    margin-right:var(--botanical-rail);
  }

  .scroll-plant{
    left:auto !important;
    right:0 !important;
    width:var(--botanical-rail) !important;
    padding:0 3px;
  }

  .scroll-plant svg{
    max-width:62px;
  }

  /* Compensate the narrower content column without reducing readability. */
  .place-section,
  .day-section,
  .rsvp-section,
  .useful-section{
    padding-left:max(1rem,4vw);
    padding-right:max(1rem,4vw);
  }
}

@media (max-width: 480px){
  :root{
    --botanical-rail: 48px;
  }

  .scroll-plant{
    padding:0 2px;
  }

  .scroll-plant svg{
    max-width:46px;
  }

  /* Preserve useful form width on narrow phones. */
  .rsvp-section{
    padding-left:.8rem;
    padding-right:.8rem;
  }
  .rsvp-form{
    padding:1rem;
  }
}

/* No animation rail is reserved when motion is explicitly reduced.
   The decorative plant stays visible in its final static state, but still
   remains inside the same reserved column for layout consistency. */
@media (prefers-reduced-motion: reduce){
  body.has-scroll-plant main{
    transition:none !important;
  }
}


/* V4.5 — Real watercolor asset-based botanical rail */
.scroll-plant.botanical-rail{
  opacity:1 !important;
}

.scroll-plant .plant-stage{
  position:relative;
  width:100%;
  height:min(82vh, 840px);
  max-height:840px;
}

.scroll-plant .plant-branches,
.scroll-plant .botanical-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.scroll-plant .branch{
  fill:none;
  stroke:url(#branchGrad);
  stroke-width:4.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.scroll-plant .branch.side{ stroke-width:3.6; }
.scroll-plant .branch.tip{ stroke-width:2.7; }

.scroll-plant .botanical-layer{
  pointer-events:none;
}

.scroll-plant .botanical-item{
  position:absolute;
  left:calc(var(--x) * 100% / 190);
  top:calc(var(--y) * 100% / 1040);
  width:calc(var(--w) * 100% / 190);
  max-width:none;
  height:auto;
  transform:translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.72);
  transform-origin:center center;
  opacity:0;
  will-change:opacity, transform;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

@media (max-width: 820px){
  .scroll-plant .plant-stage{
    height:min(75vh, 690px);
    max-height:690px;
  }
  .scroll-plant .branch{ stroke-width:4.1; }
  .scroll-plant .branch.side{ stroke-width:3.1; }
  .scroll-plant .branch.tip{ stroke-width:2.35; }
}

@media (max-width: 520px){
  .scroll-plant .plant-stage{
    height:min(72vh, 620px);
    max-height:620px;
  }
}

@media (prefers-reduced-motion: reduce){
  .scroll-plant .botanical-item{
    transition:none !important;
  }
}


/* V4.6 — Narrower rail, larger and denser botanical assets */
:root{
  --botanical-rail: clamp(62px, 4.8vw, 78px);
}

body.has-scroll-plant main{
  width:calc(100% - var(--botanical-rail));
  margin-left:var(--botanical-rail);
}

.scroll-plant{
  width:var(--botanical-rail) !important;
  padding:0 3px 0 2px !important;
}

.scroll-plant svg{
  max-width:74px !important;
}

.scroll-plant .plant-stage{
  width:100%;
  height:min(84vh, 860px);
  max-height:860px;
}

.scroll-plant .branch{ stroke-width:5.2; }
.scroll-plant .branch.side{ stroke-width:3.8; }
.scroll-plant .branch.tip{ stroke-width:2.9; }

/* Increase size of watercolor assets while staying inside the narrower rail */
.scroll-plant .botanical-item{
  width:calc(var(--w) * 100% / 190 * 1.38);
}

/* Slightly richer vertical composition */
.scroll-plant .botanical-layer{
  transform:translateY(-0.3%);
}

@media (max-width: 820px){
  :root{
    --botanical-rail: clamp(28px, 7vw, 36px);
  }

  body.has-scroll-plant main{
    width:calc(100% - var(--botanical-rail));
    margin-left:0;
    margin-right:var(--botanical-rail);
  }

  .scroll-plant{
    width:var(--botanical-rail) !important;
    padding:0 1px !important;
  }

  .scroll-plant svg{
    max-width:34px !important;
  }

  .scroll-plant .plant-stage{
    height:min(78vh, 720px);
    max-height:720px;
  }

  .scroll-plant .branch{ stroke-width:4.4; }
  .scroll-plant .branch.side{ stroke-width:3.25; }
  .scroll-plant .branch.tip{ stroke-width:2.4; }

  .scroll-plant .botanical-item{
    width:calc(var(--w) * 100% / 190 * 1.44);
  }
}

@media (max-width: 480px){
  :root{
    --botanical-rail: 26px;
  }

  .scroll-plant svg{
    max-width:28px !important;
  }

  .scroll-plant .plant-stage{
    height:min(75vh, 650px);
    max-height:650px;
  }

  .scroll-plant .botanical-item{
    width:calc(var(--w) * 100% / 190 * 1.48);
  }
}


/* V4.7 — Rebalanced narrow rail, denser botanicals */
:root{
  --botanical-rail: clamp(70px, 5.4vw, 84px);
}

body.has-scroll-plant main{
  width:calc(100% - var(--botanical-rail));
  margin-left:var(--botanical-rail);
}

.scroll-plant{
  width:var(--botanical-rail) !important;
  padding:0 4px 0 3px !important;
  overflow:visible;
}

.scroll-plant .plant-stage{
  width:100%;
  height:min(84vh, 860px);
  max-height:860px;
  overflow:visible;
}

.scroll-plant .plant-branches,
.scroll-plant .botanical-layer{
  overflow:visible;
}

.scroll-plant svg{
  width:100% !important;
  max-width:78px !important;
  overflow:visible !important;
}

.scroll-plant .branch{
  stroke-width:5.0;
}
.scroll-plant .branch.side{
  stroke-width:3.65;
}
.scroll-plant .branch.tip{
  stroke-width:2.75;
}

/* Larger than V4.5, but not so large that the rail feels crowded. */
.scroll-plant .botanical-item{
  width:calc(var(--w) * 100% / 190 * 1.26);
}

.scroll-plant .botanical-item.botanical-small{
  width:calc(var(--w) * 100% / 190 * 1.10);
}

/* Keep the botanical material visually centered inside the rail. */
.scroll-plant .botanical-layer{
  transform:translateX(-1%);
}

@media (max-width: 820px){
  :root{
    --botanical-rail: clamp(34px, 8.4vw, 44px);
  }

  body.has-scroll-plant main{
    width:calc(100% - var(--botanical-rail));
    margin-left:0;
    margin-right:var(--botanical-rail);
  }

  .scroll-plant{
    left:auto !important;
    right:0 !important;
    width:var(--botanical-rail) !important;
    padding:0 2px !important;
  }

  .scroll-plant svg{
    max-width:42px !important;
  }

  .scroll-plant .plant-stage{
    height:min(78vh, 720px);
    max-height:720px;
  }

  .scroll-plant .branch{ stroke-width:4.25; }
  .scroll-plant .branch.side{ stroke-width:3.15; }
  .scroll-plant .branch.tip{ stroke-width:2.35; }

  .scroll-plant .botanical-item{
    width:calc(var(--w) * 100% / 190 * 1.30);
  }

  .scroll-plant .botanical-item.botanical-small{
    width:calc(var(--w) * 100% / 190 * 1.13);
  }
}

@media (max-width: 480px){
  :root{
    --botanical-rail: 34px;
  }

  .scroll-plant svg{
    max-width:32px !important;
  }

  .scroll-plant .plant-stage{
    height:min(75vh, 650px);
    max-height:650px;
  }

  .scroll-plant .botanical-item{
    width:calc(var(--w) * 100% / 190 * 1.28);
  }
}


/* V4.8 — Cluster-based continuous watercolor plant */
.scroll-plant.v48 .plant-stage{
  overflow:visible;
}

.scroll-plant.v48 .branch.wash{
  stroke-width:7.5;
  stroke-opacity:.16;
}
.scroll-plant.v48 .branch.main{
  stroke-width:4.8;
}
.scroll-plant.v48 .branch.side{
  stroke-width:3.45;
}
.scroll-plant.v48 .branch.tip{
  stroke-width:2.55;
}

.scroll-plant.v48 .botanical-cluster{
  width:calc(var(--w) * 100% / 190 * 1.18);
}

.scroll-plant.v48 .botanical-medium{
  width:calc(var(--w) * 100% / 190 * 1.08);
}

.scroll-plant.v48 .botanical-terminal{
  width:calc(var(--w) * 100% / 190 * 1.00);
}

.scroll-plant.v48 .botanical-item{
  filter:drop-shadow(0 1px 1px rgba(75,63,41,.05));
}

/* The rail stays narrow, but clusters are allowed to visually breathe inside it. */
@media (min-width:821px){
  :root{
    --botanical-rail: clamp(74px,5.5vw,88px);
  }

  .scroll-plant.v48{
    overflow:visible;
  }

  .scroll-plant.v48 .plant-stage{
    width:112%;
    margin-left:-6%;
  }
}

@media (max-width:820px){
  :root{
    --botanical-rail: clamp(38px,8.5vw,46px);
  }

  .scroll-plant.v48 .plant-stage{
    width:116%;
    margin-left:-8%;
  }

  .scroll-plant.v48 .botanical-cluster{
    width:calc(var(--w) * 100% / 190 * 1.22);
  }

  .scroll-plant.v48 .botanical-medium{
    width:calc(var(--w) * 100% / 190 * 1.12);
  }

  .scroll-plant.v48 .botanical-terminal{
    width:calc(var(--w) * 100% / 190 * 1.04);
  }
}


/* V4.9 — Six connected botanical clusters */
.scroll-plant.v49 .plant-stage{
  overflow:hidden;
}

.scroll-plant.v49 .plant-branches,
.scroll-plant.v49 .botanical-layer{
  overflow:hidden;
}

.scroll-plant.v49 .branch.wash{
  stroke-width:7.2;
  stroke-opacity:.14;
}

.scroll-plant.v49 .branch.main{
  stroke-width:4.9;
}

.scroll-plant.v49 .branch.side{
  stroke-width:3.55;
}

.scroll-plant.v49 .branch.tip{
  stroke-width:2.6;
}

.scroll-plant.v49 .botanical-cluster{
  width:calc(var(--w) * 100% / 190 * 1.62);
  filter:drop-shadow(0 1px 1px rgba(75,63,41,.04));
}

/* Keep clusters fully inside the dedicated rail. */
.scroll-plant.v49 .botanical-layer{
  left:1%;
  right:1%;
  width:98%;
}

@media (min-width:821px){
  :root{
    --botanical-rail: clamp(74px,5.5vw,88px);
  }

  .scroll-plant.v49 .plant-stage{
    width:100%;
    margin-left:0;
  }
}

@media (max-width:820px){
  :root{
    --botanical-rail: clamp(38px,8.5vw,46px);
  }

  .scroll-plant.v49 .plant-stage{
    width:100%;
    margin-left:0;
  }

  .scroll-plant.v49 .botanical-cluster{
    width:calc(var(--w) * 100% / 190 * 1.68);
  }
}

@media (max-width:480px){
  .scroll-plant.v49 .botanical-cluster{
    width:calc(var(--w) * 100% / 190 * 1.62);
  }
}


/* V4.11 — Botanical continuity refinement */
.scroll-plant.v411 .plant-stage,
.scroll-plant.v411 .plant-branches,
.scroll-plant.v411 .botanical-layer{
  overflow:hidden;
}

.scroll-plant.v411 .branch.wash{
  stroke-width:7.1;
  stroke-opacity:.12;
}
.scroll-plant.v411 .branch.main{
  stroke-width:4.8;
}
.scroll-plant.v411 .branch.side{
  stroke-width:3.35;
}
.scroll-plant.v411 .branch.tip{
  stroke-width:2.45;
}

.scroll-plant.v411 .botanical-layer{
  left:1%;
  right:1%;
  width:98%;
}

.scroll-plant.v411 .botanical-cluster{
  width:calc(var(--w) * 100% / 190 * 1.66);
  filter:drop-shadow(0 1px 1px rgba(75,63,41,.03));
}
.scroll-plant.v411 .botanical-topper{
  width:calc(var(--w) * 100% / 190 * 1.55);
}
.scroll-plant.v411 .botanical-end{
  width:calc(var(--w) * 100% / 190 * 1.54);
}
.scroll-plant.v411 .botanical-terminal{
  width:calc(var(--w) * 100% / 190 * 1.06);
}

/* keep current dedicated rail */
@media (min-width:821px){
  :root{ --botanical-rail: clamp(74px,5.5vw,88px); }
}
@media (max-width:820px){
  :root{ --botanical-rail: clamp(38px,8.5vw,46px); }
  .scroll-plant.v411 .botanical-cluster{ width:calc(var(--w) * 100% / 190 * 1.70); }
  .scroll-plant.v411 .botanical-topper{ width:calc(var(--w) * 100% / 190 * 1.58); }
  .scroll-plant.v411 .botanical-end{ width:calc(var(--w) * 100% / 190 * 1.56); }
}


/* V4.12 — Asset branch alignment + filler leaves */
.scroll-plant.v412 .plant-stage,
.scroll-plant.v412 .plant-branches,
.scroll-plant.v412 .botanical-layer{
  overflow:hidden;
}
.scroll-plant.v412 .branch.wash{ stroke-width:7.1; stroke-opacity:.12; }
.scroll-plant.v412 .branch.main{ stroke-width:4.8; }
.scroll-plant.v412 .branch.side{ stroke-width:3.28; }
.scroll-plant.v412 .branch.tip{ stroke-width:2.42; }
.scroll-plant.v412 .botanical-layer{ left:1%; right:1%; width:98%; }
.scroll-plant.v412 .botanical-topper{ width:calc(var(--w) * 100% / 190 * 1.52); }
.scroll-plant.v412 .botanical-cluster{ width:calc(var(--w) * 100% / 190 * 1.62); filter:drop-shadow(0 1px 1px rgba(75,63,41,.03)); }
.scroll-plant.v412 .botanical-end{ width:calc(var(--w) * 100% / 190 * 1.50); }
.scroll-plant.v412 .botanical-bridge{ width:calc(var(--w) * 100% / 190 * 1.26); }
.scroll-plant.v412 .botanical-filler{ width:calc(var(--w) * 100% / 190 * 1.08); opacity:0; }
.scroll-plant.v412 .botanical-terminal{ width:calc(var(--w) * 100% / 190 * 1.00); }
@media (min-width:821px){ :root{ --botanical-rail: clamp(74px,5.5vw,88px); } }
@media (max-width:820px){
  :root{ --botanical-rail: clamp(38px,8.5vw,46px); }
  .scroll-plant.v412 .botanical-cluster{ width:calc(var(--w) * 100% / 190 * 1.65); }
  .scroll-plant.v412 .botanical-end{ width:calc(var(--w) * 100% / 190 * 1.54); }
  .scroll-plant.v412 .botanical-bridge{ width:calc(var(--w) * 100% / 190 * 1.28); }
}


/* V4.13 — Anchor-based botanical growth reset */
.scroll-plant.v413 .plant-stage,
.scroll-plant.v413 .plant-branches,
.scroll-plant.v413 .botanical-layer{
  overflow:hidden;
}

.scroll-plant.v413 .branch.wash{
  stroke-width:7.0;
  stroke-opacity:.11;
}
.scroll-plant.v413 .branch.main{
  stroke-width:4.8;
}
.scroll-plant.v413 .branch.side{
  stroke-width:3.3;
}
.scroll-plant.v413 .branch.tip{
  stroke-width:2.4;
}

.scroll-plant.v413 .botanical-layer{
  left:0;
  right:0;
  width:100%;
}

.scroll-plant.v413 .botanical-item{
  /* Position is the exact attachment coordinate, not the image center. */
  left:calc(var(--x) * 100% / 190);
  top:calc(var(--y) * 100% / 1040);
}

.scroll-plant.v413 .anchored-cluster{
  width:calc(var(--w) * 100% / 190 * 1.45);
  filter:drop-shadow(0 1px 1px rgba(75,63,41,.025));
}

.scroll-plant.v413 .trunk-leaf{
  width:calc(var(--w) * 100% / 190 * 1.15);
}

.scroll-plant.v413 .terminal-asset{
  width:calc(var(--w) * 100% / 190 * 1.18);
}

.scroll-plant.v413 .final-leaf{
  width:calc(var(--w) * 100% / 190 * 1.22);
}

/* Preserve current rail dimensions */
@media (min-width:821px){
  :root{
    --botanical-rail: clamp(74px,5.5vw,88px);
  }
}

@media (max-width:820px){
  :root{
    --botanical-rail: clamp(38px,8.5vw,46px);
  }

  .scroll-plant.v413 .anchored-cluster{
    width:calc(var(--w) * 100% / 190 * 1.48);
  }

  .scroll-plant.v413 .trunk-leaf{
    width:calc(var(--w) * 100% / 190 * 1.18);
  }
}


/* V5.0 — Approved-master hybrid botanical animation */
:root{
  --botanical-rail: clamp(92px, 7.4vw, 116px);
}

body.has-scroll-plant main{
  width:calc(100% - var(--botanical-rail));
  margin-left:var(--botanical-rail);
  padding-left:0 !important;
}

.scroll-plant.hybrid-vine{
  position:fixed;
  z-index:7;
  pointer-events:none;
  left:0 !important;
  right:auto !important;
  top:50%;
  width:var(--botanical-rail) !important;
  height:auto !important;
  transform:translateY(-50%);
  padding:0 5px;
  box-sizing:border-box;
  opacity:.96;
  overflow:visible;
}

.hybrid-vine-stage{
  position:relative;
  width:100%;
  aspect-ratio:724 / 2172;
  overflow:visible;
}

.hybrid-vine-growth,
.hybrid-vine-segments{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.hybrid-vine-growth{
  overflow:visible;
}

.hybrid-branch-wash,
.hybrid-branch-path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hybrid-branch-wash{
  stroke:rgba(126,91,58,.16);
  stroke-width:17;
}

.hybrid-branch-path{
  stroke:url(#hybridBranchGradient);
  stroke-width:9;
}

.hybrid-vine-segments{
  overflow:visible;
}

.vine-major-segment{
  position:absolute;
  left:0;
  top:var(--segment-top);
  width:100%;
  height:auto;
  max-width:none;
  opacity:0;
  transform:scale(.88);
  transform-origin:50% 50%;
  will-change:opacity,transform;
  filter:drop-shadow(0 1px 1px rgba(63,54,38,.025));
}

@media (max-width:820px){
  :root{
    --botanical-rail: clamp(50px, 12vw, 62px);
  }

  body.has-scroll-plant main{
    width:calc(100% - var(--botanical-rail));
    margin-left:0;
    margin-right:var(--botanical-rail);
  }

  .scroll-plant.hybrid-vine{
    left:auto !important;
    right:0 !important;
    width:var(--botanical-rail) !important;
    padding:0 3px;
    opacity:.88;
  }
}

@media (max-width:480px){
  :root{
    --botanical-rail:46px;
  }

  .scroll-plant.hybrid-vine{
    padding:0 2px;
    opacity:.82;
  }
}

@media (prefers-reduced-motion:reduce){
  .vine-major-segment{
    transition:none !important;
  }
}


/* V5.1 — Progressive single-element botanical growth */
:root{
  --botanical-rail: clamp(78px, 6vw, 94px);
}

body.has-scroll-plant main{
  width:calc(100% - var(--botanical-rail));
  margin-left:var(--botanical-rail);
  padding-left:0 !important;
}

.scroll-plant.growth-vine{
  position:fixed;
  left:0 !important;
  right:auto !important;
  top:50%;
  z-index:7;
  width:var(--botanical-rail) !important;
  height:min(88vh, 900px) !important;
  transform:translateY(-50%);
  padding:0 4px 0 3px;
  box-sizing:border-box;
  pointer-events:none;
  overflow:visible;
  opacity:.96;
}

.growth-vine-stage{
  position:relative;
  width:100%;
  height:100%;
  overflow:visible;
}

.growth-vine-svg,
.growth-items{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.growth-vine-svg{
  overflow:visible;
}

.growth-main,
.growth-main-wash,
.growth-side{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.growth-main-wash{
  stroke:rgba(126,91,58,.14);
  stroke-width:7.3;
}

.growth-main{
  stroke:url(#growthBranchGrad);
  stroke-width:4.6;
}

.growth-side{
  stroke:url(#growthBranchGrad);
  stroke-width:3.0;
}

.growth-items{
  overflow:visible;
}

.growth-item{
  position:absolute;
  left:calc(var(--x) * 100% / 190);
  top:calc(var(--y) * 100% / 1040);
  width:calc(var(--w) * 100% / 190);
  height:auto;
  max-width:none;
  transform:translate(-50%, -50%) rotate(var(--r)) scale(.08);
  transform-origin:center;
  opacity:0;
  will-change:transform,opacity;
  filter:drop-shadow(0 1px 1px rgba(69,58,39,.025));
}

/* Layering is intentional: early tiny leaves may later be partially covered. */
.growth-small{ z-index:1; }
.growth-large{ z-index:2; }
.growth-flower{ z-index:3; }
.growth-fruit{ z-index:4; }

@media (max-width:820px){
  :root{
    --botanical-rail: clamp(40px, 9.5vw, 50px);
  }

  body.has-scroll-plant main{
    width:calc(100% - var(--botanical-rail));
    margin-left:0;
    margin-right:var(--botanical-rail);
  }

  .scroll-plant.growth-vine{
    left:auto !important;
    right:0 !important;
    width:var(--botanical-rail) !important;
    height:min(86vh, 780px) !important;
    padding:0 2px;
    opacity:.90;
  }
}

@media (max-width:480px){
  :root{
    --botanical-rail:38px;
  }

  .scroll-plant.growth-vine{
    width:var(--botanical-rail) !important;
    height:min(84vh, 700px) !important;
    opacity:.86;
  }
}

@media (prefers-reduced-motion:reduce){
  .growth-item{
    transition:none !important;
  }
}


/* V5.2 — Larger and denser botanical composition
   Animation timing/sequence unchanged from V5.1. */
.scroll-plant.growth-vine .growth-small{
  width:calc(var(--w) * 100% / 190 * 1.35);
}

.scroll-plant.growth-vine .growth-large{
  width:calc(var(--w) * 100% / 190 * 1.48);
}

.scroll-plant.growth-vine .growth-flower{
  width:calc(var(--w) * 100% / 190 * 1.30);
}

.scroll-plant.growth-vine .growth-fruit{
  width:calc(var(--w) * 100% / 190 * 1.28);
}

/* Give the organic material slightly more visual authority than the bare SVG. */
.scroll-plant.growth-vine .growth-main{
  stroke-width:4.25;
}

.scroll-plant.growth-vine .growth-main-wash{
  stroke-width:6.7;
}

.scroll-plant.growth-vine .growth-side{
  stroke-width:2.8;
}

@media (max-width:820px){
  .scroll-plant.growth-vine .growth-small{
    width:calc(var(--w) * 100% / 190 * 1.42);
  }
  .scroll-plant.growth-vine .growth-large{
    width:calc(var(--w) * 100% / 190 * 1.55);
  }
  .scroll-plant.growth-vine .growth-flower{
    width:calc(var(--w) * 100% / 190 * 1.35);
  }
  .scroll-plant.growth-vine .growth-fruit{
    width:calc(var(--w) * 100% / 190 * 1.33);
  }
}


/* V5.3 — More density and larger botanicals
   Keeps V5.1/V5.2 animation timing unchanged. */
.scroll-plant.growth-vine .growth-small{
  width:calc(var(--w) * 100% / 190 * 1.52);
}

.scroll-plant.growth-vine .growth-large{
  width:calc(var(--w) * 100% / 190 * 1.72);
}

.scroll-plant.growth-vine .growth-flower{
  width:calc(var(--w) * 100% / 190 * 1.42);
}

.scroll-plant.growth-vine .growth-fruit{
  width:calc(var(--w) * 100% / 190 * 1.42);
}

/* Slightly lighten the drawn branch so foliage dominates more. */
.scroll-plant.growth-vine .growth-main{
  stroke-width:4.05;
}

.scroll-plant.growth-vine .growth-main-wash{
  stroke-width:6.3;
  stroke:rgba(126,91,58,.12);
}

.scroll-plant.growth-vine .growth-side{
  stroke-width:2.65;
}

@media (max-width:820px){
  .scroll-plant.growth-vine .growth-small{
    width:calc(var(--w) * 100% / 190 * 1.60);
  }
  .scroll-plant.growth-vine .growth-large{
    width:calc(var(--w) * 100% / 190 * 1.80);
  }
  .scroll-plant.growth-vine .growth-flower{
    width:calc(var(--w) * 100% / 190 * 1.48);
  }
  .scroll-plant.growth-vine .growth-fruit{
    width:calc(var(--w) * 100% / 190 * 1.48);
  }
}


/* V5.4 — Thinner secondary branches + lemons aligned to main branch */
.scroll-plant.growth-vine .growth-side{
  stroke-width:2.05;
}

.scroll-plant.growth-vine .growth-main{
  stroke-width:4.0;
}

.scroll-plant.growth-vine .growth-main-wash{
  stroke-width:6.15;
}

@media (max-width:820px){
  .scroll-plant.growth-vine .growth-side{
    stroke-width:1.95;
  }
}


/* V5.5 — Double mass + off-screen growth and clipping */
:root{
  --botanical-rail: clamp(86px, 6.4vw, 102px);
}

.scroll-plant.growth-vine{
  width:var(--botanical-rail) !important;
  height:120vh !important;
  top:50%;
  transform:translateY(-50%);
  padding:0;
  overflow:hidden;
}

.growth-vine-stage,
.growth-items,
.growth-vine-svg{
  overflow:hidden;
}

/* Larger plant so top and bottom live outside the viewport,
   and lateral pieces can be clipped by the rail. */
.scroll-plant.growth-vine .growth-small{
  width:calc(var(--w) * 100% / 190 * 2.20);
}

.scroll-plant.growth-vine .growth-large{
  width:calc(var(--w) * 100% / 190 * 2.45);
}

.scroll-plant.growth-vine .growth-flower{
  width:calc(var(--w) * 100% / 190 * 2.05);
}

.scroll-plant.growth-vine .growth-fruit{
  width:calc(var(--w) * 100% / 190 * 2.00);
}

/* Trunk remains readable but secondary twigs stay lighter. */
.scroll-plant.growth-vine .growth-main{
  stroke-width:4.05;
}

.scroll-plant.growth-vine .growth-main-wash{
  stroke-width:6.0;
  stroke:rgba(126,91,58,.11);
}

.scroll-plant.growth-vine .growth-side{
  stroke-width:1.75;
}

@media (max-width:820px){
  :root{
    --botanical-rail: clamp(44px, 10.5vw, 56px);
  }

  .scroll-plant.growth-vine{
    width:var(--botanical-rail) !important;
    height:114vh !important;
    left:auto !important;
    right:0 !important;
    padding:0;
    overflow:hidden;
  }

  .scroll-plant.growth-vine .growth-small{
    width:calc(var(--w) * 100% / 190 * 2.32);
  }

  .scroll-plant.growth-vine .growth-large{
    width:calc(var(--w) * 100% / 190 * 2.60);
  }

  .scroll-plant.growth-vine .growth-flower{
    width:calc(var(--w) * 100% / 190 * 2.14);
  }

  .scroll-plant.growth-vine .growth-fruit{
    width:calc(var(--w) * 100% / 190 * 2.10);
  }

  .scroll-plant.growth-vine .growth-side{
    stroke-width:1.62;
  }
}

@media (max-width:480px){
  :root{
    --botanical-rail: 42px;
  }

  .scroll-plant.growth-vine{
    height:112vh !important;
  }
}


/* V5.7 — Conservative botanical correction from V5.5 */
.scroll-plant.growth-vine .growth-bud{
  /* Keep V5.5 size/animation; only position has been moved closer to the stem. */
  z-index:3;
}

/* Fruits retain the rich V5.5 dimensions but are now deliberately distributed. */
.scroll-plant.growth-vine .growth-fruit-pair{
  z-index:5;
}


/* V5.9 — Leaf attachment refinement */
.scroll-plant.growth-vine .growth-leaf{
  /* Leaves now grow from the petiole/attachment point instead of the center. */
  transform-origin:center;
}


/* V5.10 — Flowers visually above leaves */
.scroll-plant.growth-vine .growth-small,
.scroll-plant.growth-vine .growth-large,
.scroll-plant.growth-vine .growth-leaf{
  z-index:1 !important;
}

.scroll-plant.growth-vine .growth-fruit{
  z-index:3 !important;
}

.scroll-plant.growth-vine .growth-flower{
  z-index:6 !important;
}

.scroll-plant.growth-vine .growth-bud{
  z-index:7 !important;
}


/* V5.11 — Correct botanical overlap order
   leaves -> buds -> flowers -> lemons */
.scroll-plant.growth-vine .growth-small,
.scroll-plant.growth-vine .growth-large,
.scroll-plant.growth-vine .growth-leaf{
  z-index:1 !important;
}

.scroll-plant.growth-vine .growth-bud{
  z-index:2 !important;
}

.scroll-plant.growth-vine .growth-flower{
  z-index:3 !important;
}

.scroll-plant.growth-vine .growth-fruit,
.scroll-plant.growth-vine .growth-fruit-pair{
  z-index:4 !important;
}


/* V5.13 schedule note + practical information page */
.schedule-footnote { margin: 0 0 1.25rem; font-size: .82rem; font-style: italic; opacity: .72; }
.text-link { display: inline-block; margin-top: .55rem; color: inherit; text-underline-offset: .2em; }
.info-page { min-height: 100vh; }
.info-detail { width: min(900px, calc(100% - 2.5rem)); margin: 0 auto; padding: 3rem 0 5rem; }
.info-back { margin-bottom: 3rem; }
.info-detail .compact-heading { margin-bottom: 2.5rem; }
.info-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.info-detail-grid article { padding: 1.4rem; border: 1px solid rgba(55,72,54,.14); border-radius: 1rem; background: rgba(255,255,255,.38); }
.info-detail-grid h2 { margin: 0 0 .55rem; font-size: 1.2rem; }
.info-detail-grid p, .info-draft-note { margin: 0; }
.info-draft-note { margin-top: 2rem; font-size: .86rem; font-style: italic; opacity: .7; }
@media (max-width: 680px) { .info-detail-grid { grid-template-columns: 1fr; } }

/* V5.17 — Mobile: remove botanical rail entirely and reclaim content width */
@media (max-width: 820px){
  :root{
    --botanical-rail: 0px;
  }

  .scroll-plant,
  .scroll-plant.growth-vine{
    display:none !important;
  }

  body.has-scroll-plant main{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
  }
}

/* V5.19 — fuller fireworks timeline icon */
.sketch-fireworks svg{
  width:74px;
  height:74px;
}
.sketch-fireworks path{
  stroke-width:1.55;
}
.sketch-fireworks .soft{
  stroke-width:1.18;
}
@media (max-width:820px){
  .sketch-fireworks svg{width:68px;height:68px}
}
@media (max-width:560px){
  .sketch-fireworks svg{width:64px;height:64px}
}


/* V5.22 — Hero CTA fixed-position centering: never move on hover/touch */
.hero .hero-cta-edge,
.hero .hero-cta-edge:hover,
.hero .hero-cta-edge:focus,
.hero .hero-cta-edge:focus-visible,
.hero .hero-cta-edge:active{
  left:0 !important;
  right:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
}


/* V5.23 — Mobile full-screen hero + reversible scroll fades */
@media (max-width: 820px){
  .hero{
    min-height:100svh !important;
    height:100svh;
  }
  .hero-image{
    transform:translate3d(0,var(--hero-parallax,0px),0) scale(1.045);
  }
  .hero-content{
    top:max(1.35rem,env(safe-area-inset-top));
  }
}

@media (max-width: 480px){
  .hero{
    min-height:100svh !important;
    height:100svh;
  }
  .hero-content{
    top:max(1.15rem,env(safe-area-inset-top));
  }
  .hero h1{
    font-size:clamp(2.95rem,12.8vw,4.35rem);
  }
}

/* Existing reveal components now fade both entering and leaving the viewport. */
.reveal{
  will-change:opacity,transform;
}

/* More articulated timeline motion: time, illustration and copy breathe separately. */
.day-step .day-time,
.day-step .sketch,
.day-step .day-copy{
  opacity:.10;
  transition:
    opacity .58s cubic-bezier(.22,.61,.36,1),
    transform .68s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.day-step .day-time{transform:translate3d(-10px,0,0)}
.day-step .sketch{transform:scale(.91)}
.day-step .day-copy{transform:translate3d(10px,0,0)}
.day-step.is-active .day-time,
.day-step.is-active .sketch,
.day-step.is-active .day-copy{
  opacity:1;
  transform:none;
}
.day-step.is-active .sketch{transition-delay:.06s}
.day-step.is-active .day-copy{transition-delay:.12s}

/* The two practical-information cards enter with a restrained stagger. */
.useful-grid.reveal article{
  opacity:.12;
  transform:translate3d(0,12px,0);
  transition:
    opacity .58s cubic-bezier(.22,.61,.36,1),
    transform .68s cubic-bezier(.22,.61,.36,1);
}
.useful-grid.reveal.is-visible article{
  opacity:1;
  transform:none;
}
.useful-grid.reveal.is-visible article:nth-child(2){transition-delay:.10s}

/* Hero elements dissolve as the opening scene leaves the screen. */
.hero-cta-edge{
  opacity:var(--hero-cta-opacity,1);
  transition:background .2s ease,box-shadow .2s ease,opacity .28s linear;
  will-change:opacity;
}

@media (prefers-reduced-motion: reduce){
  .day-step .day-time,
  .day-step .sketch,
  .day-step .day-copy,
  .useful-grid.reveal article,
  .hero-cta-edge{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* V5.27 — Slower Hero opening sequence + CTA fade-in */
@media (prefers-reduced-motion: no-preference){
  .hero .eyebrow,
  .hero h1{
    opacity:0;
    animation:heroOpeningText 1.6s cubic-bezier(.22,.61,.36,1) forwards;
    will-change:opacity,transform;
  }
  .hero .eyebrow{
    animation-delay:.12s;
  }
  .hero h1{
    animation-delay:.42s;
  }
  .hero .hero-cta-edge{
    animation:heroOpeningCta 1.6s cubic-bezier(.22,.61,.36,1) .72s both;
    will-change:filter,opacity;
  }
}

@keyframes heroOpeningText{
  0%{
    opacity:0;
    transform:translate3d(0,14px,0);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

/* Filter opacity is used deliberately so the existing scroll-driven
   --hero-cta-opacity continues to work after the opening animation. */
@keyframes heroOpeningCta{
  0%{filter:opacity(0)}
  100%{filter:opacity(1)}
}

@media (prefers-reduced-motion: reduce){
  .hero .eyebrow,
  .hero h1{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  .hero .hero-cta-edge{
    filter:none !important;
    animation:none !important;
  }
}