/* ============ DIÁFANO — B2B Landing ============ */
:root{
  --ink:#0d0c0a;
  --ink-soft:#17140f;
  --cream:#f4ede2;
  --cream-dim:#cfc4b3;
  --gold:#b6924a;
  --gold-light:#d9bd82;
  --wine:#5c1f24;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* i18n toggle */
body.lang-en .es{display:none;}
body.lang-es .en{display:none;}

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.01em;margin:0 0 .5em;}
h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.15;font-weight:500;}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.2;}
h3{font-size:1.35rem;}
p{margin:0 0 1em;color:var(--cream-dim);}
.center{text-align:center;margin-left:auto;margin-right:auto;}
.kicker{
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  color:var(--gold-light);
  margin-bottom:.9em;
}
.kicker.center{text-align:center;}

/* buttons */
.btn{
  display:inline-block;
  padding:.95em 2em;
  border-radius:2px;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--gold);
  transition:all .25s ease;
  cursor:pointer;
}
.btn-primary{background:var(--gold);color:var(--ink);}
.btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light);}
.btn-ghost{color:var(--cream);border-color:rgba(244,237,226,.5);}
.btn-ghost:hover{border-color:var(--cream);}
.btn-outline{color:var(--gold-light);border-color:var(--gold);background:transparent;}
.btn-outline:hover{background:var(--gold);color:var(--ink);}
.btn.full{width:100%;text-align:center;border:none;}

/* header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(to bottom, rgba(13,12,10,.85), rgba(13,12,10,0));
  padding:18px 0;
}
.header-inner{display:flex;align-items:center;gap:24px;}
.brand{display:flex;align-items:center;}
.brand-logo{height:46px;width:auto;display:block;filter:brightness(0) invert(1);}
.main-nav{display:flex;gap:28px;margin-left:auto;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;}
.main-nav a{opacity:.85;transition:opacity .2s;}
.main-nav a:hover{opacity:1;color:var(--gold-light);}
.nav-cta{border:1px solid var(--gold);padding:.5em 1.2em;border-radius:2px;}
.lang-switch{display:flex;align-items:center;gap:6px;font-size:.8rem;letter-spacing:.05em;margin-left:12px;}
.lang-switch button{background:none;border:none;color:var(--cream-dim);cursor:pointer;font-family:var(--sans);padding:2px;}
.lang-switch button.active{color:var(--gold-light);font-weight:500;}
.lang-switch span{color:rgba(244,237,226,.3);}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.burger span{width:22px;height:1.5px;background:var(--cream);display:block;}

/* hero */
.hero{
  position:relative;
  min-height:100vh;
  background-size:cover;
  background-position:center 30%;
  display:flex;
  align-items:flex-end;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(13,12,10,.96) 5%, rgba(13,12,10,.35) 55%, rgba(13,12,10,.55) 100%);
}
.hero-inner{position:relative;padding-bottom:9vh;max-width:820px;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.3em;font-size:.78rem;
  color:var(--gold-light);margin-bottom:1.2em;
}
.hero h1{color:var(--cream);}
.hero-sub{font-size:1.15rem;max-width:640px;color:var(--cream);text-shadow:0 2px 14px rgba(0,0,0,.65);}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:1.6em;}
.hero-video-frame{
  position:relative;width:100%;max-width:520px;aspect-ratio:16/9;overflow:hidden;
  margin-top:2em;border:1px solid rgba(182,146,74,.45);box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.hero-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* sections */
.section{padding:7em 0;}
.logo-divider{padding:3em 0;text-align:center;}
.logo-divider-img{height:64px;width:auto;margin:0 auto;display:inline-block;opacity:.92;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.two-col.reverse .col-media{order:2;}
.col-media img{border-radius:2px;}
.col-media.stacked{display:grid;gap:16px;}

.pillars{
  margin-top:5em;
  display:grid;grid-template-columns:repeat(4,1fr);gap:36px;
  border-top:1px solid rgba(244,237,226,.12);
  padding-top:3.5em;
}
.pillar-num{font-family:var(--serif);font-size:1rem;color:var(--gold);letter-spacing:.1em;}
.pillar p{font-size:.92rem;}

.credential{background:var(--ink-soft);border-top:1px solid rgba(182,146,74,.25);border-bottom:1px solid rgba(182,146,74,.25);}
.credential-inner{max-width:820px;text-align:center;margin:0 auto;}
.credential-eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:var(--gold-light);margin-bottom:1em;}
.credential h2{font-style:italic;}
.credential-sub{font-size:.98rem;}
.credential-secondary{margin-top:1.4em;padding-top:1.4em;border-top:1px solid rgba(244,237,226,.12);font-size:.88rem;opacity:.85;}

/* understand / silhouette image */
.understand-media{margin-top:3.5em;max-width:640px;margin-left:auto;margin-right:auto;}
.understand-media img{width:100%;max-height:480px;object-fit:cover;display:block;}

/* experience / acts */
.lede{max-width:760px;margin:0 auto 0;font-size:1.05rem;}
.acts-grid{margin-top:3.5em;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.act{background:var(--ink-soft);border:1px solid rgba(244,237,226,.08);padding:32px;text-align:center;}
.act-photo{width:100%;height:180px;object-fit:cover;margin:-32px -32px 20px;display:block;}
.act-num{display:block;text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:var(--gold-light);margin-bottom:.8em;}
.act h3{margin-bottom:.5em;}
.act p{font-size:.92rem;}
.center-quote{
  margin:3.5em auto 0;max-width:700px;text-align:center;border-left:none;
  font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--cream);
  padding:1.4em 0 0;border-top:1px solid rgba(182,146,74,.25);
}
.quote-inline{
  font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--cream);
  border-left:2px solid var(--gold);padding-left:1.2em;margin-top:1.6em;
}
.quote-author{display:block;font-family:var(--sans);font-style:normal;font-size:.78rem;color:var(--gold-light);text-transform:uppercase;letter-spacing:.1em;margin-top:.6em;}

/* made-for */
.made-for-grid{margin-top:3.5em;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.mf-card{background:var(--ink-soft);border:1px solid rgba(244,237,226,.08);}
.mf-media{height:150px;background-size:cover;background-position:center;}
.mf-card h3{font-size:1.05rem;margin:20px 24px 0;}
.mf-card p{font-size:.85rem;margin:.6em 24px 24px;}

/* imagine */
.scenario-grid{margin-top:3.5em;display:flex;flex-wrap:wrap;justify-content:center;gap:22px;}
.scenario{flex:0 1 calc((100% - 44px)/3);max-width:calc((100% - 44px)/3);}
.scenario img{width:100%;height:230px;object-fit:cover;object-position:top center;}
.scenario figcaption{margin-top:.7em;font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--cream);text-align:center;}
.imagine-tagline{margin-top:3em;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--gold-light);max-width:640px;}

/* process */
.process-steps{margin-top:3.5em;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;border-top:1px solid rgba(182,146,74,.25);padding-top:3em;}
.step-num{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--gold);letter-spacing:.06em;margin-bottom:.6em;}
.step h3{font-size:1.1rem;}
.step p{font-size:.88rem;}

/* formats */
.formats-grid{margin-top:3.5em;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.format-card{background:var(--ink-soft);border:1px solid rgba(182,146,74,.25);padding:36px;text-align:center;}
.format-card h3{color:var(--gold-light);}
.format-card p{font-size:.92rem;}

/* international */
.intl{background:var(--ink-soft);border-top:1px solid rgba(182,146,74,.25);border-bottom:1px solid rgba(182,146,74,.25);}
.intl-inner{max-width:760px;text-align:center;margin:0 auto;}

.credential-quotes{margin-top:3.5em;}

.paths{}
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:3em;}
.path-card{background:var(--ink-soft);border:1px solid rgba(244,237,226,.08);}
.path-media{height:230px;background-size:cover;background-position:center;}
.path-body{padding:36px;}
.path-tag{color:var(--gold-light);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;margin-bottom:.8em;}
.path-list{padding-left:1.1em;margin:1.2em 0;color:var(--cream-dim);font-size:.92rem;}
.path-list li{margin-bottom:.5em;}

.stagings{margin-top:4.5em;}
.design-lede{margin-top:.6em;max-width:720px;color:var(--gold-light);font-style:italic;}
.stagings-grid{margin-top:2.5em;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.staging img{width:100%;height:340px;object-fit:cover;}
.staging figcaption{margin-top:.8em;font-size:.82rem;color:var(--cream-dim);text-align:center;}

.quotes{background:var(--ink-soft);}
.quotes-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:2.5em;}
blockquote{
  margin:0;font-family:var(--serif);font-style:italic;font-size:1.3rem;
  color:var(--cream);border-left:2px solid var(--gold);padding-left:1.2em;
}

.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:3em;}
.team-card{text-align:center;}
.team-card img{width:180px;height:180px;object-fit:contain;background:var(--ink-soft);border-radius:50%;margin:0 auto 1.2em;border:1px solid var(--gold);}
.team-card .role{color:var(--gold-light);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;}
.team-card .quote{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--cream-dim);}

.cta-band{background:linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.contact-details p{margin:.4em 0;font-size:.95rem;}
.contact-details a{color:var(--gold-light);border-bottom:1px solid transparent;}
.contact-details a:hover{border-color:var(--gold-light);}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--cream-dim);}
.contact-form label.full{grid-column:1 / -1;}
.contact-form input,.contact-form select,.contact-form textarea{
  background:var(--ink-soft);border:1px solid rgba(244,237,226,.18);color:var(--cream);
  padding:.8em .9em;font-family:var(--sans);font-size:.95rem;border-radius:2px;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold);}
.hidden-field{position:absolute;left:-9999px;}
.form-note{font-size:.75rem;color:var(--cream-dim);opacity:.7;margin:-6px 0 0;text-transform:none;letter-spacing:0;}

.site-footer{padding:4em 0 2.5em;border-top:1px solid rgba(244,237,226,.1);text-align:center;}
.footer-logo-img{height:100px;width:auto;margin:0 auto 1em;display:block;}
.footer-meta{font-size:.8rem;color:var(--cream-dim);opacity:.7;margin-top:1.5em;}

/* responsive */
@media (max-width:900px){
  .two-col,.path-grid,.quotes-grid,.team-grid,.contact-grid,.acts-grid,.stagings-grid,.understand-grid{grid-template-columns:1fr;}
  .two-col.reverse .col-media{order:0;}
  .pillars{grid-template-columns:1fr 1fr;}
  .contact-form{grid-template-columns:1fr;}
  .made-for-grid{grid-template-columns:1fr 1fr;}
  .scenario{flex:0 1 calc((100% - 22px)/2);max-width:calc((100% - 22px)/2);}
  .process-steps{grid-template-columns:1fr 1fr;}
  .formats-grid{grid-template-columns:1fr;}
  .main-nav{
    position:fixed;top:0;right:0;height:100vh;width:78vw;max-width:320px;
    background:var(--ink-soft);flex-direction:column;justify-content:center;
    gap:26px;padding:0 40px;
    transform:translateX(100%);transition:transform .3s ease;
  }
  .main-nav.open{transform:translateX(0);}
  .burger{display:flex;}
}
@media (max-width:560px){
  .pillars{grid-template-columns:1fr;}
  .section{padding:5em 0;}
  .made-for-grid,.process-steps{grid-template-columns:1fr;}
  .scenario{flex:0 1 100%;max-width:100%;}
  html{font-size:17.5px;}
  .hero-sub{font-size:1.2rem;}
}