/* Layout: full-bleed photo stage; header, caption + micro map, and a survey-scale timeline float over it.
   Menu and Index open as full-screen layers. Single dark look on purpose: photographs read best on near-black. */
:root {
  --ink: #0b0c0d;          /* stage and page ground */
  --paper: #f2efe8;        /* primary text, warm white */
  --mute: #c4c0b7;         /* secondary text */
  --hair: rgba(242, 239, 232, .24);
  --brass: #d9b37c;        /* accent: active country, marker, progress, current item */
  --veil: rgba(8, 9, 10, .72);
  --l-ink: #141516;        /* menu sheet: text on white */
  --l-mute: #6d6b66;
  --l-hair: rgba(20, 21, 22, .14);
  --l-accent: #8a6630;     /* darker brass that reads on white */
  --l-paper: #f8f7f4;      /* studio pages */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* used wide (font-stretch 125%) */
  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease-reveal: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}
/* the colors and fonts above are defaults; appearance in content.json overrides them at start-up */
[hidden] { display: none !important; }
/* before the script runs, the page already has the visitor's background (light unless they chose dark) */
html:not(.pre-dark) body { background: var(--l-paper); }

/* ---------- opening: the logo alone in the center, then the site ---------- */
.intro {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--l-paper);
  animation: intro-auto-out .9s ease 4.6s forwards;   /* leaves on its own even if the script never runs */
}
html.pre-dark .intro { background: var(--ink); }
html.no-intro .intro { display: none; }
.intro-logo { width: clamp(72px, 7vw, 104px); height: auto; aspect-ratio: 1; display: block; animation: intro-logo-in 1.3s cubic-bezier(.2, .7, .1, 1) .15s both; }
html.pre-dark .intro-logo { box-shadow: 0 0 0 1px rgba(242, 239, 232, .14); }
.intro.is-out { animation: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .9s ease, visibility 0s linear .9s; }   /* while it fades, clicks and scroll already reach the page */
.intro.is-out .intro-logo { transform: scale(1.06); transition: transform .9s cubic-bezier(.2, .7, .1, 1); }
@keyframes intro-logo-in { from { opacity: 0; transform: scale(.9); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-auto-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro-logo { animation-duration: .4s; } }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------- stage ---------- */
.stage { position: fixed; inset: 0; overflow: hidden; background: var(--ink); touch-action: none; }   /* swipes in any direction change the photo */
.stage.is-left { cursor: w-resize; }
.stage.is-right { cursor: e-resize; }
.layer { position: absolute; inset: 0; overflow: hidden; background: var(--bgc, var(--ink)); }
.kb { position: absolute; inset: 0; will-change: transform; }
.layer .fg {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--focus, 50% 50%);
  will-change: transform, filter;
  user-select: none; -webkit-user-drag: none;
}
.veil-top, .veil-bottom { position: fixed; left: 0; right: 0; pointer-events: none; z-index: 1; }
.veil-top { top: 0; height: 160px; background: linear-gradient(to bottom, rgba(8,9,10,.55), rgba(8,9,10,0)); }
.veil-bottom { bottom: 0; height: min(62vh, 520px); background: linear-gradient(to top, var(--veil) 0%, rgba(8,9,10,.38) 45%, rgba(8,9,10,0) 100%); }

/* ---------- header ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
  padding-left: calc(var(--gutter-l) + 8px); padding-right: calc(var(--gutter-r) + 8px);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--paper); text-decoration: none; min-width: 0; }
.brand .logo { display: block; width: 42px; height: 42px; flex: none; }
.wm { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wm-name { font-weight: 600; font-size: .82rem; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-sub { font-size: .72rem; letter-spacing: .06em; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tools { display: flex; align-items: center; gap: 6px; flex: none; }
.tool {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; min-width: 38px; justify-content: center;
  padding: 0 12px; border: 1px solid var(--hair); border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(11, 12, 13, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .2s, background-color .2s;
}
.tool:hover { border-color: rgba(242,239,232,.6); background: rgba(11,12,13,.5); }
.tool svg { width: 16px; height: 16px; flex: none; }
.tool.icon { padding: 0; width: 38px; }

/* ---------- caption + map ---------- */
.caption-row {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 58px); z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px;
  padding-left: calc(var(--gutter-l) + 8px); padding-right: calc(var(--gutter-r) + 8px);
  pointer-events: none;
}
.caption { min-width: 0; display: grid; gap: 14px; }
.line { display: block; overflow: hidden; padding-bottom: .08em; }
.line > * { display: inline-block; transform: translateY(0); opacity: 1; }
.caption[data-state="out"] .line > * { transform: translateY(-100%); opacity: 0; transition: transform .38s var(--ease-reveal), opacity .3s; }
.caption[data-state="pre"] .line > * { transform: translateY(105%); opacity: 0; transition: none; }
.caption[data-state="in"] .line > * { transition: transform .9s var(--ease-out) var(--d, 0ms), opacity .6s ease var(--d, 0ms); }
.eyebrow { margin: 0; font-family: var(--f-data); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.hotel {
  margin: 0; font-family: var(--f-display); font-weight: 500; font-stretch: 125%;
  font-size: clamp(1.85rem, 4.3vw, 3.9rem); line-height: 1.04; letter-spacing: -.02em;
  max-width: 17ch; text-wrap: balance;
}
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.brandslot {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border: 1px solid var(--hair); font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(11,12,13,.25);
}
.brandslot:empty { display: none; }
.place { font-size: .95rem; color: var(--paper); letter-spacing: .01em; }
.place.pending { color: var(--mute); }

/* the map is the one framed object on the stage: a small instrument panel so the dots read over any photo */
.map {
  margin: 0; display: grid; gap: 8px; justify-items: end; width: clamp(160px, 19vw, 270px);
  padding: 12px 14px 10px; border: 1px solid rgba(242,239,232,.14);
  background: rgba(11,12,13,.52); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .5s ease, visibility .5s;
}
.map.is-empty { opacity: 0; visibility: hidden; }
.map canvas { display: block; width: 100%; height: auto; aspect-ratio: 60 / 54; max-width: 100%; }
.map figcaption { display: grid; gap: 4px; justify-items: end; text-align: right; font-family: var(--f-data); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
#mCountry { color: var(--paper); font-weight: 500; }
#mCoords { color: var(--mute); letter-spacing: .06em; font-variant-numeric: tabular-nums; min-height: 1.2em; }
#mCoords .gps { color: var(--brass); margin-left: .6em; }

/* ---------- survey-scale timeline ---------- */
.scale {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 18px;
  padding-left: calc(var(--gutter-l) + 8px); padding-right: calc(var(--gutter-r) + 8px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); padding-top: 10px;
}
.count { display: flex; align-items: baseline; gap: 14px; font-family: var(--f-data); font-size: .75rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--paper); flex: none; min-width: 0; max-width: 46%; }
.col-label { color: var(--mute); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.count .sep { color: var(--mute); margin: 0 .5em; }
.nums { white-space: nowrap; }
.ticks { flex: 1; display: flex; gap: 6px; min-width: 0; }
.tick { flex: 1; height: 26px; position: relative; min-width: 0; }
.tick::before, .tick i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.tick::before { background: var(--hair); }
.tick i { background: var(--brass); transform-origin: left center; transform: scaleX(0); }
.tick.done i { background: rgba(242,239,232,.72); transform: scaleX(1); }
.tick:hover::before { background: rgba(242,239,232,.55); }
.arrows { display: flex; gap: 6px; flex: none; }
.arrows .tool { width: 38px; padding: 0; }

/* ---------- full-screen layers: menu + index ---------- */
/* index: the same white sheet as the menu */
.sheet {
  position: fixed; inset: 0; z-index: 5; overflow-y: auto; overscroll-behavior: contain;
  color: var(--l-ink); background: color-mix(in srgb, var(--l-paper) 95%, transparent);
  backdrop-filter: blur(28px) saturate(1.05); -webkit-backdrop-filter: blur(28px) saturate(1.05);
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
  padding-left: calc(var(--gutter-l) + 8px); padding-right: calc(var(--gutter-r) + 8px);
  opacity: 0; transition: opacity .45s ease;
}
.sheet[data-state="open"] { opacity: 1; }
.sheet[data-state="pre"] { transition: none; }
.sheet[data-state="closing"] { opacity: 0; transition: opacity .3s ease; }
.sheet :focus-visible { outline-color: var(--l-accent); }
.sheet .tool { color: var(--l-ink); border-color: var(--l-hair); background: rgba(255, 255, 255, .7); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sheet .tool:hover { border-color: rgba(20, 21, 22, .45); background: #fff; }
.sheet-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; margin-bottom: 28px; }
.sheet-head h2 { margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.01em; color: var(--l-ink); }
.sheet-head h2 small { display: block; margin-top: 6px; font-family: var(--f-data); font-stretch: 100%; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--l-accent); }
#btnPlay .ico-play { display: none; }
#btnPlay.is-paused .ico-pause { display: none; }
#btnPlay.is-paused .ico-play { display: block; }

/* ---------- menu: photo tile grid on a white sheet ----------
   A white frosted sheet (the current photo faintly blurred through it) covers the stage, tiles open with a
   staggered clip reveal, a hovered tile cycles through its category, and the chosen tile grows into the viewer. */
#index { z-index: 8; }
body.menu-layer .bar { z-index: 7; }
.wm-name, .wm-sub { transition: color .5s ease; }
body.menu-light .wm-name { color: var(--l-ink); }
body.menu-light .wm-sub { color: var(--l-mute); }
.tools > * { transition: opacity .35s ease, transform .45s var(--ease-out), border-color .4s, background-color .4s, color .4s, box-shadow .4s; }
body.menu-open .tools > :not(#btnMenu) { opacity: 0; transform: translateY(-8px); pointer-events: none; }
/* Menu: the one solid control in the header, so it reads first over any photo.
   White pill over the photos; it turns ink-black over the white menu and pages. */
#btnMenu {
  height: 44px; padding: 0 20px 0 16px; gap: 11px;
  border-color: #fff; background: #fff; color: var(--l-ink);
  font-size: .76rem; letter-spacing: .2em;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .26);
}
#btnMenu:hover { border-color: #fff; background: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, .36); transform: translateY(-1px); }
body.menu-light #btnMenu { color: #fff; border-color: var(--l-ink); background: var(--l-ink); box-shadow: none; }
body.menu-light #btnMenu:hover { background: var(--l-accent); border-color: var(--l-accent); }
.burger { position: relative; width: 18px; height: 18px; flex: none; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: currentColor; transition: transform .5s var(--ease-reveal), top .5s var(--ease-reveal); }
.burger i:first-child { top: 5px; }
.burger i:last-child { top: 11px; }
body.menu-open .burger i { top: 8px; }
body.menu-open .burger i:first-child { transform: rotate(45deg); }
body.menu-open .burger i:last-child { transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 5; color: var(--l-ink); }
.menu :focus-visible { outline-color: var(--l-accent); }
.menu-glass {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--l-paper) 93%, transparent);
  backdrop-filter: blur(28px) saturate(1.05); -webkit-backdrop-filter: blur(28px) saturate(1.05);
  opacity: 0; transition: opacity .7s ease;
}
.menu[data-state="open"] .menu-glass { opacity: 1; }
.menu[data-state="closing"] .menu-glass { opacity: 0; transition: opacity .6s ease .3s; }
.menu[data-state="pre"] .menu-glass { transition: none; }
.menu-inner {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 18px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 56px + 26px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  padding-left: calc(var(--gutter-l) + 8px); padding-right: calc(var(--gutter-r) + 8px);
}
.menu-head, .menu-lang { transition: opacity .5s ease, transform .8s var(--ease-out); }
.menu[data-state="pre"] .menu-head, .menu[data-state="pre"] .menu-lang,
.menu[data-state="closing"] .menu-head, .menu[data-state="closing"] .menu-lang,
.menu.is-choosing .menu-head, .menu.is-choosing .menu-lang { opacity: 0; transform: translateY(10px); transition-duration: .3s; }
.menu[data-state="open"] .menu-lang { transition-delay: .45s; }
.menu.is-choosing .menu-lang { transition-delay: 0s; }
.menu-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px;
  font-family: var(--f-data); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--l-accent);
}
.menu-head .note { color: var(--l-mute); }

.tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, calc((100vh - 290px) / 3), 340px); gap: 18px 14px;
}
.tile {
  position: relative; display: flex; flex-direction: column; gap: 9px; width: 100%; height: 100%; min-width: 0;
  text-align: left; color: inherit;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.05s var(--ease-reveal) calc(var(--d) * 1ms), opacity .4s ease, transform .6s var(--ease-out);
}
.menu[data-state="pre"] .tile, .menu[data-state="pre"] .tile img, .menu[data-state="pre"] .t-label > * { transition: none; }
.menu[data-state="open"] .tile { clip-path: inset(0 0 0 0); }
.menu[data-state="closing"] .tile { clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-reveal) calc(var(--dr) * 1ms); }
.menu.is-settled .tile, .menu.is-settled .tile img, .menu.is-settled .t-label > * { transition-delay: 0ms; }
.menu.is-choosing .tile:not(.is-chosen) { opacity: 0; transform: scale(.97); }

.t-img { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--bgc, #e6e3dd); transition: opacity .6s ease, filter .6s ease; }
.t-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--focus, 50% 50%);
  transform: scale(1.24);
  transition: transform 1.5s var(--ease-out) calc(var(--d) * 1ms);
}
.menu[data-state="open"] .t-img img { transform: scale(1); }
.t-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex: none; padding: 0 1px; }
.t-label > * { opacity: 0; transform: translateY(10px); transition: opacity .6s ease calc(var(--d) * 1ms + 380ms), transform .9s var(--ease-out) calc(var(--d) * 1ms + 380ms), color .3s ease; }
.menu[data-state="open"] .t-label > * { opacity: 1; transform: none; }
.t-name { font-family: var(--f-display); font-stretch: 118%; font-weight: 500; font-size: clamp(.9rem, 1.12vw, 1.12rem); line-height: 1.15; letter-spacing: -.01em; min-width: 0; color: var(--l-ink); }
.t-meta { display: flex; align-items: center; gap: 8px; flex: none; font-family: var(--f-data); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--l-mute); white-space: nowrap; }
.t-arrow { width: 14px; height: 14px; color: var(--l-accent); opacity: 0; transform: translateX(-8px); transition: opacity .35s ease, transform .5s var(--ease-out); }
.tile[aria-current="true"] .t-name { color: var(--l-accent); }

.tile:focus-visible { outline-offset: 4px; }
.tile:focus-visible .t-arrow { opacity: 1; transform: none; }
@media (hover: hover) {
  .menu.is-settled .tiles:hover .tile:not(:hover) .t-img { opacity: .42; filter: grayscale(.9); }
  .menu.is-settled .tile:hover .t-img img { transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
  .tile:hover .t-name { color: var(--l-accent); }
  .tile:hover .t-arrow { opacity: 1; transform: none; }
}

/* two zones: studio links + language on the left, with room to breathe; the portfolio on the right */
.menu-cols { flex: 1 1 auto; min-height: 560px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 clamp(28px, 4vw, 72px); }
.menu-zone { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.menu-zone .tiles { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.tiles-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)); }
.menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2px, .6vh, 10px); flex: 1 1 auto; padding-top: 4px; }   /* fills the column: the free space below is for future links */
.mlink {
  display: inline-flex; align-items: center; gap: .35em; max-width: 100%; padding: .06em 0;
  font-family: var(--f-display); font-size: clamp(1.5rem, 2.3vw, 2.6rem); font-stretch: 108%; font-weight: 500; line-height: 1.12; letter-spacing: -.01em;
  color: var(--l-ink); text-decoration: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease calc(var(--d, 0) * 1ms + 260ms), transform .9s var(--ease-out) calc(var(--d, 0) * 1ms + 260ms), color .3s ease;
}
.mlink span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlink svg { width: .48em; height: .48em; flex: none; color: var(--l-accent); opacity: 0; transform: translateX(-.3em); transition: opacity .35s ease, transform .5s var(--ease-out); }
.menu[data-state="open"] .mlink { opacity: 1; transform: none; }
.menu[data-state="pre"] .mlink { transition: none; }
.menu[data-state="closing"] .mlink, .menu.is-choosing .mlink { opacity: 0; transform: translateY(10px); transition-duration: .3s; transition-delay: 0s; }
.mlink[aria-current="page"] { color: var(--l-accent); }
.mlink:focus-visible svg { opacity: 1; transform: none; }
@media (hover: hover) {
  .mlink:hover { color: var(--l-accent); }
  .mlink:hover svg { opacity: 1; transform: none; }
}
.menu-lang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
.lang-btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; border: 1px solid var(--l-hair); border-radius: 999px; color: var(--l-ink); text-decoration: none; font-family: var(--f-display); font-stretch: 118%; font-size: 1.08rem; font-weight: 500; transition: border-color .3s, background-color .3s, color .3s; }
.lang-btn b { font-family: var(--f-data); font-stretch: 100%; font-size: .68rem; font-weight: 500; letter-spacing: .16em; color: var(--l-mute); transition: color .3s; }
.lang-btn:hover { border-color: var(--l-ink); }
.lang-btn[aria-current="true"] { background: var(--l-ink); border-color: var(--l-ink); color: #fff; }
.lang-btn[aria-current="true"] b { color: rgba(255, 255, 255, .6); }

/* text version of each page (titles, texts, photo descriptions) for search engines and AI readers;
   visible on its own only when JavaScript is off */
.seo { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }


/* the chosen tile flies to full screen and hands over to the viewer */
.flight { position: fixed; z-index: 6; overflow: hidden; pointer-events: none; background: var(--ink); }
.flight img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* index */
.index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.index-grid li { opacity: 0; transform: translateY(18px); transition: opacity .6s ease calc(var(--j, 0) * 45ms + 120ms), transform .9s var(--ease-out) calc(var(--j, 0) * 45ms + 120ms); }
.sheet[data-state="open"] .index-grid li { opacity: 1; transform: none; }
.sheet[data-state="pre"] .index-grid li { transition: none; }
.index-grid button { display: grid; gap: 10px; width: 100%; text-align: left; color: inherit; }
.thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bgc, #e6e3dd); transition: opacity .4s ease; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform .9s var(--ease-out), opacity .4s ease, filter .4s ease; }
.index-grid:hover button:not(:hover) .thumb { opacity: .45; }
.index-grid:hover button:not(:hover) .thumb img { filter: grayscale(.9); }
.index-grid button:hover .thumb img, .index-grid button:focus-visible .thumb img { transform: scale(1.05); }
.ix-name { font-family: var(--f-display); font-stretch: 112%; font-weight: 500; font-size: 1.02rem; line-height: 1.25; color: var(--l-ink); transition: color .3s ease; }
.index-grid button:hover .ix-name { color: var(--l-accent); }
.ix-sub { font-family: var(--f-data); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--l-mute); }
.ix-num { color: var(--l-accent); margin-right: .8em; }
.index-grid button[aria-current="true"] .ix-name { color: var(--l-accent); }

/* ---------- narrow screens ---------- */
@media (max-width: 1000px) {
  .menu-cols { flex: none; grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 28px; }   /* takes its full height; the menu scrolls */
  .menu-zone .tiles { flex: none; grid-auto-rows: auto; }
  .tiles-cols { grid-template-rows: none; }
  .menu-links { flex: none; gap: 2px; }
  .zone-studio .menu-lang { margin-top: 10px; }
  .mlink { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px 10px; }
  .tile { height: auto; }
  .t-img { flex: none; aspect-ratio: 4 / 3; }
}
@media (max-width: 900px) {
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wm-sub { display: none; }
  .brand .logo { width: 36px; height: 36px; }
  .wm-name { font-size: .68rem; letter-spacing: .14em; line-height: 1.25; white-space: normal; width: min-content; }   /* name on two lines next to the Menu pill */
  .tool.label-hide > span:not(.burger) { display: none; }
  .tool.label-hide { width: 38px; padding: 0; }
  #btnFs { display: none; }
  #btnMenu { height: 40px; padding: 0 15px 0 13px; gap: 9px; font-size: .7rem; letter-spacing: .16em; }
  .caption-row { gap: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 54px); }
  .caption { gap: 10px; }
  .map { width: 124px; padding: 8px 9px 7px; gap: 6px; }
  .map figcaption { font-size: .62rem; }
  .scale { gap: 12px; }
  .count { max-width: 40%; gap: 10px; }
  .col-label { display: none; }
  .arrows { display: none; }
  .tick { height: 24px; }
  .menu-inner { padding-top: calc(env(safe-area-inset-top, 0px) + 56px + 18px); gap: 14px; }
  .tile { gap: 7px; }
  .t-label { flex-direction: column; align-items: flex-start; gap: 3px; }
  .t-arrow { display: none; }   /* no hover on phones; it only pushed the counts to the right */
  .t-name { font-size: .9rem; font-stretch: 108%; }
  .lang-btn { height: 50px; font-size: 1rem; }
  .t-meta { font-size: .6rem; }
}
@media (max-width: 420px) { .index-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 375px) { .wm { display: none; } }   /* smallest phones: the logo alone */
@media (prefers-reduced-motion: reduce) {
  .caption[data-state] .line > * { transition: opacity .3s !important; transform: none !important; }
  .tile, .t-img img, .t-label > *, .burger i, .menu-head, .menu-lang, .mlink, .sheet, .index-grid li { transition: none !important; }
  .mlink { opacity: 1 !important; transform: none !important; }
  .index-grid li { opacity: 1 !important; transform: none !important; }
  .tile { clip-path: none !important; }
  .t-img img { transform: none !important; }
  .t-label > * { opacity: 1 !important; transform: none !important; }
  .menu { transition: opacity .2s ease; }
  .menu[data-state="pre"], .menu[data-state="closing"] { opacity: 0; }
}
/* ---------- the photo is always whole (body.frame-panel on wide screens; frame-light / frame-dark on narrow ones) ---------- */
/* narrow screens (light or dark): the photo sits in its own frame between the header and a caption band */
body.frame-dark, body.frame-light {
  --ft: calc(env(safe-area-inset-top, 0px) + 84px);      /* space for the header */
  --fb: calc(env(safe-area-inset-bottom, 0px) + 158px);  /* space for captions, map and counter */
  --fx: calc(max(var(--gutter-l), var(--gutter-r)) + 8px);
}
.frame-box { position: fixed; top: var(--ft, 0); bottom: var(--fb, 0); left: var(--fx, 0); right: var(--fxr, var(--fx, 0)); visibility: hidden; pointer-events: none; }
body.frame-dark .layer, body.frame-light .layer { object-position: 50% 50%; }
body.frame-dark .layer .fg, body.frame-light .layer .fg { object-position: 50% 50%; }
body.frame-dark .veil-top, body.frame-dark .veil-bottom, body.frame-light .veil-top, body.frame-light .veil-bottom { display: none; }
body.frame-dark .caption-row, body.frame-light .caption-row { height: 90px; align-items: center; }
body.frame-dark .caption, body.frame-light .caption { gap: 6px; }
body.frame-dark .hotel, body.frame-light .hotel { font-size: clamp(1.15rem, 1.7vw, 1.75rem); font-stretch: 118%; max-width: none; }
body.frame-dark .hotel .line > *, body.frame-light .hotel .line > * { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
body.frame-dark .map, body.frame-light .map { width: auto; grid-template-columns: auto 84px; align-items: end; gap: 12px; padding: 6px 8px; }
body.frame-dark .map canvas, body.frame-light .map canvas { grid-column: 2; grid-row: 1; width: 84px; }
body.frame-dark .map figcaption, body.frame-light .map figcaption { grid-column: 1; grid-row: 1; }

/* gallery (white): left to right = the whole photo against the left edge | one column with the next photos |
   panel up to the right edge: category and title at the top, map with country and position at the bottom.
   JS sets --sl (column left), --pl (panel left) and --pw (panel width) from the photo's size */
body.frame-panel {
  --tw: clamp(150px, 12.5vw, 240px);                       /* the photos of the collection, two columns */
  --pmin: clamp(240px, 19vw, 360px);                       /* the panel never gets narrower */
  --ft: calc(env(safe-area-inset-top, 0px) + 84px);
  --fb: calc(env(safe-area-inset-bottom, 0px) + 76px);     /* the counter line below */
  --fx: calc(max(var(--gutter-l), var(--gutter-r)) + 8px);
  --fxr: calc(var(--fx) + var(--pmin) + 32px + var(--tw) + 12px);
}
body.frame-panel .veil-top, body.frame-panel .veil-bottom { display: none; }
body.frame-panel .layer .fg { object-position: 50% 50%; }
.strip { display: none; }
body.frame-panel .strip {
  position: fixed; z-index: 2; top: var(--ft); bottom: var(--fb); left: var(--sl, 0); width: var(--tw);
  display: block; overflow-y: auto; overscroll-behavior: contain;   /* its own scroll, to browse fast */
  scrollbar-width: thin; scrollbar-color: rgba(20, 21, 22, .22) transparent;
}
.strip-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.strip-item { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--bgc, #e6e3dd); cursor: pointer; }
.strip-item[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--map, #e8492a); pointer-events: none; }   /* the photo on screen */
.strip-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out), opacity .35s ease; }
@media (hover: hover) {
  .strip:hover .strip-item:not(:hover) img { opacity: .55; }
  .strip-item:hover img { transform: scale(1.06); }
}
body.frame-panel .caption-row {
  top: var(--ft); bottom: var(--fb); left: var(--pl, auto); right: auto; width: var(--pw, var(--pmin)); height: auto;
  padding: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 24px;
}
/* top: category and title, larger and bold so they read first */
body.frame-panel .caption { gap: 12px; }
body.frame-panel .eyebrow { font-size: .9rem; font-weight: 500; letter-spacing: .16em; }
body.frame-panel .hotel { font-size: clamp(1.8rem, 2.4vw, 2.9rem); font-weight: 650; font-stretch: 112%; line-height: 1.06; max-width: none; }
body.frame-panel .place { font-size: 1.02rem; }
/* bottom: the map, as wide as the panel (between the column of photos and the screen edge), with country and position */
body.frame-panel .map {
  width: min(100%, 520px, calc((100vh - var(--ft) - var(--fb) - 260px) * 1.25)); justify-self: center; align-self: center;
  padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; justify-items: start; gap: 10px;
}
body.frame-panel .map.is-empty { opacity: 1; visibility: visible; }   /* the map stays as part of the panel; the marker shows when the photo has a location */
body.frame-panel .map figcaption { justify-items: start; text-align: left; gap: 6px; }
body.frame-panel #mCountry { color: var(--l-ink); font-family: var(--f-display); font-size: clamp(1.5rem, 1.9vw, 2.3rem); font-weight: 650; font-stretch: 112%; letter-spacing: .01em; text-transform: none; line-height: 1.05; }
body.frame-panel #mCoords { color: var(--l-mute); font-size: clamp(.95rem, 1.05vw, 1.15rem); letter-spacing: .08em; margin-top: 2px; }
/* gallery: the place moves from under the title to under the country, a bit larger */
#mPlace { display: none; }
body.frame-panel #mPlace:not(:empty) { display: block; color: var(--l-ink); font-family: var(--f-display); font-size: clamp(1.15rem, 1.35vw, 1.5rem); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.2; }
body.frame-panel .place:not(.pending) { display: none; }
/* gallery on the dark background (moon) */
body.frame-panel:not(.is-light) #mCountry, body.frame-panel:not(.is-light) #mPlace { color: var(--paper); }
body.frame-panel:not(.is-light) #mCoords { color: var(--mute); }
body.frame-panel:not(.is-light) .strip { scrollbar-color: rgba(242, 239, 232, .25) transparent; }
body:not(.is-light) .logo-line > .brand-logo { filter: brightness(0) invert(1); }   /* logos made for white turn white on dark */
body:not(.is-light) .logo-line.plate > .brand-logo { filter: none; background: #fff; padding: 10px 14px; box-sizing: border-box; border-radius: 2px; width: auto; max-width: min(100%, var(--logo-w, 240px)); }   /* the plate hugs the logo */   /* logos with white inside keep their colors, on a light plate */
body.is-light .logo-line > .brand-logo { mix-blend-mode: multiply; }   /* a logo's white box melts into the paper */

/* the light / dark button: shows the sun on light, the moon on dark */
#btnTheme .ico-moon, body:not(.is-light) #btnTheme .ico-sun { display: none; }
body:not(.is-light) #btnTheme .ico-moon { display: block; }
#btnTheme svg { animation: theme-in .5s var(--ease-out); }
@keyframes theme-in { from { opacity: 0; transform: rotate(-80deg) scale(.6); } to { opacity: 1; transform: none; } }
/* gallery: the brand's logo under the brand name (width set in the admin, Marcas) */
.logo-line { display: none; }
body.frame-panel .logo-line:not(.empty) { display: block; margin-top: 8px; }
.logo-line > .brand-logo { display: block; width: var(--logo-w, 240px); max-width: 100%; height: auto; max-height: calc(var(--logo-w, 240px) * .6); object-fit: contain; object-position: left center; }
body.frame-panel #mCoords .gps { color: var(--map, #e8492a); }

/* light (options 2 and 4): paper white like the menu, dark text */
body.is-light, body.is-light .stage { background: var(--l-paper); }
body.is-light .brand, body.is-light .wm-name { color: var(--l-ink); }
body.is-light .wm-sub { color: var(--l-mute); }
body.is-light .tool { color: var(--l-ink); border-color: var(--l-hair); background: rgba(255, 255, 255, .6); }
body.is-light .tool:hover { border-color: var(--l-ink); background: #fff; }
body.is-light #btnMenu { color: #fff; border-color: var(--l-ink); background: var(--l-ink); box-shadow: none; }
body.is-light #btnMenu:hover { background: var(--l-accent); border-color: var(--l-accent); }
body.is-light .caption-row, body.is-light .place { color: var(--l-ink); }
body.is-light .place.pending, body.is-light .col-label, body.is-light .count .sep { color: var(--l-mute); }
body.is-light .eyebrow { color: var(--l-accent); }
body.is-light .brandslot { border-color: var(--l-hair); background: transparent; }
body.frame-light .map { background: var(--ink); border-color: var(--ink); }
body.is-light .count { color: var(--l-ink); }
body.is-light .tick::before { background: var(--l-hair); }
body.is-light .tick i { background: var(--l-accent); }
body.is-light .tick.done i { background: rgba(20, 21, 22, .55); }
body.is-light .tick:hover::before { background: rgba(20, 21, 22, .4); }
body.is-light .flight { background: var(--l-paper); }

body.frame-dark .preview-badge, body.frame-light .preview-badge, body.frame-panel .preview-badge { top: calc(env(safe-area-inset-top, 0px) + 58px); padding: 5px 12px; font-size: .6rem; }
@media (max-width: 720px) {
  body.frame-dark, body.frame-light { --ft: calc(env(safe-area-inset-top, 0px) + 78px); }
  .preview-badge, body.frame-dark .preview-badge, body.frame-light .preview-badge { top: calc(env(safe-area-inset-top, 0px) + 64px); }
  body.is-preview.frame-dark, body.is-preview.frame-light { --ft: calc(env(safe-area-inset-top, 0px) + 98px); }
}
@media (max-width: 600px) {
  body.frame-dark, body.frame-light { --fb: calc(env(safe-area-inset-bottom, 0px) + 150px); }
  body.frame-dark .caption-row, body.frame-light .caption-row { height: 84px; }
  body.frame-dark .map canvas, body.frame-light .map canvas { width: 64px; }
  body.frame-dark .map, body.frame-light .map { grid-template-columns: 64px; padding: 5px; }
  body.frame-dark .map figcaption, body.frame-light .map figcaption { display: none; }   /* phones: the small map alone */
  body.frame-dark .map canvas, body.frame-light .map canvas { grid-column: 1; }
  body.frame-dark .brandslot, body.frame-light .brandslot { display: none; }   /* the hotel name already says the brand */
}

/* ---------- studio pages: Video Gallery, Services, About, Contact ---------- */
/* label shown when the page opens the admin's unpublished draft */
.preview-badge { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 10; transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--brass); color: #141516; font-family: var(--f-data); font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
/* shown only if content.js can't be read */
.load-error { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--mute); font-family: var(--f-data); font-size: .8rem; letter-spacing: .08em; }

#btnBack { display: none; }
body.page-open #btnBack { display: inline-flex; }
body.page-open .tools > :not(#btnMenu):not(#btnBack) { display: none; }
/* on the white sheets the header gets its own paper band so scrolled content never runs under the logo */
.bar { transition: background-color .45s ease, box-shadow .45s ease; }
body.menu-light .bar { background: color-mix(in srgb, var(--l-paper) 86%, transparent); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); padding-bottom: 12px; box-shadow: 0 1px 0 var(--l-hair); }
body.menu-light #btnBack { color: var(--l-ink); border-color: var(--l-hair); background: rgba(255, 255, 255, .7); }
body.page-open .veil-top, body.page-open .veil-bottom { opacity: 0; }

.pages { position: fixed; inset: 0; z-index: 4; color: var(--l-ink); }
.pages-paper { position: absolute; inset: 0; background: var(--l-paper); opacity: 0; transition: opacity .55s ease; }
.pages[data-state="open"] .pages-paper { opacity: 1; }
.pages[data-state="closing"] .pages-paper { opacity: 0; transition: opacity .45s ease .15s; }
.pages[data-state="pre"] .pages-paper { transition: none; }
.pages-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.pages :focus-visible { outline-color: var(--l-accent); }
.page {
  max-width: 1280px; margin: 0 auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + 56px + clamp(36px, 9vh, 104px));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  padding-left: calc(var(--gutter-l) + 8px); padding-right: calc(var(--gutter-r) + 8px);
}
.rise { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform 1s var(--ease-out); }
.pages[data-state="open"] .page.is-active .rise { opacity: 1; transform: none; transition-delay: calc(var(--j, 0) * 70ms + 120ms); }
.pages[data-state="closing"] .rise { opacity: 0; transform: translateY(-10px); transition-duration: .3s; transition-delay: 0s; }

.pg-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 7vw, 88px); }
.pg-eyebrow { margin: 0; font-family: var(--f-data); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--l-accent); }
.pg-title { margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(2.3rem, 6.2vw, 5.4rem); line-height: 1; letter-spacing: -.028em; max-width: 13ch; text-wrap: balance; }
.pg-lead { margin: 0; max-width: 58ch; font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.55; color: #2b2c2e; }
.prose p { margin: 0 0 1.1em; max-width: 62ch; font-size: 1.02rem; line-height: 1.72; color: #2b2c2e; }
.prose h3 { margin: 1.8em 0 .6em; font-family: var(--f-display); font-stretch: 112%; font-weight: 500; font-size: 1.25rem; letter-spacing: -.01em; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--l-ink); text-decoration: none; font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--l-hair); padding-bottom: 6px; transition: color .3s, border-color .3s; }
.link-arrow svg { width: 14px; height: 14px; transition: transform .45s var(--ease-out); }
.link-arrow:hover { color: var(--l-accent); border-color: var(--l-accent); }
.link-arrow:hover svg { transform: translateX(4px); }
.btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; background: var(--l-ink); color: #fff; font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background-color .3s ease, transform .5s var(--ease-out); }
.btn-solid:hover { background: var(--l-accent); }
.btn-solid svg { width: 16px; height: 16px; }
.btn-line { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--l-hair); color: var(--l-ink); text-decoration: none; font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; transition: border-color .3s, color .3s; }
.btn-line:hover { border-color: var(--l-accent); color: var(--l-accent); }
.btn-line svg { width: 16px; height: 16px; }

/* video gallery */
.v-group + .v-group { margin-top: clamp(56px, 8vw, 96px); }
.v-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--l-hair); }
.v-group-head h2 { margin: 0; font-family: var(--f-display); font-stretch: 118%; font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -.01em; }
.v-group-head span { font-family: var(--f-data); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--l-mute); }
.v-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; }
.vcard { display: grid; gap: 12px; width: 100%; text-align: left; color: inherit; }
.vposter { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #1a1c1f, #2b2e33); }
.vposter img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .5s ease; filter: brightness(.86); }
.vposter.is-fallback img { display: none; }
.vposter .vmark { position: absolute; left: 14px; bottom: 12px; font-family: var(--f-data); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.vplay { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--l-ink); display: grid; place-items: center; transition: transform .6s var(--ease-out), background-color .3s, color .3s; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.vplay svg { width: 20px; height: 20px; margin-left: 3px; }
.vcard:hover .vposter img, .vcard:focus-visible .vposter img { transform: scale(1.05); filter: brightness(1); }
.vcard:hover .vplay, .vcard:focus-visible .vplay { transform: scale(1.1); background: var(--l-accent); color: #fff; }
.v-title { font-family: var(--f-display); font-stretch: 112%; font-weight: 500; font-size: 1.05rem; line-height: 1.25; transition: color .3s; }
.vcard:hover .v-title { color: var(--l-accent); }
.v-meta { font-family: var(--f-data); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--l-mute); }

.lightbox { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(8, 9, 10, .94); opacity: 0; transition: opacity .4s ease; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.lightbox[data-state="open"] { opacity: 1; }
.lb-inner { width: min(1200px, 100%); display: grid; gap: 16px; transform: scale(.97); transition: transform .6s var(--ease-out); }
.lightbox[data-state="open"] .lb-inner { transform: none; }
.lb-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lb-fallback { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; color: var(--paper); padding: 24px; }
.lb-fallback p { margin: 0; max-width: 40ch; color: var(--mute); line-height: 1.5; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--paper); }
.lb-bar h3 { margin: 0; font-family: var(--f-display); font-stretch: 112%; font-weight: 500; font-size: 1.1rem; }
.lb-bar a { color: var(--brass); font-family: var(--f-data); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.lb-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 18px); right: calc(var(--gutter-r) + 8px); }

/* services */
.svc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.svc + .svc { margin-top: clamp(64px, 9vw, 120px); }
.svc.flip .svc-media { order: 2; }
.svc-media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bgc, #e6e3dd); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 1.6s var(--ease-out); }
.svc:hover .svc-media img { transform: scale(1.04); }
.svc-body { display: grid; gap: 16px; align-content: start; }
.svc-body h2 { margin: 0; font-family: var(--f-display); font-stretch: 122%; font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; }
.svc-body p { margin: 0; max-width: 46ch; font-size: 1.02rem; line-height: 1.7; color: #2b2c2e; }
.svc-body .actions { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 8px; }
.brands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.brands span { font-family: var(--f-data); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--l-hair); }
.cta-band { margin-top: clamp(80px, 11vw, 150px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--l-hair); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; }
.cta-band h2 { margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 500; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.025em; max-width: 16ch; }

/* about */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-media { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); margin: 0; }
.about-media img { width: 100%; height: auto; display: block; filter: grayscale(1); }
.about-media figcaption { margin-top: 12px; font-family: var(--f-data); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--l-mute); }
.quote { margin: clamp(36px, 5vw, 56px) 0; padding: 0; border: 0; font-family: var(--f-display); font-stretch: 118%; font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; max-width: 22ch; }
/* About: the brands worked with */
.about-brands { margin-top: clamp(56px, 8vw, 120px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid rgba(20, 21, 22, .12); }
.ab-title { margin: 0 0 clamp(20px, 3vw, 40px); font-family: var(--f-display); font-stretch: 112%; font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -.01em; line-height: 1.15; }
.brand-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 13vw, 190px), 1fr)); gap: clamp(6px, 1.2vw, 18px) clamp(16px, 2.4vw, 36px); }
.brand-grid li { --k: clamp(50px, 4.4vw, 68px); display: flex; align-items: center; justify-content: center; height: clamp(84px, 8vw, 120px); }
.brand-grid img { display: block; width: min(calc(var(--s, 1.4) * var(--k)), 92%); height: auto; max-height: 80%; object-fit: contain; filter: grayscale(1); opacity: .8; mix-blend-mode: multiply; transition: filter .4s ease, opacity .4s ease; }
.brand-grid li:hover img { filter: none; opacity: 1; }
.brand-grid .bname { font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: clamp(.85rem, 1vw, 1rem); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--l-ink); opacity: .7; }
.quote::before { content: "“"; display: block; color: var(--l-accent); font-size: 2.2em; line-height: .6; margin-bottom: 10px; }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.direct { display: grid; gap: 28px; }
.direct-item { display: grid; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--l-hair); }
.direct-item .lbl { font-family: var(--f-data); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--l-mute); }
.direct-item .val { font-family: var(--f-display); font-stretch: 112%; font-weight: 500; font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: -.01em; user-select: all; overflow-wrap: anywhere; }
.direct-item .row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.copy-btn { font-family: var(--f-data); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--l-accent); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--f-data); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--l-mute); }
.field label b { color: var(--l-accent); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; font: inherit; font-size: 1.02rem; color: var(--l-ink); background: transparent;
  border: 0; border-bottom: 1px solid rgba(20, 21, 22, .28); border-radius: 0; padding: 10px 0 12px; transition: border-color .3s;
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--l-ink) 50%), linear-gradient(135deg, var(--l-ink) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--l-accent); box-shadow: 0 1px 0 0 var(--l-accent); }
.field.has-error input, .field.has-error textarea { border-bottom-color: #a33a2a; }
.field .err { min-height: 1em; font-size: .78rem; color: #a33a2a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 6px; }
.form-status { margin: 0; max-width: 52ch; font-size: .95rem; line-height: 1.55; color: var(--l-ink); }
.form-status.is-note { padding: 14px 16px; background: #efebe3; border-left: 2px solid var(--l-accent); }


@media (max-width: 1000px) {
  .v-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about, .contact { grid-template-columns: minmax(0, 1fr); }
  .about-media { position: static; max-width: 520px; }
}
@media (max-width: 760px) {
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc.flip .svc-media { order: 0; }
  .form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .v-grid { grid-template-columns: minmax(0, 1fr); }
  #btnBack span { display: none; }
  #btnBack { width: 38px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rise, .pages-paper, .lightbox, .lb-inner { transition: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
}