/* =========================================================================
   1. TOKENS — same brand family as financial-consulting.html / the Risk
   Management page (near-black "control room" mood). This page's own register
   is a crisis→calm arc: chaotic pulse settling into a steady line, reused as
   the thread running through the hero and the closing CTA.
   ========================================================================= */
            /* --------------------------------------------------------
         Local names mapped onto the shared design system in
         css/main.css. No colour, font or size is defined here —
         edit the --qw-* tokens in main.css to restyle the site.
         -------------------------------------------------------- */
      :root {
        --void: var(--qw-paper);
        --void-2: var(--qw-paper-2);
        --steel: var(--qw-card);
        --steel-2: var(--qw-paper-2);
        --mist: var(--qw-paper-2);
        --ink: var(--qw-ink);
        --ink-60: var(--qw-ink-60);
        --ink-35: var(--qw-ink-35);
        --dark-ink: var(--qw-navy);
        --dark-60: var(--qw-navy-72);
        --rule: var(--qw-line);
        --dark-void: var(--qw-navy);
        --dark-steel: var(--qw-navy-2);
        --on-dark: var(--qw-on-dark);
        --on-dark-60: var(--qw-on-dark-60);
        --on-dark-35: var(--qw-on-dark-35);
        --on-dark-rule: var(--qw-line-dark);
        --g1: var(--qw-violet);
        --g2: var(--qw-blue);
        --g3: var(--qw-cyan);
        --g4: var(--qw-mint);
        --grad: var(--qw-grad);
        --grad-v: var(--qw-grad-v);
        --alarm: var(--qw-alarm);
        --d-xl: var(--qw-fs-hero);
        --d-l: var(--qw-fs-h2);
        --d-m: var(--qw-fs-h3);
        --body: var(--qw-fs-body);
        --shell: var(--qw-shell);
        --r: var(--qw-r);
        --ease: var(--qw-ease);
      }

      /* =========================================================================
   2. BASE
   ========================================================================= */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
      }
      body {
        margin: 0;
        background: var(--void);
        color: var(--ink);
        overflow-x: hidden;
        font: 400 var(--body) / var(--qw-lh-body) var(--qw-font-ui);
        -webkit-font-smoothing: antialiased;
      }
      img {
        display: block;
        max-width: 100%;
      }
      a {
        color: inherit;
      }
      h1,
      h2,
      h3 {
        margin: 0;
        font-family: var(--qw-font-display);
        font-weight: 600;
        line-height: 1.08;
        letter-spacing: -0.02em;
      }
      h1 {
        font-size: var(--d-xl);
      }
      h2 {
        font-size: var(--d-l);
      }
      h3 {
        font-size: var(--d-m);
        line-height: 1.25;
      }
      p {
        margin: 0 0 1.05em;
        max-width: 65ch;
      }
      p:last-child {
        margin-bottom: 0;
      }
      :focus-visible {
        outline: 2px solid var(--g3);
        outline-offset: 3px;
        border-radius: 5px;
      }

      .shell {
        width: var(--shell);
        margin-inline: auto;
      }
      .sec {
        padding: var(--qw-pad-section) 0;
      }
      .sec--tight {
        padding-top: 0;
      }
      .dim {
        color: var(--ink-60);
      }
      .mark {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-family: var(--qw-font-display);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--g3);
        margin-bottom: 1.1rem;
      }
      .mark::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--grad);
        flex: none;
      }

      /* --- Scroll reveal: fade + rise, staggered by --i --- */
      [data-rv] {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.7s var(--ease),
          transform 0.7s var(--ease);
        transition-delay: calc(var(--i, 0) * 0.09s);
      }
      [data-rv].in {
        opacity: 1;
        transform: none;
      }

      /* --- Image frame + placeholder: every photo on this page is a
   stand-in slot, same system as the rest of the site — swap the .img-slot
   markup for a real <img> later, keep the wrapper. --- */
      .frame {
        position: relative;
        overflow: hidden;
        border-radius: var(--r);
        background: var(--steel);
      }
      .frame > * {
        transform: scale(1.14);
        transition: transform 1.3s var(--ease);
      }
      .frame.in > * {
        transform: scale(1);
      }
      .frame > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .img-slot {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: repeating-linear-gradient(
          135deg,
          var(--steel) 0 14px,
          var(--steel-2) 14px 28px
        );
      }
      .img-slot__icon {
        width: 20%;
        max-width: 42px;
        height: auto;
        color: var(--ink-35);
      }

      /* --- Icon tile: a gradient-filled circle holding a line-art icon,
   used wherever a small card doesn't have (or need) a real photo — a
   deliberate graphic instead of a placeholder. --- */
      .ticon {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--steel);
      }
      .ticon__ring {
        width: 62%;
        aspect-ratio: 1;
        border-radius: 50%;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--grad);
      }
      .ticon__ring svg {
        width: 52%;
        height: 52%;
        aspect-ratio: 1;
        color: #fff;
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        * {
          animation-duration: 0.001ms !important;
          transition-duration: 0.001ms !important;
        }
        [data-rv] {
          opacity: 1;
          transform: none;
        }
        .frame > * {
          transform: none;
        }
      }

      /* =========================================================================
   4. HERO — a pulse line: chaotic on load, exactly like an incident spiking
   out of nowhere. Moving the pointer near the line adds its own disturbance,
   so the "crisis" reads as something that responds to you, not a fixed clip.
   ========================================================================= */
      .hero {
        position: relative;
        min-height: 100svh;
        display: grid;
        place-items: center;
        overflow: hidden;
        text-align: center;
        padding: 8rem 0 4rem;
        background: var(--dark-void);
        color: var(--on-dark);
      }
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(
          60% 60% at 50% 38%,
          rgba(255, 106, 90, 0.1) 0%,
          transparent 70%
        );
      }
      #pulseHero {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        top: 54%;
        height: min(34vh, 300px);
        transform: translateY(-50%);
        z-index: 0;
        opacity: 0.85;
      }
      .hero__in {
        position: relative;
        z-index: 2;
        width: var(--shell);
        margin-inline: auto;
      }
      .hero h1 {
        max-width: 20ch;
        margin-inline: auto;
      }
      .hero h1 .g {
        background: var(--grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .hero__lede {
        margin: 1.8rem auto 0;
        max-width: 58ch;
        color: var(--on-dark-60);
        font-size: clamp(1rem, 1.05vw, 1.14rem);
      }
      .hero__cue {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        margin-top: 2.8rem;
        font-size: 0.82rem;
        color: var(--on-dark-35);
      }
      .hero__cue i {
        width: 34px;
        height: 1px;
        background: var(--grad);
      }

      /* =========================================================================
   5. OVERVIEW — lede copy plus a small "severity meter": a row of bars that
   settle from alarm-red to steady brand teal once the section is in view.
   No photo, no bento — a compact status motif instead, since this is short
   framing copy that leads into the expertise list right after it.
   ========================================================================= */
      .ov-sec {
        position: relative;
        overflow: hidden;
      }
      /* .ov is centered (max-width: 70ch, margin-inline: auto), so the two
         networks live in the empty side margins that flank it — top-right
         and, mirrored, bottom-left — each clamped to the half-width outside
         a 37ch buffer from the page centre so the moving lines can never
         reach the text. Hidden once the layout narrows enough that those
         margins would vanish. */
      .ov__net {
        position: absolute;
        z-index: 0;
        opacity: 0.7;
        pointer-events: none;
      }
      .ov__net--tr {
        top: 0;
        height: 58%;
        right: 0;
        width: calc(50% - 37ch);
      }
      .ov__net--bl {
        bottom: 0;
        height: 58%;
        left: 0;
        width: calc(50% - 37ch);
      }
      @media (max-width: 900px) {
        .ov__net {
          display: none;
        }
      }
      .ov {
        position: relative;
        z-index: 1;
        max-width: 70ch;
      }
      .meter {
        display: flex;
        align-items: flex-end;
        gap: 5px;
        height: 34px;
        margin: 0.4rem 0 2rem;
      }
      .meter span {
        width: 5px;
        border-radius: 2px;
        background: var(--alarm);
        height: var(--h, 30%);
        transform: scaleY(0.3);
        transform-origin: bottom;
        opacity: 0.5;
      }
      .meter.in span {
        animation: settle 1.6s var(--ease) forwards;
        animation-delay: calc(var(--d, 0) * 60ms);
      }
      @keyframes settle {
        0% {
          transform: scaleY(1.4);
          background: var(--alarm);
          opacity: 1;
        }
        55% {
          background: var(--g3);
        }
        100% {
          transform: scaleY(1);
          background: var(--g4);
          opacity: 0.85;
          height: var(--h, 30%);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .meter span {
          transform: none;
          background: var(--g4);
          opacity: 0.85;
        }
      }

      /* =========================================================================
   6. EXPERTISE BENTO — six flat cards, two even rows of three. Each card
   carries a large, faint line-art icon in the corner as a quiet background
   motif. A top rule bar draws in left-to-right on hover like a panel
   arming itself, which suits "crisis expertise" better than a soft image
   crossfade would.
   ========================================================================= */
      .ebento {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(1rem, 2vw, 1.4rem);
      }
      .ecard {
        position: relative;
        padding: clamp(1.6rem, 2.4vw, 2.1rem);
        border: 1px solid var(--rule);
        border-radius: var(--r);
        overflow: hidden;
      }
      .ecard::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--grad);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s var(--ease);
      }
      .ecard:hover::before,
      .ecard:focus-within::before {
        transform: scaleX(1);
      }
      .ecard__icon {
        position: absolute;
        right: -0.6rem;
        bottom: -0.6rem;
        width: 96px;
        height: 96px;
        color: var(--ink-35);
        opacity: 0.4;
        pointer-events: none;
        transition:
          transform 0.5s var(--ease),
          opacity 0.5s var(--ease);
      }
      .ecard:hover .ecard__icon {
        transform: scale(1.08) rotate(-4deg);
        opacity: 0.55;
      }
      .ecard h3 {
        position: relative;
        font-size: clamp(1.05rem, 1.4vw, 1.3rem);
        margin-bottom: 0.7rem;
      }
      .ecard p {
        position: relative;
        color: var(--ink-60);
        font-size: 0.96rem;
      }
      @media (max-width: 992px) {
        .ebento {
          grid-template-columns: 1fr;
        }
      }

      /* =========================================================================
   7. PREPARING — a quiet beat: small square photo slot over a narrow
   heading column, paragraphs alongside. No sticky, no rail — deliberate
   breathing room after the bento above.
   ========================================================================= */
      .prep__title {
        font-size: clamp(1.6rem, 2.6vw, 2.5rem);
        white-space: nowrap;
        margin-bottom: clamp(1.8rem, 3.2vw, 2.6rem);
      }
      .prep {
        display: grid;
        grid-template-columns: 0.55fr 1fr;
        gap: var(--qw-space-lg);
        align-items: stretch;
      }
      .prep__head,
      .prep__head .frame {
        height: 100%;
      }
      .prep__body p {
        color: var(--ink-60);
      }
      @media (max-width: 992px) {
        .prep__title {
          white-space: normal;
        }
        .prep {
          grid-template-columns: 1fr;
        }
        .prep__head .frame {
          height: auto;
          aspect-ratio: 16 / 10;
        }
      }

      /* =========================================================================
   8. DECK — "Business Continuity Planning" as a zig-zag bento grid: cards 1
   and 4 run wide, cards 2 and 3 stay narrow, so the two rows mirror each
   other. Each card still starts rotated and offset like a fanned hand of
   cards, then straightens on scroll-reveal.
   ========================================================================= */
      .deck {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(1rem, 2vw, 1.4rem);
        margin-top: clamp(2.5rem, 5vw, 4rem);
      }
      .dcard:nth-child(1),
      .dcard:nth-child(4) {
        grid-column: span 2;
      }
      .dcard {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(1.6rem, 2.4vw, 2.1rem);
        border: 1px solid var(--rule);
        border-radius: var(--r);
        background: var(--steel);
        transform: rotate(var(--rot, 0deg)) translateY(14px);
      }
      .dcard p {
        color: var(--ink-60);
        font-size: 0.96rem;
      }
      [data-rv].in.dcard {
        transform: none;
      }
      .dcard {
        transition:
          transform 0.8s var(--ease),
          opacity 0.7s var(--ease);
      }
      @media (max-width: 992px) {
        .deck {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 640px) {
        .deck {
          grid-template-columns: 1fr;
        }
        .dcard:nth-child(1),
        .dcard:nth-child(4) {
          grid-column: auto;
        }
      }

      /* =========================================================================
   9. STRIP — "Crisis Response and Incident Management" as a native
   scroll-snap row (not a JS-pinned gallery): four wide panels, swipe or
   scroll through, dots track position. Simplest possible horizontal-scroll
   implementation, deliberately unlike the pinned galleries used elsewhere.
   ========================================================================= */
      .istrip {
        display: flex;
        gap: clamp(1rem, 2vw, 1.4rem);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-top: clamp(2rem, 4vw, 3rem);
        padding-bottom: 0.6rem;
        scrollbar-width: none;
      }
      .istrip::-webkit-scrollbar {
        display: none;
      }
      .ipanel {
        flex: 0 0 min(520px, 82vw);
        scroll-snap-align: center;
        padding: clamp(1.8rem, 3vw, 2.6rem);
        border: 1px solid var(--rule);
        border-radius: var(--r);
        background: var(--void-2);
      }
      .ipanel p {
        color: var(--ink-60);
      }
      .istrip__nav {
        display: flex;
        gap: 0.7rem;
        justify-content: center;
        margin-top: 1.6rem;
      }
      .istrip__arrow {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--rule);
        background: none;
        color: var(--dark-ink);
        cursor: pointer;
        transition:
          background 0.25s var(--ease),
          border-color 0.25s var(--ease),
          color 0.25s var(--ease),
          opacity 0.25s var(--ease);
      }
      .istrip__arrow svg {
        width: 18px;
        height: 18px;
      }
      .istrip__arrow:hover:not(:disabled) {
        background: var(--dark-ink);
        border-color: var(--dark-ink);
        color: var(--on-dark, #fff);
      }
      .istrip__arrow:disabled {
        opacity: 0.35;
        cursor: default;
      }

      /* =========================================================================
   10. TECHSPLIT — "Technology and Disaster Recovery": sticky pin holds only
   text (mark, heading, one line) on the RIGHT; the scrolling column on the
   LEFT carries a small photo slot beside each paragraph instead of a fill
   rail — a different combination from the photo-in-pin sticky splits used
   on the other two pages.
   ========================================================================= */
      .techsplit {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: clamp(2rem, 5vw, 4.5rem);
        align-items: start;
      }
      .techsplit__col {
        order: 1;
      }
      .techsplit__pin {
        order: 2;
        position: sticky;
        top: clamp(6rem, 14vh, 9rem);
      }
      .techsplit__pin h2 {
        max-width: 13ch;
      }
      .techsplit__pin p {
        margin-top: 1.2rem;
        color: var(--ink-60);
      }
      .tblk {
        display: grid;
        grid-template-columns: 84px 1fr;
        gap: 1.2rem;
        align-items: start;
        padding: clamp(1.4rem, 2.6vw, 2rem) 0;
        border-bottom: 1px solid var(--rule);
      }
      .tblk:last-child {
        border-bottom: 0;
      }
      .tblk .frame {
        aspect-ratio: 1;
      }
      .tblk p {
        color: var(--ink-60);
      }
      @media (max-width: 992px) {
        .techsplit {
          grid-template-columns: 1fr;
        }
        .techsplit__pin {
          position: static;
          order: 0;
        }
        .techsplit__col {
          order: 1;
        }
      }
      @media (max-width: 560px) {
        .tblk {
          grid-template-columns: 1fr;
          justify-items: center;
          text-align: center;
        }
        .tblk .frame {
          max-width: 120px;
        }
      }

      /* =========================================================================
   11. COMMBENTO — "Crisis Communication": a single photo beside the copy,
   stretched to match the text column's height.
   ========================================================================= */
      .comm__title {
        text-align: center;
        margin-bottom: clamp(1.8rem, 3.2vw, 2.6rem);
      }
      .commrow {
        display: grid;
        grid-template-columns: 0.6fr 1fr;
        gap: var(--qw-space-lg);
        align-items: stretch;
      }
      .commbento,
      .commbento .frame {
        height: 100%;
      }
      .commrow__text p {
        color: var(--ink-60);
      }
      @media (max-width: 992px) {
        .commrow {
          grid-template-columns: 1fr;
        }
        .commbento .frame {
          height: auto;
          aspect-ratio: 16 / 10;
        }
      }

      /* =========================================================================
   12. REVSPLIT — "Recovery, Review and Improvement": a plain two-column
   grid (not multi-column flowing text) with a vertical rule between —
   no photography, a calm close before the CTA.
   ========================================================================= */
      .revsplit {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 5vw, 4rem);
        margin-top: clamp(1.6rem, 3vw, 2.4rem);
        position: relative;
      }
      .revsplit::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--rule);
      }
      .revsplit p {
        color: var(--ink-60);
      }
      @media (max-width: 768px) {
        .revsplit {
          grid-template-columns: 1fr;
        }
        .revsplit::before {
          display: none;
        }
      }

      /* =========================================================================
   13. CTA — same register as Risk Management's and Financial Consulting's
   closing CTA (spinning conic-gradient halo + ambient particle field), so
   all three service pages share one closing-CTA design.
   ========================================================================= */
      .cta {
        position: relative;
        border-radius: 28px;
        padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
        text-align: center;
        overflow: hidden;
        isolation: isolate;
        color: var(--on-dark);
      }
      .cta__bg {
        position: absolute;
        inset: 0;
        z-index: -2;
        background: linear-gradient(
          160deg,
          var(--dark-steel) 0%,
          var(--dark-void) 72%
        );
      }
      .cta__net {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
        opacity: 0.5;
      }
      .cta::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -40%;
        width: 140%;
        aspect-ratio: 1;
        z-index: -1;
        transform: translateX(-50%);
        border-radius: 50%;
        background: conic-gradient(
          from 0deg,
          var(--g1),
          var(--g2),
          var(--g3),
          var(--g4),
          var(--g1)
        );
        opacity: 0.2;
        filter: blur(60px);
        animation: spin 24s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .cta::before {
          animation: none;
        }
      }
      .cta > *:not(.cta__bg):not(.cta__net) {
        position: relative;
        z-index: 1;
      }
      .cta p {
        margin: 1.2rem auto 0;
        max-width: 74ch;
        color: var(--on-dark-60);
      }
      .cta p.hi {
        color: var(--on-dark);
      }
      @media (max-width: 768px) {
        .cta .btn {
          margin-top: 1.2rem;
        }
      }

      /* =========================================================================
   14. FOOTER
   ========================================================================= */