/* Patrika Cloud — "Maison" theme, Legacy edition. All values from tokens.css. */

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding-top: var(--header-h); background: var(--color-bg); color: var(--color-ink);
  font-family: var(--font-sans); font-weight: var(--weight-light); 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-regular);
  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(--color-gold-soft); color: var(--color-ink); }
:focus-visible { outline: var(--border) solid var(--color-focus-ring); outline-offset: var(--space-1); }
.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); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.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; }

/* ============================================================ type primitives */
.eyebrow, .label {
  display: block; font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gold); margin: 0 0 var(--space-4); line-height: var(--leading-snug);
}
.label { color: var(--color-grey); }
.display { font-size: var(--text-4xl); line-height: var(--leading-display); }
.title { font-size: var(--text-3xl); }
.lede { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); line-height: var(--leading-snug); 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); }
.prose ul { padding: 0; list-style: none; }
.prose li { position: relative; padding: var(--space-4) 0 var(--space-4) var(--space-6); border-bottom: var(--border) solid var(--color-hairline); }
.prose li::before { content: ""; position: absolute; left: var(--space-1); top: 50%; width: 7px; height: 7px; margin-top: -4px; border: var(--border) solid var(--color-gold); transform: rotate(45deg); }
.prose h3, .prose h4 { font-size: var(--text-2xl); margin-top: var(--space-8); }
.prose a, .link {
  color: var(--color-ink);
  background: linear-gradient(var(--color-gold), var(--color-gold)) 0 100% / 100% var(--border) no-repeat;
  transition: background-size var(--dur-base) var(--ease-out);
}
.prose a:hover, .link:hover { background-size: 0 var(--border); background-position: 100% 100%; }

/* ornament: gold rule with a diamond, the house signature */
.ornament { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: var(--space-7) auto 0; color: var(--color-gold); width: 180px; }
.ornament::before, .ornament::after { content: ""; flex: 1; height: var(--border); background: linear-gradient(90deg, transparent, var(--color-gold-soft)); transform: scaleX(0); transition: transform var(--dur-slow) var(--ease-out) 300ms; }
.ornament::before { transform-origin: right; }
.ornament::after { background: linear-gradient(90deg, var(--color-gold-soft), transparent); transform-origin: left; }
.ornament svg { width: 22px; height: 12px; flex: none; opacity: 0; transform: scale(0.6) rotate(-90deg); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.ornament.is-in::before, .ornament.is-in::after, .no-js .ornament::before, .no-js .ornament::after { transform: none; }
.ornament.is-in svg { opacity: 1; transform: none; }
.section-head .ornament { margin-top: var(--space-5); }

/* ============================================================ icons */
.icon { width: var(--icon); height: var(--icon); flex: none; stroke: currentColor; fill: none; stroke-width: var(--icon-stroke); stroke-linecap: square; }
.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-7);
  font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--weight-regular); letter-spacing: var(--tracking-label); text-transform: uppercase;
  border: var(--border) solid var(--color-ink); cursor: pointer; transition: color var(--dur-base) var(--ease-out);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover::before { transform: scaleY(1); }
.btn-primary { background: var(--color-ink); color: var(--color-on-inverse); }
.btn-primary::before { background: var(--color-gold); }
.btn-primary:hover { border-color: var(--color-gold); }
.btn-outline { background: transparent; color: var(--color-ink); }
.btn-outline::before { background: var(--color-ink); }
.btn-outline:hover { color: var(--color-on-inverse); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); 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-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink);
  background: linear-gradient(var(--color-gold), var(--color-gold)) 0 calc(100% - var(--space-3)) / 100% var(--border) no-repeat;
  transition: background-size var(--dur-base) var(--ease-out);
}
.text-link:hover { background-size: 0 var(--border); background-position: 100% calc(100% - var(--space-3)); }

/* ============================================================ header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: var(--header-h);
  background: rgba(253, 251, 247, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: var(--border) solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { border-color: var(--color-hairline); }
.site-header.is-hidden { transform: translateY(-100%); }
.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; border: 0; background: none; color: var(--color-ink-muted); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
}
.menu-btn:hover { color: var(--color-ink); }
.burger { position: relative; width: 20px; height: 9px; }
.burger i { position: absolute; left: 0; height: var(--border); background: currentColor; transition: width var(--dur-base) var(--ease-out); }
.burger i:first-child { top: 0; width: 100%; }
.burger i:last-child { bottom: 0; width: 60%; }
.menu-btn:hover .burger i:last-child { width: 100%; }
.menu-btn-label { display: none; }
@media (min-width: 480px) { .menu-btn-label { display: inline; } }
.wordmark {
  justify-self: center; display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: 0.06em; color: var(--color-ink); white-space: nowrap;
}
.wordmark em { font-style: italic; color: var(--color-gold); margin-left: 0.3em; }
.header-right { justify-self: end; display: flex; align-items: center; gap: var(--space-5); }
.header-right a {
  display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-muted);
  background: linear-gradient(var(--color-gold), var(--color-gold)) 0 calc(100% - var(--space-3)) / 0 var(--border) no-repeat; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast);
}
.header-right a:hover { color: var(--color-ink); background-size: 100% var(--border); }
.header-right .hide-sm { display: none; }
@media (min-width: 720px) { .header-right .hide-sm { display: inline-flex; } }
@media (max-width: 479px) { .wordmark { font-size: var(--text-lg); } }

/* ============================================================ menu (Dior side panel) */
.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(--color-veil); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.menu.is-open .menu-veil { opacity: 1; }
.menu-panel {
  position: absolute; inset: 0 auto 0 0; width: var(--menu-w); background: var(--color-bg);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease-inout);
}
.menu.is-open .menu-panel { transform: none; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--gutter); flex: none; border-bottom: var(--border) solid var(--color-hairline); }
.menu-close {
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--color-grey); font-family: var(--font-sans); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; transition: color var(--dur-fast);
}
.menu-close:hover { color: var(--color-ink); }
.menu-close .icon { transition: transform var(--dur-base) var(--ease-out); }
.menu-close:hover .icon { transform: rotate(90deg); }
.menu-top .wordmark { font-size: var(--text-lg); }
.menu-nav { padding: var(--space-6) var(--gutter) var(--space-7); flex: 1; }
.menu-list, .menu-sub { list-style: none; margin: 0; padding: 0; }
.menu-list > li { opacity: 0; transform: translateY(var(--space-3)); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.menu.is-open .menu-list > li { opacity: 1; transform: none; transition-delay: calc(380ms + var(--i) * 55ms); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.menu-link {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: var(--space-1) 0;
  font-family: var(--font-display); font-size: var(--text-menu); line-height: var(--leading-snug); color: var(--color-grey);
  transition: color var(--dur-fast) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.menu-link::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border: var(--border) solid var(--color-gold);
  transform: rotate(45deg) scale(0); opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}
.menu-link:hover, .menu-link:focus-visible { color: var(--color-ink); padding-left: var(--space-5); }
.menu-link:hover::before, .menu-link:focus-visible::before { transform: rotate(45deg) scale(1); opacity: 1; }
.menu-link[aria-current="page"] { color: var(--color-ink); }
.menu-link[aria-current="page"]::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--color-gold); margin-left: var(--space-3); }
.menu-expand { width: var(--tap-min); height: var(--tap-min); border: 0; background: none; cursor: pointer; color: var(--color-grey-light); display: inline-flex; align-items: center; justify-content: center; transition: color var(--dur-fast); }
.menu-expand:hover { color: var(--color-ink); }
.menu-expand .icon { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur-base) var(--ease-out); }
.menu-expand[aria-expanded="true"] .icon { transform: rotate(45deg); }
.menu-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.menu-sub > div { overflow: hidden; border-left: var(--border) solid var(--color-hairline); margin-left: var(--space-1); }
.menu-sub.is-open { grid-template-rows: 1fr; }
.menu-sub a { display: flex; align-items: center; min-height: 40px; padding-left: var(--space-4); font-size: var(--text-sm); color: var(--color-grey); transition: color var(--dur-fast), padding var(--dur-base) var(--ease-out); }
.menu-sub a:hover { color: var(--color-ink); padding-left: var(--space-5); }
.menu-sub div > a:last-child { margin-bottom: var(--space-3); }
.menu-emblem { display: block; width: 120px; margin: var(--space-6) var(--gutter) 0; mix-blend-mode: multiply; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out) 900ms; }
.menu.is-open .menu-emblem { opacity: 0.9; }
.menu-utility { flex: none; padding: var(--space-5) var(--gutter); border-top: var(--border) solid var(--color-hairline); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.menu-utility ul { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.menu-utility a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-grey); }
.menu-utility a:hover { color: var(--color-ink); }
.menu-utility .social a { justify-content: center; width: var(--tap-min); }
.menu-preview { display: none; margin: 0; }
@media (min-width: 1000px) {
  .menu-preview {
    display: block; position: absolute; inset: 0 0 0 var(--menu-w); overflow: hidden; background: var(--color-cream);
    clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-slow) var(--ease-inout) 120ms;
  }
  .menu.is-open .menu-preview { clip-path: inset(0 0 0 0); }
  .menu-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity var(--dur-slow) var(--ease-out), transform 6s var(--ease-out); }
  .menu-preview img.is-active { opacity: 1; transform: scale(1); }
  .menu-preview figcaption {
    position: absolute; left: var(--space-7); bottom: var(--space-7); padding: var(--space-3) var(--space-5); background: var(--color-bg);
    font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--color-ink);
  }
}

/* ============================================================ masthead (replaces the slider) */
.masthead { position: relative; overflow: hidden; background: var(--color-cream); }
.masthead-media { position: relative; aspect-ratio: var(--masthead-ratio); }
.masthead-media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; will-change: transform; transform: translateY(var(--my, 0px)) scale(1.0001); }
.masthead-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--sheen) -160% 0 / 60% 100% no-repeat; mix-blend-mode: soft-light; opacity: 0; }
.masthead-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; z-index: 2; pointer-events: none; background: linear-gradient(transparent, var(--color-bg)); }
.masthead-cue {
  position: absolute; z-index: 3; left: 50%; bottom: var(--space-4); translate: -50% 0; display: grid; justify-items: center; gap: var(--space-2);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gold);
}
.masthead-cue i { width: var(--border); height: 36px; background: linear-gradient(var(--color-gold), transparent); transform-origin: top; animation: cue 2.4s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 699px) {
  .masthead-media { aspect-ratio: 16 / 10; }
  .masthead-cue { display: none; }
}
/* opening sequence */
.js .masthead-media img { animation: mastIn var(--dur-mast) var(--ease-out) both; }
.js .masthead-sheen { animation: sheen 2.8s var(--ease-inout) 1.3s 1 both; }
@keyframes mastIn { from { opacity: 0; transform: scale(var(--zoom-start)); filter: blur(10px); } 40% { filter: blur(0); } to { opacity: 1; transform: scale(1.0001); filter: blur(0); } }
@keyframes sheen { 0% { opacity: 1; background-position: -160% 0; } 100% { opacity: 1; background-position: 260% 0; } }

/* ============================================================ sections */
.section { padding: var(--section-y) 0; }
.section.tight { padding: calc(var(--section-y) / 2) 0; }
.section + .section { padding-top: 0; }
.section.band { position: relative; background: var(--color-cream); }
.section.band.sage { background: var(--color-sage); }
.section.band.blush { background: var(--color-blush); }
.section.band + .section, .section + .section.band { padding-top: var(--section-y); }
.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-4); }

.page-intro { padding: var(--section-y) 0 calc(var(--section-y) * 0.7); text-align: center; }
.page-intro h1, .page-intro h2, .page-intro h4 { font-size: var(--text-4xl); margin: 0 auto; max-width: 18ch; }
.page-intro .lede { margin-top: var(--space-6); }
.page-intro .rule { display: none; }
.breadcrumb { display: flex; justify-content: center; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-6); padding: 0; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-grey); }
.breadcrumb li + li::before { content: "◆"; font-size: 6px; vertical-align: middle; margin-right: var(--space-3); color: var(--color-gold-soft); }
.breadcrumb a:hover { color: var(--color-ink); }

/* figures — thin gold inner frame drawn on hover, Dior-boutique style */
.figure { position: relative; overflow: hidden; background: var(--color-cream); margin: 0; }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.figure::after {
  content: ""; position: absolute; inset: var(--frame-inset); z-index: 2; pointer-events: none; border: var(--border) solid rgba(255, 250, 240, 0.85);
  opacity: 0; transform: scale(1.04); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
a:hover > .figure::after, .card:hover .figure::after, a.figure:hover::after { opacity: 1; transform: none; }
.figure.contain { background: var(--color-cream); }
.figure.contain::after { border-color: var(--color-gold-soft); }
.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-size: var(--text-lg); }

/* statement */
.statement { text-align: center; }
.statement .display { max-width: 18ch; margin: 0 auto var(--space-7); }
.statement .prose { margin: 0 auto; }

/* ============================================================ 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); }
.card .figure { aspect-ratio: var(--thumb-ratio); margin-bottom: var(--space-5); }
.cards > .card:nth-child(3n+2) .figure { background: var(--color-sage); }
.cards > .card:nth-child(3n+3) .figure { background: var(--color-blush); }
.card:hover .figure img { transform: scale(var(--zoom-hover)); }
.card .label { margin-bottom: var(--space-2); }
.card-title { font-family: var(--font-display); font-size: var(--text-xl); 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-4); font-size: var(--text-xs); color: var(--color-grey); }
.card .meta a { text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-2xs); color: var(--color-gold); }
.card .discover {
  display: inline-block; margin-top: var(--space-4); padding-bottom: var(--space-1); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-muted);
  background: linear-gradient(var(--color-gold), var(--color-gold)) 50% 100% / 0 var(--border) no-repeat; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast);
}
.card:hover .discover { background-size: 100% var(--border); color: var(--color-ink); }
.card[hidden] { display: none; }

/* filter tabs */
.filters { position: relative; display: flex; flex-wrap: nowrap; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; margin: 0 0 var(--space-8); padding: 0; border-bottom: var(--border) solid var(--color-hairline); }
.filters::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .filters { justify-content: center; } }
.filters .thumb { position: absolute; left: 0; bottom: -1px; height: var(--border); width: 0; background: var(--color-gold); transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); }
.filters button, .filters a {
  flex: none; display: inline-flex; align-items: center; min-height: calc(var(--tap-min) + var(--space-2)); padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-grey); transition: color var(--dur-fast) var(--ease-out);
}
.filters button:hover, .filters button[aria-pressed="true"], .filters a:hover { color: var(--color-ink); }

/* galleries */
.gallery { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery a { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--color-cream); }
.gallery a:nth-child(3n+2) { background: var(--color-sage); } .gallery a:nth-child(3n+3) { background: var(--color-blush); }
.gallery a::after { content: ""; position: absolute; inset: var(--frame-inset); border: var(--border) solid rgba(255, 250, 240, 0.85); opacity: 0; transform: scale(1.05); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.gallery a:hover::after { opacity: 1; transform: none; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.gallery a:hover img { transform: scale(var(--zoom-hover)); }

/* video */
.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; order: 2; }
.video-frame { position: relative; aspect-ratio: var(--wide-ratio); background: var(--color-inverse); overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* index lists */
.index-list { list-style: none; margin: 0; padding: 0; border-top: var(--border) solid var(--color-hairline); display: grid; }
@media (min-width: 900px) { .index-list.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }
.index-list a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: calc(var(--tap-min) + var(--space-5)); border-bottom: var(--border) solid var(--color-hairline);
  font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink);
  transition: padding var(--dur-base) var(--ease-out), color var(--dur-fast);
}
.index-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--border); background: var(--color-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
.index-list a:hover { padding-left: var(--space-3); }
.index-list a:hover::after { transform: none; }
.index-list a .icon { color: var(--color-gold); transition: transform var(--dur-base) var(--ease-out); }
.index-list a:hover .icon { transform: translate(3px, -3px); }

/* awards */
.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-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: var(--leading-body); color: var(--color-ink-muted); text-align: center; margin: 0; }

/* contact */
.offices { display: grid; gap: 0 var(--space-6); grid-template-columns: minmax(0, 1fr); border-top: var(--border) solid var(--color-hairline); }
@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-6) 0; border-bottom: var(--border) solid var(--color-hairline); }
.office h3 { font-size: var(--text-xl); 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 { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gold); line-height: var(--leading-body); }
.office dd { margin: 0; color: var(--color-ink-muted); overflow-wrap: anywhere; }
.form { display: grid; gap: var(--space-6); }
.field label { display: block; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-grey); margin-bottom: var(--space-2); }
.field input, .field textarea {
  width: 100%; min-height: calc(var(--tap-min) + var(--space-2)); padding: var(--space-3) 0; font: inherit; color: var(--color-ink); background: transparent;
  border: 0; border-bottom: var(--border) solid var(--color-hairline-strong); border-radius: 0; transition: border-color var(--dur-base) var(--ease-out);
}
.field textarea { min-height: 136px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--color-gold); }

/* ventures / events */
.rows { display: grid; gap: var(--section-y); }
.rows .figure { aspect-ratio: 4 / 3; }
.rows .num { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--color-gold); margin-bottom: var(--space-3); }

/* timeline */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; border-top: var(--border) solid var(--color-hairline); }
.tl-item { display: grid; gap: var(--space-3) var(--space-7); padding: var(--space-7) 0; border-bottom: var(--border) solid var(--color-hairline); }
@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); line-height: var(--leading-snug); color: var(--color-gold); }
.tl-item p { margin: 0; color: var(--color-ink-muted); 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; background: var(--color-cream); }
.tl-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.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: var(--color-scrim); color: var(--color-on-inverse); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out); }
.modal img { max-height: 100%; width: auto; object-fit: contain; transform: scale(0.97); opacity: 0; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.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-2xs); letter-spacing: var(--tracking-label); color: var(--color-on-inverse-muted); }
.modal button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-width: var(--tap-min); min-height: var(--tap-min); border: 0; background: none; color: var(--color-on-inverse); cursor: pointer; font-family: var(--font-sans); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.modal .nav-prev, .modal .nav-next { position: absolute; top: 50%; transform: translateY(-50%); border: var(--border) solid rgba(253, 251, 247, 0.3); }
.modal .nav-prev { left: var(--gutter); } .modal .nav-next { right: var(--gutter); }

/* ============================================================ footer */
.site-footer { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--section-y); background: var(--color-cream); }
.site-footer::before { content: ""; position: absolute; inset: 0 0 0 auto; width: min(55%, 760px); z-index: -1; background: url("/assets/img/maison/florals.webp") right center / cover no-repeat; opacity: 0.55; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.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); margin: 0 0 var(--space-4); color: var(--color-gold); }
.footer-groups ul { list-style: none; margin: 0; padding: 0; }
.footer-groups a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--text-sm); color: var(--color-ink-muted); transition: color var(--dur-fast); }
.footer-groups a:hover { color: var(--color-ink); }
.footer-base { display: grid; justify-items: center; gap: var(--space-5); padding: var(--space-7) 0 var(--space-8); border-top: var(--border) solid var(--color-hairline-strong); text-align: center; }
.footer-emblem img { height: var(--emblem-h); width: auto; mix-blend-mode: multiply; }
.follow { display: flex; align-items: center; gap: var(--space-2); }
.follow span { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-grey); margin-right: var(--space-3); }
.social { display: flex; gap: var(--space-1); 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); color: var(--color-ink-muted); transition: color var(--dur-fast); }
.social a:hover { color: var(--color-gold); }
.copyright { margin: 0; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); color: var(--color-grey); }

/* ============================================================ reveals (Dior: slow fade-up, image unveil) */
.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--d, 0) * var(--stagger)); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="image"] { opacity: 1; transform: none; }
.js [data-reveal="image"] > img { transform: scale(var(--zoom-start)); opacity: 0; transition: transform calc(var(--dur-reveal) * 1.5) var(--ease-out), opacity var(--dur-slow) var(--ease-out); transition-delay: calc(var(--d, 0) * var(--stagger)); }
.js [data-reveal="image"]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--color-bg); transform-origin: top; transition: transform var(--dur-slow) var(--ease-inout); transition-delay: calc(var(--d, 0) * var(--stagger)); }
.js .band [data-reveal="image"]::before { background: var(--color-cream); }
.js .band.sage [data-reveal="image"]::before { background: var(--color-sage); }
.js .band.blush [data-reveal="image"]::before { background: var(--color-blush); }
.js [data-reveal="image"].is-in::before { transform: scaleY(0); }
.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 > img, .js a:hover > [data-reveal="image"].is-in > img { transform: scale(var(--zoom-hover)); }
.js .split-line { display: block; overflow: hidden; padding-bottom: 0.1em; }
.js .split-line > span { display: inline-block; transform: translateY(110%); transition: transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--d, 0) * var(--stagger)); }
.js .is-in .split-line > span, .js .split-line.is-in > span { transform: none; }

/* page transition: ivory veil */
.curtain { position: fixed; inset: 0; z-index: var(--z-curtain); background: var(--color-bg); pointer-events: none; opacity: 0; transition: opacity var(--dur-page) var(--ease-inout); display: grid; place-items: center; }
.curtain img { width: 90px; mix-blend-mode: multiply; opacity: 0.85; }
.js .curtain { opacity: 1; }
.js.is-ready .curtain { opacity: 0; }
.js.is-leaving .curtain { opacity: 1; }

@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"] > img, .js .split-line > span { opacity: 1; transform: none; }
  .js [data-reveal="image"]::before { display: none; }
  .masthead-media img { transform: none; }
  .ornament::before, .ornament::after, .ornament svg { transform: none; opacity: 1; }
}

/* emblem: feather the parchment edges into the page */
.menu-emblem, .footer-emblem img, .curtain img {
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 72%, transparent 100%);
}
.statement .ornament { margin-bottom: var(--space-7); }

/* ============================================================ app additions (Astro site, not in the static design) */
/* Show every photo whole: images fit inside their tinted well instead of
   being cropped to the box (same boxes and grid as the design). */
.figure img, .gallery img { object-fit: contain; }
/* Long single-word headings (#PatrikaProgressiveMindset) wrap instead of
   pushing the page sideways on phones. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
.section-head .lede { margin-top: var(--space-5); }

/* card copy (campaigns, initiatives, events) */
.card p.card-text { margin: var(--space-3) auto 0; max-width: 36ch; font-size: var(--text-sm); color: var(--color-ink-muted); }
.card .count { display: block; margin-top: var(--space-2); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-grey); }

/* figures (about, verticals, campaigns): Goudy numbers over hairlines */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; margin: 0; border-top: var(--border) solid var(--color-hairline); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.stats div { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-4); border-bottom: var(--border) solid var(--color-hairline); }
.stats dt { order: 2; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-grey); line-height: var(--leading-snug); }
.stats dd { order: 1; margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-display); color: var(--color-gold); }
.split-text .stats { margin: var(--space-6) 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-text .stats div { padding: var(--space-4) var(--space-3); }
.split-text .stats dd { font-size: var(--text-xl); }

/* rate tables */
.table-wrap { overflow-x: auto; }
.rate-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); border-top: var(--border) solid var(--color-ink); }
.rate-table th, .rate-table td { text-align: left; padding: var(--space-4); border-bottom: var(--border) solid var(--color-hairline); }
.rate-table th { font-size: var(--text-2xs); font-weight: var(--weight-regular); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gold); }
.rate-table td { color: var(--color-ink-muted); }
.rate-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink); }
.note { font-size: var(--text-sm); font-style: italic; font-family: var(--font-display); color: var(--color-grey); text-align: center; margin-top: var(--space-5); }

/* campaign case-study body (Markdown from the admin panel) */
.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); }
.case-body h2, .case-body h3 { font-size: var(--text-2xl); margin-top: var(--space-7); }
.case-body a { color: var(--color-ink); background: linear-gradient(var(--color-gold), var(--color-gold)) 0 100% / 100% var(--border) no-repeat; }
.not-found .btn-row { justify-content: center; }

/* 5 + 6 column split for text/list 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; }
}

/* /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)); background: var(--color-cream); }
.hq.blush { background: var(--color-blush); }
@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-size: var(--text-lg); margin: 0; max-width: 40ch; }
.hq-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--border); grid-template-columns: minmax(0, 1fr); background: var(--color-hairline-strong); border: var(--border) solid var(--color-hairline-strong); }
@media (min-width: 560px) { .hq-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hq-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-5) var(--space-6); background: var(--color-bg); transition: background-color var(--dur-base) var(--ease-out); }
.hq-tile .icon { color: var(--color-gold); margin-bottom: var(--space-3); }
.hq-tile .label { margin: 0; }
.hq-tile strong { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-xl); line-height: var(--leading-snug); overflow-wrap: anywhere; }
a.hq-tile::after { content: ""; position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-4); height: var(--border); background: var(--color-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
a.hq-tile:hover { background: var(--color-surface); }
a.hq-tile:hover::after { transform: none; }
@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; }
  a.hq-tile::after { display: none; }
}

/* office directory search */
.office[hidden] { display: none; }
.office dd a { color: inherit; }
.office dd a:hover { color: var(--color-ink); }
.office-search { position: relative; max-width: 420px; margin: 0 auto var(--space-7); }
.office-search .icon { position: absolute; left: 0; top: 50%; translate: 0 -50%; color: var(--color-gold); pointer-events: none; }
.office-search input { padding-left: calc(var(--icon) + var(--space-4)); }
.office-empty { text-align: center; font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--color-ink-muted); margin-top: var(--space-6); }


/* Home "Explore" grid: landscape tiles whose photo fills the whole tile
   (logos stay whole on their well, with a lighter margin). */
#tile-grid .card .figure { aspect-ratio: 4 / 3; }
#tile-grid .figure:not(.contain) img { object-fit: cover; object-position: var(--focus, 50% 50%); }
#tile-grid .figure.contain img { padding: var(--space-6); }
.hq-address { font-style: normal; font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--color-ink-muted); }