/* ==========================================================================
   EK Studio — About page-specific styles
   Extends styles.css (shared tokens, header, footer, buttons, final CTA, seal).
   Concise editorial treatment — no galleries, packages, or device mockups.
   ========================================================================== */

/* ---------- 2. HERO ---------- */
.ab-hero{padding-block:clamp(44px,6vw,88px) clamp(52px,7vw,96px)}
.ab-hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;
}
.ab-hero-copy{min-width:0}
.ab-hero-copy h1{margin:0 0 22px}
.ab-hero-copy h1 em{font-style:italic;color:var(--burgundy)}
.ab-hero .lead{font-size:1.2rem;line-height:1.55;color:var(--body);max-width:46ch}
.ab-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* founder portrait plate — editorial, not a device mockup */
.ab-portrait{position:relative;min-width:0;margin:0;padding-top:14px}
.ab-portrait-index{
  position:absolute;top:-4px;right:0;z-index:2;
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-strong);
}
.ab-portrait-mono{
  position:absolute;top:-14px;left:-6px;z-index:0;
  font-family:var(--serif);font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--burgundy);
  opacity:.12;letter-spacing:-.02em;pointer-events:none;
}
.ab-portrait-plate{
  position:relative;z-index:1;background:var(--surface);
  border:1px solid var(--divider-strong);padding:12px;
  box-shadow:0 22px 48px -24px rgba(36,24,19,.4);
  /* fine editorial grid behind the matted image */
  background-image:
    linear-gradient(var(--divider) 1px,transparent 1px),
    linear-gradient(90deg,var(--divider) 1px,transparent 1px);
  background-size:26px 26px;background-position:12px 12px;
}
.ab-portrait-plate::before{
  content:"";position:absolute;left:12px;right:12px;top:0;height:3px;background:var(--burgundy);
}
.ab-portrait-plate img{
  display:block;width:100%;height:auto;position:relative;
}
.ab-portrait-cap{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--divider);
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-strong);
  display:flex;align-items:center;gap:10px;
}
.ab-portrait-cap::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none}

/* ---------- 3. THE STUDIO STORY ---------- */
.ab-story-grid{display:grid;grid-template-columns:1.55fr .9fr;gap:clamp(32px,5vw,72px);align-items:start}
.ab-story-main{min-width:0}
.ab-story-p{font-size:1.12rem;line-height:1.65;color:var(--body);max-width:58ch;margin-top:18px}
.ab-signals{min-width:0;border-top:1.5px solid var(--burgundy)}
.ab-signals li{
  display:flex;align-items:baseline;gap:14px;padding:20px 0;border-bottom:1px solid var(--divider);
  font-family:var(--serif);font-size:1.4rem;line-height:1.15;letter-spacing:-.01em;color:var(--espresso);
}
.ab-signal-num{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;color:var(--burgundy);flex:none}

/* ---------- 4. FOUNDER PERSPECTIVE ---------- */
.ab-founder-head{max-width:52ch}
.ab-founder-head h2 em{font-style:italic;color:var(--burgundy)}
.ab-founder-copy{
  margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);max-width:none;
}
.ab-founder-copy p{font-size:1.08rem;line-height:1.6;color:var(--body);min-width:0}
.ab-guide{
  margin-top:clamp(36px,4vw,52px);display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--divider-strong);
}
.ab-guide-item{
  min-width:0;padding:26px 22px 26px 0;
  display:flex;flex-direction:column;gap:14px;
  border-left:1px solid var(--divider);
}
.ab-guide-item:first-child{border-left:0}
.ab-guide-num{font-family:var(--mono);font-size:.85rem;font-weight:600;letter-spacing:.14em;color:var(--signal)}
.ab-guide-text{font-family:var(--serif);font-size:1.3rem;line-height:1.15;letter-spacing:-.01em;color:var(--espresso)}

/* ---------- 5. PHILOSOPHY (deep burgundy) ---------- */
.ab-philosophy{
  position:relative;overflow:hidden;background:var(--burgundy);color:var(--cream);
  padding-block:clamp(72px,10vw,132px);border-top:1px solid var(--divider);
}
.ab-philosophy::before{
  content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background-image:
    linear-gradient(rgba(243,234,219,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,234,219,.07) 1px,transparent 1px);
  background-size:52px 52px;
}
.ab-philosophy-inner{position:relative;max-width:920px}
/* gold fails AA on burgundy for small text, so the eyebrow uses cream (accessible) */
.ab-philosophy-eyebrow{color:var(--cream)}
.ab-philosophy-eyebrow::before{background:var(--signal-soft)}
.ab-philosophy-statement{
  font-family:var(--serif);font-weight:400;color:var(--cream);
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.12;letter-spacing:-.02em;margin:0;
  text-wrap:balance;
}
.ab-philosophy-statement em{font-style:italic;color:var(--signal-soft)}

/* ---------- 6. WHO EK STUDIO SERVES ---------- */
.ab-serve-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.ab-serve-grid .section-head{min-width:0}
.ab-serve-list{min-width:0;border-top:1.5px solid var(--burgundy)}
.ab-serve-list li{
  display:flex;align-items:baseline;gap:18px;padding:22px 0;border-bottom:1px solid var(--divider);
  font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.15;letter-spacing:-.01em;color:var(--espresso);
}
.ab-serve-num{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.12em;color:var(--muted-strong);flex:none}

/* ---------- 7. CLOSING CTA (extends shared .final-cta) ---------- */
.final-cta .ab-final-note{
  margin:22px auto 0;max-width:56ch;
  font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.06em;
  color:var(--cream-mute);line-height:1.6;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .ab-founder-copy{grid-template-columns:1fr;gap:16px}
  .ab-guide{grid-template-columns:1fr 1fr}
  .ab-guide-item{padding:24px 20px 24px 0}
  .ab-guide-item:nth-child(odd){border-left:0}
  .ab-guide-item:nth-child(3),.ab-guide-item:nth-child(4){border-top:1px solid var(--divider)}
}

@media (max-width:768px){
  /* hero: copy + CTA before the portrait */
  .ab-hero-grid{grid-template-columns:1fr;gap:40px}
  .ab-hero-actions{flex-direction:column;align-items:stretch}
  .ab-hero-actions .btn{width:100%}
  .ab-portrait{max-width:460px;width:100%;margin-inline:auto}

  .ab-story-grid{grid-template-columns:1fr;gap:32px}
  .ab-signals{margin-top:4px}

  .ab-serve-grid{grid-template-columns:1fr;gap:28px}
}

@media (max-width:480px){
  .ab-guide{grid-template-columns:1fr;border-top:0}
  .ab-guide-item{border-left:0;border-top:1px solid var(--divider);padding:20px 0}
  .ab-guide-item:first-child{border-top:0}
  .ab-portrait-mono{display:none}
}