/* ═══════════════════════════════════════════════════════════
   IVORY — wedding & event planning template
   Editorial, photography-led
   Designs by Delia
   ═══════════════════════════════════════════════════════════ */

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

:root{
  --cream:#F8F6F1;
  --cream-2:#F0EDE5;
  --ink:#14120E;
  --ink-2:#2C2A24;
  --muted:#8A857B;
  --stone:#D4CFC5;
  --line:#E2DDD3;
  --moss:#5C6049;
  --disp:'Cormorant Garamond',Garamond,serif;
  --sans:'Poppins',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.25,1,.3,1);
  --pad:clamp(20px,5vw,70px);
}

html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);font-size:15px;line-height:1.85;font-weight:300;
  color:var(--ink-2);background:var(--cream);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0;}
::selection{background:var(--ink);color:var(--cream);}

.wrap{max-width:1300px;margin:0 auto;padding:0 var(--pad);}
.wrap-n{max-width:960px;}
.caps{
  font-family:var(--sans);font-size:10.5px;font-weight:400;letter-spacing:.32em;
  text-transform:uppercase;color:var(--muted);display:block;
}
.dsp{font-family:var(--disp);font-weight:300;line-height:1.14;color:var(--ink);letter-spacing:.005em;}
h2.dsp{font-size:clamp(30px,4vw,54px);}
h3{font-family:var(--disp);font-weight:400;font-size:clamp(20px,1.9vw,26px);line-height:1.25;color:var(--ink);}
em{font-style:italic;}
p{max-width:72ch;text-wrap:pretty;}

/* ── motion ─────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1.25s var(--ease),transform 1.25s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rvs{opacity:0;transition:opacity 1.6s var(--ease);}
.rvs.in{opacity:1;}

/* ── ornament ───────────────────────────── */
.orn{display:flex;align-items:center;justify-content:center;gap:14px;}
.orn i{display:block;width:clamp(40px,7vw,86px);height:1px;background:currentColor;opacity:.45;}
.orn svg{width:11px;height:11px;fill:currentColor;opacity:.75;}

/* ── nav ────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;color:var(--cream);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:clamp(16px,2.2vw,26px) var(--pad);
  border-bottom:1px solid rgba(248,246,241,.22);
  text-shadow:0 1px 16px rgba(20,18,14,.45);
  transition:background .6s var(--ease),color .6s var(--ease),padding .5s var(--ease),border-color .6s var(--ease);
}
.nav a{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;position:relative;white-space:nowrap;}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);}
.nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav-l,.nav-r{display:flex;gap:clamp(18px,2.4vw,40px);align-items:center;}
.nav-r{justify-content:flex-end;}
.nav-mark{font-family:var(--disp);font-size:clamp(17px,1.7vw,22px);letter-spacing:.44em;text-transform:uppercase;
  padding-left:.44em;line-height:1;}
.nav.stuck{text-shadow:none;background:rgba(248,246,241,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--ink);padding:12px var(--pad);border-color:var(--line);}
.burger{display:none;width:24px;height:12px;position:relative;cursor:pointer;justify-self:end;}
.burger i{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .45s var(--ease);}
.burger i:first-child{top:0;} .burger i:last-child{bottom:0;}
.open .burger i:first-child{transform:translateY(5.5px) rotate(45deg);}
.open .burger i:last-child{transform:translateY(-5.5px) rotate(-45deg);}

/* ── hero ───────────────────────────────── */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;color:var(--cream);}
.hero-img{position:absolute;inset:0;}
.hero-img img{transform:scale(1.1);transition:transform 4s var(--ease);}
.hero.in .hero-img img{transform:none;}
.hero-img::after{content:'';position:absolute;inset:0;
  background:
    radial-gradient(60% 45% at 50% 46%,rgba(20,18,14,.44) 0%,rgba(20,18,14,0) 100%),
    linear-gradient(to bottom,rgba(20,18,14,.52) 0%,rgba(20,18,14,.24) 30%,rgba(20,18,14,.22) 62%,rgba(20,18,14,.58) 100%);}
.hero-in{position:relative;z-index:2;height:100%;display:grid;place-items:center;text-align:center;padding:0 var(--pad);}
.hero-mark{font-family:var(--disp);font-weight:300;text-transform:uppercase;line-height:1;
  font-size:clamp(38px,7vw,96px);letter-spacing:.34em;padding-left:.34em;}
.hero-sub{margin-top:22px;}
.hero-orn{margin:22px auto 0;color:var(--cream);}
.hero-tag{
  position:absolute;left:0;right:0;bottom:clamp(34px,6vw,70px);z-index:2;text-align:center;
  font-family:var(--sans);font-size:clamp(10px,1vw,12px);letter-spacing:.42em;text-transform:uppercase;color:var(--cream);
}
.hero-scroll{position:absolute;left:50%;bottom:clamp(14px,2.4vw,26px);transform:translateX(-50%);z-index:2;width:1px;height:38px;
  background:rgba(248,246,241,.4);overflow:hidden;}
.hero-scroll::after{content:'';position:absolute;inset:0;background:var(--cream);animation:drop 2.4s var(--ease) infinite;}
@keyframes drop{0%{transform:translateY(-100%);}60%,100%{transform:translateY(100%);}}

/* ── sections ───────────────────────────── */
.sec{padding:clamp(76px,10vw,170px) 0;}
.sec-2{background:var(--cream-2);}
.sec-ink{background:var(--ink);color:rgba(248,246,241,.72);}
.sec-ink .dsp,.sec-ink h3{color:var(--cream);}
.sec-ink .caps{color:rgba(248,246,241,.5);}
.center{text-align:center;}
.center p{margin-left:auto;margin-right:auto;}
.head .caps{margin-bottom:20px;}
.head .orn{margin:0 auto 22px;color:var(--muted);}
.head p{margin-top:24px;color:var(--muted);}

/* intro */
.intro-q{font-family:var(--disp);font-weight:300;font-size:clamp(26px,3.4vw,46px);line-height:1.28;color:var(--ink);max-width:30ch;margin:0 auto;text-wrap:balance;}
.intro-q em{font-style:italic;}
/* services offered */
.svc{margin-top:clamp(52px,6.5vw,96px);}
.svc-head{text-align:center;margin-bottom:clamp(30px,3.4vw,52px);}
.svc-head .orn{margin-top:16px;}
.svc-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(26px,3.4vw,64px);row-gap:0;
}
.svc-list li{
  border-top:1px solid var(--line);
  padding:clamp(20px,2.2vw,30px) 0;
}
.svc-list .n{
  display:block;font-family:var(--disp);font-size:12px;letter-spacing:.24em;
  color:var(--muted);margin-bottom:10px;
}
.svc-list h3{
  font-family:var(--disp);font-weight:300;font-size:clamp(19px,1.5vw,23px);
  line-height:1.24;color:var(--ink);margin:0;text-wrap:balance;
}
.svc-list p{
  margin-top:9px;font-size:13.5px;line-height:1.66;color:var(--muted);
  max-width:40ch;text-wrap:pretty;
}
.fig-cap{margin-top:14px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);}
.ph{overflow:hidden;background:var(--cream-2);}
.ph img{transition:transform 2s var(--ease);}
.ph:hover img{transform:scale(1.04);}
.r45{aspect-ratio:4/5;}
.r32{aspect-ratio:3/2;}
.r11{aspect-ratio:1;}

/* gallery */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,30px);}
.gitem figcaption{margin-top:14px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);text-align:center;}
.gitem .ph{aspect-ratio:4/5;}
.gitem.tall .ph{aspect-ratio:3/4;}
.gitem.wide{grid-column:span 2;}
.gitem.wide .ph{aspect-ratio:3/2;}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,96px);align-items:center;}
.split.rev .split-fig{order:2;}
.split-fig{aspect-ratio:4/5;overflow:hidden;background:var(--cream-2);}
.split-body p{margin-top:20px;color:var(--muted);}
.sig{font-family:var(--disp);font-style:italic;font-size:26px;color:var(--ink);margin-top:26px;}

/* values */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);}
.val{border-top:1px solid var(--line);padding-top:26px;}
.sec-ink .val{border-color:rgba(248,246,241,.2);}
.val .n{font-family:var(--disp);font-size:14px;letter-spacing:.2em;color:var(--muted);}
.val h3{margin:14px 0 10px;}
.val p{font-size:14.5px;}

/* strip */
.strip{overflow:hidden;}
.strip-track{display:flex;gap:clamp(14px,1.8vw,26px);width:max-content;animation:slide 52s linear infinite;}
.strip-track figure{width:clamp(200px,20vw,300px);aspect-ratio:7/9;overflow:hidden;background:var(--cream-2);}
.strip:hover .strip-track{animation-play-state:paused;}
@keyframes slide{to{transform:translateX(-50%);}}

/* testimonials */
.tst{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:center;}
.tst-fig{aspect-ratio:4/5;overflow:hidden;background:var(--cream-2);}
.quotes{position:relative;min-height:230px;}
.quote{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.quote.on{opacity:1;transform:none;position:relative;}
.quote p{font-family:var(--disp);font-weight:300;font-style:italic;font-size:clamp(23px,2.8vw,38px);line-height:1.34;color:var(--ink);max-width:30ch;text-wrap:balance;}
.quote .who{max-width:none;margin-top:24px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);}
.dots{display:flex;gap:16px;margin-top:34px;}
.dots button{width:30px;height:1px;background:var(--stone);cursor:pointer;transition:background .5s;}
.dots button.on{background:var(--ink);}

/* cta band */
.cta{position:relative;min-height:clamp(440px,60vw,660px);display:grid;place-items:center;overflow:hidden;
  text-align:center;color:var(--cream);}
.cta-img{position:absolute;inset:0;}
.cta-img::after{content:'';position:absolute;inset:0;background:rgba(20,18,14,.46);}
.cta-img img{transform:scale(1.08);transition:transform 3s var(--ease);}
.cta.in .cta-img img{transform:none;}
.cta-in{position:relative;z-index:2;padding:0 var(--pad);}
.cta-in .dsp{color:var(--cream);font-size:clamp(32px,4.6vw,66px);}
.cta-in .caps{color:rgba(248,246,241,.7);}

/* buttons */
.btn{
  display:inline-block;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  padding:16px 38px;border:1px solid var(--ink);color:var(--ink);position:relative;overflow:hidden;
  transition:color .55s var(--ease);
}
.btn span{position:relative;z-index:2;}
.btn::after{content:'';position:absolute;inset:0;background:var(--ink);transform:translateY(100%);
  transition:transform .55s var(--ease);}
.btn:hover{color:var(--cream);}
.btn:hover::after{transform:none;}
.btn-light{border-color:rgba(248,246,241,.6);color:var(--cream);}
.btn-light::after{background:var(--cream);}
.btn-light:hover{color:var(--ink);border-color:var(--cream);}

/* inquire */
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px);margin-top:clamp(30px,4vw,54px);}
.fld{display:flex;flex-direction:column;gap:8px;}
.fld.full{grid-column:1 / -1;}
.fld label{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);}
.fld input,.fld textarea,.fld select{
  border-bottom:1px solid var(--line);padding:11px 0;font-size:15px;color:var(--ink);font-weight:300;
  transition:border-color .5s var(--ease);
}
.fld textarea{resize:none;min-height:90px;}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--ink);}
.form .btn{grid-column:1 / -1;justify-self:start;}
.det{display:grid;gap:22px;}
.det .k{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.det div{color:var(--ink);font-size:15px;}

/* footer */
.ft{background:var(--cream-2);padding:clamp(60px,7vw,110px) 0 34px;}
.ft-mark{font-family:var(--disp);font-size:clamp(40px,8vw,110px);letter-spacing:.34em;text-transform:uppercase;
  text-align:center;color:var(--ink);font-weight:300;padding-left:.34em;line-height:1;}
.ft-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,3vw,44px);margin-top:clamp(30px,4vw,52px);}
.ft-nav a{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);transition:color .4s;}
.ft-nav a:hover{color:var(--ink);}
.ft-bot{margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);}

/* back to templates */
.badge{
  position:fixed;left:18px;bottom:18px;z-index:200;background:rgba(20,18,14,.9);color:var(--cream);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:10px 20px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
}
.badge:hover{background:var(--ink);}

/* ── responsive ─────────────────────────── */
@media(max-width:1024px){
  .svc-list{grid-template-columns:repeat(2,1fr);}
  .split,.tst,.intro-figs{grid-template-columns:1fr;}
  .split.rev .split-fig{order:0;}
  .intro-figs figure:last-child{margin-top:0;}
  .grid{grid-template-columns:1fr 1fr;}
  .gitem.wide{grid-column:span 2;}
  .vals{grid-template-columns:1fr;gap:30px;}
  .tst-fig{max-width:460px;}
}
@media(max-width:760px){
  .svc-list{grid-template-columns:1fr;}
  .nav{grid-template-columns:auto 1fr;}
  .nav-l,.nav-r{position:fixed;inset:0;background:var(--cream);color:var(--ink);
    flex-direction:column;justify-content:center;gap:26px;opacity:0;pointer-events:none;
    transition:opacity .55s var(--ease);padding-top:0;}
  .nav-r{padding-top:180px;}
  .open .nav-l,.open .nav-r{opacity:1;pointer-events:auto;}
  .nav a{font-size:13px;letter-spacing:.26em;}
  .nav-mark{z-index:95;position:relative;}
  .open .nav{color:var(--ink);background:var(--cream);}
  .burger{display:block;z-index:95;}
  .grid{grid-template-columns:1fr;}
  .gitem.wide{grid-column:span 1;}
  .form{grid-template-columns:1fr;}
  .hero-mark{letter-spacing:.26em;padding-left:.26em;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .rv,.rvs{opacity:1;transform:none;}
  .hero-img img,.cta-img img{transform:none;}
}

/* ── no widows ─────────────────────────────── */
h1,h2,h3,h4,.dsp,.head p,.val p,.fig-cap,.who,blockquote{text-wrap:balance;}
p,li{text-wrap:pretty;}
.head.center p{max-width:78ch;margin-left:auto;margin-right:auto;}
.split-body p,.val p{max-width:46ch;}