/* ============================================================
   DIEGEX CORPORATION — design system
   Palette drawn from the approved master logo:
   white mark · brand blue #2453A6 · near-black ground
   Typography: Cormorant Garamond (display) · Inter (text)
   ============================================================ */

:root{
  --ink:      #07090D;
  --ink-2:    #0B0E14;
  --ink-3:    #11151D;
  --paper:    #F4F2ED;
  --paper-2:  #ECE9E2;
  --blue:     #2453A6;
  --blue-hi:  #4F82E8;
  --white:    #FFFFFF;
  --mist:     rgba(255,255,255,.62);
  --mist-2:   rgba(255,255,255,.38);
  --line:     rgba(255,255,255,.12);
  --line-d:   rgba(7,9,13,.14);
  --serif:    'Instrument Serif', Georgia, serif;
  --sans:     'Jost', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --pad:      clamp(22px, 5vw, 72px);
  --max:      1440px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--white);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blue); color:#fff; }

/* ---------- type helpers ---------- */
.kicker{
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--blue-hi);
}
.kicker--mist{ color:rgba(255,255,255,.52); }
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.08; }
.display-1{ font-size:clamp(46px, 7.2vw, 108px); letter-spacing:.01em; }
.display-2{ font-size:clamp(34px, 4.6vw, 64px); }
.display-3{ font-size:clamp(26px, 3vw, 40px); }
.lede{
  font-size:clamp(17px, 1.6vw, 21px);
  line-height:1.75;
  color:var(--mist);
  font-weight:400;
}
.lede strong{ color:var(--white); font-weight:500; }
.body-d{ color:var(--mist); font-weight:400; line-height:1.85; }
.on-paper{ color:#20242c; }
.on-paper .kicker, .section--paper .kicker{ color:var(--blue); }
.on-paper .lede, .on-paper .body-d,
.section--paper .lede, .section--paper .body-d{ color:#4a4f59; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--pad);
  transition:background .45s ease, padding .45s ease, box-shadow .45s ease;
}
/* Legibility wash behind the nav band only. The hero art below it is untouched;
   it cross-fades out as .scrolled brings in the solid blurred backdrop. */
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(7,9,13,.78) 0%, rgba(7,9,13,.62) 55%, rgba(7,9,13,0) 100%);
  transition:opacity .45s ease;
}
.nav.scrolled::before{ opacity:0; }
.nav.scrolled{
  background:rgba(7,9,13,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:14px var(--pad);
  box-shadow:0 1px 0 var(--line);
}
.nav__logo img{ height:44px; width:auto; transition:height .45s ease; }
.nav.scrolled .nav__logo img{ height:34px; }
.nav__links{ display:flex; gap:38px; align-items:center; }
.nav__links a{
  font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--mist); padding:6px 0; position:relative; transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--blue-hi); transition:width .35s ease;
}
.nav__links a:hover, .nav__links a.active{ color:var(--white); }
.nav__links a:hover::after, .nav__links a.active::after{ width:100%; }
.nav__burger{ display:none; background:none; border:0; cursor:pointer; z-index:110; }
.nav__burger span{
  display:block; width:26px; height:1.5px; background:#fff; margin:6px 0;
  transition:transform .35s ease, opacity .35s ease;
}
.nav__burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ opacity:0; }
.nav__burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate;
}
.hero--short{ min-height:78vh; min-height:78svh; }
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 26s ease-out both;
  will-change:transform;
}
@keyframes kenburns{ from{ transform:scale(1.14); } to{ transform:scale(1.0); } }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(7,9,13,.55) 0%, rgba(7,9,13,.05) 34%, rgba(7,9,13,.24) 62%, rgba(7,9,13,.94) 100%);
}
.hero__inner{
  width:100%; max-width:var(--max); margin:0 auto;
  padding:0 var(--pad) clamp(64px, 9vh, 120px);
}
.hero__inner .kicker{ display:block; margin-bottom:26px; }
.hero__sub{
  max-width:640px; margin-top:30px;
  font-size:clamp(16px, 1.4vw, 19px); line-height:1.8;
  color:var(--mist); font-weight:400;
}
.hero__cta{ margin-top:44px; display:flex; gap:22px; flex-wrap:wrap; }
.hero__scrolldown{
  position:absolute; right:var(--pad); bottom:36px;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.52);
  writing-mode:vertical-rl; display:flex; align-items:center; gap:14px;
}
.hero__scrolldown::after{
  content:''; width:1px; height:56px;
  background:linear-gradient(180deg, var(--blue-hi), transparent);
  animation:drip 2.4s ease-in-out infinite;
}
@keyframes drip{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  padding:18px 34px; border:1px solid var(--line);
  color:var(--white); background:rgba(255,255,255,.02);
  transition:background .35s, border-color .35s, color .35s;
}
.btn .arr{ transition:transform .35s ease; }
.btn:hover{ background:var(--blue); border-color:var(--blue); }
.btn:hover .arr{ transform:translateX(6px); }
.btn--solid{ background:var(--blue); border-color:var(--blue); }
.btn--solid:hover{ background:var(--blue-hi); border-color:var(--blue-hi); }
.btn--paper{ color:#20242c; border-color:var(--line-d); background:transparent; }
.btn--paper:hover{ color:#fff; }

/* ---------- sections ---------- */
.section{ position:relative; padding:clamp(90px, 12vh, 170px) 0; }
.section--paper{ background:var(--paper); color:#20242c; }
.section--ink2{ background:var(--ink-2); }
.section--flush-b{ padding-bottom:0; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.wrap--narrow{ max-width:980px; }
.section-head{ max-width:820px; margin-bottom:clamp(48px, 7vh, 92px); }
.section-head .kicker{ display:block; margin-bottom:22px; }
.section-head .lede{ margin-top:26px; }
.rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, var(--blue) 0, var(--blue-hi) 120px, var(--line) 121px, transparent 100%);
}
.section--paper .rule{
  background:linear-gradient(90deg, var(--blue) 0, var(--blue-hi) 120px, var(--line-d) 121px, transparent 100%);
}

/* ---------- pillars grid ---------- */
.pillars{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px; background:var(--line-d);
  border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d);
}
.pillar{ background:var(--paper); padding:56px 44px 64px; position:relative; overflow:hidden; }
.pillar__num{
  font-family:var(--serif); font-size:15px; color:var(--blue);
  letter-spacing:.14em; margin-bottom:34px; display:block;
}
.pillar h3{ font-size:29px; margin-bottom:18px; color:#14171d; }
.pillar p{ font-size:15px; line-height:1.85; color:#4a4f59; font-weight:400; }
.pillar::before{
  content:''; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .5s ease;
}
.pillar:hover::before{ transform:scaleX(1); }

/* ---------- services (dark, numbered rows) ---------- */
.svc{ border-top:1px solid var(--line); }
.svc__row{
  display:grid; grid-template-columns:120px 1fr 1.35fr; gap:44px;
  padding:64px 0; border-bottom:1px solid var(--line);
  transition:background .4s;
}
.svc__row:hover{ background:rgba(36,83,166,.06); }
.svc__num{ font-family:var(--serif); font-size:20px; color:var(--blue-hi); padding-top:6px; }
.svc__row h3{ font-size:clamp(24px, 2.4vw, 34px); }
.svc__row p{ color:var(--mist); font-weight:400; line-height:1.85; font-size:15.5px; }
.svc__row p + p{ margin-top:14px; }

/* ---------- band (full-bleed image quote) ---------- */
.band{
  position:relative; min-height:74svh;
  display:flex; align-items:center; overflow:hidden; isolation:isolate;
}
.band__media{ position:absolute; inset:0; z-index:-2; }
.band__media img{ width:100%; height:110%; object-fit:cover; }
.band__scrim{ position:absolute; inset:0; z-index:-1; background:rgba(7,9,13,.62); }
.band__inner{ max-width:900px; margin:0 auto; padding:110px var(--pad); text-align:center; }
.band__inner .display-2{ line-height:1.25; }
.band__inner .kicker{ display:block; margin-bottom:30px; }
.band__attr{ margin-top:30px; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.72); }

/* ---------- split (image + text) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.split__media{ position:relative; min-height:560px; overflow:hidden; }
.split__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.split:hover .split__media img{ transform:scale(1.04); }
.split__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px, 6vw, 110px);
}
.split__body .kicker{ display:block; margin-bottom:24px; }
.split__body .display-3{ margin-bottom:24px; }
.split__body .btn{ align-self:flex-start; margin-top:38px; }

/* ---------- founder ---------- */
.founder{ display:grid; grid-template-columns:minmax(320px, 460px) 1fr; gap:clamp(44px, 6vw, 110px); align-items:start; }
.founder__photo{ position:relative; }
.founder__photo img{ width:100%; height:auto; filter:grayscale(12%); }
.founder__photo::after{
  content:''; position:absolute; left:-14px; bottom:-14px; width:120px; height:120px;
  border-left:1px solid var(--blue); border-bottom:1px solid var(--blue);
  pointer-events:none;
}
.founder__body h2{ margin-bottom:8px; }
.founder__role{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--blue-hi); margin-bottom:34px;
}
.founder__body p{ color:var(--mist); font-weight:400; line-height:1.9; }
.founder__body p + p{ margin-top:20px; }
.founder__sig{
  margin-top:40px; font-family:var(--serif); font-size:26px; font-style:italic; color:var(--mist);
}

/* ---------- principles ---------- */
.principles{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.principle{ background:var(--ink-2); padding:52px 46px; }
.principle h3{ font-size:26px; margin-bottom:14px; }
.principle p{ color:var(--mist); font-weight:400; font-size:15px; line-height:1.8; }
.principle .kicker{ display:block; margin-bottom:22px; }

/* ---------- markets ---------- */
.market-lead{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(44px, 6vw, 110px); }
.market-lead h2{ margin-bottom:26px; }
.market-facts{ border-left:1px solid var(--line); padding-left:clamp(28px, 3vw, 54px); display:flex; flex-direction:column; gap:34px; }
.section--paper .market-facts{ border-left-color:var(--line-d); }
.fact h3{
  font-family:var(--sans); font-size:11px; font-weight:600; line-height:1.6;
  letter-spacing:.3em; text-transform:uppercase; color:var(--blue-hi); margin-bottom:10px;
}
.fact p{ font-size:15px; color:var(--mist); font-weight:400; line-height:1.8; }
.section--paper .fact h3{ color:var(--blue); }
.section--paper .fact p{ color:#4a4f59; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px, 6vw, 110px); }
.contact-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.contact-item{
  display:flex; justify-content:space-between; align-items:baseline; gap:22px;
  padding:30px 4px; border-bottom:1px solid var(--line);
  transition:padding .3s ease, background .3s;
}
.contact-item:hover{ padding-left:14px; background:rgba(36,83,166,.06); }
.contact-item .lab{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--mist-2); }
.contact-item .val{ font-family:var(--serif); font-size:clamp(19px, 1.9vw, 26px); color:var(--white); }

/* ---------- footer ---------- */
.footer{ background:#050608; border-top:1px solid var(--line); padding:clamp(64px, 9vh, 110px) 0 46px; }
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(36px, 5vw, 90px);
  padding-bottom:64px; border-bottom:1px solid var(--line);
}
.footer__brand img{ height:74px; width:auto; margin-bottom:26px; }
.footer__brand p{ font-size:13px; color:rgba(255,255,255,.52); max-width:340px; line-height:1.8; font-weight:400; }
.footer h2{
  font-family:var(--sans); font-size:10px; font-weight:600; line-height:1.6;
  letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.52); margin-bottom:24px;
}
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.footer ul a{ font-size:14px; color:var(--mist); font-weight:400; transition:color .3s; }
.footer ul span{ font-size:14px; color:var(--mist); font-weight:400; }
.footer ul a:hover{ color:var(--blue-hi); }
.footer__legal{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:38px; font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.52);
}

/* ---------- reveal animations ---------- */
.rv{ opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.12s; } .rv-d2{ transition-delay:.24s; } .rv-d3{ transition-delay:.36s; }

/* ---------- page transitions on hero text ---------- */
.hero .kicker, .hero h1, .hero__sub, .hero__cta{
  opacity:0; transform:translateY(30px);
  animation:rise 1.1s cubic-bezier(.16,1,.3,1) forwards;
}
.hero h1{ animation-delay:.15s; }
.hero__sub{ animation-delay:.3s; }
.hero__cta{ animation-delay:.45s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- mobile ---------- */
@media (max-width: 1020px){
  .pillars{ grid-template-columns:1fr; }
  .svc__row{ grid-template-columns:64px 1fr; }
  .svc__row p{ grid-column:2; }
  .split{ grid-template-columns:1fr; }
  .split__media{ min-height:420px; }
  .founder{ grid-template-columns:1fr; }
  .founder__photo{ max-width:420px; }
  .principles{ grid-template-columns:1fr; }
  .market-lead{ grid-template-columns:1fr; }
  .market-facts{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:44px; }
  .section--paper .market-facts{ border-top-color:var(--line-d); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
}
@media (max-width: 880px){
  .nav__links{
    position:fixed; inset:0; background:rgba(5,6,8,.98);
    flex-direction:column; justify-content:center; gap:34px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .4s ease, visibility 0s linear .4s;
  }
  .nav__links.open{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .4s ease, visibility 0s linear 0s;
  }
  .nav__links a{ font-size:14px; }
  .nav__burger{ display:block; }
  .hero__scrolldown{ display:none; }
}

/* ---------- leadership card (Petredec-style) ---------- */
.lead-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 340px)); gap:40px; }
.lead-card{ cursor:pointer; background:none; border:0; text-align:left; font-family:inherit; }
.lead-card__photo{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.lead-card__photo img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(100%) contrast(1.02);
  transition:filter .6s ease, transform 1s ease;
}
.lead-card:hover .lead-card__photo img{ filter:grayscale(0%); transform:scale(1.03); }
.lead-card__photo::after{
  content:'View profile'; position:absolute; right:16px; bottom:14px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#fff;
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s;
}
.lead-card:hover .lead-card__photo::after{ opacity:1; transform:none; }
.lead-card h3{ font-size:27px; margin-top:24px; color:var(--white); }
.section--paper .lead-card h3{ color:#14171d; }
.lead-card .role{
  display:block; margin-top:8px; font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--blue-hi);
}
.section--paper .lead-card .role{ color:var(--blue); }

/* ---------- bio modal ---------- */
.modal{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 56px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.modal.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .45s ease, visibility 0s linear 0s;
}
.modal__veil{ position:absolute; inset:0; background:rgba(5,6,8,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal__panel{
  position:relative; background:var(--paper); color:#20242c;
  width:min(1180px, 100%); max-height:88vh; max-height:88svh; overflow:auto;
  display:grid; grid-template-columns:minmax(280px, 440px) 1fr;
  transform:translateY(28px) scale(.985); transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.modal.open .modal__panel{ transform:none; }
.modal__photo{ position:relative; min-height:420px; }
.modal__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.modal__body{ padding:clamp(34px, 4vw, 72px); }
.modal__body h2{ font-size:clamp(30px, 3vw, 44px); color:#14171d; }
.modal__body .role{
  display:block; margin:10px 0 30px; font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--blue);
}
.modal__body p{ font-size:15.5px; line-height:1.9; color:#43474f; font-weight:400; }
.modal__body p + p{ margin-top:16px; }
.modal__close{
  position:absolute; top:18px; right:20px; z-index:2;
  background:none; border:0; cursor:pointer;
  font-size:30px; line-height:1; color:#B34A21; font-family:var(--serif);
  transition:transform .3s ease;
}
.modal__close:hover{ transform:rotate(90deg); }
@media (max-width: 880px){
  .modal__panel{ grid-template-columns:1fr; }
  .modal__photo{ min-height:340px; }
}

/* ---------- video heroes ---------- */
.hero__media video{
  width:100%; height:100%; object-fit:cover;
  animation:none;
}

/* ---------- reduced motion ----------
   Anything that only becomes visible via an animation or the reveal
   observer is forced to its END state here — never left at opacity:0. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  .hero .kicker, .hero h1, .hero__sub, .hero__cta{ opacity:1; transform:none; }
  .rv{ opacity:1; transform:none; }
  .hero__media img{ animation:none; transform:none; }
  .hero__scrolldown::after{ opacity:1; }
}