/* ============================================================
   N&A Photography — styles.css
   Editorial / analog-film aesthetic. Warm gold–bronze palette.
   Fonts: Fraunces (display) · Hanken Grotesk (body/UI) · Caveat (marks)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette (from brand kit) */
  --bronze:      #6B4A1F;
  --gold:        #C9972A;
  --gold-bright: #D9AE4A;
  --champagne:   #E8CE8C;
  --paper:       #FDFBF6;
  --linen:       #F4ECDB;   /* warm alt surface */
  --charcoal:    #2B2622;
  --ink:         #1A1613;   /* warm near-black (dark sections / film) */
  --ink-2:       #221D18;
  --blush:       #E1876B;

  --line: rgba(107,74,31,0.22);
  --line-strong: rgba(107,74,31,0.42);

  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mark: "Caveat", "Segoe Script", cursive;

  /* Spacing scale (spacious / marketing) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 40px;
  --s-5: 64px; --s-6: 96px; --s-7: 140px;

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);

  --radius: 2px;   /* keep corners crisp/editorial, not bubbly */
  --shadow: 0 18px 50px -24px rgba(43,38,34,0.45);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--champagne); color: var(--ink); }

/* Subtle film-grain overlay to warm the whole page */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 10vw, 140px); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }

/* Eyebrow label: — LABEL */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex; align-items: center; gap: 0.75em;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); display: inline-block; }
.eyebrow--center::after { content: ""; width: 34px; height: 1px; background: var(--gold); display: inline-block; }
.eyebrow--light { color: var(--champagne); }
.eyebrow--light::before, .eyebrow--light::after { background: var(--gold-bright); }

/* Handwritten photographer's mark */
.mark {
  font-family: var(--mark); font-weight: 600;
  color: var(--gold); font-size: 1.5rem; line-height: 1;
  display: inline-block; transform: rotate(-4deg);
}

/* Headings */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.03; letter-spacing: -0.015em; color: var(--ink); }
.h-xl { font-size: clamp(2.9rem, 8vw, 6rem); }
.h-lg { font-size: clamp(2.2rem, 5.2vw, 4rem); }
.h-md { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.serif-italic { font-style: italic; }
em, .accent-word { font-style: italic; color: var(--bronze); }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.6; color: #4a4038; max-width: 60ch; }
.measure { max-width: 62ch; }

/* Gold gradient text (used sparingly) */
.gold-text {
  background: linear-gradient(100deg, var(--bronze), var(--gold) 45%, var(--champagne));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 1.7em; border: 1px solid var(--ink);
  background: var(--bg); color: var(--fg);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  border-radius: var(--radius); position: relative; overflow: hidden;
  transition: color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  min-height: 48px;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, var(--bronze), var(--gold) 55%, var(--gold-bright));
  transform: translateY(101%); transition: transform .45s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--ink); border-color: var(--gold); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { color: var(--ink); }
.btn--on-dark { --bg: transparent; --fg: var(--paper); border-color: rgba(232,206,140,0.5); }
.btn--on-dark:hover { color: var(--ink); }
.btn__arrow { transition: transform .4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with animated rule */
.tlink {
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bronze); display: inline-flex; align-items: center; gap: 0.5em; padding-bottom: 3px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: left bottom;
  transition: background-size .4s var(--ease);
}
.tlink:hover { background-size: 100% 1.5px; }

/* ============================================================
   Header / Nav
   ============================================================ */
/* The bar is dark gray at all times, top of page and scrolled alike, so the
   gold logo always sits on a dark ground instead of washing out on the cream
   hero. Only the height and shadow change on scroll. */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding-block: 18px;
  background: rgba(43,38,34,0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(232,206,140,0.16);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo { height: 58px; width: auto; transition: height .4s var(--ease); }
/* Gold logo on the dark bar. To use the white version instead, swap which of
   these two is `block` (both files are already in assets/logo/). */
.brand__logo--white { display: none; }
.brand__logo--color { display: block; }
.brand__tag {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne);
  border-left: 1px solid rgba(232,206,140,0.3); padding-left: 12px; line-height: 1.3; max-width: 12ch;
}
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.nav a {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(253,251,246,0.88); position: relative; padding: 6px 0;
  transition: color .3s var(--ease);
}
.nav a:hover { color: var(--champagne); }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
/* A dark button on the dark bar would disappear, so the CTA is outlined. */
.header__cta { display: inline-flex; --bg: transparent; --fg: var(--paper); border-color: rgba(232,206,140,0.55); }
.nav-toggle { display: none; }

/* Scrolled state: same dark gray, just tighter with a lift shadow. */
.header.is-solid {
  background: rgba(43,38,34,0.99);
  box-shadow: 0 1px 0 rgba(232,206,140,0.16), 0 12px 30px -22px rgba(0,0,0,.7);
  padding-block: 10px;
}
.header.is-solid .brand__logo { height: 46px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; padding-top: 150px; padding-bottom: clamp(48px, 8vw, 96px);
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(232,206,140,0.35), transparent 55%),
    linear-gradient(180deg, var(--linen), var(--paper) 60%);
  overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px); align-items: center;
}
.hero__eyebrow { margin-bottom: 22px; }
.hero__title { margin-bottom: 26px; }
.hero__title .line { display: block; }
.hero__title .accent-word { position: relative; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  margin: 26px 0 30px; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--bronze);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Hero image cluster */
.hero__stage { position: relative; min-height: 460px; }
.hero__mark {
  position: absolute; z-index: 3; font-size: 1.7rem;
}
.hero__mark--1 { top: -6px; left: 6%; }
.hero__scroll {
  position: absolute; left: -34px; bottom: 30px; z-index: 4;
  writing-mode: vertical-rl; font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bronze); display: flex; align-items: center; gap: 12px;
}
.hero__scroll::after { content: ""; width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); }

/* Matted editorial photo frame */
.plate {
  background: var(--paper); padding: 12px; border: 1px solid var(--line);
  box-shadow: var(--shadow); position: relative;
}
.plate::before { /* thin bronze keyline */
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(107,74,31,0.35); pointer-events: none;
}
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate__num {
  position: absolute; bottom: 14px; right: 16px; z-index: 2;
  font-family: var(--sans); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.2em;
  color: var(--paper); background: rgba(26,22,19,0.72); padding: 4px 8px; border-radius: 2px;
}
.plate__cap {
  position: absolute; bottom: -14px; left: 18px; z-index: 3;
  background: var(--ink); color: var(--champagne); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 12px;
}

.hero__plate--main {
  position: relative; z-index: 2; width: 66%; aspect-ratio: 3/4; margin-left: auto;
}
/* Landscape inset: 3/2 matches the source photo so it isn't cropped, and the
   narrower main plate leaves most of this one visible rather than buried. */
.hero__plate--sub {
  position: absolute; z-index: 1; left: 0; bottom: 6%; width: 42%; aspect-ratio: 3/2;
  transform: rotate(-3deg);
}
.hero__plate--sub .plate__num { background: rgba(201,151,42,0.9); }

/* ============================================================
   Marquee ticker (film-edge text under hero)
   ============================================================ */
.ticker {
  background: var(--ink); color: var(--champagne); overflow: hidden; border-block: 1px solid rgba(232,206,140,.18);
}
.ticker__track { display: flex; gap: 3rem; white-space: nowrap; padding: 14px 0; width: max-content;
  animation: ticker 38s linear infinite; }
.ticker__track span { font-family: var(--display); font-style: italic; font-size: 1.05rem; letter-spacing: .02em; opacity: .9; }
.ticker__track .star { font-family: var(--sans); color: var(--gold); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ============================================================
   Intro / philosophy
   ============================================================ */
.intro__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.intro__quote { font-family: var(--display); font-size: clamp(1.7rem, 3.3vw, 2.7rem); line-height: 1.28; color: var(--ink); }
.intro__quote .gold-text { font-style: italic; }
.intro__side { position: relative; }
.intro__thumb { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--line); }
.intro__note { position: absolute; top: -18px; right: -6px; }
.stat-row { display: flex; gap: clamp(20px,4vw,54px); margin-top: 34px; flex-wrap: wrap; }
.stat { }
.stat__n { font-family: var(--display); font-size: clamp(2rem,4vw,3rem); color: var(--gold); line-height: 1; }
.stat__l { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); margin-top: 8px; }

/* ============================================================
   Two-photographer band (dark)
   ============================================================ */
.band-dark {
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(201,151,42,0.16), transparent 60%),
    var(--ink);
  color: var(--paper);
}
.band-dark h2, .band-dark h3 { color: var(--paper); }
.duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.duo__intro { max-width: 40ch; }
.duo__intro p { color: rgba(253,251,246,0.72); margin-top: 20px; }
.duo__big { font-family: var(--display); font-size: clamp(3rem, 7vw, 5.4rem); line-height: 1; }
.duo__photos { display: grid; grid-template-columns: 1fr; gap: 22px; }
/* single matted frame in the dark band (the team photos now live in About) */
.duo__plate { width: 88%; aspect-ratio: 4/5; margin-inline: auto; }
.duo__photo { position: relative; aspect-ratio: 3/2; overflow: hidden; border: 1px solid rgba(232,206,140,0.22); box-shadow: var(--shadow); }
.duo__photo:nth-child(1) { margin-right: 16%; }
.duo__photo:nth-child(2) { margin-left: 16%; }
.duo__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02); transition: transform 1s var(--ease); }
.duo__photo:hover img { transform: scale(1.05); }
.duo__photo figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 16px;
  background: linear-gradient(transparent, rgba(13,11,9,0.85));
  font-size: 0.78rem; letter-spacing: 0.04em;
}
.duo__photo .who { display: block; font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--champagne); }
.duo__list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.duo__list li { display: flex; gap: 14px; align-items: flex-start; color: rgba(253,251,246,0.82); font-size: 0.98rem; }
.duo__list svg { flex: none; margin-top: 3px; color: var(--gold); }

/* ============================================================
   Film-strip gallery (the centerpiece)
   ============================================================ */
.filmwrap { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 8vw, 110px); overflow: hidden; }
.filmwrap__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.filmwrap__head p { color: rgba(253,251,246,0.6); max-width: 46ch; margin-top: 14px; }

.filmstrip {
  position: relative; width: 100%;
  -webkit-user-select: none; user-select: none;
}
.filmstrip.is-grab { cursor: grab; }
.filmstrip.is-grabbing { cursor: grabbing; }
.filmstrip__track {
  display: flex; align-items: stretch; gap: 0; width: max-content;
  animation: film-scroll 419s linear infinite;
}
.filmstrip.is-paused .filmstrip__track { animation-play-state: paused; }
@keyframes film-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .filmstrip__track { animation: none; }
  .filmstrip { overflow-x: auto; }
}

/* one frame of film */
.frame {
  --h: clamp(300px, 42vh, 460px);
  position: relative; height: var(--h);
  background: #0d0b09; padding: 30px 10px; border-right: 2px solid #050403;
  flex: none;
}
.frame__img { position: relative; height: 100%; overflow: hidden; background: #201a15; }
.frame__img img { height: 100%; width: auto; max-width: none; display: block; transition: transform 1.1s var(--ease), filter .5s var(--ease); }
.frame:hover .frame__img img { transform: scale(1.06); }
.frame__no {
  position: absolute; top: 8px; left: 12px; z-index: 2;
  font-family: var(--sans); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.18em; color: var(--gold);
}
.frame__tag {
  position: absolute; bottom: 8px; left: 12px; z-index: 2;
  font-family: var(--mark); font-size: 1.05rem; color: var(--champagne); line-height: 1;
}
/* sprocket perforations */
.frame::before, .frame::after {
  content: ""; position: absolute; left: 0; right: 0; height: 16px;
  background-image: repeating-linear-gradient(to right, transparent 0 9px, rgba(244,236,219,0.9) 9px 20px, transparent 20px 29px);
  opacity: 0.9;
}
.frame::before { top: 7px; }
.frame::after { bottom: 7px; }

.filmwrap__foot { display: flex; justify-content: center; margin-top: 42px; }
.film-hint { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232,206,140,0.6); display: inline-flex; align-items: center; gap: 10px; }

/* ============================================================
   Services
   ============================================================ */
.services__head { max-width: 60ch; margin-bottom: 48px; }
/* even 2 x 3: six equal tiles, two across */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.svc {
  position: relative; overflow: hidden; background: var(--ink); border: 1px solid var(--line);
  min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--paper); text-decoration: none;
}
.svc__img { position: absolute; inset: 0; z-index: 0; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s var(--ease); filter: saturate(0.98) brightness(0.82); }
.svc:hover .svc__img img { transform: scale(1.07); filter: saturate(1.05) brightness(0.7); }
.svc::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,11,9,0) 30%, rgba(13,11,9,0.82)); }
.svc__body { position: relative; z-index: 2; padding: 24px; }
.svc__no { font-family: var(--sans); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.2em; color: var(--gold-bright); }
.svc__title { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 6px 0 4px; color: var(--paper); }
.svc__desc { font-size: 0.9rem; color: rgba(253,251,246,0.78); max-width: 34ch;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease); }
.svc:hover .svc__desc, .svc:focus-visible .svc__desc { max-height: 120px; opacity: 1; margin-top: 8px; }
.svc__badge {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--gold); color: var(--ink); padding: 5px 10px; border-radius: 2px;
}
.svc__arrow { position: absolute; top: 18px; left: 20px; z-index: 3; color: var(--champagne); opacity: 0; transform: translateY(-6px); transition: .4s var(--ease); }
.svc:hover .svc__arrow { opacity: 1; transform: translateY(0); }
/* pets placeholder tile */
.svc--soon { background: radial-gradient(120% 120% at 70% 0%, rgba(201,151,42,0.25), transparent), var(--ink-2); }
.svc--soon .svc__paw { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; color: rgba(232,206,140,0.16); }
.svc--soon .svc__paw svg { width: 46%; height: auto; }

/* ============================================================
   Process
   ============================================================ */
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 52px; }
.step { position: relative; padding-top: 30px; }
.step__n { font-family: var(--display); font-style: italic; font-size: 2.4rem; color: var(--gold); line-height: 1; }
.step__rule { height: 1px; background: var(--line); margin: 18px 0; position: relative; }
.step__rule::before { content: ""; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.step h3 { font-size: 1.25rem; margin-bottom: 8px; }
.step p { font-size: 0.95rem; color: #4a4038; }
.step__mark { font-family: var(--mark); color: var(--bronze); font-size: 1.1rem; display: inline-block; margin-top: 10px; transform: rotate(-3deg); }

/* ============================================================
   About
   ============================================================ */
.about { background: var(--linen); }
.about__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.about__media { position: relative; }
/* Nikki & Anthony sit here now, on the light surface, so the frame line is warm
   bronze rather than the gold used against the dark band. */
.about__media .duo__photo { border-color: var(--line-strong); }
.about h2 { margin: 14px 0 20px; }
.about__names { font-family: var(--mark); color: var(--gold); font-size: 2rem; line-height: 1; margin-top: 26px; }
.about__who { display: grid; gap: 18px; margin-top: 22px; }
.about__who p { font-size: 0.98rem; }
.about__who b { color: var(--ink); font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.1rem; }

/* ============================================================
   CTA / testimonial-ish invitation
   ============================================================ */
.invite { text-align: center; }
.invite__inner { max-width: 46ch; margin-inline: auto; }
.invite h2 { margin: 18px 0 20px; }
.invite p { color: #4a4038; margin-bottom: 30px; }
.invite__stars { color: var(--gold); letter-spacing: 6px; font-size: 0.9rem; }

/* ============================================================
   Contact / booking form
   ============================================================ */
.contact { background: var(--ink); color: var(--paper); }
.contact h2 { color: var(--paper); }
.contact__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(34px, 6vw, 84px); align-items: start; }
.contact__intro p { color: rgba(253,251,246,0.72); margin-top: 18px; max-width: 40ch; }
.contact__details { margin-top: 34px; display: grid; gap: 18px; }
.contact__row { display: flex; gap: 14px; align-items: center; }
.contact__row svg { color: var(--gold); flex: none; }
.contact__row a, .contact__row span { color: rgba(253,251,246,0.9); font-size: 0.98rem; }
.contact__socials { display: flex; gap: 12px; margin-top: 26px; }
.contact__socials a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(232,206,140,0.3); border-radius: 50%; color: var(--champagne); transition: .3s var(--ease); }
.contact__socials a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Spam-trap field: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); }
.field label .req { color: var(--blush); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.98rem; color: var(--paper);
  background: rgba(253,251,246,0.04); border: 1px solid rgba(232,206,140,0.22);
  padding: 14px 16px; border-radius: var(--radius); min-height: 50px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23E8CE8C' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
/* The open dropdown list is drawn by the operating system on a white sheet, so
   the options need their own dark text. Left to inherit the field's near-white
   colour they read white on white and the choices look blank. */
.field select option { color: var(--charcoal); background: var(--paper); }
.field input::placeholder, .field textarea::placeholder { color: rgba(253,251,246,0.4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(253,251,246,0.07); }
.form__actions { grid-column: 1/-1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__note { font-size: 0.8rem; color: rgba(253,251,246,0.55); }
.form__status { grid-column: 1/-1; font-size: 0.92rem; padding: 12px 0; min-height: 0; }
.form__status.ok { color: var(--champagne); }
.form__status.err { color: var(--blush); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--ink-2); color: rgba(253,251,246,0.7); padding-block: 64px 30px; border-top: 1px solid rgba(232,206,140,0.14); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; }
.footer__logo { height: 74px; width: auto; margin-bottom: 18px; }
.footer__blurb { max-width: 34ch; font-size: 0.92rem; }
.footer__blurb .mark { font-size: 1.4rem; }
.footer h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer ul a { font-size: 0.92rem; transition: color .3s var(--ease); }
.footer ul a:hover { color: var(--gold-bright); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(232,206,140,0.12); font-size: 0.78rem; color: rgba(253,251,246,0.5); }
.footer__bottom a:hover { color: var(--gold-bright); }

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .svc { min-height: 340px; }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .nav, .header__cta { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(232,206,140,0.4); border-radius: 3px; background: transparent; color: var(--champagne); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { min-height: 0; margin-top: 24px; }
  .hero__scroll { display: none; }
  .intro__grid, .duo__grid, .contact__grid, .about__grid { grid-template-columns: 1fr; }
  .duo__intro { max-width: none; }
  .about__grid { gap: 46px; }
  .about__media { order: -1; }
}
@media (max-width: 620px) {
  .svc-grid { grid-template-columns: 1fr; }
  .process__grid, .footer__grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .hero__plate--sub { position: relative; width: 60%; left: auto; bottom: auto; margin-top: 16px; transform: rotate(-2deg); }
  .hero__plate--main { width: 92%; }
  .footer__bottom { justify-content: flex-start; }
}

/* ============================================================
   Service pages (weddings / families / sports / portraits / pets)
   ============================================================ */
.page-hero {
  position: relative; padding-top: 150px; padding-bottom: clamp(40px, 6vw, 76px);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(232,206,140,0.35), transparent 55%),
    linear-gradient(180deg, var(--linen), var(--paper) 65%);
  overflow: hidden;
}
.page-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.page-hero__title { margin: 22px 0 24px; }
.page-hero__title .line { display: block; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 30px; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--bronze); }
.page-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.page-hero__meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.page-hero__stage { position: relative; min-height: 420px; display: grid; align-content: center; }
/* The hero photo is shown whole: the plate has no fixed ratio, and the image
   carries its own (set inline from the real pixel dimensions), so height follows
   the photo and nothing is cropped. Landscape shots get the full column width. */
.page-hero__plate { position: relative; z-index: 2; width: 82%; margin-left: auto; }
.page-hero__plate--wide { width: 100%; }
.page-hero__plate img { height: auto; object-fit: fill; }
.page-hero__plate--empty { aspect-ratio: 3/4; }
.page-hero__mark { position: absolute; z-index: 3; top: -4px; left: 4%; }
/* empty featured slot before photos are added */
.page-hero__plate--empty {
  display: grid; place-items: center; text-align: center; padding: 24px;
  background: var(--ink); color: var(--champagne); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.page-hero__plate--empty span { font-family: var(--mark); font-size: 1.7rem; color: var(--gold-bright); }

/* Breadcrumb / sibling-section pills */
.svc-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.svc-switch a {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bronze); border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 8px 16px; transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.svc-switch a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.svc-switch a[aria-current="page"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* Masonry gallery.
   The section fades out of the light hero and runs to black, so the photos sit
   on darkness and read brighter than they do on the cream surface. */
.gallery-wrap {
  padding-block: clamp(76px, 8vw, 118px) clamp(56px, 7vw, 96px);
  background: linear-gradient(180deg, var(--paper) 0, var(--ink) 76px, #0B0908 58%, #000 100%);
  color: var(--paper);
}
.gallery-wrap h2 { color: var(--paper); }
.gallery-wrap__head { max-width: 60ch; margin-bottom: 40px; }
.masonry { columns: 3 260px; column-gap: 16px; }
.masonry figure {
  break-inside: avoid; margin: 0 0 16px; position: relative; overflow: hidden;
  border: 1px solid rgba(232,206,140,0.18); background: var(--ink-2); cursor: zoom-in;
}
.masonry img { width: 100%; height: auto; display: block; transition: transform 1.1s var(--ease), filter .5s var(--ease); filter: saturate(1.01); }
.masonry figure:hover img { transform: scale(1.05); }
.masonry figure::after {
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(232,206,140,0.5);
  opacity: 0; transition: opacity .4s var(--ease);
}
.masonry figure:hover::after { opacity: 1; }

/* Empty gallery state (sits on the same dark gradient) */
.empty-gallery {
  text-align: center; padding: clamp(48px, 8vw, 100px) 20px;
  border: 1px dashed rgba(232,206,140,0.3); border-radius: var(--radius); background: rgba(253,251,246,0.03);
}
.empty-gallery__mark { font-family: var(--mark); color: var(--gold-bright); font-size: 2rem; }
.empty-gallery h3 { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 10px 0 12px; color: var(--paper); }
.empty-gallery p { color: rgba(253,251,246,0.72); max-width: 46ch; margin: 0 auto 26px; }
.empty-gallery .btn { --bg: transparent; --fg: var(--paper); border-color: rgba(232,206,140,0.5); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(13,11,9,0.94); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: clamp(16px, 4vw, 60px);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; height: auto; box-shadow: var(--shadow); }
.lightbox__btn {
  position: absolute; background: transparent; border: 1px solid rgba(232,206,140,0.4); color: var(--champagne);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; line-height: 1;
  transition: background .3s var(--ease), color .3s var(--ease); user-select: none;
}
.lightbox__btn:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.lightbox__close { top: clamp(16px, 3vw, 30px); right: clamp(16px, 3vw, 30px); }
.lightbox__prev { left: clamp(10px, 3vw, 30px); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(10px, 3vw, 30px); top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: clamp(16px, 3vw, 30px); left: 50%; transform: translateX(-50%);
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232,206,140,0.7); }
@media (max-width: 620px) { .lightbox__prev, .lightbox__next { width: 44px; height: 44px; font-size: 1.3rem; } }

@media (max-width: 860px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__stage { min-height: 0; margin-top: 20px; }
  .page-hero__plate { width: 68%; }
  /* landscape heroes need the width to stay legible on a phone */
  .page-hero__plate--wide { width: 92%; }
}
@media (max-width: 560px) { .masonry { columns: 1; } }

/* Mobile nav drawer */
.mnav { position: fixed; inset: 0; z-index: 200; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gutter);
  transform: translateX(100%); transition: transform .5s var(--ease); }
.mnav.open { transform: none; }
.mnav a { font-family: var(--display); font-size: 2rem; padding: 12px 0; border-bottom: 1px solid rgba(232,206,140,0.14); }
.mnav__close { position: absolute; top: 22px; right: var(--gutter); background: transparent; border: none; color: var(--champagne); font-size: 2rem; line-height: 1; }
.mnav__foot { margin-top: 30px; }