/* AJ Floral Design - shared stylesheet
   Extracted from index.html so every route shares one system. */

:root{
  --ground:#2A101B;
  --ground-2:#33141F;
  --ink:#FBF2EC;
  --dim:#B9949F;
  --rule:rgba(251,242,236,.16);
  --rule-soft:rgba(251,242,236,.08);
  --pad-t:env(safe-area-inset-top,0px);
  --pad-b:env(safe-area-inset-bottom,0px);
  --rail:186px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* `overflow-x: clip` on BOTH, not `hidden` on body alone. With no overflow set
   on html, body's value propagates up to the viewport and body itself stops
   clipping — so the hero's scale-in animation (1.14, briefly 1625px wide) was
   widening the document and scrolling the whole page ~49px sideways on load.
   `clip` cannot be escaped and creates no scroll container. */
html{scroll-behavior:smooth; overflow-x:clip}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid var(--ink); outline-offset:4px}

/* ---------- type primitives ---------- */
.label{
  font-family:var(--sans); font-size:11px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.micro{font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.serif{font-family:var(--serif); font-weight:300}
em.act{font-family:var(--serif); font-style:italic; font-weight:300}

/* ---------- draft marker ---------- */
.draft{
  position:fixed; z-index:120; right:12px; bottom:calc(12px + var(--pad-b));
  font-family:var(--sans); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); background:rgba(20,7,13,.82); border:1px solid var(--rule);
  padding:7px 11px; border-radius:2px; backdrop-filter:blur(8px); pointer-events:none;
}

/* ---------- language toggle ---------- */
.lang{
  position:fixed; z-index:120; top:calc(16px + var(--pad-t)); right:18px;
  display:flex; gap:2px; align-items:center;
}
.lang button{
  background:none; border:0; cursor:pointer; padding:5px 7px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); transition:color .3s ease;
}
.lang button[aria-pressed="true"]{color:var(--ink)}
.lang span{color:var(--rule); font-size:10px}

/* ---------- hero ---------- */
.hero{position:relative; height:88vh; min-height:520px; overflow:hidden}
.hero video,.hero img.poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(25,7,14,.58) 0%, rgba(25,7,14,.30) 38%, rgba(25,7,14,.74) 100%);
}
.hero-inner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(40px + var(--pad-t)) 20px 40px;
}
.wordmark{
  font-family:var(--serif); font-weight:300; line-height:.92;
  font-size:clamp(40px,8.4vw,104px); letter-spacing:-.015em; margin:0;
}
.wordmark .sub{
  display:block; font-family:var(--sans); font-size:clamp(9px,1.5vw,12px);
  letter-spacing:.42em; text-transform:uppercase; margin-top:20px; color:var(--ink); opacity:.88;
  text-wrap:balance; max-width:30ch; margin-inline:auto; line-height:1.9;
}
@media (max-width:620px){
  /* ch units ignore letter-spacing, so a 22ch cap plus .24em tracking broke
     this into four lines. Give it the full gutter and loosen the leading. */
  .wordmark .sub{letter-spacing:.16em; max-width:none; line-height:2.2; font-size:10px}
}
@media (max-width:400px){
  .wordmark .sub{letter-spacing:.12em; font-size:9.5px}
}
.scrollcue{position:absolute; bottom:calc(30px + var(--pad-b)); left:50%; transform:translateX(-50%); z-index:2}
.scrollcue .label{font-size:10px}

/* ---------- rail ---------- */
.rail{
  position:fixed; z-index:110; top:50%; transform:translateY(-50%); left:26px;
  display:flex; flex-direction:column; gap:11px; mix-blend-mode:difference;
}
.rail a{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); opacity:.55; transition:opacity .35s ease; position:relative; padding-left:0;
}
.rail a:hover{opacity:1}
.rail a.on{opacity:1}
.rail a.on::before{content:"— "; }
.rail .rail-cta{margin-top:8px; padding-top:11px; border-top:1px solid rgba(251,242,236,.3); opacity:.8}
.rail .rail-cta::before{content:none!important}
@media (max-width:900px){ .rail{display:none} }

/* ---------- mobile: menu + persistent actions ----------
   Her traffic is phones from TikTok. Contact must never be more than one tap away. */
.menu-btn{
  position:fixed; z-index:120; top:calc(12px + var(--pad-t)); left:14px;
  display:none; align-items:center; gap:8px;
  background:rgba(20,7,13,.6); backdrop-filter:blur(10px);
  border:1px solid var(--rule); border-radius:100px; cursor:pointer;
  padding:9px 15px; color:var(--ink);
  font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
}
.menu-btn .bars{display:inline-flex; flex-direction:column; gap:3px}
.menu-btn .bars i{display:block; width:13px; height:1px; background:currentColor}
.sheet{
  position:fixed; inset:0; z-index:130; background:rgba(21,8,14,.97);
  backdrop-filter:blur(6px); display:none; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:4px;
  padding:calc(40px + var(--pad-t)) 30px calc(40px + var(--pad-b));
}
.sheet[data-open="true"]{display:flex}
.sheet a{
  font-family:var(--serif); font-weight:300; font-size:clamp(28px,8vw,42px);
  letter-spacing:-.015em; padding:9px 0; line-height:1.1;
}
.sheet .close{
  position:absolute; top:calc(16px + var(--pad-t)); right:20px;
  background:none; border:0; color:var(--ink); cursor:pointer;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; padding:8px;
}
.actionbar{
  position:fixed; z-index:125; left:0; right:0; bottom:0; display:none;
  padding:10px 12px calc(10px + var(--pad-b));
  gap:8px; background:linear-gradient(180deg, rgba(25,8,15,0) 0%, rgba(25,8,15,.92) 34%);
}
.actionbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; border-radius:3px; border:1px solid var(--rule);
  font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(20,7,13,.72); backdrop-filter:blur(10px);
}
.actionbar a.primary{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.actionbar svg{width:16px; height:16px; flex:none}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .actionbar{display:flex}
  body{padding-bottom:64px}
  .draft{bottom:calc(74px + var(--pad-b))}
}

/* ---------- shell ----------
   Imagery runs edge to edge. The rail floats OVER it rather than reserving a
   column, which is the single thing that separates an editorial mosaic from a
   page with a sidebar — on the reference, almost nothing is framed or padded.
   Only text blocks get the rail-width inset, so words never sit under the nav. */
main{padding-left:0}
.bleed{width:100%}

.section-head,
.archive,
.services,
.contact,
.nextup{
  padding-inline:20px;
}
@media (min-width:901px){
  .section-head,
  .archive,
  .services,
  .contact,
  .nextup{
    padding-left:calc(var(--rail) + 24px);
    padding-right:56px;
  }
}
/* Left-aligned, not centred. With the rail occupying the left edge, centring
   inside the remaining box reads visibly off-axis; left-aligning also matches
   the reference, where labels sit in the rail and titles run over imagery. */
.section-head{
  padding-block:74px 30px; text-align:left;
}
.section-head p{margin-inline:0}
.section-head h2{
  font-family:var(--serif); font-weight:300; font-size:clamp(24px,3.6vw,38px);
  margin:10px 0 0; letter-spacing:-.01em; text-wrap:balance;
}
.section-head p{margin:14px auto 0; max-width:54ch; color:var(--dim); font-size:15.5px}

/* ---------- story mosaic (title across the seam) ---------- */
.story{position:relative; margin-top:6px}
.story .pair{display:grid; gap:6px}
@media (min-width:760px){
  .story .pair{grid-template-columns:var(--split,1fr 1fr)}
}
.story figure{margin:0; overflow:hidden; background:var(--ground-2)}
.story figure img{width:100%; height:100%; object-fit:cover}
@media (min-width:760px){
  /* mismatched heights are deliberate — the uneven seam is the rhythm */
  .story .pair{align-items:start}
}
/* the reference's two crops: 1.58:1 landscape against 0.79 portrait */
.ar-land{aspect-ratio:1.58/1}
.ar-port{aspect-ratio:0.79/1}
.ar-tall{aspect-ratio:3/4}
.ar-wide{aspect-ratio:2.1/1}

.seam{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5; text-align:center; width:min(88%,560px); pointer-events:none;
}
.seam h3{
  font-family:var(--serif); font-weight:300; font-style:normal;
  font-size:clamp(23px,3.5vw,40px); line-height:1.08; margin:0;
  letter-spacing:-.012em; text-wrap:balance;
  text-shadow:0 2px 28px rgba(20,6,12,.7), 0 1px 4px rgba(20,6,12,.5);
}
.seam .meta{
  display:block; margin-top:13px; font-family:var(--sans);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 1px 14px rgba(20,6,12,.8);
}
.seam .go{display:inline-block; margin-top:9px; font-family:var(--serif); font-style:italic; font-size:16px; pointer-events:auto}
.seam .go::after{content:""; display:block; height:1px; background:currentColor; opacity:.5; margin-top:2px}

/* ---------- interlude video ---------- */
.interlude{position:relative; margin-top:6px}
.interlude video,.interlude img{width:100%; aspect-ratio:21/9; object-fit:cover}
@media (max-width:700px){ .interlude video,.interlude img{aspect-ratio:4/3} }
.interlude .seam h3{font-size:clamp(21px,3vw,34px)}

/* ---------- archive ---------- */
.archive{padding-block:0 20px}
.arch-list{border-top:1px solid var(--rule); max-width:1000px; margin:0 auto}
.arch-row{
  display:grid; grid-template-columns:34px 1fr auto auto;
  gap:10px 18px; align-items:baseline;
  padding:17px 0; border-bottom:1px solid var(--rule-soft);
  transition:padding-left .4s cubic-bezier(.2,.7,.3,1);
}
.arch-row:hover{padding-left:10px}
.arch-row .n{font-family:var(--sans); font-size:11px; letter-spacing:.1em; color:var(--dim)}
.arch-row .t{font-family:var(--serif); font-weight:300; font-size:clamp(17px,2.1vw,23px); letter-spacing:-.008em}
.arch-row .loc{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.arch-row .cnt{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); white-space:nowrap}
@media (max-width:660px){
  .arch-row{grid-template-columns:28px 1fr; }
  .arch-row .loc,.arch-row .cnt{grid-column:2; font-size:10px}
  .arch-row .cnt{margin-top:-6px}
}

/* ---------- studio ---------- */
.studio{
  display:grid; gap:0; margin-top:70px;
}
@media (min-width:860px){ .studio{grid-template-columns:1fr 1fr; align-items:stretch} }
.studio figure{margin:0; overflow:hidden}
.studio figure img{width:100%; height:100%; object-fit:cover; min-height:340px}
.studio .txt{padding:56px 20px; display:flex; flex-direction:column; justify-content:center}
@media (min-width:860px){ .studio .txt{padding:72px 56px} }
.studio h2{font-family:var(--serif); font-weight:300; font-size:clamp(26px,3.4vw,40px); margin:16px 0 0; letter-spacing:-.012em}
.studio p{font-size:16.5px; line-height:1.65; margin:20px 0 0; max-width:48ch; color:#EBD9DE}
.studio p.first::first-letter{
  font-family:var(--serif); font-size:3.1em; float:left; line-height:.86;
  margin:.06em .1em 0 0; font-weight:300;
}

/* ---------- services ---------- */
.services{padding-block:78px 10px}
.svc-grid{
  max-width:1000px; margin:26px 0 0;
  display:grid; gap:0; border-top:1px solid var(--rule);
}
@media (min-width:700px){ .svc-grid{grid-template-columns:1fr 1fr} }
.svc{padding:22px 0 20px; border-bottom:1px solid var(--rule-soft)}
@media (min-width:700px){
  .svc:nth-child(odd){padding-right:34px; border-right:1px solid var(--rule-soft)}
  .svc:nth-child(even){padding-left:34px}
}
.svc h4{font-family:var(--serif); font-weight:300; font-size:20px; margin:8px 0 0; letter-spacing:-.005em}
.svc p{margin:7px 0 0; color:var(--dim); font-size:14.5px; line-height:1.5}
.svc .from{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink); margin-top:9px; display:block}

/* ---------- contact ---------- */
.contact{padding-block:92px 70px; text-align:left}
.contact .booking{margin-inline:0}
.contact .lines{margin-inline:0}
.contact .booking{
  font-family:var(--serif); font-weight:300; font-size:clamp(21px,3.2vw,33px);
  line-height:1.3; max-width:22ch; margin:16px 0 0; text-wrap:balance; letter-spacing:-.01em;
}
.contact .lines{
  margin:46px 0 0; max-width:640px; display:grid; gap:0; text-align:left;
  border-top:1px solid var(--rule);
}
.cline{display:grid; grid-template-columns:104px 1fr; gap:16px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--rule-soft)}
.cline .k{font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.cline .v{font-family:var(--serif); font-weight:300; font-size:18px}
.cline .v a{border-bottom:1px solid var(--rule); padding-bottom:2px; transition:border-color .3s}
.cline .v a:hover{border-bottom-color:var(--ink)}
@media (max-width:520px){ .cline{grid-template-columns:1fr; gap:3px} .cline .v{font-size:17px} }

footer{padding:40px 20px calc(46px + var(--pad-b)); text-align:center; border-top:1px solid var(--rule-soft); margin-top:30px}
footer .micro{display:block; line-height:2}

/* ---------- reveal ----------
   Content is never hidden: the page reads correctly with JS off, mid-load,
   or in a thumbnail. Only a small vertical offset animates away. */
.js .rv{transform:translateY(14px); transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{transform:none}
@media (prefers-reduced-motion:reduce){ .js .rv{transform:none} }

/* ---------- scroll progress ---------- */
.progress{
  position:fixed; z-index:140; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,#E8447A,#E2A33C);
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
}
@supports (animation-timeline: scroll()){
  .progress.css-driven{
    animation:progress-grow linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes progress-grow{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@media (prefers-reduced-motion:reduce){ .progress{display:none} }

/* ---------- hero media wrapper (scaled by the intro timeline) ---------- */
.hero-media{position:absolute; inset:0; overflow:hidden; will-change:transform}
.hero-media video,.hero-media img{width:100%; height:100%; object-fit:cover}
.wordmark-line{display:block; overflow:hidden; padding-bottom:.06em}

/* ---------- crossfade galleries ----------
   Frames stack and dissolve. The figure is the click target for the lightbox. */
figure.is-gallery{position:relative; cursor:pointer}
figure.is-gallery .layer{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.5s cubic-bezier(.4,0,.2,1);
}
figure.is-gallery .layer.on{opacity:1}
figure.is-gallery::after{
  content:attr(data-count) " \2609"; position:absolute; right:12px; bottom:11px;
  font-family:var(--sans); font-size:9.5px; letter-spacing:.16em; color:var(--ink);
  background:rgba(20,7,13,.55); backdrop-filter:blur(6px);
  padding:5px 9px; border-radius:100px; opacity:0; transition:opacity .45s ease;
  pointer-events:none; z-index:3;
}
figure.is-gallery:hover::after,figure.is-gallery:focus-visible::after{opacity:.92}
figure.is-gallery:focus-visible{outline:1px solid var(--ink); outline-offset:-3px}
@media (prefers-reduced-motion:reduce){ figure.is-gallery .layer{transition:none} }

/* ---------- lightbox ---------- */
body.lb-open{overflow:hidden}
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(14,5,10,.97);
  backdrop-filter:blur(14px); opacity:0; transition:opacity .42s ease;
  display:grid; place-items:center;
  padding:calc(58px + var(--pad-t)) 16px calc(70px + var(--pad-b));
  pointer-events:none;
}
/* An author-origin display:grid beats the UA sheet's [hidden]{display:none},
   so without this the closed overlay stays laid out and eats every tap on
   the page. Specificity (0,2,0) here wins over .lightbox (0,1,0). */
.lightbox[hidden]{display:none}
.lightbox.on{opacity:1; pointer-events:auto}
.lb-stage{position:relative; width:100%; height:100%; display:grid; place-items:center}
.lb-img{
  grid-area:1/1; max-width:100%; max-height:100%; object-fit:contain;
  opacity:1; transform:scale(1);
  transition:opacity .85s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.16,1,.3,1);
  box-shadow:0 30px 90px -30px rgba(0,0,0,.8);
}
.lb-img.entering{opacity:0; transform:scale(1.045)}
.lb-img.leaving{opacity:0; transform:scale(.985)}
.lb-close,.lb-nav{
  position:absolute; z-index:3; background:rgba(251,242,236,.07); color:var(--ink);
  border:1px solid var(--rule); cursor:pointer; border-radius:100px;
  width:46px; height:46px; display:grid; place-items:center; font-size:17px;
  transition:background .3s ease, transform .3s ease;
}
.lb-close:hover,.lb-nav:hover{background:rgba(251,242,236,.16); transform:scale(1.06)}
.lb-close{top:calc(14px + var(--pad-t)); right:16px}
.lb-prev{left:16px; top:50%; margin-top:-23px}
.lb-next{right:16px; top:50%; margin-top:-23px}
.lb-bar{
  position:absolute; left:0; right:0; bottom:calc(20px + var(--pad-b)); z-index:3;
  display:flex; justify-content:center; gap:16px; align-items:baseline;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.lb-bar .lb-title{color:var(--ink)}
@media (max-width:620px){
  .lb-prev{left:10px} .lb-next{right:10px}
  .lb-close{right:10px}
  .lb-nav,.lb-close{width:42px; height:42px}
}
@media (prefers-reduced-motion:reduce){
  .lightbox,.lb-img{transition:none}
  .lb-img.entering,.lb-img.leaving{opacity:0; transform:none}
}

/* =========================================================================
   ROUTED PAGES
   Each route gets its own layout and interaction language, the way Mondine
   makes Events, The Studio and Press feel like different places.
   ========================================================================= */

/* ---- cross-document view transitions (0 bytes of JS) ---- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: vt-out .38s cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root){ animation: vt-in .52s cubic-bezier(0,0,.2,1) both; }
}
@keyframes vt-out{ to{ opacity:0; transform:translateY(-14px) scale(.992); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(20px) scale(1.006); } }
.vt-mark{ view-transition-name: wordmark; }
.vt-hero{ view-transition-name: pagehero; }

/* ---- interior page header ---- */
.pagehead{
  padding:calc(118px + var(--pad-t)) 20px 46px; position:relative;
}
@media (min-width:901px){ .pagehead{padding-inline:40px} }
.pagehead .kicker{display:block; margin-bottom:18px}
.pagehead h1{
  font-family:var(--serif); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(38px,8vw,92px); line-height:.98; margin:0; text-wrap:balance;
}
.pagehead .standfirst{
  margin:22px 0 0; max-width:46ch; color:#E7D4DA; font-size:17px; line-height:1.62;
}
.backhome{
  position:fixed; z-index:118; top:calc(18px + var(--pad-t)); left:26px;
  font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  opacity:.6; transition:opacity .3s ease; mix-blend-mode:difference;
}
.backhome:hover{opacity:1}
@media (max-width:900px){ .backhome{display:none} }

/* =========================================================================
   /eventos — the index. Hovering a row floats its photograph under the
   cursor. Nothing else on the site behaves like this.
   ========================================================================= */
.evlist{padding:0 20px 90px; max-width:1180px; margin-inline:auto}
@media (min-width:901px){ .evlist{padding-inline:40px} }
.evrow{
  position:relative; display:grid; grid-template-columns:44px 1fr auto auto;
  gap:10px 22px; align-items:baseline; padding:26px 0;
  border-top:1px solid var(--rule-soft); z-index:2;
}
.evrow:last-child{border-bottom:1px solid var(--rule-soft)}
.evrow .n{font-family:var(--sans); font-size:11px; letter-spacing:.1em; color:var(--dim)}
.evrow .t{
  font-family:var(--serif); font-weight:300; letter-spacing:-.012em;
  font-size:clamp(24px,4.4vw,48px); line-height:1.04;
  transition:transform .55s cubic-bezier(.2,.7,.3,1), opacity .4s ease;
}
.evrow .loc,.evrow .cnt{
  font-family:var(--sans); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}
@media (hover:hover) and (pointer:fine){
  .evlist:hover .evrow .t{opacity:.34}
  .evrow:hover .t{opacity:1; transform:translateX(22px)}
}
@media (max-width:660px){
  .evrow{grid-template-columns:34px 1fr}
  .evrow .loc,.evrow .cnt{grid-column:2}
  .evrow .cnt{margin-top:-8px}
}
.evthumbs{display:flex; gap:6px; margin-top:14px; grid-column:1/-1}
@media (min-width:901px){ .evthumbs{display:none} }
.evthumbs img{width:64px; height:64px; object-fit:cover; border-radius:2px}

.floatimg{
  position:fixed; z-index:1; top:0; left:0; width:300px; height:390px;
  pointer-events:none; opacity:0; border-radius:2px; overflow:hidden;
  transform:translate(-50%,-50%) scale(.9); will-change:transform,opacity;
  transition:opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}
.floatimg.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.floatimg img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){ .floatimg{display:none} }

/* =========================================================================
   /taller — long-form reading. Sticky portrait, columnar text.
   ========================================================================= */
.tallerwrap{
  display:grid; gap:0; padding:0 20px 90px; max-width:1240px; margin-inline:auto;
}
@media (min-width:940px){
  .tallerwrap{grid-template-columns:.92fr 1.08fr; gap:64px; padding-inline:40px}
}
.tallerfig{margin:0; position:relative}
@media (min-width:940px){
  .tallerfig{position:sticky; top:0; height:100svh; display:flex; align-items:center}
}
.tallerfig img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover}
.tallerfig figcaption{
  margin-top:12px; font-family:var(--sans); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.prose{padding:20px 0 0; max-width:60ch}
@media (min-width:940px){ .prose{padding:14svh 0 16svh} }
.prose p{font-size:18px; line-height:1.72; margin:0 0 1.35em; color:#EEDDE2}
.prose p.lead::first-letter{
  font-family:var(--serif); font-size:3.4em; float:left; line-height:.84;
  margin:.05em .11em 0 0; font-weight:300; color:var(--ink);
}
.prose h2{
  font-family:var(--serif); font-weight:300; font-size:clamp(23px,3.2vw,32px);
  letter-spacing:-.012em; margin:2.2em 0 .7em;
}
.pull{
  margin:2.4em 0; padding:0 0 0 22px; border-left:1px solid var(--rule);
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(21px,3.1vw,29px); line-height:1.32; color:var(--ink);
}
.factgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0; margin:3em 0 0; border-top:1px solid var(--rule);
}
.factgrid div{padding:18px 0 16px; border-bottom:1px solid var(--rule-soft)}
.factgrid dt{font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin:0}
.factgrid dd{font-family:var(--serif); font-weight:300; font-size:21px; margin:6px 0 0}

/* =========================================================================
   /servicios — a two-panel configurator. Choosing a service cross-fades
   the image panel. Different rhythm again: deciding, not browsing.
   ========================================================================= */
.svcwrap{display:grid; gap:0; padding:0 0 80px}
@media (min-width:940px){
  .svcwrap{grid-template-columns:1fr 1fr; align-items:start; gap:0}
}
.svcpanel{position:relative; background:var(--ground-2); overflow:hidden}
@media (min-width:940px){ .svcpanel{position:sticky; top:0; height:100svh} }
.svcpanel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1), transform 1.6s cubic-bezier(.16,1,.3,1);
}
.svcpanel img.on{opacity:1; transform:scale(1)}
@media (max-width:939px){ .svcpanel{aspect-ratio:4/3; height:auto} }
.svcmenu{padding:10px 20px 0}
@media (min-width:940px){ .svcmenu{padding:9svh 40px 9svh 48px} }
.svcitem{
  display:block; width:100%; text-align:left; background:none; cursor:pointer;
  border:0; border-bottom:1px solid var(--rule-soft); color:inherit;
  padding:24px 0; transition:padding-left .5s cubic-bezier(.2,.7,.3,1);
}
.svcitem:first-child{border-top:1px solid var(--rule)}
.svcitem[aria-current="true"],.svcitem:hover{padding-left:14px}
.svcitem .eyebrow{
  font-family:var(--sans); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); display:block;
}
.svcitem h3{
  font-family:var(--serif); font-weight:300; font-size:clamp(22px,3.4vw,33px);
  letter-spacing:-.012em; margin:9px 0 0; line-height:1.1;
  transition:opacity .4s ease;
}
.svcmenu:hover .svcitem h3{opacity:.4}
.svcitem:hover h3,.svcitem[aria-current="true"] h3{opacity:1}
.svcitem p{margin:10px 0 0; color:var(--dim); font-size:15px; line-height:1.55; max-width:44ch}
.svcitem .price{
  display:inline-block; margin-top:12px; font-family:var(--serif);
  font-style:italic; font-size:17px; color:var(--ink);
}

/* =========================================================================
   /eventos/<slug> — the photo essay. Full-bleed plates with fig captions.
   ========================================================================= */
.plates{padding:0 0 70px}
.plate{margin:0 0 6px; position:relative}
.plate img{width:100%; object-fit:cover}
.plate.wide img{aspect-ratio:16/9}
.plate.tall img{aspect-ratio:3/4}
.plate.sq img{aspect-ratio:1/1}
.plate figcaption{
  padding:13px 20px 26px; font-family:var(--sans); font-size:11px;
  line-height:1.6; letter-spacing:.02em; color:var(--dim); max-width:56ch;
}
@media (min-width:901px){ .plate figcaption{padding-inline:40px} }
.plate figcaption b{font-weight:400; color:var(--ink); font-style:italic; font-family:var(--serif); letter-spacing:0}
.duo{display:grid; gap:6px; margin-bottom:6px}
@media (min-width:760px){ .duo{grid-template-columns:1fr 1fr} }
.duo .plate{margin-bottom:0}

/* ---- next-page footer link, shared by interior routes ---- */
.nextup{
  display:block; padding:70px 20px calc(80px + var(--pad-b)); text-align:center;
  border-top:1px solid var(--rule-soft);
}
@media (min-width:901px){ .nextup{padding-inline:40px} }
.nextup .label{display:block; margin-bottom:14px}
.nextup .big{
  font-family:var(--serif); font-weight:300; font-size:clamp(30px,6vw,62px);
  letter-spacing:-.02em; display:inline-block; position:relative;
}
.nextup .big::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.nextup:hover .big::after{transform:scaleX(1)}
/* =========================================================================
   FOOTER NAV BAND + SITE FOOTER
   The reference repeats its nav at the foot of every page as a centred block
   set in the DISPLAY SERIF, not as small uppercase sans. It is the strongest
   "where do I go next" signal on the site.
   ========================================================================= */
.footnav{
  padding:86px 20px 34px; text-align:center;
  border-top:1px solid var(--rule-soft);
}
.footnav ul{
  list-style:none; margin:0 auto; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px clamp(26px,5vw,84px);
}
.footnav a{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(21px,2.5vw,32px); letter-spacing:-.012em;
  line-height:1.15; display:inline-block; position:relative; padding-bottom:3px;
}
.footnav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.footnav a:hover::after,.footnav a[aria-current="page"]::after{transform:scaleX(1)}
.footnav a[aria-current="page"]{opacity:.55}

.sitefoot{
  padding:26px 20px calc(54px + var(--pad-b)); text-align:center;
}
.sitefoot .row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-bottom:14px;
}
.sitefoot .row a,.sitefoot .row span{
  font-family:var(--sans); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}
.sitefoot .row a:hover{color:var(--ink)}
.sitefoot .legal{font-family:var(--sans); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}

/* =========================================================================
   EVENT DETAIL — the piece the journey was missing.
   Mirrors the reference: title, place, image count, a credits paragraph,
   then a long mosaic that is mostly PORTRAIT with occasional pairs.
   ========================================================================= */
.evhead{
  padding:calc(124px + var(--pad-t)) 20px 8px; text-align:center;
}
.evhead h1{
  font-family:var(--serif); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(32px,6.4vw,74px); line-height:1.02; margin:0; text-wrap:balance;
}
.evmeta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px;
  margin:20px 0 0; font-family:var(--sans); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.evintro{
  max-width:60ch; margin:32px auto 0; padding:0 20px 58px; text-align:center;
  font-size:16.5px; line-height:1.72; color:#EEDDE2;
}
.evintro .credits{
  display:block; margin-top:18px; font-family:var(--sans);
  font-size:11px; letter-spacing:.06em; color:var(--dim); line-height:1.8;
}

/* the mosaic: a single centred column of portraits, with paired rows */
.evplates{display:grid; gap:6px; padding:0 0 30px}
.evplates .solo{margin:0}
.evplates .solo img{width:100%; object-fit:cover}
.evplates .duo{display:grid; gap:6px; grid-template-columns:1fr 1fr; margin:0}
.evplates .duo figure{margin:0}
.evplates .duo img{width:100%; object-fit:cover}
.p-port img{aspect-ratio:0.70/1}
.p-portw img{aspect-ratio:0.77/1}
.p-land img{aspect-ratio:1.5/1}
.p-sq img{aspect-ratio:1/1}
@media (min-width:901px){
  /* the reference keeps its plates in a measured column, not edge to edge */
  .evplates{max-width:1040px; margin-inline:auto; padding-inline:24px}
}
.evcap{
  padding:12px 20px 30px; text-align:center;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
/* =========================================================================
   EVENTS INDEX — thumbnails / list, the way the reference offers both.
   ========================================================================= */
.viewtoggle{
  display:flex; gap:18px; align-items:baseline; padding:0 20px 26px;
}
@media (min-width:901px){ .viewtoggle{padding-left:calc(var(--rail) + 24px)} }
.viewtoggle button{
  background:none; border:0; cursor:pointer; padding:4px 0;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); transition:color .3s ease;
  position:relative;
}
.viewtoggle button[aria-pressed="true"]{color:var(--ink)}
.viewtoggle button[aria-pressed="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor;
}

.evgrid{
  display:grid; gap:34px 20px; padding:0 20px 80px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
@media (min-width:901px){ .evgrid{padding-left:calc(var(--rail) + 24px); padding-right:56px; gap:44px 24px} }
.evcard{display:block}
.evcard .shot{
  position:relative; overflow:hidden; background:var(--ground-2); aspect-ratio:0.78/1;
}
.evcard .shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s cubic-bezier(.16,1,.3,1);
}
.evcard:hover .shot img{transform:scale(1.045)}
.evcard h2{
  font-family:var(--serif); font-weight:300; letter-spacing:-.012em;
  font-size:clamp(19px,2.1vw,25px); line-height:1.15; margin:16px 0 0;
}
.evcard .sub{
  display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px;
  font-family:var(--sans); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}
.evcard .go{
  display:inline-block; margin-top:10px;
  font-family:var(--serif); font-style:italic; font-size:15px;
}

/* the two views are mutually exclusive, driven by one data attribute */
[data-view="grid"] .evlist{display:none}
[data-view="list"] .evgrid{display:none}
[data-view="list"] .floatimg{display:block}
/* ---- body-level route links ----
   The rail is desktop-only and the hamburger is opt-in, so before these the
   interior pages were unreachable for a phone visitor reading straight down. */
.seeall{
  display:block; padding:34px 20px 70px;
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(19px,2.3vw,27px); letter-spacing:-.01em;
}
@media (min-width:901px){ .seeall{padding-left:calc(var(--rail) + 24px)} }
.seeall span{position:relative; display:inline-block; padding-bottom:4px}
.seeall span::after{
  content:" \2192"; font-style:normal;
}
.seeall span::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.4;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.seeall:hover span::before{transform:scaleX(1)}

.inlink{
  display:inline-block; margin-top:26px;
  font-family:var(--serif); font-style:italic; font-weight:300; font-size:19px;
  border-bottom:1px solid var(--rule); padding-bottom:3px;
  transition:border-color .4s ease;
}
.inlink:hover{border-bottom-color:var(--ink)}
.inlink span::after{content:" \2192"; font-style:normal}

/* =====================================================================
   MOBILE SEAM — the reference's signature move, kept on phones.
   The two plates have different aspect ratios (1.58:1 against 0.79:1),
   so once they stack, 50% of the article is NOT the boundary between
   them — the title used to land ~35px inside the lower photograph.
   `seamAlign` measures the first figure and writes --seam-y.
   ===================================================================== */
@media (max-width:759px){
  .story{--seam-y:50%}
  .seam{top:var(--seam-y); width:min(92%,460px)}
  .seam::before{
    content:""; position:absolute; z-index:-1;
    left:50%; top:50%; transform:translate(-50%,-50%);
    width:150%; height:230%;
    background:radial-gradient(ellipse at center, rgba(22,7,13,.72) 0%, rgba(22,7,13,.45) 45%, transparent 72%);
    pointer-events:none;
  }
  .seam h3{font-size:clamp(24px,7.4vw,34px)}
  .seam .meta{margin-top:10px}
}
/* `Ver` was a 23x27px target. 44px is the minimum a thumb can hit. */
.seam .go{
  position:relative; margin-top:12px; padding:11px 20px 10px;
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:100px;
  background:rgba(20,7,13,.34); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  font-size:15px; line-height:1;
  transition:background .45s ease, border-color .45s ease, color .45s ease;
}
.seam .go::after{display:none}
.seam .go:hover{background:var(--ink); border-color:var(--ink); color:var(--ground)}

/* =====================================================================
   SHARED SECTION PRIMITIVES used by /taller/ and /servicios/
   ===================================================================== */
.band{padding-block:clamp(56px,9vw,104px)}
.band-rule{border-top:1px solid var(--rule-soft)}
.band-head{padding-inline:20px; max-width:1180px; margin-inline:auto}
@media (min-width:901px){ .band-head{padding-left:calc(var(--rail) + 24px); padding-right:56px; margin-inline:0; max-width:none} }
.band-head .kicker{display:block; color:var(--dim)}
.band-head h2{
  font-family:var(--serif); font-weight:300; font-size:clamp(28px,4.6vw,54px);
  line-height:1.02; letter-spacing:-.018em; margin:16px 0 0; text-wrap:balance;
}
.band-head p{margin:16px 0 0; max-width:56ch; color:#E4D0D7; font-size:17px; line-height:1.68}

/* ---- numbered process steps: sticky index against a scrolling column ---- */
.steps{margin-top:clamp(30px,5vw,58px)}
.step{
  display:grid; gap:18px; padding-block:clamp(34px,5vw,64px);
  border-top:1px solid var(--rule-soft); padding-inline:20px;
}
@media (min-width:901px){
  .step{
    grid-template-columns:86px minmax(0,1fr) minmax(0,1.05fr);
    gap:40px; align-items:start;
    padding-left:calc(var(--rail) + 24px); padding-right:56px;
  }
}
.step .n{
  font-family:var(--serif); font-weight:300; font-size:clamp(30px,4vw,46px);
  line-height:1; color:var(--dim); opacity:.55;
}
@media (min-width:901px){ .step .n{position:sticky; top:clamp(90px,16vh,190px)} }
.step h3{
  font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.8vw,34px);
  line-height:1.1; margin:0; letter-spacing:-.014em; text-wrap:balance;
}
.step .body{margin:14px 0 0; color:#E4D0D7; font-size:16.5px; line-height:1.7; max-width:46ch}
.step .tag{
  display:inline-block; margin-top:16px; font-family:var(--sans);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--rule); border-radius:100px; padding:7px 13px 6px;
}
.step figure{margin:0; overflow:hidden; background:var(--ground-2)}
.step figure img{width:100%; height:100%; object-fit:cover; display:block}
.step .shots{display:grid; gap:6px; grid-template-columns:1fr 1fr}
.step .shots figure:first-child{grid-column:1 / -1}
.step .shots figure:first-child img{aspect-ratio:1.42/1}
.step .shots figure + figure img{aspect-ratio:1/1}

/* ---- marquee strip: a slow horizontal river of plates ---- */
.strip{overflow:hidden; padding-block:clamp(26px,4vw,44px); position:relative}
.strip::before,.strip::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(30px,7vw,110px); z-index:3; pointer-events:none;
}
.strip::before{left:0; background:linear-gradient(90deg,var(--ground),transparent)}
.strip::after{right:0; background:linear-gradient(270deg,var(--ground),transparent)}
.strip .track{display:flex; gap:6px; width:max-content; will-change:transform}
.strip .track figure{margin:0; flex:0 0 auto; overflow:hidden; background:var(--ground-2)}
.strip .track img{
  display:block; height:clamp(180px,26vw,330px); width:auto;
  aspect-ratio:1.45/1; object-fit:cover;
  transition:opacity .6s ease; opacity:.86;
}
/* a portrait every third plate, so the river has rhythm. The count in the
   markup is a multiple of 3 so the duplicated half repeats the pattern. */
.strip .track figure:nth-child(3n+2) img{aspect-ratio:.78/1}
.strip .track figure:hover img{opacity:1}
.strip .cap{
  display:block; margin:18px auto 0; text-align:center; max-width:52ch; padding-inline:20px;
  font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(16px,2vw,21px); color:#E4D0D7;
}

/* ---- tile grid of details ---- */
.tiles{display:grid; gap:6px; grid-template-columns:repeat(2,1fr); margin-top:clamp(26px,4vw,46px)}
@media (min-width:760px){ .tiles{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1200px){ .tiles{grid-template-columns:repeat(4,1fr)} }
.tiles figure{margin:0; overflow:hidden; background:var(--ground-2); position:relative}
.tiles img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.tiles figure:hover img{transform:scale(1.045)}
.tiles figcaption{
  position:absolute; left:12px; bottom:11px; z-index:2;
  font-family:var(--sans); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); text-shadow:0 1px 12px rgba(20,6,12,.9);
  opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease;
}
.tiles figure:hover figcaption{opacity:1; transform:none}

/* ---- timeline ---- */
.tline{margin-top:clamp(26px,4vw,48px); padding-inline:20px}
@media (min-width:901px){ .tline{padding-left:calc(var(--rail) + 24px); padding-right:56px} }
.tline ol{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-soft)}
.tline li{
  display:grid; gap:6px 28px; padding-block:22px; border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
@media (min-width:760px){ .tline li{grid-template-columns:120px minmax(0,1fr)} }
.tline .yr{font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.6vw,30px); color:var(--ink)}
.tline .what{color:#E4D0D7; font-size:16.5px; line-height:1.66; max-width:56ch; margin:0}

/* =====================================================================
   /servicios/ — the catalogue below the index panel
   ===================================================================== */
.svcitem{scroll-margin-top:90px}
.svcitem .jump{
  display:block; margin-top:14px; font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--dim); transition:color .4s ease;
}
.svcitem:hover .jump,.svcitem[aria-current="true"] .jump{color:var(--ink)}

.svcdetail{border-top:1px solid var(--rule-soft); scroll-margin-top:0}
.svcdetail .lede{
  display:grid; gap:20px; padding:clamp(44px,6vw,86px) 20px clamp(26px,3.5vw,44px);
}
@media (min-width:901px){
  .svcdetail .lede{
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:56px; align-items:end;
    padding-left:calc(var(--rail) + 24px); padding-right:56px;
  }
}
.svcdetail .idx{
  font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); display:block; margin-bottom:14px;
}
.svcdetail h2{
  font-family:var(--serif); font-weight:300; font-size:clamp(30px,5.6vw,62px);
  line-height:.98; letter-spacing:-.022em; margin:0; text-wrap:balance;
}
.svcdetail .say{margin:0; color:#E4D0D7; font-size:17px; line-height:1.7; max-width:50ch}
.svcdetail .say .quote{
  display:block; margin-top:18px; font-family:var(--serif); font-style:italic;
  font-weight:300; font-size:clamp(17px,2.1vw,22px); color:var(--ink); line-height:1.4;
}

.svcplates{display:grid; gap:6px}
@media (min-width:760px){
  .svcplates{grid-template-columns:repeat(4,1fr)}
  .svcplates figure:nth-child(1){grid-column:span 2; grid-row:span 2}
}
.svcplates figure{margin:0; overflow:hidden; background:var(--ground-2)}
.svcplates img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1}
@media (min-width:760px){ .svcplates figure:nth-child(1) img{aspect-ratio:auto; height:100%} }

.svcfoot{
  display:grid; gap:24px; padding:clamp(28px,4vw,46px) 20px clamp(48px,6vw,86px);
}
@media (min-width:901px){
  .svcfoot{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px;
    padding-left:calc(var(--rail) + 24px); padding-right:56px;
  }
}
.svcfoot .incl{list-style:none; margin:0; padding:0; column-gap:34px}
@media (min-width:620px){ .svcfoot .incl{columns:2} }
.svcfoot .incl li{
  break-inside:avoid; padding:11px 0 10px; border-bottom:1px solid var(--rule-soft);
  font-size:15.5px; color:#E4D0D7; display:flex; gap:11px; align-items:baseline;
}
.svcfoot .incl li::before{
  content:""; flex:0 0 auto; width:5px; height:5px; border-radius:50%;
  background:var(--dim); transform:translateY(-2px);
}
.svcask{align-self:start}
.svcask .from{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(24px,3.2vw,38px); line-height:1.05; letter-spacing:-.016em;
}
.svcask .note{display:block; margin-top:8px; color:var(--dim); font-size:14px; line-height:1.55}
.svcask .wa{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  min-height:48px; padding:13px 22px; border-radius:100px;
  background:var(--ink); color:var(--ground); font-family:var(--sans);
  font-size:13px; letter-spacing:.06em; font-weight:500;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.svcask .wa svg{width:17px; height:17px; flex:0 0 auto}
.svcask .wa:hover{transform:translateY(-2px)}

/* ---- how we quote: three plain steps ---- */
.howq{display:grid; gap:2px; margin-top:clamp(26px,4vw,44px); padding-inline:20px}
@media (min-width:901px){ .howq{padding-left:calc(var(--rail) + 24px); padding-right:56px} }
@media (min-width:760px){ .howq{grid-template-columns:repeat(3,1fr); gap:6px} }
.howq .q{padding:26px 24px 30px; background:var(--ground-2); position:relative; overflow:hidden}
.howq .q .n{
  font-family:var(--serif); font-weight:300; font-size:44px; line-height:1;
  color:var(--ink); opacity:.22; display:block;
}
.howq .q h3{font-family:var(--serif); font-weight:300; font-size:23px; margin:12px 0 0; line-height:1.15}
.howq .q p{margin:9px 0 0; color:#E4D0D7; font-size:15.5px; line-height:1.62}

/* ---- questions ---- */
.faq{margin-top:clamp(26px,4vw,44px); padding-inline:20px}
@media (min-width:901px){ .faq{padding-left:calc(var(--rail) + 24px); padding-right:56px} }
.faq .qa{border-top:1px solid var(--rule-soft)}
.faq .qa:last-child{border-bottom:1px solid var(--rule-soft)}
.faq .qa > button{
  width:100%; display:flex; gap:20px; align-items:baseline; justify-content:space-between;
  background:none; border:0; color:inherit; cursor:pointer; text-align:left;
  padding:21px 0 20px; font-family:var(--serif); font-weight:300;
  font-size:clamp(18px,2.2vw,25px); line-height:1.25; letter-spacing:-.01em;
}
.faq .qa > button .sign{
  flex:0 0 auto; width:16px; height:16px; position:relative; transform:translateY(-2px);
}
.faq .qa > button .sign::before,.faq .qa > button .sign::after{
  content:""; position:absolute; left:0; top:50%; width:16px; height:1px;
  background:currentColor; transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.faq .qa > button .sign::after{transform:rotate(90deg)}
.faq .qa[data-open="true"] > button .sign::after{transform:rotate(0)}
.faq .qa .ans{overflow:hidden; height:0; transition:height .55s cubic-bezier(.16,1,.3,1)}
.faq .qa .ans p{margin:0 0 22px; max-width:62ch; color:#E4D0D7; font-size:16.5px; line-height:1.72}
.no-js .faq .qa .ans{height:auto}

/* =====================================================================
   /taller/ — the opening plate
   ===================================================================== */
.plate-open{position:relative; margin:0; overflow:hidden; background:var(--ground-2)}
.plate-open img{
  width:100%; height:auto; display:block; object-fit:cover;
  aspect-ratio:4/5; transform:scale(1.06); transform-origin:50% 60%;
}
@media (min-width:760px){ .plate-open img{aspect-ratio:2.15/1} }
.plate-open::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,7,13,.5) 0%,rgba(20,7,13,.12) 38%,rgba(42,16,27,.86) 100%);
}
.plate-open .over{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 20px clamp(26px,4vw,52px);
}
@media (min-width:901px){ .plate-open .over{padding-left:calc(var(--rail) + 24px); padding-right:56px} }
.plate-open .over .kicker{display:block; color:var(--dim)}
.plate-open .over h1{
  font-family:var(--serif); font-weight:300; font-size:clamp(38px,8.4vw,104px);
  line-height:.92; letter-spacing:-.028em; margin:12px 0 0;
  text-shadow:0 2px 34px rgba(20,6,12,.55);
}
.plate-open .over .sub{
  margin:16px 0 0; max-width:48ch; font-size:16.5px; line-height:1.66; color:#EEDDE2;
  text-shadow:0 1px 16px rgba(20,6,12,.7);
}

/* =====================================================================
   PHONES — nearly all of her traffic. Two things change: the index at
   the top of /servicios/ stops repeating the copy that appears again in
   the detail section below it, and the plates pack into a grid instead
   of stacking one full-width photograph per screen.
   ===================================================================== */
@media (max-width:759px){
  /* index, not a second catalogue */
  .svcitem{padding:17px 0}
  .svcitem p{display:none}
  .svcitem h3{font-size:25px; margin-top:6px}
  .svcitem .price{margin-top:7px; font-size:15.5px}
  .svcitem .jump{margin-top:6px; font-size:13.5px}

  /* 5 plates in ~780px instead of ~1950px */
  .svcplates{grid-template-columns:1fr 1fr}
  .svcplates figure:nth-child(1){grid-column:1 / -1}
  .svcplates figure:nth-child(1) img{aspect-ratio:1.3/1}

  .svcdetail h2{font-size:clamp(30px,8.6vw,44px)}
  .svcdetail .lede{padding-top:38px; gap:16px}
  .svcfoot{padding-top:22px; gap:26px}

  /* the process shots read better as one plate plus a pair */
  .step{padding-block:30px}
  .step .shots{gap:5px}
  .step .shots figure:first-child img{aspect-ratio:1.3/1}

  .band{padding-block:52px}
  .plate-open .over h1{font-size:clamp(40px,13vw,58px)}
}

/* Any plate that opens the lightbox says so. */
.svcplates figure[data-gallery],
.step .shots figure[data-gallery],
.tiles figure[data-gallery]{cursor:zoom-in}
.svcplates figure[data-gallery]:focus-visible,
.step .shots figure[data-gallery]:focus-visible,
.tiles figure[data-gallery]:focus-visible{outline:2px solid var(--ink); outline-offset:-3px}
.svcplates figure img,.step .shots figure img{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){
  .svcplates figure[data-gallery]:hover img,
  .step .shots figure[data-gallery]:hover img{transform:scale(1.04)}
}

/* =====================================================================
   HERO — the wordmark moves to the foot.
   The clip is a bouquet turning against near-black, so its brightest mass
   sits dead centre, exactly where a centred title used to land. The
   reference anchors its type to an edge; doing the same here gives the
   words a genuinely dark bed and lets the bouquet own the frame.
   ===================================================================== */
.hero::after{
  background:linear-gradient(180deg,
    rgba(25,7,14,.46) 0%,
    rgba(25,7,14,.10) 30%,
    rgba(25,7,14,.52) 62%,
    rgba(20,6,11,.90) 100%);
}
.hero-inner{
  align-items:flex-start; justify-content:flex-end; text-align:left;
  padding:0 20px calc(78px + var(--pad-b));
}
@media (min-width:901px){
  .hero-inner{
    padding-left:calc(var(--rail) + 24px); padding-right:56px;
    padding-bottom:calc(88px + var(--pad-b));
  }
}
.wordmark{text-shadow:0 2px 40px rgba(16,4,9,.6)}
.wordmark .sub{margin-inline:0; max-width:48ch; text-shadow:0 1px 20px rgba(16,4,9,.8)}
@media (max-width:620px){ .wordmark .sub{max-width:none} }

/* the cue would have sat on top of the wordmark at the same edge */
.scrollcue{left:auto; right:20px; transform:none}
@media (min-width:901px){ .scrollcue{right:56px} }

/* =====================================================================
   HER CHANNELS — top of every page, and again in the contact block.
   People arrive from TikTok and Instagram, so the way back to those
   profiles belongs where they land, not only in the footer. Quiet by
   default and lit on hover: the reference carries no accent colour and
   four bright glyphs at the top would be the loudest thing on the page.
   ===================================================================== */
.social{
  position:fixed; z-index:120; top:calc(13px + var(--pad-t)); right:100px;
  display:flex; gap:2px; align-items:center;
}
.social a{
  display:inline-flex; width:34px; height:34px;
  align-items:center; justify-content:center;
  color:var(--dim);
  transition:color .35s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.social a svg{width:16px; height:16px; display:block}
.social a:hover,.social a:focus-visible{color:var(--ink); transform:translateY(-1px)}
.social a:focus-visible{outline:1px solid var(--rule); outline-offset:-4px; border-radius:50%}

/* Over a pale photograph the glyphs would vanish; the hero is dark at the
   top but interior pages open on an image, so give them their own bed. */
.social::before{
  content:""; position:absolute; inset:-5px -8px; z-index:-1; border-radius:100px;
  background:rgba(20,7,13,.34); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
@media (max-width:560px){
  .social{right:100px; gap:0}
  .social a{width:30px; height:30px}
  .social a svg{width:15px; height:15px}
  /* directions keep their place in the contact block and the menu */
  .social a[data-wide]{display:none}
}

/* full-width rows with labels — the accessible path on a phone */
.sheet-social{
  margin-top:28px; padding-top:18px; border-top:1px solid var(--rule);
  display:flex; flex-direction:column; gap:0; width:min(100%,340px);
}
.sheet-social a{
  display:flex; align-items:center; gap:15px;
  min-height:48px; padding:6px 0;
  font-family:var(--sans); font-weight:400; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); line-height:1;
}
.sheet-social a svg{width:17px; height:17px; flex:0 0 auto}
.sheet-social a:hover,.sheet-social a:focus-visible{color:var(--ink)}

/* the lightbox owns the screen while it is open */
body.lb-open .social{opacity:0; pointer-events:none}
.social{transition:opacity .3s ease}

/* =====================================================================
   HERO — when autoplay is refused.
   A cross-origin frame without allow="autoplay" (the preview artifact)
   blocks even a muted autoplay until the frame is interacted with, and
   scrolling does not count. Rather than leave a still poster that reads
   as broken, say so quietly. On the live site this never appears — the
   attribute is only ever set after a play() actually gets refused.
   ===================================================================== */
.hero-media:has(video[data-blocked])::after{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:3; width:74px; height:74px; border-radius:50%;
  border:1px solid rgba(251,242,236,.5);
  background:rgba(20,7,13,.42) no-repeat center/18px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M0 0l18 10L0 20z' fill='%23FBF2EC'/%3E%3C/svg%3E");
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:cuePulse 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cuePulse{
  0%,100%{opacity:.62; transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.045)}
}
@media (prefers-reduced-motion:reduce){
  .hero-media:has(video[data-blocked])::after{animation:none}
}

/* =====================================================================
   INTRO — the shimmer card that dissolves into the hero.

   .intro-stage is the hero's exact height and its inner wrapper is the
   hero's own `.hero-inner`, so the wordmark lands on identical
   coordinates in both layers. When the overlay fades the title does not
   move at all — only the picture behind it changes.
   ===================================================================== */
.intro{
  position:fixed; inset:0; z-index:300; background:var(--ground);
  opacity:1; transition:opacity .95s cubic-bezier(.4,0,.2,1);
}
.intro[hidden]{display:none}
.intro.out{opacity:0; pointer-events:none}
html.intro-on, html.intro-on body{overflow:hidden}

.intro-stage{position:relative; height:88vh; min-height:520px; overflow:hidden}
.intro-stage video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:38% 50%;
}
/* the same falloff as the hero, so the two layers grade alike */
.intro-stage::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(25,7,14,.42) 0%,
    rgba(25,7,14,.10) 30%,
    rgba(25,7,14,.52) 62%,
    rgba(20,6,11,.90) 100%);
}
/* The shimmer peaks right where the title sits, and on a phone the 16:9
   clip is cropped to its middle quarter so the dark right side is gone
   entirely. Either way the type needs a bed of its own — deeper than the
   hero's, because gold sequins are a far brighter backdrop than a bouquet
   on black. */
.intro-stage .hero-inner::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(180deg, transparent, rgba(20,6,11,.58) 46%, rgba(18,5,10,.88));
  pointer-events:none;
}
@media (max-width:759px){
  .intro-stage .hero-inner::before{
    height:56%;
    background:linear-gradient(180deg, transparent, rgba(20,6,11,.74) 48%, rgba(18,5,10,.94));
  }
}

.intro-skip{
  position:absolute; z-index:4; right:20px; bottom:calc(26px + var(--pad-b));
  background:rgba(20,7,13,.4); border:1px solid var(--rule); border-radius:100px;
  color:var(--dim); cursor:pointer; min-height:40px; padding:10px 18px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:color .3s ease, border-color .3s ease;
}
.intro-skip:hover{color:var(--ink); border-color:var(--ink)}
@media (min-width:901px){ .intro-skip{right:56px} }