/* ==========================================================================
   STANDARD — base stylesheet
   ========================================================================== */

@font-face {
  font-family: 'AF Sobremesa';
  src: url('../assets/fonts/AFSobremesa-Black.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AF Sobremesa';
  src: url('../assets/fonts/AFSobremesa-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Glosa Headline';
  src: url('../assets/fonts/Glosa_W01_Headline_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --black: #141414;
  --black-soft: #1b1b1b;
  --cream: #ECE9E0;
  --cream-2: #E2DFD5;
  --white: #F7F6F2;
  --red: #E3371C;
  --orange: #FF7A1A;
  --input-bg: #C7C4BA;
  --line: rgba(247,246,242,0.18);

  --f-display: 'AF Sobremesa', 'Arial Black', sans-serif;
  --f-serif: 'Glosa Headline', Georgia, serif;

  --container: 1320px;
  --gap: clamp(20px, 4vw, 64px);
  --radius: 999px;

  --ease: cubic-bezier(.22,.9,.32,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--black);
  color: var(--white);
  font-family: var(--f-display);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }

h1,h2,h3,h4{ margin:0; font-family: var(--f-display); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; line-height:0.98; }
p{ margin:0; }

.container{ max-width: var(--container); margin:0 auto; padding: 0 var(--gap); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- noise/dot texture ---------- */
.texture{
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 5px 5px;
  mix-blend-mode: screen;
  opacity:.5;
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--gap);
  background: linear-gradient(180deg, rgba(20,20,20,.92), rgba(20,20,20,0));
}
.site-header .spacer{ width: 140px; }
.logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-display); font-weight:800; font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.logo svg{ width:26px; height:26px; }
.logo-img{ height: 22px; width:auto; }
.site-footer-cream .mark{ width: 96px; height:auto; margin: 0 auto; }

.burger{
  width: 42px; height: 34px; display:flex; flex-direction:column; justify-content:center; gap:7px;
  background:none; border:none; padding:0; position:relative; z-index:1100;
}
.burger span{
  display:block; height:2.5px; width:100%; background: var(--white);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.burger.is-open span:nth-child(1){ transform: translateY(9.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-9.5px) rotate(-45deg); }

.btn-contact{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius: var(--radius);
  padding: 12px 22px; font-weight:800; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase;
  background: #1b1b1b; color: var(--white);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.btn-contact svg{ width:14px; height:14px; }
.btn-contact:hover{ background: var(--white); color: var(--black); transform: translateY(-1px); }

/* ---------- nav drawer (overlay dropdown, no full-screen backdrop) ---------- */
.nav-drawer{
  position: fixed; top: 0; left: 0; z-index: 1000;
  padding: 84px 0 0 var(--gap);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  pointer-events:none;
}
.nav-drawer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.nav-drawer li{ overflow:hidden; }
.nav-drawer a{
  display:inline-block; pointer-events:auto;
  font-family: var(--f-display); font-weight:800;
  font-size: clamp(.85rem, 2.2vw, 1rem); text-transform:uppercase; letter-spacing:.02em;
  padding: 14px 26px; border-radius: var(--radius);
  background: var(--black); border: 1px solid var(--line); color: var(--white);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transform: translateY(-130%); opacity:0;
  transition: transform .45s var(--ease), opacity .35s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.nav-drawer.is-open a{ transform: translateY(0); opacity:1; }
.nav-drawer li:nth-child(1) a{ transition-delay: .04s; }
.nav-drawer li:nth-child(2) a{ transition-delay: .1s; }
.nav-drawer li:nth-child(3) a{ transition-delay: .16s; }
.nav-drawer li:nth-child(4) a{ transition-delay: .22s; }
.nav-drawer a:hover{ background: var(--white); color: var(--black); }

/* ---------- footer ---------- */
.site-footer-cream{
  background: var(--cream); color: var(--black);
  padding: 90px var(--gap) 70px;
  text-align:center;
}
.site-footer-cream .mark{ width: min(300px, 60vw); height:auto; margin: 0 auto; }

.site-footer-dark{
  background: var(--black); padding: 40px var(--gap) 28px;
}
.footer-brands{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap: clamp(24px,6vw,72px);
  padding-bottom: 34px; border-bottom:1px solid var(--line);
}
.footer-brands a{ display:inline-flex; align-items:center; transition: opacity .25s var(--ease); }
.footer-brands a:hover{ opacity:.7; }
.footer-brands img{ height: 46px; width:auto; }
.footer-brands img[alt="DUX"]{ height: 50px; }
.footer-brands img[alt="Contento"]{ height: 48px; }
.footer-brands img[alt="ICON"]{ height: 34px; }
.footer-brands .talents-wordmark{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.footer-brands .talents-wordmark img{ height:26px; }
.footer-brands .talents-wordmark small{ font-size:.6rem; letter-spacing:.2em; font-weight:800; opacity:.85; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top: 20px; font-size:.78rem; letter-spacing:.03em; color: rgba(247,246,242,.7);
}
.footer-bottom a{ text-transform:uppercase; font-weight:800; color:var(--white); }

/* ---------- generic section paddings ---------- */
.section{ padding: 90px 0; }
.section-tight{ padding: 60px 0; }

/* ---------- CTA banner shared ---------- */
.cta-banner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:22px;
  padding: 70px var(--gap) 90px;
}
.cta-banner h2{ font-size: clamp(1.7rem, 4.4vw, 3rem); max-width: 720px; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(56px) scale(.98); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in-view{ opacity:1; transform: translateY(0) scale(1); }
.reveal-delay-1.in-view{ transition-delay: .12s; }
.reveal-delay-2.in-view{ transition-delay: .24s; }
.reveal-delay-3.in-view{ transition-delay: .36s; }
.reveal-delay-4.in-view{ transition-delay: .48s; }

/* ---------- parallax layer ---------- */
[data-parallax]{ will-change: transform; }

/* ---------- modal ---------- */
.modal-overlay{
  position: fixed; inset:0; z-index: 2000;
  background: rgba(10,10,10,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding: 90px 20px;
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease);
  overflow-y:auto;
}
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal{
  background: var(--cream); color: var(--black);
  width:100%; max-width: 760px; border-radius: 22px;
  padding: clamp(28px,5vw,56px);
  transform: translateY(30px) scale(.97); transition: transform .4s var(--ease);
  position:relative;
}
.modal-overlay.is-open .modal{ transform: translateY(0) scale(1); }
.modal-close{
  position:absolute; top:22px; right:22px; background:none; border:none;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
}
.modal-close svg{ width:22px; height:22px; }
.modal-tabs{ display:flex; gap:10px; margin-bottom:26px; }
.modal-tab{
  border:1px solid var(--black); border-radius: var(--radius); background:transparent;
  padding:8px 16px; font-weight:800; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; opacity:.45;
}
.modal-tab.is-active{ opacity:1; background: var(--black); color: var(--cream); }
.modal h3{ font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 30px; }
.form-row{ display:flex; gap:22px; margin-bottom:22px; flex-wrap:wrap; }
.form-field{ flex:1 1 220px; display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-size:.9rem; font-weight:800; }
.form-field input, .form-field textarea{
  border:none; border-radius: var(--radius); background: var(--input-bg);
  padding: 16px 20px; font-family: inherit; font-size:.95rem; color:#3a3a3a; resize:none;
}
.form-field textarea{ border-radius: 22px; min-height: 150px; }
.form-field input::placeholder, .form-field textarea::placeholder{ color:#585858; }
.modal-submit{
  display:flex; justify-content:flex-end;
}
.btn-dark{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--black); color: var(--cream);
  border-radius: var(--radius); padding: 14px 26px;
  font-weight:800; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; border:none;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.btn-dark:hover{ transform: translateY(-2px); opacity:.9; }
.form-consent{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; margin: 4px 0 10px; cursor:pointer; }
.form-consent input{ width:18px; height:18px; margin-top:2px; accent-color: var(--black); flex: none; }
.form-consent a{ text-decoration: underline; }
.form-info{ font-size:.72rem; opacity:.7; line-height:1.5; margin-bottom: 18px; }
.footer-bottom .legal-link{ text-transform:none; font-weight:500; color: inherit; text-decoration: underline; }
.form-success{ display:none; font-weight:800; padding-top:8px; }
.form-success.is-visible{ display:block; }
.form-error{ display:none; font-weight:800; padding-top:8px; color: var(--red); }
.form-error.is-visible{ display:block; }
.form-error a{ text-decoration: underline; }

/* ---------- utility ---------- */
.eyebrow{ font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; opacity:.75; }
.divider{ border:none; border-top:1px solid var(--line); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (max-width: 720px){
  .site-header .spacer{ width: 42px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}