/* ============================================================
 * cybersecurity-compliance.html — page styles
 * Self-contained: every selector here is new to this page.
 * ============================================================ */

/* ============================================================
 * HERO — a control matrix on the left, the copy stacked on the
 * right, in the same split the Asset Intelligence hero uses. The
 * matrix fills column by column as controls are satisfied, and the
 * pointer runs an assessment cursor down it.
 * ============================================================ */
.cmh{
  position:relative;
  padding:calc(22px + 68px + var(--frame,14px)) 0 0;
  background:linear-gradient(168deg,#0D2530 0%,#0B1F29 60%,#0A1B24 100%);
  overflow:hidden;
}
.cmh-inner{
  width:min(1420px,92vw); margin-inline:auto;
  display:grid; justify-items:center; text-align:center;
  padding:clamp(26px,4vh,52px) 0 clamp(44px,6vh,84px);
}

.cmh-crumbs{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center;
  color:rgba(233,244,246,.9);
}
.cmh-crumbs a{ color:var(--teal-bright,#6FD9CF); text-decoration:none; }
.cmh-crumbs a:hover{ color:#fff; }
.cmh-crumbs .sep{ color:rgba(255,255,255,.36); }

.cmh h1{
  margin:clamp(20px,2.6vw,36px) 0 0;
  max-width:22ch;
  font-size:clamp(32px,4.4vw,64px); line-height:1.08; letter-spacing:-.024em;
  font-weight:400; color:#fff;
}

/* ---------- the flow ----------
   Frameworks on the left feed one spine that runs through the process and out
   to the single outcome. The spine, the curves and the field of square pixels
   are drawn on canvas; the labels stay in the DOM so the type is crisp. */
.cmh-stage{
  position:relative; width:100%;
  margin:clamp(26px,4vh,52px) 0 0;
  min-height:clamp(300px,32vw,420px);
}
.cmh-flow{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.cmh-feeds{
  position:absolute; left:var(--fx,0); top:50%; transform:translateY(-50%);
  display:grid; gap:clamp(6px,.9vh,11px); z-index:2; text-align:left;
}
.cmh-feed{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 12px 6px 6px; border-radius:9px;
  background:rgba(6,30,40,.72);
  border:1px solid rgba(123,219,211,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(215,238,236,.86); white-space:nowrap;
}
.cmh-feed-ic{
  display:grid; place-items:center; width:22px; height:22px; flex:none;
  border-radius:7px; background:rgba(18,186,176,.16); color:var(--teal-bright,#7BDBD3);
}
.cmh-feed-ic svg{ width:13px; height:13px; }

/* the process labels sit ON the spine, so the line reads straight through */
.cmh-proc{
  position:absolute; left:var(--cx,50%); top:50%; translate:-50% -50%; z-index:2;
  display:flex; align-items:center; gap:clamp(12px,1.4vw,22px);
  padding:11px clamp(16px,1.8vw,24px); border-radius:10px;
  background:rgba(5,26,35,.9);
  border:1px solid rgba(123,219,211,.26);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.cmh-proc span{
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:#EAF7F6; white-space:nowrap;
}
/* the step markers that make it read as one run rather than three words */
.cmh-proc i{ width:4px; height:4px; flex:none; background:rgba(24,219,206,.7); }
.cmh-out{ position:absolute; left:var(--ox,auto); top:50%; transform:translateY(-50%); z-index:2; }
.cmh-out span{
  display:inline-block; padding:10px 15px; border-radius:9px;
  background:rgba(18,186,176,.18);
  border:1px solid rgba(24,219,206,.46);
  font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#9FEDE6; white-space:nowrap;
}

/* the copy lands in one teal card, split into a lede and the close */
.cmh-card{
  width:100%; margin-top:clamp(26px,3.6vh,46px);
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3.4vw,64px);
  padding:clamp(28px,3.4vw,54px);
  border-radius:clamp(18px,2vw,28px);
  background:linear-gradient(150deg,#125C60 0%,#0E4D55 62%,#0B424C 100%);
  text-align:left;
}
@media (min-width:900px){
  .cmh-card{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; }
}
.cmh-card p{
  margin:0; font-size:clamp(15px,1.15vw,17.5px); line-height:1.72; color:#DCEFEC;
}
.cmh-card-b .m-btns{ margin-top:clamp(20px,2.4vw,30px); }
/* ese margen separa los botones del párrafo que llevan encima en la página de
   Compliance. Cuando son lo único de la columna, sobra: la columna tiene que
   arrancar a la misma altura que el texto de al lado */
.cmh-card-b > .m-btns:first-child{ margin-top:0; }

@media (max-width:1080px){
  .cmh-feed{ font-size:0; padding:6px; gap:0; }
  .cmh-proc{ gap:9px; padding:9px 12px; }
  .cmh-proc span{ font-size:9px; letter-spacing:.08em; }
  .cmh-out span{ font-size:9px; letter-spacing:.08em; padding:7px 9px; }
}
@media (max-width:760px){
  .cmh-stage{ min-height:280px; }
  .cmh-proc{ position:static; translate:none; justify-content:center; flex-wrap:wrap; gap:8px;
             padding-top:clamp(200px,52vw,300px); }
}

/* the hero settles on arrival — transitions, so the resting declaration is the
   visible state and a throttled tab can never leave it blank */
.cmh-lit .cmh-crumbs,
.cmh-lit h1,
.cmh-lit .cmh-stage,
.cmh-lit .cmh-card{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s ease var(--d,0s), transform .95s cubic-bezier(.16,.8,.3,1) var(--d,0s);
}
.cmh-lit.cmh-on .cmh-crumbs,
.cmh-lit.cmh-on h1,
.cmh-lit.cmh-on .cmh-stage,
.cmh-lit.cmh-on .cmh-card{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .cmh-lit .cmh-crumbs,
  .cmh-lit h1,
  .cmh-lit .cmh-stage,
  .cmh-lit .cmh-card{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
 * #frameworks — one row of framework cards that travels right to
 * left while the section holds the viewport. The section only pins
 * once JS measures it, so without JS the row is an ordinary
 * horizontally scrollable rail and nothing is trapped.
 *
 * NOTE: no ancestor of .fwr-pin may set overflow, or sticky dies.
 * ============================================================ */
.fwr-track{ position:relative; }
/* the section head reads centred above the rail. .sec-head is a grid whose
   heading is capped at 18ch, so the boxes need centring, not just the text. */
#frameworks .fwr-pin .sec-head{ text-align:center; justify-items:center;
  max-width:none; margin-inline:auto; }
#frameworks .fwr-pin .sec-head .m-h,
#frameworks .fwr-pin .sec-head h2{ max-width:26ch; margin-inline:auto; }
#frameworks .fwr-pin .sec-head .m-lede{ max-width:64ch; margin-inline:auto; }
.fwr-pin{
  display:grid; align-content:center; gap:clamp(24px,3.4vw,44px);
  padding:clamp(40px,6vh,80px) 0;
}
.fwr-rail{ overflow:hidden; }
.fwr-row{
  display:flex; gap:clamp(16px,1.8vw,26px);
  padding-inline:max(calc((100vw - min(1240px, 92vw)) / 2), 4vw);
  will-change:transform;
}
/* V4 feedback: the section and its cards trade colours — the section
   ground takes the paper beige the cards used to carry, and the cards
   go white on top of it */
#frameworks.m-sec.surf-white{ background:var(--m-paper,#F4F2EE); }
.fwr-card{
  flex:0 0 clamp(260px,24vw,340px);
  display:flex; flex-direction:column;
  padding:clamp(24px,2.4vw,34px);
  border-radius:clamp(14px,1.4vw,20px);
  border:1px solid rgba(3,43,59,.08);
  background:#fff;
  transition:border-color .4s ease, background .4s ease, transform .5s cubic-bezier(.16,.8,.3,1), box-shadow .5s ease;
}
.fwr-card:hover{
  background:#fff;
  border-color:rgba(18,186,176,.55);
  transform:translateY(-4px);
  box-shadow:0 24px 48px -28px rgba(3,43,59,.34);
}
.fwr-ic{
  display:grid; place-items:center; flex:none;
  width:clamp(38px,3.4vw,46px); height:clamp(38px,3.4vw,46px);
  border-radius:12px;
  background:rgba(18,186,176,.14);
  color:var(--dark-teal,#006B6B);
}
.fwr-ic svg{ width:20px; height:20px; }
.fwr-card h3{
  margin:clamp(14px,1.4vw,20px) 0 0;
  font-size:clamp(19px,1.6vw,24px); font-weight:500; letter-spacing:-.01em;
  color:var(--m-navy,#0A2B38);
}
.fwr-card p{
  margin:10px 0 0; font-size:15px; line-height:1.62; color:#4A6470;
}

/* pinned state — only ever set by JS */
.fwr-ready .fwr-pin{
  position:sticky; top:0;
  min-height:100vh;
}
/* fallback: a plain swipe rail */
.fwr-track:not(.fwr-ready) .fwr-rail{ overflow-x:auto; scroll-snap-type:x mandatory; }
.fwr-track:not(.fwr-ready) .fwr-card{ scroll-snap-align:start; }

@media (max-width:989px){
  .fwr-ready .fwr-pin{ position:static; min-height:0; }
  .fwr-rail{ overflow-x:auto; scroll-snap-type:x mandatory; }
  .fwr-row{ transform:none !important; }
  .fwr-card{ scroll-snap-align:start; }
}

/* ============================================================
 * #engagement — a vertical timeline the reader scrolls through.
 * The steps are ordinary stacked content; the phase markers and
 * the spine ride along sticky beside them, and each marker acts as
 * an anchor to its step. Nothing is hidden behind a tab.
 * ============================================================ */
.tl-track{ position:relative; background:linear-gradient(168deg,#0C2431 0%,#0A1E29 62%,#091A23 100%); }
.tl-pin{ padding:clamp(56px,9vh,110px) 0; }
/* the section heading sits above the phases and stays clearly subordinate to
   the step titles — it labels the sequence rather than competing with it */
.tl-h{
  margin:0 0 clamp(22px,3vh,34px);
  font-size:clamp(17px,1.5vw,22px); line-height:1.3; letter-spacing:-.008em;
  font-weight:500; color:rgba(214,235,233,.66); max-width:24ch;
}
.tl-grid{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(22px,3vw,44px); align-items:start;
}
@media (min-width:989px){
  .tl-grid{ grid-template-columns:minmax(0,.85fr) 1px minmax(0,1.5fr); gap:clamp(28px,4vw,68px); }
}

/* ---------- the phase anchors ---------- */
.tl-side{ position:sticky; top:calc(50vh - 170px); }
.tl-rail{ display:grid; gap:clamp(9px,1.2vh,14px); justify-items:start; }
.tl-pill{
  appearance:none; cursor:pointer;
  padding:10px 18px; border-radius:999px;
  border:1px solid rgba(123,219,211,.2);
  background:rgba(6,30,40,.6);
  font:inherit; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(198,224,223,.6); white-space:nowrap;
  transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.tl-pill:hover{ color:#EAF7F6; border-color:rgba(123,219,211,.42); }
.tl-pill.on{ background:var(--teal-bright,#7BDBD3); border-color:transparent; color:#06323A; }

/* ---------- the spine ---------- */
.tl-spine{ position:sticky; top:0; height:100vh; justify-self:center; width:1px; }
.tl-spine::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:rgba(123,219,211,.22);
  /* the rule has no ends — it fades out top and bottom */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.tl-spine-fill{
  position:absolute; left:0; top:0; width:1px;
  height:calc(var(--p,0) * 100%);
  background:linear-gradient(180deg,#18DBCE,#7BDBD3);
  transition:height .35s linear;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-size:1px 100vh; mask-size:1px 100vh;
}
.tl-mark{
  position:absolute; left:50%; translate:-50% -50%; top:50%;
  display:grid; place-items:center;
  width:clamp(34px,3vw,44px); height:clamp(34px,3vw,44px);
  border-radius:11px;
  background:rgba(9,38,48,.96); border:1px solid rgba(123,219,211,.24);
  color:var(--teal-bright,#7BDBD3);
  opacity:0; transform:scale(.9);
}
.tl-mark.on{ opacity:1; transform:none; border-color:rgba(24,219,206,.6); }
.tl-mark svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7;
              stroke-linecap:round; stroke-linejoin:round; }

/* ---------- the steps, as ordinary stacked content ---------- */
.tl-panes{ display:grid; }
.tl-pane{
  min-height:78vh;
  display:flex; flex-direction:column; justify-content:center;
  opacity:.3; transition:opacity .55s ease;
}
.tl-pane.on{ opacity:1; }
.tl-eyebrow{
  display:block; font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--teal-bright,#7BDBD3);
}
.tl-pane h3{
  margin:clamp(12px,1.4vw,18px) 0 0;
  font-size:clamp(26px,2.9vw,44px); line-height:1.12; letter-spacing:-.02em;
  font-weight:400; color:#fff; max-width:18ch;
}
.tl-pane p{
  margin:clamp(16px,1.8vw,24px) 0 0; max-width:64ch;
  font-size:clamp(15px,1.15vw,17.5px); line-height:1.72; color:rgba(214,235,233,.86);
}

@media (max-width:988px){
  .tl-spine{ display:none; }
  .tl-side{ position:static; }
  .tl-rail{ grid-auto-flow:column; overflow-x:auto; gap:8px; }
  .tl-pane{ min-height:0; opacity:1; margin-bottom:clamp(30px,5vw,52px); }
}
@media (prefers-reduced-motion:reduce){
  .tl-pane{ opacity:1; transition:none; }
  .tl-mark, .tl-spine-fill{ transition:none; }
}

/* ============================================================
 * #timing — a dial for the phases the page already names. The
 * needle stays put at the top and the dial turns underneath it,
 * the way the Enclave tuner reads. Without JS the phases are a
 * plain list, so nothing is hidden behind the interaction.
 * ============================================================ */
.tm-band{ position:relative; }
.tm-grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(30px,4vw,64px);
  align-items:center;
}
@media (min-width:940px){
  .tm-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
}
.tm-copy h2{ margin:0 0 clamp(18px,2vw,26px); }
.tm-copy p{ margin:0 0 clamp(14px,1.6vw,20px); }
.tm-copy p:last-child{ margin-bottom:0; }

.tm-dialwrap{ display:grid; justify-items:center; gap:clamp(14px,2vw,22px); }
.tm-dial{
  position:relative;
  width:min(420px,86vw); aspect-ratio:1;
  display:grid; place-items:center;
  /* it steps on click as well as running itself, so it reads as operable */
  cursor:pointer; border-radius:50%;
}
.tm-dial:focus-visible{
  outline:2px solid var(--m-yellow,#FCC921);
  outline-offset:6px;
}
.tm-face{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* the needle is fixed; the dial moves */
.tm-needle{
  position:absolute; top:2px; left:50%; translate:-50% 0; z-index:3;
  width:0; height:0;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-top:11px solid var(--m-yellow,#FCC921);
}

.tm-read{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; text-align:center; }
.tm-stop{
  grid-area:1 / 1; display:grid; gap:10px; justify-items:center; align-content:center;
  width:min(64%,280px); text-align:center;
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .5s cubic-bezier(.16,.8,.3,1);
}
.tm-stop.on{ opacity:1; transform:none; }
.tm-stop b{
  font-size:clamp(21px,2.2vw,32px); font-weight:600; letter-spacing:-.02em;
  color:#fff; line-height:1.12; text-wrap:balance;
}
.tm-stop i{
  font-style:normal; font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--m-yellow,#FCC921); line-height:1.4;
}

/* no JS: the dial face and needle are decoration, the phases just list */
.tm-band:not(.tm-ready) .tm-face,
.tm-band:not(.tm-ready) .tm-needle,
.tm-band:not(.tm-ready) .tm-band:not(.tm-ready) .tm-dial{ aspect-ratio:auto; width:100%; }
.tm-band:not(.tm-ready) .tm-read{ position:static; display:grid; gap:18px; }
.tm-band:not(.tm-ready) .tm-stop{ grid-area:auto; opacity:1; transform:none; width:auto; }

@media (prefers-reduced-motion:reduce){ .tm-stop{ transition:none; } }

/* ============================================================
 * V2 FEEDBACK (2026-08-26): a run of the brand gold through the
 * hero diagram — the outcome chip, the step markers, and the
 * finished-work trail (see _compliance.js) — so the teal field
 * gets a pop of contrast at the point the story lands.
 * ============================================================ */
.cmh-proc i{ background:var(--accent,#FCC921); }
.cmh-out span{
  background:rgba(252,201,33,.14);
  border:1px solid rgba(252,201,33,.55);
  color:#FFDD70;
  box-shadow:0 0 0 4px rgba(252,201,33,.06);
}
/* the nudge that says the dial is playable */
.tm-band p.tm-hint{ /* outranks the generic .band p type rule */
  display:inline-flex; align-items:center; gap:10px;
  justify-self:center; margin:0;
  padding:10px 18px; border-radius:10px;
  /* ADA pass: solid ground, near-white type (~13:1), visible gold ring */
  border:1.5px solid rgba(252,201,33,.8);
  background:#051D28;
  font-size:13px; font-weight:500; line-height:1.45; letter-spacing:.02em;
  color:#EAF7F6;
  max-width:100%;
}
.tm-hint-ic{
  flex:none; width:16px; height:16px;
  border:1.5px solid var(--accent,#FCC921); border-radius:50%;
  position:relative;
}
.tm-hint-ic::after{
  content:""; position:absolute; inset:4px;
  border-radius:50%; background:var(--accent,#FCC921);
  animation:tmHintPulse 2s ease-in-out infinite;
}
@keyframes tmHintPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .tm-hint-ic::after{ animation:none; } }
/* phones: the outcome chip joins the flow under the process labels
   instead of hanging off the right edge of the stage (V2 audit) */
@media (max-width:760px){
  .cmh-out{ position:static; transform:none; display:flex; justify-content:center; margin-top:12px; }
}

/* V6: the regulatory chapter sits on the paper ground */
#regulatory.m-sec.surf-white{ background:var(--m-paper,#F4F2EE); }

/* ---------- .npills — the bracketed tags the Fractional copy carries ------
 * The doc lists four alignment claims in brackets under the capabilities.
 * They are labels, not prose, so they read as a row of quiet chips under the
 * columns rather than another paragraph.
 * ------------------------------------------------------------------------ */
.npills{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(8px,1vw,14px); margin:clamp(24px,3vw,40px) auto 0;
  /* es un <p>, y heredaba la medida de la prosa: se quedaba a la izquierda
     aunque la fila estuviera centrada por dentro */
  max-width:none;
}
.npills span{
  padding:7px 14px; border-radius:999px;
  /* la banda de capacidades es oscura: en teal oscuro estos chips no se leían */
  border:1px solid rgba(123,219,211,.34); background:rgba(18,186,176,.14);
  font-size:clamp(12px,1vw,13.5px); letter-spacing:.01em;
  color:#BFE6E1; white-space:nowrap;
}
@media (max-width:767px){ .npills span{ white-space:normal; } }

/* ---------- .fsh — the fractional hero stage -------------------------------
 * Same box as the compliance stage, its own figure: the two labels name what
 * the field and the arriving mark are, so the drawing does not have to be
 * guessed at. They sit clear of the seat, which is left of centre.
 * ------------------------------------------------------------------------ */
.fsh-tag{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; }
.fsh-tag span{
  display:inline-block; padding:8px 13px; border-radius:9px;
  font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
}
.fsh-tag--seat{ left:clamp(8px,3vw,42px); }
.fsh-tag--seat span{
  background:rgba(6,30,40,.72); border:1px solid rgba(123,219,211,.26); color:#EAF7F6;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.fsh-tag--lead{ right:clamp(8px,3vw,42px); }
.fsh-tag--lead span{
  background:rgba(252,201,33,.14); border:1px solid rgba(252,201,33,.55);
  color:#FFDD70; box-shadow:0 0 0 4px rgba(252,201,33,.06);
}
@media (max-width:767px){
  .fsh-tag span{ font-size:9.5px; padding:6px 10px; letter-spacing:.09em; }
  .fsh-tag--seat{ left:6px; } .fsh-tag--lead{ right:6px; }
}

/* ---------- .fsl — the four lanes of the fractional hero -------------------
 * The lane names use the same chip treatment as the compliance feeds, so the
 * two heroes read as one family. JS pins each to the middle of its own lane
 * and sets --lx once the group has been centred.
 * ------------------------------------------------------------------------ */
.fsl-name{
  position:absolute; left:var(--lx,0); transform:translateY(-50%); z-index:2;
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 12px; border-radius:9px;
  background:rgba(6,30,40,.72); border:1px solid rgba(123,219,211,.26);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#EAF7F6; white-space:nowrap;
}
/* la etiqueta del carril en el que está trabajando el líder ahora mismo */
.fsl-name{ transition:background .45s ease, border-color .45s ease, color .45s ease; }
.fsl-name.is-on{
  background:rgba(252,201,33,.13);
  border-color:rgba(252,201,33,.5);
  color:#FFDD70;
}
@media (max-width:767px){
  .fsl-name{ font-size:9px; letter-spacing:.06em; padding:5px 9px; }
}

/* prosa corrida dentro de un .m-two: medida cómoda y ritmo de párrafo, no de
   entradilla, que es lo que hacía ilegible la sección "what … include" */
.m-body{
  margin:clamp(14px,1.4vw,20px) 0 0; max-width:72ch;
  font-size:clamp(15px,1.15vw,16.5px); line-height:1.66;
  color:var(--text-muted,#4A6470);
}
.m-body a{ color:var(--dark-teal,#0B5F63); text-decoration:underline; text-underline-offset:3px; }
.m-body a:hover{ color:var(--teal,#12BAB0); }

/* Sección corta: con el relleno de sección completo quedaban 259px de aire
   alrededor de 180px de texto, y en blanco puro entre una banda oscura y una
   crema leía como una isla. Va sobre el fondo de la página y más ajustada. */
/* refined.css la define como "#page > .m-sec", que pesa más que un id suelto:
   hay que igualar esa especificidad para poder ajustarla */
/* refined.css sube el relleno de sección a 129.6px con "#page > .m-sec". La
   página de referencia no carga esa hoja y va a 49.12px, así que aquí se
   devuelve la fórmula original de showcase.css para que las dos coincidan. */
body #page > .m-sec{ padding:clamp(32px,calc(16px + 2.3vw),70px) 0; }
#what .m-body{ max-width:none; font-size:clamp(14px,1.05vw,15.5px); line-height:1.62; }

/* La página de Compliance no carga refined.css, así que allí .sec-head es un
   bloque normal. Aquí sí se carga y la convierte en rejilla de dos columnas con
   otros tamaños y márgenes. En vez de quitar la hoja entera — que reajusta media
   página — se devuelven aquí, y solo aquí, los valores que tiene la referencia. */
#fit .fwr-pin .sec-head,
#program .sec-head{
  display:block; margin:0 auto; max-width:none; text-align:center;
}
#fit .fwr-pin .sec-head .m-h, #fit .fwr-pin .sec-head h2,
#program .sec-head .m-h, #program .sec-head h2{
  max-width:22ch; margin-inline:auto;
  font-size:clamp(30px,3.3vw,47.8px); line-height:1.05;
}
#fit .fwr-pin .sec-head .m-lede,
#program .sec-head .m-lede{
  margin:20px auto 0; max-width:64ch; font-size:clamp(16px,1.35vw,20px);
}
/* ============================================================
 * El tratamiento de foto del sitio (.scfx-host) vive en asset-hero.css, que
 * esta página no carga: sin él la imagen salía plana y el grano y la trama
 * caían por debajo, en flujo normal. Se porta aquí tal cual, generalizado al
 * host en vez de atarlo a .band-photo, para que sirva a las dos figuras de
 * esta página — la de "what … include" y la de la banda "same team".
 * ============================================================ */
.scfx-host{ position:relative; }
.scfx-host .scfx{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.scfx-host .scfx-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.15); transform-origin:50% 25%;
  filter:url(#scfxBlur) saturate(1.08) brightness(.96);
  z-index:0; will-change:transform;
}
.scfx-host .scfx-grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.15; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
.scfx-host .scfx-dots{ position:absolute; inset:0; width:100%; height:100%; z-index:3; }
.band-photo.scfx-host::after{ z-index:4; opacity:.55; }
@media (prefers-reduced-motion: no-preference){
  .scfx-host .scfx-grain{ animation:scfxgrain 1.2s steps(3) infinite; }
}

/* "what … include": la prosa a la izquierda y una figura a la derecha, que es
   el mismo reparto de la sección de Life Sciences. Un bloque de texto suelto en
   mitad de la página no tenía nada que lo equilibrara. */
.w-split{ display:grid; grid-template-columns:1fr; gap:clamp(28px,3.4vw,56px); align-items:center; }
@media (min-width:989px){ .w-split{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); } }
/* el titular de una sección de prosa con figura va un punto por debajo del de
   una sección con rail: la regla estaba atada a #what y no llegaba a las
   secciones que en otras páginas se llaman distinto */
#what .w-copy .m-h.lg,
.svc .w-copy .m-h.lg{ font-size:clamp(28px,3.1vw,44px); line-height:1.06; max-width:20ch; }
#what .w-copy .m-lede,
.svc .w-copy .m-lede{
  margin:clamp(14px,1.5vw,22px) 0 0; max-width:56ch;
  font-size:clamp(16px,1.35vw,19px); line-height:1.5;
}
#what .w-copy .m-body,
.svc .w-copy .m-body{ max-width:58ch; }
/* Al apilarse (988px hacia abajo) la columna pasa a ocupar todo el ancho, pero
   las medidas pensadas para la columna estrecha dejaban el texto usando la
   mitad. Aquí se sueltan hasta una medida de lectura cómoda. */
@media (max-width:988px){
  /* en tablet la columna ocupa el ancho entero de la página: el texto también,
     sin medidas heredadas de la maqueta a dos columnas */
  #what .w-copy .m-h.lg, .svc .w-copy .m-h.lg{ max-width:none; }
  #what .w-copy .m-lede, .svc .w-copy .m-lede,
  #what .w-copy .m-body, .svc .w-copy .m-body{ max-width:none; }
}
.w-figure{
  position:relative; aspect-ratio:4/3;
  border-radius:clamp(14px,1.6vw,22px); overflow:hidden;
}

/* Los botones del prefooter no parten la línea, y "Request a Security Gap
   Assessment" mide 336px: por debajo de 1100 se salía de la columna. */
@media (max-width:1100px){
  #demo .scope-card.copy .m-btn{
    white-space:normal; text-align:left; line-height:1.4;
    max-width:100%; justify-content:flex-start;
  }
}

/* parte del titular en el teal de la marca, el mismo tono que la línea de
   tiempo usa en sus rótulos de tramo */
.hl-teal{ color:var(--teal,#12BAB0); }

/* La banda del dial se parte en 940px por defecto. En esta página se adelanta
   a 989px, que es el corte de tablet del sitio: por debajo, el texto ocupa el
   ancho entero y el dial baja debajo del botón, centrado. */
@media (max-width:988px){
  /* vale para cualquier banda de dial de esta familia, no sólo para dos ids:
     así una sección nueva no hereda el corte de 940px por descuido */
  #same-team .tm-grid, #timing .tm-grid, .svc .tm-grid{
    grid-template-columns:minmax(0,1fr); justify-items:center;
  }
  #same-team .tm-copy, #timing .tm-copy, .svc .tm-copy{ width:100%; }
  #same-team .tm-dialwrap, #timing .tm-dialwrap, .svc .tm-dialwrap{
    justify-self:center; width:100%; justify-items:center;
  }
  /* apilada, la columna ocupa toda la banda: el titular y los párrafos también,
     sin la medida heredada de la maqueta a dos columnas */
  #same-team .tm-copy h2, #timing .tm-copy h2, .svc .tm-copy h2,
  #same-team .tm-copy p,  #timing .tm-copy p,  .svc .tm-copy p{ max-width:none; }
}

/* El dial mide min(420px,86vw): al ser 86vw no descuenta el relleno de la banda,
   así que en móvil se salía del cajón por la derecha. Aquí se mide contra su
   contenedor, y la fila de paradas se limita al mismo ancho. */
/* El dial mide min(420px,86vw): 86vw no sabe nada de la columna en la que está,
   así que entre 989 y 1080 —dos columnas ya estrechas— se salía por la derecha.
   Medido contra su contenedor cabe siempre, en cualquier maqueta. */
/* el tope por contenedor no basta cuando el envoltorio es más ancho que la
   banda: se capa también contra la ventana, descontando el relleno del cajón */
#same-team .tm-dial, #timing .tm-dial, .svc .tm-dial{
  width:min(420px, 100%, calc(100vw - 64px));
}

@media (max-width:640px){
  #same-team .tm-read, #timing .tm-read{ max-width:100%; }
  /* en pantallas muy estrechas el rótulo de la parada aún rebasaba por 1px */
  #same-team .tm-stop, #timing .tm-stop{ max-width:100%; }
  #same-team .tm-stop b, #same-team .tm-stop i,
  #timing .tm-stop b,    #timing .tm-stop i{ overflow-wrap:anywhere; }
}

/* ============================================================
 * Hero de Compliance en tablet y móvil
 * ------------------------------------------------------------
 * Dos arreglos:
 *  - En tablet las fichas se quedaban en "font-size:0", o sea seis cuadraditos
 *    sin texto. Hay ancho de sobra para el rótulo, así que vuelve, más pequeño.
 *  - Por debajo de 760px el proceso y la salida pasan a flujo normal pero las
 *    fichas seguían absolutas en el centro del escenario, encima de los dos.
 *    Aquí también pasan a flujo, en fila centrada y por encima del proceso.
 * ============================================================ */
@media (min-width:761px) and (max-width:1080px){
  .cmh-feed{ font-size:10px; padding:6px 10px 6px 6px; gap:7px; letter-spacing:.06em; }
  .cmh-feed-ic{ width:18px; height:18px; }
}
@media (max-width:760px){
  .cmh-feeds{
    position:static; transform:none;
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:7px; padding-top:clamp(150px,42vw,230px);
  }
  .cmh-feed{ font-size:9.5px; padding:5px 9px 5px 5px; gap:6px; letter-spacing:.05em; }
  .cmh-feed-ic{ width:15px; height:15px; }
  /* el proceso ya no tiene que despejar el lienzo por su cuenta: lo hacen las
     fichas, que ahora van delante */
  .cmh-proc{ padding-top:14px; }
}

/* ============================================================
 * Componentes que pide vCISO y ninguna otra página tenía
 * ============================================================ */

/* --- cuatro columnas con icono: los disparadores del servicio ------------- */
/* El riel de la banda de columnas se rellena desde --rail, que fija effects.js.
   Esa regla vivía sólo en asset-hero.css, así que en las páginas que cargan
   esta hoja el riel se quedaba con el scaleX(0) de showcase.css y no se veía
   nunca. Es la misma regla, textual, para que las dos familias coincidan. */
.band.pillars .nline{ transform:none !important; overflow:visible; background:transparent !important; }
.band.pillars .nline::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(123,219,211,.5), rgba(123,219,211,.18));
}
/* Aquí el riel no se barre con el scroll: se lee entero desde el primer
   momento, igual que se ve en asset-intelligence. Sin --rail y con las
   marcas siempre puestas, effects.js puede seguir escribiendo su variable
   sin que se note. */
.band.pillars .nline i{
  z-index:1; aspect-ratio:1;
  opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important;
}

/* Los titulares de esta banda parten a 28ch, que es lo que quiere una frase
   corta. En Services son más largos y se cortaban en dos líneas sin motivo, y
   el párrafo se quedaba estrecho debajo de un titular ancho. */
.svc .band.pillars h2{ max-width:none; text-wrap:balance; }
.svc .band.pillars .nsub{ max-width:92ch; text-wrap:balance; }

.svc .ncols4{
  display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,42px);
  margin-top:clamp(34px,4vw,56px); text-align:left;
}
@media(min-width:700px){ .svc .ncols4{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .svc .ncols4{ grid-template-columns:repeat(4,1fr); } }
.svc .ncols4 .ncol{ padding:0; }
.svc .ncols4 h3{ margin:14px 0 0; font-size:clamp(17px,1.4vw,20px); font-weight:500; color:var(--m-navy,#032B3B); }
.svc .ncols4 p{ margin:10px 0 0; font-size:clamp(14px,1.05vw,15.5px); line-height:1.6; color:var(--text-muted,#4A6470); }

/* --- tabla comparativa ---------------------------------------------------- */
.svc .cmp-wrap{ margin-top:clamp(30px,3.6vw,52px); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.svc .cmp-table{
  --cmp-r:clamp(12px,1.2vw,18px);
  width:100%; min-width:640px; border-collapse:separate; border-spacing:0;
  background:#fff; border-radius:var(--cmp-r);
  box-shadow:0 24px 48px -34px rgba(3,43,59,.30);
}
/* sin overflow:hidden —recortaría el relieve—, así que redondeo esquina a esquina */
.svc .cmp-table thead th:first-child{ border-top-left-radius:var(--cmp-r); }
.svc .cmp-table thead th:last-child{ border-top-right-radius:var(--cmp-r); }
.svc .cmp-table tbody tr:last-child td:first-child{ border-bottom-left-radius:var(--cmp-r); }
.svc .cmp-table tbody tr:last-child td:last-child{ border-bottom-right-radius:var(--cmp-r); }
.svc .cmp-table th, .cmp-table td{
  padding:clamp(13px,1.3vw,18px) clamp(14px,1.5vw,22px);
  text-align:left; border-bottom:1px solid rgba(3,43,59,.08);
  font-size:clamp(13.5px,1.05vw,15.5px); line-height:1.45;
}
.svc .cmp-table thead th{
  background:var(--m-navy,#032B3B); color:#EAF7F6; border-bottom:0;
  font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.svc .cmp-table thead th:first-child{ background:#052736; }
.svc .cmp-table tbody th, .cmp-table tbody td:first-child{ color:var(--m-navy,#032B3B); font-weight:500; }
.svc .cmp-table tbody td{ color:var(--text-muted,#4A6470); }
.svc .cmp-table tbody tr:last-child td{ border-bottom:0; }
.svc .cmp-table tbody tr:nth-child(even) td{ background:rgba(18,186,176,.035); }

/* Relieve al pasar el cursor: la fila se despega del resto de la tabla */
.svc .cmp-table tbody tr{
  position:relative;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
.svc .cmp-table tbody td{
  transition:background .28s ease, color .28s ease;
}
@media (hover:hover) and (pointer:fine){
  .svc .cmp-table tbody tr:hover{
    transform:translateY(-3px); z-index:2;
    box-shadow:0 18px 34px -20px rgba(3,43,59,.55), 0 2px 0 rgba(3,43,59,.05);
  }
  .svc .cmp-table tbody tr:hover td{
    background:#fff; border-bottom-color:transparent;
    color:var(--m-navy,#032B3B);
  }
  .svc .cmp-table tbody tr:hover td:first-child{
    box-shadow:inset 3px 0 0 var(--m-teal,#12BAB0);
    border-top-left-radius:8px; border-bottom-left-radius:8px;
  }
  .svc .cmp-table tbody tr:hover td:last-child{
    border-top-right-radius:8px; border-bottom-right-radius:8px;
  }
  .svc .cmp-table tbody tr:hover .cmp-yes{ color:var(--dark-teal,#006B6B); }
}
@media (prefers-reduced-motion:reduce){
  .svc .cmp-table tbody tr{ transition:box-shadow .2s ease; }
  .svc .cmp-table tbody tr:hover{ transform:none; }
}
/* Sí y No no son sólo palabras: llevan su marca, para leer la tabla de un vistazo */
.svc .cmp-yes, .cmp-no{ font-weight:600; white-space:nowrap; }
.svc .cmp-yes{ color:var(--dark-teal,#006B6B); }
.svc .cmp-no{ color:#9AA9AF; }
.svc .cmp-yes::before{ content:"✓ "; }
.svc .cmp-no::before{ content:"– "; }

/* En móvil la tabla no cabe y se desliza dentro de su caja, pero se cortaba
   sin decirlo. Misma pista que lleva el dial, en claro. */
.svc .cmp-hint{ display:none; }
@media(max-width:683px){
  .svc .cmp-hint{
    display:inline-flex; align-items:center; gap:9px;
    width:fit-content; margin:16px auto 0;
    padding:9px 15px; border-radius:10px;
    border:1.5px solid rgba(0,107,107,.32); background:#fff;
    font-size:12.5px; font-weight:500; line-height:1.4; color:var(--m-navy,#032B3B);
  }
  .svc .cmp-hint .tm-hint-ic{ border-color:var(--dark-teal,#006B6B); }
  .svc .cmp-hint .tm-hint-ic::after{ background:var(--dark-teal,#006B6B); }
}

/* ============================================================
 * Pila de tarjetas — el patrón de Enclave ("One console. Three
 * capabilities"), traído aquí para las listas de entregables. El texto se
 * queda a la izquierda mientras las tarjetas desfilan a la derecha; la que
 * pasa por el centro se enfoca y sus cuadraditos se recomponen hasta formar
 * su icono. Es copia, no préstamo: allí vive en refined.css y cuelga de
 * selectores sueltos, así que aquí todo va bajo .svc y no puede alcanzarlo.
 * ============================================================ */
.svc .cstack{ position:relative; border-radius:clamp(20px,2.4vw,32px); }
.svc .cstack-sticky{
  border-radius:clamp(20px,2.4vw,32px);
  background:radial-gradient(120% 110% at 28% 0%, #0F2A33 0%, #0A1E27 55%, #071720 100%);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(36px,5vw,84px);
  align-items:center;
  padding:clamp(40px,5vw,80px);
  min-height:min(78vh,660px);
}
.svc .cstack-copy h2{ color:#fff; max-width:22ch; text-wrap:balance; }
.svc .cstack-copy .m-lede{
  margin-top:22px; max-width:46ch; color:#B4CBD2;
  padding-top:22px; border-top:1px solid rgba(123,219,211,.2);
}
.svc .cstack-copy .m-btns{ margin-top:28px; }
.svc .cstack-copy .m-body{
  margin-top:16px; max-width:46ch; color:#8FB0B8;
  font-size:clamp(14.5px,1.1vw,16px); line-height:1.65;
}

.svc .cstack-cards{ position:relative; min-height:clamp(320px,32vw,420px); }
.svc .cs-card{
  position:absolute; left:0; right:0; top:50%;
  display:grid; grid-template-columns:clamp(46px,3.4vw,58px) minmax(0,1fr);
  align-items:center; gap:clamp(16px,1.6vw,24px);
  padding:clamp(18px,2vw,26px);
  border:1px solid rgba(123,219,211,.2);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  transform:translateY(-50%);
  will-change:transform,opacity;
}
.svc .cs-orb{ display:block; width:100%; aspect-ratio:1; overflow:hidden; }
.svc .cs-orb svg{ display:block; width:100%; height:100%; }
.svc .cs-px{ fill:var(--aqua,#12BAB0); }
.svc .cs-px:nth-child(3n+2){ fill:#D4E1DF; }
.svc .cs-px:nth-child(3n){ fill:var(--teal,#0C6E6E); }
.svc .cs-icon{
  fill:none; stroke:var(--aqua,#12BAB0); stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round; opacity:0;
}
.svc .cs-icon > *{ vector-effect:non-scaling-stroke; }
.svc .cs-copy{ min-width:0; }
.svc .cs-card h3{
  margin:0; font-size:clamp(19px,1.9vw,26px); font-weight:500;
  letter-spacing:-.01em; color:#fff;
}
.svc .cs-card p{ margin:8px 0 0; font-size:clamp(14px,1.05vw,15.5px); line-height:1.55; color:#9DBCC3; }

@media (min-width:990px){
  .svc .cstack{ height:280vh; }
  .svc .cstack-sticky{ position:sticky; top:0; height:100vh; }
  .svc .cstack.is-flat{ height:auto; }
  .svc .cstack.is-flat .cstack-sticky{ position:static; height:auto; }
}
@media (max-width:989px){
  /* en móvil no se fija nada: las tarjetas se leen como una lista */
  .svc .cstack-sticky{ grid-template-columns:1fr; gap:32px; min-height:0; padding:clamp(28px,5vw,44px); }
  .svc .cstack-cards{ position:static; min-height:0; display:grid; gap:14px; }
  .svc .cs-card{
    position:static; transform:none !important; opacity:1 !important;
    filter:none !important; grid-template-columns:44px minmax(0,1fr);
  }
}
@media (prefers-reduced-motion:reduce){ .svc .cs-card{ filter:none !important; } }

/* La pila, al revés: tarjetas a la izquierda y texto a la derecha. Sirve para
   alternar cuando la misma figura sale dos veces en el recorrido. */
.svc .cstack--alt .cstack-copy{ order:2; }
.svc .cstack--alt .cstack-cards{ order:1; }
@media (max-width:989px){
  /* en columna manda el orden de lectura: primero el texto */
  .svc .cstack--alt .cstack-copy{ order:1; }
  .svc .cstack--alt .cstack-cards{ order:2; }
}

/* La misma pila, en claro. Sirve para romper una racha de secciones oscuras
   sin cambiar de componente: mismo desfile, misma resolución del icono, otra
   tinta. */
.svc .cstack--light .cstack-sticky{
  background:var(--m-paper,#F4F2EE);
  border:1px solid var(--m-line,#E2DFD8);
}
.svc .cstack--light .cstack-copy h2{ color:var(--m-navy,#032B3B); }
.svc .cstack--light .cstack-copy .m-lede{
  color:var(--text-muted,#4A6470); border-top-color:rgba(3,43,59,.14);
}
.svc .cstack--light .cstack-copy .m-body{ color:#6B8590; }
.svc .cstack--light .cs-card{
  border-color:rgba(3,43,59,.14);
  background:rgba(255,255,255,.72);
}
.svc .cstack--light .cs-card h3{ color:var(--m-navy,#032B3B); }
.svc .cstack--light .cs-card p{ color:var(--text-muted,#4A6470); }
.svc .cstack--light .cs-icon{ stroke:var(--dark-teal,#006B6B); }
.svc .cstack--light .cs-px{ fill:var(--dark-teal,#006B6B); }
.svc .cstack--light .cs-px:nth-child(3n+2){ fill:#7FA3A8; }
.svc .cstack--light .cs-px:nth-child(3n){ fill:var(--aqua,#12BAB0); }

/* ============================================================
 * Panel de trama — el que Enclave usa en "Containing the Blast Radius".
 * Copia bajo .svc: allí vive en enclave.css con selectores sueltos y esta
 * hoja la comparten seis páginas de services.
 * ============================================================ */
.svc .expe{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:clamp(38px,4.4vw,72px) clamp(24px,4vw,64px);
  position:relative;
  border-radius:clamp(20px,2.4vw,30px);
  border:1px solid rgba(123,219,211,.16);
  /* the pixel strips ride inside, so they must not cross the radius */
  overflow:hidden;
  background:
    radial-gradient(58% 56% at 50% 0%, rgba(18,186,176,.22), transparent 62%),
    linear-gradient(170deg,#0C2530 0%,#07181F 74%);
}
.svc .expe h2{
  margin:0;
  /* la escala de los titulares de sección de la página (.m-h.lg): en Enclave
     este panel va con una escala menor, pero aquí convive con secciones que
     titulan a 52px y se quedaba corto */
  font-size:clamp(28px,calc(19px + 2vw),52px); line-height:1.04; font-weight:400;
  letter-spacing:0; color:#fff; max-width:24ch;
}
.svc .expe-body{
  margin:clamp(18px,2vw,26px) 0 0;
  max-width:62ch;
  font-size:clamp(14.5px,1.2vw,16px); line-height:1.68;
  color:#A9C4CC; text-wrap:pretty;
}
.svc .expe .m-btns{ margin-top:clamp(24px,2.8vw,36px); justify-content:center; }

/* The pixel field covers the whole panel, drawn on a canvas by enclave.js.
   It was two grids of spans while it only ran down the sides; covering the
   full box that way meant ~1400 spans and 87KB of markup for decoration, and
   a fixed-cell grid cannot follow a panel whose width changes with the
   viewport. Each cell keeps its own phase, so the field twinkles with no
   direction — a drifting background gave it one and read as a ticker. */
.svc .expe > canvas.expx{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0; display:block; pointer-events:none;
}
/* A scrim between the field and the copy. The field is allowed to run right
   across the panel, so the text needs its own ground back: this darkens the
   middle with the panel's own colour and fades out well before the edges, so
   the pixels stay visible around it. Order matters — canvas 0, scrim 1,
   content 2. */
.svc .expe::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(72% 64% at 50% 50%,
    rgba(7,24,31,.90) 0%,
    rgba(7,24,31,.66) 52%,
    rgba(7,24,31,0) 80%);
}
.svc .expe > *:not(canvas){ position:relative; z-index:2; }

/* los enlaces que el doc mete dentro del texto: sin vestir salían con el azul
   por defecto del navegador sobre el panel oscuro */
/* Enlaces dentro del texto corrido. El doc los pone dentro de los párrafos y,
   sin vestir, salen con el azul por defecto del navegador — que sobre las
   bandas oscuras canta muchísimo. Dos tintas: una para fondo oscuro y otra
   para el claro. */
.svc .ncol p a, .svc .band p a, .svc .tm-copy p a,
.svc .tl-pane p a, .svc .fwr-card p a, .svc .cs-card p a{
  color:var(--teal-bright,#7BDBD3); text-decoration:none;
  border-bottom:1px solid rgba(123,219,211,.45);
  transition:color .25s ease, border-color .25s ease;
}
.svc .ncol p a:hover, .svc .band p a:hover, .svc .tm-copy p a:hover,
.svc .tl-pane p a:hover, .svc .fwr-card p a:hover, .svc .cs-card p a:hover{
  color:#fff; border-bottom-color:#fff;
}
.svc .m-body a, .svc .m-lede a, .svc .w-copy p a, .svc .faq-a p a,
.svc .price-split p a, .svc .sec-head p a{
  color:var(--dark-teal,#006B6B); text-decoration:none;
  border-bottom:1px solid rgba(0,107,107,.35);
  transition:color .25s ease, border-color .25s ease;
}
.svc .m-body a:hover, .svc .m-lede a:hover, .svc .w-copy p a:hover,
.svc .faq-a p a:hover, .svc .price-split p a:hover, .svc .sec-head p a:hover{
  color:var(--m-navy,#032B3B); border-bottom-color:var(--m-navy,#032B3B);
}

.svc .expe-body a{
  color:var(--teal-bright,#7BDBD3); text-decoration:none;
  border-bottom:1px solid rgba(123,219,211,.45);
  transition:color .25s ease, border-color .25s ease;
}
.svc .expe-body a:hover{ color:#fff; border-bottom-color:#fff; }

@media(max-width:700px){
  .svc .expe{ padding:34px 22px 38px; border-radius:18px; }
  .svc .expe-body{ max-width:none; }
}

/* ============================================================
 * Pareja de tarjetas — el patrón que la home usa en "The strategy and the
 * infrastructure" (.pgrid > .fcard): dos cajas de color, cada una con su
 * titular y su párrafo. Copia bajo .svc; allí vive en home.css.
 * ============================================================ */
.svc .pgrid{ display:grid; grid-template-columns:1fr; gap:clamp(18px,2vw,26px); }
@media(min-width:860px){ .svc .pgrid{ grid-template-columns:1fr 1fr; } }
.svc .fcard{
  border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column;
}
.svc .fcard.grad{
  color:#EAF7F6; border:1px solid transparent;
  background:radial-gradient(120% 90% at 20% 0%, rgba(18,186,176,.4), transparent 55%), var(--m-grad);
}
.svc .fcard.dark{ background:#0A1E27; border:1px solid rgba(123,219,211,.16); }
.svc .fcard-body{
  padding:clamp(30px,calc(22px + 1.1vw),44px) clamp(28px,calc(20px + 1.9vw),52px)
          clamp(32px,calc(24px + 1.2vw),46px);
  display:flex; flex-direction:column; flex:1;
}
.svc .fcard-body .m-eyebrow{ color:var(--aqua,#12BAB0); }
.svc .fcard-body h3{
  margin:12px 0 12px; font-size:clamp(22px,2.4vw,30px);
  font-weight:500; letter-spacing:0; color:#fff;
}
.svc .fcard-body p{ margin:0; font-size:clamp(16px,1.25vw,17.5px); line-height:1.6; color:#CDEBE7; }
.svc .fcard-body p + p{ margin-top:14px; }
/* la caja que solo lleva texto centra su bloque: si no, al lado de la que
   enumera fases se queda con un tercio del alto vacío por abajo */
.svc .fcard:not(:has(.fcard-steps)) .fcard-body{ justify-content:center; }
.svc .fcard-body a{
  color:var(--teal-bright,#7BDBD3); text-decoration:none;
  border-bottom:1px solid rgba(123,219,211,.45);
}
.svc .fcard-body a:hover{ color:#fff; border-bottom-color:#fff; }
.svc .fcard-body .m-btns{ margin-top:auto; padding-top:24px; }

/* las fases que el párrafo enumera, puestas en fila: la caja corta se queda
   equilibrada frente a la larga en vez de medio vacía */
.svc .fcard-steps{
  margin:auto 0 0; padding:clamp(20px,2.4vw,30px) 0 0; list-style:none;
  display:grid; gap:0;
}
.svc .fcard-steps li{
  display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:16px;
  padding:clamp(11px,1.2vw,15px) 0;
  border-top:1px solid rgba(123,219,211,.16);
  font-size:clamp(15.5px,1.2vw,17px); line-height:1.35; color:#EAF7F6;
}
.svc .fcard-steps li:last-child{ border-bottom:1px solid rgba(123,219,211,.16); }
.svc .fcard-steps span{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  color:var(--teal-bright,#7BDBD3); font-variant-numeric:tabular-nums;
}

/* ============================================================
 * .sc-anim — la animación de hero que entregó diseño, tal cual la trae su
 * archivo. Se recorta a transparente por los cuatro lados con una máscara (no
 * con un degradado de color), así que se funde con el fondo que haya detrás.
 * ============================================================ */
.svc .sc-anim{
  position:relative;
  width:100%;
  max-width:1080px;
  margin:0 auto;
  aspect-ratio:1080/380;
}
.svc .sc-anim canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
/* El difuminado va por máscara. Se aplica sólo donde la máscara de dos capas
   está soportada de verdad: si no, el lienzo se queda sin recorte —bordes
   rectos— en vez de desaparecer entero, que es lo que pasa cuando una máscara
   falla. */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in){
  .svc .sc-anim canvas{
    -webkit-mask-image:
      linear-gradient(to right,  transparent, #000 13%, #000 87%, transparent),
      linear-gradient(to bottom, transparent, #000 20%, #000 76%, transparent);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to right,  transparent, #000 13%, #000 87%, transparent),
      linear-gradient(to bottom, transparent, #000 20%, #000 76%, transparent);
            mask-composite: intersect;
  }
}
@media (max-width:700px){ .svc .sc-anim{ aspect-ratio:1080/460; } }
/* el escenario del hero deja de imponer su alto: manda la proporción de la
   animación, que es la que la hace legible */
.svc .cmh-stage.svch--sc{ height:auto; min-height:0; display:grid; align-items:center; }

/* ============================================================
 * .sc-ribbon — la cinta del hero, tal cual la trae su archivo.
 * Transparente y recortada por máscara: nada de fondo propio.
 * ============================================================ */
.svc .sc-ribbon{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  aspect-ratio:1400/440;
}
.svc .sc-ribbon canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in){
  .svc .sc-ribbon canvas{
    -webkit-mask-image:
      linear-gradient(to right,  transparent, #000 9%, #000 91%, transparent),
      linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to right,  transparent, #000 9%, #000 91%, transparent),
      linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
            mask-composite: intersect;
  }
}
@media (max-width:700px){ .svc .sc-ribbon{aspect-ratio:1000/560} }
/* el escenario deja de imponer su alto: manda la proporción de la cinta */
.svc .cmh-stage.vch--ribbon{ height:auto; min-height:0; display:grid; align-items:center; }

/* --- precios --------------------------------------------------------------- */
.svc .price-split{ display:grid; grid-template-columns:1fr; gap:clamp(28px,3.4vw,56px); align-items:start; }
@media(min-width:989px){ .svc .price-split{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } }
.svc .price-list{ margin:clamp(18px,2vw,26px) 0 0; padding:0; list-style:none; display:grid; gap:12px; }
.svc .price-list li{
  position:relative; padding-left:26px;
  font-size:clamp(14px,1.05vw,15.5px); line-height:1.6; color:var(--text-muted,#4A6470);
}
.svc .price-list li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:7px; height:7px; background:var(--teal,#12BAB0);
}
.svc .price-card{
  padding:clamp(24px,2.6vw,38px); border-radius:clamp(14px,1.4vw,20px);
  background:radial-gradient(110% 90% at 24% 8%, rgba(18,186,176,.16), transparent 58%),linear-gradient(150deg,#0B3A4A 0%,#072F3E 55%,#04222E 100%);
  color:#EAF7F6;
}
.svc .price-eyebrow{
  display:block; font-size:11px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:#7BDBD3;
}
.svc .price-card p{ margin:14px 0 0; font-size:clamp(14.5px,1.1vw,16px); line-height:1.62; color:#CDE6E4; }
.svc .price-card .m-btns{ margin-top:clamp(18px,2vw,26px); }

/* --- testimonios ----------------------------------------------------------- */
.svc .quote-grid{ display:grid; grid-template-columns:1fr; gap:clamp(18px,2vw,28px); }
@media(min-width:760px){ .svc .quote-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .svc .quote-grid{ grid-template-columns:repeat(3,1fr); } }
.svc .quote-card{
  margin:0; padding:clamp(24px,2.4vw,34px);
  background:#fff; border:1px solid rgba(3,43,59,.08);
  border-radius:clamp(14px,1.4vw,20px);
  box-shadow:0 24px 48px -34px rgba(3,43,59,.26);
  display:flex; flex-direction:column;
}
.svc .quote-card blockquote{
  margin:0; font-size:clamp(15px,1.15vw,17px); line-height:1.6;
  color:var(--m-navy,#032B3B);
}
.svc .quote-card blockquote::before{ content:"“"; color:var(--teal,#12BAB0); font-size:1.5em; line-height:0; }
.svc .quote-card figcaption{
  margin-top:auto; padding-top:clamp(16px,1.8vw,22px);
  font-size:12.5px; letter-spacing:.02em; color:var(--text-muted,#4A6470);
}

/* --- el escenario del hero de vCISO --------------------------------------- */
.svc .vch-tag{ position:absolute; left:0; right:0; z-index:2; display:flex; justify-content:center; }
.svc .vch-tag--a{ top:var(--ay,26%); }
.svc .vch-tag--b{ top:var(--by,66%); }
.svc .vch-tag span{
  display:inline-block; padding:7px 13px; border-radius:9px;
  font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  white-space:nowrap;
}
.svc .vch-tag--a span{
  background:rgba(252,201,33,.14); border:1px solid rgba(252,201,33,.55); color:#FFDD70;
}
.svc .vch-tag--b span{
  background:rgba(6,30,40,.72); border:1px solid rgba(123,219,211,.26); color:#A9C4CC;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
@media (max-width:640px){ .svc .vch-tag span{ font-size:9px; letter-spacing:.06em; padding:5px 9px; } }

/* los rótulos que acompañan a la escena del hero en las páginas de Services */
.svc .svch-tag{ position:absolute; z-index:2; }
.svc .svch-tag span{
  display:inline-block; padding:7px 13px; border-radius:9px;
  background:rgba(6,30,40,.72); border:1px solid rgba(123,219,211,.26);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:#EAF7F6; white-space:nowrap;
}
.svc .svch-tag.t1{ left:clamp(8px,3vw,40px); top:26%; }
.svc .svch-tag.t2{ left:50%; transform:translateX(-50%); top:8%; }
.svc .svch-tag.t3{ right:clamp(8px,3vw,40px); top:66%; }
@media (max-width:640px){
  .svc .svch-tag span{ font-size:9px; letter-spacing:.05em; padding:5px 9px; }
  .svc .svch-tag.t1{ left:6px; } .svc .svch-tag.t3{ right:6px; }
}

/* Las pastillas de la línea de tiempo se escribieron para rangos cortos
   ("Weeks 1-2"). Varias páginas nuevas nombran su paso con una frase entera y
   con nowrap medían más que el rail. Sólo para ellas: parten línea. */
/* La columna izquierda de la línea de tiempo, cuando lleva párrafo y botón:
   el texto va sobre fondo oscuro, y el botón necesita aire a ambos lados. */
.svc .tl-lede{
  margin:0 0 clamp(22px,2.6vh,32px);
  font-size:clamp(15px,1.1vw,16.5px); line-height:1.7;
  color:rgba(214,235,233,.72); max-width:46ch;
}
.svc .tl-side .m-btns{ margin:0 0 clamp(28px,3.2vh,40px); }

.svc .tl-pill{ white-space:normal; text-align:left; line-height:1.35; }
@media (min-width:990px){ .svc .tl-pill{ max-width:100%; } }
/* por debajo de 990 el rail es un carrusel horizontal (grid-auto-flow:column):
   la pastilla se limita a la anchura visible para que se lea sin arrastrar */
@media (max-width:989px){ .svc .tl-pill{ max-width:min(320px,78vw); } }

/* La banda de columnas se fijó a tres. Las páginas nuevas traen grupos de 3, 4,
   5 y 6, así que la rejilla se ajusta al número real: si caben en una fila, van
   en una fila. Sólo para .svc — las dos páginas cerradas no se enteran. */
/* Por debajo de 990 la banda de referencia se apila a UNA columna. Con dos, el
   relleno lateral de cada columna las deja apretadas y descuadradas, así que
   aquí se hace lo mismo: una sola. */
@media(min-width:990px){
  .svc .ncols.n4{ grid-template-columns:repeat(4,1fr); }
  .svc .ncols.n5{ grid-template-columns:repeat(5,1fr); }
  .svc .ncols.n6{ grid-template-columns:repeat(3,1fr); }
}
/* con más de tres columnas el texto necesita algo menos de cuerpo y menos aire
   lateral, o los filetes quedan pegados a las palabras */
@media(min-width:990px){
  .svc .ncols.n4 .ncol, .svc .ncols.n5 .ncol{ padding-inline:clamp(14px,1.6vw,26px); }
  .svc .ncols.n5 h3{ font-size:clamp(16px,1.25vw,18px); }
  .svc .ncols.n5 p{ font-size:clamp(13.5px,1vw,14.5px); }
}

/* ============================================================
 * Testimonios: el mismo componente del home (.tst2), portado tal cual desde
 * home.css y acotado a .svc para que no alcance a ninguna otra página.
 * ============================================================ */
/* testimonials — big quote + author switcher */
  .svc .tst2{ display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,60px); margin-top:clamp(26px,3vw,42px); }
  @media(min-width:900px){.svc .tst2{ grid-template-columns:1fr auto; column-gap:clamp(28px,3.5vw,64px); align-items:start; }.svc .tst2-rail{ justify-self:end; margin-top:clamp(48px,7vw,76px); } }
  /* en el home la sección se llama #testimonials; aquí, #quotes */
.svc #quotes .m-wrap{ max-width:min(1400px,78vw); }
  .svc .tst2-main{ position:relative; }
  .svc .tst2-mark{ font-size:clamp(64px,8vw,120px); line-height:.5; height:.42em; margin-top:clamp(10px,1.5vw,20px); color:var(--teal); opacity:.38; font-weight:600; }
  .svc .tst2-stage{ position:relative; min-height:clamp(180px,20vw,240px); margin-top:4px; display:grid; align-items:start; }
  .svc .tq{ grid-area:1/1; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; pointer-events:none;
    font-size:clamp(22px,2.7vw,36px); line-height:1.3; letter-spacing:0; color:var(--m-navy); font-weight:400; text-wrap:balance; }
  .svc .tq.on{ opacity:1; transform:none; pointer-events:auto; }
  .svc .tst2-by{ margin-top:26px; }
  .svc .tby-name{ display:block; font-size:16px; font-weight:600; color:var(--m-navy); }
  .svc .tby-role{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#8A8577; }
  .svc .tst2-rail{ display:flex; flex-direction:column; gap:6px; }
  .svc .tst2-tab{ text-align:left; background:transparent; border:none; border-left:2px solid var(--m-line); padding:13px 0 13px 18px; cursor:pointer; transition:border-color .3s ease; }
  .svc .tst2-tab b{ display:block; font-size:15px; font-weight:600; color:#6A7C84; transition:color .3s ease; }
  .svc .tst2-tab span{ font-size:12.5px; color:#9A958A; }
  .svc .tst2-tab.on{ border-color:#E24148; }
  .svc .tst2-tab.on b{ color:var(--m-navy); }
  .svc .tst2-tab:hover b{ color:var(--m-navy); }
  @media(max-width:900px){.svc .tst2-rail{ flex-direction:row; gap:14px; overflow-x:auto; padding-bottom:4px; }.svc .tst2-tab{ border-left:none; border-top:2px solid var(--m-line); padding:12px 14px 0 0; flex:none; } }
  /* Mobile: the name + role labels overflow the rail and get cut off mid-word, so
     drop to plain indicator lines. The top border from the rule above already IS
     the line, and .tst2-tab.on recolours it — so hiding the text is all that's
     needed. The name and role still appear in the quote byline below.
     Text stays in the DOM (the byline script reads it) and each tab gets an
     aria-label at runtime so the buttons aren't left unlabelled. */
  @media(max-width:900px){
    .svc .tst2-rail{ gap:10px; overflow:visible; padding-bottom:0; }
    .svc .tst2-tab{ flex:1 1 0; padding:0; min-height:42px; }
    .svc .tst2-tab b, .svc .tst2-tab span{ display:none; }
  }

/* ===== theme toggle button ===== */
  .svc .theme-toggle{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--ice); display:grid; place-items:center; cursor:pointer; transition:border-color .3s ease, color .3s ease; padding:0; }
  .svc .theme-toggle:hover{ border-color:var(--aqua); color:var(--aqua); }
  .svc .theme-toggle svg{ width:16px; height:16px; display:block; }
  .svc .theme-toggle .i-sun{ display:none; }
  .svc .theme-toggle .i-moon{ display:block; }
  .svc html[data-theme="dark"] .theme-toggle .i-moon{ display:none; }
  .svc html[data-theme="dark"] .theme-toggle .i-sun{ display:block; }

  /* ===== DARK MODE ===== */
  .svc html[data-theme="dark"]{ --m-paper:#0A1922; --m-line:rgba(255,255,255,.12); --m-navy:#E8EFF1; --color-text:#E8EFF1; --color-text-muted:#9FBAC2; }
  .svc html[data-theme="dark"] body{ background:#0A1922; }
  /* light cards -> raised dark surfaces */
  html[data-theme="dark"] .fcard.light,
  html[data-theme="dark"] .gap-pill,
  html[data-theme="dark"] .gap-acc .gcard,
  html[data-theme="dark"] .cov-card,
  .svc html[data-theme="dark"] .m-card{ background:#11242E; border-color:rgba(255,255,255,.12); }
  html[data-theme="dark"] .fcard.light:hover,
  .svc html[data-theme="dark"] .cov-card:hover{ border-color:rgba(255,255,255,.22); box-shadow:0 24px 50px -30px rgba(0,0,0,.6); }
  /* muted body text on now-dark surfaces */
  html[data-theme="dark"] .m-lede,
  html[data-theme="dark"] .fcard.light .fcard-body p,
  html[data-theme="dark"] .cov-meta,
  

/* En el home esta sección respira con 108px arriba y abajo; en Services heredaba
   los 49px de sección normal y quedaba pegada al FAQ. Se le devuelve su aire. */
/* El home no tiene un ritmo único: la mayoría de secciones van a 49px, pero la
   de testimonios y la de cierre respiran con 108 arriba y abajo. Ese es el aire
   que se traen aquí los mismos bloques: testimonios, y el tramo del FAQ al
   prefooter, que es el cierre de la página. */
body.svc #page > .m-sec#quotes,
body.svc #page > .m-sec#faq,
body.svc #page > .m-sec#pricing,
body.svc #page > .m-sec#demo{
  padding-top:clamp(64px,7vw,108px); padding-bottom:clamp(64px,7vw,108px);
}

/* Lista de puntos: frases sueltas del doc que no traen cuerpo. Como tarjetas
   quedaban como titulares enormes; aquí van a dos columnas, con una marca
   cuadrada en el teal de la marca. */
.svc .svc-listwrap{
  display:grid; grid-template-columns:1fr; gap:clamp(28px,3.4vw,56px);
  align-items:center; margin-top:clamp(30px,3.6vw,52px);
}
@media(min-width:989px){ .svc .svc-listwrap{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.svc .svc-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:clamp(14px,1.6vw,22px);
}
@media(min-width:760px) and (max-width:988px){
  .svc .svc-list{ grid-template-columns:repeat(2,1fr); column-gap:clamp(28px,3.4vw,64px); }
}
.svc .svc-list-fig{ position:relative; aspect-ratio:1; width:100%; max-width:clamp(280px,34vw,460px); justify-self:center; }
.svc .svc-list-field{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.svc .svc-list li{
  position:relative; padding-left:30px;
  font-size:clamp(15px,1.15vw,17px); line-height:1.55;
  color:var(--m-navy,#032B3B);
}
.svc .svc-list li::before{
  content:""; position:absolute; left:2px; top:.56em;
  width:9px; height:9px; background:var(--teal,#12BAB0);
}
.svc .svc-list li + li{ border-top:0; }

/* la lista se enciende al leerla: cada punto entra en su turno y su marca se
   dibuja. Sin JS o con movimiento reducido, se ve entera desde el principio. */
.svc .svc-list--anim li{
  opacity:.28; transform:translateY(6px);
  transition:opacity .5s ease, transform .5s ease;
  transition-delay:calc(var(--i, 0) * 18ms);
}
.svc .svc-list--anim li.lit{ opacity:1; transform:none; }
.svc .svc-list--anim li::before{
  transform:scale(.35); transform-origin:center;
  transition:transform .45s cubic-bezier(.2,.9,.25,1), background-color .45s ease;
  background:rgba(18,186,176,.35);
}
.svc .svc-list--anim li.lit::before{ transform:none; background:var(--teal,#12BAB0); }
.svc .svc-list.lit-all li{ opacity:1; transform:none; }

/* La sección del dial se queda fijada mientras pasan sus puntos: el carril
   aporta el recorrido de scroll y la banda se pega arriba, igual que hacen la
   línea de tiempo y el rail de frameworks. La altura del carril la pone el JS,
   según cuántos puntos haya. */
.svc .svcd-track{ position:relative; }
.svc .svcd-pin{
  position:sticky; top:0; min-height:100vh;
  display:grid; align-content:center;
  padding:clamp(24px,4vh,56px) 0;
}
@media (max-width:988px){
  /* en tablet y móvil no se fija: la sección se lee de corrido */
  .svc .svcd-track{ height:auto !important; }
  .svc .svcd-pin{ position:static; min-height:0; padding:0; }
}

/* .surf-white pinta blanco puro. En las dos páginas terminadas refined.css lo
   reajusta al papel del sitio, así que allí no se nota; las seis nuevas no
   cargan esa hoja y les salía una sección blanca en medio de las crema. */
.svc .m-sec.surf-white{ background:var(--m-paper,#F4F2EE); }

/* La cabecera de las secciones con rail va centrada, igual que en las dos
   páginas de referencia. Allí la regla está atada a #frameworks / #fit, así que
   a las páginas nuevas no les llegaba. .sec-head es una rejilla de dos columnas
   en refined.css, pero estas páginas no la cargan: basta con centrar. */
.svc .fwr-pin .sec-head{
  display:block; margin:0 auto clamp(40px,5vw,72px); max-width:none; text-align:center;
}
/* 22ch parte en dos cualquier titular de más de tres palabras. Se deja correr
   hasta donde da la columna y que sea el ancho quien decida. */
.svc .fwr-pin .sec-head .m-h,
.svc .fwr-pin .sec-head h2{ max-width:none; margin-inline:auto; text-wrap:balance; }
.svc .fwr-pin .sec-head .m-lede{ margin:20px auto 0; max-width:64ch; }

/* En las dos páginas terminadas .m-lede recibe su margen superior de
   refined.css; estas seis no la cargan y el párrafo quedaba pegado al titular
   (0px, contra los 20-26 del resto). Se le devuelve la misma separación. */
.svc .w-copy .m-lede,
.svc .price-split .m-lede,
.svc .m-sec > .m-wrap > .m-lede{ margin-top:clamp(16px,1.5vw,22px); }

/* segundo titular dentro de una banda: es un titular, no otro párrafo, así que
   pesa más y se pega al texto que introduce */
.svc .band .nsub-h{
  margin:clamp(14px,1.6vw,20px) auto 0; max-width:34ch;
  font-size:clamp(17px,1.5vw,21px); line-height:1.3; font-weight:500;
  letter-spacing:-.005em; color:#EAF7F6;
}
.svc .band .nsub-h + .nsub{ margin-top:clamp(8px,0.9vw,12px); }

/* La primera sección de la página de referencia va dentro de un carril
   (.fwr-pin) que aporta ~54px de relleno propio, así que el titular cae bien
   separado del hero. Las secciones de prosa de estas páginas no tienen ese
   carril y quedaban pegadas. Se les da esa misma holgura, en todas las vistas. */
body.svc #page > .cmh + .m-sec{
  padding-top:calc(clamp(32px,calc(16px + 2.3vw),70px) + clamp(40px,6vh,80px));
}

/* la cabecera de la tabla comparativa va centrada, como la del rail, y su
   párrafo a una medida más ancha porque es una explicación, no una entradilla */
.svc #compare .sec-head{
  display:block; margin:0 auto clamp(30px,3.6vw,52px); max-width:none; text-align:center;
}
.svc #compare .sec-head .m-h,
.svc #compare .sec-head h2{ max-width:26ch; margin-inline:auto; }
.svc #compare .sec-head .m-lede{ margin:20px auto 0; max-width:86ch; }

/* La tabla comparativa viene justo detrás de una sección crema, así que con el
   relleno normal las dos se funden y su titular queda pegado al bloque anterior.
   Se le da el aire de las secciones de cierre. */
body.svc #page > .m-sec#compare{
  padding-top:clamp(64px,7vw,108px); padding-bottom:clamp(64px,7vw,108px); }

/* los botones que siguen a un texto de cierre respiran como en el resto del
   sitio (30-32px), no los 20px que traía por defecto */
/* el cierre necesita despegarse de la tabla, que ya trae su propia sombra */
.svc .cmp-wrap + .sec-closer{ margin-top:clamp(58px,7.2vw,112px); }

.svc .sec-closer + .m-btns{ margin-top:clamp(26px,2.6vw,36px); }

/* el titular propio de la tarjeta de precios, y el rótulo del bloque destacado
   que el doc pone en la entrada */
.svc .price-card .price-h{
  margin:12px 0 0; font-size:clamp(17px,1.5vw,21px); line-height:1.3;
  font-weight:500; color:#EAF7F6;
}
/* Los titulares de estos heros son más largos que el de Compliance, que es el
   que fijó el tope de 22ch: se partían en tres líneas. Se les da el ancho de la
   columna y que el equilibrado reparta. */
.svc .cmh h1{ max-width:30ch; text-wrap:balance; }

/* "vCISO vs. full-time CISO vs. MSSP": la entradilla llenaba tres lineas y
   dejaba "trust platform." solo en la cuarta, 120px de renglon. El equilibrado
   reparte el texto entre las mismas cuatro lineas —cada una pasa a ~798px— sin
   tocar la medida del componente. Solo esta pagina tiene esta seccion. */
@media (min-width:990px){
  #compare .sec-head .m-lede{ text-wrap:balance; }
}

.svc .cmh-card-eyebrow{
  display:block; margin:20px 0 10px;
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:#7BDBD3;
}
/* Las dos columnas de la caja ya arrancan a la misma altura (align-items:start),
   pero ese margen de 20px hundia el contenido de la derecha: el rotulo empezaba
   16px por debajo de la primera linea del parrafo de la izquierda. Sin el
   margen, y con el mismo interlineado que el parrafo, las dos primeras lineas
   comparten caja y se leen alineadas arriba. Solo esta pagina lleva el rotulo. */
@media (min-width:900px){
  /* los 0.3em reponen el medio interlineado que el parrafo de la izquierda
     lleva encima de su primera linea, para que las dos coincidan */
  #vcHero .cmh-card-eyebrow{ margin-top:.3em; line-height:inherit; }
}
.svc .scope-card.head .m-eyebrow{ display:block; margin-bottom:12px; color:#fff; }
/* el rótulo sobre el titular de una columna de prosa: mismo aire que en
   .sec-head, que es donde el sitio ya lo tenía resuelto */
.svc .w-copy .m-eyebrow{ display:block; margin-bottom:16px; }

/* el panel de trama cierra con su salida: los botones van centrados bajo el
   texto, con el mismo aire que llevan en el resto de la familia */
.svc .expe .m-btns{ justify-content:center; margin-top:clamp(26px,2.8vw,38px); }

/* La franja de imagen que las tarjetas de la home llevan encima del cuerpo
   (.fcard-media, en home.css) y su variante con fotografía (.services).
   Copia bajo .svc, igual que el resto de la familia .fcard. */
.svc .fcard-media{
  position:relative; overflow:hidden;
  height:clamp(200px,20vw,280px);
  margin:clamp(12px,1.3vw,16px) clamp(12px,1.3vw,16px) 0;
  border-radius:12px;
}
.svc .fcard.grad .fcard-media,
.svc .fcard.dark .fcard-media{
  margin:clamp(28px,calc(20px + 1.9vw),52px) clamp(28px,calc(20px + 1.9vw),52px) 0;
}
.svc .fcard-media.services{
  background:radial-gradient(120% 100% at 70% 20%, rgba(82,140,204,.28), transparent 60%),
             linear-gradient(150deg,#3D5A6B 0%, #0A1E27 100%);
}
.svc .fcard-media.services img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

/* ============================================================
 * En movil la caja del hero va centrada — texto y botones. Sobre 767 no
 * cambia nada: sigue alineada a la izquierda como estaba. Vale para las nueve
 * paginas de Services que usan este hero, que son las unicas con .cmh.
 * ============================================================ */
@media (max-width:767px){
  .cmh-card, .cmh-card-a, .cmh-card-b, .cmh-card-b p{ text-align:center; }
  .cmh-card .m-btns{ justify-content:center; align-items:center; }
  .cmh-card-eyebrow{ margin-inline:auto; }
}

/* La entradilla del bloque de 90 dias, sobre el fondo oscuro de la linea de
   tiempo: la misma tinta clara que su titular, y su aire antes de la primera
   pastilla. Sin esto heredaba el color del cuerpo y se leia casi negro. */
.tl-lede{
  margin:calc(-1 * clamp(10px,1.4vh,16px)) 0 clamp(24px,3.2vh,38px);
  max-width:62ch;
  font-size:clamp(14.5px,1.15vw,16px);
  line-height:1.65;
  color:rgba(214,235,233,.66);
}

/* Movil: la seccion "What fractional security services include" va centrada
   —titular y prosa—. Desde 768 vuelve a la izquierda. */
@media (max-width:767px){
  #what .w-copy,
  #what .w-copy h2,
  #what .w-copy p,
  #intro .w-copy,
  #intro .w-copy h2,
  #intro .w-copy p,
  #vendor-risk .w-copy,
  #vendor-risk .w-copy h2,
  #vendor-risk .w-copy h3,
  #vendor-risk .w-copy p{ text-align:center; }

  /* y el cierre de Enclave, con su boton */
  #same-team .tm-copy,
  #same-team .tm-copy h2,
  #same-team .tm-copy p,
  #offer .tm-copy,
  #offer .tm-copy h2,
  #offer .tm-copy p{ text-align:center; }
  #same-team .tm-copy .m-btns,
  #offer .tm-copy .m-btns{ justify-content:center; }

  /* la cabecera de seccion, donde exista */
  #services .sec-head,
  #services .sec-head h2,
  #services .sec-head p{ text-align:center; }
}

/* La seccion de cierre que pide el doc, "Strategy and infrastructure from the
   same team": su boton nacia pegado al parrafo porque .sec-head no reparte aire
   entre prosa y botones. */
#close .sec-head .m-btns{ margin-top:clamp(22px,2.6vw,34px); }

/* Movil: las tres secciones de la pagina de Compliance van centradas, y el
   boton del cierre con ellas. Desde 768 vuelven a la izquierda. */
@media (max-width:767px){
  #regulatory .sec-head,
  #regulatory .sec-head h2,
  #regulatory .sec-head p,
  #timing .tm-copy,
  #timing .tm-copy h2,
  #timing .tm-copy p,
  #close .sec-head,
  #close .sec-head h2,
  #close .sec-head p{ text-align:center; }
  #close .sec-head .m-btns{ justify-content:center; }
}

/* Los dos botones que el doc pone bajo "We will pinpoint your framework".
   .sec-closer trae margen inferior negativo para pegarse al borde de su
   seccion, y eso se los comia: aqui recupera su aire y los botones quedan
   alineados con el texto. */
/* .m-btn.quiet nace para ir solo en una columna: trae su propio margen
   superior y align-self:flex-start, y en una fila junto a otro boton eso lo
   descuadra —queda mas bajo y con un escalon—. Aqui van los dos en la misma
   linea, centrados bajo el texto, que tambien va centrado. En todas las vistas. */
#frameworks .sec-closer + .m-btns{
  margin-top:clamp(24px,2.8vw,36px);
  justify-content:center;
  align-items:stretch;
}
/* apilados en movil, stretch inflaba el primero al ancho entero y el segundo se
   quedaba con el suyo: cada uno mide su texto y los dos van centrados */
@media (max-width:767px){
  #frameworks .sec-closer + .m-btns{ --btns-align:center; align-items:center; }
  #frameworks .sec-closer + .m-btns .m-btn{ width:auto; max-width:100%; }
}
#frameworks .sec-closer + .m-btns .m-btn{
  margin-top:0;
  align-self:auto;
  text-align:center;
}

/* ---------------------------------------------------------------------------
 * Enlaces dentro del texto en las cajas OSCURAS que las reglas de arriba no
 * enumeran. Todas ellas guardan su prosa en un <div>, no en un <p>, asi que los
 * selectores ".. p a" no las alcanzaban y el enlace se quedaba con el teal
 * oscuro sobre fondo oscuro: invisible.
 * Medido con el contraste real contra el fondo pintado, no a ojo.
 * ------------------------------------------------------------------------- */
.zv-row a:not(.m-btn), .zv-sub a:not(.m-btn), .zv-head a:not(.m-btn),
.ls-body a:not(.m-btn), .ls-copy a:not(.m-btn),
.fcard-body a:not(.m-btn), .cmh-card-a a:not(.m-btn), .cmh-card-b a:not(.m-btn){
  color:var(--teal-bright,#7BDBD3);
  text-decoration:none;
  border-bottom:1px solid rgba(123,219,211,.45);
  transition:color .25s ease, border-color .25s ease;
}
.zv-row a:not(.m-btn):hover, .zv-sub a:not(.m-btn):hover, .zv-head a:not(.m-btn):hover,
.ls-body a:not(.m-btn):hover, .ls-copy a:not(.m-btn):hover,
.fcard-body a:not(.m-btn):hover, .cmh-card-a a:not(.m-btn):hover, .cmh-card-b a:not(.m-btn):hover{
  color:#fff; border-bottom-color:#fff;
}

/* Risk Assessments — en movil van centradas la seccion "Assess, communicate,
   and manage cyber risk" y el cierre de Enclave, este ultimo con su boton.
   Desde 768 vuelven a la izquierda. */
@media (max-width:767px){
  #assess .w-copy,
  #assess .w-copy h2,
  #assess .w-copy h3,
  #assess .w-copy p,
  #close .cstack-copy,
  #close .cstack-copy h2,
  #close .cstack-copy p{ text-align:center; }
  #close .cstack-copy .m-btns{ justify-content:center; }
}

/* Los enlaces dentro de las tarjetas blancas de "Which compliance framework do
   you need?": sin regla salian en el azul del navegador. Tarjeta clara, tinta
   oscura de la casa. */
#frameworks .fwr-card p a:not(.m-btn),
#frameworks .fwr-card li a:not(.m-btn){
  color:var(--dark-teal,#006B6B);
  text-decoration:none;
  border-bottom:1px solid rgba(0,107,107,.35);
  transition:color .25s ease, border-color .25s ease;
}
#frameworks .fwr-card p a:not(.m-btn):hover,
#frameworks .fwr-card li a:not(.m-btn):hover{
  color:var(--m-navy,#032B3B); border-bottom-color:rgba(0,107,107,.75);
}

/* ---------------------------------------------------------------------------
 * Services — las secciones de texto a la izquierda e imagen a la derecha van
 * centradas por debajo de 989px. A esas anchuras la imagen ya se ha ido debajo
 * y el texto ocupa todo el ancho, asi que alineado a la izquierda queda
 * descolgado. Es el mismo criterio que en la pagina de la CSA.
 * ------------------------------------------------------------------------- */
@media (max-width:988px){
  .w-split .w-copy,
  .w-split .w-copy h2,
  .w-split .w-copy h3,
  .w-split .w-copy p{ text-align:center; }

  .w-split .w-copy h2,
  .w-split .w-copy p{ margin-inline:auto; }

  .w-split .w-copy .m-btns{ justify-content:center; }
}
/* Las bandas partidas (.band.split) solo se centran en movil: en tablet siguen
   a dos columnas o, si ya han roto, el texto se lee alineado a la izquierda
   como en escritorio. */
@media (max-width:767px){
  .band.split > div:first-child,
  .band.split > div:first-child h2,
  .band.split > div:first-child p{ text-align:center; }
  .band.split > div:first-child h2,
  .band.split > div:first-child p{ margin-inline:auto; }
  .band.split > div:first-child .m-btns{ justify-content:center; --btns-align:center; align-items:center; }
}

/* La caja de cierre con figura al lado (.tm-band): por debajo de 989px la
   figura se va debajo y el texto ocupa todo el ancho, asi que se centra. */
@media (max-width:988px){
  .tm-band .tm-copy,
  .tm-band .tm-copy h2,
  .tm-band .tm-copy p{ text-align:center; }
  .tm-band .tm-copy h2,
  .tm-band .tm-copy p{ margin-inline:auto; }
  .tm-band .tm-copy .m-btns{ justify-content:center; }
}

/* ------------------------------------------------------------------
 * "How SideChannel fits into your organization" (#fit)
 * El rail nace para muchas piezas: alinea a la izquierda y se reserva
 * 100px de calle a cada lado, asi que estas cuatro tarjetas quedaban
 * descentradas y con un arrastre de unos pocos pixeles. Aqui caben las
 * cuatro, asi que se centran y el carril deja de correr.
 * ------------------------------------------------------------------ */
@media (min-width:990px){
  #fit .fwr-row{ padding-inline:0; justify-content:center; }
  /* y que cedan lo justo para caber: si no, por unos pocos pixeles el carril
     seguia corriendo */
  #fit .fwr-card{ flex-shrink:1; min-width:0; }
}
/* Por debajo de 990 no hay carrusel: las cuatro se leen como rejilla, dos por
   fila en tablet y una sola columna en el telefono. */
@media (max-width:989px){
  #fit .fwr-rail{ overflow:visible; }
  #fit .fwr-row{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    /* dentro del contenedor de la pagina, no a sangre: el mismo ancho que
       .m-wrap, que en el corte del telefono pasa a calc(100% - 44px) */
    width:92vw; max-width:var(--scr-max,1880px); margin-inline:auto;
    padding-inline:0; transform:none !important;
  }
  #fit .fwr-card{ flex:0 1 auto; width:auto; min-width:0; }
}
@media (max-width:767px){
  #fit .fwr-row{ grid-template-columns:minmax(0,1fr); width:calc(100% - 44px); }
}

/* ------------------------------------------------------------------
 * "The strategy and the infrastructure, from the same team" (#same-team)
 * Los tres casos van como las filas con icono del home —la seccion "The gap
 * between security strategy and security execution"—, en vez del dial.
 * ------------------------------------------------------------------ */
#same-team .gs-points{
  display:flex; flex-direction:column;
  /* mas aire entre las tres: pegadas se leian como un parrafo partido */
  gap:clamp(30px,3.6vw,54px);
  padding-left:clamp(0px,1.6vw,28px);
  align-self:center;
}
#same-team .gs-row{ display:flex; gap:16px; align-items:flex-start; text-align:left; }
#same-team .gs-ic{ display:grid; place-items:center; flex:none; color:var(--teal,#12BAB0); margin-top:2px; }
#same-team .gs-ic svg{ width:26px; height:26px; }
#same-team .gs-row p{ margin:0; max-width:34ch; }
#same-team .gs-row p b{
  display:block; font-weight:500; color:#fff;
  font-size:clamp(16px,1.35vw,20px); line-height:1.35;
}
#same-team .gs-row p span{
  display:block; margin-top:7px; color:#A9C4CC;
  font-size:clamp(14px,1.1vw,16px); line-height:1.5;
}

/* mas peso a la izquierda: el titular partia en tres lineas y el parrafo
   quedaba demasiado estrecho al repartir mitad y mitad */
@media (min-width:990px){
  #same-team .tm-grid{
    grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
    column-gap:clamp(48px,6vw,96px);
  }
}

/* El icono de la pila de tarjetas, identico al de /enclave/: 32px fijos en las
   tres vistas. Sin esto, en las paginas que no cargan refined.css el orbe
   heredaba width:100% y salia a 49, 46 y 44 segun el ancho. */
.cs-orb,
.svc .cs-orb,
.svc .cstack--centro .cs-orb{ width:32px; height:32px; aspect-ratio:auto; }
.cs-orb svg,
.svc .cs-orb svg,
.svc .cstack--centro .cs-orb svg{ width:100%; height:100%; }

/* Fijado, el panel conserva su relleno; cuando se queda como una caja normal
   —la variante plana y por debajo del corte de tablet— no necesita tanto. */
.svc .cstack.is-flat .cstack-sticky{ padding:clamp(28px,3.2vw,48px); }
@media (max-width:989px){
  .svc .cstack-sticky{ padding:clamp(28px,4.4vw,44px); }
}
/* y la seccion que lo contiene no necesita su aire completo: el panel ya trae
   el suyo, y entre esto y las secciones vecinas sobraba espacio */
body #page > .m-sec:has(.cstack){
  padding-top:clamp(20px,2.4vw,40px);
  padding-bottom:clamp(20px,2.4vw,40px);
}

/* la seccion que sigue a la pila tampoco necesita su aire completo, ni cuando
   es el FAQ, que se trae los 108 del cierre de pagina */
body #page > .m-sec:has(.cstack) + .m-sec,
body.svc #page > .m-sec:has(.cstack) + .m-sec#faq{
  padding-top:clamp(24px,2.6vw,44px);
  padding-bottom:clamp(24px,2.6vw,44px);
}
/* y donde la pila viene detras del hero, el aire de arriba tampoco es suyo */
body #page > .m-sec:has(.cstack){
  padding-top:clamp(24px,2.6vw,44px);
}

/* Apilado, el titular y la entradilla no se quedan en su medida de columna:
   ocupan casi todo el ancho del box, que es lo que hay disponible. */
@media (max-width:989px){
  .svc .cstack-copy h2, .cstack-copy h2{ max-width:none; }
  .svc .cstack-copy .m-lede, .cstack-copy .m-lede{ max-width:none; }
}

/* La lista de los paneles del recorrido va sobre fondo oscuro: heredaba la
   tinta del cuerpo del sitio y salia en navy, ilegible. Misma tinta que el
   parrafo del panel, con su marca en teal. */
.tl-pane .tl-list{ margin:clamp(14px,1.6vw,20px) 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.tl-pane .tl-list li{
  position:relative; padding-left:22px;
  font-size:clamp(14.5px,1.1vw,16px); line-height:1.65;
  color:rgba(214,235,233,.86);
}
.tl-pane .tl-list li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:6px; height:6px; border-radius:2px; background:var(--teal-bright,#7BDBD3);
}

/* Enlaces dentro del panel de la pila: el panel es oscuro, asi que el teal
   oscuro del cuerpo no se leia. Misma tinta que en las bandas oscuras. */
.svc .cstack-copy p a:not(.m-btn):not(.button),
.cstack-copy .m-lede a:not(.m-btn):not(.button){
  color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(123,219,211,.5);
}
.svc .cstack-copy p a:not(.m-btn):not(.button):hover,
.cstack-copy .m-lede a:not(.m-btn):not(.button):hover{
  color:var(--teal-bright,#7BDBD3); border-bottom-color:var(--teal-bright,#7BDBD3);
}

/* Dos enlaces que quedaban fuera de todas las reglas anteriores, medidos
   contra el pixel real de su fondo: la tarjeta clara del carril y la
   respuesta del FAQ sobre fondo oscuro. */
.svc .fwr-card p a:not(.m-btn):not(.button){ color:var(--dark-teal,#006B6B); }

/* Fijado, las dos columnas se centran cada una por su cuenta y el bloque de
   tarjetas caia mas abajo que el titular: arriba quedaban 418px de aire y
   abajo 146. Se centran juntas. */
@media (min-width:990px){
  .svc .cstack-sticky{ align-content:center; }
  .svc .cstack-copy, .svc .cstack-cards{ align-self:center; }
}

/* El cierre de Cybersecurity Compliance, centrado: titular, entradilla y boton.
   El titular se queda en su medida en vez de cruzar los 1180 del contenedor,
   que dejaba un bloque desequilibrado sobre un parrafo mucho mas estrecho. */
#close .sec-head{ display:block; text-align:center; max-width:none; margin-inline:auto; }
#close .sec-head h2{ max-width:20ch; margin-inline:auto; }
/* el parrafo, en tres lineas */
#close .sec-head .m-lede{ max-width:76ch; margin-inline:auto; margin-top:clamp(16px,1.8vw,24px); }
#close .sec-head .m-btns{ justify-content:center; margin-top:clamp(22px,2.4vw,32px); }

/* Cloud Security: este panel va en el teal de las bandas, no en el navy, que
   es el color de la seccion que viene justo despues. */
#challenges .cstack-sticky{
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(18,186,176,.34), transparent 58%),
    var(--m-grad);
}


/* Cloud Security, solo en escritorio: sin el aire inferior de esta seccion.
   El panel teal termina contra la seccion oscura que viene detras, y esa
   franja crema entre las dos se leia como un corte. */
@media (min-width:990px){
  body.svc #page > .m-sec#challenges{ padding-bottom:0; }
  /* y la que sigue tampoco pone aire arriba: su fondo ya es oscuro y entrega
     contra el panel. Va por el hermano, asi no alcanza a Risk Assessments,
     que usa el mismo identificador. */
  body.svc #page > .m-sec#challenges + .m-sec#approach{ padding-top:0; padding-bottom:0; }
}

/* En tablet y movil, el aire de abajo de esta seccion iguala al de arriba: el
   panel quedaba pegado a la seccion siguiente por el pie. */
@media (max-width:989px){
  body.svc #page > .m-sec#challenges{
    padding-bottom:calc(clamp(32px,calc(16px + 2.3vw),70px) + clamp(40px,6vh,80px));
  }
}

/* "Our approach" sin aire propio en ninguna vista: su fondo oscuro entrega
   contra el panel de arriba y contra lo que venga debajo. */
body.svc #page > .m-sec#challenges + .m-sec#approach{
  padding-top:0; padding-bottom:0;
}

/* "Our cybersecurity engineering services": las cuatro tarjetas caben, asi que
   se centran y el carril deja de correr, igual que en Fractional.
   La condicion es el numero de tarjetas, no la pagina: /services/ tambien tiene
   una seccion #services y con sus nueve tarjetas el flex-shrink las apretaba a
   137px, el recorrido quedaba en 38px y el carril nunca arrancaba. De cinco
   tarjetas en adelante la fila se queda como carril. */
@media (min-width:990px){
  #services .fwr-row:not(:has(> .fwr-card:nth-child(5))){
    padding-inline:0; justify-content:center;
  }
  #services .fwr-row:not(:has(> .fwr-card:nth-child(5))) .fwr-card{
    flex-shrink:1; min-width:0;
  }
}
@media (max-width:989px){
  #services .fwr-rail{ overflow:visible; }
  #services .fwr-row{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    width:92vw; max-width:var(--scr-max,1880px); margin-inline:auto;
    padding-inline:0; transform:none !important;
  }
  #services .fwr-card{ flex:0 1 auto; width:auto; min-width:0; }
}
/* En dos columnas, una fila impar deja la ultima tarjeta sola a la izquierda:
   ocupa las dos columnas y se centra, conservando el ancho de una. */
@media (min-width:768px) and (max-width:989px){
  #services .fwr-row > .fwr-card:last-child:nth-child(odd){
    grid-column:1 / -1;
    max-width:calc((100% - clamp(16px,1.8vw,26px)) / 2);
    margin-inline:auto;
  }
}
@media (max-width:767px){
  #services .fwr-row{ grid-template-columns:minmax(0,1fr); width:calc(100% - 44px); }
}

/* La linea que cierra las tarjetas de marcos es una nota, no un titular: va al
   cuerpo del sitio. El parrafo siguiente conserva su escala. */
.sec-nota{
  /* nota al pie de las tarjetas */
  margin:clamp(10px,1vw,14px) auto 0; max-width:70ch; text-align:center;
  font-size:clamp(14px,1.05vw,15.5px); line-height:1.6; color:var(--text-muted,#4A6470);
}
/* la nota se pega a las tarjetas: el carril reserva 60px al pie y dejaba la
   frase flotando lejos */
#frameworks .fwr-pin{ padding-bottom:clamp(14px,1.6vw,22px); }
#frameworks .sec-nota{ margin-top:clamp(10px,1vw,14px); }
.sec-nota .hl{ color:var(--m-navy,#032B3B); font-weight:500; }

/* "What we offer": los ocho puntos como filas con icono, el mismo patron que
   la seccion de Fractional Services. */
#offer .gs-points{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,1.8vw,24px);
}
@media (min-width:990px){
  #offer .gs-points{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(26px,3vw,48px); }
}
#offer .gs-row{ display:flex; gap:14px; align-items:flex-start; }
#offer .gs-ic{ display:grid; place-items:center; flex:none; color:var(--teal,#12BAB0); margin-top:2px; }
#offer .gs-ic svg{ width:26px; height:26px; }
#offer .gs-row p{ margin:0; font-size:clamp(14.5px,1.1vw,16px); line-height:1.6; color:#C6E0DF; }
/* la entradilla, en tres lineas */
#offer .tm-copy p{ max-width:46ch; }

/* En movil las pastillas del recorrido se apilan, una por fila: en carrusel
   horizontal quedaban apretadas y obligaban a arrastrar. */
@media (max-width:988px){
  /* apilada, la columna ya no compite con el panel: titulares, parrafos y el
     texto de cada paso usan el ancho disponible en vez de la medida estrecha
     que traian de la maqueta a dos columnas */
  .svc .tl-side h2, .svc .tl-side .m-h, .svc .tl-side p,
  .tl-pane h3, .tl-pane p, .tl-pane .tl-list, .tl-pane .tl-list li{ max-width:none; }
  .tl-rail{ grid-auto-flow:row; overflow-x:visible; gap:10px; justify-items:start; }
  /* apiladas, pero cada una con el ancho de su texto: estiradas parecian
     barras, no pastillas */
  .svc .tl-pill{ max-width:none; width:auto; text-align:left; }
}

/* dentro de las tarjetas, el enlace de texto va en teal claro; los botones
   conservan su propia tinta */
.svc .fcard-body a.m-btn.teal{ color:#04222b; }
.svc .fcard-body a.m-btn.on-dark{ color:#EAF7F6; }

/* RealCISO: la banda de beneficios en oscuro. .band.pillars se declara despues
   de .band.dark, asi que el modificador solo no basta. */
#benefits.m-sec .band.pillars{
  background:
    radial-gradient(70% 60% at 22% 0%, rgba(18,186,176,.14), transparent 58%),
    linear-gradient(168deg,#0D2530 0%,#0B1F29 60%,#0A1B24 100%);
}

/* RealCISO: los dos botones del hero, apilados como en sus paginas hermanas.
   Sus rotulos son cortos y caben en una fila, asi que hay que decirlo. */
#rcHero .cmh-card-b .m-btns{ flex-direction:column; align-items:flex-start; }
@media (max-width:767px){
  #rcHero .cmh-card-b .m-btns{ align-items:center; }
}

/* RealCISO — "Learn Where You Stand": on tablet the copy runs the full width,
   so the sentence broke with the whole second clause alone on line two.
   Balance the two lines instead of letting the first one fill. */
@media (min-width:768px) and (max-width:988px){
  #stand .w-copy .m-lede{ text-wrap:balance; }
}


/* ---------- Fractional · el bloque "same team": el boton sigue al texto -----
 * Ese bloque va centrado, pero al apilarse los botones heredaban la alineacion
 * al inicio y el boton quedaba pegado a la izquierda bajo un texto centrado.
 * ---------------------------------------------------------------------------- */
@media (max-width:767px){
  #same-team .m-btns{ --btns-align:center; align-items:center; }
}


/* ---------- Compliance · el cierre "same team": boton bajo su texto -------- */
@media (max-width:767px){
  #close .m-btns{ --btns-align:center; align-items:center; }
}