/* the menu panel parks its layers off to the right: the page never scrolls sideways */
html, body { overflow-x:hidden; }

/* Siente Bonito — shared styles for standalone pages (services, legal, etc.)
   The home keeps its own inline styling; everything here is what a normal
   scrolling page needs: tokens, type, header, menu, footer, service layout. */

@keyframes cgCaret { 0%,50% { opacity:1; } 50.01%,100% { opacity:0; } }
@keyframes sb-chev { 0%,100% { opacity:.28; transform:translateX(0); } 45% { opacity:1; transform:translateX(4px); } }
@keyframes sb-chev-l { 0%,100% { opacity:.28; transform:translateX(0); } 45% { opacity:1; transform:translateX(-4px); } }

:root {
  --accent:#BA6A43;
  --ink:#342821;
  --cream:#FCFAF6;
  --paper:#F6F1EA;
  --peach:#EFC9B3;
  --blush:#E7D6D0;
  --sage:#A9B8A5;
  --topo:#8B7B72;
  --serif:'Manrope', system-ui, sans-serif;
  --sans:'Manrope', system-ui, sans-serif;
  --pad:clamp(16px,3vw,40px);
  --measure:1400px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; }
::selection { background:var(--accent); color:#fff; }
a { color:var(--accent); }
a:hover { opacity:.7; }

.wrap { width:100%; max-width:var(--measure); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ── type ───────────────────────────────────────────── */
.eyebrow { margin:0; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.eyebrow--light { color:var(--peach); }

.display, .h2, .h3 { font-weight:600; letter-spacing:-.025em; }
.display { margin:0; font-family:var(--serif); font-size:clamp(29px,5vw,75px); line-height:.9; letter-spacing:-.015em; font-weight:400; }
.h2 { margin:0; font-family:var(--serif); font-size:clamp(23px,3.3vw,47px); line-height:1.05; letter-spacing:-.02em; font-weight:400; }
.h3 { margin:0; font-family:var(--serif); font-size:clamp(17px,1.9vw,26px); line-height:1.15; letter-spacing:-.012em; font-weight:400; }
.lede { margin:0; font-size:clamp(14px,1.2vw,19px); line-height:1.6; max-width:44ch; opacity:.88; text-wrap:pretty; }
.body { margin:0; font-size:clamp(14px,1.2vw,19px); line-height:1.7; max-width:62ch; text-wrap:pretty; }
.meta { margin:0; font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.55; }

/* ── buttons ────────────────────────────────────────── */
button { font:inherit; }
.btn {
  display:inline-flex; align-items:center; gap:16px;
  padding:10px 0; background:none; border:0;
  border-bottom:1px solid rgba(52,40,33,.42);
  color:inherit; font:inherit; cursor:pointer; text-decoration:none;
  transition:border-color .4s ease, gap .4s cubic-bezier(.22,1,.36,1);
}
.btn:hover { border-color:var(--ink); gap:22px; opacity:1; }
.btn__label { font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }
.btn__mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  background:var(--peach); color:var(--ink); font-size:17px; line-height:1;
}
.btn--light { border-bottom-color:rgba(255,255,255,.42); color:#fff; }
.btn--light:hover { border-bottom-color:#fff; }

/* ── header ─────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; width:100%; z-index:240;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad); color:#fff; pointer-events:none;
  transition:color .6s ease;
}
/* once you leave the hero the chrome sits on a soft veil of the page colour */
.nav::before {
  content:''; position:absolute; inset:0; z-index:-1;
  height:clamp(96px,13vh,132px);
  background:var(--cream);
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
.nav--dark::before { opacity:1; }
/* the open menu is its own surface: the header veil would double it */
.nav--menu::before, .is-menu-open .nav::before { opacity:0 !important; }
.is-menu-open .crumb { opacity:0 !important; pointer-events:none; }
.is-menu-open .crumb__here { pointer-events:none !important; }
.nav--dark { color:var(--accent); }
/* over the footer the chrome sits on the footer's own colour, in cream */
.nav--foot::before { opacity:1; background:var(--ink); }
.nav--foot { color:var(--cream); }
.nav--foot .nav__logo .is-dark { display:none; }
.nav--foot .nav__logo .is-light { display:block; }
.nav--foot ~ .crumb { color:var(--cream); }
.nav a, .nav button { pointer-events:auto; }
.nav__logo { display:flex; align-items:center; text-decoration:none; }
.nav__logo:hover { opacity:1; }
.nav__logo img { height:clamp(17px,1.7vw,23px); width:auto; display:block; }
.nav__logo .is-dark { display:none; }
.nav--dark .nav__logo .is-light { display:none; }
.nav--dark .nav__logo .is-dark { display:block; }
.nav__right { display:flex; align-items:center; gap:3px; pointer-events:auto; }
/* language: two words in the same small-type voice as everything else up here */
.nav__lang { display:inline-flex; align-items:center; gap:9px; height:24px; position:relative; top:2px; margin-right:clamp(14px,1.8vw,26px); }
.nav__lang-opt {
  display:block; height:24px; line-height:24px;
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; color:inherit; opacity:.45;
  transition:opacity .35s ease;
}
.nav__lang-opt[aria-current="true"] { opacity:1; }
/* a language with no page yet: visible as a promise, not as a link */
.nav__lang-opt[data-lang-off] { opacity:.22; pointer-events:none; cursor:default; }
.nav__lang-opt:hover { opacity:1; }
.nav__lang-sep { width:1px; height:11px; background:currentColor; opacity:.3; }
.is-menu-open .nav__lang { opacity:0; pointer-events:none; transition:opacity .3s ease; }
@media (max-width:559px) { .nav__lang { gap:9px; margin-right:12px; } }

.nav__label {
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  display:inline-block; height:24px; overflow:hidden;
  position:relative; top:2px; pointer-events:none;
}
/* on a phone the icon carries the meaning; the word is just width */
@media (max-width:559px) { .nav__label { display:none; } }
.nav__roll { display:block; }
.nav__roll span { display:block; height:24px; line-height:24px; }
.nav__toggle {
  font:inherit; background:none; border:0; color:inherit; cursor:pointer; padding:6px; margin:-6px;
  position:relative; top:2px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  width:clamp(56px,5vw,76px); height:22px;
}
.nav__toggle span { display:block; height:1px; width:100%; background:currentColor; transition:transform .48s cubic-bezier(.22,1,.36,1); transform-origin:center; }
.is-menu-open .nav__toggle span:nth-child(1) { transform:translateY(3.5px) rotate(45deg); }
.is-menu-open .nav__toggle span:nth-child(2) { transform:translateY(-3.5px) rotate(-45deg); }
.is-menu-open .nav { color:var(--ink); }
.is-menu-open [data-lang], .is-menu-open .nav__lang { display:none !important; }
.is-menu-open .nav__label { display:inline-flex !important; }
@media (max-width:559px) { .is-menu-open .nav__label { display:inline-flex !important; } }
/* the wipe paints the logo as the panel crosses it, so the base image stays put */
.nav__logo { position:relative; }

/* ── section indicator ──────────────────────────────── */
.crumb {
  position:fixed; left:var(--pad); right:var(--pad); top:clamp(62px,7vh,78px); z-index:241;
  display:flex; align-items:center; gap:clamp(14px,2.4vw,26px);
  color:#fff; opacity:.9; pointer-events:none;
  transition:opacity .7s ease, color .6s ease;
}
.nav--dark ~ .crumb { color:var(--accent); }
button.crumb__here {
  border:0; background:none; padding:0; font-family:inherit; font-weight:inherit;
  color:inherit; cursor:pointer; pointer-events:auto; transition:opacity .35s ease;
}
button.crumb__here:hover { opacity:.6; }
.crumb__root, .crumb__here { font-size:11px; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; }
.crumb__root { color:inherit; text-decoration:none; pointer-events:auto; }
.crumb__root:hover { opacity:.6; }
.crumb__here { opacity:.75; }
.crumb__rule { flex:1; height:1px; position:relative; }
.crumb__rule::before { content:''; position:absolute; inset:0; background:currentColor; opacity:.28; }
.crumb__fill { position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:currentColor; transition:transform .35s cubic-bezier(.22,1,.36,1); opacity:1; }
@media (max-width:559px) { .crumb__root { display:none; } }

/* ── menu panel (home markup, inline-styled) ────────── */
.nav--menu { color:var(--ink) !important; }
[data-catmore]:hover { opacity:1 !important; }
[data-catsublink]:hover { opacity:1 !important; transform:translateX(5px); }

/* ── scroll-lit paragraphs ──────────────────────────── */
.magic__w { opacity:.22; transition:opacity .18s linear; will-change:opacity; }

/* ══ POSTER ARCHITECTURE ═══════════════════════════════
   Service pages follow an oversized-editorial model: the warm canvas and
   whitespace do the structural work, display type runs light and huge with
   tight tracking, photographs go full-bleed and sharp-cornered, chromatic
   colour appears only as small hits, and nothing casts a shadow.
   Declared after the base rules so it wins on equal specificity. */

:root {
  --graphite:#7A6D64;          /* recedes so display type can dominate */
  --hair:rgba(52,40,33,.15);
  --gap-sec:clamp(54px,7vh,104px);
  --edge:clamp(20px,4vw,64px);  /* full-bleed page margin */
  --spine:calc(var(--edge) * 2);  /* where every eyebrow and headline starts */
}

/* text keeps a measure; imagery runs to the edges */
.bleed { width:100%; padding-left:var(--edge); padding-right:var(--edge); }
.bleed--flush { padding-left:0; padding-right:0; }
.bleed__in { width:100%; max-width:1680px; margin:0 auto; }
/* declared here, not with the rest of the product rules: this is above the fold */
.poster--art > .bleed { padding-inline:var(--spine); }
.poster--art .pstr { visibility:hidden; }
.fonts-ready .poster--art .pstr { visibility:visible; }

.pg { padding-block:var(--gap-sec); }
.poster + .pg { padding-top:clamp(74px,10vh,142px); }
.pg:not(.pg--ink) + .pg--ink { margin-top:clamp(46px,7vh,104px); }
@media (max-width:900px) {
  .pg { padding-block:34px !important; }
  .poster + .pg { padding-top:62px !important; }
  .pg:not(.pg--ink) + .pg--ink { margin-top:38px; }
  .pg--rule > .bleed > .bleed__in,
  .pg--rule > .bleed__in { padding-top:24px !important; }
}
.pg--tight { padding-block:clamp(44px,6vh,88px); }
.pg--rule > .bleed > .bleed__in,
.pg--rule > .bleed__in { border-top:1px solid var(--hair); padding-top:clamp(32px,4vh,58px); }
.pg--ink { background:var(--ink); color:var(--cream); }
.pg--ink .lede, .pg--ink .body { opacity:.82; }

/* ── display type: light, huge, tightly tracked ─────── */
.pstr {
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(46px,10.4vw,152px); line-height:.92; letter-spacing:-.042em;
  text-transform:none;
}
.stmt {
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(30px,4.6vw,68px); line-height:1.02; letter-spacing:-.03em;
  max-width:22ch; text-transform:none; text-wrap:balance;
}
.stmt--wide { max-width:32ch; }
.sub {
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(21px,2.3vw,36px); line-height:1.16; letter-spacing:-.022em;
  text-transform:none;
}
/* the eyebrow recedes: regular weight, graphite, one quiet line */
.brow { margin:0; font-size:12px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); }
.pg--ink .brow, .onart .brow { color:var(--peach); }
.note { margin:0; font-size:12px; font-weight:400; letter-spacing:.02em; line-height:1.5; color:var(--graphite); }
.pg--ink .note { color:rgba(252,250,246,.55); }

/* ── pills: the only rounded things on the page ─────── */
.pill {
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px; border:0; border-radius:1440px;
  background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background .35s ease, color .35s ease;
}
.pill:hover { opacity:1; background:var(--accent); color:#fff; }
/* the plus only appears where the action opens a layer over the page */
.pill__plus {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin:-4px -8px -4px 2px;
  border-radius:999px; background:var(--peach); color:var(--ink);
  font-size:15px; font-weight:400; letter-spacing:0; line-height:1; padding-bottom:3px;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.pill:hover .pill__plus { transform:rotate(90deg); }
.pill:not(.pill--line) .pill__plus { background:var(--ink); color:var(--cream); }
/* the plus opens a layer; this one only travels down the page */
.pill__down {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin:-4px -8px -4px 2px;
  border-radius:999px; background:var(--peach); color:var(--ink);
  font-size:13px; font-weight:400; letter-spacing:0; line-height:1;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.pill:hover .pill__down { transform:translateY(3px); }
.pill--line { background:none; color:inherit; box-shadow:inset 0 0 0 1px var(--hair); }
.pill--line:hover { background:var(--accent); color:#fff; box-shadow:inset 0 0 0 1px var(--accent); }
.pg--ink .pill { background:var(--cream); color:var(--ink); }
.pg--ink .pill:hover { background:var(--accent); color:#fff; }
.pg--ink .pill--line { background:none; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(252,250,246,.34); }
.pg--ink .pill--line:hover { background:var(--accent); color:#fff; box-shadow:inset 0 0 0 1px var(--accent); }
.onart .pill { background:var(--cream); color:var(--ink); }
.onart .pill:hover { background:var(--accent); color:#fff; }

/* ── the poster hero: type on canvas, no photograph ─── */
.poster { padding-block:clamp(132px,20vh,232px) clamp(40px,6vh,80px); }
.poster__in { display:grid; gap:clamp(22px,3vw,44px); }
.poster__foot {
  display:grid; gap:clamp(20px,3vw,40px); align-items:end;
  grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--hair); padding-top:clamp(22px,2.6vw,34px);
}
@media (min-width:820px) { .poster__foot { grid-template-columns:minmax(0,1.1fr) auto; } }
.poster__foot > .pill { justify-self:start; }
.poster__lede { margin:0; font-size:clamp(16px,1.35vw,21px); font-weight:300; line-height:1.5; letter-spacing:-.01em; max-width:46ch; text-wrap:pretty; }

/* phones keep the same spine as desktop */

/* ── measure caps are for wide columns, not phones ────
   A ch cap is there to stop a line growing past comfortable reading length on a
   wide column. A phone column is already narrower than the cap, so the cap only
   wraps early — and text-wrap:pretty shortens the rest to avoid a short last line. */
@media (max-width:700px) {
  .poster__lede, .stmt, .stmt--wide, .sub, .body, .row__b .body, .card__d { max-width:none; }
  .poster__lede, .body, .row__b .body { text-wrap:initial; }
}

/* ── motion ─────────────────────────────────────────────
   The poster animates on load with pure CSS so nothing can flash.
   Below-the-fold reveals are gated on .has-motion (set by an inline
   script in the head) and driven by an observer in site.js. */
@keyframes sbRise { from { transform:translateY(112%); } to { transform:translateY(0); } }
@keyframes sbFade { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes sbRule { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* a masked line: the type slides up out of its own box */
.ln { display:block; overflow:hidden; padding-bottom:.34em; margin-bottom:-.34em; }
.ln > span { display:block; will-change:transform; }
.has-motion .ln > span { animation:sbRise 1.15s cubic-bezier(.16,1,.3,1) both; }
.has-motion .ln:nth-child(2) > span { animation-delay:.1s; }
.has-motion .ln:nth-child(3) > span { animation-delay:.2s; }

.has-motion .poster .brow { animation:sbFade .9s cubic-bezier(.16,1,.3,1) both; }
.has-motion .poster__foot { animation:sbFade 1s cubic-bezier(.16,1,.3,1) .42s both; }
.has-motion .poster__foot { border-top-color:transparent; }
.poster__foot { position:relative; }
.poster__foot::before {
  content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--hair); transform-origin:left;
}
.has-motion .poster__foot::before { animation:sbRule 1.1s cubic-bezier(.16,1,.3,1) .3s both; }

@media (prefers-reduced-motion:reduce) {
  .has-motion .ln > span, .has-motion .poster .brow, .has-motion .poster__foot,
  .has-motion .poster__foot::before { animation:none !important; }
}

/* the poster over photography: same type and rhythm as the cream variant,
   but it opens dark so the page meets the home in the same register */
.poster--art {
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  min-height:clamp(560px,92svh,1020px);
  background:var(--cream); color:var(--cream);
  padding-block:clamp(150px,22vh,250px) clamp(38px,7vh,92px);
}
.poster--art > img { position:absolute; inset:0; width:100%; height:124%; top:-12%; object-fit:cover; will-change:transform; }
.poster--art .veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(24,18,14,.66) 0%,rgba(24,18,14,.48) 45%,rgba(24,18,14,.82) 100%); }
.poster--art > .bleed { position:relative; z-index:1; }
.poster--art .poster__foot { border-top-color:transparent; }
.poster--art .poster__foot::before { background:rgba(252,250,246,.34); }
.poster--art .poster__lede { color:rgba(252,250,246,.86); }
.poster--art .poster__foot { padding-bottom:clamp(72px,9vh,96px); }
@media (min-width:820px) { .poster--art .poster__foot { padding-right:clamp(190px,20vw,240px); padding-bottom:clamp(64px,7vh,84px); } }
@media (prefers-reduced-motion:reduce) { .poster--art > img { height:100%; top:0; } }
/* a 16:9 photograph cropped to a tall phone screen magnifies into a wall of
   façade, so the hero gets shorter and the crop favours the sky and the plaça */
@media (max-width:700px) {
  .poster--art { min-height:0; padding-block:clamp(104px,15vh,132px) clamp(26px,4vh,40px); }
  .poster--art > .bleed { padding-inline:16px; }
  .poster--art > img { object-position:72% 42%; }
  .poster--art .poster__in { gap:16px; }
}
@media (max-width:700px) {
  .poster--art { min-height:0; padding-block:clamp(96px,17vh,128px) clamp(26px,4vh,40px); }
  .poster--art > img { height:100%; top:0; transform:none !important; }
}

/* hover states belong to devices that can hover; a tap must not leave one stuck */
@media (hover:none), (pointer:coarse) {
  .pill:hover { background:var(--ink) !important; color:var(--cream) !important; box-shadow:none !important; }
  .pill--line:hover { background:none !important; color:inherit !important; box-shadow:inset 0 0 0 1px var(--hair) !important; }
  .pg--ink .pill:hover { background:var(--cream) !important; color:var(--ink) !important; }
  .pg--ink .pill--line:hover { background:none !important; color:var(--cream) !important; box-shadow:inset 0 0 0 1px rgba(252,250,246,.34) !important; }
  .onart .pill:hover { background:var(--cream) !important; color:var(--ink) !important; }
  .pill:hover .pill__plus { transform:none !important; }
  .card:hover { transform:none !important; box-shadow:inset 0 0 0 1px var(--hair) !important; }
  .card:hover .card__go { transform:none !important; }
  .card--tint:hover, .card--off:hover { box-shadow:none !important; }
  .row--step:hover .row__n { transform:none !important; }
  .sheet figure > a:hover img { transform:scale(1) !important; }
  .pill:active { opacity:.72; }
}

/* footer rhythm on phones — inlined so a cached sheet cannot override it */
@media (max-width:759px) {
  .foot__inner { padding-top:44px !important; padding-bottom:20px !important; gap:22px !important; }
  .foot__base { margin-top:20px !important; padding-top:22px !important; }
}

html.has-hcar { scroll-behavior:auto !important; }
html.has-hcar body { overscroll-behavior-y:none; }
html.has-hcar .foot { min-height:100svh; display:flex; align-items:center; border-radius:0; margin-bottom:0; }
html.has-hcar .foot__inner { width:100%; }
.hcar { position:relative; background:#000; color:#fff; }
/* Vertical paging, on the page's own scroll: each panel is a full frame that
   snaps, so the footer can follow as one more full-height block — the same
   model the home uses. No inner scroll container, no horizontal gesture. */
.hcar__track { display:block; }
.hcar__panel { position:relative; height:100svh; overflow:hidden; }
.hcar__panel > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:559px) {
  .hcar--talks .hcar__panel > img { object-position:72% 50%; }
}
/* a phone frame is far taller than these landscape illustrations: containing them
   keeps the whole drawing, and the ink field fills what is left */
@media (max-width:559px) {
  .hcar--talks .hcar__panel:first-child > img { object-position:66% 44%; }
}
.hcar__copy {
  position:absolute; left:max(clamp(16px,3vw,40px), 50% - 700px + clamp(16px,3vw,40px));
  right:clamp(16px,3vw,40px); bottom:clamp(120px,14vw,190px);
  display:grid; gap:14px; max-width:44ch;
}
.hcar__n { font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--peach); }
.hcar__t { margin:0; font-weight:800; font-size:clamp(30px,5.4vw,84px); line-height:.94; letter-spacing:-.042em; max-width:20ch; }
.hcar__d { margin:0; font-size:clamp(14px,1.2vw,19px); line-height:1.55; max-width:50ch; opacity:.9; text-wrap:pretty; }
.hcar__go {
  justify-self:start; margin-top:6px; display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px; border:0; border-radius:1440px; background:none;
  box-shadow:inset 0 0 0 1px rgba(252,250,246,.34); color:#fff; text-decoration:none;
  font:inherit; cursor:pointer;
  transition:box-shadow .35s ease, background .35s ease;
}
.hcar__go:hover {
  opacity:1; background:rgba(252,250,246,.1);
  box-shadow:inset 0 0 0 1px rgba(252,250,246,.7);
}
.hcar__disc {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  order:2; width:24px; height:24px; margin:-4px -8px -4px 2px;
  border-radius:999px; background:var(--peach); color:var(--ink);
  font-size:15px; line-height:1; letter-spacing:0; padding-bottom:3px;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.hcar__go:hover .hcar__disc { transform:rotate(90deg); }
.hcar__lbl { order:1; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.hcar__play {
  justify-self:start; margin-top:6px; display:inline-flex; align-items:center; gap:11px;
  cursor:default;
}
.hcar__play .hcar__soon { margin-top:0; }
.hcar__soon {
  justify-self:start; margin-top:6px; display:inline-flex; align-items:center;
  padding:14px 24px; border:1px dashed rgba(239,201,179,.55); border-radius:999px;
  background:rgba(20,14,10,.3); backdrop-filter:blur(3px);
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--peach);
}

/* the rail rides with the viewport, not with a panel */
.hcar__heading {
  position:fixed; z-index:7; left:clamp(16px,3vw,40px); right:clamp(16px,3vw,40px);
  top:clamp(92px,12vh,124px); margin:0; color:#fff;
  font-size:13px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.34); pointer-events:none;
  opacity:0; transition:opacity .4s ease;
}
.hcar.is-live .hcar__heading { opacity:1; }
.hcar--plain .hcar__copy { bottom:clamp(66px,7.5vw,98px); }
.hcar--talks .hcar__copy { bottom:clamp(104px,11.5vw,152px); }
.hcar--team .hcar__copy { bottom:clamp(100px,11vw,146px); }
.hcar--talks .hcar__veil {
  background:linear-gradient(180deg,rgba(24,18,14,.55) 0%,rgba(24,18,14,.36) 45%,rgba(24,18,14,.72) 100%);
}
.hcar--plain .hcar__veil {
  background:linear-gradient(180deg,rgba(24,18,14,.55) 0%,rgba(24,18,14,.36) 45%,rgba(24,18,14,.72) 100%);
}
.hcar__veil {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,22,18,.72) 0%,rgba(28,22,18,.55) 45%,rgba(28,22,18,.86) 100%);
}
.hcar__rail {
  position:fixed; z-index:6; right:clamp(16px,3vw,40px); left:auto;
  top:92px;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.hcar.is-live .hcar__rail { opacity:1; pointer-events:auto; }
.hcar__pill {
  font:inherit; flex:0 0 auto; padding:0; border:0; background:none; color:#fff;
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  transition:opacity .35s ease;
}
/* the name is carried by the button's text, revealed only where it belongs */
/* ten full names need a little more room than five short ones */
.hcar--team .hcar__pill > span:first-child { max-width:26ch; }
.hcar__pill > span:first-child {
  opacity:.6; white-space:nowrap;
  transition:opacity .4s ease;
}
.hcar__pill::after {
  content:''; flex:0 0 auto; width:5px; height:5px; border-radius:999px;
  background:currentColor; opacity:.5;
  transition:height .4s cubic-bezier(.22,1,.36,1), background .35s ease, opacity .35s ease;
}
.hcar__pill.is-on > span:first-child { opacity:1; }
.hcar__pill.is-on::after { height:26px; background:var(--peach); opacity:1; }
.hcar__pill:hover > span:first-child { opacity:1; }
.hcar__pill:hover::after { opacity:.75; }

@media (hover:none), (pointer:coarse) {
  .hcar__pill:hover > span:first-child { opacity:1; }
  .hcar__pill.is-on:hover > span:first-child { opacity:1; }
}
/* on a phone the names stay — they are the invitation to keep going — but tighten */
@media (max-width:559px) {
  .hcar__rail { gap:8px; align-items:flex-end; top:92px; transform:none; }
  .hcar__rail::before { display:none; }
  .hcar__pill > span:first-child { display:block; font-size:9px; letter-spacing:.14em; max-width:44vw; overflow:hidden; text-overflow:ellipsis; }
  .hcar:not(.is-live) .hcar__rail { opacity:0 !important; pointer-events:none !important; }
  .hcar__pill { font-size:9px; letter-spacing:.14em; gap:9px; justify-content:flex-end; }
  /* ten full names need a little more room than five short ones */
.hcar--team .hcar__pill > span:first-child { max-width:26ch; }
  .hcar--team .hcar__panel[data-name="Alicia Sánchez"] > img { object-position:71% 50% !important; }
  .hcar--team .hcar__panel[data-name="Marta Ramo"] > img { object-position:48% 50% !important; }
.hcar__rail { position:fixed; }
  .hcar__rail::before {
    content:attr(data-active); position:absolute; top:calc(100% + 16px); bottom:auto; left:50%;
    transform:translateX(-50%) rotate(180deg); writing-mode:vertical-rl;
    font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
    color:#fff; white-space:nowrap; pointer-events:none;
  }
  .hcar__pill.is-on::after { height:26px; }
}

/* the cue names what lies underneath, and scrolls to it */
.hcar__cue {
  position:fixed; z-index:7; left:0; right:0; bottom:clamp(30px,5vh,56px);
  display:flex; align-items:center; justify-content:center; gap:9px; color:#fff;
  pointer-events:none;
}
.hcar__cue[hidden] { display:none; }
.hcar__down {
  display:inline-flex; flex-direction:column; align-items:center; gap:6px; line-height:1;
  padding:10px 16px; margin:-10px -16px; border:0; background:none;
  color:#fff; font:inherit; cursor:pointer; pointer-events:auto;
}
.hcar__peek { display:none; }
.hcar__down-lbl {
  display:flex; align-items:center; font-size:10px; line-height:1;
  letter-spacing:.28em; text-transform:uppercase; opacity:.62;
  animation:sb-cue-drift 2.6s ease-in-out infinite;
}
@keyframes sb-cue-drift { 0%,100% { transform:translateY(0); opacity:.5; } 50% { transform:translateY(4px); opacity:.75; } }
@media (prefers-reduced-motion:reduce) { .hcar__down-lbl { animation:none; opacity:.7; } }
.hcar__down-rail { display:none; }
.hcar__down-rail i {
  display:block; font-style:normal; font-size:12px; line-height:1; opacity:.5;
  animation:sb-chev-d 2.2s ease-in-out infinite;
}
.hcar__down-rail i + i { margin-top:-6px; }
.hcar__down-rail i:nth-child(2) { animation-delay:.16s; }
.hcar__down-rail i:nth-child(3) { animation-delay:.32s; }
@keyframes sb-chev-d { 0%,100% { transform:translateY(0); opacity:.35; } 50% { transform:translateY(4px); opacity:.85; } }
@media (prefers-reduced-motion:reduce) { .hcar__down-rail { animation:none; } }

/* a panel with no photograph of its own stands on a brand field */
.hcar__panel--field .hcar__veil { background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.3) 100%); }

@media (max-height:640px) {
  .hcar__copy { bottom:clamp(84px,11vh,116px); gap:10px; }
  .hcar__t { font-size:clamp(26px,4.6vw,54px); line-height:.98; }
  .hcar__d { font-size:14px; line-height:1.45; max-width:44ch; }
}
@media (max-height:470px) {
  .hcar__copy { bottom:72px; gap:8px; }
  .hcar__t { font-size:clamp(22px,3.6vw,38px); }
  .hcar__d { display:none; }
}
@media (hover:none), (pointer:coarse) {
  .hcar__go:hover .hcar__disc { transform:none; }
  .hcar__down:hover { opacity:1; }
}

/* ── stories: a panel that is playing hands the frame to the film ──── */
.hcar__panel[data-story] video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.hcar__panel[data-story] .hcar__veil { transition:opacity .6s ease; }
.hcar__panel.is-playing .hcar__veil { opacity:0; }
.hcar__panel[data-story] .hcar__copy { transition:opacity .5s ease; }
.hcar__panel[data-story] .hcar__copy { transition:opacity .45s ease, transform .45s ease; }
.hcar__panel.is-playing .hcar__copy { opacity:0 !important; pointer-events:none; transform:translateY(-8px) !important; }

/* the control sits on the panel, not in the copy, so it can glide to the foot of
   the frame while the film runs — the same move the home makes */
.hcar__play-row {
  position:absolute; z-index:7; left:max(clamp(16px,3vw,40px), 50% - 700px + clamp(16px,3vw,40px));
  bottom:clamp(120px,14vw,190px); display:inline-flex; align-items:center; gap:11px;
}
/* on a story panel the copy sits above its control */
.hcar__panel[data-story] .hcar__copy { bottom:calc(clamp(120px,14vw,190px) + 60px); }
.hcar__play-row {
  padding:0; border:0; background:none; color:#fff; cursor:pointer; font:inherit;
  transition:transform 1s cubic-bezier(.19,1,.22,1), opacity .3s ease;
}
.hcar__play-row:hover { opacity:.72; }
.hcar__panel.is-playing .hcar__play-row { transform:translateY(var(--sb-park, 0px)); }
/* the written piece owns the frame: the control steps aside rather than sit on it */
.hcar__panel.is-ended .hcar__play-row { opacity:0; pointer-events:none; }
@media (max-height:640px) {
  .hcar__play-row { bottom:clamp(84px,11vh,116px); }
  .hcar__panel[data-story] .hcar__copy { bottom:calc(clamp(84px,11vh,116px) + 56px); }
}
@media (hover:none), (pointer:coarse) { .hcar__play-row:hover { opacity:1; } }
/* the pager's own chrome steps aside while a film runs */
.hcar.is-story .hcar__rail, .hcar.is-story .hcar__cue { opacity:0; pointer-events:none; }
.hcar__ring {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.6);
  background:rgba(0,0,0,.22); backdrop-filter:blur(6px); font-size:14px; padding-left:3px;
  transition:background .35s ease;
}
.hcar__go:hover .hcar__ring { background:rgba(0,0,0,.4); }
.hcar__ring.hcar__ring--off {
  border-color:rgba(255,255,255,.6); background:rgba(20,14,10,.3); backdrop-filter:blur(3px);
}

/* the written piece that follows the film */
.hcar__end {
  position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
  padding:clamp(74px,10vh,120px) clamp(20px,5vw,48px); background:#000; color:#fff; overflow:auto;
}
.hcar__end[hidden] { display:none; }
.hcar__end-in { display:grid; gap:clamp(14px,1.8vw,22px); width:min(560px,100%); }
.hcar__end-brow { margin:0; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--peach); }
.hcar__end-p { margin:0; font-size:clamp(14px,1.05vw,16px); line-height:1.7; opacity:.78; text-wrap:pretty; }
.hcar__replay {
  justify-self:start; margin-top:6px; display:inline-flex; align-items:center; gap:12px;
  padding:0; border:0; background:none; color:#fff; cursor:pointer; font:inherit; opacity:.72;
  transition:opacity .3s ease;
}
.hcar__replay:hover { opacity:1; }
.hcar__replay span:first-child {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,.5);
}
@media (hover:none), (pointer:coarse) {
  .hcar__go:hover .hcar__ring { background:rgba(0,0,0,.22); }
  .hcar__replay:hover { opacity:.72; }
}

/* ── person page: one fixed photograph, the copy centred over it ─────── */
.person { position:relative; min-height:100svh; overflow:hidden; background:var(--ink); color:#fff; }
.person__bg {
  position:fixed; inset:0 0 auto; z-index:0;
  width:100%; height:100svh; object-fit:cover; display:block;
}
.person__veil {
  position:fixed; inset:0 0 auto; height:100svh; z-index:1;
  background:linear-gradient(180deg,rgba(24,18,14,.55) 0%,rgba(24,18,14,.36) 45%,rgba(24,18,14,.72) 100%);
}
.person__in {
  position:relative; z-index:2; min-height:100svh;
  display:grid; place-items:center; text-align:center;
  padding:clamp(120px,16vh,190px) clamp(20px,5vw,56px) clamp(80px,10vh,130px);
}
.person__copy { display:grid; justify-items:center; gap:clamp(16px,2vw,26px); max-width:60ch; }
.person__role { margin:0; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--peach); }
.person__name {
  margin:0; font-weight:800; font-size:clamp(34px,6vw,92px);
  line-height:.94; letter-spacing:-.042em;
}
.person__lede { margin:0; font-size:clamp(16px,1.5vw,22px); line-height:1.55; opacity:.9; text-wrap:pretty; }
.person__body { margin:0; font-size:clamp(14px,1.15vw,18px); line-height:1.7; opacity:.82; text-wrap:pretty; }
.person__acts { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:clamp(6px,1vw,12px); }
@media (max-width:559px) {
  .person__in { padding:clamp(104px,14vh,150px) 20px 72px; }
  .person__copy { gap:14px; }
}

/* the way back is a plain link with its mark, not a second capsule */
.person__back {
  display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:#fff;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  transition:opacity .35s ease;
}
.person__back:hover { opacity:.62; }

/* while a URL-anchored landing settles, the panels stay out of sight */
.is-jump .hcar__track, .is-jump .hcar__rail, .is-jump .hcar__cue { visibility:hidden; }

/* unveiled portraits: the copy and the rail carry their own shadow instead */

/* ── cross-links: a compact way out for a reader who landed sideways ─── */
.xlinks { display:grid; gap:0; width:100%; }
@media (min-width:1180px) { .xlinks { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(24px,3vw,56px); } }
.xlink {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:clamp(14px,1.5vw,19px) 0; border-top:1px solid var(--hair);
  text-decoration:none; color:inherit;
  transition:opacity .3s ease;
}
.xlink:last-child { border-bottom:1px solid var(--hair); }
@media (min-width:1180px) {
  .xlinks > .xlink:nth-last-child(2):nth-child(odd) { border-bottom:1px solid var(--hair); }
}
.xlink:hover { opacity:.6; }
.xlink__t {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:700; font-size:clamp(15px,1.3vw,19px); letter-spacing:-.02em;
}
.xlink__go { flex:0 0 auto; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--graphite); }
.xlink--off { cursor:default; }
.xlink--off:hover { opacity:1; }
.xlink--off .xlink__t { color:rgba(52,40,33,.6); }

/* section surfaces and the card row: needed on the first paint, so they sit
   above the cut — below it the row stacks and the surface is missing until the
   full sheet lands */
.pg--rule { background:var(--surface); }
.pg--rule:nth-of-type(even) { background:none; }
.pg--rule.pg--flat { background:none; }
.pg--rule.pg--surface { background:var(--surface); }

.cards { display:grid; gap:clamp(20px,2.4vw,40px) clamp(20px,2.6vw,48px); grid-template-columns:minmax(0,1fr); }
@media (min-width:680px) {
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* a row of three or five fills the width rather than leaving one card alone */
  .cards:has(> :last-child:nth-child(3)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1040px) {
  .cards { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .cards:has(> :last-child:nth-child(3)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cards:has(> :last-child:nth-child(5)) { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

.sheet figure a, .sheet figure a:hover { text-decoration:none; }

/* the collection explains itself only if asked — and when asked, it takes the
   frame: the panel dims and the answer stands alone, so nothing overlaps */
.story-what {
  position:fixed; z-index:7; left:clamp(16px,3vw,40px); top:92px;
  max-width:min(46ch,60vw); color:#fff;
}
.hcar.is-story .story-what { opacity:0 !important; pointer-events:none !important; transition:opacity .3s ease; }
html.is-story .hcar__cue, .hcar.is-story .hcar__cue { opacity:0 !important; pointer-events:none !important; transition:opacity .3s ease; }
.story-what > summary {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; opacity:.62; transition:opacity .3s ease;
}
.story-what > summary::-webkit-details-marker { display:none; }
.story-what > summary::after {
  content:''; display:block; flex:0 0 auto; width:20px; height:20px;
  border:1px solid currentColor; border-radius:999px; opacity:.85;
  background-image:
    linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor);
  background-size:9px 1px, 1px 9px;
  background-position:center, center;
  background-repeat:no-repeat;
  transition:background-size .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.story-what[open] > summary::after { background-size:9px 1px, 0 0; }
.story-what > summary:hover { opacity:1; }

/* open: a scrim over the whole frame, the answer centred on it */
html.is-what-open .hcar__cue,
html.is-what-open .hcar__rail { opacity:0 !important; pointer-events:none !important; }
.story-what > .what__scrim { display:none; }
.story-what[open] > .what__scrim {
  display:block; position:fixed; inset:0; z-index:-1; border:0; padding:0;
  background:rgba(12,9,7,.88); backdrop-filter:blur(10px); cursor:pointer;
  animation:sb-what-in .35s ease both;
}
.story-what .what__body { display:none; }
.story-what[open] .what__body {
  position:fixed; z-index:1; display:grid; gap:1.1em;
  left:clamp(16px,3vw,40px); right:clamp(16px,3vw,40px);
  top:50%; transform:translateY(-50%);
  margin:0 auto; max-width:64ch;
  animation:sb-what-in .45s cubic-bezier(.16,1,.3,1) both;
}
.story-what[open] .what__body p:first-child {
  color:rgba(255,255,255,.92);
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.5;
}
.story-what[open] .what__body p {
  margin:0; font-size:clamp(13px,1.05vw,16px); line-height:1.65; text-align:center;
  color:rgba(255,255,255,.7); text-wrap:pretty;
}
@keyframes sb-what-in { from { opacity:0; } to { opacity:1; } }
@media (max-width:559px) {
    .story-what[open] .what__body p { font-size:14px; line-height:1.6; }
}
@media (hover:none), (pointer:coarse) { .story-what > summary:hover { opacity:.62; } }

/* nothing is typeset until Manrope has arrived, so no face is ever swapped */
html.fonts-pending body { visibility:hidden; }

/* the scroll-lit paragraphs stay out of sight until the real face has loaded and
   the words have been wrapped, so nothing is painted twice */
.lit-wait .pg .body, .lit-wait .stack--copy .body { visibility:hidden; }

/* an episode not out yet: the control names itself but stays dimmed, and the date
   sits above it as plain information rather than inside the button */
.hcar__play { opacity:.5; }
.hcar__lbl--off { font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }

/* the enquiry call sits on the poster as a filled peach pill */
.pill--peach {
  background:var(--peach) !important; color:var(--ink) !important;
  box-shadow:none !important;
}
.pill--peach:hover { background:#E7B99C !important; color:var(--ink) !important; }
@media (hover:none), (pointer:coarse) { .pill--peach:hover { background:var(--peach) !important; } }

/* the qualifier that leads into a speciality's name reads a step quieter */
.pstr__lead { font-size:.38em; font-weight:400; letter-spacing:-.01em; }

/* text holds until the real face has loaded, so nothing is drawn twice */
.font-wait body { visibility:hidden; }

/* groups arrive whole: the contact sheet and the room mosaic are single objects,
   so no figure inside them may reveal on its own — and the group is always visible */
.has-motion .rooms, .has-motion .sheet,
.has-motion .rooms figure, .has-motion .sheet figure,
.has-motion .rooms figure img, .has-motion .sheet figure img {
  opacity:1 !important;
  transform:none !important;
  transition-delay:0s !important;
}

/* speciality poster on a phone: the crop walks left */
@media (max-width:559px) {
  .poster--art > img { object-position:32% 42% !important; }
}

/* the poster headline waits for the face before it moves */
.font-wait .poster .ln > span { animation:none !important; transition:none !important; }

/* the person page's portrait is fixed: the footer rides above it, edge to edge */
.is-person .foot {
  position:relative; z-index:3; border-radius:0; margin-bottom:0;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
}
.is-person .person__bg { z-index:0; }
.is-person .person__veil { z-index:1; }

/* the WhatsApp bubble stays out of the way until the enquiry form is on screen */
.wa { display:none !important; }
@media (max-width:759px) {
  /* the form already offers WhatsApp: the floating call steps aside there */
  html.wa-on .wa { display:none !important; }
}

/* on a phone the cue steps left, clear of the WhatsApp call */
@media (max-width:759px) {
  .hcar__cue { justify-content:flex-start; padding-left:clamp(16px,4vw,32px); padding-right:clamp(150px,44vw,220px); }
}

/* the cue steps aside while a film runs */
.is-story .hcar__cue, .is-story [data-hcar-cue], .is-story [data-hcar-down] {
  pointer-events:none !important;
}

/* @endcritical — everything below loads with the full sheet */

/* ── service page layout ────────────────────────────── */
.svc-hero {
  position:relative; min-height:78svh; display:flex; align-items:flex-end;
  background:var(--ink); color:var(--cream); overflow:hidden;
}
.svc-hero__media { position:absolute; inset:0; }
.svc-hero__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.svc-hero__veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,22,18,.62) 0%,rgba(28,22,18,.38) 45%,rgba(28,22,18,.86) 100%); }
.svc-hero__inner { position:relative; z-index:1; display:grid; gap:clamp(14px,1.8vw,22px); padding-top:clamp(140px,18vh,220px); padding-bottom:clamp(48px,7vh,96px); }

.section { padding:clamp(64px,10vh,140px) 0; }
.section--paper { background:var(--paper); }
.section--ink { background:var(--ink); color:var(--cream); }

.editorial { display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:minmax(0,1fr); }
@media (min-width:900px) { .editorial { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; } }
.editorial__copy { display:grid; gap:clamp(16px,1.8vw,24px); }

.figure { margin:0; }
.figure img { display:block; width:100%; height:auto; }
.figure figcaption { margin-top:14px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.5; }

/* ── two-up image slider (service pages) ────────────── */
.gal__stage { position:relative; aspect-ratio:16/9; overflow:hidden; background:rgba(52,40,33,.06); }
.gal__img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
.gal__img.is-on { opacity:1; }
.gal__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:0; border-radius:999px; background:rgba(252,250,246,.82); color:var(--ink);
  font-size:20px; line-height:1; cursor:pointer;
  transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.gal__nav:hover { background:var(--cream); color:var(--accent); transform:translateY(-50%) scale(1.12); }
.gal__nav--prev { left:12px; }
.gal__nav--next { right:12px; }
.gal__foot { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.gal__dots { display:flex; align-items:center; gap:7px; margin-top:14px; }
.gal__dot {
  width:6px; height:6px; padding:0; border:0; border-radius:999px;
  /* an unstyled button picks up the platform accent on iOS, hence the reset */
  -webkit-appearance:none; appearance:none;
  background:var(--accent); -webkit-tap-highlight-color:transparent;
  opacity:.28; cursor:pointer; transition:opacity .3s ease;
}
.gal__dot.is-on { opacity:1; }

/* ── enquiry form (service pages) ───────────────────── */
.form { display:grid; gap:clamp(14px,1.8vw,20px); width:100%; max-width:640px; }
.form__grid { display:grid; gap:clamp(14px,1.8vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
html { scroll-padding-top:clamp(96px,13vh,140px); }
.field { display:grid; gap:8px; scroll-margin-top:clamp(96px,13vh,140px); }
.field__label { font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.6; }
.field__opt { letter-spacing:.14em; text-transform:none; opacity:.7; }
.field__input {
  width:100%; padding:13px 0; border:0; border-bottom:1px solid rgba(255,255,255,.28);
  background:none; color:inherit; font:inherit; font-size:16px; border-radius:0;
  -webkit-appearance:none; appearance:none; transition:border-color .3s ease;
}
.field__input:focus { outline:none; border-bottom-color:#fff; }
.field__input--area { resize:vertical; min-height:64px; line-height:1.5; }
.field__input[aria-invalid="true"] { border-bottom-color:var(--peach); }
.btn--solid {
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px; border:0; border-radius:999px;
  background:var(--cream); color:var(--ink);
  font:inherit; cursor:pointer; transition:background .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.btn--solid:hover { background:#fff; transform:translateY(-2px); }
.btn--solid .btn__label { font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }

.btn--ghost {
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; border:1px solid rgba(255,255,255,.34); border-radius:999px;
  background:none; color:inherit; text-decoration:none;
  font:inherit; cursor:pointer; transition:border-color .3s ease, background .3s ease;
}
.btn--ghost:hover { opacity:1; border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.06); }
.btn--ghost .btn__label { font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }
.form__or { font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.45; }

.form__foot { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px,1.6vw,18px); margin-top:8px; }
.form__note { margin:0; min-height:1.2em; font-size:12px; letter-spacing:.06em; opacity:.75; }

.cta { display:grid; gap:clamp(18px,2.4vw,30px); justify-items:start; }
.cta__row { display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,26px); align-items:center; }

/* ── numbered steps ─────────────────────────────────── */
.steps { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.step { display:grid; gap:8px; grid-template-columns:minmax(0,1fr); padding:clamp(20px,2.6vw,30px) 0; border-top:1px solid rgba(52,40,33,.16); }
@media (min-width:760px) { .step { grid-template-columns:64px minmax(0,1fr); gap:clamp(18px,2.4vw,34px); align-items:baseline; } }
.step:last-child { border-bottom:1px solid rgba(52,40,33,.16); }
.step__num { font-size:10px; letter-spacing:.24em; color:var(--accent); }
.step__body { display:grid; gap:8px; }

/* ── team strip ─────────────────────────────────────── */
.faces { display:grid; gap:clamp(10px,1.4vw,18px); grid-template-columns:repeat(auto-fit,minmax(clamp(72px,8vw,104px),1fr)); }
.face { margin:0; }
.face img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 50%; }
.face figcaption { margin-top:8px; font-size:10px; letter-spacing:.1em; opacity:.6; line-height:1.4; }

/* ── FAQ ────────────────────────────────────────────── */
.faq { display:grid; }
.faq__item { border-top:1px solid rgba(52,40,33,.16); }
.faq__item:last-child { border-bottom:1px solid rgba(52,40,33,.16); }
.faq__item summary {
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:clamp(18px,2.2vw,26px) 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:clamp(19px,1.9vw,28px); line-height:1.25; letter-spacing:-.012em;
}
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:'+'; font-family:var(--sans); font-size:20px; line-height:1; opacity:.5; transition:transform .35s cubic-bezier(.22,1,.36,1); flex:0 0 auto; }
.faq__item[open] summary::after { transform:rotate(45deg); }
.faq__answer { margin:0 0 clamp(20px,2.4vw,28px); font-size:clamp(14px,1.15vw,18px); line-height:1.7; max-width:62ch; opacity:.8; text-wrap:pretty; }

.related { display:grid; gap:0; }
.related__item {
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:clamp(18px,2.2vw,26px) 0;
  border-top:1px solid rgba(52,40,33,.16);
  color:inherit; text-decoration:none;
  transition:padding-left .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.related__item:last-child { border-bottom:1px solid rgba(52,40,33,.16); }
.related__item:hover { padding-left:12px; opacity:1; }
.related__name { font-family:var(--serif); font-size:clamp(22px,2.6vw,38px); line-height:1.15; letter-spacing:-.012em; }
.related__go { font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.5; white-space:nowrap; }

/* ── WhatsApp bubble ────────────────────────────────── */
.wa {
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:300;
  width:52px; height:52px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; border:1px solid #25D366; color:#fff;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.wa:hover { transform:translateY(-3px); opacity:1; }

/* CERRAR + cross, where the site's menu control sits */

/* the rail: pill buttons, not a progress line */
/* the names run down the right edge, each with its own mark */
@media (max-width:559px) {
}

@media (hover:none), (pointer:coarse) {
}

.wa { z-index:420; transition:transform .5s cubic-bezier(.22,1,.36,1); }
/* the carousel owns the screen: the bubble steps aside */

/* ── footer ─────────────────────────────────────────── */
.foot { background:var(--ink); color:var(--cream); }
.foot__inner { padding-top:clamp(84px,9vw,110px); padding-bottom:clamp(28px,3.4vw,44px); display:flex; flex-direction:column; gap:clamp(30px,4vw,56px); }
@media (max-width:759px) {
  .foot__inner { padding-top:44px; padding-bottom:20px; gap:22px; }
  .foot__base { margin-top:20px; padding-top:22px; }
  .foot__mark { display:none; }
  .foot__eyebrow { font-size:10px; }
  .foot__small { font-size:10px; }
}
.foot__cols { display:grid; gap:clamp(20px,3vw,44px); grid-template-columns:repeat(auto-fit,minmax(min(190px,45%),1fr)); }
.foot__col { display:grid; gap:14px; align-content:start; }
.foot__col--seal { gap:12px; justify-items:start; }
.foot__eyebrow { margin:0; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--peach); font-weight:600; }
.foot__big { font-family:var(--serif); font-weight:300; font-size:clamp(16px,1.3vw,20px); line-height:1.35; letter-spacing:-.008em; margin:0; text-decoration:none; color:inherit; opacity:.9; }
.foot__small { margin:0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.5; text-decoration:none; color:inherit; }
.foot__note { margin:0; font-size:11px; line-height:1.6; letter-spacing:.04em; opacity:.5; max-width:30ch; }
@media (max-width:900px) { .foot__big { font-size:14px; } }
.foot__mark { position:relative; width:100%; overflow:hidden; }
.foot__mark img { aspect-ratio:220/25; display:block; width:100%; height:auto; max-height:clamp(34px,7vh,84px); object-fit:contain; object-position:left center; opacity:.16; }
.foot__base { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding-top:clamp(14px,1.8vw,22px); padding-right:clamp(64px,8vw,84px); border-top:1px solid rgba(252,250,246,.14); }
.foot__base p { margin:0; font-size:10px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.foot__legal { display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,26px); }
.foot__legal a { font-size:10px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:inherit; opacity:.45; }
.cg { display:inline-flex; align-items:center; gap:5px; vertical-align:-2px; color:var(--peach); text-decoration:none; white-space:nowrap; }
.cg__mark { display:block; width:12px; height:12px; flex:0 0 auto; background:var(--peach); -webkit-mask:url('../uploads/chameleon-logo-peach.png') center/contain no-repeat; mask:url('../uploads/chameleon-logo-peach.png') center/contain no-repeat; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition-duration:.01ms !important; }
}

/* ── full-bleed image band with a quiet annotation ──── */
.band { position:relative; overflow:hidden; background:var(--ink); }
.band img { display:block; width:100%; height:100%; object-fit:cover; }
.band--tall { height:clamp(340px,68svh,760px); }
.band--tall img { position:absolute; inset:0; }
.band__veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(24,18,14,0) 38%,rgba(24,18,14,.72) 100%); }
.band__note {
  position:absolute; left:var(--edge); right:var(--edge); bottom:clamp(24px,4vh,48px);
  display:grid; gap:clamp(10px,1.4vw,18px); color:var(--cream); max-width:34ch;
}

/* ── asymmetric editorial split ─────────────────────── */
.split { display:grid; gap:clamp(28px,4vw,72px); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:900px) { .split { grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); } }
.split--even { grid-template-columns:minmax(0,1fr); }
@media (min-width:900px) { .split--even { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.stack { display:grid; gap:clamp(14px,1.8vw,26px); justify-items:start; align-content:start; }
.stack--copy { gap:clamp(16px,1.6vw,22px); }

/* ── card grid: sharp corners, one chromatic rupture ── */.card {
  display:grid; gap:12px; align-content:start;
  padding:clamp(20px,2vw,28px); border-radius:0; text-decoration:none; color:inherit;
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:box-shadow .35s ease, background .35s ease;
}
.card:hover { opacity:1; box-shadow:inset 0 0 0 1px var(--ink); }
.card__n { font-size:11px; font-weight:400; letter-spacing:.16em; color:var(--graphite); }
.card__t { margin:0; font-family:var(--serif); font-weight:300; font-size:clamp(20px,1.9vw,27px); line-height:1.14; letter-spacing:-.022em; }
.card__d { margin:0; font-size:13px; font-weight:400; line-height:1.55; color:var(--graphite); }
.card__go { margin-top:4px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--graphite); }
/* the system's single colour rupture — never more than one per row */
.card--tint { background:var(--peach); box-shadow:none; }
.card--tint .card__n, .card--tint .card__d, .card--tint .card__go { color:rgba(52,40,33,.8); }
.card--tint:hover { box-shadow:inset 0 0 0 1px var(--ink); }

/* ── full-bleed portrait contact sheet ──────────────── */
.sheet { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; }
@media (min-width:900px) { .sheet { grid-template-columns:repeat(10,minmax(0,1fr)); } }
.sheet figure { margin:0; position:relative; }
.sheet img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.sheet figcaption { margin-top:9px; padding:0 clamp(4px,.6vw,8px); font-size:11px; font-weight:400; letter-spacing:.01em; color:var(--graphite); line-height:1.3; }

/* ── hairline lists (steps, faq, related) ───────────── */
.rows { display:grid; margin:0; padding:0; list-style:none; }
.row { border-top:1px solid var(--hair); }
.rows > .row:last-child { border-bottom:1px solid var(--hair); }
.row--step { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); padding:clamp(22px,2.8vw,40px) 0; }
@media (min-width:760px) { .row--step { grid-template-columns:clamp(56px,7vw,110px) minmax(0,1fr); gap:clamp(20px,3vw,48px); align-items:start; } }
.row__n { font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.6vw,40px); line-height:1; letter-spacing:-.03em; color:var(--accent); }
.row__b { display:grid; gap:10px; }
.row__b .body { font-size:clamp(14px,1.1vw,17px); line-height:1.65; color:var(--graphite); max-width:56ch; }
.pg--ink .row, .pg--ink .rows > .row:last-child { border-color:rgba(252,250,246,.18); }

/* ── quiet form on the inverted field ───────────────── */
.pg--ink .field__input { border-bottom-color:rgba(252,250,246,.32); }

@media (max-width:559px) {
  .sheet figcaption { font-size:10px; letter-spacing:0; }
}

/* ── inherited components, retuned for the poster model ─ */
.faq__item, .faq__item:last-child { border-color:var(--hair); }
.faq__item summary { font-weight:300; letter-spacing:-.024em; font-size:clamp(19px,1.9vw,29px); padding:clamp(20px,2.4vw,30px) 0; }
.faq__item summary::after { opacity:.4; }
.faq__answer { color:var(--graphite); opacity:1; font-size:clamp(14px,1.1vw,17px); }

.gal__stage { background:rgba(52,40,33,.05); }
.gal__nav {
  width:38px; height:38px; background:none; color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(252,250,246,.55);
  transition:box-shadow .35s ease;
}
.gal__nav:hover { background:none; box-shadow:inset 0 0 0 1px var(--cream); }
.gal__foot { align-items:baseline; }
.figure figcaption { margin-top:14px; font-size:11px; font-weight:400; letter-spacing:.02em; text-transform:none; color:var(--graphite); opacity:1; }

/* ── scroll reveals ─────────────────────────────────────
   Elements start displaced and settle once the observer marks them in.
   Only applied when .has-motion is present, so a JS failure shows
   everything as normal. */
.has-motion [data-rv] > * {
  opacity:0; transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.has-motion [data-rv].is-in > * { opacity:1; transform:translateY(0); }
/* handled by the word-lit pass, so it opts out of the group reveal */
.has-motion [data-rv] > .body { opacity:1; transform:none; transition:none; }
.has-motion [data-rv] > *:nth-child(2) { transition-delay:.07s; }
.has-motion [data-rv] > *:nth-child(3) { transition-delay:.14s; }
.has-motion [data-rv] > *:nth-child(4) { transition-delay:.21s; }
.has-motion [data-rv] > *:nth-child(5) { transition-delay:.28s; }
.has-motion [data-rv] > *:nth-child(6) { transition-delay:.35s; }

/* the hairline that opens each section draws itself from the left */
.has-motion .pg--rule > .bleed > .bleed__in,
.has-motion .pg--rule > .bleed__in { border-top-color:transparent; position:relative; }
.has-motion .pg--rule > .bleed > .bleed__in::before,
.has-motion .pg--rule > .bleed__in::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--hair); transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
.has-motion .pg--rule.is-in > .bleed > .bleed__in::before,
.has-motion .pg--rule.is-in > .bleed__in::before { transform:scaleX(1); }

/* a full-bleed photograph drifts as it passes */
.band img { will-change:transform; }
.has-motion .band--tall img { height:124%; top:-12%; }

/* the contact sheet arrives as one block */
.has-motion .sheet figure { overflow:hidden; }
.has-motion .sheet {
  opacity:0; transform:translateY(26px);
  transition:opacity 1.1s ease, transform 1.25s cubic-bezier(.16,1,.3,1);
}
.has-motion .sheet.is-in { opacity:1; transform:translateY(0); }
.has-motion .sheet img { transform:scale(1.06); transition:transform 1.5s cubic-bezier(.16,1,.3,1); }
.has-motion .sheet.is-in img { transform:scale(1); }
.has-motion .sheet figcaption { opacity:0; transition:opacity .7s ease; }
.has-motion .sheet.is-in figcaption { opacity:1; transition-delay:.5s; }

/* the gallery unmasks upward */
.has-motion .gal .gal__stage { clip-path:inset(100% 0 0 0); transition:clip-path 1.2s cubic-bezier(.16,1,.3,1); }
.has-motion .gal.is-in .gal__stage { clip-path:inset(0 0 0 0); }

/* hover life on the controls */
.pill { position:relative; overflow:hidden; }
.card { transition:box-shadow .35s ease, background .35s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.card:hover { transform:translateY(-4px); }
.card__t, .card__go { transition:transform .5s cubic-bezier(.16,1,.3,1); }
.card:hover .card__go { transform:translateX(6px); }
.row--step .row__n { transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .4s ease; }
.row--step:hover .row__n { transform:translateX(5px); }

@media (prefers-reduced-motion:reduce) {
  .has-motion [data-rv] > *,
  .has-motion .sheet, .has-motion .sheet img, .has-motion .sheet figcaption { opacity:1 !important; transform:none !important; }
  .has-motion .gal .gal__stage { clip-path:none !important; }
  .has-motion .band--tall img { height:100%; top:0; }
}

/* the unavailable service recedes: no outline, no hover, muted copy —
   the three live cards gain presence by contrast rather than by colour */
.card--off {
  background:var(--paper); color:rgba(52,40,33,.78);
  box-shadow:none; cursor:default;
}
.card--off:hover { transform:none; box-shadow:none; }
.card--off .card__t { color:rgba(52,40,33,.78); }
.card--off .card__n { color:rgba(52,40,33,.72); }
.card--off .card__d { color:rgba(52,40,33,.78); }
.card--off .card__go { color:rgba(52,40,33,.72); }

/* the three live services carry graduated warm tints from the palette */
.card--t1 { background:var(--peach); box-shadow:none; }
.card--t2 { background:var(--sage); box-shadow:none; }
.card--t3 { background:var(--blush); box-shadow:none; }
.card--t1 .card__n, .card--t1 .card__d, .card--t1 .card__go,
.card--t2 .card__n, .card--t2 .card__d, .card--t2 .card__go,
.card--t3 .card__n, .card--t3 .card__d, .card--t3 .card__go { color:rgba(52,40,33,.8); }
.card--t1:hover, .card--t2:hover, .card--t3:hover { box-shadow:inset 0 0 0 1px var(--ink); }

/* a portrait behaves like a control: it lifts slightly and takes focus */
.sheet figure > a img { transition:transform 1.5s cubic-bezier(.16,1,.3,1), opacity .8s ease, filter .4s ease; }
.sheet.is-in figure[data-team-open]:hover img { transition:transform .5s cubic-bezier(.16,1,.3,1); }
.sheet figure > a:hover img { transform:scale(1.04); }
.sheet figure > a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* the contact sheet inside a column: five across, so the faces stay readable */
.sheet.sheet--col { grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(6px,.7vw,10px); }
@media (max-width:559px) { .sheet.sheet--col { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sheet--col figcaption { margin-top:7px; font-size:10px; letter-spacing:0; line-height:1.25; }

/* ══ PRODUCT DIRECTION ═════════════════════════════════
   Same content and same body typeface. What changes is the register:
   a rounder, heavier display face; sections that sit on their own surface
   instead of being separated by hairlines; cards with radius and a little
   lift; tighter vertical rhythm; a symmetric grid. */

:root {
  --serif:'Manrope', system-ui, sans-serif;   /* display, now geometric and heavy */
  --gap-sec:clamp(44px,6vh,86px);
  --surface:#F1EBE3;                                    /* one step warmer than the canvas */
  --lift:0 1px 2px rgba(52,40,33,.05), 0 8px 24px -12px rgba(52,40,33,.16);
}

/* ── display type: rotund, tightly tracked ─────────── */
.pstr { font-weight:800; letter-spacing:-.048em; line-height:.88; }
/* one phrase per headline carries the accent — the idea, not the whole sentence */
.stmt em, .pstr em { font-style:normal; color:var(--accent); }
.stmt em.lead { color:inherit; }
.stmt em.mute { color:var(--accent); }
.pg--ink .stmt em { color:var(--accent); }
.stmt { font-weight:700; letter-spacing:-.035em; line-height:1; max-width:20ch; }
.stmt--wide { max-width:28ch; }
.sub  { font-weight:600; letter-spacing:-.025em; }
.card__t { font-weight:600; letter-spacing:-.024em; }
.row__n { font-weight:700; letter-spacing:-.03em; }
.faq__item summary { font-weight:600; letter-spacing:-.026em; }
.foot__big { font-weight:500; letter-spacing:-.015em; }

/* ── sections sit on surfaces, not between hairlines ─ */
.pg--rule > .bleed > .bleed__in,
.pg--rule > .bleed__in { border-top:0; padding-top:0; }
.has-motion .pg--rule > .bleed > .bleed__in::before,
.has-motion .pg--rule > .bleed__in::before { display:none; }
.pg + .pg { margin-top:clamp(12px,1.6vw,22px); }
.pg--rule, .pg--ink {
  margin-inline:var(--edge); width:auto;
  padding-inline:var(--edge);
  border-radius:clamp(14px,1.6vw,22px);
}
.pg--ink {
  margin-bottom:clamp(56px,8vw,120px);
  background:var(--peach); color:var(--ink);
}
.pg--ink .brow { color:rgba(52,40,33,.72); }
.pg--ink .body, .pg--ink .lede { color:rgba(52,40,33,.82); opacity:1; }
.pg--ink .field__label { color:rgba(52,40,33,.72); }
.pg--ink .field__input { color:var(--ink); border-bottom-color:rgba(52,40,33,.28); }
.pg--ink .field__input::placeholder { color:rgba(52,40,33,.6); }
.pg--ink .form__or, .pg--ink .form__note, .pg--ink .field__opt { color:rgba(52,40,33,.78); }
.pg--ink .pill { background:var(--ink); color:var(--cream); }
.pg--ink .pill--line { background:none; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(52,40,33,.3); }
.pg--ink .row { background:rgba(252,250,246,.5); box-shadow:none; }
.pg--rule > .bleed, .pg--ink > .bleed { padding-inline:0; }
/* full-bleed surfaces reach the spine with padding alone, applied outside the
   max-width box so the eye keeps one left edge at every viewport width */
.pg:not(.pg--rule):not(.pg--ink) { padding-inline:var(--spine); }
.pg:not(.pg--rule):not(.pg--ink) > .bleed__in { padding-inline:0; }

.poster + .pg { padding-top:clamp(44px,6vh,80px) !important; }

/* ── cards: radius and a little lift ───────────────── */
.card {
  border-radius:14px; box-shadow:var(--lift); background:var(--cream);
  padding:clamp(22px,2.2vw,30px);
}
.card:hover { box-shadow:0 2px 4px rgba(52,40,33,.06), 0 18px 40px -18px rgba(52,40,33,.28); transform:translateY(-3px); }
.card--off { background:rgba(52,40,33,.05); box-shadow:none; }
.card--off:hover { box-shadow:none; }
.card--tint { box-shadow:var(--lift); }

/* ── a symmetric grid instead of the asymmetric one ── */
@media (min-width:900px) {
  .split { grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.4vw,56px); }
}

/* ── steps become blocks, not hairline rows ────────── */
.rows { gap:10px; }
.row { border:0; background:var(--cream); border-radius:12px; box-shadow:var(--lift); }
.rows > .row:last-child { border:0; }
.row--step { padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,28px); }
.pg--ink .row { background:rgba(252,250,246,.06); box-shadow:none; }

/* ── FAQ becomes a stack of cards ──────────────────── */
.faq { display:grid; gap:10px; }
.faq__item, .faq__item:last-child {
  border:0; background:var(--cream); border-radius:12px; box-shadow:var(--lift);
  padding:0 clamp(18px,2vw,24px);
}
.faq__item summary { padding:clamp(16px,1.8vw,22px) 0; }

/* ── imagery gains radius, matching the cards ─────── */
.band { border-radius:clamp(16px,2vw,26px); }
/* the hero is inset by its margin and pads its copy like every other surface */
.sheet img { border-radius:10px; }
.sheet--col { gap:clamp(8px,.9vw,12px); }
.gal__stage { border-radius:14px; overflow:hidden; }

/* ── the inverted field becomes a contained panel ──── */
/* the inverted field also runs full-bleed, so its copy keeps the shared spine */

/* ── the footer: softened where it meets the page ──── */
.foot { border-radius:0; }

/* ── pills: unchanged geometry, heavier label ─────── */
.pill { font-family:var(--sans); }

/* ── the centre: an editorial mosaic of the rooms ─────── */
.rooms { display:grid; gap:clamp(10px,1.1vw,16px); grid-template-columns:repeat(6,minmax(0,1fr)); }
.rooms figure { margin:0; position:relative; overflow:hidden; border-radius:clamp(12px,1.4vw,20px); background:var(--paper); }
.rooms img { display:block; width:100%; height:100%; object-fit:cover; }
.rooms figure:nth-child(1) { grid-column:span 4; grid-row:1; aspect-ratio:16/9; }
.rooms figure:nth-child(2) { grid-column:span 2; grid-row:1; aspect-ratio:auto; }
.rooms figure:nth-child(3),
.rooms figure:nth-child(4) { grid-column:span 3; aspect-ratio:16/10; }
.rooms figure:nth-child(5) { grid-column:span 6; aspect-ratio:21/8; }
@media (max-width:760px) {
  .rooms { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .rooms figure { grid-row:auto !important; }
  .rooms figure:nth-child(1) { grid-column:span 2; aspect-ratio:16/10; }
  .rooms figure:nth-child(2) { grid-column:span 1; aspect-ratio:3/4 !important; }
  .rooms figure:nth-child(3) { grid-column:span 1; aspect-ratio:3/4; }
  .rooms figure:nth-child(4),
  .rooms figure:nth-child(5) { grid-column:span 2; aspect-ratio:16/9; }
}
/* the mosaic settles as one object, like the contact sheet */
.has-motion .rooms { opacity:0; transform:translateY(26px); transition:opacity 1.1s ease, transform 1.25s cubic-bezier(.16,1,.3,1); }
.has-motion .rooms.is-in { opacity:1; transform:translateY(0); }
.has-motion .rooms img { transform:scale(1.05); transition:transform 1.6s cubic-bezier(.16,1,.3,1); }
.has-motion .rooms.is-in img { transform:scale(1); }
@media (prefers-reduced-motion:reduce) {
  .has-motion .rooms, .has-motion .rooms img { opacity:1 !important; transform:none !important; }
}

/* ── full-page horizontal carousel ─────────────────────────────────────
   Servicios and Especialidades are pages now, but they keep the slide
.is-person .person__bg, .is-person .person__veil { z-index:0; }
.is-person .person__veil { z-index:1; }


/* iOS paints its own yellow on autofilled fields; clipping the background to the
   glyphs hides it without turning the field opaque */
.form input:-webkit-autofill, .form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus, .form input:-webkit-autofill:active,
.form textarea:-webkit-autofill {
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:currentColor !important;
  caret-color:currentColor;
  transition:background-color 9999s ease-in-out 0s !important;
}


/* poster-art-veil-hold: over cream the veil reads almost black, so it waits for the
   photograph rather than darkening the page before it */
.poster--art .veil { opacity:0; transition:opacity .5s ease; }
.poster--art.is-lit .veil { opacity:1; }


/* the opening copy and its veil arrive with the photograph: cream type over cream
   reads as a smudge, and the veil would darken a page with nothing in it yet */
.poster--art:not(.is-lit) .pstr,
.poster--art:not(.is-lit) .brow,
.poster--art:not(.is-lit) .poster__foot { visibility:hidden !important; }
.poster--art:not(.is-lit) .veil { opacity:0 !important; }
.poster--art:not(.is-lit) .ln > span { animation:none !important; }

/* the + / − marks: no tap flash and no text selection box around the glyph */
[data-catmore] { -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
[data-catmore]::selection { background:transparent; }
[data-catmore] *::selection { background:transparent; }

/* cream ink over photography: pure white reads cold against the warm rooms */
.hcar, .hcar__t, .hcar__pill { color:#FCFAF6; }
.poster--art.onart, .poster--art .pstr, .poster--art .poster__lede { color:#FCFAF6; }

.poster--art.onart, .poster--art .pstr, .poster--art .brow, .poster--art .poster__lede { color:#FCFAF6; }


/* the entries under a whole-set head sit further right: in use the set IS the
   way in — Equipo → carousel → each person — so the indent says what
   navigating already says. The dash travels with the name. */
[data-catsub] > a[data-catchild] { padding-left:calc(clamp(18px,2.4vw,34px) + clamp(15px,1.8vw,24px)) !important; }
[data-catsub] > a[data-catchild]::before { left:clamp(15px,1.8vw,24px); }