/* ==========================================================================
   AI STRATEGY CONSULTING — page-specific design system.
   Editorial "roadmap" visual language: animated milestone-path hero,
   alternating feature rows, milestone-path approach, masonry results wall,
   asymmetric case-study gallery, pillar list. Distinct from every other AI
   page template on this site (ai-hero, bento/timeline, dashboard, scan-
   line, console, network-graph, blueprint). Loaded after styles.css/
   glass-effects.css — scoped to this page only.
   ========================================================================== */

:root {
  --strat-ink: #0c0c0e;
  --strat-accent: #FA9800;
  --strat-cream: #faf6ef;
  --strat-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Hero: split, roadmap path graphic ---------- */
.strat-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 40px 100px;
  background: var(--strat-cream);
}
.strat-hero__inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 0.9fr; gap: 60px; align-items: center; }
.strat-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 24px;
  padding: 7px 15px 7px 12px; border: 1px solid rgba(12,12,14,0.14); border-radius: 999px;
  background: rgba(250,152,0,0.08); font-size: 11.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: #7a4a00;
}
.strat-hero__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--strat-accent); }
.strat-hero__title { margin: 0 0 24px; font-size: 58px; line-height: 1.05; font-weight: 800; letter-spacing: -2.2px; color: var(--strat-ink); }
.strat-hero__title span { color: var(--strat-accent); }
.strat-hero__desc { margin: 0 0 32px; font-size: 16.5px; line-height: 1.75; color: var(--gray-600); max-width: 520px; }
.strat-hero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.strat-hero__stats { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.strat-hero__stat b { display: block; font-size: 30px; font-weight: 800; color: var(--strat-ink); letter-spacing: -1px; }
.strat-hero__stat span { font-size: 12.5px; color: var(--gray-600); }

/* Roadmap path graphic */
.strat-path { position: relative; height: 460px; }
.strat-path svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.strat-path__line { fill: none; stroke: rgba(250,152,0,0.35); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.strat-path__node {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(12,12,14,0.1); box-shadow: 0 16px 34px -18px rgba(12,12,14,0.25);
  font-size: 12.5px; font-weight: 700; color: var(--strat-ink); transition: transform 0.3s var(--strat-ease);
}
.strat-path__node:hover { transform: translateY(-4px); }
.strat-path__dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, #ffcf8a, var(--strat-accent)); color: #fff; font-size: 11px; font-weight: 800; }
.strat-path__n1 { top: 4%; left: 2%; }
.strat-path__n2 { top: 30%; left: 30%; }
.strat-path__n3 { top: 14%; left: 58%; }
.strat-path__n4 { top: 46%; left: 68%; }
.strat-path__flag {
  position: absolute; top: 2%; right: 2%; width: 54px; height: 54px; border-radius: 16px;
  background: var(--strat-ink); color: var(--strat-accent); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 40px -18px rgba(12,12,14,0.4);
}
@media (max-width: 1000px) {
  .strat-hero__inner { grid-template-columns: 1fr; }
  .strat-hero__title { font-size: 40px; letter-spacing: -1.4px; }
  .strat-path { height: 320px; }
}
@media (max-width: 900px) { .strat-hero { padding: 130px 20px 60px; } }

/* ---------- Statement ---------- */
.strat-statement { padding: 90px 40px; background: #fff; }
.strat-statement__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.strat-statement p.kicker { display: inline-flex; align-items: center; gap: 8px; justify-content: center; width: 100%; margin: 0 0 16px; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--strat-accent); }
.strat-statement h2 { margin: 0 0 18px; font-size: 32px; line-height: 1.3; font-weight: 800; letter-spacing: -1px; color: var(--strat-ink); }
.strat-statement p.body { margin: 0; font-size: 16px; line-height: 1.8; color: var(--gray-600); }

/* ---------- Benefits: accent-number row ---------- */
.strat-benefits { padding: 0 40px 100px; max-width: var(--max-width); margin: 0 auto; }
.strat-benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.strat-benefit { padding: 36px 28px; background: #fff; transition: background 0.3s ease; }
.strat-benefit:hover { background: var(--strat-cream); }
.strat-benefit__num { display: block; font-size: 15px; font-weight: 800; color: var(--strat-accent); margin-bottom: 20px; }
.strat-benefit h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--strat-ink); }
.strat-benefit p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--gray-600); }
@media (max-width: 900px) { .strat-benefits__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .strat-benefits__grid { grid-template-columns: 1fr; } }

/* ---------- Services: alternating editorial rows ---------- */
.strat-services { padding: 90px 40px; background: var(--strat-cream); }
.strat-services__head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.strat-services__head p.kicker { display: inline-flex; align-items: center; gap: 8px; justify-content: center; width: 100%; margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--strat-accent); }
.strat-services__head h2 { margin: 0 0 12px; font-size: 32px; font-weight: 800; letter-spacing: -1px; color: var(--strat-ink); }
.strat-services__head p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--gray-600); }
.strat-services__list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; }
.strat-service-row { display: grid; grid-template-columns: 90px 1fr; gap: 26px; align-items: center; padding: 28px 0; border-bottom: 1px solid rgba(12,12,14,0.1); }
.strat-service-row:first-child { padding-top: 0; }
.strat-service-row:last-child { border-bottom: none; padding-bottom: 0; }
.strat-service-row__num { font-size: 34px; font-weight: 800; letter-spacing: -1.5px; color: rgba(250,152,0,0.3); }
.strat-service-row__content h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--strat-ink); }
.strat-service-row__content p { margin: 0; font-size: 14.3px; line-height: 1.7; color: var(--gray-600); }
@media (max-width: 640px) { .strat-service-row { grid-template-columns: 50px 1fr; gap: 14px; } .strat-service-row__num { font-size: 24px; } }

/* ---------- Approach: milestone path ---------- */
.strat-approach { padding: 100px 40px; max-width: var(--max-width); margin: 0 auto; }
.strat-approach__head { max-width: 640px; margin: 0 0 56px; }
.strat-approach__head p.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--strat-accent); }
.strat-approach__head h2 { margin: 0 0 12px; font-size: 32px; font-weight: 800; letter-spacing: -1px; color: var(--strat-ink); }
.strat-approach__head p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--gray-600); }
.strat-milestones { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.strat-milestones::before {
  content: ""; position: absolute; top: 27px; left: 6%; right: 6%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--strat-accent) 0, var(--strat-accent) 6px, transparent 6px, transparent 13px);
  opacity: 0.4; z-index: 0;
}
.strat-milestone { position: relative; z-index: 1; }
.strat-milestone__dot {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
  background: #fff; border: 2px solid var(--line); color: var(--strat-ink); font-size: 15px; font-weight: 800;
  transition: border-color 0.3s var(--strat-ease), background 0.3s var(--strat-ease), color 0.3s var(--strat-ease), transform 0.3s var(--strat-ease);
}
.strat-milestone:hover .strat-milestone__dot { border-color: var(--strat-accent); background: var(--strat-accent); color: #fff; transform: translateY(-4px); }
.strat-milestone h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--strat-ink); }
.strat-milestone p { margin: 0; font-size: 13.6px; line-height: 1.65; color: var(--gray-600); }
@media (max-width: 900px) {
  .strat-milestones { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .strat-milestones::before { display: none; }
}
@media (max-width: 560px) { .strat-milestones { grid-template-columns: 1fr; } }

/* ---------- Differentiators: pillar list ---------- */
.strat-pillars { padding: 90px 40px; background: var(--strat-ink); }
.strat-pillars__head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.strat-pillars__head p.kicker { display: inline-flex; align-items: center; gap: 8px; justify-content: center; width: 100%; margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--strat-accent); }
.strat-pillars__head h2 { margin: 0 0 12px; font-size: 32px; font-weight: 800; letter-spacing: -1px; color: #fff; }
.strat-pillars__head p { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.55); }
.strat-pillars__list { max-width: 880px; margin: 0 auto; }
.strat-pillar { display: flex; gap: 22px; padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,0.1); align-items: flex-start; }
.strat-pillar:first-child { padding-top: 0; }
.strat-pillar:last-child { border-bottom: none; padding-bottom: 0; }
.strat-pillar__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(155deg, rgba(250,152,0,0.28), rgba(250,152,0,0.08)); color: var(--strat-accent); }
.strat-pillar h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #fff; }
.strat-pillar p { margin: 0; font-size: 13.8px; line-height: 1.65; color: rgba(255,255,255,0.55); }

/* ---------- Results wall: masonry stat cards ---------- */
.strat-results { padding: 100px 40px; max-width: var(--max-width); margin: 0 auto; }
.strat-results__head { max-width: 640px; margin: 0 0 44px; }
.strat-results__head p.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--strat-accent); }
.strat-results__head h2 { margin: 0 0 12px; font-size: 32px; font-weight: 800; letter-spacing: -1px; color: var(--strat-ink); }
.strat-results__head p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--gray-600); }
.strat-results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.strat-result { padding: 30px 26px; border-radius: 18px; background: linear-gradient(160deg, #fffaf2 0%, #fff4e3 100%); border: 1px solid rgba(250,152,0,0.22); }
.strat-result b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -1.4px; color: var(--strat-ink); margin-bottom: 10px; }
.strat-result p { margin: 0; font-size: 13.3px; line-height: 1.6; color: #6b5638; }
@media (max-width: 900px) { .strat-results__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .strat-results__grid { grid-template-columns: 1fr; } }

/* ---------- Case study gallery: asymmetric grid ---------- */
.strat-cases { padding: 90px 40px; background: var(--strat-cream); }
.strat-cases__head { max-width: 640px; margin: 0 0 44px; }
.strat-cases__head p.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--strat-accent); }
.strat-cases__head h2 { margin: 0 0 12px; font-size: 32px; font-weight: 800; letter-spacing: -1px; color: var(--strat-ink); }
.strat-cases__head p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--gray-600); }
.strat-cases__grid { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.strat-case { padding: 26px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: transform 0.3s var(--strat-ease), box-shadow 0.3s var(--strat-ease); }
.strat-case:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -28px rgba(12,12,14,0.25); }
.strat-case--wide { grid-column: span 3; }
.strat-case--narrow { grid-column: span 2; }
.strat-case__tag { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: rgba(250,152,0,0.14); color: #a15c00; font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 14px; }
.strat-case h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--strat-ink); line-height: 1.35; }
.strat-case p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--gray-600); }
.strat-case__outcomes { display: flex; flex-direction: column; gap: 6px; }
.strat-case__outcome { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--strat-ink); }
.strat-case__outcome::before { content: "\2192"; color: var(--strat-accent); font-weight: 800; }
@media (max-width: 1000px) {
  .strat-cases__grid { grid-template-columns: repeat(2, 1fr); }
  .strat-case--wide, .strat-case--narrow { grid-column: span 1; }
}