/*
Theme Name: TOL Theme
Theme URI: https://theoddlayout.sg
Author: The Odd Layout Pte. Ltd.
Description: Lightweight block theme for The Odd Layout. No page builder required.
Version: 0.1.110
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: tol-theme
*/

html { scroll-behavior: smooth; }

.tol-header { position: sticky; top: 0; z-index: 20; background: var(--wp--preset--color--base); }
.tol-logo { margin: 0; line-height: 0; }
.tol-logo img { height: auto; display: block; }
.tol-header .wp-block-site-title a { text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }
.tol-header .wp-block-navigation a { text-decoration: none; letter-spacing: 0.04em; }

/* Home: header floats over the hero and inverts over light or dark sections. */
.home .tol-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; color: #fff; transition: background-color .25s ease; }
.home .tol-header a, .home .tol-header .wp-block-navigation-item__content, .home .tol-header .wp-block-navigation__responsive-container-open { color: #fff; }
.home .tol-header .tol-logo img { filter: brightness(0) invert(1); }
.home .tol-header:has(.is-menu-open) .wp-block-navigation__responsive-container-open { color: inherit; }
.admin-bar.home .tol-header { top: 32px; }
.home .wp-site-blocks > main, .home main > * { margin-block-start: 0 !important; }
.home main > .tol-marquee { margin-block-start: -4rem !important; }

/* Transparent tagline strip that sits over the bottom of the hero video. */
.tol-marquee { position: relative; z-index: 2; margin-top: -4rem; height: 4rem; box-sizing: border-box; overflow: hidden; background: transparent; color: var(--wp--preset--color--white); border-top: 1px solid rgba(255, 255, 255, .28); padding: 1.15rem 0; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.tol-marquee__track { display: inline-flex; gap: 3rem; animation: tol-marquee 36s linear infinite; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.08em; text-transform: uppercase; }
.tol-marquee__track span { flex: none; }
@keyframes tol-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tol-marquee__track { animation: none; } }

/* Pinned heading beside scrolling principles (desktop only). */
.tol-values { gap: 3rem; }
.tol-values > .tol-values__sticky { position: sticky; top: 7rem; align-self: flex-start; }
.tol-item { border-top: 1px solid rgba(17, 17, 17, .35); padding: 2rem 0 5rem; }
.tol-item:first-child { margin-top: 0; }
.tol-item h3 { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; }
@media (max-width: 781px) {
	.tol-values__sticky { position: static; }
	.tol-item { padding-bottom: 2.5rem; }
}

/* Pages: text blocks keep side padding; full-width sections (patterns) run edge to edge. */
.wp-block-post-content > *:not(.alignfull) { padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; }
.wp-block-post-content > .alignfull { max-width: none; }

/* "How we work" explainer: vertical video in a phone-shaped frame. */
.tol-explainer .wp-block-columns { gap: 4rem; }
.tol-explainer__wrap { max-width: 320px; margin: 0 auto; }
.tol-explainer__video { margin: 0; width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(17, 17, 17, .25); }
.tol-explainer__video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tol-summary { margin: 1.25rem 0 1.75rem; max-width: 46ch; }
.tol-summary summary { cursor: pointer; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.08em; }
.tol-summary p { margin-top: 0.75rem; }
@media (max-width: 781px) { .tol-explainer .wp-block-columns { gap: 2.5rem; } .tol-explainer__wrap { max-width: 300px; } }

/* Hero video (optional hero.mp4). */
.tol-hero { position: relative; overflow: hidden; }
.tol-hero__video, .tol-hero > .tol-hero__video { position: absolute; top: 0; left: 0; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; object-fit: cover; z-index: 0; }
.tol-hero.has-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 17, 17, .30), rgba(17, 17, 17, .62)); z-index: 0; pointer-events: none; }
.tol-hero > *:not(.tol-hero__video) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .tol-hero__video { display: none; } }

.tol-row { border-top: 1px solid rgba(17, 17, 17, .35); padding-top: 2rem; margin-top: 2rem; gap: 2rem; }
.tol-row h3 { margin: 0; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; }
.tol-subhead { margin-top: 0; font-family: var(--wp--preset--font-family--display); }

.tol-hero { background-image: linear-gradient(160deg, #1d1b18 0%, #111 65%); background-size: cover; background-position: center; }
.tol-hero { min-height: 88vh; display: flex; flex-direction: column; justify-content: flex-end; }
.tol-hero { padding-left: max(1.5rem, calc((100% - 1240px) / 2)) !important; padding-right: 1.5rem !important; }
.tol-hero > * { margin-left: 0 !important; margin-right: auto !important; }
.tol-hero h1 { max-width: 14ch; }
.tol-hero p { max-width: 46ch; }

.tol-card { height: 100%; border-top: 1px solid currentColor; padding-top: 1.25rem; }
.tol-step-number { font-family: var(--wp--preset--font-family--display); opacity: 0.55; }

.wp-block-button__link { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; }
.is-style-outline > .wp-block-button__link { border-width: 1px; }

.tol-form-embed { display: block; width: 100%; max-width: 100%; height: 2300px; border: 0; background: #fff; }
@media (max-width: 600px) { .tol-form-embed { height: 2600px; } }

.tol-footer a { color: var(--wp--preset--color--white); text-decoration: none; }
.tol-footer a:hover { text-decoration: underline; }

@media (max-width: 781px) {
	.tol-hero { min-height: 70vh; }
}

/* ===== Magazine layer (HID structure, editorial typography) ===== */
:root { --tol-rule: rgba(17, 17, 17, .45); --tol-rule-soft: rgba(17, 17, 17, .22); }

/* Micro-labels: small mono caps, like a magazine section tag. */
.tol-label { font-family: var(--wp--preset--font-family--label); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1.25rem; opacity: .75; }
.tol-label--center { text-align: center; }
.tol-marquee__track, .tol-step-number { font-family: var(--wp--preset--font-family--label); }
.tol-textlink { font-family: var(--wp--preset--font-family--label); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none !important; border-bottom: 1px solid currentColor; padding-bottom: 0.2rem; color: inherit !important; }
.tol-textlink:hover { opacity: .7; }

/* Headlines: large serif, tight. */
.wp-site-blocks h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.wp-block-post-title { font-size: clamp(2.6rem, 6vw, 5rem) !important; border-bottom: 1px solid var(--tol-rule); padding-bottom: 2rem; margin-bottom: 3rem; }
.tol-hero h1 { font-size: clamp(2.8rem, 7vw, 6.5rem); line-height: .98; max-width: 14ch; }
.tol-hero__kicker { font-style: italic; opacity: .92; margin-bottom: 1rem; }
.tol-hero__sub { max-width: 46ch; margin-top: 1.5rem; }

/* Menu: mono caps, hairline under the bar, boxed call to action. */
.tol-header .wp-block-navigation a, .tol-header .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--label); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.tol-header { border-bottom: 1px solid var(--tol-rule-soft); }
.home .tol-header { border-bottom-color: rgba(255, 255, 255, .25); }
.tol-nav-cta > a { border: 1px solid currentColor; padding: 0.55rem 1rem; border-radius: 16px 0 16px 0; }

/* Principles: giant numerals, italic subheads, hairlines. */
.tol-num { display: block; font-family: var(--wp--preset--font-family--display); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; text-transform: none; margin-bottom: 0.75rem; opacity: .9; }
.tol-subhead { font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.25; margin-bottom: 1rem; }
.tol-values__sub { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.25rem; opacity: .8; }
.tol-item { border-top-color: var(--tol-rule); }

/* Homes index: a magazine contents list. */
.tol-toc { list-style: none; margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--tol-rule); }
.tol-toc li { position: relative; display: grid; grid-template-columns: 4rem 1fr 1.4fr 2rem; gap: 1.5rem; align-items: baseline; padding: 1.75rem 0; border-bottom: 1px solid var(--tol-rule-soft); }
.tol-toc__num { font-family: var(--wp--preset--font-family--label); font-size: 0.75rem; letter-spacing: 0.14em; opacity: .6; }
.tol-toc__title { font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -0.02em; text-decoration: none; }
.tol-toc__title::after { content: ""; position: absolute; inset: 0; }
.tol-toc li:hover .tol-toc__title { font-style: italic; }
.tol-toc__desc { opacity: .85; }
.tol-toc__go { text-align: right; font-size: 1.4rem; }
@media (max-width: 781px) { .tol-toc li { grid-template-columns: 2.5rem 1fr; gap: 0.75rem 1rem; } .tol-toc__desc { grid-column: 2; } .tol-toc__go { display: none; } }

/* Pull quote close. */
.tol-closing { border-top: 1px solid var(--tol-rule); }
.tol-closing h2 { font-style: italic; font-size: clamp(2.6rem, 7vw, 6rem) !important; line-height: 1; max-width: 16ch; margin-left: auto; margin-right: auto; }
.tol-closing .wp-block-buttons { margin-top: 3rem; }

/* Footer wordmark, like a magazine masthead. */
.tol-wordmark { font-family: var(--wp--preset--font-family--display); font-size: clamp(2.2rem, 9.5vw, 8.5rem); line-height: .9; letter-spacing: -0.03em; margin: 3rem 0 1.5rem; white-space: nowrap; overflow: hidden; }

/* About: lead paragraph with a drop cap. */
.slug-about .wp-block-post-content > p:first-of-type { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.45; }
.slug-about .wp-block-post-content > p:first-of-type::first-letter { float: left; font-size: 4.6em; line-height: .8; padding: 0.08em 0.12em 0 0; }

/* Method: solid principles strip. */
.tol-marquee.tol-marquee--band { margin-top: 0; height: auto; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); border-top: 0; text-shadow: none; padding: 1rem 0; }
.home main > .tol-marquee.tol-marquee--band { margin-block-start: 0 !important; }
.wp-block-post-content > .tol-marquee--band { padding-left: 0; padding-right: 0; }

/* ===== Projects (HID-style cards and project pages) ===== */
.tol-projects .wp-block-post-template { gap: 3rem 2.5rem; }
.tol-projects .wp-block-post-featured-image { margin-bottom: 1rem; overflow: hidden; }
.tol-projects .wp-block-post-featured-image img { transition: transform .6s ease; }
.tol-projects li:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.tol-projects .wp-block-post-title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 0.4rem; border: 0; padding: 0; }
.tol-projects .wp-block-post-title a { text-decoration: none; }
.tol-projects .wp-block-post-title a:hover { font-style: italic; }
.tol-project-meta { margin: 0; }
.tol-project-meta p { margin: 0; }
.single-project .wp-block-post-title { font-size: clamp(2.6rem, 6vw, 5rem) !important; }
.single-project .wp-block-post-featured-image { margin: 2rem 0 4rem; }
.single-project .wp-block-post-content h3 { font-family: var(--wp--preset--font-family--label); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: .75; border-top: 1px solid var(--tol-rule); padding-top: 1.25rem; margin-top: 3rem; }
.single-project .wp-block-gallery { margin: 3rem 0; gap: 1rem; }
.single-project .wp-block-gallery img { height: 100%; object-fit: cover; }
.tol-backlink { margin: 4rem auto 5rem; }

/* Project meta line sits flush with the title. */
.single-project .tol-project-meta { max-width: 1240px; width: 100%; margin-left: auto; margin-right: auto; }
.tol-featured .tol-project-meta, .tol-projects .tol-project-meta { max-width: none; }

/* ===== Edge-to-edge pictures: no borders, frames, gaps, radii or shadows ===== */
.tol-projects--bleed { margin: 0; }
.tol-projects--bleed .wp-block-post-template { gap: 0; margin: 0; padding: 0; }
.tol-projects--bleed li { position: relative; overflow: hidden; margin: 0; }
.tol-projects--bleed .wp-block-post-featured-image { margin: 0; border: 0; }
.tol-projects--bleed .wp-block-post-featured-image img { display: block; width: 100%; border-radius: 0; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.tol-projects--bleed li:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.tol-projects--bleed li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 17, 17, 0) 40%, rgba(17, 17, 17, .72)); pointer-events: none; z-index: 1; }
.tol-projects--bleed .wp-block-post-title { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 3.2rem; margin: 0; z-index: 2; color: #fff; border: 0; padding: 0; }
.tol-projects--bleed .wp-block-post-title a { color: #fff; }
.tol-projects--bleed .tol-project-meta { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.4rem; z-index: 2; color: #fff; opacity: .9; margin: 0; }
@media (max-width: 781px) { .tol-projects--bleed .wp-block-post-template { grid-template-columns: 1fr !important; } }
.single-project .wp-block-gallery { --wp--style--unstable-gallery-gap: 0px; gap: 0; }
.single-project .wp-block-gallery .wp-block-image { margin: 0; }
.single-project .wp-block-gallery img, .single-project .wp-block-post-featured-image img { border-radius: 0; }
.tol-explainer__video { border-radius: 0; box-shadow: none; }

/* ===== Feature photo: one static picture, filters change live as you scroll (home.js sets --p from 0 to 1) ===== */
.tol-feature { --p: 1; position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: flex-end; background: #111; color: #fff; }
.tol-feature__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
	filter: grayscale(calc(1 - var(--p))) brightness(calc(.5 + .5 * var(--p))) saturate(calc(.75 + .25 * var(--p)));
	transform: scale(calc(1.16 - .16 * var(--p))); will-change: filter, transform; }
.tol-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 17, 17, 0) 45%, rgba(17, 17, 17, .65)); z-index: 1; pointer-events: none; }
.tol-feature__text { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 1.5rem 6rem; box-sizing: border-box; }
.tol-feature__text h2 { color: #fff; font-size: clamp(2.4rem, 6vw, 5.2rem) !important; max-width: 17ch; margin: 0; }
.tol-feature__text .tol-label { color: #fff; }
@media (max-width: 781px) {
	.tol-feature { min-height: 80vh; }
	.tol-feature__img { filter: grayscale(calc(1 - var(--p))) brightness(calc(.5 + .5 * var(--p))); }
}
@media (prefers-reduced-motion: reduce) { .tol-feature__img { filter: none; transform: none; } }

/* ===== Scroll reveals (only when home.js is running) ===== */
.tol-js .tol-reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.tol-js .tol-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tol-js .tol-reveal { opacity: 1; transform: none; transition: none; } }

/* ===== Travertine section: stone texture behind wording ===== */
.tol-travertine { background-color: #e2d9c7; background-image: linear-gradient(90deg, rgba(255, 253, 248, .55), rgba(255, 253, 248, .12) 68%), url("assets/travertine.webp"); background-size: cover; background-position: center; color: var(--wp--preset--color--ink); }
.tol-travertine h2 { font-size: clamp(2.2rem, 5vw, 4.2rem) !important; max-width: 15ch; }
@media (max-width: 781px) { .tol-travertine { background-image: linear-gradient(rgba(255, 253, 248, .45), rgba(255, 253, 248, .45)), url("assets/travertine.webp"); } }




/* ===== Two pictures under the hero: edge to edge, no borders ===== */
.tol-pair { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.tol-pair figure { margin: 0; overflow: hidden; height: min(88vh, 860px); background: #d8cfbc; }
.tol-pair img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.tol-pair figure:hover img { transform: scale(1.04); }
.home main > .tol-pair, .home main > section.tol-pair { margin-block-start: 0 !important; }
@media (max-width: 781px) { .tol-pair { grid-template-columns: 1fr; } .tol-pair figure { height: 62vh; } }

/* ===== Our Projects scroll stack: full-screen panels that slide over one another ===== */
.tol-stack .wp-block-post-template { display: block; list-style: none; margin: 0; padding: 0; counter-reset: proj; }
.tol-stack li { --cover: 0; position: sticky; top: 0; height: 100vh; height: 100svh; margin: 0; padding: 0; overflow: hidden; counter-increment: proj; background: #111; }
.tol-stack li .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; height: 100%; }
.tol-stack li .wp-block-post-featured-image a { display: block; height: 100%; }
.tol-stack li .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; border-radius: 0;
	transform: scale(calc(1 - .07 * var(--cover))); filter: brightness(calc(1 - .6 * var(--cover))); transition: none; will-change: transform, filter; }
.tol-stack li:hover .wp-block-post-featured-image img { transform: scale(calc(1 - .07 * var(--cover))); }
.tol-stack li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 17, 17, .25) 0%, rgba(17, 17, 17, 0) 30%, rgba(17, 17, 17, 0) 55%, rgba(17, 17, 17, .75) 100%); pointer-events: none; z-index: 1; }
.tol-stack li::before { content: counter(proj, decimal-leading-zero); position: absolute; top: 6.5rem; left: 1.5rem; z-index: 2; color: #fff; font-family: var(--wp--preset--font-family--label); font-size: 0.75rem; letter-spacing: 0.14em; }
.tol-stack .wp-block-post-title { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 4.2rem; margin: 0; z-index: 2; color: #fff; border: 0; padding: 0; font-size: clamp(2.4rem, 6vw, 5.2rem) !important; max-width: 14ch; }
.tol-stack .wp-block-post-title a { color: #fff; text-decoration: none; }
.tol-stack .tol-project-meta { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 2rem; z-index: 2; color: #fff; opacity: .92; margin: 0; }
@media (prefers-reduced-motion: reduce) { .tol-stack li .wp-block-post-featured-image img { transform: none; filter: none; } }

/* ===== Principles over two pinned pictures (home): edge to edge, live filters ===== */
.tol-values-bg { --pl: 1; --pr: 1; overflow: clip; position: relative; background: #111; color: #fff; margin: 0; }
.tol-values-bg__media { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; z-index: 0; }
.tol-values-bg__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(17, 17, 17, .50), rgba(17, 17, 17, .42) 50%, rgba(17, 17, 17, .55)); }
.tol-values-bg__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; will-change: transform; }
.tol-values-bg__img--l { filter: grayscale(calc(1 - var(--pl))) brightness(calc(.55 + .45 * var(--pl))) saturate(calc(.8 + .2 * var(--pl))); transform: scale(calc(1.12 - .12 * var(--pl))); }
.tol-values-bg__img--r { filter: grayscale(calc(1 - var(--pr))) brightness(calc(.55 + .45 * var(--pr))) saturate(calc(.8 + .2 * var(--pr))); transform: scale(calc(1.12 - .12 * var(--pr))); }
.tol-values-bg__content { position: relative; z-index: 2; }
.tol-values-bg h2, .tol-values-bg h3, .tol-values-bg p, .tol-values-bg .tol-label { color: #fff; }
.tol-values-bg .tol-item { border-top-color: rgba(255, 255, 255, .45); }
.tol-values-bg .tol-values__sub { opacity: .9; }
.tol-values-bg .tol-values__sticky, .tol-values-bg .tol-item { text-shadow: 0 1px 14px rgba(17, 17, 17, .35); }
@media (max-width: 781px) {
	.tol-values-bg__media { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
	.tol-values-bg__img--l, .tol-values-bg__img--r { filter: grayscale(calc(1 - var(--pl))) brightness(calc(.55 + .45 * var(--pl))); }
}
@media (prefers-reduced-motion: reduce) { .tol-values-bg__img--l, .tol-values-bg__img--r { filter: none; transform: none; } }

/* Fix: on phones the principles heading must not stay pinned (the desktop rule is more specific, so match it). */
@media (max-width: 781px) { .tol-values > .tol-values__sticky { position: static; } }


/* ===== Where to find us: photoshoot picture behind the wording ===== */
.tol-findus--photo { background-image: linear-gradient(90deg, rgba(17, 17, 17, .84), rgba(17, 17, 17, .5)), url("assets/findus-bg.jpg"); background-size: cover; background-position: center 46%; }


/* Live film grain over the project photos: drifts continuously and thickens as the next panel covers it */
.tol-stack li .wp-block-post-featured-image::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("assets/grain-1.png"); background-size: 160px 160px; opacity: .4; animation: tol-grain .7s steps(1) infinite; }
@keyframes tol-grain { 0% { background-image: url("assets/grain-1.png"); } 16.6% { background-image: url("assets/grain-2.png"); } 33.3% { background-image: url("assets/grain-3.png"); } 50% { background-image: url("assets/grain-4.png"); } 66.6% { background-image: url("assets/grain-5.png"); } 83.3% { background-image: url("assets/grain-6.png"); } }
@media (prefers-reduced-motion: reduce) { .tol-stack li .wp-block-post-featured-image::after { animation: none; } }
/* Wavy ripple on the principles pictures: ripples at first, settles flat as they come into colour */
.tol-values-bg__img--l, .tol-values-bg__img--r { filter: url(#tol-wave) grayscale(calc(1 - var(--pl))) brightness(calc(.55 + .45 * var(--pl))) saturate(calc(.8 + .2 * var(--pl))); transform: scale(1.08); }
.tol-values-bg__img--r { filter: url(#tol-wave) grayscale(calc(1 - var(--pr))) brightness(calc(.55 + .45 * var(--pr))) saturate(calc(.8 + .2 * var(--pr))); transform: scale(1.08); }
@media (max-width: 781px) { .tol-values-bg__img--l { filter: url(#tol-wave) grayscale(calc(1 - var(--pl))) brightness(calc(.55 + .45 * var(--pl))); transform: scale(1.1); } .tol-values-bg__img--r { filter: url(#tol-wave) grayscale(calc(1 - var(--pr))) brightness(calc(.55 + .45 * var(--pr))); transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .tol-values-bg__img--l, .tol-values-bg__img--r { filter: none; transform: none; } .tol-wave-defs animate { display: none; } }

/* Smoother and lighter: grain only runs on the panel being looked at; hero video fades in and dips softly at the loop point */
.tol-stack li:not(.is-live) .wp-block-post-featured-image::after { animation-play-state: paused; }
.tol-hero__video { opacity: 0; transition: opacity 1.1s ease; }
.tol-hero__video.is-playing { opacity: 1; }
.tol-hero__video.is-ending { opacity: 0; transition-duration: .7s; }
.tol-hero > .tol-hero__kicker, .tol-hero > h1, .tol-hero > .tol-hero__sub, .tol-hero > p:last-child { animation: tol-rise 1s cubic-bezier(.2, .7, .2, 1) backwards; }
.tol-hero > h1 { animation-delay: .12s; }
.tol-hero > .tol-hero__sub { animation-delay: .24s; }
.tol-hero > p:last-child { animation-delay: .36s; }
@keyframes tol-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tol-hero__video { opacity: 1; transition: none; } .tol-hero > * { animation: none !important; } }
/* Bigger tap areas for small links, without changing how they look */
.tol-textlink, .tol-footer a { position: relative; }
.tol-textlink::before, .tol-footer a::before { content: ""; position: absolute; inset: -.75rem -.5rem; }

/* Alignment: bullets sit inside the text column, and solid and outline buttons share one size and shape */
.wp-block-list { list-style: none; padding-left: 0; }
.wp-block-list > li { position: relative; padding-left: 1.15rem; }
.wp-block-list > li::before { content: ""; position: absolute; left: 0; top: .78em; width: .32rem; height: .32rem; border-radius: 50%; background: currentColor; }
.wp-block-buttons { align-items: center; gap: .9rem; }
.wp-block-button .wp-block-button__link { box-sizing: border-box; padding: .9rem 1.75rem; border: 1px solid transparent; border-radius: 16px 0 16px 0; font-size: .75rem; line-height: 1.4; }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1px solid currentColor; background: transparent; color: var(--wp--preset--color--ink); padding: .9rem 1.75rem; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
/* One left edge: page titles and text start where the logo, hero and footer start, instead of floating in a centred column */
@media (min-width: 782px) {
	main > .wp-block-post-title:not(.alignwide),
	.wp-block-post-content.alignfull > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)) { margin-left: max(1.5rem, calc((100% - 1240px) / 2)) !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 1.5rem !important; max-width: 720px; box-sizing: content-box; }
}
.single-project .wp-block-post-content > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)) { margin-left: 0 !important; margin-right: auto !important; max-width: 720px; }

/* Map: full width, no border, sits straight under the project panels */
.tol-map { position: relative; z-index: 3; margin: 0; padding: 0; line-height: 0; background: #111; }
.tol-map__frame { display: block; width: 100%; height: clamp(320px, 56vh, 600px); border: 0; margin: 0; padding: 0; }

/* While the ripple is still (scrolling, or off screen) the pictures drop the ripple filter altogether */
.tol-values-bg.is-flat .tol-values-bg__img--l { filter: grayscale(calc(1 - var(--pl))) brightness(calc(.55 + .45 * var(--pl))) saturate(calc(.8 + .2 * var(--pl))); }
.tol-values-bg.is-flat .tol-values-bg__img--r { filter: grayscale(calc(1 - var(--pr))) brightness(calc(.55 + .45 * var(--pr))) saturate(calc(.8 + .2 * var(--pr))); }
/* Phone menu: beige panel with dark links, and the close X sits exactly where the menu icon was */
.wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--ink) !important; padding: 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 8rem 1.5rem 2rem; align-items: flex-start; justify-content: flex-start; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; align-items: flex-start; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--ink) !important; font-family: var(--wp--preset--font-family--display); font-size: 1.9rem; letter-spacing: -0.01em; text-transform: none; }
.wp-block-navigation__responsive-container.is-menu-open .tol-nav-cta .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--label); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 16px 0 16px 0; padding: .8rem 1.4rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: 1.4rem; right: 1.5rem; left: auto; margin: 0; padding: 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--ink) !important; }

.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 1.6rem; height: 1.6rem; }
html.has-modal-open .home .tol-header .tol-logo img { filter: none; position: relative; z-index: 100001; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; align-items: flex-start; justify-content: flex-start; text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .tol-nav-cta { margin-top: .75rem; }

/* Menu icon like HID: two hairlines, the lower one shorter and right-aligned; it draws out on hover. The close icon is two hairlines crossed. */
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { position: relative; width: 2.4rem; height: 2rem; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { display: none; }
.wp-block-navigation__responsive-container-open::before, .wp-block-navigation__responsive-container-open::after { content: ""; position: absolute; right: 0; height: 1px; background: currentColor; transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.wp-block-navigation__responsive-container-open::before { top: calc(50% - 5px); width: 100%; }
.wp-block-navigation__responsive-container-open::after { top: calc(50% + 4px); width: 62%; }
.wp-block-navigation__responsive-container-open:hover::after, .wp-block-navigation__responsive-container-open:focus-visible::after { width: 100%; }
.wp-block-navigation__responsive-container-close::before, .wp-block-navigation__responsive-container-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.7rem; height: 1px; background: currentColor; }
.wp-block-navigation__responsive-container-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.wp-block-navigation__responsive-container-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { width: 2.4rem; height: 2rem; top: 1.4rem; right: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .wp-block-navigation__responsive-container-open::before, .wp-block-navigation__responsive-container-open::after { transition: none; } }
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }

/* Home header slips up out of sight past the first section and returns on scroll up */
.home .tol-header { transition: transform .45s cubic-bezier(.2, .7, .2, 1), background-color .25s ease; }
.home .tol-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .home .tol-header { transition: none; } }
/* Phone menu: keep the links clear of the logo row */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 8rem !important; }
/* Hero video copies fade over each other for a gapless loop */
.tol-hero__video { transition: opacity 1.2s linear; }
.tol-hero__video.is-ending { opacity: 1; }
.tol-hero__video--b { z-index: 1; }

/* Where to find us: map on the left, dark address panel on the right, edge to edge, no borders */
.tol-map { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(420px, 64vh, 680px); background: #111; color: #fff; line-height: 1.5; }
.tol-map__media { position: relative; min-height: 320px; }
.tol-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tol-map__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 2rem; gap: 0; }
.tol-map__panel .tol-label { color: #fff; opacity: .7; margin: 0 0 1rem; }
.tol-map__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.02em; color: #fff; margin: 0 0 2.5rem; }
.tol-map__addr { font-size: 1.35rem; margin: 0 0 1rem; color: #fff; }
.tol-map__note { margin: 0 0 2rem; color: #fff; opacity: .8; max-width: 30ch; }
.tol-map__links { display: flex; flex-direction: column; gap: 1.1rem; align-items: center; margin: 0; }
.tol-map__links a { color: #fff !important; }
@media (max-width: 781px) { .tol-map { grid-template-columns: 1fr; } .tol-map__media { min-height: 340px; } .tol-map__panel { padding: 3.5rem 1.5rem; } }
/* Closing banner: a full-width picture with the closing line on the right */
.tol-closing { border-top: 0; background-color: #111; background-size: cover; background-position: center; color: #fff; min-height: clamp(380px, 60vh, 620px); display: flex; flex-direction: column; justify-content: center; }
.tol-closing h2 { color: #fff; text-align: right; font-style: italic; font-size: clamp(2.2rem, 4.4vw, 4rem) !important; line-height: 1.05; max-width: 16ch; margin-left: auto !important; margin-right: 0 !important; }
.tol-closing .wp-block-buttons { justify-content: flex-end; margin-top: 2rem; }
.tol-closing .wp-block-button__link { background: #fff; color: #111; }
.tol-closing .wp-block-button__link:hover { background: var(--wp--preset--color--accent); color: #fff; }

/* Footer: our existing footer on the left, a photo on the right */
.tol-footer--split { display: grid; grid-template-columns: 58% 42%; padding: 0 !important; margin: 0; }
.tol-footer__main { padding: 4rem 2.5rem 2rem max(1.5rem, calc((100vw - 1240px) / 2)); min-width: 0; }
.tol-footer__main .wp-block-columns { flex-wrap: wrap !important; gap: 2rem 2.5rem; }
.tol-footer__main .wp-block-column { flex-basis: 40% !important; flex-grow: 1; min-width: 160px; }
.tol-footer__main .wp-block-column:first-child { flex-basis: 100% !important; }
.tol-footer__main .tol-wordmark { font-size: clamp(2rem, 5.4vw, 5.2rem); }
.tol-footer__photo { background: url("assets/findus-bg.jpg") center / cover no-repeat; min-height: 420px; margin: 0 !important; padding: 0 !important; }
@media (max-width: 781px) {
	.tol-footer--split { grid-template-columns: 1fr; }
	.tol-footer__main { padding: 3rem 1.5rem 2rem; }
	.tol-footer__photo { min-height: 320px; }
	.tol-closing h2 { text-align: left; margin-left: 0 !important; }
	.tol-closing .wp-block-buttons { justify-content: flex-start; }
}
.tol-footer__invite { margin: 2.5rem 0 0; font-size: 1.05rem; line-height: 1.6; color: #fff; opacity: .88; max-width: 44ch; }

.tol-footer--split, .wp-site-blocks > footer.wp-block-template-part, .wp-site-blocks > * + footer { margin-block-start: 0 !important; }

/* Closing banner alignment: the line and the button share one right edge, inside the same frame as the rest of the page */
.tol-closing { align-items: stretch; }
.tol-closing > h2, .tol-closing > .wp-block-buttons { width: 100%; max-width: 1240px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
.tol-closing > h2 { max-width: 1240px; text-align: right; margin-bottom: 0; }
.tol-closing > .wp-block-buttons { justify-content: flex-end; }
@media (max-width: 781px) { .tol-closing > h2 { text-align: left; } .tol-closing > .wp-block-buttons { justify-content: flex-start; } }
/* Map: hide Google's white address card in the top-left by pushing it above the visible frame */
.tol-map__media { overflow: hidden; }
.tol-map__frame { top: -210px; height: calc(100% + 210px); }
/* Home sections sit flush against each other, with no gap strips between them */
.home main > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* Our Projects: the title sits on top of the first picture, panels never shrink, so the picture runs edge to edge with no band above and no dark borders */
.tol-featured { position: relative; }
.tol-featured .tol-featured__head { position: absolute; top: 0; left: 0; right: 0; z-index: 4; pointer-events: none; margin: 0 !important; }
.tol-featured .tol-featured__head h2, .tol-featured .tol-featured__head .tol-label { color: #fff; text-shadow: 0 2px 24px rgba(17, 17, 17, .45); }
.tol-stack li .wp-block-post-featured-image img, .tol-stack li:hover .wp-block-post-featured-image img { transform: none !important; }
.tol-stack li:first-child::after { background: linear-gradient(180deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 0) 38%, rgba(17, 17, 17, 0) 55%, rgba(17, 17, 17, .75) 100%); }
.tol-stack li::before { top: auto; bottom: 2rem; left: auto; right: 1.5rem; }
/* Our Projects title: no banner. The words float, with no background, over every picture from the 1st to the 6th and scroll away after the last */
.tol-featured .tol-featured__head { position: sticky; top: 0; left: auto; right: auto; height: 0; padding: 0 !important; margin: 0 !important; overflow: visible; z-index: 5; pointer-events: none; background: transparent; }
.tol-featured .tol-featured__head > * { transform: translateY(7.5rem); }
.tol-stack li::after { background: linear-gradient(180deg, rgba(17, 17, 17, .5) 0%, rgba(17, 17, 17, 0) 36%, rgba(17, 17, 17, 0) 55%, rgba(17, 17, 17, .75) 100%); }
/* No beige strip above the first project picture: the project block has no gap between its own parts */
.tol-featured > *, .tol-featured > * + * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.tol-stack, .tol-stack .wp-block-post-template { margin: 0 !important; padding: 0; }

/* Our Projects title: a real box (not zero height) pinned over the pictures. It stays inside the project block, so at the 6th picture it slides up with it and never sits over the next section. */
.tol-featured .tol-featured__head { position: sticky; top: 0; height: 15rem; padding: 7rem 0 0 !important; margin: 0 !important; overflow: hidden; box-sizing: border-box; z-index: 5; pointer-events: none; background: transparent; }
.tol-featured .tol-featured__head > * { transform: none; }
.tol-featured > .tol-stack { margin-block-start: -15rem !important; }
@media (max-width: 781px) { .tol-featured .tol-featured__head { height: 13rem; padding-top: 6.5rem !important; } .tol-featured > .tol-stack { margin-block-start: -13rem !important; } }
/* Footer photo reacts to the cursor, like HID: on hover it swings out to the left and its left edge turns to a slant */
.tol-footer__main { position: relative; z-index: 1; }
.tol-footer__photo { position: relative; z-index: 2; background: none !important; }
.tol-footer__photo::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url("assets/findus-bg.jpg") center / cover no-repeat; }
@media (min-width: 782px) and (hover: hover) {
	.tol-footer__photo::before { left: -8%; clip-path: polygon(7.4% 0, 100% 0, 100% 100%, 7.4% 100%); transition: clip-path .75s cubic-bezier(.2, .7, .2, 1); will-change: clip-path; }
	.tol-footer__photo:hover::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 3.5% 100%); }
}
@media (prefers-reduced-motion: reduce) { .tol-footer__photo::before { transition: none !important; } }
/* 2 + 6: the Our Projects title is a full-screen-tall pinned box, so it leaves together with the 6th picture and sits at the same top-left spot as on the 1st; side padding restored so it lines up on phones too */
.tol-featured .tol-featured__head { height: 100vh; height: 100svh; padding: 7rem 1.5rem 0 !important; }
.tol-featured > .tol-stack { margin-block-start: -100vh !important; margin-block-start: -100svh !important; }
.tol-featured .tol-featured__head > * { max-width: 1240px; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 781px) { .tol-featured .tol-featured__head { height: 100vh; height: 100svh; padding: 6rem 1.5rem 0 !important; } .tol-featured > .tol-stack { margin-block-start: -100vh !important; margin-block-start: -100svh !important; } }
/* 5: footer wording sits on the left */
.tol-footer__main, .tol-footer__main > *, .tol-footer__main p, .tol-footer__invite { text-align: left !important; }
.tol-footer__main > * { margin-left: 0 !important; margin-right: auto !important; }
/* Back to top: a pill that bobs gently in the bottom-left corner of the footer picture */
.tol-footer__photo .tol-backtop-btn { position: absolute; left: 2rem; bottom: 2rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; padding: .95rem 2.2rem; background: #E8742A; color: #fff !important; font-family: var(--wp--preset--font-family--label); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none !important; border-radius: 16px 0 16px 0; box-shadow: 0 10px 28px rgba(17, 17, 17, .35); animation: tol-bob 1.8s ease-in-out infinite; }
.tol-footer__photo .tol-backtop-btn::before { display: none; }
.tol-footer__photo .tol-backtop-btn:hover { background: #fff; color: #111 !important; animation-play-state: paused; }
@keyframes tol-bob { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-12px); } 60% { transform: translateY(-12px); } 80% { transform: translateY(0); } 90% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tol-footer__photo .tol-backtop-btn { animation: none; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 781px) { .tol-map__panel { align-items: flex-start; text-align: left; } .tol-map__links { align-items: flex-start; } .tol-map__note { max-width: none; } }

/* map: separate view for phones so the pin sits mid-way */
.tol-map__media .tol-map__frame--m{display:none}
@media (max-width:781px){.tol-map__media .tol-map__frame--d{display:none}.tol-map__media .tol-map__frame--m{display:block}}

/* footer text sits at a fixed left gutter on wide screens instead of the 1240px column */
@media (min-width:782px){.tol-footer__main{padding-left:3.5rem !important}}

/* FAQ page: plain question and answer list that search engines and visitors can both read */
.tol-faq { max-width: 720px; margin: 2rem auto 0; padding: 0 1.5rem; }
.tol-faq__item { border-top: 1px solid rgba(17,17,17,.18); }
.tol-faq__item:last-of-type { border-bottom: 1px solid rgba(17,17,17,.18); }
.tol-faq__q { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; font-family: var(--wp--preset--font-family--heading, inherit); font-size: 1.15rem; line-height: 1.4; position: relative; }
.tol-faq__q::-webkit-details-marker { display: none; }
.tol-faq__q::after { content: "+"; position: absolute; right: 0; top: 1.1rem; font-size: 1.5rem; line-height: 1; color: #E8742A; transition: transform .25s ease; }
.tol-faq__item[open] > .tol-faq__q::after { transform: rotate(45deg); }
.tol-faq__q:focus-visible { outline: 2px solid #E8742A; outline-offset: 2px; }
.tol-faq__a { padding: 0 2.5rem 1.4rem 0; }
.tol-faq__a p { margin: 0; line-height: 1.7; }
.tol-faq__a a { text-decoration: underline; text-underline-offset: 3px; }
.tol-faq__more { margin: 2rem 0 0; }
/* home header stays transparent with the white logo all the way down (owner, 30 Oct 2026) */

/* FAQ: intro, topic links, grouped headings */
.tol-faq__intro { margin: 0 0 1.5rem; line-height: 1.7; }
.tol-faq__toc ul { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.tol-faq__toc a { display: inline-block; padding: .4rem .9rem; border: 1px solid rgba(17,17,17,.25); border-radius: 999px; text-decoration: none; font-size: .85rem; }
.tol-faq__toc a:hover, .tol-faq__toc a:focus-visible { border-color: #E8742A; color: #E8742A; }
.tol-faq__group { margin-top: 2.75rem; scroll-margin-top: 6rem; }
.tol-faq__title { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 1rem; line-height: 1.25; }
.tol-faq__q h3 { margin: 0; font: inherit; line-height: inherit; }
.tol-faq__item:last-of-type { border-bottom: 0; }
.tol-faq__group .tol-faq__item:last-child { border-bottom: 1px solid rgba(17,17,17,.18); }
.tol-faq { margin-top: 1.5rem; }
/* FAQ lines up with the page title and the other inner pages (left edge, not a centred column) */
.tol-faq { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 1.5rem; padding: 0 1.5rem 0 max(1.5rem, calc((100% - 1240px) / 2)); }
.tol-faq > * { max-width: 720px; }

/* ===== Smoother scrolling (0.1.110): darkening is a plain black layer instead of a brightness filter, the grain slides on the graphics card instead of repainting, and the ripple filter is dropped the moment you scroll ===== */
/* Project panels: the next panel covering one darkens it. Same look as before (a 60% black at full cover), but changing a layer's opacity costs almost nothing. */
.tol-stack li .wp-block-post-featured-image img { filter: none; will-change: transform; }
.tol-stack li .wp-block-post-featured-image::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #000; opacity: calc(.6 * var(--cover)); }
@media (prefers-reduced-motion: reduce) { .tol-stack li .wp-block-post-featured-image::before { opacity: 0; } }
/* Film grain: one picture that jumps between six positions. Moving a layer is done by the graphics card, so nothing is repainted. */
.tol-stack li .wp-block-post-featured-image::after { inset: -160px; background-image: url("assets/grain-1.png"); background-size: 160px 160px; animation: tol-grain-move .7s steps(1) infinite; will-change: transform; }
@keyframes tol-grain-move { 0% { transform: translate(0, 0); } 16.6% { transform: translate(-37px, -91px); } 33.3% { transform: translate(-110px, -23px); } 50% { transform: translate(-64px, -128px); } 66.6% { transform: translate(-142px, -57px); } 83.3% { transform: translate(-18px, -139px); } }
@media (prefers-reduced-motion: reduce) { .tol-stack li .wp-block-post-featured-image::after { animation: none; } }
/* Principles pictures: only the grey-to-colour filter stays on the pictures; the dimming is a black layer above them. */
.tol-values-bg__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / calc(.45 * (1 - var(--pl)))) 50%, rgb(0 0 0 / calc(.45 * (1 - var(--pr)))) 50%); }
.tol-values-bg__img--l { filter: url(#tol-wave) grayscale(calc(1 - var(--pl))); }
.tol-values-bg__img--r { filter: url(#tol-wave) grayscale(calc(1 - var(--pr))); }
.tol-values-bg.is-flat .tol-values-bg__img--l { filter: grayscale(calc(1 - var(--pl))); }
.tol-values-bg.is-flat .tol-values-bg__img--r { filter: grayscale(calc(1 - var(--pr))); }
@media (max-width: 781px) {
	.tol-values-bg__media::before { background: linear-gradient(180deg, rgb(0 0 0 / calc(.45 * (1 - var(--pl)))) 50%, rgb(0 0 0 / calc(.45 * (1 - var(--pr)))) 50%); }
	.tol-values-bg__img--l { filter: url(#tol-wave) grayscale(calc(1 - var(--pl))); }
	.tol-values-bg__img--r { filter: url(#tol-wave) grayscale(calc(1 - var(--pr))); }
	.tol-values-bg.is-flat .tol-values-bg__img--l { filter: grayscale(calc(1 - var(--pl))); }
	.tol-values-bg.is-flat .tol-values-bg__img--r { filter: grayscale(calc(1 - var(--pr))); }
}
@media (prefers-reduced-motion: reduce) { .tol-values-bg__media::before { opacity: 0; } .tol-values-bg__img--l, .tol-values-bg__img--r, .tol-values-bg.is-flat .tol-values-bg__img--l, .tol-values-bg.is-flat .tol-values-bg__img--r { filter: none; } }
/* Feature photo: same idea. */
.tol-feature__img { filter: grayscale(calc(1 - var(--p))); }
.tol-feature::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgb(0 0 0 / calc(.5 * (1 - var(--p)))); }
@media (max-width: 781px) { .tol-feature__img { filter: grayscale(calc(1 - var(--p))); } }
@media (prefers-reduced-motion: reduce) { .tol-feature__img { filter: none; } .tol-feature::before { background: none; } }