/* ==========================================================================
   SEEN Portraits

   Contents
   01  Tokens
   02  Reset and base
   03  Typography
   04  Layout, bands, section headers
   05  Buttons and links
   06  Header, utility strip, navigation
   07  Media, photography slots, galleries, lightbox
   08  Components (cards, quotes, trust strip, accordion, steps, forms)
   09  Footer
   10  Motion and reveals
   11  Responsive
   ========================================================================== */

/* 01  Tokens ------------------------------------------------------------- */

:root {
  --em-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12.6c46-5.2 96-8.4 148-8.9 47-.4 96 1.7 148 6.2' fill='none' stroke='%23635336' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M14 16.4c52-3.4 104-5 156-4.6' fill='none' stroke='%23635336' stroke-width='1.6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  /* brand palette */
  --ink: #191614;
  --ink-2: #241E1A;
  --ink-3: #332B26;
  --umber: #4A403A;
  --taupe: #756B64;
  --mushroom: #A9A097;
  --bone: #E2DACE;
  --bone-2: #D3C9BA;
  --paper: #EDE7DC;
  --stone: #A69177;
  --stone-deep: #635336;
  --stone-deepest: #655335;
  --grey: #5A554C;
  --grey-soft: #9A958C;

  /* semantic, re-declared per band */
  --bg: var(--bone);
  --fg: var(--ink);
  --fg-mute: var(--grey);
  --rule: #A49F94;
  --edge: #786F5E;
  --grade: sepia(.16) saturate(.88) contrast(1.03);
  --grade-dim: sepia(.16) saturate(.88) contrast(1.03) brightness(.76);
  --grade-mono: grayscale(1) contrast(1.05);
  --dock-h: 78px;
  --mast-h: 84px;
  --btn-edge: var(--stone-deep);
  --btn-hover: #C4B6A2;
  --accent: var(--stone-deep);
  --field: #F7F3EA;   /* Lifted paper, not white. Pure white is the one cold
                         rectangle in a palette taken from her photographs. */

  /* Set entirely in Marcellus. One
     typeface, with size, colour and tracking carrying the hierarchy. */
  --f-display: "Marcellus", "Times New Roman", Times, serif;
  --f-sans: var(--f-display);
  --f-mono: var(--f-display);

  --wrap: 1600px;
  --gutter: clamp(20px, 5vw, 72px);
  --band-y: clamp(54px, 6vw, 98px);
  --band-xl: clamp(76px, 9vw, 140px);
  --band-tight: clamp(26px, 3vw, 44px);
  --radius: 14px;
  --radius-btn: 8px;
  --radius-img: clamp(12px, 1.2vw, 20px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Three label sizes, and only three. Everything small on the site uses one
     of them, so the micro-type stops drifting by a pixel per component. */
  --label-lg: .92rem;   --label-lg-ls: .16em;
  --label:    .85rem;   --label-ls:    .12em;
  --label-sm: .78rem;   --label-sm-ls: .08em;

  /* three durations, two curves */
  --t-fast: .28s;
  --t: .6s;
  --t-slow: 1.2s;
  --slow: .9s var(--ease);
}

/* dark band */
.band--ink, .foot, .plate, .hero--plate, .cta { position: relative; }
.band--ink > *, .foot > *, .cta > * { position: relative; z-index: 1; }
.band--ink::before, .foot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72% 120% at 18% 0%, var(--ink-3) 0%, rgba(51, 43, 38, 0) 62%),
    radial-gradient(58% 90% at 88% 100%, var(--ink-2) 0%, rgba(36, 30, 26, 0) 58%);
}

.band--ink,
.foot,
.drawer,
.hero--plate,
.plate,
.ink-scope {
  --bg: var(--ink);
  --fg: var(--bone);
  --fg-mute: #A5A099;
  --rule: rgba(246, 245, 243, .11);
  --edge: rgba(246, 245, 243, .3);
  --btn-edge: var(--stone);
  --accent: var(--stone);
  --field: rgba(246, 245, 243, .06);
  --em-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12.6c46-5.2 96-8.4 148-8.9 47-.4 96 1.7 148 6.2' fill='none' stroke='%23A69177' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M14 16.4c52-3.4 104-5 156-4.6' fill='none' stroke='%23A69177' stroke-width='1.6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}

/* quiet band */
.band--paper { --bg: var(--paper); }
.band--bone2 {
  --bg: var(--bone-2);
  --accent: var(--stone-deepest);
  --em-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12.6c46-5.2 96-8.4 148-8.9 47-.4 96 1.7 148 6.2' fill='none' stroke='%23655335' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M14 16.4c52-3.4 104-5 156-4.6' fill='none' stroke='%23655335' stroke-width='1.6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}

/* 02  Reset and base ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clears the sticky masthead, including for the skip link */
  scroll-padding-top: calc(var(--mast-h) + 12px);
  scroll-padding-bottom: calc(var(--dock-h) + 12px);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 17.5px;
  line-height: 1.72;
  font-weight: 400;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bone);
  padding: 12px 18px;
  font-family: var(--f-mono);
  font-size: .75rem;
}
.skip:focus { left: 12px; top: 12px; }

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

/* film grain, used sparingly on dark bands and hero plates */
.grain { position: relative; }
.grain > * { position: relative; z-index: 2; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 03  Typography -------------------------------------------------------- */

.d1, .d2, .d3, .d4, .post-item__t {
  overflow-wrap: anywhere;
}
.d1, .d2, .d3, .d4 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.6rem, 6.6vw, 5.9rem); line-height: 1.02; letter-spacing: -.014em; }
.d2 { font-size: clamp(1.95rem, 4vw, 3.5rem); line-height: 1.14; letter-spacing: -.012em; }
.d3 { font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.24; letter-spacing: -.008em; }
.d4 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.22; letter-spacing: -.008em; }
/* the tier between a heading and body copy */
.d-pull { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 2.9vw, 2.5rem); line-height: 1.26; letter-spacing: -.014em; }
.d-fig  { font-family: var(--f-display); font-size: clamp(3.6rem, 8vw, 7rem); line-height: .88; letter-spacing: -.03em; }

.kicker {
  font-family: var(--f-mono);
  font-size: var(--label-lg);
  font-weight: 400;
  letter-spacing: var(--label-lg-ls);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
}
.kicker--mute { color: var(--fg-mute); }

.lead {
  font-size: clamp(1.05rem, 1.25vw, 1.28rem);
  line-height: 1.55;
  color: var(--fg-mute);
  text-wrap: pretty;
}

.prose p { margin-bottom: 1.05em; color: var(--fg-mute); text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose strong {
  color: var(--fg);
  font-size: 1.12em;
  letter-spacing: -.008em;
}
.prose em { font-style: italic; }
.prose--tight p { margin-bottom: .8em; }
.measure { max-width: 28.5em; }
h1, h2, h3, h4, h5, h6, strong, b, th,
.pcard__title, .deliv__t, .opt__t, .steps__t, .trust__k { font-weight: 400; }

.measure-s { max-width: 22em; }
/* 22em resolves against the element's own size, so on display type it is a
   no-op. Headings measure in characters. */
.d2.measure-s, .d3.measure-s { max-width: 22ch; }

.mono-note {
  font-family: var(--f-mono);
  font-size: var(--label);
  letter-spacing: var(--label-ls);
  color: var(--fg-mute);
  text-transform: uppercase;
}

.stars { color: var(--accent); letter-spacing: .18em; font-size: .8rem; }
.band--ink .stars { color: var(--stone); }

/* The emphasised phrase. The brand face throughout, so the emphasis is
   carried by the gold and by a drawn underline that sweeps in on reveal. */
.em {
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}
.em::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.04em;
  bottom: .01em;
  height: .15em;
  background: no-repeat center/100% 100% var(--em-line);
  transform-origin: left center;
  pointer-events: none;
}
/* Nothing is hidden unless JS has confirmed it can put it back */
.js-anim .em::after {
  transform: scaleX(0);
  transition: transform .82s var(--ease-out) .35s;
}
.js-anim .is-in .em::after { transform: scaleX(1); }
/* word split adds descender padding below the baseline, so drop the stroke in */
.reveal-w .em::after { bottom: .19em; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .em::after { transform: scaleX(1); transition: none; }
}

/* one quote at scale, beside a portrait */
.bigquote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(38%, 420px);
  gap: clamp(26px, 5vw, 76px);
  align-items: center;
}
.bigquote blockquote {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -.016em;
}
.bigquote .ph { aspect-ratio: 4 / 5; }
.bigquote__more {
  max-width: 26em;
  margin-top: clamp(30px, 4vw, 58px);
}

.bigquote__by {
  margin-top: clamp(18px, 2.4vw, 30px);
  font-size: var(--label);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--fg-mute);
}
@media (max-width: 860px) {
  .bigquote { grid-template-columns: 1fr; }
  .bigquote .ph { max-height: 60vw; }
}

/* Pricing as one large figure against a portrait */
.priceplate {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) min(42%, 520px);
  gap: clamp(26px, 5vw, 72px);
  align-items: stretch;
}
.priceplate .ph {
  aspect-ratio: 4 / 5;
  height: auto;
  max-height: min(66vh, 560px);
}
.priceplate__copy { align-self: center; }
@media (max-width: 860px) {
  .priceplate { grid-template-columns: 1fr; }
  .priceplate .ph { aspect-ratio: 4 / 5; height: auto; min-height: 0; }
}

.vfields {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: minmax(0, 24em);
}
.vfields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .vfields--3 { grid-template-columns: 1fr; } }
.vfield { display: grid; gap: .5rem; }
.vfield__l {
  font-family: var(--f-mono);
  font-size: var(--label-sm);
  letter-spacing: var(--label-sm-ls);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.vfield__wrap { position: relative; display: flex; align-items: center; }
.vfield__pre {
  position: absolute;
  left: 16px;
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--fg-mute);
  pointer-events: none;
}
.vfield__wrap .field { padding-left: 32px; }

/* 04  Layout ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--flush { max-width: none; padding-inline: 0; }

.band {
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--band-y);
  position: relative;
}
.band--flush-t { padding-top: 0; }
.band--flush-b { padding-bottom: 0; }
.band--slim { padding-block: clamp(34px, 4vw, 60px); }
/* a band that introduces the one below it, rather than sitting apart from it */
.band--lead-in { padding-block: var(--band-xl) var(--band-tight); }
.band--follow { padding-top: var(--band-tight); }
.band--tall { padding-block: var(--band-xl); }
.band + .band--same { padding-top: 0; }

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

/* section header with the editorial index number */
.shead {
  margin-bottom: clamp(22px, 2.6vw, 40px);
}
.shead > * + * { margin-top: .7rem; }
.shead > * + .lead { margin-top: 1.1rem; }
.shead--page > .crumb + * { margin-top: clamp(20px, 2.4vw, 32px); }

/* generic grids */
.cols { display: grid; gap: clamp(18px, 2.4vw, 34px); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
/* copy and photograph start together; a centred short column strands the
   space above and below it */
.split > .stack, .split > .prose { align-self: start; }
.split--wide-l { grid-template-columns: 1.15fr .85fr; }
.split--wide-r { grid-template-columns: .85fr 1.15fr; }
.split--top { align-items: start; }
.stack > * + * { margin-top: 1.4rem; }
.stack-s > * + * { margin-top: .8rem; }
.stack-l > * + * { margin-top: 2.2rem; }

/* 05  Buttons ----------------------------------------------------------- */

.btn {
  isolation: isolate;
  --btn-bg: var(--stone);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 1.05em 1.7em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--btn-edge);
  border-radius: var(--radius-btn);
  position: relative;
  overflow: hidden;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  will-change: background, color;
}
.btn > span { position: relative; z-index: 1; }
.btn .arw { transition: transform .45s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
/* the fill sweeps to a deeper gold rather than switching colour */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .62s var(--ease-out);
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { border-color: var(--btn-hover); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--fg);
}
.btn--ghost::before { background: var(--stone); }
.btn--ghost:hover { color: var(--ink); border-color: var(--stone); }

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--fg-mute);
  border-color: var(--edge);
}
.btn--quiet::before { background: transparent; }
.btn--quiet:hover { color: var(--accent); border-color: var(--accent); }

.btn--sm { padding: .85em 1.3em; font-size: var(--label-sm); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.btn-row--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(24px, 3vw, 38px);
}

/* Links read as buttons, kept elegant: a hairline outline, generous
   padding and wide tracking rather than a heavy fill. */
.tlink {
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .75em;
  padding: .95em 1.5em;
  border: 1px solid var(--btn-edge);
  border-radius: var(--radius-btn);
  font-family: var(--f-display);
  font-size: var(--label-lg);
  letter-spacing: var(--label-lg-ls);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  background: var(--stone);
  position: relative;
  overflow: hidden;
  transition: color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.tlink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .62s var(--ease-out);
}
.tlink > *, .tlink span { position: relative; z-index: 1; }
.tlink span[aria-hidden] { transition: transform .45s var(--ease-out); }
.tlink:hover::before { transform: scaleX(1); }
.tlink:hover { border-color: var(--btn-hover); }
.tlink:hover span[aria-hidden] { transform: translateX(4px); }

/* a genuine inline link, for use inside a sentence */
.ilink {
  color: var(--fg);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: color .3s var(--ease);
}
.ilink:hover { color: var(--accent); }

/* 06  Header ------------------------------------------------------------ */

.util {
  background: var(--ink);
  color: var(--grey-soft);
  font-family: var(--f-mono);
  font-size: var(--label-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.util__in {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 9px;
}
.util a:hover { color: var(--bone); }
.util__r { display: flex; gap: 22px; }

.mast {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bone);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.mast.is-stuck {
  border-bottom-color: var(--rule);
  background: rgba(246, 245, 243, .94);
  backdrop-filter: saturate(1.1) blur(8px);
}
.mast__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
  transition: height .4s var(--ease);
}


.brand { display: inline-flex; align-items: baseline; gap: .55rem; }
.brand__img {
  display: block;
  width: auto;
  height: clamp(26px, 2.4vw, 34px);
}
.brand__img--foot { height: clamp(30px, 2.8vw, 40px); }
.brand:hover .brand__img, .brand:focus-visible .brand__img { opacity: .72; }
.brand__img { transition: opacity .3s var(--ease); }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--f-mono);
  font-size: var(--label-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-block: 10px;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 1px;
  background: var(--stone-deep);
  transition: width .4s var(--ease);
}
.nav__item:hover > .nav__link::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link .caret { font-size: .5rem; transform: translateY(1px); opacity: .5; }

.nav__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: -18px;
  min-width: 240px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  box-shadow: 0 24px 48px -28px rgba(20, 20, 19, .3);
}
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel { opacity: 1; visibility: visible; transform: none; }
.nav__item.is-dismissed > .nav__panel { opacity: 0; visibility: hidden; }
.nav__panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  font-size: .92rem;
  color: var(--ink-2);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__panel a { border-radius: calc(var(--radius) - 6px); }
.nav__panel a:hover { background: var(--bone-2); color: var(--ink); }
.nav__panel .lead-dot { color: var(--stone-deep); font-size: .7rem; }
.nav__panel hr { border: 0; height: 1px; background: var(--rule); margin: 8px 12px; }
.nav__panel .sub {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 8px 12px 4px;
}

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--edge);
  border-radius: var(--radius-btn);
}
.burger span { display: block; width: 17px; height: 1px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1px; background: var(--ink);
  transition: transform .35s var(--ease);
}
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { transform: translateY(5px) rotate(45deg); }
body.nav-open .burger span::after { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--ink);
  color: var(--bone);
  padding: 104px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform .6s var(--ease);
  visibility: hidden;
}
body.nav-open .drawer { transform: none; visibility: visible; }
/* the close control lives inside the dialog so the focus trap reaches it */
.drawer__x {
  position: fixed;
  top: 26px;
  right: var(--gutter);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: var(--radius-btn);
  cursor: pointer;
  z-index: 96;
}
.drawer__x span { position: relative; width: 18px; height: 1px; }
.drawer__x span::before, .drawer__x span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bone);
}
.drawer__x span::before { transform: rotate(45deg); }
.drawer__x span::after { transform: rotate(-45deg); }
.drawer__x:hover { border-color: var(--bone); }
.drawer__group + .drawer__group { border-top: 1px solid rgba(246, 245, 243, .14); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  font-family: var(--f-display);
  font-size: 1.5rem;
}
.drawer__sub { display: none; padding-bottom: 16px; }
.drawer__group.is-open .drawer__sub { display: block; }
.drawer__group.is-open .drawer__head .pm { transform: rotate(45deg); }
.drawer__head .pm { transition: transform .35s var(--ease); color: var(--stone); }
.drawer__sub a {
  display: block;
  padding: 8px 0 8px 2px;
  color: #A5A099;
  font-size: 1rem;
}
.drawer__sub a:hover { color: var(--bone); }
.drawer__foot { margin-top: 34px; display: grid; gap: 12px; }

/* sticky mobile call to action */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
}
.dock a {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 15px 8px;
  background: var(--bone);
  font-family: var(--f-mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dock a.is-primary { background: var(--stone); color: var(--ink); }

/* 07  Media ------------------------------------------------------------- */

.ph {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  border-radius: var(--radius-img);
}
/* a breath of shadow at the frame edge, so a photograph settles into the page
   instead of reading as a hard cut tile */
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 clamp(18px, 3vw, 46px) rgba(25, 22, 20, .24);
}
.ph__cap, .gal button > .ph::after { z-index: 2; }

.split__media > .ph-3x4,
.split__media > .ph-4x5 {
  border-radius:
    50% 50% var(--radius-img) var(--radius-img) /
    30% 30% var(--radius-img) var(--radius-img);
}
/* the arch would swallow a head placed high in the frame, so the crop drops
   back toward centre inside an arched frame */
.split__media > .ph-3x4 img,
.split__media > .ph-4x5 img { object-position: 50% 42%; }
@media (max-width: 720px) {
  .split__media > .ph-3x4,
  .split__media > .ph-4x5 {
    border-radius:
      44% 44% var(--radius-img) var(--radius-img) /
      18% 18% var(--radius-img) var(--radius-img);
  }
}
/* Warm toning rather than a flat grey wash. Photographs should feel like a
   toned silver print, which reads far warmer than clinical desaturation. */
.ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: var(--grade);
  transition: filter 1.1s var(--ease), transform 1.4s var(--ease);
}
.ph:hover img { filter: sepia(0) saturate(1) contrast(1.02); transform: scale(1.028); }
/* Portfolio frames keep their own grade. */
.gal .ph img { filter: none; }
.gal .ph:hover img { filter: none; transform: scale(1.045); }
.gal button:hover .ph::after { box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .38); }
.ph--plain img { filter: none; }
.ph--plain:hover img { transform: none; }

.ph-3x4 { aspect-ratio: 3 / 4; }
.ph-4x5 { aspect-ratio: 4 / 5; }
.ph-1x1 { aspect-ratio: 1 / 1; }
.ph-3x2 { aspect-ratio: 3 / 2; }
.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-tall { aspect-ratio: 2 / 3; }

/* Captions sit on photographs, so they carry their own plate rather than the
   section's colours. It composites to at least 9:1 over pure white. */
.ph__cap {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: .5em .8em;
  border-radius: var(--radius-btn);
  background: rgba(22, 21, 15, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--f-mono);
  font-size: var(--label-sm);
  letter-spacing: var(--label-sm-ls);
  text-transform: uppercase;
  color: var(--bone);
}

/* hero plate */
.hero { position: relative; background: var(--ink); color: var(--bone); overflow: hidden; }
.hero--split {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  min-height: min(82vh, 720px);
  background: var(--bone);
  color: var(--ink);
}
.hero--split .hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 5vw, 76px) clamp(24px, 4vw, 68px) clamp(44px, 5vw, 76px)
           max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}
/* The plate is the right hand column of a full bleed grid, so its right edge is
   the edge of the screen. Only the corners that sit inside the page get rounded. */
.hero--split .hero__plate {
  position: relative;
  min-height: min(58vw, 700px);
  overflow: hidden;
  border-radius: var(--radius-img) 0 0 var(--radius-img);
}
.hero--split .hero__plate img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--grade);
  animation: plate-in 1.6s var(--ease) both;
}
@keyframes plate-in {
  from { transform: scale(1.06); }
  to { transform: none; }
}

/* The plate hero carries three things only: an eyebrow, the headline and one
   button. The supporting line and the session facts sit on the bone strip
   underneath, where they are legible and not competing with the photograph. */
.hero--plate {
  min-height: min(72vh, 660px);
  display: flex;
  align-items: flex-end;
}
.hero--plate .hero__bg { position: absolute; inset: 0; }
.hero--plate .hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* portrait frames cropped to a wide plate bias upward to hold the face */
  object-position: 50% 22%;
  filter: var(--grade);
}
/* vertical settle, so the copy always lands on a dark base */
/* one directional scrim, lower half only, so the top of the frame is a
   photograph rather than a background */
.hero--plate .hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* a pool of shadow under the type, not a wash over the whole frame */
    radial-gradient(105% 92% at 2% 74%, rgba(16, 15, 12, .93) 0%, rgba(16, 15, 12, 0) 68%),
    linear-gradient(180deg, rgba(16, 15, 12, 0) 34%, rgba(16, 15, 12, .82) 100%);
}
.hero--plate .hero__title { max-width: 15ch; }

/* breadcrumb bar, kept off the photograph */
.pretitle {
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
}
.pretitle .crumb { padding-block: 15px; }

/* the promise line and the reassurance row under the hero */
.heroline { border-bottom: 1px solid var(--rule); }
.heroline__in {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 56px);
  align-items: center;
}
.heroline .lead { color: var(--fg); max-width: 34em; }
.heroline .hero__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-right: 22px;
  background: var(--rule);
  vertical-align: -.15em;
}
.heroline .hero__meta > * + * { margin-left: 0; }
.heroline .hero__meta { margin-top: clamp(14px, 1.4vw, 20px); gap: 10px 22px; }
.hero--plate .hero__copy {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: clamp(40px, 6vw, 86px);
}
.hero__eyebrow { margin-bottom: clamp(16px, 2vw, 26px); }
.hero__title { margin-bottom: clamp(16px, 2vw, 26px); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  margin-top: clamp(20px, 2.6vw, 34px);
  font-family: var(--f-mono);
  font-size: var(--label-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.crumb {
  font-family: var(--f-mono);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex; gap: .6em; flex-wrap: wrap;
}
.crumb a:hover { color: var(--fg); }

/* portfolio grid, click to enlarge */
.gal { display: grid; gap: clamp(8px, 1vw, 14px); grid-template-columns: repeat(4, 1fr); }
.gal .ph { aspect-ratio: 4 / 5; }
.gal button { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.gal .ph::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .06);
  transition: box-shadow .4s var(--ease);
}
.gal button:hover .ph::after { box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .28); }

.lbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 13, 10, .97);
  padding: clamp(16px, 4vw, 56px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .42s var(--ease-out), visibility .42s;
}
.lbox.is-open { opacity: 1; visibility: visible; }
.lbox img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius-img);
  transform: scale(.965);
  clip-path: inset(4% 0);
  transition: transform .8s var(--ease-out), clip-path .8s var(--ease-out), opacity .3s var(--ease);
}
.lbox.is-open img { transform: none; clip-path: inset(0 0); }
.lbox.is-swapping img { opacity: 0; }
.lbox__cap {
  right: calc(clamp(16px, 4vw, 56px) + 96px);
  position: absolute;
  left: clamp(16px, 4vw, 56px);
  bottom: 14px;
  font-size: var(--label);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--grey-soft);
}
.lbox__x, .lbox__nav {
  position: absolute;
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 16px;
}
.lbox__x { top: 10px; right: 12px; }
.lbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  padding: 14px 18px;
  background: rgba(22, 21, 15, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-btn);
}
.lbox__nav:hover { background: rgba(22, 21, 15, .95); }
.lbox__prev { left: 4px; }
.lbox__next { right: 4px; }
.lbox__count {
  position: absolute; bottom: 14px; right: clamp(16px, 4vw, 56px);
  font-family: var(--f-mono); font-size: var(--label); letter-spacing: var(--label-ls); color: var(--grey-soft);
}
.lbox__count b { color: var(--bone); font-weight: 400; }

/* 08  Components -------------------------------------------------------- */

/* path chooser and service cards */
.pcard {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--radius-img);
  background: var(--bg);
  transition: border-color .45s var(--ease), transform .6s var(--ease);
}
.pcard:hover { border-color: var(--rule); }
.pcard > .ph:first-child { border-radius: 0; }
.pcard__title { position: relative; display: inline-block; padding-bottom: .18em; }
.pcard__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.pcard:hover .pcard__title::after { transform: scaleX(1); }
.pcard__body { padding: clamp(16px, 1.6vw, 24px); display: flex; flex-direction: column; gap: .55rem; }
.pcard__eyebrow { font-family: var(--f-mono); font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); text-transform: uppercase; color: var(--accent); }
.pcard__title { font-family: var(--f-display); font-size: clamp(1.15rem, 1.5vw, 1.42rem); line-height: 1.14; }
.pcard__line { color: var(--fg-mute); font-size: .95rem; line-height: 1.45; }
.pcard__go {
  margin-top: .35rem;
  font-family: var(--f-mono); font-size: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase;
  color: var(--fg);
  display: inline-flex; gap: .5em; align-items: center;
}
.pcard:hover .pcard__go { color: var(--accent); }
.pcard--lead { border-color: var(--fg); }
.pcard--quiet .pcard__title { font-family: var(--f-sans); font-size: 1rem; letter-spacing: -.01em; }

/* small tile list, "everything else" */
.tile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-img);
  padding: 16px 18px;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.tile:hover { border-color: var(--fg); background: var(--bg); }
.tile__n { font-family: var(--f-mono); font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); color: var(--fg-mute); }

/* trust strip */
.trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius);
}
.trust__i {
  padding: clamp(22px, 3vw, 40px) clamp(14px, 2vw, 30px);
  text-align: center;
}
.trust__i + .trust__i { border-left: 1px solid var(--rule); }
.trust__k { font-family: var(--f-display); font-size: clamp(1.05rem, 1.5vw, 1.35rem); margin-bottom: .5rem; }
.trust__d { font-family: var(--f-mono); font-size: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--fg-mute); }

/* full-bleed interlude, separates the long reading stretches and lets the
   photography carry a page instead of leaving it all to type */
.plate {
  position: relative;
  min-height: min(56vh, 470px);
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
}
.plate__bg { position: absolute; inset: 0; }
.plate__bg::before, .hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 0 clamp(70px, 12vw, 190px) clamp(18px, 3vw, 54px) rgba(25, 22, 20, .78),
    inset 0 0 clamp(24px, 4vw, 70px) rgba(25, 22, 20, .5);
}
.plate__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  filter: var(--grade-dim);
}
.plate__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(22, 21, 15, .18) 0%, rgba(22, 21, 15, .58) 100%);
}
.plate__in::before {
  content: "";
  position: absolute;
  inset: -8% -6%;
  z-index: -1;
  background: radial-gradient(58% 62% at 50% 50%, rgba(22, 21, 15, .78) 0%, rgba(22, 21, 15, .46) 62%, rgba(22, 21, 15, 0) 100%);
  pointer-events: none;
}
.plate__in {
  position: relative;
  z-index: 3;
  isolation: isolate;
  width: 100%;
  text-align: center;
  padding-block: clamp(40px, 5vw, 76px);
}
.plate__line {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -.018em;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.plate__by {
  margin-top: clamp(16px, 2vw, 26px);
  font-family: var(--f-mono);
  font-size: var(--label);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--bone);
  opacity: .82;
}

/* quotes */
.quote { border-top: 1px solid var(--rule); padding-top: clamp(18px, 2vw, 28px);   border-radius: var(--radius);
}
.quote__stars { margin-bottom: 1rem; }
.quote__text {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.42;
  letter-spacing: -.01em;
}
.quote__by {
  margin-top: 1.3rem;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--fg-mute);
}
.quote__av { width: 42px; aspect-ratio: 3 / 4; overflow: hidden; flex: none; background: var(--bone-2); }
.quote__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: var(--grade-mono); }
.quote__sess { display: block; color: var(--accent); margin-top: .3em; }
.quote--big .quote__text { font-size: clamp(1.35rem, 2.4vw, 2.05rem); line-height: 1.28; }

/* editorial statement */
.statement {
  max-width: 20em;
  font-family: var(--f-display);
  font-size: clamp(1.55rem, 3.4vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -.018em;
}
.statement + .prose { margin-top: clamp(26px, 3.4vw, 48px); }
.statement--wide { max-width: 23em; font-size: clamp(1.3rem, 2.3vw, 2.05rem); line-height: 1.28; }

/* numbered process list */
.steps { border-top: 1px solid var(--rule);   border-radius: var(--radius);
}
.steps__i {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: clamp(14px, 2vw, 34px);
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--rule);
}
.steps__n { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; color: var(--accent); padding-top: .3em; }
.steps__t { font-family: var(--f-display); font-size: clamp(1.15rem, 1.5vw, 1.42rem); margin-bottom: .55rem; }
.steps__d { color: var(--fg-mute); }
.steps--split .steps__i { grid-template-columns: 3.2rem .8fr 1.2fr; align-items: start; }
.steps--split .steps__t { margin-bottom: 0; }

/* deliverables, where the photos end up */
.deliv { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.deliv--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deliv--lead > *:first-child { grid-column: 1 / -1; }
.deliv--lead > *:first-child .deliv__d { max-width: 26em; }
@media (max-width: 720px) {
  .deliv--lead { grid-template-columns: 1fr; }
}
.deliv__i .ph { margin-bottom: 1rem; }
.deliv__t { font-family: var(--f-display); font-size: 1.16rem; margin-bottom: .45rem; }
.deliv__d { color: var(--fg-mute); font-size: .95rem; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--f-mono); font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); text-transform: uppercase;
  border: 1px solid var(--edge); padding: 7px 12px; color: var(--fg-mute);
  border-radius: var(--radius-btn);
}
.chip--on { border-color: var(--fg); color: var(--fg); }

/* pricing */
.price {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) 1fr;
  gap: clamp(20px, 3vw, 54px);
  align-items: center;
  border: 1px solid var(--rule);
  padding: clamp(22px, 3vw, 42px);
  border-radius: var(--radius);
}
.price__fig { font-family: var(--f-display); font-size: clamp(3rem, 5.6vw, 4.6rem); line-height: .92; letter-spacing: -.028em; }
.price__from { font-family: var(--f-mono); font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); text-transform: uppercase; color: var(--fg-mute); margin-bottom: .6rem; }

/* accordion, native details for keyboard and no-js support */
.faq { border-top: 1px solid var(--rule); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: clamp(16px, 1.8vw, 24px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.3;
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .pm {
  flex: none;
  width: 1em; height: 1em;
  position: relative;
  margin-top: .3em;
}
.faq summary .pm::before, .faq summary .pm::after {
  content: ""; position: absolute; background: var(--accent);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.faq summary .pm::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.faq summary .pm::after { top: 0; left: 50%; height: 100%; width: 1px; transform: translateX(-50%); }
.faq details[open] summary .pm::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.faq__a { padding: 0 0 clamp(20px, 2.2vw, 30px) 0; max-width: none; }
.faq__a p { color: var(--fg-mute); margin-bottom: .9em; }
.faq__a p:last-child { margin-bottom: 0; }

/* lead magnet and inline form blocks */
.capture {
  display: grid;
  grid-template-columns: minmax(140px, .3fr) 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  border: 1px solid var(--rule);
  padding: clamp(20px, 2.6vw, 36px);
  border-radius: var(--radius-img);
}
.capture--split { grid-template-columns: 1fr auto; align-items: center; }
.cols--feature { grid-template-columns: 1.9fr 1fr; }
.cols--feature > .ph:first-child { aspect-ratio: auto; height: 100%; }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field {
  flex: 1 1 220px;
  background: var(--field);
  border: 1px solid var(--edge);
  border-radius: var(--radius-btn);
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--fg);
}
.field::placeholder { color: var(--fg-mute); }
.field:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.field:focus { border-color: var(--accent); }
.form-note { font-family: var(--f-mono); font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); color: var(--fg-mute); text-transform: uppercase; }

/* embedded enquiry form frame */
.embed {
  border: 1px solid var(--rule);
  background: var(--field);
  padding: clamp(6px, 1vw, 14px);
  border-radius: var(--radius-img);
}
.embed iframe { width: 100%; border: 0; display: block; min-height: 620px; }
/* The embed script hides the iframe until the form posts back, which does not
   happen off its own domain. These override its inline styles. */
.embed iframe[data-initial-iframe-hidden] {
  position: static !important;
  left: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.embed--tall iframe { min-height: 1100px; }

/* closing call to action */
.cta {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.cta__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(46%, 760px);
  z-index: 1;
  border-top-left-radius: var(--radius-img);
  border-bottom-left-radius: var(--radius-img);
}
.cta__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: var(--grade-dim);
}
/* the photograph dissolves into the band rather than sitting in a box */
.cta__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(22, 21, 15, .55) 34%, rgba(22, 21, 15, 0) 78%);
}
.cta__in {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(46%, 760px);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  min-height: min(74vh, 640px);
  padding-block: clamp(56px, 7vw, 104px);
}
.cta__copy { max-width: 38ch; }
.cta__copy > * + * { margin-top: 1.15rem; }
.cta__title { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1; max-width: 20ch; }
.cta .btn-row { margin-top: clamp(26px, 3vw, 38px); }

@media (max-width: 900px) {
  .cta { display: flex; flex-direction: column; }
  .cta__media { position: relative; inset: auto; width: auto; height: 62vw; order: -1; }
  .cta__media::after { background: linear-gradient(180deg, rgba(22, 21, 15, .18), var(--ink) 94%); }
  .cta__in { grid-template-columns: 1fr; min-height: 0; padding-top: clamp(20px, 4vw, 34px); }
}

/* voucher stepper */
.vstep { border-top: 1px solid var(--rule); padding-top: clamp(22px, 3vw, 40px); }
.vstep__label {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--f-mono); font-size: var(--label-lg); letter-spacing: var(--label-lg-ls); text-transform: uppercase; color: var(--accent);
  margin-bottom: clamp(16px, 2vw, 26px);
}
.opt {
  border: 1px solid var(--edge);
  padding: clamp(18px, 2.4vw, 30px);
  text-align: left;
  width: 100%;
  transition: border-color .4s var(--ease), background .4s var(--ease);
  border-radius: var(--radius-btn);
}
.opt:hover { border-color: var(--fg); }
.opt[aria-pressed="true"] { border-color: var(--fg); background: var(--bone-2); }
.opt[aria-pressed="true"] .opt__t { color: var(--accent); }
.opt__t { font-family: var(--f-display); font-size: 1.2rem; margin-bottom: .35rem; }
.opt__d { color: var(--fg-mute); font-size: .95rem; }
/* .opt is a full width card; the amount chips size to their content */
.opt--chip {
  width: auto;
  flex: 0 0 auto;
  padding: .85em 1.5em;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--label-sm);
  letter-spacing: var(--label-sm-ls);
  border-radius: var(--radius-btn);
}
.opt--chip[aria-pressed="true"] { color: var(--accent); }
.is-hidden { display: none !important; }
.vsummary { border: 1px solid var(--rule); padding: clamp(16px, 2vw, 24px); display: flex; gap: 18px; align-items: center;   border-radius: var(--radius-img);
}
.vsummary .ph { width: 96px; flex: none; }

/* blog */
.post-row {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
.post-item {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: clamp(14px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--rule);
  transition: transform .45s var(--ease);
}
.post-item:hover { transform: translateX(10px); }
.post-item__meta { font-family: var(--f-mono); font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); text-transform: uppercase; color: var(--fg-mute); }
.post-item__t { font-family: var(--f-display); font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.2; }
.post-item:hover .post-item__t { color: var(--accent); }
.post-item__go { font-family: var(--f-mono); font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); text-transform: uppercase; color: var(--fg-mute); }

/* Long-form reading. The measure is set in em so it tracks the type size. */
.article {
  max-width: 34em;
  margin-inline: 0;
  font-size: 1.08rem;
  line-height: 1.7;
}

/* A post's title block keeps the page width; only the headline is measured. */
.posthead { max-width: 46rem; }
.posthead .d2 { max-width: 24em; }
.article p { margin-bottom: 1.35em; color: var(--fg-mute); }
.article h2 {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.18;
  margin: 2.2em 0 .8em;
  color: var(--fg);
}
.article h3 {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  margin: 1.9em 0 .7em;
  color: var(--fg);
}
.article .pull {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.3;
  color: var(--fg);
  border-left: 1px solid var(--accent);
  padding-left: 1.2em;
  margin: 2em 0;
}
.article-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 2em 0; }
.article-figs--one { grid-template-columns: 1fr; }
.article-figs .ph { aspect-ratio: 3 / 2; }

/* confirmation */
.tick {
  width: 54px; height: 54px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent);
  margin-inline: auto;
  font-size: 1.1rem;
}
.next-list { border: 1px solid var(--rule); padding: clamp(20px, 2.6vw, 32px); text-align: left;   border-radius: var(--radius);
}
.next-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.next-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.next-list li:first-child { padding-top: 0; }
.next-list .n { font-family: var(--f-mono); font-size: .7rem; color: var(--accent); padding-top: .2em; }

/* small map frame */
.mapframe { border: 1px solid var(--rule); overflow: hidden;   border-radius: var(--radius);
}
.mapframe iframe { width: 100%; height: 340px; border: 0; display: block; filter: grayscale(1) contrast(1.06); }

/* info list, contact details */
.dl { border-top: 1px solid var(--rule); }
.dl > div { display: grid; grid-template-columns: minmax(120px, .35fr) 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.dl dt { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute); padding-top: .25em; }
.dl dd { margin: 0; }
.dl a:hover { color: var(--accent); }

/* 09  Footer ------------------------------------------------------------ */

.foot {
  background: var(--ink);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}
@keyframes markdrift {
  from { transform: translateX(-51%); }
  to   { transform: translateX(-49%); }
}
.foot__mark {
  animation: markdrift 44s ease-in-out infinite alternate;
  position: absolute;
  left: 50%;
  bottom: -.34em;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: clamp(7rem, 24vw, 20rem);
  line-height: .8;
  letter-spacing: .12em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(246, 245, 243, .07);
  pointer-events: none;
  white-space: nowrap;
}
.foot__in { position: relative; z-index: 2; padding-block: clamp(52px, 7vw, 100px) 0; }
.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.foot h2,
.foot h4 {
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.1rem;
  font-weight: 400;
}
.foot ul li + li { margin-top: .6rem; }
.foot a { color: #A5A099; }
/* .foot a outranks .btn, so the button keeps its own label colour */
.foot .btn { color: var(--btn-fg); }
.foot a:hover { color: var(--bone); }
.foot__brand p { color: #A5A099; font-size: .96rem; margin-top: 1.1rem; max-width: 32ch; }
.foot__rate { display: flex; align-items: center; gap: 10px; margin-bottom: 1.2rem; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #A5A099; }
.foot__base {
  border-top: 1px solid rgba(246, 245, 243, .14);
  padding-block: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-size: .82rem;
  color: #8C877F;
}
.foot__ack {
  border-top: 1px solid rgba(246, 245, 243, .14);
  padding-block: 22px 30px;
  font-size: .8rem;
  line-height: 1.6;
  color: #8C877F;
  max-width: 88ch;
}
.social { display: flex; gap: 18px; font-family: var(--f-mono); font-size: var(--label-sm); letter-spacing: var(--label-sm-ls); text-transform: uppercase; }

/* 10  Motion ------------------------------------------------------------ */

/* The base reveal. Kept small, because the character comes from the
   headline and media reveals below rather than from everything sliding. */
.js-anim [data-rise] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.5s var(--ease-out), transform 1.5s var(--ease-out);
}
.js-anim [data-rise].is-in { opacity: 1; transform: none; }
.js-anim [data-rise][data-d="1"] { transition-delay: .14s; }
.js-anim [data-rise][data-d="2"] { transition-delay: .28s; }
.js-anim [data-rise][data-d="3"] { transition-delay: .42s; }
.js-anim [data-rise][data-d="4"] { transition-delay: .56s; }

/* Headlines rise word by word out of their own baseline, the way a title
   sequence does. Words are wrapped by script so the markup stays clean. */
.reveal-w { opacity: 1 !important; transform: none !important; }
.reveal-w .w {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .28em;
  margin-bottom: -.28em;
  vertical-align: top;
}
.js-anim .reveal-w .w__i {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.05s var(--ease-out);
}
.js-anim .reveal-w.is-in .w__i { transform: none; }

/* Photographs wipe open rather than fade in. */
.js-anim [data-media] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.8s var(--ease-out);
}
.js-anim [data-media].is-in { clip-path: inset(0 0 0 0); }
.js-anim [data-media][data-d="1"] { transition-delay: .1s; }
.js-anim [data-media][data-d="2"] { transition-delay: .2s; }
.js-anim [data-media][data-d="3"] { transition-delay: .3s; }

/* Tier 3. Grid tiles settle rather than wipe, staggered by index. */
.js-anim [data-tile] {
  opacity: 0;
  transform: scale(.985);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js-anim [data-tile].is-in { opacity: 1; transform: none; }

/* The section hairline draws itself downward. */
.js-anim .hr { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.js-anim .hr.is-in { transform: scaleX(1); }

/* Parallax, applied by script. Small enough to read as depth, not motion. */
[data-parallax] { will-change: transform; }

/* Masthead retracts on the way down and returns on the way up. */
.mast { transform: translateY(0); transition: transform .6s var(--ease-out), border-color .4s var(--ease), background .4s var(--ease); }
.mast.is-retracted { transform: translateY(-101%); }

/* Nav panels open with their items following a beat behind. */
.nav__panel > * {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.nav__item:hover > .nav__panel > *,
.nav__item:focus-within > .nav__panel > * { opacity: 1; transform: none; }
.nav__panel > *:nth-child(2) { transition-delay: .04s; }
.nav__panel > *:nth-child(3) { transition-delay: .07s; }
.nav__panel > *:nth-child(4) { transition-delay: .1s; }
.nav__panel > *:nth-child(5) { transition-delay: .13s; }
.nav__panel > *:nth-child(6) { transition-delay: .16s; }
.nav__panel > *:nth-child(7) { transition-delay: .19s; }
.nav__panel > *:nth-child(8) { transition-delay: .22s; }

/* Gallery frames lift and name themselves on hover. */
.gal button { position: relative; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  [data-rise] { opacity: 1; transform: none; }
  [data-media] { clip-path: none; }
  [data-tile] { opacity: 1; transform: none; }
  .reveal-w .w__i { transform: none; }
  .mast.is-retracted { transform: none; }
  [data-parallax] { transform: none !important; }
}

/* 11  Responsive -------------------------------------------------------- */

@media (max-width: 1180px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .gal { grid-template-columns: repeat(3, 1fr); }
  /* the meta row needs its own column before the 1024 breakpoint */
}

@media (max-width: 1024px) {
  /* three columns become unreadable at roughly 200px each */
  .cols-3, .deliv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: 1fr 1fr; }
  .capture--split, .cols--feature { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .nav, .util { display: none; }
  .burger { display: inline-flex; }
  .mast__in { height: 70px; }
  .shead { grid-template-columns: 1fr; gap: 12px; }
    .split, .split--wide-l, .split--wide-r { grid-template-columns: 1fr; }
  .split > .split__media { order: -1; }
  .hero--split { grid-template-columns: 1fr; min-height: 0; }
  .hero--split .hero__copy { padding-inline: var(--gutter); padding-block: clamp(44px, 9vw, 76px); }
  /* Stacked and edge to edge on both sides, so no rounding at all. */
  .hero--split .hero__plate { min-height: min(78vw, 62vh, 700px); border-radius: 0; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .steps--split .steps__i { grid-template-columns: 2.6rem 1fr; }
  .dock { display: flex; }
  body { padding-bottom: var(--dock-h); }
  .price { grid-template-columns: 1fr; }
  .capture { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .dock a { padding: 12px 6px; font-size: var(--label-sm); letter-spacing: .08em; }
  :root { --dock-h: 72px; }
}

/* Without JS the drawer is part of the page rather than a dialog, since the
   burger cannot open it and .nav is hidden below 1024px. */
@media (max-width: 1024px) {
  .no-js .burger { display: none; }
  .no-js .drawer {
    position: static;
    transform: none;
    visibility: visible;
    padding-top: 24px;
    z-index: auto;
  }
  .no-js .drawer__x { display: none; }
  .no-js .drawer__sub { display: block; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .cols-3, .cols-2, .cols-4, .deliv, .article-figs { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .trust__i + .trust__i { border-left: 0; border-top: 1px solid var(--rule); }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr; }
  .post-item { grid-template-columns: 1fr; gap: 8px; }
  .post-item__go { display: none; }
  .vsummary { flex-direction: column; align-items: flex-start; }
  .dl > div { grid-template-columns: 1fr; gap: 4px; }
  .mapframe iframe { height: 260px; }
}


/* Editorial labels read as prose, not as signage. Capitals tolerate wide
   tracking; lowercase does not, so the tracking eases with the case. */
.kicker,
.bigquote__by,
.plate__by,
.price__from,
.mono-note,
.form-note,
.quote__by,
.trust__d,
.post-item__meta,
.dl dt,
.vfield__l,
.vstep__label,
.lbox__cap,
.hero__meta,
.foot__rate,
.pcard__eyebrow,
.nav__panel .sub,
.crumb,
.util,
.foot h4 {
  text-transform: none;
  letter-spacing: .055em;
}

/* 12  Site forms ---------------------------------------------------------- */

/* Our own enquiry form. The visitor never meets an embedded iframe, and the
   submission is forwarded to GoHighLevel server side. */
.seenform { max-width: 46rem; }
.seenform__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.seenform .vfield { margin-bottom: clamp(14px, 1.8vw, 22px); }
.seenform__row .vfield { margin-bottom: 0; }
.seenform textarea.field { resize: vertical; min-height: 8em; }
.seenform__consent {
  display: flex;
  align-items: flex-start;
  gap: .7em;
  margin-top: clamp(6px, 1vw, 12px);
  color: var(--fg-mute);
  font-size: .95rem;
  line-height: 1.5;
}
.seenform__consent input { margin-top: .28em; flex: 0 0 auto; }
.seenform__status {
  margin-top: clamp(14px, 1.8vw, 20px);
  font-family: var(--f-mono);
  font-size: var(--label-sm);
  letter-spacing: .055em;
}
.seenform__status[data-state="ok"]    { color: var(--accent); }
.seenform__status[data-state="error"] { color: var(--fg); }
.seenform button[type="submit"][disabled] { opacity: .6; cursor: progress; }

@media (max-width: 720px) {
  .seenform__row { grid-template-columns: 1fr; }
}

/* The session select. A native control brings its own arrow and its own idea of
   height, neither of which match the rest of the form, so both are replaced. */
select.field {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 42px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--edge) 50%),
    linear-gradient(135deg, var(--edge) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select.field:hover { border-color: var(--btn-hover); }