/* DynamicCMS — Marmex public site styles ============================= */

html, body { background:#0C0D2C; }
body {
  font-family:'Inter', system-ui, sans-serif;
  color:#F4EFE6;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
}

/* Letter-spacing tokens used throughout */
.tracking-tight2 { letter-spacing:-0.025em; }
.tracking-tight3 { letter-spacing:-0.04em; }
.tracking-wide2  { letter-spacing:0.18em; }
.tracking-wide3  { letter-spacing:0.32em; }

/* --- Reveal --- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .9s ease-out, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal-stagger > * { opacity:0; transform:translateY(20px); transition:opacity .8s ease-out, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.05s }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.13s }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.21s }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.29s }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.37s }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.45s }
.reveal-stagger.in > * { opacity:1 !important; transform:none !important; }

/* --- Image hover --- */
.iz { overflow:hidden; }
.iz img { transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
.iz:hover img { transform:scale(1.05); }

/* --- Hero crossfade slides + JS-driven ken-burns --- */
.hero-slide { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity 1.4s ease-in-out; }
.hero-slide.active { opacity:1; pointer-events:auto; }
.hero-slide img { transform:scale(1.05); will-change:transform; }

/* --- Marquee horizontal --- */
@keyframes mq { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.mq      { animation:mq 50s linear infinite; }
.mq-slow { animation:mq 70s linear infinite; }

/* Dedicated partners marquee — isolated from utility-class conflicts */
.partners-track {
  display:flex;
  width:max-content;
  animation:mq 40s linear infinite;
  will-change:transform;
}
.partners-track > * { flex:0 0 auto; }

/* --- Belenco sliders (1 large card visible at a time) --- */
.slider-frame { position:relative; overflow:hidden; }
.slider-track { display:flex; will-change:transform; }
.slider-card { flex:0 0 100%; padding-right:0; box-sizing:border-box; display:block; color:inherit; text-decoration:none; }
/* When the card is an <a> (article has link_url), keep a gold outline on keyboard focus
   so the box is reachable via Tab without showing the browser's default outline. */
a.slider-card:focus-visible .inner { outline:2px solid #D4AC0D; outline-offset:2px; }
.slider-card .inner { position:relative; border-radius:10px; overflow:hidden; border:1px solid #1F2150; transition:border-color .35s; }
.slider-card:hover .inner { border-color:#D4AC0D; }
.slider-color { aspect-ratio:16/10; }
.slider-photo { aspect-ratio:16/10; }
.slider-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.slider-label { position:absolute; left:14px; right:14px; bottom:14px; display:flex; align-items:center; justify-content:space-between; background:rgba(12,13,44,.85); backdrop-filter:blur(8px); padding:14px 18px; border-radius:6px; border:1px solid rgba(212,172,13,0.25); }
.slider-label .name { font-family:'Oswald',sans-serif; font-size:20px; color:#F4EFE6; letter-spacing:0.02em; }
.slider-label .arrow { color:#D4AC0D; font-size:18px; transition:transform .3s; }
.slider-card:hover .slider-label .arrow { transform:translateX(6px); }
.slider-label.light { background:rgba(244,239,230,.92); border-color:rgba(122,116,104,.4); }
.slider-label.light .name { color:#0C0D2C; }
.slider-label.light .arrow { color:#0C0D2C; }
.slider-arrows { display:flex; gap:6px; }
.slider-arrows button { width:38px; height:38px; border-radius:50%; border:1px solid rgba(244,239,230,0.2); background:transparent; color:#F4EFE6; display:grid; place-items:center; transition:all .25s; cursor:pointer; }
.slider-arrows button:hover { background:#D4AC0D; color:#0C0D2C; border-color:#D4AC0D; }

/* --- Card --- */
.card { background:#14163A; border:1px solid #1F2150; border-radius:8px; transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; overflow:hidden; }
.card:hover { transform:translateY(-4px); border-color:rgba(212,172,13,0.4); box-shadow:0 20px 40px -10px rgba(0,0,0,0.5); }

/* --- Buttons --- */
.btn { display:inline-flex; align-items:center; gap:10px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:13px; line-height:1; padding:14px 26px; border-radius:6px; transition:all .35s cubic-bezier(.2,.8,.2,1); cursor:pointer; min-height:48px; letter-spacing:0.06em; text-transform:uppercase; }
.btn-primary { background:#D4AC0D; color:#0C0D2C; }
.btn-primary:hover { background:#E5C12C; transform:translateY(-2px); box-shadow:0 8px 20px -4px rgba(212,172,13,0.4); }
.btn-outline { background:transparent; color:#F4EFE6; border:1.5px solid rgba(244,239,230,0.3); }
.btn-outline:hover { background:#F4EFE6; color:#0C0D2C; border-color:#F4EFE6; transform:translateY(-2px); }
.btn-ghost { background:transparent; color:#D4AC0D; padding:0; min-height:auto; letter-spacing:.16em; font-size:12px; }
.btn-ghost:hover { color:#E5C12C; gap:14px; }

/* --- Focus visible --- */
button:focus-visible, a:focus-visible { outline:2px solid #D4AC0D; outline-offset:3px; border-radius:4px; }

/* --- Typography helpers --- */
.kicker { font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:#D4AC0D; display:inline-flex; align-items:center; }
.gold-line { display:inline-block; width:32px; height:1px; background:#D4AC0D; vertical-align:middle; margin-right:14px; }
.gold-bar  { display:inline-block; width:48px; height:2px; background:#D4AC0D; vertical-align:middle; }

/* --- Drawer --- */
#drawer   { transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
#drawer.open  { transform:translateX(0); }
#backdrop { opacity:0; pointer-events:none; transition:opacity .35s ease-out; }
#backdrop.open { opacity:1; pointer-events:auto; }

/* --- Nav --- */
.nav-shadow { box-shadow:0 4px 24px -8px rgba(0,0,0,0.5); }
.nav-link { position:relative; padding:8px 0; }
.nav-link::after { content:""; position:absolute; bottom:0; left:0; right:0; height:1.5px; background:#D4AC0D; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }
.nav-link.active { color:#D4AC0D; }

/* --- Selection --- */
::selection { background:#D4AC0D; color:#0C0D2C; }

/* --- Lightbox (gallery type) ---------------------------------- */
.dcms-lightbox {
  position:fixed; inset:0; z-index:9999;
  background:rgba(12,13,44,0.94); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.dcms-lightbox.open {
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.dcms-lightbox-figure {
  margin:0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:96vw;
  opacity:0; transform:scale(0.95);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.dcms-lightbox.open .dcms-lightbox-figure { opacity:1; transform:scale(1); }
.dcms-lb-imgwrap {
  display:block;
  background:#0C0D2C;
  border-radius:8px;
  overflow:hidden;
  /* Only width/height animate — the wrapper morphs, the image stays visible */
  transition: width .55s cubic-bezier(.2,.8,.2,1),
              height .55s cubic-bezier(.2,.8,.2,1);
  will-change: width, height;
}
.dcms-lightbox-figure img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.dcms-lightbox-figure figcaption { color:#F4EFE6; font-family:'Oswald',sans-serif; font-size:18px; text-align:center; letter-spacing:0.02em; padding:0 12px; }
.dcms-lightbox-counter { color:#A8AECC; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; }
.dcms-lightbox button { position:absolute; background:rgba(244,239,230,0.06); border:1px solid rgba(244,239,230,0.22); color:#F4EFE6; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-size:24px; line-height:1; cursor:pointer; transition:all .2s; padding:0; }
.dcms-lightbox button:hover { background:#D4AC0D; color:#0C0D2C; border-color:#D4AC0D; }
.dcms-lightbox .dcms-lb-close { top:24px; right:24px; }
.dcms-lightbox .dcms-lb-prev { left:24px; top:50%; transform:translateY(-50%); }
.dcms-lightbox .dcms-lb-next { right:24px; top:50%; transform:translateY(-50%); }
.dcms-lightbox .dcms-lb-prev:hover { transform:translateY(-50%) scale(1.08); }
.dcms-lightbox .dcms-lb-next:hover { transform:translateY(-50%) scale(1.08); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .iz img, .card, .btn, .mq, .mq-slow {
    transition:none !important; animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* --- Public form (article type=form) ----------------------------------- */
.dcms-pf-wrap          { font-family:inherit; }
.dcms-pf-form          { background:rgba(255,255,255,0.02); border:1px solid rgba(244,239,230,0.08); border-radius:14px; padding:28px; }
/* Stacked grids — each grid is its own CSS grid (1 or 2 columns); fields stack
   within their column. On narrow viewports any 2-col grid collapses to a single
   column so inputs never get cramped on mobile. */
.dcms-pf-grids         { display:flex; flex-direction:column; gap:18px 24px; }
.dcms-pf-grid          { display:grid; grid-template-columns:1fr; gap:18px 24px; }
@media (min-width: 768px) {
  .dcms-pf-grid        { /* server sets grid-template-columns inline based on col_count */ }
}
@media (max-width: 767px) {
  .dcms-pf-grid        { grid-template-columns:1fr !important; }   /* mobile = always 1 col */
}
.dcms-pf-col           { display:flex; flex-direction:column; gap:18px; }
.dcms-pf-field         { display:flex; flex-direction:column; gap:6px; }
.dcms-pf-label,
.dcms-pf-group-label   { font-size:12px; text-transform:uppercase; letter-spacing:0.14em; color:#A8A29E; font-weight:600; }
.dcms-pf-input         { background:rgba(12,13,44,0.6); border:1px solid rgba(244,239,230,0.12); border-radius:8px; color:#F4EFE6; padding:11px 13px; font-size:15px; line-height:1.45; font-family:inherit; transition:border-color .2s, box-shadow .2s; }
.dcms-pf-input:focus   { outline:none; border-color:#D4AC0D; box-shadow:0 0 0 3px rgba(212,172,13,0.15); }
.dcms-pf-input::placeholder { color:rgba(244,239,230,0.35); }
.dcms-pf-options       { display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.dcms-pf-option        { display:flex; align-items:center; gap:10px; padding:6px 2px; cursor:pointer; font-size:15px; }
.dcms-pf-option input  { accent-color:#D4AC0D; width:16px; height:16px; }
.dcms-pf-options.is-error { padding:8px 10px; border:1px solid rgba(244,63,94,0.45); border-radius:8px; background:rgba(244,63,94,0.05); }
.dcms-pf-actions       { margin-top:22px; display:flex; justify-content:flex-end; }
.dcms-pf-submit        { background:#D4AC0D; color:#0C0D2C; border:0; padding:12px 28px; border-radius:8px; font-weight:600; font-size:15px; cursor:pointer; transition:background .2s, transform .15s; letter-spacing:0.02em; }
.dcms-pf-submit:hover  { background:#E8C341; }
.dcms-pf-submit:active { transform:translateY(1px); }
.dcms-pf-ok            { background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.35); color:#86EFAC; padding:18px 22px; border-radius:10px; font-size:15px; line-height:1.6; }
.dcms-pf-err           { background:rgba(244,63,94,0.08); border:1px solid rgba(244,63,94,0.35); color:#FDA4AF; padding:14px 18px; border-radius:10px; font-size:14px; margin-bottom:18px; }
.dcms-pf-empty         { color:rgba(244,239,230,0.4); padding:30px; text-align:center; border:1px dashed rgba(244,239,230,0.1); border-radius:10px; font-size:14px; }
/* File picker — system default styled to match the rest of the form. */
.dcms-pf-file          { background:rgba(12,13,44,0.6); border:1px solid rgba(244,239,230,0.12); border-radius:8px; color:#F4EFE6; padding:10px 12px; font-size:14px; cursor:pointer; }
.dcms-pf-file::file-selector-button { background:#1F2150; color:#F4EFE6; border:0; padding:6px 12px; border-radius:6px; font-size:13px; margin-right:12px; cursor:pointer; transition:background .2s; }
.dcms-pf-file::file-selector-button:hover { background:#2A2D5C; }
.dcms-pf-file:focus    { outline:none; border-color:#D4AC0D; box-shadow:0 0 0 3px rgba(212,172,13,0.15); }
.dcms-pf-hint          { font-size:11px; color:rgba(244,239,230,0.45); margin-top:2px; }
/* Honeypot: invisible to humans (off-screen + zero size + not interactive), but
   present in the DOM so naive bots fill it. position:absolute keeps it from
   reserving layout space even when display:none would be ignored by some bots. */
.dcms-pf-hp            { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }