/* =====================================================================
   INTEGRATION CENTER — page-specific styles.

   Rides on css/services-page.css for everything the site shares: the
   fixed 1280 canvas, the light stage gradient, the dark hero radial, the
   header and the footer. The palette is the site's - Space Grotesk 700
   #003159 headings, Inter 300 body, #80121d red.

   STRUCTURE. The page is SIX sections plus the footer. Each is an
   <section class="ic-sec"> with its own top and height, and everything
   inside a section is positioned relative to THAT section - never to the
   stage. Two reasons:

     1. It is the shape the scroll work needs. Each band has a single
        owning element to pin, scrub or snap to, and the page declares one
        snap landing per section (__snapStops in the page), so it already
        behaves like the rest of the site.
     2. Moving a section no longer means recomputing everything below it.
        Before this, one section growing by 400px meant hand-shifting four
        other blocks and the footer.

   The canvas stays static and fixed at 1280 - nothing reflows, the whole
   thing is scaled by width like every other page.

   Motion: GSAP + ScrollTrigger (js/vendor/) from js/integration-center.js.
   Nothing is hidden by CSS - initial states belong to the script - so no
   JavaScript means no motion, never missing content.
   ===================================================================== */

/* ---- the section rhythm: ONE BAND = ONE VIEWPORT --------------------
   A 16:9 screen shows exactly 720 canvas pixels, whatever its size: the
   canvas is scaled by width, so the visible height in canvas units is
   viewportHeight x 1280 / viewportWidth, and 1280/16*9 = 720. Every band
   is therefore 720 tall and every section fits one screen on any 16:9
   display - 1920x1080 and 2560x1440 alike. Taller windows (a 16:10 or a
   1280x860 browser) simply show a little air below each section, never a
   section cut in half.

   THE SAFE HEIGHT IS 560, NOT 720. 720 is what a 16:9 SCREEN shows. A
   WINDOW on that screen is smaller by its chrome - a fixed ~95px for the
   tab strip and address bar, ~125 with a bookmarks bar - and because that
   is a fixed number of pixels it costs a small monitor proportionally
   more:

       1366x768  -> ~565 canvas px       1920x1080 -> ~610
       1600x900  -> ~588                 1920x1200 -> ~700
       1440x900  -> ~653                 2560x1440 -> ~625

   560 is the floor across normal screens, so nothing is placed below it
   and each band centres its content inside it. The BAND stays 720 because
   it must be at least as tall as the most anyone sees, or the next
   section's heading would peek in at the bottom of a 16:10 window. On a
   roomy screen the spare space is bottom margin - the same picture,
   breathing.
   --------------------------------------------------------------------- */
#stage{ height:5210px; }
.sv-footer-shift{ top:-1515px; }   /* footer top 4380 = 5895 - 1515 */

.ic-sec{ position:absolute; left:0; width:1280px; height:720px; }
/* Everything in a band lives in this layer, which the page's fit() shifts
   down by half the slack between 560 and what the window shows, so the
   section is centred in the reader's screen whatever their chrome costs
   them. No script -> the variable is unset -> translateY(0) -> content at
   the top of its band, complete. */
.ic-band-in{
  position:absolute; left:0; top:0; width:1280px; height:560px;
  transform:translateY(var(--ic-shift, 0px));
}
.ic-sec--hero{ top:0; }
.ic-sec--caps{ top:780px; }
.ic-sec--flow{ top:1500px; }
.ic-sec--qual{ top:2220px; }
.ic-sec--fac{ top:2940px; }
.ic-sec--eng{ top:3660px; }

/* ---------------------------------------------------------------------
   1. HERO — on the services page's dark radial (the top 720px)
   --------------------------------------------------------------------- */
.ic-kicker{
  position:absolute; left:84px; top:140px; width:600px; margin:0;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.75);
}
.ic-h1{
  position:absolute; left:84px; top:172px; width:660px; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:54px;
  line-height:1.06; text-transform:uppercase; color:#ffffff;
}
.ic-lead{
  position:absolute; left:84px; top:316px; width:560px; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:20px;
  line-height:1.4; color:#ffffff;
}
/* The intro rides in a glass plate, the same device the data centre hero
   uses. The plate is the box; the paragraph takes its exact bounds and
   centres its own lines, so the copy can be edited without re-measuring
   anything. */
.ic-glass{
  position:absolute; left:84px; top:402px; width:560px; height:130px;
  border-radius:11px; background:rgba(255,255,255,0.10);
}
.ic-intro{
  position:absolute; left:114px; top:402px; width:500px; height:130px; margin:0;
  display:flex; align-items:center;
  font-family:'Inter',sans-serif; font-weight:300; font-size:15px;
  line-height:1.55; color:rgba(255,255,255,0.88);
}
/* The panel-room photo, in the right half the copy does not use.

   Positioned the way the rest of this hero is - absolutely, on the 1280
   canvas - because that IS the page's layout system; there is no grid or
   flex here to reuse.

     text  84..744 (the h1 is widest at 660)
     photo 796..1196, so 52px clear of it and flush with the 84px right
           margin every other section uses
     30..550 against a 560 safe height, centred on the 140..532 text block

   400x520 is 0.769 against the file's 0.770, so cover crops nothing - it
   is insurance, not a crop. pointer-events:none because a decorative
   photo must never take a click. */
.ic-hero-photo{
  position:absolute; left:796px; top:30px; width:400px; height:520px;
  pointer-events:none;
}
.ic-hero-photo img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:24px;
}
/* Below 900 the copy needs the full width, so the photo goes rather than
   stacking. (Under 768 the point is moot - mobile-view.js replaces the
   canvas entirely - but this covers the 768..900 band where it does not.) */
@media (max-width:900px){
  .ic-hero-photo{ display:none; }
}


/* ---------------------------------------------------------------------
   SECTION FURNITURE — shared by the light sections
   --------------------------------------------------------------------- */
.ic-h2{
  position:absolute; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:48px;
  line-height:1.03; text-transform:uppercase; color:#003159;
}
.ic-sub{
  position:absolute; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:20px;
  line-height:1.3; color:#80121d;
}
.ic-copy{
  position:absolute; margin:0;
  font-family:'Inter',sans-serif; font-weight:300; font-size:16px;
  line-height:1.6; color:#010101;
}
.ic-eyebrow{
  position:absolute; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:20px;
  letter-spacing:6.2px; text-transform:uppercase; color:#003159; opacity:0.55;
}

/* ---------------------------------------------------------------------
   2. CAPABILITIES — the OUR SCOPE OF SERVICE treatment from the data
   centre page: a dark band on that page's own radial, translucent glass
   panels with a blue outer glow and a 1px inner edge, and glowing cyan
   line icons. The icons are Lucide (ISC, assets/icons/) and are INLINED,
   so stroke="currentColor" takes the badge's colour - which is the whole
   reason they can go neon here and stay navy on mobile.

   The plate is on the SECTION rather than a layer behind it, so the dark
   is an ANCESTOR background of the white text and a contrast checker
   resolves against it instead of walking up to the stage's light
   gradient.
   --------------------------------------------------------------------- */
.ic-sec--caps{
  background-color:#0e1124;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1316 613' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(84.259 41.8 -89.738 211.07 110.85 79.097)'><stop stop-color='rgba(14,22,53,1)' offset='0.26927'/><stop stop-color='rgba(11,37,76,1)' offset='0.35147'/><stop stop-color='rgba(8,52,100,1)' offset='0.43366'/><stop stop-color='rgba(2,82,146,1)' offset='0.59805'/><stop stop-color='rgba(6,67,119,1)' offset='0.69854'/><stop stop-color='rgba(11,52,91,1)' offset='0.79902'/><stop stop-color='rgba(15,37,63,1)' offset='0.89951'/><stop stop-color='rgba(19,23,36,1)' offset='1'/></radialGradient></defs></svg>");
  /* one gradient spans the gutter AND this band - 805 tall, of which
     this box shows the lower 720. The bridge below shows the top 85,
     so the two meet with no join because it is one image. */
  background-size:1280px 805px; background-position:0 -85px;
  background-repeat:no-repeat;
}
/* The gutter between the hero plate and this band. It runs 695..780,
   not 720..780, and sits at z-index:-1 so it paints BEHIND the hero -
   the plate ends on 25px rounded corners and they would otherwise cut
   two pale notches of stage gradient out of the top of it.

   It carries the same image as the band, sized to the two of them
   together (805) and positioned at the top, so this box is simply the
   first 85px of the band's own gradient rather than an imitation of
   it. That is what makes the transition seamless. */
.ic-sec--caps::before{
  content:''; position:absolute; left:0; top:-85px; width:1280px; height:85px;
  z-index:-1; background-color:#0e1124;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1316 613' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(84.259 41.8 -89.738 211.07 110.85 79.097)'><stop stop-color='rgba(14,22,53,1)' offset='0.26927'/><stop stop-color='rgba(11,37,76,1)' offset='0.35147'/><stop stop-color='rgba(8,52,100,1)' offset='0.43366'/><stop stop-color='rgba(2,82,146,1)' offset='0.59805'/><stop stop-color='rgba(6,67,119,1)' offset='0.69854'/><stop stop-color='rgba(11,52,91,1)' offset='0.79902'/><stop stop-color='rgba(15,37,63,1)' offset='0.89951'/><stop stop-color='rgba(19,23,36,1)' offset='1'/></radialGradient></defs></svg>");
  background-size:1280px 805px; background-position:0 0;
  background-repeat:no-repeat;
}
.ic-sec--caps .ic-eyebrow,
.ic-sec--caps .ic-h2{ text-align:center; }
/* 6.2px of letter-spacing trails the last letter and centring counts it,
   which would leave the words 3.1px left of centre; this puts it back */
.ic-sec--caps .ic-eyebrow{ color:rgba(255,255,255,0.75); opacity:1; text-indent:6.2px; }
.ic-sec--caps .ic-h2{
  background-image:linear-gradient(102deg, rgb(255,255,255) 46.7%, rgb(182,225,255) 74.6%);
  background-clip:text; -webkit-background-clip:text; color:transparent;
}
.ic-cap{
  position:absolute; width:227px; height:180px; margin:0;
  box-sizing:border-box; padding:30px 16px 26px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  background-image:linear-gradient(to left, rgba(127,144,163,0.12), rgba(0,49,89,0.12));
  border:0; border-radius:12px;
  box-shadow:0 0 30px rgba(110,189,244,0.70), inset 0 0 0 1px rgba(255,255,255,0.20);
  transition:transform .28s ease, box-shadow .28s ease;
}
.ic-cap:hover{
  transform:translateY(-6px);
  box-shadow:0 0 42px rgba(110,189,244,0.85), inset 0 0 0 1px rgba(255,255,255,0.38);
}
.ic-cap-badge{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin:0;
  background:none; color:#7fd8ff;
  filter:drop-shadow(0 0 7px rgba(110,189,244,0.85));
  transition:color .28s ease, filter .28s ease, transform .28s ease;
}
.ic-cap:hover .ic-cap-badge{
  color:#ffffff; filter:drop-shadow(0 0 11px rgba(150,215,255,0.95)); transform:scale(1.08);
}
.ic-cap-i{ width:46px; height:46px; display:block; }
.ic-cap-t{
  margin:auto 0 0; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:16px; line-height:1.25; color:#ffffff; text-transform:uppercase;
  letter-spacing:0.2px;
}
.ic-cap-d{
  display:none;      /* nine columns cannot carry it; the phone still does */
  margin:0; font-family:'Inter',sans-serif; font-weight:300;
  font-size:11px; line-height:1.4; color:rgba(203,227,247,0.92);
  /* 0.92, not 0.82: composited over the panel above the radial's
     brightest point this is 5.1:1, and 12.5px counts as normal text, so
     it needs 4.5:1 rather than 3:1 */
}
/* ONE row of nine inside the 84px page margins: 110 wide, 125.25 apart,
   FIVE over FOUR, straight, no arc. Row one fills the canvas 40..1239 at
   243 apart; row two is the same card centred, 162..1118.

   Five across instead of nine is what makes the box big - 227 wide rather
   than 128 - and 227 is where the titles stop being cramped: at 16px in
   195px of content the worst of them, FACTORY ACCEPTANCE TESTING (FAT /
   IFAT), is two lines, and nothing here wraps past two.

   Two rows inside the 560 a browser window shows sets the height: heading
   to 121, rows of 180 with 18 between at 148 and 346, last bottom 526. So
   the box is 227x180 landscape where scope's is 202x253 portrait - the
   trade for two straight rows on one screen. */
.ic-cap--1{ left:40px; top:136px; }
.ic-cap--2{ left:283px; top:136px; }
.ic-cap--3{ left:526px; top:136px; }
.ic-cap--4{ left:769px; top:136px; }
.ic-cap--5{ left:1012px; top:136px; }
.ic-cap--6{ left:162px; top:334px; }
.ic-cap--7{ left:405px; top:334px; }
.ic-cap--8{ left:648px; top:334px; }
.ic-cap--9{ left:891px; top:334px; }

/* ---------------------------------------------------------------------
   3. WORKFLOW — an alternating timeline. A hairline rail with eight
   stations; cards sit above and below in turn, which is what buys the
   room for a line of description under each name. The rail draws itself
   left to right and each station ignites as the edge reaches it. Nothing
   loops when it is done.

   Every resting state here is the FINISHED one - rail drawn, arms out,
   nodes up. The script animates from a start state it sets itself, so no
   script (or a trigger that never fires) means a complete diagram, never
   an empty one.
   --------------------------------------------------------------------- */
.ic-flow{ position:absolute; left:84px; top:226px; width:1112px; height:280px; }

.ic-rail{
  position:absolute; left:76px; top:138px; width:960px; height:3px;
  background:rgba(0,49,89,0.13); border-radius:2px;
}
.ic-rail-fill{
  position:absolute; inset:0; border-radius:2px; background:#003159;
  transform:scaleX(1); transform-origin:left center;
}

.ic-stgs{ position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.ic-stg{ position:absolute; top:0; width:0; height:100%; }

/* The node rides the rail: 16px, centred on the 3px rule at y139.5.
   Every resting value in this section is the FINISHED one. The start
   states live under .is-armed below, which the timeline adds in its own
   onStart and removes on complete - so they exist only while the
   animation is actually running, and no script means a finished diagram
   rather than an empty one. */
.ic-stg-node{
  position:absolute; left:-8px; top:131px; width:16px; height:16px;
  box-sizing:border-box; border-radius:50%;
  background:#80121d; border:2px solid #80121d;
  box-shadow:0 0 0 3px rgba(128,18,29,0.17);
  transition:background-color .3s ease, border-color .3s ease,
             box-shadow .3s ease, transform .25s ease;
}
/* ---- the armed (pre-animation) state ----------------------------------
   Each tween starts from exactly the value its target already holds here,
   so a station animates in without first snapping out of view. Without
   this the tween's own start state would land the moment its turn came
   and the later cards would visibly blink. */
.ic-flow.is-armed .ic-rail-fill{ transform:scaleX(0); }
.ic-flow.is-armed .ic-stg-node{ opacity:0; transform:scale(0.2); transition:none; }
.ic-flow.is-armed .ic-stg-arm{ transform:scaleY(0); }
.ic-flow.is-armed .ic-stg-card{ opacity:0; }

/* Hover is what keeps this alive once it has finished, instead of a loop.
   :hover on .ic-stg fires from its children, so a zero-width station still
   works as the hover target for the card hanging off it. */
.ic-stg:hover .ic-stg-node{ transform:scale(1.32); }
.ic-stg:hover .ic-stg-arm{ background:rgba(128,18,29,0.45); }
.ic-stg:hover .ic-stg-t{ color:#80121d; }
/* one ring, once. The old version looped a pulse along the rail forever,
   which reads as "still loading" long after the thing has finished. */
.ic-stg-node::after{
  content:''; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid rgba(128,18,29,0.5); opacity:0; pointer-events:none;
}
.ic-flow.is-armed .ic-stg.is-on .ic-stg-node::after{ animation:ic-ring .95s ease-out 1 forwards; }
@keyframes ic-ring{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(3.4); opacity:0; }
}

/* the hairline tying a card to its node */
.ic-stg-arm{
  position:absolute; left:0; width:1px; height:18px;
  background:rgba(0,49,89,0.30); transform:scaleY(1);
  transition:background-color .25s ease;
}
.ic-stg--up .ic-stg-arm{ top:113px; transform-origin:bottom center; }
.ic-stg--dn .ic-stg-arm{ top:147px; transform-origin:top center; }

.ic-stg-card{
  position:absolute; left:-75px; width:150px; height:100px;
  display:flex; flex-direction:column; text-align:center;
}
.ic-stg--up .ic-stg-card{ top:13px;  justify-content:flex-end; }
.ic-stg--dn .ic-stg-card{ top:165px; justify-content:flex-start; }

.ic-stg-i{
  display:block; margin:0 0 6px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:2.4px; color:#80121d; opacity:0.85;
}
.ic-stg-t{
  margin:0 0 5px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:14px; line-height:1.2; letter-spacing:0.4px;
  text-transform:uppercase; color:#003159;
  transition:color .25s ease;
}
.ic-stg-d{
  margin:0; font-family:'Inter',sans-serif; font-weight:300;
  font-size:12px; line-height:1.45; color:#4a5a6c;
}

/* ---------------------------------------------------------------------
   6. THE VIDEO

   The data centre block's shape on this page's grid. The class names
   .en-media and .en-play are not decorative - js/video-embed.js looks for
   exactly those, so the block inherits poster-swapping and playback from
   the admin without a line of new script.

   747x420 is 16:9 to the pixel, centred at 267, and 140..560 puts it
   inside the height a real browser window shows.
   --------------------------------------------------------------------- */
.ic-eng-eyebrow{
  position:absolute; left:0; top:30px; width:1280px; margin:0;
  text-align:center; text-indent:6.2px;
}
.ic-sec--eng .ic-h2{
  position:absolute; left:0; top:58px; width:1280px; margin:0; text-align:center;
}
.ic-eng .en-media{
  position:absolute; left:267px; top:140px; width:747px; height:420px;
  border-radius:20px; overflow:hidden; background:#0e1b2c;
  box-shadow:0 18px 50px rgba(0,32,68,0.22);
}
.ic-eng .en-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ic-eng .en-play{
  position:absolute; left:570px; top:280px; width:140px; height:140px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;                 /* the media is the click target */
}
.ic-eng .en-play > i{
  flex:none; display:block; width:140px; height:140px; position:relative;
  transform:rotate(90deg);
}
.ic-eng .en-play img{
  position:absolute; left:6.7%; top:0; width:86.6%; height:75%;
  display:block; max-width:none;
}

/* ---------------------------------------------------------------------
   4. QUALITY, AND THE PROOF UNDER IT

   Full-bleed navy rather than a slab on the stage, and stacked rather
   than split: the claim, the six checks it rests on, a rule, then the
   four figures. The previous version put the case and the evidence in
   two columns of a box; this is the order they are actually read in.
   --------------------------------------------------------------------- */
.ic-sec--qual{
  background-color:#16243a;
  background-image:radial-gradient(120% 130% at 50% 0%, #22364f 0%, #16243a 52%, #101b2c 100%);
}
.ic-quality{ position:absolute; inset:0; }

.ic-q-eyebrow{
  position:absolute; left:0; top:44px; width:1280px; margin:0;
  text-align:center; text-indent:6.2px; color:rgba(255,255,255,0.55); opacity:1;
}
.ic-quality .ic-h2{
  position:absolute; left:0; top:74px; width:1280px; margin:0;
  text-align:center; color:#ffffff;
}
.ic-quality .ic-sub{
  position:absolute; left:0; top:142px; width:1280px; margin:0;
  text-align:center; color:#7fd8ff;
}
.ic-quality .ic-copy{
  position:absolute; left:340px; top:176px; width:600px; margin:0;
  text-align:center; font-size:15px; color:rgba(255,255,255,0.72);
}

/* six chips, three to a row, 336 wide and 22 apart - 1052 centred at 114 */
.ic-check{ position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.ic-chk{
  position:absolute; width:336px; height:54px; box-sizing:border-box;
  padding:0 20px 0 18px; display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  font-family:'Inter',sans-serif; font-weight:300; font-size:15px;
  line-height:1.3; color:#ffffff;
}
/* The icon is markup, so it is there whether or not the script runs -
   the tick it replaces was a pseudo-element gated on .is-ticked, which
   made the mark content that a stalled script could withhold. .is-ticked
   now only warms the colour. */
.ic-chk-i{
  flex:none; width:22px; height:22px; display:block; color:#7fd8ff;
  filter:drop-shadow(0 0 6px rgba(110,189,244,0.6));
  transition:color .3s ease, filter .3s ease;
}
.ic-chk.is-ticked .ic-chk-i{ color:#9fe2ff; }
.ic-chk:hover .ic-chk-i{ color:#ffffff; filter:drop-shadow(0 0 10px rgba(150,215,255,0.9)); }
.ic-chk--1{ left:114px; top:236px; } .ic-chk--2{ left:472px; top:236px; } .ic-chk--3{ left:830px; top:236px; }
.ic-chk--4{ left:114px; top:306px; } .ic-chk--5{ left:472px; top:306px; } .ic-chk--6{ left:830px; top:306px; }

.ic-rule{
  position:absolute; left:114px; top:396px; width:1052px; height:1px;
  background:rgba(255,255,255,0.13);
}

/* four figures across the foot of the band */
.ic-stat{ position:absolute; top:432px; width:263px; }
.ic-stat--1{ left:114px; } .ic-stat--2{ left:377px; }
.ic-stat--3{ left:640px; } .ic-stat--4{ left:903px; }
.ic-stat-n{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:44px; line-height:1; color:#ffffff;
}
.ic-stat-l{
  display:block; margin-top:12px; font-family:'Inter',sans-serif;
  font-weight:300; font-size:13.5px; line-height:1.4; color:rgba(255,255,255,0.58);
}

/* ---------------------------------------------------------------------
   5. THE FACILITY — a zone index, not a second card deck

   The render and its hotspots are gone: text sitting on a photograph was
   the thing to remove. With the picture gone the seven areas needed a
   home that is not another grid of cards, because seven of them are the
   same seven already in Capabilities and a second deck would read as the
   page repeating itself. So: ghost numerals, a name, one line each, two
   columns, and room to breathe.
   --------------------------------------------------------------------- */
.ic-areas{ position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.ic-area{ position:absolute; width:520px; padding-left:70px; box-sizing:border-box; }
.ic-area-n{
  position:absolute; left:0; top:-6px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:34px;
  line-height:1; color:rgba(0,49,89,0.20);
  transition:color .25s ease;
}
.ic-area-t{
  margin:0 0 5px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:17px; line-height:1.2; letter-spacing:0.3px;
  text-transform:uppercase; color:#003159;
}
.ic-area-d{
  margin:0; font-family:'Inter',sans-serif; font-weight:300;
  font-size:13.5px; line-height:1.5; color:#4a5a6c;
}
.ic-area:hover .ic-area-n{ color:rgba(128,18,29,0.75); }

/* two columns of four, 84 and 664, rows 80 apart */
.ic-area--1{ left:84px;  top:240px; } .ic-area--2{ left:84px;  top:322px; }
.ic-area--3{ left:84px;  top:404px; } .ic-area--4{ left:84px;  top:486px; }
.ic-area--5{ left:664px; top:240px; } .ic-area--6{ left:664px; top:322px; }
.ic-area--7{ left:664px; top:404px; }

/* ---------------------------------------------------------------------
   NO HOVER WHILE THE PAGE IS MOVING

   Scrolling with a still pointer drags the content under it, so every
   card that passes the cursor lifts and drops - which reads as the whole
   section bouncing. js/integration-center.js sets .is-scrolling for 140ms
   after the last scroll event; making the hover targets inert for that
   window is enough to stop it, and none of them are links.
   --------------------------------------------------------------------- */
html.is-scrolling .ic-cap,
html.is-scrolling .ic-stg,
html.is-scrolling .ic-chk,
html.is-scrolling .ic-area{ pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .ic-flow.is-armed .ic-stg.is-on .ic-stg-node::after{ animation:none; opacity:0; }
  .ic-cap, .ic-stg-node, .ic-chk::after, .ic-area-n{ transition:none; }
}


/* =====================================================================
   MOBILE (<=768px) — the phone mirrors the canvas band for band.

   mobile-view.js rebuilds the DOM below 768px, so none of the canvas
   rules above apply here; these are the same designs expressed in flow
   layout. The two gradients are LIFTED from .sv-hero-bg and
   .ic-sec--caps rather than re-approximated, so they are the same
   gradients and cannot drift from them.
   ===================================================================== */
@media (max-width: 768px){

  /* hero: the desktop radial, since the render it used to show is gone */
  /* .mv-hero.mv-hero--ic, not .mv-hero--ic: mobile.css loads later and its
     `background:` shorthand would otherwise reset this to none */
  .mv-hero.mv-hero--ic{
    background-color:#04070d;
    background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1278 942' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-48.15 57.229 -38.707 -37.65 566 651.23)'><stop stop-color='rgba(4,236,255,1)' offset='0'/><stop stop-color='rgba(17,230,254,1)' offset='0.0062188'/><stop stop-color='rgba(30,224,252,1)' offset='0.012438'/><stop stop-color='rgba(57,213,250,1)' offset='0.024875'/><stop stop-color='rgba(83,201,247,1)' offset='0.037313'/><stop stop-color='rgba(110,189,244,1)' offset='0.049751'/><stop stop-color='rgba(88,152,200,1)' offset='0.22198'/><stop stop-color='rgba(66,114,155,1)' offset='0.3942'/><stop stop-color='rgba(44,77,110,1)' offset='0.56643'/><stop stop-color='rgba(33,59,88,1)' offset='0.65254'/><stop stop-color='rgba(22,40,66,1)' offset='0.73866'/><stop stop-color='rgba(11,20,33,1)' offset='0.86933'/><stop stop-color='rgba(6,10,17,1)' offset='0.93466'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
    background-size:cover; background-position:center;
  }
  /* the inherited scrim is there to keep copy legible over a PHOTO; at
     .55/.75 it flattens this radial, and there is no photo to fight */
  .mv-hero.mv-hero--ic::after{
    background:linear-gradient(180deg, rgba(4,7,13,0.22), rgba(4,7,13,0.48));
  }

  /* ---- capabilities: the scope band ---- */
  /* .mv-sec.mv-ic-caps: mobile.css's .mv-sec--dark loads later at the
     same specificity and would otherwise keep its own gradient */
  .mv-sec.mv-ic-caps{
    background-color:#0e1124;
    background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1316 613' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(84.259 41.8 -89.738 211.07 110.85 79.097)'><stop stop-color='rgba(14,22,53,1)' offset='0.26927'/><stop stop-color='rgba(11,37,76,1)' offset='0.35147'/><stop stop-color='rgba(8,52,100,1)' offset='0.43366'/><stop stop-color='rgba(2,82,146,1)' offset='0.59805'/><stop stop-color='rgba(6,67,119,1)' offset='0.69854'/><stop stop-color='rgba(11,52,91,1)' offset='0.79902'/><stop stop-color='rgba(15,37,63,1)' offset='0.89951'/><stop stop-color='rgba(19,23,36,1)' offset='1'/></radialGradient></defs></svg>");
    background-size:cover; background-position:center;
  }
  .mv-ic-cap{
    margin:0 0 14px; padding:22px 18px 20px; border-radius:12px; text-align:center;
    background-image:linear-gradient(to left, rgba(127,144,163,0.12), rgba(0,49,89,0.12));
    box-shadow:0 0 22px rgba(110,189,244,0.35), inset 0 0 0 1px rgba(255,255,255,0.18);
  }
  .mv-ic-cap-badge{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin:0 auto 12px;
    color:#7fd8ff; filter:drop-shadow(0 0 7px rgba(110,189,244,0.85));
  }
  .mv-ic-cap-badge svg{ width:34px; height:34px; display:block; }
  .mv-ic-cap-t{
    margin:0 0 6px; font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:15px; line-height:1.25; letter-spacing:0.2px;
    text-transform:uppercase; color:#ffffff;
  }
  .mv-ic-cap-d{
    margin:0; font-family:'Inter',sans-serif; font-weight:300;
    font-size:13.5px; line-height:1.5; color:rgba(203,227,247,0.92);
  }

  /* ---- quality ---- */
  .mv-sec.mv-ic-qual{
    background-color:#16243a;
    background-image:radial-gradient(120% 130% at 50% 0%, #22364f 0%, #16243a 52%, #101b2c 100%);
  }
  .mv-ic-eyebrow{
    margin:0 0 10px; text-align:center;
    font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:11px;
    letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.55);
  }
  .mv-ic-eyebrow--dark{ color:rgba(0,49,89,0.55); text-align:left; }
  .mv-ic-sub{
    margin:0 0 14px; text-align:center;
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px;
    color:#7fd8ff;
  }
  .mv-ic-qcopy{ text-align:center; }
  .mv-ic-chk{ list-style:none; margin:20px 0 0; padding:0; }
  .mv-ic-chk li{
    display:flex; align-items:center; gap:12px;
    margin:0 0 10px; padding:13px 16px; border-radius:10px;
    background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.14);
    font-family:'Inter',sans-serif; font-weight:300; font-size:14.5px;
    line-height:1.35; color:#ffffff;
  }
  .mv-ic-chk svg{
    flex:none; width:20px; height:20px; display:block; color:#7fd8ff;
    filter:drop-shadow(0 0 6px rgba(110,189,244,0.6));
  }
  .mv-ic-stats{ margin-top:26px; }
  /* no card here - the canvas shows these as bare figures on the band */
  .mv-ic-stats .mv-stat{ background:none; box-shadow:none; padding:0; gap:8px; }
  /* .mv-stat-n paints through background-clip:text with color:transparent,
     so the clip has to be turned off before a colour means anything */
  .mv-ic-stats .mv-stat-n{
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    color:#ffffff;
  }
  .mv-ic-stats .mv-stat-l{ color:rgba(255,255,255,0.58); }

  /* ---- workflow: the canvas timeline, vertical ----
     Every resting value here is the FINISHED state - rail drawn, nodes up,
     text in place. The start states are under .is-armed, which the script
     adds only while the run is going. No script means a finished diagram. */
  .mv-ic-flow{ position:relative; margin:22px 0 0; }
  .mv-ic-flow-rail, .mv-ic-flow-fill{
    position:absolute; left:16px; top:8px; bottom:8px; width:2px; border-radius:2px;
  }
  .mv-ic-flow-rail{ background:rgba(0,49,89,0.13); }
  .mv-ic-flow-fill{
    background:#003159; transform-origin:top center; transform:scaleY(1);
    transition:transform var(--mv-flow-dur, 3.15s) linear;
  }
  .mv-ic-flow-list{ position:relative; margin:0; padding:0; list-style:none; }
  .mv-ic-stg{ position:relative; padding-left:52px; margin:0 0 24px; }
  .mv-ic-stg:last-child{ margin-bottom:0; }
  .mv-ic-stg-n{
    position:absolute; left:0; top:-2px; width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:#80121d; color:#ffffff;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px;
    box-shadow:0 0 0 4px rgba(128,18,29,0.12);
    transition:opacity .35s ease, transform .45s cubic-bezier(.2,1.4,.4,1);
  }
  .mv-ic-stg-c{ transition:opacity .45s ease, transform .5s cubic-bezier(.2,.8,.3,1); }
  .mv-ic-stg-t{
    margin:5px 0 4px; font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:14.5px; line-height:1.2; letter-spacing:0.3px;
    text-transform:uppercase; color:#003159;
  }
  .mv-ic-stg-d{
    margin:0; font-family:'Inter',sans-serif; font-weight:300;
    font-size:13.5px; line-height:1.5; color:#4a5a6c;
  }
  /* the armed (pre-run) state - each transition starts from the value its
     target already holds here, so nothing snaps out of view first */
  .mv-ic-flow.is-armed .mv-ic-flow-fill{ transform:scaleY(0); }
  .mv-ic-flow.is-armed .mv-ic-stg-n{ opacity:0; transform:scale(0.2); }
  .mv-ic-flow.is-armed .mv-ic-stg-c{ opacity:0; transform:translateY(12px); }
  .mv-ic-flow.is-armed .mv-ic-stg.is-on .mv-ic-stg-n{ opacity:1; transform:scale(1); }
  .mv-ic-flow.is-armed .mv-ic-stg.is-on .mv-ic-stg-c{ opacity:1; transform:none; }

  /* ---- the facility: the zone index ---- */
  .mv-ic-area{ position:relative; padding-left:54px; margin:0 0 22px; }
  .mv-ic-area-n{
    position:absolute; left:0; top:-4px;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px;
    line-height:1; color:rgba(0,49,89,0.20);
  }
  .mv-ic-area-t{
    margin:0 0 4px; font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:15px; line-height:1.2; letter-spacing:0.3px;
    text-transform:uppercase; color:#003159;
  }
  .mv-ic-area-d{
    margin:0; font-family:'Inter',sans-serif; font-weight:300;
    font-size:13.5px; line-height:1.5; color:#4a5a6c;
  }
}