/**
 * Define Original — component & utility styles.
 *
 * Values ported 1:1 from the design mock. Loaded on the front end and in the
 * editor (see functions.php).
 */

:root {
	--do-ink: var(--wp--preset--color--ink, #0a0a0a);
	--do-paper: var(--wp--preset--color--paper, #f5f4f0);
	--do-hatch-light: repeating-linear-gradient(135deg, #ece9e3 0 11px, #e2e0d9 11px 12px);
	--do-hatch-dark: repeating-linear-gradient(135deg, #161616 0 11px, #101010 11px 12px);
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
::selection { background: #fff; color: #0a0a0a; }

/* ---- Opacity utilities (exact design values) --------------------------- */
.do-dim { opacity: 0.6; }
.do-dim-9 { opacity: 0.9; }
.do-dim-8 { opacity: 0.8; }
.do-dim-72 { opacity: 0.72; }
.do-dim-65 { opacity: 0.65; }
.do-dim-62 { opacity: 0.62; }
.do-dim-55 { opacity: 0.55; }
.do-dim-5 { opacity: 0.5; }
.do-dim-45 { opacity: 0.45; }
.do-dim-25 { opacity: 0.25; }
.do-dim-22 { opacity: 0.22; }

/* Visually hidden, still read by assistive tech / indexed as a heading. */
.do-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Colour utilities -------------------------------------------------- */
.do-muted { color: #3a3a3a; }
.do-muted-55 { color: #555; }
.do-body-paper { color: #222; }
.do-italic { font-style: italic; }

/* ---- Mono label -------------------------------------------------------- */
.do-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.do-track-wide { letter-spacing: 0.3em; }

/* ---- Outlined ("stroke") type ------------------------------------------ */
/* Default inline usage (e.g. the studio statement) is a fixed 1.4px. The big
   "DO" lockups (hero, footer CTA, contact) use a fixed 4px. */
.do-outline,
.has-do-outline {
	-webkit-text-stroke: 1.4px currentColor;
	-webkit-text-fill-color: transparent;
}
.do-hero__mark .has-do-outline,
.do-cta .has-do-outline,
.do-contact-hero .has-do-outline { -webkit-text-stroke-width: 4px; }

/* ---- Section label ("(01) — SELECTED WORK") ---------------------------- */
.do-section-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
	border-top: 1.5px solid color-mix(in srgb, currentColor 60%, transparent);
	padding-top: 20px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.do-section-label p { opacity: 0.6; margin: 0; }
.do-section-label--dark { border-top-color: rgba(255, 255, 255, 0.25); }
.do-section-label--dark p { opacity: 0.5; }

/* ---- Pill tags (case PRESERVED — iOS stays iOS) ------------------------ */
.do-pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
}
.do-pills a,
.do-pills .do-pill,
.do-pills.wp-block-post-terms a {
	display: inline-block;
	border: 1px solid currentColor;
	border-radius: 100px;
	padding: 5px 12px;
	line-height: 1.4;
	text-decoration: none;
}
.do-pills .wp-block-post-terms__separator { display: none; }

/* ---- Wordmark ---------------------------------------------------------- */
.do-wordmark .wp-block-site-title a::after,
/* \FE0E = text-presentation selector: forces the monochrome glyph instead of the
   green emoji that iOS/Android render for U+2733 by default. */
.do-wordmark.wp-block-site-title a::after { content: " \2733\FE0E"; opacity: 0.5; }

/* ---- Sticky blur nav --------------------------------------------------- */
/* The whole header (template-part wrapper) sticks — its containing block is the
   full page, so it stays pinned while scrolling. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
/* On the home page the header floats over the full-bleed hero instead of taking
   flow space, so the hero fills the whole screen and the DO zoom starts the
   instant you scroll — no dead scroll while the hero settles under the header. */
.home header.wp-block-template-part {
	position: fixed;
	left: 0;
	right: 0;
}
/* Keep the fixed home header clear of the WordPress admin bar when logged in. */
body.admin-bar .home header.wp-block-template-part { top: 32px; }
@media ( max-width: 782px ) {
	body.admin-bar .home header.wp-block-template-part { top: 46px; }
}
/* Pull the hero flush to the top of the viewport (the site's <main> otherwise
   carries a 24px top margin) so it fills the screen exactly and the zoom begins
   at the very first pixel of scroll. */
.home main {
	margin-top: 0;
}
/* Remove the block-gap between the hero track and the Selected Work section:
   when the zoom fills the screen and releases, that 24px gap would otherwise
   show the black page background as a seam between the two Paper areas. */
.home main > * + * {
	margin-block-start: 0;
}
.do-nav.wp-block-group {
	position: relative;
	z-index: 0;
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
/* The glass background lives on ::before, NOT on .do-nav itself. A backdrop-filter
   on the nav element makes it the containing block for the position:fixed mobile
   menu overlay (a descendant), which traps the overlay at header height instead of
   letting it cover the viewport. Keeping the filter on a non-ancestor pseudo frees
   the overlay while preserving the blur. */
.do-nav.wp-block-group::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(10, 10, 10, 0.7);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	pointer-events: none;
}
.do-nav .wp-block-navigation a {
	position: relative;
	padding-bottom: 5px;
	opacity: 0.72;
	transition: opacity 0.22s;
}
.do-nav .wp-block-navigation a:hover,
.do-nav .wp-block-navigation .current-menu-item a { opacity: 1; }
.do-nav .wp-block-navigation .current-menu-item a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: #fff;
}

/* ---- Mobile nav overlay ------------------------------------------------- */
/* WP core opens the mobile menu as a white, black-text panel with the links
   pinned to the right edge (they clip off-screen). Rebrand it: a full-screen Ink
   panel with the links centred in large Display type, and Paper open/close icons. */
.do-nav .wp-block-navigation__responsive-container-open,
.do-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--paper);
}
.do-nav .wp-block-navigation__responsive-container-open svg,
.do-nav .wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}
.do-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--paper) !important;
	padding: 0 !important;
}
.do-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100dvh;
	padding: 0 !important;
}
.do-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	justify-content: center;
	gap: clamp(1.75rem, 6vh, 3rem);
	text-align: center;
}
.do-nav .wp-block-navigation__responsive-container.is-menu-open a {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 11vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	opacity: 0.92;
	padding: 0;
}
.do-nav .wp-block-navigation__responsive-container.is-menu-open a:hover {
	opacity: 1;
}
.do-nav .wp-block-navigation__responsive-container-close {
	top: 24px;
	right: clamp(1.5rem, 6vw, 3.5rem);
}

/* ---- Footer bar nav links ---------------------------------------------- */
.do-footer-nav a { opacity: 0.7; transition: opacity 0.2s; }
.do-footer-nav a:hover { opacity: 1; }

/* ---- Home hero --------------------------------------------------------- */
.do-hero {
	position: sticky;
	top: 0;
	height: 100vh;
	/* Fill the *visible* viewport on mobile: 100vh is taller than the screen when
	   the browser's address bar is showing, which pushes the centred stack below
	   the visible middle. dvh tracks the actual visible height. */
	height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	padding: 60px clamp(1.5rem, 6vw, 5.25rem);
	/* Off-white brand Paper (not pure white) — so the zoom fills the screen with
	   the same colour as the Selected Work section it releases into. */
	color: var(--wp--preset--color--paper);
}
/* The hero sticks inside a taller track; scrolling through the track drives the
   DO zoom (JS), then releases into the next section — no ScrollTrigger pin, so
   the full-bleed width is never collapsed by a pin-spacer. */
.do-hero-track { position: relative; height: 220vh; }
/* With reduced motion the zoom is skipped, so collapse the track to one screen
   — no long dead scroll past a static hero. */
@media ( prefers-reduced-motion: reduce ) {
	.do-hero-track { height: 100vh; }
}
.do-hero > * { max-width: 100%; }
.do-hero > p.do-dim { max-width: 520px; }
/* Match the mock's hero rhythm: no block-gap between items. The only vertical
   spacing is "Less Don't"'s 14px below and the tagline's 24px above (both inline
   in the pattern); "More" and the DO sit tight, held apart only by the DO's
   line box (line-height .76). */
.do-hero > * + * { margin-block-start: 0; }
/* The "DO" is painted by a <canvas> (see animations.js) from the real Syne
   vector outlines, so the scroll-zoom can scale it with no font-size cap and no
   texture-ceiling collapse. This .do-hero__mark div is just a layout placeholder
   that reserves the wordmark's space in the centred stack; the canvas overlays
   the hero and draws the DO where the placeholder sits. */
.do-hero__mark {
	/* Match the design's DO exactly: font-size clamp(150,25vw,360), line-height
	   .76. The DO ink is 2462 units wide / 1000-unit em, so ink width = fs*2.462;
	   the reserved height is the line box = fs*0.76 (this vertical breathing room
	   is what sets the spacing to More above and the tagline below). */
	--do-fs: clamp( 150px, 25vw, 360px );
	width: calc( var( --do-fs ) * 2.462 );
	height: calc( var( --do-fs ) * 0.76 );
	max-width: 92vw;
}
.do-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.do-hero__meta {
	position: absolute;
	bottom: 34px;
	left: clamp(1.5rem, 6vw, 3.5rem);
	right: clamp(1.5rem, 6vw, 3.5rem);
	width: auto;
}
/* Short / landscape viewports: the centred stack can't fit under the floating
   header. Reserve header room, shrink the wordmark, and drop the SCROLL meta
   into the flow so the label, tagline and meta don't overlap. */
@media ( max-height: 520px ) {
	.do-hero {
		justify-content: flex-start;
		padding-top: 84px;
		padding-bottom: 40px;
	}
	.do-hero__mark { --do-fs: min( 22vw, 34vh ); }
	.do-hero__meta {
		position: static;
		left: auto;
		right: auto;
		width: 100%;
		margin-top: 20px;
	}
}

/* ---- Scroll-animation arming ------------------------------------------- */
/* Reveal targets start hidden (the class is set inline in <head>, see
   functions.php) so they don't flash in before animations.js runs; the script
   lifts the class once the tweens own the elements, and a failsafe timeout lifts
   it if the script never runs. Scoped to no-preference so reduced-motion users —
   who never get reveals — always see content. */
@media ( prefers-reduced-motion: no-preference ) {
	/* Only below-fold scroll-reveals are pre-hidden until animations.js gates them.
	   Hero headings are NOT armed here — a JS-gated opacity:0 was making the hero
	   the LCP element and holding it blank ~4s. They now paint immediately with a
	   fast, pure-CSS entrance below. */
	.do-anim-armed .do-anim-up { opacity: 0; }

	/* Hero heading entrance — pure CSS so it never blocks first paint (LCP). */
	.do-anim-hero:not( .do-hero ) { animation: do-hero-rise 0.7s cubic-bezier( 0.16, 1, 0.3, 1 ) both; }
	@keyframes do-hero-rise {
		from { opacity: 0; transform: translateY( 24px ); }
		to   { opacity: 1; transform: none; }
	}
}

/* ---- Arrow / underline links ------------------------------------------- */
.do-arrow-link a {
	display: inline-block;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 4px;
}

/* ---- Service list rows ------------------------------------------------- */
.do-service-row {
	border-bottom: 1.5px solid rgba(0, 0, 0, 0.15);
	transition: padding 0.25s ease;
}
.do-service-row:hover { padding-left: 24px; padding-right: 24px; }
.do-service-list .do-service-row:last-child { border-bottom: none; }
.do-service-baseline { align-items: baseline; }
.do-service-index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	opacity: 0.5;
}
.do-service-desc { color: #555; max-width: 320px; }

/* ---- Big display number ------------------------------------------------ */
.do-bignum {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
}

/* ---- Framed figure + hatched placeholder (block + dynamic markup) ------ */
.do-figure {
	position: relative;
	overflow: hidden;
	margin: 0;
	border: 1.5px solid #0a0a0a;
	background: var(--do-hatch-light);
}
.do-figure.is-tone-dark {
	border-color: rgba(255, 255, 255, 0.3);
	background: var(--do-hatch-dark);
}
.do-figure__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.do-figure__fig,
.do-figure__caption {
	position: absolute;
	z-index: 2;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	color: #0a0a0a;
}
.do-figure__fig { top: 16px; left: 18px; letter-spacing: 0.1em; opacity: 0.5; }
.do-figure__caption { bottom: 16px; left: 18px; right: 18px; letter-spacing: 0.08em; opacity: 0.55; }
.do-figure.is-tone-dark .do-figure__fig,
.do-figure.is-tone-dark .do-figure__caption { color: #fff; }

/* ---- Framed real screenshots (project case studies) ------------------- */
/* Real, full-colour app UI in a device / browser frame on a subtle brand
   stage, captioned with the same mono FIG labels as the hatched figure.
   The colour is the focal moment against the stark Ink/Paper page. */
.do-shot { position: relative; margin: 0; }
.do-shot__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 2.25rem, 6vw, 5rem );
	border: 1.5px solid rgba( 255, 255, 255, 0.14 );
	background:
		radial-gradient( 130% 120% at 50% -10%, rgba( 255, 255, 255, 0.07 ), transparent 62% ),
		#111214;
	overflow: hidden;
}
.do-shot.is-stage-light .do-shot__stage {
	border-color: rgba( 10, 10, 10, 0.12 );
	background:
		radial-gradient( 130% 120% at 50% -10%, rgba( 10, 10, 10, 0.05 ), transparent 62% ),
		#e9e7e1;
}
/* Phone */
.do-shot__phone {
	flex: 0 0 auto;
	height: min( 66vh, 560px );
	aspect-ratio: 1183 / 2560;
	background: #0a0a0a;
	border-radius: clamp( 1.5rem, 2.2vw, 2.4rem );
	padding: 0.5rem;
	box-shadow: 0 40px 80px -24px rgba( 0, 0, 0, 0.65 );
}
.do-shot__phone img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: clamp( 1.1rem, 1.7vw, 1.95rem );
	display: block;
}
/* Phone trio — three side by side, the middle one larger and raised */
.do-shot__trio {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 8px, 1.5vw, 22px );
}
.do-shot__trio .do-shot__phone { height: min( 48vh, 440px ); }
.do-shot__trio .do-shot__phone--mid {
	height: min( 56vh, 520px );
	transform: translateY( -6% );
	z-index: 2;
	box-shadow: 0 48px 96px -24px rgba( 0, 0, 0, 0.72 );
}
@media ( max-width: 680px ) {
	.do-shot__trio { gap: 6px; }
	.do-shot__trio .do-shot__phone { height: 42vw; }
	.do-shot__trio .do-shot__phone--mid { height: 50vw; transform: translateY( -5% ); }
}
/* Pair — two figures side by side, stacking to one column on mobile */
.do-shot__pair {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 1rem, 3vw, 3rem );
}
.do-shot__pair .do-shot__phone { height: min( 58vh, 540px ); }
@media ( max-width: 640px ) {
	.do-shot__pair { flex-direction: column; gap: clamp( 1.75rem, 7vw, 2.75rem ); }
	.do-shot__pair .do-shot__phone { height: 92vw; max-height: 600px; }
}
/* Paper document — a rendered export/PDF page, with a subtle stack behind */
.do-shot__doc {
	position: relative;
	height: min( 66vh, 600px );
	aspect-ratio: 989 / 1400;
	background: #fff;
	box-shadow: 0 40px 80px -24px rgba( 0, 0, 0, 0.62 );
	border: 1px solid rgba( 0, 0, 0, 0.08 );
}
.do-shot__doc img { width: 100%; height: 100%; object-fit: contain; display: block; }
.do-shot__doc::before,
.do-shot__doc::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #f1efe8;
	border: 1px solid rgba( 0, 0, 0, 0.06 );
}
.do-shot__doc::before { transform: rotate( -2.5deg ) translate( -3%, 2% ); }
.do-shot__doc::after { transform: rotate( 1.75deg ) translate( 3%, 1% ); }
/* Browser window */
.do-shot__browser {
	flex: 1 1 auto;
	max-width: 1060px;
	border-radius: 11px 11px 6px 6px;
	overflow: hidden;
	box-shadow: 0 40px 80px -26px rgba( 0, 0, 0, 0.6 );
	border: 1px solid rgba( 0, 0, 0, 0.16 );
}
.do-shot__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 15px;
	background: #e7e4dd;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}
.do-shot__bar span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.16 );
}
.do-shot__browser img { display: block; width: 100%; height: auto; }
/* Caption line — inherits the section colour, dimmed, like the hatched figure */
.do-shot__fig,
.do-shot__caption {
	display: block;
	font-family: var( --wp--preset--font-family--mono );
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	opacity: 0.5;
	margin: 0;
}
.do-shot__fig { margin-top: 16px; }
.do-shot__caption { letter-spacing: 0.05em; opacity: 0.45; margin-top: 5px; }

/* ---- Home selected-work cards (dynamic projects block, display=cards) -- */
.do-card-list { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 44px); align-items: stretch; }
.do-card-list > .do-card { flex: 1 1 360px; min-width: 0; }
.do-card { display: block; color: #0a0a0a; transition: transform 0.3s ease; }
.do-card:hover { transform: translateY(-8px); }
.do-card-media { display: block; position: relative; aspect-ratio: 5 / 4; }
.do-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 22px; }
.do-card-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	letter-spacing: -0.02em;
}
.do-card-year { font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; opacity: 0.5; white-space: nowrap; }
.do-card-desc { display: block; margin: 12px 0 16px; font-size: 1.0625rem; line-height: 1.5; color: #3a3a3a; max-width: 480px; }

/* ---- Work archive rows (dynamic projects block, display=rows) ---------- */
.do-work-list { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 120px); }
.do-work-row { display: flex; gap: clamp(28px, 5vw, 72px); align-items: center; flex-wrap: wrap; }
.do-work-row > * { flex: 1 1 380px; min-width: 0; }
.do-work-list > .do-work-row:nth-child(even) { flex-direction: row-reverse; }
.do-work-media { display: block; position: relative; aspect-ratio: 4 / 3; }
.do-work-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	opacity: 0.5;
	margin-bottom: 16px;
}
.do-work-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 4.25rem);
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}
.do-work-title a { text-decoration: none; }
.do-work-desc { font-size: 1.125rem; line-height: 1.55; color: #3a3a3a; max-width: 520px; margin: 0 0 22px; }
.do-work-read {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: #0a0a0a;
	border-bottom: 1.5px solid #0a0a0a;
	padding-bottom: 3px;
}

/* ---- Grids: auto-fit so N items fill the row (WP defaults to auto-fill) - */
.do-stat-grid.is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important; }
.do-meta-grid.is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important; }
.do-principle-grid.is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }
.do-team-grid.is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; }

/* ---- CTA + case-study next-project ------------------------------------- */
.do-cta .wp-block-button__link { transition: transform 0.2s; }
.do-cta .wp-block-button__link:hover { transform: scale(1.04); }
.do-next .wp-block-heading a { text-decoration: none; }

/* ---- Contact form ------------------------------------------------------ */
.do-form { display: flex; flex-direction: column; gap: 34px; }
.do-form .do-field { display: flex; flex-direction: column; gap: 10px; }
.do-form label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.5;
}
.do-form input,
.do-form textarea {
	background: transparent;
	border: none;
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	padding: 6px 0 12px;
	outline: none;
	transition: border-color 0.25s;
}
.do-form input { font-size: clamp(1.375rem, 2.6vw, 1.875rem); }
.do-form textarea { font-size: clamp(1.25rem, 2.2vw, 1.625rem); resize: none; }
.do-form input::placeholder,
.do-form textarea::placeholder { color: rgba(255, 255, 255, 0.32); }
.do-form input:focus,
.do-form textarea:focus { border-bottom-color: #fff; }
.do-form button[type="submit"] {
	align-self: flex-start;
	margin-top: 12px;
	background: #fff;
	color: #0a0a0a;
	border: none;
	border-radius: 100px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	padding: 18px 42px;
	cursor: pointer;
	transition: transform 0.2s;
}
.do-form button[type="submit"]:hover { transform: scale(1.04); }

/* ---- Contact page layout ----------------------------------------------- */
.do-contact-hero.is-layout-flex { gap: clamp(48px, 7vw, 110px); }
.do-contact-left { flex: 1 1 380px; min-width: 0; }
.do-contact-right { flex: 1 1 400px; min-width: 0; }
.do-contact-info {
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}
.do-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.do-sent { border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 14px; padding: clamp(36px, 5vw, 56px); }
.do-sent__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 0.95;
	letter-spacing: -0.02em;
}
.do-sent__body { font-size: 19px; line-height: 1.55; opacity: 0.65; margin: 20px 0 32px; max-width: 380px; }
.do-sent__again {
	display: inline-block;
	background: transparent;
	color: #fff;
	border: 1.5px solid #fff;
	border-radius: 100px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 15px;
	padding: 14px 30px;
	cursor: pointer;
}

/* ---- Marquee keyframes (block ships its own too) ----------------------- */
@keyframes do-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Hover lift -------------------------------------------------------- */
.do-lift { transition: transform 0.3s ease; }
.do-lift:hover { transform: translateY(-8px); }

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.do-lift, .do-card, .do-service-row, .do-cta .wp-block-button__link, .do-form button { transition: none; }
	[class*="marquee"] > * { animation: none !important; }
}

/* ======================================================================== */
/* Services pages (hub + Audit & Fix + Maintenance)                         */
/* Full-bleed alternating Ink/Paper sections. Uses the brand tokens + a few */
/* shared classes; the whole thing is text/CSS only (no images, no heavy    */
/* JS) so these fixing-service pages aren't themselves slow.                */
/* ======================================================================== */
.do-services { --sv-px: clamp(1.5rem, 6vw, 5.25rem); overflow: clip; }
.do-services h1, .do-services h2, .do-services h3, .do-services p { margin: 0; }

.do-sv-sec { padding: clamp(4.5rem, 10vw, 7.5rem) var(--sv-px); }
.do-sv-sec--ink { background: var(--wp--preset--color--ink); color: #fff; }
.do-sv-sec--paper { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.do-sv-sec--hero { padding-top: clamp(5rem, 11vh, 8.25rem); padding-bottom: clamp(4.5rem, 9vw, 7rem); }

.do-sv-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.14em; opacity: 0.5; margin-bottom: 28px; }
.do-sv-crumb { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.1em; opacity: 0.5; margin-bottom: 28px; text-transform: uppercase; }
.do-sv-crumb a { border-bottom: 1px solid rgba(255,255,255,0.3); }

.do-sv-h1 { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(2.75rem, 7.2vw, 6.5rem); line-height: 0.94; letter-spacing: -0.03em; margin: 0; max-width: 20ch; }
/* Hub hero is intentionally larger + tighter than the detail-page heroes. */
.do-sv-hero--lg { padding-top: clamp(5.625rem, 13vh, 9.375rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.do-sv-hero--lg .do-sv-h1 { font-size: clamp(3rem, 8vw, 7.75rem); line-height: 0.92; max-width: 18ch; }
.do-services .do-sv-founder { margin-top: clamp(32px, 4vw, 44px); max-width: 62ch; font-size: 0.95rem; line-height: 1.65; opacity: 0.62; }
.do-sv-founder a { border-bottom: 1px solid currentColor; white-space: nowrap; }
.do-sv-h2 { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(2.25rem, 5.6vw, 4.5rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 18ch; }
.do-sv-statement { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: clamp(1.75rem, 4.2vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 24ch; }
.do-services .do-sv-lede { font-size: clamp(1.0625rem, 1.9vw, 1.375rem); line-height: 1.55; opacity: 0.65; margin-top: 32px; max-width: 620px; }
.do-sv-sec--paper .do-sv-lede { opacity: 1; color: #3a3a3a; }

.do-sv-btn { display: inline-block; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.02em; padding: 18px 40px; border-radius: 100px; border: none; cursor: pointer; transition: transform 0.2s; }
.do-sv-btn:hover { transform: scale(1.04); }
.do-sv-btn--light { background: #fff; color: var(--wp--preset--color--ink); }
.do-sv-btn--dark { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.do-sv-btn--ghost { background: transparent; color: var(--wp--preset--color--ink); border: 1.5px solid var(--wp--preset--color--ink); font-weight: 500; font-size: 0.9375rem; padding: 14px 30px; }
.do-sv-btn--sm { padding: 14px 28px; font-size: 0.97rem; }
.do-sv-jump { font-family: var(--wp--preset--font-family--mono); font-size: 0.875rem; letter-spacing: 0.06em; border-bottom: 1.5px solid currentColor; padding-bottom: 4px; opacity: 0.8; }
.do-sv-jump:hover { opacity: 1; }
.do-sv-cta-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 44px; }

.do-sv-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 44px; font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; letter-spacing: 0.08em; }
.do-sv-pills span { border: 1px solid currentColor; border-radius: 100px; padding: 6px 14px; opacity: 0.85; }

.do-sv-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; border-top: 1.5px solid currentColor; padding-top: 20px; }
.do-sv-bar span { opacity: 0.55; }
.do-sv-sec--ink .do-sv-bar { border-top-color: rgba(255,255,255,0.25); }

.do-sv-stats { display: flex; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; margin-top: clamp(48px, 6vw, 72px); border-top: 1.5px solid rgba(255,255,255,0.25); padding-top: 28px; }
.do-sv-stat b { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: 0.9; letter-spacing: -0.03em; }
.do-sv-stat span { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.08em; opacity: 0.55; margin-top: 8px; }

.do-sv-rows { margin-top: clamp(40px, 5vw, 56px); }
.do-sv-row { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(24px, 4vw, 64px); padding: clamp(28px, 3.4vw, 40px) 8px; border-bottom: 1.5px solid rgba(0,0,0,0.15); color: var(--wp--preset--color--ink); flex-wrap: wrap; transition: padding 0.25s; }
.do-sv-row:last-child { border-bottom: none; }
.do-sv-row:hover { padding-left: 24px; padding-right: 24px; }
.do-sv-row__body { flex: 1 1 420px; }
.do-sv-row__top { display: flex; align-items: baseline; gap: 22px; }
.do-sv-row__num { font-family: var(--wp--preset--font-family--mono); font-size: 0.875rem; opacity: 0.5; }
.do-sv-row h2 { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.875rem, 4.4vw, 3.375rem); letter-spacing: -0.02em; }
.do-sv-row p { font-size: 1.0625rem; line-height: 1.6; color: #3a3a3a; margin-top: 14px; max-width: 56ch; }
.do-sv-row__pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; letter-spacing: 0.08em; }
.do-sv-row__pills span { border: 1px solid var(--wp--preset--color--ink); border-radius: 100px; padding: 5px 12px; }
.do-sv-row__go { display: flex; align-items: center; gap: 16px; font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; letter-spacing: 0.06em; white-space: nowrap; }
.do-sv-row__go b { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 2.125rem; }

.do-sv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(28px, 4vw, 48px); margin-top: clamp(44px, 6vw, 64px); }
.do-sv-card__num { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(2.5rem, 5vw, 4rem); opacity: 0.22; line-height: 1; }
.do-sv-card h3 { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.4375rem; margin: 12px 0 10px; }
.do-sv-card p { font-size: 1rem; line-height: 1.6; color: #3a3a3a; }
.do-sv-sec--ink .do-sv-card p { color: rgba(255,255,255,0.65); }

.do-sv-scope { display: flex; gap: clamp(32px, 5vw, 72px); flex-wrap: wrap; margin-top: clamp(40px, 5vw, 56px); }
.do-sv-scope__main { flex: 1 1 400px; }
.do-sv-scope__side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 28px; }
.do-sv-inc h2 { margin-bottom: 26px; }
.do-sv-inc__item { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.14); font-size: 1.03rem; line-height: 1.55; }
.do-sv-inc__item:last-child { border-bottom: none; }
.do-sv-inc__item b { font-family: var(--wp--preset--font-family--display); font-weight: 700; opacity: 0.5; }
.do-sv-notbox { border: 1.5px solid rgba(255,255,255,0.28); padding: 26px; }
.do-sv-notbox__t { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; opacity: 0.55; margin-bottom: 18px; }
.do-sv-notbox__list { display: grid; gap: 12px; font-size: 0.97rem; line-height: 1.5; opacity: 0.72; }
.do-sv-notbox__list.is-2col { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 32px; }
.do-sv-notbox__list div { display: flex; gap: 14px; }
.do-sv-notbox__list em { opacity: 0.5; font-style: normal; }
.do-sv-capacity { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); padding: 26px; }
.do-sv-capacity__t { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; opacity: 0.6; margin-bottom: 14px; }
.do-sv-capacity__big { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(1.875rem, 3.6vw, 2.625rem); line-height: 1; letter-spacing: -0.02em; }
.do-sv-capacity p { font-size: 0.97rem; line-height: 1.55; color: #3a3a3a; margin: 16px 0 20px; }
.do-sv-capacity__next { border-top: 1.5px solid var(--wp--preset--color--ink); padding-top: 14px; font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; letter-spacing: 0.06em; }
.do-sv-capacity__next b { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em; margin-top: 4px; }

.do-sv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: clamp(44px, 6vw, 60px); }
.do-sv-step { background: var(--wp--preset--color--paper); border: 1.5px solid var(--wp--preset--color--ink); padding: 28px 24px; }
.do-sv-step__n { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; opacity: 0.55; }
.do-sv-step h3 { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; margin: 14px 0 10px; }
.do-sv-step p { font-size: 0.97rem; line-height: 1.6; color: #3a3a3a; }

.do-sv-tablewrap { overflow-x: auto; margin-top: clamp(20px, 3vw, 28px); }
.do-sv-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.do-sv-table th { padding: 16px 18px; border-bottom: 1.5px solid rgba(255,255,255,0.4); text-align: left; vertical-align: bottom; }
.do-sv-table thead th:first-child { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; font-weight: 400; opacity: 0.5; text-transform: uppercase; }
.do-sv-table .tier { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.625rem; letter-spacing: -0.01em; }
.do-sv-table .price { font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; letter-spacing: 0.08em; opacity: 0.6; margin-top: 6px; }
.do-sv-table td { padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.13); font-size: 1rem; line-height: 1.5; }
.do-sv-table td.val { font-family: var(--wp--preset--font-family--mono); font-size: 0.9rem; }
.do-sv-table .col-hi { background: rgba(255,255,255,0.05); }
.do-sv-table td.cta { padding: 26px 18px; border-bottom: none; }

.do-sv-faqs { max-width: 900px; margin-top: clamp(8px, 2vw, 16px); }
.do-sv-faq { border-bottom: 1px solid rgba(255,255,255,0.16); }
.do-sv-faq > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.1875rem, 2.2vw, 1.625rem); letter-spacing: -0.01em; }
.do-sv-faq > summary::-webkit-details-marker { display: none; }
.do-sv-faq > summary::after { content: "+"; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.625rem; opacity: 0.6; flex: none; }
.do-sv-faq[open] > summary::after { content: "\2212"; }
.do-sv-faq p { font-size: 1.03rem; line-height: 1.6; opacity: 0.7; padding: 0 0 26px; max-width: 70ch; }

.do-sv-cross { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; color: var(--wp--preset--color--ink); }
.do-sv-cross__t { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.1em; opacity: 0.55; margin-bottom: 12px; }
.do-sv-cross__h { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(2.125rem, 5.4vw, 4.5rem); line-height: 0.95; letter-spacing: -0.03em; }
.do-sv-cross__arrow { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(2.125rem, 5.4vw, 4.5rem); }

.do-sv-enquire { display: flex; gap: clamp(40px, 6vw, 96px); flex-wrap: wrap; }
.do-sv-enquire__intro { flex: 1 1 360px; }
.do-sv-enquire__form { flex: 1 1 420px; }
.do-sv-enquire h2 { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(2.75rem, 7vw, 6rem); line-height: 0.9; letter-spacing: -0.03em; }
.do-sv-enquire .do-sv-lede { margin: 26px 0 34px; max-width: 420px; }
.do-sv-do { -webkit-text-stroke: 3px currentColor; -webkit-text-fill-color: transparent; }
.do-sv-meta { font-family: var(--wp--preset--font-family--mono); font-size: 0.875rem; letter-spacing: 0.04em; display: flex; flex-direction: column; gap: 16px; }
.do-sv-meta span { opacity: 0.5; }

.do-sv-form { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 26px; }
.do-sv-field { display: flex; flex-direction: column; gap: 8px; }
.do-sv-field label { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; opacity: 0.6; }
.do-sv-field input, .do-sv-field select, .do-sv-field textarea { background: transparent; border: none; border-bottom: 1.5px solid rgba(0,0,0,0.3); color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: clamp(1.125rem, 2vw, 1.375rem); padding: 6px 0 12px; outline: none; border-radius: 0; transition: border-color 0.25s; }
.do-sv-field textarea { resize: none; }
.do-sv-field input::placeholder, .do-sv-field textarea::placeholder { color: rgba(10,10,10,0.42); }
.do-sv-field input:focus, .do-sv-field select:focus, .do-sv-field textarea:focus { border-bottom-color: var(--wp--preset--color--ink); }
.do-sv-form .do-sv-btn { align-self: flex-start; }
.do-sv-success { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); padding: clamp(32px, 5vw, 52px); }
.do-sv-success__title { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 0.95; letter-spacing: -0.02em; }
.do-sv-success p { font-size: 1.125rem; line-height: 1.55; color: #3a3a3a; margin: 20px 0 30px; }
.do-sv-success .do-sv-btn { margin-top: 4px; }
.do-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Audit & Fix — payment / contract terms band (ink scope section) */
.do-sv-terms { margin-top: clamp(36px, 4vw, 48px); border-top: 1.5px solid rgba(255,255,255,0.25); padding-top: 24px; display: flex; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; align-items: baseline; }
.do-sv-terms__t { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; opacity: 0.55; flex: none; }
.do-sv-terms p { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: clamp(1.125rem, 2.3vw, 1.625rem); line-height: 1.3; letter-spacing: -0.01em; max-width: 40ch; flex: 1 1 300px; }

/* Maintenance GoCardless form — note + notice */
.do-sv-formnote { font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; letter-spacing: 0.04em; line-height: 1.5; opacity: 0.55; margin-top: -6px; }
.do-sv-notice { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); padding: 16px 20px; font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; line-height: 1.5; letter-spacing: 0.02em; margin-bottom: 24px; border: 1.5px solid rgba(255,255,255,0.25); }
.do-sv-sec--ink .do-sv-notice { border-color: rgba(255,255,255,0.35); }

/* ---- Services: mobile refinements ---- */
@media (max-width: 640px) {
	/* Heroes: shrink so long single words (e.g. "maintenance") fit instead of clipping */
	.do-sv-h1 { font-size: clamp(1.7rem, 7.8vw, 2.9rem); overflow-wrap: break-word; }
	.do-sv-hero--lg .do-sv-h1 { font-size: clamp(2rem, 9vw, 3rem); }

	/* Tiers comparison: stop the horizontal scroll — stack each feature with both tiers' values */
	.do-sv-tablewrap { overflow-x: visible; }
	.do-sv-table { min-width: 0; display: block; }
	.do-sv-table thead, .do-sv-table tbody { display: block; }
	.do-sv-table thead tr { display: flex; gap: 14px; }
	.do-sv-table thead th { flex: 1; padding: 0 0 16px; }
	.do-sv-table thead th:first-child { display: none; }
	.do-sv-table .tier { font-size: 1.3rem; }
	.do-sv-table tbody tr { display: flex; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.13); }
	.do-sv-table tbody td { padding: 0; border: 0; }
	.do-sv-table tbody td:first-child { flex: 0 0 100%; font-size: 1.02rem; font-weight: 600; margin-bottom: 12px; }
	.do-sv-table tbody td.val { flex: 1 1 45%; font-size: 0.95rem; opacity: 0.9; }
	.do-sv-table tbody td.val::before { content: "Essential"; display: block; font-family: var(--wp--preset--font-family--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.45; margin-bottom: 4px; }
	.do-sv-table tbody td.val:nth-child(3)::before { content: "Standard"; }
	.do-sv-table .col-hi { background: transparent; }
	.do-sv-table tbody tr:last-child { border-bottom: 0; padding-top: 24px; }
	.do-sv-table td.cta { flex: 1 1 100%; padding: 0 0 12px; }
	.do-sv-table td.cta:empty { display: none; }
	.do-sv-table td.cta .do-sv-btn { display: block; text-align: center; }

	/* Buttons + arrows: scale down for mobile (were desktop-sized) */
	.do-sv-btn { padding: 14px 28px; font-size: 0.9375rem; }
	.do-sv-btn--sm { padding: 12px 22px; font-size: 0.875rem; }
	.do-sv-btn--ghost { padding: 12px 24px; }
	.do-sv-row__go { gap: 12px; }
	.do-sv-row__go b { font-size: 1.375rem; }
}

/* The enquiry form on a Paper section (the hub) has no visible panel — it's
   paper-on-paper — so the panel's side padding just indents the fields away from
   the rest of the page. Drop the background + horizontal padding so the fields
   align with everything else. (Audit/Maintenance forms sit on an Ink section, so
   they keep their paper card.) */
.do-sv-sec--paper .do-sv-form { background: transparent; padding-left: 0; padding-right: 0; }