/* =============================================================================
   Rendall & Wright – global styles
   Colours / fonts / spacing come from theme.json as --wp--preset--* variables.
   Layout: CSS grid + flex only, no framework.
   ============================================================================= */

:root {
	--rw-header-h: clamp(120px, 7.8vw, 200px); /* design (2560 canvas, 1:1): nav centred 100px from the top */
	--rw-header-h-mobile: 72px;
	--rw-content: 1680px; /* design content column at 2560 – OUTER width incl. the two gutters */
	--rw-wide: 1920px;
	/* theme.json contentSize/wideSize are 40px smaller (1640/1880): WP uses them as the INNER width of
	   "inner blocks use content width" groups, so both routes end up on the same 1640px text column. */
	--rw-gutter: var(--wp--preset--spacing--30);
	--rw-ease: 0.35s ease;
	--rw-text: var(--wp--preset--color--text);
	--rw-primary: var(--wp--preset--color--primary);
	--rw-accent: var(--wp--preset--color--accent);
	--rw-light: var(--wp--preset--color--light);
	--rw-mid: var(--wp--preset--color--mid);
	--rw-serif: var(--wp--preset--font-family--serif);
	--rw-sans: var(--wp--preset--font-family--sans);
}

/* ---- Reset-ish -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* 16px root: 1rem = 16px, so 20px = 1.25rem etc. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
body { margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.menu-open, body.lightbox-open { overflow: hidden; }
img, video, svg { max-width: 100%; height: auto; display: block; }
img { font-style: italic; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--rw-primary); text-decoration: none; transition: color var(--rw-ease); }
a:hover, a:focus-visible { color: var(--rw-accent); }
:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 3px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-family: var(--rw-serif); font-weight: 400; line-height: 1.2; color: var(--rw-text); }
p { margin: 0 0 1em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; background: #fff; padding: 0.5rem 1rem; color: var(--rw-text); }

/* ---- Layout / content width ------------------------------------------- */
.rw-container,
.entry-content > :where(:not(.alignwide):not(.alignfull)) {
	max-width: var(--rw-content);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--rw-gutter);
	padding-right: var(--rw-gutter);
}
.entry-content > .alignwide { max-width: var(--rw-wide); margin-left: auto; margin-right: auto; padding-left: var(--rw-gutter); padding-right: var(--rw-gutter); }
.entry-content > .alignfull { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
/* Full-width custom blocks keep their content in the column via .rw-block > *__inner */
.rw-block { position: relative; }
/* Width helpers – type into a block's Advanced → Additional CSS class(es) to cap it and centre it */
.entry-content .rw-w-480 { max-width: 480px; margin-inline: auto; }
.entry-content .rw-w-640 { max-width: 640px; margin-inline: auto; }
.entry-content .rw-w-800 { max-width: 800px; margin-inline: auto; }
.entry-content .rw-w-1000 { max-width: 1000px; margin-inline: auto; }
.rw-block.alignfull > *:not(.rw-scroll__stage) { max-width: var(--rw-content); margin-left: auto; margin-right: auto; padding-left: var(--rw-gutter); padding-right: var(--rw-gutter); }
.rw-block.alignwide > * { max-width: var(--rw-wide); margin-left: auto; margin-right: auto; }
.rw-block:not(.alignfull):not(.alignwide) > * { padding-left: 0; padding-right: 0; }
/* Block style "Content edge to edge": with Full width alignment the content runs to the viewport edges as well as
   the background. Breathing room then comes from the block's own Padding control. */
.rw-block.alignfull.is-style-edge > * { max-width: none; padding-left: 0; padding-right: 0; }
.rw-block.alignwide.is-style-edge > * { max-width: none; }
/* Blocks with a background but no full width still want breathing room */
.rw-block.has-background:not([style*="padding"]) { padding: var(--wp--preset--spacing--50) var(--rw-gutter); }
.rw-block.has-background.alignfull:not([style*="padding"]) { padding-left: 0; padding-right: 0; }
.entry-content > * + * { margin-top: var(--wp--preset--spacing--40); }
.entry-content > p + p { margin-top: 1.25rem; } /* running text: same 20px as inside columns/groups; the 2rem above is between blocks */
.entry-content > .rw-block + .rw-block.has-background,
.entry-content > .has-background + .has-background { margin-top: 0; }
.rw-section { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.rw-main { min-height: 40vh; }
body.no-hero .rw-main { padding-top: var(--rw-header-h); }
@media (max-width: 1023px) { body.no-hero .rw-main { padding-top: var(--rw-header-h-mobile); } }

/* "Text first when stacked" block style – below the stacking breakpoint the column/side holding the image
   (or one of our media blocks) drops beneath the text, whichever side it was on at desktop. */
@media (max-width: 781px) {
	.wp-block-columns.is-style-text-first > .wp-block-column:has(img, video, iframe, .rw-fader, .rw-video, .rw-gallery) { order: 2; }
	.wp-block-media-text.is-style-text-first.is-stacked-on-mobile .wp-block-media-text__media { grid-row: 2; }
	.wp-block-media-text.is-style-text-first.is-stacked-on-mobile .wp-block-media-text__content { grid-row: 1; }
}

/* Core group / columns niceties */
.wp-block-group.has-background { padding: var(--wp--preset--spacing--50) var(--rw-gutter); }
.wp-block-media-text .wp-block-media-text__content { padding: 0 0 0 var(--wp--preset--spacing--40); }
@media (max-width: 600px) { .wp-block-media-text .wp-block-media-text__content { padding: var(--wp--preset--spacing--30) 0 0; } }
.wp-block-buttons { gap: 0.75rem; }

/* ---- Typography helpers ------------------------------------------------ */
.rw-page-title, .rw-section-title, .is-style-centered { text-align: center; font-size: var(--wp--preset--font-size--xx-large); margin-bottom: var(--wp--preset--spacing--40); }
.rw-section-title { font-size: var(--wp--preset--font-size--x-large); }
.rw-page-title { margin-top: var(--wp--preset--spacing--50); }
.rw-section > .rw-page-title:first-child { margin-top: 0; } /* the section already carries the top padding – avoid doubling it (portfolio index) */
/* No page title: give the first block breathing room below the hero (a full-width band still butts up to it). */
.rw-page > .entry-content:first-child > :first-child:not(.alignfull) { margin-top: var(--wp--preset--spacing--50); }
/* Space below a heading = a quarter of the normal block gap, so the heading hugs its paragraph.
   WP flow layouts (columns, groups) space siblings with margin-block-start = blockGap (1.25rem);
   top-level blocks in the content use the theme's 2rem. */
.entry-content :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 0; }
.entry-content > :is(h1, h2, h3, h4, h5, h6) + * { margin-top: 0.5rem; }
.entry-content .is-layout-flow > :is(h1, h2, h3, h4, h5, h6) + *,
.entry-content .is-layout-constrained > :is(h1, h2, h3, h4, h5, h6) + * { margin-block-start: 0.3rem; }

/* ---- Buttons ------------------------------------------------------------ */
.wp-block-button__link, .wp-element-button, .rw-button {
	display: inline-block;
	font-family: var(--rw-serif);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.2;
	color: #fff;
	background: var(--rw-primary);
	padding: 0.5em 1em;
	border: 1px solid transparent;
	border-radius: 0 3px 0 3px; /* top-right + bottom-left only */
	transition: background var(--rw-ease), color var(--rw-ease), border-color var(--rw-ease);
}
.wp-block-button__link:hover, .wp-element-button:hover, .rw-button:hover,
.wp-block-button__link:focus-visible, .wp-element-button:focus-visible { background: var(--rw-accent); color: #fff; }
.rw-button--light, .is-style-outline-light .wp-block-button__link { background: #fff; color: var(--rw-primary); border-color: #fff; }
.rw-button--light:hover, .is-style-outline-light .wp-block-button__link:hover { background: var(--rw-accent); color: #fff; border-color: var(--rw-accent); }

/* ---- Placeholder (shown wherever content is missing) ------------------- */
.rw-placeholder {
	display: grid; place-items: center; width: 100%;
	background: repeating-linear-gradient(135deg, #e7ecee 0 12px, #dfe5e8 12px 24px);
	color: #7c8a90; font-family: var(--rw-sans); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; padding: 1rem;
}
.rw-placeholder span { background: rgba(255,255,255,0.7); padding: 0.35em 0.75em; }

/* ---- Header -------------------------------------------------------------- */
.rw-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	height: var(--rw-header-h);
	color: #fff;
	transition: background var(--rw-ease), color var(--rw-ease), height var(--rw-ease), box-shadow var(--rw-ease);
}
/* Readability gradient under the transparent header */
.rw-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	height: calc(var(--rw-header-h) * 1.4);
	background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
	transition: opacity var(--rw-ease);
}
.rw-header.is-scrolled, body.no-hero .rw-header, body.menu-open .rw-header { background: #fff; color: var(--rw-text); box-shadow: 0 1px 0 rgba(0,0,0,0.06); height: 84px; }
.rw-header.is-scrolled::before, body.no-hero .rw-header::before, body.menu-open .rw-header::before { opacity: 0; }
/* Once stuck (scrolled) the bar goes slate with white logo + menu; the resting no-hero / open-menu states stay white */
body:not(.menu-open) .rw-header.is-scrolled { background: var(--rw-primary); color: #fff; box-shadow: none; }
.rw-header__inner {
	max-width: var(--rw-wide); height: 100%; margin: 0 auto; padding: 0 var(--rw-gutter);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	/* Design clusters the menu round the logo: ~190px nav→logo and ~73px between items at 1920 */
	column-gap: clamp(2rem, 9.7vw, 250px);
}
.rw-logo { display: block; color: currentColor; width: clamp(138px, 10.8vw, 276px); /* +15% (was 120 / 9.4vw / 240) */ margin-top: 0.3rem; transition: width var(--rw-ease); }
.rw-logo:hover, .rw-logo:focus { color: inherit; } /* the global link hover colour must not tint the logo */
.rw-logo svg { width: 100%; height: auto; }
.rw-header.is-scrolled .rw-logo, body.no-hero .rw-logo { width: 110px; margin-top: 0; }
/* Ampersand keeps its grey; on white header it should still read */
.rw-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.25rem, 3.8vw, 98px); }
.rw-nav--left .rw-nav__list { justify-content: flex-end; }
.rw-nav--right .rw-nav__list { justify-content: flex-start; padding-left: clamp(0px, 1.5vw, 40px); } /* the ampersand overhangs the logo box; design has ~220px logo→Studio */
.rw-nav a {
	font-family: var(--rw-sans); font-size: clamp(0.9375rem, 0.9vw, 1.0625rem); /* 15px on small laptops → 17px from ~1900px wide */ letter-spacing: 0.04em; text-transform: uppercase;
	color: currentColor; padding: 0.5rem 0; position: relative; white-space: nowrap;
}
/* Underline: a 1px gradient whose width animates. (A scaleX transform smears a 1px line to 2–3px mid-animation.) */
.rw-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(currentColor, currentColor) no-repeat 50% 0 / 0% 100%; transition: background-size var(--rw-ease); } /* positioned at 50% so it grows from the centre */
.rw-nav a:hover::after, .rw-nav a[aria-current="page"]::after { background-size: 100% 100%; }
.rw-nav a:hover { color: currentColor; }
body.no-hero .rw-header:not(.is-scrolled) .rw-nav a:hover { color: var(--rw-accent); } /* navy hover only on the white bar; on the slate bar links stay white (underline shows the hover) */

/* Burger: 3 lines in the primary colour on a white circle */
.rw-burger {
	display: none; position: relative; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	justify-self: end;
}
.rw-burger span { position: absolute; left: 13px; width: 22px; height: 2px; background: var(--rw-primary); transition: transform var(--rw-ease), opacity var(--rw-ease); }
.rw-burger span:nth-child(1) { top: 16px; }
.rw-burger span:nth-child(2) { top: 23px; }
.rw-burger span:nth-child(3) { top: 30px; }
.rw-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rw-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rw-mobile-menu { position: fixed; inset: 0; z-index: 90; background: #fff; overflow-y: auto; padding-top: var(--rw-header-h-mobile); }
.rw-mobile-menu__inner { padding: var(--wp--preset--spacing--50) var(--rw-gutter); }
.rw-mobile-menu__list, .rw-mobile-menu__list ul { list-style: none; margin: 0; padding: 0; }
.rw-mobile-menu__list > li > a { display: block; font-family: var(--rw-serif); font-size: 1.75rem; padding: 0.5rem 0; color: var(--rw-text); border-bottom: 1px solid var(--rw-light); }
.rw-mobile-menu__list ul a { display: block; padding: 0.4rem 0 0.4rem 1rem; font-size: 1rem; color: var(--rw-text); }
.rw-mobile-menu__list a[aria-current="page"], .rw-mobile-menu__list .current-menu-item > a { color: var(--rw-accent); }

@media (max-width: 1023px) {
	.rw-header { height: var(--rw-header-h-mobile); }
	.rw-header.is-scrolled, body.no-hero .rw-header, body.menu-open .rw-header { height: var(--rw-header-h-mobile); }
	.rw-header__inner { grid-template-columns: auto 1fr; }
	.rw-nav { display: none; }
	.rw-logo { width: 110px; grid-column: 1; }
	.rw-header.is-scrolled .rw-logo, body.no-hero .rw-logo { width: 96px; }
	.rw-burger { display: block; grid-column: 2; }
	/* The burger stays visible over any content, header background comes only when scrolled */
}

/* ---- Hero ----------------------------------------------------------------- */
.rw-hero { position: relative; width: 100%; height: clamp(320px, 52vw, 760px); overflow: hidden; background: var(--rw-light); }
.rw-hero .rw-hero__img, .rw-hero .rw-placeholder, .rw-hero__video { width: 100%; height: 100%; object-fit: cover; object-position: var(--rw-hero-pos, center center); }
.rw-hero__video { position: absolute; inset: 0; }
.rw-hero .splide, .rw-hero .splide__track, .rw-hero .splide__list, .rw-hero .splide__slide { height: 100%; }
.rw-hero .splide__slide img { width: 100%; height: 100%; object-fit: cover; }
.rw-hero .splide__pagination { bottom: 1rem; }
/* Hero slider / fader arrows: white, vertically centred at the edges, soft shadow for legibility over any photo */
.rw-hero .rw-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; display: inline-grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; opacity: 0.85; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); transition: opacity var(--rw-ease); }
.rw-hero .rw-hero__arrow:hover { color: #fff; opacity: 1; }
.rw-hero .rw-hero__arrow svg { width: 32px; height: 32px; fill: none; }
/* Slider play/pause – same look as the fader's toggle */
.rw-hero .rw-hero__toggle { position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.85); color: var(--rw-text); display: grid; place-items: center; cursor: pointer; transition: background var(--rw-ease), color var(--rw-ease); }
.rw-hero .rw-hero__toggle:hover { background: var(--rw-accent); color: #fff; }
.rw-hero .rw-hero__toggle svg { width: 20px; height: 20px; display: block; } /* spans keep core CSS display (it hides one of the two icons) */
.rw-hero__arrow.splide__arrow--prev, .rw-hero__arrow.rw-fader__arrow--prev { left: var(--rw-gutter); }
.rw-hero__arrow.splide__arrow--next, .rw-hero__arrow.rw-fader__arrow--next { right: var(--rw-gutter); }
@media (max-width: 767px) { .rw-hero .rw-hero__arrow { width: 40px; height: 40px; } .rw-hero .rw-hero__arrow svg { width: 24px; height: 24px; } }
.rw-hero__fader, .rw-hero__fader .rw-fader__stage { height: 100%; }
/* Hero height options (page Hero panel / Portfolio settings). Default = full banner; shallow still clears the header. */
.rw-hero--h-tall { height: max(380px, calc(100svh - 200px)); } /* viewport height minus ~200px, so the next section peeps in below */
.rw-hero--h-medium { height: clamp(280px, 36vw, 540px); }
.rw-hero--h-shallow { height: clamp(220px, 24vw, 380px); }
@media (max-width: 767px) {
	.rw-hero { height: clamp(260px, 70vw, 480px); }
	.rw-hero--h-tall { height: max(320px, calc(100svh - 160px)); }
	.rw-hero--h-medium { height: clamp(220px, 52vw, 360px); }
	.rw-hero--h-shallow { height: clamp(180px, 40vw, 280px); }
}

/* ---- Splide shared chrome --------------------------------------------- */
.splide__arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--rw-accent); opacity: 1; background: none; transition: color var(--rw-ease); }
.splide__arrow svg { width: 26px; height: 26px; fill: none; }
.splide__arrow:hover { color: var(--rw-primary); }
.splide__arrow:disabled { opacity: 0.3; }
.splide__pagination { display: flex; gap: 6px; justify-content: center; padding: 0; margin: 0; list-style: none; }
.splide__pagination__page { width: 12px; height: 2px; border-radius: 0; background: var(--rw-mid); opacity: 1; transition: background var(--rw-ease); }
.splide__pagination__page.is-active { background: var(--rw-primary); transform: none; }
.splide__slide { list-style: none; }

/* ---- Project cards ---------------------------------------------------- */
.rw-card { position: relative; }
.rw-card__link { display: block; color: #fff; }
.rw-card__media { position: relative; overflow: hidden; aspect-ratio: 9 / 7; background: var(--rw-light); }
.rw-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.rw-card__link:hover .rw-card__media img { transform: scale(1.04); }
.rw-card__media::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); }
.rw-card__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.rw-card__title { font-family: var(--rw-sans); font-size: 1.25rem; font-weight: 400; line-height: 1.2; }
.rw-card__cat { font-size: 0.875rem; opacity: 0.9; }
/* Hover: text stays white. The whole caption sits translated down by the synopsis height (clipped by the card),
   so on hover it rises from the very bottom edge of the image while the synopsis fades in behind it. */
.rw-card__link, .rw-card__link:hover, .rw-card__link:focus-visible { color: #fff; }
/* Clip on the card (the caption's positioning parent) so the shifted caption never shows below the image */
.rw-card { overflow: hidden; }
.rw-card__caption { --rw-syn: calc(2.9rem + 0.4rem + 0.15rem); /* synopsis height (2 lines × 1.45 × 1rem) + its margin + the caption gap */ transform: translateY(var(--rw-syn)); transition: transform 0.7s ease; }
.rw-card__synopsis { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; line-height: 1.45; height: 2.9rem; margin-top: 0.4rem; opacity: 0; transition: opacity 1s ease; }
.rw-card__link:hover .rw-card__caption, .rw-card__link:focus-visible .rw-card__caption { transform: translateY(0); }
.rw-card__link:hover .rw-card__synopsis, .rw-card__link:focus-visible .rw-card__synopsis { opacity: 1; transition: opacity 1.1s ease 0.25s; }
.rw-card__caption:not(:has(.rw-card__synopsis)) { transform: none; }
.rw-card__link:hover .rw-card__media::after { inset: 20% 0 0; }
.rw-card__media::after { transition: inset 0.7s ease; }
.rw-card__excerpt { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--rw-text); opacity: 0.85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rw-grid { display: grid; gap: 2rem; }
.rw-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .rw-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rw-grid--3 { grid-template-columns: 1fr; } }

/* ---- Quote ---------------------------------------------------------------- */
.rw-quote { margin: 0; text-align: center; }
/* Orphan control: balance = even line lengths (quotes, headings); pretty = no lone word on the last line (paragraphs).
   Chrome/Edge/Safari; Firefox has balance only; others wrap as normal. */
.rw-quote p, .entry-content .rw-quote p, :is(h1, h2, h3, h4) { text-wrap: balance; } /* .entry-content .rw-quote p outranks the paragraph rule below */
.entry-content p, .rw-scroll__text p, .rw-card__synopsis { text-wrap: pretty; }
.rw-quote p { font-family: var(--rw-serif); font-size: var(--wp--preset--font-size--large); line-height: 1.45; margin: 0 0 0.75em; }
.rw-quote cite { display: block; font-style: normal; font-family: var(--rw-sans); font-size: 0.875rem; color: var(--rw-primary); }
/* Project sidebar quote: as the design – a huge pale mark spanning the column, text set over its lower half */
.rw-project__side { container-type: inline-size; }
/* Quote text lines up with the intro paragraph: offset = title height (font-size × line-height 1 + its margins). */
.rw-quote--mark { --rw-quote-offset: calc(var(--wp--preset--font-size--xx-large) * 0.9 + 0.5rem); position: relative; text-align: left; padding-top: var(--rw-quote-offset); }
.rw-quote__mark { position: absolute; top: calc(var(--rw-quote-offset) - 48cqw); left: -4%; font-family: var(--rw-serif); font-size: 190cqw; line-height: 1; color: var(--rw-mid); opacity: 0.45; pointer-events: none; user-select: none; z-index: 0; }
.rw-quote--mark p, .rw-quote--mark cite { position: relative; z-index: 1; }
.rw-quote--mark p { font-size: 1.1875rem; /* 19px */ line-height: 1.5; margin-top: 0; }
.rw-quote--mark p + p { margin-top: 0.75em; }
.rw-quote--mark cite { text-align: left; }
@supports not (font-size: 1cqw) { .rw-quote--mark { padding-top: 2.5rem; } .rw-quote__mark { font-size: 20rem; top: -5rem; } }

/* ---- Portfolio archive ------------------------------------------------ */
.rw-archive__intro { text-align: center; max-width: 60ch; margin: -1rem auto 2rem; }
.rw-filter { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: var(--wp--preset--spacing--40); }
.rw-filter__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rw-filter__pill { display: inline-block; padding: 0.4em 0.9em; font-family: var(--rw-sans); font-size: 0.8125rem; letter-spacing: 0.03em; background: var(--rw-primary); color: #fff; transition: background var(--rw-ease); }
.rw-filter__pill--tag { background: var(--rw-light); color: var(--rw-text); }
.rw-filter__pill:hover, .rw-filter__pill.is-active { background: var(--rw-accent); color: #fff; }
.rw-post-list__item + .rw-post-list__item { margin-top: 2rem; }
.pagination, .rw-pagination { margin-top: var(--wp--preset--spacing--50); }
.pagination .nav-links { display: flex; justify-content: center; gap: 0.5rem; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 0.5rem; color: var(--rw-text); border: 1px solid var(--rw-light); }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--rw-primary); color: #fff; border-color: var(--rw-primary); }
.pagination .page-numbers svg { width: 18px; height: 18px; }

/* ---- Single project ----------------------------------------------------- */
.rw-project__grid { display: grid; gap: 2.5rem; padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--50); }
.rw-project--has-award .rw-project__grid { grid-template-columns: 150px minmax(0, 1fr) clamp(260px, 20vw, 380px); } /* quote column: 380px from ~1900px wide */
.rw-project--no-award .rw-project__grid { grid-template-columns: minmax(0, 1fr) clamp(260px, 20vw, 380px); }
.rw-project__title { font-size: var(--wp--preset--font-size--xx-large); margin-bottom: 0.5rem; line-height: 1; margin-top: -0.1em; } /* pull the cap-height up to the row's top edge (Baskerville carries ~0.1em of space above its caps) */
.rw-project__intro { margin-bottom: 1.5rem; }
.rw-project__intro p { margin-bottom: 0; }
.entry-content--project > * { padding-left: 0; padding-right: 0; }
.entry-content--project > .alignfull { width: 100%; }
/* Left column: logos first, then award ribbons, all stacked. First item sits on the grid row's top edge (same line as
   title + quote); every following item gets the same gap whether it's a logo or a ribbon. */
/* NB: not ".rw-logo" – that's the header site logo (fluid width) and would override the column. */
.rw-project__award { min-width: 0; } /* grid items default to min-width:auto; pin the column to its track */
.rw-project-logo, .rw-ribbon { margin-top: 0; }
.rw-project-logo + .rw-project-logo, .rw-project-logo + .rw-ribbon, .rw-ribbon + .rw-ribbon { margin-top: 1.25rem; }
.rw-project-logo img, .rw-ribbon img { width: 100%; max-width: 100%; height: auto; display: block; } /* award artwork already carries its ribbon/background – just place it */
.rw-project__side { font-size: 0.875rem; }
.rw-project__meta { margin: 2rem 0 0; }
.rw-project__meta dt { font-family: var(--rw-sans); color: var(--rw-text); margin-top: 1rem; }
.rw-project__meta dd { margin: 0.25rem 0 0; font-family: var(--rw-serif); }
.rw-project__meta dd a { color: var(--rw-primary); }
.rw-project__links { list-style: none; margin: 2rem 0 0; padding: 0; font-family: var(--rw-serif); }
.rw-project__links li + li { margin-top: 1.5rem; }
/* Tablet / phone: title, intro and gallery stack full width; below a full-width keyline the award ribbon sits to
   the left of the quote (grid with explicit row/column placement – the ribbon is first in the DOM for desktop).
   The quote mark is sized in container units (cqw) on desktop – once the sidebar is wide that would be huge, so it
   gets a fixed size here instead. */
@media (max-width: 900px) {
	.rw-project--no-award .rw-project__grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.rw-project--has-award .rw-project__grid { grid-template-columns: 100px minmax(0, 1fr); gap: 0 1.5rem; }
	.rw-project--has-award .rw-project__main { grid-column: 1 / -1; grid-row: 1; }
	.rw-project--has-award .rw-project__award { grid-column: 1; grid-row: 2; align-self: start; }
	.rw-project--has-award .rw-project__side { grid-column: 2; grid-row: 2; }
	.rw-project--has-award .rw-project__main { border-bottom: 1px solid var(--rw-light); padding-bottom: 2rem; margin-bottom: 2rem; } /* the keyline, full content width */
	.rw-project--no-award .rw-project__side { border-top: 1px solid var(--rw-light); padding-top: 2rem; }
	.rw-project__title { margin-top: 0; }
	.rw-project__side { max-width: 640px; overflow-x: clip; }
	.rw-quote--mark { --rw-quote-offset: 2.75rem; }
	.rw-quote__mark { font-size: 17rem; top: -1.5rem; left: -0.75rem; }
	.rw-project__meta { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}
@media (max-width: 600px) {
	.rw-project--has-award .rw-project__grid { grid-template-columns: 80px minmax(0, 1fr); gap: 0 1rem; }
	.rw-project__title { font-size: var(--wp--preset--font-size--x-large); }
	.rw-quote__mark { font-size: 12rem; top: -1rem; }
	.rw-quote--mark { --rw-quote-offset: 2rem; }
}

/* ---- Footer ----------------------------------------------------------------- */
.rw-footer { background: var(--rw-primary); color: #fff; font-family: var(--rw-sans); font-size: 1rem; /* 16px */ margin-top: var(--wp--preset--spacing--50); }
.rw-footer a { color: #fff; }
.rw-footer a:hover { color: var(--rw-text); }
.rw-footer__inner { max-width: var(--rw-content); margin: 0 auto; padding: 2.5rem var(--rw-gutter); display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: start; }
.rw-footer p { font-size: inherit; } /* WP applies the body paragraph size to every <p>; footer runs at 13px throughout */
.rw-footer__menu, .rw-footer__legal { list-style: none; margin: 0; padding: 0; }
.rw-footer__menu li { line-height: 1.7; }
.rw-footer__col--centre { text-align: center; }
.rw-footer__seal { margin: 0 auto 1rem; }
.rw-footer__contact { margin: 0 0 0.75rem; }
.rw-footer__sep { margin: 0 0.5rem; opacity: 0.7; }
.rw-footer__legal { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.rw-footer__legal li + li::before { content: "|"; margin-right: 0.5rem; opacity: 0.7; }
.rw-footer__col--address { text-align: right; }
.rw-footer__address, .rw-footer__hours { margin: 0 0 1rem; line-height: 1.5; }
.rw-social { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; gap: 0.75rem; }
.rw-social svg { width: 20px; height: 20px; }
.rw-social--dark { justify-content: center; margin-top: 2rem; }
.rw-social--dark a { color: var(--rw-primary); }
.rw-footer__bar { background: #fff; color: var(--rw-primary); font-size: 0.875rem; /* 14px */ }
.rw-footer__bar-inner { max-width: var(--rw-content); margin: 0 auto; padding: 1rem var(--rw-gutter); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rw-footer__bar a { color: var(--rw-primary); }
.rw-footer__bar a:hover { color: var(--rw-accent); }
@media (max-width: 767px) {
	.rw-footer__inner { grid-template-columns: 1fr; text-align: center; }
	.rw-footer__col--address { text-align: center; }
	.rw-social { justify-content: center; }
}

/* ---- Play button (shared by video block + gallery) ------------------------- */
.rw-play { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--rw-primary); display: grid; place-items: center; cursor: pointer; transition: background var(--rw-ease), color var(--rw-ease), transform var(--rw-ease); } /* small white disc + chevron, same family as the header burger / hero toggle */
.rw-play svg { width: 20px; height: 20px; margin-left: 2px; fill: none; }
.rw-play:hover { background: var(--rw-accent); color: #fff; transform: translate(-50%, -50%) scale(1.06); }

/* ---- Lightbox ------------------------------------------------------------------ */
.rw-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,24,26,0.94); display: grid; place-items: center; padding: 3rem; }
.rw-lightbox[hidden] { display: none; }
.rw-lightbox__stage { max-width: 1400px; width: 100%; height: 100%; display: grid; place-items: center; grid-template-rows: 1fr auto; }
.rw-lightbox__stage img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; object-fit: contain; }
.rw-lightbox__stage.is-video iframe { width: min(100%, 1400px); aspect-ratio: 16 / 9; height: auto; max-height: calc(100vh - 8rem); border: 0; }
.rw-lightbox__stage figcaption { color: #fff; font-size: 0.875rem; padding-top: 0.75rem; text-align: center; }
.rw-lightbox__close, .rw-lightbox__prev, .rw-lightbox__next { position: absolute; color: #fff; font-size: 2.5rem; line-height: 1; width: 48px; height: 48px; display: grid; place-items: center; opacity: 0.8; }
.rw-lightbox__close:hover, .rw-lightbox__prev:hover, .rw-lightbox__next:hover { opacity: 1; color: var(--rw-primary); }
.rw-lightbox__close { top: 0.75rem; right: 0.75rem; }
.rw-lightbox__prev { left: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 3.5rem; }
.rw-lightbox__next { right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 3.5rem; }
.rw-lightbox__count { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.75rem; opacity: 0.7; }
@media (max-width: 767px) { .rw-lightbox { padding: 3rem 0.5rem; } }

/* ---- Forms (WPForms base) ------------------------------------------------- */
.wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container textarea, .rw-search input {
	width: 100%; border: 1px solid var(--rw-mid); background: #fff; padding: 0.7em 0.9em; font: inherit; color: var(--rw-text); border-radius: 0;
}
.wpforms-container input:focus, .wpforms-container textarea:focus { outline: none; border-color: var(--rw-primary); }
.wpforms-container button[type="submit"], .rw-search button { font-family: var(--rw-serif); font-weight: 700; background: var(--rw-primary); color: #fff; border: 0; border-radius: 0 3px 0 3px; padding: 0.6em 1.2em; cursor: pointer; }
.wpforms-container button[type="submit"]:hover, .rw-search button:hover { background: var(--rw-accent); }
/* WPForms' own stylesheet has very specific selectors (div.wpforms-container-full button[type=submit].wpforms-submit),
   so the theme button look needs !important to win. */
.wpforms-container .wpforms-submit { font-family: var(--rw-serif) !important; font-weight: 700 !important; font-size: 0.9375rem !important; background: var(--rw-primary) !important; color: #fff !important; border: 0 !important; border-radius: 0 3px 0 3px !important; padding: 0.6em 1.2em !important; }
.wpforms-container .wpforms-submit:hover { background: var(--rw-accent) !important; }

/* ---- Map beside the form (WP Go Maps Pro) ------------------------------------
   Add the class "rw-map-match" to the map's Column: the map stretches to the column height so it always lines up
   with the form. !important because the plugin writes its height inline. */
.wp-block-columns .wpforms-container, .wp-block-columns div.wpforms-container-full { margin: 0; } /* WPForms adds top/bottom margins that throw the map alignment off */
.wp-block-column.rw-map-match { display: flex; flex-direction: column; align-self: stretch !important; } /* a "Top" vertical alignment on the column would otherwise stop it stretching */
.wp-block-column.rw-map-match > * { flex: 1 1 auto; margin: 0; }
.rw-map-match .wpgmza_map, .rw-map-match [id^="wpgmza_map"] { height: 100% !important; min-height: 320px; }
@media (max-width: 781px) { .rw-map-match .wpgmza_map, .rw-map-match [id^="wpgmza_map"] { height: 360px !important; } } /* stacked: nothing to match, so a plain height */
.rw-search { display: flex; gap: 0.5rem; }