/* ==========================================================================
   IQUILIBRIUM — "O Escrínio"
   The jeweller's vitrine. Three inks, no fourth. One light.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Prata&display=swap');

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* INK — the cabinet */
  --ink:        #071E26;
  --ink-2:      #0C2A34;
  --ink-deep:   #04141A;

  /* PLATINA — the suede tray */
  --platina:    #E9EFF0;
  --platina-2:  #F4F8F8;
  --platina-3:  #DAE4E6;

  /* LUZ — the gem, sampled from the logotype itself */
  --teal:       #57B9B9;
  --blue:       #36A7D7;
  --luz:        linear-gradient(100deg, #57B9B9 0%, #46B0C6 48%, #36A7D7 100%);

  /* metal — a tint of platina, never a fourth ink */
  --metal:      rgba(168,205,213,.26);
  --metal-soft: rgba(168,205,213,.14);
  --metal-hard: rgba(196,224,230,.46);

  /* ink-on-ink text */
  --on-ink:     #DCE8EA;
  --on-ink-dim: #93AEB6;
  /* ink-on-platina text */
  --on-pale:    #0B2830;
  --on-pale-dim:#3E5C65;

  --gut: clamp(1.15rem, 4vw, 3rem);

  --step--1: clamp(.72rem, .69rem + .16vw, .8rem);
  --step-0:  clamp(.95rem, .9rem + .16vw, 1.02rem);
  --step-1:  clamp(1.05rem, .98rem + .26vw, 1.2rem);
  --step-2:  clamp(1.28rem, 1.12rem + .56vw, 1.6rem);
  --step-3:  clamp(1.65rem, 1.32rem + 1.15vw, 2.4rem);
  --step-4:  clamp(2.15rem, 1.42rem + 2.5vw, 3.5rem);
  --step-5:  clamp(2.8rem, 1.5rem + 4.3vw, 5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--on-ink);
  font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--step-0);
  font-weight:350;
  line-height:1.68;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.14; letter-spacing:-.012em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:2px; }
/* the teal rule is invisible on a platina tray — the pale ground gets its own */
.interlude :focus-visible,
.tray--lead :focus-visible,
.step :focus-visible{ outline-color:#0B4450; }

/* --- The case: velvet ground -------------------------------------------- */
.case{
  position:relative;
  background:
    radial-gradient(130% 85% at 50% -12%, #16404E 0%, rgba(22,64,78,0) 58%),
    radial-gradient(90% 70% at 108% 104%, #10333F 0%, rgba(16,51,63,0) 55%),
    var(--ink);
}
.case::before{ /* velvet nap */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(93deg, rgba(255,255,255,.016) 0 1px, rgba(0,0,0,0) 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:auto, 180px 180px;
  opacity:.34; mix-blend-mode:overlay;
}
.case > *{ position:relative; z-index:1; }

/* --- The one light ------------------------------------------------------ */
.vitrine-light{
  position:fixed; z-index:0; pointer-events:none;
  left:0; top:0;
  width:min(84vw, 940px); aspect-ratio:1/.6;
  transform:translate3d(calc(var(--lx,50vw) - 50%), calc(var(--ly,42vh) - 50%), 0);
  scale:.42;
  background:
    radial-gradient(closest-side, rgba(87,185,185,.30), rgba(70,176,198,.15) 42%, rgba(54,167,215,.06) 64%, rgba(54,167,215,0) 78%);
  filter:blur(26px);
  will-change:transform;
  opacity:0;
  transition:opacity 1.5s var(--ease), scale 1.7s var(--ease-out);
}
.vitrine-light.lit{ opacity:1; scale:1; }
@media (prefers-reduced-motion: reduce){
  .vitrine-light{ transform:translate3d(calc(50vw - 50%), calc(38vh - 50%), 0) !important; }
}

/* --- Rails -------------------------------------------------------------- */
.rail-wide{ width:100%; max-width:1480px; margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }

/* --- Display type ------------------------------------------------------- */
.display{
  font-family:'Prata',Georgia,'Times New Roman',serif;
  font-weight:400; line-height:1.12; letter-spacing:-.018em;
}
.display em{
  font-style:normal;
  font-size:1.12em;   /* the accent word is billed larger, the way a maker's
                         name is cut larger on a certificate. No gradient. */
  color:inherit;
}
.lede{
  font-size:var(--step-1); font-weight:300; line-height:1.62;
  color:var(--on-ink-dim); max-width:46ch;
}
.lede strong{ color:var(--on-ink); font-weight:500; }

/* ==========================================================================
   Hallmark bar (nav)
   ========================================================================== */
.hallmark{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(7,30,38,.92), rgba(7,30,38,.74));
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--metal-soft);
}
.hallmark__in{
  display:flex; align-items:center; gap:1.2rem;
  min-height:68px; padding-block:.6rem;
}
.hallmark__logo{ display:flex; align-items:center; flex:none; }
.hallmark__logo img{ height:clamp(30px,5.4vw,40px); width:auto; }
.hallmark__nav{ display:flex; align-items:center; gap:.35rem; margin-left:auto; }
.navlink{
  position:relative; padding:.62rem .95rem;
  font-size:var(--step--1); font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-ink-dim); border-radius:2px;
  transition:color .3s var(--ease);
}
.navlink::after{
  content:''; position:absolute; left:.95rem; right:.95rem; bottom:.34rem; height:1px;
  background:var(--luz); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.navlink:hover{ color:var(--on-ink); }
.navlink:hover::after{ transform:scaleX(1); }
.navlink[aria-current="page"]{ color:var(--on-ink); }
.navlink[aria-current="page"]::after{ transform:scaleX(1); }

/* mobile bar: the call holds row one; the links wrap to row two */
@media (max-width:760px){
  .hallmark__in{ flex-wrap:wrap; min-height:0; padding-block:.6rem; row-gap:.5rem; column-gap:.8rem; }
  .hallmark__nav{ order:3; width:100%; margin-left:0; gap:0;
                  border-top:1px solid var(--metal-soft); padding-top:.3rem; }
  .navlink{ flex:1; text-align:center; padding:.6rem .3rem; font-size:.68rem; letter-spacing:.12em; }
  .navlink::after{ left:.9rem; right:.9rem; }
}

/* the call: primary action, present on every page */
.call{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.72rem 1.15rem; border-radius:2px;
  font-weight:700; font-size:var(--step--1); letter-spacing:.1em;
  color:var(--ink-deep); white-space:nowrap;
  background:var(--luz);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset, 0 6px 22px -10px rgba(54,167,215,.85);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), filter .4s var(--ease);
}
.call:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 0 0 1px rgba(255,255,255,.24) inset, 0 14px 34px -12px rgba(54,167,215,.95); }
.call svg{ width:15px; height:15px; flex:none; }
.call--lg{ padding:.92rem 1.55rem; font-size:var(--step-0); letter-spacing:.06em; gap:.75rem; }
.call--lg svg{ width:18px; height:18px; }

/* ghost action */
.ghost{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.98rem 1.5rem; border-radius:2px;
  border:1px solid var(--metal-hard);
  font-weight:600; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-ink);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.ghost:hover{ background:rgba(255,255,255,.05); border-color:var(--teal); transform:translateY(-2px); }
.ghost svg{ width:14px; height:14px; transition:transform .4s var(--ease-out); }
.ghost:hover svg{ transform:translateX(4px); }

/* ==========================================================================
   Frames — two, each with a job
   ========================================================================== */

/* the ellipse: the logotype's own mark. It frames the SUBJECT — the room today,
   a portrait when one exists, and an empty lit case where a portrait is owed. */
.oval{
  position:relative; border-radius:50%; overflow:hidden;
  aspect-ratio:1/1.32;
  box-shadow:0 0 0 1px var(--metal), 0 40px 90px -40px rgba(0,0,0,.9);
}
.oval img{
  position:relative; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.94) contrast(1.03) brightness(1.03);
}
.oval::before{ /* the rim falls away into the case */
  content:''; position:absolute; inset:0; z-index:1; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(closest-side at 50% 44%, rgba(7,30,38,0) 48%, rgba(7,30,38,.16) 76%, rgba(7,30,38,.58) 94%, rgba(7,30,38,.86) 100%),
    linear-gradient(196deg, rgba(87,185,185,.1), rgba(54,167,215,.14));
  mix-blend-mode:multiply;
}
.oval::after{ /* case glass */
  content:''; position:absolute; inset:0; z-index:2; border-radius:50%;
  background:linear-gradient(148deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 34%, rgba(7,30,38,.06) 70%, rgba(7,30,38,.34) 100%);
  pointer-events:none;
}
.oval-set{ position:relative; }

/* An empty frame is a deliberate state, not a missing asset: the case is lit
   and waiting for the client's own photograph. Never fill it with a stock face. */
.oval--empty{
  display:grid; place-items:center;
  background:
    radial-gradient(closest-side at 50% 42%, rgba(255,255,255,.05), rgba(255,255,255,0) 76%),
    var(--ink-2);
  box-shadow:0 0 0 1px var(--metal), inset 0 0 34px rgba(4,20,26,.55);
}
.oval--empty::before{ display:none; }
.oval--empty span{
  font-size:var(--step--1); font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-ink-dim); text-align:center; line-height:1.9;
}
.oval-set::before{ /* the light behind the piece */
  content:''; position:absolute; z-index:-1;
  left:50%; top:50%; width:114%; aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(87,185,185,.34), rgba(54,167,215,.12) 52%, transparent 74%);
  filter:blur(14px);
}

/* the glass shelf: reserved for work */
.shelf{
  position:relative; overflow:hidden; border-radius:2px;
  box-shadow:0 0 0 1px var(--metal), 0 26px 60px -34px rgba(0,0,0,.85);
  background:var(--ink-2);
}
.shelf img{
  position:relative; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) contrast(1.05);
  transition:transform 1.2s var(--ease-out), filter 1.2s var(--ease);
}
.shelf::before{ /* one wash, so every photograph belongs to the same case */
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(178deg, rgba(87,185,185,.30), rgba(54,167,215,.34));
  mix-blend-mode:soft-light;
  transition:opacity .9s var(--ease);
}
.shelf::after{ /* the reflection streak across the glass */
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.13) 46%, rgba(255,255,255,0) 58%);
  opacity:.9;
}

/* ==========================================================================
   1. The vitrine (hero)
   ========================================================================== */
.vitrine{ padding-block:clamp(2.6rem,5.5vw,4.6rem) clamp(3.4rem,7vw,6rem); overflow:hidden; }
.vitrine__grid{
  display:grid; gap:clamp(2.6rem,5vw,4.5rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:940px){
  .vitrine__grid{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(3rem,5vw,5.5rem); }
}
.vitrine h1{ font-size:var(--step-5); margin-block:1.5rem 1.6rem; }
.vitrine .lede{ max-width:44ch; }
.vitrine__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.3rem; align-items:center; }
.vitrine__piece{ position:relative; }
.vitrine__piece .oval{ margin-inline:auto; max-width:min(420px,84vw); }

/* the hallmark facts, engraved under the piece */
.hallmark-facts{
  display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(2.6rem,5vw,3.8rem);
  border-top:1px solid var(--metal-soft); border-bottom:1px solid var(--metal-soft);
}
.hallmark-facts li{
  flex:1 1 190px; padding:1.15rem 1.3rem 1.2rem;
  border-left:1px solid var(--metal-soft);
}
.hallmark-facts li:first-child{ border-left:0; padding-left:0; }
.hallmark-facts b{
  display:block; font-family:'Prata',Georgia,serif; font-weight:400;
  font-size:var(--step-1); letter-spacing:-.01em; color:var(--on-ink); margin-bottom:.2rem;
}
.hallmark-facts span{ font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:var(--on-ink-dim); font-weight:600; }

/* ==========================================================================
   2. The inscription — continuous review band
   ========================================================================== */
.bezel{
  padding-block:clamp(2.6rem,5.5vw,4.4rem);
  border-block:1px solid var(--metal-soft);
  background:linear-gradient(180deg, rgba(4,20,26,.5), rgba(4,20,26,.16));
  overflow:hidden;
}
.bezel__head{
  display:grid; gap:1.4rem clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr; align-items:end;
  margin-bottom:clamp(2.2rem,4.5vw,3.4rem);
}
@media (min-width:900px){ .bezel__head{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); } }
.bezel__head h2{ font-size:var(--step-4); }
.bezel__head p{ font-size:var(--step-0); font-weight:300; color:var(--on-ink-dim); letter-spacing:.01em; }

.band{ position:relative; overflow:hidden; }
.band + .band{ margin-top:1rem; }
.band{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.band__track{
  display:flex; gap:1rem; width:max-content;
  animation:band-run var(--dur,72s) linear infinite;
  will-change:transform;
}
.band--rev .band__track{ animation-direction:reverse; }
.band:hover .band__track,
.band:focus-within .band__track{ animation-play-state:paused; }
@keyframes band-run{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce){
  .band__track{ animation:none; width:auto; }
  .band{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
         -webkit-mask-image:none; mask-image:none; }
}

.chit{
  flex:none; width:min(84vw,450px); scroll-snap-align:center;
  padding:1.45rem 1.6rem 1.2rem; border-radius:2px;
  border:1px solid var(--metal); background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  display:flex; flex-direction:column; gap:.7rem;
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease-out);
}
.chit:hover{ border-color:var(--teal); transform:translateY(-3px); }
.chit__stars{ display:flex; gap:.3rem; }
.chit__stars svg{ width:15px; height:15px; }
.chit__stars svg path{ fill:var(--teal); }
.chit blockquote{ margin:0; }
.chit p{
  font-family:'Prata',Georgia,'Times New Roman',serif;
  font-size:var(--step-1); line-height:1.36; letter-spacing:-.008em;
  color:var(--on-ink); font-weight:400;
}
.chit footer{
  display:flex; align-items:center; gap:.7rem; margin-top:auto;
  padding-top:.75rem; border-top:1px solid var(--metal-soft);
}
.chit__mark{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-size:.68rem; font-weight:700; color:var(--ink-deep);
  background:var(--luz);
}
.chit__who{ font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--on-ink); }
.chit__src{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-dim); font-weight:600; }

/* ==========================================================================
   3. The pieces — service trays
   ========================================================================== */
.pieces{ padding-block:clamp(3.4rem,6.5vw,5.5rem); }
.pieces__head{
  display:grid; gap:1.4rem clamp(2.5rem,6vw,5rem); grid-template-columns:1fr;
  align-items:end; margin-bottom:clamp(2.6rem,5vw,4rem);
}
@media (min-width:900px){ .pieces__head{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); } }
.pieces__head h2{ font-size:var(--step-4); margin-block:0; }
.pieces__head .lede{ max-width:42ch; }

.trays{ display:grid; gap:clamp(1rem,2vw,1.4rem); grid-template-columns:1fr; }
@media (min-width:760px){ .trays{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1180px){ .trays{ grid-template-columns:repeat(4,1fr); } }

.tray{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--metal); border-radius:2px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  transition:border-color .55s var(--ease), transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.tray:hover{ transform:translateY(-4px); border-color:var(--metal-hard); box-shadow:0 34px 70px -44px rgba(0,0,0,.95); }
.tray:hover .shelf img{ transform:scale(1.05); }
.tray__shelf{ aspect-ratio:16/10; }
.tray__body{ padding:clamp(1.35rem,2.2vw,1.7rem); display:flex; flex-direction:column; gap:.85rem; flex:1; }
.tray h3{ font-family:'Prata',Georgia,serif; font-size:var(--step-1); line-height:1.16; }
.tray__items{ display:flex; flex-wrap:wrap; gap:.42rem; margin-top:auto; padding-top:.4rem; }
.tray__items li{
  font-size:.72rem; letter-spacing:.05em; font-weight:500;
  padding:.3rem .62rem; border-radius:100px;
  border:1px solid var(--metal-soft); color:var(--on-ink-dim);
}
.tray p{ font-size:.875rem; font-weight:300; color:var(--on-ink-dim); line-height:1.6; }

/* rank by inversion — the lead piece alone prints ink on pale */
.tray--lead{
  background:linear-gradient(178deg, var(--platina-2), var(--platina-3));
  border-color:var(--metal-hard);
  color:var(--on-pale);
}
@media (min-width:760px){ .tray--lead{ grid-column:span 2; flex-direction:row; } }
@media (min-width:1180px){ .tray--lead{ grid-column:span 4; } }
.tray--lead .tray__shelf{ aspect-ratio:16/10; }
@media (min-width:760px){
  .tray--lead .tray__shelf{ flex:0 0 46%; aspect-ratio:auto; }
  .tray--lead .tray__body{ padding:clamp(2rem,3.6vw,3.2rem); justify-content:center; }
}
.tray--lead h3{ font-size:var(--step-3); color:var(--on-pale); line-height:1.12; }
.tray--lead p{ color:var(--on-pale-dim); font-size:var(--step-0); }
.tray--lead .tray__items li{ border-color:rgba(11,40,48,.2); color:var(--on-pale-dim); }
.tray--lead .shelf{ box-shadow:none; border-radius:0; }
.tray--lead .shelf::after{ background:linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.1) 46%, rgba(255,255,255,0) 60%); }

/* ==========================================================================
   4. The goldsmith — Celina strip
   ========================================================================== */
.bench{ padding-block:clamp(3.4rem,6.5vw,5.5rem); border-top:1px solid var(--metal-soft); overflow-x:clip; }
.bench__grid{ display:grid; gap:clamp(2.4rem,5vw,4.5rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){
  .bench__grid{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); }
  .bench__piece{ order:-1; }
}
.bench__piece .oval{ max-width:min(380px,80vw); margin-inline:auto; }
.bench h2{ font-size:var(--step-3); margin-block:0 1.3rem; }
.bench blockquote{
  margin:0 0 1.6rem; padding-left:1.3rem; border-left:1px solid var(--metal-hard);
  font-family:'Prata',Georgia,serif; font-size:var(--step-2); line-height:1.34;
  color:var(--on-ink); letter-spacing:-.01em;
}
.bench blockquote cite{ display:block; margin-top:.75rem; font-family:'Manrope',sans-serif; font-style:normal; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-dim); font-weight:600; }

/* ==========================================================================
   5. The counter — address & contact
   ========================================================================== */
.counter{ position:relative; overflow:hidden; border-top:1px solid var(--metal-soft); }
.counter__bg{ position:absolute; inset:0; z-index:0; }
.counter__bg img{ width:100%; height:100%; object-fit:cover; opacity:.34; filter:saturate(.5) contrast(1.06); }
.counter__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, var(--ink) 0%, rgba(7,30,38,.72) 40%, rgba(7,30,38,.86) 78%, var(--ink) 100%); }
.counter__in{ position:relative; z-index:1; padding-block:clamp(3.4rem,6.5vw,5.5rem); }
.counter__grid{ display:grid; gap:clamp(2.2rem,4.5vw,3.6rem); grid-template-columns:1fr; }
@media (min-width:860px){ .counter__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; } }
.counter h2{ font-size:var(--step-4); margin-block:0 1.4rem; }
.counter address{
  font-style:normal; font-size:var(--step-1); font-weight:300; line-height:1.62; color:var(--on-ink);
}
.counter__meta{ display:grid; gap:1.4rem; }
.counter__meta div{ padding-top:1.05rem; border-top:1px solid var(--metal-soft); }
.counter__meta dt{ font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase; color:var(--on-ink-dim); font-weight:600; margin-bottom:.45rem; }
.counter__meta dd{ margin:0; font-size:var(--step-1); font-weight:300; }
.counter__meta dd a{ transition:color .3s var(--ease); }
.counter__meta dd a:hover{ color:var(--teal); }
.counter__phone{ font-family:'Prata',Georgia,serif; font-size:var(--step-3); letter-spacing:-.01em; }
.counter__phone:hover{ color:var(--teal); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{ border-top:1px solid var(--metal-soft); background:var(--ink-deep); }
.foot__in{ padding-block:clamp(2.4rem,5vw,3.4rem); display:flex; flex-wrap:wrap; gap:1.6rem 2rem; align-items:center; justify-content:space-between; }
.foot img{ height:34px; width:auto; }
.foot__links{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.foot__links a{ font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--on-ink-dim); transition:color .3s var(--ease); }
.foot__links a:hover{ color:var(--on-ink); }
.foot small{ display:block; width:100%; padding-top:1.5rem; border-top:1px solid var(--metal-soft); font-size:.73rem; color:var(--on-ink-dim); letter-spacing:.03em; }

/* ==========================================================================
   Interior pages
   ========================================================================== */
.crown{ padding-block:clamp(3rem,7vw,5.5rem) clamp(2.6rem,5vw,4rem); }
.crown h1{ font-size:var(--step-4); margin-block:0 1.3rem; max-width:20ch; }
.crown__grid{ display:grid; gap:clamp(2.4rem,5vw,4.5rem); grid-template-columns:1fr; align-items:end; }
@media (min-width:940px){ .crown__grid{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); } }
.crown__index h2{
  font-family:'Prata',Georgia,serif; font-size:var(--step-1);
  color:var(--on-ink); letter-spacing:-.005em;
}
.crown__index .pieces-list{ margin-top:1rem; }
.crown .lede{ max-width:52ch; }

/* drawer: one service family, opened */
.drawer{ padding-block:clamp(2.6rem,5.5vw,4.4rem); border-top:1px solid var(--metal-soft); }
.drawer__grid{ display:grid; gap:clamp(1.8rem,4vw,3.4rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .drawer__grid{ grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); } }
.drawer__shelf{ aspect-ratio:4/3; position:sticky; top:104px; }
@media (max-width:899px){ .drawer__shelf{ position:static; } }
.drawer h2{ font-family:'Prata',Georgia,serif; font-size:var(--step-3); margin-block:0 1.1rem; }

.pieces-list{ margin-top:2.2rem; border-top:1px solid var(--metal-soft); }
.pieces-list li{
  display:flex; align-items:baseline; gap:1.1rem;
  padding:1.05rem .2rem; border-bottom:1px solid var(--metal-soft);
  transition:background .45s var(--ease);
}
.pieces-list li > *{ transition:transform .45s var(--ease-out); }
.pieces-list li:hover{ background:rgba(255,255,255,.028); }
.pieces-list li:hover > .n,
.pieces-list li:hover > .t{ transform:translateX(.7rem); }
.pieces-list li:has(> a){ padding:0; }
.pieces-list a{ display:flex; align-items:baseline; gap:1.1rem; width:100%; padding:1.05rem .2rem;
                transition:transform .45s var(--ease-out); }
.pieces-list li:hover > a{ transform:translateX(.7rem); }
.pieces-list a .t{ transition:color .35s var(--ease); }
.pieces-list a:hover .t{ color:var(--teal); }
.pieces-list .t{ font-size:var(--step-1); font-weight:400; color:var(--on-ink); }
.pieces-list .d{ margin-left:auto; text-align:right; font-size:.82rem; color:var(--on-ink-dim); font-weight:300; max-width:24ch; }
@media (max-width:600px){
  .pieces-list li,.pieces-list a{ flex-wrap:wrap; row-gap:.15rem; }
  .pieces-list .d{ margin-left:0; text-align:left; width:100%; max-width:none; }
}

.course__grid{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:clamp(2rem,4vw,3rem); counter-reset:step; }
@media (min-width:780px){ .course__grid{ grid-template-columns:repeat(3,1fr); } }
.step{ position:relative; padding:1.9rem 1.6rem 1.7rem; border:1px solid var(--metal); border-radius:2px; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  display:block; font-family:'Prata',Georgia,serif; font-size:var(--step-2);
  color:#0F5C69;   /* --teal on platina measures ~2:1 and fails; this is the
                      same hue carried down until it clears 4.5:1 on the tray */
  margin-bottom:.85rem;
}
.step h3{ font-size:var(--step-1); font-weight:600; letter-spacing:0; margin-bottom:.55rem; font-family:'Manrope',sans-serif; }
.step p{ font-size:.92rem; font-weight:300; color:var(--on-ink-dim); line-height:1.62; }

/* the maker (equipa) */
.maker{ padding-block:clamp(2.6rem,5.5vw,4.6rem); overflow-x:clip; }
.maker__grid{ display:grid; gap:clamp(2.6rem,5vw,5rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){
  .maker__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  /* the DOM reads name-then-portrait; the composition keeps the piece on the left */
  .maker__piece{ order:-1; }
}
.maker__piece .oval{ max-width:min(430px,84vw); margin-inline:auto; }
/* two portraits side by side: the ellipse lies down to hold both */
.oval--duo{ aspect-ratio:1.42/1; }
.bench__piece .oval--duo, .maker__piece .oval--duo{ max-width:min(620px,100%); }
.maker h1,.maker h2{ font-size:var(--step-4); margin-block:0 .85rem; }
.maker__role{ font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; color:var(--teal); font-weight:600; margin-bottom:2.1rem; }

.disciplines{ display:grid; gap:.85rem; grid-template-columns:1fr; margin-top:2.2rem; }
@media (min-width:520px){ .disciplines{ grid-template-columns:repeat(2,1fr); } }
.disc{ padding:1.15rem 1.25rem; border:1px solid var(--metal-soft); border-radius:2px; transition:border-color .45s var(--ease), background .45s var(--ease); }
.disc:hover{ border-color:var(--metal-hard); background:rgba(255,255,255,.03); }
.disc b{ display:block; font-size:var(--step-0); font-weight:600; color:var(--on-ink); margin-bottom:.2rem; }
.disc span{ font-size:.8rem; color:var(--on-ink-dim); font-weight:300; }

/* pale interlude — the tray pulled out of the case */
.interlude{
  overflow-x:clip;
  background:linear-gradient(178deg, var(--platina-2), var(--platina-3));
  color:var(--on-pale);
  padding-block:clamp(3rem,6vw,5rem);
  border-block:1px solid var(--metal-hard);
}
.interlude h2{ font-family:'Prata',Georgia,serif; font-size:var(--step-3); color:var(--on-pale); margin-block:0 1.1rem; max-width:22ch; }
.interlude p{ color:var(--on-pale-dim); font-weight:300; max-width:56ch; font-size:var(--step-1); }
.interlude__grid{ display:grid; gap:clamp(2rem,4vw,3.4rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:860px){ .interlude__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.interlude .shelf{ box-shadow:0 0 0 1px rgba(11,40,48,.14), 0 30px 60px -40px rgba(4,20,26,.6); aspect-ratio:4/3; }

/* ==========================================================================
   Reveals — CSS-armed only when JS is present
   ========================================================================== */
.js [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:.8rem 1.2rem; background:var(--platina); color:var(--on-pale);
  font-weight:700; font-size:.85rem; border-radius:2px;
}
.skip:focus{ left:1rem; top:1rem; }


.tray--lead .tray__items{ margin-top:1.15rem; }

@media (max-width:640px){
  .hallmark-facts li{ flex:1 1 100%; border-left:0; border-top:1px solid var(--metal-soft); padding-inline:0; }
  .hallmark-facts li:first-child{ border-top:0; }
}

/* anchored jumps clear the sticky hallmark bar */
[id]{ scroll-margin-top:clamp(96px,14vh,132px); }


/* ==========================================================================
   Motion — the case is lit, then opened
   Focal sequence: the light rises, the piece is uncovered, the type is engraved.
   Everything else is feedback, and nothing loops off screen.
   ========================================================================== */

/* the light travels; what it rests on brightens. One source, one state. */
[data-light] .shelf img,
[data-light] .oval img{ transition:filter .9s var(--ease), transform 1.2s var(--ease-out); }
[data-light].lit-on .shelf img{ filter:saturate(.94) contrast(1.06) brightness(1.07); }
[data-light].lit-on .oval img{ filter:saturate(.96) contrast(1.06) brightness(1.04); }

/* engraved reveal: a burin edge travels up and the letterform appears behind it.
   Masked, not clipped — a fully clipped box reports no intersection and the
   observer would never arm it. */
.js [data-engrave]{
  -webkit-mask-image:linear-gradient(to bottom, #000 0 48%, transparent 53% 100%);
          mask-image:linear-gradient(to bottom, #000 0 48%, transparent 53% 100%);
  -webkit-mask-size:100% 200%;      mask-size:100% 200%;
  -webkit-mask-position:0 100%;     mask-position:0 100%;
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
  opacity:0; transform:translateY(14px);
  transition:-webkit-mask-position 1.05s var(--ease-out),
             mask-position 1.05s var(--ease-out),
             transform 1.05s var(--ease-out),
             opacity .5s linear;
  transition-delay:var(--d,0ms);
}
.js [data-engrave].in{
  -webkit-mask-position:0 0; mask-position:0 0;
  opacity:1; transform:none;
}
.js [data-engrave].engraved{ -webkit-mask-image:none; mask-image:none; }
.display .ln{ display:block; }

/* the case opens: the light uncovers the piece, which then settles */
.js [data-open] .oval{
  clip-path:ellipse(0% 0% at 50% 50%);
  transition:clip-path 1.25s var(--ease-out) var(--d,0ms);
}
.js [data-open] .oval img{
  transform:scale(1.1);
  transition:transform 1.7s var(--ease-out) var(--d,0ms), filter .9s var(--ease);
}
.js [data-open].in .oval{ clip-path:ellipse(78% 78% at 50% 50%); }
.js [data-open].in .oval img{ transform:none; }

/* feedback: a polish sweep across the metal */
.call{ position:relative; overflow:hidden; }
.call::after{
  content:''; position:absolute; inset:-1px; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.5) 50%, transparent 64%);
  transform:translateX(-125%);
  transition:transform .62s var(--ease-out);
}
.call:hover::after,.call:focus-visible::after{ transform:translateX(125%); }

/* nothing loops off screen */
.bezel.offscreen .band__track{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  .js [data-engrave],
  .js [data-engrave].in{
    -webkit-mask-image:none !important; mask-image:none !important;
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .js [data-open] .oval,
  .js [data-open] .oval img{ clip-path:none !important; transform:none !important; opacity:1 !important; transition:none !important; }
  .call::after{ display:none; }
  .vitrine-light{ scale:1 !important; }
}

/* one-handed reach: every navigational target clears 44px on a phone */
@media (max-width:760px){
  .navlink{ min-height:44px; display:flex; align-items:center; justify-content:center; }
  .bezel__ctl{ min-height:44px; }
  .foot__links{ gap:.2rem 1rem; }
  .foot__links a{ display:inline-flex; align-items:center; min-height:44px; }
  .counter__phone{ display:inline-block; padding-block:.25rem; }
}


/* ==========================================================================
   The inscription's pause control — WCAG 2.2.2: moving content that starts
   automatically and runs over 5s needs a mechanism to stop it.
   ========================================================================== */
.bezel__ctl{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1.1rem; padding:.6rem 1rem;
  background:transparent; border:1px solid var(--metal-hard); border-radius:2px;
  color:var(--on-ink); font:inherit;
  font-size:var(--step--1); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.bezel__ctl:hover{ background:rgba(255,255,255,.05); border-color:var(--teal); }
.bezel__ctl svg{ width:13px; height:13px; fill:currentColor; }
.bezel__ctl .ico-pause{ display:block; }
.bezel__ctl .ico-play{ display:none; }
.bezel.paused .bezel__ctl .ico-pause{ display:none; }
.bezel.paused .bezel__ctl .ico-play{ display:block; }
.bezel.paused .band__track,
.bezel.offscreen .band__track{ animation-play-state:paused; }

/* with no JS the track is never duplicated, so it must not travel */
html:not(.js) .band__track{ animation:none; }
html:not(.js) .bezel__ctl{ display:none; }

@media (prefers-reduced-motion: reduce){
  .bezel__ctl{ display:none; }
}


/* ==========================================================================
   Serviços — two branches of the same case
   Estética on the ink; Massagens e terapias pulled out onto the platina tray.
   Rank by inversion, never by a fourth colour.
   ========================================================================== */
.branch{ padding-block:clamp(3rem,6vw,5rem); border-top:1px solid var(--metal-soft); }
.branch__head{
  display:grid; gap:1.4rem clamp(2.5rem,6vw,5rem); grid-template-columns:1fr;
  align-items:end; margin-bottom:clamp(2.4rem,5vw,3.8rem);
}
@media (min-width:900px){ .branch__head{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.branch__head h2{ font-size:var(--step-5); }

.branch__jump{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.branch__jump a{
  display:inline-flex; align-items:center; min-height:40px;
  padding:.4rem .95rem; border-radius:100px;
  border:1px solid var(--metal); color:var(--on-ink);
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.branch__jump a:hover{ border-color:var(--teal); background:rgba(255,255,255,.04); }

.branch__group{ padding-top:clamp(2rem,4vw,3rem); margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--metal-soft); }
.branch__group:first-of-type{ margin-top:0; }
.branch__grouphead{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.6rem;
  margin-bottom:clamp(1.4rem,3vw,2rem);
}
.branch__grouphead h3{ font-family:'Prata',Georgia,serif; font-size:var(--step-3); }
.branch__grouphead p{ font-size:var(--step-0); font-weight:300; color:var(--on-ink-dim); max-width:48ch; }

.pieces-grid{ display:grid; gap:clamp(1rem,2vw,1.4rem); grid-template-columns:1fr; }
@media (min-width:640px){ .pieces-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .pieces-grid{ grid-template-columns:repeat(3,1fr); } }

.piece{
  display:flex; flex-direction:column; border-radius:2px; overflow:hidden;
  border:1px solid var(--metal);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  transition:border-color .55s var(--ease), transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.piece:hover{ transform:translateY(-4px); border-color:var(--metal-hard); box-shadow:0 34px 70px -44px rgba(0,0,0,.95); }
.piece:hover .shelf img{ transform:scale(1.05); }
.piece__shelf{ aspect-ratio:4/3; box-shadow:none; border-radius:0; }
.piece__body{ padding:clamp(1.3rem,2.2vw,1.65rem); display:flex; flex-direction:column; gap:.7rem; }
.piece h4{ font-family:'Prata',Georgia,serif; font-weight:400; font-size:var(--step-2); line-height:1.1; color:var(--on-ink); }
.piece p{ font-size:.92rem; font-weight:300; line-height:1.64; color:var(--on-ink-dim); }
.piece p em{ font-style:italic; }

/* the pale branch */
.branch--pale{
  overflow-x:clip;
  background:linear-gradient(178deg, var(--platina-2), var(--platina-3));
  color:var(--on-pale);
  border-block:1px solid var(--metal-hard);
}
.branch--pale :focus-visible{ outline-color:#0B4450; }
.branch--pale .branch__head h2,
.branch--pale .branch__grouphead h3,
.branch--pale .piece h4{ color:var(--on-pale); }
.branch--pale .lede,
.branch--pale .branch__grouphead p,
.branch--pale .piece p{ color:var(--on-pale-dim); }
.branch--pale .branch__group{ border-top-color:rgba(11,40,48,.14); }
.branch--pale .branch__jump a{ border-color:rgba(11,40,48,.22); color:var(--on-pale); }
.branch--pale .branch__jump a:hover{ border-color:#0F5C69; background:rgba(11,40,48,.04); }
.branch--pale .piece{
  border-color:rgba(11,40,48,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.28));
}
.branch--pale .piece:hover{ border-color:rgba(11,40,48,.3); box-shadow:0 30px 60px -40px rgba(4,20,26,.5); }
.branch__note{
  margin-top:clamp(2.4rem,5vw,3.4rem); padding-top:1.2rem;
  border-top:1px solid rgba(11,40,48,.14);
  font-size:.82rem; color:var(--on-pale-dim); max-width:70ch;
}

/* homepage: the two branches side by side, the second pulled onto the platina */
@media (min-width:760px){
  .trays--two{ grid-template-columns:repeat(2,1fr); }
  .trays--two .tray--lead{ grid-column:auto; flex-direction:column; }
  .trays--two .tray--lead .tray__shelf{ flex:none; aspect-ratio:16/10; }
  .trays--two .tray--lead .tray__body{ padding:clamp(1.35rem,2.2vw,1.7rem); justify-content:flex-start; }
}
.trays--two .tray h3{ font-size:var(--step-3); line-height:1.12; }
.trays--two .tray h3 a{ transition:color .35s var(--ease); }
.trays--two .tray h3 a:hover{ color:var(--teal); }
.trays--two .tray--lead h3 a:hover{ color:#0F5C69; }
.trays--two .tray--lead p{ font-size:.875rem; }

/* one branch per page: the crown already opens it, so the first group needs no rule */
.branch > .rail-wide > .branch__group:first-child{ border-top:0; padding-top:0; }
.branch__other{ margin-top:clamp(2.6rem,5vw,3.6rem); }
.branch--pale .ghost{ color:var(--on-pale); border-color:rgba(11,40,48,.3); }
.branch--pale .ghost:hover{ background:rgba(11,40,48,.04); border-color:#0F5C69; }
.pieces__more{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:clamp(2rem,4vw,3rem); }

/* ==========================================================================
   Hero fits the first screen on desktop: the hallmark facts are its floor.
   Height-driven sizes so short laptop screens (720–800px) still show the facts.
   ========================================================================== */
@media (min-width:940px){
  .vitrine{
    display:flex; flex-direction:column;
    min-height:calc(100svh - 75px);
    padding-block:clamp(1.6rem,4.5svh,4rem) clamp(1.4rem,3.5svh,2.6rem);
  }
  .vitrine__grid{ flex:1; }
  .vitrine .hallmark-facts{ margin-top:clamp(1.4rem,4svh,3rem); }
  .vitrine h1{
    font-size:min(var(--step-5), 9.2svh, 5.4vw);
    margin-block:0 clamp(1.2rem,3.2svh,2rem);
  }
  .vitrine .lede{ font-size:min(var(--step-1), 2.35svh); line-height:1.55; }
  .vitrine__cta{ margin-top:clamp(1.2rem,3.4svh,2.3rem); }
  .vitrine__piece .oval{
    height:min(554px, calc(100svh - 75px - 17rem));
    width:auto; max-width:none;
  }
  .vitrine .hallmark-facts li{ padding-block:clamp(.7rem,1.8svh,1.15rem); }
}

/* hero: the text column takes the room; the oval keeps only what it needs */
@media (min-width:940px){
  .vitrine__grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr); gap:clamp(2rem,4vw,4.5rem); }
  .vitrine .lede{ max-width:58ch; }
  .vitrine h1{ font-size:min(var(--step-5), 11.4svh, 6.4vw); }
}

/* homepage branches: compact trays — a strip of photograph, not a poster */
.trays--two .tray__shelf,
.trays--two .tray--lead .tray__shelf{ aspect-ratio:2/1; }
@media (min-width:760px){
  .trays--two .tray__shelf,
  .trays--two .tray--lead .tray__shelf{ aspect-ratio:3/1; }
}
.trays--two .tray__body,
.trays--two .tray--lead .tray__body{ padding:clamp(1.1rem,1.8vw,1.4rem) clamp(1.2rem,2vw,1.6rem); gap:.6rem; }
.trays--two .tray h3{ font-size:var(--step-2); line-height:1.14; }
.trays--two .tray p{ font-size:.86rem; line-height:1.55; }
.trays--two .tray__items{ gap:.35rem; padding-top:.2rem; }
.trays--two .tray__items li{ font-size:.68rem; padding:.22rem .55rem; }

/* ==========================================================================
   Hero portrait — a clean 4:5 print. No rim, no vignette, no wash:
   the photograph carries itself; only a soft shadow lifts it off the velvet.
   ========================================================================== */
.portrait{
  margin:0; position:relative; overflow:hidden;
  aspect-ratio:4/5; border-radius:6px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
}
.portrait img{ width:100%; height:100%; object-fit:cover; transition:transform 1.7s var(--ease-out); }
.vitrine__piece .portrait{ margin-inline:auto; max-width:min(440px,84vw); }
@media (min-width:940px){
  .vitrine__piece .portrait{ width:min(100%, 448px, calc((100svh - 75px - 15rem) * .8)); max-width:none; margin-inline:auto 0; }
}

/* entrance: uncovered from the bottom edge, then settles */
.js [data-open] .portrait{ clip-path:inset(100% 0 0 0 round 6px); transition:clip-path 1.25s var(--ease-out) var(--d,0ms); }
.js [data-open] .portrait img{ transform:scale(1.08); transition:transform 1.7s var(--ease-out) var(--d,0ms); }
.js [data-open].in .portrait{ clip-path:inset(0 0 0 0 round 6px); }
.js [data-open].in .portrait img{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .js [data-open] .portrait,
  .js [data-open] .portrait img{ clip-path:none !important; transform:none !important; transition:none !important; }
}

/* ==========================================================================
   Hero with a full-bleed photograph. A veil of ink runs left→right so the
   type reads on the left and the room shows on the right, then pools at the
   bottom so the hallmark facts sit on solid ground.
   ========================================================================== */
.vitrine--bg{ position:relative; isolation:isolate; }
.vitrine__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.vitrine__bg img{
  width:100%; height:100%; object-fit:cover; object-position:70% 50%;
  filter:saturate(.8) contrast(1.02);
  transform:scale(1.04); transition:transform 2.4s var(--ease-out);
}
.vitrine__bg.in img, html:not(.js) .vitrine__bg img{ transform:none; }
.vitrine__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,30,38,.94) 0%, rgba(7,30,38,.88) 44%, rgba(7,30,38,.52) 70%, rgba(7,30,38,.24) 100%),
    linear-gradient(180deg, rgba(7,30,38,.35) 0%, rgba(7,30,38,0) 30%, rgba(7,30,38,0) 62%, rgba(7,30,38,.92) 92%, var(--ink) 100%);
}
@media (max-width:939px){
  .vitrine__bg img{ object-position:78% 50%; }
  .vitrine__bg::after{
    background:linear-gradient(180deg, rgba(7,30,38,.72) 0%, rgba(7,30,38,.84) 45%, rgba(7,30,38,.95) 80%, var(--ink) 100%);
  }
}
.vitrine--bg .vitrine__grid{ grid-template-columns:1fr; align-content:center; }
.vitrine--bg .vitrine__grid > div{ max-width:760px; }
.vitrine--bg .lede{ color:#B9CDD2; }

/* mobile: the hero title flows as one sentence, no orphaned words */
@media (max-width:939px){ .vitrine h1 .ln{ display:inline; } }

/* ==========================================================================
   Service pages — "Nesta página" as a set of small trays
   ========================================================================== */
.index-cards{ display:grid; gap:.7rem; grid-template-columns:1fr; margin-top:1.1rem; }
@media (min-width:520px){ .index-cards{ grid-template-columns:repeat(2,1fr); } }
.index-cards a{
  display:flex; align-items:center; gap:.9rem;
  padding:.6rem .9rem .6rem .6rem; border-radius:4px;
  border:1px solid var(--metal);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .45s var(--ease-out);
}
.index-cards a:hover{ border-color:var(--teal); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.index-cards img{
  flex:none; width:58px; height:58px; object-fit:cover; border-radius:3px;
  filter:saturate(.85);
}
.index-card__txt{ display:flex; flex-direction:column; gap:.1rem; min-width:0; flex:1; }
.index-cards .t{ font-family:'Prata',Georgia,serif; font-size:var(--step-1); line-height:1.2; color:var(--on-ink); }
.index-cards .d{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--on-ink-dim); }
.index-cards svg{ flex:none; width:16px; height:16px; color:var(--teal); transform:rotate(90deg); transition:transform .4s var(--ease-out); }
.index-cards a:hover svg{ transform:rotate(90deg) translateX(3px); }

/* ==========================================================================
   Contact CTAs
   ========================================================================== */
/* per service: a quiet call link at the foot of each card */
.piece__body{ flex:1; }
.piece__call{
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  margin-top:auto; padding-top:.5rem; min-height:44px;
  font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal); transition:color .3s var(--ease), gap .35s var(--ease-out);
}
.piece__call svg{ width:14px; height:14px; }
.piece__call:hover{ color:var(--on-ink); gap:.7rem; }
.branch--pale .piece__call{ color:#0F5C69; }
.branch--pale .piece__call:hover{ color:var(--on-pale); }

/* the band: one sentence of reassurance and the number */
.cta-wrap{ padding-block:clamp(2.4rem,5vw,3.6rem); }
.cta-band{
  display:grid; gap:1.4rem 2.4rem; grid-template-columns:1fr; align-items:center;
  margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.6rem,3.4vw,2.4rem) clamp(1.4rem,3.4vw,2.6rem);
  border:1px solid var(--metal-hard); border-radius:4px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(87,185,185,.16), rgba(87,185,185,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
}
.cta-wrap .cta-band{ margin-top:0; }
@media (min-width:820px){ .cta-band{ grid-template-columns:1fr auto; } }
.cta-band__t{ font-family:'Prata',Georgia,serif; font-size:var(--step-3); color:var(--on-ink); margin-bottom:.5rem; }
.cta-band p{ font-weight:300; color:var(--on-ink-dim); max-width:56ch; }
.branch--pale .cta-band{
  border-color:rgba(11,40,48,.18);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(87,185,185,.22), rgba(87,185,185,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
}
.branch--pale .cta-band__t{ color:var(--on-pale); }
.branch--pale .cta-band p{ color:var(--on-pale-dim); }

/* the floating call: phones only, after the hero, gone at the counter */
.fab-call{
  position:fixed; z-index:70; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  display:none; align-items:center; gap:.55rem;
  padding:.85rem 1.2rem; border-radius:100px;
  font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-deep); background:var(--luz);
  box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 14px 34px -10px rgba(4,20,26,.9);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease-out);
}
.fab-call svg{ width:17px; height:17px; }
.fab-call.show{ opacity:1; transform:none; pointer-events:auto; }
@media (max-width:760px){ .fab-call{ display:inline-flex; } }
@media (prefers-reduced-motion: reduce){ .fab-call{ transition:none; } }
.index-cards li{ display:flex; }
.index-cards a{ width:100%; }
.index-cards .t{ font-size:1.08rem; }
.index-cards img{ width:52px; height:52px; }
.index-cards{ grid-template-columns:minmax(0,1fr); }
@media (min-width:520px){ .index-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:940px) and (max-width:1199px){ .index-cards{ grid-template-columns:minmax(0,1fr); } }

/* "Nesta página": larger trays */
.index-cards{ gap:.9rem; margin-top:1.3rem; }
.index-cards a{ gap:1.1rem; padding:.85rem 1.2rem .85rem .85rem; border-radius:5px; }
.index-cards img{ width:84px; height:84px; border-radius:4px; }
.index-cards .t{ font-size:var(--step-2); line-height:1.15; }
.index-cards .d{ font-size:.76rem; margin-top:.2rem; }
.index-cards svg{ width:18px; height:18px; }
.crown__index h2{ font-size:var(--step-2); }
@media (min-width:940px){ .crown__grid:has(.index-cards){ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); } }
/* two groups only: stack them, each tray at full width */
.index-cards:has(> li:nth-child(2):last-child){ grid-template-columns:minmax(0,1fr); }
.index-cards .t{ overflow-wrap:break-word; }
/* two trays per row on desktop: size the type to the tray, not the page */
@media (min-width:1200px){
  .index-cards:not(:has(> li:nth-child(2):last-child)) img{ width:68px; height:68px; }
  .index-cards:not(:has(> li:nth-child(2):last-child)) .t{ font-size:clamp(1.15rem, .55rem + .8vw, 1.5rem); }
  .index-cards:not(:has(> li:nth-child(2):last-child)) a{ gap:.95rem; padding-right:1rem; }
}

/* home hero: a little more room for the text block */
.vitrine--bg .vitrine__grid > div{ max-width:880px; }
@media (min-width:940px){ .vitrine--bg .lede{ max-width:66ch; } }


/* ==========================================================================
   MOBILE — one-row bar, drawer menu, swipeable service rows, legible labels
   ========================================================================== */
.hallmark__menu{ display:none; }
.swipe-hint{ display:none; }

@media (max-width:760px){
  /* the bar: logo · call · menu, one row */
  .hallmark__in{ flex-wrap:nowrap; min-height:60px; padding-block:.45rem; column-gap:.5rem; }
  .hallmark__logo img{ height:32px; }
  .hallmark .call{ margin-left:auto; padding:.62rem .85rem; font-size:.8rem; letter-spacing:.06em; }
  .hallmark__menu{
    display:inline-flex; align-items:center; gap:.5rem; flex:none;
    min-height:44px; padding:.5rem .75rem; margin-right:-.35rem;
    background:transparent; border:1px solid var(--metal); border-radius:2px;
    color:var(--on-ink); font:inherit; font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    cursor:pointer;
  }
  .hallmark__menu-ico{ position:relative; width:16px; height:10px; }
  .hallmark__menu-ico i{
    position:absolute; left:0; right:0; height:1.5px; background:currentColor; border-radius:1px;
    transition:transform .35s var(--ease-out), top .35s var(--ease-out);
  }
  .hallmark__menu-ico i:first-child{ top:0; }
  .hallmark__menu-ico i:last-child{ top:8.5px; }
  .nav-open .hallmark__menu-ico i:first-child{ top:4.25px; transform:rotate(45deg); }
  .nav-open .hallmark__menu-ico i:last-child{ top:4.25px; transform:rotate(-45deg); }

  /* the drawer */
  .hallmark__nav{
    position:absolute; left:0; right:0; top:100%;
    order:0; width:auto; margin:0; padding:.4rem 0 1rem;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(7,30,38,.98); border-top:1px solid var(--metal-soft); border-bottom:1px solid var(--metal);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s var(--ease), transform .4s var(--ease-out), visibility 0s linear .4s;
  }
  .nav-open .hallmark__nav{ opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--ease), transform .4s var(--ease-out), visibility 0s; }
  .navlink{
    flex:none; justify-content:flex-start; text-align:left;
    min-height:54px; padding:.9rem var(--gut);
    font-family:'Prata',Georgia,serif; font-size:1.35rem; font-weight:400; letter-spacing:0; text-transform:none;
    color:var(--on-ink); border-bottom:1px solid var(--metal-soft);
  }
  .navlink::after{ left:var(--gut); right:auto; width:28px; bottom:.7rem; }
  .navlink[aria-current="page"]{ color:var(--teal); }

  /* legible labels: nothing uppercase below 12px */
  .call, .ghost{ font-size:.8rem; }
  .hallmark-facts span, .chit__src, .counter__meta dt, .maker__role,
  .foot__links a, .index-cards .d{ font-size:.75rem; }
  .piece__call{ font-size:.8rem; }
  .tray__items li{ font-size:.75rem; }

  /* hero facts: a 2×2 plate instead of four rows */
  .hallmark-facts{ display:grid; grid-template-columns:1fr 1fr; }
  .hallmark-facts li,
  .hallmark-facts li:first-child{ padding:1rem .9rem 1rem 0; border:0; border-top:1px solid var(--metal-soft); }
  .hallmark-facts li:nth-child(-n+2){ border-top:0; }
  .hallmark-facts li:nth-child(even){ padding-left:.9rem; border-left:1px solid var(--metal-soft); }
  .hallmark-facts b{ font-size:1.05rem; white-space:nowrap; }

  /* empty portrait frame: smaller while it waits */
  .bench__piece .oval, .maker__piece .oval{ max-width:min(240px,64vw); }
  .bench__piece .oval--duo, .maker__piece .oval--duo{ max-width:100%; }
}

/* services: each group becomes a swipeable row on phones */
@media (max-width:639px){
  .swipe-hint{
    display:flex; align-items:center; gap:.45rem; margin:-.6rem 0 1rem;
    font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--on-ink-dim);
  }
  .swipe-hint svg{ width:14px; height:14px; color:var(--teal); }
  .branch--pale .swipe-hint{ color:var(--on-pale-dim); }
  .branch--pale .swipe-hint svg{ color:#0F5C69; }

  .pieces-grid{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%;
    gap:.8rem; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) .6rem;
    scrollbar-width:none;
  }
  .pieces-grid::-webkit-scrollbar{ display:none; }
  .piece{ scroll-snap-align:start; }
  .piece:hover{ transform:none; }
  .piece__shelf{ aspect-ratio:16/10; }
  .piece__body{ padding:1.15rem 1.15rem .6rem; }
  .piece h4{ font-size:1.35rem; }
  .piece p{ font-size:.9rem; }
  /* horizontal rows reveal as they arrive, not on vertical scroll */
  .js .pieces-grid [data-reveal]{ opacity:1; transform:none; }
  .branch__group{ padding-top:1.8rem; margin-top:1.8rem; }
  .branch__grouphead{ margin-bottom:1rem; }
  .branch__grouphead h3{ font-size:1.9rem; }
}

/* reviews on phones: tighter spacing, slightly quicker drift */
@media (max-width:760px){
  .band__track{ gap:.9rem; animation-duration:calc(var(--dur,72s) * .68); }
  .chit{ margin:0; }
  .band + .band{ margin-top:.55rem; }
}

/* homepage branches: the whole tray is the link (title link stretched over it) */
.trays--two .tray{ cursor:pointer; }
.trays--two .tray h3 a::after{ content:''; position:absolute; inset:0; z-index:3; }
.trays--two .tray h3 a:focus-visible{ outline:none; }
.trays--two .tray:has(h3 a:focus-visible){ outline:2px solid var(--teal); outline-offset:3px; }
.trays--two .tray:hover h3 a{ color:var(--teal); }
.trays--two .tray--lead:hover h3 a{ color:#0F5C69; }

/* mobile menu: a side drawer from the right, under the bar, over a scrim.
   (The bar has backdrop-filter, which makes it the containing block for
   fixed children — so the drawer is absolutely placed from the bar's foot.) */
@media (max-width:760px){
  .hallmark__nav{
    left:auto; right:0; top:100%;
    width:min(84vw,340px); height:calc(100dvh - 100%);
    padding:.6rem 0 calc(1.4rem + env(safe-area-inset-bottom));
    overflow-y:auto;
    border-top:0; border-bottom:0; border-left:1px solid var(--metal);
    background:linear-gradient(180deg, rgba(12,42,52,.99), rgba(7,30,38,.99));
    box-shadow:-30px 0 60px -20px rgba(0,0,0,.85);
    opacity:1; transform:translateX(102%);
    transition:transform .45s var(--ease-out), visibility 0s linear .45s;
  }
  .nav-open .hallmark__nav{
    transform:none;
    transition:transform .45s var(--ease-out), visibility 0s;
  }
  .hallmark::after{
    content:''; position:absolute; left:0; right:0; top:100%;
    height:calc(100dvh - 100%);
    background:rgba(4,20,26,.62);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .35s var(--ease), visibility 0s linear .35s;
  }
  .nav-open::after{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s var(--ease), visibility 0s; }
  .navlink{ border-bottom-color:var(--metal-soft); }
  .navlink:first-child{ border-top:0; }
  .hallmark__nav .navlink{ opacity:0; transform:translateX(18px); transition:opacity .35s var(--ease), transform .45s var(--ease-out), color .3s var(--ease); }
  .nav-open .hallmark__nav .navlink{ opacity:1; transform:none; }
  .nav-open .hallmark__nav .navlink:nth-child(1){ transition-delay:.08s; }
  .nav-open .hallmark__nav .navlink:nth-child(2){ transition-delay:.13s; }
  .nav-open .hallmark__nav .navlink:nth-child(3){ transition-delay:.18s; }
  .nav-open .hallmark__nav .navlink:nth-child(4){ transition-delay:.23s; }
  html.nav-lock{ overflow:hidden; }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){
  .hallmark__nav, .hallmark__nav .navlink, .hallmark::after{ transition:none !important; }
}
/* the parked drawer sits past the right edge: clip it without making a scroller */
html, body{ overflow-x:clip; }
@supports not (overflow-x:clip){ body{ overflow-x:hidden; } }
@media (max-width:760px){
  .hallmark::after{ z-index:1; }
  .hallmark__nav{ z-index:2; }
}
.nav-lock .fab-call{ opacity:0; pointer-events:none; }

/* ==========================================================================
   Richer drawer: thumbnails, a line per page, group shortcuts, contact block.
   Desktop keeps the four plain labels.
   ========================================================================== */
.navlink__img, .navlink__d, .navlink__sub, .drawer-extra{ display:none; }
.navlink__txt{ display:contents; }

@media (max-width:760px){
  .hallmark__nav{ display:flex; padding:0; }
  .hallmark__nav .navlink{
    display:flex; align-items:center; gap:.95rem;
    min-height:0; padding:.85rem var(--gut);
    font-family:'Manrope',sans-serif; font-size:1rem; text-transform:none; letter-spacing:0;
    border-bottom:1px solid var(--metal-soft);
    position:relative;
  }
  .hallmark__nav .navlink::after{ display:none; }
  .hallmark__nav .navlink:has(+ .navlink__sub){ border-bottom:0; padding-bottom:.55rem; }
  .navlink__img{ display:block; flex:none; width:52px; height:52px; border-radius:4px; object-fit:cover; filter:saturate(.85); }
  .navlink__txt{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
  .navlink__t{ font-family:'Prata',Georgia,serif; font-size:1.3rem; line-height:1.15; color:var(--on-ink); }
  .navlink__d{ display:block; font-size:.8rem; font-weight:400; color:var(--on-ink-dim); }
  .hallmark__nav .navlink[aria-current="page"]{ background:rgba(87,185,185,.08); }
  .hallmark__nav .navlink[aria-current="page"]::before{
    content:''; position:absolute; left:0; top:.7rem; bottom:.7rem; width:3px; border-radius:0 2px 2px 0; background:var(--luz);
  }
  .hallmark__nav .navlink[aria-current="page"] .navlink__t{ color:var(--teal); }
  .hallmark__nav .navlink[aria-current="page"]:has(+ .navlink__sub)::before{ bottom:0; }

  .navlink__sub{
    display:flex; flex-wrap:wrap; gap:.4rem;
    padding:0 var(--gut) .9rem calc(var(--gut) + 52px + .95rem);
    border-bottom:1px solid var(--metal-soft);
  }
  .navlink__sub a{
    display:inline-flex; align-items:center; min-height:34px; padding:.3rem .7rem;
    border:1px solid var(--metal); border-radius:100px;
    font-size:.76rem; font-weight:600; letter-spacing:.02em; color:var(--on-ink-dim);
    transition:border-color .3s var(--ease), color .3s var(--ease);
  }
  .navlink__sub a:active, .navlink__sub a:hover{ border-color:var(--teal); color:var(--on-ink); }
  .navlink[aria-current="page"] + .navlink__sub{ background:rgba(87,185,185,.08); }

  .drawer-extra{
    display:flex; flex-direction:column; gap:.9rem;
    margin-top:auto; padding:1.3rem var(--gut) 1.4rem;
    border-top:1px solid var(--metal);
    background:linear-gradient(180deg, rgba(87,185,185,.07), rgba(87,185,185,.02));
  }
  .drawer-extra__t{ font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink-dim); }
  .drawer-extra__call{ justify-content:center; width:100%; }
  .drawer-extra__addr{ display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; line-height:1.5; color:var(--on-ink); }
  .drawer-extra__addr svg{ flex:none; width:17px; height:17px; margin-top:.15rem; color:var(--teal); }

  /* entrance: every row slides in, one after another */
  .hallmark__nav .navlink{ opacity:1; transform:none; }
  .hallmark__nav > *{ opacity:0; transform:translateX(18px); transition:opacity .35s var(--ease), transform .45s var(--ease-out); }
  .nav-open .hallmark__nav > *{ opacity:1; transform:none; }
  .nav-open .hallmark__nav > :nth-child(2){ transition-delay:.05s; }
  .nav-open .hallmark__nav > :nth-child(3){ transition-delay:.09s; }
  .nav-open .hallmark__nav > :nth-child(4){ transition-delay:.13s; }
  .nav-open .hallmark__nav > :nth-child(5){ transition-delay:.17s; }
  .nav-open .hallmark__nav > :nth-child(6){ transition-delay:.21s; }
  .nav-open .hallmark__nav > :nth-child(7){ transition-delay:.25s; }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){
  .hallmark__nav > *{ transition:none !important; opacity:1 !important; transform:none !important; }
}

/* footer credit */
.foot__credit{ width:100%; margin-top:-.6rem; font-size:.73rem; letter-spacing:.03em; color:var(--on-ink-dim); }
.foot__credit a{ color:var(--on-ink); text-decoration:underline; text-decoration-color:var(--metal-hard); text-underline-offset:3px; transition:color .3s var(--ease), text-decoration-color .3s var(--ease); }
.foot__credit a:hover{ color:var(--teal); text-decoration-color:var(--teal); }
@media (max-width:760px){ .foot__credit a{ display:inline-block; padding-block:.7rem; margin-block:-.7rem; } }

/* footer social */
.foot__social{ display:inline-flex; align-items:center; gap:.45rem; }
.foot__social svg{ width:16px; height:16px; flex:none; }

/* homepage: three branches */
@media (min-width:760px) and (max-width:1079px){
  .trays--three{ grid-template-columns:1fr; }
  .trays--three .tray, .trays--three .tray--lead{ flex-direction:row; }
  .trays--three .tray__shelf, .trays--three .tray--lead .tray__shelf{ flex:0 0 38%; aspect-ratio:auto; }
}
@media (min-width:1080px){
  .trays--three{ grid-template-columns:repeat(3,1fr); }
  .trays--three .tray__shelf, .trays--three .tray--lead .tray__shelf{ aspect-ratio:2/1; }
}

/* five links + call between tablet and small laptop: tighten, never squash the call */
@media (min-width:761px) and (max-width:1023px){
  .hallmark__in{ gap:.6rem; }
  .hallmark__call .call{ flex:none; padding:.66rem .85rem; letter-spacing:.06em; }
  .hallmark__nav{ gap:0; }
  .navlink{ padding:.6rem .55rem; letter-spacing:.1em; font-size:.68rem; }
  .navlink::after{ left:.55rem; right:.55rem; }
}

/* ==========================================================================
   O nosso espaço — real photographs of the clinic
   ========================================================================== */
.space{ padding-block:clamp(3.4rem,6.5vw,5.5rem); border-top:1px solid var(--metal-soft); }
.space__grid{ display:grid; gap:clamp(.6rem,1.2vw,1rem); grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:dense; }
.space__item{ position:relative; }
.space__item--lead, .space__item--wide{ grid-column:span 2; }
@media (min-width:1024px){
  .space__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(170px,15vw,240px); }
  .space__item--lead{ grid-row:span 2; }
}
.space__link{
  position:relative; display:block; height:100%; overflow:hidden; border-radius:3px;
  aspect-ratio:4/3; box-shadow:0 0 0 1px var(--metal);
  background:var(--ink-2);
}
@media (min-width:1024px){ .space__link{ aspect-ratio:auto; } }
.space__link img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out), filter .6s var(--ease); filter:saturate(.95); }
.space__link:hover img{ transform:scale(1.04); filter:saturate(1.02) brightness(1.03); }
.space__link::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,20,26,0) 55%, rgba(4,20,26,.72) 100%); pointer-events:none; }
.space__cap{
  position:absolute; left:.9rem; bottom:.75rem; z-index:1;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#EAF2F3;
}
.space__item--lead .space__cap{ font-family:'Prata',Georgia,serif; font-size:var(--step-1); letter-spacing:0; text-transform:none; }
.space__link:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

/* phones: a swipeable row, like the service rows */
@media (max-width:639px){
  .space__grid{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%;
    gap:.7rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) .4rem; scrollbar-width:none;
  }
  .space__grid::-webkit-scrollbar{ display:none; }
  .space__item, .space__item--lead, .space__item--wide{ grid-column:auto; scroll-snap-align:start; }
  .js .space__grid [data-reveal]{ opacity:1; transform:none; }
  .space .swipe-hint{ margin:-.4rem 0 1rem; }
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:rgba(4,16,21,.96); color:#EAF2F3;
}
.lightbox[open]{ display:grid; place-items:center; }
.lightbox::backdrop{ background:rgba(4,16,21,.9); }
.lightbox img{ max-width:min(92vw,1440px); max-height:82dvh; object-fit:contain; border-radius:3px; box-shadow:0 30px 80px -30px rgba(0,0,0,.9); }
.lightbox__cap{ position:absolute; left:0; right:0; bottom:clamp(1rem,4vh,2.2rem); text-align:center; font-family:'Prata',Georgia,serif; font-size:var(--step-1); }
.lightbox button{
  position:absolute; display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#EAF2F3;
  font:inherit; font-size:1.4rem; line-height:1; cursor:pointer; transition:background .3s var(--ease);
}
.lightbox button:hover{ background:rgba(255,255,255,.16); }
.lightbox__close{ top:clamp(.8rem,3vh,1.6rem); right:clamp(.8rem,3vw,1.6rem); font-size:1.1rem !important; }
.lightbox__prev{ left:clamp(.6rem,3vw,2rem); top:50%; transform:translateY(-50%); }
.lightbox__next{ right:clamp(.6rem,3vw,2rem); top:50%; transform:translateY(-50%); }
@media (max-width:639px){ .lightbox__prev, .lightbox__next{ top:auto; bottom:clamp(3.4rem,9vh,4.6rem); transform:none; } }

/* ==========================================================================
   Phone cost notice — required beside the number (DL 59/2021)
   ========================================================================== */
.tel-cost{ display:block; margin-top:.6rem; font-size:.72rem; font-weight:400; letter-spacing:.04em; color:inherit; opacity:.72; }
.tel-cost--inline{ display:inline; margin:0; font-size:.86em; }
.cta-band > .tel-cost{ margin-top:-.7rem; }
@media (min-width:820px){ .cta-band > .tel-cost{ grid-column:2; justify-self:center; } }
.counter__meta dd .tel-cost{ font-weight:300; }

/* ==========================================================================
   Legal pages — aviso legal, cookies
   ========================================================================== */
.legal{ padding-block:clamp(2.6rem,5.5vw,4.6rem); }
.legal__in{ max-width:76ch; }
.legal h1{ font-size:var(--step-4); margin-block:0 .6rem; }
.legal__upd{ font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--on-ink-dim); margin-bottom:2.6rem; }
.legal h2{ font-family:'Prata',Georgia,serif; font-size:var(--step-2); font-weight:400; color:var(--on-ink); margin:2.6rem 0 .9rem; padding-top:1.4rem; border-top:1px solid var(--metal-soft); }
.legal p, .legal li{ font-weight:300; line-height:1.7; color:var(--on-ink-dim); }
.legal p + p{ margin-top:.9rem; }
.legal strong{ font-weight:600; color:var(--on-ink); }
.legal ul{ margin-top:.9rem; display:grid; gap:.4rem; padding-left:1.1rem; list-style:disc; }
.legal a{ color:var(--on-ink); text-decoration:underline; text-decoration-color:var(--metal-hard); text-underline-offset:3px; transition:color .3s var(--ease); }
.legal a:hover{ color:var(--teal); }

.foot__legal{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; width:100%; margin-top:-.6rem; }
.foot__legal a{ font-size:.73rem; letter-spacing:.03em; color:var(--on-ink-dim); text-decoration:underline; text-decoration-color:var(--metal-soft); text-underline-offset:3px; transition:color .3s var(--ease); }
.foot__legal a:hover{ color:var(--on-ink); }

/* header: the cost notice sits under the call button */
.hallmark__call{ display:flex; flex-direction:column; align-items:center; flex:none; }
.hallmark__call .tel-cost{ margin-top:.28rem; font-size:.6rem; letter-spacing:.03em; white-space:nowrap; }
@media (max-width:760px){
  .hallmark__call{ margin-left:auto; }
  .hallmark__call .call{ margin-left:0; }
  .hallmark__call .tel-cost{ font-size:.54rem; margin-top:.2rem; }
}
.vitrine__cta > .tel-cost{ order:3; flex-basis:100%; margin-top:-.25rem; }