/* ===== Tiffany Thompson — Warm "Quiet Luxury" Design System ===== */
:root{
  --cream:#FAF6EE; --sand:#EFE7D8; --paper:#FFFFFF;
  --char:#211E1A; --char2:#2A2621; --olive:#3f4436;
  --ink:#211E1A; --muted:#6E6656; --line:#E4DAC7;
  --gold:#B68A3E; --gold-deep:#8C7438; --gold-hi:#C9A24E; --gold-line:#CDBC9A;
  --text-d:#EDE6D8; --muted-d:#A99F8C; --line-d:#39322a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--ink);line-height:1.75;font-size:17px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Georgia,'Times New Roman',serif;font-weight:normal;color:var(--ink);line-height:1.13;letter-spacing:.3px}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}h2{font-size:clamp(1.9rem,4vw,3rem)}h3{font-size:1.45rem}
a{color:var(--gold-deep);text-decoration:none;transition:color .2s}
img{max-width:100%;display:block}
p{margin-bottom:1rem}
.script{font-family:'Great Vibes',cursive;color:var(--gold);font-weight:400}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:840px}
section{padding:100px 0}
.eyebrow{text-transform:uppercase;letter-spacing:4px;font-size:.72rem;color:var(--gold-deep);font-weight:bold;margin-bottom:16px}
.rule{width:64px;height:2px;background:var(--gold-line);margin:20px 0 34px}
.center{text-align:center}.center .rule{margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}.gold{color:var(--gold-deep)}

/* section tones */
.sec-cream{background:var(--cream)}
.sec-sand{background:var(--sand)}
.sec-dark{background:var(--char);color:var(--text-d)}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:var(--paper)}
.sec-dark .muted{color:var(--muted-d)}.sec-dark .eyebrow,.sec-dark .gold{color:var(--gold-hi)}
.sec-dark .rule{background:var(--gold)}

/* buttons */
.btn{display:inline-block;background:var(--gold);color:#231d12;padding:16px 38px;letter-spacing:1.6px;text-transform:uppercase;font-size:.78rem;font-weight:bold;border:1px solid var(--gold);cursor:pointer;transition:transform .25s,background-color .3s,box-shadow .3s;text-align:center}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi);transform:translateY(-2px) scale(1.02);box-shadow:0 12px 30px rgba(182,138,62,.34);color:#231d12}
.btn.outline{background:transparent;color:var(--gold-deep)}
.btn.outline:hover{background:var(--gold);color:#231d12}
.sec-dark .btn.outline{color:var(--gold-hi);border-color:var(--gold-hi)}.sec-dark .btn.outline:hover{background:var(--gold);color:#231d12}
.btn.wide{width:100%;padding:17px}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;transition:background-color .35s,box-shadow .35s,padding .3s;padding:8px 0}
.nav.scrolled{background:rgba(28,25,21,.96);backdrop-filter:blur(10px);box-shadow:0 6px 30px rgba(0,0,0,.3)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav .brand{font-family:'Great Vibes',cursive;font-size:1.95rem;color:var(--paper);line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.nav.scrolled .brand{color:var(--gold-hi);text-shadow:none}
.nav ul{list-style:none;display:flex;gap:24px;align-items:center}
.nav ul a{color:#fff;font-size:.75rem;letter-spacing:1.4px;text-transform:uppercase;position:relative;padding:4px 0;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.nav.scrolled ul a{text-shadow:none;color:var(--text-d)}
.nav ul a:after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold-hi);transition:width .25s}
.nav ul a:hover:after,.nav ul a.active:after{width:100%}.nav ul a.active{color:var(--gold-hi)}
.nav .navcta{background:var(--gold);color:#231d12 !important;padding:10px 20px;border-radius:2px;letter-spacing:1.2px;text-shadow:none}
.nav .navcta:after{display:none}.nav .navcta:hover{background:var(--gold-hi)}
.burger{display:none;background:none;border:0;cursor:pointer;width:30px;height:24px;position:relative;z-index:110}
.burger span{position:absolute;left:0;width:100%;height:2px;background:#fff;transition:.3s;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.nav.scrolled .burger span{background:var(--gold-hi);box-shadow:none}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:11px}.burger span:nth-child(3){top:20px}
.burger.open span:nth-child(1){top:11px;transform:rotate(45deg)}.burger.open span:nth-child(2){opacity:0}.burger.open span:nth-child(3){top:11px;transform:rotate(-45deg)}

/* ===== HOME-TOUR hero (homepage): house explodes into layers, camera tours roof/walls/floors/interior ===== */
.fx{position:relative;height:620vh;background:#171310}
.fx-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:radial-gradient(130% 100% at 50% 28%,#2b2419 0%,#1a140d 55%,#0e0a06 100%)}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.fx-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 82% at 50% 40%,transparent 52%,rgba(9,6,3,.6))}
/* guided-tour caption cards */
.fx-caps{position:absolute;left:0;right:0;bottom:8%;z-index:6;display:flex;justify-content:center;padding:0 24px;pointer-events:none}
.fx-cap{position:absolute;left:50%;bottom:0;transform:translate(-50%,0);width:min(520px,90vw);text-align:center;opacity:0;will-change:opacity,transform;background:radial-gradient(120% 130% at 50% 50%,rgba(12,9,5,.72),rgba(12,9,5,.3) 70%,transparent);padding:22px 30px;border-radius:16px}
.fx-cap .n{font-family:Georgia,'Times New Roman',serif;color:var(--gold-hi);font-size:.8rem;letter-spacing:5px;text-transform:uppercase;display:block;margin-bottom:8px}
.fx-cap h3{color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:8px;text-shadow:0 3px 22px rgba(0,0,0,.7)}
.fx-cap p{color:#efe6d6;font-size:1rem;line-height:1.6;margin:0;text-shadow:0 2px 14px rgba(0,0,0,.7)}
/* phase 1 — copy over the intact house */
.fx-intro{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;will-change:opacity,transform}
.fx-intro .script-name{font-family:'Great Vibes',cursive;color:var(--gold-hi);font-size:clamp(3rem,9vw,6.4rem);line-height:1;text-shadow:0 6px 46px rgba(0,0,0,.72)}
.fx-intro .role{text-transform:uppercase;letter-spacing:6px;font-size:clamp(.7rem,1.6vw,.95rem);color:#f3ece0;margin:16px 0 10px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.fx-intro h1{color:#fff;max-width:900px;margin:6px auto 14px;text-shadow:0 3px 34px rgba(0,0,0,.6)}
.fx-intro .sub{color:#efe5d3;max-width:600px;margin:0 auto;text-shadow:0 2px 16px rgba(0,0,0,.7)}
/* phase 2 — payoff content revealed inside */
.fx-inside{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;opacity:0;pointer-events:none;transition:opacity .5s ease;background:radial-gradient(78% 72% at 50% 50%,rgba(13,9,5,.66),rgba(13,9,5,.28) 66%,rgba(13,9,5,0));will-change:opacity}
.fx-inside.live{pointer-events:auto;opacity:1}
.fx-inside .eyebrow{color:var(--gold-hi);margin-bottom:12px}
.fx-inside h2{color:#fff;max-width:840px;text-shadow:0 3px 32px rgba(0,0,0,.72)}
.fx-inside .sub{color:#efe6d6;max-width:600px;margin:8px auto 2px;text-shadow:0 2px 16px rgba(0,0,0,.72)}
.fx-chips{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:28px 0 32px}
.fx-chip{background:rgba(255,255,255,.07);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid rgba(201,162,78,.55);border-radius:16px;padding:15px 22px;min-width:132px}
.fx-chip b{display:block;font-family:Georgia,'Times New Roman',serif;font-size:1.85rem;color:var(--gold-hi);line-height:1.05}
.fx-chip span{font-size:.7rem;letter-spacing:1.6px;text-transform:uppercase;color:#e7ddcd}
.fx-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.fx-inside [data-r]{opacity:0;transform:translateY(30px);filter:blur(7px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1),filter .75s ease}
.fx-inside.live [data-r]{opacity:1;transform:none;filter:none}
.fx-inside.live [data-r="1"]{transition-delay:.05s}.fx-inside.live [data-r="2"]{transition-delay:.16s}
.fx-inside.live [data-r="3"]{transition-delay:.3s}.fx-inside.live [data-r="4"]{transition-delay:.44s}
.fx-cue{position:absolute;left:0;right:0;bottom:32px;z-index:7;text-align:center;color:#f0e8da;letter-spacing:3px;text-transform:uppercase;font-size:.66rem;animation:bob 2s ease-in-out infinite;will-change:opacity}
.fx-nojs .fx-cam,.fx-nojs .fx-intro,.fx-nojs .fx-cue,.fx-nojs .fx-caps{display:none}
.fx-nojs .fx-int{filter:brightness(.62);transform:none;opacity:1}
.fx-nojs .fx-inside{opacity:1;position:relative;min-height:100vh}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* simple photo hero (sub-pages) */
.hero{position:relative;min-height:66vh;display:flex;align-items:center;text-align:center;overflow:hidden;background:var(--hero-img) center/cover fixed}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,18,12,.5),rgba(24,18,12,.66))}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:80px}
.hero h1,.hero .script-name{color:#fff;text-shadow:0 3px 26px rgba(0,0,0,.5)}
.hero .script-name{font-family:'Great Vibes',cursive;color:var(--gold-hi);font-size:clamp(2.6rem,7vw,4.6rem);line-height:1}
.hero .eyebrow{color:var(--gold-hi)}
.hero .role{text-transform:uppercase;letter-spacing:5px;font-size:.85rem;color:#f0e8da;margin:14px 0 8px}
.hero .sub{color:#eae2d4;max-width:640px;margin:8px auto 30px;font-size:1.05rem;text-shadow:0 2px 14px rgba(0,0,0,.5)}

/* stats */
.stats{display:flex;gap:clamp(24px,6vw,72px);justify-content:center;flex-wrap:wrap;margin:32px 0}
.stat b{font-family:Georgia,serif;font-size:clamp(2.2rem,5vw,3.4rem);color:var(--gold-hi);display:block;line-height:1}
.stat span{font-size:.7rem;letter-spacing:2.5px;text-transform:uppercase;color:#e7dcc8}
.sec-cream .stat b,.sec-sand .stat b{color:var(--gold-deep)}.sec-cream .stat span,.sec-sand .stat span{color:var(--muted)}

/* cards / grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.card{background:var(--paper);border:1px solid var(--line);padding:38px 30px;transition:transform .3s,box-shadow .3s;border-radius:4px}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(60,45,20,.14)}
.card .ic{font-size:2rem;margin-bottom:14px;display:block}
.card h3{margin-bottom:8px}.card p{color:var(--muted);font-size:.95rem;margin-bottom:18px}
.card .more{font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold-deep);font-weight:bold}.card .more:after{content:' →'}
.sec-dark .card{background:var(--char2);border-color:var(--line-d)}.sec-dark .card p{color:var(--muted-d)}

.feats{list-style:none;margin-top:14px}
.feats li{padding:9px 0 9px 30px;position:relative}
.feats li:before{content:'✦';position:absolute;left:0;color:var(--gold-deep)}
.sec-dark .feats li:before{color:var(--gold-hi)}
.imgframe{border:1px solid var(--gold-line);padding:10px;background:var(--paper);border-radius:4px;box-shadow:0 20px 50px rgba(60,45,20,.12)}
.imgframe img{width:100%;object-fit:cover;aspect-ratio:4/3;display:block;border-radius:2px}
.parallax{background-attachment:fixed;background-size:cover;background-position:center}

/* forms */
.formcard{background:var(--paper);border:1px solid var(--line);padding:38px;border-radius:6px;box-shadow:0 20px 50px rgba(60,45,20,.10)}
.sec-dark .formcard{background:var(--char2);border-color:var(--line-d)}
form label{display:block;font-size:.68rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.sec-dark form label{color:var(--muted-d)}
form input,form select,form textarea{width:100%;padding:13px 14px;background:#fff;border:1px solid var(--line);color:var(--ink);font-family:Arial;font-size:.96rem;transition:border-color .2s;border-radius:3px}
.sec-dark form input,.sec-dark form select,.sec-dark form textarea{background:#17130f;border-color:#3a3026;color:#fff}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute !important;left:-9999px;opacity:0;height:0;width:0}
.ok-msg{display:none;background:var(--sand);border:1px solid var(--gold-line);padding:26px;text-align:center;border-radius:4px}
.sec-dark .ok-msg{background:var(--char);border-color:var(--gold-deep)}
.ok-msg.show{display:block}.ok-msg .big{font-family:Georgia,serif;font-size:1.6rem;color:var(--gold-deep);margin-bottom:8px}.sec-dark .ok-msg .big{color:var(--gold-hi)}

/* testimonials */
.tcard{background:var(--paper);border:1px solid var(--line);padding:30px;border-radius:4px}
.tcard .stars{color:var(--gold);letter-spacing:4px;margin-bottom:12px}
.tcard p{font-style:italic}.tcard .who{margin-top:14px;font-size:.82rem;letter-spacing:1px;color:var(--muted);text-transform:uppercase}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.chip{border:1px solid var(--line);background:var(--paper);padding:12px 24px;letter-spacing:1.2px;font-size:.85rem;color:var(--ink);transition:.25s;border-radius:2px}
.chip:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-3px)}
.sec-dark .chip{background:var(--char2);border-color:var(--line-d);color:var(--text-d)}

/* portrait */
.portrait{background:linear-gradient(160deg,#2a2621,#171310);border:1px solid var(--gold-line);padding:26px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.portrait img{width:100%;max-width:340px}

/* footer */
.footer{background:var(--char);border-top:3px solid var(--gold-deep);padding:56px 0 30px;color:var(--muted-d);font-size:.9rem}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
.footer .script{font-size:2rem;color:var(--gold-hi)}
.footer h4{color:#fff;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
.footer a{color:var(--muted-d);display:block;padding:3px 0}.footer a:hover{color:var(--gold-hi)}
.footer .socials{display:flex;gap:12px;margin-top:14px}
.footer .socials a{width:42px;height:42px;border:1px solid var(--line-d);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold-hi);font-size:.85rem;transition:.25s}
.footer .socials a:hover{background:var(--gold);color:#231d12;transform:translateY(-3px)}
.footer .tagline{font-style:italic;color:var(--gold-line);margin-top:8px}
.footer .bottom{border-top:1px solid var(--line-d);padding-top:22px;text-align:center;font-size:.78rem}
.footer .trust{margin-top:8px;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:#7a715f}.footer .trust b{color:var(--gold-deep)}

/* reveals */
.fade-in{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.fade-in.visible{opacity:1;transform:none}
.fade-in.d1{transition-delay:.12s}.fade-in.d2{transition-delay:.24s}.fade-in.d3{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.fade-in{opacity:1;transform:none;transition:none}.fx-cue{animation:none}.parallax,.hero{background-attachment:scroll}
.fx{height:auto}.fx-stage{position:relative;height:100vh;perspective:none}.fx-frags,.fx-intro{display:none}.fx-int{transform:none;filter:brightness(.6)}.fx-inside{opacity:1}.fx-inside [data-r]{opacity:1;transform:none;filter:none;transition:none}}

/* mobile call bar */
.mobilebar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:120;background:var(--char);border-top:1px solid var(--gold)}
.mobilebar a{flex:1;text-align:center;color:#fff;padding:13px 4px;font-size:.68rem;letter-spacing:1px;text-transform:uppercase;border-right:1px solid var(--line-d)}
.mobilebar a:last-child{border-right:0}.mobilebar a b{display:block;color:var(--gold-hi);font-size:1.05rem;margin-bottom:1px}

@media(max-width:920px){
  section{padding:64px 0}
  .grid-3,.grid-2,.footer .cols{grid-template-columns:1fr}
  .nav ul{position:fixed;inset:66px 0 auto 0;background:rgba(28,25,21,.98);flex-direction:column;gap:0;padding:10px 0;transform:translateY(-140%);transition:transform .35s ease}
  .nav ul.open{transform:translateY(0)}
  .nav ul li{width:100%;border-top:1px solid var(--line-d)}.nav ul a{display:block;padding:15px 28px;text-shadow:none;color:var(--text-d)}
  .nav .navcta{margin:10px 28px}.burger{display:block}
  .row2{grid-template-columns:1fr}
  .hero,.parallax{background-attachment:scroll}
  .fx{height:540vh}.fx-chip{min-width:44%;padding:12px 14px}.fx-chip b{font-size:1.5rem}.fx-cta .btn{padding:14px 26px}.fx-cap{padding:18px 20px}.fx-cap p{font-size:.92rem}
  .mobilebar{display:flex}body{padding-bottom:52px}
}