:root{
    --bg-0:#0F1B2E;
    --bg-1:#142338;
    --bg-2:#1A2C46;
    --line:#2A3B57;
    --line-soft:#1E304C;
    --text-hi:#F2F4F7;
    --text-mid:#B7C0CC;
    --text-low:#7C8896;
    --copper:#D7DBE0;
    --copper-bright:#FFFFFF;
    --steel:#AEB6C0;
    --steel-bright:#FFFFFF;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-0);
    color:var(--text-hi);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Spectral', serif;
    font-weight:500;
    line-height:1.15;
    letter-spacing:-0.01em;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1440px; margin:0 auto; padding:0 40px;}
  .mono{font-family:'IBM Plex Mono', monospace;}

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    --bg-1:#C9CED5;
    --text-hi:#0F1B2E;
    --text-mid:#6F7682;
    --text-low:#ABAFB6;
    --line:#C3C9D1;
    --line-soft:#CDD2D9;
    --copper:#0F1B2E;
    --copper-bright:#575F6D;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-soft);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:20px 32px;
    padding:22px 40px;
    max-width:1440px; margin:0 auto;
  }
  .brand{
    font-family:'Spectral', serif; font-size:19px; font-weight:500;
    color:var(--text-hi);
    display:flex; align-items:center; gap:10px;
  }
  .brand-logo{display:block; width:auto;}
  header .brand-logo{height:46px;}
  footer .brand-logo{height:54px;}
  .navlinks{display:flex; gap:36px; font-size:14px; color:var(--text-mid); font-weight:600;}
  .navlinks a{transition:color 0.15s;}
  .navlinks a:hover{color:var(--text-hi);}
  .navlinks .disabled{color:var(--text-mid); cursor:default;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding:120px 40px 100px;
    overflow:hidden;
    border-bottom:1px solid var(--line-soft);
  }
  .hero-slideshow{
    position:absolute; inset:0; z-index:0;
  }
  .hero-slide{
    position:absolute; inset:0;
    opacity:0;
    animation:heroFade 30s infinite;
    animation-fill-mode:both;
  }
  .hero-slide img{width:100%; height:100%; object-fit:cover; display:block;}
  .hero-slide:nth-child(1){animation-delay:0s;}
  .hero-slide:nth-child(2){animation-delay:6s;}
  .hero-slide:nth-child(3){animation-delay:12s;}
  .hero-slide:nth-child(4){animation-delay:18s;}
  .hero-slide:nth-child(5){animation-delay:24s;}
  @keyframes heroFade{
    0%{opacity:0;}
    4%{opacity:1;}
    17%{opacity:1;}
    21%{opacity:0;}
    100%{opacity:0;}
  }
  .hero{padding-top:120px;}
  .hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(15,27,46,0.93) 0%, rgba(15,27,46,0.86) 38%, rgba(15,27,46,0.50) 68%, rgba(15,27,46,0.12) 100%);
  }
  .hero-grid{
    max-width:1440px; margin:0 auto; padding:0 40px;
    position:relative; z-index:2;
  }
  .eyebrow{
    font-size:13px; color:var(--copper-bright); margin-bottom:22px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:''; width:26px; height:1px; background:var(--copper);
  }
  h1.headline{
    font-size:52px; color:var(--text-hi); max-width:620px;
    margin-bottom:26px;
  }
  .hero p.lead{
    font-size:17px; color:var(--text-mid); max-width:480px; margin-bottom:36px;
  }
  .hero-actions{display:flex; gap:16px;}
  .btn-primary{
    background:var(--copper); color:var(--bg-0);
    padding:14px 26px; font-size:14px; font-weight:500;
    transition:background 0.15s;
  }
  .btn-primary:hover{background:var(--copper-bright);}
  .btn-secondary{
    border:1px solid var(--line); color:var(--text-hi);
    padding:14px 26px; font-size:14px;
    transition:border-color 0.15s;
  }
  .btn-secondary:hover{border-color:var(--steel);}

  .hero-stats{
    display:flex; flex-direction:row; justify-content:space-between;
    gap:32px;
    border-top:1px solid #D7DBE0;
    margin-top:56px; padding-top:32px;
  }
  .stat{flex:1; padding:0 0 0 32px; border-left:1px solid #D7DBE0;}
  .stat:first-child{padding-left:0; border-left:none;}
  .stat .num{font-family:'Spectral', serif; font-size:30px; color:var(--text-hi); font-weight:500;}
  .stat .label{font-size:12.5px; color:var(--text-low); margin-top:4px;}

  /* ---------- Narrative sections (alternating text/graphic) ---------- */
  .narrative{border-bottom:1px solid var(--line-soft);}
  .narrative.alt{background:var(--bg-1);}
  .narrative-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  }
  .narrative-grid.reverse .narrative-graphic{order:2;}
  .narrative-grid.reverse .narrative-content{order:1;}
  .narrative-content .kicker{font-size:13px; color:var(--copper-bright); margin-bottom:16px;}
  .narrative-content h2{font-size:27px; line-height:1.25; color:var(--text-hi); margin-bottom:18px; max-width:520px;}
  .narrative-content p{font-size:15px; color:var(--text-mid); max-width:440px; margin-bottom:24px;}
  .tag-pills{display:flex; flex-wrap:wrap; gap:10px;}
  .tag-pill{
    font-size:13px; color:var(--text-hi); border:1px solid var(--line);
    padding:8px 16px;
  }
  .pillar-row{display:flex; flex-direction:column; gap:14px; margin-top:8px;}
  .pillar-row .pillar{
    display:flex; align-items:baseline; gap:14px;
    padding:14px 0; border-top:1px solid var(--line-soft);
    font-size:14.5px; color:var(--text-hi);
  }
  .pillar-row .pillar:last-child{border-bottom:1px solid var(--line-soft);}
  .pillar-row .pillar span{color:var(--text-low); font-size:12px; font-family:'IBM Plex Mono', monospace;}
  .page-head{border-bottom:1px solid var(--line-soft); padding-bottom:28px; margin-bottom:52px;}
  .page-head h2{font-size:32px; color:var(--text-hi);}
  .page-head p{margin-top:14px; font-size:15px; color:var(--text-mid); max-width:560px;}
  .strategy-stack{display:flex; flex-direction:column; gap:16px;}
  .strategy-box{
    border:1px solid var(--line-soft); background:var(--bg-2);
    padding:26px 28px; border-left:2px solid var(--copper);
  }
  .strategy-box h3{font-size:18px; color:var(--text-hi); margin-bottom:10px; letter-spacing:0.01em;}
  .strategy-box p{font-size:14px; line-height:1.65; color:var(--text-mid); margin:0;}
  .narrative-graphic{
    aspect-ratio:6/5; border:1px solid var(--line-soft); background:var(--bg-2);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .narrative-graphic svg{width:100%; height:100%;}

  /* ---------- Section shared ---------- */
  section{padding:96px 40px;}
  .section-head{
    display:grid; grid-template-columns:280px 1fr; gap:60px;
    margin-bottom:56px; align-items:baseline;
    border-bottom:1px solid var(--line-soft); padding-bottom:32px;
  }
  .section-head .kicker{font-size:13px; color:var(--copper-bright);}
  .section-head h2{font-size:32px; color:var(--text-hi); max-width:560px;}
  .section-head p{font-size:15px; color:var(--text-mid); max-width:460px; align-self:end;}

  /* ---------- Strategy ---------- */
  .strategy{background:var(--bg-1); border-bottom:1px solid var(--line-soft);}
  .strategy-list{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);}
  .strategy-item{background:var(--bg-1); padding:34px 30px;}
  .strategy-item .si-index{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--steel-bright); margin-bottom:20px;}
  .strategy-item h3{font-size:20px; color:var(--text-hi); margin-bottom:12px;}
  .strategy-item p{font-size:14.5px; color:var(--text-mid);}

  /* ---------- Approach ---------- */
  .approach-grid{display:grid; grid-template-columns:280px 1fr; gap:60px;}
  .approach-list{display:flex; flex-direction:column;}
  .approach-row{
    display:grid; grid-template-columns:120px 1fr; gap:30px;
    padding:28px 0; border-top:1px solid var(--line-soft);
  }
  .approach-row:last-child{border-bottom:1px solid var(--line-soft);}
  .approach-row .ar-label{font-size:13px; color:var(--text-low); padding-top:2px;}
  .approach-row h3{font-size:19px; color:var(--text-hi); margin-bottom:8px; font-weight:500; font-family:'IBM Plex Sans',sans-serif;}
  .approach-row p{font-size:14.5px; color:var(--text-mid); max-width:560px;}

  /* ---------- Portfolio ---------- */
  .portfolio{background:var(--bg-1); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
  .portfolio-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft);}
  .p-card{background:var(--bg-1); cursor:default; padding:28px 24px; display:flex; flex-direction:column; gap:12px; transition:background 0.15s; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
  .p-card:hover{background:var(--bg-2);}
  a.p-card[href]{cursor:pointer;}
  a.p-card[href]:hover .p-logo img{filter:brightness(1.15);}
  a.p-card[href] .p-cat::after{content:' \2197'; opacity:0; transition:opacity 0.15s;}
  a.p-card[href]:hover .p-cat::after{opacity:1;}
  .p-card .p-logo.is-small img{max-height:32px;}
  .p-card .p-logo.is-text{font-family:'Spectral',serif; font-size:20px; color:var(--text-hi); letter-spacing:0.01em;}
  .p-card .p-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;}
  .p-card .p-logo{
    flex:1; min-width:0; height:58px;
    display:flex; align-items:center; justify-content:flex-start;
  }
  .p-card .p-logo img{max-height:50px; max-width:100%; width:auto; object-fit:contain; display:block;}
  .p-card .p-logo.is-empty{border:1px dashed var(--line); justify-content:center; padding:8px 10px;}
  .p-card .p-logo-ph{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--text-low); line-height:1.2; text-align:center;}
  .p-card .p-cat{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.04em;
    color:var(--steel-bright); white-space:nowrap; padding-top:5px;}
  .p-card .p-name{font-family:'Spectral',serif; font-size:18px; color:var(--text-hi); line-height:1.3;}
  .p-card p{font-size:13.5px; color:var(--text-mid); line-height:1.5;}

  /* ---------- Team teaser ---------- */
  .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
  .t-card .t-photo{
    width:100%; aspect-ratio:4/5; background:var(--bg-2);
    border:1px solid var(--line-soft); margin-bottom:16px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-low); font-size:12px; overflow:hidden;
  }
  .t-card .t-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .t-card .t-name{font-size:15.5px; color:var(--text-hi); margin-bottom:3px;}
  .t-card .t-role{font-size:12.5px; color:var(--steel-bright);}

  /* ---------- CTA band ---------- */
  .cta-band{
    background:var(--bg-2);
    padding:88px 40px;
    text-align:left;
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .cta-inner{max-width:1440px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
  .cta-inner h2{font-size:30px; color:var(--text-hi); max-width:520px;}

  /* ---------- Footer ---------- */
  footer{padding:64px 40px 40px;}
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
    padding-bottom:48px; border-bottom:1px solid var(--line-soft);
  }
  footer .brand{margin-bottom:14px;}
  footer .f-desc{font-size:13.5px; color:var(--text-low); max-width:280px;}
  footer h4{font-size:12.5px; color:var(--text-low); margin-bottom:16px; font-weight:500;}
  footer .flinks{display:flex; flex-direction:column; gap:11px;}
  footer .flinks a{font-size:14px; color:var(--text-mid);}
  footer .flinks a:hover{color:var(--text-hi);}
  .footer-bottom{
    padding-top:28px; display:flex; justify-content:space-between;
    font-size:12.5px; color:var(--text-low); flex-wrap:wrap; gap:12px;
  }

  @media (max-width:900px){
    .narrative-grid{grid-template-columns:1fr; gap:32px;}
    .narrative-grid.reverse .narrative-graphic{order:1;}
    .narrative-grid.reverse .narrative-content{order:2;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-stats{flex-wrap:wrap; gap:24px; margin-top:32px; padding-top:24px;}
    .stat{flex:1 1 40%; border-left:none; padding-left:0;}
    .section-head{grid-template-columns:1fr; gap:16px;}
    .strategy-list{grid-template-columns:1fr 1fr;}
    .approach-grid{grid-template-columns:1fr;}
    .approach-row{grid-template-columns:1fr; gap:8px;}
    .portfolio-grid{grid-template-columns:repeat(2,1fr);}
    .team-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    h1.headline{font-size:38px;}
  }

  @media (max-width:640px){
    .hero{padding-top:88px;}
    section{padding:64px 20px;}
    .cta-band{padding:64px 20px;}
    footer{padding:48px 20px 32px;}
    nav{padding:16px 20px; gap:14px 24px;}
    header .brand-logo{height:32px;}
    .navlinks{gap:22px; font-size:13px;}
    .page-head h2{font-size:26px;}
    h1.headline{font-size:32px;}
    .hero p.lead{font-size:16px;}
  }

  @media (max-width:460px){
    .portfolio-grid{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:1fr;}
  }