/*
Theme Name:  Eden Portfolio
Theme URI:   https://slategrey-lapwing-113514.hostingersite.com
Description: Child theme of Hello Elementor – the personal portfolio of Eden Haziza, graphic designer. Hebrew, full RTL, custom home page built from the Figma design.
Author:      Eden Haziza
Template:    hello-elementor
Version:     1.0.5
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eden-portfolio
*/

/* =========================================================================
   1. Tokens & base
   ========================================================================= */
:root {
	--mint: #a1e5af;
	--pink: #e66cb3;
	--paper: #f3d9dc;
	--paper-dark: #e1caca;
	--paper-note: #e1caca;   /* sampled from the sticky-note image */
	--tape: #e9c2ae;
	--green-dark: #0b3d28;
	--green-bg: #0e8a67;
	--black: #000;
	--white: #fff;

	--font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--radius-pill: 999px;
	--shadow-card: 0 10px 30px rgba(0, 0, 0, 0.28);
	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	direction: rtl;
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
	-webkit-text-size-adjust: 100%;

	/* The page never scrolls sideways. `overflow-x: hidden` on the body alone
	 * does not clip the fixed header, which can reach past the viewport on a
	 * phone and leave a bare strip to pan into. */
	overflow-x: hidden;
	overflow-x: clip;
}

body.eden-home {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font);
	font-weight: 400;
	color: var(--black);
	text-align: right;
	direction: rtl;
	overflow-x: hidden;
	overflow-x: clip;

	/* Green cutting-mat background over a fallback colour. The file is the mat
	 * with a mirrored copy of itself underneath, the way the Figma frame
	 * alternates the artwork, so however tall the page grows the tiles join
	 * without a seam. */
	background-color: var(--green-bg);
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
		url('/wp-content/uploads/2026/09/mat-tile.webp');
	background-repeat: repeat;
	background-position: center top;

	/* Below 1100px the mat stops shrinking with the screen: on a phone a tile
	 * sized to the viewport turns the grid into fine mesh that restarts every
	 * couple of hundred pixels. Holding it at 1100px keeps the grid close to
	 * the size it has on a desktop and simply crops the sides. */
	background-size: auto, clamp(1100px, 100vw, 1941px) auto;
}

body.modal-open {
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

figure {
	margin: 0;
}

button {
	font-family: inherit;
}

a {
	color: inherit;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	right: 16px;
	z-index: 200;
	padding: 10px 18px;
	background: var(--pink);
	color: #fff;
	border-radius: var(--radius-pill);
	text-decoration: none;
	font-weight: 700;
}

.skip-link:focus {
	top: 16px;
}

/* =========================================================================
   2. Buttons & pills
   ========================================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s var(--ease-out), filter 0.25s, box-shadow 0.25s;
}

.btn--pink {
	background: var(--pink);
	color: var(--white);
}

.btn:hover,
.btn:focus-visible {
	filter: brightness(1.07);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.btn:focus-visible,
.card:focus-visible,
.nav-pill a:focus-visible,
.social__link:focus-visible,
.modal__close:focus-visible,
.hero__arrow:focus-visible {
	outline: 3px solid var(--pink);
	outline-offset: 4px;
}

.btn--small {
	min-width: 92px;
	height: 39px;
	padding: 0 20px;
	font-size: 20px;
}

.btn.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mint);
	color: var(--black);
	border-radius: var(--radius-pill);
	font-weight: 700;
}

/* =========================================================================
   3. Header – fixed pill navigation
   ========================================================================= */
.site-header {
	position: fixed;
	top: clamp(16px, 3.65vw, 70px);
	right: 0;
	left: 0;
	z-index: 50;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.nav-pill {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(678px, 92vw);
	height: clamp(50px, 4.4vw, 84px);
	padding: 0 clamp(22px, 4.2vw, 80px);
	background: var(--mint);
	border-radius: var(--radius-pill);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.nav-pill a {
	font-size: clamp(15px, 1.25vw, 24px);
	font-weight: 700;
	color: var(--black);
	text-decoration: none;
	white-space: nowrap;
	padding: 6px 2px;
	border-radius: 6px;
	transition: color 0.2s, transform 0.2s;
}

.nav-pill a:hover {
	color: var(--pink);
	transform: translateY(-1px);
}

/* =========================================================================
   4. Hero
   ========================================================================= */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(110px, 9vw, 170px) 4vw clamp(40px, 4vw, 60px);
	overflow: hidden;
}

.hero__center {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero__title {
	/* 60% of the width like Figma, but never taller than the viewport allows. */
	width: min(1159px, 60vw, 100vh);
	height: auto;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.18));
}

.hero__arrow {
	display: block;
	width: clamp(26px, 3.07vw, 59px);
	margin-top: 4px;
	line-height: 0;
	animation: arrow-bounce 1.6s ease-in-out infinite;
}

.hero__arrow svg {
	width: 100%;
	height: auto;
}

@keyframes arrow-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(12px); }
}

/* Floating software icons – side lanes only, never over the title/note. */
.hero__icons {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.hero__icon {
	position: absolute;
	bottom: -180px;
	width: var(--size);
	height: var(--size);
	opacity: 0;
	will-change: transform, opacity;
	animation: rise-tall var(--dur) linear var(--delay) infinite;
}

.hero__icon--right {
	right: var(--lane);
	animation-name: rise-short;
}

.hero__icon--left {
	left: var(--lane);
}

/* Right lane: fades out around the middle of the screen. */
@keyframes rise-short {
	0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
	8%   { opacity: 1; }
	26%  { opacity: 0.95; }
	37%  { opacity: 0; }
	100% { transform: translateY(-120vh) rotate(var(--spin)); opacity: 0; }
}

/* Left lane: rises much higher before fading. */
@keyframes rise-tall {
	0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
	7%   { opacity: 1; }
	72%  { opacity: 0.9; }
	92%  { opacity: 0; }
	100% { transform: translateY(-125vh) rotate(var(--spin)); opacity: 0; }
}

/*
 * main.js takes the icons over and re-draws side, lane, size, speed and spin
 * on every cycle. The keyframes above stay as the no-JavaScript fallback.
 */
.hero__icons.is-js .hero__icon {
	animation: none;
}

/* Sticky note – "Let's talk" */
.note {
	position: relative;
}

.note--hero {
	position: absolute;
	z-index: 3;
	top: 25.5%;
	right: 7.5%;
	width: clamp(150px, 15.6vw, 300px);
	aspect-ratio: 736 / 785;
	background: url('/wp-content/uploads/2026/09/918ce62d-e6c9-4669-9606-f29aeb43d0d3-7.png') center / contain no-repeat;
	transform: rotate(7.11deg);
	text-align: center;
}

/*
 * Centred on the paper itself, not on the image box: the artwork carries tape
 * above the sheet and a shadow below it, so the paper's centre sits at
 * 49.05% / 51.97% of the file (measured from the PNG's alpha + colour).
 * Percentages here resolve against .note--hero because it is positioned.
 */
.note--hero .note__body {
	position: absolute;
	left: 49.05%;
	top: 51.97%;
	width: max-content;
	max-width: 88%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 1vw, 20px);
}

.note__title {
	margin: 0;
	font-size: clamp(20px, 2.1vw, 40px);
	font-weight: 800;
	color: var(--black);
	line-height: 1;
	transform: rotate(0.4deg);
}

.note--hero .btn {
	width: clamp(86px, 7.45vw, 143px);
	height: clamp(30px, 2.55vw, 49px);
	font-size: clamp(13px, 1.25vw, 24px);
}

/* =========================================================================
   5. Works
   ========================================================================= */
.works {
	padding: clamp(50px, 3.6vw, 70px) 4vw 0;
	text-align: center;
}

.works__title {
	max-width: 1100px;
	margin: 0 auto clamp(36px, 3.5vw, 68px);
	font-size: clamp(19px, 1.875vw, 36px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--white);
	text-align: center;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.filters {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(12px, 2.3vw, 45px);
	margin: 0 0 clamp(36px, 3.3vw, 63px);
	padding: 0;
}

.filters .pill {
	min-width: clamp(120px, 10.5vw, 201px);
	height: clamp(44px, 3.6vw, 69px);
	padding: 0 clamp(24px, 3vw, 58px);
	font-size: clamp(16px, 1.25vw, 24px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 348px));
	justify-content: center;
	gap: clamp(20px, 2.1vw, 40px) clamp(20px, 2.1vw, 40px);
	max-width: 1512px;
	margin: 0 auto;
	direction: ltr; /* matches the Figma layout – 5th card sits under the 1st column */
}

.card {
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	border-radius: clamp(24px, 2.15vw, 41px);
	overflow: hidden;
	aspect-ratio: 348 / 318;
	cursor: pointer;
	box-shadow: var(--shadow-card);
	transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}

.card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease-out);
}

.card:hover,
.card:focus-visible {
	transform: scale(1.05) rotate(-2deg);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38);
	z-index: 2;
}

.card:hover img {
	transform: scale(1.06);
}

/* =========================================================================
   6. About
   ========================================================================= */
.about {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(30px, 4vw, 70px);
	max-width: 1700px;
	margin: 0 auto;
	padding: clamp(60px, 5vw, 95px) 4vw 0;
}

.about__note {
	position: relative;
	transform: rotate(-2.63deg);
	margin-top: clamp(10px, 2vw, 40px);
}

/* hard offset shadow like the Figma sticker (cheaper than filter: drop-shadow) */
.about__note::before {
	content: '';
	position: absolute;
	inset: 0;
	transform: translate(-12px, 14px);
	background: rgba(0, 0, 0, 0.16);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 100px 100%, 0 calc(100% - 100px));
	z-index: 0;
}

.note--about {
	z-index: 1;
}

.note--about {
	position: relative;
	background: var(--paper-note);
	padding: clamp(60px, 7.5vw, 132px) clamp(28px, 5vw, 92px) clamp(60px, 6.5vw, 110px) clamp(28px, 5.5vw, 100px);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 100px 100%, 0 calc(100% - 100px));
}

/* tape */
.note--about::before {
	content: '';
	position: absolute;
	top: -2.2%;
	left: 50%;
	width: 48%;
	height: clamp(34px, 5vw, 92px);
	background: var(--tape);
	opacity: 0.88;
	transform: translateX(-50%) rotate(-2deg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* folded corner */
.note--about::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100px;
	height: 100px;
	background: linear-gradient(to bottom left, #d6bcbc 50%, transparent 50%);
}

.bio {
	position: relative;
	z-index: 1;
	font-size: clamp(15px, 1.2vw, 23px);
	line-height: 1.3;
	color: var(--black);
}

.bio p {
	margin: 0 0 1.05em;
}

.bio p:last-child {
	margin-bottom: 0;
}

.bio__heading {
	font-size: clamp(19px, 1.46vw, 28px);
	font-weight: 600;
	margin-bottom: 0.15em !important;
}

/* photos */
.about__photos {
	position: relative;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 640 / 1020;
	justify-self: start;
}

.photo {
	position: absolute;
	margin: 0;
	transform: rotate(var(--rot, 0deg));
}

.photo--big   { --rot: 0deg;       left: 12%;  top: 2.5%;  width: 69.7%; z-index: 1; }
.photo--mid   { --rot: -12.92deg;  left: 45%;  top: 39.8%; width: 48.75%; z-index: 3; }
.photo--small { --rot: 6.79deg;    left: 4.8%; top: 48.7%; width: 46.4%; z-index: 2; }

.photo__swing {
	transform-origin: 50% 0;
	transform: rotate(var(--sway, 0deg));
	will-change: transform;
}

.photo__idle {
	transform-origin: 50% 0;
	animation: idle-sway 6.5s ease-in-out infinite;
}

.photo--mid .photo__idle   { animation-duration: 7.8s; animation-delay: -2.1s; }
.photo--small .photo__idle { animation-duration: 5.9s; animation-delay: -4s; }

@keyframes idle-sway {
	0%, 100% { transform: rotate(-1.3deg); }
	50%      { transform: rotate(1.3deg); }
}

.photo img:not(.photo__pin) {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
	background: #222;
}

.photo--big img:not(.photo__pin)   { aspect-ratio: 446 / 607; object-position: 50% 48%; }
.photo--mid img:not(.photo__pin)   { aspect-ratio: 312 / 379; object-position: 50% 48%; }
.photo--small img:not(.photo__pin) { aspect-ratio: 297 / 347; object-position: 50% 100%; }

.photo__pin {
	position: absolute;
	z-index: 4;
	top: -3%;
	left: 50%;
	width: clamp(16px, 1.6vw, 26px);
	height: auto;
	transform: translateX(-50%) rotate(var(--pin-rot, 0deg));
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

.photo--big .photo__pin   { --pin-rot: 31deg; left: 46%; }
.photo--mid .photo__pin   { --pin-rot: -8deg; }
.photo--small .photo__pin { --pin-rot: -5deg; left: 58%; }

/* =========================================================================
   7. Contact
   ========================================================================= */
.contact {
	padding: clamp(80px, 10vw, 200px) 4vw 0;
}

.contact-form {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.contact-form__fields {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(10px, 1.2vw, 23px);
}

.field--name    { width: clamp(140px, 9.3vw, 179px); }
.field--phone   { width: clamp(160px, 10.7vw, 206px); }
.field--message { width: clamp(240px, 18.9vw, 362px); }

.pill-input {
	width: 100%;
	height: clamp(46px, 3.2vw, 61px);
	padding: 0 clamp(16px, 1.2vw, 22px);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--mint);
	color: var(--black);
	font: inherit;
	font-size: clamp(16px, 1.05vw, 20px);
	font-weight: 600;
	text-align: right;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.2s;
}

.pill-input::placeholder {
	color: var(--black);
	opacity: 1;
}

.pill-input:focus {
	outline: 0;
	box-shadow: 0 0 0 3px var(--pink), 0 6px 18px rgba(0, 0, 0, 0.15);
}

.contact-form .btn--small {
	margin-top: 24px;
}

.contact-form__status {
	min-height: 1.5em;
	margin: 14px 0 0;
	color: var(--white);
	font-weight: 600;
}

.contact-form__status.is-error {
	color: #ffd1e8;
}

.hp {
	/* Off-screen with clip (a negative `left` creates horizontal overflow in RTL). */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	opacity: 0;
	pointer-events: none;
}

/* =========================================================================
   8. Footer
   ========================================================================= */
.site-footer {
	padding: clamp(80px, 9vw, 175px) 4vw clamp(60px, 6vw, 120px);
	text-align: center;
}

.social {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 12px;
}

.social__link {
	display: inline-block;
	border-radius: 50%;
	line-height: 0;
	transition: transform 0.3s var(--ease-out);
}

.social__link img {
	width: clamp(56px, 4.3vw, 83px);
	height: auto;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}

.social__link:hover,
.social__link:focus-visible {
	transform: scale(1.12) rotate(-6deg);
}

.copyright {
	margin: 0;
	font-size: clamp(18px, 2.08vw, 40px);
	font-weight: 600;
	color: var(--white);
	text-align: center;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* =========================================================================
   9. Modals
   ========================================================================= */
.modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal[hidden] {
	display: none;
}

.modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	opacity: 0;
	transition: opacity 0.22s;
}

.modal__box {
	position: relative;
	background: var(--paper);
	border-radius: 35px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(18px) scale(0.98);
	transition: opacity 0.22s, transform 0.22s var(--ease-out);
	outline: 0;
}

.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__box     { opacity: 1; transform: none; }

/*
 * The cross artwork carries a quarter of its own box as empty margin, so the
 * button is inset far enough that the glyph itself clears the rounded corner
 * instead of sitting in it.
 */
.modal__close {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	z-index: 2;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pink);
	cursor: pointer;
	line-height: 0;
	border-radius: 50%;
	transition: transform 0.2s, background-color 0.2s;
}

.modal__close svg {
	width: 100%;
	height: 100%;
}

.modal__close:hover {
	transform: rotate(90deg);
	background: rgba(230, 108, 179, 0.12);
}

/* project modal */
.modal__box--project {
	width: min(1100px, 100%);
	max-height: calc(100vh - 40px);
	max-height: calc(100svh - 40px);
	display: flex;
	flex-direction: column;
}

.modal__scroll {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(24px, 3vw, 40px);
	border-radius: inherit;
}

.modal__title {
	margin: 0 0 14px;
	padding-inline-start: 78px;
	font-size: clamp(26px, 2.5vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--pink);
}

.modal__text p {
	max-width: 975px;
	margin: 0 0 0.9em;
	font-size: clamp(16px, 1.25vw, 24px);
	line-height: 1.5;
	color: var(--black);
}

.project-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	grid-auto-flow: dense;
	gap: 16px;
	margin-top: clamp(16px, 2vw, 28px);
}

.g-item {
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.g-item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 5 / 7;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}

.g-item:hover img {
	transform: scale(1.03);
}

.g-item--square img { aspect-ratio: 1; }
.g-item--wide       { grid-column: span 2; }
.g-item--wide img   { aspect-ratio: 2 / 1; }
.g-item--tall       { grid-row: span 2; }
.g-item--tall img   { aspect-ratio: auto; }
.g-item--contain img { object-fit: contain; padding: 6%; }
.g-item--flip img   { transform: scaleX(-1); }
.g-item--flip:hover img { transform: scaleX(-1) scale(1.03); }

/* thank-you modal (Figma 167:170) */
.modal__box--thanks {
	width: min(703px, 100%);
	min-height: 200px;
	aspect-ratio: 703 / 255;
	background: var(--paper-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px 24px;
	text-align: center;
}

.modal--thanks .modal__close {
	top: 16px;
	inset-inline-start: 16px;
	width: 60px;
	height: 60px;
	padding: 0;
}

.thanks__title {
	margin: 0;
	font-size: clamp(36px, 2.5vw, 48px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--pink);
}

.thanks__sub {
	margin: 4px 0 0;
	font-size: clamp(18px, 1.25vw, 24px);
	font-weight: 700;
	color: var(--pink);
}

/* =========================================================================
   10. Responsive
   ========================================================================= */
@media (max-width: 1100px) {
	.cards {
		grid-template-columns: repeat(3, minmax(0, 348px));
	}

	.about {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.about__note {
		width: min(100%, 760px);
	}

	.about__photos {
		max-width: 520px;
		margin-top: 30px;
	}

	.note--hero {
		top: auto;
		bottom: 9%;
		right: 5%;
	}
}

@media (max-width: 767px) {
	html {
		scroll-padding-top: 80px;
	}

	.nav-pill {
		width: min(360px, 94vw);
		height: 48px;
		padding: 0 18px;
	}

	.nav-pill a {
		font-size: 14px;
	}

	.hero {
		padding-top: 90px;
		padding-bottom: 130px;
	}

	.hero__title {
		width: 74vw;
	}

	/* Smaller icons hugging the very edges so they stay clear of the title. */
	.hero__icon {
		width: calc(var(--size) * 0.4);
		height: calc(var(--size) * 0.4);
		bottom: -80px;
	}

	.hero__icon--right { right: 1%; }
	.hero__icon--left  { left: 1%; }

	.note--hero {
		width: 148px;
		right: 6%;
		bottom: 3%;
	}

	.works__title br {
		display: none;
	}

	.filters .pill {
		min-width: 0;
		height: 42px;
		padding: 0 20px;
		font-size: 15px;
	}

	.cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.about {
		padding-top: 50px;
	}

	.note--about {
		padding: 56px 22px 60px 24px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%, 0 calc(100% - 64px));
	}

	.note--about::after {
		width: 64px;
		height: 64px;
	}

	.about__note::before {
		transform: translate(-8px, 10px);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%, 0 calc(100% - 64px));
	}

	.about__photos {
		max-width: 340px;
	}

	.contact-form__fields {
		flex-direction: column;
		align-items: center;
	}

	.field--name,
	.field--phone,
	.field--message {
		width: min(100%, 362px);
	}

	.pill-input {
		height: 52px;
	}

	.copyright {
		font-size: 16px;
	}

	.modal {
		padding: 12px;
	}

	.modal__box,
	.modal__box--project {
		border-radius: 24px;
	}

	.modal__box--project {
		max-height: calc(100svh - 24px);
	}

	.modal__close {
		top: 10px;
		inset-inline-start: 10px;
		width: 48px;
		height: 48px;
	}

	.modal__title {
		padding-inline-start: 62px;
	}

	.project-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.g-item--wide {
		grid-column: span 2;
	}

	.modal--thanks .modal__close {
		top: 12px;
		inset-inline-start: 12px;
		width: 50px;
		height: 50px;
	}
}

/* =========================================================================
   11. Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.hero__icon,
	.hero__arrow,
	.photo__idle {
		animation: none;
	}

	.hero__icon {
		opacity: 0.85;
		bottom: auto;
		top: 30%;
	}

	.card,
	.card img,
	.btn,
	.modal__box,
	.modal__backdrop,
	.social__link {
		transition: none;
	}
}


/* =========================================================================
   12. Elementor pages – the site rebuilt as editable Elementor pages.
   The Elementor widgets carry the same class names as the original markup,
   these rules bridge the small differences in Elementor's wrappers.
   ========================================================================= */
body.eden-home .elementor {
	font-family: var(--font);
}

.e-con.eden-nav {
	padding: 0;
	min-height: 0;
	height: 0;
	overflow: visible;
}

.e-con.eden-nav .elementor-widget-html {
	margin: 0;
}

.e-con.hero,
.e-con.works,
.e-con.about,
.e-con.contact,
.e-con.site-footer,
.e-con.project-page,
.e-con.hero__center,
.e-con.note,
.e-con.note__body,
.e-con.cards,
.e-con.about__note,
.e-con.about__photos {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	--row-gap: 0;
	--column-gap: 0;
	gap: 0;
	max-width: none;
}

.e-con.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(110px, 9vw, 170px) 4vw clamp(40px, 4vw, 60px);
}

.e-con.hero > .hero-icons-widget {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 1;
	pointer-events: none;
}

.hero-icons-widget .elementor-widget-container {
	position: absolute;
	inset: 0;
}

.e-con.hero__center {
	position: relative;
	z-index: 2;
	width: auto;
	align-items: center;
}

.e-con.hero__center .hero__title {
	width: min(1159px, 60vw, 100vh);
	margin: 0;
}

.hero__title .elementor-widget-container,
.hero__title img {
	width: 100%;
	display: block;
}

.hero__arrow .elementor-widget-container,
.hero__arrow-link {
	display: block;
	line-height: 0;
}

.e-con.note--hero {
	position: absolute;
	display: block;
	width: clamp(150px, 15.6vw, 300px);
	height: auto;
	min-height: 0;
}

.e-con.note--hero .note__body {
	position: absolute;
	display: flex;
	width: max-content;
	max-width: 88%;
	min-height: 0;
}

.note__title .elementor-heading-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.note__title,
.copyright,
.works__title,
.project-title,
.contact-title {
	margin: 0;
	width: auto;
}

.note-btn .elementor-button,
.btn-back .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--pink);
	color: var(--white);
	font-family: var(--font);
	font-weight: 700;
	line-height: 1;
	transition: transform 0.25s var(--ease-out), filter 0.25s, box-shadow 0.25s;
}

.note-btn .elementor-button:hover,
.btn-back .elementor-button:hover {
	background: var(--pink);
	color: var(--white);
	filter: brightness(1.07);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.note-btn .elementor-button {
	width: clamp(86px, 7.45vw, 143px);
	height: clamp(30px, 2.55vw, 49px);
	font-size: clamp(13px, 1.25vw, 24px);
}

/* Works page */
.e-con.works {
	padding: clamp(110px, 9vw, 170px) 4vw 0;
}

.works__title .elementor-heading-title {
	max-width: 1100px;
	margin: 0 auto;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	text-shadow: inherit;
}

.e-con.works .works__title {
	margin: 0 0 clamp(36px, 3.5vw, 68px);
}

.filters-widget {
	margin: 0;
}

.e-con.cards {
	display: grid;
	width: 100%;
	max-width: 1512px;
}

.e-con.cards .card {
	width: auto;
	margin: 0;
}

.card .elementor-widget-container,
.card .elementor-widget-container > a {
	display: block;
	height: 100%;
}

/* About page */
.e-con.about {
	display: grid;
	padding: clamp(110px, 9vw, 170px) 4vw 0;
}

.e-con.about__note,
.e-con.note--about {
	display: block;
	width: 100%;
	min-height: 0;
}

.e-con.note--about {
	padding: clamp(60px, 7.5vw, 132px) clamp(28px, 5vw, 92px) clamp(60px, 6.5vw, 110px) clamp(28px, 5.5vw, 100px);
}

.bio .elementor-widget-container,
.bio .elementor-widget-container p {
	font-family: var(--font);
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.bio .elementor-widget-container p {
	margin: 0 0 1.05em;
}

.bio .elementor-widget-container p:last-child {
	margin-bottom: 0;
}

.bio .elementor-widget-container p.bio__heading {
	font-size: clamp(19px, 1.46vw, 28px);
	font-weight: 600;
	margin-bottom: 0.15em;
}

.e-con.about__photos {
	display: block;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 640 / 1020;
}

.e-con.about__photos .photo {
	position: absolute;
	margin: 0;
}

.e-con.about__photos .photo--big   { width: 69.7%; }
.e-con.about__photos .photo--mid   { width: 48.75%; }
.e-con.about__photos .photo--small { width: 46.4%; }

.photo .elementor-widget-container {
	transform-origin: 50% 0;
	transform: rotate(var(--sway, 0deg));
	will-change: transform;
}

.photo img {
	transform-origin: 50% 0;
	animation: idle-sway 6.5s ease-in-out infinite;
}

.photo--mid img   { animation-duration: 7.8s; animation-delay: -2.1s; }
.photo--small img { animation-duration: 5.9s; animation-delay: -4s; }

/* the pin, drawn by CSS instead of a second image */
.photo::after {
	content: '';
	position: absolute;
	z-index: 4;
	top: -3%;
	left: 50%;
	width: clamp(16px, 1.6vw, 26px);
	aspect-ratio: 37 / 40;
	background: url('https://blanchedalmond-parrot-450450.hostingersite.com/wp-content/uploads/2026/09/image-83.png') center / contain no-repeat;
	transform: translateX(-50%) rotate(var(--pin-rot, 0deg));
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
	pointer-events: none;
}

.photo--big::after   { --pin-rot: 31deg; left: 46%; }
.photo--mid::after   { --pin-rot: -8deg; }
.photo--small::after { --pin-rot: -5deg; left: 58%; }

/* Contact page */
.e-con.contact {
	padding: clamp(110px, 9vw, 170px) 4vw 0;
}

.contact-title .elementor-heading-title {
	font-family: inherit;
	font-size: clamp(26px, 2.5vw, 48px);
	font-weight: 800;
	color: var(--white);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.e-con.contact .contact-title {
	margin: 0 0 clamp(24px, 2.5vw, 48px);
}

.contact-widget {
	margin: 0;
}

/* Footer */
.e-con.site-footer {
	padding: clamp(80px, 9vw, 175px) 4vw clamp(60px, 6vw, 120px);
}

.social-widget {
	margin: 0;
}

.copyright .elementor-heading-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-align: center;
	text-shadow: inherit;
}

/* Project pages */
.e-con.project-page {
	width: min(1100px, 92vw);
	margin: clamp(110px, 9vw, 170px) auto 0;
	padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(24px, 3vw, 40px);
	background: var(--paper);
	border-radius: 35px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	gap: 0;
}

.project-title .elementor-heading-title {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: clamp(26px, 2.5vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--pink);
}

.project-text .elementor-widget-container p {
	max-width: 975px;
	margin: 0 0 0.9em;
	font-family: var(--font);
	font-size: clamp(16px, 1.25vw, 24px);
	line-height: 1.5;
	color: var(--black);
}

.project-gallery-el {
	margin: clamp(16px, 2vw, 28px) 0 0;
}

.project-gallery-el .gallery {
	columns: 4 190px;
	column-gap: 16px;
	margin: 0;
}

.project-gallery-el .gallery-item {
	display: block;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 16px !important;
	break-inside: avoid;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.project-gallery-el .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	transition: transform 0.5s var(--ease-out);
}

.project-gallery-el .gallery-item:hover img {
	transform: scale(1.03);
}

.btn-back {
	margin: clamp(20px, 2.5vw, 36px) 0 0;
}

.btn-back .elementor-button {
	min-width: 92px;
	height: 39px;
	padding: 0 20px;
	font-size: 20px;
}

@media (max-width: 767px) {
	.e-con.hero {
		padding-top: 90px;
		padding-bottom: 130px;
	}

	.e-con.hero__center .hero__title {
		width: 74vw;
	}

	.e-con.note--hero {
		width: 148px;
	}

	.e-con.works,
	.e-con.about,
	.e-con.contact {
		padding-top: 90px;
	}

	.e-con.note--about {
		padding: 56px 22px 60px 24px;
	}

	.e-con.about__photos {
		max-width: 340px;
	}

	.e-con.project-page {
		border-radius: 24px;
	}

	.project-gallery-el .gallery {
		columns: 2 120px;
		column-gap: 10px;
	}
}


/* 12b. Beat the Elementor kit defaults (colour / font) on the rebuilt pages */
.eden-page .elementor-heading-title,
.eden-page .elementor-widget-text-editor,
.eden-page .elementor-widget-text-editor p,
.eden-page .elementor-button {
	font-family: var(--font) !important;
}

.works__title .elementor-heading-title,
.note__title .elementor-heading-title,
.copyright .elementor-heading-title {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

.contact-title .elementor-heading-title {
	color: var(--white) !important;
	font-size: clamp(26px, 2.5vw, 48px) !important;
	font-weight: 800 !important;
}

.project-title .elementor-heading-title {
	color: var(--pink) !important;
	font-size: clamp(26px, 2.5vw, 48px) !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
}

.bio .elementor-widget-container p {
	color: var(--black) !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

.bio .elementor-widget-container p.bio__heading {
	font-size: clamp(19px, 1.46vw, 28px) !important;
	font-weight: 600 !important;
}

.project-text .elementor-widget-container p {
	color: var(--black) !important;
	font-size: clamp(16px, 1.25vw, 24px) !important;
	line-height: 1.5 !important;
}

.note-btn .elementor-button,
.btn-back .elementor-button {
	background-color: var(--pink) !important;
	color: var(--white) !important;
	border-radius: var(--radius-pill) !important;
	font-weight: 700 !important;
}

.note-btn .elementor-button {
	font-size: clamp(13px, 1.25vw, 24px) !important;
}

.btn-back .elementor-button {
	font-size: 20px !important;
}

.contact-form .pill-input {
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	background: var(--mint) !important;
}


/* 12c. One-page layout: sections stacked on the home page keep the original spacing */
.e-con.works.onepage   { padding-top: clamp(50px, 3.6vw, 70px); }
.e-con.about.onepage   { padding-top: clamp(60px, 5vw, 95px); }
.e-con.contact.onepage { padding-top: clamp(80px, 10vw, 200px); }

@media (max-width: 767px) {
	.e-con.works.onepage   { padding-top: 50px; }
	.e-con.about.onepage   { padding-top: 50px; }
	.e-con.contact.onepage { padding-top: 80px; }
}


/* 12d. On Elementor canvas pages html has overflow-y visible, which together with
   overflow-x: clip turns off scrolling entirely; give the vertical axis an explicit value. */
html {
	overflow-y: auto;
}


/* 12e. Figma uses Abril Fatface for the Latin accents (sticky note, its button, the copyright line);
   Hebrew glyphs fall back to Heebo, exactly as they do in the Figma file. */
.note__title .elementor-heading-title,
.note-btn .elementor-button,
.copyright .elementor-heading-title {
	font-family: 'Abril Fatface', var(--font) !important;
	font-weight: 400 !important;
}


/* 12f. Gallery collage (same grid as the original popups) for the Elementor gallery widget,
   on the project pages and inside #project-modal. Variants are per project by position. */
.project-gallery-el .gallery {
	columns: auto;
	column-count: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	grid-auto-flow: dense;
	gap: 16px;
	margin: 0;
}

.project-gallery-el .gallery-item {
	margin: 0 !important;
	break-inside: auto;
}

.project-gallery-el .gallery-icon,
.project-gallery-el .gallery-icon a {
	display: block;
	height: 100%;
}

.project-gallery-el .gallery-item img {
	height: 100%;
	aspect-ratio: 5 / 7;
	object-fit: cover;
}

/* variants */
.project-posters .gallery-item:nth-child(3) img,
.project-fairies .gallery-item:nth-child(n+4) img,
.project-podcoach .gallery-item:nth-child(6) img { aspect-ratio: 1; }

.project-fairies .gallery-item:nth-child(1) { grid-row: span 2; }
.project-fairies .gallery-item:nth-child(1) img { aspect-ratio: auto; }

.project-podcoach .gallery-item:nth-child(3),
.project-podcoach .gallery-item:nth-child(5),
.project-museum .gallery-item:nth-child(7),
.project-museum .gallery-item:nth-child(14),
.project-museum .gallery-item:nth-child(17),
.project-beer .gallery-item:nth-child(1),
.project-beer .gallery-item:nth-child(3),
.project-beer .gallery-item:nth-child(4),
.project-beer .gallery-item:nth-child(5) { grid-column: span 2; }

.project-podcoach .gallery-item:nth-child(3) img,
.project-podcoach .gallery-item:nth-child(5) img,
.project-museum .gallery-item:nth-child(7) img,
.project-museum .gallery-item:nth-child(14) img,
.project-museum .gallery-item:nth-child(17) img,
.project-beer .gallery-item:nth-child(1) img,
.project-beer .gallery-item:nth-child(3) img,
.project-beer .gallery-item:nth-child(4) img,
.project-beer .gallery-item:nth-child(5) img { aspect-ratio: 2 / 1; }

.project-fairies .gallery-item:nth-child(1) img,
.project-podcoach .gallery-item:nth-child(n+2) img,
.project-museum .gallery-item:nth-child(7) img,
.project-museum .gallery-item:nth-child(14) img,
.project-museum .gallery-item:nth-child(17) img,
.project-beer .gallery-item:nth-child(1) img,
.project-beer .gallery-item:nth-child(3) img,
.project-beer .gallery-item:nth-child(4) img,
.project-beer .gallery-item:nth-child(5) img { object-fit: contain; padding: 6%; }

.project-podcoach .gallery-item:nth-child(7) img { transform: scaleX(-1); }
.project-podcoach .gallery-item:nth-child(7):hover img { transform: scaleX(-1) scale(1.03); }

/* the popup itself */
.modal-widget { margin: 0; }
.modal__gallery .project-gallery-el { margin: clamp(16px, 2vw, 28px) 0 0; }
.modal__gallery .elementor-widget-container { display: block; }

@media (max-width: 767px) {
	.project-gallery-el .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* 12g. Footer: no dead space under the copyright line, and the page background covers any overflow */
html { background-color: var(--green-bg); }
.e-con.site-footer { padding-bottom: clamp(24px, 2.5vw, 48px); }
.e-con.site-footer .copyright { margin: 0; }


/* 12h. Text widgets without an inner container (Elementor 4 optimised markup), and the mat on the
   root element so nothing below the page body shows as flat green. */
.project-text p,
.modal__text p {
	max-width: 975px;
	margin: 0 0 0.9em;
	font-family: var(--font) !important;
	font-size: clamp(16px, 1.25vw, 24px) !important;
	line-height: 1.5 !important;
	color: var(--black) !important;
}

.bio p {
	font-family: var(--font) !important;
	color: var(--black) !important;
}

html {
	background-color: var(--green-bg);
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
		url('/wp-content/uploads/2026/09/mat-tile.webp');
	background-repeat: repeat;
	background-position: center top;
	background-size: auto, clamp(1100px, 100vw, 1941px) auto;
}


/* 12i. Fixes on top of section 12:
   - the container reset above wiped the gap between the project cards, put it back
   - once main.js rebuilds .photo__swing/.photo__idle, the idle wobble belongs to the
     wrapper, so the <img> must not animate a second time. */
.e-con.cards {
	--gap: clamp(20px, 2.1vw, 40px);
	--row-gap: clamp(20px, 2.1vw, 40px);
	--column-gap: clamp(20px, 2.1vw, 40px);
	gap: clamp(20px, 2.1vw, 40px);
}

.photo__idle > img {
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.photo > img { animation: none; }
}

@media (max-width: 767px) {
	.e-con.cards {
		--gap: 14px;
		--row-gap: 14px;
		--column-gap: 14px;
		gap: 14px;
	}
}


/* 12j. Cards at the Figma proportion. The frame is 1920 wide with 348x318 cards, a 40px
   gap and a 1512px row, so the row is 78.75vw (capped at 1512) and the cards follow it
   instead of staying 348px on every screen, where they read as too large. */
.e-con.cards {
	width: min(78.75vw, 1512px);
	max-width: 100%;
	margin-inline: auto;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	--gap: clamp(14px, 2.0833vw, 40px);
	--row-gap: clamp(14px, 2.0833vw, 40px);
	--column-gap: clamp(14px, 2.0833vw, 40px);
	gap: clamp(14px, 2.0833vw, 40px);
}

@media (max-width: 1100px) {
	.e-con.cards {
		width: min(92vw, 1100px);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.e-con.cards {
		width: 92vw;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--gap: 14px;
		--row-gap: 14px;
		--column-gap: 14px;
		gap: 14px;
	}
}


/* =========================================================================
   13. Figma update (2026-09): header logo, square cards with a hover title,
       working category filters, lighter popup backdrop.
   ========================================================================= */

/* --- header: logo on the left, nav pill centred, both fixed together --- */
.site-header {
	align-items: flex-start;
}

.site-logo {
	position: absolute;
	left: clamp(12px, 5.26vw, 101px);
	top: 0;
	pointer-events: auto;
	display: block;
	line-height: 0;
	width: clamp(74px, 9.95vw, 191px);
	transition: transform 0.25s var(--ease-out), filter 0.25s;
}

.site-logo img {
	width: 100%;
	height: auto;
	display: block;
}

.site-logo:hover,
.site-logo:focus-visible {
	transform: translateY(-2px) scale(1.03);
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}

.site-logo:focus-visible {
	outline: 3px solid var(--pink);
	outline-offset: 6px;
}

/* --- cards are square now (348x348 in the 1920 frame) --- */
.card,
.e-con.cards .card {
	aspect-ratio: 1;
}

.e-con.cards .card figure,
.card figure {
	position: relative;
	margin: 0;
	height: 100%;
}

.card figure > a,
.card figure > img {
	display: block;
	height: 100%;
}

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

/* --- hover: pink wash over the image with the project name --- */
.card figcaption {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12% 8%;
	margin: 0;
	background: rgba(230, 108, 179, 0.88);
	color: var(--white);
	font-family: var(--font);
	font-size: clamp(15px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	opacity: 0;
	transition: opacity 0.3s var(--ease-out);
	pointer-events: none;
}

.card:hover figcaption,
.card:focus-within figcaption {
	opacity: 1;
}

/* --- filters: real buttons, pink when active --- */
.filters .pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(120px, 10.5vw, 201px);
	height: clamp(44px, 3.6vw, 69px);
	padding: 0 clamp(24px, 3vw, 58px);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--mint);
	color: var(--black);
	font-family: var(--font);
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1.15;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
	transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease-out);
}

.filters .pill:hover,
.filters .pill:focus-visible {
	background: var(--pink);
	color: var(--white);
	transform: translateY(-1px);
}

.filters .pill.is-active {
	background: var(--pink);
	color: var(--white);
}

.filters li {
	list-style: none;
}

/* cards hidden by a filter */
.card.is-filtered {
	display: none;
}

/* --- the home page should only be dimmed a little behind a popup --- */
.modal__backdrop {
	background: rgba(0, 0, 0, 0.45);
}

@media (max-width: 767px) {
	.site-logo {
		left: 10px;
		width: 64px;
	}

	.card figcaption {
		font-size: 14px;
		padding: 8% 6%;
	}
}


/* 13b. Measured off the Figma frame: the cards are 347x342 (not square), the column
   gap is 40 and the row gap 52, all against the 1920 frame. */
.card,
.e-con.cards .card {
	aspect-ratio: 347 / 342;
}

.e-con.cards {
	--row-gap: clamp(18px, 2.708vw, 52px);
	--column-gap: clamp(14px, 2.0833vw, 40px);
	row-gap: clamp(18px, 2.708vw, 52px);
	column-gap: clamp(14px, 2.0833vw, 40px);
	gap: clamp(18px, 2.708vw, 52px) clamp(14px, 2.0833vw, 40px);
}

@media (max-width: 767px) {
	.e-con.cards {
		--row-gap: 18px;
		--column-gap: 14px;
		gap: 18px 14px;
	}
}


/* =========================================================================
   13c. Header + card-title corrections.
   Hello Elementor also styles .site-header (margin + padding), which squeezed
   our fixed bar to 1140px and pushed it 16px down; and the Elementor kit was
   colouring the image caption grey in Roboto.
   ========================================================================= */
.site-header {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
	left: 0 !important;
	right: 0 !important;
	background: none !important;
	border: 0 !important;
}

/* logo: left edge, top-aligned with the pill, sized from the Figma frame
   (left 76/1920, top 72/1920, width 205/1920) but a little tighter so the
   header keeps clear of the WELCOME artwork. */
.site-logo {
	left: clamp(10px, 3.96vw, 76px);
	top: 0;
	width: clamp(62px, 8.4vw, 161px);
}

/* card title on hover: white, heavy Heebo — the kit was overriding all three */
.card figcaption,
.card .widget-image-caption,
.elementor-widget-image .widget-image-caption {
	color: #fff !important;
	font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
	font-weight: 800 !important;
	font-size: clamp(15px, 1.3vw, 25px) !important;
	line-height: 1.25 !important;
	text-align: center !important;
	font-style: normal !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

@media (max-width: 767px) {
	.site-logo {
		left: 10px;
		width: 58px;
	}
}


/* 13d. Keep the header clear of the WELCOME artwork: a slightly smaller logo and
   enough room at the top of the hero for the fixed bar to sit above it. */
.site-logo {
	width: clamp(58px, 7.2vw, 138px);
}

.e-con.hero {
	padding-top: clamp(150px, 12.5vw, 240px);
}

@media (max-width: 767px) {
	.site-logo { width: 52px; }
	.e-con.hero { padding-top: 120px; }
}


/* 13e. Final card geometry, measured card by card off the Figma export:
   348 x 317, columns at 205 + 388i, rows at 1438 / 1818 in the 1920 frame.
   So: column gap 40 (2.083vw), row gap 63 (3.28vw). */
.card,
.e-con.cards .card {
	aspect-ratio: 348 / 317;
}

.e-con.cards {
	--row-gap: clamp(18px, 3.28vw, 63px);
	--column-gap: clamp(14px, 2.0833vw, 40px);
	row-gap: clamp(18px, 3.28vw, 63px);
	column-gap: clamp(14px, 2.0833vw, 40px);
	gap: clamp(18px, 3.28vw, 63px) clamp(14px, 2.0833vw, 40px);
}

@media (max-width: 767px) {
	.e-con.cards {
		--row-gap: 18px;
		--column-gap: 14px;
		gap: 18px 14px;
	}
}


/* =========================================================================
   14. Project boards reproduced from the Figma frames.
   Each board keeps the frame's aspect ratio and every item is positioned as a
   percentage of it, so the collage scales without ever reflowing.
   ========================================================================= */
.figma-board {
	position: relative;
	width: 100%;
	aspect-ratio: var(--board-w) / var(--board-h);
	margin: 0;
}

.figma-board .board-item {
	position: absolute;
	display: block;
	overflow: hidden;
	border-radius: clamp(6px, 1.1vw, 14px);
	background: #f2f2f2;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.figma-board .board-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.figma-board .board-item:hover,
.figma-board .board-item:focus-visible {
	transform: scale(1.03);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
	z-index: 3;
}

.figma-board .board-item:focus-visible {
	outline: 3px solid var(--pink);
	outline-offset: 3px;
}

/* the boards are white sheets in the new design */
.modal__box--project,
.e-con.project-page {
	background: #fff;
}

.project-gallery-el {
	width: 100%;
}

@media (max-width: 767px) {
	.figma-board .board-item { border-radius: 6px; }
}


/* 14b. Only reveal a card title on real keyboard focus — closing a popup returns
   focus to the card that opened it, which otherwise left its title stuck on. */
.card:focus-within figcaption { opacity: 0; }
.card:hover figcaption,
.card:has(a:focus-visible) figcaption { opacity: 1; }


/* 14c. Four boards whose artwork sits on the canvas rather than inside the frame,
   so they are placed as one full-width sheet, split into strips that stack seamlessly. */
.figma-board.is-flat {
	aspect-ratio: auto;
	display: block;
	border-radius: clamp(14px, 2.4vw, 34px);
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
	font-size: 0;
	line-height: 0;
}

.figma-board.is-flat .board-flat {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

.figma-board.is-flat .board-flat img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	object-fit: contain;
	vertical-align: top;
}

.figma-board.is-flat .board-flat:hover {
	transform: none;
	box-shadow: none;
}


/* 14d. Video items inside a board (the three reels on the photography board). */
.figma-board .board-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #111;
}

.figma-board .board-video {
	cursor: default;
}

/* 14e. A video sitting inside a flat board, positioned over the artwork. */
.figma-board.is-flat {
	position: relative;
}

.figma-board .board-overlay {
	background: #000;
	border-radius: 0;
	box-shadow: none;
}

.figma-board .board-overlay:hover,
.figma-board .board-overlay:focus-visible {
	transform: none;
	box-shadow: none;
}

/* 14f. Artwork that sits directly on the sheet (transparent PNG, no card behind it).
   Without this the white box of one item covers the artwork of the one it overlaps. */
.figma-board .board-plain {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

.figma-board .board-plain img {
	object-fit: contain;
}

.figma-board .board-plain:hover,
.figma-board .board-plain:focus-visible {
	transform: none;
	box-shadow: none;
}

/* 14g. The X on a project page opened on its own, so closing a project looks the
   same whether it is a popup over the home page or its own URL. */
.e-con.project-page {
	position: relative;
}

.page-close {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	z-index: 5;
	display: block;
	width: 56px;
	height: 56px;
	color: var(--pink);
	line-height: 0;
	border-radius: 50%;
	transition: transform 0.2s, background-color 0.2s;
}

.page-close svg {
	width: 100%;
	height: 100%;
}

.page-close:hover {
	transform: rotate(90deg);
	background: rgba(230, 108, 179, 0.12);
}

.page-close:focus-visible {
	outline: 3px solid var(--pink);
	outline-offset: 4px;
}

.elementor-element.page-close-el {
	position: static;
	width: 0;
	height: 0;
	margin: 0;
}

@media (max-width: 768px) {
	.page-close {
		top: 10px;
		inset-inline-start: 10px;
		width: 48px;
		height: 48px;
	}
}

/* 14h. The logo is a pure black PNG on transparency, so it disappeared into every
   dark photo it scrolled over. Inverting it paints it white; the soft dark glow
   keeps it readable on the rare light patch it passes. */
.site-logo img {
	filter: invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* 14i. Phone layout: the nav pill does not fit, so the links move into a fixed
   hamburger; the logo scrolls away with the page; the hero stacks
   title -> sticky note -> arrow. */
.nav-toggle,
.nav-drawer {
	display: none;
}

@media (max-width: 768px) {
	.site-header {
		position: absolute;
	}

	.site-header .nav-pill {
		display: none;
	}

	.nav-toggle {
		display: flex;
		position: fixed;
		top: 14px;
		inset-inline-start: 14px;
		z-index: 60;
		width: 48px;
		height: 48px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--mint);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
		cursor: pointer;
	}

	.nav-toggle span {
		display: block;
		width: 22px;
		height: 2.5px;
		border-radius: 2px;
		background: #0e2a1b;
		transition: transform 0.25s, opacity 0.2s;
	}

	.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
	.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
	.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

	.nav-drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 58;
		background: rgba(0, 0, 0, 0.4);
	}

	.nav-drawer[hidden] { display: none; }

	.nav-drawer__list {
		position: absolute;
		top: 72px;
		inset-inline-start: 14px;
		min-width: 200px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		gap: 4px;
		background: var(--mint);
		border-radius: 24px;
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
	}

	.nav-drawer__list a {
		display: block;
		padding: 13px 20px;
		border-radius: 18px;
		text-align: center;
		font-weight: 700;
		color: #000;
		text-decoration: none;
	}

	.nav-drawer__list a:active { background: rgba(255, 255, 255, 0.55); }

	body.nav-open { overflow: hidden; }

	.e-con.hero {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.e-con.hero > .hero__center { display: contents; }

	.elementor-element.hero__title { order: 1; }

	.e-con.note--hero {
		order: 2;
		position: relative;
		inset: auto;
		margin: 4px auto 0;
		transform: none;
	}

	.elementor-element.hero__arrow {
		order: 3;
		margin-top: 4px;
	}

	/* the X sits in the top corner, so the title starts below it on a narrow panel */
	.e-con.project-page {
		padding-top: 74px;
	}

	/* phone hero tuning */
	.site-logo {
		left: 0;
		right: 0;
		margin-inline: auto;
		width: 76px;
		transform: none;
	}

	.site-logo:hover,
	.site-logo:focus-visible {
		transform: translateY(-2px) scale(1.03);
	}

	.hero__icon {
		width: calc(var(--size) * 0.66);
		height: calc(var(--size) * 0.66);
	}

	.e-con.note--hero {
		margin-top: 60px;
	}

	.elementor-element.hero__arrow {
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		bottom: 26px;
		margin: 0;
		display: flex;
		justify-content: center;
	}
}

/* 14j. The floating icons sit on their own layer so the CSS keyframes drive
   them instead of the launcher in main.js: twice as many, drifting up slowly. */
.hero__cloud {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

@media (max-width: 768px) {
	/* a collage three or four across is unreadable on a phone, so the
	   positioned pieces reflow into two columns */
	.figma-board:not(.is-flat) {
		position: static;
		aspect-ratio: auto;
		column-count: 2;
		column-gap: 10px;
	}

	.figma-board:not(.is-flat) .board-item {
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		height: auto !important;
		display: block;
		break-inside: avoid;
		margin: 0 0 10px;
	}

	.figma-board:not(.is-flat) .board-item img,
	.figma-board:not(.is-flat) .board-item video {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}

@media (max-width: 768px) {
	/* a phone is too narrow for the whole flock: thin it out, and push some of
	   the icons further in so they scatter instead of stacking along the edges */
	.hero__cloud .hero__icon:nth-child(3n) {
		display: none;
	}

	.hero__icon {
		width: calc(var(--size) * 0.58);
		height: calc(var(--size) * 0.58);
	}

	.hero__cloud .hero__icon--right:nth-child(4n + 2) { right: 24%; }
	.hero__cloud .hero__icon--left:nth-child(4n + 1) { left: 26%; }
}

@media (max-width: 768px) {
	/* .hero__center becomes display:contents on a phone, which drops the stacking
	   context it used to give the title, so the icons have to be put back behind it */
	.elementor-element.hero__title,
	.elementor-element.hero__arrow,
	.e-con.note--hero {
		position: relative;
		z-index: 2;
	}

	.elementor-element.hero__arrow {
		position: absolute;
	}
}

@media (max-width: 768px) {
	/* a piece that is nearly the full width of the sheet keeps both columns,
	   otherwise a dense sheet ends up half a screen wide and unreadable */
	.figma-board:not(.is-flat) .board-wide {
		column-span: all;
		width: 100% !important;
	}
}

/* 14k. Icon size and the phone position of the logo. */
.hero__cloud .hero__icon {
	width: calc(var(--size) * 0.72);
	height: calc(var(--size) * 0.72);
}

@media (max-width: 768px) {
	.hero__cloud .hero__icon {
		width: calc(var(--size) * 0.44);
		height: calc(var(--size) * 0.44);
	}

	/* on the home page the logo drops towards the welcome line; on a project page
	   it has to stay at the top or it lands on the white panel */
	.home .site-logo {
		top: 62px;
	}
}