/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

/* ─── WordPress Admin Bar Offset ────────────────────────────
   The WP admin bar is 32px tall on desktop, 46px on mobile.
   When logged in, the fixed nav needs to sit below it.
   Visitors (not logged in) never see the admin bar, so
   they are not affected by any of these rules.
─────────────────────────────────────────────────────────── */
.admin-bar .nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .nav {
    top: 46px;
  }
}

/* Hero: subtract admin bar height so it stays full-screen */
.admin-bar .hero {
  height: calc(100dvh - 32px);
  min-height: calc(600px - 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar .hero {
    height: calc(100dvh - 46px);
  }
}

/* Page heroes on inner pages */
.admin-bar .page-hero {
  padding-top: calc(var(--nav-h) + 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar .page-hero {
    padding-top: calc(var(--nav-h) + 46px);
  }
}

/* About page split hero */
.admin-bar .about-hero {
  padding-top: calc(var(--nav-h) + 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar .about-hero {
    padding-top: calc(var(--nav-h) + 46px);
  }
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul { list-style: none; }

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --cream:        #F7F7F5;
  --linen:        #ECEAE4;
  --linen-dark:   #E0DED8;
  --rose:         #9CA3AF;
  --rose-dark:    #6B7280;
  --gold:         #B8975A;
  --gold-light:   #D4B483;
  --charcoal:     #1C1917;
  --charcoal-md:  #374151;
  --muted:        #6B7280;
  --border:       #E0E2E7;
  --white:        #FFFFFF;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --nav-h:        80px;
  --section-py:   clamp(80px, 10vw, 140px);
  --container:    1320px;
  --gutter:       clamp(24px, 5vw, 60px);

  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur:          300ms;
  --dur-slow:     600ms;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── Utilities ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose-dark);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.section { padding-block: var(--section-py); }

.section__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 16px;
}
.section__title em { font-style: italic; color: var(--rose-dark); }

.divider {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin-top: 32px;
}

/* ─── Scroll Reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: var(--gold);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all var(--dur) var(--ease-out);
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-primary svg { transition: transform var(--dur); }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--white);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all var(--dur) var(--ease-out);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); }

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: var(--charcoal);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all var(--dur) var(--ease-out);
}
.btn-dark:hover { background: var(--charcoal-md); }

.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all var(--dur) var(--ease-out);
}
.btn-ghost-dark:hover { background: var(--charcoal); color: var(--white); }

.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 36px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all var(--dur) var(--ease-out);
}
.btn-outline-gold:hover { background: var(--gold); color: var(--charcoal); }
.btn-outline-gold svg { transition: transform var(--dur); }
.btn-outline-gold:hover svg { transform: translateX(4px); }

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: var(--gold);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all var(--dur) var(--ease-out);
}
.btn-gold:hover { background: var(--gold-light); }

/* ─── Navigation ────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  overflow: visible; /* prevent logo descender clip */
  padding-inline: var(--gutter);
  /* Always solid — legible on all backgrounds */
  background: rgba(250, 248, 245, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
  transition: box-shadow var(--dur) var(--ease-out);
}

/* Scrolled state — same solid appearance */
.nav.scrolled {
  box-shadow: 0 1px 8px rgba(28,25,23,0.08);
}

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo — always dark */
.nav__logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  line-height: 1;
  padding-block: 4px; /* breathing room for descenders */
}

/* Smaller logo on mobile to prevent clipping */
@media (max-width: 768px) {
  .nav__logo { font-size: 22px; }
}

.nav__links { display: flex; align-items: center; gap: 40px; }
.nav__link {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur);
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 100%;
  height: 1px;
  background: var(--gold);
  transition: right var(--dur) var(--ease-out);
}
.nav__link:hover::after,
.nav__link.active::after { right: 0; }
.nav__link:hover,
.nav__link.active { color: var(--charcoal); }

.nav__cta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 28px;
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
  transition: all var(--dur) var(--ease-out);
}
.nav__cta:hover { background: var(--charcoal); color: var(--white); }

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--charcoal);
  transition: all var(--dur) var(--ease-out);
}
.nav__hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

.nav__mobile {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--cream);
  padding: 32px var(--gutter) 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  transform: translateY(-110%);
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: 99;
  border-bottom: 1px solid var(--border);
}
.nav__mobile.open { transform: translateY(0); }
.nav__mobile .nav__link { font-size: 18px; color: var(--charcoal); }
.nav__mobile .nav__cta {
  align-self: flex-start;
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
  margin-top: 8px;
}

/* ─── Footer ────────────────────────────────────────────────── */
.footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.6);
  padding-block: 80px 40px;
}
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__logo {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 16px;
}
.footer__desc { font-size: 14px; line-height: 1.7; max-width: 280px; }
.footer__heading {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 24px;
}
.footer__links { display: flex; flex-direction: column; gap: 14px; }
.footer__link { font-size: 14px; color: rgba(255,255,255,0.6); transition: color var(--dur); }
.footer__link:hover { color: var(--white); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 40px;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__copy { font-size: 13px; }
.footer__bottom-links { display: flex; gap: 32px; }
.footer__bottom-link { font-size: 13px; color: rgba(255,255,255,0.4); transition: color var(--dur); }
.footer__bottom-link:hover { color: var(--white); }

.footer-mini {
  background: var(--charcoal);
  color: rgba(255,255,255,0.5);
  padding: 32px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-mini__logo { font-family: var(--font-display); font-size: 22px; color: var(--white); }
.footer-mini__links { display: flex; gap: 28px; }
.footer-mini__link { font-size: 13px; transition: color var(--dur); }
.footer-mini__link:hover { color: var(--white); }
.footer-mini__copy { font-size: 12px; }

/* ─── Lightbox (shared) ─────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(28,25,23,0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox__img {
  max-width: 90vw; max-height: 90vh;
  object-fit: contain;
  transform: scale(0.92);
  transition: transform var(--dur-slow) var(--ease-out);
}
.lightbox.open .lightbox__img { transform: scale(1); }
.lightbox__close {
  position: fixed; top: 24px; right: 24px;
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer;
  transition: all var(--dur);
}
.lightbox__close:hover { background: rgba(255,255,255,0.1); }
.lightbox__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--dur);
}
.lightbox__nav:hover { background: rgba(255,255,255,0.1); }
.lightbox__prev { left: 24px; }
.lightbox__next { right: 24px; }
.lightbox__caption {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 18px;
  font-style: italic; font-weight: 300;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}

/* ─── Shared JS behaviours ──────────────────────────────────── */
@media (max-width: 768px) {
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
}

/* ─── Mobile Horizontal Scroll Fixes ───────────────────────────
   Prevent specific elements from causing horizontal overflow.
   overflow-x: hidden on html/body catches most cases but
   positioned/transformed elements can still escape — fix each
   known offender explicitly.
─────────────────────────────────────────────────────────────── */

/* Clip every top-level section so nothing bleeds out */
section,
header,
footer,
.marquee-strip,
.about-teaser,
.philosophy,
.galleries,
.testimonials,
.pricing,
.faq,
.contact,
.story,
.approach,
.cta-final,
.specialisms,
.event-types,
.clients-strip,
.legal-body,
.legal-cta,
.legal-hero {
  overflow-x: clip;
}

@media (max-width: 768px) {
  /* About page decorative gold border extends -16px outside right edge */
  .about-hero__img::after { display: none; }

  /* Ensure containers never exceed viewport */
  .container { max-width: 100vw; }

  /* Gallery grid: force single or two col, never overflow */
  .gallery-grid,
  .editorial-grid,
  .masonry {
    max-width: 100%;
  }

  /* Stats row wraps instead of overflowing */
  .philosophy__stats { flex-wrap: wrap; }

  /* Pricing grid columns stack */
  .pricing__grid { grid-template-columns: 1fr; }

  /* Testimonials stack */
  .testimonials__grid { grid-template-columns: 1fr; }

  /* Event type grid: 2 cols max */
  .event-types__grid { grid-template-columns: 1fr 1fr; }

  /* Story photos: single column */
  .story__photos { grid-template-columns: 1fr; }

  /* Gear list detail text wraps */
  .gear-item { flex-wrap: wrap; gap: 4px; }
  .gear-item__detail { text-align: left; }

  /* CTA actions stack */
  .cta-final__actions,
  .hero__actions,
  .page-hero__actions { flex-direction: column; align-items: flex-start; }

  /* Legal sidebar TOC hidden on mobile already, ensure card fits */
  .legal-sidebar__contact { padding: 20px; }
  .cta-final__card { padding: 28px; }

  /* Specialism cards stack */
  .specialisms__grid { grid-template-columns: 1fr; }

  /* Footer top stack */
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 16px; }
  .footer-mini { flex-direction: column; gap: 16px; }
  .footer-mini__links { flex-wrap: wrap; gap: 16px; }
}