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

/* 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:15px;color:var(--mid);line-height:1.72;}

/* ══════════════════════════════════════════════
   A CONSIDERED APPROACH (Process Cards Grid)
══════════════════════════════════════════════ */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 52px;
  border-top: 1px solid var(--rul);
  padding-top: 40px;
}

.approach-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  background: #ffffff;
  border: 1px solid var(--rul);
  border-radius: 6px;
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}

.approach-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px -8px rgba(20, 18, 16, 0.08);
  border-color: var(--cr);
}

.approach-n {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--cr);
  line-height: 1;
}

.approach-card h4 {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
  margin-bottom: 8px;
}

.approach-card p {
  font-size: 14px;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
}

/* ══════════════════════════════════════════════
   THE TEAM — disciplines as elegant rows.
   Not a grid. A list. Like a roster.
══════════════════════════════════════════════ */
.disc-rows{
  border-top:1px solid var(--rul);
  margin-top:56px;}
.disc-row{
  padding:24px 0;border-bottom:1px solid var(--rul);
  display:flex;align-items:baseline;justify-content:space-between;
  gap:40px;
  transition:padding-left .3s var(--ease);
  position:relative;
  color:inherit;
  text-decoration:none;}
.disc-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);}
.disc-row:hover{padding-left:14px;}
.disc-row:hover::before{transform:scaleY(1);}
.disc-name{
  font-family:var(--serif);font-size:clamp(20px,2.5vw,30px);
  font-weight:300;color:var(--ink);line-height:1.1;flex-shrink:0;
  display:inline-flex;align-items:center;gap:10px;
  transition:color .3s;}
.disc-name svg{
  width:14px;height:14px;flex-shrink:0;
  transition:transform .3s var(--ease);}
.disc-row:hover .disc-name{color:var(--cr);}
.disc-row:hover .disc-name svg{transform:translateX(5px);}
.disc-detail{
  font-size:15px;color:var(--mid);line-height:1.65;
  max-width:440px;text-align:right;}

/* ══════════════════════════════════════════════
   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:15px;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: 999px;
  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:20px;
  }
}

@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); }
  .disc-row{flex-direction:column;gap:8px;}
  .disc-detail{text-align:left;}
  .hero-body,.body-copy{max-width:100%;}
}

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