/*
Theme Name:        Hello Designs
Author:            Hello Designs
Description:       Custom theme for Hello Designs, a construction and design company. Plain HTML, CSS and vanilla JS. No frameworks or page builders.
Version:           0.1.0
Requires at least: 6.0
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       hellodesigns
*/

/* ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1. Design tokens (CSS variables)  <- adjust these to match the Figma design
   2. Reset
   3. Base typography & elements
   4. Layout helpers (.container, .section, grids)
   5. Accessibility helpers
   6. Buttons
   7. Site header & navigation
   8. Site footer (Figma)
   9. Template parts (hero, services grid, project card, CTA banner)
   10. Projects (filter, archive grid, single project)
   11. Page content (entries, pagination, 404, contact)
   12. WordPress core classes (alignments, captions, galleries)

   BREAKPOINTS (mobile-first, use min-width only)
   CSS variables cannot be used inside media queries, so these are fixed:
     - sm:  600px   large phones / small tablets
     - md:  768px   tablets
     - lg:  1024px  laptops (the nav switches to desktop here; also in main.js)
     - xl:  1280px  desktops
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   All colors, fonts and spacing live here. Everything below references
   these variables, so updating the design should mostly mean editing this
   block. Values are neutral placeholders until the Figma design is applied.
   ========================================================================== */
:root {
	/* Values marked (Figma) come from the design. The rest are still neutral
	   placeholders until those sections are designed. */

	/* ---- Brand palette (Figma) ---- */
	--color-black:     #000000;
	--color-white:     #ffffff;
	--color-off-white: #fdfbf7; /* section titles on black */
	--color-yellow:    #ffff00; /* brand yellow: logo dots, CTA buttons */
	--color-grey:      #a6a6a6; /* nav links on black */

	/* ---- Colors by role ---- */
	--color-primary:          #111111; /* dark UI color (links, default buttons) */
	--color-primary-hover:    #000000;
	--color-primary-contrast: #ffffff; /* text on top of --color-primary */
	--color-accent:           var(--color-yellow); /* brand highlight (Figma) */
	--color-accent-hover:     #e6e600;
	--color-accent-contrast:  var(--color-black);  /* text on top of --color-accent */
	--color-text:             #1f1f1f;
	--color-text-muted:       #666666;
	--color-heading:          #111111;
	--color-bg:               #ffffff;
	--color-bg-alt:           #f3f3f3; /* alternating sections, cards */
	--color-bg-dark:          var(--color-black); /* header, dark sections, footer (Figma) */
	--color-text-on-dark:     var(--color-off-white);
	--color-text-on-dark-muted: #b5b5b5; /* small text on black (Figma) */
	--color-header-bg:         var(--color-black); /* (Figma) */
	--color-header-link:       var(--color-grey);  /* (Figma) */
	--color-header-link-hover: var(--color-white);
	--color-border:           #dddddd;
	--color-placeholder:      #d6d6d6; /* image placeholders */
	--color-focus:            #005fcc; /* keyboard focus ring */
	--color-overlay:          rgba(0, 0, 0, 0.45); /* text-over-image overlays */

	/* ---- Fonts ----
	   Loaded from Google Fonts in functions.php (hellodesigns_fonts_url()).
	   To self-host instead: put .woff2 files in assets/fonts/, add @font-face
	   rules in section 3, and remove the Google Fonts enqueue. */
	--font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* section titles, project slider (Figma) */
	--font-nav:     var(--font-display); /* header links + CTA (Figma) */
	--font-script:  "Rustic Roadway", "Great Vibes", "Brush Script MT", cursive; /* hero headline (Figma) */
	--font-brief-title: var(--font-display); /* "Complete with simple steps" (swap for the Figma font when known) */

	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* Uppercase labels: nav links, buttons, section titles */
	--ls-caps:      0.08em;
	--ls-caps-wide: 0.12em;

	/* Fluid type scale: clamp(min, preferred, max) */
	--fs-xs:   0.8125rem;                                /* 13px */
	--fs-sm:   0.9375rem;                                /* 15px */
	--fs-base: 1rem;                                     /* 16px */
	--fs-lg:   clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--fs-h4:   clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--fs-h3:   clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
	--fs-h2:   clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
	--fs-h1:   clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);

	--lh-body:    1.6;
	--lh-heading: 1.2;
	--ls-heading: -0.01em;

	/* ---- Spacing scale ---- */
	--space-3xs: 0.25rem;  /* 4px  */
	--space-2xs: 0.5rem;   /* 8px  */
	--space-xs:  0.75rem;  /* 12px */
	--space-sm:  1rem;     /* 16px */
	--space-md:  1.5rem;   /* 24px */
	--space-lg:  2rem;     /* 32px */
	--space-xl:  3rem;     /* 48px */
	--space-2xl: 4rem;     /* 64px */
	--space-3xl: 6rem;     /* 96px */

	/* Vertical padding for page sections (grows with screen width) */
	--section-padding: clamp(var(--space-xl), 6vw, var(--space-3xl));

	/* ---- Layout ---- */
	--container-max:    1288px; /* (Figma) content width at 1440px */
	--container-narrow: 760px;  /* long-form text */
	--container-gutter: var(--space-sm);
	--grid-gap:         var(--space-md);
	--header-height:    4rem;    /* 64px mobile, 88px desktop (see below) */
	--logo-height:      2.5rem;  /* 40px mobile, 52px desktop */

	/* ---- Shape & motion ---- */
	--radius-sm:   2px;
	--radius:      4px;
	--radius-lg:   8px;
	--border:      1px solid var(--color-border);
	--shadow:      0 2px 8px rgba(0, 0, 0, 0.08);
	--transition:  200ms ease;
}

@media (min-width: 1024px) {
	:root {
		--header-height: 5.5rem;
		--logo-height:   3.25rem;
	}
}

@media (min-width: 768px) {
	:root {
		--container-gutter: var(--space-lg);
		--grid-gap: var(--space-lg);
	}
}


/* ==========================================================================
   2. RESET
   A light, modern reset. Keeps sensible defaults and removes the rest.
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* smooth-scroll.js animates the scroll itself; native smoothing would fight it */
	html.has-smooth-scroll {
		scroll-behavior: auto;
	}
}

body {
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Make the [hidden] attribute always win over display rules (used by JS). */
[hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* ==========================================================================
   3. BASE TYPOGRAPHY & ELEMENTS
   ========================================================================== */

/* Self-hosted fonts (files live in assets/fonts/).
   Rustic Roadway is not on Google Fonts. Until the file is added, the browser
   falls back to Great Vibes (next in --font-script). See README → Fonts. */
@font-face {
	font-family: "Rustic Roadway";
	src: url("assets/fonts/rustic-roadway.woff2") format("woff2"),
	     url("assets/fonts/rustic-roadway.woff") format("woff"),
	     url("assets/fonts/rustic-roadway.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	color: var(--color-text);
	background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	color: var(--color-heading);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Utility classes: make any element look like a given heading size */
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
h5,
h6 { font-size: var(--fs-lg); }

a {
	color: var(--color-primary);
	text-underline-offset: 0.15em;
	transition: color var(--transition);
}

a:hover {
	color: var(--color-primary-hover);
}

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

hr {
	border: 0;
	border-top: var(--border);
	margin-block: var(--space-lg);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: var(--space-xs) var(--space-sm);
	border: var(--border);
	border-radius: var(--radius);
	background-color: var(--color-bg);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}


/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */

/* Centers content and adds side padding. Use inside every full-width section. */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + (var(--container-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.container--narrow {
	max-width: calc(var(--container-narrow) + (var(--container-gutter) * 2));
}

/* Standard vertical rhythm for page sections */
.section {
	padding-block: var(--section-padding);
}

.section--alt {
	background-color: var(--color-bg-alt);
}

/* Removes top padding when a section follows a page header */
.section--flush-top {
	padding-top: 0;
}

.section__header {
	max-width: var(--container-narrow);
	margin-bottom: var(--space-xl);
}

.section__header--center {
	margin-inline: auto;
	text-align: center;
}

.section__eyebrow {
	display: block;
	margin-bottom: var(--space-2xs);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.section__intro {
	margin-top: var(--space-sm);
	font-size: var(--fs-lg);
	color: var(--color-text-muted);
}

.section__footer {
	margin-top: var(--space-xl);
	text-align: center;
}

/* Responsive grid: 1 column on mobile, then 2, then 3 */
.grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gap);
}

@media (min-width: 600px) {
	.grid--2,
	.grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Removes bullets and indentation from a list used for layout */
.list-reset {
	list-style: none;
	padding: 0;
}

/* Neutral box shown where an image will go */
.placeholder-media {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background-color: var(--color-placeholder);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}


/* ==========================================================================
   5. ACCESSIBILITY HELPERS
   ========================================================================== */

/* Hide visually but keep available to screen readers (WordPress standard). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

/* "Skip to content" link becomes visible when focused with the keyboard. */
.skip-link:focus {
	position: fixed !important;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 1000;
	width: auto;
	height: auto;
	padding: var(--space-xs) var(--space-sm);
	clip: auto;
	clip-path: none;
	background-color: var(--color-bg);
	color: var(--color-text);
	box-shadow: var(--shadow);
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.button,
.wp-block-button__link,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: var(--space-xs) var(--space-md);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius);
	background-color: var(--color-primary);
	color: var(--color-primary-contrast);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
	background-color: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-primary-contrast);
}

/* Outline variant */
.button--outline {
	background-color: transparent;
	color: var(--color-primary);
}

.button--outline:hover {
	background-color: var(--color-primary);
	color: var(--color-primary-contrast);
}

/* Light variant for dark backgrounds */
.button--light {
	border-color: var(--color-text-on-dark);
	background-color: var(--color-text-on-dark);
	color: var(--color-bg-dark);
}

.button--light:hover {
	background-color: transparent;
	border-color: var(--color-text-on-dark);
	color: var(--color-text-on-dark);
}


/* Brand (yellow) variant: header CTA and key calls to action (Figma) */
.button--accent {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-accent-contrast);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
}

.button--accent:hover {
	border-color: var(--color-accent-hover);
	background-color: var(--color-accent-hover);
	color: var(--color-accent-contrast);
}


/* ==========================================================================
   7. SITE HEADER & NAVIGATION (Figma)
   Black bar: logo left, uppercase grey links + yellow CTA right.
   Mobile (< 1024px): links and CTA hidden behind a toggle button.
   1024px+: links and CTA displayed inline, toggle hidden.
   Without JavaScript (.no-js) the menu is always visible.
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--color-header-bg);
	color: var(--color-header-link);
}

/* Keep the sticky header below the WP admin bar when logged in */
.admin-bar .site-header {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .site-header {
		top: 32px;
	}
}

/* The admin bar scrolls away on small phones, so don't offset there */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 var(--space-sm);
	min-height: var(--header-height);
}

.site-branding {
	display: flex;
	align-items: center;
	min-height: var(--header-height); /* keeps the logo row steady when the mobile menu opens */
}

.site-branding a {
	display: block;
}

/* Theme logo (assets/images/logo.png) or the Customizer logo */
.site-logo,
.custom-logo {
	width: auto;
	height: var(--logo-height);
	max-height: var(--logo-height);
}

.site-title {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--color-white);
	text-decoration: none;
}

/* ---- Mobile menu toggle (hamburger) ---- */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: calc(var(--space-2xs) * -1);
	border-radius: var(--radius);
}

.no-js .menu-toggle {
	display: none;
}

/* Three lines: the span is the middle line, ::before/::after are top/bottom */
.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: var(--color-white);
	transition: transform var(--transition), background-color var(--transition);
}

.menu-toggle__icon {
	position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__icon::before { top: -7px; }
.menu-toggle__icon::after  { top: 7px; }

/* Turns into an "X" while open */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
	background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---- Primary navigation (mobile first: stacked panel under the bar) ---- */
.primary-nav {
	width: 100%;
	font-family: var(--font-nav);
	padding-bottom: var(--space-lg);
}

.js .primary-nav {
	display: none;
}

.js .primary-nav.is-open {
	display: block;
}

.primary-nav ul {
	list-style: none;
	padding: 0;
}

.primary-nav .menu a {
	display: block;
	padding: var(--space-sm) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--color-header-link);
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--transition);
}

.primary-nav .menu a:hover,
.primary-nav .menu a:focus-visible,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav .current_page_item > a {
	color: var(--color-header-link-hover);
}

/* Dropdown parents (SERVICES) open the menu but don't link to a page */
.primary-nav .menu-toggle-link {
	cursor: default;
}

/* Small chevron after parent items (e.g. SERVICES ˅) */
.primary-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.35em;
	height: 0.35em;
	margin-left: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.25em) rotate(45deg);
}

/* Sub-menus are indented on mobile */
.primary-nav .sub-menu a {
	padding-left: var(--space-md);
	font-size: var(--fs-xs);
}

/* Header CTA: full-width button inside the mobile panel */
.header-cta {
	margin-top: var(--space-lg);
}

.header-cta .button {
	width: 100%;
	font-size: 0.875rem;
}

@media (min-width: 1024px) {
	.menu-toggle {
		display: none;
	}

	.primary-nav,
	.js .primary-nav {
		display: flex;
		align-items: center;
		gap: 3rem; /* space between last link and CTA */
		width: auto;
		padding-bottom: 0;
	}

	.primary-nav .menu {
		display: flex;
		align-items: center;
		gap: 2.5rem; /* space between links */
	}

	.primary-nav .menu a {
		padding: var(--space-2xs) 0;
		border-bottom: 0;
		font-size: 0.875rem; /* 14px */
	}

	/* Dropdowns: shown on hover or keyboard focus */
	.primary-nav .menu-item-has-children {
		position: relative;
	}

	.primary-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: calc(var(--space-md) * -1);
		z-index: 10;
		min-width: 14rem;
		padding: var(--space-xs) 0;
		background-color: var(--color-header-bg);
		border-top: 2px solid var(--color-accent);
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.5rem);
		transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
	}

	.primary-nav .menu-item-has-children:hover > .sub-menu,
	.primary-nav .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.primary-nav .sub-menu a {
		padding: var(--space-2xs) var(--space-md);
		font-size: var(--fs-xs);
	}

	.header-cta {
		margin-top: 0;
	}

	.header-cta .button {
		width: auto;
		padding: 0.875rem 1.5rem; /* ~48px tall: comfortable click target */
		font-size: 0.8125rem;     /* 13px */
	}
}

/* Between 1024px and 1200px, tighten spacing so everything fits one line */
@media (min-width: 1024px) and (max-width: 1199px) {
	.primary-nav,
	.js .primary-nav {
		gap: var(--space-lg);
	}

	.primary-nav .menu {
		gap: var(--space-lg);
	}

	.header-cta .button {
		padding: 0.75rem 1.25rem;
	}
}


/* ---- Mega menu (inc/mega-menu.php) (Figma "Services" dropdown) ----
   Desktop only. A white rounded panel under the header: sub-items listed on
   the left, a large photo on the right that crossfades per hovered item.
   The panel spans the header's content width, so the parent <li> stops
   being the positioning box and .site-header__inner takes over. */
@media (min-width: 1024px) {
	.site-header__inner {
		position: relative;
		--mega-gap: 0.75rem;   /* space between header and panel, and panel padding */
		--mega-h:   15rem;     /* panel height */
		--mega-list: 25%;      /* width of the list column */
	}

	.primary-nav .menu-item-has-children.is-mega {
		position: static;
	}

	/* Chevron flips while open */
	.primary-nav .is-mega > a::after {
		transition: transform var(--transition);
	}

	.primary-nav .is-mega:hover > a::after,
	.primary-nav .is-mega:focus-within > a::after {
		transform: translateY(0.05em) rotate(225deg);
	}

	/* The panel (the sub-menu itself) */
	.primary-nav .is-mega > .sub-menu {
		top: calc(100% + var(--mega-gap));
		right: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.15rem;
		min-width: 0;
		height: var(--mega-h);
		padding: var(--mega-gap) calc(100% - var(--mega-list)) var(--mega-gap) 2.25rem;
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 1.25rem;
		background-color: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
		transform: translateY(0.75rem) scale(0.985);
		transform-origin: top center;
		/* closing: fade out, then hide (the short delay forgives a slightly wobbly mouse) */
		transition:
			opacity 280ms ease 80ms,
			transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms,
			visibility 0s linear 460ms;
	}

	/* Invisible bridge between the link and the panel so the menu doesn't close on the way down */
	.primary-nav .is-mega > .sub-menu::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: calc((var(--header-height) / 2) + var(--mega-gap));
	}

	.primary-nav .is-mega:hover > .sub-menu,
	.primary-nav .is-mega:focus-within > .sub-menu {
		transform: none;
		transition:
			opacity 280ms ease,
			transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
			visibility 0s;
	}

	/* Sub-item links: light grey, the current one dark */
	.primary-nav .is-mega .sub-menu a {
		padding: 0.3rem 0;
		font-family: var(--font-display);
		font-size: clamp(0.9375rem, 0.85rem + 0.2vw, 1.0625rem);
		font-weight: var(--fw-regular);
		letter-spacing: 0;
		text-transform: none;
		color: #a3a3a3;
		transition: color 250ms ease, transform 250ms ease;
	}

	.primary-nav .is-mega .sub-menu a:hover,
	.primary-nav .is-mega .sub-menu a:focus-visible,
	.primary-nav .is-mega .sub-menu a.is-current,
	.primary-nav .is-mega .sub-menu .current-menu-item > a {
		color: #2b2b2b;
		font-weight: var(--fw-medium);
	}

	.primary-nav .is-mega .sub-menu a:hover {
		transform: translateX(3px);
	}

	/* Photo area on the right of the panel */
	.mega-media {
		position: absolute;
		top: calc(100% + var(--mega-gap) * 2);
		right: var(--mega-gap);
		z-index: 11;
		width: calc(100% - var(--mega-list) - var(--mega-gap));
		height: calc(var(--mega-h) - var(--mega-gap) * 2);
		border-radius: 1rem;
		overflow: hidden;
		background-color: #ddd;
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.75rem) scale(0.985);
		transition:
			opacity 280ms ease 80ms,
			transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms,
			visibility 0s linear 460ms;
	}

	.is-mega:hover > .mega-media,
	.is-mega:focus-within > .mega-media {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition:
			opacity 280ms ease 60ms,
			transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms,
			visibility 0s;
	}

	.mega-media picture {
		display: contents;
	}

	/* All photos stacked; the active one fades in with a gentle zoom-out */
	.mega-media__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transform: scale(1.06);
		transition: opacity 600ms ease, transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.mega-media__img.is-active {
		opacity: 1;
		transform: none;
	}
}

/* Phones/tablets: the normal stacked sub-menu, no photos */
@media (max-width: 1023px) {
	.mega-media {
		display: none;
	}
}


/* ==========================================================================
   8. SITE FOOTER (Figma)
   Darkened architectural photo. Headline left, SUPPORT / FOLLOW / CONTACT
   columns right, copyright · social icons · logo along the bottom.
   Phones: everything stacks; the three columns sit in a 2-column grid.
   Switch on/off: Customize → Footer → "Show footer".
   ========================================================================== */
.site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 3vw, 2.5rem);
	background-color: var(--color-black);
	color: var(--color-white);
}

.site-footer picture {
	display: contents;
}

.site-footer__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.45)),
		rgba(0, 0, 0, 0.5);
}

.site-footer a {
	color: var(--color-white);
	text-decoration: none;
	transition: color var(--transition);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--color-accent);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
}

.site-footer__headline {
	display: flex;
	flex-direction: column;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem); /* 36px → 52px */
	font-style: italic;
	font-weight: var(--fw-bold);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.site-footer__headline-line.is-accent {
	color: var(--color-accent);
}

.site-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-xl) var(--space-lg);
}

.site-footer__title {
	margin-bottom: var(--space-md);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.site-footer__links {
	display: grid;
	gap: 0.9rem;
	list-style: none;
	padding: 0;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-lg);
}

.site-footer__copyright {
	order: 3;
	width: 100%;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.site-footer__icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-lg);
	background-color: rgba(30, 30, 30, 0.85);
	transition: border-color var(--transition), transform var(--transition);
}

.site-footer__icon img {
	width: 1.375rem;
	height: 1.375rem;
}

.site-footer__icon:hover,
.site-footer__icon:focus-visible {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

.site-footer__logo {
	margin-left: auto;
}

.site-footer__logo img {
	width: auto;
	height: 2.75rem;
}

/* Phones/tablets: the photo's bright sky would sit behind the text, so darken more */
@media (max-width: 1023px) {
	.site-footer::before {
		background: rgba(0, 0, 0, 0.78);
	}
}

/* ---- Laptop and up: the design's layout ---- */
@media (min-width: 1024px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		grid-template-rows: auto auto;
		column-gap: var(--space-2xl);
		row-gap: var(--space-xl);
	}

	.site-footer__cols {
		grid-template-columns: 1fr 0.8fr 1fr;
		gap: var(--space-lg);
	}

	/* Bottom row: copyright under the headline, icons under the columns, logo right */
	.site-footer__bottom {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		column-gap: var(--space-2xl);
	}

	.site-footer__copyright {
		order: 0;
		width: auto;
	}

	.site-footer__social {
		grid-column: 2;
		grid-row: 1;
	}

	.site-footer__logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.site-footer__logo img {
		height: 3.25rem;
	}
}

/* ==========================================================================
   9. TEMPLATE PARTS
   ========================================================================== */

/* ---- Hero (template-parts/hero.php) ---- */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 60vh;
	padding-block: var(--section-padding);
	background-color: var(--color-bg-alt);
	background-size: cover;
	background-position: center;
}

.hero--small {
	min-height: 0;
}

/* Darken background images so text stays readable */
.hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-overlay);
}

.hero--has-image,
.hero--has-image .hero__title {
	color: var(--color-text-on-dark);
}

.hero__inner {
	position: relative; /* sits above the overlay */
}

.hero__content {
	max-width: var(--container-narrow);
}

.hero__text {
	margin-top: var(--space-sm);
	font-size: var(--fs-lg);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

/* ---- Homepage hero (template-parts/hero-home.php) (Figma) ----
   Header + hero fill exactly one screen: the hero takes the viewport height
   minus the header. The image covers that area (cropping as needed) and the
   script headline sits bottom-left on a soft white glow. */
.hero-home {
	--hero-offset: var(--header-height); /* space taken above the hero */

	position: relative;
	display: grid;
	overflow: hidden;
	height: calc(100vh - var(--hero-offset));  /* fallback for older browsers */
	height: calc(100svh - var(--hero-offset)); /* svh = visible height on phones (ignores the browser bar) */
	min-height: 26rem; /* never too short on landscape phones / small laptops */
	background-color: var(--color-white);
}

/* When logged in, the WP admin bar also takes space at the top */
.admin-bar .hero-home {
	--hero-offset: calc(var(--header-height) + 46px);
}

@media (min-width: 783px) {
	.admin-bar .hero-home {
		--hero-offset: calc(var(--header-height) + 32px);
	}
}

/* Image and text share one grid cell, so the text sits on top of the image */
.hero-home__media,
.hero-home__inner {
	grid-area: 1 / 1;
}

/* The whole image is always visible (no cropping). When the screen shape
   differs from the image, the leftover space is white, which blends with
   the image's own white sky and left side. The image hugs the bottom-right
   corner, where the building is. */
.hero-home__media {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	min-height: 0; /* lets the grid cell shrink to the hero height */
}

.hero-home__media img {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: right bottom;
}

/* Landscape screens: the image is as tall as the hero and the extra space
   is on the left, so fade the image's left edge into the white. */
@media (orientation: landscape) {
	.hero-home__media img {
		width: auto;
		height: 100%;
		max-width: 100%;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%);
		mask-image: linear-gradient(to right, transparent 0, #000 15%);
	}
}

.hero-home__inner {
	position: relative;
	z-index: 1; /* keeps the glow (::before below) above the image */
	display: flex;
	align-items: flex-end;
	padding-bottom: clamp(var(--space-lg), 4vw, 3.75rem);
}

/* Portrait screens (phones, upright tablets): the full image only fills the
   bottom part of the hero, so place the headline in the white space above it. */
/* Phones and upright tablets: short hero, headline on top, full image below.
   (Desktop/landscape keeps the full-screen version above.) */
@media (orientation: portrait) and (max-width: 1023px) {
	.hero-home {
		height: auto;
		min-height: 0;
	}

	.hero-home__inner {
		grid-area: 1 / 1;
		padding-top: clamp(2.5rem, 10vw, 4.5rem);
		padding-bottom: 0;
	}

	.hero-home__media {
		grid-area: 2 / 1;
		margin-top: -6vw; /* tucks the image's white sky just under the headline */
	}

	.hero-home__media img {
		width: 100%;
		height: auto;
		max-height: none;
	}
}

.hero-home__title {
	position: relative;
	padding-left: clamp(0rem, 2.5vw, 2.25rem); /* Figma: slightly indented from the logo */
	font-family: var(--font-script);
	font-size: clamp(2rem, 1.25rem + 2.5vw, 3.4375rem); /* 32px → 55px (Figma: 55px) */
	font-weight: var(--fw-regular);
	line-height: 1.4545; /* Figma: 80px at 55px */
	letter-spacing: 0;
	text-transform: capitalize;
	color: var(--color-black);
}

/* Soft white glow behind the headline for legibility */
.hero-home__title::before {
	content: "";
	position: absolute;
	inset: -30% -18% -45% -30%;
	z-index: -1;
	background: radial-gradient(
		ellipse at 45% 55%,
		rgba(255, 255, 255, 0.95) 35%,
		rgba(255, 255, 255, 0.7) 55%,
		rgba(255, 255, 255, 0) 72%
	);
	pointer-events: none;
}

/* Large, widely spaced uppercase section titles on black ("SELECTED PROJECTS",
   "EXPLORE OUR WIDE RANGE OF EXPERTISE") (Figma) */
.display-title {
	margin-bottom: clamp(var(--space-lg), 4vw, 3.5rem);
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 0.9rem + 2vw, 2.25rem); /* 22px → 36px */
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance; /* even line lengths when the title wraps */
	color: var(--color-off-white);
}

/* Phones: ignore the line breaks typed in the Customizer and wrap naturally */
@media (max-width: 599px) {
	.display-title br {
		display: none;
	}
}

@media (min-width: 768px) {
	.display-title {
		letter-spacing: 0.25em;
	}
}

/* ---- Selected Projects slider (template-parts/projects-slider.php) (Figma) ----
   Black section. One large centred slide, the previous/next slides smaller
   and cut off by the screen edges, round arrow buttons over the side slides,
   and the active project's number + name + description underneath.
   The slide states (.is-active / .is-prev / .is-next / .is-hidden) are set
   by PHP for the first paint and then by main.js. */
.projects-slider {
	--slide-w:     min(80vw, 520px);  /* active slide width (phones) */
	--slide-gap:   0.75rem;           /* gap between the active and side slides */
	--side-scale:  0.85;              /* side slides are 85% of the active size */
	--slide-ratio: 1.5;               /* 3:2 images */

	position: relative;
	overflow: hidden; /* clips the side slides at the screen edges */
	padding-block: var(--section-padding);
	background:
		radial-gradient(60% 50% at 85% 100%, rgba(255, 255, 0, 0.07), transparent 70%),
		var(--color-black);
	color: var(--color-text-on-dark);
}

@media (min-width: 768px) {
	.projects-slider {
		--slide-w:   min(62vw, 640px);
		--slide-gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.projects-slider {
		--slide-w:   min(50vw, 760px); /* Figma: half the screen width */
		--slide-gap: 1.5rem;
	}
}

.projects-slider__title {
	scroll-margin-top: calc(var(--header-height) + var(--space-lg)); /* not hidden under the sticky header */
}

/* Stage: as tall as the active slide; slides are layered inside it */
.projects-slider__stage {
	position: relative;
	height: calc(var(--slide-w) / var(--slide-ratio));
	touch-action: pan-y; /* horizontal swipes go to the slider, vertical scroll still works */
}

.projects-slider__slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--slide-w);
	margin-left: calc(var(--slide-w) / -2);
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 600ms ease,
		visibility 600ms;
}

/* Side offset: half the active slide + gap + half the scaled side slide */
.projects-slider__slide.is-active {
	z-index: 2;
	transform: none;
}

.projects-slider__slide.is-prev {
	z-index: 1;
	transform: translateX(calc(-50% - var(--side-scale) * 50% - var(--slide-gap))) scale(var(--side-scale));
	cursor: pointer;
}

.projects-slider__slide.is-next {
	z-index: 1;
	transform: translateX(calc(50% + var(--side-scale) * 50% + var(--slide-gap))) scale(var(--side-scale));
	cursor: pointer;
}

.projects-slider__slide.is-hidden {
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.7);
}

.projects-slider__media {
	display: block;
	height: 100%;
}

.projects-slider__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Subtle zoom on the active image when hovered */
@media (hover: hover) {
	.projects-slider__slide.is-active .projects-slider__img {
		transition: transform 600ms ease;
	}

	.projects-slider__slide.is-active:hover .projects-slider__img {
		transform: scale(1.03);
	}
}

/* Round arrow buttons over the side slides */
.projects-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--color-white);
	transform: translateY(-50%);
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.projects-slider__arrow:hover {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-black);
}

.projects-slider__arrow svg {
	width: 45%;
	height: 45%;
}

.projects-slider__arrow--prev { left: clamp(0.5rem, 3vw, 2.75rem); }
.projects-slider__arrow--next { right: clamp(0.5rem, 3vw, 2.75rem); }

@media (min-width: 1024px) {
	.projects-slider__arrow {
		width: 3.75rem;
		height: 3.75rem;
	}
}

/* Captions: all stacked in one grid cell so the height never jumps */
.projects-slider__captions {
	display: grid;
	width: var(--slide-w);
	margin: clamp(var(--space-md), 2vw, var(--space-lg)) auto 0;
}

.projects-slider__caption {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 400ms ease, transform 400ms ease, visibility 400ms;
}

.projects-slider__caption.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 150ms; /* fades in just after the slide moves */
}

.projects-slider__name {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
	font-weight: var(--fw-bold);
	letter-spacing: 0;
	color: var(--color-white);
}

.projects-slider__number {
	margin-right: 0.35em;
	color: var(--color-accent);
}

.projects-slider__name a {
	color: inherit;
	text-decoration: none;
}

.projects-slider__name a {
	transition: color var(--transition);
}

/* Brand yellow on hover (overrides the global dark a:hover colour) */
.projects-slider__name a:hover,
.projects-slider__name a:focus-visible {
	color: var(--color-accent);
}

.projects-slider__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4; /* long excerpts are cut to 4 lines */
	overflow: hidden;
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-medium);
	line-height: 1.75;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-on-dark-muted);
}

/* Justified like the design, but only where lines are long enough to avoid big gaps */
@media (min-width: 768px) {
	.projects-slider__text {
		text-align: justify;
	}
}

.projects-slider__empty {
	padding: var(--space-lg);
	border: 1px dashed rgba(255, 255, 255, 0.3);
	text-align: center;
}

/* ---- Director's message (template-parts/founder-message.php) (Figma) ----
   Quote card on the left, circular portrait on the right overlapping it.
   The card's right edge curves around the portrait: a circle slightly
   larger than the portrait is masked out of the card. All geometry is
   derived from --d (the portrait diameter), so it scales as one piece.
   Phones: portrait on top, plain rounded card below. */
.founder {
	--d:        min(80vw, 22rem);                /* portrait diameter (phones, tablets) */
	--ring:     calc(var(--d) * 0.026);          /* olive ring thickness */
	--card-pad: clamp(1.5rem, 4vw, 3.5rem);      /* inner padding of the card */
	--radius-card: 1.75rem;

	padding-block: var(--section-padding);
	background:
		radial-gradient(45% 60% at 100% 65%, rgba(255, 255, 0, 0.09), transparent 70%),
		var(--color-black);
	color: var(--color-white);
}

.founder__layout {
	display: flex;
	flex-direction: column-reverse; /* phones: portrait above the card */
	align-items: center;
	gap: var(--space-lg);
}

/* ---- Card: 1px gradient "border" (outer) + dark image panel (inner) ---- */
.founder__card {
	display: flex; /* inner panel stretches to the card's full height */
	width: 100%;
	max-width: 46rem;
	margin: 0;
	padding: 1px;
	border-radius: var(--radius-card);
	background: linear-gradient(200deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.3));
}

.founder__card-inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-lg);
	padding: var(--card-pad);
	border-radius: calc(var(--radius-card) - 1px);
	background-color: var(--color-black);
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)),
		var(--founder-bg, image-set(url("assets/images/founder-bg.webp") type("image/webp"), url("assets/images/founder-bg.jpg") type("image/jpeg")));
	background-size: cover;
	background-position: center;
}

/* Browsers without image-set() type() support get the JPG */
@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
	.founder__card-inner {
		background-image:
			linear-gradient(rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)),
			var(--founder-bg, url("assets/images/founder-bg.jpg"));
	}
}

.founder__quote {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem); /* 15px → 18px */
	font-style: italic;
	font-weight: var(--fw-medium);
	line-height: 1.9;
	color: var(--color-white);
}

/* Big yellow opening quote mark above the text */
.founder__quote::before {
	content: "\201C";
	display: block;
	height: 0.5em;
	margin-bottom: var(--space-sm);
	font-family: Georgia, "Times New Roman", serif; /* curly quote mark like the design */
	font-size: 3.5em;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	color: var(--color-accent);
}

.founder__author {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

/* Round logo badge next to the name */
.founder__badge {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: clamp(3.5rem, 4.5vw, 4.5rem);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 160, 0.45);
	border-radius: 50%;
	background-color: #1d1d04;
}

.founder__badge img {
	width: 66%;
	height: auto;
}

.founder__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.founder__name {
	font-family: var(--font-display);
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); /* 17px → 22px */
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: 1.3;
	color: var(--color-accent);
}

.founder__role {
	font-family: var(--font-display);
	font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.85);
}

/* ---- Portrait: photo in a circle with a dark olive ring ---- */
.founder__portrait {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: var(--d);
	aspect-ratio: 1;
	min-height: 0; /* stops the tall photo from stretching the circle into an oval */
	border: var(--ring) solid #2d2d00;
	border-radius: 50%;
	background-color: var(--color-black);
	box-shadow:
		0 0 0 1px rgba(255, 255, 170, 0.22),        /* fine light line outside the ring */
		inset 0 0 0 1px rgba(255, 255, 170, 0.3);   /* and inside it */
	animation: founder-ring-pulse 4s ease-in-out infinite alternate;
}

.founder__portrait picture {
	display: block;
	height: 100%;
}

.founder__portrait img {
	width: 100%;
	height: 100%;
	border-radius: 50%; /* the photo is clipped here, so the glow below can spill outside */
	object-fit: cover;
	object-position: 50% 20%; /* keep the face in frame */
}

/* Glowing light that travels around the ring.
   ::after = the sharp light, masked so it only shows on the ring itself.
   ::before = a blurred copy behind the portrait, for the soft outer glow. */
.founder__portrait::before,
.founder__portrait::after {
	content: "";
	position: absolute;
	inset: calc(var(--ring) * -1); /* cover the ring (the border area) */
	border-radius: 50%;
	background: conic-gradient(
		transparent 0deg,
		transparent 200deg,
		rgba(255, 255, 0, 0.15) 260deg,
		rgba(255, 255, 0, 0.95) 340deg,
		#fffff0 352deg,          /* bright head of the light */
		transparent 360deg
	);
	animation: founder-ring-spin 6s linear infinite;
	pointer-events: none;
}

.founder__portrait::after {
	-webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 1px));
	mask-image: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 1px));
}

.founder__portrait::before {
	z-index: -1; /* behind the portrait, so the glow only shows around the outside */
	filter: blur(calc(var(--ring) * 1.5));
	opacity: 0.7;
}

@keyframes founder-ring-spin {
	to {
		transform: rotate(1turn);
	}
}

/* Gentle breathing glow on the whole ring */
@keyframes founder-ring-pulse {
	from {
		box-shadow:
			0 0 0 1px rgba(255, 255, 170, 0.22),
			inset 0 0 0 1px rgba(255, 255, 170, 0.3),
			0 0 calc(var(--ring) * 2) rgba(255, 255, 0, 0.08);
	}
	to {
		box-shadow:
			0 0 0 1px rgba(255, 255, 170, 0.35),
			inset 0 0 0 1px rgba(255, 255, 170, 0.4),
			0 0 calc(var(--ring) * 5) rgba(255, 255, 0, 0.22);
	}
}

/* Visitors who prefer less motion get the ring without the animation */
@media (prefers-reduced-motion: reduce) {
	.founder__portrait,
	.founder__portrait::before,
	.founder__portrait::after {
		animation: none;
	}

	.founder__portrait::before,
	.founder__portrait::after {
		display: none;
	}
}

/* ---- Laptop and up: side by side, card curves around the portrait ---- */
@media (min-width: 1024px) {
	.founder {
		--d:       min(38vw, 34rem);        /* Figma: ~38% of the screen width */
		--overlap: calc(var(--d) * 0.19);   /* how far the card runs under the portrait */
		--cut-x:   calc(var(--d) * 0.31);   /* portrait centre, measured from the card's right edge */
		--cut-r:   calc(var(--d) * 0.53);   /* cut-out radius: portrait radius + a small gap */
	}

	.founder__layout {
		flex-direction: row;
		align-items: center;
		gap: 0;
	}

	.founder__card {
		flex: 1;
		max-width: none;
		min-height: var(--d);
		margin-right: calc(var(--overlap) * -1);
		border-radius: var(--radius-card) 0 0 var(--radius-card);
		-webkit-mask-image: radial-gradient(circle at calc(100% + var(--cut-x)) 50%, transparent var(--cut-r), #000 calc(var(--cut-r) + 1px));
		mask-image: radial-gradient(circle at calc(100% + var(--cut-x)) 50%, transparent var(--cut-r), #000 calc(var(--cut-r) + 1px));
	}

	/* Inner panel is 1px smaller on every side, so its cut-out is 1px larger:
	   the 1px of outer gradient left visible becomes the curved border. */
	.founder__card-inner {
		padding-right: calc(var(--d) * 0.27 + var(--card-pad)); /* keep text clear of the curve */
		border-radius: calc(var(--radius-card) - 1px) 0 0 calc(var(--radius-card) - 1px);
		-webkit-mask-image: radial-gradient(circle at calc(100% + var(--cut-x) + 1px) 50%, transparent calc(var(--cut-r) + 1px), #000 calc(var(--cut-r) + 2px));
		mask-image: radial-gradient(circle at calc(100% + var(--cut-x) + 1px) 50%, transparent calc(var(--cut-r) + 1px), #000 calc(var(--cut-r) + 2px));
	}

	.founder__quote {
		text-align: justify;
	}
}

/* ---- Expertise grid (template-parts/expertise-grid.php) (Figma) ----
   3 × 2 grid of image cards with a label (2 columns on phones/tablets),
   a soft glow at the top and a faint city skyline along the bottom. */
.expertise {
	position: relative;
	overflow: hidden;
	padding-top: var(--section-padding);
	padding-bottom: calc(var(--section-padding) + clamp(3rem, 11vw, 10rem)); /* room for the skyline */
	background:
		radial-gradient(70% 45% at 100% 0%, rgba(255, 255, 0, 0.06), transparent 70%),
		linear-gradient(to bottom, #111 0%, var(--color-black) 35%);
	color: var(--color-white);
}

/* Faint skyline along the bottom */
.expertise::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: clamp(5rem, 15vw, 14rem);
	background: url("assets/images/skyline.png") center bottom / auto 100% repeat-x;
	background-image: image-set(url("assets/images/skyline.webp") type("image/webp"), url("assets/images/skyline.png") type("image/png"));
	opacity: 0.05;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
	mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

.expertise .container {
	position: relative;
	z-index: 1; /* above the skyline */
}

.expertise__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(0.75rem, 2vw, 1.75rem);
}

@media (min-width: 768px) {
	.expertise__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.expertise-card {
	position: relative;
	display: block;
	aspect-ratio: 5 / 4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: #1a1a1a;
	color: var(--color-white);
	text-decoration: none;
	isolation: isolate;
}

.expertise-card picture {
	display: contents;
}

.expertise-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms ease;
}

/* Darkens the bottom so the label is always readable */
.expertise-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.7));
}

.expertise-card__label {
	position: absolute;
	right: 0.75rem;
	bottom: clamp(0.625rem, 1.5vw, 1rem);
	left: clamp(0.75rem, 1.5vw, 1.125rem);
	z-index: 1;
	font-family: var(--font-display);
	font-size: clamp(0.75rem, 0.65rem + 0.45vw, 1.0625rem); /* 12px → 17px */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Yellow underline that grows in on hover/focus */
.expertise-card__label::after {
	content: "";
	display: block;
	width: 1.5rem;
	height: 2px;
	margin-top: 0.4rem;
	background-color: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition);
}

/* Label turns brand yellow on hover/focus (overrides the global a:hover colour) */
.expertise-card:hover,
.expertise-card:focus-visible {
	color: var(--color-accent);
}

.expertise-card:hover .expertise-card__img,
.expertise-card:focus-visible .expertise-card__img {
	transform: scale(1.06);
}

.expertise-card:hover .expertise-card__label::after,
.expertise-card:focus-visible .expertise-card__label::after {
	transform: scaleX(1);
}

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

/* ---- Design brief banner (template-parts/brief-banner.php) (Figma) ----
   Full-width darkened photo (light on the left, almost black on the right).
   Top left: italic tagline + yellow rule + intro. Right: centred headline
   with a yellow handwritten word and a yellow dot on the "i", then a large
   yellow button. Phones: stacked and centred over a darker photo. */
.brief-banner {
	position: relative;
	isolation: isolate; /* keeps the photo and overlay behind the text */
	display: flex;
	overflow: hidden;
	background-color: var(--color-black);
	color: var(--color-white);
}

.brief-banner picture {
	display: contents;
}

.brief-banner__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 55%;
}

/* Darkening: strong overall on phones, so text is readable anywhere */
.brief-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.62);
}

.brief-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xl);
	width: 100%;
	padding: var(--space-2xl) var(--container-gutter);
	text-align: center;
}

/* ---- Left: tagline, yellow rule, intro ---- */
.brief-banner__tagline {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--font-display);
	font-size: clamp(0.6875rem, 0.64rem + 0.12vw, 0.75rem); /* 11px → 12px */
	font-style: italic;
	font-weight: var(--fw-medium);
	line-height: 1.75;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.brief-banner__tag--2 {
	color: var(--color-accent);
}

.brief-banner__tag--3 {
	font-weight: var(--fw-bold);
}

/* Yellow rule under the tagline */
.brief-banner__tagline::after {
	content: "";
	display: block;
	width: clamp(8rem, 12.5vw, 11.25rem);
	height: 2px;
	margin-top: 0.75rem;
	background-color: var(--color-accent);
}

.brief-banner__intro {
	max-width: 17rem;
	margin: var(--space-sm) auto 0;
	font-family: var(--font-display);
	font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); /* 15px → 17px */
	font-style: italic;
	font-weight: var(--fw-medium);
	line-height: 1.65;
}

/* ---- Right: headline + button ---- */
.brief-banner__main {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	max-width: 100%;
}

.brief-banner__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.1rem + 3.4vw, 3.75rem); /* 32px → 60px */
	font-weight: var(--fw-medium);
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: var(--color-white);
}

/* Handwritten yellow word ("Space") */
.brief-banner__script {
	margin-left: 0.1em;
	font-family: var(--font-script);
	font-size: 1.3em;
	font-weight: var(--fw-regular);
	line-height: 0.8;
	letter-spacing: 0;
	color: var(--color-accent);
}

/* Yellow dot painted over the dot of the first "i" */
.brief-banner__i {
	position: relative;
}

.brief-banner__i::after {
	content: "";
	position: absolute;
	top: 0.13em;
	left: 50%;
	width: 0.2em;
	height: 0.2em;
	border-radius: 50%;
	background-color: var(--color-accent);
	transform: translateX(-50%);
}

.brief-banner__button {
	margin-top: clamp(var(--space-md), 2.5vw, 2.25rem);
	font-family: var(--font-display);
	font-weight: 800;
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius);
	font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); /* 15px → 17px */
	letter-spacing: 0.02em;
}

/* ---- Tablet and up: tagline top-left, headline + button centred on the right ---- */
@media (min-width: 768px) {
	/* Figma framing: photo zoomed ~15% and anchored right/bottom, so the mug
	   sits near the left edge and the window is left of centre */
	.brief-banner__bg {
		right: 0;
		left: auto;
		width: 115%;
		object-position: 50% 95%;
	}

	/* Photo stays visible on the left, fades to near-black on the right (as in the design) */
	.brief-banner::before {
		background:
			linear-gradient(90deg,
				rgba(0, 0, 0, 0.35) 0%,
				rgba(0, 0, 0, 0.2) 30%,
				rgba(0, 0, 0, 0.7) 58%,
				rgba(0, 0, 0, 0.88) 100%);
	}

	.brief-banner__inner {
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
		gap: var(--space-lg);
		min-height: clamp(24rem, 30.6vw, 36rem); /* Figma: ~3.3 : 1 banner */
		padding: clamp(2rem, 3vw, 2.75rem) clamp(1.5rem, 3.7vw, 3.5rem);
		text-align: left;
	}

	.brief-banner__aside {
		align-self: flex-start;
	}

	.brief-banner__tagline {
		align-items: flex-start;
	}

	.brief-banner__intro {
		margin-inline: 0;
	}

	.brief-banner__main {
		align-self: center;
		text-align: center;
	}

	.brief-banner__button {
		padding: 1.5rem 2rem; /* Figma: large button, as wide as the headline */
	}
}

/* ---- "From ideas to resolution" showcase (template-parts/showcase.php) (Figma) ----
   Row 1: feature card (text panel left over the darkened aerial, clear
   aerial right with a big rounded top-right corner). Row 2: two photos.
   Row 3: circle card + wide photo. Phones: feature card stacks (photo on
   top, text below), rows 2 stays two columns, row 3 stacks. */
.showcase {
	--gap: clamp(0.75rem, 1.8vw, 1.75rem);
	--tile-radius: var(--radius-lg);

	position: relative;
	isolation: isolate;
	padding-block: var(--section-padding);
	background-color: var(--color-black);
	color: var(--color-white);
}

/* Upside-down city skyline hanging from the top edge (Figma): the buildings
   start at the section's top edge (ground line) and fade out downwards.
   Image: assets/images/skyline-top.{webp,png}, the skyline flipped, without its reflection. */
.showcase::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	height: clamp(3rem, 9vw, 8rem); /* Figma: ~9% of the width */
	background: url("assets/images/skyline-top.png") center top / 100% auto no-repeat;
	background-image: image-set(url("assets/images/skyline-top.webp") type("image/webp"), url("assets/images/skyline-top.png") type("image/png"));
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent);
	mask-image: linear-gradient(to bottom, #000 10%, transparent);
	pointer-events: none;
}

/* Phones: show the skyline a bit larger so the buildings are still recognisable */
@media (max-width: 599px) {
	.showcase::before {
		background-size: 160% auto;
	}
}

/* Left-aligned variant of the big spaced section title */
.display-title--left {
	text-align: left;
}

.showcase__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* never wider than the screen */
	gap: var(--gap);
}

.showcase__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
}

.showcase__row--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.showcase-tile {
	position: relative;
	margin: 0;
	border-radius: var(--tile-radius);
	overflow: hidden;
	background-color: #151515;
}

.showcase-tile picture,
.showcase-feature picture {
	display: contents;
}

.showcase-tile__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	transition: transform 600ms ease;
}

@media (hover: hover) {
	.showcase-tile:hover .showcase-tile__img {
		transform: scale(1.04);
	}
}

/* ---- Row 1: feature card ---- */
.showcase-feature {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	border-radius: var(--tile-radius) clamp(3rem, 12vw, 9rem) var(--tile-radius) var(--tile-radius);
	overflow: hidden;
	background-color: #0b0b0b;
}

/* Phones: the aerial photo sits on top as its own block */
.showcase-feature__bg {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 70% center;
}

.showcase-feature__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: clamp(1.5rem, 3.5vw, 3.5rem) clamp(1.25rem, 3.5vw, 3.5rem);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-top: 0;
	border-radius: 0 0 var(--tile-radius) var(--tile-radius);
	background: rgba(0, 0, 0, 0.82);
}

.showcase-feature__eyebrow {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: var(--fw-medium);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.showcase-feature__name {
	font-family: var(--font-script);
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); /* 36px → 56px */
	font-weight: var(--fw-regular);
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--color-accent);
}

.showcase-feature__name a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--transition);
}

/* Name is already yellow: stay yellow on hover (overrides the global dark a:hover) */
.showcase-feature__name a:hover,
.showcase-feature__name a:focus-visible {
	color: var(--color-accent);
	opacity: 0.85;
}

.showcase-feature__text {
	font-family: var(--font-display);
	font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem); /* 14px → 16px */
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.9);
}

/* Thin line, then the location in bold caps */
.showcase-feature__location {
	margin-top: var(--space-xs);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---- Row 3: circle card (Figma) ----
   The aerial photo's bottom-left corner is a large curve that follows the
   ring, so a strip of the photo wraps around it. The ring is thick black
   with a glowing yellow inner edge around the photo. */
.showcase-circle {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 11;
	overflow: visible;           /* the curve is cut on the photo itself */
	background-color: transparent;
}

.showcase-circle__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 85% 70%;
	/* small corners + a big bottom-left curve (horizontal % of width / vertical % of height) */
	border-radius: var(--tile-radius) var(--tile-radius) var(--tile-radius) 36.5% / var(--tile-radius) var(--tile-radius) var(--tile-radius) 45%;
}

.showcase-circle__ring {
	position: relative;
	display: block;
	height: 87%;
	aspect-ratio: 1;
	border: clamp(1rem, 2.4vw, 2.25rem) solid var(--color-black);
	border-radius: 50%;
	background-color: var(--color-black);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); /* faint outer edge */
}

.showcase-circle__img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* Glowing yellow line where the photo meets the ring */
.showcase-circle__ring::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow:
		inset 0 0 0 2px rgba(230, 255, 60, 0.85),
		inset 0 0 10px rgba(255, 255, 0, 0.35),
		0 0 0 1px rgba(255, 255, 0, 0.5),
		0 0 14px 2px rgba(255, 255, 0, 0.35);
	pointer-events: none;
}

/* ---- Tablet and up: the design's layout ---- */
@media (min-width: 768px) {
	/* Feature card: text panel over the left half of a full-bleed aerial */
	.showcase-feature {
		display: grid;
		grid-template-columns: 1fr 1fr;
		aspect-ratio: 2.2 / 1;
	}

	.showcase-feature__bg {
		position: absolute;
		inset: 0;
		z-index: -1;
		height: 100%;
		aspect-ratio: auto;
		object-position: 80% center;
	}

	.showcase-feature__panel {
		grid-column: 1;
		grid-row: 1;
		justify-content: center;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: var(--tile-radius);
		background: rgba(0, 0, 0, 0.8);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}

	/* Row 3: narrow circle card + wide photo, same height */
	.showcase__row--3 {
		grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
	}

	.showcase-circle {
		aspect-ratio: auto;
	}

	.showcase__row--3 .showcase-tile__img {
		aspect-ratio: 17 / 10;
	}

	.showcase-circle__ring {
		justify-self: start;
		margin-left: 6%; /* Figma: ring sits left of centre, inside the curve */
	}
}

/* Phones: the bottom-right photo would stand alone, so it is hidden */
@media (max-width: 767px) {
	.showcase-tile--wide {
		display: none;
	}
}

/* Justified like the design, only where lines are long enough to avoid gaps */
@media (min-width: 1100px) {
	.showcase-feature__text {
		text-align: justify;
	}
}

/* Long descriptions: keep the panel from overflowing on small laptops */
@media (min-width: 768px) and (max-width: 1099px) {
	.showcase-feature {
		aspect-ratio: auto;
		min-height: 24rem;
	}

	.showcase-feature__eyebrow,
	.showcase-feature__text {
		font-size: 0.8125rem;
	}
}

/* ---- Design brief multi-step form (template-parts/design-brief.php) (Figma) ----
   Darkened B&W building photo. Left: step counter + progress bar, intro,
   three info chips, tagline at the bottom. Right: frosted dark panel with
   the current step (step 1 = 3 × 2 project-type cards), BACK / dots / NEXT
   and a small lock note. Phones: intro on top, panel below, 2-column cards. */
.design-brief {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--section-padding);
	background-color: var(--color-black);
	color: var(--color-white);
	scroll-margin-top: var(--header-height); /* /#design-brief lands below the sticky header */
}

.design-brief picture {
	display: contents;
}

.design-brief__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.design-brief::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75) 70%, var(--color-black)),
		rgba(0, 0, 0, 0.55);
}

.design-brief__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
}

/* ---- Left column ---- */
.design-brief__intro {
	display: flex;
	flex-direction: column;
}

.design-brief__progress {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	max-width: 18rem;
}

.design-brief__count {
	flex-shrink: 0;
	font-family: var(--font-display);
	font-size: 1rem;
}

.design-brief__count-current {
	font-weight: var(--fw-bold);
	color: var(--color-accent);
}

.design-brief__bar {
	position: relative;
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.35);
	overflow: hidden;
}

.design-brief__bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 2px;
	background-color: var(--color-accent);
	transition: width 400ms ease;
}

.design-brief__kicker {
	margin-top: var(--space-lg);
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
	font-weight: var(--fw-semibold);
}

.design-brief__title {
	margin-top: var(--space-sm);
	font-family: var(--font-brief-title);
	font-size: clamp(2rem, 1.4rem + 2.2vw, 2.875rem); /* 32px → 46px */
	font-weight: var(--fw-semibold);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--color-accent);
}

.design-brief__text {
	max-width: 30rem;
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
}

.design-brief__text p + p {
	margin-top: var(--space-sm);
}

.design-brief__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-lg);
}

.design-brief__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-lg);
	background-color: rgba(0, 0, 0, 0.45);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.85);
}

.design-brief__chip svg,
.brief-note svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.design-brief__tagline {
	display: none; /* phones: hidden to keep the form close to the intro */
}

/* ---- Right column: panel ---- */
.design-brief__panel {
	padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 3vw, 2.25rem);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 1.25rem;
	background-color: rgba(40, 44, 46, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.brief-step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.brief-step[hidden] {
	display: none;
}

.brief-step__title {
	display: block;
	width: 100%;
	padding: 0;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 0.9rem + 1vw, 1.5rem);
	font-weight: var(--fw-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-white);
}

.brief-step__hint {
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.65);
}

/* Project-type cards */
.brief-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.625rem, 1.4vw, 1rem);
	margin-top: clamp(var(--space-md), 3vw, 2rem);
}

@media (min-width: 600px) {
	.brief-options {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.brief-option {
	position: relative;
	display: block;
	aspect-ratio: 8 / 7;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius-lg);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--transition), box-shadow var(--transition);
}

/* The real radio button stays in place (for keyboards/screen readers) but invisible */
.brief-option__input {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.brief-option__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(0.85);
	transition: filter 400ms ease, transform 600ms ease;
}

.brief-option::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.75));
}

.brief-option__label {
	position: absolute;
	right: 0.5rem;
	bottom: 0.6rem;
	left: 0.75rem;
	z-index: 1;
	font-family: var(--font-display);
	font-size: clamp(0.6875rem, 0.62rem + 0.2vw, 0.8125rem);
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-white);
	transition: color var(--transition);
}

/* Hover: a hint of colour */
.brief-option:hover .brief-option__img {
	filter: grayscale(0.4);
	transform: scale(1.04);
}

/* Selected: full colour, yellow border and label */
.brief-option:has(.brief-option__input:checked) {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent), 0 0 18px rgba(255, 255, 0, 0.18);
}

.brief-option:has(.brief-option__input:checked) .brief-option__img {
	filter: none;
}

.brief-option:has(.brief-option__input:checked) .brief-option__label {
	color: var(--color-accent);
}

.brief-option:has(.brief-option__input:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* BACK · dots · NEXT */
.brief-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 2.5vw, 1.5rem);
	margin-top: clamp(var(--space-lg), 3.5vw, 2.25rem);
}

.brief-nav__btn {
	min-width: clamp(6.5rem, 14vw, 6.75rem);
	padding: 0.9rem 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--radius-lg);
	background-color: rgba(0, 0, 0, 0.35);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-white);
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}

.brief-nav__btn:hover:not(:disabled) {
	border-color: var(--color-white);
	background-color: rgba(255, 255, 255, 0.1);
}

.brief-nav__btn--next {
	border-color: rgba(255, 255, 0, 0.5);
	background-color: #4a4a10; /* olive, as in the design, until a choice is made */
}

.brief-nav__btn--next:not(:disabled) {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-black);
}

.brief-nav__btn--next:hover:not(:disabled) {
	border-color: var(--color-accent-hover);
	background-color: var(--color-accent-hover);
}

.brief-nav__btn:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.brief-nav__dots {
	display: flex;
	gap: 0.35rem;
}

.brief-nav__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	transition: background-color var(--transition), transform var(--transition);
}

.brief-nav__dot.is-active {
	background-color: var(--color-accent);
	transform: scale(1.3);
}

.brief-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-size: 0.75rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.45);
}

.brief-note svg {
	flex-shrink: 0;
	width: 0.9rem;
	height: 0.9rem;
}

/* ---- Laptop and up: two columns, as in the design ---- */
@media (min-width: 1024px) {
	.design-brief__layout {
		grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
		gap: clamp(3rem, 6vw, 5rem);
		align-items: stretch;
	}

	.design-brief__intro {
		padding-top: var(--space-lg);
	}

	.design-brief__text {
		text-align: justify;
	}

	.design-brief__tagline {
		display: flex;
		align-items: flex-start;
		margin-top: auto; /* pushed to the bottom of the column */
		padding-top: var(--space-xl);
	}
}

/* ---- Stats band (template-parts/stats.php) (Figma) ----
   Darkened strip of the curved-facade photo, four yellow serif numbers with
   small white caps labels, yellow tagline below. 2 × 2 on phones. */
.stats {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 4.5vw, 3.75rem);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background-color: var(--color-black);
	color: var(--color-white);
}

.stats picture {
	display: contents;
}

.stats__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* Darkening: strong overall, extra dark at the edges (as in the design) */
.stats::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.75)),
		linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent 25%, transparent 75%, rgba(0, 0, 0, 0.5)),
		rgba(0, 0, 0, 0.35);
}

.stats__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-xl) var(--space-md);
	margin: 0;
}

@media (min-width: 768px) {
	.stats__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-left: clamp(0rem, 4.5vw, 4rem); /* Figma: numbers start a little in from the edge */
	}
}

.stats__item {
	display: flex;
	flex-direction: column;
}

/* Number shown above its label (the label stays first in the HTML as the <dt>) */
.stats__value {
	order: -1;
}

.stats__value {
	margin: 0;
	font-family: "Times New Roman", Times, Georgia, serif;
	font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem); /* 44px → 72px */
	font-weight: var(--fw-regular);
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums; /* digits keep their width while counting */
	color: var(--color-accent);
}

.stats__label {
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: clamp(0.6875rem, 0.64rem + 0.2vw, 0.8125rem); /* 11px → 13px */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-white);
}

.stats__tagline {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 0.9rem;
	margin-top: clamp(var(--space-xl), 5vw, 3.5rem);
	font-family: var(--font-display);
	font-size: clamp(0.75rem, 0.68rem + 0.3vw, 0.9375rem); /* 12px → 15px */
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-accent);
}

/* Phones/small tablets: centred 2 × 2 grid with thin dividers between the cells */
@media (max-width: 767px) {
	.stats__list {
		gap: 0;
	}

	.stats__item {
		align-items: center;
		padding: var(--space-lg) var(--space-2xs);
		text-align: center;
	}

	.stats__item:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}

	.stats__item:nth-child(-n + 2) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	.stats__label {
		min-height: 2.6em; /* labels of one or two lines take the same space */
		max-width: 11rem;
	}
}

/* Phones: one part per line, no separators */
@media (max-width: 599px) {
	.stats__tagline {
		flex-direction: column;
	}

	.stats__sep {
		display: none;
	}
}

/* ---- Service pages (page-services.php + template-parts/service-hero.php) (Figma) ----
   Black page. Wide photo slider: the centre photo is ~92% of the screen
   width, the neighbouring photos peek in at the edges, round arrows sit on
   the edges, the handwritten title is over the photo (bottom-left), and an
   uppercase intro follows underneath. Phones: taller photo crop, smaller
   title and arrows. */
body.page-template-page-services {
	background-color: var(--color-black);
	color: var(--color-white);
}

body.page-template-page-services .entry-content h1,
body.page-template-page-services .entry-content h2,
body.page-template-page-services .entry-content h3,
body.page-template-page-services .entry-content h4 {
	color: var(--color-white);
}

.service-hero {
	--slide-w:   92vw;            /* centre photo width */
	--slide-gap: 0.75rem;         /* gap to the neighbouring photos */
	--slide-ratio: 1.25;          /* phones: 5:4 crop (taller) */

	padding-top: clamp(0.75rem, 1.5vw, 1.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
	overflow: hidden;             /* clips the neighbours at the screen edges */
	background-color: var(--color-black);
}

@media (min-width: 768px) {
	.service-hero {
		--slide-ratio: 1.75;
		--slide-gap: 1rem;
	}
}

@media (min-width: 1024px) {
	.service-hero {
		--slide-w: min(92vw, 1320px);
		--slide-ratio: 2;          /* Figma: 2:1 */
		--slide-gap: 1.25rem;
	}
}

.service-hero__stage {
	position: relative;
	height: calc(var(--slide-w) / var(--slide-ratio));
	touch-action: pan-y;
}

.service-hero__slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--slide-w);
	height: 100%;
	margin-left: calc(var(--slide-w) / -2);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: #151515;
	transition:
		transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 700ms ease,
		visibility 700ms;
}

.service-hero__slide picture {
	display: contents;
}

.service-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Darker bottom for the title, and dimmed neighbours */
.service-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.65));
	transition: background-color 700ms ease;
}

.service-hero__slide.is-active {
	z-index: 2;
	transform: none;
}

.service-hero__slide.is-prev {
	z-index: 1;
	transform: translateX(calc(-100% - var(--slide-gap)));
	cursor: pointer;
}

.service-hero__slide.is-next {
	z-index: 1;
	transform: translateX(calc(100% + var(--slide-gap)));
	cursor: pointer;
}

.service-hero__slide.is-prev::after,
.service-hero__slide.is-next::after {
	background-color: rgba(0, 0, 0, 0.35);
}

.service-hero__slide.is-hidden {
	z-index: 0;
	opacity: 0;
	visibility: hidden;
}

/* Handwritten titles over the centre photo: all stacked in one spot,
   the active one fades/rises in as the photo changes */
.service-hero__titles {
	position: absolute;
	bottom: clamp(0.75rem, 3vw, 2.25rem);
	left: calc(50% - var(--slide-w) / 2 + clamp(1.25rem, 4vw, 3.5rem));
	right: calc(50% - var(--slide-w) / 2 + 1rem);
	z-index: 3;
	display: grid;
	pointer-events: none; /* clicks pass through to the photo/arrows */
}

.service-hero__title {
	grid-area: 1 / 1;
	align-self: end;
	opacity: 0;
	transform: translateY(0.6rem);
	transition: opacity 600ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
	font-family: var(--font-script);
	font-size: clamp(2rem, 1.1rem + 4vw, 4.5rem); /* 32px → 72px */
	font-weight: var(--fw-regular);
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--color-white);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.service-hero__title.is-active {
	opacity: 1;
	transform: none;
	transition-delay: 250ms; /* appears just after the photo moves */
}

.service-hero__accent {
	color: var(--color-accent);
}

/* Round arrows on the edges of the centre photo */
.service-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--color-white);
	transform: translateY(-50%);
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.service-hero__arrow:hover {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-black);
}

.service-hero__arrow svg {
	width: 45%;
	height: 45%;
}

.service-hero__arrow--prev { left: max(0.25rem, calc(50% - var(--slide-w) / 2 - 1.25rem)); }
.service-hero__arrow--next { right: max(0.25rem, calc(50% - var(--slide-w) / 2 - 1.25rem)); }

@media (min-width: 1024px) {
	.service-hero__arrow {
		width: 3.5rem;
		height: 3.5rem;
	}

	.service-hero__arrow--prev { left: max(0.5rem, calc(50% - var(--slide-w) / 2 - 1.75rem)); }
	.service-hero__arrow--next { right: max(0.5rem, calc(50% - var(--slide-w) / 2 - 1.75rem)); }
}

/* Uppercase intro under the slider, aligned with the photo's text inset */
.service-hero__intro-wrap {
	width: var(--slide-w);
	margin: 0 auto;
	padding: clamp(1.25rem, 2.5vw, 2rem) clamp(0.25rem, 3vw, 2.25rem) 0;
}

.service-hero__intro {
	max-width: 62rem;
	font-family: var(--font-display);
	font-size: clamp(0.75rem, 0.68rem + 0.3vw, 0.9375rem); /* 12px → 15px */
	font-weight: var(--fw-medium);
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

.service-hero__intro-accent {
	color: var(--color-accent);
}

.service-content {
	color: rgba(255, 255, 255, 0.85);
}

/* ---- Service page project grid (template-parts/service-projects.php) (Figma) ----
   Dark cards: photo on top (inset, rounded), project name in small grey
   caps and a round arrow. 2 columns on phones, 3 tablets, 4 desktop.
   Faint skyline along the bottom of the section. */
.service-projects {
	position: relative;
	overflow: hidden;
	padding-top: clamp(1rem, 3vw, 2.5rem);
	padding-bottom: clamp(5rem, 13vw, 12rem); /* room for the skyline */
	background-color: var(--color-black);
	color: var(--color-white);
}

/* Faint skyline standing on the section's bottom edge (same artwork as the
   homepage expertise section). The image's lower ~32% is a faded reflection;
   it's pushed below the edge (background-size 147%) so the buildings' ground
   line sits right on the banner below, with no black gap. */
.service-projects::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: clamp(5rem, 15vw, 14rem);
	background: url("assets/images/skyline.png") center top / auto 147% repeat-x;
	background-image: image-set(url("assets/images/skyline.webp") type("image/webp"), url("assets/images/skyline.png") type("image/png"));
	opacity: 0.06;
	pointer-events: none;
}

.service-projects .container {
	position: relative;
	z-index: 1;
}

.service-projects__title {
	font-size: clamp(1rem, 0.75rem + 1.3vw, 1.75rem);
}

.service-projects__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.8vw, 1.5rem);
}

@media (min-width: 600px) {
	.service-projects__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.service-projects__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0.3rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-lg);
	background: linear-gradient(to bottom, #161616, #0c0c0c);
	transition: border-color var(--transition), transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 400ms ease;
}

.sp-card__media {
	aspect-ratio: 16 / 10;
	border-radius: calc(var(--radius-lg) - 2px);
	overflow: hidden;
	background-color: #1c1c1c;
}

.sp-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sp-card__body {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.5rem;
	padding: clamp(0.6rem, 1.4vw, 0.9rem) clamp(0.4rem, 1vw, 0.6rem) clamp(0.5rem, 1.2vw, 0.75rem);
}

.sp-card__title {
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: var(--font-display);
	font-size: clamp(0.625rem, 0.58rem + 0.2vw, 0.75rem); /* 10px → 12px */
	font-weight: var(--fw-medium);
	line-height: 1.45;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.sp-card__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

/* Whole card is clickable */
.sp-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sp-card__arrow {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
	aspect-ratio: 1;
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--color-white);
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.sp-card__arrow svg {
	width: 60%;
	height: 60%;
}

/* Hover / keyboard focus: lift, yellow edge, photo zoom, yellow arrow */
.sp-card:hover,
.sp-card:focus-within {
	border-color: rgba(255, 255, 0, 0.55);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
	transform: translateY(-3px);
}

.sp-card:hover .sp-card__img,
.sp-card:focus-within .sp-card__img {
	transform: scale(1.06);
}

.sp-card:hover .sp-card__title,
.sp-card:focus-within .sp-card__title,
.sp-card:hover .sp-card__link,
.sp-card:focus-within .sp-card__link {
	color: var(--color-accent); /* brand yellow, overrides the global dark a:hover */
}

.sp-card:hover .sp-card__arrow,
.sp-card:focus-within .sp-card__arrow {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-black);
	transform: translateX(2px);
}

.sp-card__link:focus-visible {
	outline: none;
}

.sp-card:has(.sp-card__link:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* ---- Design brief banner, compact variant (service pages) (Figma) ----
   Same banner as the homepage, but: logo on the left (no tagline/intro),
   plain last word, thin light lines top/bottom. */
.brief-band {
	position: relative;
	isolation: isolate;
	padding-block: 0; /* sits directly between the project grid skyline and the FAQ skyline */
	background-color: var(--color-black);
}

.brief-banner--compact {
	border-block: 1px solid rgba(255, 255, 255, 0.18);
}

.brief-banner--compact .brief-banner__logo {
	width: auto;
	height: clamp(2.75rem, 4vw, 3.75rem);
	margin-inline: auto;
}

/* "Space" in the same font as the rest of the headline */
.brief-banner--compact .brief-banner__script {
	margin-left: 0;
	font-family: inherit;
	font-size: 1em;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.brief-banner--compact .brief-banner__title {
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.brief-banner--compact .brief-banner__inner {
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.brief-banner--compact .brief-banner__inner {
		align-items: center;
		min-height: clamp(18rem, 25vw, 24rem);
	}

	.brief-banner--compact .brief-banner__aside {
		align-self: center;
	}

	.brief-banner--compact .brief-banner__logo {
		margin-inline: 0;
	}

	.brief-banner--compact .brief-banner__main {
		text-align: right;
	}

	.brief-banner--compact .brief-banner__button {
		align-self: flex-end;
		padding: 1.25rem 2rem;
	}
}

/* ---- Service page FAQ (template-parts/service-faq.php) (Figma) ----
   Left: yellow label, handwritten title, italic subtitle. Right: accordion.
   Open item: dark card, yellow bar on the left, yellow question and "−".
   Closed items: large light question, "+", thin line underneath.
   Faint skyline hanging from the top of the section. Phones: stacked. */
.service-faq {
	position: relative;
	isolation: isolate;
	padding-top: calc(var(--section-padding) + clamp(2rem, 6vw, 5rem));
	padding-bottom: var(--section-padding);
	background-color: var(--color-black);
	color: var(--color-white);
}

.service-faq::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	height: clamp(3rem, 9vw, 8rem);
	background: url("assets/images/skyline-top.png") center top / 100% auto no-repeat;
	background-image: image-set(url("assets/images/skyline-top.webp") type("image/webp"), url("assets/images/skyline-top.png") type("image/png"));
	opacity: 0.4;
	-webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent);
	mask-image: linear-gradient(to bottom, #000 10%, transparent);
	pointer-events: none;
}

.service-faq__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
}

@media (min-width: 1024px) {
	.service-faq__layout {
		grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
		gap: clamp(3rem, 6vw, 5.5rem);
		align-items: start;
	}
}

.service-faq__label {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.service-faq__title {
	margin-top: var(--space-sm);
	font-family: var(--font-script);
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); /* 36px → 56px */
	font-weight: var(--fw-regular);
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--color-white);
}

.service-faq__subtitle {
	max-width: 22rem;
	margin-top: var(--space-sm);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-style: italic;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
}

/* ---- Accordion ---- */
.faq-item {
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0;
	transition: background-color 400ms ease, border-color 400ms ease;
}

/* Open item: dark card with a yellow bar on the left */
.faq-item.is-open {
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-left: 0;
	border-radius: var(--radius);
	background: linear-gradient(to right, #1d1d1d, #141414);
	margin-bottom: var(--space-2xs);
}

.faq-item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	border-radius: var(--radius) 0 0 var(--radius);
	background-color: var(--color-accent);
	transform: scaleY(0);
	transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-item.is-open::before {
	transform: none;
}

.faq-item__heading {
	margin: 0;
	font-size: inherit;
}

.faq-item__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	width: 100%;
	min-height: 44px;
	padding: clamp(1.1rem, 2vw, 1.4rem) clamp(0.5rem, 1.5vw, 1.25rem);
	text-align: left;
	color: rgba(255, 255, 255, 0.85);
	transition: color var(--transition);
}

.faq-item.is-open .faq-item__button {
	padding-left: clamp(1.25rem, 2vw, 1.5rem);
	padding-bottom: var(--space-xs);
}

.faq-item__question {
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); /* 16px → 22px */
	font-weight: var(--fw-regular);
	line-height: 1.35;
}

.faq-item.is-open .faq-item__question {
	font-weight: var(--fw-medium);
	color: var(--color-accent);
}

/* Brand yellow on hover/focus */
.faq-item__button:hover,
.faq-item__button:focus-visible {
	color: var(--color-accent);
}

.faq-item__button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* + / − icon drawn with two bars; the vertical one folds away when open */
.faq-item__icon {
	position: relative;
	flex-shrink: 0;
	width: 0.75rem;
	height: 0.75rem;
}

.faq-item__icon::before,
.faq-item__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background-color: currentColor;
	transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-item__icon::after {
	transform: rotate(90deg);
}

.faq-item.is-open .faq-item__icon {
	color: var(--color-accent);
}

.faq-item.is-open .faq-item__icon::after {
	transform: rotate(0deg);
}

/* Answer: height animates smoothly (0fr → 1fr) when JS is on */
.js .faq-item__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .faq-item.is-open .faq-item__panel {
	grid-template-rows: 1fr;
}

.faq-item__inner {
	min-height: 0;
	overflow: hidden;
}

.faq-item__answer {
	max-width: 38rem;
	padding: 0 clamp(1.25rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.4rem);
	font-family: var(--font-display);
	font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.65);
	opacity: 0;
	transition: opacity 300ms ease;
}

.faq-item.is-open .faq-item__answer,
.no-js .faq-item__answer {
	opacity: 1;
	transition-delay: 120ms;
}

/* ---- Reveal on scroll (any element with data-reveal; main.js → initReveal) ---- */
@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] {
		opacity: 0;
		transform: translateY(1.5rem);
		transition:
			opacity 700ms ease var(--reveal-delay, 0ms),
			transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
	}

	.js [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   STUDIO PAGE (page-studio.php)
   Black page: hero + collage, featured project, filterable project grid,
   "How we work" steps, design brief banner.
   ========================================================================== */
body.page-template-page-studio {
	background-color: var(--color-black);
	color: var(--color-white);
}

.studio-label {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.studio-accent {
	color: var(--color-accent);
}

.studio-arrow {
	display: inline-block;
	transition: transform var(--transition);
}

/* Outline button on black */
.studio-button-ghost {
	border-color: rgba(255, 255, 255, 0.55);
	background-color: transparent;
	color: var(--color-white);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
}

.studio-button-ghost:hover,
.studio-button-ghost:focus-visible {
	border-color: var(--color-accent);
	background-color: transparent;
	color: var(--color-accent);
}

/* ---- 1. Hero ---- */
.studio-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(50% 60% at 100% 30%, rgba(255, 255, 0, 0.07), transparent 70%),
		var(--color-black);
}

.studio-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	height: clamp(3rem, 9vw, 8rem);
	background: url("assets/images/skyline-top.png") center top / 100% auto no-repeat;
	background-image: image-set(url("assets/images/skyline-top.webp") type("image/webp"), url("assets/images/skyline-top.png") type("image/png"));
	opacity: 0.4;
	-webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent);
	mask-image: linear-gradient(to bottom, #000 10%, transparent);
	pointer-events: none;
}

.studio-hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2xl);
	align-items: center;
}

@media (min-width: 1024px) {
	.studio-hero__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(3rem, 5vw, 5rem);
	}
}

.studio-hero__title {
	margin-top: var(--space-sm);
	font-family: var(--font-script);
	font-size: clamp(2.75rem, 1.8rem + 3.6vw, 5rem); /* 44px → 80px */
	font-weight: var(--fw-regular);
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--color-white);
}

.studio-hero__intro {
	max-width: 32rem;
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72);
}

.studio-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.studio-hero__actions .button {
	padding: 1rem 1.5rem;
}

.studio-hero__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
	max-width: 30rem;
	margin: var(--space-xl) 0 0;
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.studio-stat {
	display: flex;
	flex-direction: column;
}

.studio-stat__value {
	order: -1;
	margin: 0;
	font-family: "Times New Roman", Times, Georgia, serif;
	font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--color-accent);
}

.studio-stat__label {
	margin-top: var(--space-2xs);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

/* Collage: one tall photo + two stacked, each slowly zooming */
.studio-collage {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: clamp(0.5rem, 1.2vw, 1rem);
	aspect-ratio: 5 / 4;
}

.studio-collage__item {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: #151515;
}

.studio-collage__item--1 {
	grid-row: 1 / 3;
	border-top-left-radius: clamp(2.5rem, 8vw, 6rem); /* echoes the homepage's curved corners */
}

.studio-collage__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
	.studio-collage__item img {
		animation: studio-kenburns 18s ease-in-out infinite alternate;
	}

	.studio-collage__item--2 img { animation-delay: -6s; }
	.studio-collage__item--3 img { animation-delay: -12s; }
}

@keyframes studio-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* ---- 2. Featured project ---- */
.studio-featured {
	padding-bottom: var(--section-padding);
}

.studio-featured__card {
	position: relative;
	display: grid;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 1.25rem;
	overflow: hidden;
	background-color: #0d0d0d;
}

.studio-featured__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.studio-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.studio-featured__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.studio-featured__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.studio-featured__badge {
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	background-color: var(--color-accent);
	color: var(--color-black);
}

.studio-featured__title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
	font-weight: var(--fw-semibold);
	line-height: 1.15;
	color: var(--color-white);
}

.studio-featured__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

/* Whole card is clickable */
.studio-featured__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.studio-featured__place {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.studio-featured__excerpt {
	max-width: 34rem;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72);
}

.studio-featured__cta {
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.studio-featured__card:hover .studio-featured__media img,
.studio-featured__card:focus-within .studio-featured__media img {
	transform: scale(1.04);
}

.studio-featured__card:hover .studio-featured__link,
.studio-featured__card:focus-within .studio-featured__link {
	color: var(--color-accent);
}

.studio-featured__card:hover .studio-arrow,
.studio-featured__card:focus-within .studio-arrow {
	transform: translateX(4px);
}

.studio-featured__card:has(.studio-featured__link:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.studio-featured__link:focus-visible {
	outline: none;
}

/* Laptop+: photo left (wide), text panel right */
@media (min-width: 1024px) {
	.studio-featured__card {
		grid-template-columns: 1.6fr 1fr;
	}

	.studio-featured__media {
		aspect-ratio: auto;
		min-height: 30rem;
	}

	.studio-featured__body {
		justify-content: center;
		padding: clamp(2rem, 3.5vw, 3.5rem);
	}
}

/* ---- 3. All projects ---- */
.studio-projects {
	padding-bottom: var(--section-padding);
	scroll-margin-top: var(--header-height);
}

.studio-projects__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-md);
}

.studio-projects__title {
	margin-bottom: 0;
}

.studio-projects__count {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.55);
}

/* Filter bar: sticks under the header while scrolling the grid; on phones
   the chips scroll sideways instead of wrapping onto many lines. */
.studio-filter {
	position: sticky;
	top: var(--header-height);
	z-index: 20;
	margin: var(--space-md) calc(var(--container-gutter) * -1) var(--space-lg);
	padding: 0.75rem var(--container-gutter);
	background: rgba(0, 0, 0, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.admin-bar .studio-filter {
	top: calc(var(--header-height) + 46px);
}

@media (min-width: 783px) {
	.admin-bar .studio-filter {
		top: calc(var(--header-height) + 32px);
	}
}

@media (max-width: 600px) {
	.admin-bar .studio-filter {
		top: var(--header-height);
	}
}

.studio-filter__scroller {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}

.studio-filter__scroller::-webkit-scrollbar {
	display: none;
}

.studio-chip {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px; /* comfortable tap target */
	padding: 0.55rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	scroll-snap-align: start;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.studio-chip__count {
	min-width: 1.4rem;
	padding: 0.1rem 0.35rem;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.12);
	font-size: 0.6875rem;
	text-align: center;
}

.studio-chip:hover,
.studio-chip:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.studio-chip.is-active {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-black);
}

.studio-chip.is-active .studio-chip__count {
	background-color: rgba(0, 0, 0, 0.15);
}

/* Grid: 1 column phones, 2 tablets, 3 desktop; every 7th card is wide */
.studio-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-flow: dense;
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	transition: opacity 220ms ease;
}

.studio-grid.is-filtering {
	opacity: 0;
}

@media (min-width: 600px) {
	.studio-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.studio-card--wide {
		grid-column: span 2;
	}
}

@media (min-width: 1024px) {
	.studio-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.studio-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: #151515;
	isolation: isolate;
}

.studio-card__media {
	height: 100%;
	aspect-ratio: 4 / 3;
}

@media (min-width: 600px) {
	.studio-card--wide .studio-card__media {
		aspect-ratio: 8 / 3;
	}
}

.studio-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Text sits over the photo, on a dark fade */
.studio-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.4rem);
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.82));
}

.studio-card__cat {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.studio-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	font-weight: var(--fw-semibold);
	line-height: 1.25;
	color: var(--color-white);
}

.studio-card--wide .studio-card__title {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
}

.studio-card__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

/* Whole card is clickable */
.studio-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.studio-card__place {
	font-family: var(--font-display);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.65);
}

/* "View project →" slides in on hover (always visible on touch screens) */
.studio-card__cta {
	margin-top: 0.35rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

@media (hover: hover) {
	.studio-card__cta {
		max-height: 0;
		margin-top: 0;
		opacity: 0;
		transform: translateY(0.5rem);
		transition: opacity 350ms ease, transform 350ms ease, max-height 350ms ease, margin-top 350ms ease;
	}

	.studio-card:hover .studio-card__cta,
	.studio-card:focus-within .studio-card__cta {
		max-height: 2rem;
		margin-top: 0.35rem;
		opacity: 1;
		transform: none;
	}
}

.studio-card:hover .studio-card__img,
.studio-card:focus-within .studio-card__img {
	transform: scale(1.06);
}

.studio-card:hover .studio-card__link,
.studio-card:focus-within .studio-card__link {
	color: var(--color-accent);
}

.studio-card:hover .studio-arrow,
.studio-card:focus-within .studio-arrow {
	transform: translateX(4px);
}

.studio-card:has(.studio-card__link:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.studio-card__link:focus-visible {
	outline: none;
}

.studio-projects__empty {
	padding: var(--space-2xl) 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
}

.studio-projects__more {
	margin-top: var(--space-xl);
	text-align: center;
}

.studio-projects__more .button {
	min-width: 14rem;
	padding: 1rem 1.75rem;
}

/* ---- 4. How we work ---- */
.studio-process {
	padding-block: var(--section-padding);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background:
		radial-gradient(45% 60% at 0% 100%, rgba(255, 255, 0, 0.06), transparent 70%),
		#050505;
}

.studio-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
	counter-reset: step;
}

@media (min-width: 600px) {
	.studio-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.studio-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.studio-step {
	position: relative;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-lg);
	background: linear-gradient(to bottom, #141414, #0b0b0b);
	transition: border-color 400ms ease, transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.studio-step:hover {
	border-color: rgba(255, 255, 0, 0.45);
	transform: translateY(-3px);
}

.studio-step__number {
	display: block;
	font-family: "Times New Roman", Times, Georgia, serif;
	font-size: 2.75rem;
	line-height: 1;
	color: var(--color-accent);
}

.studio-step__title {
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: var(--fw-semibold);
	color: var(--color-white);
}

.studio-step__text {
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.65);
}

.studio-process__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-xl);
	text-align: center;
}

.studio-process__cta .button {
	padding: 1.1rem 1.75rem;
}

.studio-process__note {
	font-family: var(--font-display);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   BLOG (home.php, archive.php, search.php, single.php)
   Dark pages. Listing: hero + search, topic chips, featured card, grid.
   Article: progress bar, header, image, readable content + sticky
   "In this article" and share, tags, prev/next, related.
   ========================================================================== */
body.blog,
body.single-post,
body.category,
body.tag,
body.author,
body.date,
body.search {
	background-color: var(--color-black);
	color: var(--color-white);
}

/* ---- Listing hero ---- */
.blog-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
	background: radial-gradient(45% 70% at 100% 0%, rgba(255, 255, 0, 0.07), transparent 70%), var(--color-black);
}

.blog-hero__inner {
	max-width: calc(52rem + var(--container-gutter) * 2);
	margin-left: 0;
}

@media (min-width: 1288px) {
	.blog-hero__inner {
		margin-left: calc((100% - var(--container-max)) / 2 - var(--container-gutter));
	}
}

.blog-hero__title {
	margin-top: var(--space-sm);
	font-family: var(--font-script);
	font-size: clamp(2.75rem, 1.8rem + 3.6vw, 5rem);
	font-weight: var(--fw-regular);
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--color-white);
}

.blog-hero__intro {
	max-width: 36rem;
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72);
}

/* Search */
.blog-search {
	position: relative;
	display: flex;
	max-width: 30rem;
	margin-top: var(--space-lg);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.05);
	transition: border-color var(--transition), background-color var(--transition);
}

.blog-search:focus-within {
	border-color: var(--color-accent);
	background-color: rgba(255, 255, 255, 0.08);
}

.blog-search__icon {
	position: absolute;
	top: 50%;
	left: 1.1rem;
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: rgba(255, 255, 255, 0.6);
	stroke-width: 2;
	stroke-linecap: round;
	transform: translateY(-50%);
	pointer-events: none;
}

.blog-search__input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0.75rem 0.75rem 0.75rem 2.9rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: var(--font-display);
	color: var(--color-white);
}

.blog-search__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.blog-search__input:focus-visible {
	outline: none;
}

.blog-search__button {
	margin: 0.3rem;
	padding: 0 1.25rem;
	border-radius: 999px;
	background-color: var(--color-accent);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-black);
	transition: background-color var(--transition);
}

.blog-search__button:hover {
	background-color: var(--color-accent-hover);
}

/* ---- Listing ---- */
.blog-list {
	padding-bottom: var(--section-padding);
}

.blog-topics {
	margin-top: 0;
}

a.studio-chip {
	text-decoration: none;
}

/* Cards */
.blog-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
}

@media (min-width: 600px) {
	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.blog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.blog-card__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: #151515;
}

.blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.blog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.55rem;
	padding-top: 1.1rem;
}

.blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.blog-card__cat {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.blog-card__badge {
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background-color: var(--color-accent);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-black);
}

.blog-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	color: var(--color-white);
}

.blog-card__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

/* Whole card is clickable */
.blog-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.blog-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.65);
}

.blog-card__info {
	display: flex;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 0.25rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
}

.blog-card__cta {
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* Hover/focus: photo zoom, title yellow */
.blog-card:hover .blog-card__img,
.blog-card:focus-within .blog-card__img {
	transform: scale(1.05);
}

.blog-card:hover .blog-card__link,
.blog-card:focus-within .blog-card__link {
	color: var(--color-accent);
}

.blog-card:hover .studio-arrow,
.blog-card:focus-within .studio-arrow {
	transform: translateX(4px);
}

.blog-card:has(.blog-card__link:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: 6px;
	border-radius: var(--radius-lg);
}

.blog-card__link:focus-visible {
	outline: none;
}

/* Featured (latest) card: big, photo + text side by side on laptops */
.blog-card--featured {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.blog-card--featured .blog-card__title {
	font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.625rem);
	line-height: 1.2;
}

.blog-card--featured .blog-card__excerpt {
	-webkit-line-clamp: 3;
	font-size: 1rem;
}

@media (min-width: 1024px) {
	.blog-card--featured {
		display: grid;
		grid-template-columns: 1.45fr 1fr;
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: center;
	}

	.blog-card--featured .blog-card__body {
		padding-top: 0;
	}

	.blog-card--featured .blog-card__info {
		margin-top: var(--space-xs);
	}
}

/* Page numbers */
.blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.blog-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}

.blog-pagination a.page-numbers:hover,
.blog-pagination a.page-numbers:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.blog-pagination .page-numbers.current {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-black);
}

.blog-pagination .page-numbers.dots {
	border-color: transparent;
}

.blog-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-2xl) 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.65);
}

.blog-empty__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: var(--fw-semibold);
	color: var(--color-white);
}

/* ---- Article: reading progress ---- */
.reading-progress {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 200;
	height: 3px;
	pointer-events: none;
}

.admin-bar .reading-progress {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .reading-progress {
		top: 32px;
	}
}

.reading-progress__bar {
	display: block;
	height: 100%;
	background-color: var(--color-accent);
	box-shadow: 0 0 10px rgba(255, 255, 0, 0.6);
	transform: scaleX(0);
	transform-origin: left;
}

/* ---- Article header ---- */
.article-header {
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.5rem);
	background: radial-gradient(45% 70% at 100% 0%, rgba(255, 255, 0, 0.06), transparent 70%), var(--color-black);
}

.article-header__inner {
	max-width: calc(54rem + var(--container-gutter) * 2);
}

.article-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.article-crumbs a {
	color: var(--color-accent);
	text-decoration: none;
}

.article-crumbs a:hover,
.article-crumbs a:focus-visible {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.article-title {
	margin-top: var(--space-sm);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
	font-weight: var(--fw-bold);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--color-white);
}

.article-dek {
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.article-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: var(--space-lg);
	font-family: var(--font-display);
}

.article-meta__avatar {
	border: 2px solid rgba(255, 255, 0, 0.6);
	border-radius: 50%;
}

.article-meta__author {
	display: block;
	font-size: 0.9375rem;
	font-weight: var(--fw-semibold);
	color: var(--color-white);
}

.article-meta__details {
	display: flex;
	gap: 0.4rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
}

.article-image {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.article-image img {
	width: 100%;
	max-height: 42rem;
	border-radius: 1rem;
	object-fit: cover;
}

.article-image figcaption {
	margin-top: var(--space-xs);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ---- Article body: content + sticky aside ---- */
.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
	padding-bottom: var(--section-padding);
}

@media (min-width: 1024px) {
	.article-layout {
		grid-template-columns: 15rem minmax(0, 44rem);
		justify-content: center;
		gap: clamp(3rem, 5vw, 5rem);
	}

	.article-aside {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
		align-self: start;
	}
}

.article-toc {
	padding: 1rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-lg);
	background-color: #0f0f0f;
}

.article-toc__title {
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
	list-style-position: inside;
}

.article-toc__list {
	display: grid;
	gap: 0.15rem;
	margin-top: 0.75rem;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.article-toc__list a {
	display: flex;
	gap: 0.6rem;
	padding: 0.4rem 0.5rem;
	border-left: 2px solid transparent;
	font-family: var(--font-display);
	font-size: 0.875rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	counter-increment: toc;
	transition: color var(--transition), border-color var(--transition);
}

.article-toc__list a::before {
	content: counter(toc, decimal-leading-zero);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.35);
}

.article-toc__list a:hover,
.article-toc__list a:focus-visible,
.article-toc__list a.is-current {
	border-left-color: var(--color-accent);
	color: var(--color-accent);
}

.article-share__title {
	margin-bottom: 0.75rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.article-share--aside {
	display: none;
}

@media (min-width: 1024px) {
	.article-share--aside {
		display: block;
		margin-top: var(--space-lg);
	}
}

.article-share--end {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.share-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 44px;
	height: 44px;
	padding: 0 0.6rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-lg);
	background-color: #161616;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: var(--fw-semibold);
	color: var(--color-white);
	text-decoration: none;
	transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.share-button img {
	width: 1.375rem;
	height: 1.375rem;
}

.share-button__text {
	font-family: Arial, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #4c8bf5;
}

.share-button svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.share-button:hover,
.share-button:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
	transform: translateY(-2px);
}

.share-button--copy {
	padding: 0 0.9rem;
}

.share-button.is-copied {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Readable article typography on black */
.article-content {
	font-family: var(--font-display);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17px → 19px */
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.84);
}

.article-content > * + * {
	margin-top: 1.4em;
}

.article-content > :first-child {
	margin-top: 0;
}

/* Opening paragraph slightly larger */
.article-content > p:first-of-type {
	font-size: 1.12em;
	color: rgba(255, 255, 255, 0.92);
}

.article-content h2,
.article-content h3,
.article-content h4 {
	font-family: var(--font-display);
	letter-spacing: -0.01em;
	color: var(--color-white);
	scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.article-content h2 {
	margin-top: 2.2em;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	font-weight: var(--fw-bold);
	line-height: 1.25;
}

.article-content h3 {
	margin-top: 1.8em;
	font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
	font-weight: var(--fw-semibold);
}

.article-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.article-content a:hover,
.article-content a:focus-visible {
	color: var(--color-accent);
	text-decoration-thickness: 2px;
}

.article-content ul:not(.list-reset),
.article-content ol:not(.list-reset) {
	padding-left: 1.3em;
}

.article-content ul:not(.list-reset) li + li,
.article-content ol:not(.list-reset) li + li {
	margin-top: 0.5em;
}

.article-content li::marker {
	color: var(--color-accent);
}

.article-content strong {
	color: var(--color-white);
}

.article-content blockquote,
.article-content .wp-block-quote {
	margin-block: 2em;
	padding: 0.25em 0 0.25em 1.4em;
	border-left: 4px solid var(--color-accent);
	font-size: 1.15em;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-white);
}

.article-content blockquote cite {
	display: block;
	margin-top: 0.6em;
	font-size: 0.8em;
	font-style: normal;
	color: rgba(255, 255, 255, 0.55);
}

.article-content img {
	border-radius: var(--radius-lg);
}

.article-content figure {
	margin-inline: 0;
}

.article-content figcaption,
.article-content .wp-element-caption {
	margin-top: 0.6em;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}

.article-content hr {
	border-top-color: rgba(255, 255, 255, 0.15);
}

.article-content code {
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background-color: #1c1c1c;
	font-size: 0.9em;
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--space-xl);
}

.article-content a.article-tag {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.article-content a.article-tag:hover,
.article-content a.article-tag:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Previous / next */
.article-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin-top: var(--space-xl);
}

@media (min-width: 600px) {
	.article-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.article-content a.article-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.2rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-lg);
	background-color: #0f0f0f;
	text-decoration: none;
	transition: border-color var(--transition);
}

.article-nav__link--next {
	text-align: right;
}

@media (min-width: 600px) {
	.article-nav__link--next:only-child {
		grid-column: 2;
	}
}

.article-nav__label {
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.article-nav__title {
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	color: var(--color-white);
	transition: color var(--transition);
}

.article-content a.article-nav__link:hover,
.article-content a.article-nav__link:focus-visible {
	border-color: rgba(255, 255, 0, 0.5);
}

.article-content a.article-nav__link:hover .article-nav__title,
.article-content a.article-nav__link:focus-visible .article-nav__title {
	color: var(--color-accent);
}

/* Related */
.article-related {
	padding-block: var(--section-padding);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background-color: #050505;
}

/* ==========================================================================
   PROJECTS INDEX (archive-project.php) + SINGLE PROJECT (single-project.php)
   ========================================================================== */
body.post-type-archive-project,
body.tax-project_category,
body.single-project {
	background-color: var(--color-black);
	color: var(--color-white);
}

/* Parallax photos: image is a bit taller than its frame and drifts with --parallax */
.has-parallax [data-parallax] {
	overflow: hidden;
}

.has-parallax [data-parallax] img {
	transform: translateY(var(--parallax, 0%)) scale(1.14);
	will-change: transform;
}

/* ---- Hero ---- */
.pj-hero {
	overflow: hidden;
	padding-top: clamp(3rem, 7vw, 6rem);
	background: radial-gradient(45% 70% at 100% 0%, rgba(255, 255, 0, 0.07), transparent 70%), var(--color-black);
}

.pj-hero__title {
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: clamp(3.25rem, 1.5rem + 8vw, 9.5rem); /* 52px → 152px */
	font-weight: var(--fw-bold);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--color-white);
}

.pj-hero__count {
	margin-left: 0.15em;
	font-size: 0.28em;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	vertical-align: super;
	color: var(--color-accent);
}

.pj-hero__intro {
	max-width: 36rem;
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72);
}

/* Endless marquee of project types */
.pj-marquee {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding-block: 1rem;
	border-block: 1px solid rgba(255, 255, 255, 0.12);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.pj-marquee__track {
	display: flex;
	width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
	.pj-marquee__track {
		animation: pj-marquee 40s linear infinite;
	}

	.pj-marquee:hover .pj-marquee__track {
		animation-play-state: paused;
	}
}

@keyframes pj-marquee {
	to { transform: translateX(-50%); }
}

.pj-marquee__item {
	display: inline-flex;
	align-items: center;
	padding-right: 2.5rem;
	font-family: var(--font-script);
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.85);
}

.pj-marquee__item::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	margin-left: 2.5rem;
	border-radius: 50%;
	background-color: var(--color-accent);
}

/* ---- Sticky bar: filter chips + view switch ---- */
.pj-index {
	position: relative;
	padding-bottom: var(--section-padding);
}

.pj-bar {
	position: sticky;
	top: var(--header-height);
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin: 0 calc(var(--container-gutter) * -1) var(--space-xl);
	padding: 0.85rem var(--container-gutter);
	background: rgba(0, 0, 0, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.admin-bar .pj-bar { top: calc(var(--header-height) + 46px); }

@media (min-width: 783px) {
	.admin-bar .pj-bar { top: calc(var(--header-height) + 32px); }
}

@media (max-width: 600px) {
	.admin-bar .pj-bar { top: var(--header-height); }
}

.pj-bar__filter {
	flex: 1;
	min-width: 0;
}

.pj-bar__views {
	display: flex;
	flex-shrink: 0;
	padding: 0.25rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
}

.pj-view-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0 0.9rem;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	transition: background-color var(--transition), color var(--transition);
}

.pj-view-btn svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.pj-view-btn:hover,
.pj-view-btn:focus-visible {
	color: var(--color-accent);
}

.pj-view-btn.is-active {
	background-color: var(--color-accent);
	color: var(--color-black);
}

/* Phones: icon-only switch so the topic chips get the room */
@media (max-width: 599px) {
	.pj-view-btn {
		padding: 0 0.7rem;
	}

	.pj-view-btn span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.pj-bar {
		gap: 0.75rem;
	}
}

/* ---- Projects: shared ---- */
.pj-list {
	transition: opacity 200ms ease;
}

.pj-list.is-switching {
	opacity: 0;
}

.pj-item__link {
	position: relative;
	display: grid;
	color: var(--color-white);
	text-decoration: none;
}

.pj-item__link:hover,
.pj-item__link:focus-visible {
	color: var(--color-white);
}

.pj-item__link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
	border-radius: var(--radius-lg);
}

.pj-item__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: #151515;
}

.pj-item__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pj-item__num {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--color-accent);
}

.pj-item__name {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	transition: color var(--transition);
}

.pj-item__cat,
.pj-item__place,
.pj-item__year {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
}

.pj-item__arrow {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	font-size: 1.1rem;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hover / focus: name and arrow turn yellow */
.pj-item__link:hover .pj-item__name,
.pj-item__link:focus-visible .pj-item__name {
	color: var(--color-accent);
}

.pj-item__link:hover .pj-item__arrow,
.pj-item__link:focus-visible .pj-item__arrow {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-black);
	transform: rotate(-45deg);
}

/* ---- Grid view: large two-column cards ---- */
.pj-list.is-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2.5rem);
}

@media (min-width: 768px) {
	.pj-list.is-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.is-grid .pj-item__link {
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"media media media"
		"num   name  arrow"
		".     meta  arrow";
	column-gap: 1rem;
	row-gap: 0.35rem;
}

.is-grid .pj-item__media {
	grid-area: media;
	aspect-ratio: 4 / 3;
	margin-bottom: 1rem;
}

.is-grid .pj-item__img {
	transition: filter 600ms ease;
}

.is-grid .pj-item__link:hover .pj-item__img {
	filter: brightness(1.08);
}

/* Photo frame tightens slightly on hover */
.is-grid .pj-item__media {
	transition: border-radius 600ms ease, clip-path 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
	clip-path: inset(0 round var(--radius-lg));
}

.is-grid .pj-item__link:hover .pj-item__media {
	clip-path: inset(2.5% round 1.25rem);
}

.is-grid .pj-item__num { grid-area: num; align-self: center; }
.is-grid .pj-item__name { grid-area: name; font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); }
.is-grid .pj-item__arrow { grid-area: arrow; align-self: center; }

.is-grid .pj-item__cat {
	grid-area: meta;
}

/* In the grid, place + year follow the type on one line */
.is-grid .pj-item__place,
.is-grid .pj-item__year {
	grid-area: meta;
	align-self: end;
	justify-self: end;
	display: none;
}

/* ---- List view: editorial index ---- */
.pj-list-head {
	display: none;
}

.pj-view-list .pj-list-head {
	display: none;
}

@media (min-width: 900px) {
	.pj-view-list .pj-list-head,
	.pj-list.is-list .pj-item__link {
		grid-template-columns: 3.5rem minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1.3fr) 4.5rem 2.75rem;
		column-gap: 1.25rem;
		align-items: center;
	}

	.pj-view-list .pj-list-head {
		display: grid;
		padding: 0 0 0.85rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
		font-family: var(--font-display);
		font-size: 0.6875rem;
		font-weight: var(--fw-semibold);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.45);
	}
}

.pj-list.is-list .pj-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pj-list.is-list .pj-item__link {
	padding-block: clamp(1rem, 2vw, 1.6rem);
	transition: padding 400ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 400ms ease;
}

.pj-list.is-list .pj-item__name {
	font-size: clamp(1.125rem, 0.9rem + 1.2vw, 2rem);
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
}

/* Desktop list: photos only appear as the floating preview */
@media (min-width: 900px) {
	.pj-list.is-list .pj-item__media {
		display: none;
	}

	.pj-list.is-list .pj-item__num { grid-column: 1; }
	.pj-list.is-list .pj-item__name { grid-column: 2; }
	.pj-list.is-list .pj-item__cat { grid-column: 3; }
	.pj-list.is-list .pj-item__place { grid-column: 4; }
	.pj-list.is-list .pj-item__year { grid-column: 5; }
	.pj-list.is-list .pj-item__arrow { grid-column: 6; }

	.pj-list.is-list .pj-item__link:hover {
		padding-left: 0.75rem;
		background: linear-gradient(to right, rgba(255, 255, 0, 0.06), transparent 70%);
	}
}

/* Phone/tablet list: small thumbnail + name + type */
@media (max-width: 899px) {
	.pj-list.is-list .pj-item__link {
		grid-template-columns: 5.5rem minmax(0, 1fr) auto;
		grid-template-areas:
			"media name arrow"
			"media cat  arrow";
		column-gap: 1rem;
		row-gap: 0.25rem;
		align-items: center;
	}

	.pj-list.is-list .pj-item__media {
		grid-area: media;
		aspect-ratio: 1;
		border-radius: var(--radius);
	}

	.pj-list.is-list .pj-item__name { grid-area: name; align-self: end; }
	.pj-list.is-list .pj-item__cat { grid-area: cat; align-self: start; }
	.pj-list.is-list .pj-item__arrow { grid-area: arrow; width: 2.25rem; height: 2.25rem; }

	.pj-list.is-list .pj-item__num,
	.pj-list.is-list .pj-item__place,
	.pj-list.is-list .pj-item__year {
		display: none;
	}
}

/* Floating preview photo (List view, desktop) */
.pj-preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
	width: 20rem;
	aspect-ratio: 4 / 3;
	margin: -7.5rem 0 0 2rem; /* sits to the right of the cursor */
	border-radius: var(--radius-lg);
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
	transition: opacity 250ms ease;
}

.pj-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(0.85);
	transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pj-preview.is-visible {
	opacity: 1;
}

.pj-preview.is-visible img {
	transform: none;
}

.pj-index__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
	margin-top: clamp(3rem, 6vw, 5rem);
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	font-weight: var(--fw-semibold);
	text-align: center;
}

.pj-index__cta .button {
	padding: 1rem 1.75rem;
}

/* ---- Single project ---- */
.pp-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(26rem, 78svh, 52rem);
	padding-bottom: clamp(2rem, 5vw, 4rem);
	background-color: #111;
}

.pp-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.pp-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0.85));
}

.pp-hero__content {
	width: 100%;
}

.pp-hero__title {
	max-width: 18ch;
	margin-top: var(--space-sm);
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.3rem + 4vw, 5.5rem);
	font-weight: var(--fw-bold);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--color-white);
}

.pp-hero__place {
	margin-top: var(--space-sm);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.pp-lead {
	margin-bottom: 1.5em;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	color: var(--color-white);
}

/* Previous / next: two photo panels */
.pp-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.pp-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pp-nav__link {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.4rem;
	min-height: clamp(14rem, 26vw, 22rem);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	overflow: hidden;
	color: var(--color-white);
	text-decoration: none;
}

.pp-nav__link--next {
	align-items: flex-end;
	text-align: right;
}

.pp-nav__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pp-nav__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.6);
	transition: background-color 500ms ease;
}

.pp-nav__label {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.pp-nav__title {
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem);
	font-weight: var(--fw-semibold);
	line-height: 1.15;
	transition: color var(--transition);
}

.pp-nav__link:hover,
.pp-nav__link:focus-visible {
	color: var(--color-white);
}

.pp-nav__link:hover .pp-nav__img,
.pp-nav__link:focus-visible .pp-nav__img {
	transform: scale(1.06);
}

.pp-nav__link:hover::after,
.pp-nav__link:focus-visible::after {
	background-color: rgba(0, 0, 0, 0.45);
}

.pp-nav__link:hover .pp-nav__title,
.pp-nav__link:focus-visible .pp-nav__title {
	color: var(--color-accent);
}

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

/* ---- Project case study (single-project.php) ---- */
.pp-status {
	display: inline-block;
	margin-right: 0.75rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background-color: var(--color-accent);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--color-black);
	vertical-align: middle;
}

.pp-status--in-progress,
.pp-status--design,
.pp-status--concept {
	border: 1px solid var(--color-accent);
	background-color: transparent;
	color: var(--color-accent);
}

/* Section menu: pinned under the header */
.pp-subnav {
	position: sticky;
	top: var(--header-height);
	z-index: 20;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.admin-bar .pp-subnav { top: calc(var(--header-height) + 46px); }

@media (min-width: 783px) {
	.admin-bar .pp-subnav { top: calc(var(--header-height) + 32px); }
}

@media (max-width: 600px) {
	.admin-bar .pp-subnav { top: var(--header-height); }
}

.pp-subnav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.pp-subnav__list {
	display: flex;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.pp-subnav__list::-webkit-scrollbar {
	display: none;
}

.pp-subnav__list a {
	position: relative;
	display: block;
	padding: 1.1rem 0;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color var(--transition);
}

.pp-subnav__list a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background-color: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pp-subnav__list a:hover,
.pp-subnav__list a:focus-visible,
.pp-subnav__list a.is-current {
	color: var(--color-accent);
}

.pp-subnav__list a.is-current::after {
	transform: none;
}

.pp-subnav__cta {
	display: none;
	flex-shrink: 0;
	padding: 0.7rem 1.1rem;
	font-size: 0.75rem;
}

@media (min-width: 900px) {
	.pp-subnav__cta {
		display: inline-flex;
	}
}

.pp-section {
	padding-block: var(--section-padding);
	scroll-margin-top: calc(var(--header-height) + 3.5rem);
}

/* Overview + Key specs card */
.pp-overview__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
}

@media (min-width: 1024px) {
	.pp-overview__layout {
		grid-template-columns: minmax(0, 1fr) 24rem;
		gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}

	.pp-specs {
		position: sticky;
		top: calc(var(--header-height) + 5rem);
	}
}

.pp-overview .pp-lead {
	margin-top: var(--space-sm);
}

.pp-content:empty {
	display: none;
}

.pp-specs {
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 1rem;
	background: linear-gradient(to bottom, #141414, #0b0b0b);
}

.pp-specs__title {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.pp-specs__list {
	margin: var(--space-sm) 0 0;
}

.pp-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.8rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--font-display);
	font-size: 0.875rem;
}

.pp-specs__row dt {
	color: rgba(255, 255, 255, 0.55);
}

.pp-specs__row dd {
	margin: 0;
	font-weight: var(--fw-semibold);
	text-align: right;
	color: var(--color-white);
}

.pp-specs__subtitle {
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.pp-services {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 0.75rem;
}

.pp-service {
	display: inline-block;
	padding: 0.45rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	color: var(--color-white);
	text-decoration: none;
	transition: border-color var(--transition), color var(--transition);
}

a.pp-service:hover,
a.pp-service:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.pp-specs__cta {
	width: 100%;
	margin-top: var(--space-lg);
	padding: 1rem 1.25rem;
}

/* Story: brief / challenge / approach */
.pp-story {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: radial-gradient(45% 60% at 0% 100%, rgba(255, 255, 0, 0.05), transparent 70%), #050505;
}

.pp-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
}

@media (min-width: 900px) {
	.pp-story__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pp-story__card {
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-lg);
	background-color: #0e0e0e;
}

.pp-story__num {
	font-family: "Times New Roman", Times, Georgia, serif;
	font-size: 2.75rem;
	line-height: 1;
	color: var(--color-accent);
}

.pp-story__heading {
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
	color: var(--color-white);
}

.pp-story__text {
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.7);
}

/* Gallery: masonry columns */
.pp-gallery__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.pp-gallery__hint {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}

.pp-gallery__grid {
	columns: 1;
	column-gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

@media (min-width: 600px) {
	.pp-gallery__grid { columns: 2; }
}

@media (min-width: 1024px) {
	.pp-gallery__grid { columns: 3; }
}

.pp-gallery__item {
	break-inside: avoid;
	margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

.pp-gallery__link {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	cursor: zoom-in;
}

.pp-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 500ms ease;
}

.pp-gallery__zoom {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--color-accent);
	color: var(--color-black);
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 300ms ease, transform 300ms ease;
}

.pp-gallery__zoom svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pp-gallery__link:hover .pp-gallery__img,
.pp-gallery__link:focus-visible .pp-gallery__img {
	transform: scale(1.04);
	filter: brightness(0.85);
}

.pp-gallery__link:hover .pp-gallery__zoom,
.pp-gallery__link:focus-visible .pp-gallery__zoom {
	opacity: 1;
	transform: none;
}

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

/* History: vertical timeline */
.pp-history {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pp-history__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
}

@media (min-width: 1024px) {
	.pp-history__layout {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: clamp(3rem, 6vw, 6rem);
	}

	.pp-history__intro {
		position: sticky;
		top: calc(var(--header-height) + 6rem);
		align-self: start;
	}
}

.pp-history__text {
	max-width: 24rem;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.65);
}

.pp-timeline {
	position: relative;
	padding-left: 2rem;
}

/* The line */
.pp-timeline::before {
	content: "";
	position: absolute;
	top: 0.4rem;
	bottom: 0.4rem;
	left: 0.4rem;
	width: 2px;
	background: linear-gradient(to bottom, var(--color-accent), rgba(255, 255, 0, 0.1));
}

.pp-timeline__item {
	position: relative;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.pp-timeline__item:last-child {
	padding-bottom: 0;
}

/* The dot */
.pp-timeline__item::before {
	content: "";
	position: absolute;
	top: 0.3rem;
	left: calc(-2rem + 0.4rem - 0.45rem + 1px);
	width: 0.9rem;
	height: 0.9rem;
	border: 3px solid var(--color-black);
	border-radius: 50%;
	background-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent), 0 0 12px rgba(255, 255, 0, 0.5);
}

.pp-timeline__date {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.pp-timeline__title {
	margin-top: 0.35rem;
	font-family: var(--font-display);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
	font-weight: var(--fw-semibold);
	color: var(--color-white);
}

.pp-timeline__text {
	margin-top: 0.4rem;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.65);
}

/* Features: ticked list in two columns */
.pp-features {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background-color: #050505;
}

.pp-features__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 768px) {
	.pp-features__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pp-feature {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.pp-feature__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background-color: rgba(255, 255, 0, 0.12);
	color: var(--color-accent);
}

.pp-feature__icon svg {
	width: 0.95rem;
	height: 0.95rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Testimonial */
.pp-quote__figure {
	position: relative;
	max-width: 56rem;
	margin: 0 auto;
	text-align: center;
}

.pp-quote__figure::before {
	content: "\201C";
	display: block;
	height: 0.55em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(5rem, 4rem + 4vw, 8rem);
	line-height: 1;
	color: var(--color-accent);
}

.pp-quote__text {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	font-style: italic;
	font-weight: var(--fw-medium);
	line-height: 1.5;
	color: var(--color-white);
}

.pp-quote__by {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-top: var(--space-lg);
	font-family: var(--font-display);
}

.pp-quote__name {
	font-weight: var(--fw-bold);
	color: var(--color-accent);
}

.pp-quote__role {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.55);
}

/* Team */
.pp-team {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pp-team__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 900px) {
	.pp-team__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.pp-team__member {
	padding: clamp(1.1rem, 2vw, 1.5rem);
	background-color: var(--color-black);
	transition: background-color 300ms ease;
}

.pp-team__member:hover {
	background-color: #101010;
}

.pp-team__member dt {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.pp-team__member dd {
	margin: 0.4rem 0 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	color: var(--color-white);
}

/* CTA band */
.pp-cta {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-block: 1px solid rgba(255, 255, 255, 0.12);
	background: radial-gradient(50% 120% at 100% 50%, rgba(255, 255, 0, 0.12), transparent 70%), #0a0a0a;
}

.pp-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.pp-cta__title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
	font-weight: var(--fw-bold);
	letter-spacing: -0.01em;
	color: var(--color-white);
}

.pp-cta__text {
	margin-top: 0.4rem;
	font-family: var(--font-display);
	color: rgba(255, 255, 255, 0.65);
}

.pp-cta .button {
	padding: 1.1rem 1.75rem;
}

/* ---- Lightbox ---- */
.has-lightbox,
.has-lightbox body {
	overflow: hidden;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem;
	padding: 3.5rem 0.5rem 3rem;
	background: rgba(0, 0, 0, 0.94);
	opacity: 0;
	transition: opacity 250ms ease;
}

.lightbox.is-open {
	opacity: 1;
}

.lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
}

.lightbox__img {
	max-width: 100%;
	max-height: calc(100svh - 9rem);
	border-radius: var(--radius);
	object-fit: contain;
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 300ms ease, transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lightbox.is-loaded .lightbox__img {
	opacity: 1;
	transform: none;
}

.lightbox__caption {
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

.lightbox__close,
.lightbox__arrow {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.06);
	font-size: 1.4rem;
	color: var(--color-white);
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.lightbox__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	font-size: 1.8rem;
	line-height: 1;
}

.lightbox__close:hover,
.lightbox__arrow:hover,
.lightbox__close:focus-visible,
.lightbox__arrow:focus-visible {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-black);
}

.lightbox__count {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.6);
	transform: translateX(-50%);
}

/* Phones: arrows at the bottom corners, photo full width */
@media (max-width: 599px) {
	.lightbox {
		grid-template-columns: minmax(0, 1fr);
	}

	.lightbox__arrow {
		position: absolute;
		bottom: 0.6rem;
	}

	.lightbox__arrow--prev { left: 0.75rem; }
	.lightbox__arrow--next { right: 0.75rem; }
}

/* ==========================================================================
   CUSTOM CURSOR + GLOW (assets/js/cursor.js; mouse users only)
   The elements are fixed at 0,0 and moved with transform only, so they never
   trigger layout. pointer-events: none so they never block clicks.
   ========================================================================== */
.cursor-dot,
.cursor-ring,
.cursor-glow {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	will-change: transform;
	transition: opacity 300ms ease;
}

.cursor-visible .cursor-dot,
.cursor-visible .cursor-ring {
	opacity: 1;
}

.cursor-visible .cursor-glow {
	opacity: 1;
}

/* Hide the system cursor (it comes back over text fields: .cursor-native) */
.has-custom-cursor,
.has-custom-cursor * {
	cursor: none !important;
}

.has-custom-cursor.cursor-native,
.has-custom-cursor.cursor-native * {
	cursor: auto !important;
}

.cursor-native .cursor-dot,
.cursor-native .cursor-ring {
	opacity: 0;
}

/* Dot: exactly on the pointer */
.cursor-dot {
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background-color: var(--color-accent);
	box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
}

/* Ring: trails a little; drawn with an inner element-free border */
.cursor-ring {
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 1.5px solid rgba(255, 255, 0, 0.75);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); /* faint dark edge: visible on white and black */
}

.cursor-ring::before {
	content: "";
	position: absolute;
	inset: -1.5px;
	border-radius: 50%;
	background-color: rgba(255, 255, 0, 0.18);
	transform: scale(0.2);
	opacity: 0;
	transition: transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 300ms ease;
}

/* Grow + fill over links and buttons */
.cursor-ring {
	transition: opacity 300ms ease, width 350ms cubic-bezier(0.22, 0.61, 0.36, 1), height 350ms cubic-bezier(0.22, 0.61, 0.36, 1), margin 350ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 300ms ease;
}

.cursor-hover .cursor-ring {
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-color: rgba(255, 255, 255, 0.95); /* white, so it shows on yellow buttons too */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 18px rgba(255, 255, 0, 0.35);
}

.cursor-hover .cursor-ring::before {
	transform: none;
	opacity: 1;
}

.cursor-hover .cursor-dot {
	opacity: 0;
}

/* Squeeze on click */
.cursor-down .cursor-ring {
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
}

/* Glow: big soft yellow light drifting after the pointer (a gradient, not a blur filter, so it's cheap) */
.cursor-glow {
	z-index: 1;
	width: 420px;
	height: 420px;
	margin: -210px 0 0 -210px;
	background: radial-gradient(circle, rgba(255, 255, 0, 0.09) 0%, rgba(255, 255, 0, 0.035) 35%, transparent 70%);
	mix-blend-mode: screen;
}

/* ---- Services grid (template-parts/services-grid.php) ---- */
.service-card {
	padding: var(--space-lg);
	background-color: var(--color-bg);
	border: var(--border);
	border-radius: var(--radius);
}

.service-card__number {
	display: block;
	margin-bottom: var(--space-sm);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text-muted);
}

.service-card__title {
	font-size: var(--fs-h4);
}

.service-card__text {
	margin-top: var(--space-xs);
	color: var(--color-text-muted);
}

/* ---- Project card (template-parts/project-card.php) ---- */
.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg);
	border: var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--transition);
}

.project-card:hover,
.project-card:focus-within {
	box-shadow: var(--shadow);
}

.project-card__media img,
.project-card__media .placeholder-media {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.project-card__body {
	padding: var(--space-md);
}

.project-card__terms {
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.project-card__title {
	margin-top: var(--space-3xs);
	font-size: var(--fs-h4);
}

/* The title link stretches over the whole card so all of it is clickable */
.project-card__link {
	color: inherit;
	text-decoration: none;
}

.project-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.project-card__excerpt {
	margin-top: var(--space-xs);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* ---- CTA banner (template-parts/cta-banner.php) ---- */
.cta-banner {
	padding-block: var(--section-padding);
	background-color: var(--color-bg-dark);
	color: var(--color-text-on-dark);
	text-align: center;
}

.cta-banner__title {
	color: var(--color-text-on-dark);
}

.cta-banner__text {
	max-width: var(--container-narrow);
	margin: var(--space-sm) auto 0;
	font-size: var(--fs-lg);
	opacity: 0.85;
}

.cta-banner__actions {
	margin-top: var(--space-lg);
}


/* ==========================================================================
   10. PROJECTS
   ========================================================================== */

/* ---- Category filter (archive-project.php) ---- */
.project-filter {
	margin-bottom: var(--space-xl);
}

.project-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	list-style: none;
	padding: 0;
}

.project-filter__link {
	display: inline-block;
	padding: var(--space-2xs) var(--space-sm);
	border: var(--border);
	border-radius: 999px;
	color: var(--color-text);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.project-filter__link:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.project-filter__link.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-primary-contrast);
}

.project-filter__empty {
	padding: var(--space-xl) 0;
	text-align: center;
	color: var(--color-text-muted);
}

/* ---- Single project (single-project.php) ---- */
.project-header {
	padding-top: var(--section-padding);
}

.project-header__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-bottom: var(--space-sm);
	list-style: none;
	padding: 0;
	font-size: var(--fs-sm);
}

.project-header__terms a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.project-header__excerpt {
	margin-top: var(--space-sm);
	font-size: var(--fs-lg);
	color: var(--color-text-muted);
}

.project-featured-image {
	margin-top: var(--space-xl);
}

.project-featured-image img {
	width: 100%;
	border-radius: var(--radius);
}

.project-footer {
	padding-bottom: var(--section-padding);
}

.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-md);
	padding-top: var(--space-lg);
	border-top: var(--border);
}

.post-navigation .nav-subtitle {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.post-navigation a {
	text-decoration: none;
}

.post-navigation .nav-next {
	margin-left: auto;
	text-align: right;
}


/* ==========================================================================
   11. PAGE CONTENT
   ========================================================================== */
.page-header {
	padding-top: var(--section-padding);
	padding-bottom: var(--space-lg);
}

.page-header__description {
	margin-top: var(--space-sm);
	color: var(--color-text-muted);
}

/* Spacing for content coming from the WordPress editor */
.entry-content > * + * {
	margin-top: var(--space-sm);
}

.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
	margin-top: var(--space-lg);
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--space-md);
}

.entry-content blockquote {
	padding-left: var(--space-md);
	border-left: 3px solid var(--color-border);
	font-style: italic;
}

/* Post listings (index.php) */
.post-list {
	display: grid;
	gap: var(--space-xl);
}

.post-summary__meta {
	margin-top: var(--space-3xs);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.post-summary__title a {
	color: inherit;
	text-decoration: none;
}

.post-summary__excerpt {
	margin-top: var(--space-xs);
}

.post-summary__thumbnail {
	display: block;
	margin-bottom: var(--space-sm);
}

/* Pagination */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-top: var(--space-xl);
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 2.5rem;
	padding: var(--space-2xs) var(--space-xs);
	border: var(--border);
	border-radius: var(--radius);
	text-align: center;
	text-decoration: none;
}

.pagination .page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-primary-contrast);
}

/* 404 */
.error-404 {
	text-align: center;
}

.error-404 .search-form {
	display: flex;
	gap: var(--space-2xs);
	max-width: 28rem;
	margin: var(--space-lg) auto;
}

/* Contact page */
.contact-layout {
	display: grid;
	gap: var(--space-xl);
}

.contact-details {
	padding: var(--space-lg);
	background-color: var(--color-bg-alt);
	border-radius: var(--radius);
}

.contact-details__list {
	display: grid;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
	list-style: none;
	padding: 0;
}

.contact-details__label {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

@media (min-width: 1024px) {
	.contact-layout {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}
}


/* ==========================================================================
   12. WORDPRESS CORE CLASSES
   ========================================================================== */
.alignleft {
	float: left;
	margin: 0 var(--space-md) var(--space-sm) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--space-sm) var(--space-md);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	max-width: var(--container-max);
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

.wp-caption,
.wp-block-image figcaption,
.wp-caption-text {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.wp-caption-text,
.wp-block-image figcaption {
	margin-top: var(--space-2xs);
}

.sticky,
.gallery-caption,
.bypostauthor {
	/* Required by WordPress theme review; styled later if needed. */
}