/* ── JASMIN AZIZ — Homepage styles ─────────────────────────────────
   Loaded after site.css. Overrides shared tokens where the homepage
   uses different values, and defines all homepage-specific components.
   Shared components (nav, footer, pills, who-section, etc.) come from
   site.css — do not redefine them here.
   ──────────────────────────────────────────────────────────────── */

/* ── TOKEN OVERRIDES ────────────────────────────────────────────────
   Homepage uses a tighter --sv than inner pages, and adds --h1-size.  */
:root {
  --h1-size: 68px;
  --sv:      clamp(44px, 7vw, 76px);
}

/* =================================================================
   HERO
   Vertical padding via --sv. H1 is typographic anchor.
   ================================================================= */
.hero { padding: var(--sv) 0 clamp(32px, 4vw, 64px); }

.hero-h1 {
  font-family: 'Chillax', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: var(--h1-size);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  display: block;
  margin-bottom: clamp(20px, 3vw, 32px);
  max-width: 820px;
}

.hero-body   { padding-top: 0; }
.hero-intro  { margin-bottom: clamp(44px, 6vw, 68px); }

.hero-lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.4;
  color: var(--periwinkle-text);
  text-wrap: pretty;
  margin-bottom: 36px;
  max-width: 720px;
}

.hero-diagnosis { max-width: 720px; }

.hero-diagnosis p {
  font-size: 1.125rem;
  line-height: 1.68;
  text-wrap: pretty;
}

.hero-diagnosis p + p { margin-top: 22px; }

.hero-diagnosis-close {
  margin-top: 24px !important;
}

/* =================================================================
   HERO GRID (portrait in hero)
   Desktop: 2-col (content 1fr | portrait 300px), centre-aligned.
   ≤768px: narrow portrait column to 240px.
   ≤640px: stacked, portrait above H1 via order:-1, 3/2 crop to
   limit height and keep H1 + lead + CTA in the first viewport.
   border-radius: 999px gives a tall oval at desktop (300×400px) and
   a horizontal capsule at mobile (335×223px) — same shape as About.
   ================================================================= */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: center;
}

.hero-portrait {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 999px;
}

/* =================================================================
   SERVICE PILL INDEX (right col of hero body)
   ================================================================= */
.svc-index .label { margin-bottom: 18px; }

.svc-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 12px 18px 12px 20px;
  min-height: 48px;
  font-family: 'Chillax', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 8px;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.svc-pill:hover, .svc-pill:active {
  background: var(--cobalt);
  color: var(--cream);
  border-color: var(--cobalt);
}

.svc-price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ochre-text);
  flex-shrink: 0;
  margin-left: 14px;
  transition: color 200ms ease;
}

.svc-pill:hover .svc-price,
.svc-pill:active .svc-price { color: rgba(250,248,244,0.6); }

/* =================================================================
   WHO GRID (label col | body col inside .who-section)
   ================================================================= */
.who-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.who-grid .label        { margin-bottom: 20px; }
.who-grid .section-head { font-size: 1.875rem; }

.who-body p          { font-size: 1.0625rem; line-height: 1.68; text-wrap: pretty; }
.who-body p + p      { margin-top: 24px; }

/* =================================================================
   DIFF SECTION (What I do / How I work)
   2-col: copy | capability pill stack. ≤768px: 1-col.
   ================================================================= */
/* ── ENQUIRY NUDGE (inside diagnosis band, below last sentence) ── */
.diag-nudge { margin-top: 28px; }

.diff-section { padding: calc(var(--sv) + 24px) 0; }

.diff-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.diff-paras p        { font-size: 1.0625rem; line-height: 1.68; text-wrap: pretty; }
.diff-paras p + p    { margin-top: 22px; }

/* =================================================================
   CAPABILITY PILL STACK
   ================================================================= */
.stack-label { margin-bottom: 18px; }

.stack-pill {
  display: flex;
  align-items: center;
  border: 1px solid rgba(123,127,212,0.3);
  border-radius: 100px;
  padding: 12px 20px;
  min-height: 44px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--periwinkle-text);
  text-decoration: none;
  margin-bottom: 8px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  cursor: pointer;
}

.stack-pill:hover, .stack-pill:active, .stack-pill-active {
  background: var(--cobalt);
  color: var(--cream);
  border-color: var(--cobalt);
}

/* =================================================================
   ABOUT BRIDGE (copy | portrait)
   ================================================================= */
.about-section { padding: var(--sv) 0 20px; }

.about-bridge-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 72px;
  align-items: center;
}

.about-bridge-grid .label { margin-bottom: 20px; }

.about-portrait-wrap { display: flex; justify-content: flex-end; }

.about-portrait {
  width: 300px;
  height: 300px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: block;
}

/* =================================================================
   PROOF CARDS (full-bleed 2-col)
   ================================================================= */
.proof-section          { padding: 20px 0 clamp(24px, 3vw, 36px); }
.proof-section .label   { margin-bottom: 40px; }

.proof-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1440px;
  margin: 0 auto;
}

.proof-card {
  padding: 52px 52px 48px;
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.proof-card-cobalt     { background: var(--cobalt); }
.proof-card-periwinkle { background: var(--periwinkle); }

.card-tag {
  position: absolute;
  top: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  padding: 7px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.card-tag-cobalt     { background: rgba(250,248,244,0.18); color: rgba(250,248,244,0.8); }
.card-tag-periwinkle { background: rgba(250,248,244,0.18); color: rgba(250,248,244,0.8); }

.card-year {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 24px;
}

.proof-card-cobalt .card-year,
.proof-card-periwinkle .card-year { color: rgba(250,248,244,0.72); }

.proof-card h3 {
  font-family: 'Chillax', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 14px;
}

.proof-card p             { font-size: 0.969rem; line-height: 1.6; margin-bottom: 16px; }
.proof-card p + p         { margin-top: 0; }
.proof-card p:last-of-type { margin-bottom: 0; }

.proof-card-cobalt h3,
.proof-card-cobalt p       { color: var(--cream); }
.proof-card-periwinkle h3  { color: var(--cream); }
.proof-card-periwinkle p   { color: var(--cream); }

.card-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: 13rem;
  border-radius: 100px;
  padding: 11px 22px;
  min-height: 44px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 40px;
  transition: background 200ms ease, color 200ms ease;
  border: 1px solid transparent;
}

.proof-card-cobalt .card-link,
.proof-card-periwinkle .card-link {
  color: var(--cobalt);
  background: var(--cream);
  border-color: var(--cream);
}

.proof-card-cobalt .card-link:hover,
.proof-card-cobalt .card-link:active,
.proof-card-periwinkle .card-link:hover,
.proof-card-periwinkle .card-link:active { background: rgba(250,248,244,0.85); }

/* =================================================================
   CTA SECTION (homepage override)
   site.css uses clamp padding; homepage uses --sv for tighter spacing.
   ================================================================= */
.cta-section                { padding: var(--sv) 0; }
.cta-left .section-head     { font-size: 2.5rem; }

/* =================================================================
   SECTION RULE
   ================================================================= */
.section-rule {
  display: flex;
  justify-content: center;
  padding: clamp(40px, 5vw, 64px) 0;
}

.section-rule::after {
  content: '';
  display: block;
  width: 200px;
  height: 2px;
  background: var(--ochre);
  border-radius: 1px;
}

/* =================================================================
   MOBILE UTILITY CLASSES
   ================================================================= */
.mobile-br  { display: none; }
.mobile-amp { display: none; }
.diag-br    { display: none; }
.h1-br      { display: none; }

@media (min-width: 769px) { .diag-br { display: block; } }
@media (min-width: 641px) and (max-width: 900px) { .h1-br { display: block; } }

/* =================================================================
   FOCUS STATES (homepage-specific additions)
   ================================================================= */
.svc-pill:focus-visible,
.stack-pill:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 100px;
}

.proof-card-cobalt .card-link:focus-visible,
.proof-card-periwinkle .card-link:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 100px;
}

/* =================================================================
   RESPONSIVE — Homepage-specific breakpoints
   ================================================================= */

@media (max-width: 900px) {
  .hero-h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); }
}

@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr 240px; gap: 40px; }

  .hero-body       { padding-top: 28px; }
  .hero-intro      { margin-bottom: 36px; }
  .hero-diagnosis p { font-size: 1rem; }

  .svc-pill { width: 100%; white-space: normal; }

  .who-grid          { grid-template-columns: 1fr; gap: 16px; }
  .diff-body-grid    { grid-template-columns: 1fr; gap: 40px; }
  .stack-pill        { width: 100%; }

  .about-bridge-grid { grid-template-columns: 1fr 160px; gap: 40px; }
  .about-portrait    { width: 160px; height: 160px; }

  .proof-cards { grid-template-columns: 1fr; }

  .proof-card {
    grid-row: auto;
    padding: 36px 28px 32px;
    min-height: unset;
  }

  .proof-card h3 { margin-bottom: 16px; }
  .proof-card p  { margin-bottom: 28px; flex: 1; }

  .card-link { align-self: flex-start; margin-top: 0; }

  .cta-left .section-head { font-size: clamp(1.75rem, 6vw, 2.5rem); }
}

@media (max-width: 640px) {
  .hero-h1 {
    font-size: clamp(2rem, 9vw, 2.75rem);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
  }

  .hero-grid { display: flex; flex-direction: column; gap: 20px; }
  .hero-portrait-wrap { order: -1; }
  .hero-portrait { aspect-ratio: 3/2; object-position: center; }

  .hero-body { padding-top: 8px; }
  .hero-lead { font-size: 1.125rem; margin-bottom: 28px; }

  .who-body p   { font-size: 1rem; }
  .diff-paras p { font-size: 1rem; }

  .pull-quote p { font-size: 1.125rem; }
  .pull-quote   { padding-left: 20px; }

  .proof-section .section-head { font-size: clamp(1.375rem, 6vw, 1.875rem); }
  .cta-left .section-head      { font-size: 1.5rem; }
  .cta-grid                    { gap: 20px; }

  .about-bridge-grid   { grid-template-columns: 1fr; gap: 36px; }
  .about-portrait-wrap { justify-content: flex-start; }
  .about-portrait      { width: 200px; height: 200px; }

  .mobile-br  { display: block; }
  .mobile-amp { display: inline; }
  .mobile-and { display: none; }
}

@media (max-width: 480px) {
  .proof-card { padding: 36px 24px 32px; }
  .card-link  { margin-top: 24px; }

  .card-tag {
    top: 16px;
    right: 16px;
    font-size: 0.5625rem;
    padding: 5px 12px;
  }
}