* { box-sizing: border-box }
body { margin: 0; background: #f8f7f4; color: #1a1a1a; font: 17px/1.65 Inter, sans-serif }
a { color: #1c2b4a }
.w { width: min(1040px, calc(100% - 40px)); margin: auto }
.nav { position: sticky; top: 0; z-index: 5; background: #fffffff2; border-bottom: 1px solid #e0ddd8; backdrop-filter: blur(8px) }
.navin { height: 58px; display: flex; align-items: center; gap: 18px }
.logo { font: 18px 'Playfair Display', serif; text-decoration: none }
.nav span { flex: 1 }
.nav a { font-size: 14px; text-decoration: none }
.nav .start { background: #1c2b4a; color: white; padding: 8px 13px; border-radius: 4px }
section { padding: 78px 0; border-bottom: 1px solid #e0ddd8 }
h1, h2 { font-family: 'Playfair Display', serif; font-weight: 400; color: #1c2b4a; text-wrap: balance }
h1 { font-size: clamp(42px, 6vw, 72px); line-height: 1.03; letter-spacing: -.03em; max-width: 900px; margin: 18px 0 26px }
h2 { font-size: clamp(30px, 4vw, 45px); line-height: 1.12; margin: 0 0 24px }
h3 { color: #1c2b4a; line-height: 1.3 }
.tag { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: #8a8a8a }
.hero {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  display: grid;
  align-items: center;
  padding: 110px 0 88px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(9, 14, 18, .94) 0%, rgba(9, 14, 18, .72) 48%, rgba(9, 14, 18, .14) 100%),
    url("/assets/bg/workspace-strategy.webp") center / cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  right: min(6vw, 92px);
  top: 170px;
  width: min(30vw, 320px);
  height: 220px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    linear-gradient(90deg, transparent 0 28%, rgba(221,84,47,.68) 28% 31%, transparent 31% 59%, rgba(111,129,122,.7) 59% 62%, transparent 62%);
  box-shadow: 0 30px 80px rgba(0,0,0,.24);
  opacity: .62;
}
.hero .w { position: relative; z-index: 1 }
.hero h1, .hero h2 { color: #fff }
.hero h1 { max-width: 760px }
.hero .tag { color: #e9ded0 }
.hero p { font-size: 20px; color: #f0e8da; max-width: 720px }
.acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px }
.btn { display: inline-flex; min-height: 48px; align-items: center; padding: 12px 20px; background: #1c2b4a; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 500; white-space: normal; text-align: center }
.btn.alt { background: transparent; color: #1c2b4a; border: 1px solid #1c2b4a }
.hero .btn.alt, .final .btn.alt { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.48) }
.minor { display: inline-block; margin-top: 18px; color: #f0e8da }
.head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; margin-bottom: 40px }
.head p, .card p, .box p, .author p { color: #5a5a5a }
.route-band {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(248,247,244,.94), rgba(248,247,244,.88)),
    url("/assets/bg/strategy-room.webp") center / cover no-repeat;
}
.route-band::before {
  content: "";
  position: absolute;
  inset: 54px max(24px, calc((100vw - 1040px) / 2)) auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(221,84,47,.7), rgba(111,129,122,.5), transparent);
}
.route-band .w { position: relative; z-index: 1 }
.route { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,.82); border: 1px solid rgba(216,213,207,.86); box-shadow: 0 24px 70px rgba(32, 42, 48, .1); backdrop-filter: blur(10px) }
.step { padding: 23px 20px; border-right: 1px solid #d8d5cf; min-height: 330px; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,250,240,.72)) }
.step:last-child { border: 0 }
.step p { font-size: 15px; color: #5a5a5a }
.proof { margin-top: auto; padding-top: 13px; border-top: 1px solid #e0ddd8; font-size: 13px }
.depth, .author { background: #fff }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.card { padding: 25px 22px; border: 1px solid #d8d5cf; display: flex; flex-direction: column }
.card:first-child { background: #f2f0eb }
.card h3 { font: 27px/1.15 'Playfair Display', serif }
.card ul { padding-left: 18px; color: #5a5a5a; font-size: 15px }
.card .btn { margin-top: auto }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px }
.boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.box { background: #fff; border: 1px solid #d8d5cf; padding: 22px }
.evidence { background: #1c2b4a; color: #fff }
.evidence h2, .evidence h3 { color: #fff }
.egrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #ffffff33; margin-top: 35px }
.egrid > div { padding: 24px; background: #1c2b4a }
.egrid p { color: #ffffffb8; font-size: 15px }
.authorin { display: grid; grid-template-columns: 140px 1fr; gap: 30px; align-items: center; max-width: 760px }
.author img { width: 140px; height: 140px; object-fit: cover; border-radius: 50% }
.materials { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.materials a { padding: 25px; background: #fff; border: 1px solid #d8d5cf; text-decoration: none }
.materials h3 { font: 25px 'Playfair Display', serif }
.materials p { color: #5a5a5a }
.final {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(23,32,38,.86), rgba(23,32,38,.78)),
    url("/assets/bg/advisory-session.webp") center / cover no-repeat;
}
.final h2 { color: #fff }
.final .acts { justify-content: center }
.final .minor { color: #f0e8da }
footer { padding: 32px 0; background: #fff; font-size: 14px }
@media (max-width: 820px) {
  .route { grid-template-columns: 1fr 1fr }
  .step { border-bottom: 1px solid #d8d5cf }
  .cards, .egrid { grid-template-columns: 1fr }
  .head, .split { grid-template-columns: 1fr; gap: 18px }
}
@media (max-width: 580px) {
  html, body { overflow-x: hidden }
  body { font-size: 16px }
  .w { width: min(330px, calc(100% - 28px)) }
  .navin { gap: 10px; width: min(330px, calc(100% - 28px)) }
  .logo { min-width: 0 }
  .nav .start { display: none }
  section { padding: 56px 0 }
  .hero { min-height: auto; padding: 72px 0 60px; background-position: 58% center }
  .hero::after { display: none }
  .hero .w { margin-left: 14px }
  .navin > a:nth-of-type(2), .navin > a:nth-of-type(3) { display: none }
  h1 { font-size: 26px; line-height: 1.16; letter-spacing: 0 }
  .hero p { font-size: 16px; line-height: 1.58 }
  .hero h1, .hero p, .hero .tag, .head p, .card p, .box p, .materials p { max-width: 100%; overflow-wrap: break-word }
  .btn { padding-left: 14px; padding-right: 14px }
  .route, .boxes, .materials, .authorin { grid-template-columns: 1fr }
  .step { min-height: 0; border-right: 0 }
  .acts .btn { width: 100%; justify-content: center }
  .author img { width: 110px; height: 110px }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }