/* Growth Methods client-review refinements. */

/* Enlarge the wide source artwork so its cloud/dashboard composition continues
   through the right edge instead of ending in the source image's quiet margin. */
.growth-method-page > .page-hero {
  background:
    linear-gradient(90deg,rgba(241,246,255,.98) 0%,rgba(241,246,255,.88) 43%,rgba(241,246,255,.05) 76%),
    var(--hero-image) center / auto 124% no-repeat,
    #f1f6ff;
}

/* Split introduction: narrative on the left, photographic principles on the right. */
.growth-method-page > .page-hero + .section > .container {
  display:grid;
  grid-template-columns:minmax(300px,.76fr) minmax(560px,1.24fr);
  gap:72px;
  align-items:center;
}

.growth-method-page > .page-hero + .section .section-head {
  max-width:480px;
  margin:0;
  text-align:left;
}

.growth-method-page > .page-hero + .section .section-head p {
  margin-left:0;
}

.growth-method-page > .page-hero + .section .principle-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.growth-method-page > .page-hero + .section .principle {
  isolation:isolate;
  position:relative;
  min-height:190px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:30px 32px;
  border:0;
  border-radius:24px;
  color:#fff;
  background-position:center;
  background-size:cover;
  box-shadow:0 18px 42px rgba(30,58,96,.2);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease,background-size .7s ease;
}

.growth-method-page > .page-hero + .section .principle:nth-child(1) {
  background-image:url("assets/c5a-not-rating-sheet-v2.png");
  background-position:center 44%;
}

.growth-method-page > .page-hero + .section .principle:nth-child(2) {
  background-image:url("assets/c5a-not-fixed-funnel-v2.png");
  background-position:center 43%;
}

.growth-method-page > .page-hero + .section .principle:nth-child(3) {
  background-image:url("assets/c5a-work-sequence-v2.png");
  background-position:center 42%;
}

.growth-method-page > .page-hero + .section .principle::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(5,18,48,.93) 0%,rgba(8,29,72,.68) 48%,rgba(9,26,59,.12) 100%);
  transition:background .38s ease;
}

.growth-method-page > .page-hero + .section .principle::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:150px;
  height:150px;
  right:-92px;
  bottom:-94px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(255,255,255,.045),0 0 0 58px rgba(111,168,255,.035);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

.growth-method-page > .page-hero + .section .principle-icon {
  width:46px;
  height:46px;
  margin-bottom:22px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:14px;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.35),rgba(91,142,255,.2));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 12px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}

.growth-method-page > .page-hero + .section .principle h3 {
  position:relative;
  max-width:420px;
  color:#fff;
  font-size:24px;
  line-height:32px;
}

.growth-method-page > .page-hero + .section .principle p {
  position:relative;
  max-width:480px;
  margin:7px 0 0;
  color:rgba(255,255,255,.82);
  font-size:16px;
  line-height:26px;
}

.growth-method-page > .page-hero + .section .principle:hover {
  transform:translateY(-7px) scale(1.012);
  box-shadow:0 30px 58px rgba(30,58,96,.28);
}

.growth-method-page > .page-hero + .section .principle:hover::before {
  background:linear-gradient(90deg,rgba(5,18,48,.96) 0%,rgba(37,99,235,.61) 52%,rgba(9,26,59,.08) 100%);
}

.growth-method-page > .page-hero + .section .principle:hover::after {
  transform:translate(-16px,-12px) scale(1.08);
}

/* Five-stage explorer: continuous 3-second cycle with richer transitions. */
.growth-method-page #stages .stage-explorer {
  overflow:hidden;
  padding:0;
  border-color:rgba(159,192,255,.68);
  background:rgba(255,255,255,.9);
  box-shadow:0 22px 55px rgba(37,99,235,.14);
  backdrop-filter:blur(14px);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease;
}

.growth-method-page #stages .stage-explorer:hover {
  transform:translateY(-4px);
  box-shadow:0 30px 68px rgba(37,99,235,.19);
}

.growth-method-page #stages .stage-tab {
  position:relative;
  overflow:hidden;
  min-width:0;
  border:0;
  border-right:1px solid var(--neutral-200);
  border-radius:0;
  transition:color .28s ease,background .28s ease,border-color .28s ease,transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;
}

.growth-method-page #stages .stage-tabs {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  overflow:visible;
  padding:0;
  border-bottom:1px solid var(--neutral-200);
}

.growth-method-page #stages .stage-tab:last-child {
  border-right:0;
}

.growth-method-page #stages .stage-tab:hover {
  transform:none;
}

.growth-method-page #stages .stage-tab.is-active {
  transform:none;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-500)) left center / 0 100% no-repeat,linear-gradient(90deg,var(--brand-700),var(--brand-700)) center / 100% 100% no-repeat;
  box-shadow:none;
  animation:stage-tab-fill 3s linear forwards;
}

.growth-method-page #stages .stage-panel.is-active {
  animation:stage-panel-enter .62s cubic-bezier(.2,.8,.2,1) both;
}

.growth-method-page #stages .stage-panel {
  min-height:430px;
  grid-template-columns:minmax(240px,.82fr) repeat(2,minmax(0,1fr));
  gap:0;
  padding:0;
  border-radius:0;
}

.growth-method-page #stages .stage-panel-number {
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px 12px;
  background:linear-gradient(180deg,var(--brand-25),var(--brand-50));
}

.growth-method-page #stages .stage-panel-title {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:40px 28px;
  background:#fff;
}

.growth-method-page #stages .stage-panel-cell {
  position:relative;
  display:grid;
  min-height:230px;
  grid-template-columns:64px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  column-gap:18px;
  align-self:stretch;
  align-content:start;
  overflow:hidden;
  padding:140px 30px 40px;
  border:0;
  border-left:1px solid var(--neutral-200);
  border-radius:0;
  box-shadow:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;
}

.growth-method-page #stages .stage-panel-cell::before {
  content:"";
  grid-column:1;
  grid-row:1 / span 2;
  align-self:start;
  width:58px;
  height:58px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:17px;
  background-color:#2563eb;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M16 2.5A10.5 10.5 0 0 0 9.4 21.2V25h13.2v-3.8A10.5 10.5 0 0 0 16 2.5M11 27h10v2H11zm2 3h6v2h-6zm4-23 1.8 4.2L23 13l-4.2 1.8L17 19l-1.8-4.2L11 13l4.2-1.8z'/%3E%3C/svg%3E"),linear-gradient(145deg,#155eef,#53b1fd);
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  background-size:31px 31px,100% 100%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.68),inset 0 -10px 18px rgba(30,64,175,.16),0 12px 24px rgba(37,99,235,.24);
}

.growth-method-page #stages .stage-panel-cell::after {
  content:"";
  position:absolute;
  width:40px;
  height:13px;
  top:132px;
  left:37px;
  border-radius:50%;
  background:rgba(255,255,255,.38);
  filter:blur(3px);
  pointer-events:none;
}

.growth-method-page #stages .stage-panel-cell:last-child::before {
  background-color:#6938ef;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M4 5h19v22H4zM8 10h11v2.5H8zm0 5h8v2.5H8zm0 5h6v2.5H8zM22 18a7 7 0 1 1-4.95 2.05L19.2 22.2A4 4 0 1 0 22 21v3.5L17.5 20l4.5-4.5z'/%3E%3C/svg%3E"),linear-gradient(145deg,#6938ef,#b692f6);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.68),inset 0 -10px 18px rgba(67,46,255,.16),0 12px 24px rgba(107,92,246,.24);
}

.growth-method-page #stages .stage-panel-cell small,
.growth-method-page #stages .stage-panel-cell strong {
  grid-column:2;
}

.growth-method-page #stages .stage-panel-cell small {
  color:var(--brand-700);
  font-weight:800;
  letter-spacing:.01em;
}

.growth-method-page #stages .stage-panel-cell:last-child small {
  color:var(--ai-700);
}

.growth-method-page #stages .stage-panel-cell:hover {
  transform:none;
  border-color:var(--neutral-200);
  background:linear-gradient(145deg,var(--brand-25),var(--brand-50));
  box-shadow:inset 0 0 0 2px rgba(51,111,252,.08);
}

.growth-method-page #stages .stage-panel-cell:last-child:hover {
  background:linear-gradient(145deg,var(--ai-50),var(--ai-100));
}

/* Page-wide motion details, consistent with the homepage. */
.growth-method-page .reveal {
  transform:translate3d(0,38px,0);
  transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}

.growth-method-page .reveal.is-visible {
  transform:translate3d(0,0,0);
}

.growth-method-page > .page-hero + .section .principle:nth-child(2) { transition-delay:.08s; }
.growth-method-page > .page-hero + .section .principle:nth-child(3) { transition-delay:.16s; }

.growth-method-page .project-path-step {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1),background .28s ease,box-shadow .28s ease;
}

.growth-method-page .project-path.is-visible .project-path-step {
  opacity:1;
  transform:translateY(0);
}

.growth-method-page .project-path.is-visible .project-path-step:nth-child(2) { transition-delay:.08s; }
.growth-method-page .project-path.is-visible .project-path-step:nth-child(3) { transition-delay:.16s; }
.growth-method-page .project-path.is-visible .project-path-step:nth-child(4) { transition-delay:.24s; }

.growth-method-page .project-path-step:hover {
  transform:translateY(-7px);
}

.growth-method-page .project-path-step:hover .project-path-node {
  transform:translate(-50%,-7px) scale(1.08);
  box-shadow:0 18px 34px rgba(37,99,235,.28);
}

.growth-method-page .project-path-node,
.growth-method-page .decision-card,
.growth-method-page .inline-cta-actions .button {
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}

.growth-method-page .decision-card:hover {
  transform:translateY(-7px) rotate(-.35deg);
  box-shadow:0 28px 56px rgba(0,15,66,.28);
}

.growth-method-page .inline-cta-actions .button:hover {
  transform:translateY(-4px);
}

@keyframes stage-tab-fill {
  from { background-size:0 100%,100% 100%; }
  to { background-size:100% 100%,100% 100%; }
}

@keyframes stage-panel-enter {
  from { opacity:0; transform:translateY(24px) scale(.985); filter:blur(4px); }
  to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}

@media (max-width:1050px) {
  .growth-method-page > .page-hero + .section > .container {
    grid-template-columns:1fr;
    gap:42px;
  }

  .growth-method-page > .page-hero + .section .section-head {
    max-width:760px;
  }

  .growth-method-page > .page-hero + .section .principle-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .growth-method-page > .page-hero + .section .principle {
    min-height:310px;
    padding:26px;
  }

  .growth-method-page #stages .stage-panel-cell {
    min-height:210px;
  }

  .growth-method-page #stages .stage-panel {
    grid-template-columns:minmax(210px,.75fr) repeat(2,minmax(0,1fr));
  }

  .growth-method-page #stages .stage-panel-cell:last-child {
    grid-column:auto;
  }
}

@media (max-width:760px) {
  .growth-method-page > .page-hero + .section .principle-grid {
    grid-template-columns:1fr;
  }

  .growth-method-page > .page-hero + .section .principle {
    min-height:270px;
  }

  .growth-method-page #stages .stage-panel-cell {
    min-height:0;
    grid-template-columns:54px minmax(0,1fr);
    padding:122px 20px 22px;
  }

  .growth-method-page #stages .stage-tabs {
    display:flex;
    overflow-x:auto;
    scrollbar-width:thin;
  }

  .growth-method-page #stages .stage-tab {
    flex:0 0 auto;
    min-width:164px;
  }

  .growth-method-page #stages .stage-panel {
    grid-template-columns:1fr;
  }

  .growth-method-page #stages .stage-panel-number,
  .growth-method-page #stages .stage-panel-title,
  .growth-method-page #stages .stage-panel-cell,
  .growth-method-page #stages .stage-panel-cell:last-child {
    grid-column:auto;
    border-left:0;
    border-top:1px solid var(--neutral-200);
  }

  .growth-method-page #stages .stage-panel-number {
    justify-content:flex-start;
    padding:24px 22px 12px;
    border-top:0;
  }

  .growth-method-page #stages .stage-panel-title {
    padding:20px 22px 28px;
  }

  .growth-method-page #stages .stage-panel-cell::before {
    width:50px;
    height:50px;
    border-radius:15px;
    background-size:27px 27px,100% 100%;
  }

  .growth-method-page #stages .stage-panel-cell::after {
    width:34px;
    top:126px;
    left:29px;
  }

  .growth-method-page .project-path-step:hover .project-path-node {
    transform:translateY(-7px) scale(1.08);
  }
}

@media (prefers-reduced-motion:reduce) {
  .growth-method-page #stages .stage-tab.is-active {
    animation:none;
    background:var(--brand-600);
  }

  .growth-method-page #stages .stage-panel.is-active,
  .growth-method-page .project-path-step,
  .growth-method-page .project-path.is-visible .project-path-step {
    opacity:1;
    transform:none;
    animation:none;
    transition:none;
  }
}

/* Focused decision section with a photographic conceptual background. */
.growth-method-page .section.blue {
  isolation:isolate;
  background-image:linear-gradient(90deg,rgba(4,15,39,.96) 0%,rgba(8,31,76,.84) 45%,rgba(23,37,84,.44) 100%),url("assets/c5a-focus-decision-background.png");
  background-position:center;
  background-size:cover;
}

.growth-method-page .section.blue::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(circle at 58% 54%,rgba(51,111,252,.18),transparent 31%);
  pointer-events:none;
}

.growth-method-page .section.blue .decision-grid {
  position:relative;
  z-index:1;
}

.growth-method-page .section.blue .decision-card {
  border-color:rgba(255,255,255,.52);
  background:rgba(255,255,255,.8);
  box-shadow:0 24px 58px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
}