/*
Theme Name: Lithyem
Description: Custom theme for lithyem.net (v4 design). Page content comes from the lithyem_fields box, see the Lithyem Core plugin.
Author: Lithyem
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: lithyem
*/

/* ---------- Design tokens (from design_handoff_lithyem_site/README.md) ---------- */
:root {
	--paper: #F1EDE5;
	--ink: #1E1B18;
	--red: #BF2E1A;
	--red-on-dark: #F0644E;
	--red-footer: #E8604A; /* hover red used on the dark footer */
	--card: #fff;
	--sand: #E9E3D8;
	--sand-dark: #E3DACB;
	--oxblood: #3B1712;
	--body: #4C4740;
	--muted: #6B655D;
	--muted-on-dark: #B5AEA4;
	--body-on-dark: #CFC8BD;
	--footer-muted: #A39C92;
	--line: rgba(30, 27, 24, .12);
	--line-mid: rgba(30, 27, 24, .15);
	--line-strong: rgba(30, 27, 24, .18);
	--line-on-dark: rgba(241, 237, 229, .12);

	--display: 'Instrument Serif', serif; /* display headlines only */
	--serif: Newsreader, serif;           /* small serif text: menus, link lists, card titles */
	--sans: Geist, sans-serif;
	--mono: 'Geist Mono', monospace;

	--max: 1360px;
	--gutter: 40px;
	--section: 120px;       /* space between sections */
	--section-first: 72px;  /* first section after a hero */
	--radius-card: 20px;
	--radius-dark: 26px;
	--shadow-hover: 0 30px 50px -30px rgba(30, 27, 24, .45);
}

/* Breakpoints: 1100px (grids drop to 2 columns), 900px (header becomes the mobile menu), 760px (1 column, mobile spacing). */
@media (max-width: 760px) {
	:root {
		--gutter: 20px;
		--section: 72px;
	}
}

/* ---------- Base ---------- */
*, *::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);
	-webkit-font-smoothing: antialiased;
}

/* Design rule: no underlines on links or buttons, anywhere. */
a, a:visited { color: var(--ink); text-decoration: none; }
a:hover { color: var(--red); text-decoration: none; }

img { max-width: 100%; }

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

.site { overflow-x: clip; min-height: 100vh; background: var(--paper); }

.wrap { max-width: var(--max); width: 100%; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.section { padding-top: var(--section); }
.section--first { padding-top: var(--section-first); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; }
.skip-link:focus { left: 0; color: var(--paper); }

/* Eyebrow labels: small uppercase mono. */
.eyebrow { font: 400 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eyebrow--small { font-size: 11px; }
.eyebrow--on-dark { color: var(--muted-on-dark); }
.eyebrow--footer { font-size: 11px; color: var(--footer-muted); }

/* Buttons: pills. */
.btn { display: inline-block; white-space: nowrap; border-radius: 999px; padding: 17px 26px; font: 500 15px var(--sans); transition: background .2s, color .2s; }
.btn--lg { padding: 18px 28px; font-size: 16px; }
.btn--red, .btn--red:visited { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--ink); color: #fff; }
.btn--white, .btn--white:visited { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--ink); color: #fff; }

/* Plain content (fallback layout, later the article body). */
/* A video playing inside its poster frame (assets/js/site.js). The frame stays flat while it plays. */
/* The player waits, invisible, behind the poster until the poster is clicked. */
.video-player { position: absolute; inset: 0; display: block; background: #000; opacity: 0; pointer-events: none; }
.video-player.is-on { opacity: 1; pointer-events: auto; }
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.is-playing { transform: none !important; cursor: default; }

/* The old theme's page-builder plugins, still switched on, also style ".row" as a clearfix: two invisible
   boxes that would become extra cells in our row grid. */
.site .row::before, .site .row::after { content: none; display: none; }

/* Before/after pictures (figure[data-compare], assets/js/site.js): drag the red line to compare. */
.compare { position: relative; margin: 0; --compare: 50%; }
.compare img { display: block; width: 100%; height: auto; }
.compare.is-ready { overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.compare.is-ready img + img { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--compare)); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--compare); width: 3px; margin-left: -1.5px; background: var(--red); pointer-events: none; }
.compare__slider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }

/* Search box: used on the search results and page-not-found layouts. */
.searchbox { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.searchbox__field { display: flex; gap: 12px; }
.searchbox__field input { flex: 1; min-width: 0; padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); font: 400 17px var(--sans); color: var(--ink); }
.searchbox__field input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.prose { max-width: 760px; font: 400 18px/1.6 var(--sans); color: var(--body); }
.prose h2, .prose h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
.prose a { color: var(--red); }
/* Forms inside plain pages (the SMS opt-in and opt-out forms): the same field and button look as the rest of the site. */
.prose input[type="text"], .prose input[type="email"], .prose input[type="tel"], .prose input[type="url"], .prose input[type="number"], .prose select, .prose textarea { width: 100%; max-width: 100%; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); font: 400 17px/1.4 var(--sans); color: var(--ink); }
.prose input:focus-visible, .prose select:focus-visible, .prose textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.prose label { font: 500 15px var(--sans); color: var(--ink); }
.prose input[type="submit"], .prose input[type="button"], .prose button[type="submit"] { appearance: none; border: 0; cursor: pointer; padding: 16px 28px; border-radius: 999px; background: var(--red); color: #fff; font: 500 16px var(--sans); }
.prose input[type="submit"]:hover, .prose input[type="button"]:hover, .prose button[type="submit"]:hover { background: var(--ink); }

/* ---------- Header ---------- */
.lh { position: relative; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); color: var(--ink); }

.lh__bar { max-width: var(--max); margin: 0 auto; padding: 22px 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; white-space: nowrap; }

.lh__nav { display: flex; gap: 4px; font: 400 13.5px var(--sans); }
.lh__nav--left { margin-left: -10px; }
.lh__nav--right { justify-content: flex-end; align-items: center; }

.lh__item { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; transition: background .2s, color .2s; }
/* One look for every item, with or without a menu: a white pill on hover, while its menu is open, and
   for the section the current page belongs to. */
.lh__item:hover, .lh__item.is-current, .lh__item.is-open { color: var(--red); background: #fff; }
.lh__caret { font-size: 9px; opacity: .55; display: inline-block; transition: transform .25s; }
.lh__item.is-open .lh__caret { transform: rotate(180deg); }

.lh__logo { display: flex; }
.lh__logo img { height: 22px; width: auto; display: block; }

.lh__contact { margin-left: 8px; border: 1px solid var(--ink); border-radius: 999px; padding: 9px 16px; }
.lh__contact:hover { background: var(--ink); color: var(--paper); }

.lh__toggle { all: unset; cursor: pointer; display: none; justify-self: end; align-items: center; gap: 10px; font: 500 14px var(--sans); border: 1px solid var(--ink); border-radius: 999px; padding: 9px 16px; }
.lh__toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Mega-menu panel */
/* Panels sit inside the nav (right after their item, for keyboard order) but are drawn against the whole header. */
/* The panel's box is there in full from the first moment, so the pointer can move onto it straight away.
   What unrolls is only its backdrop (the ::before), which carries the colour, the rules and the shadow. */
.lh__panel { position: absolute; left: 0; right: 0; top: 100%; white-space: normal; color: var(--ink); isolation: isolate; }
.lh__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--ink); box-shadow: 0 50px 60px -50px rgba(30, 27, 24, .45); }
.lh__panel[hidden] { display: none; }
/* Opening: the panel's backdrop unrolls from under the header while its three columns rise into place one after
   another. Moving from one open menu to the next only fades the new content in. Closing is a quick fade.
   The classes are set in assets/js/site.js. */
.lh__panel.is-in::before { animation: lh-unroll .42s cubic-bezier(.22, .8, .24, 1) both; }
/* "backwards", not "both": once a column has arrived it must go back to its own rules, or the card's hover lift is lost. */
.lh__panel.is-in .lh__panel-inner > * { animation: lh-rise .5s cubic-bezier(.22, .8, .24, 1) backwards; }
.lh__panel.is-in .lh__panel-inner > :nth-child(2) { animation-delay: .06s; }
.lh__panel.is-in .lh__panel-inner > :nth-child(3) { animation-delay: .12s; }
.lh__panel.is-swap .lh__panel-inner > * { animation: lh-rise .3s cubic-bezier(.22, .8, .24, 1) backwards; }
.lh__panel.is-swap .lh__panel-inner > :nth-child(2) { animation-delay: .03s; }
.lh__panel.is-swap .lh__panel-inner > :nth-child(3) { animation-delay: .06s; }
.lh__panel.is-out { animation: lh-out .16s ease-in both; pointer-events: none; }
/* The bottom edge goes 70px past the panel so its shadow is not cut off once open. */
@keyframes lh-unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -70px 0); } }
@keyframes lh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lh-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
	.lh__panel.is-in::before, .lh__panel.is-out, .lh__panel.is-in .lh__panel-inner > *, .lh__panel.is-swap .lh__panel-inner > * { animation: none; }
}
.lh__panel-inner { max-width: var(--max); margin: 0 auto; padding: 40px 40px 48px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, .85fr); gap: 48px; }

.lh__intro { display: flex; flex-direction: column; gap: 16px; }
.lh__blurb { margin: 0; font: 300 26px/1.22 var(--serif); letter-spacing: -.015em; text-wrap: pretty; }

.lh__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; border-top: 1px solid var(--ink); }
.lh__links a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-mid); font: 400 19px/1.25 var(--serif); letter-spacing: -.01em; white-space: normal; }
/* The link to the page you are on looks the same as a hovered one. */
.lh__links a:hover, .lh__links a.is-current { color: var(--red); font-style: italic; }
.lh__arrow { font: 300 14px var(--sans); font-style: normal; }

.lh__card { border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; white-space: normal; border: 1px solid var(--line); transition: transform .3s; }
.lh__card:hover { transform: translateY(-4px); }
.lh__card--red, .lh__card--red:visited, .lh__card--red:hover { background: var(--red); color: #fff; }
.lh__card--ink, .lh__card--ink:visited, .lh__card--ink:hover { background: var(--ink); color: var(--paper); }
.lh__card--white, .lh__card--white:visited, .lh__card--white:hover { background: #fff; color: var(--ink); }
.lh__card-tag { align-self: flex-start; white-space: nowrap; font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 5px 10px; opacity: .85; }
.lh__card-title { font: 400 26px/1.1 var(--serif); letter-spacing: -.015em; margin-top: 18px; }
.lh__card-desc { font: 300 14.5px/1.55 var(--sans); opacity: .85; }
.lh__card-cta { margin-top: auto; padding-top: 12px; font: 500 14px var(--sans); }

/* Full-screen mobile menu */
/* The height here is the design's value; site.js sets the exact remaining height when the menu opens. */
.lh__mobile { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 64px); height: calc(100dvh - 64px); overflow-y: auto; background: var(--paper); padding: 8px 20px 48px; display: none; flex-direction: column; white-space: normal; }
.lh__group { padding: 20px 0; border-bottom: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 2px; }
.lh__group--plain { border-bottom: 0; }
.lh__group-label { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lh__group a { font: 400 21px/1.3 var(--serif); letter-spacing: -.01em; padding: 4px 0; }
.lh__group a.is-current { color: var(--red); font-style: italic; }
.lh__mobile-cta { align-self: flex-start; padding: 16px 24px; }

@media (max-width: 900px) {
	.lh__nav { display: none; }
	.lh__toggle { display: flex; }
	.lh__bar { grid-template-columns: 1fr auto; padding: 18px 20px; }
	.lh__panel { display: none !important; }
	.lh__mobile:not([hidden]) { display: flex; }
}

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; }
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hero__head:focus { outline: none; } /* focus target for the skip link only */
.hero__head { position: relative; z-index: 2; padding-top: 56px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 32px; pointer-events: none; }

.hero__crumbs { display: flex; gap: 10px; flex-wrap: wrap; font: 400 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); pointer-events: auto; }
.hero__crumbs a { color: var(--muted); }
.hero__crumbs a:hover { color: var(--red); }
.hero__crumbs .is-current { color: var(--red); }

.hero__title { font: 400 clamp(64px, 9vw, 150px)/.94 var(--display); letter-spacing: -.035em; margin: 0; }
.hero__title em { color: var(--red); }

.hero__band { position: relative; z-index: 2; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero__pitch { padding-top: 32px; padding-bottom: 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.hero__pitch p { font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--display); margin: 0; max-width: 640px; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Sibling pages: a grid inside the hero band, current page marked "You are here". Never a sideways scroller. */
.hero__siblings { background: var(--sand); border-top: 1px solid var(--line); }
.hero__siblings .wrap { padding-top: 22px; padding-bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.hero__sibling-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
.hero__sibling-grid > * { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-mid); font: 400 17px/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.hero__sibling-grid a:hover { color: var(--red); font-style: italic; }
.hero__sibling-grid .is-current { font-style: italic; color: var(--red); }
.hero__arrow { flex: none; font: 300 13px var(--sans); font-style: normal; }
.hero__here { flex: none; font: 400 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; }

@media (max-width: 1100px) {
	.hero__sibling-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.hero__title { font-size: clamp(44px, 12vw, 64px); }
	.hero__pitch { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	.hero__actions { justify-content: flex-start; }
	.hero__sibling-grid { column-gap: 16px; }
	.hero__sibling-grid > * { font-size: 15px; }
}

/* ---------- Booking block ---------- */
.booking { padding-top: var(--section); }
.booking__card { background: var(--ink); color: var(--paper); border-radius: var(--radius-dark); padding: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.booking__copy { display: flex; flex-direction: column; gap: 28px; }
.booking__title { font: 400 clamp(48px, 5vw, 80px)/.95 var(--display); letter-spacing: -.025em; margin: 0; }
.booking__title em { color: var(--red-on-dark); }
.booking__lede { margin: 0; font: 300 17px/1.6 var(--sans); color: var(--body-on-dark); text-wrap: pretty; }
.booking__prompt { margin: 0; font: italic 400 26px/1.25 var(--display); color: var(--body-on-dark); text-wrap: pretty; }

.booking__steps { display: flex; flex-direction: column; margin-top: 8px; }
.booking__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid rgba(241, 237, 229, .18); }
.booking__step > div { display: flex; flex-direction: column; gap: 6px; }
.booking__num { font: 400 30px/1 var(--display); color: var(--red-on-dark); }
.booking__step-title { font: 400 26px/1.1 var(--display); }
.booking__step-desc { font: 300 14.5px/1.55 var(--sans); color: var(--muted-on-dark); }

.booking__side { display: flex; flex-direction: column; gap: 16px; }
/* Same box as the design's calendar panel: at least 420px, stretching to the height of the steps beside it. */
.booking__embed { flex: 1; min-height: 420px; border-radius: 18px; overflow: hidden; background: #fff; }
.booking__cta { align-self: flex-start; }
.booking__cta:hover { background: var(--paper); color: var(--ink); }

@media (max-width: 760px) {
	.booking__card { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; gap: 40px; }
	/* Stacked on phones, the calendar needs its own height to be usable. */
	.booking__embed { min-height: 620px; }
}

/* ---------- Footer ---------- */
.lf { background: var(--red); color: #fff; margin-top: var(--section); }
.lf a, .lf a:visited { color: inherit; }

.lf__cta { padding-top: 110px; padding-bottom: 96px; display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.lf__headline { font: 400 clamp(64px, 9vw, 150px)/.88 var(--display); letter-spacing: -.03em; margin: 0; }
.lf .btn--white, .lf .btn--white:visited { color: var(--ink); }
.lf .btn--white:hover { color: #fff; }

.lf__dark { background: var(--ink); color: var(--paper); padding-top: 88px; }
.lf__cols { display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr; gap: 56px; padding-bottom: 88px; }
.lf__col { display: flex; flex-direction: column; gap: 24px; }
.lf__col--posts { gap: 8px; }
.lf__col--posts .eyebrow { margin-bottom: 16px; }

.lf__logo { height: 16px; width: auto; display: block; align-self: flex-start; }
.lf__about { font: 300 15px/1.65 var(--sans); margin: 0; text-wrap: pretty; }
.lf__more, .lf__more:visited { align-self: flex-start; font: 500 14px var(--sans); color: #fff; }
.lf a.lf__more:hover { color: var(--red-footer); }

.lf__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lf__thumbs a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid rgba(241, 237, 229, .14); background: #2A2622; }
.lf__thumbs a:hover { border-color: var(--red-footer); }
.lf__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lf__post { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-on-dark); }
.lf a.lf__post:hover { color: var(--red-footer); }
.lf__post-img { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: #2A2622; display: block; }
.lf__post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf__post-text { display: flex; flex-direction: column; gap: 6px; }
.lf__post-title { font: 400 19px/1.2 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
.lf__post-date { font: 400 11px var(--mono); letter-spacing: .04em; color: var(--footer-muted); }

.lf__contact { display: flex; flex-direction: column; gap: 6px; font: 400 15px/1.6 var(--sans); }
.lf__contact a, .lf__contact a:visited { color: #fff; }
.lf .lf__contact a:hover { color: var(--red-footer); }

.lf__sheet { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px; border-radius: 14px; border: 1px solid rgba(241, 237, 229, .16); background: #26221F; }
.lf__sheet:hover { border-color: var(--red-footer); }
.lf__sheet-page { width: 56px; height: 72px; border-radius: 4px; background: var(--paper); border-top: 5px solid var(--red); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); transform: rotate(-4deg); display: block; }
.lf__sheet-text { display: flex; flex-direction: column; gap: 4px; }
.lf__sheet-label { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red-footer); }
.lf__sheet-title { font: 400 21px/1.1 var(--serif); letter-spacing: -.01em; color: #fff; }
.lf__sheet-desc { font: 300 13px/1.45 var(--sans); color: #C9C2B8; }

.lf__base { border-top: 1px solid var(--line-on-dark); padding: 28px 0 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font: 400 13px var(--sans); }
.lf__legal { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--footer-muted); }
.lf__legal a, .lf__legal a:visited { color: var(--paper); }
.lf .lf__legal a:hover { color: var(--red-footer); }

.lf__social { display: flex; gap: 8px; align-items: center; }
.lf__round { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(241, 237, 229, .2); display: flex; align-items: center; justify-content: center; font: 500 14px var(--sans); }
.lf__round--in { font-weight: 600; font-size: 13px; }
.lf a.lf__round:hover { border-color: var(--red-footer); color: var(--red-footer); }
.lf a.lf__round--top, .lf a.lf__round--top:visited { background: var(--paper); color: var(--ink); border-color: var(--paper); font: 400 16px var(--sans); margin-left: 8px; }
.lf a.lf__round--top:hover { background: var(--red-footer); border-color: var(--red-footer); color: #fff; }

@media (max-width: 1100px) {
	.lf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.lf__cols { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
}

/* ---------- Hero: case study variant ---------- */
.hero__title--long { font: 400 clamp(56px, 7vw, 116px)/.98 var(--display); letter-spacing: -.03em; max-width: 14ch; text-wrap: balance; }

.hero__case { padding-top: 32px; padding-bottom: 32px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero__summary { font: 300 19px/1.55 var(--sans); color: var(--body); margin: 0; max-width: 620px; text-wrap: pretty; }
.hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hero__fact { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(30, 27, 24, .2); padding-top: 12px; }
.hero__fact-label { font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero__fact-value { font: 500 14.5px/1.35 var(--sans); }
a.hero__fact-value, a.hero__fact-value:visited { color: var(--red); }

@media (max-width: 760px) {
	.hero__title--long { font-size: clamp(44px, 12vw, 64px); }
	.hero__case, .hero__facts { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}

/* ---------- Shared section pieces ---------- */
.wrap--narrow { max-width: 1120px; }

/* Section heading: small label, display headline, optional link on the right. */
.shead { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; border-bottom: 1px solid var(--ink); padding-bottom: 32px; margin-bottom: 48px; }
.shead__text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.shead__title { font: 400 clamp(52px, 6vw, 96px)/.94 var(--display); letter-spacing: -.025em; margin: 0; }
.shead--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.shead__link, .shead__link:visited { font: 500 15px var(--sans); color: var(--red); white-space: nowrap; }

/* Large serif lead paragraph. */
.lead { margin: 0; font: 400 clamp(28px, 2.8vw, 40px)/1.2 var(--display); letter-spacing: -.01em; text-wrap: pretty; }
.lead--wide { margin-bottom: 64px; max-width: 1040px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }

/* Labelled list of points (pain points and similar). */
.points { display: flex; flex-direction: column; }
.points__label { color: var(--red); padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.point { padding: 28px 0; border-bottom: 1px solid rgba(30, 27, 24, .2); display: flex; flex-direction: column; gap: 8px; }
.point__title { font: 400 28px/1.15 var(--serif); letter-spacing: -.015em; }
.point__text { font: 300 15.5px/1.6 var(--sans); color: var(--body); }

/* White cards in a two-column grid. */
.cards { display: grid; gap: 16px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.card__num { font: 400 12px var(--mono); color: var(--red); }
.card__title { font: 400 30px/1.12 var(--serif); letter-spacing: -.015em; }
.card__text { font: 300 15.5px/1.6 var(--sans); color: var(--body); }

@media (max-width: 760px) {
	.shead__title { font-size: clamp(40px, 11vw, 60px); }
	.split, .cards--2 { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	.card { padding: 24px; }
}

/* ---------- Case study ---------- */
/* Framed screenshots. */
.shot { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.shot__frame { border-radius: var(--radius-card); padding: 12px; background: var(--card); border: 1px solid var(--line); }
.shot__img { border-radius: 10px; overflow: hidden; background: var(--paper); }
.shot__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.shot__caption { font: 400 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 4px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* The main screenshot: a larger frame that tilts flat on scroll, image shown whole. */
.shot--main { gap: 0; }
.shot--main .shot__frame { padding: 14px; box-shadow: 0 30px 80px -40px rgba(30, 27, 24, .45); transform-origin: 50% 0; will-change: transform; }
.shot--main .shot__img { padding: 4% 6%; }
.shot--main .shot__img img { object-fit: contain; object-position: center; }
.shot--main .shot__caption { padding: 18px 4px 0; }

.gallery { display: flex; flex-direction: column; gap: 56px; }
.gallery__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gallery__row--split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* Big-number stats. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--ink); }
.stat { padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.stat__value { font: 400 clamp(80px, 8vw, 132px)/.9 var(--display); letter-spacing: -.03em; }
.stat__value.is-accent { color: var(--red); }
.stat__label { font: 500 16px/1.3 var(--sans); }
.stat__text { font: 300 14.5px/1.5 var(--sans); color: var(--body); }

/* Centred quote. */
.quote { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.quote__text { margin: 0; font: 400 clamp(36px, 4.2vw, 64px)/1.1 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.quote__text em { color: var(--red); }
.quote__by { display: flex; flex-direction: column; gap: 4px; }
.quote__name { font: 500 16px var(--sans); }
.quote__role { font: 400 14px var(--sans); color: var(--muted); }

/* Case study cards (white, and the dark variant). */
.casecard, .casecard:visited { display: flex; flex-direction: column; gap: 18px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 14px 28px; transition: transform .3s, box-shadow .3s; }
.casecard:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(30, 27, 24, .5); color: var(--ink); }
.casecard__img { border-radius: 10px; overflow: hidden; aspect-ratio: 768 / 516; background: var(--paper); }
.casecard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.casecard__body { padding: 0 14px; display: flex; flex-direction: column; gap: 12px; }
.casecard__label { font: 400 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.casecard__title { font: 400 36px/1.02 var(--display); letter-spacing: -.01em; }
.casecard__text { font: 300 15.5px/1.55 var(--sans); color: var(--body); }
.casecard__more { font: 500 14px var(--sans); color: var(--red); margin-top: 6px; }

.casecard--dark, .casecard--dark:visited, .casecard--dark:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.casecard--dark:hover { box-shadow: 0 30px 50px -30px rgba(30, 27, 24, .6); }
.casecard--dark .casecard__img { background: #2B2723; }
.casecard--dark .casecard__label { color: var(--muted-on-dark); }
.casecard--dark .casecard__text { color: var(--body-on-dark); }
.casecard--dark .casecard__more { color: var(--red-on-dark); }

@media (max-width: 760px) {
	.gallery__row, .gallery__row--split { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
	.stat__value { font-size: 64px; }
}

/* ---------- Service page ---------- */
/* Overview: the headline stays in view while the text beside it scrolls. */
.overview__head { position: sticky; top: 40px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.overview__body { display: flex; flex-direction: column; gap: 24px; border-top: 1px solid var(--ink); padding-top: 28px; }
.overview__body p { margin: 0; font: 300 18px/1.65 var(--sans); color: var(--body); text-wrap: pretty; }
.overview__body .overview__lead { font: 400 clamp(26px, 2.4vw, 34px)/1.2 var(--display); color: var(--ink); }

/* Video poster in a white frame with a play button. */
.vframe { position: relative; display: block; border-radius: var(--radius-card); padding: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 80px -40px rgba(30, 27, 24, .45); transform-origin: 50% 0; will-change: transform; }
.vframe__img { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); }
.vframe__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vframe__play { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 14px rgba(191, 46, 26, .18); font: 400 28px var(--sans); padding-left: 5px; }

/* "What we build": numbered rows that turn white on hover. The heading sits flush on the first row. */
.shead--flush { margin-bottom: 0; }
.row { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: baseline; padding: 32px 28px; border-bottom: 1px solid rgba(30, 27, 24, .2); transition: background .3s; }
.row:hover { background: #fff; }
.row__num { font: 400 12px var(--mono); color: var(--muted); }
.row__title { font: 400 clamp(30px, 3vw, 44px)/1.05 var(--display); letter-spacing: -.01em; }
.row__text { font: 300 16px/1.6 var(--sans); color: var(--body); }

/* "How we work": three steps, each with a small "Step 1" label. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.step { display: flex; flex-direction: column; gap: 20px; }
.step__head { display: flex; flex-direction: column; gap: 10px; }
.step__label { font: 400 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.step__title { font: 400 30px/1.12 var(--serif); letter-spacing: -.015em; }
.step__text { margin: 0; font: 300 17px/1.65 var(--sans); color: var(--body); text-wrap: pretty; }

/* "Next step" dark card. */
.nextstep { background: var(--ink); color: var(--paper); border-radius: var(--radius-dark); padding: 56px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.nextstep__head, .nextstep__body { display: flex; flex-direction: column; gap: 24px; }
.nextstep__title { font: 400 clamp(48px, 5vw, 80px)/.95 var(--display); letter-spacing: -.025em; margin: 0; }
.nextstep__title em { color: var(--red-on-dark); }
.nextstep__text { font: 300 17px/1.6 var(--sans); color: var(--body-on-dark); margin: 0; }
.nextstep__note { font: 300 15.5px/1.6 var(--sans); color: var(--muted-on-dark); margin: 0; }
.nextstep__note a, .nextstep__note a:visited { color: var(--red-on-dark); }
.nextstep__cta { align-self: flex-start; margin-top: 8px; }
.nextstep__cta:hover { background: var(--paper); color: var(--ink); }

@media (max-width: 760px) {
	.overview__head { position: static; }
	.vframe__play { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
	.row { grid-template-columns: 40px minmax(0, 1fr); padding: 24px 16px; margin: 0 -16px; row-gap: 8px; }
	.row__text { grid-column: 2; }
	.steps { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	.nextstep { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; row-gap: 24px; }
}

/* ---------- Blog post ---------- */
/* Hero: bigger headline, a line under it, and a wide image in place of the white band. */
.hero__head--post { padding-bottom: 64px; gap: 28px; }
.hero__title--post { font-size: clamp(64px, 8.4vw, 140px); max-width: 12ch; }
.hero__crumbs a.is-accent, .hero__crumbs a.is-accent:visited { color: var(--red); }
.hero__dek { margin: 0; max-width: 640px; font: 400 clamp(22px, 2vw, 28px)/1.3 var(--serif); letter-spacing: -.01em; color: var(--body); }
.hero__image { position: relative; z-index: 2; }
.hero__image img { display: block; width: 100%; height: auto; aspect-ratio: 1232 / 600; object-fit: cover; object-position: center 35%; border-radius: var(--radius-card); background: var(--sand); }

/* Three columns: side rail, article, spare space. */
.post { display: grid; grid-template-columns: 240px minmax(0, 720px) minmax(0, 1fr); gap: 64px; }

.post__rail { position: sticky; top: 32px; align-self: start; display: flex; flex-direction: column; gap: 24px; }
.post__author { display: flex; align-items: center; gap: 12px; }
.post__author > div { display: flex; flex-direction: column; gap: 2px; }
.post__avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--sand); object-fit: cover; }
.post__author-name { font: 500 15px var(--sans); }
.post__author-role { font: 400 13px var(--sans); color: var(--muted); }
.post__meta { display: flex; flex-direction: column; gap: 6px; font: 400 15px var(--sans); }
.post__meta--share { gap: 10px; }
.post__meta-label { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.post__share { display: flex; gap: 8px; }
.post__share a { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(30, 27, 24, .25); display: flex; align-items: center; justify-content: center; font: 500 13px var(--sans); }
.post__share a.post__share-in { font-weight: 600; }
.post__share a.post__share-copy { font: 400 15px var(--sans); }
.post__share a:hover { border-color: var(--red); color: var(--red); }

/* Article text. */
.article { font: 400 21px/1.65 var(--serif); color: #2E2A25; display: flex; flex-direction: column; gap: 24px; text-wrap: pretty; }
.article > p, .article > ul, .article > ol, .article > blockquote, .article > figure { margin: 0; }
.article h2 { margin: 32px 0 0; font: 400 44px/1.02 var(--display); letter-spacing: -.02em; color: var(--ink); }
.article h3 { margin: 16px 0 0; font: 400 30px/1.1 var(--display); letter-spacing: -.015em; color: var(--ink); }
.article strong, .article b { font-weight: 500; color: var(--ink); }
.article a, .article a:visited { color: var(--red); }
.article img { max-width: 100%; height: auto; border-radius: 14px; }
.article blockquote { padding-left: 24px; border-left: 2px solid var(--red); font-style: italic; }
.article > ul:not(.rows), .article > ol { padding-left: 1.2em; }

/* "A → B → C" lines as cards. */
.article .callout { margin: 8px 0; padding: 24px 28px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font: 400 clamp(26px, 2.4vw, 34px)/1.2 var(--display); color: var(--ink); }
/* The dark card has no border in the design, so it is 2px shorter than the white one. */
.article .callout--dark { background: var(--ink); border: 0; color: var(--paper); }
.article .callout--dark em { color: var(--red-on-dark); }

/* A labelled list. */
.labelled { display: flex; flex-direction: column; margin: 8px 0; }
.labelled__label { color: var(--red); padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.article ul.rows { list-style: none; margin: 0; padding: 0; }
.article ul.rows li { padding: 18px 0; border-bottom: 1px solid var(--line-strong); }
.article > ul.rows { border-top: 1px solid var(--ink); }

/* Closing question. */
.article .closer { margin: 16px 0 0; font: italic 400 clamp(28px, 2.6vw, 38px)/1.2 var(--display); color: var(--red); }

/* "Related" link row. */
.article a.relrow, .article a.relrow:visited { margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid rgba(30, 27, 24, .2); color: inherit; }
.article a.relrow:hover { color: var(--red); }
.relrow__text { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.relrow__label { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.relrow__title { font: 400 22px/1.2 var(--serif); }
.relrow__arrow { font: 300 15px var(--sans); }

/* About the author. */
.authorcard { margin-top: 32px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px; }
.authorcard__avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--sand); object-fit: cover; }
.authorcard__body { display: flex; flex-direction: column; gap: 10px; }
.authorcard__name { font: 400 26px/1.1 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.authorcard__bio { font: 300 15.5px/1.6 var(--sans); color: var(--body); }
.authorcard__links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.article .authorcard__links a, .article .authorcard__links a:visited { font: 500 14px var(--sans); color: var(--red); }

/* "Keep reading": a slightly smaller heading and three post cards. */
.shead--post { margin-bottom: 40px; }
.shead--post .shead__title { font-size: clamp(48px, 5vw, 80px); line-height: .96; }
.postcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.postcard, .postcard:visited { display: flex; flex-direction: column; gap: 16px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 12px 24px; transition: transform .3s, box-shadow .3s; }
.postcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); color: var(--ink); }
.postcard__img { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 600 / 403; background: var(--sand); }
.postcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postcard__body { padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }
.postcard__cat { font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.postcard__title { font: 400 24px/1.15 var(--serif); letter-spacing: -.015em; }
.postcard__meta { font: 400 13.5px var(--sans); color: var(--muted); }

@media (max-width: 1100px) {
	.post { grid-template-columns: minmax(0, 1fr); }
	.post__rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid var(--line-mid); padding-bottom: 24px; }
}

@media (max-width: 760px) {
	.hero__title--post { font-size: clamp(44px, 12vw, 64px); }
	.article { font-size: 19px; }
	.article h2 { font-size: 34px; }
	.authorcard { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
	.postcards { grid-template-columns: minmax(0, 1fr); }
}