/* Delviom - styles for ai-native-cyber.php
   Moved out of the inline <style> block of the original ai-native-cyber.html
   so the dynamic page can load them as a normal stylesheet. */

.ainc-problem,
    .ainc-capability,
    .ainc-blueprint,
    .ainc-properties,
    .ainc-shifts,
    .ainc-usecases,
    .ainc-outcomes,
    .ainc-close,
    .ainc-cta-section {
      padding-block: clamp(48px, 6vw, 78px);
    }

    /* Alternating band, same pale cyan the homepage runs into the footer */
    .ainc-capability,
    .ainc-usecases,
    .ainc-close {
      background: rgb(233, 252, 255);
    }

    /* Centred header block, matching the homepage section rhythm */
    .section-intro {
      /* max-width: 800px; */
      margin-inline: auto;
      margin-bottom: clamp(28px, 3.5vw, 42px);
      text-align: center;
    }

    .section-intro h2 {
      color: var(--ink);
      font-size: clamp(1.5rem, 2.6vw, 2.05rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.01em;
    }

    .section-intro p {
      margin-top: 16px;
      color: var(--text);
      line-height: 1.75;
    }

    /* Two-column prose block: sticky-feeling heading left, body copy right */
    .ainc-split {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: clamp(24px, 4vw, 64px);
      align-items: start;
    }

    .ainc-split-head h2 {
      margin-top: 10px;
      color: var(--navy);
      font-size: clamp(1.5rem, 2.6vw, 2.05rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }

    .ainc-split-body p {
      color: var(--text);
      font-size: 1rem;
      line-height: 1.9;
    }

    .ainc-split-body p+p {
      margin-top: 18px;
    }

    /* ===================== How the model works (navy band) ===================== */
    .ainc-blueprint {
      background: linear-gradient(155deg, rgba(7, 21, 40, 0.25) 0%, rgba(7, 21, 40, 0.55) 100%), url("../images/search-cta-bg.png") center / cover no-repeat, var(--navy-deep);
      ;
      color: #fff;
    }

    .ainc-blueprint .eyebrow {
      color: var(--gold);
    }

    .ainc-blueprint .section-intro h2 {
      color: #fff;
    }

    .ainc-blueprint .section-intro p {
      color: rgba(245, 247, 250, 0.82);
    }

    .ainc-blueprint-note {
      max-width: 900px;
      margin-inline: auto;
      text-align: center;
    }

    .ainc-blueprint-note p {
      color: rgba(245, 247, 250, 0.86);
      line-height: 1.9;
    }

    /* ===================== Four core properties ===================== */
    .ainc-property-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(16px, 2vw, 24px);
    }

    /* Icon + heading + copy, no card chrome — the same treatment the homepage and
   capabilities page use for .capability-proof-card / .tech-partner-card. */
    .ainc-property-card {
      padding-block: 4px;
    }

    .ainc-icon {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-bottom: 12px;
      color: var(--teal-deep);
    }

    .ainc-icon svg {
      width: 34px;
      height: 34px;
    }

    .ainc-property-card h3 {
      color: var(--navy);
      font-size: 1.02rem;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .ainc-property-card p {
      margin-top: 8px;
      color: var(--text);
      font-size: 0.93rem;
      line-height: 1.7;
    }

    /* ===================== Seven shifts ===================== */
    /* Every card keeps the same width: a 24-track grid with uniform six-track
   spans, so four sit on the first row and the remaining three sit beneath them
   at identical width. Starting the fifth card three tracks in centres that
   short second row under the first. */
    .ainc-shift-grid {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      gap: clamp(16px, 2vw, 24px);
    }

    .ainc-shift-card {
      grid-column: span 6;
    }

    .ainc-shift-card:nth-child(5) {
      grid-column: 4 / span 6;
    }

    /* Wave-gradient tiles, the same art and treatment as .capability-card on the
   capabilities page, so the two rows read as one system. */
    .ainc-shift-card {
      position: relative;
      display: flex;
      flex-direction: column;
      isolation: isolate;
      min-height: 360px;
      overflow: hidden;
      padding: clamp(18px, 1.6vw, 24px);
      border-radius: 20px;
      color: #fff;
      background-color: var(--navy-deep);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transition: transform .22s ease;
    }

    /* Scrim behind the content, same technique as .capability-card::after */
    .ainc-shift-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(180deg, rgba(6, 16, 32, 0) 12%, rgba(6, 16, 32, 0.78) 78%);
    }

    .ainc-shift-card:hover {
      transform: translateY(-4px);
    }

    .ainc-shift-card .ainc-icon {
      width: 46px;
      height: 46px;
      margin-bottom: 14px;
      color: #fff;
    }

    .ainc-shift-card .ainc-icon svg {
      width: 38px;
      height: 38px;
    }

    /* Copy anchors to the top of the tile, directly under the icon, so every
   "Shift 01–07" label starts at the same height across the row. */
    .ainc-shift-body {
      margin-top: 0;
      margin-bottom: auto;
    }

    .ainc-shift-num {
      color: rgba(255, 255, 255, 0.82);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .ainc-shift-card h3 {
      color: #fff;
      font-size: clamp(1.2rem, 1.6vw, 1.4rem);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    .ainc-shift-arrow {
      margin-top: 8px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.5;
    }

    .ainc-shift-card p {
      margin-top: 10px;
      color: rgba(255, 255, 255, 0.88);
      font-size: 0.84rem;
      line-height: 1.55;
    }

    /* ===================== Use cases ===================== */
    .ainc-usecase-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(18px, 2.2vw, 28px);
    }

    .ainc-usecase {
      padding-block: 4px;
    }

    .ainc-usecase h3 {
      color: var(--navy);
      font-size: 1.02rem;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .ainc-usecase p {
      margin-top: 8px;
      color: var(--text);
      font-size: 0.93rem;
      line-height: 1.75;
    }

    /* ===================== Buyer outcomes ===================== */
    .ainc-outcome-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: clamp(16px, 2vw, 24px);
    }

    .ainc-outcome {
      padding-block: 4px;
    }

    .ainc-outcome .ainc-icon {
      color: var(--gold-deep);
    }

    .ainc-outcome h3 {
      color: var(--navy);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .ainc-outcome p {
      margin-top: 8px;
      color: var(--text);
      font-size: 0.9rem;
      line-height: 1.7;
    }

    /* ===================== Closing CTA =====================
   Its own white section, centred type and buttons like the homepage
   .cta-panel — no boxed panel. */
    .ainc-cta-section {
      background: var(--white);
    }

    .ainc-cta {
      text-align: center;
    }

    .ainc-cta h2 {
      color: var(--ink);
      font-size: clamp(1.4rem, 2.4vw, 2.05rem);
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .ainc-cta p {
      max-width: 760px;
      margin: 16px auto 0;
      color: var(--text);
      line-height: 1.8;
    }

    .ainc-cta-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px;
      margin-top: clamp(24px, 3vw, 32px);
    }

    .ainc-cta-actions .btn-pill {
      height: 54px;
      padding: 0 28px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.92rem;
      text-transform: none;
      letter-spacing: 0.01em;
    }

    .ainc-cta-actions .btn-split--solid .btn-pill {
      background: var(--gold);
      border: 1px solid var(--gold);
      color: var(--navy-deep);
    }

    .ainc-cta-actions .btn-split--solid:hover .btn-pill {
      background: var(--gold-deep);
      border-color: var(--gold-deep);
    }

    .ainc-cta-actions .btn-split--outline .btn-pill {
      background: transparent;
      border: 1px solid rgba(11, 31, 58, 0.22);
      color: var(--navy);
    }

    .ainc-cta-actions .btn-split--outline:hover .btn-pill {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff;
    }

    /* ===================== Responsive ===================== */
    @media (max-width: 1180px) {
      .ainc-property-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      /* Six tracks — three cards per row, the seventh centres itself */
      .ainc-shift-grid {
        grid-template-columns: repeat(6, 1fr);
      }

      .ainc-shift-card,
      .ainc-shift-card:nth-child(5) {
        grid-column: span 2;
      }

      .ainc-shift-card:nth-child(7) {
        grid-column: 3 / span 2;
      }

      .ainc-outcome-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 1080px) {

      /* Narrow viewports — the photo covers the whole banner under a flat wash */
      .page-banner-bg {
        width: 100%;
        object-position: right center;
      }

      .page-banner::before {
        background: linear-gradient(95deg,
            var(--navy-deep) 0%,
            rgba(7, 21, 40, 0.95) 50%,
            rgba(7, 21, 40, 0.78) 100%);
      }

      .ainc-split {
        grid-template-columns: 1fr;
        gap: clamp(18px, 3vw, 28px);
      }

      .ainc-usecase-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 860px) {
      .ainc-shift-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .ainc-shift-card,
      .ainc-shift-card:nth-child(5),
      .ainc-shift-card:nth-child(7) {
        grid-column: auto;
      }

      .ainc-outcome-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 620px) {

      .ainc-property-grid,
      .ainc-shift-grid,
      .ainc-usecase-grid,
      .ainc-outcome-grid {
        grid-template-columns: 1fr;
      }

      .ainc-cta-actions .btn-split {
        width: 100%;
      }

      .ainc-cta-actions .btn-pill {
        width: 100%;
        justify-content: center;
      }
    }