/* ─────────────────────────────────────────
   RESET & ROOT
───────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; }

:root {
  --ink:       #1A1714;
  --ink-80:    rgba(26,23,20,.82);
  --ink-60:    rgba(26,23,20,.60);
  --ink-40:    rgba(26,23,20,.40);
  --ink-18:    rgba(26,23,20,.18);
  --ink-08:    rgba(26,23,20,.08);
  --paper:     #F7F4EF;
  --paper-b:   #EFEBE3;
  --paper-c:   #E6E1D6;
  --cream:     #FBF9F5;
  --white:     #FFFDFA;
  --gold:      #9B7A4E;
  --gold-lt:   rgba(155,122,78,.10);
  --gold-md:   rgba(155,122,78,.30);

  --nav-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-slow: cubic-bezier(.16,1,.3,1);
  --serif: 'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, sans-serif;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Touch devices: surface affordances that were hover-only */
@media (hover: none) {
  .av-item-dl { opacity: 1 !important; }
  .lightbox-download.show { display: inline-block !important; }
  .enter-btn-ring { border-color: var(--gold) !important; }
}

::selection { background: var(--gold); color: var(--cream); }

/* ─────────────────────────────────────────
   PAGES - single-page app routing
───────────────────────────────────────── */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }

/* ─────────────────────────────────────────
   LANDING
───────────────────────────────────────── */
#page-landing {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  transition: opacity 2s var(--ease-slow), transform 2s var(--ease-slow);
}
#page-landing.exit { opacity: 0; transform: scale(1.04); pointer-events: none; }
#page-landing.gone { display: none; }

.l-bg {
  position: absolute; inset: 0;
  background: url('../assets/landing.webp') 60% 55% / cover no-repeat;
  animation: slowZoom 22s ease-out forwards;
}
@keyframes slowZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.l-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(175deg,
      rgba(18,14,10,.55) 0%,
      rgba(18,14,10,.15) 38%,
      rgba(18,14,10,.12) 60%,
      rgba(18,14,10,.72) 100%);
}
.l-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .5; mix-blend-mode: overlay;
}

.l-frame {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  justify-content: space-between;
  height: 100%; padding: 48px 64px 56px;
}

.l-top {
  display: flex; align-items: center; justify-content: space-between;
  opacity: 0; animation: fadeUp 1.2s var(--ease-slow) .4s forwards;
}
.l-brand {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-family: var(--serif);
  font-size: 18px; font-weight: 400;
  color: inherit;
  text-decoration: none;
}
.l-brand-img {
  display: block;
  /* Logo PNG has ~25% transparent padding; oversize + crop with negative margin */
  height: 56px;
  width: auto;
  margin: -10px 0 -10px -14px;
  /* Landing has dark photographic backdrop — invert the black mark to read white */
  filter: invert(1);
}
.l-brand-text {
  font-family: var(--serif);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(254,253,250,.88);
}

.l-brand .dot { color: var(--gold); }
.l-links { display: flex; gap: 36px; list-style: none; }
.l-links a {
  font-size: 11.5px; font-weight: 300; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(254,253,250,.55); text-decoration: none;
  transition: color .4s var(--ease);
  position: relative; padding-bottom: 3px;
}
.l-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: rgba(254,253,250,.9);
  transition: width .5s var(--ease-slow);
}
.l-links a:hover { color: rgba(254,253,250,.95); }
.l-links a:hover::after { width: 100%; }

.l-center {
  opacity: 0; animation: fadeUp 1.4s var(--ease-slow) .8s forwards;
  max-width: 640px;
  padding: 36px 40px 40px;
  background: rgba(14,11,7,.34);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid rgba(254,253,250,.08);
  align-self: flex-start;
}
.l-eyebrow {
  display: flex; align-items: center; gap: 18px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .44em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
}
.l-eyebrow::before { content: none; }

.l-headline {
  font-family: var(--serif);
  font-size: clamp(54px, 8vw, 112px);
  font-weight: 300; line-height: .94;
  letter-spacing: -.03em;
  color: rgba(254,253,250,.98);
  text-shadow: 0 4px 24px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.5);
}
.l-headline em { font-style: italic; font-weight: 300; color: rgba(254,253,250,.58); }
.l-tagline {
  margin-top: 32px;
  font-family: var(--serif); font-style: italic;
  font-size: 21px; font-weight: 300;
  color: rgba(254,253,250,.55);
  max-width: 420px; line-height: 1.6;
}

.l-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  opacity: 0; animation: fadeUp 1.2s var(--ease-slow) 1.4s forwards;
}
.l-address {
  font-size: 11.5px; font-weight: 300; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(254,253,250,.38); line-height: 2.2;
}

/* Enter button */
.enter-btn {
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit;
}
.enter-btn-label {
  font-size: 11.5px; font-weight: 400; letter-spacing: .38em; text-transform: uppercase;
  color: rgba(254,253,250,.62); transition: color .45s; font-family: var(--sans);
}
.enter-btn-ring {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: background .5s, border-color .5s, transform .5s var(--ease);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.enter-btn-arrow {
  width: 14px; height: 14px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
  transition: border-color .45s;
}
.enter-btn:hover .enter-btn-label { color: rgba(254,253,250,.95); }
.enter-btn:hover .enter-btn-ring {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.06);
}
.enter-btn:hover .enter-btn-arrow { border-color: var(--cream); }

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h); padding: 0 56px;
  background: rgba(247,244,239,.88);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border-bottom: 1px solid var(--ink-08);
  transition: background .4s, border-color .4s;
}
.nav-logo {
  display: inline-flex; align-items: center;
  gap: 28px;
  cursor: pointer; justify-self: start;
  text-decoration: none;
  height: var(--nav-h);
}
.nav-logo-img {
  display: block;
  height: calc(var(--nav-h) * 0.7);
  width: auto;
  margin: 0 0 0 -6px;
  object-fit: contain;
  transition: opacity .3s var(--ease);
}
.nav-logo-text {
  font-family: var(--serif);
  font-size: 18px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: opacity .3s var(--ease);
}
.nav-logo-text .dot { color: var(--gold); }
.nav-logo:hover .nav-logo-img,
.nav-logo:hover .nav-logo-text { opacity: .72; }
.nav-center { display: flex; gap: 38px; list-style: none; justify-self: center; }
.nav-center a {
  --nav-ls: .24em;
  font-size: 11.5px; font-weight: 400; letter-spacing: var(--nav-ls); text-transform: uppercase;
  color: var(--ink-60); text-decoration: none;
  position: relative; padding: 4px 0;
  transition: color .3s; cursor: pointer;
}
.nav-center a::after {
  content: ''; position: absolute; bottom: -2px; left: 50%;
  width: 0; height: 1px; background: var(--gold); transition: width .4s var(--ease-slow), left .4s var(--ease-slow);
}
.nav-center a:hover,
.nav-center a.active { color: var(--ink); }
.nav-center a:hover::after,
.nav-center a.active::after { width: calc(100% - var(--nav-ls)); left: 0; }

/* The three lifestyle sessions, named in the nav itself. "Lifestyle" alone
   never told a visitor that graduations or matric dances live under it, so the
   parent stays clickable (it still opens the hub) and the submenu spells the
   sessions out on hover or keyboard focus. */
.nav-has-sub { position: relative; }
/* Invisible bridge across the gap, so the pointer can travel from the parent
   down into the panel without the :hover dropping. */
.nav-has-sub::after {
  content: ''; position: absolute; top: 100%; left: -24px; right: -24px; height: 24px;
}
.nav-sub {
  position: absolute; top: 100%; left: 50%;
  margin-top: 22px;
  transform: translateX(-50%) translateY(-6px);
  min-width: 208px;
  list-style: none;
  padding: 10px 0;
  background: rgba(247,244,239,.97);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--ink-08);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav-has-sub:hover .nav-sub,
.nav-has-sub:focus-within .nav-sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-center .nav-sub a {
  --nav-ls: .18em;
  display: block;
  padding: 11px 24px;
  font-size: 11px; letter-spacing: var(--nav-ls);
  color: var(--ink-60); white-space: nowrap;
}
/* The parent's sliding gold underline would look wrong on a stacked panel. */
.nav-center .nav-sub a::after { display: none; }
.nav-center .nav-sub a:hover,
.nav-center .nav-sub a:focus-visible { color: var(--gold); }

.nav-end { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav-enquire {
  font-size: 11.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--ink-40);
  padding: 11px 26px; cursor: pointer;
  background: none; font-family: var(--sans);
  transition: border-color .3s, background .3s, color .3s;
}
.nav-enquire:hover { border-color: var(--ink); background: var(--ink); color: var(--cream); }

/* Hamburger, hidden on desktop */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  background: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 11px;
  cursor: pointer;
  padding: 0; margin: 0;
  align-items: center; justify-content: center;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,253,250,.9),
    inset 0 -2px 3px rgba(26,23,20,.08),
    inset 0 0 0 1px rgba(255,253,250,.5),
    0 1px 2px rgba(26,23,20,.10),
    0 4px 10px rgba(26,23,20,.12);
  transition: box-shadow .2s var(--ease), transform .15s var(--ease);
}
.nav-burger:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,253,250,.9),
    inset 0 -2px 3px rgba(26,23,20,.08),
    inset 0 0 0 1px rgba(255,253,250,.5),
    0 2px 4px rgba(26,23,20,.14),
    0 6px 14px rgba(26,23,20,.16);
}
.nav-burger:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(26,23,20,.18),
    inset 0 -1px 0 rgba(255,253,250,.6),
    0 1px 2px rgba(26,23,20,.08);
}
.nav-burger span {
  display: block; width: 20px; height: 2px;
  background: var(--gold);
  border-radius: 1px;
  position: absolute;
  transition: transform .35s var(--ease), top .35s var(--ease), opacity .2s;
}
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 27px; }
.nav-burger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed; inset: 0;
  z-index: 99;
  background: var(--cream);
  display: none;
  flex-direction: column;
  padding: calc(var(--nav-h) + 40px) 36px 48px;
  opacity: 0;
  transition: opacity .35s var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.open { display: flex; opacity: 1; }
.nav-drawer ul { list-style: none; }
.nav-drawer li { border-bottom: 1px solid var(--ink-08); }
.nav-drawer a {
  display: block; padding: 22px 4px;
  font-family: var(--serif);
  font-size: 30px; font-weight: 300;
  letter-spacing: -.005em;
  color: var(--ink); text-decoration: none;
  cursor: pointer;
  transition: color .3s, padding .3s;
}
.nav-drawer a:active,
.nav-drawer a.active { color: var(--gold); padding-left: 14px; }
/* Lifestyle's three sessions in the drawer, behind a chevron. The label and
   the arrow are separate targets: tapping "Lifestyle" still opens the hub,
   tapping the arrow expands the list in place. */
.nav-drawer .drawer-row { display: flex; align-items: center; }
.nav-drawer .drawer-row > a { flex: 1; }
.drawer-toggle {
  flex: none;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; margin-right: -8px;
  color: var(--ink-60); cursor: pointer;
  transition: color .3s;
}
.drawer-toggle:active { color: var(--gold); }
.drawer-chev {
  display: block;
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .35s var(--ease);
}
.drawer-toggle.open .drawer-chev { transform: translateY(1px) rotate(-135deg); }

/* Collapsed by default. visibility keeps the hidden links out of the tab
   order, which max-height alone would not do. */
.drawer-sublist {
  max-height: 0; overflow: hidden;
  visibility: hidden;
  transition: max-height .4s var(--ease), visibility .4s;
}
.drawer-sublist.open { max-height: 280px; visibility: visible; }
.nav-drawer .drawer-sublist .nav-sub-item { border-bottom: 1px solid var(--ink-08); }
.nav-drawer .drawer-sublist .nav-sub-item:last-child { border-bottom: none; }
.nav-drawer a.drawer-sub {
  padding: 15px 4px 15px 26px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-60);
}
.nav-drawer a.drawer-sub:active { color: var(--gold); padding-left: 32px; }

.nav-drawer-meta {
  margin-top: auto;
  padding-top: 32px;
}
.nav-drawer-socials {
  display: flex; gap: 10px; margin-top: 4px;
}
.nav-drawer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ink-12);
  border-radius: 999px;
  color: var(--ink-80);
  text-decoration: none;
  transition: color .25s, border-color .25s, background .25s;
}
.nav-drawer-socials a:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.nav-drawer-socials svg { display: block; }

/* ─────────────────────────────────────────
   SHARED UTILITIES
───────────────────────────────────────── */
.page-wrap { padding-top: var(--nav-h); }

.section-eye {
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 36px;
}
.section-eye::before { content: ''; width: 28px; height: 1px; background: var(--gold); }

.ghost-btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; cursor: pointer;
  padding-bottom: 6px; border-bottom: 1px solid var(--ink-18);
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: var(--sans);
  transition: gap .4s var(--ease), border-color .3s, color .3s;
}
.ghost-btn:hover { gap: 22px; border-color: var(--gold); color: var(--gold); }

.divider { width: 100%; height: 1px; background: var(--ink-08); }

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

/* ─────────────────────────────────────────
   PAGE: ABOUT
───────────────────────────────────────── */
.about-hero {
  display: grid; grid-template-columns: 50% 50%;
  min-height: calc(100vh - var(--nav-h));
}
.about-img {
  position: relative; overflow: hidden;
  background: var(--paper-c);
}
.about-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 15%;
  display: block; filter: saturate(.82) brightness(.98) contrast(1.02);
}
.about-img-tag {
  position: absolute; bottom: 36px; left: 36px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  color: rgba(254,253,250,.55);
}

.about-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px 88px 96px 84px;
  background: var(--cream);
}
.about-h {
  font-family: var(--serif);
  font-size: clamp(50px, 4.6vw, 76px);
  font-weight: 300; line-height: 1.04;
  color: var(--ink); letter-spacing: -.02em;
  margin-bottom: 10px;
}
.about-h em { font-style: italic; color: var(--ink-40); font-weight: 300; }

.about-rule { width: 44px; height: 1px; background: var(--gold-md); margin: 36px 0; }

.about-copy {
  font-size: 17px; font-weight: 300; line-height: 2;
  color: var(--ink-80); max-width: 440px;
}
.about-copy p + p { margin-top: 1.2em; }

.about-quote {
  font-family: var(--serif);
  font-size: 22px; font-style: italic; font-weight: 300;
  color: var(--ink-60); line-height: 1.55;
  border-left: 1px solid var(--gold-md);
  padding-left: 22px; margin: 44px 0 48px;
  max-width: 420px;
}
.about-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--sans); font-size: 11.5px;
  font-style: normal; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-40);
}

.about-stats {
  display: flex; gap: 44px;
  padding-top: 36px; border-top: 1px solid var(--ink-08);
  margin-bottom: 48px;
}
.stat-n {
  font-family: var(--serif);
  font-size: 44px; font-weight: 300; color: var(--ink);
  line-height: 1; margin-bottom: 8px;
}
.stat-l {
  font-size: 11.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-40);
}

/* ─── About: Behind-the-lens feature ─── */
.about-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--cream);
  border-top: 1px solid var(--ink-08);
  border-bottom: 1px solid var(--ink-08);
}
.about-feature-img {
  position: relative;
  overflow: hidden;
  min-height: 560px;
}
.about-feature-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.about-feature-text {
  padding: 96px 72px;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.about-feature-h {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 300; line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
}
.about-feature-h em {
  font-style: italic; font-weight: 300;
  color: var(--gold);
}
.about-feature-copy {
  font-size: 16px; font-weight: 300;
  line-height: 1.7; color: var(--ink-60);
  max-width: 46ch;
}
.about-feature-cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 30px;
}
.alt-link {
  font-size: 11.5px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-40); text-decoration: none; cursor: pointer;
  transition: color .3s;
}
.alt-link:hover { color: var(--gold); }
@media (max-width: 900px) {
  .about-feature { grid-template-columns: 1fr; }
  .about-feature-img { min-height: 420px; }
  .about-feature-text { padding: 64px 28px; }
}

/* ─── About: Favourites band ───
   The payoff for "a few of my favourite moments" — a public, no-password set
   of frames from one wedding, sitting directly under the feature that names it. */
.favourites {
  background: var(--paper);
  border-bottom: 1px solid var(--ink-08);
}
.fav-head {
  max-width: 780px; margin: 0 auto;
  padding: 96px 64px 56px;
  text-align: center;
}
.fav-head .section-eye { justify-content: center; margin-bottom: 30px; }
.fav-h {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 300; line-height: 1.05; letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 22px;
}
.fav-h em { font-style: italic; font-weight: 300; color: var(--gold); }
.fav-note {
  font-size: 15px; font-weight: 300; line-height: 1.75;
  color: var(--ink-60);
  max-width: 56ch; margin: 0 auto;
}
.fav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 4px; padding: 4px;
  background: var(--paper);
}
.fav-item {
  overflow: hidden; aspect-ratio: 3/4; cursor: pointer;
  background: var(--paper-c);
}
.fav-item.wide { grid-column: span 2; aspect-ratio: 6/4; }
.fav-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) contrast(1.03);
  transition: transform 1.4s var(--ease-slow), filter .6s;
}
.fav-item:hover img { transform: scale(1.035); filter: saturate(.95); }
.fav-foot {
  padding: 46px 64px 90px;
  text-align: center;
}
.fav-foot .ghost-btn { justify-content: center; }
@media (max-width: 900px) {
  .fav-head { padding: 64px 28px 38px; }
  .fav-foot { padding: 36px 28px 64px; }
}

/* ─── About: Philosophy strip ─── */
.philosophy {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--paper);
  border-top: 1px solid var(--ink-08);
  border-bottom: 1px solid var(--ink-08);
}
.phil-item {
  padding: 80px 60px;
  border-right: 1px solid var(--ink-08);
}
.phil-item:last-child { border-right: none; }
.phil-num {
  font-family: var(--serif);
  font-size: 16px; font-weight: 400; font-style: italic;
  color: var(--gold); margin-bottom: 32px; letter-spacing: .08em;
}
.phil-title {
  font-family: var(--serif);
  font-size: 30px; font-weight: 400;
  color: var(--ink); margin-bottom: 18px;
  letter-spacing: -.01em;
}
.phil-body {
  font-size: 16px; font-weight: 300; line-height: 1.9;
  color: var(--ink-60);
}

/* Testimonial band */
.testimonial {
  padding: 140px 60px;
  background: var(--cream);
  display: flex; justify-content: center;
}
.t-inner { max-width: 880px; text-align: center; }
.t-quote {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 300; font-style: italic;
  line-height: 1.42; color: var(--ink);
  letter-spacing: -.005em;
  margin-bottom: 40px;
}
.t-quote::before, .t-quote::after {
  content: '"'; color: var(--gold); font-weight: 400;
}
.t-attr {
  font-size: 11.5px; font-weight: 400; letter-spacing: .38em; text-transform: uppercase;
  color: var(--ink-60);
}
.t-attr span { color: var(--gold); margin: 0 10px; }
.t-google { margin-top: 34px; font-size: 10.5px; letter-spacing: .26em; color: var(--ink-60); }

/* ─────────────────────────────────────────
   PAGE: EVENTS (also: shared tab styles used by Lifestyle)
───────────────────────────────────────── */
.portfolio-header {
  padding: 100px 64px 60px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px;
  border-bottom: 1px solid var(--ink-08);
}
.portfolio-h {
  font-family: var(--serif);
  font-size: clamp(54px, 6vw, 94px);
  font-weight: 300; line-height: 1;
  letter-spacing: -.025em; color: var(--ink);
}
.portfolio-h em { font-style: italic; color: var(--ink-40); font-weight: 300; }
.portfolio-sub {
  font-size: 17px; font-weight: 300; line-height: 2;
  color: var(--ink-60);
}

/* Category tabs */
.portfolio-tabs {
  display: flex; gap: 0;
  padding: 0 64px;
  border-bottom: 1px solid var(--ink-08);
  background: var(--cream);
  position: relative;
}
.ptab {
  --ptab-px: 28px; --ptab-ls: .28em;
  font-size: 11.5px; font-weight: 400; letter-spacing: var(--ptab-ls); text-transform: uppercase;
  color: var(--ink-40); padding: 22px var(--ptab-px) 20px;
  cursor: pointer; background: none; border: none;
  font-family: var(--sans);
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s, background .3s;
  position: relative; top: 1px;
  -webkit-tap-highlight-color: transparent;
}
/* Gold underline trimmed to the label width (matches the top nav links).
   100% spans the padded box, so subtract both side paddings + the trailing
   letter-spacing to land exactly under the text. */
.ptab::after {
  content: ''; position: absolute; bottom: -1px; left: 50%;
  width: 0; height: 1px; background: var(--gold);
  transition: width .4s var(--ease-slow), left .4s var(--ease-slow);
}
.ptab:hover { color: var(--ink); }
.ptab.active { color: var(--ink); }
.ptab:hover::after,
.ptab.active::after { width: calc(100% - 2 * var(--ptab-px) - var(--ptab-ls)); left: var(--ptab-px); }

/* Masonry-style grid */
.portfolio-grid {
  padding: 4px; display: none;
  columns: 3; column-gap: 4px;
  background: var(--paper);
}
.portfolio-grid.active { display: block; }
.grid-item {
  break-inside: avoid; margin-bottom: 4px;
  overflow: hidden; position: relative; cursor: pointer;
  background: var(--paper-c);
}
.grid-item img {
  width: 100%; display: block;
  filter: saturate(.82) brightness(.98) contrast(1.02);
  transition: transform 1.2s var(--ease-slow), filter .6s;
}
.grid-item:hover img { transform: scale(1.035); filter: saturate(.95) brightness(1.01); }

/* ─────────────────────────────────────────
   PAGE: WEDDINGS
───────────────────────────────────────── */
.weddings-hero {
  position: relative; height: 94vh; overflow: hidden;
}
.weddings-hero img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  filter: saturate(.82) contrast(1.03);
  animation: slowZoom 18s ease-out forwards;
}
.weddings-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(14,11,7,.18) 0%,
    rgba(14,11,7,.06) 45%,
    rgba(14,11,7,.62) 100%);
}
.weddings-hero-text {
  position: absolute; bottom: 72px; left: 72px; right: 72px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
/* Stacks the hero eyebrow (the page's h1) above the display headline, the way
   the landing and the standalone section heroes are built. */
.weddings-hero-main { display: flex; flex-direction: column; }
/* Light, not gold: unlike the other sections this eyebrow sits directly on the
   hero photograph with no panel behind it, and gold reads as mud against a
   bright sky. Matches .weddings-hero-side's treatment, with a shadow so it
   stays legible whatever the image behind it does. */
.weddings-hero-main .section-eye {
  margin-bottom: 20px;
  color: rgba(254,253,250,.88);
  text-shadow: 0 1px 14px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.6);
}
.weddings-hero-main .section-eye::before { background: rgba(254,253,250,.65); }
.weddings-hero-h {
  font-family: var(--serif);
  font-size: clamp(58px, 8vw, 124px);
  font-weight: 300; line-height: .95;
  letter-spacing: -.028em; color: rgba(254,253,250,.98);
}
.weddings-hero-h em { font-style: italic; color: rgba(254,253,250,.58); font-weight: 300; }
.weddings-hero-side {
  font-size: 12.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(254,253,250,.55); line-height: 2; text-align: right;
}

/* Weddings intro */
.weddings-intro {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--cream);
  border-bottom: 1px solid var(--ink-08);
}
.w-intro-text { padding: 110px 88px; display: flex; flex-direction: column; justify-content: center; }
.w-intro-h {
  font-family: var(--serif);
  font-size: clamp(36px, 3.8vw, 54px); font-weight: 300;
  line-height: 1.14; color: var(--ink); margin-bottom: 32px;
  letter-spacing: -.015em;
}
.w-intro-h em { font-style: italic; color: var(--ink-40); font-weight: 300; }
.w-intro-copy {
  font-size: 17px; font-weight: 300; line-height: 2;
  color: var(--ink-80); max-width: 400px; margin-bottom: 48px;
}
.w-intro-copy p + p { margin-top: 1.1em; }

.w-intro-imgs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--ink-08);
}
.w-intro-imgs img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) contrast(1.03); transition: filter .6s, transform 1s var(--ease-slow);
}
.w-intro-imgs img:hover { filter: saturate(.95); transform: scale(1.02); }

/* Featured Story (editorial) */
/* The stories stay as they were; only the image crop is shorter, which is
   where the height actually went. */
.featured {
  padding: 140px 0 120px;
  background: var(--paper);
}
.featured-head {
  text-align: center; margin-bottom: 80px;
  padding: 0 60px;
}
.featured-eye {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
}
.featured-eye::before, .featured-eye::after {
  content: ''; width: 36px; height: 1px; background: var(--gold);
}
.featured-h {
  font-family: var(--serif);
  font-size: clamp(40px, 4.2vw, 62px);
  font-weight: 300; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink);
}
.featured-h em { font-style: italic; color: var(--ink-40); }

.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 4px;
}
.story:nth-child(even) .story-img { order: 2; }
.story-img {
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--paper-c);
}
.story-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) contrast(1.03);
  transition: transform 2s var(--ease-slow);
}
.story:hover .story-img img { transform: scale(1.04); }
.story-text {
  padding: 80px 88px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--cream);
}
.story-place {
  font-size: 11.5px; font-weight: 400; letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 24px;
}
.story-couple {
  font-family: var(--serif);
  font-size: clamp(36px, 3.8vw, 54px);
  font-weight: 300; line-height: 1.1;
  color: var(--ink); letter-spacing: -.015em;
  margin-bottom: 28px;
}
.story-couple em { font-style: italic; color: var(--ink-40); }
.story-copy {
  font-size: 16.5px; font-weight: 300; line-height: 2;
  color: var(--ink-60); max-width: 420px; margin-bottom: 36px;
}
.story-copy:last-child { margin-bottom: 0; }


/* Investment teaser */
/* The weddings intro's handoff to the standalone page. */
.w-cta { display: flex; }

/* Closes the featured stories, then hands off. Centred, unlike the intro's
   copy of the same link, which sits in a left-aligned text column. */
.featured-close {
  max-width: 760px; margin: 80px auto 0;
  padding: 0 60px;
  text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 300; line-height: 1.65;
  color: var(--ink-60);
}
.featured-close + .w-cta { justify-content: center; margin-top: 36px; padding: 0 60px; }

/* ─────────────────────────────────────────
   LIFESTYLE HUB
   Three cards replacing what used to be tabbed galleries. Each opens its own
   page in a new tab, where that section's portfolio, pricing, FAQ and enquiry
   form live, so the photographs exist in one place only.
───────────────────────────────────────── */
.hub-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; padding: 4px;
  background: var(--paper);
}
.hub-card {
  display: flex; flex-direction: column;
  background: var(--cream);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: background .4s var(--ease);
}
.hub-card:hover { background: var(--white); }
.hub-img { overflow: hidden; aspect-ratio: 4/5; background: var(--paper-c); }
.hub-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) contrast(1.03);
  transition: transform 1.4s var(--ease-slow), filter .6s;
}
.hub-card:hover .hub-img img { transform: scale(1.04); filter: saturate(.95); }
.hub-body { padding: 44px 40px 48px; display: flex; flex-direction: column; flex: 1; }
/* The card's big line is the session name, not the poetic one. Scanning the
   hub has to answer "which of these is my shoot?" before it does anything
   else, and "First comes the yes." never answered that. The poetic line keeps
   its place directly underneath. */
.hub-title {
  font-family: var(--serif);
  font-size: clamp(32px, 2.8vw, 42px);
  font-weight: 300; line-height: 1.06; letter-spacing: -.02em;
  margin-bottom: 12px;
}
.hub-sub {
  font-family: var(--serif);
  font-size: clamp(19px, 1.55vw, 24px);
  font-style: italic;
  font-weight: 300; line-height: 1.35; letter-spacing: -.01em;
  color: var(--ink-60);
  margin-bottom: 24px;
}
/* The gold the eyebrow used to carry, moved onto the word the line turns on. */
.hub-sub em { font-style: italic; color: var(--gold); }
.hub-copy {
  font-size: 15px; font-weight: 300; line-height: 1.9;
  color: var(--ink-60); margin-bottom: 32px; flex: 1;
}
.hub-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 6px; border-bottom: 1px solid var(--ink-18);
  align-self: flex-start;
  transition: gap .4s var(--ease), border-color .3s, color .3s;
}
.hub-card:hover .hub-link { gap: 18px; border-color: var(--gold); color: var(--gold); }
.hub-arrow { font-size: 14px; line-height: 1; }

@media (max-width: 980px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-img { aspect-ratio: 16/10; }
  .hub-body { padding: 36px 28px 40px; }
}

/* ─────────────────────────────────────────
   PAGE: LIFESTYLE
───────────────────────────────────────── */
.lifestyle-header {
  padding: 110px 64px 70px;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: end; gap: 80px;
  border-bottom: 1px solid var(--ink-08);
}
.lh-left .section-eye { margin-bottom: 28px; }
.lifestyle-h {
  font-family: var(--serif);
  font-size: clamp(54px, 6vw, 90px);
  font-weight: 300; line-height: 1;
  letter-spacing: -.025em; color: var(--ink);
}
.lifestyle-h em { font-style: italic; color: var(--ink-40); font-weight: 300; }
.lh-right {
  font-size: 17px; font-weight: 300; line-height: 2;
  color: var(--ink-60); padding-bottom: 12px;
}

.lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 4px; padding: 4px;
  background: var(--paper);
}
.lifestyle-tab { display: none; }
.lifestyle-tab.active { display: grid; }
.lg-item {
  overflow: hidden; aspect-ratio: 3/4; cursor: pointer;
  background: var(--paper-c);
}
.lg-item.wide { grid-column: span 2; aspect-ratio: 6/4; }
.lg-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) contrast(1.03);
  transition: transform 1.4s var(--ease-slow), filter .6s;
}
.lg-item:hover img { transform: scale(1.035); filter: saturate(.95); }
/* Full-width row under each tab's grid, linking to that section's standalone page */
.lg-cta {
  grid-column: 1 / -1;
  display: flex; justify-content: center;
  padding: 52px 24px 32px;
}

/* ─────────────────────────────────────────
   PAGE: CLIENT GALLERIES
───────────────────────────────────────── */
.galleries-header {
  padding: 110px 64px 80px;
  text-align: center;
  border-bottom: 1px solid var(--ink-08);
  background: var(--cream);
}
.galleries-h {
  font-family: var(--serif);
  font-size: clamp(54px, 6vw, 90px);
  font-weight: 300; line-height: 1;
  letter-spacing: -.025em; color: var(--ink);
  margin-bottom: 28px;
}
.galleries-h em { font-style: italic; color: var(--ink-40); font-weight: 300; }
.galleries-sub {
  font-size: 17px; font-weight: 300; line-height: 1.9;
  color: var(--ink-60); max-width: 520px; margin: 0 auto;
}

.albums-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--paper);
}
.album-card {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper-c);
}
.album-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) contrast(1.03) brightness(.88);
  transition: transform 1.4s var(--ease-slow), filter .6s;
}
.album-card:hover img { transform: scale(1.035); filter: saturate(.95) brightness(.92); }
.album-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(14,11,7,.78) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 40px 36px;
  color: rgba(254,253,250,.95);
}
.album-lock {
  position: absolute; top: 24px; right: 24px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(14,11,7,.48); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: background .4s;
}
.album-card:hover .album-lock { background: var(--gold); }
.album-lock svg { width: 14px; height: 14px; fill: rgba(254,253,250,.9); }
.album-date {
  font-size: 11.5px; font-weight: 400; letter-spacing: .36em; text-transform: uppercase;
  color: rgba(254,253,250,.65); margin-bottom: 14px;
}
.album-title {
  font-family: var(--serif);
  font-size: 34px; font-weight: 300; line-height: 1.1;
  letter-spacing: -.01em; margin-bottom: 12px;
}
.album-title em { font-style: italic; color: rgba(254,253,250,.65); }
.album-place {
  font-size: 12.5px; font-weight: 300; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(254,253,250,.55);
}

/* Password modal */
.pwd-modal {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(14,11,7,.82);
  backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
  padding: 40px;
}
.pwd-modal.open { display: flex; animation: pwdFade .4s var(--ease); }
@keyframes pwdFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pwd-card {
  background: var(--cream); width: 100%; max-width: 480px;
  padding: 60px 52px;
  text-align: center;
  border: 1px solid var(--ink-08);
  animation: pwdSlide .6s var(--ease-slow);
}
@keyframes pwdSlide {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pwd-eye {
  font-size: 11.5px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 22px;
}
.pwd-h {
  font-family: var(--serif);
  font-size: 38px; font-weight: 300; line-height: 1.1;
  letter-spacing: -.01em; color: var(--ink);
  margin-bottom: 14px;
}
.pwd-h em { font-style: italic; color: var(--ink-40); }
.pwd-sub {
  font-size: 16px; font-weight: 300; line-height: 1.7;
  color: var(--ink-60); margin-bottom: 36px;
}
.pwd-input-row {
  display: flex; flex-direction: column; gap: 10px;
  text-align: left; margin-bottom: 12px;
}
.pwd-input {
  font-family: var(--sans); font-size: 17px; font-weight: 300;
  background: var(--white); border: 1px solid var(--ink-18);
  padding: 16px 18px; outline: none; color: var(--ink);
  letter-spacing: .08em;
  transition: border-color .3s;
  -webkit-appearance: none;
  text-align: center;
}
.pwd-input:focus { border-color: var(--gold); }
.pwd-error {
  font-size: 12.5px; color: #B04545; font-weight: 400; letter-spacing: .12em;
  min-height: 16px; margin-bottom: 20px;
}
.pwd-submit {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase;
  color: var(--cream); background: var(--ink);
  border: 1px solid var(--ink); padding: 16px 40px; cursor: pointer;
  transition: background .3s, border-color .3s;
  width: 100%;
}
.pwd-submit:hover { background: var(--gold); border-color: var(--gold); }
.pwd-close {
  position: absolute; top: 24px; right: 28px;
  font-size: 12.5px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(254,253,250,.55); cursor: pointer; background: none; border: none;
  font-family: var(--sans);
  transition: color .3s;
}
.pwd-close:hover { color: rgba(254,253,250,.92); }
.pwd-help {
  font-size: 12.5px; font-weight: 300; color: var(--ink-40);
  margin-top: 22px; line-height: 1.7;
}
.pwd-help a { color: var(--gold); text-decoration: none; }

/* Branded vestibule — per-album landing shown before the password modal */
.vest-modal {
  position: fixed; inset: 0; z-index: 350;
  background: var(--paper);
  display: none; overflow-y: auto;
}
.vest-modal.open { display: block; animation: pwdFade .5s var(--ease); }
.vest-close {
  position: fixed; top: 28px; right: 32px; z-index: 5;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-60);
  background: none; border: none; cursor: pointer;
  transition: color .3s;
}
.vest-close:hover { color: var(--ink); }
.vest-inner {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
}
.vest-image {
  background-size: cover; background-position: center;
  background-color: var(--paper-c);
  min-height: 100vh;
  position: relative;
}
.vest-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,23,20,.12) 0%, rgba(26,23,20,.02) 100%);
}
.vest-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 96px;
  background: var(--cream);
}
.vest-eye {
  font-size: 11.5px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
}
.vest-h {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300; line-height: 1.05;
  letter-spacing: -.015em; margin-bottom: 16px; color: var(--ink);
}
.vest-h em { font-style: italic; color: var(--ink-40); }
.vest-meta {
  font-size: 14px; color: var(--ink-60);
  letter-spacing: .08em; margin-bottom: 36px;
}
.vest-body {
  font-size: 16px; color: var(--ink-80); line-height: 1.85;
  margin-bottom: 48px; max-width: 460px;
}
.vest-enter {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 400; letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cream); background: var(--ink);
  border: 1px solid var(--ink); padding: 18px 44px; cursor: pointer;
  transition: background .3s, border-color .3s, gap .3s;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 14px;
}
.vest-enter:hover { background: var(--gold); border-color: var(--gold); gap: 22px; }
.vest-arrow {
  font-family: var(--serif); font-size: 18px; line-height: 1;
}
.vest-help {
  font-size: 12.5px; color: var(--ink-40);
  margin-top: 28px; line-height: 1.7;
}
.vest-help a { color: var(--gold); text-decoration: none; }

@media (max-width: 980px) {
  .vest-inner { grid-template-columns: 1fr; }
  .vest-image { min-height: 40vh; }
  .vest-content { padding: 56px 32px 80px; }
}

/* Loading + empty states for the gallery grid */
.albums-loading, .albums-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 32px;
  font-size: 15px; font-weight: 300; line-height: 1.8;
  color: var(--ink-40);
}

/* Album view (unlocked) */
.album-view {
  display: none;
  background: var(--paper);
}
.album-view.open { display: block; }
.album-view-header {
  padding: 90px 64px 60px;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px;
  border-bottom: 1px solid var(--ink-08);
  background: var(--cream);
}
.av-back {
  font-size: 11.5px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-60); cursor: pointer; background: none; border: none;
  font-family: var(--sans); padding: 8px 0;
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 12px;
  transition: color .3s, gap .3s;
}
.av-back:hover { color: var(--ink); gap: 18px; }
.av-eye {
  font-size: 11.5px; font-weight: 400; letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.av-title {
  font-family: var(--serif);
  font-size: clamp(42px, 4.6vw, 66px);
  font-weight: 300; line-height: 1.04;
  letter-spacing: -.02em; color: var(--ink);
  margin-bottom: 16px;
}
.av-title em { font-style: italic; color: var(--ink-40); }
.av-meta {
  font-size: 13.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-60);
}
.av-actions { display: flex; gap: 14px; }
.av-btn {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink); background: var(--cream);
  border: 1px solid var(--ink-40);
  padding: 14px 26px; cursor: pointer;
  transition: background .3s, border-color .3s, color .3s;
  display: inline-flex; align-items: center; gap: 12px;
}
.av-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.av-btn.primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.av-btn.primary:hover { background: var(--gold); border-color: var(--gold); }

/* Section tabs — only rendered for albums built with section subfolders.
   Sticks under the fixed nav so the client can move between parts of the day
   without scrolling back to the top of a long gallery. */
.av-sections {
  display: none;
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--cream);
  border-bottom: 1px solid var(--ink-08);
  padding: 0 64px;
}
.av-sections.show { display: block; }
.av-sections-inner {
  display: flex; align-items: stretch; gap: 34px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.av-sections-inner::-webkit-scrollbar { display: none; }
.av-tab {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-60); background: none; border: none;
  border-bottom: 1px solid transparent;
  padding: 22px 0 20px; cursor: pointer; white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.av-tab:hover { color: var(--ink); }
.av-tab.active { color: var(--ink); border-bottom-color: var(--gold); }
.av-tab-count {
  font-size: 9.5px; letter-spacing: .12em;
  color: var(--ink-40); margin-left: 8px;
  vertical-align: 2px;
}
.av-tab.active .av-tab-count { color: var(--gold); }

.av-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px; padding: 4px;
}
.av-item {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 4/5;
  background: var(--paper-c);
}
.av-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.85) contrast(1.02);
  transition: transform 1.2s var(--ease-slow), filter .5s;
}
.av-item:hover img { transform: scale(1.035); }
.av-item-dl {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(14,11,7,.55); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .4s, background .3s;
}
.av-item:hover .av-item-dl { opacity: 1; }
.av-item-dl:hover { background: var(--gold); }
.av-item-dl svg { width: 13px; height: 13px; fill: rgba(254,253,250,.95); }

/* ─────────────────────────────────────────
   PAGE: CONTACT
───────────────────────────────────────── */
.contact-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--nav-h));
}
.contact-left {
  padding: 100px 88px;
  background: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
}
.contact-h {
  font-family: var(--serif);
  font-size: clamp(50px, 5vw, 72px);
  font-weight: 300; line-height: 1.08;
  color: var(--ink); margin-bottom: 32px;
  letter-spacing: -.02em;
}
.contact-h em { font-style: italic; color: var(--ink-40); font-weight: 300; }
.contact-intro {
  font-size: 17px; font-weight: 300; line-height: 2;
  color: var(--ink-80); max-width: 420px; margin-bottom: 60px;
}
.contact-details { margin-bottom: 60px; }
.cd-row {
  display: flex; align-items: flex-start; gap: 24px;
  margin-bottom: 26px; padding-bottom: 26px;
  border-bottom: 1px solid var(--ink-08);
}
.cd-row:last-child { border-bottom: none; }
.cd-label {
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  color: var(--gold); min-width: 100px; padding-top: 3px;
}
.cd-val {
  font-size: 17px; font-weight: 300; color: var(--ink-80); line-height: 1.7;
}
.cd-val a { color: var(--ink-80); text-decoration: none; transition: color .3s; border-bottom: 1px solid transparent; }
.cd-val a:hover { color: var(--ink); border-bottom-color: var(--gold); }

.contact-socials { display: flex; gap: 18px; }
.social-chip {
  font-size: 11.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-60); border: 1px solid var(--ink-18);
  padding: 10px 22px; text-decoration: none;
  transition: border-color .3s, color .3s, background .3s;
}
.social-chip:hover { border-color: var(--ink); color: var(--ink); background: var(--ink-08); }

/* Contact form */
.contact-right {
  background: var(--paper-b);
  padding: 100px 88px;
  display: flex; flex-direction: column; justify-content: center;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-group { display: flex; flex-direction: column; gap: 10px; }
.form-group.full { grid-column: span 2; }
.form-label {
  font-size: 11.5px; font-weight: 400; letter-spacing: .30em; text-transform: uppercase;
  color: var(--ink-60);
}
.form-input, .form-select, .form-textarea {
  font-family: var(--sans);
  font-size: 16.5px; font-weight: 300; color: var(--ink);
  background: var(--cream); border: 1px solid var(--ink-18);
  padding: 15px 18px; outline: none;
  transition: border-color .3s, background .3s;
  -webkit-appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--gold); background: var(--white);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B7A4E' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.form-submit {
  grid-column: span 2; margin-top: 12px;
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase;
  color: var(--cream); background: var(--ink);
  border: 1px solid var(--ink); padding: 18px 36px; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.form-submit:hover { background: var(--gold); border-color: var(--gold); }
.form-note {
  font-size: 12.5px; font-weight: 300; color: var(--ink-40);
  line-height: 1.7; margin-top: 24px;
}
.form-note a {
  color: var(--ink-60); text-decoration: underline;
  text-decoration-color: var(--gold-md); text-underline-offset: 3px;
  transition: color .3s, text-decoration-color .3s;
}
.form-note a:hover { color: var(--ink); text-decoration-color: var(--gold); }

.contact-right-img {
  width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 44px;
}
.contact-right-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82) contrast(1.03);
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.site-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 42px 56px;
  border-top: 1px solid var(--ink-08);
  background: var(--paper);
}
.footer-brand {
  font-family: var(--serif);
  font-size: 17px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-60);
}
.footer-brand .dot { color: var(--gold); }
.footer-center {
  display: flex; gap: 28px; justify-content: center; list-style: none;
}
.footer-center a {
  font-size: 11.5px; font-weight: 300; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-40); text-decoration: none; transition: color .3s; cursor: pointer;
}
.footer-center a:hover { color: var(--ink); }
.footer-right {
  font-size: 11.5px; font-weight: 300; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-40); text-align: right;
}

/* ─────────────────────────────────────────
   LIGHTBOX
───────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(12,10,7,.97);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; animation: lbFade .5s var(--ease); }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox-img {
  max-width: 92vw; max-height: 92vh;
  object-fit: contain; display: block;
  animation: lbSlide .6s var(--ease-slow);
}
@keyframes lbSlide {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox-close {
  position: absolute; top: 28px; right: 32px;
  font-size: 12.5px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(254,253,250,.55); cursor: pointer; background: none; border: none;
  font-family: var(--sans);
  transition: color .3s;
}
.lightbox-close:hover { color: rgba(254,253,250,.95); }
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s;
}
.lightbox-prev { left: 28px; }
.lightbox-next { right: 28px; }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-4px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(4px); }
.lb-arrow {
  width: 14px; height: 14px;
  border-right: 1px solid rgba(254,253,250,.5);
  border-bottom: 1px solid rgba(254,253,250,.5);
  transition: border-color .3s;
}
.lightbox-prev .lb-arrow { transform: rotate(135deg); }
.lightbox-next .lb-arrow { transform: rotate(-45deg); }
.lightbox-prev:hover .lb-arrow,
.lightbox-next:hover .lb-arrow { border-color: rgba(254,253,250,.95); }
.lightbox-counter {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 300; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(254,253,250,.45);
}
.lightbox-download {
  position: absolute; bottom: 24px; right: 32px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(254,253,250,.65); cursor: pointer; background: none;
  border: 1px solid rgba(254,253,250,.25); padding: 10px 20px;
  font-family: var(--sans); text-decoration: none;
  transition: border-color .3s, color .3s, background .3s;
  display: none;
}
.lightbox-download.show { display: inline-block; }
.lightbox-download:hover { border-color: rgba(254,253,250,.75); color: rgba(254,253,250,.95); background: rgba(255,255,255,.06); }

/* ─────────────────────────────────────────
   TRANSITIONS & ANIMATIONS
───────────────────────────────────────── */
.page-fade { animation: pageFadeIn .7s var(--ease-slow) both; }

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */

/* Desktop mid-range: the logo image already carries the "e.k Photography"
   wordmark, so drop the redundant text label before it can collide with the
   centered nav links. The full wordmark returns on wide screens (>=1401px)
   and on mobile (<=980px, where the centre links are hidden). */
@media (min-width: 981px) and (max-width: 1440px) {
  .nav-logo-text { display: none; }
}

/* Tablet & below */
@media (max-width: 1100px) {
  .site-nav { padding: 0 32px; }
  .nav-center { gap: 22px; }
  .nav-center a { font-size: 11px; --nav-ls: .2em; }
  .about-text, .w-intro-text,
  .contact-left, .contact-right { padding: 70px 48px; }
}

@media (max-width: 980px) {
  :root { --nav-h: 64px; }

  /* Nav: reveal burger, hide desktop center links */
  .nav-center { display: none; }
  .nav-enquire { display: none; }
  .nav-burger { display: flex; }
  .site-nav { padding: 0 20px; grid-template-columns: 1fr auto; }

  /* Stack split-column sections */
  .about-hero,
  .weddings-intro,
  .contact-wrap,
  .lifestyle-header,
  .portfolio-header { grid-template-columns: 1fr; }

  .about-img { height: 78vw; max-height: 620px; }
  .about-text { padding: 64px 28px 72px; }
  .about-h { font-size: clamp(38px, 8.5vw, 52px); }
  .about-stats { gap: 28px; flex-wrap: wrap; }

  .w-intro-text { padding: 70px 28px; }
  .contact-left, .contact-right { padding: 70px 28px; }

  /* Wedding intro grid: define cell height so images don't fall back to natural size on iOS */
  .w-intro-imgs img { height: auto; aspect-ratio: 1 / 1; }

  /* Events + Lifestyle headers — single column, tighter rhythm */
  .portfolio-header {
    padding: 56px 24px 36px;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
  .portfolio-h { font-size: clamp(46px, 11.5vw, 68px); line-height: .98; }
  .portfolio-sub { font-size: 15px; line-height: 1.7; max-width: 100%; }

  /* Tabs: minimal centered text labels with a gold underline (no pills).
     Scrolls horizontally only if there are too many tabs to fit; "safe center"
     keeps them centered when they fit and prevents clipping when they don't. */
  .portfolio-tabs {
    padding: 4px 18px 0;
    gap: clamp(14px, 5vw, 44px);
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--ink-08);
  }
  .portfolio-tabs::-webkit-scrollbar { display: none; }
  .ptab {
    position: relative;
    font-size: clamp(9px, 2.6vw, 11px);
    letter-spacing: .1em;
    white-space: nowrap; flex: 0 1 auto;
    padding: 15px 4px; top: 0;
    border: none;
    background: none;
    color: var(--ink-40);
    min-height: 44px;
  }
  .ptab.active { background: none; color: var(--ink); }
  .ptab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: auto; height: 2px;
    background: var(--gold);
  }
  .ptab:hover { color: inherit; }

  .portfolio-grid { columns: 2; padding: 2px; column-gap: 2px; }
  .grid-item { margin-bottom: 2px; }
  .lifestyle-grid, .fav-grid { grid-template-columns: repeat(2,1fr); gap: 2px; padding: 2px; }
  .lg-item.wide, .fav-item.wide { grid-column: span 2; aspect-ratio: 4/3; }
  .av-grid { grid-template-columns: repeat(2,1fr); }
  .albums-grid { grid-template-columns: 1fr; }

  /* Stories stack and re-order */
  .story { grid-template-columns: 1fr; }
  .story:nth-child(even) .story-img { order: 0; }
  .story-text { padding: 48px 28px 60px; }
  .story-img { aspect-ratio: 4/4.5; }

  /* Footer */
  .site-footer { grid-template-columns: 1fr; gap: 20px; text-align: center; padding: 36px 24px; }
  .footer-center { justify-content: center; flex-wrap: wrap; gap: 18px 22px; }
  .footer-right { text-align: center; }

  /* Landing */
  .l-frame { padding: 28px 24px 32px; }
  .l-top { gap: 16px; }
  .l-brand { font-size: 15px; letter-spacing: .3em; }
  .l-links { display: none; }
  .l-headline { font-size: clamp(56px, 15vw, 96px); }
  .l-tagline { font-size: 18px; margin-top: 24px; }
  .l-center { padding: 40px 36px 44px; max-width: none; }
  .l-bottom { flex-direction: column; align-items: flex-start; gap: 32px; }
  .l-address { display: none; }
  .enter-btn { align-items: flex-start; align-self: flex-end; }

  /* Philosophy & other grids */
  .philosophy { grid-template-columns: 1fr; }
  .phil-item { padding: 54px 28px; border-right: none; border-bottom: 1px solid var(--ink-08); }
  .phil-item:last-child { border-bottom: none; }

  /* Weddings hero */
  .weddings-hero { height: 82vh; min-height: 560px; }
  .weddings-hero-text {
    left: 24px; right: 24px; bottom: 40px;
    flex-direction: column; gap: 24px; align-items: flex-start;
  }
  .weddings-hero-side { text-align: left; }

  /* Featured */
  .featured { padding: 90px 0 70px; }
  .featured-head { margin-bottom: 48px; padding: 0 28px; }
  .featured-close { margin-top: 56px; padding: 0 28px; font-size: clamp(20px, 5.4vw, 24px); }
  .featured-close + .w-cta { padding: 0 28px; margin-top: 30px; }

  /* Investment */

  /* Testimonial */
  .testimonial { padding: 100px 28px; }

  /* Lifestyle */
  .lifestyle-header { padding: 80px 28px 50px; gap: 32px; }

  /* Client galleries */
  .galleries-header { padding: 80px 28px 60px; }
  .album-card { aspect-ratio: 4/4.5; }
  .album-card-overlay { padding: 30px 24px; }

  /* Album view */
  .album-view-header {
    grid-template-columns: 1fr;
    padding: 48px 28px 36px;
    gap: 24px;
  }
  .av-actions { flex-wrap: wrap; gap: 10px; }
  .av-btn { flex: 1 1 calc(50% - 5px); min-width: 140px; justify-content: center; padding: 14px 18px; }
  /* Tabs keep their horizontal scroll on narrow screens — the padding becomes
     a lead-in so the first tab isn't flush against the edge. */
  .av-sections { padding: 0 28px; }
  .av-sections-inner { gap: 26px; }
  .av-tab { padding: 18px 0 16px; font-size: 11px; letter-spacing: .22em; }

  /* Contact */
  .contact-right-img { aspect-ratio: 16/10; margin-bottom: 32px; }
  .form-grid { gap: 16px; }

  /* Testimonial quote smaller */
  .t-quote { font-size: clamp(22px, 4.5vw, 30px); }

  /* Password modal */
  .pwd-card { padding: 48px 32px; max-width: 100%; }

  /* Prevent iOS zoom on focus; inputs must be ≥16px */
  .form-input, .form-select, .form-textarea, .pwd-input { font-size: 18px; }
}

/* Phones */
@media (max-width: 620px) {
  :root { --nav-h: 60px; }
  .site-nav { padding: 0 18px; }
  .nav-logo { gap: 18px; }
  .nav-logo-img { height: calc(var(--nav-h) * 0.68); margin: 0 0 0 -5px; }
  .nav-logo-text { font-size: 14px; letter-spacing: .22em; }

  .l-frame { padding: 22px 20px 28px; }
  .l-headline { font-size: clamp(48px, 16vw, 72px); line-height: .96; }
  .l-eyebrow { font-size: 10.5px; letter-spacing: .36em; margin-bottom: 18px; }
  .l-eyebrow::before { width: 28px; }
  .l-tagline { font-size: 16.5px; max-width: 320px; }
  .enter-btn-ring { width: 58px; height: 58px; }
  .enter-btn-label { font-size: 11px; letter-spacing: .3em; }

  .about-h { font-size: clamp(34px, 9vw, 46px); }
  .about-text { padding: 52px 22px 60px; }
  .about-quote { font-size: 19px; padding-left: 16px; margin: 32px 0 36px; }
  .stat-n { font-size: 36px; }

  .w-intro-h, .story-couple, .av-title, .featured-h, .pwd-h, .contact-h {
    font-size: clamp(30px, 8vw, 42px);
  }
  .weddings-hero-h { font-size: clamp(42px, 12vw, 68px); }

  .portfolio-h, .lifestyle-h, .galleries-h {
    font-size: clamp(40px, 11vw, 60px);
  }

  /* Keep 2-col for richer photo presence on phones */
  .portfolio-grid { columns: 2; padding: 2px; column-gap: 2px; }
  .lifestyle-grid, .fav-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 2px; }
  .lg-item.wide, .fav-item.wide { grid-column: span 2; aspect-ratio: 4/3; }
  .av-grid { grid-template-columns: 1fr; }

  /* Header gets even tighter */
  .portfolio-header { padding: 44px 20px 28px; gap: 14px; }
  .portfolio-h { font-size: clamp(40px, 11vw, 56px); }
  .portfolio-sub { font-size: 14px; }

  /* Tabs: keep centered labels tidy on small phones (tighter for 4 tabs) */
  .portfolio-tabs { padding: 2px 8px 0; gap: clamp(6px, 2.5vw, 22px); }
  .ptab { padding: 15px 2px; letter-spacing: .07em; }

  /* Footer compact */
  .site-footer { padding: 30px 22px; }
  .footer-center { gap: 14px 20px; }
  .footer-center a { font-size: 11px; }

  /* Album cards */
  .album-card { aspect-ratio: 4/5; }
  .album-title { font-size: 30px; }
  .album-card-overlay { padding: 26px 22px; }

  /* Password modal */
  .pwd-card { padding: 40px 24px; }
  .pwd-close { top: 18px; right: 20px; }

  /* Lightbox controls: larger touch targets, reposition */
  .lightbox-close { top: 16px; right: 18px; padding: 10px; }
  .lightbox-prev, .lightbox-next { width: 44px; height: 44px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-img { max-width: 96vw; max-height: 82vh; }
  .lightbox-counter { bottom: 20px; font-size: 10.5px; }
  .lightbox-download { bottom: 16px; right: auto; left: 50%; transform: translateX(-50%); padding: 10px 18px; }

  /* Contact */
  .contact-left, .contact-right { padding: 54px 22px; }
  .cd-row { flex-direction: column; gap: 8px; padding-bottom: 22px; margin-bottom: 22px; }
  .cd-label { min-width: 0; padding-top: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: auto; }
  .form-submit { grid-column: auto; }
  .contact-socials { flex-wrap: wrap; gap: 10px; }

  /* Section padding trims */
  .featured { padding: 70px 0 56px; }
  .testimonial { padding: 80px 22px; }
  .w-intro-text { padding: 56px 22px 48px; }

  /* Weddings hero */
  .weddings-hero { height: 72vh; min-height: 480px; }
  .weddings-hero-text { bottom: 32px; left: 20px; right: 20px; gap: 18px; }
  .weddings-hero-side { font-size: 11.5px; letter-spacing: .2em; }

  /* Nav drawer tightening */
  .nav-drawer { padding: calc(var(--nav-h) + 28px) 22px 32px; }
  .nav-drawer a { font-size: 27px; padding: 18px 4px; }
}

/* Tiny phones */
@media (max-width: 380px) {
  .l-headline { font-size: clamp(42px, 15.5vw, 58px); }
  .about-h, .w-intro-h, .portfolio-h,
  .lifestyle-h, .galleries-h, .contact-h,
  .weddings-hero-h, .featured-h { letter-spacing: -.01em; }
  .l-bottom { gap: 24px; }
  .section-eye { font-size: 10.5px; letter-spacing: .32em; }
  .nav-logo { gap: 22px; }
  .nav-logo-img { height: calc(var(--nav-h) * 0.7); margin: 0 0 0 -6px; }
  .nav-logo-text { font-size: 16px; letter-spacing: .24em; }
}

/* Landscape phones: shorter vertical layouts */
@media (max-height: 500px) and (max-width: 980px) {
  .weddings-hero { height: 100vh; }
  .l-center { padding: 16px 0; }
  .about-hero { min-height: auto; }
}

/* Use dynamic viewport units where supported (iOS Safari address bar) */
@supports (height: 100dvh) {
  .about-hero, .contact-wrap { min-height: calc(100dvh - var(--nav-h)); }
  .weddings-hero { height: 94dvh; }
  @media (max-width: 980px) { .weddings-hero { height: 82dvh; } }
  @media (max-width: 620px)  { .weddings-hero { height: 72dvh; } }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* intl-tel-input — make wrapper full-width and align with form-input look */
.iti { width: 100%; display: block; }
.iti__tel-input { width: 100%; }
.iti--separate-dial-code .iti__selected-dial-code { font-family: var(--sans); font-size: 14px; color: var(--ink); }
.iti__country-list { font-family: var(--sans); font-size: 14px; }

/* Success state for the contact form submit button */
.form-submit.is-success {
  background: #6B8C6B !important;
  border-color: #6B8C6B !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────
   UNDER-CONSTRUCTION CARD
───────────────────────────────────────── */
.uc-wrap {
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  padding: 120px 32px 80px;
  text-align: center;
}
.uc-card {
  max-width: 640px;
}
.uc-rule {
  width: 56px; height: 1px; background: var(--gold, #b08a4a);
  margin: 0 auto 28px;
}
.uc-eye {
  font-size: 11.5px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold, #b08a4a); margin-bottom: 22px;
}
.uc-h {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 300; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--ink, #1a1a1a);
  margin: 0 0 24px;
}
.uc-h em { font-style: italic; color: var(--gold, #b08a4a); }
.uc-copy {
  font-size: 15.5px; line-height: 1.7; color: #555;
  max-width: 480px; margin: 0 auto 32px;
}
.uc-back {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink, #1a1a1a);
  background: transparent; border: 1px solid currentColor;
  padding: 14px 26px; cursor: pointer;
  transition: background .25s, color .25s;
}
.uc-back:hover { background: var(--ink, #1a1a1a); color: var(--cream, #f6f1e8); }

/* Honeypot: a real visitor never sees this, a bot fills it in and
   Web3Forms drops the submission. Matches the section stylesheets. */
.botcheck { display: none; }