/* ============================================================================
   Tengri Invest — editorial identity stylesheet
   Type: Newsreader (display serif) / Inter (text) / IBM Plex Mono (indices)
   ==========================================================================*/

:root{
  --navy:        #232E5C;
  --navy-deep:   #1B2447;
  --steel:       #6488C0;
  --paper:       #FAFAF8;
  --paper-warm:  #F4F2ED;
  --ink:         #1E2440;
  --ink-soft:    #4A5273;
  --ink-mute:    #7A819B;
  --rule:        #DEDCD4;
  --rule-soft:   #E8E6DF;
  --rule-dark:   rgba(255,255,255,.16);

  --serif: "Newsreader", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 28px;
  --pad: 40px;
  --band-y: 150px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

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

a{ color:inherit; }

::selection{ background:var(--navy); color:var(--paper); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 18px;
  font:500 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
}
.skip-link:focus{ left:0; }

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

/* ------------------------------- grid ------------------------------------ */

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);
  max-width:1440px;
  margin:0 auto;
  padding:0 var(--pad);
}

/* --------------------------- shared type --------------------------------- */

.kicker{
  margin:0;
  font:500 11px/1.4 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

.section-no{
  grid-column:1 / 3;
  margin:0 0 6px;
  font:400 11px/1.4 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.section-no span{ color:var(--navy); }

.h-display{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px, 5.2vw, 64px);
  line-height:1.06;
  letter-spacing:-0.022em;
  color:var(--navy);
}
.h-display em{ font-style:italic; font-weight:300; }

.link-arrow{
  display:inline-block;
  font:500 12px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--navy);
  padding-bottom:6px;
  border-bottom:1px solid var(--navy);
  transition:color .25s ease, border-color .25s ease;
}
.link-arrow::after{ content:" \2192"; }
.link-arrow:hover{ color:var(--steel); border-color:var(--steel); }

/* ------------------------------ masthead --------------------------------- */

.masthead{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--rule-soft);
  transition:border-color .3s ease;
}
.masthead.is-scrolled{ border-bottom-color:var(--rule); }

.masthead-inner{
  max-width:1440px; margin:0 auto; padding:0 var(--pad);
  height:74px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}

.wordmark{ display:block; flex:0 0 auto; }
.wordmark img{
  width:132px; height:auto;
  mix-blend-mode:multiply;
}

.nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:34px;
}
.nav a{
  display:inline-flex; align-items:baseline; gap:8px;
  text-decoration:none;
  font:500 12px/1 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:color .22s ease, border-color .22s ease;
}
.nav a:hover{ color:var(--navy); border-bottom-color:var(--navy); }
.nav-no{ font:400 10px/1 var(--mono); color:var(--steel); letter-spacing:.06em; }

.nav-toggle{
  display:none;
  align-items:center; gap:10px;
  background:none; border:0; padding:6px 0; cursor:pointer;
  font:500 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy);
}
.nav-toggle-mark{
  width:22px; height:9px; position:relative; display:inline-block;
}
.nav-toggle-mark::before,.nav-toggle-mark::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--navy);
  transition:transform .28s ease;
}
.nav-toggle-mark::before{ top:0; }
.nav-toggle-mark::after{ bottom:0; }
.nav-open .nav-toggle-mark::before{ transform:translateY(4px) rotate(20deg); }
.nav-open .nav-toggle-mark::after{ transform:translateY(-4px) rotate(-20deg); }

/* -------------------------------- hero ----------------------------------- */

.hero{ padding:clamp(70px,11vw,140px) 0 clamp(70px,9vw,120px); }

.hero-grid{ row-gap:0; align-items:start; }

.hero-kicker{ grid-column:1 / 8; margin-bottom:34px; }

.hero-title{
  grid-column:1 / 9;
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(42px, 7.4vw, 96px);
  line-height:1.02;
  letter-spacing:-0.03em;
  color:var(--navy);
}
.hero-title em{ font-style:italic; font-weight:300; color:var(--ink-soft); }

.hero-mark{
  grid-column:10 / 13;
  grid-row:2 / 4;
  align-self:start;
  padding-top:12px;
}
.hero-mark svg{ width:100%; height:auto; max-width:180px; margin-left:auto; }
.bk-solid{ fill:var(--navy); }
.bk-accent{ fill:var(--steel); }
.bk-line{ fill:none; stroke:var(--rule); stroke-width:1; }

.hero-note{
  grid-column:2 / 7;
  margin-top:56px;
}
.hero-note p{
  margin:0 0 26px;
  font-size:17px;
  line-height:1.7;
  color:var(--ink-soft);
}

.hero-index{
  grid-column:1 / 13;
  margin:clamp(64px,9vw,120px) 0 0;
  padding-top:20px;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:var(--gutter);
}
.hero-index div{ padding-right:16px; }
.hero-index dt{
  font:400 11px/1.4 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:10px;
}
.hero-index dd{
  margin:0;
  font-family:var(--serif);
  font-size:22px;
  font-weight:400;
  letter-spacing:-0.015em;
  color:var(--navy);
}

/* -------------------------------- bands ---------------------------------- */

.band{
  padding:var(--band-y) 0;
  border-top:1px solid var(--rule);
}
section[id]{ scroll-margin-top:86px; }
.band-tight{ padding-bottom:0; }

/* 01 About ---------------------------------------------------------------- */

.about-lede{ grid-column:1 / 7; }
.about-body{
  grid-column:8 / 13;
  padding-top:8px;
}
.about-body p{
  margin:0 0 24px;
  color:var(--ink-soft);
  line-height:1.72;
}
.about-body p:last-child{ margin-bottom:0; }
.about-body .drop{ color:var(--ink); font-size:19px; line-height:1.62; }

#about .section-no{ margin-bottom:28px; grid-column:1 / 13; }

/* 02 What We Do ----------------------------------------------------------- */

#what-we-do .section-no{ grid-column:1 / 13; margin-bottom:28px; }
.sector-head{ grid-column:1 / 8; }
.sector-standfirst{
  grid-column:9 / 13;
  margin:10px 0 0;
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.7;
}

.sectors{ margin-top:clamp(60px,8vw,110px); }

.sector{
  border-top:1px solid var(--rule);
  padding:clamp(44px,5vw,72px) var(--pad);
  align-items:start;
  transition:background-color .4s ease;
}
.sector:last-child{ border-bottom:1px solid var(--rule); }
.sector:hover{ background:var(--paper-warm); }

.sector-no{
  grid-column:1 / 2;
  margin:0;
  font:400 12px/1 var(--mono);
  letter-spacing:.16em;
  color:var(--steel);
  padding-top:14px;
}
.sector-title{
  grid-column:2 / 6;
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px,3.6vw,48px);
  line-height:1.05;
  letter-spacing:-0.022em;
  color:var(--navy);
}
.sector-text{ grid-column:7 / 11; }
.sector-text p{ margin:0 0 20px; color:var(--ink-soft); line-height:1.72; }
.sector-text p:last-child{ margin-bottom:0; }

.sector-meta{
  grid-column:11 / 13;
  list-style:none; margin:6px 0 0; padding:0;
}
.sector-meta li{
  font:400 11px/1.4 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding:9px 0;
  border-bottom:1px solid var(--rule-soft);
}
.sector-meta li:first-child{ border-top:1px solid var(--rule-soft); }

/* 03 Approach (inverse) --------------------------------------------------- */

.band-dark{
  background:var(--navy);
  color:rgba(255,255,255,.74);
  border-top:0;
  margin-top:clamp(90px,11vw,160px);
}
.band-dark .section-no{ color:rgba(255,255,255,.5); grid-column:1 / 13; margin-bottom:28px; }
.band-dark .section-no span{ color:var(--steel); }

.approach-head{
  grid-column:1 / 7;
  color:#fff;
}
.approach-head em{ color:var(--steel); }

.approach-list{
  grid-column:7 / 13;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--gutter);
  row-gap:0;
}
.principle{
  border-top:1px solid var(--rule-dark);
  padding:26px 20px 34px 0;
}
.principle:nth-child(1),.principle:nth-child(2){ padding-top:0; border-top:0; }
.principle-no{
  margin:0 0 14px;
  font:400 11px/1 var(--mono);
  letter-spacing:.16em;
  color:var(--steel);
}
.principle h3{
  margin:0 0 12px;
  font-family:var(--serif);
  font-weight:400;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-0.015em;
  color:#fff;
}
.principle p{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:rgba(255,255,255,.7);
}

/* 04 Presence ------------------------------------------------------------- */

#presence{ border-top:0; }
#presence .section-no{ grid-column:1 / 13; margin-bottom:28px; }
.presence-lede{ grid-column:1 / 8; }
.presence-lede p{
  margin:26px 0 0;
  max-width:50ch;
  color:var(--ink-soft);
  line-height:1.72;
}

.regions{ margin-top:clamp(56px,7vw,96px); }
.region{
  border-top:1px solid var(--rule);
  padding:32px var(--pad) 34px;
  align-items:baseline;
}
.region:last-child{ border-bottom:1px solid var(--rule); }
.region-no{
  grid-column:1 / 2;
  margin:0;
  font:400 11px/1 var(--mono);
  letter-spacing:.16em;
  color:var(--steel);
}
.region-name{
  grid-column:2 / 6;
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.1;
  letter-spacing:-0.018em;
  color:var(--navy);
}
.region-text{
  grid-column:7 / 12;
  margin:0;
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.72;
}

/* 05 Contact -------------------------------------------------------------- */

.band-contact{ border-top:0; padding-top:clamp(96px,11vw,150px); }
.band-contact .section-no{ grid-column:1 / 13; margin-bottom:28px; }
.band-contact .grid{ align-items:start; }
.band-contact{ padding-bottom:clamp(70px,8vw,110px); }

.contact-main{ grid-column:1 / 8; }
.contact-lede{
  margin:28px 0 44px;
  max-width:52ch;
  color:var(--ink-soft);
  line-height:1.72;
}
.contact-email{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,34px);
  line-height:1.2;
  letter-spacing:-0.018em;
}
.contact-email a{
  color:var(--navy);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:4px;
  transition:border-color .25s ease, color .25s ease;
}
.contact-email a:hover{ color:var(--steel); border-bottom-color:var(--steel); }

.contact-card{
  grid-column:10 / 13;
  border-top:1px solid var(--navy);
  padding-top:18px;
}
.contact-card .kicker{ margin-bottom:22px; }
.contact-name{
  margin:0 0 4px;
  font-family:var(--serif);
  font-size:24px;
  font-weight:400;
  letter-spacing:-0.015em;
  color:var(--navy);
}
.contact-role,.contact-org{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-soft);
}
.contact-org{ color:var(--ink-mute); }

/* ------------------------------ colophon --------------------------------- */

.colophon{
  margin-top:0;
  border-top:1px solid var(--rule);
  padding:56px 0 40px;
}
.colophon-grid{ align-items:start; row-gap:36px; }

.colophon-brand{ grid-column:1 / 5; }
.colophon-brand img{ width:124px; height:auto; mix-blend-mode:multiply; margin-bottom:20px; }
.colophon-brand p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--ink-mute);
}

.colophon-nav{ grid-column:7 / 10; }
.colophon-nav ul{ list-style:none; margin:0; padding:0; }
.colophon-nav a{
  display:inline-block;
  padding:5px 0;
  text-decoration:none;
  font-size:14px;
  color:var(--ink-soft);
  transition:color .22s ease;
}
.colophon-nav a:hover{ color:var(--navy); }

.colophon-contact{ grid-column:10 / 13; }
.colophon-contact .kicker{ margin-bottom:12px; }
.colophon-contact p{ margin:0; font-size:14px; }
.colophon-contact a{
  color:var(--navy); text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:3px;
}
.colophon-contact a:hover{ border-bottom-color:var(--steel); }

.colophon-foot{
  margin-top:52px;
  padding-top:18px;
  border-top:1px solid var(--rule-soft);
}
.colophon-foot p{
  margin:0;
  font:400 11px/1.5 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.colophon-foot p:first-child{ grid-column:1 / 7; }
.colophon-foot p:last-child{ grid-column:10 / 13; text-align:right; }

/* ============================== responsive =============================== */

@media (max-width:1120px){
  :root{ --pad:32px; --gutter:22px; --band-y:110px; }

  .hero-title{ grid-column:1 / 10; }
  .hero-note{ grid-column:1 / 8; }
  .hero-mark{ display:none; }

  .about-lede{ grid-column:1 / 13; }
  .about-body{ grid-column:1 / 10; padding-top:36px; }

  .sector-head{ grid-column:1 / 10; }
  .sector-standfirst{ grid-column:1 / 9; margin-top:24px; }

  .sector-no{ grid-column:1 / 13; padding-top:0; margin-bottom:16px; }
  .sector-title{ grid-column:1 / 6; }
  .sector-text{ grid-column:6 / 13; }
  .sector-meta{ grid-column:1 / 5; margin-top:28px; }

  .approach-head{ grid-column:1 / 13; }
  .approach-list{ grid-column:1 / 13; margin-top:48px; }

  .presence-lede{ grid-column:1 / 12; }
  .region-name{ grid-column:2 / 7; }
  .region-text{ grid-column:7 / 13; }

  .contact-main{ grid-column:1 / 10; }
  .contact-card{ grid-column:1 / 6; margin-top:56px; }

  .colophon-brand{ grid-column:1 / 6; }
  .colophon-nav{ grid-column:6 / 9; }
  .colophon-contact{ grid-column:9 / 13; }
}

@media (max-width:860px){
  :root{ --pad:24px; --band-y:88px; }

  .nav{
    position:fixed; inset:74px 0 auto 0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:8px 24px 28px;
    display:none;
  }
  .nav.is-open{ display:block; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .nav li{ border-top:1px solid var(--rule-soft); }
  .nav a{
    padding:16px 0;
    font-size:13px;
    border-bottom:0;
    justify-content:flex-start;
  }
  .nav-toggle{ display:inline-flex; }
  body.nav-open{ overflow:hidden; }

  .masthead-inner{ height:64px; }
  .nav{ top:64px; }
  .wordmark img{ width:112px; }

  .hero{ padding-top:64px; }
  .hero-title,.hero-note,.hero-kicker{ grid-column:1 / 13; }
  .hero-note{ margin-top:36px; }
  .hero-index{ grid-template-columns:1fr 1fr; row-gap:26px; }

  .about-body,.sector-head,.sector-standfirst,
  .presence-lede,.contact-main{ grid-column:1 / 13; }

  .sector{ padding-left:var(--pad); padding-right:var(--pad); }
  .sector-title,.sector-text,.sector-meta{ grid-column:1 / 13; }
  .sector-text{ margin-top:22px; }

  .approach-list{ grid-template-columns:1fr; }
  .principle{ padding-right:0; }
  .principle:nth-child(2){ border-top:1px solid var(--rule-dark); padding-top:26px; }

  .region-no{ grid-column:1 / 13; margin-bottom:10px; }
  .region-name{ grid-column:1 / 13; }
  .region-text{ grid-column:1 / 13; margin-top:14px; }

  .contact-card{ grid-column:1 / 13; }

  .colophon-brand,.colophon-nav,.colophon-contact{ grid-column:1 / 13; }
  .colophon-foot p:first-child,
  .colophon-foot p:last-child{ grid-column:1 / 13; text-align:left; }
  .colophon-foot p:last-child{ margin-top:8px; }
}

@media (max-width:480px){
  :root{ --pad:20px; --band-y:72px; }
  body{ font-size:16px; }
  .hero-title{ font-size:clamp(34px,10.5vw,46px); letter-spacing:-0.025em; }
  .h-display{ font-size:clamp(28px,8vw,36px); }
  .about-body .drop{ font-size:17px; }
  .hero-index{ grid-template-columns:1fr 1fr; }
  .hero-index dd{ font-size:19px; }
  .contact-email{ font-size:19px; word-break:break-word; }
  .sector-title{ font-size:30px; }
}

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

@media print{
  .masthead,.nav-toggle{ display:none; }
  body{ background:#fff; font-size:11pt; }
  .band{ padding:24pt 0; }
}