/* ==========================================================================
   FrontStep Delivery — Sub-page styles (Our Story + About the founder)
   Builds on tokens.css + styles.css. Page-specific layout only; reuses the
   existing palette, type scale, buttons, brand tile, cards and reveal system.
   ========================================================================== */

/* ---------- Editable placeholder marker -------------------------------------
   Inline spots meant to be replaced with real copy. Visible-but-tasteful so
   they're trivial to find; delete the class once filled in. */
.ph {
  font-style: normal;
  padding: 0 0.2em;
  border-radius: 4px;
  background: rgba(226, 144, 47, 0.14);
  border-bottom: 1px dashed var(--amber-500);
  color: var(--amber-600);
}

/* ==========================================================================
   SUB-PAGE HERO
   ========================================================================== */
.subhero {
  position: relative;
  padding-top: clamp(8rem, 6rem + 8vw, 11rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  overflow: hidden;
}
.subhero::after {
  content: "";
  position: absolute;
  top: -25%;
  right: -8%;
  width: 55vw;
  height: 55vw;
  max-width: 680px;
  max-height: 680px;
  background: radial-gradient(circle, rgba(136, 164, 77, 0.2), transparent 62%);
  z-index: 0;
  pointer-events: none;
}
.subhero-inner {
  position: relative;
  z-index: var(--z-base);
  max-width: 720px;
}
.subhero h1 {
  font-size: var(--text-3xl);
  margin-top: 1.1rem;
}
.subhero h1 .accent {
  color: var(--sage-600);
  font-style: italic;
  font-variation-settings: "SOFT" 60;
}
.subhero .lead {
  margin-top: 1.4rem;
  max-width: 40em;
  font-size: var(--text-lg);
  color: var(--ink-700);
}

.crumbs {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}
.crumbs a {
  color: var(--navy-700);
  transition: color var(--dur-fast);
}
.crumbs a:hover {
  color: var(--amber-600);
}
.crumbs svg {
  width: 1em;
  height: 1em;
}

/* ==========================================================================
   STORY — origin split
   ========================================================================== */
.story-split .container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
.prose > * + * {
  margin-top: 1.2rem;
}
.prose p {
  color: var(--ink-700);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}
.prose .lead-line {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.35;
  color: var(--navy-800);
}

/* The gap we fill — mini comparison card */
.gap-card {
  position: sticky;
  top: 6rem;
  background: var(--color-surface);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 1rem + 2vw, 2.2rem);
  box-shadow: var(--shadow-md);
}
.gap-card h3 {
  font-size: var(--text-lg);
  margin-bottom: 1.1rem;
}
.gap-row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--cream-line);
}
.gap-row:first-of-type {
  border-top: none;
  padding-top: 0;
}
.gap-row .dot {
  width: 10px;
  height: 10px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--ink-300);
  flex-shrink: 0;
}
.gap-row strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--navy-800);
}
.gap-row span {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.gap-row--us {
  margin: 0.5rem -0.6rem 0;
  padding: 1rem 0.8rem;
  border-top: none;
  background: var(--sage-100);
  border-radius: var(--radius-md);
}
.gap-row--us .dot {
  background: var(--amber-500);
}
.gap-row--us strong {
  color: var(--sage-700);
}

/* ==========================================================================
   STORY — what we believe
   ========================================================================== */
.belief-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
}
.belief {
  background: var(--color-surface);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.8rem;
  transition: transform var(--dur-normal) var(--ease-out-soft),
    box-shadow var(--dur-normal), border-color var(--dur-fast);
}
.belief:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--sage-300);
}
.belief .ico {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--sage-100);
  color: var(--sage-700);
}
.belief .ico svg {
  width: 24px;
  height: 24px;
}
.belief h3 {
  font-size: var(--text-lg);
  margin: 1.1rem 0 0.5rem;
}
.belief p {
  color: var(--ink-700);
  font-size: var(--text-sm);
}
.belief:nth-child(2) .ico {
  background: var(--amber-100);
  color: var(--amber-600);
}
.belief:nth-child(3) .ico {
  background: rgba(58, 114, 163, 0.16);
  color: var(--navy-600);
}

/* ==========================================================================
   STORY — the journey (editorial timeline)
   ========================================================================== */
.journey {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
}
.journey::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--sage-500), var(--cream-line));
}
.jstep {
  position: relative;
  padding: 0 0 2.4rem 4.2rem;
}
.jstep:last-child {
  padding-bottom: 0;
}
.jnode {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cream-card);
  border: 2px solid var(--sage-500);
  color: var(--sage-700);
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.jbadge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.7rem;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.jbadge--now {
  background: var(--amber-100);
  color: var(--amber-600);
}
.jbadge--next {
  background: var(--sage-100);
  color: var(--sage-700);
}
.jstep h3 {
  font-size: var(--text-lg);
}
.jstep p {
  margin-top: 0.35rem;
  color: var(--ink-700);
}

/* ==========================================================================
   STORY — "why FrontStep" name moment
   ========================================================================== */
.namebox {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}
.namebox .big {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.2;
  color: var(--navy-800);
}
.namebox .big em {
  color: var(--sage-600);
  font-variation-settings: "SOFT" 60;
}
.namebox p {
  margin-top: 1.2rem;
  font-size: var(--text-lg);
  color: var(--ink-700);
}

/* ==========================================================================
   MISSION band (shared dark statement strip)
   ========================================================================== */
.mission {
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  color: var(--cream-card);
  overflow: hidden;
}
.mission::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% -10%, rgba(136, 164, 77, 0.22), transparent 60%);
  pointer-events: none;
}
.mission .container {
  text-align: center;
  position: relative;
}
.mission .eyebrow {
  color: var(--sage-300);
  justify-content: center;
}
.mission .eyebrow::before {
  background: var(--sage-300);
}
.mission blockquote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.32;
  max-width: 22ch;
  margin: 1.2rem auto 1.8rem;
}
.mission .ribbon-tag {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sage-300);
}

/* ==========================================================================
   STORY — founder teaser card -> about page
   ========================================================================== */
.teaser-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1.2rem, 0.8rem + 2vw, 2.2rem);
  align-items: center;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  background: var(--color-surface);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-normal) var(--ease-out-soft),
    box-shadow var(--dur-normal);
}
.teaser-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.teaser-portrait {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 26%;
  background: linear-gradient(165deg, var(--slate-teal), var(--navy-800));
  color: var(--cream-card);
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
  object-fit: cover;
  object-position: center 30%;
  flex-shrink: 0;
}
.teaser-card .eyebrow {
  margin-bottom: 0.5rem;
}
.teaser-card h3 {
  font-size: var(--text-xl);
}
.teaser-card p {
  margin-top: 0.4rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
  max-width: 40ch;
}
.teaser-go {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--amber-500);
  color: #2a1804;
  flex-shrink: 0;
  box-shadow: var(--shadow-brand);
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.teaser-card:hover .teaser-go {
  transform: translateX(4px);
}
.teaser-go svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   ABOUT — founder hero
   ========================================================================== */
.founder-hero .container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

/* Portrait placeholder — swap the inner block for a real <img> when ready. */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(165deg, var(--slate-teal), var(--navy-900));
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
}
.portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% -10%, rgba(136, 164, 77, 0.32), transparent 60%);
  pointer-events: none;
}
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait .monogram {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4rem, 2rem + 9vw, 6.5rem);
  letter-spacing: 0.05em;
  color: var(--cream-card);
}
.portrait .portrait-hint {
  position: relative;
  margin-top: 0.4rem;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(253, 250, 241, 0.6);
}
.portrait .ptag {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--cream-card);
  color: var(--navy-800);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--text-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.portrait .ptag svg {
  width: 1.05em;
  height: 1.05em;
  color: var(--sage-600);
}

.founder-role {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--sage-700);
}
.founder-role svg {
  width: 1.15em;
  height: 1.15em;
}
.founder-hero .lead {
  margin-top: 1.3rem;
  max-width: 42em;
  font-size: var(--text-lg);
  color: var(--ink-700);
}
.founder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.9rem;
}

/* ==========================================================================
   ABOUT — bio prose
   ========================================================================== */
.bio {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.bio h2 {
  font-size: var(--text-xl);
  margin-top: 2.6rem;
}
.bio h2:first-child {
  margin-top: 0;
}
.bio p {
  margin-top: 1.1rem;
  color: var(--ink-700);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}
.bio .drop::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.78;
  padding: 0.06em 0.12em 0 0;
  color: var(--sage-600);
}

/* ==========================================================================
   ABOUT — pull quote
   ========================================================================== */
.pullquote {
  position: relative;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  color: var(--cream-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
  overflow: hidden;
}
.pullquote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 80% at 50% -10%, rgba(136, 164, 77, 0.3), transparent 60%);
  pointer-events: none;
}
.pullquote .qmark {
  position: relative;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.5;
  color: var(--amber-500);
}
.pullquote blockquote {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.3;
  margin: 0.9rem auto 1.3rem;
  max-width: 24ch;
}
.pullquote cite {
  position: relative;
  font-style: normal;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--sage-300);
}

/* ==========================================================================
   ABOUT — "a few things about me"
   ========================================================================== */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
}
.fact {
  background: var(--color-surface);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  transition: transform var(--dur-normal) var(--ease-out-soft),
    box-shadow var(--dur-normal);
}
.fact:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.fact .ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--sage-100);
  color: var(--sage-700);
}
.fact .ico svg {
  width: 22px;
  height: 22px;
}
.fact dt {
  margin: 1rem 0 0.35rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-700);
}
.fact dd {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--navy-800);
}
.fact:nth-child(2) .ico,
.fact:nth-child(5) .ico {
  background: var(--amber-100);
  color: var(--amber-600);
}
.fact:nth-child(3) .ico,
.fact:nth-child(4) .ico {
  background: rgba(58, 114, 163, 0.16);
  color: var(--navy-600);
}

/* ==========================================================================
   ABOUT — follow along (build-in-public)
   ========================================================================== */
.follow .container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: center;
  padding: clamp(1.8rem, 1.2rem + 3vw, 3rem);
  background: var(--cream-deep);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-xl);
}
.follow h2 {
  font-size: var(--text-2xl);
}
.follow p {
  margin-top: 0.8rem;
  max-width: 44ch;
  color: var(--ink-700);
}
.follow-links {
  display: flex;
  gap: 0.7rem;
}
.follow-links a {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--navy-800);
  color: var(--cream-card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out-soft),
    background-color var(--dur-fast);
}
.follow-links a:hover {
  transform: translateY(-3px);
  background: var(--sage-600);
}
.follow-links svg {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .story-split .container,
  .founder-hero .container {
    grid-template-columns: 1fr;
  }
  .gap-card {
    position: static;
  }
  .portrait {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    order: -1;
  }
}

@media (max-width: 860px) {
  .belief-grid,
  .facts-grid {
    grid-template-columns: 1fr 1fr;
  }
  .teaser-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .teaser-card p {
    margin-inline: auto;
  }
  .follow .container {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .belief-grid,
  .facts-grid {
    grid-template-columns: 1fr;
  }
  .jstep {
    padding-left: 3.6rem;
  }
}