/* =========================================================
   VELLUM & STONE — Luxury Real Estate Template
   Design tokens
========================================================= */
:root{
  --ivory:        #F4F0E7;
  --stone:        #E7E0D0;
  --stone-deep:   #D8CFB8;
  --charcoal:     #1B1916;
  --charcoal-2:   #242019;
  --ink:          #2A2721;
  --ink-soft:     #6B6559;
  --cream:        #EFE8D8;
  --brass:        #99793E;
  --brass-light:  #CBAE76;
  --hairline:     #CDC3AA;
  --hairline-dark: rgba(239,232,216,0.18);

  --serif: "Fraunces", "Iowan Old Style", serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1240px;
  --ease: cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html,body{ margin:0; padding:0; }

body{
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }

em{ font-style: italic; color: var(--brass); }

::selection{ background: var(--brass); color: var(--ivory); }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
.container-narrow{ max-width: 820px; }

@media (max-width: 720px){
  .container{ padding: 0 22px; }
}

/* =========================================================
   Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   Loader
========================================================= */
.loader{
  position: fixed; inset:0; z-index:9999;
  background: var(--charcoal);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 28px;
  transition: opacity 0.9s var(--ease), visibility 0.9s var(--ease);
}
.loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--cream);
  letter-spacing: 0.08em;
  display:flex; gap: 14px;
}
.loader-mark span{ opacity:0; transform: translateY(14px); animation: loaderIn 0.7s var(--ease) forwards; }
.loader-mark span:nth-child(1){ animation-delay: 0.05s; }
.loader-mark span:nth-child(2){ animation-delay: 0.18s; color:var(--brass-light); }
.loader-mark span:nth-child(3){ animation-delay: 0.31s; }
@keyframes loaderIn{ to{ opacity:1; transform:translateY(0); } }
.loader-bar{ width: 220px; height:1px; background: var(--hairline-dark); overflow:hidden; }
.loader-bar span{ display:block; height:100%; width:0%; background: var(--brass-light); animation: loaderBar 1.6s var(--ease) forwards 0.3s; }
@keyframes loaderBar{ to{ width:100%; } }

/* =========================================================
   Custom cursor
========================================================= */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; z-index: 9998;
  pointer-events:none; border-radius:50%;
  transform: translate(-50%,-50%);
  transition: opacity 0.3s ease;
}
.cursor-dot{ width:6px; height:6px; background: var(--brass); }
.cursor-ring{ width:38px; height:38px; border:1px solid rgba(153,121,62,0.55); transition: width .25s var(--ease), height .25s var(--ease), border-color .25s ease, opacity .3s ease; }
.cursor-ring.big{ width:64px; height:64px; border-color: var(--brass); }
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none; }
}

/* =========================================================
   Scroll progress
========================================================= */
.scroll-progress{
  position: fixed; top:0; left:0; height: 2px; width:0%;
  background: var(--brass); z-index: 500;
}

/* =========================================================
   Navigation
========================================================= */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 400;
  padding: 26px 0;
  transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav-inner{
  max-width: var(--container);
  margin:0 auto; padding: 0 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{
  font-family: var(--serif); font-size: 1.3rem; letter-spacing:0.03em;
  color: var(--ivory);
}
.nav-logo span{ color: var(--brass-light); font-style:italic; }
.nav-links{ display:flex; gap: 34px; }
.nav-links a{
  position:relative; font-size: 0.82rem; letter-spacing:0.04em; text-transform:uppercase;
  color: rgba(244,240,231,0.82);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background: var(--brass-light);
  transition: width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{ font-size:0.78rem; }
.nav-burger{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-burger span{ height:1px; background: var(--ivory); width:100%; }

.nav.solid{
  background: rgba(27,25,22,0.86);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-cta{ display:none; }
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 15px 30px; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 2px; position:relative; overflow:hidden; isolation:isolate;
  transition: transform .35s var(--ease), color .35s ease, border-color .35s ease;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.btn-primary{ background: var(--brass); color: var(--ivory); }
.btn-primary::before{ background: var(--charcoal); }
.btn-primary:hover::before{ transform: scaleX(1); }
.btn-primary:hover{ color:var(--cream); }

.btn-outline-light{ border:1px solid rgba(244,240,231,0.5); color: var(--ivory); }
.btn-outline-light::before{ background: var(--ivory); }
.btn-outline-light:hover::before{ transform: scaleX(1); }
.btn-outline-light:hover{ color: var(--charcoal); }

.btn-outline-dark{ border:1px solid var(--ink); color: var(--ink); }
.btn-outline-dark::before{ background: var(--ink); }
.btn-outline-dark:hover::before{ transform: scaleX(1); }
.btn-outline-dark:hover{ color: var(--ivory); }

.btn-ghost{ border:1px solid rgba(244,240,231,0.5); color: var(--ivory); padding: 11px 22px; }
.btn-ghost::before{ background: var(--ivory); }
.btn-ghost:hover::before{ transform: scaleX(1); }
.btn-ghost:hover{ color: var(--charcoal); }

/* =========================================================
   Side Ledger (signature nav element)
========================================================= */
.ledger{
  position: fixed; right: 26px; top:50%; transform: translateY(-50%);
  z-index: 350; display:flex; align-items:center;
}
.ledger-line{ position:absolute; right:5px; top:0; bottom:0; width:1px; background: var(--hairline-dark); }
.ledger-list{ display:flex; flex-direction:column; gap: 15px; padding-right: 14px; }
.ledger-list li{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  cursor:pointer; opacity:.55; transition: opacity .3s ease;
}
.ledger-list li:hover, .ledger-list li.active{ opacity:1; }
.ledger-no{ font-family: var(--serif); font-size:0.7rem; color: var(--brass-light); }
.ledger-label{
  font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--ivory);
  max-width:0; overflow:hidden; white-space:nowrap; transition: max-width .35s var(--ease);
}
.ledger-list li:hover .ledger-label, .ledger-list li.active .ledger-label{ max-width:140px; }
.ledger-list li.active .ledger-no{ position:relative; }
.ledger-list li.active::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brass-light); }

@media (max-width: 980px){ .ledger{ display:none; } }

/* =========================================================
   Hero
========================================================= */
.hero{
  position: relative; min-height: 100svh; display:flex; align-items:flex-end;
  overflow:hidden; background: var(--charcoal);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.12);
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform: scale(1.12) translate(0,0); } to{ transform: scale(1.02) translate(-1%,-1%); } }
.hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,18,15,0.55) 0%, rgba(20,18,15,0.25) 40%, rgba(15,13,11,0.86) 100%);
}
.hero-grain{ position:absolute; inset:0; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

.hero-content{
  position:relative; z-index:2; padding: 0 40px 120px; width:100%;
  max-width: var(--container); margin:0 auto;
}
.eyebrow{
  font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--brass-light);
  margin-bottom: 18px; font-weight:500;
}
.eyebrow.center{ text-align:center; }

.hero-title{
  font-family: var(--serif); color: var(--ivory);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1.02; font-weight:400; margin-bottom: 26px;
}
.reveal-line{ display:block; overflow:hidden; }
.reveal-line span{ display:inline-block; transform: translateY(105%); animation: lineUp 1s var(--ease) forwards; }
.reveal-line:nth-child(1) span{ animation-delay: 0.15s; }
.reveal-line:nth-child(2) span{ animation-delay: 0.32s; }
@keyframes lineUp{ to{ transform: translateY(0); } }

.hero-sub{ color: rgba(244,240,231,0.86); max-width: 520px; font-size:1.05rem; margin-bottom: 34px; }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }

.hero-scroll-cue{
  position:absolute; left:40px; bottom: 40px; z-index:2;
  display:flex; align-items:center; gap:12px; color: rgba(244,240,231,0.7);
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
}
.cue-line{ width:1px; height:46px; background: rgba(244,240,231,0.25); position:relative; overflow:hidden; }
.cue-line i{ position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--brass-light); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{ top:-40%; } 60%{ top:100%; } 100%{ top:100%; } }

.hero-figure{
  position:absolute; right:40px; bottom:40px; z-index:2; text-align:right;
  color: var(--ivory);
}
.hero-figure-num{ font-family: var(--serif); font-size:2.6rem; color:var(--brass-light); display:block; line-height:1; }
.hero-figure-label{ font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; opacity:0.75; }

@media (max-width:720px){
  .hero-content{ padding: 0 22px 100px; }
  .hero-figure{ position:static; margin-top:34px; text-align:left; }
  .hero-scroll-cue{ left:22px; }
}

/* reveal-up generic (scroll-triggered) */
.reveal-up{ opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal-up.in{ opacity:1; transform: translateY(0); }

/* =========================================================
   Finder
========================================================= */
.finder-wrap{ position:relative; z-index:5; margin-top:-46px; padding: 0 40px; }
.finder{
  max-width: var(--container); margin:0 auto;
  background: var(--ivory);
  box-shadow: 0 30px 60px rgba(20,18,15,0.18);
  display:flex; align-items:stretch; flex-wrap:wrap;
  border: 1px solid var(--hairline);
}
.finder-field{ flex:1; min-width:180px; padding: 20px 26px; }
.finder-field label{ display:block; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:8px; }
.finder-field input, .finder-field select{
  border:none; background:transparent; font-family:var(--serif); font-size:1.05rem; color:var(--ink); width:100%; outline:none;
}
.finder-divider{ width:1px; background: var(--hairline); margin: 14px 0; }
.finder-submit{ margin:10px; flex-shrink:0; }

@media (max-width:900px){
  .finder-wrap{ padding:0 22px; }
  .finder{ flex-direction:column; }
  .finder-divider{ width:auto; height:1px; margin:0 26px; }
  .finder-submit{ margin:16px 26px; }
}

/* =========================================================
   Section generic
========================================================= */
.section{ padding: 130px 0; position:relative; }
.section-dark{ background: var(--charcoal); color: var(--cream); }
.section-head{ max-width: 640px; margin-bottom: 64px; }
.section-head h2{ font-family: var(--serif); font-size: clamp(2rem,4.2vw,3.2rem); line-height:1.1; margin-top:10px; }
.section-head h2.light{ color: var(--ivory); }
.section-lede{ margin-top:18px; color: var(--ink-soft); font-size:1.02rem; max-width:560px; }
.section-dark .section-lede{ color: rgba(239,232,216,0.68); }
.section-dark .eyebrow{ color: var(--brass-light); }

@media (max-width:720px){ .section{ padding: 90px 0; } }

/* =========================================================
   Filmstrip / Collection
========================================================= */
.filmstrip-wrap{ position:relative; }
.filmstrip{
  display:flex; gap: 24px; overflow-x:auto; scroll-snap-type: x proximity;
  padding: 0 40px 30px; cursor: grab;
  scrollbar-width:none;
}
.filmstrip.dragging{ cursor:grabbing; scroll-snap-type:none; }
.filmstrip::-webkit-scrollbar{ display:none; }

.frame{
  flex: 0 0 340px; scroll-snap-align:start;
  background: var(--charcoal); color:var(--ivory);
}
.frame-media{ position:relative; overflow:hidden; aspect-ratio: 4/5; }
.frame-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease); }
.frame:hover .frame-media img{ transform: scale(1.08); }
.frame-tag{
  position:absolute; top:16px; left:16px; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
  background: rgba(20,18,15,0.7); color: var(--brass-light); padding: 6px 12px;
  backdrop-filter: blur(4px);
}
.frame-meta{ padding: 22px 22px 26px; }
.frame-no{ font-size:0.68rem; letter-spacing:0.1em; color: var(--brass-light); }
.frame-meta h3{ font-family:var(--serif); font-size:1.4rem; margin: 8px 0 4px; }
.frame-loc{ font-size:0.82rem; color: rgba(239,232,216,0.6); margin-bottom:14px; }
.frame-specs{ display:flex; gap:14px; font-size:0.72rem; letter-spacing:0.03em; color: rgba(239,232,216,0.75); margin-bottom:14px; }
.frame-specs span{ padding-right:14px; border-right:1px solid rgba(239,232,216,0.25); }
.frame-specs span:last-child{ border-right:none; padding-right:0; }
.frame-price{ font-family:var(--serif); font-size:1.15rem; color: var(--ivory); }

.strip-arrow{
  position:absolute; top:40%; z-index:3; width:52px; height:52px; border-radius:50%;
  background: var(--ivory); border:1px solid var(--hairline); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s ease, color .3s ease;
}
.strip-arrow:hover{ background: var(--brass); color: var(--ivory); }
.strip-arrow-l{ left: 8px; }
.strip-arrow-r{ right: 8px; }
@media (max-width:720px){ .strip-arrow{ display:none; } }

.collection-cta{ text-align:center; margin-top: 50px; }

/* =========================================================
   Map
========================================================= */
.section-map{ background: var(--stone); }
.map-panel{
  position:relative; aspect-ratio: 1000/460; background: var(--ivory);
  border: 1px solid var(--hairline); overflow:hidden;
}
.map-svg{ width:100%; height:100%; }
.map-pin{ position:absolute; transform: translate(-50%,-50%); }
.pin-dot{ display:block; width:10px; height:10px; border-radius:50%; background: var(--brass); position:relative; z-index:2; }
.pin-pulse{
  position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--brass);
  animation: pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse{ 0%{ transform:scale(0.4); opacity:0.9;} 100%{ transform:scale(2.4); opacity:0; } }
.map-tooltip{
  position:absolute; pointer-events:none; opacity:0; transform: translate(-50%,-130%);
  background: var(--charcoal); color:var(--ivory); font-size:0.75rem; letter-spacing:0.03em;
  padding: 8px 14px; white-space:nowrap; transition: opacity .2s ease, top .15s ease, left .15s ease;
}
.map-tooltip.show{ opacity:1; }

/* =========================================================
   Services
========================================================= */
.services-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: var(--hairline-dark); }
.service-card{ background: var(--charcoal); padding: 44px 30px; }
.service-icon{ width:40px; height:40px; color: var(--brass-light); margin-bottom:26px; }
.service-card h3{ font-family:var(--serif); font-size:1.3rem; margin-bottom:12px; color: var(--ivory); }
.service-card p{ color: rgba(239,232,216,0.65); font-size:0.92rem; }
@media (max-width:980px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .services-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   Neighborhoods
========================================================= */
.hood-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2px; padding: 0 2px; }
.hood-card{ position:relative; aspect-ratio: 3/4; overflow:hidden; display:block; }
.hood-card img{ width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease); }
.hood-card:hover img{ transform: scale(1.09); }
.hood-info{
  position:absolute; left:0; right:0; bottom:0; padding: 26px;
  background: linear-gradient(0deg, rgba(15,13,11,0.82), transparent 65%);
  color: var(--ivory);
}
.hood-info h3{ font-family:var(--serif); font-size:1.4rem; margin-bottom:6px; }
.hood-info p{ font-size:0.85rem; opacity:0.8; }
@media (max-width:980px){ .hood-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .hood-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   Numbers
========================================================= */
.section-numbers{ background: var(--charcoal); color: var(--ivory); }
.numbers-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 40px; margin-top: 20px; }
.number-value{ font-family:var(--serif); font-size: clamp(2.4rem,4vw,3.6rem); color: var(--brass-light); display:block; }
.number-label{ font-size:0.82rem; color: rgba(239,232,216,0.65); }
@media (max-width:900px){ .numbers-grid{ grid-template-columns: repeat(2,1fr); row-gap:44px; } }

/* =========================================================
   Agents
========================================================= */
.agents-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 34px; }
.agent-photo{ aspect-ratio: 3/4; overflow:hidden; margin-bottom:20px; }
.agent-photo img{ width:100%; height:100%; object-fit:cover; filter: grayscale(0.35); transition: filter .5s ease, transform 1s var(--ease); }
.agent-card:hover .agent-photo img{ filter:grayscale(0); transform: scale(1.05); }
.agent-card h3{ font-family:var(--serif); font-size:1.2rem; margin-bottom:4px; }
.agent-role{ font-size:0.82rem; color: var(--brass); margin-bottom:2px; }
.agent-focus{ font-size:0.8rem; color: var(--ink-soft); }
@media (max-width:980px){ .agents-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .agents-grid{ grid-template-columns: 1fr; max-width:320px; margin:0 auto; } }

/* =========================================================
   Cinematic tour
========================================================= */
.section-tour{ position:relative; min-height: 90vh; display:flex; align-items:center; overflow:hidden; }
.tour-media{ position:absolute; inset:0; }
.tour-media img{ width:100%; height:100%; object-fit:cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.section-tour:hover .tour-media img{ transform: scale(1); }
.tour-scrim{ position:absolute; inset:0; background: linear-gradient(100deg, rgba(15,13,11,0.82) 30%, rgba(15,13,11,0.25) 100%); }
.tour-content{ position:relative; z-index:2; color: var(--ivory); max-width:640px; }
.tour-content p:not(.eyebrow){ margin: 18px 0 34px; color: rgba(239,232,216,0.78); font-size:1.05rem; }

.play-btn{ position:relative; width:82px; height:82px; display:flex; align-items:center; justify-content:center; }
.play-btn svg{ width:22px; height:22px; color: var(--ivory); position:relative; z-index:2; }
.play-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(239,232,216,0.5); }
.play-btn::before{ content:""; position:absolute; inset:0; border-radius:50%; background: rgba(239,232,216,0.08); transition: transform .4s var(--ease), background .4s ease; }
.play-btn:hover::before{ transform: scale(1.15); background: rgba(239,232,216,0.16); }
.play-ring{ animation: ringPulse 2.6s ease-out infinite; }
@keyframes ringPulse{ 0%{ transform:scale(0.9); opacity:1;} 100%{ transform:scale(1.5); opacity:0; } }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:800; background: rgba(15,13,11,0.94);
  display:flex; align-items:center; justify-content:center; padding: 40px;
  opacity:0; visibility:hidden; transition: opacity .4s ease, visibility .4s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-figure{ max-width: 900px; width:100%; }
.lightbox-figure img{ width:100%; }
.lightbox-figure figcaption{ color: rgba(239,232,216,0.65); font-size:0.85rem; margin-top:14px; text-align:center; }
.lightbox-close{ position:absolute; top:30px; right:40px; color:var(--ivory); font-size:2rem; line-height:1; }

/* =========================================================
   Testimonials
========================================================= */
.section-testimonials{ background: var(--stone); }
.testimonial-slider{ max-width: 760px; margin:0 auto; text-align:center; }
.testimonial-track{ position:relative; min-height: 220px; }
.testimonial{ position:absolute; inset:0; opacity:0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events:none; }
.testimonial.active{ opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
.testimonial p{ font-family: var(--serif); font-size: clamp(1.3rem,2.6vw,1.8rem); line-height:1.4; font-style:italic; color:var(--ink); }
.testimonial footer{ margin-top:22px; font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; color: var(--brass); }
.testi-dots{ display:flex; justify-content:center; gap:10px; margin-top:20px; }
.testi-dots span{ width:7px; height:7px; border-radius:50%; background: var(--hairline); cursor:pointer; transition: background .3s ease; }
.testi-dots span.active{ background: var(--brass); }

/* =========================================================
   Process
========================================================= */
.process-list{ display:flex; flex-direction:column; }
.process-item{ display:flex; gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--hairline-dark); align-items:baseline; }
.process-item:first-child{ border-top: 1px solid var(--hairline-dark); }
.process-no{ font-family: var(--serif); font-size:1.6rem; color: var(--brass-light); flex-shrink:0; width:50px; }
.process-item h3{ font-family: var(--serif); font-size:1.25rem; color: var(--ivory); margin-bottom:6px; }
.process-item p{ color: rgba(239,232,216,0.65); max-width:520px; }
@media (max-width:600px){ .process-item{ gap:18px; } }

/* =========================================================
   Awards
========================================================= */
.section-awards{ padding: 70px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.awards-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: 14px 40px; margin-top: 26px; }
.awards-row span{ font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; color: var(--ink-soft); position:relative; }

/* =========================================================
   FAQ
========================================================= */
.faq-item{ border-bottom: 1px solid var(--hairline); }
.faq-item:first-child{ border-top: 1px solid var(--hairline); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding: 24px 0; font-family: var(--serif); font-size:1.1rem; text-align:left;
}
.faq-icon{ font-size:1.3rem; color: var(--brass); transition: transform .35s var(--ease); flex-shrink:0; margin-left:16px; }
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease); }
.faq-a p{ padding-bottom: 24px; color: var(--ink-soft); max-width: 620px; }

/* =========================================================
   Contact
========================================================= */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap: 70px; }
.contact-info h2{ font-family:var(--serif); font-size:clamp(2rem,3.6vw,2.8rem); margin: 10px 0 18px; }
.contact-details{ margin-top: 34px; display:flex; flex-direction:column; gap:16px; }
.contact-details li{ font-size:0.98rem; }
.contact-details li span{ display:block; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--brass); margin-bottom:4px; }
.social-row{ display:flex; gap:16px; margin-top:32px; }
.social-row a{ width:38px; height:38px; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-size:0.7rem; transition: background .3s ease, color .3s ease; }
.social-row a:hover{ background: var(--brass); color:var(--ivory); }

.contact-form{ background: var(--ivory); border:1px solid var(--hairline); padding: 40px; }
.form-row{ display:flex; gap:20px; }
.form-field{ flex:1; margin-bottom: 20px; }
.form-field label{ display:block; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:8px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:none; border-bottom: 1px solid var(--hairline); background:transparent;
  padding: 10px 2px; font-family: var(--sans); font-size:0.98rem; color:var(--ink); outline:none;
  transition: border-color .3s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--brass); }
.form-submit{ margin-top: 8px; }
.form-note{ margin-top:16px; font-size:0.85rem; color: var(--brass); min-height:1.2em; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ flex-direction:column; gap:0; } }

/* =========================================================
   Footer
========================================================= */
.footer{ background: var(--charcoal); color: rgba(239,232,216,0.75); padding-top: 90px; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 60px; border-bottom: 1px solid var(--hairline-dark); }
.footer-brand p{ margin: 20px 0 26px; max-width: 340px; font-size:0.92rem; }
.newsletter{ display:flex; border-bottom: 1px solid var(--hairline-dark); max-width:340px; }
.newsletter input{ flex:1; background:none; border:none; padding:10px 0; color:var(--ivory); font-family:var(--sans); outline:none; }
.newsletter button{ font-size:1.1rem; color: var(--brass-light); }
.footer-col h4{ font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--ivory); margin-bottom:20px; }
.footer-col a{ display:block; font-size:0.92rem; margin-bottom:12px; color: rgba(239,232,216,0.68); transition: color .3s ease; }
.footer-col a:hover{ color: var(--brass-light); }
.footer-bottom{ display:flex; justify-content:space-between; padding: 26px 0; font-size:0.76rem; opacity:0.55; flex-wrap:wrap; gap:8px; }

@media (max-width:900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   Back to top
========================================================= */
.back-to-top{
  position:fixed; right: 26px; bottom: 26px; z-index: 300;
  width: 48px; height:48px; border-radius:50%;
  background: var(--charcoal); color: var(--ivory);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(12px); pointer-events:none;
  transition: opacity .35s ease, transform .35s ease;
}
.back-to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top svg{ width:18px; height:18px; }
@media (max-width:980px){ .back-to-top{ right:16px; bottom:16px; } }