/*
Theme Name: Tarzan of Los Angeles
Description: One-page classic theme for Gary Golding. Texts and photos are edited in Appearance → Customize → Front page content.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: tarzan
*/

/* ---------- Fonts (hosted on the site itself) ---------- */
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter-700.woff2) format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
/* Display font: free stand-in for Neue Montreal (swap the files and name here when a licence is bought). */
@font-face { font-family: "Display"; src: url(assets/fonts/hanken-grotesk-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Display"; src: url(assets/fonts/hanken-grotesk-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Display"; src: url(assets/fonts/hanken-grotesk-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Colours ---------- */
:root {
	--background: oklch(97.2% .014 84);
	--foreground: oklch(21% .045 242);
	--card: oklch(99% .008 85);
	--primary: oklch(71% .16 50);
	--primary-foreground: oklch(18% .045 245);
	--muted-foreground: oklch(43% .035 235);
	--accent: oklch(33% .058 208);
	--border: oklch(86% .025 80);
	--input: oklch(80% .03 80);
	--ocean: oklch(21.5% .052 246);
	--ocean-foreground: oklch(96.5% .016 84);
	--ocean-muted: oklch(80% .032 215);
	--ocean-line: oklch(96.5% .016 84 / .16);
	--deep: oklch(15.5% .04 248);
	--teal: oklch(29.5% .055 208);
	--sand: oklch(90% .045 75);
	--sunset-glow: oklch(78% .14 62);
	--scrim-hero: linear-gradient(to bottom, oklch(15.5% .04 248 / .65) 0%, oklch(15.5% .04 248 / 0) 22%), linear-gradient(to top, oklch(15.5% .04 248 / .92) 0%, oklch(15.5% .04 248 / .55) 32%, oklch(15.5% .04 248 / 0) 62%), linear-gradient(to right, oklch(15.5% .04 248 / .55) 0%, oklch(15.5% .04 248 / 0) 58%);
	--scrim-tile: linear-gradient(to top, oklch(15.5% .04 248 / .9) 0%, oklch(15.5% .04 248 / .35) 45%, oklch(15.5% .04 248 / 0) 75%);
	--shadow-lift: 0 30px 60px -30px oklch(15.5% .04 248 / .55);
	--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
	--font-display: "Display", "Inter", ui-sans-serif, system-ui, sans-serif;
	--radius: 2px;
	--gutter: 1.25rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; width: 100%; }
img, video, svg { display: block; max-width: 100%; }
main, section, header, footer { max-width: 100%; }
.hero-title, .h-xl, .h-xxl, .footer-big { overflow-wrap: break-word; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
::selection { background: var(--primary); color: var(--primary-foreground); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 100; top: 1rem; left: 1rem; width: auto; height: auto; clip-path: none; padding: .75rem 1rem; background: var(--primary); color: var(--primary-foreground); margin: 0; }
.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon-lg { width: 1.5rem; height: 1.5rem; stroke-width: 1.75; }
.mt-auto { margin-top: auto; }
.min-w-0 { min-width: 0; }

.container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 2rem; } }

.eyebrow { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.h-display, .hero-title, .footer-big { font-family: var(--font-display); font-weight: 500; }
.h-xl { font-size: clamp(2.6rem, 6vw, 4.75rem); line-height: .95; letter-spacing: -.02em; text-wrap: balance; }
.h-xxl { font-size: clamp(2.75rem, 6.5vw, 5.5rem); line-height: .93; letter-spacing: -.02em; text-wrap: balance; }
.light { font-weight: 400; }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-sand { color: var(--sand); }
.text-sunset-glow { color: var(--sunset-glow); }
.section-anchor { scroll-margin-top: 4rem; }
@media (min-width: 768px) { .section-anchor { scroll-margin-top: 4.5rem; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; white-space: nowrap; border-radius: var(--radius); font-family: var(--font-sans); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: all .3s; }
.btn .icon { transition: transform .3s; }
.btn:hover .icon { transform: translateX(2px); }
.btn-sm { height: 2.5rem; padding-inline: 1rem; }
.btn-md { height: 3rem; padding-inline: 1.5rem; }
.btn-lg { height: 3.5rem; padding-inline: 2rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-lift); }
.btn-primary:hover { background: var(--sunset-glow); transform: translateY(-2px); }
.btn-outline-light { border: 1px solid color-mix(in oklab, var(--ocean-foreground) 60%, transparent); color: var(--ocean-foreground); }
.btn-outline-light:hover { background: var(--ocean-foreground); color: var(--ocean); }
.btn-outline-dark { border: 1px solid color-mix(in oklab, var(--foreground) 70%, transparent); color: var(--foreground); }
.btn-outline-dark:hover { background: var(--foreground); color: var(--background); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 40; color: var(--ocean-foreground); border-bottom: 1px solid transparent; background: transparent; transition: background-color .5s, box-shadow .5s, border-color .5s; }
.site-header.is-scrolled, .site-header.is-solid { border-bottom-color: var(--ocean-line); background: color-mix(in oklab, var(--ocean) 95%, transparent); box-shadow: 0 8px 24px -16px var(--deep); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.header-inner { display: flex; height: 4rem; align-items: center; justify-content: space-between; gap: 1.5rem; }
.header-logo { flex-shrink: 0; border-radius: var(--radius); }
.header-logo img { height: 3rem; width: auto; }
.header-nav { display: none; align-items: center; gap: 1.5rem; }
.header-nav a { position: relative; padding-block: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in oklab, var(--ocean-foreground) 85%, transparent); transition: color .2s; }
.header-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: .125rem; height: 1px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.header-nav a:hover { color: var(--ocean-foreground); }
.header-nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.header-book { display: none; }
.menu-toggle { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--ocean-foreground); transition: background-color .2s; }
.menu-toggle:hover { background: color-mix(in oklab, var(--ocean-foreground) 10%, transparent); }
@media (min-width: 640px) { .header-book { display: inline-flex; } }
@media (min-width: 768px) { .header-inner { height: 4.5rem; } .header-logo img { height: 4rem; } }
@media (min-width: 1024px) { .header-nav { display: flex; } .header-actions .menu-toggle { display: none; } }
@media (min-width: 1280px) { .header-nav { gap: 2.25rem; } .header-nav a { letter-spacing: .2em; } }

/* Mobile menu */
.mobile-menu[hidden] { display: none; }
.mobile-menu { position: fixed; inset: 0; z-index: 50; }
.mobile-menu-backdrop { position: absolute; inset: 0; background: color-mix(in oklab, var(--deep) 70%, transparent); animation: fade-in .2s ease-out; }
.mobile-menu-panel { position: absolute; inset: 0 0 0 auto; display: flex; flex-direction: column; width: 100%; max-width: 24rem; background: var(--ocean); color: var(--ocean-foreground); box-shadow: var(--shadow-lift); animation: slide-in .3s cubic-bezier(.2,.7,.2,1); overflow-y: auto; }
.mobile-menu-top { display: flex; height: 4rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ocean-line); padding-inline: 1.25rem; }
.mobile-menu-logo { height: 2.5rem; width: auto; }
.mobile-menu-nav { display: flex; flex: 1; flex-direction: column; padding: 1.5rem 1.25rem 0; }
.mobile-menu-nav a { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--ocean-line); padding-block: 1rem; font-family: var(--font-display); font-size: 2.25rem; line-height: 2.5rem; font-weight: 500; transition: color .2s; }
.mobile-menu-nav a:hover { color: var(--sunset-glow); }
.mobile-menu-bottom { padding: 1rem 1.25rem 2rem; display: grid; gap: 1rem; }
.mobile-menu-bottom p { font-size: .875rem; color: var(--ocean-muted); }
.mobile-menu-bottom p a { font-weight: 600; color: var(--ocean-foreground); }
.mobile-menu-bottom p a:hover { text-decoration: underline; text-underline-offset: 4px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(100%); } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; display: flex; min-height: 100vh; min-height: 100svh; align-items: flex-end; overflow: hidden; background: var(--deep); color: var(--ocean-foreground); }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* Hero frame: as the page scrolls, the hero insets and rounds its corners.
   --hero-progress (0 to 1) is set by main.js, which also adds .hero-frame-ready
   only when motion is allowed and the window is at least 640px tall. */
.hero-frame-ready .hero { clip-path: inset(calc(var(--hero-progress, 0) * 1rem) round calc(var(--hero-progress, 0) * 1.5rem)); }
.hero-video { opacity: 0; transition: opacity 1.2s; }
.hero-video.is-playing { opacity: 1; }
.scrim-hero { position: absolute; inset: 0; z-index: 1; background: var(--scrim-hero); }
.hero-content { position: relative; z-index: 10; padding-top: 7rem; padding-bottom: 6rem; }
.hero-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; color: color-mix(in oklab, var(--ocean-foreground) 90%, transparent); }
.hero-title { margin-top: 1.25rem; font-size: clamp(3.6rem, 13vw, 10.5rem); line-height: .86; letter-spacing: -.025em; }
.hero-bottom { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 2rem; }
.hero-text { max-width: 28rem; font-size: 1.125rem; line-height: 1.625; color: color-mix(in oklab, var(--ocean-foreground) 90%, transparent); }
.hero-buttons { display: flex; flex-direction: column; gap: .75rem; }
.hero-scroll-line { display: none; position: absolute; bottom: 2rem; left: 50%; z-index: 10; width: 1px; height: 2.5rem; transform: translateX(-50%); background: color-mix(in oklab, var(--ocean-foreground) 40%, transparent); }
.hero-video-toggle { position: absolute; bottom: 1.5rem; right: 1.25rem; z-index: 20; display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--ocean-foreground) 40%, transparent); background: color-mix(in oklab, var(--deep) 30%, transparent); color: var(--ocean-foreground); transition: background-color .2s, color .2s; }
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover { background: var(--ocean-foreground); color: var(--ocean); }
.hero-video-toggle .i-play { display: none; }
.hero-video-toggle[aria-pressed="true"] .i-play { display: block; transform: translateX(1px); }
.hero-video-toggle[aria-pressed="true"] .i-pause { display: none; }
@media (min-width: 640px) { .hero-buttons { flex-direction: row; } }
@media (min-width: 768px) {
	.hero-content { padding-bottom: 7rem; }
	.hero-bottom { margin-top: 2.25rem; }
	.hero-text { font-size: 1.25rem; }
	.hero-scroll-line { display: block; }
	.hero-video-toggle { bottom: 2rem; right: 2rem; }
}

@media (min-width: 1024px) {
	.hero-bottom { flex-direction: row; align-items: flex-end; justify-content: space-between; }
	.hero-buttons { margin-right: 4rem; }
}

/* ---------- Meet Gary ---------- */
.about { position: relative; overflow: hidden; padding-block: 6rem; }
.about-grid { display: grid; gap: 4rem; }
.about-media { position: relative; }
.about-main { position: relative; margin-right: 1.5rem; }
.about-main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 82% center; }
.about-side { display: none; position: absolute; right: -1.75rem; top: 2.5rem; white-space: nowrap; color: var(--muted-foreground); transform-origin: top left; transform: translateX(100%) rotate(90deg); }
.about-small { position: absolute; bottom: -2.5rem; right: 0; width: 9rem; border: 6px solid var(--background); background: var(--background); box-shadow: var(--shadow-lift); }
.about-small img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.about-text { margin-top: 2rem; display: grid; gap: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.about-text strong { font-weight: 600; }
.facts { margin-top: 2.5rem; border-top: 1px solid var(--border); }
.fact { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; border-bottom: 1px solid var(--border); padding-block: 1rem; }
.fact dt { padding-top: .25rem; }
.fact dd { font-size: .98rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.about-btn { margin-top: 2.5rem; }
@media (min-width: 768px) {
	.about { padding-block: 9rem; }
	.about-main { margin-right: 4rem; }
	.about-main img { aspect-ratio: 5 / 6; }
	.about-side { display: block; }
	.about-small { width: 12rem; }
}
@media (min-width: 1024px) {
	.about-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
	.about-media { grid-column: span 6; }
	.about-body { grid-column: 8 / span 5; padding-top: 2.5rem; }
}

/* ---------- Adventures ---------- */
.adventures { position: relative; background: var(--ocean); color: var(--ocean-foreground); padding-block: 6rem; }
.adventures-head { display: grid; gap: 2rem; }
.adventures-head-text p { font-size: 1.125rem; line-height: 1.625; color: var(--ocean-muted); }
.adventures-grid { margin-top: 3.5rem; display: grid; gap: 1rem; }
.adv-tile { position: relative; isolation: isolate; display: flex; height: 100%; min-height: 460px; overflow: hidden; background: var(--deep); }
.adv-tile-large { min-height: 560px; }
.adv-tile > img { position: absolute; inset: 0; z-index: -10; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease-out; }
.adv-tile:hover > img { transform: scale(1.04); }
.scrim-tile { position: absolute; inset: 0; z-index: -10; background: var(--scrim-tile); }
.adv-tile-body { margin-top: auto; padding: 1.5rem; }
.adv-tile h3 { font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em; }
.adv-tile-large h3 { font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: 1; }
.adv-tile p, .adv-split p { margin-top: .75rem; max-width: 24rem; font-size: 1rem; line-height: 1.625; color: color-mix(in oklab, var(--ocean-foreground) 85%, transparent); }
.adv-tile .btn, .adv-split .btn { margin-top: 1.5rem; width: fit-content; }
.adv-split { display: grid; height: 100%; overflow: hidden; background: var(--teal); }
.adv-split-media { position: relative; min-height: 14rem; overflow: hidden; }
.adv-split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease-out; }
.adv-split-media img:hover { transform: scale(1.04); }
.adv-split-body { display: flex; flex-direction: column; padding: 1.5rem; }
.adv-split h3 { font-size: clamp(1.9rem, 2.3vw, 2.4rem); line-height: .95; letter-spacing: -.02em; }
@media (min-width: 640px) {
	.adv-split { grid-template-columns: 2fr 3fr; }
	.adv-split-media { min-height: 100%; }
}
@media (min-width: 768px) {
	.adventures { padding-block: 9rem; }
	.adventures-grid { margin-top: 5rem; gap: 1.25rem; }
	.adv-tile-body { padding: 2.5rem; }
	.adv-tile p { font-size: 1.125rem; }
	.adv-split-body { padding: 2rem; }
}
@media (min-width: 1024px) {
	.adventures-head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
	.adventures-head-title { grid-column: span 7; }
	.adventures-head-text { grid-column: 9 / span 4; }
	.adventures-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
	.adv-cell-1 { grid-column: span 7; grid-row: span 2; }
	.adv-cell-2, .adv-cell-3 { grid-column: span 5; }
	.adv-tile { min-height: 0; }
	.adv-tile-large { min-height: 780px; }
}

/* Adventure pop-up */
.adv-modal { padding: 0; border: 0; width: calc(100% - 1.5rem); max-width: 64rem; max-height: 92svh; margin: auto; overflow-y: auto; background: var(--background); color: var(--foreground); box-shadow: var(--shadow-lift); }
.adv-modal[open] { display: grid; animation: modal-in .25s ease-out; }
.adv-modal::backdrop { background: color-mix(in oklab, var(--deep) 80%, transparent); animation: fade-in .2s ease-out; }
.adv-modal-media { position: relative; aspect-ratio: 16 / 11; background: var(--deep); }
.adv-modal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adv-modal-body { display: flex; flex-direction: column; padding: 1.75rem; }
.adv-modal-body h2 { margin-top: 1rem; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: .95; letter-spacing: -.02em; }
.adv-modal-text { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.adv-modal-list { margin-top: 1.75rem; border-top: 1px solid var(--border); }
.adv-modal-list li { display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid var(--border); padding-block: .75rem; font-size: .98rem; }
.adv-modal-list li span { width: .375rem; height: .375rem; flex-shrink: 0; background: var(--primary); }
.adv-modal-cta { margin-top: 2rem; }
.adv-modal-cta .btn { width: 100%; }
.adv-modal-close { position: absolute; right: .75rem; top: .75rem; display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in oklab, var(--background) 90%, transparent); color: var(--foreground); box-shadow: var(--shadow-lift); transition: background-color .2s; }
.adv-modal-close:hover { background: var(--background); }
.adv-modal-close .icon { width: 1.25rem; height: 1.25rem; }
@keyframes modal-in { from { opacity: 0; transform: scale(.97); } }
@media (min-width: 640px) { .adv-modal-cta .btn { width: auto; } }
@media (min-width: 768px) {
	.adv-modal[open] { grid-template-columns: 1fr 1fr; overflow: hidden; }
	.adv-modal-media { aspect-ratio: auto; min-height: 560px; }
	.adv-modal-body { padding: 3rem; overflow-y: auto; }
	.adv-modal-cta { margin-top: auto; padding-top: 2rem; }
}
body.modal-open { overflow: hidden; }

/* ---------- More Ways (services) ---------- */
.services { position: relative; padding-top: 4rem; padding-bottom: 6rem; background: linear-gradient(180deg, var(--ocean) 0%, var(--ocean) 12%, #082036 22%, #102840 32%, #1c344e 42%, #2c4460 52%, #405a78 62%, #587494 72%, #7290b4 82%, #88a8d0 91%, #97b8e2 100%); }
.services-inner { position: relative; z-index: 10; }
.services-head { max-width: 42rem; margin-inline: auto; text-align: center; }
.services-head h2 { font-size: 2.5rem; line-height: .95; text-wrap: balance; color: var(--ocean-foreground); }
.services-head p { max-width: 28rem; margin: 1.25rem auto 0; font-size: 1rem; line-height: 1.625; color: color-mix(in oklab, var(--ocean-foreground) 80%, transparent); }
.services-grid { margin-top: 4rem; display: grid; gap: 3rem 2rem; }
.scrap-card { --tilt: -1.6deg; position: relative; display: flex; flex-direction: column; background: var(--background); padding: .75rem .75rem .5rem; box-shadow: var(--shadow-lift); transform: rotate(var(--tilt)); transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .7s cubic-bezier(.22,1,.36,1); }
.scrap-card:nth-child(2) { --tilt: 1.4deg; }
.scrap-card:nth-child(3) { --tilt: 1.1deg; }
.scrap-card:nth-child(4) { --tilt: -1.2deg; }
.scrap-card:hover { transform: rotate(0) translateY(-6px); }
.scrap-tape { position: absolute; top: -.75rem; left: 50%; width: 6.5rem; height: 1.6rem; background: color-mix(in oklab, var(--sand) 70%, transparent); box-shadow: 0 1px 3px color-mix(in oklab, var(--deep) 15%, transparent); transform: translateX(-50%) rotate(-3deg); }
.scrap-card:nth-child(2n) .scrap-tape { transform: translateX(-50%) rotate(3deg); }
.scrap-img { aspect-ratio: 4 / 5; overflow: hidden; }
.scrap-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.scrap-card:hover .scrap-img img { transform: scale(1.04); }
.scrap-body { display: flex; flex: 1; flex-direction: column; padding: 1rem; }
.scrap-body h3 { font-size: 1.5rem; line-height: 1.25; }
.scrap-body p { margin-top: .75rem; font-size: .98rem; line-height: 1.625; color: color-mix(in oklab, var(--foreground) 75%, transparent); }
.scrap-link { margin-top: auto; display: inline-flex; width: fit-content; align-items: center; gap: .5rem; padding-top: 1.25rem; font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.scrap-link .icon { transition: transform .3s; }
.scrap-link:hover .icon { transform: translateX(4px); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
	.services { margin-top: -2.5rem; padding-bottom: 8rem; }
	.services-head h2 { font-size: 3.5rem; }
	.services-head p { font-size: 1.125rem; }
}
@media (min-width: 1024px) { .services-head h2 { font-size: 4rem; } }
@media (min-width: 1280px) { .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Press ---------- */
.press { position: relative; overflow: hidden; background: var(--teal); color: var(--ocean-foreground); }
.press-hero { position: relative; height: 46vh; min-height: 320px; }
.press-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 40%; }
.press-fade-bottom { position: absolute; inset: 0; background: linear-gradient(to top, var(--teal), color-mix(in oklab, var(--teal) 20%, transparent), transparent); }
.press-fade-top { position: absolute; inset: 0 0 auto 0; height: 18%; background: linear-gradient(to bottom, #97b8e2, transparent); }
.press-content { position: relative; margin-top: -6rem; padding-bottom: 6rem; }
.press-grid { display: grid; gap: 3rem; }
.press-intro p { margin-top: 1.75rem; max-width: 32rem; font-size: 1.125rem; line-height: 1.625; color: color-mix(in oklab, var(--ocean-foreground) 85%, transparent); }
.press-intro p strong { font-weight: 600; color: var(--ocean-foreground); }
.press-intro .btn { margin-top: 2.25rem; }
.press-list { border-top: 1px solid var(--ocean-line); }
.press-list li { display: grid; gap: 1.25rem; border-bottom: 1px solid var(--ocean-line); padding-block: 1.5rem; }
.press-list li.has-img { grid-template-columns: 1fr 5.5rem; }
.press-list li > img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.press-item-title { margin-top: .5rem; font-size: 1.5rem; line-height: 2rem; }
.press-item-text { margin-top: .375rem; font-size: .95rem; line-height: 1.625; color: var(--ocean-muted); }
.press-link { margin-top: 1rem; display: inline-flex; align-items: center; gap: .375rem; color: var(--ocean-foreground); text-underline-offset: 8px; }
.press-link:hover { text-decoration: underline; }
.press-link .icon { width: .875rem; height: .875rem; }
@media (min-width: 768px) {
	.press-hero { height: 62vh; }
	.press-content { margin-top: -10rem; padding-bottom: 8rem; }
	.press-item-title { font-size: 1.75rem; }
}
@media (min-width: 1024px) {
	.press-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
	.press-intro { grid-column: span 6; }
	.press-list-wrap { grid-column: 8 / span 5; padding-top: 7rem; }
}

/* ---------- Contact ---------- */
.contact { padding-block: 6rem; }
.contact-grid { display: grid; gap: 3.5rem; }
.contact-info h2 { font-size: clamp(2.75rem, 6.5vw, 5.25rem); }
.contact-text { margin-top: 1.75rem; max-width: 28rem; font-size: 1.125rem; line-height: 1.625; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.contact-ways { margin-top: 2.5rem; display: grid; gap: 1.5rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.contact-way { display: flex; align-items: flex-start; gap: 1rem; border-radius: var(--radius); }
.contact-icon { margin-top: .25rem; width: 1.25rem; height: 1.25rem; color: var(--accent); stroke-width: 1.75; }
.contact-way .eyebrow { display: block; color: var(--muted-foreground); }
.contact-phone { display: block; margin-top: .25rem; font-size: 1.5rem; line-height: 2rem; transition: color .2s; }
.contact-note { display: block; margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }
.contact-email { display: block; margin-top: .25rem; font-size: 1.125rem; font-weight: 600; word-break: break-all; transition: color .2s; }
.contact-way:hover .contact-phone, .contact-way:hover .contact-email { color: var(--accent); }
.contact-card { position: relative; border: 1px solid var(--border); background: var(--card); padding: 1.5rem; box-shadow: var(--shadow-lift); }
.contact-card-bar { position: absolute; left: 0; top: 0; height: .25rem; width: 6rem; background: var(--primary); }
.contact-form { display: grid; gap: 1.5rem; }
.contact-form label { display: block; font-size: .875rem; font-weight: 600; }
.contact-form input, .contact-form select, .contact-form textarea { display: block; width: 100%; margin-top: .5rem; border-radius: var(--radius); border: 1px solid var(--input); background-color: var(--background); padding: .875rem 1rem; font-size: 1rem; font-weight: 400; color: var(--foreground); transition: border-color .2s; }
.contact-form ::placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--accent); outline: none; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.contact-form select { appearance: none; padding-right: 3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-size: 1rem; background-position: right 1rem center; background-repeat: no-repeat; }
.contact-form select.flash { animation: interest-flash .9s ease-out; }
.contact-form textarea { resize: vertical; }
.contact-form .hp { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.form-foot { display: flex; flex-direction: column; gap: 1rem; }
.form-note { font-size: .875rem; color: var(--muted-foreground); }
.form-message { display: flex; align-items: flex-start; gap: .625rem; margin-bottom: 1.5rem; padding: 1rem 1.125rem; border-radius: var(--radius); font-size: .95rem; font-weight: 500; }
.form-message.is-success { background: color-mix(in oklab, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); color: var(--accent); }
.form-message.is-success .icon { margin-top: .2rem; }
.form-message.is-error { background: oklch(95% .03 30); border: 1px solid oklch(80% .08 30); color: oklch(45% .15 30); }
@keyframes interest-flash { 0% { box-shadow: 0 0 0 0 oklch(71% .16 50 / .7); } to { box-shadow: 0 0 0 12px oklch(71% .16 50 / 0); } }
@media (min-width: 640px) {
	.contact-card { padding: 2.25rem; }
	.contact-form { grid-template-columns: 1fr 1fr; }
	.contact-form .span-2 { grid-column: span 2; }
	.form-foot { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 768px) {
	.contact { padding-block: 9rem; }
	.contact-card { padding: 3rem; }
}
@media (min-width: 1024px) {
	.contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
	.contact-info { grid-column: span 5; }
	.contact-form-wrap { grid-column: span 7; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); color: var(--ocean-foreground); }
.footer-inner { padding-top: 5rem; padding-bottom: 2.5rem; }
.footer-big { font-size: clamp(3rem, 10vw, 8.5rem); line-height: .88; letter-spacing: -.03em; }
.footer-grid { margin-top: 4rem; display: grid; gap: 2.5rem; border-top: 1px solid var(--ocean-line); padding-top: 2.5rem; }
.footer-social { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.footer-social a { display: inline-flex; align-items: center; gap: .625rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ocean-muted); transition: color .2s; }
.footer-social a:hover { color: var(--sand); }
.footer-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; }
.footer-nav a, .footer-email, .footer-bottom a { color: var(--ocean-muted); transition: color .2s; }
.footer-nav a:hover, .footer-email:hover, .footer-bottom a:hover { color: var(--ocean-foreground); }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.footer-phone { font-family: var(--font-display); font-size: 1.5rem; line-height: 2rem; font-weight: 500; transition: color .2s; }
.footer-phone:hover { color: var(--sunset-glow); }
.footer-email { word-break: break-all; }
.footer-bottom { margin-top: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; border-top: 1px solid var(--ocean-line); padding-top: 1.5rem; font-size: .875rem; color: var(--ocean-muted); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.footer-top { display: inline-flex; align-items: center; gap: .5rem; }
@media (min-width: 640px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-nav { order: 3; grid-column: span 2; }
	.footer-nav ul { max-width: 24rem; }
	.footer-contact { align-items: flex-end; text-align: right; }
	.footer-bottom { column-gap: 2rem; }
}
@media (min-width: 768px) { .footer-inner { padding-top: 7rem; } }
@media (min-width: 1024px) {
	.footer-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
	.footer-nav { order: 0; grid-column: auto; }
	.footer-nav ul { max-width: none; }
}

/* ---------- Ordinary pages ---------- */
.page-hero { background: var(--ocean); color: var(--ocean-foreground); padding: 9rem 0 4rem; }
.page-narrow { max-width: 48rem; }
.page-back { color: var(--ocean-muted); }
.page-back:hover { color: var(--ocean-foreground); }
.page-hero h1 { margin-top: 1.5rem; font-size: clamp(2.75rem, 6.5vw, 4.5rem); line-height: .95; letter-spacing: -.02em; }
.page-updated { margin-top: 1.25rem; color: var(--ocean-muted); }
.page-body { padding: 4rem 0 6rem; }
.prose { font-size: 1.0625rem; line-height: 1.7; color: color-mix(in oklab, var(--foreground) 88%, transparent); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.25em; font-family: var(--font-display); font-weight: 500; font-size: 1.85rem; line-height: 1.15; letter-spacing: -.01em; color: var(--foreground); }
.prose h3 { margin-top: 1.75em; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--foreground); }
.prose ul { display: grid; gap: .5em; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before { content: "—"; position: absolute; left: 0; color: var(--primary); }
.prose ol { list-style: decimal; padding-left: 1.25rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; color: var(--foreground); }

/* ---------- Motion ---------- */
@keyframes hero-rise { 0% { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
	.js .hero-rise { opacity: 0; animation: hero-rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
	.js.hero-done .hero-rise { opacity: 1; animation: none; }
	.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s, transform .9s cubic-bezier(.2,.7,.2,1); }
	.js [data-reveal].is-visible { opacity: 1; transform: none; }
}