/* Before You Forget · production stylesheet */
html{scroll-behavior:smooth}
body{margin:0;background:#f4efe3;color:#211e19;font-family:'Source Serif 4',Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:#b58b3c;text-decoration:none}
a:hover{color:#211e19}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b58b3c;outline-offset:2px;border-radius:2px}
::selection{background:#b58b3c;color:#f4efe3}
.skip-link{position:absolute;left:12px;top:-64px;z-index:200;background:#211e19;color:#f4efe3;padding:12px 18px;font-family:Helvetica,Arial,sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:1px solid #b58b3c;transition:top .2s ease}
.skip-link:focus{top:12px}

@keyframes wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes promptInA{from{opacity:0;transform:translateY(10px) rotate(-.5deg)}to{opacity:1;transform:none}}
@keyframes promptInB{from{opacity:0;transform:translateY(10px) rotate(.5deg)}to{opacity:1;transform:none}}
@keyframes objIn{from{opacity:0;transform:translateY(30px) scale(.96)}}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes recdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.62)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Site nav ─────────────────────────────── */
.site-head{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(244,239,227,.9);border-bottom:1px solid rgba(33,30,25,.12);transition:background .25s ease;backdrop-filter:blur(8px)}
.site-head.scrolled{background:rgba(244,239,227,.96)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;transition:padding .25s ease}
.site-head.scrolled .nav-inner{padding-top:12px;padding-bottom:12px}
.brand{font-family:'Playfair Display',serif;font-weight:800;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:#211e19;white-space:nowrap}
.brand em{font-style:italic;font-weight:500;text-transform:lowercase;letter-spacing:.05em;color:#b58b3c;font-size:16px}
.nav-desktop{display:flex;align-items:center;gap:32px}
.nav-link{position:relative;font-family:Helvetica,Arial,sans-serif;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#211e19;padding:8px 12px 6px;border-bottom:2px solid transparent;display:inline-block;transition:color .2s ease}
.nav-link:hover{color:#b58b3c}
.nav-link.active{color:#b58b3c;border-bottom-color:#b58b3c}
.nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:#b58b3c;transform:translateY(6px);opacity:0;transition:transform .25s ease,opacity .25s ease}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:translateY(0);opacity:1}
.nav-cta{font-family:Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:#211e19;color:#f4efe3;padding:11px 20px;border:1px solid #211e19;transition:color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.nav-cta:hover{color:#b58b3c;border-color:#b58b3c;transform:translateY(-2px);box-shadow:0 6px 16px rgba(33,30,25,.3)}
.nav-burger{display:none;background:none;border:1px solid rgba(33,30,25,.3);padding:9px 14px;font-family:Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#211e19;cursor:pointer}
.nav-mobile{display:none;background:#f4efe3;border-bottom:1px solid rgba(33,30,25,.12);flex-direction:column}
.nav-mobile a{padding:16px 24px;border-top:1px solid rgba(33,30,25,.08);font-family:Helvetica,Arial,sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#211e19}
.nav-mobile a.nav-mobile-cta{margin:16px 24px 20px;padding:14px;text-align:center;background:#211e19;color:#f4efe3;font-size:12px;letter-spacing:.14em;border-top:none;transition:background .2s ease}
.nav-mobile a.nav-mobile-cta:hover{background:#b58b3c;color:#211e19}
@media (max-width:860px){.nav-desktop{display:none}.nav-burger{display:inline-block}.site-head.open .nav-mobile{display:flex}}

/* ── Buttons ─────────────────────────────── */
.btn{display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.btn-gold{background:#b58b3c;color:#211e19;padding:17px 32px;font-weight:bold}
.btn-gold:hover{background:#211e19;color:#b58b3c;transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.btn-dark{background:#211e19;color:#f4efe3;padding:17px 34px}
.btn-dark:hover{color:#b58b3c;transform:translateY(-2px);box-shadow:0 8px 20px rgba(33,30,25,.25)}
.btn-cream{background:#f4efe3;color:#211e19;padding:17px 34px;font-weight:bold}
.btn-cream:hover{color:#b58b3c;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.btn-ghost-light{color:#f4efe3;padding:17px 8px;border-bottom:1px solid rgba(244,239,227,.35);transition:color .2s ease,border-color .2s ease}
.btn-ghost-light:hover{border-color:#b58b3c;color:#b58b3c}
.btn-outline-olive{background:none;border:1px solid rgba(244,239,227,.4);color:#f4efe3;padding:13px 24px;font-family:Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s ease,color .25s ease}
.btn-outline-olive:hover{background:#f4efe3;color:#4f4f33}

/* ── Hover behaviours (inline base styles) ── */
.pol{transform:rotate(var(--r,0deg));transition:transform .35s ease}
.pol:hover{transform:rotate(0deg) scale(1.03)}
.lift{transition:transform .35s ease,box-shadow .35s ease}
.lift:hover{transform:translateY(-6px)!important;box-shadow:0 16px 36px rgba(33,30,25,.22)!important}
.lift-rot{transform:rotate(var(--r,0deg));transition:transform .35s ease,box-shadow .35s ease}
.lift-rot:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 16px 36px rgba(33,30,25,.2)}
.phone-lift{transition:transform .4s ease,box-shadow .4s ease}
.phone-lift:hover{transform:translateY(-8px);box-shadow:0 34px 74px rgba(0,0,0,.6)!important}
.cell{transition:background .3s ease}
.cell:hover{background:#f9f5ea!important}
.cell-dark{transition:background .3s ease}
.cell-dark:hover{background:#2a261f!important}
.row-slide{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.row-slide:hover{transform:translateX(6px);box-shadow:0 6px 20px rgba(33,30,25,.12);border-color:rgba(181,139,60,.5)!important}
.chip{transform:rotate(var(--r,0deg));transition:border-color .25s ease,transform .25s ease}
.chip:hover{border-color:#b58b3c!important;transform:rotate(0deg) translateX(4px)}
.step-card{transition:transform .3s ease,box-shadow .3s ease}
.step-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(33,30,25,.15)}
.hgold{transition:color .2s ease}
.hgold:hover{color:#b58b3c!important}
.flink{font-size:14.5px;color:rgba(244,239,227,.75)}
.flink:hover{color:#b58b3c}
.ficon{transition:transform .3s ease}
.ficon:hover{transform:scale(1.04) rotate(-1deg)}

/* ── Home hero phone carousel ─────────────── */
.hero-screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateY(8px) scale(.995);transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.4,0,.2,1);pointer-events:none}
.hero-screen.active{opacity:1;transform:none}
.hero-dot{height:3px;width:14px;border-radius:2px;border:none;padding:0;background:rgba(33,30,25,.2);cursor:pointer;transition:background .5s ease,width .5s ease}
.hero-dot.active{width:28px;background:#b58b3c}

/* ── FAQ accordion ────────────────────────── */
.faq-item{border-top:1px solid rgba(33,30,25,.15)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;text-align:left;font-family:'Playfair Display',serif;font-weight:700;font-size:20px;color:#211e19;transition:color .2s ease}
.faq-q:hover{color:#b58b3c}
.faq-q .sign{font-family:'Source Serif 4',serif;color:#b58b3c;font-size:22px;flex:none}
.faq-a{display:none;margin:0;padding:0 4px 26px;font-size:16.5px;line-height:1.75;color:rgba(33,30,25,.75);max-width:640px;white-space:pre-line}
.faq-item.open .faq-a{display:block}
.faq-a em{font-family:'Playfair Display',serif;font-style:italic;color:#b58b3c}

/* ── Photo placeholder frames ─────────────── */
.photo-slot{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#e7e1d3 0 6px,#ded7c6 6px 12px);display:flex;align-items:center;justify-content:center}
.photo-slot span{font-family:Helvetica,Arial,sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(33,30,25,.4);text-align:center;padding:0 10px}

/* ── Support form ─────────────────────────── */
.field{display:flex;flex-direction:column;gap:8px;font-family:Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(33,30,25,.65)}
.field input,.field select,.field textarea{border:1px solid rgba(33,30,25,.25);background:#f9f5ea;padding:14px 16px;font-family:'Source Serif 4',serif;font-size:16px;color:#211e19}
.field.invalid input,.field.invalid textarea{border-color:#8a3b2a}
.form-btn{background:#211e19;color:#f4efe3;border:none;cursor:pointer;padding:16px 32px;font-family:Helvetica,Arial,sans-serif;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;transition:background .25s ease,color .25s ease,transform .25s ease}
.form-btn:hover{background:#b58b3c;color:#211e19;transform:translateY(-1px)}