/* =========================================================
   JÓNIA PRESADO — DESIGN SYSTEM
   Premium / Editorial / Human-Centered Leadership
   Palette: Black #111111, White #FFFFFF, Champagne #D6C3A5,
            Pearl #F7F7F5, Taupe #B5A89A, Dark Grey #3A3A3A
   Type: Cormorant Garamond (display) / Montserrat (labels)
         / Inter (body)
   Signature element: "The Legacy Network" — a constellation
   of nodes & threads representing the leaders she has helped
   shape. Recurs as hero atmosphere, section dividers and an
   interactive map on the About / Social Impact pages.
   ========================================================= */

:root{
  --black:#111111;
  --white:#FFFFFF;
  --champagne:#D6C3A5;
  --champagne-soft:#e9ddc9;
  --pearl:#F7F7F5;
  --taupe:#B5A89A;
  --dark-grey:#3A3A3A;

  --display: "Cormorant Garamond", serif;
  --label: "Montserrat", sans-serif;
  --body: "Inter", sans-serif;

  --container: 1240px;
  --gap: clamp(24px, 4vw, 64px);
  --ease: cubic-bezier(.25,.46,.45,.94);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--body);
  font-weight:300;
  color:var(--black);
  background:var(--white);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

a{color:inherit;text-decoration:none;}

::selection{background:var(--champagne);color:var(--black);}

:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;}

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

/* ---------- TYPE ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.1;
  color:var(--black);
}
h1{font-size:clamp(42px,7vw,76px);}
h2{font-size:clamp(32px,4.5vw,48px);}
h3{font-size:clamp(22px,2.6vw,28px);}

.eyebrow{
  font-family:var(--label);
  font-weight:600;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--taupe);
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  display:block;
  width:34px;
  height:1px;
  background:var(--champagne);
}
.section.dark .eyebrow,
.hero .eyebrow{color:var(--champagne);}

.lede{
  font-size:clamp(17px,1.4vw,20px);
  color:var(--dark-grey);
  max-width:62ch;
}

/* ---------- LAYOUT ---------- */
.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gap);
  padding-right:var(--gap);
}
.section{padding:120px 0;}
.section.tight{padding:80px 0;}
.pearl{background:var(--pearl);}
.dark{background:var(--black);color:var(--white);}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--white);}
.dark .lede{color:#cfc9c2;}

.grid{display:grid;gap:var(--gap);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}

@media (max-width:1000px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:680px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}
  .section{padding:80px 0;}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 34px;
  font-family:var(--label);
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:1px;
  cursor:pointer;
  transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn.primary{background:var(--champagne);color:var(--black);}
.btn.primary:hover{background:var(--black);color:var(--champagne);}
.btn.secondary{border:1px solid var(--champagne);color:inherit;}
.btn.secondary:hover{background:var(--champagne);color:var(--black);}
.dark .btn.secondary{border-color:var(--champagne);color:var(--champagne);}
.dark .btn.secondary:hover{background:var(--champagne);color:var(--black);}
.btn .arrow{transition:transform .35s var(--ease);}
.btn:hover .arrow{transform:translateX(5px);}

/* ---------- NAVBAR ---------- */
.navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px var(--gap);
  background:transparent;
  transition:all .4s var(--ease);
}
.navbar.scrolled{
  padding:16px var(--gap);
  background:rgba(17,17,17,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 30px rgba(0,0,0,.15);
}
.navbar .logo{
  font-family:var(--display);
  font-size:26px;
  font-weight:600;
  color:var(--champagne);
  letter-spacing:1px;
}
.navbar nav{display:flex;align-items:center;gap:28px;}
.navbar nav a{
  font-family:var(--label);
  font-size:12px;
  font-weight:500;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--white);
  position:relative;
  padding-bottom:6px;
}
.navbar nav a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--champagne);
  transition:width .35s var(--ease);
}
.navbar nav a:hover::after,
.navbar nav a.active::after{width:100%;}
.navbar nav a.active{color:var(--champagne);}

/* light-page navbar (non-hero pages start with dark bg already so navbar stays consistent) */
.lang-switch{
  border:1px solid var(--champagne) !important;
  padding:5px 12px;
  font-size:11px !important;
  color:var(--champagne) !important;
}
.lang-switch::after{display:none !important;}
.lang-switch:hover{background:var(--champagne); color:var(--black) !important;}

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;border:none;cursor:pointer;
  padding:6px;
}
.menu-toggle span{width:24px;height:1px;background:var(--white);}

@media (max-width:1100px){
  .menu-toggle{display:flex;}
  .navbar nav{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw,360px);
    background:var(--black);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:30px;
    padding:0 50px;
    transform:translateX(100%);
    transition:transform .5s var(--ease);
  }
  .navbar nav.open{transform:translateX(0);}
  .navbar nav a{font-size:14px;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  color:var(--white);
  background:var(--black);
  overflow:hidden;
}
.hero .hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center top;
  opacity:1;
}
.hero .hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,.15) 0%, rgba(17,17,17,.40) 50%, rgba(17,17,17,.88) 100%);
}

/* H1 inside hero — premium near-white, elegant and readable */
.hero h1,
.page-hero h1 {
  color: #F2EEE8 !important;
  text-shadow: 0 2px 40px rgba(0,0,0,0.6), 0 0 80px rgba(0,0,0,0.3);
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:160px var(--gap) 100px;
}
.hero-content .subtitle{
  font-family:var(--label);
  font-size:15px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--champagne);
  margin:22px 0 18px;
}
.hero-content .slogan{
  font-size:clamp(16px,1.6vw,20px);
  max-width:620px;
  color:#e7e3dc;
  margin-bottom:42px;
  font-weight:300;
}
.hero-buttons{display:flex;gap:18px;flex-wrap:wrap;}

/* page hero (non-home) - shorter */
.page-hero{
  min-height:56vh;
  padding-top:0;
}
.page-hero .hero-content{padding:200px var(--gap) 80px;}

/* ---------- CONSTELLATION / LEGACY NETWORK ---------- */
.constellation{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
}
.constellation .node{fill:var(--champagne); animation:pulse 6s ease-in-out infinite;}
.constellation .line{stroke:var(--champagne); stroke-width:.6; opacity:.35; stroke-dasharray:4 6; animation:dash 60s linear infinite;}
@keyframes pulse{0%,100%{opacity:.35; r:2;} 50%{opacity:1; r:3.4;}}
@keyframes dash{to{stroke-dashoffset:-1000;}}

.divider-network{
  width:100%;
  height:90px;
  display:block;
}
.divider-network .node{fill:var(--champagne);}
.divider-network .line{stroke:var(--taupe); stroke-width:1; opacity:.5;}
.section + .section .divider-network,
.pearl .divider-network, .dark .divider-network{margin-top:-1px;}

/* ---------- CARDS ---------- */
.card{
  background:var(--white);
  padding:42px 38px;
  border-left:3px solid var(--champagne);
  box-shadow:0 16px 40px rgba(0,0,0,.05);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.09);}
.card .num{
  font-family:var(--display);
  font-size:34px;
  color:var(--champagne);
  margin-bottom:14px;
  display:block;
}
.card h3{margin-bottom:10px;}
.card p{color:var(--dark-grey); font-size:15px;}
.dark .card{background:#1c1c1c; border-left-color:var(--champagne); box-shadow:none;}
.dark .card p{color:#bdb8b1;}

/* ---------- STATS STRIP ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
  text-align:center;
}
.stats .stat strong{
  font-family:var(--display);
  font-size:clamp(34px,5vw,56px);
  color:var(--champagne);
  display:block;
}
.stats .stat span{
  font-family:var(--label);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--taupe);
}
@media (max-width:780px){.stats{grid-template-columns:repeat(2,1fr);}}

/* ---------- QUOTE ---------- */
.quote-block{
  max-width:840px; margin:0 auto; text-align:center;
}
.quote-block blockquote{
  font-family:var(--display);
  font-size:clamp(24px,3.4vw,40px);
  font-weight:500;
  line-height:1.4;
  color:var(--black);
}
.dark .quote-block blockquote{color:var(--white);}
.quote-block cite{
  display:block; margin-top:26px;
  font-family:var(--label); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--taupe); font-style:normal;
}

/* ---------- TIMELINE (Leadership Journey) ---------- */
.timeline{position:relative; padding-left:50px;}
.timeline::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px;
  width:1px; background:var(--taupe);
}
.timeline-item{position:relative; padding-bottom:48px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:""; position:absolute; left:-50px; top:6px;
  width:11px; height:11px; border-radius:50%;
  background:var(--champagne); border:3px solid var(--white);
  box-shadow:0 0 0 1px var(--taupe);
}
.dark .timeline-item::before{box-shadow:0 0 0 1px var(--taupe); border-color:var(--black);}
.timeline-item h4{margin-bottom:6px;}
.timeline-item p{color:var(--dark-grey); font-size:15px; max-width:60ch;}
.dark .timeline-item p{color:#bdb8b1;}
.timeline-tag{
  font-family:var(--label); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--champagne); display:block; margin-bottom:8px;
}

/* ---------- AWARDS LIST ---------- */
.awards-list{list-style:none;}
.awards-list li{
  display:flex; gap:22px; align-items:flex-start;
  padding:26px 0; border-bottom:1px solid rgba(0,0,0,.08);
}
.dark .awards-list li{border-bottom:1px solid rgba(255,255,255,.12);}
.awards-list li:first-child{padding-top:0;}
.awards-list .icon{
  font-family:var(--display); font-size:28px; color:var(--champagne); line-height:1;
}
.awards-list h4{margin-bottom:4px;}
.awards-list p{font-size:14px; color:var(--dark-grey);}
.dark .awards-list p{color:#bdb8b1;}

/* ---------- IMAGE FRAME ---------- */
.portrait-frame{
  position:relative;
}
.portrait-frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.06);
}
.portrait-frame::after{
  content:"";
  position:absolute; inset:18px;
  border:1px solid var(--champagne);
  pointer-events:none;
  z-index:2;
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--black);
  color:var(--white);
  padding:80px 0 30px;
}
footer .footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--gap);
  padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1);
}
footer .footer-logo{
  font-family:var(--display); font-size:30px; color:var(--champagne); margin-bottom:14px;
}
footer p{color:#bdb8b1; font-size:14px;}
footer h4{
  font-family:var(--label); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--champagne); margin-bottom:18px; font-weight:600;
}
footer ul{list-style:none;}
footer li{margin-bottom:10px;}
footer a{color:#cfc9c2; font-size:14px; transition:color .25s;}
footer a:hover{color:var(--champagne);}
footer .bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:26px; flex-wrap:wrap; gap:12px;
  font-size:12px; color:#807c77; font-family:var(--label); letter-spacing:1px;
}
.socials{display:flex; gap:16px;}
.socials a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:14px; transition:all .3s;
}
.socials a:hover{border-color:var(--champagne); color:var(--champagne);}
@media (max-width:900px){footer .footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){footer .footer-grid{grid-template-columns:1fr;}}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0; transform:translateY(36px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-stagger > * {transition-delay:calc(var(--i,0) * 90ms);}

/* ---------- GALLERY ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:220px;
  gap:14px;
}
.gallery-grid .g-item{
  position:relative; overflow:hidden; background:var(--dark-grey);
}
.gallery-grid .g-item img{width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease);}
.gallery-grid .g-item:hover img{transform:scale(1.06);}
.gallery-grid .g-item .tag{
  position:absolute; left:16px; bottom:16px;
  font-family:var(--label); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--white);
  background:rgba(17,17,17,.55); padding:6px 12px;
}
.gallery-grid .span-2{grid-column:span 2;}
.gallery-grid .span-row-2{grid-row:span 2;}
@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid .span-2{grid-column:span 2;}
}
@media (max-width:560px){
  .gallery-grid{grid-template-columns:1fr; grid-auto-rows:240px;}
  .gallery-grid .span-2{grid-column:span 1;}
}

/* ---------- CONTACT FORM ---------- */
.contact-layout{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--gap); align-items:flex-start;}
form.contact-form{display:flex; flex-direction:column; gap:18px;}
.contact-form input,
.contact-form select,
.contact-form textarea{
  padding:16px 18px;
  border:1px solid var(--taupe);
  background:transparent;
  font-size:15px;
  font-family:var(--body);
  color:var(--black);
}
.dark .contact-form input,
.dark .contact-form select,
.dark .contact-form textarea{color:var(--white); border-color:rgba(255,255,255,.3);}
.contact-form textarea{min-height:160px; resize:vertical;}
.contact-form label{
  font-family:var(--label); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--taupe); margin-bottom:-8px;
}
.contact-form button{
  background:var(--champagne); color:var(--black);
  border:none; padding:18px; cursor:pointer;
  font-family:var(--label); font-weight:600; letter-spacing:2px;
  text-transform:uppercase; transition:all .35s var(--ease);
}
.contact-form button:hover{background:var(--black); color:var(--champagne);}
.contact-info{display:flex; flex-direction:column; gap:28px;}
.contact-info .item h4{font-family:var(--label); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--taupe); margin-bottom:8px; font-weight:600;}
@media (max-width:900px){.contact-layout{grid-template-columns:1fr;}}

/* ---------- MISC ---------- */
.two-col{display:grid; grid-template-columns:1fr 1.15fr; gap:var(--gap); align-items:center;}
.two-col.reverse{grid-template-columns:1.15fr 1fr;}
@media (max-width:900px){
  .two-col,.two-col.reverse{grid-template-columns:1fr;}
}
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.tag-row span{
  font-family:var(--label); font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; border:1px solid var(--taupe); padding:8px 16px;
  color:var(--dark-grey);
}
.dark .tag-row span{color:var(--champagne); border-color:var(--champagne);}