/* =====================================================================
   W PHOTOGRAPHY — styles.css
   Mobile-first. No framework. Edit the tokens in :root to retheme.
===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:         #18120F;
  --ink-soft:    #4A3F38;
  --muted:       #786C62;
  --paper:       #FAF7F2;
  --paper-deep:  #F1EAE0;
  --line:        #E4DBCC;
  --accent:      #B6301D;
  --accent2:     #E2536F;   /* warm rose — second gradient stop */
  --accent3:     #ae24f1;
  --accent-deep: #8C2415;
  --accent-tint: #F4E3DC;
  --cream:       #FFFDF9;
  --grad: linear-gradient(90deg, #ef4444 0%, #ec4899 45%, #8b5cf6 100%);

  --font-display: 'Fraunces', serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'Space Grotesk', sans-serif;

  --container-w: 1152px;
  --gutter: 20px;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  text-align: justify;
  font-size:1.0625rem;
  font-weight:500;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }
input, textarea{ font:inherit; }
::selection{ background:var(--accent); color:var(--cream); }
.hidden{ display:none; }

.container{
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.1; }

/* Gradient text — used sparingly on a handful of key phrases */
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--accent); /* fallback if background-clip:text isn't supported */
}

/* =====================================================================
   SECTION TITLE PATTERN
   Big bold red "kicker" (the section's real name) + a smaller tagline.
===================================================================== */
.section-kicker{
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--accent);
  font-size:2.5rem;
  text-transform: uppercase;
  line-height:1.05;
}
.section-tagline{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--ink-soft);
  font-size:1.05rem;
  margin-top:.4rem;
}
.section-lead{ margin-top:.9rem; color:var(--ink-soft); }
.group-title{ font-family:var(--font-display); font-weight:600; font-size:1.4rem; color:var(--ink); }
.group-note{ margin-top:.6rem; font-size:.9rem; color:var(--muted);}
.box-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink); }

@media (min-width:768px){
  .section-kicker{ font-size:3.5rem; }
  .section-tagline{ font-size:1.25rem; }
  .group-title{ font-size:1.65rem; }
}

/* Eyebrow — small label, used only in the hero now */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}
.eyebrow-on-photo{ color:rgba(253, 249, 250, 0.92); }

/* Plain divider between sections — solid hairline, no perforation */
.divider{ height:1px; background:var(--line); max-width:var(--container-w); margin-inline:auto; }

/* =====================================================================
   BUTTONS
   All filled CTA buttons share the brand gradient. Outline / on-photo
   buttons stay quiet on purpose (WhatsApp + ghost "Contact us" included).
===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-mono); font-weight:600; font-size:1rem;
  padding:.95rem 1.5rem; border-radius:20px;
  transition:filter .25s ease, background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }

.btn-solid, .btn-accent{
  background:var(--grad);
  color:var(--cream);
}
.btn-solid:hover, .btn-accent:hover{ filter:brightness(.93); }


.btn-ghost{ background:#bda38b; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }

.btn-on-photo{ background:rgba(250,247,242,.14); color:var(--cream); border:1.5px solid rgba(250,247,242,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn-on-photo:hover{ background:rgba(250,247,242,.24); }

.btn-small{ padding:.65rem 1.1rem; font-size:.8rem; }
.btn-icon{ width:18px; height:18px; }
.full{ width:100%; }

.chip{
  font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.04em;
  color:var(--ink-soft); background:var(--paper-deep); border-radius:999px;
  padding:.3rem .7rem; display:inline-flex; align-items:center; gap:.35rem;
}
.chip-social img{ width:16px; height:16px; }
.chip-social{ padding:.55rem .9rem; transition:background .2s ease; }
.chip-social:hover{ background:var(--accent-tint); }


/* =====================================================================
   NAV
===================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,242,.7);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{ border-color:var(--line); box-shadow:0 8px 24px rgba(24,18,15,.05); }

.nav-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-block:.85rem; }

.logo{ display:flex; align-items:center; gap:.45rem; flex:1; min-width:0; }
.logo-mark-img{ height:26px; width:auto; flex-shrink:0; }
.logo-word{ font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:420px){ .logo-word{ font-size:13px; } }
@media (min-width:860px){
  .logo-mark-img{ height:30px; }
  .logo-word{ font-size:14px; }
}

.nav-links{ display:none; }
@media (min-width:860px){
  .nav-links{ display:flex; align-items:center; gap:1.5rem; font-size:.9rem; font-weight:500; }
  .nav-link{ position:relative; color:var(--ink-soft); }
  .nav-link:hover{ color:var(--ink); }
  .nav-link::after{
    content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px;
    background:var(--accent); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  .nav-link:hover::after{ transform:scaleX(1); }
}

/* Kreyòl language pill — always visible, never tucked inside the menu */
.lang-pill{
  font-family:var(--font-mono); font-weight:600; font-size:.7rem;
  color:var(--cream); background:#8A8077;
  border-radius:12px; padding:.4rem .7rem;
  transition:background .2s ease;
  flex-shrink:0;
  white-space:nowrap;
}
.lang-pill:hover{ background:#6F665D; }

.lang-pill-mobile{ }
@media (min-width:860px){ .lang-pill-mobile{ display:none; } }

.lang-pill-desktop{ display:none; }
@media (min-width:860px){ .lang-pill-desktop{ display:inline-flex; font-size:.78rem; padding:.4rem .85rem; } }

.burger{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-weight:600; font-size:.85rem; flex-shrink:0; }
.burger-icon{ position:relative; width:20px; height:1.5px; background:var(--ink); display:block; }
.burger-icon::before, .burger-icon::after{ content:''; position:absolute; left:0; width:20px; height:1.5px; background:var(--ink); }
.burger-icon::before{ top:-6px; }
.burger-icon::after{ top:6px; }
@media (min-width:860px){ .burger{ display:none; } }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:60;
  background:rgba(250,247,242,.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu-close{ 
  position:absolute; 
  top:1.5rem; 
  right:1.5rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono); 
  font-size:1rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.close-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--ink);
  color:var(--cream);
  font-size:1rem;
  line-height:1;
}

.menu-link{
  font-family:var(--font-mono); font-size:2.1rem; font-weight:600;
  transform:translateY(16px); opacity:0; transition:all .45s var(--ease);
}
.mobile-menu.open .menu-link{ transform:translateY(0); opacity:1; }
.mobile-menu.open .menu-link:nth-child(2){ transition-delay:.04s; }
.mobile-menu.open .menu-link:nth-child(3){ transition-delay:.09s; }
.mobile-menu.open .menu-link:nth-child(4){ transition-delay:.14s; }
.mobile-menu.open .menu-link:nth-child(5){ transition-delay:.19s; }

/* =====================================================================
   LANGUAGE BANNER — shown to browsers set to French / Haitian Creole
===================================================================== */
.lang-banner{
  max-height:0; overflow:hidden; opacity:0;
  background:var(--ink); color:var(--cream);
  transition:max-height .4s var(--ease), opacity .4s var(--ease);
}
.lang-banner.show{ max-height:120px; opacity:1; }
.lang-banner-inner{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  flex-wrap:wrap; text-align:center;
  padding:.75rem var(--gutter);
  font-size:.85rem;
}
.lang-banner-inner a{ font-family:var(--font-mono); font-weight:700; text-decoration:underline; flex-shrink:0; }
.lang-banner-close{ font-size:1.1rem; line-height:1; flex-shrink:0; color:rgba(250,253,249,.7); }
.lang-banner-close:hover{ color:var(--cream); }

/* =====================================================================
   HERO
===================================================================== */
.hero{ position:relative; height:92svh; min-height:560px; max-height:900px; overflow:hidden; }
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 18%;
  transform:scale(1.08); opacity:0;
  animation:heroIn 1.4s var(--ease) forwards;
}
@keyframes heroIn{ to{ transform:scale(1); opacity:1; } }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, #000000 0%, rgba(15,11,9,.65) 32%, rgba(15,11,9,0) 65%);
}
.hero-content{ position:absolute; inset-inline:0; bottom:0; }
.hero-copy{ padding-bottom:2.25rem; }
.hero-copy > *{ opacity:0; transform:translateY(14px); animation:fadeUp .8s var(--ease) forwards; }
.hero-copy > *:nth-child(1){ animation-delay:.5s; }
.hero-copy > *:nth-child(2){ animation-delay:.65s; }
.hero-copy > *:nth-child(3){ animation-delay:.8s; }
.hero-copy > *:nth-child(4){ animation-delay:.95s; }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

.hero-title{
  font-family:var(--font-mono); /* back to the original site's heading font */
  color:var(--cream); font-size:3rem; line-height:1.08; font-weight:700;
  margin-top:.75rem; max-width:20rem; letter-spacing:-.01em;
}
.hero-sub{ color:rgba(250,253,249,.8); margin-top:1rem; max-width:26rem; font-size:1rem; }
.hero-actions{ margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:.70rem; }

@media (min-width:768px){
  .hero-copy{ padding-bottom:3.5rem; }
  .hero-title{ font-size:3.75rem; max-width:30rem; }
  .hero-sub{ font-size:1.15rem; }
}

/* =====================================================================
   SECTIONS
===================================================================== */
.section{ padding-block:4rem; }
.section-tight{ padding-block:3.25rem; }
@media (min-width:768px){
  .section{ padding-block:6rem; }
  .section-tight{ padding-block:4.5rem; }
}

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

.stagger{ display:flex; }
.stagger > *{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.stagger.in > *{ opacity:1; transform:translateY(0); }
.stagger.in > *:nth-child(1){ transition-delay:.04s; }
.stagger.in > *:nth-child(2){ transition-delay:.1s; }
.stagger.in > *:nth-child(3){ transition-delay:.16s; }

/* =====================================================================
   TICKER
===================================================================== */
.ticker{ overflow:hidden; white-space:nowrap; margin-top:1.25rem; }
.ticker-track{ display:inline-flex; width:max-content; animation:tickerScroll 32s linear infinite; }
.ticker-track span{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); padding-right:2.25rem; }
@keyframes tickerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =====================================================================
   GALLERY — native swipe + snap
===================================================================== */
.gallery-wrap{ 
  margin-top:2rem; }

.gallery-row{
  display:grid;
  grid-template-rows:1fr 1fr;
  grid-auto-flow:column;
  grid-auto-columns:47%;
  gap:4px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
}
.gallery-row::-webkit-scrollbar{ display:none; }
.gallery-item{ scroll-snap-align:start; }

.gallery-item img{
  width:100%; 
  aspect-ratio:4/5;
  object-fit:cover; 
  border-radius:0px;
  cursor:zoom-in;
  transition:transform .7s var(--ease);
}
.gallery-item img:hover{ transform:scale(1.025); }

@media (min-width:640px){
  .gallery-row{
    grid-auto-columns:30%;
    margin-inline:0;
    padding-inline:0;
  }
}
@media (min-width:1024px){
  .gallery-row{ grid-auto-columns:23%; }
}

.gallery-progress{ display:flex; align-items:center; gap:.75rem; margin-top:1rem; }
.rail{ flex:1; height:3px; background:var(--line); border-radius:99px; overflow:hidden; }
.rail-fill{ height:100%; width:18%; background:var(--accent); border-radius:99px; transition:width .15s ease-out; }
.gallery-hint{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); flex-shrink:0; }

/* =====================================================================
   RIBBON — full-bleed continuous strip (lives in the About section)
===================================================================== */
.ribbon{ overflow:hidden; background:var(--ink); margin-top:2.5rem; }
.ribbon-track{ display:flex; gap:0px; width:max-content; animation:ribbonScroll 50s linear infinite; }
.ribbon-track img{ height:170px; width:136px; object-fit:cover; flex-shrink:0; }
@keyframes ribbonScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ribbon:hover .ribbon-track{ animation-play-state:paused; }
@media (min-width:768px){ .ribbon-track img{ height:200px; width:160px; } }

/* =====================================================================
   PACKAGES
===================================================================== */
#packages{
  background:linear-gradient(to bottom, #feefef 0%, var(--paper) 100%);
}


.package-group{ margin-top:2.5rem; }

.package-grid{ margin-top:1.5rem; display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:860px){
  .package-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* Outdoor: same width as the others on mobile, one wide card on desktop */
.package-grid-single{ grid-template-columns:1fr; }
@media (min-width:860px){
  .package-grid-single .package-card{
    display:grid;
    grid-template-columns:1fr 1.1fr;
  }
  .package-grid-single .package-media{ aspect-ratio:auto; height:100%; }
  .package-grid-single .package-body{ justify-content:center; padding-left: 2.5rem}
}

.package-card{ border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--cream); display:flex; flex-direction:column; position:relative; }

.package-card::after{
  content:'';
  position:absolute;
  bottom:0; right:0;
  width:60%; height:40%;
  background:radial-gradient(ellipse at bottom right, rgba(182,48,29,.12) 0%, transparent 70%);
  pointer-events:none;
}

.package-media{ display:grid; grid-template-columns:1fr 1fr; aspect-ratio:4/3; }
.package-media img{ width:100%; height:100%; object-fit:cover; }

.package-body{ padding:1.25rem; display:flex; flex-direction:column; flex:1; }

.package-kicker{
  font-family:var(--font-mono); 
  font-size:.72rem; 
  font-weight:700; 
  letter-spacing:.1em; 
  text-transform:uppercase;
  color:#ef4444;
}

.package-title{ 
  font-family:var(--font-mono);
  font-size:1.4rem;
  text-transform: uppercase;
  font-weight:800; 
  margin-top:.8rem; 
}

.package-desc{ margin-top:.6rem; font-size:1rem; color:var(--ink-soft); line-height:1.55; }

.price-list{ margin-top:1rem; font-size:.92rem; }
.price-row{ display:flex; align-items:center; justify-content:space-between; padding-block:.6rem; border-bottom:1px solid var(--line); }
.price-row:last-child{ border-bottom:none; }
.price-name{ font-weight:900; }
.price-meta{ font-size:.8rem; color:var(--muted); margin-top:.1rem; }
.price-amount{ font-family:var(--font-mono); font-weight:900; }

.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }

details.know{ margin-top:1.5rem; font-size:.9rem; color:var(--muted); }
details.know summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-weight:600; color:var(--ink-soft); }
details.know summary::-webkit-details-marker{ display:none; }
details.know ul{ margin-top:.5rem; padding-left:1rem; list-style:disc; line-height:1.6; }

.package-cta{ width:100%; margin-top:1.5rem; margin-bottom:.5rem;}

/* =====================================================================
   CONSULTATION
===================================================================== */
.consultation-grid{ display:grid; grid-template-columns:1fr; gap:2.25rem; align-items:center; }
.consultation-media{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.consultation-media img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:16px; }
.consultation-media .lift{ transform:translateY(-10px); }
@keyframes floatSlow{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.floaty{ animation:floatSlow 5s ease-in-out infinite; }

.consult-box{ margin-top:1.25rem; border-radius:18px; background:var(--paper-deep); padding:1.5rem; }
.consult-box ul{ margin-top:1rem; font-size:.9rem; color:var(--ink-soft); line-height:1.7; }
.consult-box li{ padding-left:1rem; position:relative; }
.consult-box li::before{ content:'—'; position:absolute; left:0; color:var(--accent); }
.consult-box .btn{ margin-top:1.25rem; }

@media (min-width:860px){
  .consultation-grid{ grid-template-columns:1fr 1fr; }
}

/* =====================================================================
   FAQ ACCORDION
===================================================================== */
.faq-list{ margin-top:1.5rem;}
.faq{ border-bottom:1px solid var(--line); padding-block:1.1rem; }
.faq summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq p{ margin-top:.75rem; font-size:.9rem; color:var(--ink-soft); line-height:1.65; }





.faq .plus, .know .chev{
  display:inline-block;
  width:12px; height:12px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
  transition:transform .3s ease;
  flex-shrink:0;
}

.faq[open] .plus, .know[open] .chev{
  transform:rotate(-135deg);
}

/* =====================================================================
   CONTACT
===================================================================== */
.contact-grid{ margin-top:1.75rem; display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center; }
@media (min-width:860px){ .contact-grid{ grid-template-columns:1fr 1fr; } }

.contact-form-card{ border:1px solid var(--line); border-radius:18px; padding:1.5rem; margin-top: 1.5rem; }
.contact-form-card p{ margin-top:.5rem; font-size:.9rem; color:var(--ink-soft); }
.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1.5rem; }
.contact-form input, .contact-form textarea{
  grid-column:span 2; border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1rem; background:var(--cream); width:100%;
}
@media (min-width:480px){
  .contact-form input:not(.full){ grid-column:span 1; }
}
.contact-form .full{ grid-column:span 2; }
.contact-form button{ margin-top:.25rem; }

.whatsapp-card .btn{ margin-top:1rem; background:#d2f6ba; padding:1rem; margin-top: 2rem; }



/* =====================================================================
   ABOUT
===================================================================== */
.about{ text-align:center; }
.avatar{ margin-inline:auto; width:100px; height:100px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 4px var(--accent-tint); }
.about-title{ font-size:1.8rem; font-weight:600; margin-top:1.5rem; }
.about-bio{ margin-top:.75rem; color:var(--ink-soft); max-width:28rem; margin-inline:auto; line-height:1.6; }
.about-bio .group-note{ font-style: italic;}
.social-row{ justify-content:center; gap:.75rem; margin-top:1.5rem; flex-wrap:wrap; }

/* =====================================================================
   POLICY
===================================================================== */
.policy-grid{ margin-top:1.75rem; display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:860px){ .policy-grid{ grid-template-columns:1fr 1fr; } .policy-card-wide{ grid-column:span 2; } }

.policy-card{ border-radius:18px; background:var(--paper-deep); padding:1.5rem; }
.policy-card ul, .policy-card ol{ margin-top:.85rem; font-size:.9rem; color:var(--ink-soft); line-height:1.65; }
.policy-card li{ padding-left:1rem; position:relative; margin-top:.5rem; }
.policy-card ul li::before{ content:'—'; position:absolute; left:0; color:var(--accent); }
.policy-card strong{ color:var(--ink); }
.policy-tip{ margin-top:1rem; font-size:.78rem; color:var(--muted); line-height:1.6; }

/* =====================================================================
   FOOTER
===================================================================== */
.site-footer{ border-top:1px solid var(--line); padding-block:2.5rem; padding-bottom:7rem; }
.footer-inner{ display:flex; flex-direction:column; gap:1.25rem; align-items:center; text-align:center; font-size:.78rem; color:var(--muted); }
.footer-social{ display:flex; gap:1.25rem; }
.footer-social a:hover{ color:var(--accent); }
@media (min-width:768px){
  .site-footer{ padding-bottom:2.5rem; }
  .footer-inner{ flex-direction:row; justify-content:space-between; text-align:left; }
}
.footer-social a{ display:inline-flex; align-items:center; gap:.4rem; }
.footer-social img{ width:16px; height:16px; }

/* =====================================================================
   LIGHTBOX
===================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:999;
  background:rgba(15,11,9,.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.lightbox.active{ opacity:1; pointer-events:auto; }
.lightbox img{ max-height:90vh; max-width:90vw; object-fit:contain; border-radius:8px; opacity:0; transition:opacity .3s ease; }
.lightbox.active img{ opacity:1; }
.lightbox-close{ position:absolute; top:1.25rem; right:1.25rem; color:var(--cream); font-size:1.75rem; z-index:50; }
.lightbox-prev, .lightbox-next{ display:none; position:absolute; color:var(--cream); font-size:2.25rem; z-index:50; }
.lightbox-prev{ left:1.25rem; }
.lightbox-next{ right:1.25rem; }
@media (min-width:768px){ .lightbox-prev, .lightbox-next{ display:block; } }

/* =====================================================================
   REDUCED MOTION
===================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .hero-img{ opacity:1; transform:scale(1); }
  .hero-copy > *{ opacity:1; transform:none; }
}