:root{
  --bg:#fafaf9;
  --ink:#0c0c0c;
  --ink-2:#3d3d3d;
  --ink-3:#8a8a8a;
  --line:rgba(12,12,12,.10);
  --line-2:rgba(12,12,12,.05);
  --paper:#f4f3f0;
  --sans:"Geist", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, monospace;

  /* Grid system — single source of truth for horizontal rhythm. */
  --gutter:32px;
  --max:1280px;

  /* Design tokens — border-radius por papel.
   * Edita aqui e propaga a todos os fields, botões, frames e etiquetas. */
  --radius-input:0px;
  --radius-button:0px;
  --radius-card:0px;   /* frames de imagens (hero, color-stage, object--photo) */
  --radius-tag:0px;    /* etiquetas/pills (corner labels nas imagens) */
}
@media (max-width:1100px){ :root{ --gutter:28px } }
@media (max-width:720px){  :root{ --gutter:20px } }

html[data-theme="dark"]{
  --bg:#0a0a0a;
  --ink:#f5f5f4;
  --ink-2:#c9c9c7;
  --ink-3:#7a7a78;
  --line:rgba(245,245,244,.12);
  --line-2:rgba(245,245,244,.06);
  --paper:#111110;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","ss02","cv11"}
body{overflow-x:hidden}

/* Coordena a troca de tema: durante o switch todos os elementos animam
 * com o mesmo timing, removendo o efeito "staggered". A classe
 * `theme-transitioning` é adicionada pelo JS no instante do toggle e
 * removida ao fim do tempo desta transition. */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after{
  transition:background-color .3s ease, background .3s ease,
             color .3s ease, border-color .3s ease,
             fill .3s ease, stroke .3s ease,
             box-shadow .3s ease,
             outline-color .3s ease !important;
  transition-delay:0s !important;
}
@media (prefers-reduced-motion: reduce){
  html.theme-transitioning,
  html.theme-transitioning *,
  html.theme-transitioning *::before,
  html.theme-transitioning *::after{
    transition:none !important;
  }
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--bg)}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  background:transparent;pointer-events:none}
.scroll-progress .bar{height:100%;width:0%;background:var(--ink);
  transition:width .15s linear}

/* Hero parallax target */
.hero-product{will-change:transform;contain:paint}

/* Each section is opaque — prevents content from one bleeding into another */
section{position:relative;background:var(--bg);will-change:transform,opacity;
  isolation:isolate}
.feature-bleed{background:var(--paper)}

/* Parallax layers stay clipped inside their section */
.parallax-bg{position:absolute;inset:0;z-index:0;
  pointer-events:none;will-change:transform}
.parallax-bg.tone-1{background:radial-gradient(60% 50% at 50% 50%,
  color-mix(in srgb, var(--ink) 5%, transparent), transparent 70%)}
.parallax-bg.tone-2{background:radial-gradient(70% 60% at 30% 40%,
  color-mix(in srgb, var(--ink) 4%, transparent), transparent 70%)}
.parallax-bg.tone-3{background:radial-gradient(50% 70% at 70% 60%,
  color-mix(in srgb, var(--ink) 5%, transparent), transparent 70%)}

/* Section enter — fade + small lift, no large slide that would peek into neighbours */
html.has-reveal section{
  transition:opacity 1s cubic-bezier(.16,.84,.24,1),
             transform 1s cubic-bezier(.16,.84,.24,1);
}
html.has-reveal section.section-enter{opacity:0;transform:translateY(24px)}
html.has-reveal section.section-enter.in{opacity:1;transform:translateY(0)}

/* Big floating section number, clipped inside its own section via overflow:hidden */
.floater{position:absolute;pointer-events:none;user-select:none;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(140px, 26vw, 380px);
  line-height:.85;letter-spacing:-.06em;
  color:color-mix(in srgb, var(--ink) 4%, transparent);
  z-index:0;will-change:transform;
  top:.05em;right:.04em}
.floater.left{left:.04em;right:auto}

/* Content always sits above floaters */
.wrap, .nav, .hero-foot, .grid-features, .specs, .color-stage,
.swatches, .feature-bleed .inner, .cta-grid, blockquote, cite{
  position:relative;z-index:1}

/* ================= APPOINTMENT MODAL ================= */
.appt-overlay{position:fixed;inset:0;z-index:100;
  background:color-mix(in srgb, var(--ink) 35%, transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.appt-overlay.open{opacity:1;pointer-events:auto}
.appt-modal{position:fixed;left:50%;top:50%;z-index:101;
  transform:translate(-50%,-48%) scale(.98);opacity:0;pointer-events:none;
  width:min(880px, calc(100vw - 32px));
  height:min(780px, calc(100dvh - 32px));
  background:var(--bg);border:.5px solid var(--line);border-radius:var(--radius-card);
  box-shadow:0 30px 80px -20px color-mix(in srgb, var(--ink) 40%, transparent),
             0 1px 0 rgba(255,255,255,.06) inset;
  overflow:hidden;display:flex;flex-direction:column;
  transition:opacity .4s cubic-bezier(.16,.84,.24,1),
             transform .4s cubic-bezier(.16,.84,.24,1)}
.appt-modal.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
#meridian-appt-form-wrap{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}
#meridian-appt-confirm-wrap{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  overflow-y:auto;
}
@media (max-width:900px){
  .appt-modal{
    width:100vw;
    height:100dvh;
    top:0;left:0;
    transform:none;
    border-radius:0;
    border:0;
  }
  .appt-modal.open{transform:none}
}
.appt-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  grid-template-rows:minmax(0,1fr);
  flex:1;
  min-height:0;
  overflow:hidden;
  height:100%;
}
@media (max-width:900px){
  .appt-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    flex:1;
    min-height:0;
    overflow:hidden;
    height:100%;
  }
}
.appt-aside{padding:40px 32px;background:var(--paper);
  border-right:.5px solid var(--line);display:flex;flex-direction:column;gap:20px;
  min-height:0;overflow-y:auto;height:100%;box-sizing:border-box;}
.appt-aside .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.appt-aside h3{font-family:var(--sans);font-weight:300;font-size:32px;
  line-height:1;letter-spacing:-.03em;margin:0;max-width:14ch}
.appt-aside h3 .medium{font-weight:500;color:var(--ink-2)}
.appt-aside p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0;max-width:32ch}
.appt-aside .meta{margin-top:auto;display:flex;flex-direction:column;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.appt-aside .meta div span:last-child{color:var(--ink);float:right}
@media (max-width:900px){
  .appt-aside{
    border-right:0;border-bottom:.5px solid var(--line);
    padding:clamp(10px, 2.4vw, 18px) clamp(56px, 9vw, 72px) clamp(10px, 2.4vw, 16px) clamp(14px, 4vw, 24px);
    gap:clamp(8px, 2vw, 14px);
    flex-direction:row;align-items:center;justify-content:flex-start;
    min-height:0;
  }
  .appt-aside .eyebrow{
    flex-shrink:0;
    font-size:clamp(9px, 1.4vw, 11px);
    letter-spacing:.1em;
  }
  .appt-aside h3{
    font-size:clamp(13px, 2.4vw, 18px);
    font-weight:500;color:var(--ink);
    line-height:1.15;max-width:none;letter-spacing:-.01em;
    margin:0;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .appt-aside p{display:none !important}
  .appt-aside .meta{display:none !important}
}
/* very small screens: kill the eyebrow too so the title gets all the room */
@media (max-width:480px){
  .appt-aside{padding-left:16px;padding-right:60px;gap:0}
  .appt-aside .eyebrow{display:none}
  .appt-aside h3{font-size:15px}
  .appt-aside h3 .medium{display:none}
}
.appt-body{padding:40px 32px 0;display:flex;flex-direction:column;gap:24px;
  overflow-y:auto;min-height:0;height:100%;box-sizing:border-box;}
@media (max-width:900px){
  .appt-body{
    padding:16px 16px 0;gap:16px;
    flex:1;min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}
.appt-close{position:absolute;top:14px;right:14px;z-index:2;
  width:36px;height:36px;border-radius:999px;border:.5px solid var(--line);
  background:var(--bg);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:default;transition:background .2s ease, color .2s ease}
.appt-close:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.appt-close svg{width:16px;height:16px}

.appt-step{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:12px}
.appt-step .bar{flex:1;height:.5px;background:var(--line)}

.appt-section{display:flex;flex-direction:column;gap:10px}
.appt-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}

.appt-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (max-width:900px){
  .appt-tiles{gap:6px}
  .appt-tile{padding:10px 10px;gap:2px;min-height:54px}
  .appt-tile .t{font-size:13px}
  .appt-tile .s{font-size:11px;line-height:1.3}
}
@media (max-width:400px){
  .appt-tiles{grid-template-columns:1fr}
  .appt-tile{min-height:auto;flex-direction:row;align-items:center;gap:8px}
  .appt-tile .s{display:none}
}
.appt-tile{appearance:none;border:.5px solid var(--line);background:var(--bg);
  color:var(--ink);text-align:left;padding:14px 16px;border-radius:var(--radius-input);
  cursor:default;transition:border-color .2s ease, background .2s ease;
  display:flex;flex-direction:column;gap:4px;font:inherit}
.appt-tile:hover{border-color:color-mix(in srgb, var(--ink) 40%, transparent)}
.appt-tile[aria-pressed="true"]{border-color:var(--ink);
  background:color-mix(in srgb, var(--ink) 4%, var(--bg))}
.appt-tile .t{font-size:14px;font-weight:500;letter-spacing:-.005em}
.appt-tile .s{font-size:12px;color:var(--ink-3);letter-spacing:.02em}

.appt-dates{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:900px){ .appt-dates{grid-template-columns:repeat(4,1fr);gap:6px}
  .appt-date{padding:8px 4px;min-height:56px}
  .appt-date .d{font-size:16px}
}
@media (max-width:380px){ .appt-dates{grid-template-columns:repeat(3,1fr)} }
.appt-date{appearance:none;border:.5px solid var(--line);background:var(--bg);
  color:var(--ink);padding:10px 8px;border-radius:var(--radius-input);cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--mono);transition:border-color .2s ease, background .2s ease}
.appt-date:hover{border-color:color-mix(in srgb, var(--ink) 40%, transparent)}
.appt-date[aria-pressed="true"]{border-color:var(--ink);
  background:color-mix(in srgb, var(--ink) 4%, var(--bg))}
.appt-date .dow{font-size:10px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.appt-date .d{font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.appt-date .m{font-size:10px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}

.appt-times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media (max-width:900px){ .appt-times{grid-template-columns:repeat(4,1fr);gap:6px}
  .appt-time{padding:10px 4px;min-height:42px;font-size:13px}
}
@media (max-width:380px){ .appt-times{grid-template-columns:repeat(3,1fr)} }
.appt-time{appearance:none;border:.5px solid var(--line);background:var(--bg);
  color:var(--ink);padding:8px 4px;border-radius:var(--radius-input);cursor:default;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  transition:border-color .2s ease, background .2s ease}
.appt-time:hover{border-color:color-mix(in srgb, var(--ink) 40%, transparent)}
.appt-time[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.appt-time:disabled{opacity:.35;cursor:default}
.appt-time:disabled:hover{border-color:var(--line)}

.appt-input{appearance:none;width:100%;padding:12px 14px;font:inherit;
  font-size:14px;color:var(--ink);background:var(--bg);
  border:.5px solid var(--line);border-radius:var(--radius-input);outline:none;
  transition:border-color .2s ease}
.appt-input:focus{border-color:var(--ink)}
.appt-input::placeholder{color:var(--ink-3)}

/* iOS Safari faz zoom em inputs com font-size < 16px.
   Forçamos 16px em ecrãs touch para prevenir o zoom no focus. */
@media (max-width:900px){
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
  input[type="password"],input[type="number"],input[type="search"],
  input[type="date"],input[type="time"],input[type="datetime-local"],
  input:not([type]),textarea,select,
  .appt-input,.contactos-textarea{
    font-size:16px;
  }
}

.appt-foot{display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding-top:16px;border-top:.5px solid var(--line);margin-top:auto;
  flex-wrap:wrap;position:sticky;bottom:0;background:var(--bg);
  padding-bottom:max(16px, env(safe-area-inset-bottom));flex-shrink:0}
.appt-foot .summary{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);flex:1;min-width:0}
.appt-foot .summary span{color:var(--ink)}
.appt-foot .btn{flex-shrink:0;white-space:nowrap}
@media (max-width:900px){
  .appt-foot{
    position:sticky;bottom:0;
    padding:12px 16px max(12px, env(safe-area-inset-bottom));
    flex-direction:row;flex-wrap:nowrap;gap:12px;
    border-top:.5px solid var(--line);
  }
  .appt-foot .summary{font-size:10px;letter-spacing:.05em;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .appt-foot .btn{flex-shrink:0}
}
@media (max-width:480px){
  .appt-foot{flex-direction:column;gap:10px}
  .appt-foot .summary{white-space:normal;text-align:center}
  .appt-foot .btn{width:100%;text-align:center}
}

/* Confirmation state */
.appt-confirm{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:16px;padding:48px 32px;flex:1;justify-content:center}
.appt-confirm .check{width:56px;height:56px;border-radius:999px;
  border:.5px solid var(--ink);display:flex;align-items:center;justify-content:center}
.appt-confirm h3{font-family:var(--sans);font-weight:300;font-size:32px;
  line-height:1;letter-spacing:-.03em;margin:0;max-width:18ch}
.appt-confirm h3 .medium{font-weight:500;color:var(--ink-2)}
.appt-confirm p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0;max-width:38ch}
.appt-confirm .ref{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:8px}

/* === The single horizontal container === */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  width:100%;
}

/* Reveal — JS opt-in only. Default state is visible so content always renders. */
html.has-reveal .reveal{opacity:0;transform:translateY(24px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1)}
html.has-reveal .reveal.in{opacity:1;transform:translateY(0)}
html.has-reveal .reveal-stagger > *{opacity:0;transform:translateY(18px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1)}
html.has-reveal .reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:70ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:140ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:210ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:280ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:350ms}

/* ================= NAV ================= */
.nav-shell{position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease}
.nav-shell.scrolled{
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border-bottom:.5px solid var(--line);
}
.nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  height:64px;
  transition:height .35s ease;
}
.nav-shell.scrolled .nav{height:56px}
.nav .brand{
  font-family:var(--sans);font-weight:300;
  font-size:24px;letter-spacing:-.025em;
  line-height:1;color:var(--ink);
  justify-self:start;
  transition:font-size .35s ease;
}
.nav-shell.scrolled .nav .brand{font-size:22px}
@media (max-width:560px){ .nav .brand{font-size:22px} }
.nav .links{
  display:flex;justify-content:center;gap:32px;
  margin:0;padding:0;list-style:none;
  font-size:13.5px;color:var(--ink-2);font-weight:400;
}
.nav .links a{padding:6px 0;transition:color .2s ease;white-space:nowrap}
.nav .links a:hover{color:var(--ink)}
.nav .right{justify-self:end;display:flex;align-items:center;gap:14px}
.nav .cta{
  font-size:13px;font-weight:500;
  border:.5px solid var(--ink);border-radius:var(--radius-button);
  padding:8px 14px;
  transition:background .2s ease, color .2s ease}
.nav .cta:hover{background:var(--ink);color:var(--bg)}
.nav-burger{display:none;background:transparent;border:0;color:inherit;
  width:36px;height:36px;border-radius:var(--radius-button);align-items:center;justify-content:center}
.nav-burger:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.nav-burger svg{width:18px;height:18px}

@media (max-width:1000px){
  .nav{grid-template-columns:1fr auto; gap:8px}
  .nav .links{display:none}
  .nav .right .cta{display:none}
  .nav-burger{display:inline-flex}
}

/* mobile drawer */
.drawer{
  position:fixed;inset:64px 0 0 0;z-index:40;
  background:var(--bg);
  padding:32px var(--gutter);
  display:flex;flex-direction:column;gap:8px;
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  border-bottom:.5px solid var(--line);
}
.drawer.open{opacity:1;transform:translateY(0);pointer-events:auto}
.drawer a{padding:14px 0;font-size:22px;font-weight:400;
  border-bottom:.5px solid var(--line)}
.drawer .cta{margin-top:24px;align-self:flex-start}

/* ================= HERO ================= */
.hero{
  min-height:100vh;
  padding-top:120px;
  padding-bottom:80px;
  display:flex;flex-direction:column;gap:56px;
}
.hero-meta{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);
  text-transform:uppercase;flex-wrap:wrap;
}
.hero-meta .dot{display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--ink);margin-right:8px;vertical-align:1px}

.hero-title{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(48px, 11vw, 168px);
  line-height:.95;
  letter-spacing:-.04em;
  margin:0;
}
.hero-title .light{font-weight:300}
.hero-title .medium{font-weight:500;color:var(--ink-2)}

.hero-foot{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:48px;
  align-items:start;
  padding-top:48px;
  border-top:.5px solid var(--line);
}
@media (max-width:880px){ .hero-foot{grid-template-columns:1fr;gap:32px} }
.hero-lede{
  font-size:18px;line-height:1.45;color:var(--ink-2);
  max-width:42ch;letter-spacing:-.005em;font-weight:400;margin:0;
}
.hero-stats{display:flex;flex-direction:column;gap:12px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-3);text-transform:uppercase}
.hero-stats .row{display:flex;justify-content:space-between;gap:16px;
  padding-bottom:10px;border-bottom:.5px solid var(--line-2)}
.hero-stats .row span:last-child{color:var(--ink)}

.hero-product{
  height:50vh;min-height:380px;
  border-radius:var(--radius-card);
  background:
    radial-gradient(60% 60% at 50% 55%,
      color-mix(in srgb, var(--ink) 8%, transparent), transparent 70%),
    var(--paper);
  position:relative;overflow:hidden;
}
.hero-product > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
.hero-product::after,
.feature-bleed .col.media::after,
.hero-product::after{
  content:"01 — Sala, feita à medida";
  z-index:2;
  position:absolute;left:20px;bottom:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:#fff;text-transform:uppercase;
  background:rgba(0,0,0,.55);padding:6px 12px;border-radius:var(--radius-tag);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.hero-product .ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(46%, 360px);aspect-ratio:1;border-radius:999px;
  border:.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background:radial-gradient(40% 40% at 35% 35%, color-mix(in srgb, #fff 50%, transparent), transparent 60%),
             color-mix(in srgb, var(--ink) 4%, var(--paper));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -10px 30px color-mix(in srgb, var(--ink) 12%, transparent);
}

/* ================= MARQUEE ================= */
.marquee{
  border-top:.5px solid var(--line);
  border-bottom:.5px solid var(--line);
  overflow:hidden;padding:18px 0;
}
.marquee-track{display:flex;gap:48px;white-space:nowrap;
  animation:marq 60s linear infinite;
  font-size:15px;letter-spacing:-.005em;color:var(--ink-2);font-weight:400;
  will-change:transform;transform:translateZ(0);backface-visibility:hidden;
}
.marquee-track span{display:inline-flex;align-items:center;gap:48px}
.marquee-track .sep{width:4px;height:4px;border-radius:999px;background:var(--ink-3)}
@keyframes marq{from{transform:translateZ(0) translateX(0)}to{transform:translateZ(0) translateX(-50%)}}
@media (max-width:1024px){
  .marquee-track{animation-duration:35s}
}
@media (max-width:560px){
  .marquee-track{animation-duration:22s;font-size:13px;gap:32px}
  .marquee-track span{gap:32px}
}

/* ================= SECTION BASE ================= */
.section{padding-top:140px;padding-bottom:140px}
@media (max-width:720px){ .section{padding-top:96px;padding-bottom:96px} }
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:.5px;background:var(--ink-3)}
.section-title{font-family:var(--sans);font-weight:300;
  font-size:clamp(36px, 6vw, 88px);line-height:1;letter-spacing:-.035em;
  margin:24px 0 0;max-width:18ch}
.section-title .medium{font-weight:500;color:var(--ink-2)}

/* ================= FULL-BLEED FEATURE ================= */
.feature-bleed{
  background:var(--paper);
  border-top:.5px solid var(--line);
  border-bottom:.5px solid var(--line);
}
.feature-bleed .inner{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  min-height:80vh;
}
@media (max-width:980px){ .feature-bleed .inner{grid-template-columns:1fr} }
.feature-bleed .col{
  padding:120px 0;display:flex;flex-direction:column;justify-content:space-between;
  gap:48px;
}
/* Spacings direction-aware: o gap entre as duas colunas fica entre elas,
 * independentemente de qual aparece primeiro (text → media OU media → text). */
.feature-bleed .col.text:first-child{padding-right:48px;padding-left:0}
.feature-bleed .col.text:last-child{padding-left:48px;padding-right:0}
.feature-bleed .col.media{
  padding:0;
  background:radial-gradient(60% 60% at 50% 50%,
    color-mix(in srgb, var(--ink) 10%, transparent), transparent 70%);
  position:relative;
  min-height:480px;
  overflow:hidden;
}
.feature-bleed .col.media:last-child{margin-left:48px;margin-right:0}
.feature-bleed .col.media:first-child{margin-right:48px;margin-left:0}
.feature-bleed .col.media > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
@media (max-width:980px){
  /* Sobe a especificidade para vencer .col.text/.col.media :first-child/:last-child
   * que aplicam os 48px de gap em desktop e ficavam presos em mobile. */
  .feature-bleed .col.text,
  .feature-bleed .col.text:first-child,
  .feature-bleed .col.text:last-child{
    padding-right:0;padding-left:0;padding-bottom:48px
  }
  .feature-bleed .col.media,
  .feature-bleed .col.media:first-child,
  .feature-bleed .col.media:last-child{
    margin-left:0;margin-right:0;padding-top:48px;min-height:60vh
  }
}
.feature-bleed .col.media::after{
  content:"02 — Peças para a história";
  z-index:2;
  position:absolute;left:24px;bottom:20px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:#fff;text-transform:uppercase;
  background:rgba(0,0,0,.55);padding:6px 12px;border-radius:var(--radius-tag);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.feature-bleed .col.media .disc{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(60%,400px);aspect-ratio:1;border-radius:999px;
  border:.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background:conic-gradient(from 0deg,
    color-mix(in srgb, var(--ink) 14%, var(--paper)) 0deg,
    var(--paper) 60deg,
    color-mix(in srgb, var(--ink) 8%, var(--paper)) 180deg,
    var(--paper) 300deg,
    color-mix(in srgb, var(--ink) 14%, var(--paper)) 360deg);
}
.feature-bleed h2{font-family:var(--sans);font-weight:300;
  font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.035em;margin:20px 0 0}
.feature-bleed h2 .medium{font-weight:500;color:var(--ink-2)}
.feature-bleed p{font-size:18px;line-height:1.5;
  color:var(--ink-2);max-width:46ch;margin:0;letter-spacing:-.005em}
.feature-bleed .read{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
  border-bottom:.5px solid var(--ink);padding-bottom:6px;align-self:flex-start}
.feature-bleed .read .arr{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.feature-bleed .read:hover .arr{transform:translateX(4px)}

/* ================= FEATURE GRID ================= */
.grid-features{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:.5px solid var(--line);margin-top:80px}
@media (max-width:980px){ .grid-features{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .grid-features{grid-template-columns:1fr} }
.feat{padding:40px 28px 48px;border-right:.5px solid var(--line);
  display:flex;flex-direction:column;gap:16px;min-height:340px;
  transition:background .35s ease}
.feat:last-child{border-right:0}
@media (max-width:980px){
  .feat:nth-child(2n){border-right:0}
  .feat:nth-child(-n+2){border-bottom:.5px solid var(--line)}
}
@media (max-width:560px){
  .feat{border-right:0 !important;border-bottom:.5px solid var(--line)}
  .feat:last-child{border-bottom:0}
}
.feat:hover{background:color-mix(in srgb, var(--ink) 3%, transparent)}
.feat .num{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);text-transform:uppercase}
.feat .glyph{width:48px;height:48px;border-radius:999px;border:.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--ink);margin-top:auto;font-weight:300}
.feat h3{font-family:var(--sans);font-weight:400;font-size:22px;line-height:1.2;
  letter-spacing:-.02em;margin:0;max-width:14ch}
.feat p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0;max-width:34ch}

/* ================= FILTRO DA PÁGINA PROJECTOS ================= */
.projects-filter{
  display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;
  margin-top:48px;padding:18px 0;
  border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);
}
.projects-filter .filter-btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
  background:transparent;border:0;padding:6px 0;margin:0;
  cursor:pointer;display:inline-flex;align-items:baseline;gap:6px;
  transition:color .35s ease;position:relative;
}
.projects-filter .filter-btn::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;
  height:.5px;background:var(--ink);
  transition:right .35s cubic-bezier(.2,.7,.2,1);
}
.projects-filter .filter-btn:hover{color:var(--ink)}
.projects-filter .filter-btn:hover::after{right:0}
.projects-filter .filter-btn.is-active{color:var(--ink)}
.projects-filter .filter-btn.is-active::after{right:0}
.projects-filter .filter-btn .count{
  font-size:10px;color:var(--ink-3);letter-spacing:.05em;
}
.projects-filter .filter-btn.is-active .count,
.projects-filter .filter-btn:hover .count{color:var(--ink-2)}

.projects-empty{
  margin:48px 0;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}

/* ================= GRELHA DE PROJECTOS (override do .grid-features base) ================= */
/* 3 colunas em desktop, 2 em tablet, 1 em mobile.
 * Usa gap (whitespace) em vez de divisores — melhor para cards portrait altos
 * e para evitar bordas órfãs em linhas incompletas. */
.grid-features--projectos{
  grid-template-columns:repeat(3,1fr);
  gap:48px 32px;
  border-top:0;
}
.grid-features--projectos .feat{
  padding:0;
  border-right:0;border-bottom:0;
  min-height:auto;
}
.grid-features--projectos .feat:hover{background:transparent}
@media (max-width:980px){
  .grid-features--projectos{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .grid-features--projectos .feat:nth-child(2n){border-right:0}
  .grid-features--projectos .feat:nth-child(-n+2){border-bottom:0}
}
@media (max-width:560px){
  .grid-features--projectos{grid-template-columns:1fr;gap:36px}
  .grid-features--projectos .feat{border-right:0 !important;border-bottom:0 !important}
}

/* ================= CARTÃO DO CPT PROJECTO ================= */
/* O <a> é todo o cartão: imagem + número + nome. Liga ao single. */
a.feat--projecto{
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:16px;
}
a.feat--projecto:hover{background:color-mix(in srgb, var(--ink) 3%, transparent)}
.feat-thumb{
  position:relative;width:100%;aspect-ratio:9/16;max-height:400px;overflow:hidden;
  border:.5px solid var(--line);
  background:radial-gradient(50% 50% at 50% 45%,
    color-mix(in srgb, var(--ink) 8%, transparent), transparent 70%),
    var(--paper);
}
@media (max-width:560px){
  .feat-thumb{max-height:360px}
}
.feat-thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;
  filter:grayscale(8%) contrast(1.02);
}
a.feat--projecto:hover .feat-thumb img{transform:scale(1.03);filter:grayscale(0%) contrast(1.04)}
.feat-thumb--empty::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:42%;aspect-ratio:1;border-radius:999px;
  border:.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.feat-cat{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);text-transform:uppercase;
  margin-top:-4px
}
.feat-title{
  font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.6vw,22px);line-height:1.2;
  letter-spacing:-.02em;margin:0;
  display:flex;align-items:baseline;gap:8px;
  white-space:nowrap;
}
.feat-title::after{
  content:"→";font-family:var(--mono);font-size:14px;color:var(--ink-3);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), color .35s ease;
}
a.feat--projecto:hover .feat-title::after{transform:translateX(4px);color:var(--ink)}

/* ================= SINGLE PROJECTO ================= */
.projecto-single .projecto-hero{
  margin:0;border:.5px solid var(--line);overflow:hidden;
  aspect-ratio:16/9;position:relative;background:var(--paper)
}
.projecto-single .projecto-hero img{
  width:100%;height:100%;object-fit:cover;display:block
}
.projecto-body{
  display:grid;grid-template-columns:280px 1fr;gap:64px;
  border-top:.5px solid var(--line);padding-top:48px
}
@media (max-width:980px){
  .projecto-body{grid-template-columns:1fr;gap:32px}
}
.projecto-meta{display:flex;flex-direction:column;gap:24px}
.projecto-meta .meta-row{
  display:flex;flex-direction:column;gap:6px;
  padding-bottom:20px;border-bottom:.5px solid var(--line)
}
.projecto-meta .meta-row:last-child{border-bottom:0}
.projecto-meta .meta-k{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);text-transform:uppercase
}
.projecto-meta .meta-v{font-family:var(--sans);font-size:15px;color:var(--ink)}
.projecto-meta .meta-v a{color:var(--ink);text-decoration:none;border-bottom:.5px solid var(--line)}
.projecto-meta .meta-v a:hover{border-bottom-color:var(--ink)}
.projecto-descricao{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:64ch}
.projecto-descricao p{margin:0 0 16px}
.projecto-descricao p:last-child{margin-bottom:0}
.back-link{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--ink);text-decoration:none;text-transform:uppercase;
  border-bottom:.5px solid var(--line);padding-bottom:4px
}
.back-link:hover{border-bottom-color:var(--ink)}

/* ================= PÁGINA CONTACTOS ================= */
.contactos-grid{
  display:grid;grid-template-columns:1fr 1.4fr;gap:80px;
  border-top:.5px solid var(--line);padding-top:48px;
}
@media (max-width:980px){
  .contactos-grid{grid-template-columns:1fr;gap:48px}
}
.contactos-meta{display:flex;flex-direction:column;gap:0}
.contactos-meta .meta-row{
  display:flex;flex-direction:column;gap:6px;
  padding:20px 0;border-bottom:.5px solid var(--line);
}
.contactos-meta .meta-row:first-child{padding-top:0}
.contactos-meta .meta-row:last-child{border-bottom:0}
.contactos-meta .meta-k{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);text-transform:uppercase;
}
.contactos-meta .meta-v{
  font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);
}
.contactos-meta .meta-v a{
  color:var(--ink);text-decoration:none;
  border-bottom:.5px solid var(--line);padding-bottom:2px;
  transition:border-color .25s ease;
}
.contactos-meta .meta-v a:hover{border-bottom-color:var(--ink)}

.contactos-form{display:flex;flex-direction:column;gap:24px}
.contactos-textarea{
  font-family:var(--sans);resize:vertical;min-height:140px;line-height:1.5;
  padding:14px 16px;
}
.contactos-foot{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  margin-top:8px;flex-wrap:wrap;
}
.contactos-note{
  margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--ink-3);max-width:38ch;line-height:1.5;
}

/* ================= ENQUIRE FORM (single project) ================= */
/* Tom paper + borders editoriais, mesmas gutters do .wrap, espaçamento generoso */
.projecto-enquire{
  margin-top:96px;
  padding:96px 0;
  background:var(--paper);
  border-top:.5px solid var(--line);
  border-bottom:.5px solid var(--line);
}
@media (max-width:720px){ .projecto-enquire{margin-top:64px;padding:72px 0} }
.projecto-enquire__grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;
}
@media (max-width:980px){ .projecto-enquire__grid{grid-template-columns:1fr;gap:40px} }
.projecto-enquire__intro{display:flex;flex-direction:column;gap:24px;position:sticky;top:96px}
@media (max-width:980px){ .projecto-enquire__intro{position:static} }
.projecto-enquire__lede{
  font-size:17px;line-height:1.55;color:var(--ink-2);
  max-width:42ch;margin:0;letter-spacing:-.005em;
}
.projecto-enquire__lede strong{
  font-weight:500;color:var(--ink);
  border-bottom:.5px solid var(--ink);padding-bottom:1px;
}
.projecto-enquire__form{display:flex;flex-direction:column;gap:20px;max-width:560px}

/* Section title num tamanho moderado — para H2 em sub-secções como o enquire */
.section-title--md{
  font-size:clamp(28px, 4.4vw, 56px);line-height:1.05;
}

/* Navegação anterior/seguinte entre projectos */
.projecto-nav-wrap{margin:64px auto 96px}
@media (max-width:720px){ .projecto-nav-wrap{margin:48px auto 72px} }
.projecto-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);
  padding:32px 0;
}
@media (max-width:560px){ .projecto-nav{gap:12px} }
.projecto-nav__slot{min-height:48px;display:flex;align-items:center}
.projecto-nav__slot--next{justify-content:flex-end;text-align:right}
@media (max-width:560px){
  .projecto-nav__t{font-size:15px;line-height:1.25}
  .projecto-nav__k{font-size:10px;letter-spacing:.08em}
}
.projecto-nav__link{
  display:flex;flex-direction:column;gap:6px;
  text-decoration:none;color:var(--ink);
  transition:color .35s ease;
}
.projecto-nav__link:hover{color:var(--ink-2)}
.projecto-nav__link:hover .projecto-nav__t{border-bottom-color:var(--ink)}
.projecto-nav__k{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);text-transform:uppercase;
}
.projecto-nav__t{
  font-family:var(--sans);font-size:20px;line-height:1.2;
  letter-spacing:-.02em;color:var(--ink);
  border-bottom:.5px solid transparent;
  padding-bottom:2px;align-self:flex-start;
  transition:border-color .35s ease;
}
.projecto-nav__slot--next .projecto-nav__t{align-self:flex-end}

/* ================= SPECS ================= */
.specs{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start;margin-top:80px}
@media (max-width:980px){ .specs{grid-template-columns:1fr;gap:48px} }
.spec-img{
  aspect-ratio:4/5;
  background:radial-gradient(50% 50% at 50% 45%,
    color-mix(in srgb, var(--ink) 12%, transparent), transparent 70%),
    var(--paper);
  position:relative;overflow:hidden;
}
.spec-img--zoom{
  appearance:none;border:none;padding:0;margin:0;cursor:zoom-in;
  display:block;width:100%;
}
.spec-img--zoom:focus-visible{
  outline:.5px solid var(--ink);outline-offset:3px;
}
.spec-img__hint{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.55);padding:8px 16px;border-radius:var(--radius-tag);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
}
.spec-img--zoom:hover .spec-img__hint{
  opacity:1;
}

/* Lightbox */
.spec-lightbox{
  position:fixed;inset:0;z-index:200;
}
.spec-lightbox[hidden]{display:none}
.spec-lightbox__backdrop{
  position:fixed;inset:0;
  background:color-mix(in srgb, var(--ink) 78%, transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .35s ease;
  cursor:zoom-out;
}
.spec-lightbox.is-open .spec-lightbox__backdrop{opacity:1}
.spec-lightbox__close{
  position:fixed;top:16px;right:16px;z-index:202;
  width:40px;height:40px;border-radius:999px;
  border:.5px solid rgba(255,255,255,.3);background:rgba(0,0,0,.65);
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s ease;
  appearance:none;
}
.spec-lightbox__close:hover{background:rgba(0,0,0,.95)}
.spec-lightbox__close svg{width:16px;height:16px}
.spec-lightbox__frame{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-46%);
  z-index:201;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  width:calc(100vw - 32px);max-width:640px;
  max-height:calc(100dvh - 80px);
  opacity:0;
  transition:opacity .4s cubic-bezier(.16,.84,.24,1),
             transform .4s cubic-bezier(.16,.84,.24,1);
  pointer-events:none;
}
.spec-lightbox.is-open .spec-lightbox__frame{
  opacity:1;transform:translate(-50%,-50%);
  pointer-events:auto;
}
.spec-lightbox__img-wrap{
  width:100%;overflow:hidden;
  border:.5px solid rgba(255,255,255,.12);
  border-radius:var(--radius-card);
}
.spec-lightbox__img-wrap img{
  width:100%;height:auto;display:block;
  max-height:calc(100dvh - 120px);
  object-fit:contain;
}
.spec-lightbox__caption{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  text-align:center;
  flex-shrink:0;
}
.spec-img > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
.spec-img::after{
  content:"03 — Tampo, acabado";
  z-index:2;
  position:absolute;left:20px;bottom:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:#fff;text-transform:uppercase;
  background:rgba(0,0,0,.55);padding:6px 12px;border-radius:var(--radius-tag);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.spec-img .disc{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60%;aspect-ratio:1;border-radius:999px;
  border:.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background:radial-gradient(40% 40% at 35% 35%, color-mix(in srgb, #fff 50%, transparent), transparent 60%),
             color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.spec-list{border-top:.5px solid var(--line)}
.spec-row{display:grid;grid-template-columns:140px 1fr auto;gap:24px;
  padding:20px 0;border-bottom:.5px solid var(--line);align-items:baseline}
@media (max-width:560px){
  .spec-row{grid-template-columns:1fr auto}
  .spec-row .k{grid-column:1/-1;margin-bottom:-6px}
}
.spec-row .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.spec-row .v{font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);font-weight:400}
.spec-row .v .medium{color:var(--ink-2);font-weight:500}
.spec-row .u{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em}

/* ================= COLORS ================= */
.color-stage{
  margin-top:56px;
  aspect-ratio:16/9;
  border:.5px solid var(--line);
  border-radius:var(--radius-card);
  position:relative;overflow:hidden;
  transition:background 1s cubic-bezier(.2,.7,.2,1);
  display:block;text-decoration:none;color:inherit;
}
a.color-stage{cursor:pointer}
a.color-stage:hover .color-stage__view{transform:translateX(4px)}
.color-stage__view{
  position:absolute;right:24px;bottom:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--swatch-ink, var(--ink)) 75%, var(--swatch-bg, var(--paper)));
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
@media (max-width:720px){ .color-stage{aspect-ratio:4/5} }
.color-stage .bigword{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(64px, 14vw, 200px);
  letter-spacing:-.05em;
  pointer-events:none;user-select:none;
  transition:color .8s ease;
}
.color-stage .object{
  position:absolute;left:50%;top:50%;
  width:min(38%, 320px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:999px;
  border:.5px solid color-mix(in srgb, var(--swatch-ink, #000) 30%, transparent);
  background:radial-gradient(40% 40% at 35% 35%,
      color-mix(in srgb, #fff 55%, transparent), transparent 60%);
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.color-stage .object .face{
  position:absolute;inset:14%;border-radius:999px;
  background:color-mix(in srgb, var(--swatch-ink, #000) 8%, var(--swatch-bg, #fff));
  border:.5px solid color-mix(in srgb, var(--swatch-ink, #000) 22%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -8px 24px color-mix(in srgb, var(--swatch-ink, #000) 16%, transparent);
  display:flex;align-items:center;justify-content:center;
  color:color-mix(in srgb, var(--swatch-ink, #000) 70%, var(--swatch-bg, #fff));
  font-size:clamp(16px, 2.4vw, 28px);font-weight:400;letter-spacing:.05em;
}
/* Variante com foto do projecto — substitui o disco circular */
.color-stage .object--photo{
  width:min(48%, 420px);aspect-ratio:4/5;
  border-radius:var(--radius-card);overflow:hidden;
  border:.5px solid color-mix(in srgb, var(--swatch-ink, #000) 22%, transparent);
  background:var(--swatch-bg, var(--paper));
  box-shadow:0 12px 40px -16px color-mix(in srgb, var(--swatch-ink, #000) 35%, transparent);
}
@media (max-width:720px){ .color-stage .object--photo{width:min(72%, 320px)} }
.color-stage .object--photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
.color-stage .label,.color-stage .ref,.color-stage .price{
  position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;
  /* Usa o ink da madeira selecionada → contraste correcto sobre qualquer tom */
  color:color-mix(in srgb, var(--swatch-ink, var(--ink)) 75%, var(--swatch-bg, var(--paper)));
}
.color-stage .label{left:24px;top:20px;display:flex;align-items:center;gap:10px}
.color-stage .label .swatch-dot{width:10px;height:10px;border-radius:999px;
  background:var(--swatch-ink, #000);border:.5px solid var(--line)}
.color-stage .ref{right:24px;top:20px}
.color-stage .price{left:24px;bottom:20px}

.swatches{
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:32px 24px;
  margin-top:40px;padding-top:32px;
  border-top:.5px solid var(--line);
}
.sw{
  appearance:none;background:transparent;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;padding:6px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.35;
  color:var(--ink-3);transition:color .25s ease;
  /* Acomoda nomes maiores sem partir a linha do flex */
  flex:0 1 auto;max-width:140px;min-width:90px;
}
.sw .chip{
  width:56px;height:56px;border-radius:999px;
  border:.5px solid var(--line);position:relative;overflow:hidden;
  background:var(--paper);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s ease;
}
.sw .chip img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.sw .chip::after{
  content:"";position:absolute;inset:-6px;border-radius:999px;
  border:.5px solid transparent;transition:border-color .25s ease;
  pointer-events:none;
}
.sw:hover{color:var(--ink)}
.sw:hover .chip{transform:translateY(-2px);
  box-shadow:0 8px 24px -10px color-mix(in srgb, var(--ink) 30%, transparent)}
.sw[aria-pressed="true"]{color:var(--ink)}
.sw[aria-pressed="true"] .chip::after{border-color:var(--ink)}
.sw__label{display:inline-block;max-width:140px}

/* Tablet & mobile: scroll horizontal em vez de grid wrap.
 * Sangra para os edges do viewport (margin negativo + padding) para o scroll
 * parecer infinito e nada ficar cortado. Snap suave em cada swatch. */
@media (max-width:980px){
  .swatches{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;          /* Firefox */
    scroll-snap-type:x proximity;
    justify-content:flex-start;
    gap:28px;
    margin-left:calc(-1 * var(--gutter));
    margin-right:calc(-1 * var(--gutter));
    padding-left:var(--gutter);
    padding-right:var(--gutter);
    padding-bottom:4px;
  }
  .swatches::-webkit-scrollbar{display:none} /* Webkit/Blink */
  .sw{
    flex:0 0 auto;
    scroll-snap-align:start;
    max-width:120px;min-width:96px;
  }
}

@media (max-width:560px){
  .swatches{gap:20px}
  .sw{max-width:104px;min-width:88px}
  .sw .chip{width:48px;height:48px}
}

/* ================= QUOTE ================= */
.quote{padding-top:140px;padding-bottom:140px;text-align:center}
.quote blockquote{font-family:var(--sans);font-weight:300;
  font-size:clamp(28px,4.4vw,56px);line-height:1.15;letter-spacing:-.025em;
  margin:0 auto;max-width:24ch;color:var(--ink)}
.quote blockquote .medium{color:var(--ink-2);font-weight:500}
.quote cite{display:block;margin-top:32px;font-style:normal;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}

/* ================= CTA ================= */
.cta-band{padding-top:120px;padding-bottom:120px;border-top:.5px solid var(--line)}
.cta-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end}
@media (max-width:860px){ .cta-grid{grid-template-columns:1fr;gap:32px} }
.cta-grid h2{font-family:var(--sans);font-weight:300;
  font-size:clamp(40px,7vw,104px);line-height:1;letter-spacing:-.04em;margin:0;max-width:14ch}
.cta-grid h2.section-title{font-size:clamp(36px,6vw,88px);letter-spacing:-.035em}
.cta-grid h2 .medium{font-weight:500;color:var(--ink-2)}
.cta-grid .ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{font-size:13px;font-weight:500;letter-spacing:-.005em;
  padding:14px 22px;border-radius:var(--radius-button);border:.5px solid var(--ink);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .2s ease, color .2s ease}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.cta-grid p{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:36ch;margin:0 0 24px}

/* ================= FOOTER ================= */
footer{border-top:.5px solid var(--line);padding:64px 0 40px;
  font-size:13px;color:var(--ink-3)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;gap:32px} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr} }
.foot-grid h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin:0 0 14px;font-weight:500}
.foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot-grid ul a{transition:color .2s ease}
.foot-grid ul a:hover{color:var(--ink)}
.foot-mark{font-family:var(--sans);font-weight:300;font-size:32px;letter-spacing:-.03em;
  color:var(--ink);line-height:1;margin-bottom:18px}
.foot-bottom{display:flex;justify-content:space-between;margin-top:56px;
  padding-top:24px;border-top:.5px solid var(--line);align-items:baseline;
  gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

.meridian-site{min-height:100vh}

/* Theme toggle (replaces design-tool Tweaks panel in production) */
.theme-toggle{
  appearance:none;border:0;background:transparent;color:inherit;
  width:36px;height:36px;border-radius:var(--radius-button);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.theme-toggle:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}

/* WordPress admin bar: keep fixed nav and drawer below it */
body.admin-bar .nav-shell{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .nav-shell{top:46px}
}
body.admin-bar .drawer{top:96px}
@media screen and (max-width:782px){
  body.admin-bar .drawer{top:110px}
}