/* =========================================================
   SUVARNA GOLD HOUSE — stylesheet
   Design tokens
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,600&family=Jost:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,500;1,500&display=swap');

:root{
  /* colour — strict 3-colour system: navy, gold, white */
  --obsidian:      #041927;
  --obsidian-2:    #0b2c42;
  --obsidian-3:    #123350;
  --gold:          #c9a227;
  --gold-dark:     #96771b;
  --gold-light:    #e3c363;
  --gold-pale:     #f2e2ad;
  --white:         #ffffff;
  --cream:         #f8f4ea;
  --cream-2:       #f2ecdb;
  --line:          rgba(201,162,39,.28);
  --line-dark:     rgba(4,25,39,.12);

  /* metallic gradients — built only from the palette above */
  --gold-metal: linear-gradient(115deg, var(--gold-dark) 0%, var(--gold) 22%, var(--gold-light) 45%, var(--gold-pale) 52%, var(--gold) 68%, var(--gold-dark) 100%);
  --gold-metal-soft: linear-gradient(145deg, var(--gold) 0%, var(--gold-light) 55%, var(--gold) 100%);
  --navy-depth: linear-gradient(180deg, var(--obsidian) 0%, var(--obsidian-3) 100%);

  /* premium shadow scale */
  --shadow-sm: 0 8px 20px -12px rgba(4,25,39,.35);
  --shadow-md: 0 20px 40px -20px rgba(4,25,39,.45);
  --shadow-lg: 0 30px 60px -22px rgba(4,25,39,.5);
  --shadow-gold: 0 14px 32px -12px rgba(201,162,39,.45);

  /* type */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body:    'Jost', Arial, sans-serif;
  --f-eyebrow: 'Cormorant Garamond', Georgia, serif;

  /* layout */
  --maxw: 1180px;
  --nav-h: 84px;
  --radius: 2px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--obsidian);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;font-weight:700;color:var(--obsidian);letter-spacing:-.01em;}
p{margin:0 0 1em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
::selection{background:var(--gold);color:var(--obsidian);}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

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

/* =========================================================
   Eyebrow / labels
   ========================================================= */
.eyebrow{
  font-family:var(--f-eyebrow);
  font-style:italic;
  font-size:1.15rem;
  letter-spacing:.04em;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:34px;height:1px;
  background:var(--gold);
}

/* =========================================================
   Signature ornament — filigree divider
   ========================================================= */
.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--gold);
  margin:0 auto;
  width:100%;
  max-width:320px;
}
.ornament svg{flex:0 0 auto;}
.ornament .rule{
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity:.7;
}
.ornament.on-dark{color:var(--gold-dark);}

.corner-frame{
  position:relative;
}
.corner-frame::before,
.corner-frame::after{
  content:"";
  position:absolute;
  width:26px;height:26px;
  border:1px solid var(--gold);
  opacity:.55;
}
.corner-frame::before{top:-10px;left:-10px;border-right:none;border-bottom:none;}
.corner-frame::after{bottom:-10px;right:-10px;border-left:none;border-top:none;}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  font-family:var(--f-body);
  font-weight:500;
  font-size:.86rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all .35s var(--ease);
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
}
.btn-gold{
  background:var(--gold-metal-soft);
  color:var(--obsidian);
  border-color:var(--gold);
  box-shadow:var(--shadow-gold);
}
.btn-gold::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform:translateX(-140%);
  transition:transform .6s var(--ease);
}
.btn-gold:hover::before{transform:translateX(140%);}
.btn-gold:hover{
  border-color:var(--gold-light);
  transform:translateY(-2px);
  box-shadow:0 16px 34px -10px rgba(201,162,39,.6);
}
.btn-outline{
  background:transparent;
  color:var(--obsidian);
  border-color:rgba(4,25,39,.4);
}
.btn-outline:hover{
  border-color:var(--gold-dark);
  color:var(--gold-dark);
  transform:translateY(-2px);
}
.btn-outline.dark{
  color:var(--obsidian);
  border-color:rgba(4,25,39,.4);
}
.btn-outline.dark:hover{
  border-color:var(--gold);
  color:var(--gold);
}
.btn-outline.on-dark{
  color:var(--white);
  border-color:rgba(255,255,255,.45);
}
.btn-outline.on-dark:hover{
  border-color:var(--gold-light);
  color:var(--gold-light);
}

/* =========================================================
   Navbar
   ========================================================= */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:#041927;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,162,39,.28);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-inner{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.5rem;
  color:var(--white);
  letter-spacing:.02em;
}
.brand-logo{
  height:44px;
  width:44px;
  object-fit:contain;
  flex-shrink:0;
}
.brand .mark{color:var(--gold-light);}
.brand .tag{
  font-family:var(--f-eyebrow);
  font-style:italic;
  font-size:.85rem;
  color:rgba(255,255,255,.6);
  font-weight:400;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:40px;
}
.nav-links a{
  position:relative;
  color:rgba(255,255,255,.78);
  font-size:.86rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:8px 0;
  transition:color .25s;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--gold-light);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover,
.nav-links a.active{color:var(--gold-light);}
.nav-links a.active::after,
.nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{margin-left:8px;}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle span{
  width:24px;height:1px;
  background:var(--white);
  transition:all .3s var(--ease);
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(100deg, rgba(4,25,39,.72) 0%, rgba(4,25,39,.42) 45%, rgba(4,25,39,.18) 75%),
    url('../images/hero-bg.jpg');
  background-size:cover;
  background-position:center;
  overflow:hidden;
  padding-top:var(--nav-h);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:80px 32px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:center;
}
.hero h1{
  color:var(--white);
  font-size:clamp(2.6rem, 4.6vw, 4.3rem);
  line-height:1.06;
  letter-spacing:-.01em;
}
.hero h1 em{
  font-style:italic;
  color:var(--gold-light);
}
.hero-lede{
  color:rgba(255,255,255,.82);
  font-size:1.08rem;
  max-width:46ch;
  margin:22px 0 34px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-badge{
  position:absolute;
  bottom:6%;
  left:-6%;
  background:var(--white);
  color:var(--obsidian);
  padding:18px 22px;
  border-radius:var(--radius);
  border:1px solid rgba(201,162,39,.35);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(201,162,39,.08);
  display:flex;
  align-items:center;
  gap:14px;
  min-width:210px;
}
.hero-badge strong{
  font-family:var(--f-display);
  font-size:1.6rem;
  display:block;
  color:var(--gold-dark);
}
.hero-badge span{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--obsidian);
  opacity:.75;
}

.scroll-cue{
  position:absolute;
  bottom:28px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(4,25,39,.5);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  z-index:2;
}
.scroll-cue .stem{
  width:1px;height:34px;
  background:linear-gradient(var(--gold), transparent);
  animation:stemPulse 2.2s ease-in-out infinite;
}
@keyframes stemPulse{
  0%,100%{opacity:.3;}
  50%{opacity:1;}
}

/* =========================================================
   Section basics
   ========================================================= */
.section{padding:110px 0;}
.section-tight{padding:80px 0;}
.section.on-obsidian{
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  color:var(--obsidian);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section.on-obsidian h2,
.section.on-obsidian h3{color:var(--obsidian);}
.section.on-obsidian.values-section{
  background:
    linear-gradient(180deg, rgba(4,25,39,.82), rgba(4,25,39,.88)),
    url("../images/values-bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.section.on-obsidian.values-section h2,
.section.on-obsidian.values-section h3{color:var(--white);}
.section.on-obsidian.values-section .section-head p{color:rgba(255,255,255,.7);}
.section.on-white{background:var(--white);}
.section-head{
  max-width:640px;
  margin:0 0 56px;
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{
  font-size:clamp(1.9rem, 3vw, 2.7rem);
  line-height:1.15;
}
.section-head p{
  color:rgba(4,25,39,.68);
  font-size:1.03rem;
  margin-top:16px;
}
.section.on-obsidian .section-head p{color:rgba(4,25,39,.68);}

/* =========================================================
   Trust strip
   ========================================================= */
.trust-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(201,162,39,.35);
  border-bottom:1px solid rgba(201,162,39,.35);
}
.trust-item{
  padding:36px 28px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  border-left:1px solid rgba(201,162,39,.2);
}
.trust-item:first-child{border-left:none;}
.trust-item svg{flex:0 0 auto;color:var(--gold);margin-top:2px;}
.trust-item h4{font-size:1rem;color:var(--obsidian);margin-bottom:4px;font-family:var(--f-body);font-weight:600;letter-spacing:.02em;}
.trust-item p{font-size:.85rem;color:rgba(4,25,39,.6);margin:0;}

/* =========================================================
   Cards — collections / services
   ========================================================= */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.card{
  background:var(--white);
  border:1px solid rgba(4,25,39,.1);
  padding:38px 32px;
  border-radius:var(--radius);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  position:relative;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.card .icon-wrap{
  width:56px;height:56px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-metal-soft);
  color:var(--obsidian);
  box-shadow:0 10px 22px -10px rgba(201,162,39,.6), inset 0 1px 1px rgba(255,255,255,.5);
  margin-bottom:22px;
}
.card h3{font-size:1.22rem;margin-bottom:10px;}
.card p{color:rgba(4,25,39,.68);font-size:.94rem;margin-bottom:0;}
.card .num{
  position:absolute;
  top:28px;right:30px;
  font-family:var(--f-display);
  font-style:italic;
  font-size:.85rem;
  color:rgba(201,162,39,.55);
}

.collection-card{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:28px;
  background:var(--navy-depth);
  border:1px solid rgba(201,162,39,.18);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  isolation:isolate;
}
.collection-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(201,162,39,.4);
}
.collection-card::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(4,25,39,.15) 0%, rgba(4,25,39,.35) 55%, rgba(4,25,39,.92) 100%);
  z-index:0;
}
.collection-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
  transition:transform .6s var(--ease);
}
.collection-card:hover img{
  transform:scale(1.06);
}
.collection-card .label{
  position:relative;
  z-index:1;
  color:var(--white);
}
.collection-card .label .eyebrow{color:var(--gold-light);margin-bottom:6px;font-size:1rem;}
.collection-card .label .eyebrow::before{display:none;}
.collection-card h3{color:var(--white);font-size:1.3rem;}

/* =========================================================
   Stats
   ========================================================= */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
}
.stat strong{
  display:block;
  font-family:var(--f-display);
  font-size:2.6rem;
  color:var(--gold);
}
.stat span{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(4,25,39,.6);
}

/* =========================================================
   Timeline (About)
   ========================================================= */
.timeline{
  position:relative;
  margin-top:20px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:26px;top:0;bottom:0;
  width:1px;
  background:linear-gradient(var(--gold), rgba(201,162,39,.15));
}
.timeline-item{
  position:relative;
  padding:0 0 46px 70px;
}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item .yr{
  position:absolute;
  left:0;top:0;
  width:52px;height:52px;
  border-radius:50%;
  background:var(--navy-depth);
  color:var(--gold-light);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);
  font-size:.78rem;
  border:1px solid var(--gold);
  box-shadow:var(--shadow-sm), 0 0 0 4px rgba(201,162,39,.08);
}
.timeline-item h4{font-size:1.15rem;margin-bottom:6px;}
.timeline-item p{color:rgba(4,25,39,.68);font-size:.94rem;max-width:60ch;}

/* =========================================================
   Values grid (About)
   ========================================================= */
.values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.value-item{
  background:var(--obsidian);
  padding:40px 32px;
  border:1px solid rgba(201,162,39,.3);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
.value-item svg{color:var(--gold);margin-bottom:18px;}
.value-item h4{color:var(--white);font-size:1.1rem;margin-bottom:8px;}
.value-item p{color:rgba(255,255,255,.6);font-size:.9rem;margin:0;}

/* =========================================================
   Founder / split section
   ========================================================= */
.split{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:64px;
  align-items:center;
}
.split-media{
  position:relative;
  aspect-ratio:3/4;
  background:linear-gradient(150deg, var(--gold) 0%, var(--gold-dark) 22%, var(--obsidian-3) 55%, var(--obsidian) 100%);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.split-media svg{width:58%;color:var(--gold-light);opacity:.92;}
.split-media img{width:100%;height:100%;object-fit:cover;display:block;}
.split-media::after{
  content:"";
  position:absolute;inset:14px;
  border:1px solid rgba(232,199,102,.4);
}
.split h2{margin-bottom:20px;}
.split p{color:rgba(4,25,39,.7);}
.section.on-obsidian .split p{color:rgba(4,25,39,.7);}
.signature{
  margin-top:26px;
  font-family:var(--f-eyebrow);
  font-style:italic;
  font-size:1.3rem;
  color:var(--gold);
}
.signature span{
  display:block;
  font-family:var(--f-body);
  font-style:normal;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(4,25,39,.55);
  margin-top:4px;
}

/* =========================================================
   Testimonial
   ========================================================= */
.testimonial{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.testimonial blockquote{
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  line-height:1.5;
  color:var(--obsidian);
  margin:0 0 26px;
}
.testimonial cite{
  font-style:normal;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-light);
}

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{
  background:linear-gradient(120deg, var(--obsidian) 0%, var(--obsidian-3) 45%, var(--gold-dark) 100%);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:64px 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  color:var(--white);
}
.cta-band h3{color:var(--white);font-size:1.8rem;max-width:26ch;}
.cta-band p{color:rgba(255,255,255,.75);margin-top:10px;}

/* =========================================================
   Services page extras
   ========================================================= */
.process-list{counter-reset:step;}
.process-item{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:24px;
  padding:30px 0;
  border-top:1px solid rgba(4,25,39,.12);
}
.process-item:last-child{border-bottom:1px solid rgba(4,25,39,.12);}
.process-item .step-num{
  counter-increment:step;
  font-family:var(--f-display);
  font-size:1.6rem;
  color:var(--gold);
}
.process-item .step-num::before{content:"0" counter(step);}
.process-item h4{font-size:1.15rem;margin-bottom:8px;}
.process-item p{color:rgba(4,25,39,.68);margin:0;max-width:65ch;}

.rate-table{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
}
.rate-table th,.rate-table td{
  text-align:left;
  padding:18px 20px;
  border-bottom:1px solid rgba(4,25,39,.12);
}
.rate-table thead tr{background:var(--obsidian);}
.rate-table th{
  font-family:var(--f-body);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:500;
  border-bottom:1px solid var(--gold);
}
.rate-table tbody tr:nth-child(even){background:rgba(201,162,39,.05);}
.rate-table tbody tr:hover{background:rgba(201,162,39,.1);}
.rate-table td strong{color:var(--gold-dark);font-family:var(--f-display);font-size:1.1rem;}
.rate-note{font-size:.82rem;color:rgba(4,25,39,.55);margin-top:14px;}

/* =========================================================
   Contact page
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:0;
  border:1px solid rgba(4,25,39,.12);
  border-radius:var(--radius);
  overflow:hidden;
}
.contact-info{
  background:var(--cream);
  color:var(--obsidian);
  padding:56px 48px;
  border-right:1px solid var(--line-dark);
}
.contact-info h3{color:var(--obsidian);margin-bottom:6px;}
.contact-info .eyebrow{color:var(--gold-dark);}
.contact-block{
  display:flex;
  gap:16px;
  padding:22px 0;
  border-top:1px solid rgba(201,162,39,.28);
}
.contact-block:first-of-type{border-top:none;margin-top:12px;}
.contact-block svg{flex:0 0 auto;color:var(--gold-dark);margin-top:3px;}
.contact-block h5{
  font-family:var(--f-body);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(4,25,39,.55);
  margin:0 0 6px;
}
.contact-block p{margin:0;font-size:.98rem;color:var(--obsidian);}
.contact-block a:hover{color:var(--gold-dark);}
.social-row{
  display:flex;
  gap:12px;
  margin-top:30px;
}
.social-row a{
  width:38px;height:38px;
  border:1px solid rgba(201,162,39,.5);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-dark);
  transition:all .3s;
}
.social-row a:hover{background:var(--gold);color:var(--white);}

.map-wrap{
  position:relative;
  min-height:420px;
}
.map-wrap iframe{
  width:100%;height:100%;
  min-height:420px;
  border:0;
  filter:grayscale(.25) contrast(1.05);
}

.hours-card{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(201,162,39,.2);
}
.hours-row{
  display:flex;
  justify-content:space-between;
  font-size:.9rem;
  padding:6px 0;
  color:rgba(4,25,39,.72);
}
.hours-row span:last-child{color:var(--gold-dark);font-weight:600;}

/* =========================================================
   FAQ (contact page)
   ========================================================= */
.faq-item{
  border-bottom:1px solid rgba(4,25,39,.12);
}
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 4px;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  font-family:var(--f-display);
  font-size:1.05rem;
  color:var(--obsidian);
}
.faq-q .plus{
  flex:0 0 auto;
  width:22px;height:22px;
  position:relative;
  color:var(--gold);
}
.faq-q .plus::before,.faq-q .plus::after{
  content:"";
  position:absolute;
  background:currentColor;
  transition:transform .3s var(--ease);
}
.faq-q .plus::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%);}
.faq-q .plus::after{top:0;left:50%;width:1px;height:100%;transform:translateX(-50%);}
.faq-item.open .faq-q .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.faq-a p{
  padding:0 4px 22px;
  color:rgba(4,25,39,.68);
  font-size:.95rem;
  max-width:65ch;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--obsidian);
  color:rgba(255,255,255,.6);
  padding:70px 0 30px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(201,162,39,.18);
}
.footer-brand .brand{margin-bottom:16px;}
.footer-brand p{font-size:.9rem;max-width:32ch;color:rgba(255,255,255,.55);}
.footer-col h5{
  color:var(--gold-light);
  font-family:var(--f-body);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.footer-col ul li{margin-bottom:12px;}
.footer-col a{font-size:.9rem;color:rgba(255,255,255,.65);}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:26px;
  font-size:.8rem;
  flex-wrap:wrap;
  gap:12px;
  color:rgba(255,255,255,.4);
}

/* =========================================================
   Page banner (About / Services / Contact)
   ========================================================= */
.page-banner{
  position:relative;
  padding:calc(var(--nav-h) + 78px) 0 70px;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(201,162,39,.18), transparent 55%),
    linear-gradient(180deg, rgba(4,25,39,.72), rgba(4,25,39,.82)),
    url("../images/services-banner.jpg");
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  color:var(--white);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-banner .eyebrow{color:var(--gold);}
.page-banner h1{
  color:var(--white);
  font-size:clamp(2.2rem,4vw,3.3rem);
  max-width:16ch;
}
.page-banner .crumbs{
  margin-top:18px;
  font-size:.8rem;
  letter-spacing:.05em;
  color:rgba(255,255,255,.75);
  text-transform:uppercase;
}
.page-banner .crumbs a{color:rgba(255,255,255,.9);}
.page-banner .crumbs a:hover{color:var(--gold);}

/* About page — dedicated banner image */
.page-banner.about-banner{
  background:
    radial-gradient(ellipse at 85% 0%, rgba(201,162,39,.18), transparent 55%),
    linear-gradient(180deg, rgba(4,25,39,.72), rgba(4,25,39,.82)),
    url("../images/about-banner.jpg");
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;
}

/* Services page — dedicated banner image */
.page-banner.services-banner{
  background:
    radial-gradient(ellipse at 85% 0%, rgba(201,162,39,.18), transparent 55%),
    linear-gradient(180deg, rgba(4,25,39,.72), rgba(4,25,39,.82)),
    url("../images/services-hero-banner.jpg");
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
}

/* Contact page — dedicated banner image */
.page-banner.contact-banner{
  background:
    radial-gradient(ellipse at 85% 0%, rgba(201,162,39,.18), transparent 55%),
    linear-gradient(180deg, rgba(4,25,39,.72), rgba(4,25,39,.82)),
    url("../images/contact-hero-banner.jpg");
  background-size:cover;
  background-position:center 35%;
  background-repeat:no-repeat;
}

/* Terms & Conditions page — dedicated banner image */
.page-banner.terms-banner{
  background:
    radial-gradient(ellipse at 85% 0%, rgba(201,162,39,.18), transparent 55%),
    linear-gradient(180deg, rgba(4,25,39,.72), rgba(4,25,39,.82)),
    url("../images/terms-banner.jpg");
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
}

/* =========================================================
   Legal banner — clean, image-free header
   Used by Terms & Conditions, Privacy Policy, and
   Return & Refund Policy pages instead of a photo banner.
   ========================================================= */
.page-banner.legal-banner{
  background:
    radial-gradient(ellipse at 88% 0%, rgba(201,162,39,.22), transparent 58%),
    radial-gradient(ellipse at 10% 100%, rgba(201,162,39,.1), transparent 50%),
    linear-gradient(135deg, var(--obsidian) 0%, var(--obsidian-3) 55%, var(--obsidian-2) 100%);
  animation:none;
  padding:calc(var(--nav-h) + 64px) 0 56px;
}
.page-banner.legal-banner .eyebrow{color:var(--gold-light);}
.page-banner.legal-banner h1{max-width:20ch;font-size:clamp(2rem,3.6vw,2.9rem);}
.page-banner.legal-banner .legal-updated-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  border:1px solid rgba(201,162,39,.4);
  border-radius:30px;
  padding:7px 16px;
  margin-top:20px;
  background:rgba(255,255,255,.05);
}
.page-banner.legal-banner .legal-updated-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}

/* =========================================================
   Reveal-on-scroll
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0);}

/* =========================================================
   Legal / Terms page
   ========================================================= */
.legal-shell{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:56px;
  align-items:start;
}
.legal-toc{
  position:sticky;
  top:calc(var(--nav-h) + 32px);
  border:1px solid rgba(4,25,39,.12);
  border-radius:var(--radius);
  padding:26px 24px;
  background:var(--white);
  box-shadow:var(--shadow-sm);
  max-height:calc(100vh - var(--nav-h) - 64px);
  overflow-y:auto;
}
.legal-toc h5{
  font-family:var(--f-body);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin:0 0 16px;
}
.legal-toc ol{
  list-style:none;
  margin:0;padding:0;
  counter-reset:toc;
}
.legal-toc li{counter-increment:toc;margin-bottom:10px;}
.legal-toc a{
  display:flex;
  gap:10px;
  font-size:.84rem;
  line-height:1.4;
  color:rgba(4,25,39,.65);
  transition:color .2s;
}
.legal-toc a::before{
  content:counter(toc);
  flex:0 0 auto;
  font-family:var(--f-display);
  font-size:.72rem;
  color:var(--gold);
}
.legal-toc a:hover{color:var(--gold-dark);}

.legal-updated{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(4,25,39,.62);
  border:1px solid rgba(201,162,39,.45);
  border-radius:30px;
  padding:7px 16px;
  margin-top:22px;
  background:rgba(255,255,255,.6);
}
.legal-updated .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}

.legal-content{max-width:74ch;}
.legal-intro{
  font-size:1.02rem;
  color:rgba(4,25,39,.72);
  padding-bottom:36px;
  margin-bottom:44px;
  border-bottom:1px solid rgba(4,25,39,.1);
}
.legal-section{
  padding:34px 0;
  border-bottom:1px solid rgba(4,25,39,.1);
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.legal-section:last-child{border-bottom:none;}
.legal-section h2{
  display:flex;
  align-items:baseline;
  gap:14px;
  font-size:1.36rem;
  margin-bottom:16px;
}
.legal-section h2 .legal-num{
  font-family:var(--f-eyebrow);
  font-style:italic;
  color:var(--gold);
  font-size:1.1rem;
  flex:0 0 auto;
}
.legal-section h3{
  font-size:1.02rem;
  margin:20px 0 10px;
  color:var(--obsidian);
}
.legal-section p{
  color:rgba(4,25,39,.72);
  font-size:.96rem;
  margin-bottom:14px;
}
.legal-section ul,.legal-section ol.legal-list{
  margin:0 0 16px;
  padding-left:0;
}
.legal-section ul li,.legal-section ol.legal-list li{
  position:relative;
  list-style:none;
  padding-left:22px;
  margin-bottom:9px;
  font-size:.96rem;
  color:rgba(4,25,39,.72);
}
.legal-section ul li::before{
  content:"";
  position:absolute;left:0;top:.65em;
  width:6px;height:1px;
  background:var(--gold);
}
.legal-section ol.legal-list{counter-reset:leg;}
.legal-section ol.legal-list li{counter-increment:leg;padding-left:26px;}
.legal-section ol.legal-list li::before{
  content:counter(leg)".";
  width:auto;height:auto;background:none;
  font-family:var(--f-body);font-weight:600;color:var(--gold-dark);font-size:.86rem;
  top:0;
}
.legal-contact-card{
  background:var(--obsidian);
  color:var(--white);
  border-radius:var(--radius);
  padding:32px 34px;
  margin-top:8px;
}
.legal-contact-card p{color:rgba(255,255,255,.75);margin-bottom:6px;font-size:.92rem;}
.legal-contact-card strong{color:var(--gold-light);font-family:var(--f-body);}
.legal-placeholder{
  color:var(--gold-dark);
  background:rgba(201,162,39,.12);
  padding:1px 6px;
  border-radius:3px;
  font-size:.86em;
}
.legal-jump-top{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:40px;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-dark);
}
.legal-jump-top:hover{color:var(--gold);}

@media (max-width:900px){
  .legal-shell{grid-template-columns:1fr;}
  .legal-toc{position:relative;top:0;max-height:none;}
}

/* =========================================================
   Our Establishment — points list
   ========================================================= */
.establishment-lede{
  font-weight:500;
  color:var(--obsidian);
  margin-bottom:14px;
}
.establishment-points{margin:0;padding:0;}
.establishment-points li{
  position:relative;
  list-style:none;
  padding-left:24px;
  margin-bottom:11px;
  font-size:.98rem;
  line-height:1.55;
  color:rgba(4,25,39,.75);
}
.establishment-points li::before{
  content:"";
  position:absolute;left:0;top:.68em;
  width:8px;height:1px;
  background:var(--gold);
}

/* =========================================================
   Small global polish
   ========================================================= */
.footer-bottom a{color:rgba(255,255,255,.55);}
.footer-bottom a:hover{color:var(--gold-light);text-decoration:underline;}
.footer-bottom .sep{opacity:.4;margin:0 2px;}
.footer-legal{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  row-gap:6px;
}
.footer-legal .sep{opacity:.4;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{order:-1;max-height:340px;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .trust-strip{grid-template-columns:repeat(2,1fr);}
  .trust-item:nth-child(3){border-left:none;}
  .split{grid-template-columns:1fr;}
  .split-media{max-width:340px;margin:0 auto;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .values{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);gap:36px;}
}
@media (max-width:760px){
  .nav-links{
    position:fixed;
    top:var(--nav-h);left:0;right:0;
    background:#041927;
    flex-direction:column;
    align-items:flex-start;
    padding:26px 32px 34px;
    gap:22px;
    border-bottom:1px solid rgba(201,162,39,.28);
    box-shadow:var(--shadow-md);
    transform:translateY(-110%);
    opacity:0;
    transition:transform .35s var(--ease), opacity .3s;
    pointer-events:none;
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-toggle{display:flex;}
  .nav-cta{margin-left:0;}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .section{padding:76px 0;}
  .cta-band{flex-direction:column;text-align:center;padding:48px 30px;}
  .process-item{grid-template-columns:1fr;gap:8px;}
  .footer-top{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
}

/* =========================================================
   ENHANCEMENT LAYER — motion, depth & micro-interactions
   (Navbar & footer intentionally untouched)
   ========================================================= */

/* ---------- Keyframes ---------- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@keyframes kenburns{
  0%{background-size:112% auto;background-position:50% 42%;}
  100%{background-size:122% auto;background-position:44% 36%;}
}
@keyframes shimmerSweep{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}
@keyframes goldPulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.35), var(--shadow-lg);}
  50%{box-shadow:0 0 0 10px rgba(201,162,39,0), var(--shadow-lg);}
}
@keyframes spinSlow{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes drawLine{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}
@keyframes sparkle{
  0%,100%{opacity:.35;transform:scale(.85);}
  50%{opacity:1;transform:scale(1.15);}
}
@keyframes underlineGrow{
  from{width:0;}
  to{width:34px;}
}

/* ---------- Hero: staggered entrance + living background ---------- */
.hero{
  animation:kenburns 22s ease-in-out infinite alternate;
}
.hero-copy > .eyebrow{
  opacity:0;
  animation:fadeUp .8s var(--ease) .15s forwards;
}
.hero-copy > h1{
  opacity:0;
  animation:fadeUp .9s var(--ease) .32s forwards;
}
.hero-copy > .hero-lede{
  opacity:0;
  animation:fadeUp .9s var(--ease) .5s forwards;
}
.hero-copy > .hero-actions{
  opacity:0;
  animation:fadeUp .9s var(--ease) .68s forwards;
}
.hero h1 em{
  background:linear-gradient(100deg, var(--gold-light) 0%, var(--gold-pale) 30%, var(--gold) 55%, var(--gold-light) 80%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmerSweep 5s linear infinite;
}
.hero-visual{animation:floatY 6s ease-in-out infinite;}
.hero-badge{animation:goldPulseGlow 3.4s ease-in-out infinite;}

/* Buttons — extra tactility on top of existing shine sweep */
.btn:not(.nav-cta){will-change:transform;}
.btn-gold:not(.nav-cta){animation:goldPulseGlow 3.6s ease-in-out infinite;}
.btn-gold:not(.nav-cta):hover{animation-play-state:paused;}
.btn-outline:not(.nav-cta){transition:all .3s var(--ease), letter-spacing .3s var(--ease);}
.btn-outline:not(.nav-cta):hover{letter-spacing:.16em;}
.btn:not(.nav-cta):active{transform:translateY(0) scale(.97);}

/* Eyebrow underline draws in as it enters view */
.reveal .eyebrow::before{
  width:0;
}
.reveal.in .eyebrow::before{
  animation:underlineGrow .7s var(--ease) .1s forwards;
}

/* ---------- Cards: collections / services ---------- */
.card{
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  padding:1px;
  background:linear-gradient(120deg, transparent, var(--gold-light), transparent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
.card:hover::after{opacity:1;}
.card:hover{
  transform:translateY(-9px) scale(1.012);
}
.card .icon-wrap{
  transition:transform .5s var(--ease), box-shadow .4s var(--ease);
}
.card:hover .icon-wrap{
  transform:rotate(-8deg) scale(1.1);
  box-shadow:0 14px 28px -10px rgba(201,162,39,.75), inset 0 1px 1px rgba(255,255,255,.6);
}
.card .num{transition:opacity .4s var(--ease), transform .4s var(--ease);}
.card:hover .num{opacity:.9;transform:translateY(-2px);}

/* stagger card entrances within a grid */
.grid-3 .card.reveal:nth-child(1),
.grid-3 .collection-card.reveal:nth-child(1){transition-delay:0s;}
.grid-3 .card.reveal:nth-child(2),
.grid-3 .collection-card.reveal:nth-child(2){transition-delay:.08s;}
.grid-3 .card.reveal:nth-child(3),
.grid-3 .collection-card.reveal:nth-child(3){transition-delay:.16s;}
.grid-3 .card.reveal:nth-child(4){transition-delay:.24s;}
.grid-3 .card.reveal:nth-child(5){transition-delay:.32s;}
.grid-3 .card.reveal:nth-child(6){transition-delay:.4s;}
.grid-3 .card.reveal:nth-child(7){transition-delay:.48s;}
.grid-3 .card.reveal:nth-child(8){transition-delay:.56s;}
.grid-3 .card.reveal:nth-child(9){transition-delay:.64s;}
.grid-3 .card.reveal:nth-child(10){transition-delay:.72s;}
.grid-3 .card.reveal:nth-child(11){transition-delay:.8s;}

.collections-track .collection-card.reveal:nth-child(1){transition-delay:0s;}
.collections-track .collection-card.reveal:nth-child(2){transition-delay:.08s;}
.collections-track .collection-card.reveal:nth-child(3){transition-delay:.16s;}
.collections-track .collection-card.reveal:nth-child(4){transition-delay:.24s;}
.collections-track .collection-card.reveal:nth-child(5){transition-delay:.32s;}
.collections-track .collection-card.reveal:nth-child(6){transition-delay:.4s;}
.collections-track .collection-card.reveal:nth-child(7){transition-delay:.48s;}

.collection-card{
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.collection-card::before{
  transition:background .5s var(--ease);
}
.collection-card:hover::before{
  background:linear-gradient(180deg, rgba(4,25,39,.05) 0%, rgba(4,25,39,.2) 45%, rgba(4,25,39,.88) 100%);
}
.collection-card .label{
  transform:translateY(6px);
  transition:transform .45s var(--ease);
}
.collection-card:hover .label{transform:translateY(0);}
.collection-card img{
  transition:transform .8s var(--ease), filter .5s var(--ease);
  filter:saturate(1) brightness(1);
}
.collection-card:hover img{
  transform:scale(1.1) rotate(.4deg);
  filter:saturate(1.12) brightness(1.04);
}

/* ---------- Trust strip ---------- */
.trust-item{transition:background .35s var(--ease), transform .35s var(--ease);}
.trust-item:hover{background:rgba(201,162,39,.06);transform:translateY(-3px);}
.trust-item svg{transition:transform .4s var(--ease);}
.trust-item:hover svg{transform:scale(1.15) rotate(-6deg);}

/* ---------- Values (About) ---------- */
.value-item{
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.value-item:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg), var(--shadow-gold);
  border-color:var(--gold);
}
.value-item svg{transition:transform .5s var(--ease);}
.value-item:hover svg{transform:scale(1.15) rotate(8deg);}

/* ---------- Split / establishment image ---------- */
.split-media{transition:transform .5s var(--ease), box-shadow .5s var(--ease);}
.split-media:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg), var(--shadow-gold);}
.split-media img{transition:transform .8s var(--ease);}
.split-media:hover img{transform:scale(1.06);}
.establishment-points li{transition:transform .3s var(--ease), color .3s var(--ease);}
.establishment-points li:hover{transform:translateX(6px);color:var(--obsidian);}
.establishment-points li:hover::before{width:16px;background:var(--gold-dark);transition:width .3s var(--ease);}

/* ---------- CTA band: living gradient + glow ---------- */
.cta-band{
  background-size:220% 220%;
  animation:shimmerSweep 8s ease-in-out infinite alternate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.cta-band:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg), 0 0 50px -10px rgba(201,162,39,.5);
}


/* ---------- Services: process list ---------- */
.process-item{
  transition:background .4s var(--ease), padding-left .4s var(--ease);
}
.process-item:hover{
  background:rgba(201,162,39,.05);
  padding-left:10px;
}
.process-item .step-num{
  display:inline-block;
  transition:transform .4s var(--ease), color .4s var(--ease), text-shadow .4s var(--ease);
}
.process-item:hover .step-num{
  transform:scale(1.18);
  text-shadow:0 0 18px rgba(201,162,39,.55);
}

/* ---------- Contact page ---------- */
.contact-block{transition:background .35s var(--ease), padding-left .35s var(--ease);}
.contact-block:hover{background:rgba(201,162,39,.06);padding-left:8px;}
.contact-block svg{transition:transform .4s var(--ease);}
.contact-block:hover svg{transform:scale(1.15) translateY(-2px);}
.hours-row{transition:background .25s var(--ease), padding-left .25s var(--ease);}
.hours-row:hover{background:rgba(201,162,39,.08);padding-left:6px;}
.map-wrap iframe{transition:filter .5s var(--ease);}
.map-wrap:hover iframe{filter:grayscale(0) contrast(1.02);}

/* ---------- FAQ ---------- */
.faq-q{transition:color .3s var(--ease), padding-left .3s var(--ease);}
.faq-q:hover{color:var(--gold-dark);padding-left:6px;}
.faq-q .plus{transition:transform .4s var(--ease);}
.faq-item.open .faq-q .plus{transform:rotate(180deg);}

/* ---------- Page banners: gentle living background ---------- */
.page-banner{
  animation:kenburns 26s ease-in-out infinite alternate;
}
.page-banner h1,
.page-banner .eyebrow,
.page-banner .crumbs{
  opacity:0;
  animation:fadeUp .8s var(--ease) forwards;
}
.page-banner .eyebrow{animation-delay:.1s;}
.page-banner h1{animation-delay:.24s;}
.page-banner .crumbs{animation-delay:.42s;}

/* ---------- Legal page ---------- */
.legal-section{transition:padding-left .35s var(--ease);}
.legal-section:hover{padding-left:6px;}
.legal-contact-card{transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.legal-contact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}

/* ---------- Ornament shimmer ---------- */
.ornament svg{animation:sparkle 3.2s ease-in-out infinite;}

/* ---------- Reveal refinement: subtle scale for extra polish ---------- */
.reveal{
  transform:translateY(28px) scale(.985);
}
.reveal.in{transform:translateY(0) scale(1);}

/* ---------- Collections: 3-per-view carousel ---------- */
.collections-carousel{
  position:relative;
  --gap:28px;
  --visible:3;
}
.scroll-btn{
  position:absolute;
  top:calc(50% - 13px); /* nudge above the label text for optical centering */
  transform:translateY(-50%);
  width:50px;height:50px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--obsidian);
  color:var(--gold-light);
  border:1px solid var(--gold);
  cursor:pointer;
  z-index:6;
  box-shadow:var(--shadow-md);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), opacity .3s var(--ease);
}
.scroll-btn:hover{
  background:var(--gold-metal-soft);
  color:var(--obsidian);
  transform:translateY(-50%) scale(1.08);
  box-shadow:var(--shadow-gold);
}
.scroll-btn:active{transform:translateY(-50%) scale(.94);}
.scroll-btn[disabled]{
  opacity:0;
  pointer-events:none;
}
.scroll-btn-prev{left:-25px;}
.scroll-btn-next{right:-25px;}
@media (max-width:1260px){
  .scroll-btn-prev{left:8px;}
  .scroll-btn-next{right:8px;}
}

.collections-viewport{
  overflow:hidden;
  padding:4px 2px;
}
.collections-track{
  display:flex;
  gap:var(--gap);
  transition:transform .55s var(--ease);
  will-change:transform;
  cursor:grab;
  touch-action:pan-y;
}
.collections-track:active{cursor:grabbing;}
.collections-track .collection-card{
  flex:0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
}
@media (max-width:900px){
  .collections-carousel{--visible:2;}
}
@media (max-width:640px){
  .collections-carousel{--visible:1;}
  .scroll-btn{display:none;}
}

.carousel-dots{
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:30px;
}
.carousel-dots button{
  width:8px;height:8px;
  border-radius:50%;
  padding:0;
  border:1px solid var(--gold);
  background:transparent;
  cursor:pointer;
  transition:all .3s var(--ease);
}
.carousel-dots button.active{
  background:var(--gold);
  width:22px;
  border-radius:5px;
}

/* ---------- Legacy card (home page) ---------- */
.legacy-card{
  max-width:820px;
  margin:0 auto;
  text-align:center;
  padding:64px 60px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.legacy-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg), var(--shadow-gold);
  border-color:var(--gold);
}
.legacy-card .ornament{margin-bottom:18px;}
.legacy-card .ornament svg{color:var(--gold);animation:sparkle 3.2s ease-in-out infinite;}
.legacy-card .eyebrow{margin-bottom:10px;}
.legacy-card .eyebrow::before{display:none;}
.legacy-text{
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(1.18rem, 2vw, 1.55rem);
  line-height:1.65;
  color:var(--obsidian);
  margin:0;
}
@media (max-width:640px){
  .legacy-card{padding:48px 28px;}
}

/* ---------- Reduced motion overrides for the new layer ---------- */
@media (prefers-reduced-motion: reduce){
  .hero,.page-banner,.hero-visual,.hero-badge,.btn-gold,.cta-band,.ornament svg{animation:none !important;}
  .hero-copy > *{opacity:1 !important;animation:none !important;}
  .page-banner h1,.page-banner .eyebrow,.page-banner .crumbs{opacity:1 !important;animation:none !important;}
}
/* =========================================================
   MOBILE PERFECTION LAYER
   Fixes: image overflow, oversized fixed heights, cramped
   navbar, huge padding eating screen space on small phones.
   Loaded last so it wins the cascade without !important.
   ========================================================= */

/* ---------- Global safety net ---------- */
html{
  overflow-x:hidden;
  width:100%;
}
body{
  overflow-x:hidden;
  width:100%;
}
img,svg,video,iframe,picture{
  max-width:100%;
  height:auto;
}
/* elements that intentionally set their own height (maps, cover images,
   fixed icons) opt back out of the height:auto rule above */
.collection-card img,
.split-media img,
.brand-logo,
.map-wrap iframe{
  height:100%;
}
.brand-logo{height:44px;width:44px;}

/* ---------- Tablets & small laptops ---------- */
@media (max-width:900px){
  .container{padding:0 24px;}
  .nav-inner{padding:0 20px;}
}

/* ---------- Phones ---------- */
@media (max-width:640px){
  :root{--nav-h:72px;}

  .container{padding:0 18px;}
  .nav-inner{padding:0 16px;}

  /* Brand lockup: keep logo crisp, shrink text so it never wraps
     onto the toggle button or forces horizontal scroll */
  .brand{gap:8px;font-size:1.05rem;}
  .brand-logo{height:34px;width:34px;}
  .brand .tag{display:none;}

  .nav-links{padding:22px 20px 28px;gap:18px;}

  /* Hero */
  .hero{min-height:auto;padding-top:var(--nav-h);}
  .hero-inner{padding:56px 18px;gap:28px;}
  .hero h1{font-size:clamp(2rem,8vw,2.6rem);}
  .hero-lede{font-size:1rem;max-width:none;}
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px;}
  .hero-actions .btn{justify-content:center;width:100%;}

  /* Section spacing */
  .section{padding:56px 0;}
  .section-tight{padding:40px 0;}

  /* Cards & grids */
  .grid-3,.grid-2{gap:18px;}
  .card{padding:28px 22px;}
  .value-item{padding:30px 22px;}

  /* Collections carousel: full-bleed single card, image-safe */
  .collections-carousel{--gap:16px;}
  .collection-card{padding:20px;}

  /* Founder / establishment image */
  .split{gap:28px;}
  .split-media{max-width:100%;aspect-ratio:4/3;}

  /* Legacy quote card */
  .legacy-card{padding:36px 20px;}
  .legacy-text{font-size:1.05rem;}

  /* CTA band */
  .cta-band{padding:36px 20px;}

  /* Page banners */
  .page-banner{padding:calc(var(--nav-h) + 48px) 0 48px;}
  .page-banner h1{font-size:clamp(1.8rem,8vw,2.4rem);max-width:none;}

  /* Contact page */
  .contact-info{padding:32px 22px;}
  .contact-block{padding:16px 0;}
  .map-wrap,.map-wrap iframe{min-height:280px;}

  /* Legal / Terms page */
  .legal-shell{gap:28px;}
  .legal-contact-card{padding:24px 20px;}
  .legal-section{padding:24px 0;}

  /* Footer */
  .footer-top{gap:32px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px;}
  .footer-legal{gap:8px;}

  /* Legal pages */
  .page-banner.legal-banner{padding:calc(var(--nav-h) + 44px) 0 40px;}
}

/* ---------- Small phones (narrow devices, e.g. 360px and below) ---------- */
@media (max-width:380px){
  .container{padding:0 14px;}
  .nav-inner{padding:0 12px;}
  .brand{font-size:.92rem;gap:6px;}
  .brand-logo{height:30px;width:30px;}
  .hero-inner{padding:44px 14px;}
  .hero h1{font-size:1.8rem;}
  .card,.value-item{padding:22px 16px;}
  .legacy-card{padding:28px 16px;}
}