/* Methodology page. Loads after style.css and reuses its tokens, header,
   buttons, horizontal gradient bars, colour info cards and
   footer. Structure and sizes follow corticallabs.com/cloud section for
   section, in the Pyflx palette, less the closing sign-up block.

   1. Hero
   2. Glass cards
   3. Rack panel
   4. Colour cards
------------------------------------------------------------------------- */

/* 1. Hero ------------------------------------------------------------------ */

/* Reference: 180px 9.5vw 140px, h1 12.5vw white, h2 5.5vw, p at half
   opacity over a grey, green and salmon photograph. The photograph is
   rebuilt here as gradients from colours sampled off it (grey #c8cec9,
   green #6ad65e, cream streak #eeecea, salmon #cf8678), at the client's
   request. The display title is white, as on the reference, at the
   client's request; it is decorative-scale (12.5vw) but sits under 2:1 on
   the grey. The paragraph is Dark Grey rather than half-opacity
   ink so it holds AA. */
.method-hero {
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: 180px 9.5vw 140px;
  background-color: #c8cec9;
  background-image:
    radial-gradient(42% 26% at 36% 74%, rgb(207 134 120 / 1) 10%, rgb(207 134 120 / 0) 100%),
    radial-gradient(55% 36% at 100% 36%, rgb(106 214 94 / 1) 15%, rgb(106 214 94 / 0) 100%),
    radial-gradient(35% 22% at 85% 14%, rgb(106 214 94 / 0.55), rgb(106 214 94 / 0) 100%),
    radial-gradient(34% 12% at 34% 56%, rgb(238 236 234 / 0.95), rgb(238 236 234 / 0) 100%),
    radial-gradient(22% 14% at 12% 64%, rgb(230 232 226 / 0.8), rgb(230 232 226 / 0) 100%),
    radial-gradient(40% 25% at 88% 92%, rgb(233 229 225 / 0.8), rgb(233 229 225 / 0) 100%);
}

/* Left-aligned at every width (client), as corticallabs.com/cloud. */
.method-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  text-align: left;
}

/* Type scale of corticallabs.com/cloud's hero, measured from 320 to 2560px
   (client): title 12.5vw, headline 5.5vw, paragraph 28px; 22px under
   800px and 18px under 400px; title 76px and headline 34px on phones. */
.method-hero h1 {
  font-size: 12.5vw;
  font-weight: var(--weight-heading);
  line-height: 0.984;
  letter-spacing: -0.02em;
  color: var(--color-paper);
}

.method-hero__headline {
  padding: 0 10px;
  font-size: 5.5vw;
  font-weight: 500;
  line-height: 1.02;
  text-wrap: balance;
  color: var(--color-brand-jet); /* as the Services hero (client) */
}

.method-hero__text {
  padding: 0 10px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
  color: rgb(0 0 0 / 0.5); /* medium grey, as corticallabs.com/cloud (client) */
}

.method-hero__bottom {
  padding: 40px 0 0;
  margin: 0 10px; /* on the lines' 10px inset */
}

.method-hero__bottom .button {
  min-width: 300px;
}

/* 2. Glass cards ------------------------------------------------------------ */

/* Reference: one card over two, 40px radius, a white-to-clear fill with
   inset highlights and a 5px backdrop blur. Title 34px, copy 24px at half
   opacity; Dark Grey here for AA. The lead card is 800px and centred; the
   pair below spans the full content width and rides up over its bottom
   edge, the right card sitting 20px higher than the left, as in the
   client's reference capture. That is where the reference's scroll
   parallax puts them at 800px of scroll; methodology.js runs the parallax
   and adds .has-parallax, which clears these static offsets. */
.glass-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.glass-cards__bottom {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
  margin-top: -40px;
}

.glass-cards__bottom .glass-card {
  max-width: none;
}

.glass-cards__bottom .glass-card:last-child {
  margin-top: -20px;
}

.has-parallax .glass-cards__bottom,
.has-parallax .glass-cards__bottom .glass-card:last-child {
  margin-top: 0;
}

.has-parallax .glass-cards__bottom,
.has-parallax .glass-cards__bottom .glass-card:last-child,
.has-parallax .method-steps__body {
  will-change: transform;
}

.glass-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 30px;
  max-width: 800px;
  padding: 50px 60px 60px;
  border-radius: 40px;
  background: linear-gradient(291deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.3) 100%);
  box-shadow:
    0 0 1px 0 rgb(255 255 255 / 0.8) inset,
    0 1px 1px 0 rgb(0 0 0 / 0.06),
    0 25px 69px 1px rgb(0 0 0 / 0.04),
    0 2px 0 0 rgb(255 255 255 / 0.5) inset,
    0 1px 2px 0 rgb(255 255 255 / 0.5) inset;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.glass-card--lead {
  flex: none;
  width: min(800px, 100%);
  padding-bottom: 100px;
}

.glass-card__title {
  font-size: 40px;
  font-weight: var(--weight-heading);
  line-height: 1.2;
}

.glass-card p {
  font-size: 24px;
  line-height: 1.4;
  color: var(--color-brand-grey-dark);
}

/* Step number over each title (client), in the Services label style. */
.glass-card .glass-card__step {
  margin-bottom: -18px; /* sits close to its title inside the card's 30px gap */
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-brand-grey-dark); /* the card copy's colour (client) */
}

/* 3. Rack panel ------------------------------------------------------------- */

/* Reference: the rack sits bottom left at 90% of the section's height; the
   copy panel runs from the right edge, 80vw at most, black at 20% with a
   30px blur, rounded on its left corners only. Titles 9vw, copy 34/40.
   methodology.js slides the panel up over the rack as the page scrolls. */
.method-steps {
  background: linear-gradient(221deg, #2a1f33 0%, #000 15%), #000;
}

.method-steps__inner {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  background: url("../img/methodology/server-rack.jpg") no-repeat left bottom;
  background-image: image-set(url("../img/methodology/server-rack.webp") type("image/webp"), url("../img/methodology/server-rack.jpg") type("image/jpeg"));
  background-size: auto 90%;
}

.method-steps__body {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 80vw;
  margin: min(10vh, 120px) 0 0;
  padding: 12vw 9.5vw;
  list-style: none;
  color: var(--color-paper);
  background-color: rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  border-radius: 20px 0 0 20px;
}

.method-steps__item {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgb(255 255 255 / 0.5);
}

.method-steps__title {
  font-size: 6.5vw; /* three-word titles hold one line */
  font-weight: var(--weight-heading);
  line-height: 1;
}

.method-steps__item p {
  font-size: 34px;
  line-height: 40px;
}

/* 4. Colour cards ---------------------------------------------------------- */

/* The two shared photograph cards (style.css section 11, .info-card--photo)
   carry the client's photographs (2026-10-07): a teal ring on deep blue
   for "How we measure", a maroon-and-teal glitch for "What happens after".
   The fill underneath is the fallback while an image loads. */
.info-card--teal {
  background-color: #1b3590;
  background-image: url("../img/methodology/card-ring.jpg");
  background-image: image-set(url("../img/methodology/card-ring.webp") type("image/webp"), url("../img/methodology/card-ring.jpg") type("image/jpeg"));
}

.info-card--maroon {
  background-color: #33000f;
  background-image: url("../img/methodology/card-glitch.jpg");
  background-image: image-set(url("../img/methodology/card-glitch.webp") type("image/webp"), url("../img/methodology/card-glitch.jpg") type("image/jpeg"));
}

/* Breakpoints -------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Stacked as the reference on phones: 40px apart, the last card 50px
     up over the one before (100px under 500px); the scroll parallax then
     slides them as on desktop. */
  .glass-cards__bottom {
    flex-direction: column;
    align-items: stretch;
    width: min(800px, 100%);
    margin-top: 0;
  }

  .glass-cards__bottom .glass-card:last-child,
  .has-parallax .glass-cards__bottom .glass-card:last-child {
    margin-top: -50px;
  }

  .glass-card {
    gap: 20px;
    padding: 40px 50px 50px;
  }

  .glass-card__title {
    font-size: 32px;
    line-height: 38px;
  }

  .glass-card p {
    font-size: 22px;
  }
}

@media (max-width: 800px) {
  .method-hero__text {
    font-size: 22px;
  }

  .method-steps__inner {
    background-size: auto 60%;
  }

  .method-steps__body {
    width: 100%;
    border-radius: 0;
  }

  .method-steps__item {
    gap: 8vw;
    padding-bottom: 12vw;
  }

  .method-steps__item p {
    font-size: 24px;
    line-height: 28px;
  }
}

/* Phones: the sizes and spacing of corticallabs.com/cloud's
   hero on a phone (client; measured at 390px): title 76px on a 1.0 line,
   headline 34px on 1.0, paragraph 18px on 1.3, both 10px in from the
   title; 60px between them and 100px above the 300px button. */
@media (max-width: 600px) {
  .method-hero {
    padding-top: 160px;
  }

  .method-hero h1 {
    font-size: 76px;
    line-height: 1;
  }

  .method-hero__headline {
    font-size: 34px;
    line-height: 1;
    text-wrap: wrap;
  }

  .method-hero__text {
    text-wrap: wrap;
  }

  .method-hero__bottom {
    align-self: stretch;
  }

  .method-hero__bottom .button {
    width: 300px;
    max-width: 100%;
    min-width: 0;
  }

  .method-steps__title {
    font-size: 40px;
  }
}

@media (max-width: 600px) {
  .glass-cards__bottom {
    padding-bottom: 40px;
  }
}

@media (max-width: 500px) {
  .glass-cards__bottom .glass-card:last-child,
  .has-parallax .glass-cards__bottom .glass-card:last-child {
    margin-top: -100px;
  }
}

@media (max-width: 400px) {
  .method-hero {
    gap: 50px;
    padding-bottom: 80px;
  }

  .method-hero__text {
    font-size: 18px;
  }

  .glass-card {
    padding: 60px 40px; /* the reference's */
  }

  .glass-card p,
  .method-steps__item p {
    font-size: 18px;
    line-height: 1.4;
  }
}