@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");


:root{
  --ink:#14202d;
  --muted:#526173;
  --line:#dfe3e8;
  --paper:#f7f5f1;
  --blue:#173b62;
  --teal:#3f7f82;
  --sand:#f4eadb;
  --white:#fff;
  --soft:#eeeae3;
  --max:1180px;
  --serif:Georgia,serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"DM Sans",Arial,sans-serif;
  line-height:1.6;
}

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

img{
  max-width:100%;
  height:auto;
}


/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */

.section{
  padding:110px 6vw;
}

.section > *{
  width:100%;
}

.section-intro{
  max-width:var(--max);
  margin:0 auto 55px;
}

.section-intro.narrow{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.section-intro h2,
.problem-layout h2,
.spm-heading h2,
.solidarburg-grid h2,
.about-grid h2{
  font-size:clamp(2.7rem,5vw,5rem);
  line-height:1.02;
  margin:0 0 25px;
  max-width:850px;
}

.section-intro > p:last-child{
  max-width:700px;
  color:var(--muted);
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,245,241,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.nav-wrap{
  max-width:var(--max);
  margin:auto;
  min-height:76px;
  padding:0 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.wordmark,
.footer-wordmark{
  font-family:Manrope,sans-serif;
  font-weight:800;
  letter-spacing:.08em;
}

.wordmark{
  display:flex;
  align-items:center;
  gap:10px;
}

.wordmark-mark{
  width:20px;
  height:20px;
  border:3px solid var(--blue);
  border-radius:50%;
  display:inline-block;
}

.main-nav{
  display:flex;
  gap:28px;
  font-size:.9rem;
  font-weight:600;
}

.main-nav a:hover,
.footer-links a:hover,
.text-link:hover{
  opacity:.6;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3{
  font-family:Manrope,sans-serif;
  letter-spacing:-.035em;
}

h1{
  font-size:clamp(4rem,8vw,7.7rem);
  line-height:.94;
  max-width:900px;
  margin:0;
}

h1 em{
  font-family:var(--serif);
  font-weight:400;
}

.eyebrow{
  margin:0 0 18px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.72rem;
  font-weight:700;
  color:var(--teal);
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  min-height:720px;
  display:grid;
  align-items:center;
}

.hero-grid{
  max-width:var(--max);
  width:100%;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:80px;
  align-items:end;
}

.hero-text{
  max-width:660px;
  font-size:1.2rem;
  color:var(--muted);
  margin:35px 0;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:25px;
}

.button{
  display:inline-block;
  padding:13px 20px;
  border-radius:2px;
  font-weight:700;
  font-size:.9rem;
  transition:opacity .2s ease,transform .2s ease;
}

.button:hover{
  opacity:.82;
  transform:translateY(-1px);
}

.button-dark{
  background:var(--ink);
  color:white;
}

.text-link{
  font-weight:700;
  font-size:.9rem;
}

.hero-note{
  max-width:250px;
  color:var(--muted);
  font-size:.9rem;
}

.note-line{
  display:block;
  width:50px;
  height:2px;
  background:var(--teal);
  margin-bottom:18px;
}


/* =========================================================
   CYCLE / WHITE SECTIONS
   ========================================================= */

.cycle-section{
  background:#fff;
}

.cycle-figure{
  max-width:950px;
  margin:0 auto 40px;
}

.cycle-figure img{
  display:block;
  width:100%;
}

.cycle-captions{
  max-width:950px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.cycle-captions div{
  display:flex;
  flex-direction:column;
}

.cycle-captions span{
  color:var(--muted);
}


/* =========================================================
   PROBLEM SECTION
   ========================================================= */

.problem-section{
  background:var(--blue);
  color:#fff;
}

.problem-layout{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:90px;
}

.problem-layout h2{
  color:#fff;
}

.problem-layout .eyebrow{
  color:#b9d6d5;
}

.problem-copy{
  max-width:650px;
  font-size:1.05rem;
  color:#dce5ed;
}

.problem-copy p{
  color:#dce5ed;
}

.callout{
  border-left:2px solid #b9d6d5;
  padding-left:22px;
  color:#fff !important;
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1.35;
}


/* =========================================================
   APPROACH DETAIL
   ========================================================= */

.approach-detail{
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.approach-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:90px;
  max-width:var(--max);
  margin:auto;
}

.approach-detail h2{
  font-size:clamp(2.5rem,5vw,4.8rem);
  line-height:1;
  margin:0;
}

.approach-detail-copy{
  max-width:650px;
  font-size:1.05rem;
  color:var(--muted);
}

.approach-detail-hook{
  border-left:2px solid var(--teal);
  padding:7px 0 7px 22px;
  color:var(--ink);
  font-size:1.35rem;
  line-height:1.35;
}


/* =========================================================
   DEVELOPMENT / STEPS
   ========================================================= */

.development-section{
  background:var(--soft);
}

.steps{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

.step{
  border-top:2px solid var(--ink);
  padding-top:18px;
}

.step-number{
  font-size:.7rem;
  color:var(--teal);
  font-weight:700;
}

.step h3{
  font-size:2rem;
  margin:25px 0 10px;
}

.step p{
  font-weight:700;
  margin:0 0 18px;
}

.step-detail{
  color:var(--muted);
  font-size:.9rem;
}


/* =========================================================
   FIELDS
   ========================================================= */

.field-grid{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.field-card{
  padding:45px;
  min-height:430px;
  display:flex;
  flex-direction:column;
}

.field-card h3{
  font-size:3rem;
  margin:25px 0 10px;
}

.field-lead{
  font-size:1.1rem;
  font-weight:700;
}

.field-card p:not(.field-lead){
  color:var(--muted);
}

.field-card a{
  margin-top:auto;
  font-weight:700;
}

.field-research{
  background:#e9eef3;
}

.field-methods{
  background:#e6e9e4;
}

.field-practice{
  background:#eee5d8;
}

.field-index{
  font-size:.72rem;
  font-weight:700;
}


/* =========================================================
   SPM GENERAL
   ========================================================= */

.spm-section{
  background:var(--sand);
}

.spm-heading{
  max-width:var(--max);
  margin:0 auto 50px;
}

.spm-body{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:90px;
  font-size:1.05rem;
}

.spm-question{
  font-family:var(--serif);
  font-size:1.5rem;
}

.spm-principle{
  margin:50px auto 0;
  border-top:1px solid #d6c3a9;
  padding-top:25px;
  max-width:900px;
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  font-weight:700;
  line-height:1.2;
}


/* =========================================================
   SPM PROCESS
   ========================================================= */

.spm-process{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.spm-process-item{
  border-top:2px solid var(--ink);
  padding:20px 0 0;
  min-width:0;
}

.spm-process-number{
  display:block;
  font-size:.7rem;
  color:var(--teal);
  font-weight:700;
  margin-bottom:24px;
}

.spm-process-item h3{
  font-size:2rem;
  margin:0 0 12px;
}

.spm-process-item p{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 18px;
}

.spm-process-item > span:last-child{
  display:block;
  color:var(--muted);
  font-size:.92rem;
  max-width:340px;
}


/* =========================================================
   SPM NOT / DIFFERENTIATION
   ========================================================= */

.spm-not-grid{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:45px 70px;
}

.spm-not-grid article{
  border-top:1px solid #cfc8bc;
  padding-top:20px;
}

.spm-not-grid h3{
  font-size:1.55rem;
  margin:0 0 12px;
}

.spm-not-grid p{
  color:var(--muted);
  max-width:520px;
  margin:0;
}


/* =========================================================
   SPM COMPARISON
   ========================================================= */

.spm-comparison{
  max-width:var(--max);
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.spm-comparison > div{
  padding:35px 40px;
  min-width:0;
}

.spm-comparison > div + div{
  border-left:1px solid var(--line);
}

.spm-comparison h3{
  font-size:1.8rem;
  margin:0 0 20px;
}

.spm-comparison ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 25px;
}

.spm-comparison li{
  color:var(--muted);
  font-size:.95rem;
}


/* =========================================================
   SPM CASE GRID
   ========================================================= */

.case-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}

.case-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:380px;
  padding:40px 42px;
  background:#fff;
  border:1px solid #d8d5cf;
  position:relative;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.case-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(20,32,45,.08);
}

.case-card:nth-child(1){
  background:#e9eef3;
}

.case-card:nth-child(2){
  background:#e6e9e4;
}

.case-card:nth-child(3){
  background:#eee5d8;
}

.case-card:nth-child(4){
  background:#e9e6df;
}

.case-card:nth-child(5){
  background:#e4ecea;
}

.case-number{
  display:block;
  font-family:Manrope,sans-serif;
  font-size:.72rem;
  line-height:1;
  letter-spacing:.08em;
  font-weight:700;
  color:var(--teal);
  margin-bottom:28px;
}

.case-card h2{
  margin:0 0 20px;
  font-size:clamp(2rem,3.5vw,3.4rem);
  line-height:1;
}

.case-card p{
  margin:0 0 15px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.65;
}

.case-link{
  display:block;
  margin-top:auto;
  padding-top:25px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  color:var(--teal);
}

.case-grid .case-card:last-child{
  grid-column:1 / -1;
  max-width:calc(50% - 11px);
}


/* =========================================================
   SPM CASES PAGE
   ========================================================= */

.cases-section{
  background:#fff;
}

.case-list{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.case-item{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:60px;
  padding:42px 45px 45px;
  background:#fff;
  border:1px solid #d8d5cf;
  border-top:4px solid var(--ink);
  box-shadow:0 2px 0 rgba(20,32,45,.03);
}

.case-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding-top:4px;
  font-size:.68rem;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  color:var(--teal);
}

.case-content{
  max-width:720px;
}

.case-content h2{
  margin:0 0 22px;
  font-size:clamp(2.2rem,4vw,4rem);
  line-height:1;
}

.case-content p{
  max-width:680px;
  margin:0 0 14px;
  color:var(--muted);
}

.case-status{
  display:inline-block;
  margin-top:14px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
  color:var(--teal);
}


/* =========================================================
   LEARNING
   ========================================================= */

.spm-learning-chain{
  max-width:var(--max);
  margin:60px auto 0;
  padding-top:28px;
  border-top:1px solid #d6c3a9;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.spm-learning-chain span:nth-child(even){
  color:var(--teal);
  font-size:1.1rem;
}


/* =========================================================
   CURRENT WORK
   ========================================================= */

.current-section{
  background:#fff;
}

.work-list{
  max-width:var(--max);
  margin:auto;
}

.work-item{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:40px;
  padding:32px 0;
  border-top:1px solid var(--line);
}

.work-meta{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  color:var(--teal);
}

.work-item h3{
  margin:0 0 8px;
  font-size:1.8rem;
}

.work-item p{
  margin:0;
  color:var(--muted);
}


/* =========================================================
   CONCEPT PAPER
   ========================================================= */

.spm-concept-paper.section{
  background:#fff;
}

.spm-concept-paper-inner{
  max-width:760px;
  margin:0 auto;
}

.spm-concept-paper-inner h2{
  font-size:clamp(2.7rem,5vw,4.8rem);
  line-height:1;
  margin:0 0 25px;
}

.spm-concept-paper-inner p:not(.eyebrow){
  color:var(--muted);
  max-width:680px;
  font-size:1.05rem;
}

.spm-concept-paper-inner .button{
  margin-top:20px;
}


/* =========================================================
   SOLIDARBURG / PRACTICE
   ========================================================= */

.solidarburg-section{
  background:#172f45;
  color:white;
}

.solidarburg-grid{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:90px;
}

.solidarburg-grid .eyebrow{
  color:#b9d6d5;
}

.solidarburg-grid > div > p{
  color:#d8e1e9;
}

.solidarburg-card{
  background:#f4eadb;
  color:var(--ink);
  padding:38px;
  margin-top:30px;
}

.small-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  color:var(--teal);
}

.solidarburg-card h3{
  font-size:2.5rem;
  margin:15px 0 0;
}

.solidarburg-title{
  font-weight:700;
}

.solidarburg-note{
  border-left:2px solid var(--teal);
  padding-left:18px;
  font-size:.94rem;
}


/* =========================================================
   ABOUT
   ========================================================= */

.about-grid{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:90px;
}

.about-copy{
  font-size:1.05rem;
}

.about-origin{
  margin-top:35px;
}

.profile-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:30px;
}

.profile-tags span{
  border:1px solid var(--line);
  padding:6px 10px;
  font-size:.78rem;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  background:var(--ink);
  color:white;
  padding:55px 6vw 25px;
}

.footer-main,
.footer-bottom{
  max-width:var(--max);
  margin:auto;
}

.footer-main{
  display:flex;
  justify-content:space-between;
  gap:40px;
}

.footer-wordmark{
  font-size:1.2rem;
}

.footer-main p{
  color:#b8c2cd;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
}

.footer-links a{
  color:#dce3e9;
  font-size:.9rem;
}

.footer-bottom{
  border-top:1px solid #405061;
  margin-top:55px;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  color:#aeb9c4;
  font-size:.75rem;
}

.footer-bottom a:hover{
  color:white;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .main-nav{
    display:none;
  }

  .section{
    padding:80px 6vw;
  }

  .hero-grid,
  .problem-layout,
  .approach-detail-grid,
  .spm-body,
  .solidarburg-grid,
  .about-grid{
    grid-template-columns:1fr;
    gap:45px;
  }

  .hero{
    min-height:auto;
    padding-top:100px;
    padding-bottom:100px;
  }

  .steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .field-grid{
    grid-template-columns:1fr;
  }

  .cycle-captions{
    grid-template-columns:1fr;
  }

  .work-item{
    grid-template-columns:1fr;
    gap:8px;
  }

  .footer-main,
  .footer-bottom{
    flex-direction:column;
  }

  .footer-bottom{
    gap:10px;
  }

  .spm-process{
    grid-template-columns:1fr;
    gap:45px;
  }

  .spm-not-grid{
    grid-template-columns:1fr;
    gap:35px;
  }

  .spm-comparison{
    grid-template-columns:1fr;
  }

  .spm-comparison > div + div{
    border-left:0;
    border-top:1px solid var(--line);
  }

  .case-grid{
    grid-template-columns:1fr;
  }

  .case-grid .case-card:last-child{
    grid-column:auto;
    max-width:none;
  }

  .case-item{
    grid-template-columns:150px minmax(0,1fr);
    gap:35px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:560px){

  h1{
    font-size:3.6rem;
  }

  .steps{
    grid-template-columns:1fr;
  }

  .hero-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .field-card{
    padding:32px;
    min-height:360px;
  }

  .case-card{
    padding:30px;
    min-height:330px;
  }

  .case-card h2{
    font-size:2.4rem;
  }

  .spm-comparison > div{
    padding:28px 25px;
  }

  .spm-comparison ul{
    grid-template-columns:1fr;
  }

  .spm-learning-chain{
    gap:10px;
    justify-content:flex-start;
  }

  .spm-learning-chain span{
    font-size:.75rem;
  }

  .case-item{
    grid-template-columns:1fr;
    gap:22px;
    padding:30px 25px 32px;
  }

  .case-meta{
    flex-direction:row;
    align-items:center;
  }
}