/* ============================================================
   Studio H Photography — Design System
   Design: daniellaurence.studio
   Brand colours sampled directly from the existing Studio H logo.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — sampled from logo artwork */
  --burgundy:        #601931;
  --burgundy-deep:   #4A0015;
  --burgundy-hover:  #7A2440;
  --burgundy-tint:   #F7EFF2;
  --wordmark-grey:   #706F6F;
  --wordmark-dark:   #575656;

  /* Retained from existing site (brand continuity) */
  --taupe:           #C6BFA8;
  --taupe-light:     #DBD6C6;
  --sand:            #E8E1DE;

  /* Neutrals */
  --ink:             #2A2626;
  --body:            #55504F;
  --muted:           #696362; /* AA on white, paper and sand (>=4.5) */
  --rule:            #E6E1DF;
  --paper:           #FBF9F8;
  --white:           #FFFFFF;

  /* Type */
  --font-display: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-quote:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Scale */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --step-4:  clamp(2.3rem, 1.6rem + 3vw, 4.4rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4rem, 9vw, 8.5rem);
  --maxw: 1280px;
  --maxw-text: 68ch;

  --shadow-sm: 0 1px 3px rgba(42,38,38,.06), 0 6px 18px rgba(42,38,38,.05);
  --shadow-md: 0 4px 12px rgba(42,38,38,.08), 0 18px 48px rgba(42,38,38,.09);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; margin: 0; font-weight: 400; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
button { font: inherit; }

::selection { background: var(--burgundy); color: #fff; }

:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--burgundy); color: #fff; padding: .85rem 1.4rem;
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
.section { padding-block: var(--section); }
.section--sand { background: var(--sand); }
.section--paper { background: var(--paper); }
.section--tint { background: var(--burgundy-tint); }

/* ---------- 4. Typographic helpers ---------- */
.eyebrow {
  font-size: var(--step--1);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 0 0 1.1rem;
  display: block;
}
.eyebrow--muted { color: var(--muted); }
.eyebrow--light { color: var(--taupe); }

.h-display { font-size: var(--step-4); letter-spacing: .02em; text-transform: uppercase; }
.h-section { font-size: var(--step-3); letter-spacing: .06em; text-transform: uppercase; }
.h-sub     { font-size: var(--step-2); letter-spacing: .04em; }
.h-card    { font-size: var(--step-1); letter-spacing: .12em; text-transform: uppercase; }

.lede { font-size: var(--step-1); line-height: 1.65; color: var(--body); }
.prose { max-width: var(--maxw-text); }
.prose em { font-style: italic; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

.rule {
  width: 48px; height: 2px; background: var(--burgundy);
  border: 0; margin: 1.5rem 0;
}
.rule--center { margin-inline: auto; }

/* Signature line — Graham & Trixie */
.signature {
  font-family: var(--font-quote);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-style: italic;
  color: var(--burgundy);
  line-height: 1.2;
  margin-top: 1.6rem;
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1.05em 2.4em;
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--burgundy); color: #fff; border-color: var(--burgundy);
  box-shadow: 0 2px 10px rgba(96,25,49,.22);
}
.btn--primary:hover { background: var(--burgundy-hover); border-color: var(--burgundy-hover); box-shadow: 0 8px 24px rgba(96,25,49,.3); }

.btn--ghost { background: transparent; color: var(--burgundy); border-color: var(--burgundy); }
.btn--ghost:hover { background: var(--burgundy); color: #fff; }

.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn--light:hover { background: #fff; color: var(--burgundy); border-color: #fff; }

.btn--solid-light { background: #fff; color: var(--burgundy); border-color: #fff; }
.btn--solid-light:hover { background: var(--burgundy); color: #fff; border-color: #fff; }

.btn--sm { padding: .8em 1.6em; letter-spacing: .16em; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-row--center { justify-content: center; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
  color: var(--burgundy); text-decoration: none;
  padding-bottom: .35em;
  border-bottom: 1.5px solid var(--taupe);
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow::after { content: '→'; transition: transform .3s var(--ease); }
.link-arrow:hover { border-color: var(--burgundy); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ============================================================
   6. Header
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--rule); box-shadow: 0 1px 14px rgba(42,38,38,.06); }

.header__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
}
.header__logo { flex-shrink: 0; line-height: 0; }
.header__logo img { width: clamp(170px, 20vw, 235px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__link {
  font-size: var(--step--1);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--wordmark-dark);
  text-decoration: none;
  padding: .45em 0;
  position: relative;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--burgundy);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--burgundy); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--burgundy); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Portraits dropdown */
.nav__group { position: relative; display: inline-flex; }
.nav__sub {
  display: none;
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
  padding: .4rem 0;
  min-width: 210px;
  z-index: 200;
  border-radius: 3px;
}
.nav__sub::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--white);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  transform: translateX(-50%) rotate(45deg);
}
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub { display: block; }
.nav__sub__link {
  display: block;
  padding: .4rem 1.2rem;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__sub__link:hover { color: var(--burgundy); background: var(--paper); }
/* Drawer portrait sub-list */
.drawer__sub { padding: .25rem 0 .5rem 1.25rem; }
.drawer__sub__link {
  display: block;
  padding: .35rem 0;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  opacity: .75;
}
.drawer__sub__link:hover { color: var(--burgundy); opacity: 1; }

.header__actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  background: none; border: 0; cursor: pointer;
  padding: 0; position: relative;
}
.burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--ink); transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 84px 0 0; z-index: 99;
  background: var(--white);
  padding: 2rem var(--gutter) 3rem;
  display: flex; flex-direction: column; gap: .25rem;
  transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.drawer__link {
  font-size: 1.15rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: 1.05rem 0; border-bottom: 1px solid var(--rule);
}
.drawer__link[aria-current="page"] { color: var(--burgundy); }
.drawer__actions { margin-top: 2rem; display: grid; gap: .8rem; }

@media (max-width: 1080px) {
  .nav, .header__actions .btn--ghost { display: none; }
  .burger { display: block; }
}

/* The primary CTA stays visible at every width — it is the point of the site.
   Below 560px the logo and button compact rather than the button dropping out. */
@media (max-width: 560px) {
  .header__inner { min-height: 72px; gap: .5rem; }
  .header__logo img { width: 148px; }
  .header__actions { gap: .25rem; }
  .header__actions .btn--sm { padding: .7em 1em; letter-spacing: .08em; font-size: .72rem; }
  .burger { width: 40px; height: 40px; }
  .burger span { left: 9px; right: 9px; }
  .drawer { inset: 72px 0 0; }
}

/* ============================================================
   7. Hero
   ============================================================ */
/* Full-viewport hero: header + hero == exactly 100vh, so the image fills the
   screen and nothing is cropped by the sticky header. svh keeps mobile browser
   chrome from pushing the CTAs below the fold. */
.hero {
  position: relative;
  min-height: calc(100svh - 84px);
  display: grid; align-items: end;
  overflow: hidden;
  background: var(--wordmark-dark);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 38%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.8s var(--ease), transform 9s linear;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }

/* Neutral scrim, bottom-weighted only — no brand tint over the photography.
   Just enough to hold the CTAs legible; the image is otherwise untouched. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(24,20,21,0) 0%,
    rgba(24,20,21,0) 24%,
    rgba(24,20,21,.20) 44%,
    rgba(24,20,21,.46) 62%,
    rgba(24,20,21,.64) 82%,
    rgba(24,20,21,.74) 100%);
}
.hero__inner {
  position: relative;
  padding-bottom: clamp(4.5rem, 9vh, 7rem);
  display: flex; justify-content: center;
}
.hero__content { text-align: center; max-width: 920px; margin-inline: auto; }

.hero__title {
  color: #fff;
  font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3.6rem);
  letter-spacing: .03em; text-transform: uppercase;
  line-height: 1.12;
  /* balance keeps the last line from orphaning a short word like "in" */
  text-wrap: balance;
  max-width: 24ch; margin: 0 auto;
  text-shadow: 0 2px 30px rgba(24,20,21,.5);
}
/* Sub-line, set in the serif — the photography carries the rest. */
.hero__line {
  font-family: var(--font-quote); font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.9rem);
  line-height: 1.3;
  color: rgba(255,255,255,.95);
  margin: 1rem 0 clamp(1.75rem, 3vw, 2.4rem);
  text-shadow: 0 1px 24px rgba(24,20,21,.5);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.hero__dots {
  position: absolute; bottom: 1.9rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .6rem; z-index: 3;
}
@media (max-width: 560px) {
  .hero { min-height: 58svh; }
}
.hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4); border: 0; padding: 0; cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.hero__dot.is-active { background: #fff; transform: scale(1.35); }

/* Page hero (interior pages) */
.pagehero {
  position: relative; min-height: clamp(360px, 52vh, 520px);
  display: grid; align-items: center;
  background: var(--wordmark-dark) center/cover no-repeat;
  isolation: isolate;
}
/* Neutral scrim — interior heroes carry an h1, so they need more hold than the
   home hero, but no brand tint over the photography. */
.pagehero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(24,20,21,.30) 0%, rgba(24,20,21,.52) 100%);
}
.pagehero__inner { position: relative; text-align: center; padding-block: 4rem; }
.pagehero__title { color: #fff; font-size: var(--step-4); letter-spacing: .12em; text-transform: uppercase; }
.pagehero__quote {
  font-family: var(--font-quote); font-style: italic;
  font-size: clamp(1.1rem, .95rem + .8vw, 1.6rem);
  color: rgba(255,255,255,.92); margin-top: 1rem;
}
.pagehero__attrib {
  font-size: var(--step--1); letter-spacing: .3em; text-transform: uppercase;
  color: var(--taupe); margin-top: .9rem;
}

/* Breadcrumb */
.crumbs { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); background: var(--white); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.crumbs li { font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--taupe); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--burgundy); }

/* ============================================================
   8. Service cards — the primary CTA layer
   ============================================================ */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--rule); }
@media (max-width: 1180px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .services { grid-template-columns: 1fr; } }

.service {
  position: relative; display: block; text-decoration: none;
  min-height: clamp(340px, 30vw, 460px);
  overflow: hidden; background: var(--wordmark-dark);
  isolation: isolate;
}
.service__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 1.2s var(--ease);
}
/* Neutral scrim — no brand tint over the photography. */
.service::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(24,20,21,0) 30%, rgba(24,20,21,.28) 58%, rgba(24,20,21,.72) 100%);
  transition: background .5s var(--ease);
}
.service:hover .service__img { transform: scale(1.07); }
.service:hover::after {
  background: linear-gradient(180deg, rgba(24,20,21,.10) 20%, rgba(24,20,21,.42) 58%, rgba(24,20,21,.82) 100%);
}

.service__body {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  color: #fff;
}
/* Number and title share one line — matches the source copy, "01. WEDDINGS".
   Sized so the longest label (COMMERCIAL) fits a 4-up tile at 1280px. */
.service__name {
  color: #fff; font-size: clamp(1.15rem, 0.82rem + 1.1vw, 1.7rem);
  letter-spacing: .13em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: .5em;
}
.service__num {
  font-size: var(--step--1); letter-spacing: .18em;
  color: var(--taupe); flex-shrink: 0;
}
.service__more {
  margin-top: 1.2rem;
  font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6em;
  color: #fff;
  opacity: .85;
  transition: opacity .3s var(--ease), gap .3s var(--ease);
}
.service__more::after { content: '→'; transition: transform .3s var(--ease); }
.service:hover .service__more { opacity: 1; }
.service:hover .service__more::after { transform: translateX(5px); }

/* ============================================================
   8b. Expandable service summaries (home page)
   Collapsed by default so a visitor scanning for photography isn't made to
   scroll past three long essays. Summary + image always visible.
   ============================================================ */
.expando__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.expando__body > div { overflow: hidden; }
.expando__body[data-open="true"] { grid-template-rows: 1fr; }
.expando__body p:first-child { padding-top: 1.15em; }

.expando__toggle {
  margin-top: 1.5rem;
  display: inline-flex; align-items: center; gap: .6em;
  background: none; border: 0; padding: 0 0 .35em; cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
  color: var(--burgundy);
  border-bottom: 1.5px solid var(--taupe);
  transition: border-color .3s var(--ease);
}
.expando__toggle:hover { border-color: var(--burgundy); }
.expando__toggle::after {
  content: '+'; font-size: 1.1em; line-height: 1;
  transition: transform .3s var(--ease);
}
.expando__toggle[aria-expanded="true"]::after { content: '–'; }
/* Service-page intro: one lede paragraph, centred, everything else behind
   Read more — so the galleries start as high up the page as possible. */
.intro-lead {
  max-width: 78ch; margin-inline: auto; text-align: center;
}
.intro-lead .lede { font-size: var(--step-1); }
.intro-lead .expando__body { text-align: left; }
.intro-lead .expando__body p { max-width: 68ch; margin-inline: auto; }

.expando__toggle .label-more { display: inline; }
.expando__toggle .label-less { display: none; }
.expando__toggle[aria-expanded="true"] .label-more { display: none; }
.expando__toggle[aria-expanded="true"] .label-less { display: inline; }

/* ============================================================
   9. Split blocks (image + text)
   ============================================================ */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
}
.split--reverse .split__media { order: 2; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow-md); }
.split__media--wide img { aspect-ratio: 3/2; }
.split__media--square img, .split__media--square .placeholder { aspect-ratio: 1/1; }

/* Placeholder for artwork still to be supplied */
.placeholder {
  width: 100%; display: grid; place-items: center; text-align: center;
  background: #DEDAD8; border: 1px dashed #A9A2A0;
  color: var(--wordmark-dark);
  font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; line-height: 2;
  padding: 1.5rem;
}
.split__media::before {
  content: ''; position: absolute; inset: auto auto -18px -18px;
  width: 55%; height: 55%; border: 1.5px solid var(--taupe); z-index: -1;
}
.split--reverse .split__media::before { inset: auto -18px -18px auto; }

/* ============================================================
   10. Galleries
   ============================================================ */
.masonry { columns: 3; column-gap: 12px; }
@media (max-width: 900px) { .masonry { columns: 2; } }
@media (max-width: 520px) { .masonry { columns: 1; } }
.masonry__item {
  break-inside: avoid; margin-bottom: 12px;
  display: block; border: 0; padding: 0; background: none; cursor: zoom-in;
  width: 100%; position: relative; overflow: hidden; line-height: 0;
}
.masonry__item img { width: 100%; transition: transform .8s var(--ease), filter .5s var(--ease); }
.masonry__item::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(96,25,49,0); transition: background .4s var(--ease);
}
.masonry__item:hover img { transform: scale(1.05); }
.masonry__item:hover::after { background: rgba(96,25,49,.28); }

/* Category tiles (portraits) */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 980px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cats { grid-template-columns: 1fr; } }
.cat {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  display: grid; place-items: center; text-decoration: none;
  background: var(--wordmark-dark); isolation: isolate;
}
.cat img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 1s var(--ease);
}
.cat::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(42,26,32,.42); transition: background .4s var(--ease);
}
.cat:hover img { transform: scale(1.08); }
.cat:hover::after { background: rgba(96,25,49,.62); }
.cat__label {
  position: relative; color: #fff; text-align: center;
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
  padding: .5rem 1rem; line-height: 1.5;
}

/* Gallery filter chips */
.chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.chip {
  border: 1.5px solid var(--taupe); background: transparent;
  padding: .55em 1.25em; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: var(--step--1);
  letter-spacing: .13em; text-transform: uppercase; color: var(--body);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover { border-color: var(--burgundy); color: var(--burgundy); }
.chip[aria-pressed="true"] { background: var(--burgundy); border-color: var(--burgundy); color: #fff; }
.chip__count { opacity: .65; font-size: .85em; margin-left: .35em; }
.chips-note { text-align: center; font-size: .9rem; color: var(--muted); margin: -0.75rem 0 2rem; }

/* Show more control + hidden gallery items */
.masonry__item[hidden] { display: none; }
.gallery-actions { text-align: center; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,10,14,.96);
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; box-shadow: var(--shadow-md); }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  color: #fff; width: 50px; height: 50px; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center; font-size: 1.3rem;
  transition: background .25s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--burgundy); border-color: var(--burgundy); }
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__nav--prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: var(--step--1); letter-spacing: .2em;
}

/* ============================================================
   11. Pricing / inclusions
   ============================================================ */
.price-hero {
  background: var(--burgundy); color: #fff;
  padding: clamp(2rem, 4vw, 3.2rem);
  text-align: center; border-radius: 3px;
  box-shadow: var(--shadow-md);
}
.price-hero p { color: rgba(255,255,255,.95); }
.price-hero .eyebrow { color: var(--taupe); }

/* The two figures ARE the content — most visitors come to a pricing
   section for the number, so the number leads. */
.price-figs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: 1.9rem 0 1.6rem;
}
.price-fig__num {
  font-family: var(--font-quote);
  font-size: clamp(2.7rem, 2rem + 3.4vw, 4.4rem);
  line-height: 1; color: #fff; display: block;
}
.price-fig__label {
  display: block; margin-top: .7rem;
  font-size: var(--step--1); letter-spacing: .26em; text-transform: uppercase;
  color: var(--taupe);
}
.price-hero__note { font-size: .95rem; color: rgba(255,255,255,.82); max-width: 52ch; margin-inline: auto; }

/* Hierarchy comes from the type and a hairline rule, not from bullet ornament. */
.includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.includes li {
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule);
  break-inside: avoid;
}
.includes strong {
  display: block; font-weight: 400; color: var(--ink);
  letter-spacing: .08em; text-transform: uppercase; font-size: 1rem;
  margin-bottom: .2rem;
}
.includes span { display: block; font-size: .95rem; color: var(--body); }

/* Single column — the Optional extras grid below already works in columns, so
   this list reads as a straight, scannable sequence against it. Lead phrase and
   detail sit either side of the measure, tied by a hairline. */
.includes--list {
  max-width: 720px; margin-inline: auto;
  gap: 0;
}
.includes--list li {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline;
  padding: 1.25rem 0;
}
.includes--list li:last-child { border-bottom: 0; }
.includes--list strong { margin-bottom: 0; font-size: 1.1rem; }
.includes--list span { text-align: right; color: var(--body); font-size: .95rem; }
@media (max-width: 640px) {
  .includes--list li { grid-template-columns: 1fr; gap: .2rem; }
  .includes--list span { text-align: left; }
}

/* What's always included IS the offer, so it outranks everything below it: a
   white panel the width of the price block, carrying the same elevation and the
   burgundy edge. It reads as one unit with the price above it. The optional
   extras are deliberately flatter: see .addon. */
.includes-panel {
  max-width: 820px; margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--burgundy);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.4rem, 4vw, 3rem);
}

/* Session fees (portraits) */
.fees { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.fee {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  background: var(--white); border: 1px solid var(--rule); border-radius: 2px;
  padding: 1.15rem 1.4rem;
}
.fee__name { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.fee__price { font-family: var(--font-quote); font-size: 1.35rem; color: var(--burgundy); white-space: nowrap; }

/* Secondary to the inclusions above, and styled to stay there: no card, no
   elevation, no burgundy edge, no hover lift, just a hairline and a quieter
   figure. Things to consider after the offer has landed, not the offer. */
.addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 2rem 2.5rem; }
.addon {
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--rule);
}
.addon__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap;
}
.addon__name {
  font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.addon__price {
  font-family: var(--font-quote); font-size: 1.2rem; color: var(--burgundy);
  text-align: right; flex-shrink: 0; max-width: 55%;
}
.addon p { font-size: .9rem; line-height: 1.7; margin: 0; color: var(--muted); }

/* ============================================================
   12. Testimonials
   ============================================================ */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 940px) { .quotes { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } }
.quote {
  background: var(--white); padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 2px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  position: relative;
}
.quote::before {
  content: '"';
  font-family: var(--font-quote); font-size: 5rem; line-height: 1;
  color: var(--taupe); position: absolute; top: .6rem; right: 1.4rem;
  opacity: .55;
}
/* Cormorant runs small for its point size, so testimonials are set noticeably
   larger than body copy — they are read, not skimmed. */
.quote__text {
  font-family: var(--font-quote); font-size: 1.34rem; line-height: 1.62;
  color: var(--body); font-style: italic; flex: 1; position: relative;
}
.quote__author {
  margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule);
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--burgundy);
}

/* ============================================================
   13. FAQ
   ============================================================ */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; text-align: left;
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--ink); letter-spacing: .01em;
  transition: color .25s var(--ease);
}
.faq__q:hover { color: var(--burgundy); }
.faq__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; background: var(--burgundy);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.faq__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__icon::after  { left: 7px; top: 0; height: 16px; width: 2px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.6rem; max-width: 64ch; }

/* ============================================================
   14. Forms
   ============================================================ */
.form { display: grid; gap: 1.35rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .5rem; }
.field label {
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--wordmark-dark);
}
.field .req { color: var(--burgundy); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--white); color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(96,25,49,.11);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23601931' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 11px;
  padding-right: 2.8rem;
}

/* ============================================================
   15. Newsletter
   ============================================================ */
.newsletter { background: var(--burgundy); color: #fff; }
.newsletter__inner { text-align: center; max-width: 760px; margin-inline: auto; }
.newsletter__title { color: #fff; font-size: var(--step-3); letter-spacing: .1em; text-transform: uppercase; }
.newsletter__sub {
  color: var(--taupe); font-size: var(--step--1);
  letter-spacing: .22em; text-transform: uppercase; margin: 1rem 0 2.4rem; line-height: 1.9;
}
.newsletter__form { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: .75rem; align-items: end; }
@media (max-width: 860px) { .newsletter__form { grid-template-columns: 1fr; } }
.newsletter__form input {
  padding: .95rem 1.1rem; border: 1px solid rgba(255,255,255,.3); border-radius: 2px;
  background: rgba(255,255,255,.08); color: #fff; font-family: var(--font-body); font-size: 1rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  width: 100%;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,.6); }
.newsletter__form input:focus {
  outline: none; border-color: #fff; background: rgba(255,255,255,.15);
}

/* ============================================================
   16. Blog cards
   ============================================================ */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 940px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .posts { grid-template-columns: 1fr; } }

.post {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--white); border: 1px solid var(--rule); border-radius: 2px;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.post__media { overflow: hidden; aspect-ratio: 8/5; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post:hover .post__media img { transform: scale(1.06); }
.post__body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.post__cat { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--burgundy); margin-bottom: .75rem; }
.post__title {
  font-size: 1.02rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); line-height: 1.45; margin-bottom: .85rem;
  transition: color .25s var(--ease);
}
.post:hover .post__title { color: var(--burgundy); }
.post__excerpt { font-size: .92rem; line-height: 1.7; color: var(--body); flex: 1; }
.post__more {
  margin-top: 1.3rem; font-size: var(--step--1); letter-spacing: .2em;
  text-transform: uppercase; color: var(--burgundy);
  display: inline-flex; align-items: center; gap: .5em;
}
.post__more::after { content: '→'; transition: transform .3s var(--ease); }
.post:hover .post__more::after { transform: translateX(4px); }

/* ============================================================
   16b. Article (single blog post)
   ============================================================ */
.article { max-width: 74ch; margin-inline: auto; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: center; margin-bottom: 2.5rem;
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
}
.article__cat { color: var(--burgundy); }
.article__date { color: var(--muted); }
.article__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--taupe); }
.article p { font-size: 1.05rem; line-height: 1.85; margin: 0 0 1.5em; }
.article h2 {
  font-size: var(--step-2); letter-spacing: .02em;
  margin: 2.75rem 0 1.25rem; color: var(--ink);
}
.article figure { margin: 2.75rem 0; }
.article figure img { width: 100%; border-radius: 2px; box-shadow: var(--shadow-sm); }
.article__end {
  margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule);
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between;
}

/* ============================================================
   16c. Map
   Static, self-hosted map image (see contact.html). The greyscale treatment is
   baked into the asset, so there is no filter cost on scroll.
   ============================================================ */
.map {
  display: block; position: relative;
  height: clamp(280px, 34vw, 440px); overflow: hidden;
  background: var(--paper);
}
.map img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.map__cta {
  position: absolute; right: var(--gutter); bottom: 1.5rem;
  background: var(--burgundy); color: #fff;
  padding: .85em 1.9em; border-radius: 2px;
  font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(96,25,49,.25);
  transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.map:hover .map__cta { background: var(--burgundy-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(96,25,49,.3); }
.map:focus-visible { outline: 2px solid var(--burgundy); outline-offset: -4px; }
.map__attrib {
  margin: 0; padding: .7rem var(--gutter);
  background: var(--paper); border-top: 1px solid var(--rule);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: right;
}
.map__attrib a { color: var(--muted); }
.map__attrib a:hover { color: var(--burgundy); }

/* ============================================================
   17. Client Area band
   ============================================================ */
.clientband {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--wordmark-dark) center/cover no-repeat;
}
.clientband::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(74,0,21,.9) 0%, rgba(96,25,49,.72) 100%);
}
.clientband__inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem; flex-wrap: wrap;
}
.clientband__title { color: #fff; font-size: var(--step-2); letter-spacing: .12em; text-transform: uppercase; }
.clientband__text { color: rgba(255,255,255,.85); margin-top: .8rem; max-width: 46ch; }

/* ============================================================
   18. Footer
   ============================================================ */
.footer { background: var(--ink); color: rgba(255,255,255,.72); }
.footer__main {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 940px) { .footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__main { grid-template-columns: 1fr; } }

/* Dedicated white-wordmark artwork — the burgundy H is preserved, so no
   filter is applied (a brightness/invert filter would flatten the H too).
   height:auto is required: the <img height> attribute is a presentational
   hint that CSS width alone does not override, which squashed the logo. */
.footer__logo img { width: 220px; height: auto; }
.footer h3 {
  color: #fff; font-size: var(--step--1); letter-spacing: .24em;
  text-transform: uppercase; margin-bottom: 1.35rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.footer a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .93rem; transition: color .25s var(--ease); }
.footer a:hover { color: var(--taupe); }
.footer address { font-style: normal; font-size: .93rem; line-height: 1.95; letter-spacing: .06em; }

.socials { display: flex; gap: .7rem; margin-top: 1.6rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.socials a:hover { background: var(--burgundy); border-color: var(--burgundy); transform: translateY(-3px); }
.socials svg { width: 16px; height: 16px; fill: #fff; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.8rem;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}
/* Credit line is deliberately subordinate to the © line: smaller and dimmer.
   rgba .50 is the dimmest that still clears WCAG AA (4.83:1) on --ink —
   Privacy Policy is a real link, so it cannot go quieter than that. */
.footer__credit {
  font-size: .64rem; letter-spacing: .1em;
  color: rgba(255,255,255,.5);
}
.footer__credit a { font-size: inherit; color: rgba(255,255,255,.5); }
.footer__bottom a:hover, .footer__credit a:hover { color: var(--taupe); }

/* ============================================================
   19. Reveal animation
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: var(--stack-gap, 1.5rem); }
.mt-0 { margin-top: 0; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.section-head { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }