/* ==========================================================================
   UAE CORPORATE BRANDING SITE — LVRST EDITION
   Design language reverse-engineered from neemauae.com (Astro build)
   Fonts: Manrope (display) · Inter (body) · JetBrains Mono (numerals/labels)
   ========================================================================== */

:root{
  /* -------- Core palette -------- */
  --ink:        #0B0B0B;   /* near-black page ground        */
  --charcoal:   #141414;   /* dark section surface          */
  --espresso:   #2C2520;   /* warm dark brown (stats, btns) */
  --paper:      #F3F2F0;   /* warm off-white section        */
  --cloud:      #E9E9E9;   /* cool light-gray section       */
  --white:      #FFFFFF;

  /* -------- Accents (warm metallics) -------- */
  --gold:       #C5A059;   /* brand gold — sparing use      */
  --tan:        #C6A895;   /* headline second-line accent   */
  --bronze:     #A8836C;   /* inline highlighted words      */

  /* -------- Text -------- */
  --txt-light:  #EAEAEA;   /* body on dark                  */
  --txt-dim:    #9CA3AF;   /* muted on dark                 */
  --txt-dark:   #2C2520;   /* headings on light             */
  --txt-body:   #55504B;   /* body on light                 */

  /* -------- Type -------- */
  --font-display: 'Manrope', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* -------- Rhythm -------- */
  --section-pad: clamp(96px, 12vw, 160px);
  --gutter: clamp(24px, 6vw, 84px);
  --hairline-dark:  rgba(255,255,255,.1);
  --hairline-light: rgba(44,37,32,.14);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
ol,ul{list-style:none}
body{
  font-family:var(--font-body);
  font-size:16px;font-weight:400;line-height:1.5;
  color:var(--txt-light);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ==================== HEADER ==================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .4s ease, padding .4s ease;
}
.site-header.scrolled,.site-header.menu-open{background:var(--white);padding:16px var(--gutter)}
.logo{
  font-family:var(--font-display);font-weight:800;font-size:22px;
  letter-spacing:.18em;color:var(--white);transition:color .3s;
}
.logo span{color:var(--gold);margin-left:-.14em}
.site-header.scrolled .logo,.site-header.menu-open .logo{color:var(--ink)}
.menu-btn{
  width:44px;height:30px;background:none;border:none;cursor:pointer;position:relative;
  outline:none;
}
.menu-btn:focus-visible{outline:1px solid var(--tan);outline-offset:6px}
.menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:8px;align-items:flex-end;
}
.menu-btn i{display:block;height:2px;background:var(--white);border-radius:1px;transition:.35s;transform-origin:center}
.menu-btn i:nth-child(1){width:36px}
.menu-btn i:nth-child(2){width:24px}
.menu-btn:hover i{width:36px;background:var(--tan)}
.site-header.scrolled .menu-btn i,.site-header.menu-open .menu-btn i{background:var(--ink)}
.site-header.menu-open .menu-btn i:nth-child(1){width:32px;transform:translateY(5px) rotate(45deg)}
.site-header.menu-open .menu-btn i:nth-child(2){width:32px;transform:translateY(-5px) rotate(-45deg)}

/* Fullscreen mega menu — white, three columns (matches reference) */
.nav-overlay{
  position:fixed;inset:0;z-index:99;background:var(--white);
  padding:120px var(--gutter) 60px;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.nav-overlay.open{opacity:1;pointer-events:auto}
.mega{
  max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:clamp(32px,5vw,72px);
  align-items:start;height:100%;
}
.mega-links{border-right:1px solid var(--hairline-light);padding:16px 32px 40px 0;align-self:stretch}
.mega-links a{
  display:block;font-family:var(--font-body);font-weight:400;
  font-size:clamp(24px,2.2vw,30px);line-height:1.2;color:#9CA3AF;
  padding:14px 0;transition:color .25s, padding-left .25s;
}
.mega-links a:hover{color:var(--txt-dark);padding-left:10px}
.mega-explore{padding-top:16px}
.mega-explore h2{
  font-family:var(--font-display);font-weight:600;font-size:28px;
  color:var(--ink);letter-spacing:-.01em;margin-bottom:22px;
}
.mega-explore p{font-size:15px;font-weight:300;line-height:1.75;color:var(--txt-body);max-width:340px}
.mega-explore p .hl{color:var(--bronze)}
/* IMAGE SLOT: images/menu.jpg (portrait ~900×1200) — mega-menu feature card */
.mega-feature{
  position:relative;min-height:420px;max-height:60vh;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:34px 38px;
  background:
    radial-gradient(420px 300px at 70% 35%, rgba(197,160,89,.4), transparent 65%),
    radial-gradient(340px 260px at 30% 60%, rgba(198,168,149,.2), transparent 60%),
    linear-gradient(165deg,#1D1712 0%, #0B0B0B 70%);
  background-size:cover;background-position:center;
}
.mega-feature.has-image{
  background:
    linear-gradient(0deg, rgba(11,11,11,.72) 0%, rgba(11,11,11,.15) 45%, rgba(11,11,11,.05) 100%),
    url("../images/menu.jpg") center/cover no-repeat;
}
.mega-feature .label{
  font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(234,234,234,.75);margin-bottom:14px;
}
.mega-feature h3{
  font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.25;
  color:var(--white);letter-spacing:-.01em;
}
@media (max-width:960px){
  .mega{grid-template-columns:1fr}
  .mega-links{border-right:none;border-bottom:1px solid var(--hairline-light);padding-right:0}
  .mega-feature{min-height:280px}
}

/* ==================== SHARED PRIMITIVES ==================== */
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* Eyebrow label — small caps with leading rule */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--bronze);
  margin-bottom:28px;
}
.eyebrow::before{content:"";width:40px;height:1px;background:var(--bronze)}
.eyebrow.centered{justify-content:center}
.eyebrow.centered::after{content:"";width:40px;height:1px;background:var(--bronze)}
.eyebrow.boxed{
  display:inline-flex;border:1px solid var(--hairline-dark);
  padding:10px 22px;letter-spacing:.28em;color:var(--txt-dim);
}
.eyebrow.boxed::before,.eyebrow.boxed::after{display:none}

/* Display headings — two-tone second line */
.display{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(38px,4.4vw,62px);line-height:1.1;
  letter-spacing:-0.02em;
}
.display .alt{color:var(--tan)}
.on-light .display{color:var(--txt-dark)}
.on-dark  .display{color:var(--white)}
.display .hl{color:var(--bronze)}

.lede{font-size:17px;font-weight:300;line-height:1.7;max-width:560px}
.on-light .lede{color:var(--txt-body)}
.on-dark  .lede{color:var(--txt-dim)}

/* Buttons — rectangular, zero radius */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-body);font-size:15px;font-weight:500;
  padding:14px 28px;border:none;cursor:pointer;transition:.3s;
}
.btn-dark{background:var(--espresso);color:var(--white)}
.btn-dark:hover{background:var(--ink);gap:22px}
.btn-light{background:#C9C9C9;color:var(--ink)}
.btn-light:hover{background:var(--tan);gap:22px}
.btn .arrow-circle{
  width:34px;height:34px;border:1px solid currentColor;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
}

/* Hero circular CTA */
.cta-round{
  display:inline-flex;align-items:center;gap:20px;
  font-size:15px;font-weight:500;color:var(--white);
}
.cta-round .disc{
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:.35s;
}
.cta-round:hover .disc{background:var(--tan);border-color:var(--tan);color:var(--ink);transform:translateX(6px)}

/* Text link with arrow */
.textlink{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:500;transition:gap .25s;
}
.textlink:hover{gap:18px}
.on-light .textlink{color:var(--txt-dark)}
.on-dark  .textlink{color:var(--txt-light)}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}

/* ==================== HERO ==================== */
/* IMAGE SLOT: drop your file at images/hero.jpg (≥2400×1400, dark & cinematic).
   The scrim + gradients sit ON TOP of the photo so the headline stays readable.
   If the file is missing, the gradients alone render — nothing breaks. */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(100deg, rgba(11,11,11,.82) 0%, rgba(11,11,11,.55) 42%, rgba(11,11,11,.12) 75%),
    radial-gradient(1100px 620px at 78% 72%, rgba(197,160,89,.30), transparent 62%),
    radial-gradient(900px 480px at 88% 20%, rgba(198,168,149,.14), transparent 60%),
    radial-gradient(700px 500px at 12% 88%, rgba(168,131,108,.16), transparent 60%),
    linear-gradient(160deg, #191410 0%, #0B0B0B 55%, #14100C 100%);
  background-size:cover;background-position:center;
}
.hero.has-image{
  background:
    linear-gradient(100deg, rgba(11,11,11,.82) 0%, rgba(11,11,11,.5) 42%, rgba(11,11,11,.08) 75%),
    linear-gradient(0deg, rgba(11,11,11,.55) 0%, transparent 30%),
    url("../images/hero.jpg") center/cover no-repeat,
    linear-gradient(160deg, #191410 0%, #0B0B0B 55%, #14100C 100%);
}
.hero::after{ /* grain */
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .veins{position:absolute;inset:auto 0 0 0;height:46%;opacity:.55;pointer-events:none}
.hero.has-image .veins{display:none}
.hero-inner{position:relative;z-index:2;padding:0 var(--gutter);max-width:1440px;width:100%;margin:0 auto}
.hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(52px,7vw,96px);line-height:1.05;letter-spacing:-0.05em;
  color:var(--white);
}
.hero h1 .line2{color:rgba(255,255,255,.62);font-weight:600}
.hero .kicker{
  display:flex;align-items:center;gap:16px;margin-top:34px;
  font-size:15px;font-weight:300;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(234,234,234,.85);
}
.hero .kicker::before{content:"";width:1px;height:34px;background:rgba(198,168,149,.6)}
.hero .cta-round{margin-top:46px}

/* ==================== ABOUT (light) ==================== */
.section{padding:var(--section-pad) 0;position:relative;overflow:hidden}
.on-light{color:var(--txt-body)}
.bg-paper{background:var(--paper)}
.bg-cloud{background:var(--cloud)}
.bg-dark{background:var(--charcoal)}
.bg-espresso{background:var(--espresso)}

.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.about-grid .lede{margin:8px 0 36px}
.pillars{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  margin-top:96px;
}
.pillar{border-top:1px solid var(--hairline-light);padding-top:26px}
.pillar h3{
  font-family:var(--font-display);font-weight:500;font-size:21px;
  color:var(--txt-dark);margin-bottom:12px;
}
.pillar p{font-size:14.5px;font-weight:300;line-height:1.65;color:var(--txt-body)}
.pillar p .hl{color:var(--bronze)}

/* ==================== SERVICES (dark) ==================== */
.center{text-align:center}
.services-head .lede{margin:26px auto 0;max-width:640px}
.cards{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  margin-top:80px;border:1px solid var(--hairline-dark);
}
.card{
  background:rgba(255,255,255,.02);
  outline:1px solid var(--hairline-dark);
  padding:48px 44px;text-align:left;transition:background .35s;
  position:relative;
}
.card:hover{background:rgba(198,168,149,.06)}
/* ---- NUMERAL SYSTEM (two-tier) ----
   Tier 1 · Index  — JetBrains Mono 13px, ls .2em, two-digit ("01").
                     Color: tan on dark surfaces, bronze on light surfaces.
                     Used on EVERY card: services, partners, values circle.
   Tier 2 · Display — Manrope 300, large (52px+), ghost tint.
                     Used on editorial columns (Why Us) and stat values only. */
.num-index{
  font-family:var(--font-mono);font-size:13px;font-weight:400;
  letter-spacing:.2em;
}
.on-dark .num-index,.bg-values .num-index{color:var(--tan)}
.on-light .num-index{color:var(--bronze)}
.card .num{
  font-family:var(--font-mono);font-size:13px;color:var(--tan);
  letter-spacing:.2em;
}
.card h3{
  font-family:var(--font-display);font-weight:500;font-size:24px;
  color:var(--white);margin:18px 0 14px;
}
.card p{font-size:15px;font-weight:300;line-height:1.7;color:var(--txt-dim);margin-bottom:26px}
.card .textlink{color:var(--tan);font-size:14px}

/* ==================== PARALLAX STATEMENT BAND ==================== */
.band{
  position:relative;padding:150px 0;text-align:center;overflow:hidden;
  background:
    radial-gradient(900px 420px at 30% 30%, rgba(197,160,89,.22), transparent 60%),
    radial-gradient(800px 420px at 75% 70%, rgba(198,168,149,.18), transparent 60%),
    linear-gradient(120deg,#1E1712,#0C0A08 55%,#1B1309);
}
/* IMAGE SLOT: images/band.jpg (≥2400×1000, wide abstract) — parallax strip */
.band.has-image{
  background:
    linear-gradient(0deg, rgba(11,11,11,.5), rgba(11,11,11,.5)),
    url("../images/band.jpg") center/cover no-repeat;
}
@media (min-width:961px){ .band,.band.has-image{background-attachment:fixed} }
.band h2{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(34px,4.6vw,64px);letter-spacing:-0.01em;
  color:rgba(255,255,255,.92);
}

/* ==================== AUDIENCE (cloud + ghost word) ==================== */
.ghost{
  position:absolute;top:8%;right:-2%;z-index:0;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(120px,16vw,260px);letter-spacing:-0.03em;
  color:rgba(255,255,255,.5);user-select:none;pointer-events:none;
}
.aud-head{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start;position:relative;z-index:1}
.aud-head .side{padding-top:52px}
.aud-head .textlink{margin-top:36px}
.aud-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  margin-top:72px;position:relative;z-index:1;
}
.aud-card{
  background:var(--white);padding:34px 26px 30px;
  border:1px solid rgba(44,37,32,.06);
  display:flex;flex-direction:column;gap:6px;position:relative;
  transition:transform .3s, box-shadow .3s;
}
.aud-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(44,37,32,.10)}
.aud-card .num{
  font-family:var(--font-mono);font-weight:400;font-size:13px;
  letter-spacing:.2em;color:var(--bronze);
}
.aud-card .arr{position:absolute;top:30px;right:26px;color:var(--tan);transition:.3s}
.aud-card:hover .arr{transform:translate(4px,-4px);color:var(--bronze)}
.aud-card h3{font-family:var(--font-body);font-weight:600;font-size:16.5px;color:var(--txt-dark);margin-top:30px}
.aud-card p{font-size:13.5px;color:#8A857F}

/* ==================== STATS (espresso) ==================== */
.stats-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:90px}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{
  border-left:1px solid rgba(255,255,255,.12);padding:10px 36px 26px;
}
.stat:first-child{border-left:none;padding-left:0}
.stat .value{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(54px,5.5vw,84px);line-height:1;color:var(--white);
}
.stat .value em{font-style:normal;color:var(--tan)}
.stat .label{
  margin-top:18px;font-size:12px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(234,234,234,.55);
}
.stats-foot{margin-top:80px}
.stats-foot .textlink{color:var(--txt-light)}

/* ==================== WHY US (light) ==================== */
.why-head{max-width:680px}
.why-head .lede{margin-top:22px}
.diff-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hairline-light);margin-top:64px;
}
.diff{
  padding:64px 44px 56px;border-left:1px solid var(--hairline-light);
}
.diff:first-child{border-left:none;padding-left:0}
.diff .meta{display:flex;align-items:baseline;gap:16px}
.diff .num{ /* Tier 2 · Display numeral — Manrope 300, ghost tint on light */
  font-family:var(--font-display);font-weight:300;font-size:52px;color:#C9C4BE;
}
.diff .tag{
  font-size:11.5px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--bronze);
}
.diff h3{
  font-family:var(--font-display);font-weight:400;font-size:30px;
  color:var(--txt-dark);margin:22px 0 18px;
}
.diff p{font-size:15px;font-weight:300;line-height:1.75;color:var(--txt-body)}
.diff p .hl{color:var(--bronze)}
.values-row{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:72px;align-items:center;
}
.chip{
  font-size:13px;font-weight:500;color:var(--txt-dark);
  border:1px solid var(--hairline-light);padding:12px 24px;
}
.values-row .textlink{margin-left:auto}

/* ==================== OUR VALUES (near-black) ==================== */
.bg-values{
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(198,168,149,.07), transparent 60%),
    #0A0A0A;
}
.values-head{max-width:620px;margin:0 auto;text-align:center}
.values-head .display{font-size:clamp(32px,3.4vw,46px)}
.values-head .lede{margin:24px auto 0}
.values-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin-top:72px;
}
.value-card{
  grid-column:span 2;
  background:rgba(28,28,28,.9);border:1px solid rgba(255,255,255,.05);
  padding:32px;transition:border-color .3s, transform .3s;
}
.value-card:hover{border-color:rgba(198,168,149,.35);transform:translateY(-4px)}
.value-card .circle{
  width:44px;height:44px;border:1px solid var(--tan);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.15em;text-indent:.15em;
  color:var(--tan);
}
.value-card h3{
  font-family:var(--font-body);font-weight:700;font-size:18px;
  color:var(--white);margin:26px 0 8px;
}
.value-card .sub{
  font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#8A857F;margin-bottom:14px;
}
.value-card p{font-size:14px;line-height:1.65;color:#B3ACA5}
.value-card.wide{grid-column:span 4;display:flex;gap:28px;align-items:center}
.value-card.wide .circle{flex:none}
.value-card.wide h3{margin-top:0}
@media (max-width:960px){
  .values-grid{grid-template-columns:1fr 1fr;gap:18px}
  .value-card,.value-card.wide{grid-column:span 1;display:block}
  .value-card.wide h3{margin-top:26px}
}
@media (max-width:600px){
  .values-grid{grid-template-columns:1fr}
}

/* ==================== CTA ==================== */
.cta-sec{
  position:relative;text-align:center;
  background:
    radial-gradient(1000px 520px at 50% 120%, rgba(197,160,89,.14), transparent 65%),
    var(--charcoal);
}
/* IMAGE SLOT (optional): images/cta.jpg — kept very dark so type stays dominant */
.cta-sec.has-image{
  background:
    linear-gradient(0deg, rgba(17,17,17,.88), rgba(17,17,17,.88)),
    url("../images/cta.jpg") center/cover no-repeat;
}
.cta-sec::before{ /* vertical seam line like original */
  content:"";position:absolute;top:0;left:50%;width:1px;height:110px;
  background:var(--hairline-dark);
}
.cta-sec .display{margin-top:42px}
.cta-sec .lede{margin:30px auto 0;text-align:center}
.cta-sec .btn{margin-top:52px}

/* ==================== FOOTER ==================== */
.site-footer{
  background:var(--ink);border-top:1px solid var(--hairline-dark);
  padding:56px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.site-footer .logo{font-size:18px}
.site-footer p{font-size:13px;color:var(--txt-dim)}
.site-footer .mono{font-family:var(--font-mono);font-size:12px;color:#6B675F;letter-spacing:.08em}

/* ==================== RESPONSIVE ==================== */
@media (max-width:960px){
  .about-grid,.aud-head,.stats-head{grid-template-columns:1fr;gap:40px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .aud-cards{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .stat:nth-child(3){border-left:none;padding-left:0}
  .diff-grid{grid-template-columns:1fr}
  .diff{border-left:none;padding:44px 0}
  .diff+.diff{border-top:1px solid var(--hairline-light)}
}
@media (max-width:600px){
  .pillars,.aud-cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-left:none;padding-left:0}
}

/* ==================== SUBPAGE COMPONENTS ==================== */
.page-hero{
  padding:230px 0 130px;
  background:
    radial-gradient(900px 480px at 82% 12%, rgba(197,160,89,.16), transparent 60%),
    radial-gradient(700px 420px at 8% 90%, rgba(168,131,108,.10), transparent 60%),
    var(--ink);
}
.page-hero .lede{margin-top:30px}
.page-hero.center{text-align:center}
.page-hero.center .lede{margin-left:auto;margin-right:auto}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:72px}
.timeline .era{border-top:1px solid var(--hairline-light);padding-top:20px}
.timeline .era .yrs{font-family:var(--font-mono);font-size:13px;letter-spacing:.15em;color:var(--bronze)}
.timeline .era .lbl{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dark)}

.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.story-grid p{font-size:16px;font-weight:300;line-height:1.85;color:var(--txt-body)}
.story-grid p+p{margin-top:22px}
.story-grid p .hl{color:var(--bronze)}

.approach{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border:1px solid var(--hairline-light);margin-top:72px}
.approach .item{outline:1px solid var(--hairline-light);background:var(--white);padding:32px 28px}
.approach .item h3{font-family:var(--font-display);font-weight:500;font-size:19px;color:var(--txt-dark);margin-bottom:10px}
.approach .item p{font-size:13.5px;font-weight:300;line-height:1.65;color:var(--txt-body)}

.industry{padding:var(--section-pad) 0}
.industry .intro{max-width:640px;margin-top:26px}
.venture-list{margin-top:64px}
.venture{display:grid;grid-template-columns:minmax(210px,280px) 1fr;gap:44px;padding:36px 0;border-top:1px solid var(--hairline-light)}
.on-dark .venture{border-top-color:var(--hairline-dark)}
.venture-list .venture:last-child{border-bottom:1px solid var(--hairline-light)}
.on-dark .venture-list .venture:last-child{border-bottom-color:var(--hairline-dark)}
.venture h3{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.3}
.on-light .venture h3{color:var(--txt-dark)}
.on-dark .venture h3{color:var(--white)}
.venture .meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;margin-top:12px;line-height:1.8}
.on-light .venture .meta{color:var(--bronze)}
.on-dark .venture .meta{color:var(--tan)}
.venture p{font-size:14.5px;font-weight:300;line-height:1.75;max-width:640px}
.on-light .venture p{color:var(--txt-body)}
.on-dark .venture p{color:var(--txt-dim)}

.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:72px}
.adv .num-big{font-family:var(--font-display);font-weight:300;font-size:52px;color:rgba(255,255,255,.22)}
.adv h3{font-family:var(--font-display);font-weight:400;font-size:26px;color:var(--white);margin:16px 0 14px;line-height:1.3}
.adv p{font-size:14.5px;font-weight:300;line-height:1.75;color:var(--txt-dim)}

.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border:1px solid var(--hairline-dark);margin-top:80px;text-align:left}
.info-cell{outline:1px solid var(--hairline-dark);padding:38px 36px}
.info-cell .lbl{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:14px}
.info-cell .val{font-size:17px;color:var(--txt-light);line-height:1.6}
.info-cell .val a:hover{color:var(--tan)}

@media (max-width:960px){
  .timeline{grid-template-columns:1fr 1fr}
  .story-grid{grid-template-columns:1fr;gap:24px}
  .approach{grid-template-columns:1fr 1fr}
  .venture{grid-template-columns:1fr;gap:14px}
  .adv-grid{grid-template-columns:1fr;gap:44px}
  .info-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .timeline,.approach{grid-template-columns:1fr}
}