/* Sparktan — mobile and tablet layer.
   Loaded AFTER css/styles.css on every page, so these rules win on equal
   specificity without needing !important. Nothing in styles.css is edited.

   The desktop design is authoritative above 1024px: every rule in this file
   lives inside a max-width media query, so removing the one <link> that
   pulls it in restores the previous behaviour exactly.

   Breakpoints
     <= 600px   phone      single column, animations parked at final state
     <= 1024px  tablet     pinned sections released, nav collapses
     >= 1025px  desktop    untouched

   Why 1024 and not the 760 already in styles.css: between those two widths
   the pinned diagrams on the service pages still do not fit — iPad portrait
   (768) and landscape (1024) both land in that gap. The existing 760px rules
   in styles.css are left alone and keep applying underneath these. */

/* ---- global guards (all widths) -------------------------------------
   These are the only rules here outside a media query. They are safety
   nets rather than layout: a single overflowing child on a phone causes
   the whole page to scroll sideways, which reads as broken even when
   every section is otherwise correct. */

html, body {
  /* clip, not hidden: `overflow-x: hidden` on a scroll container silently
     breaks `position: sticky` on descendants, and the homepage relies on
     sticky for the stage / industries / bolt sections. `clip` blocks the
     sideways scroll without establishing a scroll container. */
  overflow-x: clip;
}

/* Media never wider than its column. The service pages carry inline widths
   from the design tool (max-width:330px and similar) which are fine, but
   the industry photos and .webp icons have no such ceiling. */
img, video, svg {
  max-width: 100%;
}

/* ==== mobile navigation ==============================================
   Below 1024px the desktop nav is replaced by a hamburger and a slide-in
   panel. styles.css already hides the desktop links below 760px, which
   left the 10 service pages reachable only through footer links — and
   completely unreachable between 760 and 1024 where the cramped desktop
   nav was still being shown.

   The panel markup lives in every page's <header> and is inert above
   1024px (display:none), so desktop never sees it. */

/* the button itself is desktop-hidden; it only appears in the media query */
.mnav-toggle,
.mnav-panel,
.mnav-scrim {
  display: none;
}

@media (max-width: 1024px) {

  /* --- hide the desktop nav ---------------------------------------
     styles.css already does this below 760px. Repeating it here at the
     wider breakpoint covers the 761-1024 tablet gap, where the desktop
     nav was previously still rendering and wrapping badly. */
  header nav a:not(.nav-cta),
  header nav .nav-drop {
    display: none;
  }

  /* The header is a space-between row: brand | nav. The nav still holds
     the Contact CTA, and the hamburger sits beside it. */
  header {
    gap: 16px;
  }

  header nav {
    gap: 12px;
  }

  /* --- hamburger button --------------------------------------------
     44x44 minimum, per the usual touch-target floor. Colour is inherited
     so it rides the header's existing light/dark tinting (js/main.js
     rewrites header.style.color as dark sections pass under it) rather
     than needing a second signal. */
  .mnav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-right: -8px;          /* pulls the optical edge back in line */
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* three bars drawn as spans so they can animate into a cross */
  .mnav-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: background .2s ease;
  }
  .mnav-bars::before,
  .mnav-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .28s cubic-bezier(.22,1,.36,1);
  }
  .mnav-bars::before { top: -7px; }
  .mnav-bars::after  { top: 7px; }

  /* open state: middle bar vanishes, outer two cross */
  .mnav-open .mnav-bars {
    background: transparent;
  }
  .mnav-open .mnav-bars::before {
    transform: translateY(7px) rotate(45deg);
  }
  .mnav-open .mnav-bars::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* --- scrim -------------------------------------------------------
     Sits under the panel and over the page. Tapping it closes, which is
     handled in js/mobile-nav.js; this is only the visual. */
  .mnav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 58;
    background: rgba(11,26,47,.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s;
  }
  .mnav-open .mnav-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* --- panel -------------------------------------------------------
     Slides in from the right. Fixed rather than absolute so it is not
     clipped by the header's own stacking context, and z-index sits above
     the scrim but below nothing else — the header is z-index 50, so 59
     keeps the panel over it. */
  .mnav-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 59;
    width: min(400px, 86vw);
    background: #ffffff;
    border-left: 1px solid rgba(11,26,47,.1);
    box-shadow: -24px 0 60px -20px rgba(11,26,47,.3);
    transform: translateX(100%);
    visibility: hidden;
    /* the panel scrolls internally: the full service taxonomy is taller
       than a short phone viewport in landscape */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: transform .32s cubic-bezier(.22,1,.36,1), visibility .32s;
  }
  .mnav-open .mnav-panel {
    transform: translateX(0);
    visibility: visible;
  }

  /* header strip inside the panel, holding the close button */
  .mnav-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(11,26,47,.1);
  }
  .mnav-panel-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', Helvetica, sans-serif;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
    color: #0b1a2f;
  }
  .mnav-panel-brand img {
    width: 26px;
    height: 26px;
    display: block;
    flex: none;
  }
  .mnav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(11,26,47,.55);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-close:hover { color: #16a34a; }

  .mnav-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px 28px;
  }

  /* top-level links (Home, Industries, About Us) */
  .mnav-link {
    display: block;
    padding: 13px 10px;
    border-radius: 8px;
    font-family: 'Poppins', Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #0b1a2f;
    transition: background .18s ease, color .18s ease;
  }
  .mnav-link:hover,
  .mnav-link:focus-visible {
    background: rgba(34,197,94,.1);
    color: #16a34a;
  }

  /* section headings mirror .nav-col-head from the desktop dropdown, so
     the panel presents the same taxonomy in the same vocabulary */
  .mnav-head {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #16a34a;
    padding: 18px 10px 8px;
  }

  /* service links, one per row, indented under their heading */
  .mnav-sub {
    display: block;
    padding: 11px 10px 11px 18px;
    border-radius: 8px;
    font-family: 'Poppins', Helvetica, sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(11,26,47,.82);
    transition: background .18s ease, color .18s ease;
  }
  .mnav-sub:hover,
  .mnav-sub:focus-visible {
    background: rgba(34,197,94,.1);
    color: #16a34a;
  }

  /* full-width CTA closing the panel */
  .mnav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 22px 10px 0;
    padding: 15px 22px;
    border-radius: 6px;
    background: #22c55e;
    color: #0b1a2f;
    font-family: 'Poppins', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 15px;
  }
  .mnav-cta:hover { background: #3ee07a; color: #0b1a2f; }

  /* while the panel is open the page behind must not scroll. Applied to
     <html> by js/mobile-nav.js, which also preserves the scroll position —
     `position: fixed` on body alone would jump the page to the top. */
  .mnav-lock, .mnav-lock body {
    overflow: hidden;
  }
}

/* Above the breakpoint the panel must never be reachable, even if a resize
   happens while it is open. js/mobile-nav.js also drops the class on
   resize; this is the belt-and-braces half. */
@media (min-width: 1025px) {
  .mnav-toggle,
  .mnav-panel,
  .mnav-scrim {
    display: none !important;
  }
}

/* ---- phone: header CTA ------------------------------------------------
   The "Contact Us" pill plus the hamburger crowd a 320px header. Below
   600px the pill is dropped — the panel's own full-width CTA covers it. */
@media (max-width: 600px) {
  header nav .nav-cta {
    display: none;
  }
}

/* ==== pinned service sections ========================================
   Five service pages pin a 100vh diagram inside a tall section and drive
   it from scroll:

     cloud-migration              340vh
     cloud-cost-optimisation      320vh
     data-analytics-engineering   280vh   (#outcomes)
     chatbots-workflow-automation 280vh
     web-mobile                   220vh

   The diagrams are multi-column rows sized for a wide viewport. On a phone
   the columns cannot sit side by side, and the content is taller than the
   100vh sticky box that holds it — which is what produced the overlapping
   panels.

   Below 1024px the section is released to normal flow: it grows to fit its
   own content, and the sticky child stops pinning. The matching half of
   this lives in each page's js/page.js, which parks the animation at its
   final frame instead of writing per-frame inline styles over these rules.
   Change one without the other and the overlap comes straight back. */

@media (max-width: 1024px) {

  /* the tall scroll runway collapses to content height */
  section[data-ref="sectionRef"] {
    height: auto !important;
    /* Pinned, the section's own 100vh child scrolled clear of the fixed
       header on its own. Released, an anchor jump (data-analytics exposes
       this section as #outcomes, and the on-page nav links to it) would
       land the heading underneath the ~85px header. styles.css already does
       the same for #get-started. */
    scroll-margin-top: 96px;
  }

  /* and its sticky child stops pinning */
  section[data-ref="sectionRef"] > div {
    position: static !important;
    height: auto !important;
    /* the desktop rule centres a full-height panel; released, that centring
       has nothing to work against and only adds dead space */
    justify-content: flex-start !important;
    padding-top: clamp(56px, 8vh, 80px) !important;
    padding-bottom: clamp(48px, 7vh, 72px) !important;
  }

  /* --- diagram rows ------------------------------------------------
     The rows already carry flex-wrap:wrap, so they stack on their own once
     the min-widths stop holding them open. Those inline min-widths are the
     actual cause of the sideways overflow (cloud-migration's three columns
     demand 250 + 90 + 280 = 620px inside a ~335px viewport). */
  section[data-ref="sectionRef"] [style*="min-width:250px"],
  section[data-ref="sectionRef"] [style*="min-width:280px"],
  section[data-ref="sectionRef"] [style*="min-width:260px"],
  section[data-ref="sectionRef"] [style*="min-width:270px"],
  section[data-ref="sectionRef"] [style*="min-width:300px"] {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }

  /* The connector strip between "existing estate" and "cloud" is a
     horizontal 90px rail. Stacked, a stray horizontal dash between two
     full-width cards reads as a rendering fault, so it is turned upright
     and the source -> target metaphor survives the reflow. */
  section[data-ref="sectionRef"] [style*="flex:0 0 90px"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 34px !important;
    transform: rotate(90deg);
    margin: 2px auto;
  }

  /* --- web-mobile device frame -------------------------------------
     page.js writes an explicit pixel width/height onto this element
     (560px at the start of the sequence). Parked at its final frame it
     resolves to the 220px "Mobile" size, which fits — but the ceiling is
     kept here so a mid-flight value can never overflow. */
  section[data-ref="sectionRef"] [data-ref="device"] {
    max-width: 100% !important;
  }

  /* --- data-analytics card flip ------------------------------------
     Three cards flip on rotateY. Released, they sit in normal flow and are
     parked mid-flip-complete (180deg, showing the back face). The 3D
     context needs an explicit perspective once it is no longer inside the
     pinned panel, or the flip renders flat. */
  #outcomes [data-ref^="card"] {
    transform-style: preserve-3d;
  }
}

/* ---- phone: tighten the released diagrams --------------------------- */
@media (max-width: 600px) {
  section[data-ref="sectionRef"] > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* the diagram cards carry 20px of their own padding on top of the
     section's; at 320px that leaves very little for the content itself */
  section[data-ref="sectionRef"] [style*="padding:20px"] {
    padding: 16px !important;
  }
}

/* ==== homepage: tablet range =========================================
   styles.css already releases #hero, #stage, #industries and the bolt band
   below 760px, and js/main.js has matching isNarrow() guards. That pairing
   works — the gap was that it started at 760px while the layouts do not
   actually fit until well above it.

   The industries gallery is the clearest case: it pans a ~1740px track
   through six cards, so a 768px iPad had no room to pan and the cards
   overlapped. main.js NARROW is raised to 1024 in step with this block;
   changing one without the other reintroduces the overlap.

   These rules deliberately mirror the ones in styles.css rather than
   editing them, so the original file stays untouched and the desktop
   cascade above 1024px is unchanged. */

@media (min-width: 601px) and (max-width: 1024px) {

  /* hero grows with its content instead of being held to one screen */
  #hero {
    height: auto !important;
    min-height: 100vh;
    padding-bottom: 32px;
  }
  #hero [style*="max-width:520px"] {
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  /* stage and industries release from pinning */
  #stage, #industries {
    height: auto !important;
  }
  #stage > div, #industries > div {
    position: static !important;
    height: auto !important;
  }

  /* the pan track becomes a two-up grid: at this width the cards are
     comfortable side by side, where a phone needs them stacked */
  #industries [data-ref="indTrack"] {
    flex-wrap: wrap;
    transform: none !important;
    width: 100%;
    padding: 0 clamp(20px, 3.5vw, 56px) !important;
    gap: 20px;
  }
  #industries [data-ref="indTrack"] > div {
    width: calc(50% - 10px) !important;
    flex: 0 0 calc(50% - 10px) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 260px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #industries > div {
    overflow-y: visible !important;
    justify-content: flex-start !important;
  }
  #industries > div > div:nth-of-type(2) {
    overflow: visible !important;
  }
  /* margin-top:auto pushed the bullet list to the bottom of a full-height
     card; released, the card is only as tall as its content */
  #industries [data-ref="indTrack"] > div > div:last-child {
    margin-top: 14px !important;
  }

  /* The oversized ghost numeral is desktop chrome sized against a much
     taller card; in the two-up grid it bleeds across the photo behind the
     bullet list. styles.css hides it outright below 760px — same here. */
  #industries [data-ref^="ig"] {
    display: none !important;
  }

  /* "01 / 06" is a position readout for the horizontal pan. With all six
     cards on screen at once there is no position to report, and a counter
     frozen at 01 next to six visible cards reads as a bug. */
  #industries [data-ref="indCount"],
  #industries [data-ref="indCount"] + span {
    display: none !important;
  }

  /* the progress rail tracks the same pan */
  #industries [data-ref="indBar"] {
    display: none !important;
  }

  /* The six tick labels stay as a legend, but the pan logic left them all
     dimmed to .4 (it highlights whichever card is active, and with no pan
     none is). Restored to full so they do not read as disabled. */
  #industries [data-ref^="it"] {
    opacity: 1 !important;
  }

  /* the bolt fly-through has no room to read at this width; main.js already
     stands the animation down, this reclaims the empty scroll runway */
  #bolt-transition {
    height: 100vh !important;
  }
  /* the band's negative pull-up assumes a 160vh runway that no longer
     exists once the band is collapsed, and would otherwise drag the next
     section up over the footer of this one */
  #deliverables {
    margin-top: 0 !important;
  }
}

/* The same negative margin has to be neutralised on phones, where
   styles.css already collapses the bolt band to 100vh. */
@media (max-width: 600px) {
  #deliverables {
    margin-top: 0 !important;
  }
}

/* The bolt fly-through has no room to play on a phone or tablet (main.js
   isNarrow() stands it down entirely), but styles.css and the tablet block
   above still reserve a full 100vh runway for it — since nothing animates
   into that space, it renders as a dead screen-height gap between "Why
   Sparktan" and "What you get". Collapsed to its content instead, the same
   way #stage/#industries release from their pinned desktop height. Declared
   last so it wins over the earlier 100vh rules at the same specificity. */
@media (max-width: 1024px) {
  #bolt-transition {
    height: auto !important;
  }
  .bolt-stick {
    position: static !important;
    height: auto !important;
    padding: 48px 20px !important;
    overflow: visible !important;
  }
  #bolt-transition [data-ref="boltCap"] {
    position: static !important;
    display: block;
    text-align: center;
  }
}

/* ==== homepage: "why it matters" outcomes ============================
   #outcomes is a two-column grid: the heading column is position:sticky so
   it holds still on the left while the four numbered rows scroll past on
   the right. That is the intended desktop behaviour and is untouched.

   Below 1024px the grid collapses to a single column, so the heading and
   the rows are stacked rather than side by side — and a sticky element in a
   single column pins itself on top of whatever follows it. The heading sat
   over rows 02-03 as they scrolled underneath.

   Releasing the sticky is the whole fix: stacked, the heading simply scrolls
   away above the rows like any other block. */
@media (max-width: 1024px) {
  #outcomes > div > div:first-child {
    position: static !important;
    top: auto !important;
  }
}

/* ==== service page heroes (all 10) ===================================
   The five static pages need much less than the pinned ones — their grids
   are `auto-fit` and reflow on their own. What does not reflow is the
   typography, which was clamped for desktop. */

@media (max-width: 600px) {

  /* --- breadcrumb eyebrow -------------------------------------------
     "Cloud Transformation -> Cloud Security & DevSecOps" is uppercase
     mono at .22em letter-spacing, which is what pushes it 16-40px past
     the viewport on every service page. It inherits nowrap rather than
     setting it, so allowing a wrap plus a slightly tighter track is
     enough — the label keeps its full text instead of being truncated. */
  section [style*="letter-spacing:.22em"] {
    white-space: normal !important;
    letter-spacing: .16em !important;
    line-height: 1.5;
  }

  /* --- hero headline -------------------------------------------------
     The clamp floors sit at 42-44px, sized against a desktop column. At
     320px that leaves roughly six characters per line and the headline
     runs very tall before the first CTA. Lowering only the floor keeps
     every larger width exactly as designed, since clamp() picks the
     middle term until the floor binds. */
  section h1[style*="clamp(44px"],
  section h1[style*="clamp(42px"] {
    font-size: clamp(32px, 9vw, 44px) !important;
  }

  /* the hero copy is capped at 15-16ch for a desktop measure; on a phone
     that is an unnecessarily narrow column */
  section h1[style*="max-width:15ch"],
  section h1[style*="max-width:16ch"] {
    max-width: 100% !important;
  }

  /* --- hero CTA ------------------------------------------------------
     "Get a migration assessment ->" is nowrap and is the widest single
     token in the hero. It fits at 375px but clips at 320px. */
  section a[style*="white-space:nowrap"][style*="background:#22c55e"] {
    white-space: normal !important;
    text-align: center;
    justify-content: center;
    width: 100%;
  }
}

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mnav-panel,
  .mnav-scrim,
  .mnav-bars,
  .mnav-bars::before,
  .mnav-bars::after {
    transition: none;
  }
}