@font-face{
  font-family:"Comico";
  src:url("./assets/fonts/Comico-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Mika Handwriting";
  src:url("./assets/fonts/Mika-Handwrite.woff2") format("woff2"),
      url("./assets/fonts/Mika-Write.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Pally";
  src:url("./assets/fonts/Pally-Regular.woff2") format("woff2"),
      url("./assets/fonts/Pally-Regular.woff") format("woff"),
      url("./assets/fonts/Pally-Regular.ttf") format("truetype"),
      url("./assets/fonts/Pally-Medium.woff") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --sage:#7b8f7a;
  --champagne:#d9c7a3;
  --burgundy:#6e2338;
  --ivory:#f6f1e8;
  --ink:#2e2a29;
  --muted:#6f6762;
  --card:#efe9df;
  --card-2:#ece5db;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  padding:0;
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
img{max-width:100%; display:block}

/* =========================
   INVITATION PAGE WRAPPERS
========================= */
.site{
  max-width:100%;
  margin:0 auto;
  padding:0 0 0px;
  opacity:0;
  transform:translateY(18px);
  transition:.8s ease;
}
.site.show{opacity:1; transform:translateY(0);}

 .eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--muted);
  margin:0 0 8px;
} 

/* Intro */
 .intro{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#f9f5ee 0%,#f2eae0 100%);
  transition:opacity .2s ease, visibility .2s ease;
}

.intro.hide{opacity:0; visibility:hidden; pointer-events:none;} 
 .envelope-wrap{
  position:absolute; inset:0;
  text-align:center;
  padding:18px;
  background:
    linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)),
    
}
.intro-title{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2rem,8vw,3rem);
  color:var(--card);
  margin:8px 0 2px;
}

.open-btn{
  border:0; border-radius:999px;
  padding:12px 24px; cursor:pointer;
  background:var(--sage); color:#fff; font-weight:600;
}

/* hide the old built-from-scratch envelope elements since the image replaces them */
.intro{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f6f1e8;
  overflow:hidden;
}

.envelope-wrap{
  position:relative;
  height:150%;
  max-height:100vh;
  max-height:100dvh;
  width:auto;
  aspect-ratio: 1024 / 1536;   /* exact ratio of invite-card.png */
  max-width:600px;
  margin:0 auto;
  overflow:hidden;
}


/* mobile tweaks */
.seal-hint{
  position:absolute;
  top:0%;
  margin-top:85px;
  white-space:nowrap;          /* forces single line */
  font-family:"Cormorant Garamond", serif;
  font-style:normal;           /* italic can hurt readability at small sizes */
  font-weight:600;
  font-size:clamp(.90rem, 3vw, .95rem);
  letter-spacing:.02em;
  color:#3a332f;
  text-align:center;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
}


/* to move the invite text down so it clears the monogram, we can adjust the top percentage */
.invite-text{
  position:absolute;
  top:33%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  text-align:center;
  width:min(320px, 80vw);
  color:#2e2a29;
}

.invite-date{
  margin:0 0 45px;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:clamp(1rem, 1vw, 1.05rem);
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.invite-names{
  margin: 0 0 50px;
  font-family: "Comico", sans-serif;
  font-weight: 600;
  top:33%;
  left:50%;
  transform:translate(0%,-10%);
  letter-spacing: .04em;
  font-size: clamp(1.35rem, 4.8vw, 4rem);
  line-height: 1.05;
  white-space: nowrap;         /* force one line */
  text-wrap: nowrap;
}


.invite-tagline{
  margin:0;
  font-size:clamp(.9rem, 3.2vw, 1.15rem);
  color:#4f4741;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.seal-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
  transform-origin:center;
  animation:sealPulse 2.2s ease-in-out infinite;
  transition:filter .3s ease, transform .3s ease;
}

/* pause the idle pulse and give a distinct hover feedback */
.seal-btn:hover .seal-img{
  animation-play-state:paused;
  transform:scale(1.12) rotate(-4deg);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)) brightness(1.12);
}

.seal-btn:active .seal-img{
  transform:scale(.95) rotate(0deg);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.3)) brightness(.95);
}

.seal-btn:focus-visible .seal-img{
  outline:2px solid #8a5a20;
  outline-offset:4px;
  border-radius:50%;
}

@keyframes sealPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

/* hint text reacts too, so hover feels connected to the whole element */
.seal-hint{
  transition:color .3s ease, transform .3s ease;
}

.seal-wrap:hover .seal-hint{
  color:#8a5a20;
  transform:translateX(-50%) scale(1.05);
}

@media (min-width:769px){
  .intro{
    background:radial-gradient(ellipse at center, #f9f5ee 0%, #ece3d3 100%);
  }
  
  /* this is for desktop view */
  .envelope-wrap{
    height:99.5vh;              /* increased from 92vh */
    max-height:2500px;        /* increased from 920px */
    width:auto;
    aspect-ratio:1024 / 1536;
    max-width:2500px;          /* increased from 520px */
    margin:0 auto;
    overflow:visible;
    border-radius:1px;
  }

  .seal-wrap{
    bottom:100%;                 /* was 0% — that pushed it off/below the card */
    width:60vw;
    min-width:64px;
    max-width:200px;
    z-index:999;
  }

  .invite-text{
    top:33%;                   /* was 33% and measured against the oversized card */
    width:min(320px, 82vw);
  }
  .invite-date{
    font-size:1rem;
    letter-spacing:.18em;
  }
  .invite-names{
    font-size:2rem;
  }
  .invite-tagline{
    font-size:1rem;
  }
  .seal-btn{
  top: 570%;
  position:relative;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  cursor:pointer;
  border-radius:50%;
  background:transparent;
 }

  .seal-hint{
      top: 500%;
      position:relative;
      width:100%;
      height:100%;
      border:0;
      padding:0;
      left: 40%;
      transform: translateX(-50%);
  }

}

.invite-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}

.seal-wrap{
  position:absolute;
  bottom:100%;              /* pushed lower — was 35% (desktop) / 50% (mobile) */
  left:50%;
  transform:translateX(-50%);
  width:22vw;
  max-width:120px;
  min-width:70px;             /* guarantees visible size even on tiny screens */
  aspect-ratio:1/1;
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.seal-btn{
  position:relative;
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  border-radius:50%;
}

.seal-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
  animation: sealSpin 4s linear infinite; /* continuous rotate */
}

@keyframes sealSpin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width:480px){
  .seal-hint{
    font-size:.72rem;
    margin-top:100px;
  }
  .invite-text{
    top:33%;
    width:min(260px, 82vw);
  }
  .seal-wrap{
    bottom:36%;
    width:20vw;
    min-width:64px;
  }
  .invite-date{
    font-size:1rem;
    letter-spacing:.18em;
  }
  .invite-names{
    font-size: 2rem;
  }
  .invite-tagline{
    font-size:1rem;
  }
}



/* =========================
   HERO (UPDATED FULL DESIGN)
   ========================= */
#home.hero.hero-sketch{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  min-height: 100svh;
  margin:0 !important;
  padding: 0;
  overflow: hidden;
  background: #dfeaf4;
  isolation: isolate;
 
}

#home .hero-illustration img{
  width: 100%;
  height: 100%;
  max-width: none;
  display:flex; align-items:center; justify-content:center;
  transform: scale(1.08);
  transform-origin: center;

}

/* right gradient */
#home::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.70) 18%,
    rgba(255,255,255,.30) 38%,
    rgba(255,255,255,.08) 56%,
    rgba(255,255,255,0) 66%
  );
}

/* content on right */
#home .hero-layout{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: clamp(16px, 2.8vw, 36px) clamp(14px, 3vw, 42px);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
}

#home .hero-content{
  width: min(560px, 42vw);
  margin-left: auto;
  text-align: center;
}

/* title text */
#home .hero-title-text{
  margin: 0 auto 14px;
  color: #4c352e;
  text-transform: uppercase;
}
#home .hero-kicker{
  margin: 0 0 12px;
  font-family: "Comico", "Patrick Hand", cursive;
  font-size: clamp(18px, 1.6vw, 34px);
  letter-spacing: .08em;
}
#home .hero-names{
  margin: 0;
  font-family: "Comico";
  font-size: clamp(72px, 9vw, 156px);
  line-height: .9;
  letter-spacing: .01em;
}
#home .hero-names span{ display:block; }
#home .hero-names .amp{ font-size: .62em; margin: .06em 0; }

/* countdown */
#home .hero-countdown{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 10px auto 0;
}
#home .hero-countdown .time-box{
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #aeb7a0;
  border: 2px solid #f2f0e9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
}
#home .hero-countdown .num{
  font-family:"Cormorant Garamond",serif;
  font-size:1.95rem;
  line-height:1;
  font-weight:700;
  color:#f3ddc3;
}
#home .hero-countdown .label{
  margin-top:2px;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#f3ddc3;
  line-height:1;
}

/* arrow */
#home .come-with-us{display:block; margin:10px auto 0;}
#home .sketch-arrow{
  display:flex; justify-content:center; align-items:center;
  width:100%; margin:6px auto 0; text-decoration:none;
  animation:bounceArrow 1.5s ease-in-out infinite;
}
#home .sketch-arrow img{width:34px; height:auto;}
#home .sketch-arrow:hover{animation-play-state:paused; transform:translateY(2px);}

@keyframes bounceArrow{
  0%,100%{transform:translateY(0); opacity:1;}
  30%{transform:translateY(8px); opacity:.95;}
  55%{transform:translateY(1px);}
  75%{transform:translateY(5px); opacity:.9;}
}

/* End of Hero */

.sections{
  display:block !important;
  margin-top:0 !important;
  gap:0 !important;
}
.card{
  background:var(--card);
  border-radius:24px;
  padding:18px;
  box-shadow:0 8px 22px rgba(20,16,14,.09);
  margin:0 auto;
}
.card h2{
  margin:0 0 10px;
  font-family:"Comico",sans-serif;
  font-size:2rem;
  font-weight:600;
  text-align:center;
}
.muted{color:var(--muted)}

/* Utility */
.full-bleed{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding-left:16px !important;
  padding-right:16px !important;
}

/*end of utility */

/* vertical logo divider (restore) */
.laudes-divider{
  width:100%;
  height:64px;                      /* adjust if you want taller */
  margin:10px 0;
  background:url("./assets/images/laudes-divider.png") center center / contain no-repeat;
  display:block !important;
  position:relative;
  z-index:5;
} */
.laudes-divider{
  height:128px;
  background-color:#fff;
  background-image:
    url("./assets/images/favicon.png"),
    url("./assets/images/favicon.png"),
    url("./assets/images/favicon.png");

  background-repeat:repeat-x, repeat-x, repeat-x;

  /* smaller logos = more count per row */
  background-size:56px auto, 56px auto, 56px auto;

  /* staggered rows */
  background-position:
    0 8px,      /* row 1 */
    28px 44px,  /* row 2 shifted half */
    0 80px;     /* row 3 */
}

/* flip only second row */
.laudes-divider{
  position:relative;
  overflow:hidden;
}

/* if inside full-bleed sections, keep it above overlays */
.full-bleed .laudes-divider{
  z-index:6;
}

/* End of Laudes Divider */



/* Story*/
#our-story.card.story-sketch{
  background:#fff !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.story-title{
  margin:0;
  font-family:"Comico",sans-serif;
  line-height:.95;
  letter-spacing:.03em;
  color:#4f362d;
  text-transform:uppercase;
}
.story-sub{margin-top:8px;}

.know-icons{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:26px 20px;
  justify-items:center;   /* centers each item horizontally in its cell */
  align-items:start;      /* keeps icon+caption tops aligned per row */
}
.know-item{
  margin:0;               /* reset default <figure> margin causing the shift */
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.know-item .icon-wrap{
   width:110px;
  height:110px;
  display:grid;
  place-items:center;
  margin:0 auto 8px;
}
.know-item figcaption{
  margin:0;
  max-width:190px;
}
.know-item img{
  width:100%; height:100%; object-fit:contain; object-position:center; display:block;
}
.know-item p,.know-item figcaption{
  margin:0; font-size:.78rem; line-height:1.35; color:#3f3a37; max-width:190px;font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* base icon animation */
.know-item .icon-wrap img{
  transition: transform .35s ease, filter .35s ease;
  transform-origin: center;
  will-change: transform;
}

/* hover/tap lift */
.know-item:hover .icon-wrap img{
  transform: translateY(-4px) scale(1.06) rotate(-2deg);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.12));
}

/* gentle floating loop */
.know-item .icon-wrap img{
  animation: iconFloat 2.2s ease-in-out infinite;
}

/* stagger each icon so they don't move in sync */
.know-item:nth-child(2) .icon-wrap img{ animation-delay: .2s; }
.know-item:nth-child(3) .icon-wrap img{ animation-delay: .4s; }
.know-item:nth-child(4) .icon-wrap img{ animation-delay: .6s; }
.know-item:nth-child(5) .icon-wrap img{ animation-delay: .8s; }
.know-item:nth-child(6) .icon-wrap img{ animation-delay: 1s; }
.know-item:nth-child(7) .icon-wrap img{ animation-delay: 1.2s; }
.know-item:nth-child(8) .icon-wrap img{ animation-delay: 1.4s; }

@keyframes iconFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-5px) rotate(1.2deg); }
}

/* accessibility: reduce motion support */
@media (prefers-reduced-motion: reduce){
  .know-item .icon-wrap img{
    animation:none !important;
    transition:none !important;
  }
}

/* mobile: keep 2 columns, tighten gap and icon size */
@media (max-width: 640px){
  .know-icons{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px 14px;
  }
  .know-item .icon-wrap{
    width:88px;
    height:88px;
  }
  .know-item figcaption{
    font-size:.72rem;
    max-width:160px;
  }
}

/* ===== OUR STORY REFRESH ===== */
#our-story.story-sketch{
  background:#d9c4c7 !important; /* dusty rose - fits your motif */
  padding:72px 14px 88px !important;
}

#our-story .story-wrap{
  width:min(1040px, 94%);
  margin:0 auto;
  margin-top:-50px;
  margin-bottom:-30px;
  text-align:center;
}

#our-story .story-title{
  margin-bottom:10px;
  white-space: nowrap !important;
  font-size:clamp(1.5rem, 6vw, 3.2rem);
}

#our-story .story-sub{
  margin-bottom:28px;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* scrapbook layout */
#our-story .story-board{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:center;
  margin:20px auto 8px;
}

/* letter card */
/* letter: show image as-is (no border/card/bg/shadow) */
#our-story .story-letter{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  transform:none !important; /* optional: keeps it straight */
}

#our-story .story-letter img{
  display:block;
  width:100%;
  height:auto;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;

}

#our-story .story-letter{ transform:rotate(-1deg); }

/* polaroid/photo frame */
/* remove old polaroid look */
#our-story .story-photo-frame{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  transform:none !important;
}

/* new film strip */
#our-story .story-filmstrip{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

#our-story .story-filmstrip img{
  width:min(420px, 100%);
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
}

/* desktop balance with letter */
@media (min-width:1024px){
  #our-story .story-board{
    grid-template-columns:1.05fr .95fr;
    gap:26px;
    align-items:start;
  }
}

/* mobile */
@media (max-width:820px){
  #our-story .story-filmstrip img{
    width:min(340px, 92%);
  }
}

#our-story .story-note{
  margin-top:16px;
  color:#51353b;
  font-size:.95rem;
  letter-spacing:.02em;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* mobile */
@media (max-width: 820px){
  #our-story.story-sketch{
    padding:56px 10px 64px !important;
  }

  #our-story .story-board{
    grid-template-columns:1fr;
    gap:14px;
  }

  #our-story .story-letter,
  #our-story .story-photo-frame{
    transform:none;
  }

  #our-story .story-photo-frame img{
    aspect-ratio:4/3;
  }
}

/* End of Story section */

/* ===== CEREMONY REDESIGN: rounded photo cards + connector ===== */
/* ===== TWO PLACES SECTION (new design) ===== */
/* =========================
   TWO PLACES - MOBILE FRIENDLY
   ========================= */
#ceremony.ceremony-sketch{
  margin: 0 !important;
  margin-bottom: -29px !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #c48e91 !important; /* dusty rose */
  padding: 24px 14px 40px !important;
  min-height: auto !important;
  padding-bottom: 40px !important;
}

#ceremony .places-wrap{
  width: min(980px, 100%);
  margin: 0 auto;
  margin-bottom: 30px;
}

#ceremony .places-title{
  margin: 0 0 20px;
  text-align: center;
  color: #fff;
  font-family: "Comico", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(1.8rem, 5.5vw, 3rem);
}

/* optional note */
#ceremony .places-note-title{
  padding-top: 30px;
  margin-top: 70px;
  margin: 0 0 0px;
  text-align: center;
  color: #fff;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
#ceremony .places-note{
  margin: 20px auto;
  margin-bottom: 60px;
  width: min(96%, 760px);
  text-align: center;
  color: rgba(255,255,255,.95);
  line-height: 1.4;
  font-size: .80rem;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* stack layout (mobile first) */
#ceremony .places-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

/* card style */
#ceremony .place-card{
  background: #f6efe8;
  border-radius: 15px;
  overflow: hidden;
  
}

#ceremony .place-type{
  margin: 0;
  padding: 6px 12px;
  text-align: center;
  color: #faf8f8;
  letter-spacing: .08em;
  font-size: clamp(.85rem, 2.5vw, 1.05rem);
  background: #c48e91; /* white */
}

#ceremony .place-photo img{
  width: 100%;
  height: clamp(250px, 58vw, 520px);
  object-fit: cover;
  display: block;
}

#ceremony .place-meta{
  padding: 12px 14px 14px;
  text-align: center;
}

#ceremony .place-name{
  margin: 0;
  color: #5b3b3d;
  font-style: italic;
  font-size: clamp( 1rem, .50vw, .50rem);
  line-height: 1.05;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

#ceremony .place-loc{
  margin: 2px 0 0;
  color: #6f5758;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(.60rem, .50vw, 1.15rem);
}
/* center the whole connector block between cards */
#ceremony .places-connector{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  margin: 10px auto !important;
}

/* make sure svg is centered */
#ceremony .connector-line{
  width: 64px !important;
  height: 96px !important;
  display: block !important;
  margin: 0 auto !important;
}

/* center text/info under connector */
#ceremony .connector-info{
  width: 100% !important;
  margin: 2px auto 0 !important;
  text-align: center !important;
  color:#f1eaea;
}


#ceremony .route-wrap{
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 10px;
}

#ceremony .route-line{
  width: 120px;
  height: 180px;
}

#ceremony .route-info{
  text-align: center;
  color: #5b3b3d;
}

#ceremony .route-info .car{
  font-size: 2rem;
  line-height: 1;
}

#ceremony .route-info .approx{
  margin-top: 2px;
  letter-spacing: .12em;
  font-size: .8rem;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

#ceremony .route-info .dist{
  margin-top: 2px;
  font-size: 3.2rem;
  line-height: .9;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

#ceremony .route-info .time{
  margin-top: 2px;
  letter-spacing: .09em;
  font-size: 1rem;
  line-height: 1.2;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


.map-btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;

  padding: 3px 8px !important;   /* smaller bg */
  border-radius: 999px !important;

  background: #a83b52 !important;
  color: #fff !important;
  font-size: .62rem !important;
  line-height: 1 !important;
  font-weight: 600;
  gap: 3px;
  white-space: nowrap;
}
.map-btn-icon{ font-size: .68rem !important; }

.map-btn,
.map-btn:link,
.map-btn:visited,
.map-btn:hover,
.map-btn:active{
  text-decoration: none !important;
}

/* tablet+desktop refinement */
@media (min-width: 901px){
  #ceremony.ceremony-sketch{
    padding: 50px 20px 58px !important;
  }

  #ceremony .places-title{
    font-size: clamp(2rem, 3.2vw, 3rem);
    margin-bottom: 26px;
    font-family: 
      url("./assets/fonts/Pally-Regular.woff") format("woff"), serif;
  }

  #ceremony .places-grid{
    grid-template-columns: 1fr 230px 1fr;
    gap: 22px;
    align-items: center;
  }

  #ceremony .place-photo img{
    height: clamp(290px, 28vw, 430px);
  }

  #ceremony .places-connector{
    padding: 0;
  }

  #ceremony .route-wrap{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #ceremony .route-line{
    width: 140px;
    height: 210px;
  }
}

.pin-point-img{
  width: 100px;        /* adjust to match mockup */
  height: auto;
  display: block;
  margin: 0 auto 6px;
  object-fit: contain;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.35));
}

.car-icon-img{
  width: 30px;        /* adjust to match mockup */
  height: auto;
  display: block;
  margin: 0 auto 6px;
  object-fit: contain;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.35));
}
/* End of Ceremony */

/* Dress code */
/* ===== DRESS CODE redesign (keep existing bg) ===== */
#dresscode.dresscode-sketch{
  margin:0 !important;
  margin-bottom: -29px !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  background:#ecd3b4 !important;
  padding:28px 14px 40px !important; /* no negative padding */
  min-height:auto !important;
  display:block !important; /* remove flex centering */
}



#dresscode .dresscode-content{
  width:min(560px, 92%);
  margin:0 auto !important;  /* remove negative margin */
  text-align:center;
}


#dresscode .dresscode-title{
  text-align: center;
  font-family:"Comico", sans-serif;
  font-weight:500;
  letter-spacing:.02em;
  font-size:clamp(2.2rem, 2vw, 5rem);
  line-height:.95;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  transform: translateY(-6px);    /* nudge title upward */
}

#dresscode .dresscode-figures{
  margin:0 auto 14px;
}
#dresscode .dresscode-figures img{
  width: min(190px, 54vw) !important;
  height:auto;
  display:block;
  margin:0 auto;
  object-fit:contain;
}

#dresscode .dresscode-formal{
  margin:8px 0 4px;
  font-weight:800;
  letter-spacing:.14em;
  font-size:clamp(.80rem, 1vw, 1rem);
  color:#222;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

#dresscode .dresscode-note{
  margin:0 auto 20px;
  max-width:760px;
  text-transform:lowercase;
  letter-spacing:.08em;
  line-height:1.35;
  font-size: .80rem;
  color:#333;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

#dresscode .dress-palette{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  flex-wrap:nowrap;
  margin:10px auto 0;
}

#dresscode .dress-palette span{
  width:clamp(54px, 11vw, 150px);
  aspect-ratio:1/1;
  border-radius:999px;
  background:var(--c);
  margin-left:-10px;
  border:1px solid rgba(255,255,255,.22);
}
#dresscode .dress-palette span:first-child{
  margin-left:0;
}

/* smaller dress code colors */
#dresscode .palette-group .dress-palette span{
  width: 86px !important;   /* was too wide */
  height: 54px !important;  /* reduce height too */
  border-radius: 999px;

}

@media (max-width:768px){
  #dresscode .dresscode-title{
    margin-top: -80px !important;
    margin-bottom: -10px !important;
  }
  #dresscode.dresscode-sketch{
    min-height:auto !important;
    padding:20px 12px 40px !important; /* top right bottom */
  }

  #dresscode .dresscode-figures img{
    width:min(320px, 92%);
  }

  #dresscode .palette-group .dress-palette span{
    width: 64px !important;
    height: 42px !important;
  }
} 


.dresscode-groups{
  display:grid;
  gap:18px;
  margin-top:14px;
}
.palette-group h4{
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.82rem;
  color:#3a3330;
}
.palette-group .dress-palette{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
}
.palette-group .dress-palette span{
  width:44px;
  height:44px;
  border-radius:999px;
  background:var(--c);
  border:1px solid rgba(0,0,0,.08);
}


/* end of Dress Code section */

/* Events */

#order-of-events.events-sketch{
  min-height:100vh;
  padding:120px 16px 90px !important;
  display:flex; justify-content:center; align-items:flex-start;
  /* background:url("./assets/images/order-bg.png") top center / cover no-repeat !important; */
  color:#4f362d;
}
#order-of-events .events-content{
  width:min(560px,92%); margin:0 auto; text-align:center;
  margin:-105px;
}
#order-of-events .events-title{
  margin:100px 0 28px;
  font-family:"Comico",sans-serif;
  font-size:clamp(2rem,5.2vw,3rem);
  color:#2f2f2f; line-height:1;
}
.events-list{
  list-style:none; padding:0; margin:90px auto 0;
  width:min(760px,94%); display:grid; gap:18px;
}
.events-list li{
  display:grid; grid-template-columns:160px 1fr; column-gap:18px; align-items:center;
}
.events-list .time,.events-list .label{
  font-family:"Mika Handwriting","Comico",cursive; letter-spacing:.2px;
}
.events-list .time{font-size:clamp(2rem,4vw,2.6rem); color:#7f2f35; line-height:1;}
.events-list .label{
  font-size:clamp(1.9rem,3.8vw,2.4rem);
  color:#4b352d; line-height:1.05; text-transform:uppercase;
}

/* image version of order of events */
#order-of-events .events-content{
  width:min(980px, 100%);
  margin:-105px;
  text-align:center;
}

#order-of-events .events-flow-img{
  width:min(560px, 100%);
  height:auto;
  margin:24px auto 0;
  display:block;
}

/* optional: if you still have old <ul class="events-list"> in HTML */
#order-of-events .events-list{
  display:none !important;
}

/* remove extra bottom space in Order of Events */
#order-of-events.events-sketch{
  min-height:auto !important;
  height:auto !important;
  padding:70px 12px 20px !important;   /* reduce bottom padding */
}

#order-of-events .events-content{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

#order-of-events .events-flow-img{
  margin-bottom:0 !important;
  display:block;
}

/* mobile tighter */
@media (max-width:768px){
  #order-of-events.events-sketch{
    min-height:auto !important;
    padding:56px 10px 8px !important;  /* small bottom gap */
  }
}

/* End of Order of events */


/* Entourage */
#entourage.entourage-sketch{
  margin:0 !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  min-height:100vh;
  padding:150px 24px 180px !important;
  background:url("./assets/images/entourage-bg1.png") top center / cover no-repeat !important;
}
#entourage .entourage-content{
  width:min(1000px,100%); margin:0 auto; text-align:center; color:#3d2f2a;
}
#entourage .entourage-title{
  margin:-40px 0 40px; line-height:1; font-family:"Comico",sans-serif; font-size:clamp(2rem,5vw,3rem);
}
.entourage-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
.role{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(127,47,53,.18);
  border-radius:14px;
  padding:16px 14px;
}
.role h3{
  margin:0 0 8px; color:#7f2f35; font-family:"Comico",sans-serif; font-size:1.2rem;
}
.role p{margin:4px 0; font-size:1rem;}

/* RSVP CTA section on index */
#rsvp.rsvp-sketch{
  margin:0 !important;
  background:#a8ae99 url("./assets/images/rsvp-bg.png") top center / cover no-repeat !important;
  min-height:72vh;
  padding:84px 16px 72px !important;
  display:flex; align-items:center; justify-content:center;
}
#rsvp .rsvp-cta-card{
  width:min(760px,100%);
  background:#f7f7f7;
  border:2px solid rgba(60,60,60,.62);
  border-radius:40px;
  box-shadow:10px 10px 0 rgba(70,70,70,.30);
  text-align:center;
  padding:34px 20px 28px;
}
#rsvp .rsvp-cta-title{
  margin:0;
  font-family:"Comico",sans-serif;
  font-size:clamp(3rem,8vw,5.4rem);
  line-height:.9;
  color:#3b3b3b;
}
#rsvp .rsvp-cta-sub{
  margin:14px 0 18px;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:#2f2f2f;
  font-size:clamp(.84rem,2vw,1.1rem);
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
#rsvp .rsvp-cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:min(650px,100%); min-height:60px;
  border-radius:999px;
  background:#3d3a39; color:#fff; text-decoration:none;
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  font-size:clamp(1rem,2.5vw,1.5rem);
  padding:0 22px;
}
#rsvp .rsvp-cta-btn:hover{filter:brightness(1.04);}
#rsvp .rsvp-cta-deadline{
  margin:18px 0 0; text-transform:uppercase; letter-spacing:.08em;
  color:#2e2e2e; font-size:clamp(.9rem,2vw,1.3rem);
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

/* Reveal */
.reveal-init{opacity:0; transform:translateY(14px);}
.reveal-in{
  opacity:1; transform:translateY(0);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay,0ms);
}

/* =========================
   FIND RESERVATION PAGE
========================= */
body.find-reservation-page{
  margin:0 !important;
  padding:0 !important;
  background:#f6f1e8 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height:100dvh !important;
  height:auto !important;
  position:relative !important;
  touch-action:pan-y !important;
}
body.find-reservation-page #intro,
body.find-reservation-page .intro{display:none !important;}
body.find-reservation-page .site{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  height:auto !important;
}
body.find-reservation-page .full-bleed{
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body.find-reservation-page main,
body.find-reservation-page .find-page{
  display:block !important;
  min-height:100dvh !important;
  height:auto !important;
  overflow:visible !important;
  padding:14px 10px 32px !important;
  background:#f6f1e8 !important;
}
body.find-reservation-page .find-wrap{
  width:min(760px,100%) !important;
  margin:0 auto !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:18px !important;
  box-shadow:0 8px 20px rgba(20,16,14,.08) !important;
  padding:16px 12px 18px !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
body.find-reservation-page .find-wrap h1{
  margin:0 0 6px;
  text-align:center;
  font-family:"Comico",sans-serif;
  font-size:clamp(1.8rem,6.5vw,2.8rem);
  color:#2f2725;
}
body.find-reservation-page .find-wrap > p{
  margin:0 0 14px;
  text-align:center;
  color:#5e5550;
}
body.find-reservation-page .find-wrap .rsvp-lookup,
body.find-reservation-page .find-wrap .rsvp-form{
  width:100%;
  margin:0 auto;
}
body.find-reservation-page .find-wrap label{
  display:block;
  margin:0 0 7px;
  font-weight:700;
  color:#4f4843;
}
body.find-reservation-page .find-wrap .lookup-row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:12px;
}
body.find-reservation-page .find-wrap input,
body.find-reservation-page .find-wrap select,
body.find-reservation-page .find-wrap textarea{
  width:100%;
  min-height:46px;
  border:0;
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
  font:inherit;
  color:#2f2a27;
  font-size:16px;
}
body.find-reservation-page .find-wrap .submit-btn{
  width:100%;
  min-height:46px;
  border:0;
  border-radius:12px;
  background:#6e2338;
  color:#fff;
  font-weight:700;
}
body.find-reservation-page .find-wrap .back-link{
  display:inline-block;
  margin-top:10px;
  color:#6e2338;
  text-decoration:none;
  font-weight:600;
}
body.find-reservation-page .seat-list-wrap,
body.find-reservation-page .seat-row,
body.find-reservation-page .rsvp-form{
  overflow:visible !important;
  max-height:none !important;
  height:auto !important;
}
body.find-reservation-page .seat-row{
  display:grid;
  gap:8px;
  margin:10px 0;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:800px){
  #entourage.entourage-sketch{
    padding:120px 14px 140px !important;
    min-height:88vh;
  }
  .entourage-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  #rsvp.rsvp-sketch{
    min-height:auto;
    padding:44px 12px 34px !important;
  }
  #rsvp .rsvp-cta-card{
    border-radius:28px;
    box-shadow:7px 7px 0 rgba(70,70,70,.24);
    padding:24px 14px 20px;
  }
  #rsvp .rsvp-cta-title{font-size:clamp(2.4rem,12vw,3.4rem);}
  #rsvp .rsvp-cta-btn{
    min-height:52px;
    font-size:clamp(.95rem,4.8vw,1.15rem);
  }
  #faq.faq-sketch{
    min-height:auto;
    padding:40px 12px 90px !important; /* updated fix */
  }
  #faq h2{
    font-size:clamp(1.7rem,7.2vw,2.3rem);
    margin-bottom:14px;
  }
  #faq .faq-item{
    border-radius:12px;
    padding:11px 12px;
    margin:8px 0;
  }
  .footer{
    padding:5px 5px 5px;
    margin-top:-3;
    align-items:center;
  }
}
@media (max-width:640px){
  #dresscode.dresscode-sketch{
    min-height:85vh;
    padding:120px 12px 110px !important;

  }
  .venue-caption{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .events-list{
    width:min(520px,96%);
    gap:14px;
  }
  .events-list li{
    grid-template-columns:120px 1fr;
    column-gap:12px;
  }
}
@media (min-width:768px){
  .hero.hero-sketch{padding:28px 20px 48px;}
  .hero-layout{
    max-width:980px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:20px;
  }
  .hero-illustration img{max-width:430px;}
  .hero-title-img{max-width:320px;}
  .hero-countdown .time-box{width:84px; height:84px;}

  body.find-reservation-page .find-wrap .lookup-row:has(#rsvpCodeInput){
    grid-template-columns:1fr auto;
    align-items:center;
  }
  body.find-reservation-page .find-wrap #findGuestBtn{
    width:210px;
  }
}

.find-reservation-illustration{
  margin:10px auto 0;
  width:min(760px,100%);
}
.find-reservation-illustration img{
  width:100%;
  height:auto;
  border-radius:14px;
  opacity:.08;
  pointer-events:none;
}

/* =========================
   FAQ HARD RESET (FINAL)
   keep this at very bottom
========================= */
#faq,
#faq.faq-sketch{
  position: relative !important;
  z-index: 50 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clear: both !important;

  min-height: auto !important;
  padding: 40px 12px 90px !important;
  background: #f6ead7 url("./assets/images/faq-bg.png") top center / cover no-repeat !important;
}

#faq .faq-content{
  position: relative !important;
  z-index: 60 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: min(920px, 100%) !important;
  margin: 0 auto !important;
  transform: none !important;
}

#faq h2{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#2f2725 !important;
  margin:0 0 14px !important;
}

#faq .faq-item{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background: rgba(255,255,255,.92) !important;
  border:1px solid rgba(127,47,53,.22) !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  margin:10px 0 !important;
}

#faq .faq-item summary{
  color:#6f2432 !important;
  font-weight:700 !important;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

#faq .faq-item p{
  color:#4a3a33 !important;
  margin:8px 0 0 !important;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* ensure RSVP isn't covering FAQ */
#rsvp,
#rsvp.rsvp-sketch{
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 0 !important;
}

/* ===== FAQ clipping fix (show all details items) ===== */
#faq,
#faq.faq-sketch,
#faq .faq-content{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

#faq.faq-sketch{
  display:block !important;
  min-height:auto !important;
  padding:10px 12px 20px !important;
}

#faq .faq-content{
  display:block !important;
}

#faq .faq-item{
  display:block !important;
  margin:10px 0 !important;
}

/* prevents fancy wrappers from clipping FAQ */
.sections,
.parallax-layer,
.card{
  overflow:visible;
}

/* but keep FAQ specifically safe from inherited transforms */
#faq.parallax-layer{
  transform:none !important;
}

/* ===== FAQ final sizing fix ===== */
#faq{
  position:relative !important;
  z-index:5 !important;
  height:auto !important;
  min-height:unset !important;
  max-height:none !important;
  overflow:visible !important;
  padding:40px 12px 120px !important;
}

#faq .faq-content{
  width:min(920px, 100%) !important;
  margin:0 auto !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  margin-bottom:0 !important;
}

#faq .faq-item{
  margin:12px 0 !important;
}

#faq .faq-item summary{
  list-style:none;
}
#faq .faq-item summary::-webkit-details-marker{
  display:none;
}
#faq .faq-item summary::before{
  content:"▶";
  margin-right:10px;
  color:#7a2434;
  font-size:.9em;
}
#faq .faq-item[open] summary::before{
  content:"▼";
}

/* ===== End of FAQ ===== */

/* HERO: use background like RSVP does — reliable on all screens */
#home.hero.hero-sketch {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100svh !important;
  height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  /* same pattern as RSVP */
  background: url("./assets/images/hero-custom.jpg") top center / cover no-repeat !important;
}

/* bottom gradient overlay */
#home .hero-gradient-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.66) 20%,
    rgba(255,255,255,0.28) 42%,
    rgba(255,255,255,0.06) 58%,
    rgba(255,255,255,0.00) 68%
  ) !important;
}

/* kill the ::after duplicate */
#home::after { display: none !important; }

/* content */
#home .hero-content {
  position: absolute !important;
  top: 50% !important;
  right: 5% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: min(420px, 46vw) !important;
  text-align: center !important;
}

/* desktop */
@media (min-width: 769px) {
  #home.hero.hero-sketch {
    background-position: 38% center !important;
  }
  #home .hero-content {
    width: min(420px, 44vw) !important;
    right: 4% !important;
  }
}

@media (max-width: 768px) {
  #home.hero.hero-sketch {
    height: auto !important;
    min-height: unset !important;   /* removed 100svh — was causing the gap */
    aspect-ratio: unset !important;
    display: block !important;     /* no longer needs flex/column now */
  }

  #home .hero-illustration {
    position: relative !important;  /* becomes the positioning context for hero-content */
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: unset !important;
  }

  #home .hero-illustration img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  #home .hero-content {
    position: absolute !important;
    top: 50% !important;
    right: 4% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    width: min(170px, 44vw) !important;
    text-align: center !important;
  }
  
  /* bottom gradient overlay */
  #home .hero-gradient-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to top,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.66) 20%,
      rgba(255,255,255,0.28) 42%,
      rgba(255,255,255,0.06) 58%,
      rgba(255,255,255,0.00) 68%
    ) !important;
  }

  #home .hero-kicker {
    font-size: clamp(8px, 2.2vw, 10px) !important;
    margin: 0 0 4px !important;
  }

  #home .hero-names {
    font-size: clamp(26px, 7vw, 38px) !important;
    line-height: .85 !important;
  }

  #home .hero-countdown {
    gap: 4px !important;
    margin-top: 6px !important;
  }

  #home .hero-countdown .time-box {
    width: 34px !important;
    height: 34px !important;
    padding: 4px 2px !important;
  }
  #home .hero-countdown .num  { font-size: .7rem !important; }
  #home .hero-countdown .label { font-size: .28rem !important; }
}

/* ===== GIFT SECTION ===== */
#gift.gift-sketch{
  margin: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 70px 16px 76px !important;
  background: #f6efe8;
}

#gift .gift-content{
  width: min(860px, 94%);
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(110,35,56,.14);
  border-radius: 24px;
  padding: 30px 22px;
  box-shadow: 0 10px 24px rgba(20,16,14,.07);
}

#gift .gift-title{
  margin: 0 0 12px;
  font-family: "Comico", sans-serif;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  color: #6e2338;
}

#gift p{
  margin: 10px auto 0;
  color: #4b3f3a;
  line-height: 1.65;
  font-size: clamp(.98rem, 2vw, 1.1rem);
  max-width: 720px;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

@media (max-width: 768px){
  #gift.gift-sketch{
    padding: 46px 12px 54px !important;
  }

  #gift .gift-content{
    border-radius: 18px;
    padding: 22px 14px;
  }
}

/* ===== ENTOURAGE (minimal elegant layout) ===== */
#entourage.entourage-sketch{
  margin: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 72px 16px 84px !important;
  min-height: auto !important;
  background: #f7f1e8 !important;
}

#entourage .entourage-content{
  width: min(820px, 94%);
  margin: 0 auto;
  text-align: center;
  color: #5a473e;
}

#entourage .entourage-title{
  margin: 0 0 22px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: #6e2338;
}

#entourage .ent-block{
  margin: 0 0 15px;
}

#entourage .ent-block h3{
  margin: 0 0 3px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 500;
  font-size: clamp(.95rem, .80vw, 2.1rem);
  color: #6e2338;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

#entourage .ent-block h4{
  margin: 0 0 2px;
  letter-spacing: .05em;
  font-weight: 500;
  font-size: clamp(.95rem, .80vw, 2.1rem);
  color: #6e2338;
  align-items: center;
}

#entourage .ent-block p{
  margin: 2px 0;
  /* font-family: "Cormorant Garamond", serif; */
  font-size: clamp(.80rem, .30vw, 1.75rem);
  line-height: 1.35;
  color: #64544b;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* two-column rows */
#entourage .ent-two-col,
#entourage .ent-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  justify-items: center;
  align-items: start;
}

@media (max-width: 768px){
  #entourage.entourage-sketch{
    padding: 56px 12px 62px !important;
  }

  #entourage .ent-two-col,
  #entourage .ent-pair{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #entourage .ent-block{
    margin-bottom: 20px;
  }
}