/*
 * Page styles — about
 * Source: _design-source/HTML Layout/kosh-about (1).html
 * Shared header/footer styles live in ../components/.
 */
html{overflow-x:hidden;}   /* smooth scrolling comes from Lenis; CSS smooth-scroll fights it */

/* REVEAL */
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.rv.in{opacity:1;transform:none;}
.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}
.d4{transition-delay:.4s;}.d5{transition-delay:.5s;}.d6{transition-delay:.6s;}

/* ── SHARED CONTAINER (100% matched to Homepage Design System) ── */
.col,
.col-wide,
.container {
  width: 100%;
  max-width: calc(var(--container, 1200px) + var(--gutter, 40px) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter, 40px);
}

/* ── SHARED ELEMENTS ── */
.eyebrow{
  color:var(--cr);margin-bottom:20px;}
.section-rule{height:1px;background:var(--rul);}/* ══════════════════════════════════════════════
   HERO — single centred column.
   Large declaration. Two paragraphs. Four stats.
══════════════════════════════════════════════ */
.hero{
  position: relative;
  overflow: hidden;
  padding: clamp(104px, 12vw, 160px) 0 clamp(92px, 10vw, 136px);
  border-bottom: 1px solid var(--rul);
  min-height: clamp(520px, 66vh, 720px);
  display: flex;
  align-items: center;
  background-color: #FAF8F5;
}
.hero__bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: contrast(1.02) brightness(0.96);
  transform: scale(1.02);
}
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(250, 248, 245, 0.96) 0%,
    rgba(250, 248, 245, 0.90) 45%,
    rgba(250, 248, 245, 0.60) 75%,
    rgba(250, 248, 245, 0.25) 100%
  );
}
.hero .col,
.hero .container{
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom:0;
}

.hero-hl{color:var(--ink);margin-bottom:28px;}
.hero-hl em{font-style:italic;}

.hero-body{color:var(--mid);margin-bottom:0;max-width:620px;font-size:clamp(16px, 1.25vw, 19px);line-height:1.7;}
/* ══════════════════════════════════════════════
   HOW WE ARE BUILT
   Centred column. Three paragraphs.
   Then four numbered items — full width hairline rows.
══════════════════════════════════════════════ */
.section{
  padding:var(--section-y) 0;
  border-bottom:1px solid var(--rul);
}

.section-hl{color:var(--ink);margin-bottom:32px;}
.section-hl em{font-style:italic;}

.body-copy{color:var(--mid);margin-bottom:20px;max-width:640px;}
.body-copy strong{color:var(--ink);font-weight:400;}
.body-copy:last-of-type{margin-bottom:0;}

/* ══════════════════════════════════════════════
   THE KOSH MODEL (Split Visual Layout)
══════════════════════════════════════════════ */
.model-grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: clamp(36px, 4.5vw, 64px);
  align-items: stretch;
  margin-top: 52px;
}

.model-visual {
  height: 100%;
  min-height: 0;
}

.model-frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 40px -10px rgba(20, 18, 16, 0.10), 0 4px 12px -2px rgba(20, 18, 16, 0.04);
  border: 1px solid rgba(20, 18, 16, 0.08);
  height: 100%;
  width: 100%;
  background: var(--bg-card, #FAF8F5);
}

.model-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity 0.45s cubic-bezier(.16, 1, .3, 1), transform 0.55s cubic-bezier(.16, 1, .3, 1), visibility 0.45s;
  pointer-events: none;
}

.model-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

.model-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.model-pill {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(20, 18, 16, 0.08);
  font-family: var(--font-body, var(--sans, sans-serif));
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #141210);
  box-shadow: 0 8px 24px -4px rgba(20, 18, 16, 0.12);
}

.model-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2E7D32;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.25);
  flex-shrink: 0;
}

.item-rows{
  border-top:1px solid var(--rul);
  margin-top:56px;}
.item-rows--model {
  margin-top: 0;
}
.item-row{
  display:grid;grid-template-columns:52px 1fr;
  gap:28px;align-items:start;
  padding:28px 0;border-bottom:1px solid var(--rul);
  position:relative;
  cursor: pointer;
  outline: none;
  transition:padding-left .3s var(--ease), background .3s;}
.item-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--cr);
  transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease);}
.item-row:hover,
.item-row.is-active{padding-left:14px;}
.item-row:hover::before,
.item-row.is-active::before{transform:scaleY(1);}
.item-n{
  font-family:var(--serif);font-size:32px;font-weight:300;
  color:rgba(12,11,10,.15);line-height:1;padding-top:4px;
  transition:color .3s;}
.item-row:hover .item-n,
.item-row.is-active .item-n{color:var(--cr);font-weight:400;}
.item-body h4{color:var(--ink);margin-bottom:8px;transition:color .3s;}
.item-row:hover .item-body h4,
.item-row.is-active .item-body h4{color:var(--cr);}
.item-body p{font-size:var(--fs-body);color:var(--mid);line-height:1.72;}

/* ══════════════════════════════════════════════
   A CONSIDERED APPROACH — dark band, four steps on a timeline
   (was four white boxed cards; client asked for a better design, Oct 2026)
══════════════════════════════════════════════ */
.approach-section{background:var(--bg-dark);color:var(--text-on-dark-2);}
.approach-section .eyebrow{color:var(--text-on-dark-3);}
.approach-section .section-hl,
.approach-section .section-hl em{color:var(--text-on-dark);}
.approach-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0 40px;
  margin-top:64px;
  padding-top:44px;}
/* the timeline: one hairline across all four steps */
.approach-grid::before{
  content:'';position:absolute;left:0;right:0;top:0;
  height:1px;background:rgba(255,255,255,.18);}
.approach-card{position:relative;display:flex;flex-direction:column;gap:18px;}
.approach-dot{
  position:absolute;left:0;top:-49px;
  width:9px;height:9px;border-radius:50%;
  background:var(--bg-dark);border:1px solid rgba(255,255,255,.6);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);}
.approach-card:hover .approach-dot{background:#fff;border-color:#fff;transform:scale(1.25);}
.approach-n{
  font-family:var(--serif);
  font-size:clamp(44px,4.6vw,64px);
  font-weight:300;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.55);
  transition:color .35s var(--ease);}
.approach-card:hover .approach-n{color:#fff;}
.approach-card h4{
  font-family:var(--serif);
  font-size:clamp(19px,1.7vw,22px);
  font-weight:400;
  line-height:1.3;
  color:var(--text-on-dark);
  margin:0 0 8px;}
.approach-card p{font-size:var(--fs-body);line-height:1.7;color:var(--text-on-dark-2);margin:0;}

/* ══════════════════════════════════════════════
   KHUSHBOO — centred, personal, direct.
   Large pull-quote style headline.
   Four paragraphs. Credential strip below.
══════════════════════════════════════════════ */
.founder-quote{
  font-family:var(--serif);
  font-size:clamp(28px,3.5vw,52px);
  font-weight:300;line-height:1.18;letter-spacing:-.02em;
  color:var(--ink);
  border-left:3px solid var(--cr);
  padding-left:32px;
  margin-bottom:48px;
  max-width:720px;}
.founder-quote em{font-style:italic;color:var(--cr);}

/* Credential strip */
.cred-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rul);
  margin-top:56px;
  max-width:1200px;margin-left:auto;margin-right:auto;padding:0 72px;}
.cred-cell{
  padding:24px 0;
  border-right:1px solid var(--rul);}
.cred-cell:last-child{border-right:none;}
.cred-cell-inner{padding:0 0 0 0;}
.cred-n{
  font-family:var(--serif);font-size:clamp(24px,3vw,40px);
  font-weight:300;color:var(--ink);line-height:1;display:block;margin-bottom:5px;}
.cred-n em{color:var(--cr);font-style:normal;}
.cred-l{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);}

/* ══════════════════════════════════════════════
   HOW WE WORK — four clean rows.
   No dark background. White, hairlines, numbers.
══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   Q&A — the confidence section.
   Accordion style. One at a time.
══════════════════════════════════════════════ */
.qa-list{margin-top:56px;}
.qa-item{border-top:1px solid var(--rul);overflow:hidden;}
.qa-item:last-child{border-bottom:1px solid var(--rul);}
.qa-q-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:24px 0;gap:24px;
  background:none;border:none;cursor:pointer;text-align:left;
  transition:padding-left .25s var(--ease);}
.qa-q-btn:hover{padding-left:6px;}
.qa-q-text{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(18px,2vw,24px);color:var(--ink);line-height:1.35;}
.qa-q-btn:hover .qa-q-text{color:var(--cr);}
.qa-icon{
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--rul);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .25s,border-color .25s,transform .4s var(--ease);}
.qa-item.open .qa-icon{background:var(--cr);border-color:var(--cr);transform:rotate(45deg);}
.qa-icon svg{width:11px;height:11px;color:var(--mid);}
.qa-item.open .qa-icon svg{color:#fff;}
.qa-a{
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease),padding .4s var(--ease);
  font-size:var(--fs-body);color:var(--mid);line-height:1.78;}
.qa-a strong{color:var(--ink);font-weight:400;}
.qa-item.open .qa-a{max-height:300px;padding-bottom:28px;}/* ══════════════════════════════════════════════
   05 · FINAL CTA (Identical to Homepage CTA)
══════════════════════════════════════════════ */
.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: #ffffff;
  border-top: 1px solid var(--rul, #e6e3dd);
  padding: clamp(96px, 12vh, 160px) 0 clamp(88px, 10vh, 130px);
}

.cta__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(140px, 20vw, 280px);
  font-weight: 300;
  font-style: italic;
  color: rgba(111, 0, 0, 0.038);
  letter-spacing: -.04em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
  will-change: transform;
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 24px;
  box-shadow: none;
  will-change: transform;
  text-align: center;
}

.cta .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  text-align: center;
  font-family: var(--font-body, var(--sans, sans-serif));
  font-size: var(--fs-eyebrow, 12px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-secondary, var(--color-secondary));
}

.cta .section-title {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 300;
  color: var(--ink, #141210);
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.15;
  text-align: center;
}

.cta .section-title em {
  font-style: italic;
  color: var(--color-secondary, var(--color-secondary));
}

.cta .section-lede {
  margin: 24px auto 0;
  max-width: 600px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
  color: var(--text-secondary, #5c5852);
  text-align: center;
}

.cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-top: clamp(36px, 4.5vw, 48px);
}

.cta__email-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--btn-radius);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line, rgba(20, 18, 16, 0.12));
  color: var(--text-primary, #141210);
  font-family: var(--font-body, var(--sans, sans-serif));
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -4px rgba(20, 18, 16, 0.06);
  transition: all .3s var(--ease);
  text-decoration: none;
}

.cta__email-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2E7D32;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
}

.cta__email-btn:hover {
  background: #fff;
  border-color: var(--color-secondary, var(--color-secondary));
  color: var(--color-secondary, var(--color-secondary));
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(20, 18, 16, 0.12);
}

/* RESPONSIVE */
@media(max-width:960px){
  .model-grid{
    grid-template-columns:1fr;
    gap:40px;
    align-items:start;
  }
  .model-visual{
    height:auto;
    max-width:540px;
  }
  .model-frame{
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .approach-grid{
    grid-template-columns:repeat(2,1fr);
    gap:56px 40px;
  }
  .approach-grid::before{display:none;}
  .approach-card{padding-top:24px;border-top:1px solid rgba(255,255,255,.18);}
  .approach-dot{top:-5px;}
}

@media(max-width:860px){
  .hero{
    padding:clamp(64px, 10vw, 96px) 0 clamp(56px, 8vw, 80px);
    min-height:auto;
  }
  .hero__bg-overlay{
    background:linear-gradient(
      180deg,
      rgba(250, 248, 245, 0.96) 0%,
      rgba(250, 248, 245, 0.90) 55%,
      rgba(250, 248, 245, 0.65) 100%
    );
  }
  .col, .col-wide, .container { padding-left: var(--gutter, 22px); padding-right: var(--gutter, 22px); }
  .hero-body,.body-copy{max-width:100%;}
}

@media(max-width:580px){
  .approach-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
}
@media(prefers-reduced-motion:reduce){}