/* ============================================================
   SPM & SONS — Design tokens
   ============================================================ */
:root{
  --navy-950:#081a30;
  --navy-900:#0b2140;
  --navy-800:#123059;
  --navy-700:#1b4176;
  --gold-600:#a97e2c;
  --gold-500:#c89b3c;
  --gold-300:#e3c378;
  --gold-100:#f4e7c9;
  --maroon-700:#5c1a1f;
  --maroon-600:#7a232a;
  --maroon-400:#a94850;
  --paper:#f4ecdb;
  --paper-dim:#ece0c6;
  --ink-900:#211a13;
  --ink-600:#5e5346;
  --ink-400:#8c8071;
  --line:#ddccab;

  --serif:'Besley', Georgia, serif;
  --sans:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container:1180px;
  --edge: clamp(1.5rem, 5vw, 4.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink-900);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--serif); font-weight:700; margin:0; letter-spacing:-0.01em;}
p{margin:0;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit; background:none; border:none; cursor:pointer;}

:focus-visible{outline:2px solid var(--gold-500); outline-offset:3px;}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.025; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kicker{
  font-family:var(--sans); font-weight:700; font-size:.8rem;
  letter-spacing:.02em; color:var(--maroon-600);
  margin:0 0 .9rem;
}
.kicker-light{color:var(--gold-300);}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease), padding .3s var(--ease);
}
.header-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.35rem var(--edge);
  transition:padding .3s var(--ease);
}
.site-header.solid{
  background:rgba(8,26,48,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.site-header.solid .header-inner{padding-top:.85rem; padding-bottom:.85rem;}

.brand{display:flex; align-items:center; gap:.6rem;}
.brand-mark{height:30px; width:auto;}
.brand-word{
  font-family:var(--serif); font-weight:600; font-size:1.28rem;
  color:#fff; letter-spacing:.01em;
}
.brand-word em{font-style:normal; color:var(--gold-300);}

.nav-desktop{display:flex; align-items:center; gap:2.1rem;}
.nav-desktop a{
  font-size:.93rem; font-weight:600; color:rgba(255,255,255,.86);
  position:relative; padding:.3rem 0;
}
.nav-desktop a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--gold-300); transition:width .3s var(--ease);
}
.nav-desktop a:not(.nav-cta):hover::after{width:100%;}
.nav-cta{
  background:var(--gold-500); color:var(--navy-950) !important;
  padding:.6rem 1.15rem !important; border-radius:3px;
  font-weight:700 !important;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.nav-cta:hover{background:var(--gold-300); transform:translateY(-1px);}

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; z-index:1200; position:relative;
}
.menu-toggle span{
  width:24px; height:2px; background:#fff; transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================
   MOBILE NAV
   ============================================================ */
.nav-mobile{
  position:fixed; inset:0; z-index:1100;
  background:var(--navy-950);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--edge) 3rem;
  clip-path:circle(2% at calc(100% - 2.6rem) 2.4rem);
  transition:clip-path .55s var(--ease);
  visibility:hidden;
}
.nav-mobile.open{clip-path:circle(150% at calc(100% - 2.6rem) 2.4rem); visibility:visible;}
.nav-mobile ol{display:flex; flex-direction:column; gap:.4rem;}
.nav-mobile li{
  opacity:0; transform:translateY(14px);
}
.nav-mobile.open li{
  animation:navIn .55s var(--ease) forwards;
  animation-delay:calc(.08s + var(--i) * .06s);
}
@keyframes navIn{to{opacity:1; transform:translateY(0);}}
.nav-mobile a{
  font-family:var(--serif); font-size:2.5rem; font-weight:500;
  color:#fff; display:inline-block; padding:.32rem 0;
}
.nav-mobile-foot{
  margin-top:3rem; display:flex; justify-content:space-between;
  color:var(--gold-300); font-size:.85rem; font-weight:600;
  border-top:1px solid rgba(255,255,255,.14); padding-top:1.4rem;
}
body.nav-open{overflow:hidden;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:60% 40%;
  transform:scale(1.06);
  animation:heroZoom 16s ease-out forwards;
}
@keyframes heroZoom{to{transform:scale(1);}}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,20,38,.72) 0%, rgba(8,20,38,.35) 32%, rgba(8,20,38,.55) 68%, rgba(6,16,32,.94) 100%);
}
.hero-content{
  position:relative; z-index:1; color:#fff;
  max-width:var(--container); margin:0 auto; width:100%;
  padding:0 var(--edge) 6.5rem;
}
.hero-eyebrow{
  font-size:.85rem; font-weight:700; letter-spacing:.03em;
  color:var(--gold-300); margin:0 0 1.1rem;
}
.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 5.4rem);
  line-height:1.02; font-weight:600;
  max-width:15ch;
}
.hero-sub{
  margin:1.6rem 0 0; max-width:42ch;
  font-size:1.06rem; line-height:1.6; color:rgba(255,255,255,.82);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.9rem; font-weight:700; font-size:.92rem;
  border-radius:3px; border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn-gold{background:var(--gold-500); color:var(--navy-950);}
.btn-gold:hover{background:var(--gold-300); transform:translateY(-2px);}
.btn-ghost{border-color:rgba(255,255,255,.4); color:#fff;}
.btn-ghost:hover{border-color:#fff; transform:translateY(-2px);}
.btn-outline{border-color:var(--navy-800); color:var(--navy-900);}
.btn-outline:hover{background:var(--navy-900); color:#fff; transform:translateY(-2px);}

.scroll-cue{
  position:absolute; right:var(--edge); bottom:2.4rem; z-index:1;
  width:30px; height:48px; border:1px solid rgba(255,255,255,.5); border-radius:20px;
  display:none;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; width:4px; height:8px; margin-left:-2px;
  background:var(--gold-300); border-radius:3px;
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%{transform:translateY(0); opacity:1;}
  70%{transform:translateY(14px); opacity:0;}
  100%{opacity:0;}
}
@media (min-width:720px){.scroll-cue{display:block;}}

/* ============================================================
   STATEMENT BAND
   ============================================================ */
.statement{
  background:var(--maroon-700);
  padding:3.4rem var(--edge);
  border-top:1px solid var(--gold-600);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.statement p{
  max-width:840px; margin:0 auto; text-align:center;
  font-family:var(--serif); font-weight:600; font-style:italic;
  color:var(--gold-100);
  font-size:clamp(1.15rem, 2.6vw, 1.7rem);
  line-height:1.5;
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
section{padding:6.5rem var(--edge);}
section h2{font-size:clamp(1.9rem, 3.6vw, 2.7rem); line-height:1.14;}

/* ============================================================
   ABOUT
   ============================================================ */
.about{max-width:var(--container); margin:0 auto;}
.about-grid{display:grid; grid-template-columns:1fr; gap:3.5rem; align-items:center;}
.about-text p{color:var(--ink-600); line-height:1.75; font-size:1.02rem; margin-top:1.1rem; max-width:56ch;}
.about-text h2{margin-bottom:0;}

.stat-row{
  display:flex; gap:2.6rem; margin-top:2.8rem; padding-top:2.2rem;
  border-top:1px solid var(--line); flex-wrap:wrap;
}
.stat{display:flex; flex-direction:column; gap:.3rem;}
.stat-num{
  font-family:var(--serif); font-weight:600; color:var(--navy-900);
  font-size:2.1rem; line-height:1;
}
.stat-label{font-size:.8rem; color:var(--ink-400); font-weight:600;}

.about-media{position:relative; border-radius:4px; overflow:hidden;}
.about-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5;}
.about-media-tag{
  position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem;
  background:rgba(8,26,48,.88); backdrop-filter:blur(6px);
  color:#fff; padding:1rem 1.15rem; border-radius:3px;
  display:flex; align-items:center; gap:.8rem;
  font-size:.87rem; font-weight:600; line-height:1.4;
}
.about-media-tag img{height:22px; width:auto; flex-shrink:0;}

/* ============================================================
   LEGACY
   ============================================================ */
.legacy{position:relative; padding:0; color:#fff;}
.legacy-bg{position:absolute; inset:0; z-index:0;}
.legacy-bg img{width:100%; height:100%; object-fit:cover;}
.legacy-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(8,20,38,.96) 15%, rgba(11,33,64,.9) 55%, rgba(8,20,38,.97) 100%);
}
.legacy-inner{
  position:relative; z-index:1; max-width:var(--container); margin:0 auto;
  padding:6.5rem var(--edge);
}
.legacy h2{color:#fff; max-width:16ch;}
.legacy-intro{
  margin-top:1.3rem; max-width:52ch; color:rgba(255,255,255,.72);
  line-height:1.7; font-size:1.02rem;
}

.timeline{margin-top:3.6rem; display:flex; flex-direction:column;}
.timeline li{
  display:grid; grid-template-columns:120px 1fr; gap:1.6rem;
  padding:2rem 0; border-top:1px solid rgba(255,255,255,.14);
}
.timeline li:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
.timeline-year{
  font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--gold-300);
}
.timeline-body h3{color:#fff; font-size:1.25rem; font-weight:600; margin-bottom:.55rem;}
.timeline-body p{color:rgba(255,255,255,.68); line-height:1.7; max-width:56ch; font-size:.98rem;}

/* ============================================================
   ESTABLISHMENTS
   ============================================================ */
.establishments{max-width:var(--container); margin:0 auto;}
.est-intro{
  margin-top:1.2rem; max-width:56ch; color:var(--ink-600);
  line-height:1.7; font-size:1.02rem;
}
.est-grid{
  margin-top:3.2rem; display:grid; grid-template-columns:1fr; gap:1.3rem;
}
.est-card{
  background:var(--paper-dim); border:1px solid var(--line);
  border-radius:4px; padding:2.6rem 2.2rem;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.est-card:hover{border-color:var(--maroon-600); transform:translateY(-4px);}
.est-mark{
  font-family:var(--serif); font-size:.95rem; font-weight:700; color:var(--maroon-600);
  display:inline-block; margin-bottom:1.2rem;
}
.est-card h3{font-size:1.5rem; margin-bottom:.8rem;}
.est-card p{color:var(--ink-600); line-height:1.7; font-size:.98rem;}

/* ============================================================
   SHOWROOM
   ============================================================ */
.showroom{position:relative; padding:0; min-height:70vh; display:flex; align-items:flex-end; color:#fff;}
.showroom-media{position:absolute; inset:0; z-index:0;}
.showroom-media img{width:100%; height:100%; object-fit:cover; object-position:center 60%;}
.showroom-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,16,32,.95) 5%, rgba(6,16,32,.45) 55%, rgba(6,16,32,.2) 100%);
}
.showroom-content{
  position:relative; z-index:1; max-width:var(--container); margin:0 auto; width:100%;
  padding:5.5rem var(--edge);
}
.showroom h2{color:#fff; max-width:16ch;}
.showroom-content p{
  margin-top:1.3rem; max-width:52ch; color:rgba(255,255,255,.78);
  line-height:1.75; font-size:1.02rem;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{max-width:var(--container); margin:0 auto; text-align:center;}
.contact .kicker{display:block;}
.contact h2{max-width:20ch; margin:0 auto;}
.contact-sub{
  margin:1.2rem auto 0; max-width:46ch; color:var(--ink-600);
  line-height:1.7; font-size:1.02rem;
}
.contact-actions{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem;
}

.contact-details{
  display:flex; gap:3rem; justify-content:center; flex-wrap:wrap;
  margin-top:3rem; padding-top:2.4rem; border-top:1px solid var(--line);
}
.contact-details > div{display:flex; flex-direction:column; gap:.4rem; align-items:center;}
.contact-label{font-size:.78rem; font-weight:700; letter-spacing:.02em; color:var(--ink-400);}
.contact-details a, .contact-details span:not(.contact-label){
  font-family:var(--serif); font-size:1.15rem; font-weight:500; color:var(--navy-900);
}
.contact-details a:hover{color:var(--gold-600);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy-950); color:rgba(255,255,255,.6); padding:4.5rem var(--edge) 2rem;}
.footer-top{
  max-width:var(--container); margin:0 auto;
  padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.brand-footer .brand-word{font-size:1.5rem;}
.footer-top p{margin-top:.9rem; font-size:.9rem; color:rgba(255,255,255,.5);}

.footer-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2.2rem;
  padding:2.6rem 0;
}
.footer-grid h4{
  color:#fff; font-size:.82rem; font-weight:700; letter-spacing:.02em;
  margin:0 0 1rem;
}
.footer-grid div{display:flex; flex-direction:column; gap:.65rem;}
.footer-grid a, .footer-grid span{font-size:.92rem; color:rgba(255,255,255,.62);}
.footer-grid a:hover{color:var(--gold-300);}

.footer-bottom{
  max-width:var(--container); margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  padding-top:2rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.82rem; color:rgba(255,255,255,.42);
}

/* ============================================================
   REVEAL ANIMATION (single, subtle)
   ============================================================ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:860px){
  .about-grid{grid-template-columns:1.05fr .95fr;}
  .est-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:900px){
  .nav-desktop{display:none;}
  .menu-toggle{display:flex;}
}

@media (max-width:640px){
  section{padding:4.5rem var(--edge);}
  .hero-content{padding-bottom:4.5rem;}
  .hero h1{max-width:none;}
  .timeline li{grid-template-columns:1fr; gap:.6rem;}
  .stat-row{gap:1.8rem 2.4rem;}
  .contact-actions{flex-direction:column; align-items:stretch;}
  .nav-mobile a{font-size:2rem;}
}