/* ==========================================================================
   Liliya Photography — design system
   Mobile-first. Everything scales from the tokens below.
   ========================================================================== */

/* --- fonts: self-hosted, latin first, italic/ext only fetched if rendered --- */
@font-face {
  font-family: 'Prata';
  font-style: normal;
  /* Prata has exactly one weight. Declaring the real range stops the browser
     synthesising a faux-bold when anything asks for 500+. */
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/prata-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* No italic face is loaded on purpose: it cost 80 KB and the browser fetched it
   even on pages that render no italic at all. The signature and pull quotes use
   the roman cut instead. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/jost-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/jost-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Warm coastal neutrals — the photographs are the only saturated thing here. */
  --ink: #1c1815;
  --ink-2: #4a423b;
  --ink-3: #7d7268;
  --bone: #fbf8f4;
  --bone-2: #f3ede4;
  --sand: #e4d9c9;
  --clay: #b4674e;
  --clay-deep: #8f4f3a;
  --line: rgba(28, 24, 21, 0.12);
  --line-soft: rgba(28, 24, 21, 0.07);

  --serif: 'Prata', 'Iowan Old Style', Georgia, serif;
  --sans: 'Jost', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type — no media queries needed for the scale itself. */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --t-xl: clamp(1.375rem, 1.24rem + 0.68vw, 1.75rem);
  --t-2xl: clamp(1.7rem, 1.45rem + 1.2vw, 2.45rem);
  --t-3xl: clamp(1.9rem, 1.55rem + 1.7vw, 3.5rem);
  --t-4xl: clamp(2rem, 1.55rem + 2.3vw, 4.9rem);

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4rem, 9vw, 8.5rem);
  --maxw: 78rem;
  --measure: 38rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- reset --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clears the fixed header so #enquire never lands underneath it */
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
video {
  display: block;
  max-width: 100%;
}
/* <picture> must not participate in layout: it is only a wrapper for <source>.
   Left as display:inline, any `height:100%` on the inner <img> resolves against
   the wrapper (auto height) instead of the sized parent, so covers never fill. */
picture {
  display: contents;
}
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  /* Must stay 400 — Prata has no heavier cut and would be faux-bolded. */
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0;
}
p {
  margin: 0 0 1.1em;
}
/* The UA gives <figure> and <blockquote> a 40px side margin each. Nested (a
   blockquote inside a figure) that indented every testimonial by 80px, which
   read as a mistake on desktop and left the quotes about 215px wide on a
   phone. Spacing here is set by .quote, not by the UA. */
figure,
blockquote {
  margin: 0;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow {
  max-width: 54rem;
}
.section {
  padding-block: var(--section);
}
.measure {
  max-width: var(--measure);
}

/* --- type helpers -------------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 1.25rem;
}
@media (min-width: 34rem) {
  .eyebrow {
    letter-spacing: 0.24em;
  }
}
.eyebrow--light {
  color: rgba(255, 255, 255, 0.82);
}
.display {
  font-size: var(--t-4xl);
}
.h1 {
  font-size: var(--t-3xl);
}
.h2 {
  font-size: var(--t-2xl);
}
.h3 {
  font-size: var(--t-xl);
}
.lede {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--ink-2);
}
.muted {
  color: var(--ink-3);
}
.serif-em {
  font-family: var(--serif);
}
/* Signature line under her letter on the service pages. */
.signature {
  font-family: var(--serif);
  font-size: var(--t-lg);
  letter-spacing: 0.01em;
  color: var(--ink-2);
  margin-top: 1.75rem;
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 2.1em;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover {
  --btn-bg: var(--clay);
  transform: translateY(-2px);
}
.btn--clay {
  --btn-bg: var(--clay);
}
.btn--clay:hover {
  --btn-bg: var(--ink);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  --btn-bg: var(--ink);
  --btn-fg: var(--bone);
}
.btn--light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--light:hover {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  border-color: #fff;
}
.btn--block {
  width: 100%;
}

/* --- header -------------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem var(--gut);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
    padding 0.4s var(--ease);
}
.hdr--solid {
  background: rgba(251, 248, 244, 0.94);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
}
.hdr__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
  line-height: 1;
  min-height: 44px;
}
.hdr__logo img {
  height: clamp(30px, 5vw, 40px);
  width: auto;
  transition: filter 0.4s var(--ease);
}
.hdr__nav {
  display: none;
}
.hdr__link {
  font-size: var(--t-sm);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.hdr__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.hdr__link:hover::after,
.hdr__link[aria-current='page']::after {
  transform: scaleX(1);
}
.hdr__cta {
  display: none;
}
/* Over a dark hero the header inverts until the page scrolls. */
.hdr--over {
  color: #fff;
}
.hdr--over .hdr__logo img {
  filter: brightness(0) invert(1);
}
.hdr__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.hdr__burger span {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease);
}
body.nav-open .hdr__burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.nav-open .hdr__burger span:nth-child(2) {
  opacity: 0;
}
body.nav-open .hdr__burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 5rem var(--gut) 3rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.55s var(--ease), visibility 0.55s;
}
body.nav-open .drawer {
  transform: translateY(0);
  visibility: visible;
}
body.nav-open {
  overflow: hidden;
}
.drawer a {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  text-decoration: none;
  padding: 0.28em 0;
  border-bottom: 1px solid var(--line-soft);
}
.drawer .btn {
  margin-top: 1.75rem;
}

/* 66rem, not 62: at 992px the six nav items only just fitted and the logo sat
   16px from "Weddings". The drawer is the better experience below that. */
@media (min-width: 66rem) {
  .hdr__nav {
    display: flex;
    gap: clamp(1.4rem, 2.6vw, 2.6rem);
    align-items: center;
  }
  .hdr__cta {
    display: inline-flex;
    padding: 0.85em 1.6em;
    /* The header's own 1rem gap left the last nav item (FAQ) closer to the
       button than the nav links are to each other, so it read as part of it.
       This puts clear air between the navigation and the call to action. */
    margin-left: clamp(0.75rem, 2vw, 1.75rem);
  }
  .hdr__burger,
  .drawer {
    display: none;
  }
}

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  isolation: isolate;
  color: #fff;
}
.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* On a narrow viewport the crop pulls the subject dead-centre, straight under
   the headline. Bias the frame right so the type has clear space. */
.hero__media img {
  object-position: 55% center;
}
@media (min-width: 46rem) {
  .hero__media img {
    object-position: center;
  }
}
/* Heavier at the foot than the head: the type sits low, and on a narrow
   viewport it lands over the subject's face without this. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(20, 16, 13, 0.8) 0%,
    rgba(20, 16, 13, 0.62) 30%,
    rgba(20, 16, 13, 0.24) 58%,
    rgba(20, 16, 13, 0.1) 78%,
    rgba(20, 16, 13, 0.34) 100%
  );
}
/* The header is fixed and transparent over the hero, so the hero's own content
   has to reserve room for it or the eyebrow slides underneath — which it did on
   the short service heroes at 375px. */
.hero__inner {
  padding-top: max(5.75rem, clamp(2.5rem, 8vh, 7rem));
  padding-bottom: clamp(2.5rem, 8vh, 7rem);
}
.hero h1 {
  font-size: var(--t-4xl);
  font-weight: 400;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(20, 16, 13, 0.26);
}
@media (min-width: 46rem) {
  .hero h1 {
    /* Prata sets wide — much beyond 15ch and the headline overruns the column. */
    max-width: 15ch;
  }
}
.hero__sub {
  font-size: var(--t-base);
  line-height: 1.55;
  max-width: 36ch;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.92);
}
/* The gap above the buttons belongs to the buttons, not to the sub-heading:
   session pages have no sub, and the CTAs were landing hard against the
   headline's descenders. */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.75rem;
}
.hero__cta .btn {
  padding-inline: 1.5em;
  flex: 1 1 auto;
}
@media (min-width: 34rem) {
  .hero__sub {
    font-size: var(--t-lg);
    margin-top: 1.4rem;
  }
  .hero__cta {
    gap: 0.85rem;
    margin-top: 2.25rem;
  }
  .hero__cta .btn {
    flex: 0 0 auto;
    padding-inline: 2.1em;
  }
}
.hero--short {
  min-height: 62svh;
}
@media (max-width: 45.99rem) {
  /* Short heroes need more of the screen on a phone or the copy is squeezed. */
  .hero--short {
    min-height: 76svh;
  }
}
.hero--short h1 {
  font-size: var(--t-3xl);
}

/* trust strip sitting on the hero foot */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin-top: 1.75rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}
@media (min-width: 34rem) {
  .hero__trust {
    gap: 0.6rem 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    font-size: var(--t-sm);
  }
  /* Separators only where items sit on one line — a wrapped list would
     otherwise leave orphaned dots hanging at the end of each row. */
  .hero__trust > span:not(:last-child)::after {
    content: '·';
    margin-left: 1.5rem;
    opacity: 0.5;
  }
}

/* --- pieces -------------------------------------------------------------- */
.rule {
  width: 46px;
  height: 1px;
  background: var(--clay);
  border: 0;
  margin: 0 0 1.5rem;
}
.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
}
@media (min-width: 46rem) {
  /* minmax(0, …), not plain 1fr. A bare `1fr` keeps an auto min-content floor,
     so one long unbreakable word widens its own column and steals width from
     the rest: "Engagements" made its card 8px wider than the other three, which
     is why one pricing button fitted on a single line and three did not. */
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 62rem) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 58rem) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--wide-left {
    grid-template-columns: 1.15fr 1fr;
  }
  .split--wide-right {
    grid-template-columns: 1fr 1.15fr;
  }
  /* Portrait column sized to the image, so the story gets the rest. */
  .split--bio {
    grid-template-columns: minmax(0, 19rem) 1fr;
    align-items: start;
  }
  .split--flip > :first-child {
    order: 2;
  }
}

/* Must be block: .frame is often an <a>, and aspect-ratio does nothing on an
   inline box. Left inline, the portfolio covers rendered at their own aspect
   ratio and the card's title fell out of the bottom of its grid cell, landing
   on top of the photograph in the row below. */
.frame {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--bone-2);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.frame--tall {
  aspect-ratio: 4 / 5;
}
/* Liliya's bio portrait sits beside her story — it should read as a portrait,
   not a hero. Left unconstrained it took 89% of the width on a phone. */
.bio-portrait {
  width: min(60%, 12.5rem);
  margin-bottom: 1.75rem;
}
@media (min-width: 58rem) {
  .bio-portrait {
    width: 100%;
    margin-bottom: 0;
  }
}
.frame--wide {
  aspect-ratio: 3 / 2;
}
.frame--square {
  aspect-ratio: 1;
}
a.frame:hover img,
.frame--zoom:hover img {
  transform: scale(1.045);
}
/* Card titles are links; give them a real tap area. */
.card-title a {
  display: inline-block;
  padding: 0.35rem 0;
  min-height: 44px;
  text-decoration: none;
}

/* --- promises / steps ---------------------------------------------------- */
.promise {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line-soft);
}
.promise__n {
  font-family: var(--serif);
  font-size: var(--t-lg);
  color: var(--clay);
  line-height: 1.2;
  min-width: 1.6em;
}
.promise h3 {
  font-size: var(--t-lg);
  margin-bottom: 0.3rem;
}
.promise p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.step {
  position: relative;
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}
.step__n {
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--clay);
  display: block;
  margin-bottom: 0.75rem;
}
.step h3 {
  font-size: var(--t-lg);
  margin-bottom: 0.5rem;
}
.step p {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0;
  line-height: 1.62;
}

/* --- pricing ------------------------------------------------------------- */
.price-grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 58rem) {
  .price-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    /* Side by side the cards must share a baseline. Left on `start` each card
       was only as tall as its own bullet list, so the three ended at three
       different heights and the row looked ragged. */
    align-items: stretch;
  }
}
.tier {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--bone);
  border: 1px solid var(--line);
}
@media (min-width: 58rem) {
  /* Scoped to the pricing table, where the cards butt up against each other and
     a doubled border would show. The home page's four cards sit in a gapped
     grid, so there this rule just removed three of the four left borders. */
  .price-grid .tier + .tier {
    border-left: 0;
  }
}
.tier--feature {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
@media (min-width: 58rem) {
  .tier--feature {
    margin-block: -1.75rem;
    padding-block: calc(clamp(1.75rem, 3.5vw, 2.75rem) + 1.75rem);
  }
}
.tier__tag {
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.9rem;
  min-height: 1.2em;
}
/* The reserved height keeps the three cards aligned side by side. Stacked on a
   phone there is nothing to align to, so an empty tag is just a hole. */
@media (max-width: 57.99rem) {
  .tier__tag:empty {
    display: none;
  }
}
.tier--feature .tier__tag {
  color: var(--sand);
}
.tier h3 {
  font-size: var(--t-xl);
  margin-bottom: 0.5rem;
}
/* The four home-page cards link straight to a service page. */
.tier--link {
  text-decoration: none;
}
/* Two of the four titles wrap to a second line, which pushed their price and
   duration a whole line below the other two. Reserving both lines keeps the
   prices on one horizontal reading line across the row. */
@media (min-width: 46rem) {
  .tier--link h3 {
    min-height: 2.28em;
  }
  /* Four narrow cards. The label must never break: a two-line button next to
     three one-line buttons is the thing that reads as broken. nowrap forces the
     issue, and the reduced padding and tracking are what make it fit at the
     narrowest four-across width (62rem, where each button is only ~138px). */
  .tier--link .btn {
    padding-inline: 0.8em;
    white-space: nowrap;
  }
}
.tier__price {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-3xl);
  line-height: 1;
  margin: 0.5rem 0 0.25rem;
}
.tier__price sup {
  font-size: 0.42em;
  vertical-align: 0.9em;
  margin-right: 0.08em;
}
.tier__meta {
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin-bottom: 1.5rem;
}
.tier--feature .tier__meta {
  color: rgba(251, 248, 244, 0.6);
}
.tier ul {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  font-size: var(--t-sm);
  flex: 1;
}
.tier li {
  padding: 0.55rem 0 0.55rem 1.5rem;
  position: relative;
  border-top: 1px solid var(--line-soft);
  line-height: 1.5;
}
.tier--feature li {
  border-color: rgba(251, 248, 244, 0.14);
}
.tier li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 8px;
  height: 1px;
  background: var(--clay);
}
.tier--feature .btn {
  --btn-bg: var(--bone);
  --btn-fg: var(--ink);
  border-color: var(--bone);
}
.tier--feature .btn:hover {
  --btn-bg: var(--clay);
  --btn-fg: #fff;
  border-color: var(--clay);
}
/* One centred line under the table. The feature card hangs 1.75rem below the
   others on desktop, so the gap is measured from that, not from the row. */
.price-note {
  margin: 2.25rem auto 0;
  max-width: 40ch;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--ink-3);
}
@media (min-width: 58rem) {
  .price-note {
    margin-top: 4rem;
  }
}

/* --- testimonials -------------------------------------------------------- */
.quote {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
}
.quote p {
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 0.85rem;
  text-wrap: pretty;
}
.quote cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stars {
  color: var(--clay);
  letter-spacing: 0.18em;
  font-size: var(--t-sm);
  margin-bottom: 0.6rem;
}

/* --- gallery ------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.4rem, 1.2vw, 0.9rem);
}
@media (min-width: 46rem) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 72rem) {
  .gallery--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Every tile is a plain, non-interactive still. Nothing opens full screen:
   most of the library was uploaded between 400px and 1000px wide, and blowing
   one of those up only shows off how few pixels it has. */
.gallery__still {
  background: var(--bone-2);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: block;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Portrait-orientation shots in a 3:2 tile: centre-crop decapitates them,
   so favour the upper third where the faces sit. */
.gallery img.is-portrait {
  object-position: center 28%;
}
/* Editorial mosaic — every 7th tile is promoted to a 2x2 feature so the grid
   never reads as a contact sheet.
   The feature tile must NOT carry its own aspect-ratio: the grid rows are sized
   by the ordinary 3:2 tiles, so an independent ratio makes the spanned area and
   the tile disagree and the row stretches, leaving holes. height:100% lets it
   fill exactly the area it spans instead. `dense` backfills the gap the span
   would otherwise leave at the end of a row. */
.gallery--mosaic {
  grid-auto-flow: dense;
}
.gallery--mosaic > :nth-child(7n + 1) {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
  height: 100%;
}

/* --- form ---------------------------------------------------------------- */
/* The booking zone. On one flat cream background the form read as more page
   content; nothing said "this is where you book". Two moves, both already in
   the site's vocabulary: the section takes the same warm wash the pricing
   section uses, and the form itself becomes a bordered panel lifted off it. */
#enquire {
  background: var(--bone-2);
}
/* Centred, the heading floated ~220px below the top of a 650px panel and the
   two halves read as unrelated. Aligned to the top, "Request a quote" sits
   level with "Step 1 of 3" and the pair reads as one instruction. */
@media (min-width: 58rem) {
  #enquire .split {
    align-items: start;
  }
}
.form {
  display: grid;
  gap: 1.15rem;
  position: relative;
  background: var(--bone);
  border: 1px solid var(--ink);
  padding: clamp(1.35rem, 4.5vw, 2.6rem);
  /* Long and low, so the panel lifts without looking like a UI popover. */
  box-shadow: 0 26px 50px -34px rgba(28, 24, 21, 0.55);
}
/* A clay edge along the top — the same accent as the eyebrows and the primary
   button. It is what makes the panel read as the action rather than a box. */
.form::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto;
  height: 3px;
  background: var(--clay);
}
.field label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem; /* 16px stops iOS zooming on focus */
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0.75rem 0;
  min-height: 48px;
  transition: border-color 0.3s var(--ease);
  appearance: none;
}
.field textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.6;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 13px) calc(1.35em), calc(100% - 8px) calc(1.35em);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--clay);
}
.field--half {
  min-width: 0;
}
.form__row {
  display: grid;
  gap: 1.15rem;
}
@media (min-width: 40rem) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}
/* Fields that carry a long placeholder. auto-fit measures the panel, not the
   viewport, so this row drops to one column whenever the panel is too narrow —
   which it is at every desktop width now that the form sits in a card beside
   the copy. "e.g. 14 June, or 'autumn 2026'" needs ~206px and had 162. */
.form__row--wide {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Steps are plain blocks; give their stacked fields the same rhythm as .form. */
[data-step] {
  display: grid;
  gap: 1.15rem;
}
/* A class-level `display` beats the UA's [hidden] rule, so without this the
   inactive steps stay on screen and the whole three-step form renders at once. */
[data-step][hidden] {
  display: none;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__note {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.55;
}
.form__status {
  font-size: var(--t-sm);
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--clay);
  background: var(--bone-2);
  display: none;
}
.form__status.is-shown {
  display: block;
}
.form__status.is-error {
  border-color: #b3261e;
  color: #7a1a15;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  position: relative;
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: block;
  padding: 0.7em 1.15em;
  border: 1px solid var(--line);
  font-size: var(--t-sm);
  transition: all 0.25s var(--ease);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.chip input:checked + span {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

/* --- FAQ ----------------------------------------------------------------- */
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-of-type {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: 1.35;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 1px solid var(--clay);
  border-bottom: 1px solid var(--clay);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after {
  transform: translateY(-20%) rotate(-135deg);
}
.faq__body {
  padding: 0 0 1.6rem;
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.7;
}

/* --- footer -------------------------------------------------------------- */
.ftr {
  background: var(--ink);
  color: rgba(251, 248, 244, 0.72);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  font-size: var(--t-sm);
}
.ftr a {
  color: rgba(251, 248, 244, 0.72);
  text-decoration: none;
  transition: color 0.25s;
}
.ftr a:hover {
  color: #fff;
}
.ftr h2,
.ftr h3 {
  color: var(--bone);
}
.ftr__grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 52rem) {
  .ftr__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
  }
}
.ftr__ttl {
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 1.1rem;
}
.ftr__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
/* Footer links were 21px tall — under the 44px minimum for a thumb. The row
   gap is folded into the link itself so the spacing looks unchanged. */
.ftr__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (min-width: 52rem) {
  .ftr__list a {
    min-height: 38px;
  }
}
/* The service-area block Alex asked to sit at the bottom of the main page. */
.areas {
  border-top: 1px solid rgba(251, 248, 244, 0.14);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}
/* Wrapped tag list. No inline separators: CSS cannot tell where a line breaks,
   so a ::after dot always ends up orphaned at the end of a row. Spacing does
   the separating instead. */
.areas__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}
.areas__list li {
  border: 1px solid rgba(251, 248, 244, 0.16);
  padding: 0.35em 0.85em;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
}
.ftr__base {
  border-top: 1px solid rgba(251, 248, 244, 0.14);
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: rgba(251, 248, 244, 0.5);
}

/* --- CTA band ------------------------------------------------------------ */
.band {
  position: relative;
  isolation: isolate;
  color: #fff;
  text-align: center;
  padding-block: clamp(4.5rem, 11vw, 8rem);
}
.band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 13, 0.55);
  z-index: -1;
}
.band h2 {
  font-size: var(--t-3xl);
  max-width: 18ch;
  margin-inline: auto;
  text-wrap: balance;
}
.band p {
  max-width: 44ch;
  margin: 1.25rem auto 2.25rem;
  color: rgba(255, 255, 255, 0.88);
}

/* --- reveal on scroll ---------------------------------------------------- */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.rv.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
  }
}

/* --- misc ---------------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bone);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip:focus {
  left: 0;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.prose {
  max-width: var(--measure);
}
.prose p {
  color: var(--ink-2);
}
.prose h2 {
  font-size: var(--t-2xl);
  margin: 2.5rem 0 1rem;
}
.prose h3 {
  font-size: var(--t-xl);
  margin: 2rem 0 0.75rem;
}