/* Marika Roseberg Photography
   Layout modelled on the Aldena Framer template; colours, type and copy follow
   Roseberg Assets (brand guidelines and design tokens).
   Aldena's black grounds use Soft Black, white uses Marble, grey uses Blush.
   Fonts below are Klim TRIAL files for preview only: buy the web licence and
   swap in the WOFF2 files before launch. */

@font-face { font-family: 'Domaine Display'; src: url('../fonts/domaine-display-regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Domaine Display'; src: url('../fonts/domaine-display-italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Domaine Display'; src: url('../fonts/domaine-display-medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Söhne'; src: url('../fonts/sohne-buch.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Söhne'; src: url('../fonts/sohne-buch-italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Söhne'; src: url('../fonts/sohne-kraftig.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --ink: #1A1416;          /* Soft Black: dark grounds */
  --paper: #F3EFEA;        /* Marble */
  --blush: #EAD7D8;        /* soft pink chosen by Marika (brand book: #E8CFC2) */
  --cream: #FBF2EA;        /* light card colour on the pink */
  --rose: #B98C86;
  --walnut: #4E3222;
  --burgundy: #4A1C26;      /* brand primary */
  --forest: #0E1805;        /* deep green chosen by Marika (brand book: #203A2C) */
  --brass: #A8875A;
  --paper-80: rgba(243, 239, 234, .8);
  --paper-60: rgba(243, 239, 234, .6);
  --paper-30: rgba(243, 239, 234, .3);
  --paper-line: rgba(243, 239, 234, .16);
  --ink-line: rgba(26, 20, 22, .14);
  --muted: #6B5A55;

  --serif: 'Domaine Display', 'Playfair Display', Georgia, serif;
  --sans: 'Söhne', 'Sohne', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(16px, 2.2vw, 32px);
  --max: 1376px;
  --section: clamp(80px, 9.4vw, 136px);
  --radius: 2px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.dark { background: var(--burgundy); color: var(--paper); }

/* ---------------------------------------------------------------- type */
.label, .eyebrow { font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; }
.section-title, .page-title, .display-l, .h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.4vw, 80px); line-height: 1; letter-spacing: -.02em; }
.h2 { font-size: clamp(34px, 3.6vw, 52px); }
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 8vw, 128px); line-height: .95; letter-spacing: -.02em; }
.section-sub { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 34em; margin-top: 20px; }
.dark .section-sub { color: var(--paper-60); }
.card-title { font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
em { font-style: italic; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn-dark, .btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-dark:hover, .btn-primary:hover { background: var(--burgundy); border-color: var(--burgundy); }
.btn-light, .btn-primary.btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-light:hover, .btn-primary.btn-light:hover { background: var(--blush); border-color: var(--blush); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-outline-light { border-color: var(--paper-60); color: var(--paper); background: transparent; }
.btn-outline-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-block { width: 100%; }
.text-link, .link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* ---------------------------------------------------------------- header: centred links, rolling letters */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 60; height: 76px; display: flex; align-items: center; justify-content: center;
  color: #fff; pointer-events: none; }
.site-header .nav, .site-header .brand { color: #fff; }
.site-header.tint-ready .nav, .site-header.tint-ready .brand { transition: color .35s var(--ease); }
.site-header .nav.is-dark, .site-header .brand.is-dark { color: var(--burgundy); }
body.menu-open .site-header .nav, body.menu-open .site-header .brand { color: #fff; }
.site-header a { pointer-events: auto; }
.brand { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 0; text-decoration: none; }
.brand .cipher { width: 28px; height: 40px; }
.brand-name { display: flex; flex-direction: column; font-family: var(--serif); font-size: 21px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.brand-name small { font-family: var(--sans); font-weight: 500; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; margin-top: 5px; }
.cipher { display: block; width: 20px; height: 28px; background: currentColor; -webkit-mask: url('../img/cipher.svg') center / contain no-repeat; mask: url('../img/cipher.svg') center / contain no-repeat; }
.nav ul { display: flex; gap: 22px; }
.nav a { display: block; padding: 12px 0; text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.roll { position: relative; display: inline-flex; flex-direction: column; overflow: hidden; height: 1.3em; line-height: 1.3; vertical-align: top; }
.roll > span { display: flex; }
.roll span span { display: inline-block; transition: transform .45s var(--ease); transition-delay: calc(var(--i) * 18ms); }
a:hover .roll span span, a:focus-visible .roll span span { transform: translateY(-100%); }

.menu-pill { position: fixed; left: 50%; bottom: 20px; z-index: 70; transform: translateX(-50%); width: 56px; height: 36px; border-radius: var(--radius);
  border: 1px solid var(--paper-30); background: rgba(26, 20, 22, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; }
.menu-lines, .menu-lines::before, .menu-lines::after { display: block; width: 18px; height: 1px; background: var(--paper); position: relative; transition: transform .35s var(--ease), opacity .2s; }
.menu-lines::before, .menu-lines::after { content: ''; position: absolute; left: 0; }
.menu-lines::before { top: -5px; } .menu-lines::after { top: 5px; }
.menu-pill[aria-expanded="true"] .menu-lines { background: transparent; }
.menu-pill[aria-expanded="true"] .menu-lines::before { transform: translateY(5px) rotate(45deg); }
.menu-pill[aria-expanded="true"] .menu-lines::after { transform: translateY(-5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 65; background: var(--burgundy); color: var(--paper); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 48px; padding: 80px var(--gutter); }
.menu ul { text-align: center; }
.menu ul a { display: block; font-family: var(--serif); font-size: clamp(44px, 7vw, 88px); line-height: 1.1; text-decoration: none; color: var(--paper-60); transition: color .3s; }
.menu ul a:hover { color: var(--paper); }
.menu-foot { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: center; font-size: 15px; }
body.menu-open { overflow: hidden; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; height: 100svh; height: 100lvh; height: var(--hero-h, 100lvh); min-height: 620px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media.is-placed img { position: absolute; max-width: none; object-fit: fill; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%); transform: scale(1.06); animation: settle 2.4s var(--ease) forwards; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,20,22,.2) 0%, rgba(26,20,22,0) 40%, rgba(26,20,22,.55) 100%); pointer-events: none; }
.hero-name { position: relative; z-index: 1; padding: 64px var(--gutter) 0; text-align: center; font-family: var(--serif); font-weight: 400; line-height: .9; letter-spacing: -.03em; white-space: nowrap; font-size: 12.8vw; }
.hero-name [data-fit] { position: relative; display: inline-block; animation: rise 1.4s var(--ease) both; }
.hero-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: stretch; gap: 24px; padding: 0 var(--gutter) 28px; }
.hero-sub { font-family: var(--serif); font-size: clamp(32px, 2.8vw, 44px); line-height: 1.2; margin-bottom: 18px; animation: rise 1.4s .15s var(--ease) both; }
.hero-lines { animation: rise 1.4s .25s var(--ease) both; }
.hero-lines li { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--paper-80); line-height: 1.55; }
.hero-card { width: 300px; display: flex; flex-direction: column; padding: 12px 16px 12px; border-radius: var(--radius); background: rgba(26,20,22,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 0; animation: rise 1.4s .35s var(--ease) both; }
.hero-progress { position: relative; height: 1px; flex: none; background: var(--paper-30); margin: 2px 0 6px; overflow: hidden; }
.hero-progress span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--paper); }
.hero-card-top { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.hero-card-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hero-card-top button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--paper); margin-left: -6px; }
.hero-count { margin-left: auto; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--paper-80); }
.hero-card-track { display: grid; }
.hero-card-track { overflow: hidden; margin-top: auto; }
.hero-card-item { grid-area: 1 / 1; display: grid; gap: 4px; align-content: end; text-decoration: none; opacity: 0; visibility: hidden; transform: translateX(32px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility .35s; }
.hero-card-item.is-leaving { transform: translateX(-32px); }
.hero-card-item.is-active { transition: opacity .5s .28s var(--ease), transform .7s .28s var(--ease), visibility 0s; }
.hero-card-item.is-active { opacity: 1; visibility: visible; transform: none; }
.hero-card-title { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.hero-card-text { font-size: 13px; line-height: 1.35; color: var(--paper-80); }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes settle { to { transform: scale(1); } }

/* ---------------------------------------------------------------- about */
.about { padding: var(--section) 0; }
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(56px, 6.8vw, 104px); }
.stat { border-left: 1px solid var(--paper-line); padding: 4px 0 4px 24px; display: grid; gap: 14px; }
.stat-value { font-family: var(--sans); font-weight: 500; font-size: clamp(36px, 3.6vw, 56px); line-height: 1; letter-spacing: -.03em; }
.stat-suffix { color: var(--rose); margin-left: 2px; }
.stat-label { font-size: 16px; color: var(--paper-60); }
.about-side { position: sticky; top: 96px; display: grid; gap: 28px; justify-items: start; }
.about-figure { position: relative; width: 100%; max-width: 300px; }
.about-figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }
.about-figure figcaption { position: absolute; left: 16px; bottom: 12px; font-family: var(--serif); font-size: 30px; }
.about-text { font-family: var(--sans); font-weight: 500; font-size: clamp(26px, 3vw, 44px); line-height: 1.1; letter-spacing: -.035em; margin-bottom: .8em; }
.about-text span { color: var(--paper-30); transition: color .35s var(--ease); }
.about-text span.on { color: var(--paper); }
.signature { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.35; color: var(--paper-80); margin-top: 16px; }
.signature strong { color: var(--paper); font-weight: 500; }
.avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- split screen (sessions) */
.split { display: flex; gap: 8px; height: 100svh; min-height: 560px; background: var(--burgundy); padding: 8px 0; }
.split-panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: grid; place-items: center; text-decoration: none; color: #fff;
  transition: flex-grow .9s cubic-bezier(.22, .8, .2, 1); }
.split:hover .split-panel { flex-grow: .85; }
.split .split-panel:hover, .split .split-panel:focus-visible { flex-grow: 1.55; }
.split-media { position: absolute; inset: 0; clip-path: inset(0); transition: clip-path 1.2s cubic-bezier(.22, .8, .2, 1) calc(var(--i) * 120ms); }
.split-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform: scale(1.04); transition: transform 1.4s cubic-bezier(.22, .8, .2, 1), filter .6s; filter: brightness(.72); }
.split-panel:hover .split-media img { transform: scale(1); filter: brightness(.85); }
.split-copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 0 16px; max-width: 100%;
  transition: opacity .8s ease calc(.5s + var(--i) * 120ms), transform .8s cubic-bezier(.22, .8, .2, 1) calc(.5s + var(--i) * 120ms); }
.split-title { font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
/* one shared View more button, fixed to the screen and moved straight to the cursor */
.split-more { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; will-change: transform; transform: translate3d(-500px, -500px, 0); }
.split-more > span { display: block; padding: 13px 22px; border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius); background: rgba(26, 20, 22, .35);
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap;
  transform: translate(-50%, -50%) scale(.85); opacity: 0; transition: opacity .2s ease, transform .25s cubic-bezier(.22, .8, .2, 1); }
.split-more.is-on > span { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* grows out from the centre as it comes into view */
.js .split:not(.is-in) .split-media { clip-path: inset(22% 18% 22% 18%); }
.js .split:not(.is-in) .split-copy { opacity: 0; transform: translateY(16px); }

/* ---------------------------------------------------------------- services carousel */
.services { position: relative; background: var(--blush); padding: clamp(68px, 7.6vw, 108px) 0; --card: min(1080px, 86vw); }
.services-track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--card); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 calc((100vw - var(--card)) / 2); }
.services-track::-webkit-scrollbar { display: none; }
.service-card { scroll-snap-align: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; background: var(--paper); border-radius: var(--radius); padding: 40px; min-height: 520px; transition: opacity .5s var(--ease); }
.service-card:not(.is-current) { opacity: .55; }
.service-text { display: flex; flex-direction: column; gap: 14px; }
.service-text > .label { color: var(--muted); }
.service-title { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -.02em; }
.service-desc { font-size: 16px; line-height: 1.45; color: var(--muted); max-width: 30em; }
.service-price { margin-top: auto; display: grid; gap: 6px; justify-items: start; }
.service-price .label { color: var(--muted); }
.price { font-family: var(--serif); font-size: 44px; line-height: 1; letter-spacing: -.02em; }
.service-media { position: relative; overflow: hidden; border-radius: var(--radius); }
.service-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-num { position: absolute; top: 14px; right: 16px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); }
.round { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); font-size: 20px; line-height: 1; transform: translateY(-50%); transition: background-color .3s; }
.round:hover { background: var(--burgundy); }
.round.prev { left: calc((100vw - var(--card)) / 2 - 22px); }
.round.next { right: calc((100vw - var(--card)) / 2 - 22px); }

/* ---------------------------------------------------------------- process */
.process { padding: var(--section) 0 0; }
.process .section-title { max-width: 9em; margin: 0 0 clamp(48px, 6vw, 80px) calc(100% / 12 * 2); }
.steps { display: grid; }
.step { display: grid; grid-template-columns: calc(100% / 12 * 2) minmax(0, 1fr) 180px; align-items: start; padding: 22px 0; border-top: 1px solid var(--paper-line); cursor: default; }
.step:last-child { border-bottom: 1px solid var(--paper-line); }
.step-num { font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--paper-60); padding-top: 12px; }
.step-title { font-family: var(--sans); font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.3; letter-spacing: -.03em; color: var(--paper-30); transition: color .4s var(--ease); }
.step-text { max-width: 36em; font-size: 16px; line-height: 1.45; color: var(--paper-80); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .4s var(--ease), margin .6s var(--ease); }
.step-dur { justify-self: end; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-30); padding-top: 12px; transition: color .4s; }
.step.is-active .step-title, .step.is-active .step-dur { color: var(--paper); }
.step.is-active .step-text { max-height: 12em; opacity: 1; margin-top: 10px; }
.marquee { margin-top: clamp(68px, 7.6vw, 108px); padding: 28px 0; overflow: hidden; border-top: 1px solid var(--paper-line); }
.marquee-track { display: flex; width: max-content; gap: 64px; animation: marquee 40s linear infinite; }
.marquee li { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--paper-60); white-space: nowrap; }
.marquee .cipher { width: 16px; height: 22px; }
@keyframes marquee { to { transform: translateX(calc(-50% - 32px)); } }

/* ---------------------------------------------------------------- testimonials: pinned while the cards slide in */
.voices { position: relative; }
.voices-sticky { padding: var(--section) 0 48px; overflow: hidden; }
.quote-deck { position: relative; width: min(820px, 88vw); margin: 0 auto; display: grid; gap: 24px; }
.quote-card { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; min-height: clamp(400px, 38vw, 500px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4); transform-origin: 50% 50%; will-change: transform; }
.quote-card:nth-child(even) { background: #EAE3DC; }
/* With JavaScript: the section is as tall as the cards need, the deck stays pinned and cards slide up over each other */
.js .voices { height: calc(var(--n) * 100svh); }
.js .voices-sticky { position: sticky; top: 0; height: 100svh; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 96px; overflow: visible; }
.js .voices { overflow: clip; }
.js .quote-deck { display: block; height: clamp(400px, 38vw, 500px); }
.js .quote-card { position: absolute; inset: 0; min-height: 0; }
.quote-mark { font-family: var(--serif); font-size: 80px; line-height: .6; height: 36px; color: var(--rose); }
.quote-card blockquote p { font-family: var(--sans); font-weight: 500; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; letter-spacing: -.03em; max-width: 21em; }
.quote-card figcaption { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; font-size: 15px; color: var(--muted); }
.quote-name { display: block; font-family: var(--serif); font-size: 24px; color: var(--ink); margin-bottom: 2px; }
.quote-photo { width: 96px; flex: none; }
.quote-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.quote-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 48px; }
.js .quote-foot { margin-top: 0; }
.quote-tabs { display: grid; gap: 4px; justify-items: end; }
.quote-tabs button { border: 0; background: none; padding: 4px 0; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-30); transition: color .3s; }
.quote-tabs button[aria-current="true"], .quote-tabs button:hover { color: var(--paper); }

/* ---------------------------------------------------------------- cursor: a small dot in the opposite colour */
.cursor { position: fixed; left: 0; top: 0; z-index: 9999; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; mix-blend-mode: difference;
  pointer-events: none; opacity: 0; transition: opacity .25s, width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease); will-change: transform; }
.cursor.is-visible { opacity: 1; }
.cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
html.has-cursor, html.has-cursor * { cursor: none !important; }
/* form fields use the circle as well (the text caret still shows while typing) */

/* ---------------------------------------------------------------- faq */
.faq { padding: var(--section) 0; }
.faq .section-title { max-width: 8em; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(40px, 10vw, 160px); margin-top: clamp(40px, 5.1vw, 68px); align-items: start; }
.faq-item { border-bottom: 1px solid var(--ink-line); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 16px 0; cursor: pointer; font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.faq-item summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 12px; height: 12px; flex: none; transition: transform .4s var(--ease); }
.plus::before, .plus::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.plus::after { transform: rotate(90deg); }
.faq-item[open] .plus { transform: rotate(45deg); }
.faq-item p { padding: 0 48px 24px 0; font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 40em; }
.faq-aside { display: grid; gap: 16px; justify-items: start; position: sticky; top: 96px; }
.faq-aside img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.faq-aside p { font-size: 16px; line-height: 1.4; color: var(--muted); }

/* ---------------------------------------------------------------- journal */
.journal-home { padding: 0 0 var(--section); }
.journal-head { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); }
.journal-head .section-sub { margin-left: auto; margin-right: auto; }
[data-reveal-text] span { color: rgba(26, 20, 22, .18); transition: color .4s var(--ease); }
[data-reveal-text] span.on { color: var(--ink); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px; }
.post-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-card a { text-decoration: none; display: grid; gap: 16px; }
.post-media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--blush); }
.post-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.post-card a:hover img { transform: scale(1.04); }
.post-label { position: absolute; left: 14px; top: 14px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); }
.post-title { font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; max-width: 20em; }
.post-card a:hover .post-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post-excerpt { color: var(--muted); max-width: 32em; }
.post-card.featured a { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 48px; align-items: end; }
.post-card.featured .post-media img { aspect-ratio: 4 / 3; }
.post-card.featured .post-title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; }
.journal-home .center { margin-top: 64px; }

/* ---------------------------------------------------------------- cta */
.cta { position: relative; overflow: hidden; }
.cta-stage { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 120px var(--gutter); }
.cta-stage > * { grid-area: 1 / 1; }
.cta-media { width: min(420px, 60vw); }
.cta-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: var(--radius); }
.cta-title { position: relative; z-index: 1; font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 9.6vw, 164px); line-height: .95; letter-spacing: -.03em; text-align: center; }
.cta .btn { position: relative; z-index: 1; align-self: end; margin-bottom: 12vh; }
.corners li { position: absolute; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-60); }
.corners .c0 { left: var(--gutter); top: 96px; }
.corners .c1 { right: var(--gutter); top: 96px; }
.corners .c2 { right: var(--gutter); bottom: 32px; }
.corners .c3 { left: var(--gutter); bottom: 32px; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--paper); padding-top: clamp(56px, 6vw, 88px); overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.footer-news { max-width: 460px; display: grid; gap: 12px; align-content: start; }
.footer-title { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; }
.footer-news > p { color: var(--muted); }
.news-form { display: grid; gap: 10px; margin-top: 12px; }
.news-form input { min-height: 48px; padding: 0 16px; border: 1px solid var(--ink-line); border-radius: var(--radius); background: #EAE3DC; font: inherit; font-size: 16px; color: var(--ink); }
.form-note { font-size: 14px; min-height: 1em; }
.footer-small { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted); line-height: 1.6; margin-top: 12px; }
.footer-small a { color: inherit; }
.footer-right { display: grid; gap: 40px; align-content: start; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.footer-cols a { display: inline-block; padding: 3px 0; font-size: 18px; font-weight: 500; letter-spacing: -.02em; text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-contact { display: grid; gap: 6px; }
.footer-phone { font-size: 22px; font-weight: 500; color: var(--muted); text-decoration: none; letter-spacing: -.02em; }
.footer-email { font-family: var(--serif); font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.02em; text-decoration: none; overflow-wrap: anywhere; }
.footer-email:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.footer-mark { font-size: 12.6vw; height: .74em; margin-top: 48px; padding: 0 var(--gutter); overflow: hidden; text-align: center; font-family: var(--serif); line-height: .9; }
.footer-mark span { display: inline-block; letter-spacing: -.03em; white-space: nowrap; color: rgba(74, 28, 38, .08); }

/* ---------------------------------------------------------------- inner pages */
.page-hero { padding: 140px 0 clamp(40px, 5.1vw, 76px); }
.page-hero-grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: end; }
.page-hero.with-media .page-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.page-hero-copy { display: grid; gap: 20px; justify-items: start; }
.page-hero-copy .label { color: var(--muted); }
.page-hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

.image-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.image-hero-media, .image-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,20,22,.15) 30%, rgba(26,20,22,.75) 100%); }
.image-hero-copy { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: start; padding-bottom: 76px; }
.image-hero-copy .display { max-width: 9em; }
.image-hero-text { font-size: 17px; color: var(--paper-80); max-width: 34em; }
.image-hero .price { color: var(--paper); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero-actions.center { justify-content: center; margin-top: 32px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--ink-line); border-radius: var(--radius); background: none; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: background-color .3s, color .3s; }
.chip[aria-pressed="true"], .chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.portraits-page, .journal-page { padding-bottom: var(--section); }
.journal-page { padding-top: clamp(40px, 4.4vw, 64px); }
/* portfolio gallery: four columns, photos at their natural shape */
.gallery { columns: 4; column-gap: clamp(16px, 3.4vw, 52px); padding: 8px clamp(10px, 1vw, 16px) 0; }
.gallery-item { break-inside: avoid; margin: 0 0 clamp(16px, 3.4vw, 52px); }
.gallery-item[hidden] { display: none; }
.gallery-link { display: block; width: 100%; padding: 0; border: 0; background: var(--blush); cursor: zoom-in; overflow: hidden; }
a.gallery-link { cursor: pointer; }
.gallery-link img { width: 100%; height: auto; display: block; transition: transform 1.1s cubic-bezier(.22, .8, .2, 1), opacity .4s; }
.gallery-link:hover img { transform: scale(1.03); }
.portraits-page .chips { margin-bottom: clamp(32px, 4vw, 56px); }
.portraits-page { padding-top: clamp(40px, 4.4vw, 64px); }
.gallery-head { display: grid; gap: 20px; }
.gallery-head .label { color: var(--muted); }

/* full-screen photo viewer */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(26, 20, 22, .96); display: grid; place-items: center; padding: 64px 72px; }
.lightbox-figure { max-width: 100%; max-height: 100%; display: grid; place-items: center; }
.lightbox-figure img { max-width: min(1400px, calc(100vw - 144px)); max-height: calc(100svh - 128px); width: auto; height: auto; object-fit: contain; }
.lightbox-close, .lightbox-nav { position: absolute; border: 0; background: none; color: var(--paper); cursor: pointer; line-height: 1; }
.lightbox-close { top: 16px; right: 20px; font-size: 40px; width: 48px; height: 48px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 48px; width: 56px; height: 72px; }
.lightbox-nav.prev { left: 8px; } .lightbox-nav.next { right: 8px; }
.lightbox-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--paper-60); }
.portrait-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px; }
.portrait-grid.masonry { display: block; columns: 3; column-gap: 16px; }
.portrait-grid.masonry .portrait-card { break-inside: avoid; margin-bottom: 48px; }
.portrait-grid.masonry .portrait-card:nth-child(3n+2) .portrait-media img { aspect-ratio: 3 / 4; }
.portrait-grid.masonry .portrait-card:nth-child(3n) .portrait-media img { aspect-ratio: 1 / 1; }
.portrait-card a { text-decoration: none; display: grid; gap: 14px; }
.portrait-media { overflow: hidden; border-radius: var(--radius); background: var(--blush); }
.portrait-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.portrait-card a:hover img { transform: scale(1.04); }
.portrait-meta p { font-size: 14px; color: var(--muted); margin-top: 4px; }

.story-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.story-media, .story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,20,22,.1), rgba(26,20,22,.75)); }
.story-head { position: relative; z-index: 1; padding-bottom: 72px; display: grid; gap: 32px; }
.story-head .display-xl { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 8vw, 128px); line-height: .95; letter-spacing: -.02em; max-width: 10em; }
.meta-row { display: flex; flex-wrap: wrap; gap: 16px 48px; padding-top: 20px; border-top: 1px solid var(--paper-line); }
.meta-row li { display: grid; gap: 4px; font-size: 15px; }
.meta-row .eyebrow { color: var(--paper-60); }
.story-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 6vw, 96px); padding-top: var(--section); padding-bottom: 56px; }
.story-facts { border-top: 1px solid var(--ink-line); padding-top: 20px; align-self: start; }
.story-facts .eyebrow { color: var(--muted); margin-bottom: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 13px; border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 3px 10px; }
.story-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: var(--section); }
.story-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.more { padding-top: var(--section); padding-bottom: var(--section); }
.more .h2 { margin-bottom: 40px; }
.more > .eyebrow { color: var(--muted); margin-bottom: 24px; }

.prose { max-width: 38em; font-size: 18px; line-height: 1.65; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.02em; margin-top: 1.8em; }
.prose h3 { font-weight: 500; font-size: 22px; letter-spacing: -.02em; margin-top: 1.6em; }
.prose ul li { position: relative; padding-left: 24px; margin-top: 8px; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .8em; width: 10px; height: 1px; background: var(--brass); }
.prose blockquote { border-left: 1px solid var(--rose); padding-left: 24px; margin: 2em 0; }
.prose blockquote p { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.02em; }
.pull { font-family: var(--sans); font-weight: 500; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -.03em; margin-bottom: 1.2em; }

.service-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); padding-top: var(--section); padding-bottom: var(--section); align-items: start; }
.includes { background: var(--blush); padding: 36px; border-radius: var(--radius); position: sticky; top: 96px; }
.includes .offer-scope { margin-top: 12px; color: var(--muted); }
.includes ul { margin: 16px 0 24px; }
.includes li { padding: 12px 0; border-bottom: 1px solid var(--ink-line); }
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.offer-card a { text-decoration: none; display: grid; gap: 10px; }
.offer-media { overflow: hidden; border-radius: var(--radius); }
.offer-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--ease); }
.offer-card a:hover img { transform: scale(1.04); }
.offer-card .label, .offer-scope { color: var(--muted); }
.offer-price { font-family: var(--serif); font-size: 32px; }

.article-head { max-width: calc(820px + 2 * var(--gutter)); display: grid; gap: 20px; padding-top: 140px; padding-bottom: 48px; }
.article-head .eyebrow, .article-meta { color: var(--muted); }
.article-head .display-l { font-size: clamp(44px, 5.4vw, 80px); }
.article-meta { font-size: 15px; }
.lede { font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 34em; }
.dark .lede { color: var(--paper-80); }
.article-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.article-body { max-width: 640px; margin: 80px auto var(--section); }

.about-page { padding-bottom: var(--section); }
.about-page .prose { margin-left: auto; margin-right: 8%; }
.values { padding: var(--section) 0; }
.values .eyebrow { color: var(--paper-60); margin-bottom: 48px; }
.value-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.value-list li { border-top: 1px solid var(--paper-line); padding-top: 24px; display: grid; gap: 12px; align-content: start; }
.value-list .step-num { padding: 0; }
.value-title { font-family: var(--serif); font-weight: 400; font-size: 36px; letter-spacing: -.02em; }
.value-list p { color: var(--paper-80); }
.about-offers { padding-top: var(--section); padding-bottom: var(--section); }
.about-offers .h2 { margin-bottom: 40px; }

.consult { padding: var(--section) 0; }
.consult-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.consult-intro { display: grid; gap: 20px; position: sticky; top: 96px; }
.consult-intro .eyebrow { color: var(--muted); }
.contact-list { display: grid; gap: 14px; margin-top: 8px; border-top: 1px solid var(--ink-line); padding-top: 24px; }
.contact-list li { display: grid; gap: 2px; }
.contact-list .label { color: var(--muted); }
.consult-form { background: #fff; border: 1px solid var(--ink-line); padding: clamp(24px, 4vw, 48px); border-radius: var(--radius); }
.form-steps { display: flex; gap: 24px; margin-bottom: 32px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.form-steps [aria-current] { color: var(--ink); border-bottom: 1px solid var(--ink); }
.field { display: grid; gap: 8px; margin: 0 0 22px; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-weight: 500; font-size: 16px; padding: 0; }
.field legend { margin-bottom: 8px; }
.optional { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 6px; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(26,20,22,.25); border-radius: var(--radius); background: var(--paper); font: inherit; font-size: 17px; color: var(--ink); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--rose); outline-offset: 1px; border-color: var(--ink); }
.field.has-error input, .field.has-error select { border-color: #9b2c2c; }
.field-error { font-size: 14px; color: #8a2424; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-input { position: relative; }
.chip-input input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-input span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink-line); border-radius: var(--radius); font-size: 15px; background: var(--paper); transition: background-color .25s, color .25s; }
.chip-input input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-input input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; margin-bottom: 28px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ink); }
.step-two { display: grid; gap: 20px; justify-items: start; }
.scheduler { width: 100%; min-height: 640px; border: 1px solid var(--ink-line); border-radius: var(--radius); background: #fff; }

.simple-page { padding-top: 160px; padding-bottom: var(--section); display: grid; gap: 24px; justify-items: start; }
.narrow { max-width: calc(820px + 2 * var(--gutter)); }
.simple-page.center { justify-items: center; }
.simple-page .eyebrow { color: var(--muted); }

/* ---------------------------------------------------------------- about page (Aldena-style) */
.ab-hero { position: relative; min-height: max(68svh, 520px); display: flex; align-items: flex-end; overflow: hidden; }
.ab-hero-media { position: absolute; inset: 0; }
.ab-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); filter: grayscale(.35) brightness(.72); }
.ab-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,20,22,.25) 0%, rgba(26,20,22,.1) 40%, rgba(26,20,22,.85) 100%); }
.ab-hero-copy { position: relative; z-index: 1; display: grid; gap: clamp(28px, 3.6vw, 52px); padding-top: 140px; padding-bottom: clamp(40px, 4.4vw, 64px); }
.ab-title { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 7.6vw, 120px); line-height: .92; letter-spacing: -.025em; }
.ab-intro { font-size: 16px; line-height: 1.4; color: var(--paper); max-width: 26em; }

.ab-studio { padding: var(--section) 0; }
.ab-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; }
.ab-row-label { color: var(--paper-60); padding-top: 12px; }
.ab-statement { font-family: var(--sans); font-weight: 500; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -.035em; }
.ab-statement span { color: var(--paper-30); transition: color .35s var(--ease); }
.ab-statement span.on { color: var(--paper); }
.ab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: clamp(40px, 5.1vw, 76px); }
.ab-cols p { font-size: 16px; line-height: 1.6; color: var(--paper-80); max-width: 32em; }
.ab-wide { margin: clamp(56px, 6.8vw, 104px) 0; }
.ab-wide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.ab-values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-value { border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 28px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.ab-value-title { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; }
.ab-value p { font-size: 15px; line-height: 1.5; color: var(--paper-80); max-width: 30em; }

.ab-people { padding: var(--section) 0; }
.ab-people-head { text-align: center; margin: 0 auto clamp(48px, 6vw, 80px); max-width: 44em; }
.ab-people-head .section-sub { margin-left: auto; margin-right: auto; }
.ab-person { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); gap: 32px; align-items: center; padding: 32px 0; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.ab-person-bio { font-size: 15px; line-height: 1.55; color: var(--muted); }
.ab-person-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%; border-radius: var(--radius); }
.ab-person-name h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; }
.ab-person-name .label { color: var(--muted); margin-top: 6px; font-size: 12px; }
.ab-social { display: flex; gap: 8px; margin-top: 16px; }
.ab-social a { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 13px; font-weight: 500; text-decoration: none; transition: background-color .3s; }
.ab-social a:hover { background: var(--burgundy); }
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(68px, 8.5vw, 124px); }
.ab-stat { display: grid; gap: 10px; align-content: start; }
.ab-stat-value { font-family: var(--sans); font-weight: 500; font-size: clamp(56px, 5.6vw, 80px); line-height: 1; letter-spacing: -.04em; }
.ab-stat-value span { color: var(--rose); }
.ab-stat .label { margin-top: 10px; }
.ab-stat-text { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 24em; }

/* ---------------------------------------------------------------- reveal */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .ab-person { grid-template-columns: 1fr 1fr; }
  .ab-person-bio { grid-column: 1 / -1; order: 3; }
  .ab-stats { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .gallery { columns: 3; }
  .service-card { grid-template-columns: 1fr; min-height: 0; padding: 24px; gap: 24px; }
  .service-media { order: -1; aspect-ratio: 16 / 10; }
  .post-grid, .portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait-grid.masonry { columns: 2; }
  .value-list { grid-template-columns: 1fr; }
  .process .section-title { margin-left: 0; }
  .step { grid-template-columns: 64px minmax(0, 1fr); }
  .step-dur { grid-column: 2; justify-self: start; padding-top: 6px; }
}
@media (max-width: 760px) {
  .ab-row, .ab-cols, .ab-values, .ab-person { grid-template-columns: 1fr; }
  .gallery { columns: 2; column-gap: 10px; padding: 0 10px; }
  .gallery-item { margin-bottom: 10px; }
  .lightbox { padding: 56px 8px; }
  .lightbox-figure img { max-width: calc(100vw - 16px); }
  .lightbox-nav { display: none; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .split { flex-direction: column; height: auto; }
  .split-panel { min-height: 62svh; }
  .split .split-panel:hover, .split:hover .split-panel { flex-grow: 1; }
  .nav { display: none; }
  .hero-foot { flex-direction: column; align-items: stretch; padding-bottom: 76px; }
  .hero-card { width: 100%; }
  .hero-name { padding-top: 72px; }
  .about-grid, .faq-grid, .footer-grid, .story-grid, .service-detail, .consult-grid, .page-hero.with-media .page-hero-grid { grid-template-columns: 1fr; }
  .about-side, .faq-aside, .includes, .consult-intro { position: static; }
  .about-side { order: 2; }
  .round { display: none; }
  .js .quote-deck { height: min(420px, 56svh); }
  .quote-card blockquote p { font-size: 20px; }
  .quote-card figcaption { gap: 16px; }
  .js .voices-sticky { gap: 84px; }
  .quote-foot { flex-direction: column; margin-top: 48px; }
  .quote-tabs { justify-items: start; }
  .post-grid, .post-grid.two, .portrait-grid { grid-template-columns: 1fr; }
  .post-card.featured a { grid-template-columns: 1fr; }
  .portrait-grid.masonry { columns: 1; }
  .faq-item p { padding-right: 0; }
  .story-gallery, .offer-grid { grid-template-columns: 1fr; }
  .about-page .prose { margin: 0; }
  .cta .btn { margin-bottom: 16vh; }
  .corners li { position: static; }
  .corners { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 var(--gutter) 96px; }
  .site-footer { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .about-text span, [data-reveal-text] span { color: inherit; }
}

/* Lenis smooth scrolling (recommended base rules) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------------------------------------------------------------- page change: the next page scrolls up into view */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .95s; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
::view-transition-old(root) { animation: page-out .95s cubic-bezier(.76, 0, .24, 1) both; }
::view-transition-new(root) { animation: page-in .95s cubic-bezier(.76, 0, .24, 1) both; box-shadow: 0 -24px 60px rgba(26, 20, 22, .25); }
::view-transition-image-pair(root) { isolation: auto; }
@keyframes page-out { to { transform: translateY(-28%); filter: brightness(.45); } }
@keyframes page-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------------------------------------------------------------- measuring line (under the home hero and along the footer) */
.ruler { --major: 164px; --minor: calc(var(--major) / 16); position: relative; height: 38px; overflow: hidden;
  --fade: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 8%, rgba(0,0,0,.6) 18%, #000 30%, #000 70%, rgba(0,0,0,.6) 82%, rgba(0,0,0,.15) 92%, transparent 100%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.ruler-track { position: absolute; top: 0; left: 0; width: calc(var(--major) * 30); height: 100%; will-change: transform; }
.ruler-ticks { height: 13px; opacity: .3;
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px var(--major)) 0 0 / 100% 13px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px var(--minor)) 0 0 / 100% 6px no-repeat; }
.ruler-track span { position: absolute; top: 21px; left: calc(var(--i) * var(--major)); transform: translateX(-50%);
  font-family: var(--sans); font-size: 10.5px; line-height: 1; letter-spacing: .05em; opacity: .5; font-variant-numeric: tabular-nums; }
.ruler-band { padding-top: 10px; }
.ruler-band + .about { padding-top: calc(var(--section) - 38px); }
.site-footer { padding-top: 10px; }
.site-footer > .ruler { margin-bottom: clamp(44px, 5vw, 76px); }
@media (max-width: 720px) { .ruler { --major: 112px; } }

/* ---------------------------------------------------------------- focus overlay on home page photos: sharp until hovered, then softly out of focus */
.focus-ui { display: none; }
@media (hover: hover) and (pointer: fine) {
  .focus-frame { position: relative; overflow: hidden; border-radius: var(--radius); isolation: isolate; }
  .focus-frame > img { transition: filter .8s var(--ease), transform 1.2s var(--ease); }
  .focus-frame:hover > img { filter: blur(4px) brightness(.88); transform: scale(1.04); }
  .focus-ui { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; color: var(--paper); }
  .focus-ui::before { content: ''; position: absolute; inset: 0; opacity: 0; mix-blend-mode: overlay; transition: opacity .8s var(--ease);
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .focus-frame:hover .focus-ui::before { opacity: .32; }
  .focus-ui i { position: absolute; width: 18px; height: 18px; border: 0 solid currentColor; opacity: 0; transition: inset .7s var(--ease), opacity .5s var(--ease); --in: 10px; }
  .focus-ui i:nth-of-type(1) { top: var(--in); left: var(--in); border-top-width: 2px; border-left-width: 2px; }
  .focus-ui i:nth-of-type(2) { top: var(--in); right: var(--in); border-top-width: 2px; border-right-width: 2px; }
  .focus-ui i:nth-of-type(3) { bottom: var(--in); left: var(--in); border-bottom-width: 2px; border-left-width: 2px; }
  .focus-ui i:nth-of-type(4) { bottom: var(--in); right: var(--in); border-bottom-width: 2px; border-right-width: 2px; }
  .focus-frame:hover .focus-ui i { --in: 22px; opacity: 1; }
  .focus-ui b { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
    background: rgba(243, 239, 234, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: grid; place-items: center; font: 300 26px/1 var(--sans); opacity: 0; transform: scale(.6); transition: transform .6s var(--ease), opacity .5s var(--ease); }
  .focus-frame:hover .focus-ui b { transform: none; opacity: 1; }
}

/* Portfolio panels: same focus overlay, with the title growing on the chosen panel */
.split-title { transition: font-size .7s var(--ease); }
.split-panel:hover .split-title, .split-panel:focus-visible .split-title { font-size: clamp(56px, 5vw, 76px); }
@media (hover: hover) and (pointer: fine) {
  .focus-panel .focus-ui { z-index: 0; }
  .focus-panel .split-media img { transition: transform 1.4s cubic-bezier(.22, .8, .2, 1), filter .8s var(--ease); }
  .focus-panel:hover .split-media img { filter: blur(4px) brightness(.7); transform: scale(1.04); }
  .focus-panel:hover .focus-ui::before { opacity: .32; }
  .focus-panel:hover .focus-ui i { --in: 28px; opacity: 1; }
}
@media (max-width: 980px) { .split-panel:hover .split-title { font-size: 42px; } }

/* Service cards: portrait 4:5 photo */
.service-card { grid-template-columns: minmax(0, 1fr) auto; }
.service-media { width: clamp(280px, 26vw, 400px); aspect-ratio: 4 / 5; align-self: center; }
@media (max-width: 980px) {
  .service-card { grid-template-columns: 1fr; }
  .service-media { width: 100%; aspect-ratio: 4 / 5; }
}
.service-media img { object-position: var(--focus, 50% 35%); }

/* ---------------------------------------------------------------- home about: statement, review, booking card and wide photo */
.ruler-band { background: var(--paper); color: var(--ink); }
.about { background: var(--paper); color: var(--ink); }
.about-intro { position: relative; }
.about-who { position: absolute; top: .5em; left: 0; display: grid; gap: 4px; font-size: 15px; line-height: 1.3; color: var(--muted); }
.about-who strong { font-weight: 500; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.about-statement { font-family: var(--sans); font-weight: 500; font-size: clamp(40px, 5.8vw, 92px); line-height: 1; letter-spacing: -.05em; text-indent: 38%; }
.about-statement span { color: rgba(26, 20, 22, .18); transition: color .35s var(--ease); }
.about-statement span.on { color: var(--ink); }
.about-q { font-family: var(--serif); font-weight: 400; color: var(--rose); font-size: .9em; line-height: 0; letter-spacing: 0; vertical-align: -.12em; margin-right: .08em; }
.about-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(56px, 6vw, 88px); margin-top: clamp(72px, 9vw, 136px); align-items: start; }
.about-lede { grid-column: 2 / 6; grid-row: 1; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; letter-spacing: -.015em; color: var(--muted); }
.about-review { grid-column: 6 / 9; grid-row: 1; display: flex; gap: 18px; align-items: flex-start; }
.about-review .avatar { width: 52px; height: 52px; }
.about-review-label { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.about-review blockquote p { font-size: 16px; line-height: 1.5; color: var(--muted); }
.about-review figcaption { margin-top: 14px; font-size: 15px; color: var(--muted); }
.about-review figcaption strong { font-weight: 500; color: var(--ink); }
.about-side-col { grid-column: 9 / 13; grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.about-card { display: block; background: #fff; padding: 10px; border-radius: 6px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 0 var(--ink-line); }
.about-card-media { position: relative; display: block; overflow: hidden; border-radius: 4px; }
.about-card-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 25%); transition: transform 1.2s var(--ease); }
.about-card:hover .about-card-media img { transform: scale(1.04); }
.about-badge { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 500; }
.about-badge .avatar { width: 30px; height: 30px; position: relative; overflow: visible; }
.about-badge .avatar img { border-radius: 50%; }
.about-badge .avatar::after { content: ''; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); border: 2px solid var(--paper); }
.about-card-body { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; row-gap: 10px; align-items: end; padding: 24px 18px 18px; }
.about-card-title { grid-column: 1 / -1; font-family: var(--serif); font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -.01em; }
.about-card-text { font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 22em; }
.about-card-arrow { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 18px; transition: background .3s, transform .4s var(--ease); }
.about-card:hover .about-card-arrow { background: var(--burgundy); transform: rotate(45deg); }
.about-more { align-self: flex-start; display: inline-flex; gap: 28px; align-items: center; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-family: var(--sans); font-weight: 500; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
.about-more span { transition: transform .4s var(--ease); }
.about-more:hover span { transform: translate(4px, -4px); }
.about-wide { grid-column: 2 / 9; grid-row: 2; }
.about-wide img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: var(--focus, 50% 25%); border-radius: 6px; }
.about .focus-frame { border-radius: 6px; }
.about .stats { margin-top: clamp(72px, 8vw, 120px); }
.about .stat { border-left-color: var(--ink-line); }
.about .stat-label { color: var(--muted); }
@media (max-width: 980px) {
  .about-who { position: static; margin-bottom: 28px; }
  .about-statement { text-indent: 0; }
  .about-layout { grid-template-columns: 1fr 1fr; }
  .about-lede { grid-column: 1 / -1; grid-row: auto; }
  .about-review { grid-column: 1 / -1; grid-row: auto; }
  .about-wide { grid-column: 1 / -1; grid-row: auto; }
  .about-side-col { grid-column: 1 / -1; grid-row: auto; gap: 40px; }
  .about-card { max-width: 440px; }
}
@media (prefers-reduced-motion: reduce) { .about-statement span { color: inherit; } }

/* Services carousel title */
.services-head { display: grid; gap: clamp(20px, 2.4vw, 36px); margin-bottom: clamp(48px, 5.6vw, 88px); color: var(--ink); }
.services-title { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.4vw, 80px); line-height: 1; letter-spacing: -.02em; }
.services-intro { font-size: clamp(19px, 1.7vw, 26px); line-height: 1.3; letter-spacing: -.02em; color: var(--muted); max-width: 22em; }

/* Services carousel: drag with the mouse; arrows sit on the card edges at every size */
@media (hover: hover) and (pointer: fine) { .services-track { cursor: grab; } .services-track.is-dragging { cursor: grabbing; user-select: none; } }
.services-stage { position: relative; }
@media (max-width: 980px) {
  .round { display: grid; place-items: center; width: 40px; height: 40px; font-size: 18px; }
}


/* ---------------------------------------------------------------- page headers (all pages except home): photo left, quiet panel right */
.page-head { display: grid; grid-template-columns: 1fr 1fr; min-height: max(64svh, 480px); background: var(--blush); color: var(--burgundy); }
.page-head-media { position: relative; overflow: hidden; }
.page-head-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); }
.page-head-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 96px clamp(24px, 5vw, 80px) 72px; }
.page-head-eyebrow { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--burgundy); opacity: .8; }
.page-head-title { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 4.4vw, 68px); line-height: 1.05; letter-spacing: -.01em; }
.page-head-intro { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 30em; margin-top: 6px; }
@media (max-width: 800px) {
  .page-head { grid-template-columns: 1fr; min-height: 0; }
  .page-head-media { aspect-ratio: 4 / 3; }
  .page-head-panel { padding: 48px 24px 56px; }
}

/* ---------------------------------------------------------------- inner pages: menu on a white strip */
.site-header.is-solid { position: relative; background: #FFFDFB; border-bottom: 1px solid var(--ink-line); }
.site-header.is-solid .nav, .site-header.is-solid .brand { color: var(--burgundy); }
.site-header.is-solid ~ main .page-head-panel { padding-top: 72px; }
.site-header.is-solid ~ main .page-head { min-height: max(58svh, 440px); }
.site-header.is-solid ~ main .page-hero { padding-top: 64px; }
.site-header.is-solid ~ main .article-head { padding-top: 64px; }
.site-header.is-solid ~ main .simple-page { padding-top: 84px; }

/* ---------------------------------------------------------------- header: Book a consultation, right hand side */
.head-cta { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); pointer-events: auto; display: inline-flex; align-items: center;
  padding: 11px 20px; border: 1px solid currentColor; border-radius: var(--radius); color: #fff; text-decoration: none;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: color .35s var(--ease), background-color .3s, border-color .3s; }
.head-cta:hover { background: #fff; color: var(--ink); border-color: #fff; }
.head-cta.is-dark { color: var(--burgundy); }
.head-cta.is-dark:hover { background: var(--burgundy); color: var(--paper); border-color: var(--burgundy); }
.site-header.is-solid .head-cta { top: 0; bottom: 0; right: 0; transform: none; padding: 0 clamp(20px, 2.4vw, 36px); border: 0; border-radius: 0; background: var(--burgundy); color: var(--paper); }
.site-header.is-solid .head-cta:hover { background: var(--ink); color: var(--paper); }
body.menu-open .head-cta { visibility: hidden; }
@media (max-width: 760px) { .head-cta { display: none; } }
@media (max-width: 960px) and (min-width: 761px) {
  .head-cta { font-size: 11px; letter-spacing: .06em; padding: 9px 14px; }
  .site-header.is-solid .head-cta { padding: 0 16px; }
  .site-header .nav ul { gap: 16px; }
}

/* Home page: centre menu always white, with a faint shadow so it reads over light parts of the photo */
.site-header:not(.is-solid) .nav, .site-header:not(.is-solid) .nav.is-dark { color: #fff; text-shadow: 0 1px 12px rgba(26, 20, 22, .35); }

/* ---------------------------------------------------------------- home about: small square photo left, statement right */
.about-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.about-left { position: sticky; top: 40px; display: grid; gap: 28px; justify-items: start; }
.about-square { position: relative; width: 100%; max-width: 320px; margin: 0; overflow: hidden; border-radius: var(--radius); }
.about-square img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 25%); }
.about-square-name { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
  font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 34px); color: var(--paper); text-shadow: 0 1px 18px rgba(26, 20, 22, .45); }
.about-btn { display: inline-flex; padding: 14px 22px; border: 1px solid var(--ink); border-radius: var(--radius); color: var(--ink); text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: background-color .3s, color .3s; }
.about-btn:hover { background: var(--ink); color: var(--paper); }
.about-right { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 4.4vw, 72px); }
.about-right > * { grid-column: 1; grid-row: auto; }
.about-right .about-statement { text-indent: 0; }
.about-right .about-lede { max-width: 30em; }
@media (max-width: 980px) {
  .about-split { grid-template-columns: 1fr; }
  .about-left { position: static; grid-row: 2; }
  .about-square { max-width: 260px; }
}

/* Home about, right column: both paragraphs at the original size, the second softer, signature underneath */
.about-right .about-text { margin: 0; }
.about-right .about-text span { color: rgba(26, 20, 22, .18); }
.about-right .about-text span.on { color: var(--ink); }
.about-right .about-text-muted span.on { color: rgba(26, 20, 22, .5); }
.about-right .signature { margin-top: 0; color: var(--muted); }
.about-right .signature strong { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .about-right .about-text span { color: var(--ink); } .about-right .about-text-muted span { color: rgba(26, 20, 22, .5); } }

/* Home about: sharp-cornered photo; button sits under the signature */
.about-square, .about-square img, .about .focus-frame.about-square { border-radius: 0; }

/* Home about: video (or photo) with the cipher logo in the middle */
.about-square video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 25%); background: var(--burgundy); }
.about-logo { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; color: var(--paper); }
.about-logo .cipher { width: clamp(44px, 4.4vw, 64px); height: clamp(62px, 6.2vw, 90px); filter: drop-shadow(0 2px 14px rgba(26, 20, 22, .35)); }

/* What I offer: small spaced capitals label, description at page-header title size */
.services-title { font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: .26em; text-transform: uppercase; color: var(--burgundy); opacity: .8; }
.services-intro { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.4vw, 68px); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); max-width: 16em; }
.services-head { gap: clamp(20px, 2vw, 32px); }

/* What I offer: centred heading; simple arrows with a counter under the cards */
.services-head { justify-items: center; text-align: center; }
.services-intro { margin-inline: auto; }
.services-controls { display: flex; align-items: center; justify-content: center; gap: clamp(56px, 8vw, 120px); margin-top: clamp(36px, 4vw, 56px); color: var(--ink); }
.svc-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; transition: transform .35s var(--ease), color .3s; }
.svc-arrow svg { width: 18px; height: 30px; fill: currentColor; }
.svc-arrow.prev:hover { transform: translateX(-4px); color: var(--burgundy); }
.svc-arrow.next:hover { transform: translateX(4px); color: var(--burgundy); }
.svc-count { min-width: 3ch; text-align: center; font-family: var(--serif); font-size: clamp(24px, 2vw, 30px); line-height: 1; font-variant-numeric: lining-nums; }

/* ---------------------------------------------------------------- one arrow style everywhere: slim curved chevron */
.chev { display: block; flex: none; fill: currentColor; stroke: none; width: 18px; height: 30px; }
.chev.is-right { transform: scaleX(-1); }
.link-arrow .chev { width: 8px; height: 13px; transition: transform .35s var(--ease); }
.link-arrow:hover .chev { transform: scaleX(-1) translateX(-4px); }
.hero-card-top .chev { width: 9px; height: 15px; fill: currentColor; stroke: none; }
.lightbox-nav { display: grid; place-items: center; }
.lightbox-nav .chev { width: 20px; height: 34px; }

/* Home about: video and button hidden on phones */
@media (max-width: 760px) { .about-left { display: none; } }


/* Client reviews on Burgundy */
.voices { background: var(--burgundy); }

/* ---------------------------------------------------------------- no black sections: dark grounds are Burgundy or Forest */
.cta { background: var(--forest); }
.ab-studio { background: var(--forest); }
.voices { background: var(--burgundy); }

/* ---------------------------------------------------------------- hand-drawn illustrations: rare, large, cropped, tone on tone */
.process, .cta, .ab-studio { position: relative; overflow: hidden; }
.illo { position: absolute; z-index: 0; pointer-events: none; line-height: 0; }
.illo svg { display: block; width: 100%; height: auto; }
.process > .wrap, .process > .marquee, .cta-stage, .cta .corners, .ab-studio > .wrap { position: relative; z-index: 1; }
.cta .corners { position: absolute; }
.illo-camera { left: -7vw; bottom: -10%; width: clamp(320px, 42vw, 660px); color: var(--forest); }
.illo-camera svg { transform: rotate(-9deg); }
.illo-aperture { right: -9vw; top: 8%; width: clamp(300px, 36vw, 560px); color: var(--forest); }
.js .illo[data-reveal] { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
@media (max-width: 760px) {
  .illo-camera { width: 80vw; left: -22vw; bottom: -4%; }
  .illo-aperture { width: 72vw; right: -26vw; }
}

/* Small ink vignette above a centred label */
.vignette { width: clamp(120px, 11vw, 160px); color: var(--burgundy); margin-bottom: 4px; line-height: 0; }
.vignette svg { display: block; width: 100%; height: auto; }

/* Booking section: 4:5 photo, button sits clear below it */
.cta .btn { align-self: center; margin: 0; transform: translateY(calc(min(420px, 60vw) * .625 + 76px)); }
@media (max-width: 760px) { .cta .btn { margin: 0; } }

/* Process: place-name banner removed, so the section closes with normal spacing */
.process { padding-bottom: var(--section); }

/* Page header video (Portfolio) */
.page-head-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); background: var(--blush); }

/* About page person: 4:5 portrait and icon buttons */
.ab-person-photo { justify-self: center; width: 100%; max-width: 400px; }
.ab-person-photo img { aspect-ratio: 4 / 5; }
.ab-social a svg { width: 16px; height: 16px; display: block; }

/* ---------------------------------------------------------------- photos everywhere: viewfinder corners on hover, cursor becomes + */
@media (hover: hover) and (pointer: fine) {
  .focus-frame > img { filter: none; transform: none; }
  .focus-frame:hover > img { filter: blur(4px) brightness(.88); transform: scale(1.04); }
  .gallery-link.focus-frame:hover > img { filter: none; transform: scale(1.03); }  /* portfolio: framing and + only, no blur */
  .prose-pics .focus-frame:hover > img { filter: none; transform: scale(1.03); }  /* journal galleries: framing and + only, no blur */
  .prose-pics .focus-frame:hover .focus-ui::before { opacity: 0; }  /* journal galleries: no grain either */
  .gallery-link.focus-frame:hover .focus-ui::before { opacity: 0; }  /* portfolio: no grain either */
}
.cursor.is-plus { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 0; background: none; }
.cursor.is-plus::before, .cursor.is-plus::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff; }
.cursor.is-plus::before { width: 30px; height: 1.5px; margin: -.75px 0 0 -15px; }
.cursor.is-plus::after { width: 1.5px; height: 30px; margin: -15px 0 0 -.75px; }


/* ---------------------------------------------------------------- home: What I offer on soft rose pink with light cards (from Marika's swatch) */
.services { background: var(--blush); }
.service-card { background: var(--cream); }


/* How a session unfolds: small label, title and the rail sketch beside it */
.process-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(24px, 4vw, 64px); margin: 0 0 clamp(48px, 6vw, 80px) calc(100% / 12 * 2); }
.process .process-head .section-title { margin: 0; }
.process-label { font-family: var(--sans); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--paper-80); margin-bottom: clamp(16px, 1.8vw, 24px); }
/* the rail sketch: large, pink, faded, behind the text on the right */
.process .wrap { position: relative; }
.process-head { grid-template-columns: 1fr; }
.process-titles, .process .steps { position: relative; z-index: 1; }
.process-illo { position: absolute; z-index: 0; right: -2vw; top: -4%; width: clamp(320px, 38vw, 580px); margin: 0; pointer-events: none; }
.process-illo img { display: block; width: 100%; height: auto; opacity: .16; }
.js .process-illo[data-reveal].is-in img { opacity: .16; }
@media (max-width: 980px) {
  .process-head { margin-left: 0; }
  .process-illo { width: 70vw; right: -14vw; top: -2%; }
  .process-illo img { opacity: .12; }
}

/* What I offer: arrows either side of the card, a simple progress line underneath (no numbers) */
.services-stage .svc-arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); }
.services-stage .svc-arrow.prev { left: max(2px, calc((100% - var(--card)) / 2 - 64px)); }
.services-stage .svc-arrow.next { right: max(2px, calc((100% - var(--card)) / 2 - 64px)); }
.services-stage .svc-arrow.prev:hover { transform: translate(-4px, -50%); }
.services-stage .svc-arrow.next:hover { transform: translate(4px, -50%); }
.svc-progress { position: relative; width: min(280px, 60vw); height: 1px; margin: clamp(36px, 4vw, 56px) auto 0; background: rgba(26, 20, 22, .2); overflow: hidden; }
.svc-progress span { position: absolute; left: 0; top: -0.5px; height: 2px; width: calc(100% / var(--n)); background: var(--ink); transition: transform .6s var(--ease); }
@media (max-width: 760px) {
  .services-stage .svc-arrow { width: 28px; }
  .services-stage .svc-arrow .chev { width: 13px; height: 22px; }
}

/* What I offer: show one card at a time, no peek of the neighbouring cards */
.services-track { width: var(--card); margin: 0 auto; padding: 0; grid-auto-columns: 100%; gap: 48px; }
.service-card:not(.is-current) { opacity: 1; }

/* Questions section: small label above the title */
.faq-label { font-family: var(--sans); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--burgundy); opacity: .8; margin-bottom: clamp(16px, 1.8vw, 24px); }

/* Journal and Contact: green header panel */
.page-head--forest { background: var(--forest); color: var(--paper); }
.page-head--forest .page-head-eyebrow { color: var(--paper); opacity: .8; }

/* Journal: photographs inside an article (![alt](src) lines in the body).
   Grids break out wider than the text, like the galleries on the old blog. */
.article-body { max-width: 760px; }
.article-body.prose { max-width: 760px; }
.prose .prose-pics { margin: 2.4em 0; }
.prose .prose-pics figure { margin: 0; overflow: hidden; }
.prose .prose-pics img { display: block; width: 100%; height: auto; }
.prose .prose-pics--grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 20px;
  width: min(1120px, calc(100vw - 2 * var(--gutter))); margin-left: 50%; transform: translateX(-50%); }
.prose .prose-pics--grid img { height: 100%; aspect-ratio: var(--ratio, 2 / 3); object-fit: cover; }
@media (max-width: 760px) {
  .prose .prose-pics--grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Featured journal post: vertical 4:5 image so portraits are not cropped */
.post-card.featured a { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.post-card.featured .post-media img { aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .post-card.featured a { grid-template-columns: 1fr; } }
/* Featured journal post: title and excerpt sit together beside the image */
@media (min-width: 761px) {
  .post-card.featured a { grid-template-rows: 1fr auto; row-gap: 20px; }
  .post-card.featured .post-media { grid-column: 1; grid-row: 1 / span 2; }
  .post-card.featured .post-title { grid-column: 2; grid-row: 1; align-self: end; }
  .post-card.featured .post-excerpt { grid-column: 2; grid-row: 2; max-width: 36em; }
}
/* Journal titles: more air between lines */
.article-head .display-l { line-height: 1.12; }
.post-card.featured .post-title { line-height: 1.14; }

/* Journal article, after the Aldena article layout: title and body in a wide
   right column, author and details in a sticky column on the left. */
.article-layout { display: grid; grid-template-columns: minmax(220px, 326px) minmax(0, 1fr); column-gap: clamp(40px, 9vw, 128px);
  padding-top: clamp(64px, 8vw, 120px); padding-bottom: var(--section); }
.article-layout .article-head { grid-column: 2; max-width: 820px; padding: 0 0 56px; gap: 16px; }
.article-layout .article-head .display-l { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.1; }
.article-layout .lede { font-size: 20px; max-width: 30em; }
.article-aside { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: 120px; }
.article-author { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.article-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.article-author-name { font-size: 15px; font-weight: 500; }
.article-author-role { font-size: 14px; color: var(--muted); }
.article-facts { margin: 0; border-top: 1px solid var(--ink-line); }
.article-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--ink-line);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.article-facts dt { color: var(--muted); }
.article-facts dd { margin: 0; font-weight: 500; text-align: right; }
.article-layout .article-body { grid-column: 2; grid-row: 2; max-width: none; margin: 0; font-size: 17px; line-height: 1.7; color: var(--muted); }
.article-layout .article-body > * + * { margin-top: 1.2em; }
.article-layout .article-body h2 { font-family: var(--sans); font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.3;
  letter-spacing: -.01em; color: var(--ink); margin-top: 2.2em; }
.article-layout .article-body > h2:first-child { margin-top: 0; }
.article-layout .article-body blockquote p { color: var(--ink); }
.article-layout .prose-pics, .article-layout .prose-pics--grid { width: auto; margin: 2.4em 0; transform: none; }
.article-layout .prose-pics--grid { gap: 16px; }
.article-more .h2 { margin-bottom: 20px; }
.article-more .more-intro { max-width: 30em; color: var(--muted); margin-bottom: 48px; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-layout .article-head, .article-aside, .article-layout .article-body { grid-column: 1; grid-row: auto; }
  .article-aside { position: static; margin-bottom: 48px; }
}
@media (max-width: 760px) { .article-layout .prose-pics--grid { gap: 8px; } }
.site-header.is-solid ~ main .article-layout .article-head { padding-top: 0; }
@media (max-width: 760px) { .ab-wide img { aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------------------- cookie banner: small card, reject and accept given equal weight */
.cookie-banner { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 90; width: min(400px, calc(100vw - 2 * var(--gutter)));
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink-line); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(26, 20, 22, .14); padding: 22px 22px 20px;
  opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.cookie-banner.is-in { opacity: 1; transform: none; }
.cookie-banner[hidden] { display: none; }
.cookie-text { font-size: 15px; line-height: 1.55; }
.cookie-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.cookie-actions .btn { width: 100%; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 760px) { .cookie-banner { bottom: calc(var(--gutter) + 64px); } }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }

/* ---------------------------------------------------------------- cookie preferences window */
.cookie-manage { display: block; margin: 14px auto 0; font-size: 13px; color: var(--muted); }
.cookie-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: var(--gutter);
  background: rgba(26, 20, 22, .55); opacity: 0; transition: opacity .35s var(--ease); }
.cookie-modal.is-in { opacity: 1; }
.cookie-modal[hidden] { display: none; }
html.cookie-modal-open, html.cookie-modal-open body { overflow: hidden; }
.cookie-modal-panel { position: relative; width: min(760px, 100%); max-height: calc(100dvh - 2 * var(--gutter)); overflow-y: auto;
  background: var(--blush); color: var(--burgundy); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px);
  transform: translateY(18px); transition: transform .45s var(--ease); }
.cookie-modal.is-in .cookie-modal-panel { transform: none; }
.cookie-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; color: var(--burgundy); cursor: pointer; }
.cookie-close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.cookie-modal-title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 24px; padding-right: 48px; }
.cookie-row { padding: 26px 0; border-bottom: 1px solid rgba(74, 28, 38, .18); }
.cookie-row-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.cookie-row h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.01em; }
.cookie-row p { font-size: 16px; line-height: 1.6; max-width: 40em; opacity: .85; }
.cookie-always { font-size: 15px; opacity: .85; white-space: nowrap; }
.cookie-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; white-space: nowrap; }
.cookie-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cookie-switch i { position: relative; width: 52px; height: 30px; border-radius: 30px; background: rgba(74, 28, 38, .22); transition: background .3s var(--ease); }
.cookie-switch i::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); transition: transform .3s var(--ease); }
.cookie-switch input:checked + i { background: var(--burgundy); }
.cookie-switch input:checked + i::after { transform: translateX(22px); }
.cookie-switch input:focus-visible + i { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.cookie-modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 32px; }
.cookie-modal-actions a { color: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.cookie-modal-actions .btn { background: var(--burgundy); border-color: var(--burgundy); color: var(--paper); min-width: 220px; }
.cookie-modal-actions .btn:hover { background: var(--ink); border-color: var(--ink); }
@media (max-width: 560px) { .cookie-modal-actions .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cookie-modal, .cookie-modal-panel { transition: none; } }

/* Portfolio gallery: JS deals photos into the shortest column (see packGallery in site.js) */
.gallery { --cols: 4; columns: auto; display: flex; align-items: flex-start; gap: clamp(16px, 3.4vw, 52px); }
.gallery-col { flex: 1 1 0; min-width: 0; }
@media (max-width: 980px) { .gallery { --cols: 3; } }
@media (max-width: 760px) { .gallery { --cols: 2; gap: 10px; } }

/* About: "What I believe", a heading on the left and numbered promise cards */
.ab-values-intro { display: grid; align-content: start; gap: 20px; position: sticky; top: 120px; align-self: start; padding-right: 8%; }
.ab-values-intro .ab-row-label { padding-top: 0; }
.ab-values-title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -.02em; color: var(--paper); }
.ab-values-lede { font-size: 16px; line-height: 1.6; color: var(--paper-60); max-width: 22em; }
.ab-value { position: relative; justify-content: flex-start; gap: 0; min-height: 260px; padding: 32px;
  transition: background-color .5s var(--ease), border-color .5s var(--ease); }
.ab-value-title { font-size: clamp(30px, 2.6vw, 38px); padding-bottom: 20px; margin-bottom: 20px; position: relative; }
.ab-value-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 1px; background: var(--brass);
  transition: width .6s var(--ease); }
.ab-value p { font-size: 16px; line-height: 1.6; }
.ab-value:hover { border-color: rgba(243, 239, 234, .3); }
.ab-value:hover .ab-value-title::after { width: 72px; }
@media (max-width: 760px) {
  .ab-values-intro { position: static; padding-right: 0; margin-bottom: 8px; }
  .ab-value { min-height: 0; padding: 26px; }
}
/* Values: a row of small dots in the corner instead of numbers (card 2 has two lit, and so on) */
.ab-value-dots { position: absolute; top: 30px; right: 30px; display: flex; gap: 4px; }
.ab-value-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--paper); opacity: .3; }
.ab-value-dots i.on { opacity: 1; }
.ab-values .ab-value .ab-value-title { margin-top: 0; padding-right: 48px; }
.ab-values .ab-value { justify-content: space-between; gap: 40px; }
/* Values cards fade and rise in one after another, as on the Aldena about page.
   (The hover transition above had replaced the fade, so the cards simply appeared.) */
.js .ab-values .ab-value[data-reveal] { opacity: 0; transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease); }
.js .ab-values .ab-value[data-reveal].is-in { opacity: 1; transform: none; }
.js .ab-values .ab-value:nth-child(2) { transition-delay: .12s, .12s, 0s, 0s; }
.js .ab-values .ab-value:nth-child(3) { transition-delay: .06s, .06s, 0s, 0s; }
.js .ab-values .ab-value:nth-child(4) { transition-delay: .18s, .18s, 0s, 0s; }
.js .ab-values-intro[data-reveal] { transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .ab-values-intro[data-reveal].is-in { transform: none; }
@media (max-width: 760px) { .js .ab-values .ab-value { transition-delay: 0s !important; } }
@media (prefers-reduced-motion: reduce) { .js .ab-values .ab-value[data-reveal], .js .ab-values-intro[data-reveal] { opacity: 1; transform: none; } }
/* About stats: running numbers keep their width while counting */
.ab-stat-value .ab-stat-num { display: inline-block; font-variant-numeric: tabular-nums; color: inherit; }
.ab-wide img { object-position: var(--focus, 50% 50%); }
/* About: the wide photo runs almost edge to edge, 40px from each side on desktop, as on Aldena */
.ab-wide-wrap { padding: 0 clamp(16px, 2.8vw, 40px); }
/* Footer small print: one line per line typed in the editor, legal links on their own line */
.footer-small > p { margin: 0; }
.footer-small > p + p { margin-top: 4px; }
.footer-small .footer-legal { margin-top: 10px; }
.footer-small .footer-gap { height: .5em; }
.footer-small-mob { display: none; }
.footer-right .footer-small-desk { margin-top: 0; max-width: 460px; }
/* newsletter column sits against the right edge, mirroring the menu on the left */
@media (min-width: 761px) { .footer-news { justify-self: end; width: 100%; } }
@media (max-width: 760px) { .footer-small-desk { display: none; } .footer-small-mob { display: block; margin-top: 0; } .footer-news { order: -1; } }

/* ---------------------------------------------------------------- menu: a small frosted-glass panel above the menu button */
.menu { inset: auto; left: 50%; bottom: 68px; top: auto; width: min(340px, calc(100vw - 32px)); transform: translate(-50%, 12px);
  padding: 36px 28px 28px; gap: 28px; border-radius: var(--radius);
  background: rgba(26, 20, 22, .42); color: var(--paper);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(243, 239, 234, .22); box-shadow: 0 24px 60px rgba(26, 20, 22, .28);
  opacity: 0; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.menu.is-in { opacity: 1; transform: translate(-50%, 0); }
.menu ul { display: grid; gap: 2px; }
.menu ul a { font-size: clamp(30px, 3vw, 38px); line-height: 1.2; color: var(--paper); }
.menu ul a[aria-current="page"] { color: var(--paper-60); }
.menu ul a:hover { color: var(--blush); }
.menu-foot { width: 100%; }
.menu-foot .btn { width: 100%; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .menu { background: rgba(26, 20, 22, .9); } }
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }

/* Footer on phones: everything centred */
@media (max-width: 760px) {
  .footer-grid { justify-items: center; text-align: center; }
  .footer-news { margin: 0 auto; justify-items: center; width: 100%; }
  .footer-news .news-form { width: 100%; }
  .footer-news > p { max-width: 30em; }
  .footer-small { text-align: center; }
  .footer-right { justify-items: center; width: 100%; }
  .footer-cols { width: 100%; justify-items: center; text-align: center; }
  .footer-contact { justify-items: center; text-align: center; }
  .footer-email { font-size: clamp(19px, 6.4vw, 32px); overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- narrower text, site-wide
   Text sits in a calmer column (about 45 to 70 characters a line, as the brand book asks),
   while photographs keep their full width. */
.ab-statement { max-width: 20em; }
.ab-cols { max-width: 860px; }
.ab-cols p { max-width: 28em; }
main p:not([class]), .lede, .faq-a p, .prose p { max-width: 36em; }
.center p:not([class]), .center .lede { margin-inline: auto; }
@media (max-width: 760px) {
  :root { --text-inset: 7vw; }
  /* text blocks get extra side room on phones; photos and galleries stay wide */
  .ab-row, .about-split, .services-head, .process .wrap, .faq .wrap, .journal-head, .voices .wrap,
  .cta .wrap, .consult-grid, .footer-grid, .article-layout, .simple-page, .service-detail, .more,
  .story-head, .gallery-head, .ab-people .wrap { padding-inline: calc(var(--gutter) + var(--text-inset)); }
  .ab-statement { font-size: clamp(26px, 7vw, 32px); }
}
@media (max-width: 760px) { .journal-head { padding-inline: var(--text-inset); } }
.services-intro { margin-inline: auto; }
.image-hero-media img { object-position: var(--focus, 50% 30%); }

/* ---------------------------------------------------------------- contact page, after the Aldena contact layout:
   hairline contact rows with arrows on the left, an open form with filled fields on the right */
.consult-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.contact-list { gap: 0; margin-top: 16px; padding-top: 0; border-top: 1px solid var(--ink-line); }
.contact-list li { display: block; border-bottom: 1px solid var(--ink-line); }
.contact-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px 22px 0;
  text-decoration: none; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.contact-list a small { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 2px; }
.contact-arrow { width: 12px; height: 12px; flex: none; stroke: currentColor; stroke-width: 1.4; fill: none; transition: transform .35s var(--ease); }
.contact-list a:hover .contact-arrow { transform: translate(2px, -2px); }
.contact-where { font-size: 14px; color: var(--muted); margin-top: 16px; }
.consult-form { background: none; border: 0; padding: 0; }
.consult-form .field { gap: 10px; margin-bottom: 26px; }
.consult-form .field label, .consult-form .field legend { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.consult-form .field .optional { letter-spacing: .1em; text-transform: uppercase; font-weight: 500; font-size: 12px; color: var(--muted); opacity: .8; }
.consult-form .field input, .consult-form .field select, .consult-form .field textarea {
  min-height: 56px; padding: 16px 18px; border: 1px solid transparent; background: rgba(26, 20, 22, .045); border-radius: 0; font-size: 16px; }
.consult-form .field textarea { min-height: 160px; }
.consult-form .field input::placeholder, .consult-form .field textarea::placeholder { color: rgba(26, 20, 22, .38); }
.consult-form .field input:focus, .consult-form .field select:focus, .consult-form .field textarea:focus { outline: none; border-color: var(--ink); background: rgba(26, 20, 22, .02); }
.consult-form .field select { appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A1416' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consult-form .chip-input span { border-radius: 0; }
.consult-form button[type="submit"] { width: 100%; min-height: 56px; border-radius: 0; }
.consult-form .form-steps { margin-bottom: 36px; }
@media (max-width: 760px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
/* Contact page: calmer proportions. Heading, contact rows and choice buttons scaled to sit with the form */
.consult-intro { gap: 18px; }
.consult-intro .display-l { font-size: clamp(36px, 3.4vw, 52px); line-height: 1.08; }
.consult-intro .lede { font-size: 17px; max-width: 26em; }
.contact-list { margin-top: 20px; }
.contact-list a { font-size: 17px; padding: 17px 4px 17px 0; }
.consult-form .chip-row { gap: 8px; }
.consult-form .chip-input span { min-height: 44px; padding: 0 14px; font-size: 12px; letter-spacing: .08em; }
.consult-form .field input, .consult-form .field select, .consult-form .field textarea { min-height: 52px; padding: 14px 16px; font-size: 15px; }
.consult-form .field textarea { min-height: 140px; }
.consult-form .field { margin-bottom: 22px; }
/* Contact form: hidden spam trap, and the sending note */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consult-form .form-note { margin-top: 16px; font-size: 15px; color: var(--muted); }
.consult-form .form-note a { color: var(--ink); }
/* Contact form: the topic buttons sit on one row, sharing the width evenly */
.consult-form fieldset .chip-row { display: flex; flex-wrap: nowrap; gap: 6px; }
.consult-form fieldset .chip-input { flex: 1 1 auto; }
.consult-form fieldset .chip-input span { width: 100%; justify-content: center; padding: 0 10px; white-space: nowrap;
  font-size: clamp(10.5px, .78vw, 12px); letter-spacing: .06em; }
@media (max-width: 1180px) {
  .consult-form fieldset .chip-row { display: grid; grid-template-columns: repeat(3, 1fr); }
}
/* Contact page on tablets and phones: one column (the desktop split above had overridden this) */
@media (max-width: 980px) {
  .consult-grid { grid-template-columns: 1fr; gap: 48px; }
  .consult-intro { position: static; }
}
@media (max-width: 760px) {
  .consult-form fieldset .chip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consult-form fieldset .chip-input span { font-size: 11px; padding: 0 6px; white-space: normal; text-align: center; line-height: 1.2; }
  .contact-list a { font-size: 16px; }
  .consult-grid { padding-inline: calc(var(--gutter) + 3vw); }
}
.consult-intro .lede + .lede { margin-top: -6px; }
/* Form errors: an empty required box gets a burgundy outline instead of a line of text
   (the message is still there for screen readers) */
.field-error { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field.has-error input, .field.has-error select, .field.has-error textarea,
.consult-form .field.has-error input, .consult-form .field.has-error select, .consult-form .field.has-error textarea { border-color: var(--burgundy); }
.consult-form .field.has-error .chip-input span { border-color: var(--burgundy); }
/* Form errors in a clear warm red: thicker outline and a faint red wash, so they read as errors at a glance */
.field.has-error input, .field.has-error select, .field.has-error textarea,
.consult-form .field.has-error input, .consult-form .field.has-error select, .consult-form .field.has-error textarea {
  border-color: #B3261E; box-shadow: inset 0 0 0 1px #B3261E; background-color: rgba(179, 38, 30, .06); }
.consult-form .field.has-error .chip-input span { border-color: #B3261E; box-shadow: inset 0 0 0 1px #B3261E; }
.consult-form .field.has-error > label, .consult-form .field.has-error > legend { color: #B3261E; }

/* ---------------------------------------------------------------- contact page, calmer:
   smaller heading, lighter contact rows, quieter labels and soft topic buttons without boxes */
.consult { padding: clamp(72px, 8vw, 120px) 0; }
.consult-grid { column-gap: clamp(56px, 8vw, 140px); }
.consult-intro { gap: 22px; }
.consult-intro .display-l { font-size: clamp(32px, 2.8vw, 42px); line-height: 1.15; }
.consult-intro .lede { font-size: 16px; line-height: 1.6; max-width: 24em; }
.contact-list { margin-top: 24px; }
.contact-list a { font-size: 15px; font-weight: 400; padding: 15px 2px 15px 0; letter-spacing: 0; }
.contact-arrow { width: 10px; height: 10px; opacity: .6; }
.consult-form form { max-width: 640px; }
.consult-form .field { margin-bottom: 24px; }
.consult-form .field label, .consult-form .field legend { font-size: 11px; letter-spacing: .14em; color: rgba(26, 20, 22, .55); }
.consult-form .field input, .consult-form .field select, .consult-form .field textarea { background: rgba(26, 20, 22, .035); }
.consult-form .field textarea { min-height: 120px; }
/* topic buttons: soft filled pills in sentence case, dark only when chosen */
.consult-form fieldset .chip-row { gap: 6px; flex-wrap: wrap; }
.consult-form fieldset .chip-input { flex: 0 0 auto; }
.consult-form fieldset .chip-input span { border: 0; background: rgba(26, 20, 22, .035); text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 400; padding: 0 16px; min-height: 44px; color: var(--ink); }
.consult-form fieldset .chip-input input:checked + span { background: var(--ink); color: var(--paper); }
.consult-form .field.has-error .chip-input span { box-shadow: inset 0 0 0 1px #B3261E; }
.consult-form button[type="submit"] { min-height: 52px; }
@media (max-width: 1180px) { .consult-form fieldset .chip-row { display: flex; } }
@media (max-width: 760px) { .consult-form fieldset .chip-row { display: flex; } .consult-form fieldset .chip-input span { font-size: 14px; white-space: nowrap; } }

/* Contact rows animate on hover as on Aldena: the text rolls up to a fresh copy,
   and the arrow flies out to the top right while a new one slides in from the bottom left */
.contact-list a { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.contact-roll { position: relative; display: block; overflow: hidden; height: 1.3em; line-height: 1.3; }
.contact-roll > span { display: block; transition: transform .55s var(--ease); }
.contact-roll > span + span { position: absolute; left: 0; top: 100%; }
.contact-list a:hover .contact-roll > span, .contact-list a:focus-visible .contact-roll > span { transform: translateY(-100%); }
.contact-arrows { position: relative; display: block; width: 12px; height: 12px; overflow: hidden; flex: none; }
.contact-arrows .contact-arrow { position: absolute; inset: 0; width: 12px; height: 12px; opacity: .75;
  transition: transform .55s var(--ease); }
.contact-arrows .contact-arrow + .contact-arrow { transform: translate(-120%, 120%); }
.contact-list a:hover .contact-arrows .contact-arrow:first-child, .contact-list a:focus-visible .contact-arrows .contact-arrow:first-child { transform: translate(120%, -120%); }
.contact-list a:hover .contact-arrows .contact-arrow + .contact-arrow, .contact-list a:focus-visible .contact-arrows .contact-arrow + .contact-arrow { transform: none; }
.contact-list a:hover .contact-arrow { transform: none; }
@media (prefers-reduced-motion: reduce) { .contact-roll > span, .contact-arrows .contact-arrow { transition: none; } }
/* Contact page: the left side is just the contact rows, aligned with the top of the form */
.consult-intro { padding-top: 26px; }
.consult-intro .contact-list { margin-top: 0; }
/* Contact page: wider form, topic buttons in capitals again, bolder contact rows */
@media (min-width: 981px) { .consult-grid { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); column-gap: clamp(48px, 7vw, 120px); } }
.consult-form form { max-width: none; }
.consult-form fieldset .chip-input span { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 500; }
.contact-list a { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; letter-spacing: -.02em; padding: 18px 2px 18px 0; }
.contact-arrows, .contact-arrows .contact-arrow { width: 13px; height: 13px; }
.contact-arrows .contact-arrow { stroke-width: 1.6; opacity: 1; }
/* Contact rows use the site's curved chevron, tilted up and to the right, instead of a separate arrow style */
.contact-arrows { width: 14px; height: 14px; }
.contact-arrows .contact-arrow { display: grid; place-items: center; width: 14px; height: 14px; stroke: none; }
.contact-arrows .contact-arrow .chev { width: 7px; height: 12px; fill: currentColor; rotate: -45deg; }
.contact-arrows, .contact-arrows .contact-arrow { width: 18px; height: 18px; }
.contact-arrows .contact-arrow .chev { width: 9px; height: 15px; }

/* Contact page: two photographs under the form, a centred serif title on each */
.contact-tiles { padding: 0 clamp(16px, 2.8vw, 40px) var(--section); }
.contact-tiles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); text-decoration: none; color: var(--paper); }
.contact-tile-media { display: block; aspect-ratio: 4 / 3; }
.contact-tile-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); transition: transform 1.2s var(--ease); }
.contact-tile::after { content: ''; position: absolute; inset: 0; background: rgba(26, 20, 22, .18); transition: background .6s var(--ease); }
.contact-tile-title { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.01em; text-shadow: 0 1px 18px rgba(26, 20, 22, .25); }
.contact-tile:hover img { transform: scale(1.04); }
.contact-tile:hover::after { background: rgba(26, 20, 22, .28); }
@media (max-width: 760px) { .contact-tiles-grid { grid-template-columns: 1fr; gap: 10px; } .contact-tile-media { aspect-ratio: 4 / 5; } }


/* ---------------------------------------------------------------- AVIF images: <picture> wraps each photo but adds no box */
picture { display: contents; }
@media (hover: hover) and (pointer: fine) {
  .focus-frame > picture > img { transition: filter .8s var(--ease), transform 1.2s var(--ease); }
  .focus-frame:hover > picture > img { filter: blur(4px) brightness(.88); transform: scale(1.04); }
  .focus-frame > picture > img { filter: none; transform: none; }
  .focus-frame:hover > picture > img { filter: blur(4px) brightness(.88); transform: scale(1.04); }
  .gallery-link.focus-frame:hover > picture > img { filter: none; transform: scale(1.03); }  /* portfolio: framing and + only, no blur */
  .prose-pics .focus-frame:hover > picture > img { filter: none; transform: scale(1.03); }  /* journal galleries: framing and + only, no blur */
}
/* Accessibility: form labels dark enough to read at small sizes (WCAG AA, about 5.6:1 on the page colour) */
.consult-form .field label, .consult-form .field legend, .consult-form .field .optional { color: var(--muted); opacity: 1; }
/* Contact topic buttons: a light wash over the whole box on hover */
.consult-form fieldset .chip-input span { transition: background-color .25s var(--ease), color .25s var(--ease); }
.consult-form fieldset .chip-input:hover span { background: rgba(26, 20, 22, .085); }
.consult-form fieldset .chip-input input:checked + span,
.consult-form fieldset .chip-input:hover input:checked + span { background: var(--ink); color: var(--paper); }
/* Contact form: the optional consent checkbox */
.consult-form .check.consent { margin: 4px 0 24px; font-size: 14px; color: var(--muted); align-items: center; }
.consult-form .check.consent input { margin-top: 0; width: 18px; height: 18px; flex: none; }
/* Footer newsletter: the tick box under the email field */
.news-form .check.news-consent { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 4px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: left; cursor: pointer; }
.news-form .check.news-consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.news-form .check.news-consent.has-error input { outline: 2px solid #B3261E; outline-offset: 1px; }
.news-form .check.news-consent.has-error span { color: #B3261E; }
.news-form .check.news-consent input { min-height: 0; height: 18px; padding: 0; margin: 2px 0 0; align-self: flex-start; border: 0; background: none; }
/* Footer newsletter: after subscribing, the thank-you takes the place of the form */
.news-form.is-done > :not([data-note]) { display: none; }
.news-form.is-done [data-note] { font-size: 16px; line-height: 1.6; color: var(--muted); padding: 18px 20px; background: rgba(26, 20, 22, .04); border-radius: var(--radius); }
.news-form.is-done [data-note] strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink); margin-bottom: 4px; }

/* Footer newsletter in two steps (email, then first name and consent) */
.news-step { display: grid; gap: 10px; }
.news-step[hidden] { display: none; }
.news-label { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.news-label span { color: #B3261E; }
.news-form input.has-error { border-color: #B3261E; box-shadow: inset 0 0 0 1px #B3261E; }
.news-nav { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 4px; }
.news-nav .btn { min-width: 140px; }
.news-step[data-news-step="2"] .news-nav { justify-content: space-between; }
.news-prev { color: var(--muted); text-decoration: none; font-size: 15px; }
.news-prev:hover { color: var(--ink); }
.news-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .news-label { text-align: left; } .news-nav .btn { flex: 1; } }

/* Phones: the closing photo starts out of focus with the corner frame and a +, so the heading over it reads clearly.
   A tap on the photo brings it into focus (and another tap softens it again). */
@media (hover: none), (pointer: coarse) {
  .cta-title { pointer-events: none; }
  .cta-media.focus-frame { position: relative; overflow: hidden; border-radius: var(--radius); isolation: isolate; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cta-media.focus-frame img { filter: blur(4px) brightness(.72); transform: scale(1.04); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
  .cta-media .focus-ui { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; color: var(--paper); }
  .cta-media .focus-ui i { position: absolute; width: 18px; height: 18px; border: 0 solid currentColor; opacity: 1; --in: 18px; transition: inset .7s var(--ease), opacity .5s var(--ease); }
  .cta-media .focus-ui i:nth-of-type(1) { top: var(--in); left: var(--in); border-top-width: 2px; border-left-width: 2px; }
  .cta-media .focus-ui i:nth-of-type(2) { top: var(--in); right: var(--in); border-top-width: 2px; border-right-width: 2px; }
  .cta-media .focus-ui i:nth-of-type(3) { bottom: var(--in); left: var(--in); border-bottom-width: 2px; border-left-width: 2px; }
  .cta-media .focus-ui i:nth-of-type(4) { bottom: var(--in); right: var(--in); border-bottom-width: 2px; border-right-width: 2px; }
  .cta-media .focus-ui b { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
    background: rgba(243, 239, 234, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: grid; place-items: center; font: 300 24px/1 var(--sans); transition: transform .6s var(--ease), opacity .5s var(--ease); }
  .cta-media.is-clear img { filter: none; transform: none; }
  .cta-media.is-clear .focus-ui i { opacity: 0; --in: 8px; }
  .cta-media.is-clear .focus-ui b { opacity: 0; transform: scale(.6); }
}