/* This page alone extends the shared proposal typography and palette. */
.strategy-heading { max-width: 1060px; margin-bottom: 6.5rem; }
.strategy-heading h1 { max-width: 1030px; }
.strategy-heading .page-intro { max-width: 610px; font-size: 1.125rem; }
.strategy-page.detail-enter .detail-heading + * { animation: none; }
.strategy-page .strategy-label {
  font: 400 .875rem/1.5 var(--body);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 2rem;
}
.pillar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.pillar-card {
  min-width: 0;
  padding: clamp(1.75rem, 3.5vw, 3.5rem);
  border: 1px solid rgb(211 174 127 / .25);
  background: #0e0e0e;
}
.pillar-number {
  display: block;
  margin-bottom: 2.8rem;
  font: 500 clamp(4.5rem, 7vw, 6.8rem)/.85 var(--display);
  color: var(--accent);
  letter-spacing: -.055em;
}
.pillar-card h3 {
  max-width: 350px;
  margin: 0 0 1.1rem;
  font: 500 clamp(2rem, 3.2vw, 3rem)/1.08 var(--display);
  letter-spacing: -.03em;
}
.pillar-card p { max-width: 440px; margin-bottom: 0; color: rgb(255 255 255 / .76); }
.strategy-positioning { padding: 1rem 0 clamp(6rem, 10vw, 9rem); text-align: center; }
.strategy-pillars { margin-bottom: clamp(5rem, 9vw, 8rem); }
.strategy-page .positioning-statement {
  font-size: clamp(3.4rem, 7.8vw, 7.2rem);
  line-height: .99;
  letter-spacing: -.045em;
  margin: 3rem 0 5rem;
}
.statement-mask { display: block; overflow: clip; padding: .07em .1em; margin: -.07em -.1em; }
.statement-mask > span { display: block; }
.statement-mask--accent { color: var(--accent); font-style: italic; }
.positioning-objective { columns: 2; column-gap: 4rem; text-align: left; max-width: 1000px; margin: 0 auto; color: rgb(255 255 255 / .8); }
.strategy-phases { padding: 5rem 0 6rem; border-top: 1px solid rgb(255 255 255 / .18); }
.strategy-page .phases-heading { font-size: clamp(3.6rem, 6vw, 5.5rem); margin-bottom: 4rem; }
.phase-diagram { --lane-label: 195px; --lane-gap: 2.5rem; position: relative; }
.phase-gridlines {
  position: absolute;
  inset: 0 0 0 calc(var(--lane-label) + var(--lane-gap));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
}
.phase-gridlines span { border-left: 1px solid rgb(211 174 127 / .1); }
.phase-gridlines span:last-child { border-right: 1px solid rgb(211 174 127 / .1); }
.phase-axis, .phase-lane { position: relative; }
.phase-axis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-left: calc(var(--lane-label) + var(--lane-gap));
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgb(211 174 127 / .4);
  color: var(--accent);
  font-size: .875rem;
  line-height: 1.5;
}
.phase-axis span { padding-inline: .3rem; text-align: center; }
.phase-lane {
  display: grid;
  grid-template-columns: var(--lane-label) minmax(0, 1fr);
  gap: var(--lane-gap);
  padding-top: 2.3rem;
}
.phase-lane h3 { font: 500 2.05rem/1.1 var(--display); letter-spacing: -.025em; margin: 0; padding-top: .3rem; }
.phase-content { min-width: 0; padding-bottom: 2rem; border-bottom: 1px solid rgb(255 255 255 / .1); }
.phase-track {
  height: 46px;
  position: relative;
  display: flex;
  align-items: center;
}
.phase-bar { display: block; width: 100%; height: 22px; transform-origin: left center; }
.phase-bar--foundation { width: 50%; background: var(--accent); }
.phase-bar--execution { background: #a98a63; }
.phase-bar--premium { border: 2px dotted var(--accent); }
.phase-milestone {
  position: absolute;
  top: 3px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--ink);
}
.phase-milestone img { display: block; width: 22px; height: 26px; object-fit: contain; }
.phase-milestone--end { left: calc(50% - 20px); }
.phase-milestone--start { left: -20px; }
.phase-content p { max-width: 720px; margin: .85rem 0 0; color: rgb(255 255 255 / .72); }
.strategy-phases .footnote { margin-left: calc(var(--lane-label, 195px) + 2.5rem); font-size: .875rem; max-width: 740px; }
.strategy-diagnosis { border-top: 1px solid rgb(255 255 255 / .18); }
.strategy-diagnosis .editorial-row { padding-block: 3rem; }

@media (max-width: 900px) {
  .strategy-heading { margin-bottom: 4.5rem; }
  .pillar-card { padding: 2rem; }
  .pillar-number { margin-bottom: 2rem; }
  .positioning-objective { column-gap: 2.5rem; }
  .phase-diagram { --lane-label: 155px; --lane-gap: 1.5rem; }
  .phase-lane h3 { font-size: 1.85rem; }
  .strategy-phases .footnote { margin-left: calc(155px + 1.5rem); }
}

@media (max-width: 600px) {
  .strategy-heading { margin-bottom: 4rem; }
  .strategy-heading h1 { font-size: clamp(2.8rem, 12.4vw, 4.1rem); }
  .strategy-page .strategy-label { font-size: .8125rem; margin-bottom: 1.6rem; }
  .pillar-grid { grid-template-columns: 1fr; gap: 1rem; }
  .pillar-card { padding: 2rem 1.5rem; }
  .pillar-number { font-size: 4.8rem; margin-bottom: 2rem; }
  .pillar-card h3 { font-size: 2.2rem; }
  .strategy-positioning { padding: 1rem 0 5rem; }
  .strategy-page .positioning-statement { font-size: clamp(2.65rem, 10.5vw, 4rem); margin: 2.5rem 0 3.5rem; }
  .positioning-objective { columns: 1; }
  .strategy-phases { padding-block: 3.5rem; }
  .strategy-page .phases-heading { font-size: 3.5rem; margin-bottom: 2.8rem; }
  .phase-axis { margin-left: 0; font-size: .8125rem; }
  .phase-gridlines { display: none; }
  .phase-lane { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 2rem; }
  .phase-lane h3 { font-size: 2rem; padding-top: 0; }
  .phase-track {
    background: repeating-linear-gradient(90deg, rgb(211 174 127 / .14) 0 1px, transparent 1px 25%);
    border-right: 1px solid rgb(211 174 127 / .14);
  }
  .phase-milestone { width: 34px; height: 34px; top: 6px; }
  .phase-milestone img { width: 18px; height: 22px; }
  .phase-milestone--end { left: calc(50% - 17px); }
  .phase-milestone--start { left: -17px; }
  .strategy-phases .footnote { margin: 1.8rem 0 0; font-size: .875rem; }
  .strategy-diagnosis .editorial-row { padding-block: 2rem; }
}