/* ==========================================================================
   PHOTOLICIOUS — SHELL
   Nav, footer, season switch, full-bleed banners, and the furniture the
   interior pages share (page hero, form card, intro video, assess block).
   ========================================================================== */

/* --- Nav ------------------------------------------------------------------ */
/* The one element that stays translucent. Everything else on the page is
   opaque, so the glass reads as a lens over the ground rather than a trend. */
.nav {
	position: fixed;
	top: 10px;
	inset-inline: 0;
	z-index: 80;
}
.nav-in {
	width: var(--wide);
	margin-inline: auto;
	background: var(--nav-glass);
	-webkit-backdrop-filter: blur(22px) saturate(1.7);
	backdrop-filter: blur(22px) saturate(1.7);
	border: 1px solid var(--glass-brd);
	box-shadow: inset 0 1px 0 var(--glass-bg), 0 12px 40px rgb(0 0 0 / 0.22);
	color: var(--nav-ink);
	border-radius: 100px;
	padding-block: 0.6rem;
	padding-inline: 1.4rem 0.6rem;
	display: flex;
	align-items: center;
	gap: 0.9rem;
}
/* Without backdrop-filter the bar would be a washed-out smear over the
   photography, so fall back to near-opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.nav-in { background: var(--nav-solid); }
}
.nav-mark {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(12px, 1.1vw, 16px);
	text-decoration: none;
	margin-inline-end: auto;
	white-space: nowrap;
}
.nav-in .nav-links {
	display: flex;
	gap: clamp(12px, 1.6vw, 26px);
	margin-inline-end: 0.4rem;
}
.nav-in .nav-links a {
	text-decoration: none;
	font-size: 0.82rem;
	opacity: 0.8;
	white-space: nowrap;
	color: var(--white);
}
.nav-in .nav-links a:hover,
.nav-in .nav-links a[aria-current] { opacity: 1; }
.nav-cta {
	background: var(--accent);
	color: var(--on-accent);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.72em 1.2em;
	border-radius: 100px;
	white-space: nowrap;
}
.nav-cta:hover { background: var(--white); }

.lang {
	display: flex;
	gap: 2px;
	background: rgb(255 255 255 / 0.12);
	border-radius: 100px;
	padding: 3px;
}
.lang a {
	text-decoration: none;
	border-radius: 100px;
	padding: 0.3em 0.7em;
	font-weight: 700;
	font-size: 0.74rem;
	color: var(--summer);
	opacity: 0.75;
	line-height: 1;
	white-space: nowrap;
}
.lang a.is-active,
.lang a[aria-current] {
	background: var(--accent);
	color: var(--on-accent);
	opacity: 1;
}
.lang a:hover { opacity: 1; }

/* Burger, phone only. 44px so it clears the minimum tap target. */
.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 100px;
	background: var(--glass-bg);
	cursor: pointer;
	padding: 0;
	place-items: center;
}
.nav-toggle span {
	display: block;
	width: 16px;
	height: 2px;
	background: var(--nav-ink);
	box-shadow: 0 -5px 0 var(--nav-ink), 0 5px 0 var(--nav-ink);
}
.nav-toggle[aria-expanded="true"] span { box-shadow: none; }

@media (max-width: 860px) {
	.nav-in .nav-links {
		position: absolute;
		inset-inline: 0;
		top: calc(100% + 8px);
		flex-direction: column;
		gap: 0;
		background: var(--nav-solid);
		-webkit-backdrop-filter: blur(22px);
		backdrop-filter: blur(22px);
		border: 1px solid var(--glass-brd);
		border-radius: 22px;
		padding: 0.6rem;
		margin-inline-end: 0;
	}

	/* The panel's open state is derived from aria-expanded on the button — one
	   source of truth, owned by CSS. It used to be JS setting [hidden] on load,
	   which meant the correct state depended on the viewport being settled
	   before the script ran; a resize across this breakpoint (an iPad rotating)
	   could leave the panel open while the button still read "collapsed". */
	html.js .nav-in .nav-links { display: none; }
	html.js .nav-in:has(.nav-toggle[aria-expanded="true"]) .nav-links { display: flex; }

	/* No JS, no burger: the links stay in the bar where they can still be used. */
	html.no-js .nav-toggle { display: none; }
	html.no-js .nav-in .nav-links { position: static; flex-direction: row; background: none; border: 0; padding: 0; backdrop-filter: none; }

	.nav-in .nav-links a { padding: 0.8rem 1rem; font-size: 0.95rem; }
	.nav-toggle { display: grid; }
	.nav-in { position: relative; padding-inline: 1.1rem 0.5rem; gap: 0.5rem; }
	.nav-cta { display: none; }

	/* Tap targets. The wordmark and the language pills are real links, and at
	   the comp's desktop sizes they land around 18px tall on a phone. */
	.nav-mark { padding-block: 0.8rem; }
	.lang { padding: 5px; }
	.lang a { padding: 0.8em 0.85em; font-size: 0.8rem; }
}

/* --- Season switch -------------------------------------------------------- */
.season {
	position: fixed;
	inset-inline-end: 10px;
	bottom: 10px;
	z-index: 90;
	background: var(--overlay-bg);
	color: var(--white);
	padding: 5px 7px;
	border-radius: 100px;
	display: flex;
	gap: 5px;
	font-size: 0.56rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
}
.season button {
	font: inherit;
	cursor: pointer;
	border: 0;
	padding: 5px 8px;
	border-radius: 100px;
	background: var(--glass-bg);
	color: var(--white);
}
.season button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* --- Brand lockup --------------------------------------------------------- */
/* Two lines that share a left edge, centred as one block.
   It used to be an inline-block centred by the hero's text-align, which asks
   shrink-to-fit to measure the wider line — and shrink-to-fit measured PHOTO,
   not the flex row holding the symbol and LICIOUS. The box came out 154px too
   narrow and the longer line hung off its end, so the lockup sat right of
   where its box said it was. It showed up in Arabic because the two locales
   load different font stacks and only one of them was measured late enough to
   be wrong, but the sizing was fragile in both.
   A grid track is measured from the items themselves: justify-content centres
   the track, justify-items keeps both lines on its start edge. */
.logo {
	display: grid;
	justify-content: center;
	justify-items: start;
	text-align: start;
	line-height: 0.84;
}
.logo-photo,
.logo-lic {
	font-family: "PolySans Bulky", "Onest", "Helvetica Neue", Arial, sans-serif;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ink);
	font-size: clamp(2.6rem, 9vw, 6.6rem);
	display: block;
}
/* The lockup is a Latin wordmark in both languages, so it never flips. */
.logo { direction: ltr; }
.logo-lic { display: flex; align-items: center; gap: 0.1em; }
.logo-sym {
	width: 0.9em;
	height: 0.9em;
	flex: 0 0 auto;
	object-fit: contain;
	display: inline-block;
}

/* --- Full-bleed banner ---------------------------------------------------- */
.banner {
	position: relative;
	overflow: hidden;
	text-align: center;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: grid;
	place-items: center;
	padding: clamp(44px, 6vw, 88px) clamp(22px, 4vw, 60px);
	min-height: clamp(220px, 28vw, 340px);
}
/* photolicious_picture() wraps every design photo in a <picture> for the WebP
   source, so the backdrop has to be addressed one level deeper as well. A child
   combinator that only names `img` silently stops matching, and the photo drops
   back into normal flow at its natural size — beside the copy instead of behind
   it, with the scrim stacked over the wrong thing. */
.banner > img,
.banner > picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.banner > img,
.banner > picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.5);
	z-index: 1;
}
/* The backdrop is pinned at z-index 0 above, so this only ever lifts the copy. */
.banner > * { position: relative; z-index: 2; }
.banner-h {
	color: #fff;
	font-size: clamp(1.7rem, 4.6vw, 3.6rem);
	text-transform: uppercase;
	max-width: 20ch;
	margin-inline: auto;
	text-shadow: 0 2px 20px rgb(0 0 0 / 0.6), 0 1px 4px rgb(0 0 0 / 0.7);
}
/* Accent, not raw lime: the banner sits on a photo but it still belongs to the
   season, so the highlight follows the switch. Winter answers with lavender
   rather than the deep violet — violet is the brand's on-bright pairing and
   only reaches 3.6:1 over this scrim, where lavender clears 15:1. */
.banner-h em {
	font-style: normal;
	-webkit-text-stroke: 0;
	color: var(--accent);
	text-shadow: 0 2px 18px rgb(0 0 0 / 0.7);
}
.banner-p {
	margin: 1rem auto 0;
	color: var(--accent);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1rem, 1.7vw, 1.4rem);
	letter-spacing: -0.02em;
	text-shadow: 0 2px 16px rgb(0 0 0 / 0.6);
}
/* Inline SVG rather than symbol-lime.svg, so the badge can follow the season
   the way the lockup does. What is knocked out of the disc stays fixed dark —
   the badge sits on a photograph, not on the season ground — and the disc
   itself carries the season: lime in summer, white in winter. */
.banner-sym {
	--sym-mark: #0b0b0c;
	--sym-body: var(--lime);
	width: clamp(46px, 6vw, 74px);
	height: auto;
	aspect-ratio: 78 / 82;
	margin: clamp(18px, 2.4vw, 30px) auto 0;
	display: block;
}
html[data-season="winter"] .banner-sym { --sym-body: var(--white); }
.banner-btn {
	margin-block-start: clamp(20px, 2.6vw, 32px);
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}
.banner-btn:hover { background: #fff; border-color: #fff; color: var(--black); }

/* Closing team banner. A flat 50% scrim would grey out the faces, so the
   gradient stays light over the group and only darkens under them, where
   the copy sits. */
.banner--close { min-height: clamp(560px, 53vw, 780px); align-items: end; }
.banner--close > img,
.banner--close > picture > img { object-position: 50% 34%; }
.banner--close::after {
	background: linear-gradient(180deg,
		rgb(0 0 0 / 0.20) 0%,
		rgb(0 0 0 / 0.28) 24%,
		rgb(0 0 0 / 0.60) 44%,
		rgb(0 0 0 / 0.80) 100%);
}
.banner-contact {
	margin: clamp(20px, 2.4vw, 30px) auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 0.9rem;
	font-size: clamp(0.82rem, 1.05vw, 0.95rem);
	color: var(--white);
}
.banner-contact a { text-decoration: none; text-shadow: 0 2px 12px rgb(0 0 0 / 0.7); }
.banner-contact a:hover { color: var(--accent); }
.banner-contact span { opacity: 0.45; }
/* On a phone the group fills the frame, so the copy drops to the floor
   below them rather than sitting across their faces. */
@media (max-width: 700px) {
	.banner--close > img,
	.banner--close > picture > img { object-position: 50% 22%; }
	.banner--close::after {
		background: linear-gradient(180deg,
			rgb(0 0 0 / 0.18) 0%,
			rgb(0 0 0 / 0.24) 30%,
			rgb(0 0 0 / 0.55) 55%,
			rgb(0 0 0 / 0.86) 100%);
	}
}

/* --- Assess block --------------------------------------------------------- */
.assess-wrap { padding: clamp(30px, 4vw, 60px) 0; }
/* The same card as every other one on the site — .form-card, .case, .svc and
   .case-quote are all --card on --card-ink with nothing round the outside.
   This one used to carry a 3px rule that went white in winter, which read as a
   different component rather than the same one. */
.assess {
	background: var(--card);
	color: var(--card-ink);
	border-radius: var(--r);
	padding: clamp(34px, 5vw, 80px) clamp(24px, 4vw, 64px);
	text-align: center;
}
.assess h2 {
	font-size: clamp(1.9rem, 5.6vw, 4.4rem);
	text-transform: uppercase;
	max-width: 18ch;
	margin-inline: auto;
}
.assess p {
	margin: 1.1rem auto 0;
	max-width: 42ch;
	opacity: 0.82;
	font-size: clamp(0.98rem, 1.32vw, 1.15rem);
}
.assess .btn {
	margin-block-start: clamp(22px, 2.8vw, 38px);
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-size: 0.92rem;
	padding: 1.15em 2.8em;
}
.assess .btn:hover { background: var(--white); border-color: var(--white); color: var(--black); }

/* --- Interior page hero --------------------------------------------------- */
.page-hero { padding: clamp(96px, 11vw, 150px) 0 clamp(20px, 3vw, 40px); }
.page-hero h1 {
	font-size: clamp(2.4rem, 8vw, 6.4rem);
	text-transform: uppercase;
	max-width: 14ch;
}
.page-hero p {
	margin: 1.1rem 0 0;
	max-width: 48ch;
	opacity: 0.78;
	font-size: clamp(0.98rem, 1.3vw, 1.15rem);
}
.page-hero--mid { text-align: center; }
.page-hero--mid h1 { max-width: 16ch; margin-inline: auto; }
.page-hero--mid p { max-width: 52ch; margin-inline: auto; }
/* The tagline is the homepage's .logo-tag, borrowed whole. Only the spacing
   differs: there it sits under a lockup that carries its own bottom margin,
   here it sits under a plain h1, so the gap above it is set from this side.
   The paragraph below keeps its own 1.1rem. */
.page-hero .logo-tag { margin-block: clamp(14px, 1.8vw, 24px) 0; }

/* --- Contact: intro video + form ------------------------------------------ */
.vhero {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--media-placeholder);
}
.vhero video,
.vhero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.video-copy {
	max-width: 900px;
	margin: clamp(22px, 2.6vw, 34px) auto 0;
	text-align: center;
}
.video-lead {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.15rem, 2.1vw, 1.7rem);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
}
.video-note {
	margin: 0.7rem auto 0;
	max-width: 58ch;
	opacity: 0.72;
	font-size: clamp(0.92rem, 1.2vw, 1.05rem);
}

.form-wrap { max-width: 900px; margin-inline: auto; }
.form-card {
	background: var(--card);
	color: var(--card-ink);
	border-radius: var(--r);
	padding: clamp(24px, 3vw, 48px);
}
.form-card h2 {
	font-size: clamp(1.3rem, 2.4vw, 2rem);
	text-transform: uppercase;
	margin-block-end: 1.4rem;
	text-align: center;
}
.form-note { font-size: 0.78rem; opacity: 0.55; margin: 0.2rem 0 1.3rem; }
.form-card .btn {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	width: 100%;
	text-align: center;
}
.form-card .btn:hover { background: var(--white); border-color: var(--white); }
/* Submission feedback, rendered above the fields. */
.form-alert {
	border-radius: 12px;
	padding: 0.9em 1.1em;
	margin-block-end: 1.2rem;
	font-size: 0.9rem;
	border: 1px solid var(--card-line-soft);
}
.form-alert--ok { background: var(--ok-tint); border-color: var(--ok-line); }
.form-alert--bad { background: var(--danger-tint); border-color: var(--danger-line); }

/* --- Footer --------------------------------------------------------------- */
.foot { padding: clamp(22px, 2.8vw, 38px) 0 clamp(20px, 2.4vw, 32px); }
.foot-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.7rem;
	justify-content: space-between;
	font-size: 0.8rem;
	opacity: 0.72;
	padding-block-start: clamp(16px, 2vw, 26px);
	border-top: 2px solid currentColor;
}
.foot-line a { text-decoration: none; }
.foot-line a:hover { text-decoration: underline; }
.foot-tag {
	margin-block-start: 1rem;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.84rem;
	opacity: 0.55;
}

/* --- Long-form pages (Terms, Privacy, 404) -------------------------------- */
.page-doc { padding: clamp(96px, 11vw, 150px) 0 clamp(44px, 6vw, 96px); }
.page-doc__title { font-size: clamp(2rem, 6vw, 4.2rem); text-transform: uppercase; max-width: 18ch; }
.page-doc__body { max-width: 68ch; margin-block-start: clamp(18px, 2.4vw, 30px); }
.page-doc__body h2 { font-size: clamp(1.2rem, 2.4vw, 1.8rem); margin-block-start: 2rem; text-transform: uppercase; }
.page-doc__body p,
.page-doc__body li { opacity: 0.78; }
.page-doc__body a { text-underline-offset: 3px; }

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 860px) {
	/* The season switch sits over content in the corner; at the comp's size its
	   two buttons are 23px tall, which is under any thumb. */
	.season { font-size: 0.64rem; padding: 6px 8px; }
	.season button { padding: 10px 12px; }

	/* On one column the switch lands on the sign-off and never moves off it,
	   so the footer needs to end above the pill rather than behind it. */
	.foot { padding-block-end: 78px; }
}

/* --- Touch targets ---------------------------------------------------------
   Below 860px everything is thumb-driven. These sit at 19–35px tall, under the
   44px a finger reliably hits: the language pair in the header, the footer
   links and the season switch. Padding grows the hit area without moving the
   text, so nothing shifts visually. */
@media (max-width: 860px) {
	.lang a { min-block-size: 44px; display: grid; place-items: center; }
	.foot a { padding-block: 0.7rem; display: inline-block; }
	.season button { min-block-size: 44px; padding-inline: 14px; }
}