:root{
  --cream:#FAF5EC; --cream2:#F3ECDF;
  --navy:#2A3B4C; --navy2:#33475E;
  --ink:#26313B; --mut:#776E5E;
  --gold:#C8A96A; --gold2:#D9C08F; --blush:#E8B4C8;
  --serif:"Cormorant Garamond","Cormorant",Georgia,serif;
  --body:"Cormorant",Georgia,serif;
  --line:rgba(42,59,76,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--cream); line-height:1.55; }
::selection{ background:var(--gold); color:var(--cream); }
.container{ max-width:1100px; margin-inline:auto; padding-inline:22px; }

.eyebrow{ font:italic 400 14px/1.4 var(--serif); color:var(--gold); letter-spacing:.12em; text-transform:lowercase; display:block; }
.section-title{ font:600 40px/1.14 var(--serif); color:var(--ink); margin:.3em 0 .4em; }
.section-title .period{ color:var(--gold); }
.features .eyebrow{ font-size:20px; font-weight:600; }
.section-intro{ font:400 18px/1.65 var(--body); color:var(--mut); max-width:60ch; }

/* ---- header ---- */
.site-header{ position:sticky; top:0; z-index:20; background:linear-gradient(180deg, rgba(250,245,236,.97), rgba(250,245,236,.92)); border-bottom:1px solid var(--line); }
.header-inner{ max-width:1100px; margin-inline:auto; padding-inline:22px; display:flex; align-items:center; gap:22px; }
.brand{ display:flex; flex-direction:column; line-height:1.06; text-decoration:none; color:var(--navy); }
.brand-name{ font:600 22px/1 var(--serif); }
.brand-sub{ font:italic 400 12px/1 var(--serif); color:var(--gold); letter-spacing:.05em; }
.site-nav{ display:flex; gap:4px; margin-left:auto; }
.site-nav a{ font:500 15.5px/1 var(--serif); color:var(--ink); text-decoration:none; padding:.5em .78em; border-radius:999px; }
.site-nav a:hover{ background:var(--blush); color:var(--navy); }
.nav-out{ }
.site-nav .nav-cta{ background:var(--navy); color:var(--cream); border-radius:999px; padding:.62em 1.2em; font-weight:600; }
.site-nav .nav-cta:hover{ background:var(--navy2); color:var(--cream); }

/* ---- buttons ---- */
.btn{ display:inline-block; font:600 16.5px/1 var(--serif); text-decoration:none; border-radius:999px; padding:.9em 1.7em; transition:transform .25s var(--ease), background .25s; }
.btn-primary{ background:var(--gold); color:var(--navy); }
.btn-primary:hover{ background:var(--gold2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1.5px rgba(249,245,232,.55); }
.btn-ghost:hover{ background:rgba(249,245,232,.12); transform:translateY(-2px); }

/* ---- hero ---- */
.hero{ min-height:84vh; display:grid; place-items:center; background:
  radial-gradient(38% 46% at 78% 20%, rgba(232,180,200,.16), transparent 70%),
  radial-gradient(30% 34% at 15% 85%, rgba(201,169,106,.15), transparent 70%),
  linear-gradient(160deg, #33475E 0%, #2A3B4C 100%);
  color:var(--cream); }
.hero-content{ max-width:840px; text-align:center; display:flex; flex-direction:column; gap:24px; align-items:center; padding:0 20px; }
.hero .eyebrow{ color:var(--gold2); }
.hero-title{ font:600 clamp(40px,7vw,74px)/1.06 var(--serif); color:#FDF9F0; margin:0; }
.hero-title .accent{ font-style:italic; color:var(--gold2); }
.hero-sub{ font:400 20px/1.6 var(--body); color:rgba(253,249,240,.92); max-width:58ch; }
.hero-note{ font:italic 400 14px/1.6 var(--serif); color:rgba(253,249,240,.8); letter-spacing:.05em; }

/* ---- features ---- */
.features{ padding:clamp(72px,11vw,130px) 0; background:var(--cream); }
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px; margin-top:34px; }
.feature-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 22px; box-shadow:0 10px 26px -18px rgba(42,59,76,.25); }
.feature-card h3{ font:600 31px/1.15 var(--serif); color:var(--navy); margin:0 0 .45em; }
.feature-card p{ font:400 18.5px/1.7 var(--body); color:var(--mut); overflow-wrap:break-word; }

/* ---- examples ---- */
.examples{ padding:clamp(72px,11vw,130px) 0; background:var(--cream2); }
.ex-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:36px; }
.ex-card{ background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:26px 22px; }
.ex-featured{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.ex-top{ display:flex; align-items:center; gap:12px; }
.ex-tile{ width:46px; height:46px; border-radius:50%; display:inline-block; }
.ex-names{ font:600 31px/1.2 var(--serif); color:var(--ink); }
.ex-meta{ font:italic 400 16.5px/1.4 var(--serif); color:var(--mut); margin:.4em 0 .8em; }
.ex-card ul{ list-style:none; padding:0; margin:0 0 1em; }
.ex-card ul li{ position:relative; padding-left:1.2em; font:400 19px/1.5 var(--body); color:var(--mut); }
.ex-card ul li::before{ content:"✦"; position:absolute; left:0; color:var(--gold); font-size:11px; }
.ex-link{ font:italic 600 18px/1 var(--serif); color:var(--navy); text-decoration:none; border-bottom:1px solid var(--gold); }
.ex-link:hover{ color:var(--gold); }

/* ---- how ---- */
.how{ padding:clamp(72px,11vw,130px) 0; background:var(--cream); }
.how-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px; margin-top:32px; }
.how-step .hs-num{ font:600 18px/1 var(--serif); color:var(--gold); letter-spacing:.03em; display:block; margin-bottom:8px; }
.how-step h3{ font:600 30px/1.2 var(--serif); color:var(--ink); margin:.1em 0 .45em; }
.how-step p{ font:400 19px/1.75 var(--body); color:var(--ink); }

/* ---- pricing ---- */
.pricing{ padding:clamp(72px,11vw,130px) 0; background:linear-gradient(180deg,var(--cream2),#F1E7D2); }
.price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:36px; }
.price-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 24px; }
.price-card.featured{ background:linear-gradient(170deg,#FFF,var(--cream)); border:1px solid var(--gold); box-shadow:0 0 0 1px var(--gold), 0 14px 30px -18px rgba(42,59,76,.35); }
.badge{ position:absolute; }
.price-card h3{ font:600 31px/1.2 var(--serif); color:var(--ink); margin:0 0 .15em; }
.price-tag{ font:italic 400 16.5px/1.4 var(--serif); color:var(--mut); text-transform:lowercase; letter-spacing:.04em; }
.price-amt{ font:600 37px/1 var(--serif); color:var(--gold); margin:.4em 0 .6em; }
.price-card ul{ list-style:none; padding:0; margin:0 0 1.1em; }
.price-card ul li{ position:relative; padding-left:1.2em; font:400 19px/1.5 var(--body); color:var(--mut); margin-bottom:.3em; }
.price-card ul li::before{ content:"✦"; position:absolute; left:0; color:var(--gold); font-size:11px; }
.price-note{ font:italic 400 15.5px/1.6 var(--serif); color:var(--mut); text-align:center; margin-top:26px; }
.price-card.featured .badge{ display:none; }

/* ---- cta / footer ---- */
.cta{ padding:clamp(70px,10vw,120px) 0; background:var(--navy); color:var(--cream); text-align:center; }
.cta h2{ font:600 34px/1.2 var(--serif); color:#FDF9F0; margin:0 0 .35em; }
.cta p{ font:400 18px/1.6 var(--body); color:rgba(253,249,240,.9); max-width:56ch; margin:.4em auto; }
.cta .revs{ font:italic 400 15px/1.5 var(--serif); color:var(--gold2); }
.site-footer{ background:var(--navy); color:var(--cream); padding:46px 22px 26px; text-align:center; }
.footer-brand{ margin-bottom:16px; }
.footer-brand .brand-name{ font:600 26px/1 var(--serif); color:#FDF9F0; display:block; }
.footer-brand .brand-sub{ font:italic 400 15px/1.5 var(--serif); color:var(--gold2); display:block; margin-top:8px; }
.footer-small{ font:italic 400 14px/1.6 var(--serif); color:rgba(253,249,240,.6); letter-spacing:.03em; }
.footer-small a{ color:var(--gold2); text-decoration:none; }

/* ---- websites contact form ---- */
.wsform{ max-width:640px; margin:26px auto 0; background:rgba(42,59,76,.55); border:1px solid rgba(249,245,232,.3); border-radius:20px; padding:26px 26px 28px; }
.ws-honey{ position:absolute; left:-9999px; }
.wsform .ws-row{ display:flex; flex-direction:column; gap:7px; margin-bottom:15px; }
.wsform label{ font:italic 500 15.5px/1.3 var(--serif); color:var(--gold2); }
.wsform .req{ color:var(--blush); }
.wsform input, .wsform select, .wsform textarea{ font:400 16.5px/1.4 var(--body); color:#FDF9F0; background:rgba(42,59,76,.55); border:1px solid rgba(249,245,232,.35); border-radius:11px; padding:.8em 1em; width:100%; }
.wsform select option{ background:var(--navy); color:#FDF9F0; }
.wsform input:focus, .wsform select:focus, .wsform textarea:focus{ outline:none; border-color:var(--gold2); box-shadow:0 0 0 3px rgba(201,169,106,.2); }
.wsform textarea{ resize:vertical; min-height:96px; }
.ws-status{ font:italic 500 15.5px/1.5 var(--serif); color:var(--gold2); text-align:center; margin-top:12px; }
.ws-mailto{ color:var(--gold2); }

/* ---- reveal ---- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

@media (max-width:760px){
  .site-nav{ flex-wrap:wrap; justify-content:flex-end; }
  .hero{ min-height:88vh; }
}
@media (max-width:520px){
  .section-title{ font-size:33px; }
  .hero-title{ font-size:38px; }
}