/* ============================================
   Dandave School — Shared Stylesheet
   Palette derived from the school's own brand marks:
   navy (report backgrounds), gold + red (crest banner),
   indigo (crest stars), teal (mission-card accents).
   ============================================ */

:root{
  --navy:#122A4E;
  --navy-deep:#0B1D38;
  --navy-soft:#1D3E6E;
  --indigo:#37378F;
  --gold:#F6C500;
  --gold-deep:#D9A400;
  --red:#E43331;
  --red-deep:#C22321;
  --teal:#12B3A3;
  --paper:#FAFAF6;
  --paper-dim:#F1F1EA;
  --ink:#152036;
  --ink-soft:#4B5468;
  --cream:#FDFBF2;

  --display:'Sniglet', sans-serif;
  --body:'Sniglet', sans-serif;
  --mono:'JetBrains Mono', monospace;

  /* Fluid spacing scale */
  --space-2x: clamp(0.5rem, 2vw, 1rem);
  --space-3x: clamp(0.75rem, 2.5vw, 1.5rem);
  --space-4x: clamp(1rem, 3vw, 2rem);
  --space-5x: clamp(1.5rem, 4vw, 2.5rem);
  --space-6x: clamp(2rem, 5vw, 3rem);
  --space-8x: clamp(2.5rem, 6vw, 4rem);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-4x);}
@media (max-width:900px){
  .wrap{padding:0 var(--space-3x);}
}
@media (max-width:600px){
  .wrap{padding:0 var(--space-2x);}
}
@media (max-width:400px){
  .wrap{padding:0 calc(var(--space-2x) * 0.5);}
}

/* Headings with fluid sizes */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--navy);
  letter-spacing:-0.01em;
  line-height:1.15;
}
h1{font-size:clamp(2rem, 4vw, 3rem);}
h2{font-size:clamp(1.7rem, 3.5vw, 2.3rem);}
h3{font-size:clamp(1.3rem, 2.8vw, 1.8rem);}
h4{font-size:clamp(1.1rem, 2.2vw, 1.5rem);}

/* ---------- signature motif: crest ribbon ---------- */
.ribbon{
  height:10px;
  background:linear-gradient(100deg, var(--gold) 0 55%, var(--red) 55% 100%);
  width:100%;
}
.ribbon-tag{
  display:inline-flex;
  align-items:center;
  gap:0;
  height:6px;
  width:64px;
  border-radius:3px;
  overflow:hidden;
  margin-bottom:var(--space-5x);
}
.ribbon-tag span{height:100%;display:block;}
.ribbon-tag .g{width:55%;background:var(--gold);}
.ribbon-tag .r{width:45%;background:var(--red);}

.star{
  display:inline-block;
  width:14px;height:14px;
  background:var(--gold);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  flex-shrink:0;
}

/* eyebrow — school-day timetable label, used because Dandave runs on a real daily rhythm */
.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red-deep);
  display:block;
  margin-bottom:16px;
}
.eyebrow.on-dark{color:var(--gold);}

/* ---------- header / nav ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,250,246,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(18,42,78,0.1);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--space-2x) * 0.5) var(--space-4x);
  max-width:1180px;
  margin:0 auto;
  gap:24px;
}
@media (max-width:900px){
  nav{padding:calc(var(--space-2x) * 0.5) var(--space-3x);}
}
@media (max-width:600px){
  nav{padding:calc(var(--space-2x) * 0.5) var(--space-2x);}
}
@media (max-width:400px){
  nav{padding:calc(var(--space-2x) * 0.5) calc(var(--space-2x) * 0.5);}
}
.logo{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display);
  font-weight:400;
  font-size:1.15rem;
  color:var(--navy);
  flex-shrink:0;
}
.logo img{width:44px; height:44px; object-fit:contain;}
.logo .school-name{display:flex; flex-direction:column; line-height:1.1;}
.logo .school-name small{
  font-family:var(--mono);
  font-weight:400;
  font-size:0.6rem;
  letter-spacing:0.1em;
  color:var(--ink-soft);
  text-transform:uppercase;
}
.nav-links{
  display:flex; gap:28px;
  font-size:0.92rem;
  font-weight:400;
}
@media (max-width:900px){
  .nav-links{
    position:fixed; top:68px; left:0; right:0;
    background:var(--paper);
    flex-direction:column;
    gap:0;
    max-height:0;
    overflow:hidden;
    border-bottom:1px solid rgba(18,42,78,0.1);
    transition:max-height 0.3s ease;
  }
  .nav-links.open{max-height:400px;}
  .nav-links a{padding:16px 32px; width:100%; display:block; border-top:1px solid rgba(18,42,78,0.06);}
  .nav-toggle{display:block;}
}
.nav-links a{
  position:relative;
  padding:6px 0;
  transition:color 0.2s;
  color:var(--navy);
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:0; width:0%; height:2px;
  background:var(--red);
  transition:width 0.25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--red-deep);}
.nav-cta{
  background:var(--gold);
  color:var(--navy-deep);
  padding:11px 20px;
  border-radius:24px;
  font-weight:400;
  font-size:0.85rem;
  transition:transform 0.2s, background 0.2s;
  white-space:nowrap;
  flex-shrink:0;
}
.nav-cta:hover{background:var(--gold-deep); transform:translateY(-1px);}
.nav-toggle{
  display:none;
  font-family:var(--mono);
  font-size:1.3rem;
  color:var(--navy);
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:2px solid var(--navy);
  border-radius:6px;
  line-height:1;
}

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

/* Homepage hero: keep the message and actions above the photo on phones. */
.hero-layout{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:48px;
  align-items:stretch;
  padding-bottom:56px;
}
@media (max-width:700px){
  .hero-layout{
    grid-template-columns:1fr;
    gap:32px;
    padding-bottom:32px;
  }
  .hero-layout .photo-frame{order:2;}
}
@media (max-width:900px){
  .hero-layout > div:first-child,
  .page-hero .wrap{text-align:center;}
  .hero-layout > div:first-child > div[style*="display:flex"],
  .page-hero h1,
  .page-hero p{margin-left:auto; margin-right:auto;}
  .hero-layout > div:first-child > div[style*="display:flex"]{justify-content:center;}
}

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  background:var(--navy);
  background-image:radial-gradient(circle at 85% 20%, rgba(246,197,0,0.10), transparent 45%),
                    radial-gradient(circle at 10% 90%, rgba(228,51,49,0.12), transparent 40%);
  color:var(--cream);
  padding:var(--space-8x) 0 var(--space-6x);
  position:relative;
}
@media (max-width:900px){
  .page-hero{padding:var(--space-6x) 0 var(--space-5x);}
}
@media (max-width:600px){
  .page-hero{padding:var(--space-5x) 0 var(--space-4x);}
}
.page-hero h1{
  color:var(--cream);
  font-size:clamp(2.1rem,4.4vw,3.1rem);
  max-width:700px;
}
.page-hero p{
  color:rgba(253,251,242,0.78);
  max-width:560px;
  margin-top:16px;
  font-size:1.05rem;
}
.page-hero .crumb{
  font-family:var(--mono);
  font-size:0.75rem !important;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
}

/* ---------- buttons ---------- */
.btn-primary{
  background:var(--gold);
  color:var(--navy-deep);
  padding:15px 28px;
  border-radius:28px;
  font-weight:400;
  font-size:0.95rem;
  transition: transform 0.2s, background 0.2s;
  display:inline-block;
}
.btn-primary:hover{background:var(--gold-deep); transform:translateY(-2px);}
.btn-ghost{
  border:1.5px solid rgba(253,251,242,0.4);
  color:var(--cream);
  padding:14px 28px;
  border-radius:28px;
  font-weight:400;
  font-size:0.95rem;
  transition: border-color 0.2s, background 0.2s;
  display:inline-block;
}
.btn-ghost:hover{border-color:var(--gold); background:rgba(255,255,255,0.06);}
.btn-outline-navy{
  border:1.5px solid var(--navy);
  color:var(--navy);
  padding:13px 26px;
  border-radius:28px;
  font-weight:400;
  display:inline-block;
  transition:all 0.2s;
}
.btn-outline-navy:hover{background:var(--navy); color:var(--cream);}

/* ---------- sections ---------- */
section{padding:var(--space-8x) 0;}
@media (max-width:900px){
  section{padding:var(--space-6x) 0;}
}
@media (max-width:600px){
  section{padding:var(--space-5x) 0;}
}
@media (max-width:400px){
  section{padding:var(--space-4x) 0;}
}
.section-head{max-width:660px; margin-bottom:var(--space-6x);}
@media (max-width:600px){
  .section-head{margin-bottom:var(--space-5x);}
}
@media (max-width:400px){
  .section-head{margin-bottom:var(--space-4x);}
}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.35rem);}
.section-head p{color:var(--ink-soft); font-size:1.03rem; margin-top:14px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.bg-navy{background:var(--navy); color:var(--cream);}
.bg-navy h2, .bg-navy h3{color:var(--cream);}
.bg-navy .section-head p{color:rgba(253,251,242,0.72);}
.bg-gold{background:var(--gold);}
.bg-gold h2, .bg-gold h3{color:var(--navy-deep);}
.bg-paper-dim{background:var(--paper-dim);}
.bg-teal{background:var(--teal); color:var(--navy-deep);}

.reveal{opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- grids / cards ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.curriculum-comparison{align-items:start;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr; gap:36px;}
  .grid-3{grid-template-columns:1fr; }
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .section-head, .section-head p, .page-hero p, .page-hero .crumb, .btn-primary, .btn-ghost, .btn-outline-navy{ text-align:center; }
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
}
@media (max-width:400px){
  .grid-2{grid-template-columns:1fr;}
}

/* Cards */
.card{
  background:#fff;
  border-radius:10px;
  padding:30px 26px;
  border:1px solid rgba(18,42,78,0.08);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover{transform:translateY(-5px); box-shadow:0 16px 32px rgba(18,42,78,0.1);}
.card h3{font-size:1.15rem; margin-bottom:10px;}
.card p{color:var(--ink-soft); font-size:0.95rem;}

.card-navy{
  background:var(--navy-soft);
  border-radius:10px;
  padding:30px 26px;
  border:1px solid rgba(255,255,255,0.08);
  color:var(--cream);
  transition:transform 0.25s ease, border-color 0.25s ease;
}
.card-navy:hover{transform:translateY(-5px); border-color:var(--gold);}
.card-navy h3{color:var(--cream); font-size:1.2rem; margin-bottom:10px;}
.card-navy p{color:rgba(253,251,242,0.7); font-size:0.95rem;}
.card-navy .tag{
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0.08em;
  color:var(--gold); display:block; margin-bottom:12px; text-transform:uppercase;
}

/* Feature boxes */
.feature{border-top:3px solid var(--red); padding-top:16px;}
.feature .num{
  font-family:var(--display); font-weight:400; font-size:1.4rem;
  color:var(--gold-deep); display:block; margin-bottom:10px;
}
.feature h3{font-size:1.02rem; margin-bottom:8px;}
.feature p{font-size:0.92rem; color:var(--ink-soft);}

/* Star list */
.star-list li{
  display:flex; gap:12px; align-items:flex-start;
  margin-bottom:14px; font-size:0.98rem; color:var(--ink-soft);
}
.star-list li .star{margin-top:5px;}
.bg-navy .star-list li{color:rgba(253,251,242,0.82);}

/* ---------- image treatments ---------- */
.photo-frame{
  border-radius:12px;
  overflow:hidden;
  position:relative;
  box-shadow:0 20px 40px rgba(18,42,78,0.16);
}
.photo-frame img{width:100%; height:100%; object-fit:cover;}
.photo-frame::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:8px;
  background:linear-gradient(100deg, var(--gold) 0 55%, var(--red) 55% 100%);
  z-index:2;
}

.hero-slideshow{
  height:100%;
  aspect-ratio:auto;
  background:var(--navy-soft);
}
.hero-slides,
.hero-slide{width:100%; height:100%;}
.hero-slides{
<<<<<<< HEAD
  position:absolute;
  inset:0;
  display:grid;
  overflow:hidden;
}
.hero-slide{
  position:relative;
  grid-area:1 / 1;
=======
  position:absolute;
  inset:0;
  overflow:hidden;
}
.hero-slide{
  position:absolute;
  inset:0;
>>>>>>> a7825a7f2f24459f896a5d2a9e7bb0b1f764e197
  display:block;
  object-fit:cover;
  opacity:0;
  transition:opacity 0.6s ease;
}
.hero-slide.active{opacity:1;}

@media (max-width:700px){
  .hero-slideshow{
    height:auto;
    aspect-ratio:4 / 3;
  }
}

/* Club photo carousels */
.club-slideshow{
  border-radius:12px;
  overflow:hidden;
  position:relative;
  aspect-ratio:4 / 3;
  background:var(--navy-soft);
  box-shadow:0 20px 40px rgba(18,42,78,0.16);
}
.club-feature{
  min-height:420px;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  isolation:isolate;
  background:var(--navy-deep);
  box-shadow:0 20px 40px rgba(18,42,78,0.16);
}
.club-feature::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg, rgba(11,29,56,0.92), rgba(11,29,56,0.5) 58%, rgba(11,29,56,0.18));
  pointer-events:none;
}
.club-feature .club-slideshow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:0;
  box-shadow:none;
  z-index:0;
}
.club-feature .club-copy{
  position:absolute;
  left:clamp(24px, 6vw, 72px);
  bottom:clamp(24px, 6vw, 64px);
  z-index:2;
  max-width:560px;
  color:var(--cream);
}
.club-feature .club-copy h3{color:#fff;}
.club-feature .club-copy p,
.club-feature .club-copy .star-list li{color:#fff !important;}
.club-feature .club-copy .star-list{margin-top:12px;}
.club-slideshow::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:8px;
  background:linear-gradient(100deg, var(--gold) 0 55%, var(--red) 55% 100%);
  z-index:2;
}
.club-slides,
.club-slide{width:100%; height:100%;}
.club-slides{position:relative;}
.club-slide{
  position:absolute;
  inset:0;
  object-fit:cover;
  opacity:0;
  transition:opacity 0.35s ease;
}
.club-slide.active{opacity:1;}
.slide-control{
  position:absolute;
  top:50%;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  border-radius:50%;
  background:rgba(11,29,56,0.78);
  color:var(--cream);
  font-size:1.2rem;
  z-index:3;
  transition:background 0.2s, color 0.2s;
}
.slide-control:hover{background:var(--gold); color:var(--navy-deep);}
.slide-prev{left:14px;}
.slide-next{right:14px;}
.slide-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  display:flex;
  justify-content:center;
  gap:8px;
  z-index:3;
}
.slide-dot{
  width:9px;
  height:9px;
  padding:0;
  border:1px solid var(--cream);
  border-radius:50%;
  background:transparent;
}
.slide-dot.active{background:var(--gold); border-color:var(--gold);}

/* ---------- quote / pride banner ---------- */
.quote-section{background:var(--red); color:#fff; text-align:center; padding:80px 0; position:relative; overflow:hidden;}
@media (max-width:600px){
  .quote-section{padding:60px 0;}
}
@media (max-width:400px){
  .quote-section{padding:40px 0;}
}
.quote-section::before{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 40px);
}
.quote-section blockquote{
  font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,2.6vw,1.9rem);
  max-width:780px; margin:0 auto 18px; line-height:1.4; position:relative;
}
.quote-attr{font-family:var(--mono); font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.8); position:relative;}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step;}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.steps{grid-template-columns:1fr;}}
.step{background:#fff; border-radius:10px; padding:24px 22px; counter-increment:step; position:relative;}
.step::before{
  content:counter(step); font-family:var(--display); font-weight:400; font-size:1.3rem;
  color:var(--red); display:block; margin-bottom:12px;
}
.step h3{font-size:1rem; margin-bottom:8px;}
.step p{font-size:0.88rem; color:var(--ink-soft);}

/* ---------- gallery ---------- */
.event-board{display:grid; gap:56px;}
.event-lane-heading{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
  color:var(--navy);
}
.event-lane-heading > span{
  font-family:var(--display);
  font-size:2rem;
  line-height:1;
  color:var(--red);
}
.event-lane-heading strong,
.event-lane-heading small{display:block;}
.event-lane-heading strong{
  font-family:var(--display);
  font-size:1.35rem;
  line-height:1.1;
}
.event-lane-heading small{
  margin-top:4px;
  color:var(--ink-soft);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.event-lane-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
.event-lane-random .event-lane-heading > span{color:var(--red);}
.form-trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr;}}
@media (max-width:560px){
  .event-board{gap:40px;}
  .event-lane-heading{align-items:flex-start;}
  .event-lane-heading > span{font-size:1.6rem;}
  .event-lane-heading strong{font-size:1.15rem;}
}
.gallery-item{
  position:relative; border-radius:10px; overflow:hidden;
  aspect-ratio:4/3.2;
  cursor:default;
}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 16px 12px;
  background:linear-gradient(to top, rgba(11,29,56,0.88), transparent);
  color:#fff; font-size:0.85rem; font-weight:400;
  opacity:1; transform:translateY(0); transition:all 0.3s ease;
}
.gallery-item:hover .cap{opacity:1; transform:translateY(0);}
.gallery-item .cap strong,
.gallery-item .cap span{display:block;}
.gallery-item .cap strong{color:var(--gold); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;}
.gallery-item .cap span{margin-top:2px;}

@media (max-width:600px){
  .club-feature{min-height:500px;}
  .club-feature::after{background:linear-gradient(180deg, rgba(11,29,56,0.25), rgba(11,29,56,0.94) 72%);}
  .club-feature .club-copy{left:24px; right:24px; bottom:24px;}
  .club-feature .club-copy h3{font-size:1.1rem;}
  .club-feature .club-copy p,
  .club-feature .club-copy .star-list li{font-size:0.82rem; line-height:1.5;}
}

/* ---------- staff ---------- */
.staff-card{display:flex; gap:22px; align-items:flex-start; background:#fff; border-radius:10px; padding:26px; border:1px solid rgba(18,42,78,0.08);}
@media (max-width:560px){
  .staff-card{flex-direction:column; align-items:center; text-align:center;}
}
.staff-card img{width:96px; height:96px; border-radius:50%; object-fit:cover; flex-shrink:0; border:3px solid var(--gold);}
.staff-card h3{font-size:1.1rem; margin-bottom:2px;}
.staff-card .role{font-family:var(--mono); font-size:0.75rem; color:var(--red-deep); text-transform:uppercase; letter-spacing:0.06em; margin-bottom: 10px; display:block;}
.staff-card p{font-size:0.92rem; color:var(--ink-soft);}

/* ---------- badges / hexes ---------- */
.badge-row{display:flex; flex-wrap:wrap; gap:20px; justify-content:center;}
.facilities-list{justify-content:center;}
.badge{
  width:205px; text-align:center; font-size:0.85rem; color:var(--navy);
  background:var(--paper-dim); border:2px solid var(--gold);
  border-radius:16px; padding:20px 14px; font-weight:400;
}

.photo-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
@media (max-width:900px){
  .facilities-list{justify-content:center; text-align:center;}
  .facilities-list .badge{margin-inline:auto; width:min(220px, 100%);}
}
@media (max-width:600px){
  .facilities-list{justify-content:center; text-align:center;}
  .facilities-list .badge{margin-inline:auto; width:min(200px, 100%);}
  .photo-strip{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    padding-bottom:8px;
  }
  .photo-strip .photo-frame{
    flex:0 0 min(82vw, 320px);
    aspect-ratio:4 / 3;
    scroll-snap-align:start;
  }
}

/* ---------- footer ---------- */
footer{background:var(--navy-deep); color:rgba(253,251,242,0.85); padding:64px 0 28px;}
@media (max-width:600px){
  footer{padding:50px 0 20px;}
}
@media (max-width:400px){
  footer{padding:40px 0 16px;}
}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.12);}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr; gap:32px;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr; gap:var(--space-5x);}}
@media (max-width:400px){
  .footer-grid{gap:var(--space-4x);}
}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.footer-brand img{width:38px; height:38px; object-fit:contain;}
.footer-brand span{font-family:var(--display); font-size:1.15rem; font-weight:400; color:var(--cream);}
.footer-grid p{font-size:0.9rem; line-height:1.7; color:rgba(253,251,242,0.62);}
.footer-col h4{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
.footer-col li{margin-bottom: 10px; font-size:0.9rem;}
.footer-col a{transition: color 0.2s;}
.footer-col a:hover{color:var(--gold);}
.social-row{display:flex; gap:12px; margin-top:6px;}
.social-row a{
  width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; transition:background 0.2s, transform 0.2s;
}
.social-row a:hover{background:var(--gold); transform:translateY(-3px);}
.social-row svg{width:16px; height:16px; fill:var(--cream);}
.social-row a:hover svg{fill:var(--navy-deep);}
.social-row a[aria-label="TikTok"] svg{fill:var(--cream);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:0.78rem; color:rgba(253,251,242,0.45); flex-wrap:wrap; gap:12px;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
:focus-visible{outline:2px solid var(--red); outline-offset:3px;}