/* ============================================================================
   Southern Lenz Photography
   Design system. Colors pulled straight from Melissa's logo: bone paper,
   charcoal ink, sage botanical, with the dusk blue from her cover photo.
   ========================================================================= */

:root {
  /* palette */
  --bone:      #FBF8F3;
  --bone-2:    #F4EDE3;
  --cream:     #EFE6D9;
  --ink:       #22231F;
  --ink-2:     #4A4C44;
  --ink-3:     #7A7C71;
  --sage:      #7F9169;
  --sage-deep: #566546;
  --sage-pale: #DDE3D2;
  --taupe:     #BFB3A2;
  --dusk:      #5F7690;
  --line:      rgba(34, 35, 31, 0.14);
  --line-soft: rgba(34, 35, 31, 0.08);

  /* type */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1440px;
  --section: clamp(5rem, 11vw, 10rem);

  /* motion */
  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --slow: 1.1s var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

::selection { background: var(--sage-pale); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bone);
  padding: 0.9rem 1.4rem;
  z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------------ type */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

.display {
  font-size: clamp(3.1rem, 8.4vw, 7.5rem);
  line-height: 0.98;
}

h2, .h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
h3, .h3 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); }

.serif-i { font-style: italic; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.2rem, 1.65vw, 1.45rem);
  line-height: 1.62;
  color: var(--ink-2);
}

.muted { color: var(--ink-2); }
.small { font-size: 0.98rem; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.15rem 2.2rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sage-deep);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::after { transform: translateY(0); }
.btn:hover { border-color: var(--sage-deep); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { color: var(--bone); }

.btn-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}
.btn-light::after { background: var(--bone); }
.btn-light:hover { color: var(--ink); border-color: var(--bone); }

.btn-sm { padding: 0.85rem 1.5rem; font-size: 0.92rem; }

.link-under {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.link-under:hover { border-color: var(--sage-deep); color: var(--sage-deep); }

/* ---------------------------------------------------------------- layout */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 880px; }

.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.bg-cream { background: var(--bone-2); }
.bg-ink { background: var(--ink); color: var(--bone-2); }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--bone); }
.bg-ink .muted { color: rgba(251, 248, 243, 0.72); }

.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ---------------------------------------------------------------- header */

.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), padding 0.5s var(--ease);
  padding-block: 1.5rem;
}
.hdr-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.hdr.is-stuck {
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-block: 0.9rem;
}

/* over-hero state: white text until scrolled */
.hdr.on-dark:not(.is-stuck) { color: #fff; }
.hdr.on-dark:not(.is-stuck) .mark-name,
.hdr.on-dark:not(.is-stuck) .mark-sub,
.hdr.on-dark:not(.is-stuck) .nav a { color: #fff; }
.hdr.on-dark:not(.is-stuck) .burger span { background: #fff; }
.hdr.on-dark:not(.is-stuck) .nav-cta {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.mark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  flex: none;
}
.mark svg { width: 44px; height: 44px; flex: none; }
.mark-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.01em;
  display: block;
  color: var(--ink);
}
.mark-sub {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-top: 0.25rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.8rem);
}
.nav a {
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding-block: 0.3rem;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-cta {
  border: 1px solid var(--ink);
  padding: 0.72rem 1.35rem !important;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--ink); color: var(--bone) !important; }
.hdr.on-dark:not(.is-stuck) .nav-cta:hover { background: #fff; color: var(--ink) !important; }

/* drawer open: the header now sits on bone, so the white-over-hero colors have
   to flip back to ink or the wordmark disappears */
.hdr.menu-open { background: transparent; box-shadow: none; }
.hdr.on-dark.menu-open .mark-name,
.hdr.on-dark.menu-open .mark-sub,
.hdr.on-dark.menu-open .nav a { color: var(--ink); }
.hdr.on-dark.menu-open .burger span { background: var(--ink); }
.hdr.on-dark.menu-open .nav-cta { border-color: var(--ink); color: var(--ink); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 1.5px;
  width: 26px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  transform: translateY(-100%);
  transition: transform 0.65s var(--ease);
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); }
.drawer a {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  font-weight: 300;
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  display: block;
  color: var(--ink);
}
.drawer .drawer-foot {
  margin-top: 2.5rem;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.drawer .drawer-foot a {
  font-family: var(--sans);
  font-size: 1rem;
  border: 0;
  padding: 0;
  display: inline;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero-slides { position: absolute; inset: 0; }
/* <picture> stays out of the layout so the <img> inside still positions against
   .hero-slides, which is what the slideshow toggles opacity on */
.hero-slides picture { display: contents; }
.hero-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 2s var(--ease);
}
.hero-slides img.is-on {
  opacity: 1;
  animation: kenburns 14s linear forwards;
}
@keyframes kenburns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.13); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* two scrims: one lifts the type off the bottom, one darkens the left third
     where the headline sits so it never has to compete with a face */
  background:
    linear-gradient(to top, rgba(20, 21, 18, 0.76) 0%, rgba(20, 21, 18, 0.14) 46%, rgba(20, 21, 18, 0.32) 100%),
    linear-gradient(to right, rgba(20, 21, 18, 0.62) 0%, rgba(20, 21, 18, 0.28) 30%, rgba(20, 21, 18, 0) 58%);
  pointer-events: none;
}
.hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 9vh, 8rem);
  color: #fff;
}
/* The headline lives in a column down the left so it never lands on somebody's
   face. Subjects in all three hero photographs sit centre to right of frame. */
.hero h1 { color: #fff; max-width: 16ch; }

@media (min-width: 900px) {
  .hero h1 {
    max-width: 10ch;
    font-size: clamp(3rem, 5.2vw, 4.8rem);
  }
  .hero-sub { max-width: 33ch; }
  .hero-body { padding-bottom: clamp(3.5rem, 8vh, 6.5rem); }
}

/* On a phone the photograph is cropped tall and there is no clear column, so the
   text block gets tightened instead: smaller headline, closer margins. That buys
   enough room to sit below the faces and still clear the sticky booking bar at
   the bottom, which is 56px tall and overlaps the hero. */
@media (max-width: 899px) {
  .hero .display { font-size: clamp(2.6rem, 8vw, 4rem); }
  .hero-body { padding-bottom: 5rem; }
  .hero-sub { margin-top: 1.2rem; }
  .hero-actions { margin-top: 1.8rem; }
}

/* Phones crop the hero photograph tall, which puts faces around the middle of
   the frame and leaves no clear column. The supporting line is dropped so the
   whole text block sits below them. The same sentence is two scrolls down in
   the intro, so nothing is actually lost. */
/* Phones get a different first photograph and a shorter hero.
 *
 * sl-03 is a 3:2 group shot of six people. A full height phone screen is about
 * 0.46 wide-to-tall, which crops a 1.5 ratio image so hard that two of the six
 * fall off the edge. So index.html serves a taller crop (sl-03-mobile.jpg, ratio
 * 0.608) to phones and the hero is capped at 80svh so the container is close
 * enough to that ratio to keep everybody in frame.
 *
 * The supporting line and the two buttons are also dropped here. The sticky bar
 * at the bottom already carries Book a session and Email, so the buttons were
 * duplicates, and losing them lets the headline sit low over the grass instead
 * of across the group. */
@media (max-width: 640px) {
  .hero { min-height: 80svh; }
  /* .hero prefix so these beat the base .hero-sub / .hero-actions rules, which
     are declared further down the file */
  .hero .hero-sub { display: none; }
  .hero .hero-actions { display: none; }
  .hero-body { padding-bottom: 2.75rem; }
}
.hero-sub {
  margin-top: 1.8rem;
  max-width: 46ch;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}
.hero-actions {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

.hero-dots {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(4rem, 9vh, 8rem);
  z-index: 3;
  display: flex;
  gap: 0.6rem;
}
.hero-dots button {
  width: 34px;
  height: 2px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.4s var(--ease);
}
.hero-dots button[aria-current="true"] { background: #fff; }
@media (max-width: 720px) { .hero-dots { display: none; } }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 720px) { .scroll-cue { display: none; } }

/* page hero (interior pages) */
.phero {
  position: relative;
  padding-top: clamp(9rem, 16vh, 13rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--bone-2);
  overflow: hidden;
}
.phero h1 { max-width: 18ch; }
.phero .lead { max-width: 60ch; margin-top: 1.4rem; }
.phero-leaf {
  position: absolute;
  right: -3rem;
  top: 4rem;
  width: clamp(180px, 26vw, 380px);
  opacity: 0.5;
  pointer-events: none;
}

/* --------------------------------------------------------------- marquee */

.marquee {
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
  padding-block: 1.5rem;
  background: var(--bone);
}
.marquee-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--ink-2);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3.5rem;
}
.marquee span::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  flex: none;
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----------------------------------------------------------- intro split */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
}
.statement em { font-style: italic; color: var(--sage-deep); }

/* ------------------------------------------------------------- work grid */

.sessions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}
@media (max-width: 980px) { .sessions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .sessions { grid-template-columns: 1fr; } }

.scard {
  position: relative;
  text-decoration: none;
  display: block;
  color: inherit;
}
.scard-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cream);
}
.scard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.scard:hover .scard-media img { transform: scale(1.06); }
/* The session name sits under the photograph, never printed over it. */
.scard-name {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 300;
  color: var(--ink);
  margin: 1.2rem 0 0;
  transition: color 0.4s var(--ease);
}
.scard:hover .scard-name { color: var(--sage-deep); }
.scard-body {
  padding-top: 0.6rem;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.62;
}
.scard-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.scard-more span { transition: transform 0.4s var(--ease); }
.scard:hover .scard-more span { transform: translateX(6px); }

/* --------------------------------------------------------- editorial band */

.band {
  position: relative;
  min-height: clamp(360px, 56vh, 620px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}
.band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 21, 18, 0.52);
}
.band-body {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
  color: #fff;
  text-align: center;
}
.band-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.2;
  max-width: 22ch;
  margin: 0 auto;
  color: #fff;
}
.band-attrib {
  margin-top: 1.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------- gallery */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.filters button {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.4s var(--ease);
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

.grid-masonry {
  columns: 3;
  column-gap: clamp(0.9rem, 1.8vw, 1.8rem);
}
@media (max-width: 980px) { .grid-masonry { columns: 2; } }
@media (max-width: 560px)  { .grid-masonry { columns: 1; } }

.gitem {
  break-inside: avoid;
  margin-bottom: clamp(0.9rem, 1.8vw, 1.8rem);
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--cream);
  cursor: zoom-in;
  overflow: hidden;
}
.gitem img {
  width: 100%;
  transition: transform 1.3s var(--ease), opacity 0.6s var(--ease);
}
.gitem:hover img { transform: scale(1.045); }
.gitem.is-hidden { display: none; }

/* home strip: horizontal scroller */
.strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(230px, 26vw, 380px);
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.strip > * { scroll-snap-align: start; }
.strip .gitem { margin-bottom: 0; aspect-ratio: 4 / 5; }
.strip .gitem img { height: 100%; object-fit: cover; }

/* -------------------------------------------------------------- lightbox */

.lbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(17, 18, 15, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lbox.is-open { display: flex; }
.lbox-fig {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.lbox-fig img {
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  animation: lbin 0.5s var(--ease);
}
@keyframes lbin {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
.lbox-btn {
  position: absolute;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  width: 54px;
  height: 54px;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.lbox-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.lbox-prev { left: clamp(0.6rem, 2.5vw, 2.4rem); top: 50%; transform: translateY(-50%); }
.lbox-next { right: clamp(0.6rem, 2.5vw, 2.4rem); top: 50%; transform: translateY(-50%); }
.lbox-close { right: clamp(0.6rem, 2.5vw, 2.4rem); top: clamp(0.6rem, 2.5vw, 2.4rem); }
.lbox-count {
  position: absolute;
  left: clamp(0.6rem, 2.5vw, 2.4rem);
  top: clamp(1.2rem, 3vw, 2.9rem);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
}
@media (max-width: 620px) {
  .lbox-prev { left: 0.5rem; }
  .lbox-next { right: 0.5rem; }
  .lbox-btn { width: 46px; height: 46px; }
}

/* --------------------------------------------------------------- process */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.step-num {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--sage);
  line-height: 1;
  display: block;
  margin-bottom: 0.7rem;
}
.step h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.step p { color: var(--ink-2); font-size: 1rem; }

/* ----------------------------------------------------------------- about */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }
.about-photo { position: relative; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-photo::before {
  content: "";
  position: absolute;
  inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  border: 1px solid var(--sage);
  z-index: -1;
}
.signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  color: var(--sage-deep);
  margin-top: 1.6rem;
  display: block;
}
/* .fact-label is still used by the contact page cards */
.fact-label {
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.4rem;
}

/* ------------------------------------------------- what a session includes */

.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tick-list li {
  padding: 0.85rem 0 0.85rem 1.8rem;
  border-top: 1px solid var(--line-soft);
  position: relative;
  font-size: 1.05rem;
}
.tick-list li:first-child { border-top: 0; }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--sage);
}

.note {
  border-left: 2px solid var(--sage);
  padding: 0.4rem 0 0.4rem 1.4rem;
  color: var(--ink-2);
  font-size: 1.02rem;
}

/* --------------------------------------------------------------- accordion */

.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q {
  width: 100%;
  background: none;
  border: 0;
  padding: 1.6rem 3rem 1.6rem 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 300;
  color: var(--ink);
  position: relative;
  transition: color 0.4s var(--ease);
}
.acc-q:hover { color: var(--sage-deep); }
.acc-q::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.45s var(--ease);
}
.acc-q::before {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--ink);
  transform: rotate(90deg);
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.acc-item.is-open .acc-q::before { transform: rotate(0deg); opacity: 0; }
.acc-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.55s var(--ease);
}
.acc-a-inner {
  padding: 0 clamp(2rem, 8vw, 6rem) 1.8rem 0;
  color: var(--ink-2);
  font-size: 1.06rem;
}

/* ---------------------------------------------------------- testimonials */

.quotes { position: relative; text-align: center; }
.quote {
  display: none;
  max-width: 60ch;
  margin: 0 auto;
}
.quote.is-on { display: block; animation: lbin 0.6s var(--ease); }
.quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.32;
  color: var(--ink);
}
.quote-who {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.quote-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.4rem;
}
.quote-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.4s var(--ease);
}
.quote-dots button[aria-current="true"] { background: var(--sage); }

/* ------------------------------------------------------------------ form */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field .req { color: var(--sage-deep); }
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--line);
  padding: 0.95rem 1.1rem;
  width: 100%;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.65; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sage);
  background: #fff;
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #A1502F; }
.field-err {
  font-size: 0.92rem;
  color: #A1502F;
  letter-spacing: 0.04em;
  text-transform: none;
  display: none;
}
.field.has-error .field-err { display: block; }

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip {
  position: relative;
  border: 1px solid var(--line);
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  font-size: 0.98rem;
  letter-spacing: 0.1em;
  transition: all 0.35s var(--ease);
  user-select: none;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:hover { border-color: var(--ink); }
.chip:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--sage-deep); outline-offset: 3px; }

.form-msg {
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--sage);
  background: var(--sage-pale);
  color: var(--sage-deep);
  font-size: 1.02rem;
  display: none;
}
.form-msg.is-on { display: block; }

/* ------------------------------------------------------------------ cta */

.cta { text-align: center; }
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta .lead { max-width: 52ch; margin: 1.6rem auto 2.6rem; }

/* --------------------------------------------------------------- contact */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--bone-2);
}
.contact-row { padding: 1.1rem 0; border-bottom: 1px solid var(--line-soft); }
.contact-row:last-child { border-bottom: 0; }
.contact-row a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-row a:hover { border-color: var(--sage-deep); color: var(--sage-deep); }

/* ---------------------------------------------------------------- footer */

.ftr {
  background: var(--ink);
  color: rgba(251, 248, 243, 0.74);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  font-size: 1rem;
}
.ftr a { color: rgba(251, 248, 243, 0.74); text-decoration: none; }
.ftr a:hover { color: #fff; }
.ftr-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 900px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr-grid { grid-template-columns: 1fr; } }
.ftr .mark-name { color: var(--bone); }
.ftr .mark-sub { color: rgba(251, 248, 243, 0.55); }
.ftr h4 {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-pale);
  margin-bottom: 1.2rem;
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { padding: 0.4rem 0; }
.ftr-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(251, 248, 243, 0.8);
  margin-top: 1.2rem;
  max-width: 26ch;
}
.ftr-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.8rem;
  border-top: 1px solid rgba(251, 248, 243, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.95rem;
  color: rgba(251, 248, 243, 0.55);
}
.socials { display: flex; gap: 0.8rem; margin-top: 1.4rem; }
.socials a {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(251, 248, 243, 0.24);
  display: grid;
  place-items: center;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.socials a:hover { background: rgba(251, 248, 243, 0.12); border-color: var(--sage-pale); }
.socials svg { width: 19px; height: 19px; fill: currentColor; }

/* --------------------------------------------------------- sticky mobile */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: none;
  gap: 1px;
  background: var(--line);
  box-shadow: 0 -6px 24px rgba(20, 21, 18, 0.12);
}
.sticky-cta a {
  flex: 1;
  text-align: center;
  padding: 1.05rem 0.6rem;
  background: var(--bone);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sticky-cta a.primary { background: var(--ink); color: var(--bone); }
@media (max-width: 760px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 56px; }
}

/* --------------------------------------------------------------- reveal */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-slides img.is-on { animation: none; }
  .marquee-track { animation: none; }
}

/* ------------------------------------------------------------------ misc */

.stack-sm > * + * { margin-top: 1rem; }
.stack > * + * { margin-top: 1.8rem; }
.stack-lg > * + * { margin-top: clamp(2.4rem, 5vw, 4rem); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.maxch { max-width: 62ch; }
.hide { display: none !important; }