/* Spencer Shadow Ranch — Shared Styles */
:root{--parchment:#F4EDE4;--linen:#EAE2D6;--cream:#FAF6F0;--dark:#141210;--bark:#2a1f14;--forest:#2d3b28;--sage:#5a7247;--moss:#7a9462;--gold:#c8a255;--gold-light:#d4b76a;--copper:#b87333;--clay:#c49570;--rust:#8b4c2a;--bone:#d9cfc1;--smoke:#8a8078;--font-display:'Playfair Display',Georgia,serif;--font-serif:'Lora',Georgia,serif;--font-body:'Outfit',sans-serif;--max-w:1100px;--side-pad:48px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}img{display:block;max-width:100%}a{color:inherit}
body{font-family:var(--font-body);background:var(--parchment);color:var(--dark);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.03;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 var(--side-pad);height:76px;display:flex;align-items:center;justify-content:space-between;transition:all .5s}
nav.scrolled{background:rgba(244,237,228,.95);backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav-brand{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--bark);letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;transition:color .4s}
nav:not(.scrolled) .nav-brand{color:var(--parchment)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:12px;font-weight:500;color:var(--bark);text-decoration:none;letter-spacing:1.5px;text-transform:uppercase;opacity:.55;transition:all .3s}
nav:not(.scrolled) .nav-links a{color:var(--parchment);opacity:.65}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-cta{background:var(--forest)!important;color:var(--parchment)!important;padding:10px 24px;border-radius:100px;opacity:1!important;font-weight:600;letter-spacing:1px}
.nav-cta:hover{background:var(--sage)!important}
.nav-active{opacity:1!important}
nav.scrolled .nav-active{color:var(--bark)!important}
.nav-current{opacity:1!important;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--bark);margin:5px 0;transition:.3s}
nav:not(.scrolled) .nav-toggle span{background:var(--parchment)}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;background:var(--dark);padding:0 var(--side-pad) 80px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.9;filter:saturate(.9)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.1) 0%,rgba(20,18,16,0) 30%,rgba(20,18,16,.1) 50%,rgba(20,18,16,.65) 100%)}
.hero-content{position:relative;z-index:2;max-width:860px}
.hero-line{width:60px;height:1px;background:var(--gold);margin-bottom:28px;opacity:0;animation:lineIn 1s .3s forwards}
@keyframes lineIn{to{opacity:1;width:80px}}
.hero h1{font-family:var(--font-display);font-size:clamp(42px,6.5vw,84px);font-weight:400;color:var(--parchment);line-height:1.08;margin-bottom:24px;letter-spacing:-.5px;text-shadow:0 2px 20px rgba(20,18,16,.5)}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero-sub{font-family:var(--font-serif);font-size:18px;color:rgba(244,237,228,.8);max-width:520px;line-height:1.8;margin-bottom:36px;font-weight:400;text-shadow:0 1px 8px rgba(20,18,16,.4)}
.hero-short{min-height:60vh}
.hero-scroll{position:absolute;bottom:28px;right:48px;color:rgba(244,237,228,.2);font-size:10px;letter-spacing:3px;text-transform:uppercase;writing-mode:vertical-rl}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}

/* BUTTONS */
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--dark);padding:15px 34px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border-radius:100px;transition:all .4s}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 30px rgba(200,162,85,.25)}
.btn-primary svg{width:16px;height:16px}
.btn-ghost{color:rgba(244,237,228,.45);padding:15px 8px;font-size:13px;font-weight:400;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:color .3s}
.btn-ghost:hover{color:var(--parchment)}
.btn-dark{display:inline-flex;align-items:center;gap:10px;background:var(--bark);color:var(--parchment);padding:15px 34px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border-radius:100px;transition:all .4s}
.btn-dark:hover{background:var(--forest);transform:translateY(-2px)}
.btn-dark svg{width:16px;height:16px}
.btn-outline{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--gold);border:1.5px solid rgba(200,162,85,.3);padding:14px 32px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border-radius:100px;transition:all .4s}
.btn-outline:hover{background:rgba(200,162,85,.08);border-color:var(--gold)}

/* SECTIONS */
section{padding:120px var(--side-pad)}
.section-inner{max-width:var(--max-w);margin:0 auto}
.section-label{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--sage);margin-bottom:18px;font-weight:600;display:flex;align-items:center;gap:14px}
.section-label::before{content:'';width:36px;height:1px;background:var(--sage)}
.section-heading{font-family:var(--font-display);font-size:clamp(32px,4.5vw,54px);font-weight:400;color:var(--bark);line-height:1.15;margin-bottom:36px;letter-spacing:-.5px}
.section-heading em{font-style:italic;color:var(--rust)}
.dark-section{background:var(--dark);color:var(--parchment)}
.dark-section .section-label{color:var(--gold)}.dark-section .section-label::before{background:var(--gold)}
.dark-section .section-heading{color:var(--parchment)}.dark-section .section-heading em{color:var(--gold)}
.forest-section{background:var(--forest);color:var(--parchment)}
.forest-section .section-label{color:rgba(244,237,228,.45)}.forest-section .section-label::before{background:rgba(244,237,228,.25)}
.forest-section .section-heading{color:var(--parchment)}.forest-section .section-heading em{color:var(--gold)}

/* MARQUEE */
.marquee{overflow:hidden;background:var(--forest);padding:13px 0;white-space:nowrap}
.marquee-track{display:flex;animation:marqueeScroll 35s linear infinite}
.marquee-item{font-family:var(--font-display);font-size:13px;color:rgba(244,237,228,.45);padding:0 32px;flex-shrink:0;letter-spacing:1.5px}
.marquee-dot{color:var(--gold);margin:0 12px;font-size:8px}
@keyframes marqueeScroll{to{transform:translateX(-50%)}}

/* STATS */
.stats-strip{background:var(--dark);padding:72px var(--side-pad)}
.stats-grid{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center}
.stat-icon{margin:0 auto 14px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(200,162,85,.1);border-radius:14px}
.stat-icon svg{width:28px;height:28px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.stat-num{font-family:var(--font-display);font-size:36px;font-weight:600;color:var(--parchment);margin-bottom:4px}
.stat-desc{font-size:14px;color:rgba(244,237,228,.7);letter-spacing:.3px;line-height:1.4}

/* PULLQUOTE */
.pullquote{background:var(--linen);padding:80px var(--side-pad);text-align:center}
.pullquote blockquote{font-family:var(--font-display);font-size:clamp(22px,3vw,34px);font-style:italic;color:var(--bark);max-width:800px;margin:0 auto;line-height:1.5;font-weight:400}
.pullquote cite{display:block;margin-top:20px;font-family:var(--font-body);font-size:13px;font-style:normal;color:var(--smoke);letter-spacing:1px}

/* PROSE */
.prose{font-family:var(--font-serif);font-size:17px;color:#4a4438;line-height:1.9;font-weight:400}
.prose p{margin-bottom:20px}
.prose strong{color:var(--bark);font-weight:600}
.prose-light{color:rgba(244,237,228,.5)}
.prose-light strong{color:var(--parchment)}
.prose-sig{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--rust);margin-top:32px}

/* STEP LIST — explicit span numbers, no pseudo-element grid issues */
.step-list{list-style:none;margin-top:28px}
.step-list li{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:baseline;gap:20px;font-size:16px;color:rgba(244,237,228,.6);line-height:1.8;font-family:var(--font-serif)}
.step-list li:first-child{border-top:1px solid rgba(255,255,255,.06)}
.step-num{font-family:var(--font-display);font-size:28px;color:var(--gold);font-weight:600;flex-shrink:0;width:44px;text-align:center;line-height:1}
.step-list strong{color:var(--parchment)}

/* CARDS */
.card-grid{display:grid;gap:24px}
.card-grid-3{grid-template-columns:repeat(3,1fr)}
.card-grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:36px 28px;transition:all .4s}
.card:hover{background:rgba(255,255,255,.06);transform:translateY(-4px)}
.card-icon{width:52px;height:52px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;background:rgba(200,162,85,.1);border-radius:12px}
.card-icon svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-family:var(--font-display);font-size:22px;margin-bottom:10px;font-weight:500;color:var(--parchment)}
.card p{font-size:14px;color:rgba(244,237,228,.45);line-height:1.75}
.card-light{background:white;border:1px solid rgba(0,0,0,.06)}
.card-light:hover{background:white;box-shadow:0 12px 40px rgba(0,0,0,.06)}
.card-light h3{color:var(--bark)}.card-light p{color:#5a5448}

/* PRACTICE ROWS */
.practice-row{display:flex;gap:32px;padding:40px 0;border-bottom:1px solid rgba(0,0,0,.06);transition:all .3s}
.practice-row:first-child{border-top:1px solid rgba(0,0,0,.06)}
.practice-row:hover{padding-left:8px}
.practice-num{font-family:var(--font-display);font-size:48px;font-weight:300;color:rgba(139,76,42,.12);line-height:1;flex-shrink:0;width:64px}
.practice-row h3{font-family:var(--font-display);font-size:24px;font-weight:500;color:var(--bark);margin-bottom:8px}
.practice-row p{font-family:var(--font-serif);font-size:15px;color:#5a5448;line-height:1.85;font-weight:400;max-width:680px}

/* TWO-COL */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.two-col-center{align-items:center}

/* PHOTO */
.photo-round{border-radius:14px;filter:saturate(.85)}

/* NEWSLETTER */
.nl-strip{background:var(--linen);padding:64px var(--side-pad);text-align:center}
.nl-strip h3{font-family:var(--font-display);font-size:28px;color:var(--bark);margin-bottom:6px;font-weight:400}
.nl-strip p{font-size:14px;color:var(--smoke);margin-bottom:24px;font-family:var(--font-serif)}
.nl-form{display:flex;gap:10px;max-width:460px;margin:0 auto}
.nl-form input{flex:1;padding:14px 22px;border:1.5px solid var(--bone);border-radius:100px;font-family:var(--font-body);font-size:14px;background:white;outline:none;transition:border .3s}
.nl-form input:focus{border-color:var(--sage)}
.nl-form button{padding:14px 28px;background:var(--forest);color:var(--parchment);border:none;border-radius:100px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:1px;cursor:pointer;transition:.3s;text-transform:uppercase}
.nl-form button:hover{background:var(--sage)}

/* FOOTER */
footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.04);padding:48px var(--side-pad)}
.footer-inner{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;align-items:start;gap:48px;flex-wrap:wrap}
.footer-brand{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--parchment);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}
.footer-tagline{font-family:var(--font-serif);font-size:13px;font-style:italic;color:rgba(244,237,228,.3);max-width:280px;line-height:1.6}
.footer-links h4{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(244,237,228,.25);margin-bottom:14px}
.footer-links a{display:block;font-size:14px;color:rgba(244,237,228,.45);text-decoration:none;margin-bottom:8px;transition:color .3s}
.footer-links a:hover{color:var(--gold)}
.footer-copy{width:100%;text-align:center;padding-top:32px;border-top:1px solid rgba(255,255,255,.04);margin-top:12px;font-size:11px;color:rgba(244,237,228,.15);letter-spacing:1px}

/* ANIMATIONS */
.reveal{opacity:0;transform:translateY(28px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}

/* RESPONSIVE */
@media(max-width:900px){
:root{--side-pad:24px}
nav{padding:0 24px;height:64px}
.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--parchment);flex-direction:column;padding:24px;gap:18px;border-bottom:1px solid rgba(0,0,0,.06)}
.nav-links.open{display:flex}.nav-links.open a{color:var(--bark)!important;opacity:.7!important}.nav-links.open a:hover{opacity:1!important}.nav-links.open .nav-active{opacity:1!important;font-weight:600}
.nav-toggle{display:block}
.hero{padding:0 24px 48px}
section{padding:80px 24px}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}
.card-grid-3,.card-grid-2{grid-template-columns:1fr}
.two-col{grid-template-columns:1fr;gap:40px}
.footer-inner{flex-direction:column;gap:32px}
.nl-form{flex-direction:column}
.stats-strip,.nl-strip,.pullquote{padding-left:24px;padding-right:24px}
.practice-num{font-size:32px;width:40px}
.step-num{font-size:22px;width:32px}
}

/* ═══ SEDUCTIVE ENHANCEMENTS ═══ */

/* Hero slow zoom */
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-bg { animation: heroZoom 20s ease-out forwards; }

/* Full-bleed photo break */
.photo-break {
  width: 100%; height: 50vh; min-height: 320px;
  position: relative; overflow: hidden;
}
.photo-break img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.8);
}
.photo-break-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,16,0.1) 0%, rgba(20,18,16,0) 30%, rgba(20,18,16,0) 70%, rgba(20,18,16,0.1) 100%);
}
.photo-break-caption {
  position: absolute; bottom: 20px; right: 24px;
  font-family: var(--font-serif); font-size: 12px;
  color: rgba(244,237,228,0.4); font-style: italic;
}

/* Floating contact bar */
.contact-float {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: rgba(42,31,20,0.92); backdrop-filter: blur(16px);
  padding: 12px var(--side-pad);
  display: flex; align-items: center; justify-content: center; gap: 24px;
  transform: translateY(100%); transition: transform 0.5s ease;
  border-top: 1px solid rgba(200,162,85,0.15);
}
.contact-float.visible { transform: translateY(0); }
.contact-float-text {
  font-family: var(--font-serif); font-size: 15px;
  color: rgba(244,237,228,0.85); font-style: italic;
}
.contact-float a {
  color: var(--gold) !important; text-decoration: none;
  font-family: var(--font-body); font-size: 14px;
  font-weight: 600; letter-spacing: 0.5px;
}
.contact-float .btn-primary { padding: 11px 26px; font-size: 12px; color: var(--dark) !important; }

/* Photo grid teaser (homepage) */
.photo-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 8px;
  margin-top: 32px;
  border-radius: 16px;
  overflow: hidden;
}
.photo-teaser a {
  overflow: hidden; position: relative; display: block;
}
.photo-teaser a:first-child {
  grid-row: 1 / -1; grid-column: 1 / 3;
}
.photo-teaser img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85);
  transition: transform 0.6s ease, filter 0.4s;
}
.photo-teaser a:hover img {
  transform: scale(1.06); filter: saturate(1);
}
.photo-teaser-overlay {
  position: absolute; inset: 0;
  background: rgba(20,18,16,0.3);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
  font-family: var(--font-display); font-size: 16px;
  color: var(--parchment); letter-spacing: 1px;
}
.photo-teaser a:last-child .photo-teaser-overlay { opacity: 1; }
.photo-teaser a:hover .photo-teaser-overlay { opacity: 1; }

/* Smoother reveal variants */
.reveal-fade { opacity: 0; transition: opacity 1.2s ease; }
.reveal-fade.visible { opacity: 1; }
.reveal-up { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-up.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .photo-teaser { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px; }
  .photo-teaser a:first-child { grid-row: auto; grid-column: auto; }
  .contact-float { gap: 12px; padding: 10px 16px; }
  .contact-float-text { display: none; }
  .photo-break { height: 40vh; min-height: 240px; }
}