/* Patrika Cloud — "Gulabi" theme. Pastel Jaipur, Apple-grade motion. Values from gulabi-tokens.css. */

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--color-inverse); }
body {
  margin: 0; background: var(--color-bg); color: var(--color-ink);
  font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
img.is-missing { opacity: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 var(--space-5); }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: var(--weight-light);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-5); color: var(--color-ink);
}
strong { font-weight: var(--weight-medium); color: var(--color-ink); }
::selection { background: var(--lilac); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }
.sr-only { position: absolute; 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; left: var(--space-4); top: calc(-1 * var(--space-9)); z-index: var(--z-curtain); background: var(--color-ink); color: var(--color-on-inverse); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); }
.skip-link:focus { top: var(--space-4); }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--container-narrow); margin-left: auto; margin-right: auto; }
.center { text-align: center; }

/* page shell — scales back like iOS when the menu opens */
.page-shell {
  position: relative; background: var(--color-bg); min-height: 100vh;
  transition: transform var(--dur-slow) var(--spring), border-radius var(--dur-slow) var(--spring), filter var(--dur-slow) var(--spring);
  transform-origin: 50% 0;
}
body.menu-open .page-shell { transform: scale(0.94) translateY(var(--space-6)); border-radius: var(--radius-lg); overflow: hidden; filter: saturate(0.8); }

/* ============================================================ type primitives */
.eyebrow {
  display: block; font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular);
  font-size: var(--text-lg); color: var(--color-ink-muted); margin: 0 0 var(--space-4); letter-spacing: 0;
}
.label { display: block; font-size: var(--text-xs); color: var(--color-ink-subtle); margin: 0 0 var(--space-2); letter-spacing: var(--tracking-ui); }
.display, .page-intro .split-line > span {
  background: var(--ink-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 0.06em;
}
.display { font-size: var(--text-hero); font-weight: var(--weight-light); line-height: var(--leading-display); }
.title { font-size: var(--text-3xl); }
.lede { font-size: var(--text-lg); color: var(--color-ink-muted); max-width: var(--measure); margin-left: auto; margin-right: auto; }
.prose { max-width: var(--measure); }
.prose.center, .center .prose { margin-left: auto; margin-right: auto; }
.prose p, .prose li { color: var(--color-ink-muted); font-size: var(--text-lg); font-weight: var(--weight-light); }
.prose ul { padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.prose li { padding: var(--space-4) var(--space-5); background: var(--glass); border-radius: var(--radius-sm); }
.prose h3, .prose h4 { font-size: var(--text-2xl); margin-top: var(--space-8); }
.prose a, .link {
  color: var(--color-ink);
  background: linear-gradient(90deg, var(--blush-deep), var(--lilac-deep)) 0 100% / 100% 2px no-repeat;
  transition: background-size var(--dur-base) var(--spring);
}
.prose a:hover, .link:hover { background-size: 100% 100%; }

/* ============================================================ icons */
.icon { width: var(--icon); height: var(--icon); flex: none; stroke: currentColor; fill: none; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }

/* ============================================================ buttons */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: calc(var(--tap-min) + var(--space-2)); padding: 0 var(--space-6);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-ui);
  border-radius: var(--radius-pill); border: var(--border) solid transparent; cursor: pointer;
  transition: transform var(--dur-base) var(--spring-bouncy), box-shadow var(--dur-base) var(--spring), background-color var(--dur-base) var(--spring), color var(--dur-base) var(--spring);
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: scale(0.97); transition-duration: var(--dur-fast); }
.btn .icon { transition: transform var(--dur-base) var(--spring-bouncy); }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary { background: var(--color-ink); color: var(--color-on-inverse); box-shadow: var(--shadow-soft); }
.btn-primary::after { /* pastel sheen */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(233,183,172,0.55) 40%, rgba(201,181,232,0.55) 55%, transparent 75%) -150% 0 / 250% 100% no-repeat;
  transition: opacity var(--dur-fast) linear;
}
.btn-primary:hover::after { opacity: 1; animation: sheen 1.4s var(--spring) forwards; }
@keyframes sheen { to { background-position: 150% 0; } }
.btn-outline { background: var(--glass); color: var(--color-ink); border-color: var(--color-hairline-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn-outline:hover { background: var(--lilac); border-color: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }
.center .btn-row, .btn-row.center { justify-content: center; }
.text-link {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink);
}
.text-link .icon { transition: transform var(--dur-base) var(--spring-bouncy); }
.text-link:hover .icon { transform: translateX(4px); }

/* ============================================================ header — glass bar */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: var(--header-h); color: var(--color-ink);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: var(--border) solid var(--color-hairline);
  transition: background-color var(--dur-base) var(--spring), color var(--dur-base) var(--spring), border-color var(--dur-base) var(--spring), transform var(--dur-base) var(--spring);
}
.site-header.is-hidden { transform: translateY(-110%); }
.header-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; }
.menu-btn {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--space-4) 0 var(--space-3); margin-left: calc(-1 * var(--space-3));
  border: 0; border-radius: var(--radius-pill); background: none; color: inherit; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: background-color var(--dur-fast) var(--spring);
}
.menu-btn:hover { background: var(--color-hairline); }
.burger { position: relative; width: 18px; height: 10px; }
.burger i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform var(--dur-base) var(--spring-bouncy), width var(--dur-base) var(--spring); }
.burger i:first-child { top: 0; }
.burger i:last-child { bottom: 0; width: 60%; }
.menu-btn:hover .burger i:last-child { width: 100%; }
.brand { justify-self: center; display: inline-flex; align-items: center; min-height: var(--tap-min); }
.brand img { height: var(--logo-h); width: auto; filter: brightness(0) saturate(100%) invert(10%) sepia(16%) saturate(1200%) hue-rotate(210deg); transition: filter var(--dur-base) var(--spring); }
.header-right { justify-self: end; display: flex; align-items: center; gap: var(--space-2); }
.header-right a {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-medium); transition: background-color var(--dur-fast) var(--spring);
}
.header-right a:hover { background: var(--color-hairline); }
.header-right .hide-sm { display: none; }
@media (min-width: 720px) { .header-right .hide-sm { display: inline-flex; } }
.menu-btn-label { display: none; }
@media (min-width: 480px) { .menu-btn-label { display: inline; } }
@media (min-width: 900px) {
  body.has-hero .site-header.is-top { background: transparent; color: var(--color-on-inverse); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.has-hero .site-header.is-top .brand img { filter: brightness(0) invert(1); }
  body.has-hero .site-header.is-top .menu-btn:hover, body.has-hero .site-header.is-top .header-right a:hover { background: var(--color-on-inverse-hairline); }
}
body:not(.has-hero) .page-shell, body.has-hero .page-shell { padding-top: var(--header-h); }
@media (min-width: 900px) { body.has-hero .page-shell { padding-top: 0; } }

/* ============================================================ menu — frosted full-screen sheet */
.menu { position: fixed; inset: 0; z-index: var(--z-menu); visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--dur-slow); }
.menu.is-open { visibility: visible; pointer-events: auto; transition: none; }
.menu-veil {
  position: absolute; inset: 0; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  opacity: 0; transition: opacity var(--dur-base) var(--spring);
}
.menu-veil::before { content: ""; position: absolute; inset: -20%; background: var(--aurora); opacity: 0.85; animation: drift var(--dur-aurora) ease-in-out infinite alternate; }
.menu.is-open .menu-veil { opacity: 1; }
.menu-panel { position: relative; height: 100%; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; max-width: 640px; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--gutter); flex: none; }
.menu-close {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-4) 0 var(--space-3);
  border: 0; border-radius: var(--radius-pill); background: var(--glass); cursor: pointer; color: var(--color-ink);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  opacity: 0; transform: scale(0.8); transition: opacity var(--dur-base) var(--spring), transform var(--dur-base) var(--spring-bouncy);
}
.menu.is-open .menu-close { opacity: 1; transform: none; transition-delay: 120ms; }
.menu-top .brand { opacity: 0; transition: opacity var(--dur-base) var(--spring); }
.menu.is-open .menu-top .brand { opacity: 1; transition-delay: 200ms; }
.menu-nav { padding: var(--space-5) var(--gutter) var(--space-7); flex: 1; }
.menu-list, .menu-sub { list-style: none; margin: 0; padding: 0; }
.menu-list > li {
  opacity: 0; filter: blur(var(--reveal-blur)); transform: translateY(var(--space-6)) scale(0.98);
  transition: opacity var(--dur-base) var(--spring), transform var(--dur-slow) var(--spring), filter var(--dur-base) var(--spring);
}
.menu.is-open .menu-list > li { opacity: 1; filter: none; transform: none; transition-delay: calc(140ms + var(--i) * 45ms); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.menu-link {
  flex: 1; display: flex; align-items: center; min-height: calc(var(--tap-min) + var(--space-3)); padding: var(--space-1) 0;
  font-family: var(--font-display); font-size: var(--text-menu); font-weight: var(--weight-light); letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug); color: var(--color-ink);
  transition: color var(--dur-fast) var(--spring), transform var(--dur-base) var(--spring);
}
.menu-list:hover .menu-link { color: var(--color-ink-subtle); }
.menu-list .menu-link:hover, .menu-list .menu-link:focus-visible { color: var(--color-ink); transform: translateX(var(--space-3)); }
.menu-link[aria-current="page"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand); margin-left: var(--space-4); }
.menu-expand {
  width: var(--tap-min); height: var(--tap-min); border: 0; border-radius: 50%; background: var(--glass); cursor: pointer; color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--dur-fast) var(--spring);
}
.menu-expand:hover { background: var(--color-surface); }
.menu-expand .icon { transition: transform var(--dur-base) var(--spring-bouncy); }
.menu-expand[aria-expanded="true"] .icon { transform: rotate(135deg); }
.menu-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--spring); }
.menu-sub > div { overflow: hidden; }
.menu-sub.is-open { grid-template-rows: 1fr; }
.menu-sub a { display: flex; align-items: center; min-height: var(--tap-min); padding-left: var(--space-1); font-size: var(--text-md); color: var(--color-ink-muted); transition: color var(--dur-fast) var(--spring), transform var(--dur-base) var(--spring); }
.menu-sub a:hover { color: var(--color-ink); transform: translateX(var(--space-2)); }
.menu-sub div > a:last-child { margin-bottom: var(--space-4); }
.menu-utility {
  flex: none; padding: var(--space-5) var(--gutter) var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  opacity: 0; transition: opacity var(--dur-base) var(--spring);
}
.menu.is-open .menu-utility { opacity: 1; transition-delay: 500ms; }
.menu-utility ul { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.menu-utility a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--color-ink-muted); }
.menu-utility a:hover { color: var(--color-ink); background: var(--glass); }
.menu-preview { display: none; margin: 0; }
@media (min-width: 1100px) {
  .menu-preview {
    display: block; position: absolute; top: 50%; right: var(--gutter); width: min(42vw, 620px); aspect-ratio: 4 / 5; translate: 0 -50%;
    border-radius: var(--radius-lg); overflow: hidden; background: var(--lilac); box-shadow: var(--shadow-float);
    opacity: 0; transform: perspective(1200px) rotateY(-14deg) translateX(8%) scale(0.92);
    transition: opacity var(--dur-slow) var(--spring), transform var(--dur-slow) var(--spring);
  }
  .menu.is-open .menu-preview { opacity: 1; transform: perspective(1200px) rotateY(-4deg); transition-delay: 220ms; }
  .menu-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity var(--dur-base) var(--spring), transform var(--dur-kenburns) var(--spring); }
  .menu-preview img.is-active { opacity: 1; transform: scale(1); }
  .menu-preview figcaption {
    position: absolute; left: var(--space-5); bottom: var(--space-5); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
    background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
  }
}

/* ============================================================ hero — shrinks into a card as you scroll away */
.hero-wrap { padding: 0; }
.hero {
  position: relative; overflow: hidden; background: var(--color-inverse);
  transform: scale(calc(1 - var(--p, 0) * 0.08)); border-radius: calc(var(--p, 0) * var(--radius-lg));
  transform-origin: 50% 100%; will-change: transform;
}
.hero-track { position: relative; aspect-ratio: var(--hero-ratio); }
.hero .item { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-inout); }
.hero .item.active { opacity: 1; z-index: 1; }
.hero .item img { width: 100%; height: 100%; object-fit: cover; }
.hero .item.active img { animation: kenburns var(--dur-kenburns) var(--spring) both; }
@keyframes kenburns { from { transform: scale(var(--zoom-start)); filter: blur(6px); } 20% { filter: blur(0); } to { transform: scale(1); filter: blur(0); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--hero-shade); }
.hero-controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--gutter); color: var(--color-on-inverse); }
.carousel-indicators {
  display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: rgba(30,28,42,0.25); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.carousel-indicators button { position: relative; width: 8px; height: var(--tap-min); padding: 0 var(--space-2); box-sizing: content-box; border: 0; background: none; cursor: pointer; transition: width var(--dur-base) var(--spring); }
.carousel-indicators button::before, .carousel-indicators button::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); top: 50%; height: 8px; margin-top: -4px; border-radius: var(--radius-pill); background: var(--color-on-inverse-hairline); }
.carousel-indicators button::after { background: var(--color-on-inverse); transform: scaleX(0); transform-origin: left center; }
.carousel-indicators button[aria-current="true"] { width: 36px; }
.carousel-indicators button[aria-current="true"]::after { animation: progress var(--dur-slide) linear forwards; }
.hero.is-paused .carousel-indicators button[aria-current="true"]::after { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }
.hero-arrows { display: flex; gap: var(--space-2); }
.carousel-control {
  display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border-radius: 50%;
  color: var(--color-on-inverse); background: rgba(30,28,42,0.25); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: transform var(--dur-base) var(--spring-bouncy), background-color var(--dur-fast) var(--spring);
}
.carousel-control:hover { transform: scale(1.1); background: rgba(255,253,251,0.3); }
@media (max-width: 599px) { .hero-arrows { display: none; } .hero-controls { bottom: 0; } .carousel-indicators { background: none; } }

/* ============================================================ aurora light */
.aurora-host { position: relative; isolation: isolate; overflow: hidden; }
.aurora { position: absolute; inset: -25%; z-index: -1; background: var(--aurora); animation: drift var(--dur-aurora) ease-in-out infinite alternate; pointer-events: none; }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-3%, 4%, 0) rotate(-6deg) scale(1.02); }
}

/* ============================================================ sections & tints */
.section { padding: var(--section-y) 0; }
.section.tight { padding: calc(var(--section-y) / 2) 0; }
.section + .section { padding-top: 0; }
.section.band { padding: var(--section-y) 0; margin: 0 var(--space-3); border-radius: var(--radius-lg); }
.section.band + .section, .section + .section.band { margin-top: 0; }
.section.band + .section:not(.band) { padding-top: var(--section-y); }
.section.band + .section.band { margin-top: var(--space-3); }
@media (min-width: 900px) { .section.band { margin: 0 var(--space-5); } }
.tint-blush   { background: linear-gradient(160deg, var(--blush), color-mix(in srgb, var(--blush) 40%, var(--color-bg))); }
.tint-lake    { background: linear-gradient(160deg, var(--lake), color-mix(in srgb, var(--lake) 40%, var(--color-bg))); }
.tint-saffron { background: linear-gradient(160deg, var(--saffron), color-mix(in srgb, var(--saffron) 40%, var(--color-bg))); }
.tint-sage    { background: linear-gradient(160deg, var(--sage), color-mix(in srgb, var(--sage) 40%, var(--color-bg))); }
.tint-lilac   { background: linear-gradient(160deg, var(--lilac), color-mix(in srgb, var(--lilac) 40%, var(--color-bg))); }
.section-head { text-align: center; margin: 0 auto var(--space-8); max-width: var(--container-narrow); }
.section-head h2, .section-head h3 { font-size: var(--text-3xl); margin: 0; }
.section-head .text-link { margin-top: var(--space-3); }

.page-intro { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--section-y) * 1.1) 0 var(--section-y); text-align: center; }
.page-intro .aurora { opacity: 0.9; }
.page-intro h1, .page-intro h2, .page-intro h4 { font-size: var(--text-4xl); margin: 0 auto; max-width: 16ch; padding-bottom: 0.08em; }
.page-intro .lede { margin-top: var(--space-6); }
.page-intro .rule { display: none; }
.breadcrumb {
  display: inline-flex; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-6); padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  font-size: var(--text-xs); color: var(--color-ink-muted);
}
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-2); color: var(--color-ink-subtle); }
.breadcrumb a { display: inline-flex; min-height: 32px; align-items: center; }
.breadcrumb a:hover { color: var(--color-ink); }

/* ============================================================ figures & splits */
.figure { position: relative; overflow: hidden; background: var(--color-surface-2); margin: 0; border-radius: var(--radius-lg); transform: translateZ(0); }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--spring); }
.figure.contain { background: linear-gradient(160deg, var(--lake), var(--lilac)); }
.figure.contain img { object-fit: contain; padding: var(--space-7); }
.figure.wide { aspect-ratio: var(--wide-ratio); }
.figure.portrait { aspect-ratio: var(--thumb-ratio); }
.figure.natural img { height: auto; }
.split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
  .split > .figure { grid-column: 1 / span 6; }
  .split > .split-text { grid-column: 8 / span 5; }
  .split.reverse > .figure { grid-column: 7 / span 6; grid-row: 1; }
  .split.reverse > .split-text { grid-column: 1 / span 5; grid-row: 1; }
}
.split-text h3 { font-size: var(--text-3xl); }
.split-text p { color: var(--color-ink-muted); font-weight: var(--weight-light); font-size: var(--text-lg); }
[data-parallax] img { transform: translateY(calc(var(--py, 0) * 1px)) scale(1.12); }

/* ============================================================ home: scroll story (signature) */
.story { position: relative; height: 280vh; }
.story-pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.story-pin .aurora { opacity: calc(0.35 + var(--p, 0) * 0.65); }
.story-inner { max-width: 1100px; padding: 0 var(--gutter); text-align: center; }
.scrub { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-hero); line-height: var(--leading-display); letter-spacing: var(--tracking-display); margin: 0; color: var(--color-ink); }
.scrub .w { display: inline-block; opacity: 0.12; filter: blur(2px); transition: opacity 400ms var(--spring), filter 400ms var(--spring), transform 600ms var(--spring); transform: translateY(0.08em); }
.scrub .w.on { opacity: 1; filter: none; transform: none; }
.scrub-sub { margin-top: var(--space-7); font-size: var(--text-lg); color: var(--color-ink-muted); opacity: calc((var(--p, 0) - 0.75) * 4); transform: translateY(calc((1 - var(--p, 0)) * 30px)); }
.scroll-cue { position: absolute; bottom: var(--space-6); left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-ink-subtle); opacity: calc(1 - var(--p, 0) * 6); }
.scroll-cue i { width: 1px; height: 40px; background: linear-gradient(var(--color-ink-subtle), transparent); animation: cue 2.2s var(--spring) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* film zoom-out */
.zoom { position: relative; height: 220vh; }
.zoom-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); overflow: hidden; }
.zoom-media {
  width: min(70vw, 1040px, calc((100vh - 280px) * 16 / 9)); aspect-ratio: var(--wide-ratio); position: relative; overflow: hidden; background: var(--color-inverse);
  transform: scale(calc(1.9 - var(--p, 0) * 0.9)); border-radius: calc(var(--p, 0) * var(--radius-lg));
  box-shadow: 0 calc(var(--p, 0) * 60px) calc(var(--p, 0) * 120px) calc(var(--p, 0) * -40px) rgba(74,63,107,0.45);
  will-change: transform; z-index: 1;
}
.zoom-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zoom-caption { position: relative; text-align: center; padding: 0 var(--gutter); opacity: calc((var(--p, 0) - 0.7) * 3.3); transform: translateY(calc((1 - var(--p, 0)) * 40px)); }
.zoom-caption h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.zoom-caption p { margin: 0 auto; max-width: var(--measure); color: var(--color-ink-muted); }
@media (max-width: 699px) {
  .zoom { height: auto; } .zoom-pin { position: relative; height: auto; display: block; padding: var(--space-8) var(--gutter); }
  .zoom-media { width: 100%; transform: none; border-radius: var(--radius-md); } .zoom-caption { position: static; opacity: 1; transform: none; margin-top: var(--space-6); }
}

/* horizontal glide */
.hscroll { position: relative; }
.hscroll-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hscroll-head { padding: 0 var(--gutter); margin-bottom: var(--space-7); display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); max-width: var(--container-max); width: 100%; margin-left: auto; margin-right: auto; }
.hscroll-head h2 { font-size: var(--text-3xl); margin: 0; }
.hscroll-track { display: flex; gap: var(--space-5); padding: 0 var(--gutter); transform: translate3d(calc(var(--x, 0) * -1px), 0, 0); will-change: transform; }
.glide-card { flex: none; width: clamp(260px, 30vw, 420px); }
.glide-card .figure { aspect-ratio: 4 / 5; margin-bottom: var(--space-4); box-shadow: var(--shadow-soft); }
.glide-card h3 { font-size: var(--text-xl); margin: 0; }
.glide-card:nth-child(5n+1) .figure { background: var(--blush); } .glide-card:nth-child(5n+2) .figure { background: var(--lake); }
.glide-card:nth-child(5n+3) .figure { background: var(--saffron); } .glide-card:nth-child(5n+4) .figure { background: var(--sage); }
.glide-card:nth-child(5n+5) .figure { background: var(--lilac); }
.glide-card .figure { transition: transform var(--dur-base) var(--spring-bouncy), box-shadow var(--dur-base) var(--spring); }
.glide-card:hover .figure { transform: translateY(-8px); box-shadow: var(--shadow-float); }
.glide-card:hover .figure img { transform: scale(var(--zoom-hover)); }
.hscroll-progress { margin: var(--space-7) var(--gutter) 0; height: 2px; max-width: 320px; background: var(--color-hairline); border-radius: 2px; overflow: hidden; }
.hscroll-progress i { display: block; height: 100%; background: var(--ink-gradient); transform: scaleX(var(--p, 0)); transform-origin: left; }
@media (max-width: 699px) {
  .hscroll { height: auto !important; } .hscroll-pin { position: relative; height: auto; padding: var(--section-y) 0; }
  .hscroll-track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none; padding-bottom: var(--space-4); scrollbar-width: none; }
  .hscroll-track::-webkit-scrollbar { display: none; }
  .glide-card { scroll-snap-align: start; width: 78vw; } .hscroll-progress { display: none; }
}

/* ============================================================ cards */
.cards { display: grid; gap: var(--space-8) var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-9) var(--space-6); } }
.cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .cards.one-sm { grid-template-columns: minmax(0, 1fr); } }
.card { display: block; text-align: center; color: var(--color-ink); perspective: 1000px; }
.card .figure {
  aspect-ratio: var(--thumb-ratio); margin-bottom: var(--space-5);
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
  transition: transform var(--dur-base) var(--spring), box-shadow var(--dur-base) var(--spring);
}
.card:hover .figure { box-shadow: var(--shadow-float); }
.card:hover .figure img { transform: scale(var(--zoom-hover)); }
.cards > .card:nth-child(5n+1) .figure:not(.contain) { background: var(--blush); }
.cards > .card:nth-child(5n+2) .figure:not(.contain) { background: var(--lake); }
.cards > .card:nth-child(5n+3) .figure:not(.contain) { background: var(--saffron); }
.cards > .card:nth-child(5n+4) .figure:not(.contain) { background: var(--sage); }
.cards > .card:nth-child(5n+5) .figure:not(.contain) { background: var(--lilac); }
.cards > .card:nth-child(5n+2) .figure.contain { background: linear-gradient(160deg, var(--blush), var(--saffron)); }
.cards > .card:nth-child(5n+3) .figure.contain { background: linear-gradient(160deg, var(--sage), var(--lake)); }
.card .label { margin-bottom: var(--space-1); }
.card-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-regular); line-height: var(--leading-snug); margin: 0; }
.card .meta { margin-top: var(--space-3); display: flex; justify-content: center; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-ink-subtle); }
.card .meta a { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--lilac); color: var(--color-ink); }
.card .discover { display: inline-flex; align-items: center; margin-top: var(--space-3); min-height: 32px; font-size: var(--text-sm); color: var(--color-ink-muted); opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--spring), transform var(--dur-base) var(--spring); }
.card:hover .discover, .card:focus-visible .discover { opacity: 1; transform: none; }
@media (hover: none) { .card .discover { opacity: 1; transform: none; } }
.card[hidden] { display: none; }

/* segmented control (iOS) */
.filters {
  position: relative; display: flex; width: max-content; max-width: 100%; margin: 0 auto var(--space-8); padding: var(--space-1);
  gap: 0; overflow-x: auto; scrollbar-width: none; border-radius: var(--radius-pill);
  background: var(--color-surface-2); box-shadow: inset 0 0 0 var(--border) var(--color-hairline);
}
.filters::-webkit-scrollbar { display: none; }
.filters .thumb {
  position: absolute; top: var(--space-1); bottom: var(--space-1); left: 0; width: 0; border-radius: var(--radius-pill);
  background: var(--color-surface); box-shadow: 0 2px 8px rgba(30,28,42,0.10), 0 0 0 0.5px rgba(30,28,42,0.06);
  transition: transform var(--dur-base) var(--spring-bouncy), width var(--dur-base) var(--spring-bouncy);
}
.filters button, .filters a {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4);
  border: 0; background: none; cursor: pointer; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink-muted);
  transition: color var(--dur-fast) var(--spring);
}
.filters button:hover, .filters button[aria-pressed="true"], .filters a:hover { color: var(--color-ink); }

/* ============================================================ galleries & media */
.gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery a { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--radius-md); background: var(--color-surface-2); transform: translateZ(0); }
.gallery a:nth-child(5n+1) { background: var(--blush); } .gallery a:nth-child(5n+2) { background: var(--lake); }
.gallery a:nth-child(5n+3) { background: var(--saffron); } .gallery a:nth-child(5n+4) { background: var(--sage); } .gallery a:nth-child(5n+5) { background: var(--lilac); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--spring); }
.gallery a:hover img { transform: scale(var(--zoom-hover)); }
@media (min-width: 1100px) { .gallery a:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; } }

.videos { display: grid; gap: var(--space-8) var(--space-6); }
@media (min-width: 900px) { .videos.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.video-item { display: flex; flex-direction: column; }
.video-item h3, .video-item h4 { font-size: var(--text-xl); text-align: center; margin: var(--space-5) 0 0; }
.video-frame { position: relative; aspect-ratio: var(--wide-ratio); background: var(--color-inverse); overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transform: translateZ(0); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.index-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
@media (min-width: 900px) { .index-list.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); } }
.index-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: calc(var(--tap-min) + var(--space-5)); padding: 0 var(--space-5); border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: var(--text-xl); background: var(--glass);
  box-shadow: inset 0 0 0 var(--border) var(--color-hairline);
  transition: background-color var(--dur-base) var(--spring), transform var(--dur-base) var(--spring-bouncy), box-shadow var(--dur-base) var(--spring);
}
.index-list li:nth-child(5n+1) a:hover { background: var(--blush); } .index-list li:nth-child(5n+2) a:hover { background: var(--lake); }
.index-list li:nth-child(5n+3) a:hover { background: var(--saffron); } .index-list li:nth-child(5n+4) a:hover { background: var(--sage); }
.index-list li:nth-child(5n+5) a:hover { background: var(--lilac); }
.index-list a:hover { transform: scale(1.015); box-shadow: var(--shadow-soft); }
.index-list a .icon { transition: transform var(--dur-base) var(--spring-bouncy); }
.index-list a:hover .icon { transform: translate(3px, -3px); }

.awards { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .awards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.awards .figure { aspect-ratio: 1; margin-bottom: var(--space-5); }
.awards p { font-size: var(--text-xs); line-height: var(--leading-body); color: var(--color-ink-muted); text-align: center; margin: 0; }

.offices { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .offices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.office { padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); transition: transform var(--dur-base) var(--spring-bouncy), box-shadow var(--dur-base) var(--spring); }
.office:nth-child(5n+1) { background: var(--blush); } .office:nth-child(5n+2) { background: var(--lake); } .office:nth-child(5n+3) { background: var(--saffron); }
.office:nth-child(5n+4) { background: var(--sage); } .office:nth-child(5n+5) { background: var(--lilac); }
.office:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.office h3 { font-size: var(--text-xl); font-weight: var(--weight-regular); margin: 0 0 var(--space-3); }
.office dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.office dt { color: var(--color-ink-subtle); }
.office dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.form { display: grid; gap: var(--space-4); }
.field label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink-muted); margin: 0 0 var(--space-2) var(--space-4); }
.field input, .field textarea {
  width: 100%; min-height: calc(var(--tap-min) + var(--space-3)); padding: var(--space-3) var(--space-5); font: inherit;
  color: var(--color-ink); background: var(--glass-strong); border: 0; border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 var(--border) var(--color-hairline-strong);
  transition: box-shadow var(--dur-base) var(--spring), background-color var(--dur-base) var(--spring);
}
.field textarea { min-height: 150px; resize: vertical; border-radius: var(--radius-md); }
.field input:focus, .field textarea:focus { outline: none; background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--lilac-deep), 0 0 0 6px var(--lilac); }

.rows { display: grid; gap: var(--section-y); }
.rows .figure { aspect-ratio: 4 / 3; }
.rows .num { display: none; }

/* timeline — the line draws itself as you scroll */
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--space-6); }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--color-hairline); }
.timeline::after { background: linear-gradient(var(--blush-deep), var(--lilac-deep), var(--lake-deep)); transform: scaleY(var(--p, 0)); transform-origin: top; }
.tl-item { position: relative; display: grid; gap: var(--space-3) var(--space-7); padding: var(--space-6) 0; }
.tl-item::before { content: ""; position: absolute; left: calc(-1 * var(--space-6) + 1px); top: calc(var(--space-6) + 10px); width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); box-shadow: 0 0 0 2px var(--lilac-deep); transition: background-color var(--dur-base) var(--spring), transform var(--dur-base) var(--spring-bouncy); z-index: 1; }
.tl-item.is-in::before { background: var(--lilac-deep); transform: scale(1.2); }
@media (min-width: 900px) { .tl-item { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); align-items: start; } }
.tl-year { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-light); line-height: var(--leading-snug); }
.tl-item p { margin: 0; color: var(--color-ink-muted); font-weight: var(--weight-light); font-size: var(--text-lg); }
.tl-thumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tl-thumbs a { width: 84px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-sm); background: var(--saffron); transform: translateZ(0); }
.tl-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--spring); }
.tl-thumbs a:hover img { transform: scale(var(--zoom-hover)); }
.decade-sub { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--color-ink-muted); margin-top: var(--space-3); }

/* ============================================================ lightbox */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
  padding: var(--space-9) var(--gutter); background: rgba(30,28,42,0.55); -webkit-backdrop-filter: saturate(160%) blur(30px); backdrop-filter: saturate(160%) blur(30px);
  color: var(--color-on-inverse); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--spring), visibility 0s linear var(--dur-base);
}
.modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--spring); }
.modal img { max-height: 100%; width: auto; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6); transform: scale(0.9) translateY(20px); opacity: 0; transition: transform var(--dur-slow) var(--spring-bouncy), opacity var(--dur-base) var(--spring); }
.modal.is-open img.is-loaded { transform: none; opacity: 1; }
.modal-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; height: var(--header-h); padding: 0 var(--gutter); }
.modal-count { font-size: var(--text-sm); color: var(--color-on-inverse-muted); font-variant-numeric: tabular-nums; }
.modal button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--tap-min); min-height: var(--tap-min); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-pill); background: rgba(255,253,251,0.14); color: var(--color-on-inverse); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); transition: background-color var(--dur-fast) var(--spring), transform var(--dur-base) var(--spring-bouncy);
}
.modal button:hover { background: rgba(255,253,251,0.26); transform: scale(1.06); }
.modal .nav-prev, .modal .nav-next { position: absolute; top: 50%; margin-top: calc(var(--tap-min) / -2); padding: 0; border-radius: 50%; }
.modal .nav-prev { left: var(--gutter); } .modal .nav-next { right: var(--gutter); }

/* ============================================================ footer */
.site-footer { position: relative; isolation: isolate; overflow: hidden; margin: var(--section-y) var(--space-3) var(--space-3); border-radius: var(--radius-lg); }
@media (min-width: 900px) { .site-footer { margin-left: var(--space-5); margin-right: var(--space-5); } }
.site-footer .aurora { opacity: 0.75; }
.footer-groups { display: grid; gap: var(--space-7) var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-9) 0 var(--space-8); }
@media (min-width: 900px) { .footer-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-groups h2 { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); font-weight: var(--weight-regular); margin: 0 0 var(--space-3); letter-spacing: 0; }
.footer-groups ul { list-style: none; margin: 0; padding: 0; }
.footer-groups a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--text-sm); color: var(--color-ink-muted); transition: color var(--dur-fast) var(--spring), transform var(--dur-base) var(--spring); }
.footer-groups a:hover { color: var(--color-ink); transform: translateX(4px); }
.footer-base { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-7) 0 var(--space-7); border-top: var(--border) solid var(--color-hairline); text-align: center; }
.footer-logo img { height: var(--logo-h-footer); width: auto; filter: brightness(0) saturate(100%) invert(10%) sepia(16%) saturate(1200%) hue-rotate(210deg); }
.follow { display: flex; align-items: center; gap: var(--space-2); }
.follow span { font-size: var(--text-sm); color: var(--color-ink-subtle); margin-right: var(--space-2); }
.social { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; background: var(--glass); color: var(--color-ink); transition: transform var(--dur-base) var(--spring-bouncy), background-color var(--dur-fast) var(--spring); }
.social a:hover { transform: scale(1.12) rotate(-6deg); background: var(--color-surface); }
.copyright { margin: 0; font-size: var(--text-xs); color: var(--color-ink-subtle); }

/* ============================================================ reveals — blur + spring, Apple style */
.js [data-reveal] {
  opacity: 0; filter: blur(var(--reveal-blur)); transform: translateY(var(--reveal-shift)) scale(0.985);
  transition: opacity var(--dur-reveal) var(--spring), transform var(--dur-reveal) var(--spring), filter var(--dur-base) var(--spring);
  transition-delay: calc(var(--d, 0) * var(--stagger));
}
.js [data-reveal].is-in { opacity: 1; filter: none; transform: none; }
.js [data-reveal="image"] { opacity: 1; filter: none; transform: scale(0.92); border-radius: calc(var(--radius-lg) * 2); transition: transform var(--dur-reveal) var(--spring), border-radius var(--dur-reveal) var(--spring); transition-delay: calc(var(--d, 0) * var(--stagger)); }
.js [data-reveal="image"] img { transform: scale(var(--zoom-start)); opacity: 0.001; transition: transform calc(var(--dur-reveal) * 1.5) var(--spring), opacity var(--dur-slow) var(--spring); }
.js [data-reveal="image"].is-in { transform: none; border-radius: var(--radius-lg); }
.js [data-reveal="image"].is-in img { transform: scale(1); opacity: 1; }
.js [data-reveal="image"].is-in img.is-missing { opacity: 0; }
.js .card:hover [data-reveal="image"].is-in { transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); }
.js .card:hover [data-reveal="image"].is-in img { transform: scale(var(--zoom-hover)); }
.js .gallery a[data-reveal] { transform: scale(0.9); filter: blur(6px); }
.js .gallery a[data-reveal].is-in { transform: none; filter: none; }
.js .split-line { display: block; }
.js .split-line > span { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(0.35em) scale(0.98); letter-spacing: 0.02em; transition: opacity var(--dur-reveal) var(--spring), transform var(--dur-reveal) var(--spring), filter var(--dur-slow) var(--spring), letter-spacing calc(var(--dur-reveal) * 1.4) var(--spring); transition-delay: calc(var(--d, 0) * var(--stagger)); }
.js .is-in .split-line > span, .js .split-line.is-in > span { opacity: 1; filter: none; transform: none; letter-spacing: var(--tracking-display); }

/* page transition: pastel sheet */
.curtain { position: fixed; inset: 0; z-index: var(--z-curtain); pointer-events: none; overflow: hidden; display: none; }
.js .curtain { display: block; }
.curtain-sheet {
  position: absolute; inset: 0; background: var(--color-bg); clip-path: inset(0 0 0 0 round 0);
  transition: clip-path var(--dur-page) var(--ease-inout);
}
.curtain-sheet::before { content: ""; position: absolute; inset: -20%; background: var(--aurora); }
.curtain-sheet::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; border: 1.5px solid var(--color-ink-subtle); border-top-color: transparent; animation: spin 900ms linear infinite; opacity: 0.5; }
@keyframes spin { to { transform: rotate(360deg); } }
.js.is-ready .curtain-sheet { clip-path: inset(0 0 100% 0 round 0 0 50% 50%); }
.js.is-ready .page-shell { animation: pageIn calc(var(--dur-page) * 2) var(--spring) backwards; }
@keyframes pageIn { from { opacity: 0.4; transform: translateY(40px) scale(0.985); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js [data-reveal], .js [data-reveal="image"], .js [data-reveal="image"] img, .js .split-line > span { opacity: 1; filter: none; transform: none; }
  .scrub .w { opacity: 1; filter: none; transform: none; }
  .hero, .zoom-media { transform: none; }
  .story { height: auto; } .story-pin { position: relative; height: auto; padding: var(--section-y) 0; }
  .zoom { height: auto; } .zoom-pin { position: relative; height: auto; padding: var(--section-y) var(--gutter); } .zoom-caption { position: static; opacity: 1; transform: none; margin-top: var(--space-6); }
  .scrub-sub { opacity: 1; transform: none; } .scroll-cue { display: none; }
  .hscroll { height: auto !important; } .hscroll-pin { position: relative; height: auto; padding: var(--section-y) 0; }
  .hscroll-track { overflow-x: auto; transform: none; }
  .js .curtain { display: none; }
  body.menu-open .page-shell { transform: none; }
}

/* ============================================================ app additions (Astro site, not in the static design) */
.office[hidden] { display: none; }
.office dd a { background: linear-gradient(90deg, var(--blush-deep), var(--lilac-deep)) 0 100% / 100% 1px no-repeat; }
.office-search { max-width: 420px; margin: 0 auto var(--space-7); }
.office-empty { text-align: center; color: var(--color-ink-muted); margin-top: var(--space-6); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.75em; margin: 0; text-align: center; font-size: var(--text-sm); color: var(--color-ink-muted); }
.form-status[data-state="ok"] { color: var(--color-accent-green); }
.form-status[data-state="error"] { color: var(--color-accent-red); }
.form .btn[disabled] { opacity: 0.6; cursor: progress; }
.card p.card-text { margin: var(--space-3) auto 0; max-width: 36ch; font-size: var(--text-sm); color: var(--color-ink-muted); font-weight: var(--weight-light); }
.card .count { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-ink-subtle); }
.stats { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; margin: 0; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.stats dt { order: 2; font-size: var(--text-sm); color: var(--color-ink-muted); }
.stats dd { order: 1; margin: 0; font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-3xl); line-height: var(--leading-display); }
.stats div { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); background: var(--glass); }
.rate-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--glass-strong); border-radius: var(--radius-md); overflow: hidden; }
.rate-table th, .rate-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: var(--border) solid var(--color-hairline); }
.rate-table th { font-weight: var(--weight-medium); color: var(--color-ink-muted); }
.rate-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.note { font-size: var(--text-sm); color: var(--color-ink-subtle); text-align: center; margin-top: var(--space-5); }
.case-body { max-width: var(--measure); margin: 0 auto; }
.case-body p, .case-body li { color: var(--color-ink-muted); font-size: var(--text-lg); font-weight: var(--weight-light); }
.case-body h2, .case-body h3 { font-size: var(--text-2xl); margin-top: var(--space-7); }
.case-body img { border-radius: var(--radius-md); }
.case-body a { background: linear-gradient(90deg, var(--blush-deep), var(--lilac-deep)) 0 100% / 100% 2px no-repeat; }
.not-found .btn-row { justify-content: center; }
.split-text .stats { margin: var(--space-6) 0 0; gap: var(--space-3); }
.split-text .stats div { padding: var(--space-4) var(--space-3); }
.split-text .stats dd { font-size: var(--text-xl); }
.split-text .stats dt { font-size: var(--text-xs); line-height: var(--leading-snug); }
/* 5 + 6 column split for text/form pairs, desktop only (inline grid-column
   spans would add implicit columns to the single-column mobile grid). */
@media (min-width: 900px) {
  .split > .col-left { grid-column: 1 / span 5; }
  .split > .col-right { grid-column: 7 / span 6; }
}
/* Long single-word headings (#PatrikaProgressiveMindset) wrap instead of
   pushing the page sideways on phones. */
h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Show every photo whole: images fit inside their pastel well instead of
   being cropped to the box (same boxes, grid and wells as the design). */
.figure img, .gallery img, .glide-card .figure img { object-fit: contain; }
/* Phones: the banner is short, so its slide dots sit just below it instead
   of covering the artwork. */
@media (max-width: 599px) {
  .hero { background: var(--color-bg); }
  .hero::after { display: none; } /* shade only serves the transparent desktop header */
  .hero-controls { position: static; justify-content: center; padding: var(--space-2) var(--gutter) 0; color: var(--color-ink); background: var(--color-bg); }
  .carousel-indicators button::before { background: var(--color-hairline-strong); }
  .carousel-indicators button::after { background: var(--color-ink); }
}

/* /contact head office: intro text beside four quick-action tiles. */
.hq { display: grid; gap: var(--space-7); align-items: center; padding: clamp(var(--space-6), 5vw, var(--space-9)); border-radius: var(--radius-lg); }
@media (min-width: 900px) { .hq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); } }
.hq-text h2 { font-size: var(--text-3xl); }
.hq-text p { color: var(--color-ink-muted); font-weight: var(--weight-light); font-size: var(--text-lg); margin: 0; max-width: 40ch; }
.hq-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .hq-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hq-tile {
  display: flex; flex-direction: column; gap: var(--space-1); height: 100%;
  padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--glass-strong);
  box-shadow: inset 0 0 0 var(--border) var(--color-hairline);
  transition: transform var(--dur-base) var(--spring-bouncy), box-shadow var(--dur-base) var(--spring), background-color var(--dur-base) var(--spring);
}
.hq-tile .icon { color: var(--color-brand); margin-bottom: var(--space-3); }
.hq-tile .label { margin: 0; }
.hq-tile strong { font-weight: var(--weight-regular); font-size: var(--text-lg); overflow-wrap: anywhere; }
a.hq-tile:hover { transform: translateY(-4px); background: var(--color-surface); box-shadow: var(--shadow-soft); }
.office-search { position: relative; }
.office-search .icon { position: absolute; left: var(--space-5); top: 50%; translate: 0 -50%; color: var(--color-ink-subtle); pointer-events: none; }
.office-search input { padding-left: calc(var(--space-5) + var(--icon) + var(--space-3)); }
@media (max-width: 559px) {
  .hq-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); }
  .hq-tile .icon { grid-row: span 2; margin: 0; }
}