/* Page-only styles for cybersecurity.html — loaded after styles.css, only on this page.
   Sizes follow the 1440px Figma frame "01_Cybersecurity": min(Xvw, Ypx) with X = Y / 14.4. */

.page-cybersecurity .bg-ink { background: var(--ink); }
/* design type has no tracking */
.page-cybersecurity .display, .page-cybersecurity .h2, .page-cybersecurity .lead { letter-spacing: 0; }

/* ---------- sections & lens backgrounds ----------
   Every dark→light / light→dark change uses the designer's lens SVGs (assets/svg/cyber-bg-*.svg, 2080 wide),
   rasterised to img/cyber-bg-*-top.webp / -end.webp (Chrome paints big filtered SVG backgrounds per raster
   tile, which left visible seams):
   a blurred blue → amber band on the curved top edge of a #fafafa / #111 lens. 1 SVG unit = 1 design px at
   1440 (the 1780-wide lens is centred, so the 2080 canvas sits at -320px), scaled like everything else by
   --u = min(.0694vw, 1px). The SVG hangs --ov units above the section box so its band overlaps the previous
   section's bottom (each section stacks above the one before it). Below the SVG the section is solid; the
   band-less lens bottom (cyber-bg-*-end.webp) closes the lens at the bottom, fading to the next section's
   colour (--next), which the next section's band then covers. */
.cy-sec { position: relative; z-index: 1; }
.cy-lsec {
  --u: min(.06944vw, 1px); --sw: max(144.44vw, calc(var(--u) * 2080));
  --self: var(--paper); --prev: var(--ink); --next: var(--self); --solid: 450; --svgh: 700; --bodyh: 808;
}
.cy-lsec.dark { --self: var(--ink); --prev: var(--paper); --solid: 500; --svgh: 750; --bodyh: 841; }
.page-cybersecurity .cy-lsec {
  background: linear-gradient(var(--prev) 0 max(0px, calc(var(--u) * (var(--solid) - var(--ov)))),
    var(--self) 0 calc(100% - var(--u) * 460), var(--next) 0);
}
.cy-lsec::before, .cy-lsec.has-end::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat;
}
.cy-lsec::before {
  top: calc(var(--u) * var(--ov) * -1); height: calc(var(--u) * var(--svgh));
  /* never hang below the section (the section after covers the overflow, but the last one must not leak) */
  max-height: calc(100% + var(--u) * var(--ov));
  background-position: center top; background-size: var(--sw) calc(var(--u) * var(--svgh));
}
.cy-lsec.has-end::after {
  /* never starts above the point where the top piece is solid (short sections would hide the band) */
  bottom: 0; top: max(calc(var(--u) * (var(--solid) - var(--ov))), calc(100% - var(--u) * var(--bodyh)));
  background-position: center bottom; background-size: var(--sw) calc(var(--u) * var(--bodyh));
}
.cy-lsec.light::before { background-image: url("../../img/cyber-bg-light-top.webp"); }
.cy-lsec.dark::before { background-image: url("../../img/cyber-bg-dark-top.webp"); }
.cy-lsec.light.has-end::after { background-image: url("../../img/cyber-bg-light-end.webp"); }
.cy-lsec.dark.has-end::after { background-image: url("../../img/cyber-bg-dark-end.webp"); }
/* hero → statement: the band starts at the hero's bottom edge (the first screen stays plain #111) */
/* light → dark: as in the design, the light section stays #fafafa underneath and only the dark lens's own band
   fades it out (a light lens end fading to #111 under it started the fade ~100px too early) */
.cy-statement { --ov: 60; --next: var(--paper); }
.cy-wwd { --ov: 380; }
.cy-otsec { --ov: 330; --next: var(--paper); }
.cy-testing { --ov: 380; }
/* AI → certifications: the design's fade is longer (~440px) and the heading sits ~100px below the solid white,
   so this lens is drawn 1.19x taller (and the heading sits lower in the section) */
.cy-certsec { --ov: 330; --svgh: 830; --solid: 534; --next: var(--white); }
/* the certifications block is pure white in the design (#f5f5f5 tiles on #fff): the lens's #fafafa is lifted to
   #fff and no lens end is needed */
.page-cybersecurity .cy-certsec { --self: var(--white); }
.cy-certsec::before { filter: brightness(1.02); }
.cy-lsec.cy-certsec::after { content: none; }

/* hero eyebrow: Regular 18 / 23 in the design (section eyebrows stay 16) */
@media (min-width: 768px) { .page-cybersecurity .hero .eyebrow { font-size: min(1.25vw, 18px); line-height: 1.278; } }

/* hero glow = Ellipse 39 (983x464 @229,-292, layer blur 400 → CSS 200px): amber on the left → blue on the right */
.page-cybersecurity .hero--glow .hero-media::before {
  top: max(-20.28vw, -292px); width: min(68.26vw, 983px); opacity: 1;
  background: linear-gradient(99deg, var(--amber) 18.5%, #5f7d9e 52%, #4a6e98 93%); filter: blur(min(13.89vw, 200px));
}
.page-cybersecurity .hero--glow .hero-media::after { background: none; }

.page-cybersecurity .hero { padding-bottom: min(6.944vw, 100px); }

/* paddings in SVG units: content clears the band (eyebrows sit just below where the glow turns solid, as in the
   reference), and a section's bottom padding holds the next section's hanging band (its --ov) */
.cy-statement { padding: calc(var(--u) * 350) 0 calc(var(--u) * 388); }
.cy-wwd { padding: calc(var(--u) * 60) 0 min(13.958vw, 201px); }
.cy-itsec { padding: min(6.944vw, 100px) 0 min(29.65vw, 427px); }
.cy-otsec { padding: calc(var(--u) * 15) 0 calc(var(--u) * 450); }
.cy-testing { padding: calc(var(--u) * 12) 0 min(6.944vw, 100px); }
.cy-aisec { padding: min(6.944vw, 100px) 0 min(29.86vw, 430px); }
.cy-certsec { padding: calc(var(--u) * 180) 0 min(10.417vw, 150px); }
.cy-resilient { padding: 0 0 min(6.944vw, 100px); }

/* section heads: design text-box widths */
.page-cybersecurity .section-head { margin-bottom: min(4.444vw, 64px); }
.page-cybersecurity .section-head.center { max-width: none; margin-inline: auto; }
.cy-wwd .section-head .body { max-width: min(35.9vw, 517px); }
.cy-itsec .section-head .body { max-width: min(52.22vw, 752px); }
.cy-otsec .section-head .body { max-width: min(64.44vw, 928px); }
.cy-testing .section-head .body { max-width: min(42.01vw, 605px); }
.cy-certsec .section-head .body { max-width: min(38.4vw, 553px); }

/* ---------- statement ---------- */
.cy-statement-inner { display: grid; justify-items: start; padding-inline: min(8.06vw, 116px); }
.cy-statement-inner .lead { max-width: min(78.333vw, 1128px); line-height: 1.091; margin-top: min(2.222vw, 32px); text-wrap: wrap; }
/* scroll reveal (cybersecurity.js), after unitedcarriers.com's intro text: the statement is split into its
   rendered lines; each line fades in from left to right (a soft-edged wipe of the ink colour) as the page
   scrolls, the lines staggered one after another. --p = 30 (hidden) … 100 (fully shown). */
.cy-fill.lines .ln {
  display: block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--ink) 0%, var(--ink) 30%, rgba(17, 17, 17, 0) 50%, rgba(17, 17, 17, 0) 100%);
  background-size: 350% 100%; background-repeat: no-repeat;
  background-position: calc((100 - var(--p, 30)) * 1%) 0;
}
.cy-statement-inner .btn { margin-top: min(3.333vw, 48px); }

/* ---------- shared card bits ---------- */
.cy-risk, .cy-it, .cy-ot, .cy-ai, .cy-defense {
  position: relative; overflow: hidden; isolation: isolate; color: var(--white);
  border-radius: var(--radius); background-repeat: no-repeat; background-size: 100% 100%;
}
.cy-risk h3, .cy-it h3, .cy-ot h3, .cy-ai h3, .cy-defense h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.094; letter-spacing: 0; }
.cy-ill { position: absolute; height: auto; max-width: none; pointer-events: none; }
/* 1px gradient stroke on the highlighted cards */
.cy-defense::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(160deg, #8fb0d6, rgba(255,255,255,.45) 45%, rgba(255,255,255,.14) 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* cards with Figma hover artwork: the hover background (rim glow) fades in under the text and illustration,
   and the illustration lifts a little */
.has-hov::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: var(--hov) no-repeat 0 0 / 100% 100%; opacity: 0; transition: opacity .45s var(--ease);
}
.has-hov:hover::before { opacity: 1; }
.has-hov .cy-ill { transition: transform .6s var(--ease-out); }
.has-hov:hover .cy-ill { transform: translateY(-6px); }

/* ---------- what we do: risk masonry ---------- */
.cy-risk-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: min(19.72vw, 284px) min(10vw, 144px) min(19.72vw, 284px);
  gap: min(2.083vw, 30px);
}
.cy-risk { background-color: var(--panel); padding: min(1.667vw, 24px); }
.cy-risk h3 { position: relative; z-index: 1; }
.cy-risk h3.dn { margin-top: min(.833vw, 12px); }
/* compliance card: its 2-line title sits 12px lower and its copy 18px below it (design "Title"/"Subtitle" @36/@124) */
.cy-risk h3.dn + p { margin-top: min(1.25vw, 18px); }
.cy-risk p { position: relative; z-index: 1; font-size: var(--fs-body); line-height: 1.278; margin-top: min(.833vw, 12px); }

/* small tablets: type sits at its minimum size while the cards keep shrinking, so keep the copy in the
   left half, clear of the illustration */
@media (min-width: 768px) and (max-width: 1100px) {
  .cy-risk p { max-width: 50% !important; }
}

/* ---------- IT security ---------- */
.page-cybersecurity .cy-itsec { background: var(--ink) url("../../img/cyber-it-section.jpg") top center / 100% auto no-repeat; }
.cy-lens { position: absolute; left: 0; right: 0; aspect-ratio: 1440 / 170; background: center / 100% 100% no-repeat; pointer-events: none; }
.cy-lens.blue { bottom: calc(100% - .139vw); background-image: url("../../img/cyber-lens-blue.jpg"); }
.cy-lens.amber { top: -.139vw; background-image: url("../../img/cyber-lens-amber.jpg"); }
.cy-it-track.sec-cards {
  display: flex; gap: min(1.389vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 0; scrollbar-width: none; margin-right: calc(var(--gutter) * -1);
}
.cy-it-track::-webkit-scrollbar { display: none; }
.cy-it {
  flex: 0 0 min(46.18vw, 665px); height: min(30.556vw, 440px); scroll-snap-align: start;
  background-color: #181818; box-shadow: inset 0 0 0 1px #363636; padding: min(3.056vw, 44px);
}
.cy-it.lit { box-shadow: none; }
.cy-it .copy { position: relative; z-index: 1; max-width: min(22.08vw, 318px); }
.cy-it p { font-size: var(--fs-small); line-height: 1.25; margin-top: min(.833vw, 12px); }
.cy-itsec .scroller-controls { margin-top: min(1.25vw, 18px); }
/* design: plain row of cards with the third peeking, no arrows. The track stays focusable/scrollable
   (keyboard, trackpad, touch) and cybersecurity.js adds mouse drag-to-scroll. */
@media (min-width: 768px) {
  .cy-itsec .scroller-controls { display: none; }
  .cy-it-track.sec-cards { cursor: grab; }
  .cy-it-track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
}

/* ---------- OT security ---------- */
.cy-ot-row { display: grid; grid-template-columns: 781fr 549fr; gap: min(2.083vw, 30px); }
.cy-ot-row.r2 { grid-template-columns: 549fr 781fr; margin-top: min(2.083vw, 30px); }
.cy-ot {
  height: min(29.861vw, 430px); background-color: var(--ink); padding: min(3.056vw, 44px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cy-ot.top { justify-content: flex-start; }
.cy-ot .copy { position: relative; z-index: 1; }
.cy-ot p { font-size: var(--fs-body); line-height: 1.278; margin-top: min(1.111vw, 16px); }

/* ---------- offensive / defensive ---------- */
.cy-seg {
  position: relative; isolation: isolate; display: flex; width: fit-content; margin: 0 auto min(3.611vw, 52px); padding: min(.417vw, 6px);
  border-radius: 40px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
/* thin light rim on the track (brighter at the ends) */
.cy-seg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 45%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* the dark glass pill slides to the selected tab (position from main.js: --x, --w) */
.cy-seg::after {
  content: ""; position: absolute; z-index: -1; top: min(.417vw, 6px); bottom: min(.417vw, 6px); left: 0; width: var(--w, 50%);
  transform: translateX(var(--x, 0)); border-radius: 40px; background: linear-gradient(180deg, #171717, #0d0d0d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.26), 0 2px 10px rgba(0,0,0,.55);
  transition: transform .55s var(--ease-out), width .55s var(--ease-out);
}
.cy-seg:not(.is-ready)::after { opacity: 0; }
.cy-seg button {
  min-height: min(3.889vw, 56px); padding: 0 min(2.083vw, 30px); border-radius: 40px; color: rgba(255,255,255,.7);
  font-size: var(--fs-body); line-height: 1.278; transition: color .3s, background-color .3s;
}
.cy-seg button[aria-selected="true"] { color: var(--white); }
.cy-seg button[aria-selected="false"]:hover { color: var(--white); background: rgba(255,255,255,.06); }
.cy-seg button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* both panels share one grid cell, so the card is always as tall as the taller head: switching tabs never shifts the page */
.cy-panels { display: grid; }
.cy-panels > .tabpanel { grid-area: 1 / 1; display: grid; animation: none; transition: opacity .4s var(--ease), visibility .4s; }
.cy-panels > .tabpanel[hidden] { display: grid; visibility: hidden; opacity: 0; }
.cy-defense { background-color: var(--panel); background-size: 100% 100%; display: flex; flex-direction: column; }
/* head box = card y 0–240; the bottom padding is trimmed so a 3-line (draft) offensive intro still fits in 240 */
.cy-defense .head { position: relative; z-index: 1; padding: min(2.778vw, 40px) min(2.778vw, 40px) min(1.944vw, 28px); max-width: min(53.54vw, 771px); min-height: min(16.67vw, 240px); }
.cy-defense .kicker { display: flex; align-items: center; gap: min(.556vw, 8px); font-size: var(--fs-small); font-weight: 500; line-height: 1.25; margin: 0; }
.cy-defense .kicker svg { width: min(1.667vw, 24px); height: min(1.667vw, 24px); flex: none; }
.cy-defense .kicker span { background: linear-gradient(90deg, var(--blue) 0 40%, #fff 115%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cy-defense h3 { margin-top: min(2.222vw, 32px); }
.cy-defense .head p:not(.kicker) { font-size: var(--fs-body); line-height: 1.278; margin-top: min(.833vw, 12px); }
.cy-flow-scroll { position: relative; }
/* bottom accent: blue wedge (Rectangle 4640, #007aff → #013062) under a white lens (Rectangle 4665, 936 wide)
   with a progressive blur — soft at the top, crisp at the panel's bottom edge */
/* crisp (blur 0 in the design): the 1614x38 wedge peaks at the card centre and leaves the card edges 15px high,
   #007aff at its tip → #013062 half-way down; the white 936x18 lens sits on the bottom edge */
.cy-rim { position: absolute; left: 0; right: 0; bottom: 0; height: min(4.167vw, 60px); z-index: 1; pointer-events: none; }
.cy-rim > span { position: absolute; inset: 0; }
.cy-rim > span::before, .cy-rim > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; }
.cy-rim > span::before { top: 0; background: linear-gradient(to top, rgba(0,88,190,.5), rgba(0,88,190,.18) 45%, rgba(0,88,190,0)); }
.cy-rim > span::after {
  height: 70%; background: radial-gradient(48% 100% at 50% 100%, rgba(200,214,230,.85), rgba(110,145,190,.45) 28%, rgba(60,100,160,0) 70%);
}
.cy-flow-scroll { margin-top: auto; }
.cy-flow { position: relative; aspect-ratio: 1360 / 400; container-type: inline-size; background: url("../../img/cyber-defense-art.webp") center / 100% 100% no-repeat; }
/* labels scale with the diagram (14px at 1360px) so they never drift onto the wires */
.cy-flow .lbl { position: absolute; white-space: nowrap; font-size: 1.0294cqw; line-height: 1.286; }
.cy-flow .red { color: #ff3b3b; }
.cy-flow .green { color: #20aa16; }
.cy-flow .node { color: var(--white); }
.cy-flow .grad { font-size: 1.1765cqw; line-height: 1.25; background: linear-gradient(90deg, var(--amber) 5%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cy-flow .shield-mark { position: absolute; width: 5.441%; aspect-ratio: 1; color: var(--white); }
.cy-flow .shield-mark svg { width: 100%; height: 100%; display: block; }

/* ---------- AI security ---------- */
.cy-ai-layout { display: grid; grid-template-columns: 549fr 666fr; column-gap: min(10.07vw, 145px); align-items: start; }
.cy-ai-intro { position: sticky; top: 120px; display: grid; justify-items: start; gap: min(1.111vw, 16px); }
.cy-ai-intro .btn { margin-top: min(2.222vw, 32px); }
.cy-ai-cards { display: grid; gap: min(1.667vw, 24px); }
/* AI cards stack while scrolling (like trustkey.framer.website): each sticks 30px lower than the one before,
   so the stack keeps every earlier card's top edge in view; the heading fades white → grey */
@media (min-width: 768px) and (min-height: 560px) {
  .cy-ai { position: sticky; top: calc(120px + var(--k, 0) * 30px); box-shadow: 0 -12px 30px rgba(0, 0, 0, .45); }
  .cy-ai-cards { padding-bottom: min(6vw, 90px); }
}
.cy-ai-intro .h2 { background: linear-gradient(180deg, #fff 35%, #8c8c8c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cy-ai { min-height: min(20.833vw, 300px); background-color: var(--panel); padding: min(2.222vw, 32px); }
.cy-ai h3, .cy-ai p, .cy-ai ul { position: relative; z-index: 1; }
.cy-ai p { font-size: var(--fs-body); line-height: 1.278; margin-top: min(.833vw, 12px); }
.cy-ai ul { margin-top: min(1.389vw, 20px); display: grid; gap: min(.556vw, 8px); max-width: min(27.5vw, 396px); }
.cy-ai li { position: relative; padding-left: min(1.111vw, 16px); color: #dddddd; font-size: var(--fs-xs); line-height: 1.286; }
.cy-ai li::before { content: ""; position: absolute; left: 0; top: .36em; width: min(.556vw, 8px); height: min(.556vw, 8px); border-radius: 2px; background: linear-gradient(135deg, var(--blue), var(--amber)); }

/* ---------- certifications ---------- */
.cy-certs { display: grid; grid-template-columns: repeat(5, 1fr); gap: min(1.389vw, 20px); }
.cy-certs li { display: grid; place-items: center; aspect-ratio: 256 / 180; background: #f5f5f5; border-radius: var(--radius); }
.cy-certs li:nth-child(n + 6) { translate: 44.92% 0; }
.cy-certs img { height: auto; }

/* ---------- build a resilient organization ---------- */
.cy-resilient .wrap { display: grid; justify-items: center; text-align: center; }
.cy-resilient .h2 { margin-top: min(1.111vw, 16px); }
.cy-resilient .body { margin-top: min(1.111vw, 16px); max-width: min(53.19vw, 766px); }
.cy-resilient .btn { margin-top: min(3.75vw, 54px); }

/* ---------- phones ---------- */
@media (max-width: 767px) {
  /* hero: content-height instead of a mostly-empty 100svh, with the design's blue → amber glow scaled to the phone */
  .page-cybersecurity .hero { min-height: 0; padding-top: 168px; }
  .page-cybersecurity .hero--glow .hero-media::before { width: 125vw; top: -26vw; filter: blur(44px); opacity: .75; }
  .cy-statement, .cy-wwd, .cy-itsec, .cy-otsec, .cy-aisec, .cy-certsec { padding: var(--section) 0 calc(var(--section) + 40px); }
  .cy-itsec { padding-top: calc(var(--section) + 8px); }
  .cy-testing { padding: var(--section) 0; }
  .cy-statement-inner { padding-inline: 0; }
  .cy-statement-inner .lead { max-width: none; margin-top: 18px; }
  .cy-statement-inner .btn { margin-top: 28px; }
  .page-cybersecurity .section-head .body { max-width: none !important; }

  .cy-risk-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .cy-risk-grid > .cy-risk { grid-area: auto !important; }
  .cy-risk, .cy-it, .cy-ot, .cy-ai { background-size: cover; background-position: right bottom; }
  .cy-risk { padding: 22px; min-height: 0; }
  .cy-ill { position: static; display: block; margin: 18px 0 0 auto; width: 52% !important; }
  .cy-risk p, .cy-it .copy, .cy-it p, .cy-ot .copy, .cy-ai p { max-width: none !important; }

  .cy-it-track.sec-cards { gap: 14px; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .cy-it { flex-basis: 84vw; height: auto; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }

  .cy-ot-row, .cy-ot-row.r2 { grid-template-columns: 1fr; gap: 16px; }
  .cy-ot-row.r2 { margin-top: 16px; }
  .cy-ot { height: auto; padding: 22px; justify-content: flex-start; }
  .cy-ot .cy-ill { order: 2; }

  .cy-seg { width: 100%; }
  .cy-seg button { flex: 1; padding-inline: 8px; min-height: 46px; }
  /* phones: panels stack normally (the two intros differ by several lines here) */
  .cy-panels > .tabpanel[hidden] { display: none; }
  .cy-defense { padding-bottom: 18px; background-size: 100% auto; background-position: top; }
  .cy-defense .head p:not(.kicker) { margin-top: 10px; }
  .cy-defense .head { padding: 22px 22px 0; max-width: none; min-height: 0; }
  .cy-defense h3 { margin-top: 18px; }
  .cy-defense .kicker svg { width: 20px; height: 20px; }
  .cy-flow-scroll { position: relative; height: auto; overflow-x: auto; margin-top: 18px; padding: 0 22px; scrollbar-width: thin; }
  .cy-flow { width: 900px; }
  .cy-flow .lbl { font-size: 10px; }
  .cy-flow .grad { font-size: 11px; }

  .cy-ai-layout { grid-template-columns: 1fr; row-gap: 32px; }
  .cy-ai-intro { position: static; }
  .cy-ai { padding: 22px; }
  .cy-ai .cy-ill { width: 34% !important; }
  .cy-ai ul { max-width: none; margin-top: 14px; gap: 6px; }
  .cy-ai li { padding-left: 14px; }
  .cy-ai li::before { width: 6px; height: 6px; }

  .cy-certs { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cy-certs li:nth-child(n + 6) { translate: none; }
  .cy-certs li:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
  .cy-resilient .body { max-width: none; }
}

/* tablets (768–1023): keep the diagram labels readable as the diagram scales down */
.cy-flow .lbl { font-size: max(11px, 1.0294cqw); }
.cy-flow .grad { font-size: max(12px, 1.1765cqw); }

/* AI Security top band: the soft blue band from the IT section, mirrored and recoloured to amber
   (the exported amber strip had lost its layer blur and showed as a hard-edged rectangle) */
.cy-lens.amber { background-image: url("../../img/cyber-lens-blue.jpg"); transform: scaleY(-1); filter: hue-rotate(176deg) saturate(1.1); }

/* Offensive tab (design frame "OFFENSIVE & DEFENSIVE SECURITY"): hacker tile → red attack paths → oil supply chain */
.cy-defense.off .cy-flow { background-image: url("../../img/cyber-offense-art.webp"); }
/* the design's text box is 870 wide, the paragraph breaks after "validate" (2 lines) */
@media (min-width: 768px) {
  .cy-defense.off .head { max-width: min(63.19vw, 910px); }
  .cy-defense.off .head p:not(.kicker) { max-width: min(55.56vw, 800px); }
}

/* IT security cards: no horizontal scroller — all five shown in a 2-column grid, the odd last card centred */
.cy-it-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 665px)); justify-content: center; gap: min(1.389vw, 20px); }
.cy-it-grid > .cy-it { width: 100%; }
.cy-it-grid > .cy-it:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - min(1.389vw, 20px)) / 2); }
@media (max-width: 767px) {
  .cy-it-grid { grid-template-columns: 1fr; gap: 14px; }
  .cy-it-grid > .cy-it:last-child:nth-child(odd) { width: 100%; }
}

/* integration: nav/footer anchors land with the eyebrow clear of the fixed nav pill */
#ot-security, #security-testing { scroll-margin-top: min(6.94vw, 100px); }

/* IT security cards, pinned horizontal scroll (after lucien.com "AI adoption is outpacing security"):
   the heading + card row pin while vertical scrolling slides the row sideways; cards fade up in sequence on entry.
   cybersecurity.js adds .is-pinned (desktop/tablet, motion allowed); otherwise the static grid above stays. */
.cy-it-view { padding-inline: var(--gutter); }
.cy-itsec.is-pinned .cy-it-sticky { position: sticky; top: var(--pin-top, 0px); }
.cy-itsec.is-pinned .cy-it-view { padding: 0; overflow: clip; }
.cy-itsec.is-pinned .cy-it-grid {
  display: flex; width: max-content; gap: min(1.389vw, 20px);
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  will-change: transform;
}
.cy-itsec.is-pinned .cy-it-grid > .cy-it,
.cy-itsec.is-pinned .cy-it-grid > .cy-it:last-child:nth-child(odd) { flex: 0 0 min(46.18vw, 665px); width: auto; }
.cy-itsec.is-pinned .cy-it {
  opacity: 0; transform: translate3d(0, 2rem, 0);
  transition: opacity .8s cubic-bezier(.215, .61, .355, 1), transform .8s cubic-bezier(.215, .61, .355, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.cy-itsec.is-pinned.cards-in .cy-it { opacity: 1; transform: none; }
.cy-itsec.is-pinned .cy-it-sticky .section-head { transition: opacity .4s var(--ease); }
.cy-itsec.is-pinned.pin-short.head-off .cy-it-sticky .section-head { opacity: 0; }

/* threat-flow signal pulses + arrival flashes (driven by cybersecurity.js) */
.cy-pulses { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cy-pulses path { fill: none; stroke-linecap: round; opacity: 0; vector-effect: non-scaling-stroke; }
.cy-pulses .glow { stroke-width: 7; }
.cy-pulses .tail { stroke-width: 2; }
.cy-pulses .head { stroke-width: 3.2; stroke: #fff; }
.cy-pulses .red .glow { stroke: #ff3b3b; }
.cy-pulses .red .tail { stroke: #ff6a6a; }
.cy-pulses .green .glow { stroke: #2bd61d; }
.cy-pulses .green .tail { stroke: #5be04f; }
.cy-hit { position: absolute; pointer-events: none; opacity: 0; }
.cy-hit.shield { border-radius: 50%; background: radial-gradient(closest-side, rgba(110,180,255,.55), rgba(0,122,255,.22) 55%, transparent); mix-blend-mode: screen; }
.cy-hit.tile { border-radius: 14px; }
.cy-hit.tile.red { box-shadow: 0 0 0 1px rgba(255,59,59,.85), 0 0 28px 4px rgba(255,59,59,.55), inset 0 0 40px rgba(255,59,59,.22); }
.cy-hit.tile.green { box-shadow: 0 0 0 1px rgba(32,170,22,.9), 0 0 28px 4px rgba(43,214,29,.45), inset 0 0 40px rgba(43,214,29,.18); }
.cy-flow .lbl { z-index: 1; }

/* certification logos: monochrome as in the design; the brand colours come back on hover/focus */
.cy-certs img { filter: grayscale(1); transition: filter .35s var(--ease); }
.cy-certs li:hover img, .cy-certs li:focus-within img { filter: none; }