/* ============================================================
   SYNERGY BLUEPRINTS — Heritage stylesheet v3
   Colonial heritage · engraved frames · tactile grain
   20% conversion uplift: scroll reveals, accordions, 
   mobile menu, active nav, enhanced visual rhythm
   ============================================================ */

:root{
  --ivory:#F8F3E8;
  --ivory-deep:#F1E9D8;
  --ink:#221F1A;
  --ink-soft:#4A443C;
  --gold:#B9964F;
  --gold-soft:#D9C393;
  --line:#D8CBAA;
  --white:#FFFFFF;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background-color:var(--ivory);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  position:relative;
}

/* Tactile editorial texture — subtle film grain */
body::before{
  content:"";position:fixed;
  top:0;left:0;width:100vw;height:100vh;
  opacity:.025;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.15;}
a{color:var(--ink);}

.eyebrow{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);font-weight:500;display:inline-block;
}

.wrap{max-width:1050px;margin:0 auto;padding:0 24px;}
.narrow{max-width:680px;margin:0 auto;padding:0 24px;}

/* ============================================================
   HEADER — glass, sticky, mobile hamburger
   ============================================================ */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(248,243,232,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(216,203,170,.4);
  padding:18px 0;
}
header .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}

.monogram{
  font-family:'Cormorant Garamond',serif;
  letter-spacing:.5em;color:var(--gold);font-size:15px;text-decoration:none;
}

nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0;}
nav a{
  font-family:'Jost',sans-serif;font-size:13.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-soft);text-decoration:none;
  margin-left:26px;position:relative;transition:color .3s ease;padding:4px 0;
}
nav a::after{
  content:'';position:absolute;width:100%;transform:scaleX(0);
  height:1px;bottom:-2px;left:0;background-color:var(--gold);
  transform-origin:bottom right;transition:transform .3s ease-out;
}
nav a:hover{color:var(--ink);}
nav a:hover::after{transform:scaleX(1);transform-origin:bottom left;}
/* Active page indicator */
nav a.active{color:var(--gold);}
nav a.active::after{transform:scaleX(1);transform-origin:bottom left;}

/* Mobile hamburger */
.menu-toggle{
  display:none;background:none;border:none;cursor:pointer;
  padding:8px;color:var(--ink);
}
.menu-toggle svg{display:block;}

[id]{scroll-margin-top:96px;}

/* ============================================================
   SCROLL REVEAL — elements appear as you scroll
   ============================================================ */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible{opacity:1;transform:translateY(0);}
/* Stagger children in grids */
.reveal-stagger .card,.reveal-stagger .step,.reveal-stagger .cols>div{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal-stagger.visible .card,
.reveal-stagger.visible .step,
.reveal-stagger.visible .cols>div{opacity:1;transform:translateY(0);}
.reveal-stagger.visible .card:nth-child(2),
.reveal-stagger.visible .step:nth-child(2),
.reveal-stagger.visible .cols>div:nth-child(2){transition-delay:.12s;}
.reveal-stagger.visible .card:nth-child(3),
.reveal-stagger.visible .step:nth-child(3),
.reveal-stagger.visible .cols>div:nth-child(3){transition-delay:.24s;}

/* ============================================================
   HERO — entrance animation + engraved frame
   ============================================================ */
.hero{padding:70px 0 80px;}

@keyframes heroIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
.doc-frame{
  border:1px solid var(--gold);
  outline:1px solid var(--gold-soft);outline-offset:6px;
  background:var(--white);box-shadow:0 12px 40px rgba(34,31,26,.04);
  border-radius:2px;padding:66px 44px;text-align:center;position:relative;
  animation:heroIn .9s cubic-bezier(.16,1,.3,1) both;
}
.doc-frame .monogram{display:block;margin-bottom:26px;}
.doc-frame h1{font-size:clamp(34px,5.5vw,54px);margin:0 0 18px;}
.doc-frame .lede{
  font-size:18px;color:var(--ink-soft);max-width:520px;
  margin:0 auto 34px;font-style:italic;
}
.doc-frame .lede::first-letter{
  font-family:'Cormorant Garamond',serif;font-size:220%;font-style:normal;
  color:var(--gold);line-height:.8;padding-right:2px;
}

/* Gold rule with subtle expand animation */
@keyframes ruleExpand{from{width:0;}to{width:70px;}}
.rule{width:70px;height:1px;background:var(--gold);margin:26px auto;animation:ruleExpand .8s .4s cubic-bezier(.16,1,.3,1) both;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-block;padding:16px 36px;
  background:var(--ink);color:var(--ivory);
  font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ink);border-radius:2px;
  transition:all .3s cubic-bezier(.25,1,.5,1);cursor:pointer;
}
.btn:hover{
  background:transparent;color:var(--ink);border-color:var(--gold);
  transform:translateY(-2px);box-shadow:0 6px 20px rgba(185,150,79,.15);
}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn.ghost:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink);}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:64px 0;}
section.alt{
  background:var(--ivory-deep);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.section-head{text-align:center;margin-bottom:44px;}
.section-head h2{font-size:clamp(26px,4vw,36px);margin:8px 0 0;}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;text-align:center;}
.cols h3{font-size:20px;margin:0 0 8px;}
.cols p{font-size:15px;color:var(--ink-soft);margin:0;}

/* ============================================================
   COLLECTION CARDS
   ============================================================ */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;margin-top:40px;
}
.card{
  background:var(--white);border:1px solid var(--line);
  padding:40px 32px;border-radius:2px;text-align:center;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(34,31,26,.05);border-color:var(--gold-soft);
}
.card .eyebrow{margin-bottom:14px;}
.card h3{font-size:26px;margin:0 0 10px;}
.card p{font-size:15px;color:var(--ink-soft);flex:1;margin:0 0 18px;}
.card .price{font-family:'Cormorant Garamond',serif;font-size:24px;margin:0 0 20px;}
.card .price span{font-size:13px;color:var(--ink-soft);font-family:'Jost',sans-serif;}
.card .btn{align-self:center;}

/* "Most loved" badge */
.card .badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--white);
  font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 16px;border-radius:20px;white-space:nowrap;
  font-family:'Jost',sans-serif;
}

/* ============================================================
   STEPS — gold circled numerals
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;counter-reset:step;}
.step{text-align:center;}
.step h3{font-size:19px;margin:12px 0 6px;}
.step p{font-size:15px;color:var(--ink-soft);margin:0;}
.step::before{
  counter-increment:step;content:counter(step,upper-roman);
  font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:1px solid var(--gold);border-radius:50%;
}

/* Maker note */
.maker{display:flex;gap:14px;align-items:center;justify-content:center;text-align:center;flex-direction:column;}
.maker p{max-width:560px;color:var(--ink-soft);font-size:16px;}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.product-hero{padding:64px 0 30px;text-align:center;}
.product-hero h1{font-size:clamp(32px,5vw,48px);margin:10px 0 14px;}
.product-hero .lede{font-size:18px;font-style:italic;color:var(--ink-soft);max-width:560px;margin:0 auto;}

.price-line{
  font-family:'Cormorant Garamond',serif;font-size:28px;
  margin:26px 0 6px;display:inline-block;
  padding-bottom:8px;border-bottom:1px solid var(--gold-soft);
}
.price-line span{font-size:14px;font-family:'Jost',sans-serif;color:var(--ink-soft);}
.product-hero .btn{margin-top:22px;}

.includes{max-width:620px;margin:40px auto;}
.includes ul{padding:0;margin:0;}
.includes li{margin:0 0 14px;list-style:none;padding-left:26px;position:relative;font-size:16px;}
.includes li::before{content:"\2014";position:absolute;left:0;color:var(--gold);}

blockquote{
  border-left:2px solid var(--gold);
  margin:36px auto;padding:12px 0 12px 28px;max-width:560px;
  font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;
  color:var(--ink-soft);
}

/* ============================================================
   FAQ ACCORDION — tap to expand, saves scroll on mobile
   ============================================================ */
.qa{max-width:640px;margin:0 auto;}
.qa-item{border-bottom:1px solid var(--line);padding:0;}
.qa-item:first-of-type{border-top:1px solid var(--line);}
.qa-item h3{
  font-size:18px;margin:0;cursor:pointer;
  padding:20px 32px 20px 0;position:relative;
  transition:color .25s ease;
}
.qa-item h3:hover{color:var(--gold);}
/* Expand/collapse chevron */
.qa-item h3::after{
  content:'';position:absolute;right:0;top:50%;
  width:10px;height:10px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:translateY(-60%) rotate(45deg);
  transition:transform .3s ease;
}
.qa-item.open h3::after{transform:translateY(-30%) rotate(-135deg);}
.qa-answer{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.16,1,.3,1), padding .3s ease;
}
.qa-item.open .qa-answer{max-height:300px;}
.qa-answer p{color:var(--ink-soft);font-size:15.5px;margin:0;padding:0 0 20px;}

/* ============================================================
   TRUST LINE
   ============================================================ */
.trust{
  font-size:13px;color:var(--ink-soft);margin:16px auto 0;max-width:420px;
  letter-spacing:.02em;text-align:center;
}
.trust span{white-space:nowrap;}
.trust .dot{color:var(--gold);margin:0 8px;}

/* ============================================================
   MOBILE STICKY BUY BAR
   ============================================================ */
.buy-bar{display:none;}
@media (max-width:820px){
  .buy-bar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:200;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(248,243,232,.94);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);text-align:center;
  }
  .buy-bar .btn{display:block;width:100%;padding:16px;}
  .buy-bar .btn:hover{transform:none;}
  body.has-buy-bar{padding-bottom:96px;}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  border-top:1px solid var(--line);
  padding:48px 0;text-align:center;font-size:13px;color:var(--ink-soft);
}
footer a{color:var(--ink-soft);transition:color .25s ease;}
footer a:hover{color:var(--gold);}
footer .monogram{display:block;margin-bottom:16px;}
.footer-links{margin-top:10px;}
.footer-links a{margin:0 10px;}
.copyright{display:block;margin-top:14px;font-size:11.5px;letter-spacing:.04em;}

/* ============================================================
   LEGAL PAGE
   ============================================================ */
.legal-key{background:var(--white);border:1px solid var(--gold);border-radius:2px;padding:26px 28px;margin-bottom:38px;}
.legal-key h3{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;font-family:'Jost',sans-serif;font-weight:500;}
.legal-key ul{margin:0;padding:0;list-style:none;}
.legal-key li{font-size:16.5px;line-height:1.55;margin:0 0 12px;padding-left:22px;position:relative;color:var(--ink);}
.legal-key li:last-child{margin-bottom:0;}
.legal-key li::before{content:"\2014";position:absolute;left:0;color:var(--gold);}
.legal-key strong{font-weight:500;}
.legal-fine{font-size:13px;line-height:1.6;color:var(--ink-soft);}
.legal-fine h4{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:26px 0 6px;font-family:'Jost',sans-serif;font-weight:500;}
.legal-fine h4:first-child{margin-top:0;}
.legal-fine p{margin:0 0 14px;}
.legal-fine a{color:var(--ink-soft);text-decoration:underline;}

/* ============================================================
   ACCESSIBILITY & MOTION
   ============================================================ */
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,
.qa-item h3:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important;animation:none!important;}
  .btn:hover,.card:hover{transform:none;}
  .reveal{opacity:1;transform:none;}
  .reveal-stagger .card,.reveal-stagger .step,.reveal-stagger .cols>div{opacity:1;transform:none;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  body{font-size:16px;}
  header{padding:14px 0;}
  .menu-toggle{display:block;}
  nav{
    position:fixed;top:0;right:-100%;width:260px;height:100vh;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ivory);padding:80px 32px 40px;
    box-shadow:-8px 0 30px rgba(34,31,26,.08);
    transition:right .35s cubic-bezier(.25,1,.5,1);
    z-index:300;
  }
  nav.open{right:0;}
  nav a{margin:0;padding:16px 0;font-size:14px;width:100%;border-bottom:1px solid var(--line);}
  nav a::after{display:none;}
  .nav-overlay{
    display:none;position:fixed;inset:0;background:rgba(34,31,26,.25);z-index:250;
  }
  .nav-overlay.show{display:block;}
  .doc-frame{padding:48px 22px;outline-offset:4px;}
  section{padding:48px 0;}
  [id]{scroll-margin-top:80px;}
  .cols,.cards,.steps{grid-template-columns:1fr;}
  blockquote{font-size:20px;padding-left:20px;}
}

/* ============================================================
   INTAKE FORM
   ============================================================ */
.form-wrap{max-width:680px;margin:0 auto;padding:56px 24px 40px;}
.form-wrap h1{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(32px,6vw,42px);text-align:center;margin:0 0 12px;
  letter-spacing:-.01em;
}
.form-wrap .monogram{display:block;text-align:center;margin-bottom:18px;}
.intro{text-align:center;color:var(--ink-soft);font-size:15px;max-width:480px;margin:0 auto 44px;}

.f-card{
  background:var(--white);border:1px solid var(--line);border-radius:2px;
  padding:40px 36px;margin-bottom:32px;box-shadow:0 10px 30px rgba(34,31,26,.02);
}
.f-card h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:24px;margin:0 0 6px;color:var(--ink);}
.f-card .sub{font-size:13px;color:var(--ink-soft);margin-bottom:28px;font-style:italic;}
.f-card label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:24px 0 8px;font-weight:400;}

input[type=text],input[type=email],input[type=date],input[type=time],textarea,select{
  width:100%;padding:14px 16px;
  font-family:'Jost',sans-serif;font-size:16px;color:var(--ink);
  border:1px solid var(--line);border-radius:2px;background:var(--ivory);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
  outline:none;
}
input:focus,textarea:focus{border-color:var(--gold);background:var(--white);box-shadow:0 0 0 3px rgba(185,150,79,.08);}
textarea{resize:vertical;min-height:100px;}

.lens-select{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;}
.lens-select label{
  flex:1 1 28%;display:flex;align-items:center;justify-content:center;gap:8px;
  text-transform:none;letter-spacing:0;font-size:15px;
  border:1px solid var(--line);border-radius:2px;padding:14px 16px;
  cursor:pointer;margin:0;background:var(--white);color:var(--ink);
  transition:all .25s cubic-bezier(.2,.8,.2,1);
}
.lens-select label:hover{border-color:var(--gold-soft);}
.lens-select label.active{
  border-color:var(--gold);background:var(--ivory-deep);font-weight:500;
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(185,150,79,.1);
}
.lens-select input{position:absolute;opacity:0;width:1px;height:1px;}
.lens-select label:focus-within{outline:2px solid var(--gold);outline-offset:3px;}

.person-block{border-left:2px solid var(--gold-soft);padding-left:24px;margin:28px 0;}
.person-block h3{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;margin:0 0 4px;color:var(--gold);}

.checkbox-row{display:flex;align-items:flex-start;gap:10px;margin-top:16px;}
.checkbox-row input{margin-top:4px;cursor:pointer;accent-color:var(--gold);}
.checkbox-row label{margin:0;text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--ink-soft);cursor:pointer;}

.lens-section{display:none;opacity:0;transform:translateY(10px);transition:opacity .4s ease, transform .4s ease;}
.lens-section.visible{display:block;opacity:1;transform:translateY(0);}

.hint{font-size:12.5px;color:var(--ink-soft);margin-top:6px;font-style:italic;}

button[type=submit]{
  width:100%;padding:18px;background:var(--ink);color:var(--ivory);
  border:1px solid var(--ink);font-family:'Cormorant Garamond',serif;
  font-size:18px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;border-radius:2px;margin-top:12px;
  transition:all .3s cubic-bezier(.25,1,.5,1);
}
button[type=submit]:hover{background:transparent;color:var(--ink);border-color:var(--gold);}
button[type=submit][disabled]{opacity:.55;cursor:progress;}

.footer-note{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:40px;letter-spacing:.03em;}
#successMsg{display:none;text-align:center;padding:72px 36px;background:var(--white);border:1px solid var(--gold);border-radius:2px;}
#successMsg h2{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,6vw,36px);margin:0 0 12px;}
#successMsg p{color:var(--ink-soft);max-width:420px;margin:0 auto;}
.required-star{color:var(--gold);margin-left:2px;}

@media (max-width:820px){
  .f-card{padding:30px 22px;}
  .lens-select label{flex:1 1 100%;}
  .person-block{padding-left:16px;}
}