/* ============================================================
   IT-RANKS — Section widgets (Products & Services)
   Generated from the approved static sections in Website Parts/.
   All selectors are prefixed (.ed- .p2- .sv- .o2-) so they are
   safe alongside the theme and other widgets.
   ============================================================ */

/* ------------------------------------------------------------
   PRODUCTS · Option 1 — Editorial bento (.ed-)
   ------------------------------------------------------------ */
/* ============================================================
   IT-RANKS · Product & Innovation — EDITORIAL BENTO
   Minimal, airy, light-gray canvas · big soft cards · real
   product logos · pill tags · circular buttons.
   Brand blue (#3B82F6) as the single accent. Classes .ed-
   ============================================================ */
.ed{
  /* fonts — match live site (Work Sans body, Calibri-stack display) */
  --font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-alt:'Calibri','Carlito','Segoe UI',var(--font);
  /* colors — match live site palette */
  --canvas:#FCFCFD;
  --card:#FFFFFF;
  --panel:#F3F4F6;
  --ink:#374151;      /* gray-700 — body/headings */
  --muted:#6B7280;    /* gray-500 */
  --line:#E5E7EB;     /* gray-200 — borders */
  --blue:#3B82F6;
  --blue-dark:#2563EB;
  --r:20px;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-hover:0 20px 45px rgba(16,24,40,.13);
  font-family:var(--font);
  background:var(--canvas);color:var(--ink);
  padding:88px 0 96px;-webkit-font-smoothing:antialiased;
}
.ed *{box-sizing:border-box}
.ed img{max-width:100%;display:block}
.ed a{text-decoration:none}
.ed :where(h2,h3,p){margin:0}
.ed-wrap{
  width:100%;margin:0 auto;
  padding:0 var(--ed-pad,40px);
  /* --ed-cw is the CONTENT width. box-sizing is border-box, so the side padding
     must be added on top of it — a bare max-width:1280px would render only 1200. */
  max-width:calc(var(--ed-cw,1280px) + 2 * var(--ed-pad,40px));
}

/* ---------- header ---------- */
.ed-head{max-width:760px;margin:0 0 34px}
.ed-eyb{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;letter-spacing:.2px;color:var(--blue);margin:0 0 24px}
.ed-eyb::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--blue)}
.ed-title{font-family:var(--font-alt);font-size:clamp(30px,4.2vw,46px);line-height:1.14;letter-spacing:-.4px;font-weight:300;color:var(--ink);margin:0 0 18px}
.ed-title em{font-style:normal;color:var(--muted)}
.ed-lead{font-size:clamp(15px,1.3vw,17px);line-height:1.65;color:var(--muted);max-width:640px}

/* ---------- shared card ---------- */
.ed-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s,border-color .34s;position:relative;overflow:hidden}
.ed-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:transparent}

/* pills */
.ed-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.2px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:var(--card)}
.ed-pill--soon{border-color:#CBD9F5;color:var(--blue);background:#F2F6FF}

/* circular + pill buttons (reference style) */
.ed-arrow{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--line);color:var(--blue);transition:.25s;flex:none}
.ed-arrow svg{width:17px;height:17px;transition:transform .25s}
.ed-card:hover .ed-arrow{background:var(--blue);border-color:var(--blue);color:#fff}
.ed-card:hover .ed-arrow svg{transform:translateX(2px)}
.ed-btnpill{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;padding:11px 20px;border-radius:8px;background:var(--blue);color:#fff;border:1px solid transparent;transition:.25s}
.ed-btnpill svg{width:17px;height:17px;transition:transform .25s}
.ed-btnpill:hover{background:var(--blue-dark)}.ed-btnpill:hover svg{transform:translateX(3px)}
.ed-btncircle{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--line);color:var(--blue);transition:.25s;flex:none}
.ed-btncircle:hover{border-color:var(--blue);background:#F2F6FF}
.ed-btncircle svg{width:18px;height:18px}

/* product logos */
.ed-logo{height:auto;max-height:34px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.ed-lockup{display:inline-flex;align-items:center;gap:11px}
.ed-lockup img{height:auto;max-height:36px;width:auto}
.ed-lockup b{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}

/* ---------- bento grid (6 products, flagship 2x2) ---------- */
.ed-bento{margin-top:6px;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:212px;gap:16px}
.ed-feat{grid-column:span 2;grid-row:span 2}   /* flagship 2x2; the rest auto-flow */

/* flagship feature card */
.ed-feat{display:flex;overflow:hidden}
.ed-feat__body{flex:1.05;padding:34px;display:flex;flex-direction:column;min-width:0}
.ed-feat__logo{height:auto;max-height:36px;width:auto;max-width:240px;object-fit:contain;object-position:left center;margin:0 0 14px}
.ed-feat__cat{font-size:13px;font-weight:600;color:var(--blue);margin:0 0 12px}
.ed-feat__desc{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:34ch}
.ed-actions{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px}
.ed-feat__media{flex:1;position:relative;overflow:hidden;background:#DBE6F3;min-width:42%}
.ed img.ed-feat__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 42%;transition:transform .5s cubic-bezier(.22,1,.36,1)}  /* specificity must beat Elementor's `.elementor img{height:auto}` */
.ed-feat:hover img.ed-feat__shot{transform:scale(1.04)}

/* mini product cards */
.ed-mini{display:flex;flex-direction:column;justify-content:space-between;padding:26px 24px}
.ed-mini__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ed-mini__desc{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:16px;max-width:30ch}

/* reveal */
/* ---------- on-load fade-in (NOT scroll-linked) ----------
   The animation runs once when the element is first painted, so content fades
   in on page load and can never be hidden by scroll position. Base opacity is
   1 — the 0 lives only inside the keyframe — so if animations are disabled the
   content is simply visible, never stuck. */
@keyframes itr-fade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ed-rv:nth-child(2),.p2-rv:nth-child(2),.sv-rv:nth-child(2),.o2-rv:nth-child(2),.pb-rv:nth-child(2){animation-delay:0.06s}
.ed-rv:nth-child(3),.p2-rv:nth-child(3),.sv-rv:nth-child(3),.o2-rv:nth-child(3),.pb-rv:nth-child(3){animation-delay:0.12s}
.ed-rv:nth-child(4),.p2-rv:nth-child(4),.sv-rv:nth-child(4),.o2-rv:nth-child(4),.pb-rv:nth-child(4){animation-delay:0.18s}
.ed-rv:nth-child(5),.p2-rv:nth-child(5),.sv-rv:nth-child(5),.o2-rv:nth-child(5),.pb-rv:nth-child(5){animation-delay:0.24s}
.ed-rv:nth-child(6),.p2-rv:nth-child(6),.sv-rv:nth-child(6),.o2-rv:nth-child(6),.pb-rv:nth-child(6){animation-delay:0.30s}
.ed-rv:nth-child(7),.p2-rv:nth-child(7),.sv-rv:nth-child(7),.o2-rv:nth-child(7),.pb-rv:nth-child(7){animation-delay:0.36s}
/* products: no reveal/appear effect — always visible */
.ed-rv{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ed-rv{animation:none}.ed-card{transition:none}}

/* responsive */
@media(max-width:960px){
  .ed-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:16px}
  .ed-feat{grid-column:1 / -1;grid-row:auto;flex-direction:column}
  .ed-feat__body{padding:30px}
  .ed-feat__media{min-height:260px;order:-1}
  .ed-mini{min-height:196px}
}
@media(max-width:640px){
  .ed{padding:56px 0 64px}
  .ed-wrap{--ed-pad:20px}
  .ed-bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .ed-card{min-height:172px}
  .ed-feat{grid-column:auto;grid-row:auto;min-height:0}
}

/* ------------------------------------------------------------
   PRODUCTS · Option 2 — Editorial split (.p2-)
   ------------------------------------------------------------ */
/* ============================================================
   IT-RANKS · Product & Innovation — OPTION 2
   Editorial split: two-tone heading + featured visual (left),
   expandable product list (right). Light-gray canvas, white
   panels, circular +/↗ buttons.  Brand: #3B82F6, Work Sans.
   Reset uses :where() so class margins are never clobbered.
   Classes .p2-
   ============================================================ */
.p2{
  --font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-alt:'Calibri','Carlito','Segoe UI',var(--font);
  --canvas:#F3F4F6;          /* site gray-100 */
  --card:#FFFFFF;
  --ink:#111827;
  --body:#374151;
  --muted:#9CA3AF;
  --muted2:#6B7280;
  --line:#E1E3E7;
  --blue:#3B82F6;
  --blue-dark:#2563EB;
  --r:22px;
  font-family:var(--font);color:var(--body);background:var(--canvas);
  padding:90px 0 96px;-webkit-font-smoothing:antialiased;
}
.p2 *{box-sizing:border-box}
.p2 img{max-width:100%;display:block}
.p2 a{text-decoration:none}
.p2 :where(h2,h3,p){margin:0}
.p2 button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.p2-wrap{
  width:100%;margin:0 auto;
  padding:0 var(--p2-pad,40px);
  /* --p2-cw is the CONTENT width. box-sizing is border-box, so the side padding
     must be added on top of it — a bare max-width:1280px would render only 1200. */
  max-width:calc(var(--p2-cw,1280px) + 2 * var(--p2-pad,40px));
}

/* two-column split */
.p2-cols{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:start}

/* ---------- eyebrow ---------- */
.p2-eyb{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);margin:0 0 26px}
.p2-eyb i{font-style:normal;color:var(--blue);font-size:15px;line-height:1}

/* ---------- two-tone heading ---------- */
.p2-title{
  font-size:clamp(30px,3.6vw,42px);line-height:1.18;letter-spacing:-.02em;
  font-weight:600;color:var(--ink);margin:0 0 22px;max-width:16ch;
}
.p2-title em{font-style:normal;font-weight:600;color:var(--muted)}
.p2-lead{font-size:15.5px;line-height:1.65;color:var(--muted2);max-width:44ch;margin:0 0 30px}

/* ---------- featured visual ---------- */
.p2-figure{position:relative;border-radius:var(--r);overflow:hidden;background:#DBE6F3;aspect-ratio:4/3}
.p2 .p2-figure img{width:100%;height:100%;object-fit:cover;object-position:48% 42%;transition:transform .6s cubic-bezier(.22,1,.36,1)}  /* specificity must beat Elementor's `.elementor img{height:auto}` */
.p2 .p2-figure:hover img{transform:scale(1.04)}
.p2-badge{
  position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:999px;background:rgba(17,24,39,.55);backdrop-filter:blur(6px);
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.2px;
}
.p2-badge span{opacity:.65}

/* primary button — site standard: blue, white text, 8px radius, arrow */
.p2-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:28px;
  background:var(--blue);color:#fff;font-size:14px;font-weight:500;
  padding:13px 24px;border-radius:8px;border:1px solid transparent;transition:.25s;
}
.p2-cta:hover{background:var(--blue-dark)}
.p2-cta svg{width:16px;height:16px;transition:transform .25s}
.p2-cta:hover svg{transform:translateX(3px)}
.p2-circ{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);color:var(--ink);transition:.25s;
}
.p2-circ svg{width:15px;height:15px}
.p2-cta:hover .p2-circ{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- right column ---------- */
.p2-rlead{font-size:15.5px;line-height:1.65;color:var(--muted2);margin:0 0 34px;max-width:52ch}

/* accordion list */
.p2-item{border-bottom:1px solid var(--line)}
.p2-item:first-child{border-top:1px solid var(--line)}
.p2-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;text-align:left;
}
/* The accordion header is a <button>. Elementor/theme button styles give it a
   background on :hover/:focus, and because the button keeps focus after a click
   that white block STAYS visible while the item is open. Kill it in every state
   (high enough specificity to beat `.elementor button:hover` etc.), but keep a
   proper focus ring for keyboard users. */
.p2 .p2-acc .p2-head,
.p2 .p2-acc .p2-head:hover,
.p2 .p2-acc .p2-head:focus,
.p2 .p2-acc .p2-head:active{
  background:transparent;background-color:transparent;
  box-shadow:none;border:0;text-decoration:none;
}
.p2 .p2-acc .p2-head:focus{outline:none}
.p2 .p2-acc .p2-head:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.p2-head img{height:auto;max-height:26px;width:auto;max-width:190px;object-fit:contain;object-position:left center}
.p2-lock{display:inline-flex;align-items:center;gap:10px}
.p2-lock img{max-height:28px}
.p2-lock b{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.p2-plus{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  transition:transform .35s cubic-bezier(.22,1,.36,1),background .25s,color .25s,border-color .25s;
}
.p2-plus svg{width:14px;height:14px}
.p2-item:hover .p2-plus{border-color:var(--blue);color:var(--blue)}
.p2-item.is-open .p2-plus{transform:rotate(45deg);background:var(--blue);border-color:var(--blue);color:#fff}

.p2-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)}
.p2-item.is-open .p2-body{max-height:260px}
.p2-body__in{padding:0 0 26px;display:flex;gap:24px;align-items:flex-start}
.p2-body__txt{flex:1;min-width:0}
.p2-cat{font-size:12.5px;font-weight:600;color:var(--blue);margin:0 0 8px}
.p2-desc{font-size:14.5px;line-height:1.62;color:var(--muted2);margin:0 0 18px;max-width:48ch}
.p2-link{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink);transition:gap .25s}
.p2-link:hover{gap:14px}
.p2-link .p2-circ{width:32px;height:32px}
.p2-link .p2-circ svg{width:13px;height:13px}
.p2-link:hover .p2-circ{background:var(--blue);border-color:var(--blue);color:#fff}

/* reveal */
/* products: no reveal/appear effect — always visible */
.p2-rv{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.p2-rv{animation:none}}

/* responsive */
@media(max-width:960px){
  .p2-cols{grid-template-columns:1fr;gap:48px}
  .p2-title{max-width:22ch}
}
@media(max-width:520px){
  .p2{padding:64px 0 72px}
  .p2-wrap{--p2-pad:22px}
  .p2-body__in{flex-direction:column;gap:16px}
  .p2-head img{max-width:150px}
}

/* ------------------------------------------------------------
   SERVICES · Option 1 — Banner + card grid (.sv-)
   ------------------------------------------------------------ */
/* ============================================================
   IT-RANKS · Solutions & Services
   Full-width dark feature banner + 8-card grid beneath.
   Icons only. Brand: Work Sans + Calibri, #3B82F6, navy #0A1020.
   Classes .sv-
   ============================================================ */
.sv{
  --font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-alt:'Calibri','Carlito','Segoe UI',var(--font);
  --white:#FFFFFF;
  --ink:#374151;
  --muted:#6B7280;
  --line:#E5E7EB;
  --tint:#F4F8FF;
  --tint-line:#E1EAFB;
  --blue:#3B82F6;
  --blue-dark:#2563EB;
  --navy:#0A1020;
  --r:20px;
  font-family:var(--font);color:var(--ink);background:var(--white);
  padding:90px 0 96px;-webkit-font-smoothing:antialiased;
}
.sv *{box-sizing:border-box}
.sv a{text-decoration:none}
.sv :where(h2,h3,p){margin:0}
.sv-wrap{
  width:100%;margin:0 auto;
  padding:0 var(--sv-pad,40px);
  /* --sv-cw is the CONTENT width. box-sizing is border-box, so the side padding
     must be added on top of it — a bare max-width:1280px would render only 1200. */
  max-width:calc(var(--sv-cw,1280px) + 2 * var(--sv-pad,40px));
}

/* header */
.sv-eyebrow{display:flex;align-items:center;gap:11px;color:var(--blue);font-weight:600;font-size:15px;letter-spacing:.2px;margin:0 0 24px}
.sv-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--blue)}
.sv-title{font-family:var(--font-alt);font-weight:300;font-size:clamp(30px,3.8vw,42px);line-height:1.16;letter-spacing:-.3px;color:var(--ink);max-width:820px;margin:0 0 18px}
.sv-title b{color:var(--blue);font-weight:400}
.sv-lead{font-size:16px;line-height:1.6;color:var(--muted);max-width:720px;margin:0 0 44px}

/* full-width feature banner (dark)
   layers (bottom → top):
     0. base navy background colour
     1. <canvas class="sv-fx"> — the animated signal-lane field
     2. ::after gradient scrim — opaque navy on the LEFT so the copy stays readable,
        fading to transparent on the RIGHT where the animation shows through
     3. .sv-feat__main — the copy                                            */
.sv-feat{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--navy);
  color:#fff;padding:54px 44px;margin:0 0 16px;min-height:var(--sv-feat-h, 340px);
  display:flex;align-items:center;gap:44px;flex-wrap:wrap;
}
.sv-fx{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.sv-feat::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--navy) 0%,
    rgba(10,16,32,.94) 26%,
    rgba(10,16,32,.55) 52%,
    rgba(10,16,32,.10) 78%,
    rgba(10,16,32,0) 100%);
}
/* the chips used to hold the right half open; now the copy is capped instead,
   so the animation on the right keeps its room */
.sv-feat__main{position:relative;z-index:2;flex:0 1 560px;min-width:0;max-width:min(560px,100%)}
.sv-feat__label{font-size:12.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#7FB0FF;margin:0 0 14px;display:inline-flex;align-items:center;gap:10px}
.sv-feat__label::before{content:"";width:26px;height:2px;border-radius:2px;background:#3B82F6}
.sv-feat__title{font-family:var(--font-alt);font-weight:300;font-size:clamp(24px,2.6vw,34px);line-height:1.18;letter-spacing:-.3px;color:#fff;margin:0 0 12px;max-width:20ch}
.sv-feat__text{font-size:15px;line-height:1.62;color:rgba(255,255,255,.72);margin:0;max-width:52ch}
/* 8-card grid */
.sv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sv-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:222px;
  border-radius:var(--r);padding:26px 24px;background:var(--white);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,24,40,.05);text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s;
}
/* whole card is a link — a small arrow reveals in the corner on hover */
.sv-arrow{position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--blue);background:var(--tint);border:1px solid var(--line);
  opacity:0;transform:translate(-5px,5px) scale(.85);
  transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1),background .3s,color .3s,border-color .3s}
.sv-arrow svg{width:15px;height:15px}
.sv-card:hover .sv-arrow{opacity:1;transform:none}
.sv-card:hover .sv-arrow{background:var(--blue);color:#fff;border-color:transparent}
.sv-card--blue .sv-arrow,.sv-card--dark .sv-arrow{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff}
.sv-card--blue:hover .sv-arrow,.sv-card--dark:hover .sv-arrow{background:#fff;color:var(--blue);border-color:transparent}
.sv-card:hover{transform:translateY(-6px);box-shadow:0 26px 55px rgba(16,24,40,.14)}
.sv-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--tint);color:var(--blue);margin-bottom:18px;transition:transform .3s ease}
.sv-card:hover .sv-ico{transform:scale(1.08)}
.sv-ico svg{width:30px;height:30px}
.sv-name{font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.28;letter-spacing:-.01em;margin:0 0 8px}
.sv-desc{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.sv-go{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-weight:600;font-size:12.5px;transition:gap .2s}
.sv-card:hover .sv-go{gap:11px}
.sv-go svg{width:15px;height:15px}

/* variants */
.sv-card--tint{background:var(--tint);border-color:var(--tint-line)}
.sv-card--blue{background:linear-gradient(140deg,var(--blue),var(--blue-dark));border-color:transparent;color:#fff}
.sv-card--blue .sv-ico{background:rgba(255,255,255,.18);color:#fff}
.sv-card--blue .sv-name{color:#fff}.sv-card--blue .sv-desc{color:rgba(255,255,255,.86)}.sv-card--blue .sv-go{color:#fff}
.sv-card--dark{background:radial-gradient(460px 280px at 82% 0%, rgba(59,130,246,.26), transparent 60%),linear-gradient(150deg,#0B1222,#0A1020);border-color:transparent;color:#fff}
.sv-card--dark .sv-ico{background:rgba(255,255,255,.12);color:#93C5FD}
.sv-card--dark .sv-name{color:#fff}.sv-card--dark .sv-desc{color:rgba(255,255,255,.68)}.sv-card--dark .sv-go{color:#93C5FD}

/* reveal */
.sv-rv{animation:itr-fade .7s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){.sv-rv{animation:none}.sv-card{transition:none}}

/* responsive */
@media(max-width:1024px){.sv-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .sv{padding:64px 0 72px}
  .sv-wrap{--sv-pad:22px}
  .sv-feat{padding:30px 26px;gap:24px}
  .sv-grid{grid-template-columns:1fr}
  .sv-card{min-height:0}
}

/* ------------------------------------------------------------
   SERVICES · Option 2 — Editorial (.o2-)
   ------------------------------------------------------------ */
/* ============================================================
   IT-RANKS · Solutions & Services — OPTION 2
   Editorial / minimal: neutral canvas, SHARP-cornered white
   cards, corner dot markers, bare line icons, big display head.
   Brand: Work Sans + Calibri, #3B82F6.  Classes .o2-
   Reset uses :where() so class margins are never clobbered.
   ============================================================ */
.o2{
  --font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-alt:'Calibri','Carlito','Segoe UI',var(--font);
  --canvas:#EFEFEE;
  --card:#FFFFFF;
  --ink:#111827;
  --body:#374151;
  --muted:#6B7280;
  --line:#DFDFDD;
  --blue:#3B82F6;
  --blue-dark:#2563EB;
  --r:20px;                 /* same card radius as the other sections */
  font-family:var(--font);color:var(--body);background:var(--canvas);
  padding:96px 0 104px;-webkit-font-smoothing:antialiased;
}
.o2 *{box-sizing:border-box}
.o2 a{text-decoration:none}
.o2 :where(h2,h3,p){margin:0}
.o2-wrap{
  width:100%;margin:0 auto;
  padding:0 var(--o2-pad,40px);
  /* --o2-cw is the CONTENT width. box-sizing is border-box, so the side padding
     must be added on top of it — a bare max-width:1280px would render only 1200. */
  max-width:calc(var(--o2-cw,1280px) + 2 * var(--o2-pad,40px));
}

/* ---------- intro split ---------- */
.o2-intro{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:start;margin:0 0 84px}
.o2-rule{height:1px;background:var(--line);margin:0 0 30px}
.o2-p{font-size:15.5px;line-height:1.65;color:var(--body);max-width:40ch;margin:0 0 20px}
/* primary button — site standard: blue, white text, 8px radius, arrow */
.o2-btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  background:var(--blue);color:#fff;font-size:14px;font-weight:500;
  padding:13px 24px;border-radius:8px;border:1px solid transparent;transition:.25s;
}
.o2-btn:hover{background:var(--blue-dark)}
.o2-btn svg{width:16px;height:16px;transition:transform .25s}
.o2-btn:hover svg{transform:translateX(3px)}

/* capability tags */
.o2-tagslabel{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);margin:0 0 24px}
.o2-tagslabel::before{content:"";width:24px;height:1px;background:var(--blue)}
.o2-taglist{display:flex;flex-wrap:wrap;gap:10px}
.o2-tag{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:500;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:11px 16px;transition:.22s;
}
.o2-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);flex:none;transition:.22s}
.o2-tag:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.o2-tag:hover::before{transform:scale(1.4)}

/* ---------- display heading ---------- */
.o2-eyb{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);margin:0 0 22px}
.o2-eyb i{font-style:normal;color:var(--blue);font-size:15px;line-height:1}
.o2-title{
  font-family:var(--font-alt);font-weight:300;
  font-size:clamp(32px,4.6vw,54px);line-height:1.1;letter-spacing:-.02em;
  color:var(--ink);max-width:18ch;margin:0 0 50px;
}
.o2-title em{font-style:normal;color:var(--muted)}

/* ---------- service cards ---------- */
.o2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.o2-card{
  position:relative;background:var(--card);border-radius:var(--r);
  padding:32px 28px 34px;display:flex;flex-direction:column;min-height:250px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.o2-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(17,24,39,.10)}
.o2-ico{display:block;color:var(--ink);margin:0 0 46px;transition:color .3s}
.o2-ico svg{width:40px;height:40px}
.o2-card:hover .o2-ico{color:var(--blue)}
.o2-name{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.01em;margin:0 0 12px}
.o2-desc{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}
.o2-go{margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);transition:gap .22s,color .22s}
.o2-go svg{width:15px;height:15px}
.o2-card:hover .o2-go{color:var(--blue);gap:12px}

/* reveal */
.o2-rv{animation:itr-fade .7s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){.o2-rv{animation:none}.o2-card{transition:none}}

/* responsive */
@media(max-width:1080px){
  .o2-intro{grid-template-columns:1fr;gap:48px;margin-bottom:80px}
  .o2-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .o2{padding:66px 0 74px}
  .o2-wrap{--o2-pad:22px}
  .o2-grid{grid-template-columns:1fr}
  .o2-card{min-height:0}
  .o2-ico{margin-bottom:28px}
}



/* ------------------------------------------------------------
   PRODUCTS · Option 3 — staggered site bento (.pb-)
   ------------------------------------------------------------ */
/* ============================================================
   IT-RANKS · Product & Innovation — OPTION 3
   The live-site bento (text left / product bento right), updated
   with the final 6 products and 2 extra containers (4 -> 6).
   Every card shares ONE layout: media + white logo chip + name/category.
   Reset uses :where() so class margins are never clobbered.
   Classes .pb-
   ============================================================ */
.pb{
  --font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-alt:'Calibri','Carlito','Segoe UI',var(--font);
  --canvas:#FFFFFF;
  --ink:#374151;
  --muted:#6B7280;
  --line:#E5E7EB;
  --blue:#3B82F6;
  --blue-dark:#2563EB;
  --r:20px;
  font-family:var(--font);color:var(--ink);background:var(--canvas);
  padding:90px 0 96px;-webkit-font-smoothing:antialiased;
}
.pb *{box-sizing:border-box}
.pb img{max-width:100%;display:block}
.pb a{text-decoration:none}
.pb :where(h2,h3,p){margin:0}
/* --pb-cw is the CONTENT width (what you actually see), so it lines up with the site's
   1280px container. box-sizing is border-box here, so the side padding has to be added
   back on top of it — otherwise a max-width of 1280 would render only 1200 of content. */
.pb-wrap{
  width:100%;margin:0 auto;
  padding:0 var(--pb-pad,40px);
  max-width:calc(var(--pb-cw,1280px) + 2 * var(--pb-pad,40px));
}

/* ---------- layout: text left, bento right ---------- */
.pb-cols{display:grid;grid-template-columns:minmax(280px,.85fr) 1.6fr;gap:64px;align-items:start}

/* Sticky text column: it pins while the bento scrolls past, and releases when the
   section ends (a sticky item can never travel outside its own parent, so .pb-cols
   is the natural stop — no JS needed).
   `align-self:start` is required: a stretched grid item fills the row and has no
   room to move, so sticky would appear to do nothing. */
.pb-text{align-self:start}
.pb--sticky .pb-text{position:sticky;top:var(--pb-top,96px)}
@media(max-width:1080px){
  .pb--sticky .pb-text{position:static}   /* single column — nothing to scroll past */
}

.pb-eyb{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;letter-spacing:.2px;color:var(--blue);margin:0 0 24px}
.pb-eyb::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--blue)}
.pb-title{font-family:var(--font-alt);font-weight:300;font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.5px;color:var(--ink);margin:0 0 24px;max-width:15ch}
.pb-title em{font-style:normal;color:var(--muted)}
.pb-lead{font-size:clamp(16px,1.3vw,18px);line-height:1.75;color:var(--muted);margin:0 0 28px;max-width:44ch}
.pb-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--blue);color:#fff;font-size:14px;font-weight:500;
  padding:13px 24px;border-radius:8px;border:1px solid transparent;transition:.25s;
}
.pb-btn:hover{background:var(--blue-dark)}
.pb-btn svg{width:16px;height:16px;transition:transform .25s}
.pb-btn:hover svg{transform:translateX(3px)}

/* ---------- bento: staggered 2 columns x 3 cards (per the wireframe) ----------
   Left  column: tall / medium / short
   Right column: tall / short  / medium   <- mirrored, so both columns end level.
   Heights are proportional (flex-grow), so the whole block scales with its width. */
.pb-bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--pb-gap,20px);aspect-ratio:645/600}
.pb-col{display:flex;flex-direction:column;gap:var(--pb-gap,20px);min-height:0}

/* The height ratio lives in a CUSTOM PROPERTY, and `flex` is declared on ONE
   low-specificity selector. Otherwise the per-card nth-child rules (0,4,0) would
   outrank any media-query override of `flex` (0,2,0) and the cards would keep
   flex-growing on tablet/phone — collapsing to slivers. */
.pb-col > .pb-card{flex:var(--h,1) 1 0%;min-height:0}

.pb-col:nth-child(1) > .pb-card:nth-child(1){--h:310}   /* tall   */
.pb-col:nth-child(1) > .pb-card:nth-child(2){--h:224}   /* medium */
.pb-col:nth-child(1) > .pb-card:nth-child(3){--h:151}   /* short  */

.pb-col:nth-child(2) > .pb-card:nth-child(1){--h:310}   /* tall   */
.pb-col:nth-child(2) > .pb-card:nth-child(2){--h:150}   /* short  */
.pb-col:nth-child(2) > .pb-card:nth-child(3){--h:224}   /* medium */

/* ---------- the shared card ---------- */
.pb-card{
  position:relative;overflow:hidden;border-radius:var(--r);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:22px;
  background:linear-gradient(150deg,#EDEEF0,#DFE1E5);      /* placeholder media */
  border:1px solid var(--line);
  transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s;
}
.pb-card:hover{transform:translateY(-5px);box-shadow:0 26px 55px rgba(16,24,40,.16)}

/* product image (when supplied) sits behind everything */
.pb img.pb-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}  /* must beat `.elementor img{height:auto}` */
.pb-card:hover img.pb-shot{transform:scale(1.05)}
/* scrim so the label stays readable on photo cards */
.pb-card--img::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,14,28,.30) 0%,rgba(8,14,28,0) 38%,rgba(8,14,28,.55) 100%);
}
.pb-card--img{border-color:transparent}

/* white logo chip — top-left */
.pb-chip{
  position:relative;z-index:2;align-self:flex-start;
  display:grid;place-items:center;
  background:#fff;border-radius:14px;padding:14px 18px;
  box-shadow:0 6px 18px rgba(16,24,40,.12);
}
.pb-chip img{height:26px;width:auto;max-width:150px;object-fit:contain}
.pb-chip--lock{display:inline-flex;align-items:center;gap:9px}
.pb-chip--lock img{height:26px}
.pb-chip--lock b{font-size:16px;font-weight:700;letter-spacing:-.02em;color:#111827}

/* name + category — bottom-left */
.pb-foot{position:relative;z-index:2}
.pb-name{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 3px}
.pb-cat{font-size:12.5px;line-height:1.4;color:var(--muted);margin:0}
.pb-card--img .pb-name{color:#fff}
.pb-card--img .pb-cat{color:rgba(255,255,255,.78)}

/* "image coming soon" hint on placeholder cards */
.pb-card:not(.pb-card--img) .pb-chip{box-shadow:0 4px 14px rgba(16,24,40,.08)}

/* reveal */
/* products: no reveal/appear effect — always visible */
.pb-rv{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.pb-rv{animation:none}.pb-card{transition:none}}

/* responsive */

/* TABLET — text stacks above; the bento goes full width. Drop the aspect-ratio
   (at full width it would make the block absurdly tall) and give each card an
   explicit height instead, keeping the mirrored stagger. Both columns still
   total 720px, so they finish level. */
@media(max-width:1080px){
  .pb-cols{grid-template-columns:1fr;gap:40px}
  .pb-bento{aspect-ratio:auto}

  .pb-col > .pb-card{flex:none}                               /* same (0,2,0) -> wins, later */
  .pb-col:nth-child(1) > .pb-card:nth-child(1){height:400px}  /* tall   */
  .pb-col:nth-child(1) > .pb-card:nth-child(2){height:300px}  /* medium */
  .pb-col:nth-child(1) > .pb-card:nth-child(3){height:240px}  /* short  */
  .pb-col:nth-child(2) > .pb-card:nth-child(1){height:400px}  /* tall   */
  .pb-col:nth-child(2) > .pb-card:nth-child(2){height:240px}  /* short  */
  .pb-col:nth-child(2) > .pb-card:nth-child(3){height:300px}  /* medium */
  /* both columns total 940px -> they still finish level */
}

/* PHONE — one column; every card the same comfortable height, so nothing
   is squashed and the logo chip + label always fit. */
@media(max-width:620px){
  .pb{padding:64px 0 72px}
  .pb-wrap{--pb-pad:22px}
  .pb-bento{grid-template-columns:1fr;aspect-ratio:auto}

  .pb-col > .pb-card{flex:none;height:auto;min-height:212px;padding:18px}
  /* neutralise the tablet per-card heights */
  .pb-col:nth-child(1) > .pb-card:nth-child(1),
  .pb-col:nth-child(1) > .pb-card:nth-child(2),
  .pb-col:nth-child(1) > .pb-card:nth-child(3),
  .pb-col:nth-child(2) > .pb-card:nth-child(1),
  .pb-col:nth-child(2) > .pb-card:nth-child(2),
  .pb-col:nth-child(2) > .pb-card:nth-child(3){height:auto}
  .pb-chip{padding:12px 15px;border-radius:12px}
  .pb-chip img{height:22px;max-width:130px}
  .pb-name{font-size:17px}
  /* the flagship photo card gets a little more room to breathe */
  .pb-card--img{min-height:250px}
}


/* ============================================================
   IT-RANKS · Clients & Partners  (.cp-)  — vertical logo slider
   ============================================================ */
/* ============================================================
   IT-RANKS · Clients & Partners
   Heading left · paged logo SLIDER right.
   Each slide = 5 columns x 2 rows = 10 logos. Arrows + dots,
   auto-advance, pause on hover.
   Reset uses :where() so class margins are never clobbered.
   Classes .cp-
   ============================================================ */
.cp{
  --font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-alt:'Calibri','Carlito','Segoe UI',var(--font);
  --canvas:#FFFFFF;
  --ink:#374151;
  --muted:#6B7280;
  --line:#E5E7EB;
  --blue:#3B82F6;
  --cols:5;                 /* 5 columns x 2 rows = 10 logos per slide */
  --rows:2;                 /* rows per slide — must equal ceil(10 / --cols) */
  --rowh:104px;             /* height of one logo row */
  font-family:var(--font);color:var(--ink);background:var(--canvas);
  padding:90px 0 96px;-webkit-font-smoothing:antialiased;
}
.cp *{box-sizing:border-box}
.cp img{max-width:100%;display:block}
.cp :where(h2,h3,p){margin:0}
/* :where() keeps this reset at specificity (0,1,0) — as a plain `.cp button` it would be
   (0,1,1) and would beat every class rule below it, killing the dot backgrounds and the
   button borders. `padding:0` matters too: the theme's own button padding otherwise
   survives inside the fixed 38px box and pushes the arrow off-centre. */
.cp :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;margin:0}
.cp-wrap{
  width:100%;margin:0 auto;
  padding:0 var(--cp-pad,40px);
  /* --cp-cw is the CONTENT width. box-sizing is border-box, so the side padding
     must be added on top of it — a bare max-width:1280px would render only 1200. */
  max-width:calc(var(--cp-cw,1280px) + 2 * var(--cp-pad,40px));
}

/* ---------- block: heading left, slider right ---------- */
.cp-block{display:grid;grid-template-columns:minmax(210px,.85fr) 2.7fr;gap:56px;align-items:center}
.cp-block + .cp-block{margin-top:var(--cp-gap,76px)}   /* space between the two blocks */

.cp-eyb{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;letter-spacing:.2px;color:var(--blue);margin:0 0 18px}
.cp-eyb::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--blue)}
.cp-title{font-family:var(--font-alt);font-weight:300;font-size:clamp(26px,2.9vw,34px);line-height:1.2;letter-spacing:-.3px;color:var(--ink);margin:0 0 16px}
.cp-title b{color:var(--blue);font-weight:400}
.cp-lead{font-size:15px;line-height:1.65;color:var(--muted);max-width:34ch}

/* ---------- slider (vertical: pages slide up / down) ---------- */
/* viewport height is derived, so a breakpoint only has to change --cols/--rows */
.cp-slider{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.cp-viewport{
  overflow:hidden;
  /* --cp-vp is set per active page by initClients(); the calc() is the pre-JS
     fallback. A part-full last page must NOT reserve the full grid height —
     that reserved space is what read as "empty slots". */
  height:var(--cp-vp, calc(var(--rows) * var(--rowh)));
  transition:height .5s cubic-bezier(.22,1,.36,1);
  /* No border here on purpose: EVERY line is drawn by a cell (see .cp-cell), so a
     cell with no logo can erase its own outline and leave no orphaned frame edge. */
}
.cp-track{
  display:flex;flex-direction:column;
  transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform;
}
/* Rigid grid: every card is the same width, always. A short last row is completed
   with INVISIBLE filler cards (see .cp-cell--empty) rather than by stretching the
   real ones — stretching keeps the block full but makes the cards inconsistent. */
.cp-page{
  flex:0 0 auto;
  display:grid;grid-template-columns:repeat(var(--cols),1fr);
  grid-auto-rows:var(--rowh);          /* height follows the rows actually filled */
}
/* Each cell owns its outline. Right + bottom on every cell draws each shared edge
   exactly once (no doubled hairlines, nothing overflowing the clipped viewport);
   the first row adds the top edge and the first column the left edge, which is
   what closes the block. Consequence, and the point of doing it this way: a cell
   with no logo sets its own borders to transparent and simply is not there — no
   frame edge is left hanging beside it, because no frame owns that edge. */
.cp-cell{
  display:grid;place-items:center;padding:24px 20px;min-height:0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--canvas);transition:background .25s ease,border-color .25s ease;
}
.cp-page .cp-cell:nth-child(-n+5){border-top:1px solid var(--line)}   /* top row    */
.cp-page .cp-cell:nth-child(5n+1){border-left:1px solid var(--line)}  /* first column */

/* No logo → no card at all: stroke, fill and hover are all zeroed. Written at the
   same specificity as the row/column edge rules above (and after them) so it wins;
   a bare .cp-cell--empty would lose to .cp-page .cp-cell:nth-child(...). */
.cp-page .cp-cell.cp-cell--empty,
.cp-page .cp-cell.cp-cell--empty:hover{background:transparent;border-color:transparent}
.cp-cell img{
  /* explicit box + contain: several supplied SVGs ship absurd intrinsic sizes
     (width="1" height="1"), which max-* can never grow. */
  width:100%;height:52px;object-fit:contain;object-position:center;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.cp-cell:hover{background:#F7F9FC}
.cp-cell:hover img{transform:scale(1.07)}

/* ---------- controls ---------- */
/* dots column BEFORE the grid, arrows column AFTER it — both stacked vertically */
.cp-nav{display:flex;flex-direction:column;gap:10px}
.cp-dots{display:flex;flex-direction:column;gap:8px}
.cp-dot{width:8px;height:8px;border-radius:999px;background:#CBD2DB;transition:.25s;padding:0}
.cp-dot:hover{background:#9CA3AF}
.cp-dot.is-active{background:var(--blue);height:24px}   /* grows along the vertical axis */
.cp-btn{
  width:38px;height:38px;padding:0;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink);line-height:0;box-shadow:none;
  /* only these three properties animate — a bare `transition:.22s` is transition-all,
     which lets any inherited theme transform/padding animate too and makes the icon slide */
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.cp-btn svg{width:16px;height:16px;display:block}
/* the arrow must not move between states: pin the box and kill any theme hover transform */
.cp-btn:hover,
.cp-btn:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff;transform:none;box-shadow:none}
.cp-btn:disabled{opacity:.35;cursor:default}
.cp-btn:disabled:hover{background:none;border-color:var(--line);color:var(--ink)}
/* after a MOUSE click a button keeps :focus (not :focus-visible); force it back to the
   default look so the arrow icon never sticks white-on-white / hidden once the mouse leaves */
.cp-btn:focus:not(:focus-visible){background:none;border-color:var(--line);color:var(--ink)}
.cp-btn svg{color:currentColor}
/* optional: hide the up/down navigation arrows */
.cp-nonav .cp-nav{display:none}

@media(prefers-reduced-motion:reduce){.cp-track{transition:none}}

/* responsive */
@media(max-width:1024px){
  .cp{--cols:4;--rows:3}          /* 10 logos / 4 cols = 3 rows */
  .cp-block{grid-template-columns:1fr;gap:30px;align-items:start}
  .cp-lead{max-width:none}
  /* 4 columns: re-aim the top row / first column edges */
  .cp-page .cp-cell:nth-child(-n+5){border-top:none}
  .cp-page .cp-cell:nth-child(5n+1){border-left:none}
  .cp-page .cp-cell:nth-child(-n+4){border-top:1px solid var(--line)}
  .cp-page .cp-cell:nth-child(4n+1){border-left:1px solid var(--line)}
  .cp-page .cp-cell.cp-cell--empty{border-color:transparent}
}
@media(max-width:680px){
  .cp{--cols:2;--rows:5;--rowh:92px;padding:64px 0 72px}   /* 10 logos / 2 cols = 5 rows */
  .cp-wrap{--cp-pad:22px}
  .cp-cell{padding:18px 14px}
  .cp-cell img{height:44px}
  .cp-slider{gap:10px}
  .cp-btn{width:34px;height:34px}
  /* 2 columns */
  .cp-page .cp-cell:nth-child(-n+4){border-top:none}
  .cp-page .cp-cell:nth-child(4n+1){border-left:none}
  .cp-page .cp-cell:nth-child(-n+2){border-top:1px solid var(--line)}
  .cp-page .cp-cell:nth-child(2n+1){border-left:1px solid var(--line)}
  .cp-page .cp-cell.cp-cell--empty{border-color:transparent}
}

/* ============================================================
   ABOUT US — sections (.ab- / .ir-)
   Ported from Website Parts/About Section/index.html. Each About
   widget renders inside a .ab wrapper so these design tokens resolve.
   ============================================================ */
/* ============================================================
   IT-RANKS · ABOUT US
   Matches the IT-RANKS design system used across the site:
   Work Sans body · Calibri/Carlito-stack display · brand blue
   #3B82F6 · light canvas · soft white cards · dark navy accents.
   All classes prefixed .ab-  ·  reset uses :where() so class
   margins are never clobbered by element+class specificity.
   ============================================================ */
.ab{
  --font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-alt:'Calibri','Carlito','Segoe UI',var(--font);
  --canvas:#FCFCFD;
  --card:#FFFFFF;
  --panel:#F3F4F6;
  --ink:#374151;
  --ink-strong:#111827;
  --muted:#6B7280;
  --line:#E5E7EB;
  --blue:#3B82F6;
  --blue-dark:#2563EB;
  --navy:#0A1020;
  --tint:#F4F8FF;
  --tint-line:#E1EAFB;
  --r:20px;
  --cw:1280px;            /* content width — matches the site container */
  --pad:40px;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-hover:0 20px 45px rgba(16,24,40,.13);
  font-family:var(--font);color:var(--ink);background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}
.ab *{box-sizing:border-box}
.ab img{max-width:100%;display:block}
/* :where() keeps this at (0,1,0) so button colour classes (.ab-btn--ondark etc.)
   are not out-specified — as `.ab a` (0,1,1) it beat them and the white-on-dark
   button inherited white text on its white background (invisible). */
.ab :where(a){text-decoration:none;color:inherit}
.ab :where(h1,h2,h3,h4,p,ul,li){margin:0;padding:0}
.ab :where(ul){list-style:none}
.ab-wrap{
  width:100%;margin:0 auto;padding:0 var(--pad);
  /* border-box: add the padding back on top of the content width so the content
     itself is a true --cw (1280), not 1280-minus-padding */
  max-width:calc(var(--cw) + 2 * var(--pad));
}
.ab-eyb{display:inline-flex;align-items:center;gap:11px;font-size:14px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);margin:0 0 20px}
.ab-eyb::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--blue)}
.ab-eyb--light{color:#7FB0FF}
.ab-eyb--light::before{background:#3B82F6}

/* section rhythm */
.ab-sec{padding:92px 0}
.ab-sec--tight{padding:72px 0}

/* buttons (site style) */
.ab-btn{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;padding:13px 22px;border-radius:8px;background:var(--blue);color:#fff;border:1px solid transparent;transition:.25s}
.ab-btn svg{width:17px;height:17px;transition:transform .25s}
.ab-btn:hover{background:var(--blue-dark)}
.ab-btn:hover svg{transform:translateX(3px)}
.ab-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.ab-btn--ghost:hover{background:var(--tint);border-color:var(--tint-line);color:var(--blue)}
/* ghost button on the dark hero */
.ab-hero .ab-btn--ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.ab-hero .ab-btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff}
.ab-btn--ondark{background:#fff;color:var(--navy)}
.ab-btn--ondark:hover{background:#EAF1FF}

/* ============================================================
   HERO
   ============================================================ */
/* dark navy hero — matches the home page's "INNOVATION IN OUR DNA" banner.
   Everything BELOW the hero stays on the light canvas. */
.ab-hero{
  position:relative;overflow:hidden;
  min-height:110vh;                      /* full-height hero (110vh site-wide) */
  display:flex;align-items:center;       /* centre the content vertically */
  padding:96px 0;                        /* breathing room if content exceeds 90vh */
  background:
    radial-gradient(680px 420px at 82% 6%,rgba(59,130,246,.24),transparent 60%),
    radial-gradient(560px 360px at 6% 100%,rgba(59,130,246,.12),transparent 60%),
    linear-gradient(160deg,#0B1222 0%,#0A1020 60%,#080D18 100%);
  color:#fff;
}
.ab-hero > .ab-wrap{width:100%}          /* fill the flex row */
/* animated pixel-shimmer canvas (ported from the Framer "Pixel Card").
   Masked so it's strongest on the right and fades out under the heading, so
   the text stays readable. */
.ab-hero__fx{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.6) 55%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.6) 55%,#000 100%);
}
.ab-hero__inner{position:relative;z-index:1;max-width:900px}
.ab-hero h1{font-family:var(--font-alt);font-weight:300;font-size:clamp(32px,4.6vw,56px);line-height:1.06;letter-spacing:-.6px;color:#fff;max-width:16ch}
.ab-hero h1 b{color:#7FB0FF;font-weight:400}
.ab-hero__lead{font-size:clamp(16px,1.4vw,18px);line-height:1.7;color:rgba(255,255,255,.68);margin-top:26px;max-width:56ch}
.ab-hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ── scroll cue (mouse) — same look as the Innovation hero; links to #down ──
   A single anchor: the border is the "mouse", the ::after dot is animated.
   Visible by default (no GSAP dependency); JS smooth-scrolls to #down. */
.itr-scrollcue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:5;display:block;width:26px;height:42px;
  border:2px solid rgba(255,255,255,.32);border-radius:13px;
  cursor:pointer;text-decoration:none;
  opacity:0;animation:itrCueIn .6s ease-out .5s forwards;
  transition:border-color .3s,transform .3s;
}
.itr-scrollcue:hover{border-color:rgba(255,255,255,.7);transform:translateX(-50%) translateY(3px)}
.itr-scrollcue::after{content:"";position:absolute;top:6px;left:50%;width:4px;height:8px;
  background:#fff;border-radius:2px;transform:translateX(-50%);animation:itrScrollDot 1.8s infinite}
@keyframes itrScrollDot{0%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(18px)}}
@keyframes itrCueIn{to{opacity:.85}}
@media(prefers-reduced-motion:reduce){
  .itr-scrollcue{animation:none;opacity:.85}
  .itr-scrollcue::after{animation:none}
}

/* stats row (light — lives in the Who We Are section) */
.ab-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.ab-stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;box-shadow:var(--shadow);
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s;
}
.ab-stat:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:transparent}
.ab-stat b{display:block;font-family:var(--font-alt);font-weight:400;font-size:38px;line-height:1;color:var(--blue);letter-spacing:-.02em}
.ab-stat span{display:block;margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ============================================================
   WHO WE ARE
   ============================================================ */
.ab-who{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.ab-who__body p{font-size:16px;line-height:1.75;color:var(--muted)}
.ab-who__body p + p{margin-top:18px}
.ab-h2{font-family:var(--font-alt);font-weight:300;font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.3px;color:var(--ink-strong)}
.ab-h2 b{color:var(--blue);font-weight:400}
.ab-quote{margin-top:30px;padding:26px 28px;border-left:3px solid var(--blue);background:var(--tint);border-radius:0 14px 14px 0}
.ab-quote p{font-family:var(--font-alt);font-weight:400;font-size:clamp(19px,2vw,23px);line-height:1.35;color:var(--ink-strong)}

/* ============================================================
   VISION · MISSION · APPROACH · REACH  (4-up)
   ============================================================ */
.ab-vm{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.ab-vmcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px 32px;box-shadow:var(--shadow);transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s;overflow:hidden}
.ab-vmcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:transparent}
.ab-vmico{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;background:var(--tint);color:var(--blue);margin-bottom:20px;transition:transform .3s}
.ab-vmcard:hover .ab-vmico{transform:scale(1.08)}
.ab-vmico svg{width:26px;height:26px}
.ab-vmcard h3{font-size:18px;font-weight:600;color:var(--ink-strong);margin-bottom:10px}
.ab-vmcard p{font-size:14px;line-height:1.62;color:var(--muted)}

/* ============================================================
   IRANKS acronym band  (dark navy — the signature moment)
   ============================================================ */
/* IT-RANKS — pinned, scroll-morphing dotted letters (name · dots · description).
   Default markup (.ir-fallback) is a plain stacked list so the content is
   readable with no JS / reduced motion; JS adds .is-anim to switch on the
   pinned canvas that morphs one dotted letter into the next as you scroll. */
.ab-iranks{
  position:relative;color:#fff;
  background:
    radial-gradient(680px 420px at 78% 12%,rgba(59,130,246,.20),transparent 60%),
    radial-gradient(560px 360px at 14% 92%,rgba(59,130,246,.12),transparent 60%),
    linear-gradient(160deg,#0B1222 0%,#0A1020 60%,#080D18 100%);
}
.ab-iranks .ir-stage{display:none}

.ab-iranks.is-anim{height:var(--ir-h,560vh)}   /* 7 slides incl. the IT-RANKS reveal */
.ab-iranks.is-anim .ir-fallback{display:none}
.ab-iranks.is-anim .ir-stage{display:grid}

/* the pinned stage */
.ir-stage{
  position:sticky;top:0;height:100vh;
  grid-template-columns:minmax(180px,270px) minmax(0,1fr) minmax(180px,270px);
  align-items:center;gap:28px;
  width:100%;max-width:calc(1280px + 80px);margin:0 auto;padding:0 40px;
  --ir-slot:270px;               /* height of one text slot (the scroll viewport) */
}
/* canvas spans the full 1280px content width (behind the side text), so the
   final IT-RANKS wordmark can be a true 1280px wide on desktop.
   NOTE: <canvas> is a replaced element, so an explicit width is required —
   left+right:auto would leave it at its intrinsic size, not stretch it. */
.ir-canvas{
  position:absolute;top:50%;left:40px;transform:translateY(-50%);
  width:calc(100% - 80px);height:64vh;display:block;z-index:0;
}
.ir-name,.ir-desc{position:relative;z-index:1}
.ir-name{grid-column:1}
.ir-desc{grid-column:3}
/* text scrolls vertically (a slot per letter); soft-masked top/bottom edges so the
   copy slides out of view rather than fading in place */
.ir-side{
  position:relative;height:var(--ir-slot);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%);
}
.ir-track{position:absolute;left:0;right:0;top:0;will-change:transform}
.ir-slot{height:var(--ir-slot);display:flex;align-items:center}
.ir-name .ir-slot{justify-content:flex-end}
.ir-desc .ir-slot{justify-content:flex-start}
.ir-name h3{
  font-size:clamp(22px,2.5vw,32px);font-weight:600;line-height:1.22;
  letter-spacing:.01em;text-transform:uppercase;color:#fff;text-align:right;
}
.ir-desc p{
  font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.66);max-width:34ch;
}
/* progress dots */
.ir-nav{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);display:flex;gap:9px}
.ir-nav i{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.22);transition:.3s}
.ir-nav i.on{background:var(--blue);width:22px}

/* mobile + tablet-portrait: stack vertically —
   main word (top) · glowing letter (middle) · explainer text (bottom), centred.
   NOTE: the display override must out-specify `.ab-iranks.is-anim .ir-stage{display:grid}`
   (0,2,1) — a bare `.ir-stage` (0,1,0) would lose and the grid would remain. */
@media(max-width:900px){
  .ab-iranks.is-anim .ir-stage{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;padding:64px 22px 56px;
  }
  .ir-canvas{                                   /* glowing letter — middle */
    position:relative;left:auto;top:auto;transform:none;order:2;
    width:100%;height:30vh;
  }
  .ir-name{order:1;width:100%;height:78px}      /* main word — top */
  .ir-name .ir-slot{height:78px;justify-content:center}
  .ir-name h3{text-align:center;font-size:clamp(19px,4.6vw,26px)}
  .ir-desc{order:3;width:100%;height:32vh}      /* explainer — bottom */
  .ir-desc .ir-slot{height:32vh;justify-content:center}
  .ir-desc p{text-align:center;font-size:14px;line-height:1.6;max-width:42ch;margin:0 auto}
  .ir-nav{bottom:2.5vh}
}

/* fallback / reduced-motion stacked list */
.ir-fallback{padding:88px 0 92px}
.ir-fallback .ab-wrap{display:grid;gap:20px}
.ir-fb-head{max-width:640px;margin:0 0 22px}
.ir-fb-head h2{font-family:var(--font-alt);font-weight:300;font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.3px;color:#fff}
.ir-fb-head h2 b{color:#7FB0FF;font-weight:400}
.ir-entry{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;padding:22px 0;border-top:1px solid rgba(255,255,255,.12)}
.ir-glyph{font-family:var(--font-alt);font-weight:400;font-size:52px;line-height:1;color:#7FB0FF;letter-spacing:-.02em}
.ir-entry h3{font-size:18px;font-weight:600;color:#fff;margin-bottom:6px}
.ir-entry p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.6);max-width:56ch}
@media(max-width:1024px){
  .ir-entry{grid-template-columns:80px 1fr;gap:16px}
  .ir-glyph{font-size:40px}
}

/* ============================================================
   CORE VALUES  (4-up, blue-accented)
   ============================================================ */
.ab-vals{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.ab-val{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;box-shadow:var(--shadow);transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s}
.ab-val:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:transparent}
.ab-val__n{font-family:var(--font-alt);font-weight:400;font-size:15px;color:var(--blue);letter-spacing:.08em}
.ab-val h3{font-size:19px;font-weight:600;color:var(--ink-strong);margin:14px 0 10px}
.ab-val p{font-size:14px;line-height:1.62;color:var(--muted)}

/* ============================================================
   WHY IT-RANKS  — sticky heading (left) + numbered editorial list (right)
   ============================================================ */
.ab-why{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:start}
.ab-why__aside{position:sticky;top:110px}
.ab-why__aside p{margin-top:18px;font-size:16px;line-height:1.7;color:var(--muted);max-width:40ch}
.ab-why__aside .ab-btn{margin-top:28px}
.ab-why__list{display:grid}
.ab-wrow{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  padding:26px 0;border-top:1px solid var(--line);
}
.ab-wrow:last-child{border-bottom:1px solid var(--line)}
/* hover tint is a fading pseudo-element with negative horizontal inset — it never
   changes the row's box, so nothing shifts (the padding-based version jumped). */
.ab-wrow::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-22px;right:-22px;
  background:var(--tint);border-radius:14px;opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.ab-wrow:hover::before{opacity:1}
.ab-wrow__n{font-family:var(--font-alt);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1;color:#C9CFD8;min-width:46px;letter-spacing:-.02em;transition:color .3s}
.ab-wrow__body h3{display:flex;align-items:center;gap:10px;font-size:18.5px;font-weight:600;color:var(--ink-strong);line-height:1.25;margin-bottom:7px;transition:color .3s}
.ab-wrow__body h3 svg{width:19px;height:19px;color:var(--blue);flex:none}
.ab-wrow__body p{font-size:14.5px;line-height:1.62;color:var(--muted);max-width:56ch}
.ab-wrow:hover .ab-wrow__n{color:var(--blue)}

/* ============================================================
   CLOSING CTA  (dark)
   ============================================================ */
.ab-cta{position:relative;background:linear-gradient(140deg,#0B1222,#0A1020);color:#fff;border-radius:26px;padding:66px 56px;overflow:hidden;text-align:center}
.ab-cta::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(520px 320px at 50% 0%,rgba(59,130,246,.28),transparent 62%);pointer-events:none}
.ab-cta__fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none}  /* glitter starfield */
.ab-cta__inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
.ab-cta h2{font-family:var(--font-alt);font-weight:300;font-size:clamp(28px,3.6vw,42px);line-height:1.14;letter-spacing:-.3px}
.ab-cta p{margin-top:18px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.72)}
.ab-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ============================================================
   reveal on scroll
   ============================================================ */
.ab-rv{animation:itr-fade .7s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){.ab-rv{animation:none}.ab-vmcard,.ab-val,.ab-wrow{transition:none}}

/* ============================================================
   responsive
   ============================================================ */
@media(max-width:1080px){
  .ab-who{grid-template-columns:1fr;gap:36px}
  .ab-vm{grid-template-columns:repeat(2,1fr)}
  .ab-vals{grid-template-columns:repeat(2,1fr)}
  .ab-why{grid-template-columns:1fr;gap:36px}
  .ab-why__aside{position:static}
}
@media(max-width:680px){
  .ab{--pad:22px}
  .ab-sec{padding:64px 0}
  .ab-hero{padding:72px 0 56px}
  .ab-stats{grid-template-columns:1fr}
  .ab-vm{grid-template-columns:1fr}
  .ab-vals{grid-template-columns:1fr}
  .ab-wrow{grid-template-columns:auto 1fr;gap:18px}
  .ab-cta{padding:48px 26px;border-radius:20px}
}


/* ============================================================
   IT-RANKS · SERVICE CARDS  (widget: itranks_service_cards)
   Three full-width, one-per-row card designs, chosen per instance.
   Everything scoped under .itr-svcx so it never collides with the
   Services banner (.sv-card / .sv-feat / etc). Tokens come from .ab.
   ============================================================ */
.itr-svcx .sv-head{max-width:720px}
.itr-svcx .sv-head .ab-lead{margin-top:18px}

/* ---- Option 1 — tinted cover + tiled portfolio ---- */
.itr-svcx .sv-svcgrid{display:flex;flex-direction:column;gap:20px;margin-top:44px}
.itr-svcx .sv-svccard{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(300px,.4fr) 1fr;min-height:480px;transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s,border-color .34s}
.itr-svcx .sv-svccard:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:transparent}
.itr-svcx .sv-svccard__cover{position:relative;overflow:hidden;padding:52px 40px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(340px 200px at 84% 4%,rgba(59,130,246,.16),transparent 62%),linear-gradient(163deg,#EAF2FF 0%,#F6FAFF 100%);border-right:1px solid var(--tint-line)}
.itr-svcx .sv-svccard__num{position:absolute;top:22px;right:26px;font-family:var(--font-alt);font-weight:400;font-size:88px;line-height:1;color:rgba(59,130,246,.15);letter-spacing:-.02em;pointer-events:none}
.itr-svcx .sv-svccard__ico{width:62px;height:62px;border-radius:17px;background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:0 8px 20px rgba(37,99,235,.18);margin-bottom:24px;transition:transform .3s}
.itr-svcx .sv-svccard:hover .sv-svccard__ico{transform:scale(1.09) rotate(-3deg)}
.itr-svcx .sv-svccard__ico svg{width:30px;height:30px}
.itr-svcx .sv-svccard__eyb{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.itr-svcx .sv-svccard__cover h3{font-family:var(--font-alt);font-weight:400;font-size:clamp(21px,2vw,25px);line-height:1.14;letter-spacing:-.01em;color:var(--ink-strong)}
.itr-svcx .sv-svccard__desc{margin-top:13px;font-size:14px;line-height:1.62;color:var(--muted)}
.itr-svcx .sv-svccard__body{padding:54px 46px;display:flex;flex-direction:column;justify-content:center}
.itr-svcx .sv-svccard__label{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-strong);margin-bottom:26px}
.itr-svcx .sv-svccard__label::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--blue)}
.itr-svcx .sv-svccard__list{display:grid;grid-template-columns:1fr 1fr;gap:14px;list-style:none;padding:0;margin:0}
.itr-svcx .sv-svccard__list li{display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:14px;background:var(--tint);border:1px solid var(--tint-line);font-size:14px;line-height:1.32;color:var(--ink-strong);font-weight:500;transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s,box-shadow .22s}
.itr-svcx .sv-svccard__list li:hover{transform:translateY(-3px);border-color:rgba(59,130,246,.5);box-shadow:0 12px 26px rgba(37,99,235,.13)}
.itr-svcx .sv-svccard__list li::before{content:"";flex:none;width:27px;height:27px;border-radius:9px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/15px no-repeat;box-shadow:0 2px 7px rgba(37,99,235,.14)}

/* ---- Option 2 — header row + chip cloud ---- */
.itr-svcx .o2-grid{display:flex;flex-direction:column;gap:20px;margin-top:44px}
.itr-svcx .o2-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:40px 44px;transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s,border-color .34s}
.itr-svcx .o2-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:transparent}
.itr-svcx .o2-head{display:flex;align-items:center;gap:20px}
.itr-svcx .o2-ico{width:62px;height:62px;border-radius:17px;background:var(--tint);color:var(--blue);display:grid;place-items:center;flex:none;transition:transform .3s}
.itr-svcx .o2-card:hover .o2-ico{transform:scale(1.08) rotate(-3deg)}
.itr-svcx .o2-ico svg{width:31px;height:31px}
.itr-svcx .o2-titles{flex:1;min-width:0}
.itr-svcx .o2-eyb{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.itr-svcx .o2-titles h3{font-family:var(--font-alt);font-weight:400;font-size:clamp(22px,2.2vw,27px);line-height:1.12;letter-spacing:-.01em;color:var(--ink-strong)}
.itr-svcx .o2-num{font-family:var(--font-alt);font-weight:400;font-size:56px;line-height:1;color:rgba(59,130,246,.16);flex:none;letter-spacing:-.02em}
.itr-svcx .o2-desc{margin:22px 0 24px;padding-bottom:26px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7;color:var(--muted);max-width:92ch}
.itr-svcx .o2-chips{display:flex;flex-wrap:wrap;gap:11px}
.itr-svcx .o2-chips span{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;background:var(--tint);border:1px solid var(--tint-line);font-size:13.5px;font-weight:500;color:var(--ink-strong);transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.itr-svcx .o2-chips span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.itr-svcx .o2-chips span:hover{transform:translateY(-2px);border-color:rgba(59,130,246,.55);background:#fff;box-shadow:0 8px 18px rgba(37,99,235,.12)}

/* ---- Option 3 — number watermark + framed divided list ---- */
.itr-svcx .o3-grid{display:flex;flex-direction:column;gap:20px;margin-top:44px}
.itr-svcx .o3-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(320px,.44fr) 1fr;min-height:460px;transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s,border-color .34s}
.itr-svcx .o3-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:transparent}
.itr-svcx .o3-left{position:relative;overflow:hidden;padding:48px 42px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line)}
.itr-svcx .o3-wm{position:absolute;bottom:-30px;right:26px;font-family:var(--font-alt);font-weight:400;font-size:190px;line-height:1;color:#EFF4FC;letter-spacing:-.04em;z-index:0;pointer-events:none}
.itr-svcx .o3-left > *{position:relative;z-index:1}
.itr-svcx .o3-ico{width:60px;height:60px;border-radius:16px;background:var(--tint);color:var(--blue);display:grid;place-items:center;margin-bottom:22px;transition:transform .3s}
.itr-svcx .o3-card:hover .o3-ico{transform:scale(1.08) rotate(-3deg)}
.itr-svcx .o3-ico svg{width:30px;height:30px}
.itr-svcx .o3-eyb{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.itr-svcx .o3-left h3{font-family:var(--font-alt);font-weight:400;font-size:clamp(22px,2.1vw,27px);line-height:1.12;letter-spacing:-.01em;color:var(--ink-strong);margin-bottom:13px}
.itr-svcx .o3-left p{font-size:14px;line-height:1.64;color:var(--muted)}
.itr-svcx .o3-right{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,#FCFDFF 0%,#F5F9FF 100%)}
.itr-svcx .o3-label{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-strong);margin-bottom:14px}
.itr-svcx .o3-label::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--blue)}
.itr-svcx .o3-list{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;list-style:none;padding:0;margin:0}
.itr-svcx .o3-list li{display:flex;align-items:center;gap:13px;padding:15px 6px;font-size:14px;font-weight:500;color:var(--ink-strong);border-bottom:1px solid var(--line);transition:padding-left .22s ease,color .22s}
.itr-svcx .o3-list li:hover{padding-left:12px;color:var(--blue-dark)}
.itr-svcx .o3-list li::before{content:"";flex:none;width:17px;height:17px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0-6-6m6 6-6 6'/%3E%3C/svg%3E") center/17px no-repeat}

/* ---- Service cards · responsive ---- */
@media(max-width:980px){
  .itr-svcx .sv-svccard{grid-template-columns:1fr}
  .itr-svcx .sv-svccard__cover{border-right:0;border-bottom:1px solid var(--tint-line)}
  .itr-svcx .o3-card{grid-template-columns:1fr;min-height:0}
  .itr-svcx .o3-left{border-right:0;border-bottom:1px solid var(--line)}
  .itr-svcx .o3-wm{font-size:150px}
}
@media(max-width:680px){
  .itr-svcx .sv-svccard__list{grid-template-columns:1fr}
  .itr-svcx .sv-svccard__cover{padding:30px 24px}
  .itr-svcx .sv-svccard__body{padding:28px 24px}
  .itr-svcx .o2-card{padding:30px 24px}
  .itr-svcx .o2-num{font-size:42px}
  .itr-svcx .o3-list{grid-template-columns:1fr}
  .itr-svcx .o3-left{padding:34px 26px}
  .itr-svcx .o3-right{padding:32px 26px}
}
/* ============================================================
   END · SERVICE CARDS
   ============================================================ */


/* ============================================================
   IT-RANKS · CONTACT  (widgets: contact hero / form / presence)
   Scoped under .itr-ct so nothing collides. Tokens from .ab.
   ============================================================ */
/* hero */
.itr-ct .ct-hero{position:relative;overflow:hidden;min-height:110vh;display:flex;align-items:center;padding:110px 0 96px;color:#fff;
  background:radial-gradient(680px 420px at 82% 6%,rgba(59,130,246,.16),transparent 60%),linear-gradient(160deg,#0B1222 0%,#0A1020 60%,#080D18 100%)}
.itr-ct .ct-hero__fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 20%,rgba(0,0,0,.55) 54%,#000 100%);mask-image:linear-gradient(90deg,transparent 20%,rgba(0,0,0,.55) 54%,#000 100%)}
.itr-ct .ct-hero>.ab-wrap{position:relative;z-index:2;width:100%}
.itr-ct .ct-hero__inner{max-width:820px}
.itr-ct .ct-hero h1{font-family:var(--font-alt);font-weight:300;font-size:clamp(32px,4.6vw,56px);line-height:1.06;letter-spacing:-.6px;color:#fff;max-width:16ch;margin:0}
.itr-ct .ct-hero h1 b{color:#7FB0FF;font-weight:400}
.itr-ct .ct-hero__lead{font-size:clamp(16px,1.4vw,18px);line-height:1.7;color:rgba(255,255,255,.68);margin-top:24px;max-width:56ch}
.itr-ct .ct-hero__chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.itr-ct .ct-hero__chips a{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:14px;font-weight:500;text-decoration:none;transition:.25s}
.itr-ct .ct-hero__chips a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.itr-ct .ct-hero__chips svg{width:17px;height:17px;color:#7FB0FF}

/* get-in-touch: info + form */
.itr-ct .ct-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:56px;align-items:start}
.itr-ct .ct-aside .ab-lead{margin-top:16px;margin-bottom:34px}
.itr-ct .ct-methods{display:flex;flex-direction:column;gap:14px}
.itr-ct .ct-method{display:flex;align-items:flex-start;gap:16px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
.itr-ct .ct-method:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:transparent}
.itr-ct .ct-method__ico{width:48px;height:48px;border-radius:13px;background:var(--tint);color:var(--blue);display:grid;place-items:center;flex:none}
.itr-ct .ct-method__ico svg{width:24px;height:24px}
.itr-ct .ct-method h3{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.itr-ct .ct-method a,.itr-ct .ct-method p{font-size:16px;font-weight:500;color:var(--ink-strong);line-height:1.45;text-decoration:none;margin:0}
.itr-ct .ct-method span{display:block;margin-top:3px;font-size:13.5px;font-weight:400;color:var(--muted)}
.itr-ct .ct-note{display:flex;align-items:center;gap:11px;margin-top:26px;font-size:14px;color:var(--muted)}
.itr-ct .ct-note .dot{width:9px;height:9px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.16);flex:none}
.itr-ct .ct-form{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-hover);padding:40px 40px 36px}
.itr-ct .ct-form__head h2{font-family:var(--font-alt);font-weight:400;font-size:26px;color:var(--ink-strong);line-height:1.15;margin:0}
.itr-ct .ct-form__head p{margin-top:8px;font-size:14.5px;color:var(--muted)}
.itr-ct .ct-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.itr-ct .ct-field{display:flex;flex-direction:column;gap:8px}
.itr-ct .ct-field--full{grid-column:1 / -1}
.itr-ct .ct-field label{font-size:13px;font-weight:600;color:var(--ink-strong)}
.itr-ct .ct-field label i{color:var(--blue);font-style:normal}
.itr-ct .ct-field input,.itr-ct .ct-field select,.itr-ct .ct-field textarea{font-family:var(--font);font-size:14.5px;color:var(--ink-strong);padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:#FCFDFF;transition:border-color .2s,box-shadow .2s;width:100%}
.itr-ct .ct-field textarea{resize:vertical;min-height:132px}
.itr-ct .ct-field input::placeholder,.itr-ct .ct-field textarea::placeholder{color:#9AA3B2}
.itr-ct .ct-field input:focus,.itr-ct .ct-field select:focus,.itr-ct .ct-field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(59,130,246,.14)}
.itr-ct .ct-field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
.itr-ct .ct-form__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px;flex-wrap:wrap}
.itr-ct .ct-form__foot .ab-btn{padding:15px 30px}
.itr-ct .ct-consent{font-size:12.5px;line-height:1.5;color:var(--muted);max-width:42ch}
.itr-ct .ct-ok{display:none;align-items:center;gap:12px;margin-top:22px;padding:16px 18px;border-radius:13px;background:#F0FBF4;border:1px solid #CDEED8;color:#15803D;font-size:14.5px;font-weight:500}
.itr-ct .ct-ok.show{display:flex}
.itr-ct .ct-ok svg{width:20px;height:20px;flex:none}

/* presence · full-bleed WHITE background map (capped to content width) */
.itr-ct .ct-presence{position:relative;overflow:hidden;color:var(--ink);min-height:640px;display:flex;align-items:center;
  background:radial-gradient(760px 480px at 90% 0%,rgba(59,130,246,.06),transparent 60%),var(--ct-bg,linear-gradient(180deg,#FFFFFF 0%,#F7FAFF 100%))}
.itr-ct .ct-presence>.ab-wrap{width:100%}
.itr-ct .ct-presence .ab-eyb{color:var(--blue)}
.itr-ct .ct-presence .ab-eyb::before{background:var(--blue)}
.itr-ct .ct-presence .ab-h2{color:var(--ink-strong)}
.itr-ct .ct-presence .ab-h2 b{color:var(--blue)}
.itr-ct .ct-presence .ab-lead{color:var(--muted)}
.itr-ct .ct-mapbg{position:absolute;inset:0;z-index:0;overflow:hidden;display:flex;align-items:center;justify-content:flex-end;padding:0 max(var(--pad),calc((100% - var(--cw)) / 2));pointer-events:none}
.itr-ct .ct-mapbg__wrap{width:100%;max-width:var(--ct-map-w,600px)}
.itr-ct .ct-mapbg .ct-map__img{width:100%;height:auto;display:block}
/* masked map so its dot colour follows --ct-map (controllable) */
.itr-ct .ct-map__img{display:block;aspect-ratio:864/491;background:var(--ct-map,#C9D6EA);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}
.itr-ct .ct-mapscrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#FFFFFF 0%,rgba(255,255,255,.9) 30%,rgba(255,255,255,0) 50%)}
.itr-ct .ct-pins{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:flex-end;padding:0 max(var(--pad),calc((100% - var(--cw)) / 2));pointer-events:none}
.itr-ct .ct-pins__wrap{position:relative;width:100%;max-width:var(--ct-map-w,600px);aspect-ratio:864 / 491}
.itr-ct .ct-pins .ct-pin{pointer-events:auto}
.itr-ct .ct-presence__content{position:relative;z-index:2;max-width:430px}
/* inline map block — desktop uses the full-bleed background map instead */
.itr-ct .ct-mapmob{display:none}
.itr-ct .ct-reglist{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.itr-ct .ct-regrow{padding:15px 20px;border:1px solid var(--tint-line);border-radius:13px;background:linear-gradient(180deg,#fff,#F7FAFF);transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .28s}
.itr-ct .ct-regrow:hover{transform:translateX(4px);box-shadow:var(--shadow-hover);border-color:transparent}
.itr-ct .ct-regrow b{display:block;font-size:15px;font-weight:600;color:var(--blue)}
.itr-ct .ct-regrow span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.itr-ct .ct-regrow--soon b{color:#D97706}
.itr-ct .ct-regtag{margin-top:24px;font-family:var(--font-alt);font-weight:400;font-size:clamp(18px,1.8vw,22px);line-height:1.3;color:var(--blue)}

/* teardrop map anchors (shared) — tip sits on the coordinate */
.itr-ct .ct-pin{position:absolute;transform:translate(-50%,-100%);z-index:2;line-height:0}
.itr-ct .ct-pin__mark{display:block;filter:drop-shadow(0 4px 5px rgba(16,24,40,.30));transition:transform .22s cubic-bezier(.22,1,.36,1);transform-origin:50% 100%}
.itr-ct .ct-pin:hover{z-index:6}
.itr-ct .ct-pin:hover .ct-pin__mark{transform:translateY(-3px) scale(1.06)}
.itr-ct .ct-pin b{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font-size:10.5px;font-weight:600;line-height:1.2;color:var(--ink-strong);background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px rgba(16,24,40,.14);padding:3px 7px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .18s}
.itr-ct .ct-pin:hover b{opacity:1}
/* HQ pin — larger, glowing, pulsing halo, label always shown */
.itr-ct .ct-pin--hq{z-index:4}
.itr-ct .ct-pin--hq .ct-pin__mark{filter:drop-shadow(0 6px 11px rgba(37,99,235,.5))}
.itr-ct .ct-pin--hq::before{content:"";position:absolute;left:50%;top:16px;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(37,99,235,.45);z-index:-1;animation:ctpulse 2s ease-out infinite}
.itr-ct .ct-pin--hq b{opacity:1;background:var(--blue);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(37,99,235,.35)}
@keyframes ctpulse{0%{opacity:.7;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(3)}}
@media(prefers-reduced-motion:reduce){.itr-ct .ct-pin--hq::before{animation:none}}
.itr-ct .ct-map__legend{display:flex;gap:22px;margin-top:10px;font-size:13px;color:var(--muted)}
.itr-ct .ct-map__legend span{display:inline-flex;align-items:center;gap:8px}
.itr-ct .ct-map__legend .d{width:9px;height:9px;border-radius:50%}
.itr-ct .ct-map__legend .d--blue{background:#3B82F6}
.itr-ct .ct-map__legend .d--soon{background:#FBBF24}

/* presence · light profile style (list left, boxed map right) */
.itr-ct.is-maplight .pr2{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.itr-ct.is-maplight .pr2-info .lead{margin-top:16px;font-size:16px;line-height:1.7;color:var(--muted);max-width:46ch}
.itr-ct.is-maplight .pr2-list{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.itr-ct.is-maplight .pr2-row{padding:16px 22px;border:1px solid var(--tint-line);border-radius:14px;background:linear-gradient(180deg,#fff,#F7FAFF);transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .28s}
.itr-ct.is-maplight .pr2-row:hover{transform:translateX(4px);box-shadow:var(--shadow-hover);border-color:transparent}
.itr-ct.is-maplight .pr2-row b{display:block;font-size:15.5px;font-weight:600;color:var(--blue)}
.itr-ct.is-maplight .pr2-row span{display:block;margin-top:3px;font-size:13.5px;color:var(--muted)}
.itr-ct.is-maplight .pr2-row--soon b{color:#D97706}
.itr-ct.is-maplight .pr2-tag{margin-top:28px;font-family:var(--font-alt);font-weight:400;font-size:clamp(18px,1.9vw,23px);line-height:1.3;color:var(--blue)}
.itr-ct.is-maplight .pr2-map__frame{position:relative;background:linear-gradient(180deg,#fff 0%,#F4F8FF 100%);border:1px solid var(--tint-line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.itr-ct.is-maplight .pr2-map__wrap{position:relative}
.itr-ct.is-maplight .pr2-map__wrap .ct-map__img{width:100%;height:auto;display:block}
.itr-ct.is-maplight .pr2-legend{display:flex;gap:22px;margin-top:16px;font-size:13px;color:var(--muted);justify-content:center}
.itr-ct.is-maplight .pr2-legend span{display:inline-flex;align-items:center;gap:8px}
.itr-ct.is-maplight .pr2-legend .d{width:9px;height:9px;border-radius:50%}
.itr-ct.is-maplight .pr2-legend .d--blue{background:#3B82F6}
.itr-ct.is-maplight .pr2-legend .d--soon{background:#FBBF24}

@media(prefers-reduced-motion:reduce){.itr-ct .ct-pin__mark{transition:none}.itr-ct .ct-pin:hover .ct-pin__mark{transform:none}}
@media(max-width:1000px){.itr-ct .ct-grid{grid-template-columns:1fr;gap:40px}}
/* Regional map (dark layout): below the two-column width, revert to a faint full-bleed background */
@media(max-width:1080px){
  /* the faint background map just speckles the copy at this width — drop it and
     show the map as a real block above the list instead */
  .itr-ct .ct-mapbg,.itr-ct .ct-mapscrim,.itr-ct .ct-pins{display:none}
  .itr-ct .ct-presence__content{max-width:none}
  .itr-ct .ct-mapmob{display:block;margin:28px 0 4px}
  .itr-ct .ct-mapmob__frame{background:linear-gradient(180deg,#fff 0%,#F4F8FF 100%);border:1px solid var(--tint-line);
    border-radius:20px;padding:20px;box-shadow:var(--shadow)}
  .itr-ct .ct-mapmob .ct-map__img{width:100%}
  .itr-ct.is-maplight .pr2-map{order:-1}
}
@media(max-width:920px){
  .itr-ct.is-maplight .pr2{grid-template-columns:1fr;gap:34px}
  .itr-ct .ct-presence{min-height:0;padding-top:64px;padding-bottom:72px}
  .itr-ct .ct-presence__content{max-width:none}
  .itr-ct .ct-mapmob{margin:24px 0 2px}
  .itr-ct .ct-mapmob__frame{padding:14px;border-radius:16px}
}
@media(max-width:640px){
  .itr-ct .ct-fields{grid-template-columns:1fr}
  .itr-ct .ct-form{padding:28px 24px}
  .itr-ct .ct-form__foot{flex-direction:column-reverse;align-items:stretch}
  .itr-ct .ct-hero{min-height:auto;padding:88px 0 60px}
}
/* END · CONTACT */

/* ============================================================
   IT-RANKS · CROSS-CUTTING CAPABILITIES  (widget: itranks_capabilities)
   Standalone capability cards. Scoped under .itr-caps; tokens from .ab.
   ============================================================ */
.itr-caps .sv-head{max-width:720px}
.itr-caps .sv-head .ab-lead{margin-top:18px}
.itr-caps .sv-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.itr-caps .sv-capcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 30px;box-shadow:var(--shadow);overflow:hidden;transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s}
.itr-caps .sv-capcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:transparent}
.itr-caps .sv-capcard__top{display:flex;align-items:center;gap:14px;margin-bottom:15px}
.itr-caps .sv-capcard__ico{width:48px;height:48px;border-radius:13px;background:var(--tint);color:var(--blue);display:grid;place-items:center;flex:none;transition:transform .3s}
.itr-caps .sv-capcard:hover .sv-capcard__ico{transform:scale(1.08)}
.itr-caps .sv-capcard__ico svg{width:25px;height:25px}
.itr-caps .sv-capcard__n{font-family:var(--font-alt);font-weight:400;font-size:14px;color:#C9CFD8;letter-spacing:.04em}
.itr-caps .sv-capcard h3{font-size:17px;font-weight:600;color:var(--ink-strong);line-height:1.28}
.itr-caps .sv-capcard p{margin-top:9px;font-size:13.5px;line-height:1.62;color:var(--muted)}
@media(max-width:980px){.itr-caps .sv-caps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.itr-caps .sv-caps{grid-template-columns:1fr}}

/* ============================================================
   SERVICE CARDS · stacking layout + anchor-scroll targets
   ============================================================ */
.itr-svcx{scroll-margin-top:100px}
.itr-svcx .sv-svcitem{scroll-margin-top:100px}
/* stacking: each card sticks and the next slides over it */
.itr-svcx.is-stack .sv-stack{position:relative;display:block;margin-top:44px}
.itr-svcx.is-stack .sv-stackitem{position:sticky;top:calc(var(--stack-top,90px) + var(--i,0) * 14px);scroll-margin-top:calc(var(--stack-top,90px) + var(--i,0) * 14px + 12px);margin-bottom:26px}
.itr-svcx.is-stack .sv-stackitem:last-child{margin-bottom:0}
.itr-svcx.is-stack .sv-stackitem > article{box-shadow:0 -8px 26px rgba(16,24,40,.07),0 22px 46px rgba(16,24,40,.13)}
.itr-svcx.is-stack .sv-svccard:hover,.itr-svcx.is-stack .o2-card:hover,.itr-svcx.is-stack .o3-card:hover{transform:none}
@media(max-width:680px){.itr-svcx.is-stack .sv-stackitem{top:calc(var(--stack-top,72px) + var(--i,0) * 10px)}}

/* ============================================================
   IT-RANKS · SERVICES HERO  (widget: itranks_services_hero)
   Full-height dark hero + signal-lanes. Scoped under .itr-svch; tokens from .ab.
   ============================================================ */
.itr-svch .svh{position:relative;overflow:hidden;min-height:110vh;display:flex;align-items:center;padding:96px 0;color:#fff;
  background:radial-gradient(680px 420px at 82% 6%,rgba(59,130,246,.16),transparent 60%),linear-gradient(160deg,#0B1222 0%,#0A1020 60%,#080D18 100%)}
.itr-svch .svh__fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.itr-svch .svh::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#0A1020 0%,rgba(10,16,32,.94) 24%,rgba(10,16,32,.55) 52%,rgba(10,16,32,.10) 78%,rgba(10,16,32,0) 100%)}
.itr-svch .svh>.ab-wrap{position:relative;z-index:2;width:100%}
.itr-svch .svh__inner{max-width:940px}
.itr-svch .svh h1{font-family:var(--font-alt);font-weight:300;font-size:clamp(32px,4.6vw,56px);line-height:1.06;letter-spacing:-.6px;color:#fff;max-width:17ch;margin:0}
.itr-svch .svh h1 b{color:#7FB0FF;font-weight:400}
.itr-svch .svh__lead{font-size:clamp(16px,1.4vw,18px);line-height:1.7;color:rgba(255,255,255,.68);margin-top:26px;max-width:60ch}
.itr-svch .svh__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.itr-svch .ab-btn--ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.itr-svch .ab-btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff}
.itr-svch .svh__meta{display:flex;flex-wrap:wrap;gap:38px;margin-top:46px}
.itr-svch .svh__meta div b{display:block;font-family:var(--font-alt);font-weight:400;font-size:30px;line-height:1;color:#fff}
.itr-svch .svh__meta div span{display:block;margin-top:8px;font-size:13px;color:rgba(255,255,255,.55)}
@media(max-width:680px){.itr-svch .svh{min-height:auto;padding:80px 0 60px}.itr-svch .svh__meta{gap:26px}}

/* ============================================================
   Skin an Elementor Form to match the IT-RANKS contact form.
   Add the CSS class  itr-formskin  to the Elementor Form widget.
   ============================================================ */
.itr-formskin .elementor-form{background:#fff;border:1px solid #E5E7EB;border-radius:24px;box-shadow:0 20px 45px rgba(16,24,40,.13);padding:40px}
.itr-formskin .elementor-field-group > .elementor-field-label{font-size:13px;font-weight:600;color:#111827;margin-bottom:8px}
.itr-formskin .elementor-field-textual{font-family:'Work Sans',sans-serif;font-size:14.5px;color:#111827;padding:13px 15px;border:1px solid #E5E7EB;border-radius:11px;background:#FCFDFF;width:100%;min-height:auto;transition:border-color .2s,box-shadow .2s}
.itr-formskin textarea.elementor-field-textual{min-height:132px}
.itr-formskin .elementor-field-textual:focus{outline:none;border-color:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.14)}
.itr-formskin .elementor-field-textual::placeholder{color:#9AA3B2}
.itr-formskin .elementor-button{background:#3B82F6;color:#fff;border:0;border-radius:8px;padding:15px 30px;font-size:14px;font-weight:500;transition:.25s}
.itr-formskin .elementor-button:hover{background:#2563EB}
/* Mobile: an input under 16px makes iOS Safari zoom the page in on focus, which
   scales the field — and any native dropdown anchored to it — past the viewport.
   16px is the threshold that stops the zoom. (Elementor's own default field size
   is already 16px; this only covers forms wearing this skin.) */
@media(max-width:900px){
	.itr-formskin .elementor-form{padding:26px 20px}
	.itr-formskin .elementor-field-textual{font-size:16px}
	.itr-formskin .elementor-field-group{max-width:100%;min-width:0}
}

/* A phone field authored as <input type="number"> — Elementor's "Number" field
   type — shows spinner arrows and rejects "+". itrFormAutofill() swaps it to
   type=tel; this covers the frame before the script runs, and any number field
   that legitimately stays a number. Applies to every Elementor form on the site. */
.elementor-field-textual[type=number]{-moz-appearance:textfield;appearance:textfield}
.elementor-field-textual[type=number]::-webkit-outer-spin-button,
.elementor-field-textual[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ============================================================
   IT-RANKS · Services Hub Banner  (.itr-hub)  — logo in the centre,
   copy on the left, signal lines to a rotating column of pills.
   Animated by itrHubBanner(). Tokens from .ab.
   ============================================================ */
.itr-hub .hub{
  position:relative;overflow:hidden;border-radius:26px;
  width:100%;max-width:1280px;margin-inline:auto;min-height:350px;
  --blue:#3B82F6;--blue-lt:#7FB0FF;--font-alt:'Calibri','Carlito','Segoe UI',sans-serif;
  background:
    radial-gradient(760px 440px at 50% 50%,rgba(59,130,246,.14),transparent 60%),
    linear-gradient(160deg,#0B1222 0%,#0A1020 60%,#080D18 100%);
  color:#fff;
}
.itr-hub .hub::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% 50%,#000,transparent 78%);
}
/* inside the Services (Banner + Cards) widget the hub is the banner — restore the gap before the card grid */
.sv .itr-hub{margin-bottom:20px}
.hub__svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.hub__lane{fill:none;stroke:rgba(120,150,205,.26);stroke-width:1}
.hub__flowglow{fill:none;stroke:rgba(96,160,255,.55);stroke-width:5;stroke-linecap:round;stroke-dasharray:18 1100;animation:hubflow 1.5s linear infinite}
.hub__flow{fill:none;stroke:#CFE3FF;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:18 1100;animation:hubflow 1.5s linear infinite}
@keyframes hubflow{to{stroke-dashoffset:-1118}}

.hub__core{position:absolute;left:51%;top:50%;transform:translate(-50%,-50%);z-index:4;text-align:center}
.hub__glow{
  position:absolute;left:51%;top:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.35),rgba(59,130,246,.10) 40%,transparent 70%);
  z-index:3;pointer-events:none;filter:blur(4px);
}
.hub__badge{position:relative;overflow:hidden;width:112px;height:112px;margin:0 auto;border-radius:24px;display:grid;place-items:center;background:linear-gradient(160deg,#152039,#0C1526);border:1px solid rgba(120,150,205,.38);box-shadow:0 16px 50px rgba(59,130,246,.45),inset 0 1px 0 rgba(255,255,255,.07)}
.hub__badge::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130px 130px at 50% 0,rgba(59,130,246,.28),transparent 62%)}
.hub__badgesvg{position:relative;display:block;width:auto;height:60%}

/* copy on the left */
.hub__copy{position:absolute;left:clamp(24px,4vw,56px);top:50%;transform:translateY(-50%);z-index:5;max-width:min(400px,37%)}
.hub__eyb{display:inline-flex;align-items:center;gap:11px;margin:0 0 16px;font-size:12.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#7FB0FF}
.hub__eyb::before{content:"";width:26px;height:2px;border-radius:2px;background:#3B82F6}
.hub__title{font-family:var(--font-alt);font-weight:300;font-size:clamp(24px,2.6vw,34px);line-height:1.18;color:#fff;margin:0 0 14px;max-width:20ch}
.hub__lead{font-size:15px;line-height:1.62;color:rgba(255,255,255,.72);margin:0;max-width:52ch}

/* service pills, right-aligned to the section end */
.hub__pill{
  position:absolute;z-index:2;white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:500;color:#E8EEFB;
  background:rgba(19,28,48,.72);border:1px solid rgba(120,150,205,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transform-origin:right center;transform:translateY(-50%) scale(.9);
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;
}
.hub__pill.is-on{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
.hub__pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px 1px rgba(59,130,246,.9)}
.hub__pill.is-on:hover{transform:translateY(-50%) scale(1.06);border-color:var(--blue-lt);box-shadow:0 12px 30px rgba(59,130,246,.3)}
.hub__lanegroup{opacity:0;transition:opacity 1.1s ease}
.hub__lanegroup.is-live{opacity:1}
.hub__src{display:none}

/* ---- light-theme variant of the hub banner (Services Banner + Cards → Banner theme: Light) ---- */
.itr-hub .hub.hub--light{color:#0A1020;
  background:radial-gradient(760px 440px at 50% 50%,rgba(59,130,246,.10),transparent 60%),linear-gradient(160deg,#EEF5FF 0%,#E6F0FF 55%,#F6FAFF 100%)}
.itr-hub .hub.hub--light::before{background-image:linear-gradient(rgba(10,16,32,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,16,32,.045) 1px,transparent 1px)}
.hub--light .hub__eyb{color:#2563EB}
.hub--light .hub__eyb::before{background:#2563EB}
.hub--light .hub__title{color:#0A1020}
.hub--light .hub__lead{color:#4B5563}
.hub--light .hub__pill{background:#fff;border-color:#DCE6F5;color:#1E293B;box-shadow:0 6px 18px rgba(16,24,40,.12)}
.hub--light .hub__lane{stroke:rgba(59,130,246,.32)}
.hub--light .hub__flow{stroke:#2563EB}
.hub--light .hub__flowglow{stroke:rgba(59,130,246,.5)}
.hub--light .hub__glow{background:radial-gradient(circle,rgba(59,130,246,.22),rgba(59,130,246,.06) 40%,transparent 70%)}

@media(max-width:768px){
  .itr-hub .hub{min-height:auto;padding:40px 22px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .hub__svg,.hub__glow{display:none}
  .hub__copy{position:static;transform:none;max-width:none;margin:0 0 22px}
  .hub__eyb{justify-content:center}
  .hub__title,.hub__lead{max-width:none;margin-left:auto;margin-right:auto}
  .hub__core{position:static;transform:none;margin:0 0 20px}
  .hub__pill{position:static;transform:none!important;opacity:1!important;pointer-events:auto;margin:5px 0}
}
@media(prefers-reduced-motion:reduce){
  .hub__pill{opacity:1}
  .hub__flow,.hub__flowglow{animation:none}
}

/* ============================================================
   IT-RANKS · Acronym (Flip)  (.itr-irk)  — giant IT-RANKS wordmark,
   one segment lights up at a time (auto + hover). Animated by
   itrAcronymFlip(). Tokens from .ab.
   ============================================================ */
.itr-irk__band{
  position:relative;color:#fff;
  background:
    radial-gradient(680px 420px at 78% 12%,rgba(59,130,246,.20),transparent 60%),
    radial-gradient(560px 360px at 14% 92%,rgba(59,130,246,.12),transparent 60%),
    linear-gradient(160deg,#0B1222 0%,#0A1020 60%,#080D18 100%);
}
.irk{padding:clamp(100px,16vh,190px) 0}
.irk__head{max-width:760px;margin:0 auto clamp(44px,8vh,84px);text-align:center}
.irk__h2{font-family:var(--font-alt);font-weight:300;font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.3px;color:#fff;margin:0}
.irk__h2 b{color:#7FB0FF;font-weight:400;display:block}
.irk__stage{text-align:center}
.irk__title{
  font-family:var(--font-alt);font-weight:300;letter-spacing:.01em;
  font-size:clamp(22px,3vw,40px);color:rgba(255,255,255,.92);
  margin:0 0 clamp(18px,3.6vh,38px);min-height:1.3em;
  transition:opacity .38s ease,transform .38s ease;
}
.irk__word{
  display:flex;justify-content:center;align-items:baseline;flex-wrap:nowrap;white-space:nowrap;
  font-weight:800;letter-spacing:.06em;line-height:1;
  font-size:clamp(34px,12vw,168px);max-width:100%;
}
.irk__seg{color:rgba(255,255,255,.07);cursor:pointer;transition:color .45s ease,text-shadow .45s ease}
.irk__seg.is-active{color:#fff;text-shadow:0 6px 46px rgba(59,130,246,.6)}
.irk__seg:focus-visible{outline:2px solid rgba(127,176,255,.7);outline-offset:6px;border-radius:6px}
.irk__dash{color:rgba(255,255,255,.07);transition:color .45s ease,text-shadow .45s ease}
/* the all-white "full IT-RANKS" frame at the end of the loop */
.irk--full .irk__dash{color:#fff;text-shadow:0 6px 46px rgba(59,130,246,.6)}
.irk__desc{
  max-width:56ch;margin:clamp(20px,3.8vh,42px) auto 0;
  font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.62);min-height:5.4em;
  transition:opacity .38s ease,transform .38s ease;
}
.irk--fading .irk__title,.irk--fading .irk__desc{opacity:0;transform:translateY(7px)}
.irk__src{display:none}
@media(max-width:900px){
  .irk{padding:clamp(56px,8vh,90px) 0}
  .irk__desc{min-height:6.4em}
}
@media(max-width:640px){
  .irk{padding:clamp(46px,7vh,76px) 0}
  .irk__title{font-size:clamp(18px,5.4vw,28px);margin-bottom:20px}
  .irk__word{letter-spacing:.02em}
  .irk__desc{min-height:8em;font-size:14px;max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .irk__title,.irk__desc,.irk__seg{transition:none}
}

/* ===== Products (Numbered Bento) — itranks_products_bento ===== */
/* ============================================================
   IT-RANKS · Products — NUMBERED BENTO (8 cards)
   Ported from the approved standalone (products section/index.html).
   Every class is re-prefixed into the nb- namespace (slot classes become
   nbslot-N, the preview flag becomes nb-show-slots) so nothing collides
   with the products-v3 widget's own styles above. Scoped under .nb;
   colours/fonts inherit from the .ab wrapper — only the white canvas
   and the layout tokens are set here.

   ── HOW POSITIONS WORK ──────────────────────────────────────
   4 columns. The header block (hd) fills the top-left. The eight
   numbered slots wrap around it. Move a product to another position
   by changing ONLY its slot class: nbslot-3 -> nbslot-8. The card
   jumps to that slot (grid areas + order), so DOM order is irrelevant.
   Click "Show position numbers" (adds .nb-show-slots) to preview it.
   ============================================================ */
.nb{
  --canvas:#FFFFFF;
  --r:20px;
  --cw:1280px;             /* content width — matches the site container */
  --pad:40px;
  font-family:var(--font);color:var(--ink);background:var(--canvas);
  padding:90px 0 96px;-webkit-font-smoothing:antialiased;
}
.nb *{box-sizing:border-box}
.nb img{max-width:100%;display:block}
.nb a{text-decoration:none}
.nb :where(h2,h3,p){margin:0}
.nb-wrap{width:100%;margin:0 auto;padding:0 var(--pad);max-width:calc(var(--cw) + 2 * var(--pad))}

/* ---------- the numbered bento grid ----------
   4 columns of fixed-height "bands" so the columns stagger and still
   finish level. Header = 8 bands; every column totals 13 bands. */
.nb-bento{
  --band:58px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:var(--band);
  gap:20px;
  grid-template-areas:
    "hd hd s1 s2"
    "hd hd s1 s2"
    "hd hd s1 s2"
    "hd hd s1 s2"
    "hd hd s1 s2"
    "hd hd s3 s4"
    "hd hd s3 s4"
    "hd hd s3 s4"
    "s5 s6 s3 s8"
    "s5 s6 s3 s8"
    "s5 s6 s7 s8"
    "s5 s6 s7 s8"
    "s5 s6 s7 s8";
}
.nb-head{grid-area:hd;order:0}
.nbslot-1{grid-area:s1;order:1}.nbslot-2{grid-area:s2;order:2}
.nbslot-3{grid-area:s3;order:3}.nbslot-4{grid-area:s4;order:4}
.nbslot-5{grid-area:s5;order:5}.nbslot-6{grid-area:s6;order:6}
.nbslot-7{grid-area:s7;order:7}.nbslot-8{grid-area:s8;order:8}

/* ---------- header block ---------- */
.nb-head{display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding:4px 24px 4px 0;min-width:0}
.nb-eyb{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;letter-spacing:.2px;color:var(--blue);margin:0 0 24px}
.nb-eyb::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--blue)}
.nb-title{font-family:var(--font-alt);font-weight:300;font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.5px;color:var(--ink-strong);margin:0 0 24px;max-width:none}
.nb-title em{font-style:normal;color:var(--muted)}
.nb-lead{font-size:clamp(16px,1.3vw,18px);line-height:1.75;color:var(--muted);margin:0;max-width:44ch}
.nb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.nb-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--blue);color:#fff;font-size:14px;font-weight:500;
  padding:13px 24px;border-radius:8px;border:1px solid transparent;transition:.25s;
}
.nb-btn:hover{background:var(--blue-dark)}
.nb-btn svg{width:16px;height:16px;transition:transform .25s}
.nb-btn:hover svg{transform:translateX(3px)}
.nb-numtog{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:transparent;color:var(--muted);font-family:var(--font);
  font-size:13.5px;font-weight:500;padding:12px 16px;border-radius:8px;
  border:1px solid var(--line);transition:.2s;
}
.nb-numtog:hover{color:var(--blue);border-color:#CBD9F5;background:#F5F8FF}
.nb-numtog svg{width:15px;height:15px}

/* ---------- the shared card ---------- */
.nb-card{
  position:relative;overflow:hidden;border-radius:var(--r);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:22px;min-height:0;
  background:linear-gradient(155deg,#F1F2F4,#E5E7EB);      /* placeholder media */
  border:1px solid var(--line);
  transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s;
}
.nb-card:hover{transform:translateY(-5px);box-shadow:0 26px 55px rgba(16,24,40,.16)}

/* product image (when supplied) sits behind everything.
   object-fit:contain keeps the full image visible at its true aspect ratio
   (no cropping) — for designed, content-bearing artwork per card. */
.nb-card img.nb-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:0;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}  /* .nb-card img … beats Elementor's .elementor img{height:auto} */
.nb-card:hover .nb-shot{transform:scale(1.05)}
.nb-card--img::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,14,28,.30) 0%,rgba(8,14,28,0) 40%,rgba(8,14,28,.58) 100%);
}
.nb-card--img{border-color:transparent}

/* white logo chip — top-left */
.nb-chip{
  position:relative;z-index:2;align-self:flex-start;
  display:grid;place-items:center;
  background:#fff;border-radius:14px;padding:14px 18px;
  box-shadow:0 6px 18px rgba(16,24,40,.12);
}
.nb-chip img{height:26px;width:auto;max-width:160px;object-fit:contain}
.nb-chip--lock{display:inline-flex;align-items:center;gap:9px}
.nb-chip--lock img{height:26px}
.nb-chip--lock b{font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink-strong)}
.nb-card:not(.nb-card--img) .nb-chip{box-shadow:0 4px 14px rgba(16,24,40,.08)}

/* name + category — bottom-left */
.nb-foot{position:relative;z-index:2}
.nb-name{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink-strong);margin:0 0 3px}
.nb-cat{font-size:12.5px;line-height:1.4;color:var(--muted);margin:0}
.nb-card--img .nb-name{color:#fff}
.nb-card--img .nb-cat{color:rgba(255,255,255,.80)}

/* "hub" card — title top + corner arrow */
.nb-hublead{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.nb-hublead .nb-name{margin:0}
.nb-arrow{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);color:var(--blue);background:#fff;transition:.25s}
.nb-arrow svg{width:17px;height:17px;transition:transform .25s}
.nb-card--hub:hover .nb-arrow{background:var(--blue);border-color:var(--blue);color:#fff}
.nb-card--hub:hover .nb-arrow svg{transform:translate(2px,-2px)}
.nb-hubfoot{position:relative;z-index:2;font-size:13px;line-height:1.5;color:var(--muted);max-width:34ch}

/* "coming soon" placeholder card */
.nb-card--soon{background:#FBFBFC;border:1px dashed #D3D7DE}
.nb-pill{position:relative;z-index:2;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;letter-spacing:.2px;color:var(--blue);background:#F2F6FF;
  border:1px solid #CBD9F5;border-radius:999px;padding:7px 14px}
.nb-card--soon .nb-name{color:var(--ink)}

/* ---------- position-number overlay (preview, like the ref) ---------- */
.nb-bento.nb-show-slots .nb-card{outline:2px dashed rgba(59,130,246,.55);outline-offset:-5px}
.nb-bento.nb-show-slots .nb-card::before{
  content:attr(data-slot);
  position:absolute;inset:0;z-index:6;
  display:grid;place-items:center;
  font:700 clamp(44px,7vw,80px)/1 var(--font);
  color:var(--ink-strong);background:rgba(255,255,255,.74);
}

/* ---------- on-load fade-in (NOT scroll-linked; itr-fade lives in the shared CSS) ---------- */
.nb-rv{animation:itr-fade .7s cubic-bezier(.22,1,.36,1) both}
.nb-rv:nth-child(2){animation-delay:.06s}
.nb-rv:nth-child(3){animation-delay:.12s}
.nb-rv:nth-child(4){animation-delay:.18s}
.nb-rv:nth-child(5){animation-delay:.24s}
.nb-rv:nth-child(6){animation-delay:.30s}
.nb-rv:nth-child(7){animation-delay:.36s}
.nb-rv:nth-child(8){animation-delay:.42s}
.nb-rv:nth-child(9){animation-delay:.48s}
@media(prefers-reduced-motion:reduce){.nb-rv{animation:none}.nb-card{transition:none}}

/* ---------- responsive ---------- */
/* TABLET — header on its own full-width row, then the 8 cards in a clean
   2-column grid (order 1->8). grid-area names fall back to auto placement,
   so `order` drives the sequence. */
@media(max-width:1080px){
  .nb-bento{
    grid-template-columns:1fr 1fr;grid-template-areas:none;
    grid-auto-rows:auto;grid-auto-flow:row dense;gap:18px;
  }
  /* the named grid-areas no longer exist here — reset every slot to auto so the
     cards flow by `order` instead of all collapsing into one cell */
  .nbslot-1,.nbslot-2,.nbslot-3,.nbslot-4,.nbslot-5,.nbslot-6,.nbslot-7,.nbslot-8{grid-area:auto}
  /* pin the header to the top row (its `hd` area is gone too), then cards flow below */
  .nb-head{grid-area:auto;grid-column:1 / -1;grid-row:1;justify-content:flex-start;gap:22px;padding:0 0 6px}
  /* Cards keep their DESKTOP proportions instead of a content-driven height.
     Desktop geometry: column = (1280 - 3*20)/4 = 305px; a 5-band card is
     5*58 + 4*20 = 370px tall, a 3-band card is 3*58 + 2*20 = 214px.
     Slots 4 and 7 are the short ones; every other slot is tall.
     `align-self:start` is required — a stretched grid item takes its height from
     the row and ignores aspect-ratio. */
  .nb-card{--nb-ar:305/370;aspect-ratio:var(--nb-ar);align-self:start;min-height:0}
  .nbslot-4,.nbslot-7{--nb-ar:305/214}
  .nb-card--img{min-height:0}
}
/* PHONE — single column, cards flow by slot number 1->8. */
@media(max-width:620px){
  .nb{padding:64px 0 72px}
  .nb-wrap{padding:0 22px}
  .nb-bento{grid-template-columns:1fr;gap:14px}
  .nb-card{min-height:0;padding:18px}      /* ratio comes from the tablet block above */
  .nb-card--img{min-height:0}
  .nb-chip{padding:12px 15px;border-radius:12px}
  .nb-chip img{height:22px;max-width:140px}
  .nb-name{font-size:17px}
}

/* ===== Services (Line-morph) — itranks_services_morph ===== */
/* ============================================================
   IT-RANKS · Services (Line-morph)  —  svm-*  [ported standalone]
   A pinned dark stage. Per service family:
     · tagline + name + description   →  LEFT
     · self-drawing line-art icon     →  CENTER (canvas morph)
     · offering list                  →  RIGHT
   The plain stacked .svm-fallback is the no-JS / reduced-motion view
   AND the JS content source; the engine adds .svm-anim on .svm to
   switch on the pinned canvas. Everything is scoped under .itr-morph
   (tokens resolve from .ab). Classes renamed to the unique svm-* prefix.
   ============================================================ */
.itr-morph .svm{
	--svm-font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	--svm-font-alt:'Calibri','Carlito','Segoe UI',var(--svm-font);
	--svm-navy:#0A1020;
	--svm-blue:#3B82F6;
	--svm-blue-lt:#7FB0FF;
	--svm-ink-0:#FFFFFF;
	--svm-ink-1:rgba(255,255,255,.64);
	--svm-ink-2:rgba(255,255,255,.42);
	--svm-hair:rgba(255,255,255,.12);
	--svm-cw:1280px;           /* content width */
	--svm-pad:40px;
	position:relative;font-family:var(--svm-font);color:var(--svm-ink-0);
	background:
		radial-gradient(1100px 640px at 88% 108%, rgba(59,130,246,.22), transparent 60%),
		radial-gradient(900px 560px at 6% -6%, rgba(59,130,246,.10), transparent 60%),
		linear-gradient(180deg,#090E1B,#0A1020 40%,#0A1020);
	-webkit-font-smoothing:antialiased;
}
.itr-morph .svm *{box-sizing:border-box}
.itr-morph .svm :where(h2,h3,p,ul,li){margin:0;padding:0}
.itr-morph .svm ul{list-style:none}

/* ---------- fallback ⇄ animated-stage switch ---------- */
.itr-morph .svm-track{display:none}
.itr-morph .svm.svm-anim .svm-fallback{display:none}
.itr-morph .svm.svm-anim .svm-track{display:block}

/* ---------- the tall scroll track + pinned stage ---------- */
.itr-morph .svm-track{height:calc(var(--svm-n,8) * 100vh);position:relative}
.itr-morph .svm-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column}
/* scroll-snap is handled in JS (settle-to-nearest while pinned) — see itrServicesMorph. */

/* 1280 content column */
.itr-morph .svm-wrap{position:relative;flex:1;width:100%;max-width:calc(var(--svm-cw) + 2 * var(--svm-pad));
	margin:0 auto;padding:0 var(--svm-pad);display:flex;flex-direction:column;min-height:0}

/* top bar (eyebrow + counter) */
.itr-morph .svm-bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
	padding:34px 0 0;flex:none}
.itr-morph .svm-eyb{display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:600;letter-spacing:.16em;
	text-transform:uppercase;color:var(--svm-blue-lt)}
.itr-morph .svm-eyb::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--svm-blue)}
.itr-morph .svm-count{font-family:var(--svm-font-alt);font-size:14px;letter-spacing:.12em;color:var(--svm-ink-2)}
.itr-morph .svm-count b{color:var(--svm-ink-0);font-weight:600}

/* the 3-column body */
.itr-morph .svm-grid{position:relative;z-index:4;flex:1;display:grid;
	grid-template-columns:1.05fr 1.2fr 1.05fr;
	align-items:center;gap:clamp(20px,3vw,48px);
	padding:10px 0 40px;min-height:0}

/* LEFT — tagline + name + description (stacked panels, JS crossfades) */
.itr-morph .svm-left,.itr-morph .svm-right{position:relative;height:min(62vh,540px);min-width:0}
.itr-morph .svm-panel{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;justify-content:center;
	opacity:0;pointer-events:none;will-change:opacity,transform}
.itr-morph .svm-tag{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;
	text-transform:uppercase;color:var(--svm-blue-lt);margin:0 0 16px}
.itr-morph .svm-tag::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--svm-blue);flex:none}
.itr-morph .svm-name{font-family:var(--svm-font-alt);font-weight:300;font-size:clamp(28px,3vw,44px);line-height:1.12;
	letter-spacing:-.5px;color:var(--svm-ink-0);margin:0 0 20px;max-width:16ch}
.itr-morph .svm-desc{font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.72;color:var(--svm-ink-1);max-width:42ch}

/* CENTER — the morphing canvas */
.itr-morph .svm-center{position:relative;height:100%;display:grid;place-items:center;min-height:0}
.itr-morph .svm-canvas{width:100%;height:min(78vh,600px);display:block}

/* RIGHT — content list (stacked panels, JS crossfades) */
.itr-morph .svm-right .svm-panel{align-items:flex-start}
.itr-morph .svm-list{display:flex;flex-direction:column;gap:0;width:100%;max-width:400px;margin-left:auto}
.itr-morph .svm-li{position:relative;display:flex;align-items:center;gap:12px;padding:17px 16px;overflow:hidden;
	border-top:1px solid var(--svm-hair);cursor:pointer;border-radius:10px;
	opacity:0;transform:translateX(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.itr-morph .svm-list .svm-li:last-child{border-bottom:1px solid var(--svm-hair)}
.itr-morph .svm-panel.svm-active .svm-li{opacity:1;transform:none}
/* cursor-tracked radial glow behind the row */
.itr-morph .svm-li::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;border-radius:inherit;
	background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(59,130,246,.20),transparent 55%);transition:opacity .4s ease}
.itr-morph .svm-li:hover::before{opacity:1}
/* name with a clip-path colour fill that sweeps in left→right on hover */
.itr-morph .svm-li-name{position:relative;z-index:1;display:inline-block;white-space:nowrap;
	font-size:16.5px;line-height:1.35;letter-spacing:-.1px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.itr-morph .svm-li:hover .svm-li-name{transform:translateX(3px)}
.itr-morph .svm-li-base{color:var(--svm-ink-1);transition:color .3s ease}
.itr-morph .svm-li-fill{position:absolute;left:0;top:0;color:#fff;white-space:nowrap;pointer-events:none;
	clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);
	transition:-webkit-clip-path .62s cubic-bezier(.16,1,.3,1),clip-path .62s cubic-bezier(.16,1,.3,1)}
.itr-morph .svm-li:hover .svm-li-fill{clip-path:inset(0 -1px 0 0);-webkit-clip-path:inset(0 -1px 0 0)}
.itr-morph .svm-panel.svm-active .svm-list li:nth-child(1){transition-delay:.04s}
.itr-morph .svm-panel.svm-active .svm-list li:nth-child(2){transition-delay:.08s}
.itr-morph .svm-panel.svm-active .svm-list li:nth-child(3){transition-delay:.12s}
.itr-morph .svm-panel.svm-active .svm-list li:nth-child(4){transition-delay:.16s}
.itr-morph .svm-panel.svm-active .svm-list li:nth-child(5){transition-delay:.20s}
.itr-morph .svm-panel.svm-active .svm-list li:nth-child(6){transition-delay:.24s}
.itr-morph .svm-panel.svm-active .svm-list li:nth-child(7){transition-delay:.28s}
.itr-morph .svm-panel.svm-active .svm-list li:nth-child(8){transition-delay:.32s}
.itr-morph .svm-panel.svm-active .svm-list li:nth-child(9){transition-delay:.36s}
.itr-morph .svm-panel.svm-active .svm-list li:nth-child(10){transition-delay:.40s}

/* progress spine — HORIZONTAL, 700px, centered under the section */
.itr-morph .svm-dots{position:absolute;z-index:6;left:50%;transform:translateX(-50%);width:min(700px,92vw);bottom:12vh;height:24px}
.itr-morph .svm-rail__track,.itr-morph .svm-rail__fill{position:absolute;top:50%;transform:translateY(-50%);height:2px;border-radius:2px}
.itr-morph .svm-rail__track{left:0;right:0;background:rgba(255,255,255,.13)}
.itr-morph .svm-rail__fill{left:0;width:0;background:linear-gradient(90deg,#7FB0FF,#3B82F6);
	box-shadow:0 0 10px rgba(59,130,246,.55);transition:width .12s linear}
.itr-morph .svm-node{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:18px;height:18px;
	border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
.itr-morph .svm-node::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);transition:.3s ease}
.itr-morph .svm-node.svm-passed::before{background:rgba(127,176,255,.55)}
.itr-morph .svm-node.svm-on::before{width:9px;height:9px;background:var(--svm-blue);
	box-shadow:0 0 0 4px rgba(59,130,246,.16),0 0 14px rgba(59,130,246,.7)}
.itr-morph .svm-thumb{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;
	background:radial-gradient(circle,#dceaff,#3B82F6 72%);box-shadow:0 0 16px 3px rgba(59,130,246,.7);
	pointer-events:none;transition:left .12s linear;z-index:2}
.itr-morph .svm-thumb__n{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:700;
	letter-spacing:.06em;color:var(--svm-blue-lt);white-space:nowrap}

/* scroll hint (hidden — the horizontal progress bar conveys scroll) */
.itr-morph .svm-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;
	font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--svm-ink-2);
	display:none;align-items:center;gap:9px;transition:opacity .4s}
.itr-morph .svm-hint svg{width:15px;height:15px;animation:svmBob 1.8s ease-in-out infinite}
@keyframes svmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- readable fallback / reduced-motion list ---------- */
.itr-morph .svm-fallback{padding:88px 0 92px}
.itr-morph .svm-fallback .ab-wrap{display:grid;gap:2px}
.itr-morph .svm-fb-head{max-width:760px;margin:0 0 24px}
.itr-morph .svm-fb-eyb{display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:600;
	letter-spacing:.16em;text-transform:uppercase;color:var(--svm-blue-lt);margin:0 0 14px}
.itr-morph .svm-fb-eyb::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--svm-blue)}
.itr-morph .svm-fb-head h2{font-family:var(--svm-font-alt);font-weight:300;font-size:clamp(28px,3.4vw,42px);
	line-height:1.14;letter-spacing:-.3px;color:#fff}
/* scroll-margin-top keeps a #anchor jump clear of the fixed header when the
   stacked fallback is the live view (mobile / reduced motion / engine revert) */
.itr-morph .svm-item{display:grid;grid-template-columns:88px 1fr;gap:28px;align-items:start;
	padding:30px 0;border-top:1px solid var(--svm-hair);scroll-margin-top:100px}
.itr-morph .svm-ico-wrap{position:relative}
.itr-morph .svm-ico{width:56px;height:56px;display:block;color:var(--svm-blue-lt)}
.itr-morph .svm-ico path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.itr-morph .svm-fb-tag{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;
	letter-spacing:.14em;text-transform:uppercase;color:var(--svm-blue-lt);margin:0 0 10px}
.itr-morph .svm-fb-name{font-family:var(--svm-font-alt);font-weight:400;font-size:clamp(22px,2.4vw,30px);
	line-height:1.15;color:#fff;margin:0 0 12px}
.itr-morph .svm-fb-desc{font-size:15px;line-height:1.7;color:var(--svm-ink-1);max-width:74ch;margin:0 0 18px}
.itr-morph .svm-fb-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 30px}
.itr-morph .svm-fb-list li{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;line-height:1.45;
	color:var(--svm-ink-1);padding:7px 0;border-top:1px solid rgba(255,255,255,.07)}
.itr-morph .svm-fb-list .svm-k{font-family:var(--svm-font-alt);font-size:12px;color:var(--svm-blue-lt);
	font-weight:600;flex:none;min-width:20px}

/* ---------- responsive ---------- */
@media(max-width:900px){
	/* mobile: the pinned 3-panel morph can't fit a phone → always show the readable
	   stacked fallback (icon + title + description + list per service) and hide the track */
	.itr-morph .svm.svm-anim .svm-fallback{display:block}
	.itr-morph .svm.svm-anim .svm-track{display:none}
	.itr-morph .svm-fb-list .svm-k{display:none}
	.itr-morph .svm-dots{display:none}
}
@media(max-width:720px){
	.itr-morph .svm-item{grid-template-columns:1fr;gap:16px;padding:26px 0}
	.itr-morph .svm-fb-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.itr-morph .svm-hint svg{animation:none}}

/* ================================================================
   SERVICES BANNER · ORBIT ARTWORK
   Bare IT-RANKS logo in the centre, circles growing outward, and
   real service icons + words emanating from the centre and fading
   out at the growing circles. Pure CSS (no JS). Replaces the old
   signal-lanes hub on the right side of the Services banner.
   ================================================================ */
.itr-hub .hub--orbit{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;gap:20px;min-height:340px;
  padding:26px clamp(24px,4vw,56px);
}
.itr-hub .hub--orbit .hub__copy{position:relative;top:auto;left:auto;z-index:7;transform:none;max-width:46ch}

.itr-hub .svo{
  --s:min(380px,38vw);
  --dist:clamp(520px,72vw,2000px);   /* icons travel out until they clip at the container edge */
  --wmax:clamp(760px,155vw,2400px);  /* ripple diameter — fills the whole banner */
  --svo-speed:1;                      /* motion speed (control) — higher is faster */
  --svo-dur:calc(7.4s / var(--svo-speed,1));   /* emit cycle */
  --svo-wdur:calc(7s / var(--svo-speed,1));     /* ring cycle */
  --svo-ico:32px;                     /* emitted icon size (control) */
  --svo-logo-h:78px;                  /* centre logo height (control) */
  position:relative;display:grid;place-items:center;justify-self:center;
  width:var(--s);height:var(--s);
}
.itr-hub .svo__stage{position:relative;width:var(--s);height:var(--s)}

/* circles growing outward — full-bleed ripples centred on the logo, clipped by
   the .hub container (border-radius + overflow:hidden). Scaled from a full-size
   ring so the 1px border stays crisp at its largest. */
.itr-hub .svo__waves{position:absolute;inset:0;pointer-events:none;z-index:1;display:grid;place-items:center}
.itr-hub .svo__wave{position:absolute;left:50%;top:50%;
  width:var(--wmax,1800px);height:var(--wmax,1800px);border-radius:50%;
  border:var(--svo-wave-bw,1px) solid rgba(96,160,255,.6);
  transform:translate(-50%,-50%) scale(.04);opacity:0;
  /* ease-out (decelerating): rings shoot away from the logo fast (wide spacing
     around the centre), then slow as they expand — so the gaps tighten the
     further out they travel. Ring spacing == growth rate, so the easing curve
     IS the spacing curve. Swap --svo-wave-ease for a different distribution:
       cubic-bezier(.25,.46,.45,.94)  subtler falloff
       cubic-bezier(.165,.84,.44,1)   stronger falloff (tighter outer rings) */
  animation:svoWave var(--svo-wdur,7s) var(--svo-wave-ease,cubic-bezier(.215,.61,.355,1)) infinite}
@keyframes svoWave{
  0%{transform:translate(-50%,-50%) scale(.04);opacity:0}
  8%{opacity:.7}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* emanating nodes — the opacity ramp keeps them invisible through the centre,
   so they emerge from around the logo and keep travelling to the container edge */
.itr-hub .svo__emits{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible}
.itr-hub .svo__emit{position:absolute;top:50%;left:50%;width:0;height:0;transform:rotate(var(--a))}
.itr-hub .svo__travel{position:absolute;top:0;left:0;
  animation:svoEmit var(--svo-dur,7.4s) cubic-bezier(.33,0,.5,1) infinite;
  animation-delay:var(--delay,0s);animation-fill-mode:backwards}
.itr-hub .svo__content{position:absolute;top:0;left:0;transform:translate(-50%,-50%) rotate(calc(var(--a)*-1))}
@keyframes svoEmit{
  0%{transform:translateY(0) scale(.4);opacity:0}      /* transparent, under the logo */
  20%{opacity:1}                                        /* risen to full once clear of the logo */
  74%{opacity:1}
  100%{transform:translateY(calc(var(--dist)*-1)) scale(1.12);opacity:0}  /* fades while exiting the frame */
}
.itr-hub .svo__ico{color:var(--blue-lt);display:block;filter:drop-shadow(0 4px 16px rgba(59,130,246,.55))}
.itr-hub .svo__ico svg{width:var(--svo-ico,32px);height:var(--svo-ico,32px);display:block}
.itr-hub .svo__text{font-family:var(--font-alt);font-weight:500;font-size:14.5px;letter-spacing:.02em;
  color:#E8EEFB;white-space:nowrap;text-shadow:0 2px 16px rgba(0,0,0,.55)}

/* centre bare logo (fill follows theme via currentColor) */
.itr-hub .svo__core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center}
.itr-hub .svo__logo{display:block;width:auto;height:var(--svo-logo-h,78px);color:#FCFCFD}
.itr-hub .svo__logo--img{width:auto;max-width:none;object-fit:contain}
/* wordmark under the mark → the "full logo with text under it" */
.itr-hub .svo__wordmark{display:block;margin-top:15px;font-family:var(--font-alt);font-weight:500;
  letter-spacing:.26em;font-size:14px;line-height:1;color:#FCFCFD;white-space:nowrap;text-indent:.26em}
.itr-hub .hub--light .svo__wordmark{color:#0A1020}

/* overlay behind the left copy (control) — spans the whole banner and fades to 0
   by where the text ends (~52%). Sits above the artwork (z1-4), below the copy
   (z7) and logo (z6), so it cleans up the busy artwork behind the text only. */
.itr-hub .hub--orbit .hub__scrim{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit}
.itr-hub .hub--orbit.hub--scrim .hub__scrim{
  background:linear-gradient(90deg,rgba(8,12,22,.96) 0%,rgba(8,12,22,.9) 16%,rgba(8,12,22,.55) 34%,rgba(8,12,22,0) 52%)}
.itr-hub .hub--light.hub--scrim .hub__scrim{
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 16%,rgba(255,255,255,.55) 34%,rgba(255,255,255,0) 52%)}

/* light theme */
.itr-hub .hub--light .svo__logo{color:#0A1020}
.itr-hub .hub--light .svo__text{color:#1E293B;text-shadow:none}
.itr-hub .hub--light .svo__ico{color:#2563EB;filter:drop-shadow(0 4px 14px rgba(37,99,235,.35))}
.itr-hub .hub--light .svo__wave{border-color:rgba(37,99,235,.42)}

@media(prefers-reduced-motion:reduce){
  .itr-hub .svo__wave,.itr-hub .svo__travel{animation:none}
  .itr-hub .svo__travel{opacity:0}
}
@media(max-width:820px){
  .itr-hub .hub--orbit{grid-template-columns:1fr;text-align:left;padding:34px 20px;gap:18px}
  .itr-hub .hub--orbit .hub__copy{max-width:none;margin:0}
  /* Keep the artwork inside its own stage. At full-bleed distances the icons and
     ripples sweep across the copy on a phone, which reads as flicker — and 30
     shadow-filtered nodes animating over the text is also what makes it stutter. */
  .itr-hub .svo{--s:min(330px,80vw);--dist:calc(var(--s) * .58);--wmax:var(--s);justify-self:center}
  .itr-hub .svo__emit:nth-child(2n){display:none}          /* halve the animated nodes */
  .itr-hub .svo__ico{filter:none}                          /* drop-shadow on moving nodes is the expensive part */
  .itr-hub .svo__text{font-size:13px;text-shadow:none}
  /* keep the animated layers on their own composited layer — stops the repaint
     tearing that shows up as flicker on mobile Safari/Chrome */
  .itr-hub .svo__travel,.itr-hub .svo__wave{-webkit-backface-visibility:hidden;backface-visibility:hidden}
  .itr-hub .svo__logo{height:62px}
  .itr-hub .svo__ico svg{width:28px;height:28px}
  /* the scrim gradient runs left→right for the two-column layout; stacked, it has
     to run top→bottom or it just dims one side of everything */
  .itr-hub .hub--orbit.hub--scrim .hub__scrim{
    background:linear-gradient(180deg,rgba(8,12,22,.96) 0%,rgba(8,12,22,.86) 22%,rgba(8,12,22,.45) 38%,rgba(8,12,22,0) 52%)}
  .itr-hub .hub--light.hub--scrim .hub__scrim{
    background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 22%,rgba(255,255,255,.45) 38%,rgba(255,255,255,0) 52%)}
}

/* ════════════════════════════════════════════════════════════
   Services (line-morph): LIGHT theme + hide-eyebrow control
════════════════════════════════════════════════════════════ */
.itr-morph.is-light .svm{
  --svm-ink-0:#0B1222;
  --svm-ink-1:rgba(15,23,42,.68);
  --svm-ink-2:rgba(15,23,42,.46);
  --svm-hair:rgba(10,16,32,.12);
  --svm-blue-lt:#2563EB;
  background:
    radial-gradient(1100px 640px at 88% 108%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(900px 560px at 6% -6%, rgba(59,130,246,.07), transparent 60%),
    linear-gradient(180deg,#FFFFFF,#F4F8FF 42%,#EEF3FB);
}
/* hardcoded whites → dark for the light theme */
.itr-morph.is-light .svm-li-fill{color:#0B1222}
.itr-morph.is-light .svm-rail__track{background:rgba(10,16,32,.14)}
.itr-morph.is-light .svm-hint{color:var(--svm-ink-2)}
/* morph-line canvas colours for light (the JS reads these vars) */
.itr-morph.is-light .svm-canvas{
  --svm-draw-glow:rgba(37,99,235,.30);
  --svm-draw-line:rgba(23,42,90,.95);
  --svm-draw-shadow:rgba(37,99,235,.40);
}
/* Hide-eyebrow: drop the small "Solutions & Services" eyebrow label */
.itr-morph.svm--noeyb .svm-eyb,
.itr-morph.svm--noeyb .svm-fb-eyb{display:none}


/* ================================================================
   IT-RANKS · OCI Suite (page)  — scoped under .itr-oci
   ================================================================ */
.itr-oci{
  --blue:#3B82F6;--blue-lt:#60A5FA;--blue-dark:#2563EB;
  --ink-strong:#0B1220;--ink:#3F4A5C;--muted:#6B7686;
  --line:#E6EAF2;--hair:#EEF1F7;--bg-alt:#F6F8FC;--card:#FFFFFF;
  --oci-fa:'Calibri','Carlito','Segoe UI',sans-serif;--cw:1200px;
  color:var(--ink);line-height:1.2;
}
.itr-oci *{box-sizing:border-box}
.itr-oci .oci-wrap{width:100%;max-width:var(--cw);margin:0 auto;padding:0 40px}
.itr-oci section{position:relative}
.itr-oci .oci-eyb{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0 0 20px}
.itr-oci .oci-eyb::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--blue)}
.itr-oci .oci-h2{font-family:var(--oci-fa);font-weight:300;font-size:clamp(30px,4vw,50px);line-height:1.1;letter-spacing:-.4px;color:var(--ink-strong);margin:0 0 20px}
.itr-oci .oci-h2 b{color:var(--blue);font-weight:400}
.itr-oci .oci-lead{font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:var(--muted);margin:0;max-width:64ch}
/* buttons */
.itr-oci .oci-btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;padding:14px 26px;border-radius:10px;text-decoration:none;transition:.25s;cursor:pointer;border:1px solid transparent}
.itr-oci .oci-btn svg{width:16px;height:16px;transition:transform .25s}
.itr-oci .oci-btn:hover svg{transform:translateX(3px)}
.itr-oci .oci-btn--pri{background:var(--blue);color:#fff}
.itr-oci .oci-btn--pri:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 12px 28px rgba(59,130,246,.32)}
.itr-oci .oci-btn--ghost{background:#fff;color:var(--ink-strong);border-color:var(--line)}
.itr-oci .oci-btn--ghost:hover{border-color:var(--blue);color:var(--blue);background:#F5F8FF}
/* HERO */
.itr-oci .oci-hero{position:relative;padding:clamp(110px,16vh,180px) 0 clamp(64px,9vh,100px);overflow:hidden;color:#fff;background:radial-gradient(720px 480px at 80% 16%,rgba(59,130,246,.16),transparent 62%),linear-gradient(160deg,#0B1222 0%,#0A1020 60%,#080D18 100%)}
.itr-oci .oci-hero__fx{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}
.itr-oci .oci-hero__glow{position:absolute;top:-12%;right:-6%;width:640px;height:640px;border-radius:50%;pointer-events:none;filter:blur(14px);z-index:0;background:radial-gradient(circle,rgba(59,130,246,.26),transparent 62%)}
.itr-oci .oci-hero .oci-wrap{position:relative;z-index:1}
.itr-oci .oci-hero .oci-eyb{color:#7FB0FF}
.itr-oci .oci-hero h1{font-family:var(--oci-fa);font-weight:300;font-size:clamp(32px,4.6vw,56px);line-height:1.06;letter-spacing:-1px;color:#fff;margin:22px 0 26px;max-width:20ch;text-shadow:0 4px 60px rgba(59,130,246,.28)}
.itr-oci .oci-hero h1 b{color:#7FB0FF;font-weight:300}
.itr-oci .oci-hero__lead{font-size:clamp(16px,1.4vw,19px);line-height:1.7;color:rgba(255,255,255,.72);max-width:64ch;margin:0 0 36px}
.itr-oci .oci-hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.itr-oci .oci-hero .oci-btn--ghost{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(120,150,205,.32)}
.itr-oci .oci-hero .oci-btn--ghost:hover{border-color:#7FB0FF;background:rgba(59,130,246,.16);color:#fff}
/* PHILOSOPHY + PILLARS */
.itr-oci .oci-phil{padding:clamp(60px,9vh,100px) 0;background:var(--bg-alt)}
.itr-oci .oci-phil__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:end;margin:0 0 clamp(48px,7vh,72px)}
.itr-oci .oci-phil__copy{max-width:760px}
.itr-oci .oci-phil__aside{display:flex;gap:0;align-self:end;padding-bottom:4px}
.itr-oci .oci-phil__stage{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted);
  background:#EFF3F9;padding:11px 18px;white-space:nowrap}
.itr-oci .oci-phil__stage:first-child{border-radius:8px 0 0 8px}
.itr-oci .oci-phil__stage:last-child{border-radius:0 8px 8px 0}
.itr-oci .oci-phil__stage--on{background:var(--blue);color:#fff}

/* ── staircase: each step sits one column further right than the last ── */
.itr-oci .oci-steps{display:grid;grid-template-columns:repeat(12,1fr);gap:30px 0}
/* Each step gets its OWN row — without an explicit grid-row the browser packs
   two steps per row and the staircase collapses into a 2x2 block. 5 of 12
   columns wide, alternating sides; the channel between them carries the
   dashed elbows. */
.itr-oci .oci-step{display:flex;position:relative;z-index:1}
.itr-oci .oci-step:nth-child(1){grid-row:1;grid-column:1 / span 5}
.itr-oci .oci-step:nth-child(2){grid-row:2;grid-column:8 / span 5}
.itr-oci .oci-step:nth-child(3){grid-row:3;grid-column:2 / span 5}
.itr-oci .oci-step:nth-child(4){grid-row:4;grid-column:8 / span 5}

/* the rounded tab down the left edge */
.itr-oci .oci-step__tab{flex:0 0 34px;border-radius:999px;background:var(--ink-strong);
  display:flex;align-items:center;justify-content:center;margin:14px 0}
.itr-oci .oci-step__tab span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#fff;white-space:nowrap}
.itr-oci .oci-step--alt .oci-step__tab{background:var(--blue-dark)}

.itr-oci .oci-step__body{flex:1;border-radius:18px;background:#F2F4F7;padding:22px 26px 26px 20px;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:14px 14px;align-items:center}
.itr-oci .oci-step--alt .oci-step__body{background:#EDF3FE}

.itr-oci .oci-step__ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--blue);border:1px solid var(--line)}
.itr-oci .oci-step--alt .oci-step__ic{color:var(--blue-dark)}
.itr-oci .oci-step__ic svg{width:19px;height:19px}
.itr-oci .oci-step__t{font-size:19px;font-weight:600;color:var(--ink-strong);margin:0;letter-spacing:-.01em}
.itr-oci .oci-step__t i{font-style:normal;color:var(--muted);font-weight:500;margin-right:9px}
.itr-oci .oci-step__d{grid-column:1 / -1;font-size:13.5px;line-height:1.65;color:var(--muted);margin:0;
  max-width:46ch;padding-left:4px}

/* dashed elbow joining one step to the next */
.itr-oci .oci-step__link{position:absolute;z-index:0;pointer-events:none;
  border-color:var(--line);border-style:dashed;border-width:0}
.itr-oci .oci-step:last-child .oci-step__link{display:none}
/* Widths are a % of the step so the elbow tracks the channel at any container
   width. It runs sideways out of this card, then turns down into the top of
   the next one — so it needs the TOP + side borders, not bottom.
   --r exits right (next step is below-right); --l exits left. */
.itr-oci .oci-step--r .oci-step__link{right:-30%;top:52%;width:30%;bottom:-30px;
  border-top-width:1.5px;border-right-width:1.5px;border-radius:0 14px 0 0}
.itr-oci .oci-step--l .oci-step__link{left:-30%;top:52%;width:30%;bottom:-30px;
  border-top-width:1.5px;border-left-width:1.5px;border-radius:14px 0 0 0}

.itr-oci .oci-svcs{padding:clamp(60px,9vh,100px) 0}
/* Heading parked on the left, the service list running down the right. */
.itr-oci .oci-svcs__grid{display:grid;grid-template-columns:minmax(280px,.78fr) 1.35fr;gap:56px;align-items:start}
.itr-oci .oci-svcs__head{position:sticky;top:96px;max-width:420px}
.itr-oci .oci-svcs__head .oci-lead{margin-top:18px}

.itr-oci .oci-svclist{display:flex;flex-direction:column;gap:14px}
.itr-oci .oci-svcrow{position:relative;display:grid;grid-template-columns:1fr clamp(190px,24%,260px);
  gap:26px;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:22px;transition:border-color .28s,box-shadow .28s,transform .28s}
.itr-oci .oci-svcrow:hover{transform:translateY(-3px);border-color:#BFD2F5;box-shadow:0 18px 40px rgba(16,24,40,.10)}
/* Copy, features and chips share one column so the photo can stretch the full
   card height beside them without any row-span arithmetic. */
.itr-oci .oci-svcrow__main{min-width:0;display:flex;flex-direction:column;padding:4px 0 2px 6px}
.itr-oci .oci-svcrow__tag{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin:0 0 10px;letter-spacing:.01em}
.itr-oci .oci-svcrow__t{font-size:19px;font-weight:600;color:var(--ink-strong);margin:0 0 8px;letter-spacing:-.01em;line-height:1.3}
.itr-oci .oci-svcrow__d{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0;max-width:60ch}

/* the photo — a full-height panel, the visual anchor of the card */
.itr-oci .oci-svcrow__media{position:relative;overflow:hidden;border-radius:14px;min-height:190px;
  background:#EFF4FC;display:grid;place-items:center;color:var(--blue)}
.itr-oci .oci-svcrow__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.itr-oci .oci-svcrow:hover .oci-svcrow__media img{transform:scale(1.05)}
.itr-oci .oci-svcrow__media svg{width:38px;height:38px}

.itr-oci .oci-svcrow__feat{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:1fr 1fr;gap:7px 20px}
.itr-oci .oci-svcrow__feat li{font-size:12.5px;line-height:1.45;color:var(--ink);padding-left:15px;position:relative}
.itr-oci .oci-svcrow__feat li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:var(--blue-lt)}
.itr-oci .oci-svcrow__meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:14px}
.itr-oci .oci-svcrow__meta span{font-size:11px;font-weight:600;color:var(--blue-dark);background:#EAF1FF;
  border:1px solid #D6E4FF;border-radius:999px;padding:4px 10px}

.itr-oci .oci-cstory{padding:0}
.itr-oci .oci-cstory__band{position:relative;overflow:hidden;padding:clamp(56px,8vh,100px) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:radial-gradient(760px 480px at 93% -12%,rgba(59,130,246,.10),transparent 58%),linear-gradient(180deg,#F7F9FD 0%,#EDF2FB 100%)}
.itr-oci .oci-cstory__dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(59,130,246,.11) 1.3px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:radial-gradient(150% 100% at 93% 0,#000,transparent 58%);mask-image:radial-gradient(150% 100% at 93% 0,#000,transparent 58%)}
.itr-oci .oci-cstory .oci-wrap{position:relative;z-index:1}
.itr-oci .oci-cstory__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 28px}
.itr-oci .oci-cstory__bar .oci-eyb{margin:0}
.itr-oci .oci-cstory__arrows{display:flex;gap:10px}
.itr-oci .oci-cstory__arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--ink-strong);cursor:pointer;transition:.25s;box-shadow:0 4px 12px rgba(16,24,40,.05)}
.itr-oci .oci-cstory__arrow:hover{border-color:var(--blue);color:var(--blue);background:#F5F8FF}
.itr-oci .oci-cstory__arrow svg{width:18px;height:18px}
.itr-oci .oci-cstory__arrow:disabled{opacity:.35;cursor:default;box-shadow:none}
.itr-oci .oci-cstory__view{overflow:hidden}
.itr-oci .oci-cstory__track{display:flex;transition:transform .55s cubic-bezier(.5,.05,.2,1);will-change:transform}
.itr-oci .oci-cstory__slide{flex:0 0 100%;min-width:0}
.itr-oci .oci-cstory__chip{display:flex;align-items:center;gap:14px;margin:0 0 24px}
.itr-oci .oci-cstory__logo{height:52px;width:auto;max-width:210px;object-fit:contain;display:block}
.itr-oci .oci-cstory__meta b{display:block;font-family:var(--oci-fa);font-weight:500;font-size:16px;color:var(--ink-strong);line-height:1.2}
.itr-oci .oci-cstory__meta span{font-size:12.5px;color:var(--muted)}
.itr-oci .oci-cstory__head{font-family:var(--oci-fa);font-weight:300;font-size:clamp(26px,3.4vw,46px);line-height:1.1;letter-spacing:-.4px;color:var(--ink-strong);margin:0 0 20px;max-width:24ch}
.itr-oci .oci-cstory__head b{color:var(--blue);font-weight:400}
.itr-oci .oci-cstory__lead{font-size:clamp(15px,1.1vw,16.5px);line-height:1.78;color:var(--muted);margin:0;max-width:76ch}
.itr-oci .oci-cstory__outs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin:38px 0 34px;padding-top:34px}
.itr-oci .oci-cstory__out{padding:0 clamp(20px,2.4vw,40px);border-left:1px solid var(--line)}
.itr-oci .oci-cstory__out:first-child{padding-left:0;border-left:0}
.itr-oci .oci-cstory__oic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--blue);background:linear-gradient(160deg,#EAF1FF,#DCE7FF);margin:0 0 16px}
.itr-oci .oci-cstory__oic svg{width:22px;height:22px}
.itr-oci .oci-cstory__out b{display:block;font-family:var(--oci-fa);font-weight:400;font-size:clamp(18px,1.5vw,21px);color:var(--ink-strong);margin:0 0 7px;line-height:1.2}
.itr-oci .oci-cstory__out p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.itr-oci .oci-cstory__dotsnav{display:flex;gap:9px;margin-top:8px}
.itr-oci .oci-cstory__dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;transition:.25s}
.itr-oci .oci-cstory__dot.is-on{background:var(--blue);width:26px;border-radius:5px}
/* CTA */
.itr-oci .oci-cta{padding:clamp(68px,10vh,116px) 0;background:var(--bg-alt)}
.itr-oci .oci-cta__box{position:relative;overflow:hidden;border-radius:28px;padding:clamp(48px,7vw,84px);text-align:center;color:#fff;background:linear-gradient(150deg,#2563EB 0%,#3B82F6 52%,#1E40AF 100%)}
.itr-oci .oci-cta__dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.18) 1.4px,transparent 1.7px);background-size:24px 24px;-webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000,transparent 72%);mask-image:radial-gradient(120% 100% at 50% 0,#000,transparent 72%)}
.itr-oci .oci-cta__box .oci-eyb{color:#DCEAFF;justify-content:center;position:relative;z-index:1}
.itr-oci .oci-cta__box .oci-eyb::before{background:#DCEAFF}
.itr-oci .oci-cta__box .oci-h2{color:#fff;max-width:22ch;margin:0 auto 18px;position:relative;z-index:1}
.itr-oci .oci-cta__box .oci-h2 b{color:#fff}
.itr-oci .oci-cta__box p{font-size:17px;color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto 34px;line-height:1.6;position:relative;z-index:1}
.itr-oci .oci-cta__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;position:relative;z-index:1}
.itr-oci .oci-cta__box .oci-btn--pri{background:#fff;color:var(--blue-dark)}
.itr-oci .oci-cta__box .oci-btn--pri:hover{background:#EAF1FF}
.itr-oci .oci-cta__box .oci-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.itr-oci .oci-cta__box .oci-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
/* responsive */
@media(max-width:1000px){
  .itr-oci .oci-svcs__grid{grid-template-columns:1fr;gap:34px}
  .itr-oci .oci-svcs__head{position:static;max-width:760px}
  .itr-oci .oci-steps{display:flex;flex-direction:column;gap:14px}
  .itr-oci .oci-step__link{display:none}
  .itr-oci .oci-cards{grid-template-columns:1fr 1fr}
  .itr-oci .oci-cstory__outs{grid-template-columns:1fr;gap:26px;padding-top:28px;margin:30px 0 30px}
  .itr-oci .oci-cstory__out{padding:0;border-left:0}
}
@media(max-width:640px){
  .itr-oci .oci-wrap{padding:0 22px}
  .itr-oci .oci-svcrow{grid-template-columns:1fr;gap:16px;padding:16px}
  .itr-oci .oci-svcrow__media{grid-row:1;min-height:170px}
  .itr-oci .oci-svcrow__main{padding:0 4px 4px}
  .itr-oci .oci-svcrow__feat{grid-template-columns:1fr}
  .itr-oci .oci-cards{grid-template-columns:1fr}
}


/* ── Hero dot artwork on phone/tablet ─────────────────────────────────────
   Desktop masks the canvas horizontally (copy left, dots right). Below 900px the
   copy spans the full width and is vertically centred, so that mask leaves the
   dots sitting straight behind the headline. Swap to a VERTICAL mask: full
   strength top and bottom, dimmed through the middle band where the copy sits.
   The icon itself is moved into the lower band by pixIconMasks() in
   itranks-sections.js — keep the 900px threshold in sync with it. */
@media(max-width:900px){
  /* Artwork band ABOVE the copy: reserve the space with padding-top and let the
     copy hug the bottom. Without the reserved band these heroes are
     content-height on a phone (~440px) and the copy fills them, so pixIconMasks()
     finds no free space and suppresses the icon entirely. */
  .ab-hero,
  .itr-ct .ct-hero,
  .itr-svch .svh{align-items:flex-end;padding-top:300px;padding-bottom:64px}
  .itr-oci .oci-hero{padding-top:300px;padding-bottom:64px}

  .ab-hero__fx,
  .itr-ct .ct-hero__fx,
  .itr-svch .svh__fx,
  .itr-oci .oci-hero__fx{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.30) 52%,rgba(0,0,0,.22) 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.30) 52%,rgba(0,0,0,.22) 100%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
  }
}