/* 
   D40 — ABOUT PAGE STYLES
   Load common.css BEFORE this file.
    */

.about-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 20px;
  min-height: 80vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.about-hero__kicker { text-transform: uppercase; font-size: 18px; letter-spacing: 2px; color: var(--muted); margin: 0 0 16px; }
.about-hero__headline { margin: 0 0 24px; font: 700 48px/1.2 "Playfair Display", serif; }

.about-hero__copy {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.75;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.22,.8,.2,1) .65s, transform .7s cubic-bezier(.22,.8,.2,1) .65s;
}
.about-hero.reveal-in .about-hero__copy { opacity: 1; transform: translateY(0); }

.about-hero__mark { display: flex; justify-content: center; }

/* The "materialize" effect: hidden behind a mask + blurred, then wiped
   into view left-to-right while it snaps into focus. Not literal
   stroke-by-stroke construction — that needs an SVG with separate
   letterform paths, which this PNG doesn't have. */
.about-hero__mark-img {
  width: min(360px, 70%);
  height: auto;
  opacity: 0;
  transform: scale(.97);
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 0% 100%;
          mask-size: 0% 100%;
}
.about-hero.reveal-in .about-hero__mark-img {
  animation: mark-construct 2s cubic-bezier(.22,.8,.2,1) .3s forwards;
}
@keyframes mark-construct {
  0%   { opacity: 1; transform: scale(.97); filter: blur(6px); -webkit-mask-size: 0% 100%;   mask-size: 0% 100%; }
  75%  { filter: blur(3px); }
  100% { opacity: 1; transform: scale(1);   filter: blur(0);   -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; text-align: center; padding-top: 40px; }
  .about-hero__copy { margin-left: auto; margin-right: auto; }
  .about-hero__mark { order: -1; }
  .about-hero__mark-img { width: min(240px, 60%); }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__copy, .about-hero__mark-img {
    transition: none !important; animation: none !important;
    opacity: 1 !important; transform: none !important; filter: none !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
}

/* Why D40 Exists */

/*
.why-exists {
  max-width: 900px;
  margin: -15px auto;
  padding: 120px 20px 140px;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  text-align: center;
}

.why-exists__intro { max-width: 640px; margin: 0 auto 64px; }
.why-exists__kicker { text-transform: uppercase; font-size: 18px; letter-spacing: 2px; color: var(--muted); margin: 0 0 14px; }
.why-exists__headline { margin: 0 0 32px; font: 700 48px/1.15 "Playfair Display", serif; }

.why-exists__setup .line:nth-child(1) { color: var(--muted); font-size: 22px; }
.why-exists__setup .line:nth-child(2) { color: var(--text); font-size: 24px; font-weight: 600; margin-top: 6px; }

.why-exists__philosophy { max-width: 720px; margin: -20px auto 32px; }
.why-exists__philosophy .line {
  font: italic 400 28px/1.5 "Playfair Display", serif;
  color: var(--text);
}

.why-exists__explain {
  max-width: 620px;
  margin: 0 auto 56px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.8;
}

.why-exists__payoff { margin: 0; font: 700 clamp(26px, 4vw, 38px)/1.3 Inter, serif; }
.why-exists__brand { color: var(--text); }

Reveal sequence: headline settles, then the setup, then the
   philosophy triplet cascades, then the explanation, then the
   payoff lands last — same order the copy reads in. 
.why-exists__setup .line,
.why-exists__philosophy .line { display: block; }

.why-exists__headline,
.why-exists__setup .line,
.why-exists__philosophy .line,
.why-exists__explain,
.why-exists__payoff {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22,.8,.2,1), transform .7s cubic-bezier(.22,.8,.2,1);
}

.why-exists.in-view .why-exists__headline,
.why-exists.in-view .why-exists__setup .line,
.why-exists.in-view .why-exists__philosophy .line,
.why-exists.in-view .why-exists__explain,
.why-exists.in-view .why-exists__payoff {
  opacity: 1;
  transform: translateY(0);
}

.why-exists.in-view .why-exists__headline { transition-delay: 100ms; }
.why-exists.in-view .why-exists__setup .line:nth-child(1) { transition-delay: 300ms; }
.why-exists.in-view .why-exists__setup .line:nth-child(2) { transition-delay: 450ms; }
.why-exists.in-view .why-exists__philosophy .line:nth-child(1) { transition-delay: 700ms; }
.why-exists.in-view .why-exists__philosophy .line:nth-child(2) { transition-delay: 850ms; }
.why-exists.in-view .why-exists__philosophy .line:nth-child(3) { transition-delay: 1000ms; }
.why-exists.in-view .why-exists__explain { transition-delay: 1250ms; }
.why-exists.in-view .why-exists__payoff  { transition-delay: 1500ms; }

@media (max-width: 700px) {
  .why-exists__philosophy .line { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .why-exists__headline,
  .why-exists__setup .line,
  .why-exists__philosophy .line,
  .why-exists__explain,
  .why-exists__payoff {
    opacity: 1; transform: none; transition: none !important;
  }
} */

/* Pillars Section*/

/* What D40 Actually Is (Build / Discover / Scale) */
.pillars {
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 20px 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.pillars__intro { max-width: 720px; margin: 0 auto 80px; text-align: center; }
.pillars__kicker { text-transform: uppercase; font-size: 18px; letter-spacing: 2px; color: var(--muted); margin: 0 0 14px; }
.pillars__headline { margin: 0 0 24px; font: 700 48px/1.15 "Playfair Display", serif; }
.pillars__lead { margin: 0 0 18px; color: var(--muted); font-size: 18px; line-height: 1.8; }
.pillars__lead:last-child { margin-bottom: 0; }

.pillars__stack { display: flex; flex-direction: column; }
.pillars__arrow { text-align: center; color: color-mix(in srgb, var(--text) 30%, transparent); font-size: 20px; padding: 4px 0; }

.pillar { border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); transition: opacity .5s ease; }
.pillars__stack.has-active .pillar:not(.is-active) { opacity: .4; }

.pillar__toggle {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 36px 8px;
}
.pillar__toggle:focus-visible { outline: none; box-shadow: inset var(--ring); border-radius: 8px; }

.pillar__index { font-size: 22px; font-weight: 600; letter-spacing: 1px; color: var(--accent); }
.pillar__name { font: 700 clamp(32px, 6vw, 58px)/1 "Playfair Display", serif; text-transform: uppercase; letter-spacing: 1px; }
.pillar__tagline { margin-left: auto; color: var(--muted); font-size: 18px; text-align: right; max-width: 260px; }

.pillar__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s cubic-bezier(.22,.8,.2,1);
}
.pillar.is-active .pillar__detail { grid-template-rows: 1fr; }
.pillar__detail-inner { overflow: hidden; }

.pillar__lead-line { margin: 0 0 20px; padding: 0 8px; font: 600 24px/1.4 "Playfair Display", serif; }
.pillar__desc { margin: 0 0 25px; padding: 0 8px; color: var(--muted); font-size: 20px; line-height: 1.75; max-width: 68ch; }
.pillar__list-label { margin: 8px 0 14px; padding: 0 8px; font-size: 18px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.pillar__list { list-style: none; margin: 0 0 24px; padding: 0 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.pillar__list li { font-size: 18px; padding-left: 20px; position: relative; color: var(--muted); }
.pillar__list li::before { content: "— "; position: absolute; left: 0; color: var(--accent); }

.pillar__objective {
  margin: 0 0 40px;
  padding: 20px 8px 0;
  font-size: 20px;
  line-height: 1.6;
  border-top: 1px dashed color-mix(in srgb, var(--text) 16%, transparent);
}
.pillar__objective span { color: var(--accent); font-weight: 600; }

@media (max-width: 700px) {
  .pillar__toggle { flex-wrap: wrap; gap: 8px; padding: 28px 8px; }
  .pillar__tagline { margin-left: 0; text-align: left; max-width: none; }
  .pillar__list { grid-template-columns: 1fr; }
}

.pillars__connector { max-width: 900px; margin: 72px auto 0; text-align: center; padding: 0 20px; }
.pillars__connector-text { margin: 0 0 20px; color: var(--muted); font-size: 22px; line-height: 1.8; }
.pillars__connector-line { margin: 0; font: 700 26px/1.4 "Playfair Display", serif; }

.pillars__bigger-idea {
  max-width: 720px;
  margin: 96px auto 0;
  padding: 72px 20px 120px;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.pillars__bigger-kicker { text-transform: uppercase; font-size: 18px; letter-spacing: 2px; color: var(--muted); margin: 0 0 28px; }
.pillars__bigger-statement { margin: 0 0 32px; }
.pillars__bigger-statement .line { display: block; font: 400 24px/1.6 "Playfair Display", serif; color: var(--text); margin-bottom: 14px; }
.pillars__bigger-close { margin: 0 0 25px; color: var(--muted); font-size: 22px; }
.pillars__bigger-final { margin: 0; font: 700 clamp(28px, 4.5vw, 42px)/1.3 "Playfair Display", serif; color: var(--text); }

.pillars__stack.static .pillar__detail { grid-template-rows: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .pillar, .pillar__detail { transition: none !important; }
}

/* Our Philosophy */
.philosophy {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 20px 140px;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.philosophy__intro {
  max-width: 680px;
  margin: 0 auto 72px;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.8,.2,1), transform .7s cubic-bezier(.22,.8,.2,1);
}
.philosophy.in-view .philosophy__intro { opacity: 1; transform: translateY(0); }

.philosophy__kicker { text-transform: uppercase; font-size: 18px; letter-spacing: 2px; color: var(--muted); margin: 0 0 14px; }
.philosophy__headline { margin: 0 0 20px; font: 700 44px/1.15 "Playfair Display", serif; }
.philosophy__lead { margin: 0 0 14px; color: var(--muted); font-size: 22px; line-height: 1.75; }
.philosophy__lead:last-child { margin-bottom: 0; }

.philosophy__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.philosophy__grid.has-open .principle:not(.is-open) { opacity: .5; }

.principle {
  grid-column: span 1;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.8,.2,1), border-color .3s ease;
}
.philosophy.in-view .principle { opacity: 1; transform: translateY(0); }
.philosophy.in-view .principle:nth-child(1) { transition-delay: 0ms;   }
.philosophy.in-view .principle:nth-child(2) { transition-delay: 70ms;  }
.philosophy.in-view .principle:nth-child(3) { transition-delay: 140ms; }
.philosophy.in-view .principle:nth-child(4) { transition-delay: 210ms; }
.philosophy.in-view .principle:nth-child(5) { transition-delay: 280ms; }
.philosophy.in-view .principle:nth-child(6) { transition-delay: 350ms; }
.philosophy.in-view .principle:nth-child(7) { transition-delay: 420ms; }
.philosophy.in-view .principle:nth-child(8) { transition-delay: 490ms; }

.principle.is-open {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.principle__toggle {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  display: grid;
  grid-template-columns: 44px 1fr 22px;
  align-items: start;
  gap: 16px;
  padding: 28px;
}
.principle__toggle:focus-visible { outline: none; box-shadow: inset var(--ring); }

.principle__index { font-size: 18px; font-weight: 600; letter-spacing: 1px; color: var(--accent); }

.principle__heading { display: flex; flex-direction: column; gap: 8px; }
.principle__title { font: 700 23px/1.35 "Playfair Display", serif; }
.principle__hook { color: var(--muted); font-size: 18px; line-height: 1.6; }

.principle__icon { position: relative; width: 20px; height: 20px; margin-top: 2px; transition: transform .35s ease; }
.principle__icon::before, .principle__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--text); }
.principle__icon::before { width: 20px; height: 1px; transform: translate(-50%, -50%); }
.principle__icon::after  { width: 1px; height: 20px; transform: translate(-50%, -50%); }
.principle.is-open .principle__icon { transform: rotate(45deg); }

.principle__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.22,.8,.2,1);
}
.principle.is-open .principle__detail { grid-template-rows: 1fr; }
.principle__detail-inner { overflow: hidden; }

.principle__desc { margin: 0 0 16px; padding: 0 28px; color: var(--muted); font-size: 18px; line-height: 1.75; max-width: 68ch; }
.principle__desc:last-child { margin-bottom: 28px; }

.principle__mantra {
  margin: 4px 28px 20px;
  padding: 12px 18px;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--accent);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
}

.principle__fragments { list-style: none; margin: 0 0 16px; padding: 0 28px; display: grid; gap: 8px; }
.principle__fragments li { font-size: 15px; color: var(--muted); padding-left: 20px; position: relative; }
.principle__fragments li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

@media (max-width: 800px) {
  .philosophy__grid { grid-template-columns: 1fr; }
  .principle.is-open { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .philosophy__intro, .principle, .principle__detail, .principle__icon { transition: none !important; }
  .philosophy__intro, .principle { opacity: 1 !important; transform: none !important; }
}

/* Where We're Going */
.going {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 20px 140px;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  text-align: center;
}

.going__intro { margin: 0 0 32px; }
.going__kicker { text-transform: uppercase; font-size: 18px; letter-spacing: 2px; color: var(--muted); margin: 0 0 14px; }
.going__headline { margin: 0; font: 700 clamp(28px, 4.5vw, 44px)/1.3 "Playfair Display", serif; }

.going__body {
  margin: 0 auto 72px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22,.8,.2,1) .3s, transform .7s cubic-bezier(.22,.8,.2,1) .3s;
}
.going.in-view .going__body { opacity: 1; transform: translateY(0); }

.going__statement {
  margin: 0;
  font: 700 clamp(34px, 6vw, 60px)/1.25 "Playfair Display", serif;
}
.going__statement .line:nth-child(2) { color: var(--accent); }

/* Delays the statement's arrival until after the body copy has settled —
   overrides common.css's default 0ms/150ms line timing for this instance only. */
.going__statement.reveal-in .line:nth-child(1) { animation-delay: 700ms; }
.going__statement.reveal-in .line:nth-child(2) { animation-delay: 850ms; }

@media (prefers-reduced-motion: reduce) {
  .going__body { transition: none !important; opacity: 1 !important; transform: none !important; }
}