:root{
  --bg:#161310;
  --bg-1:#1e1a14;
  --bg-2:#26201a;
  --ink:#f5efe2;
  --ink-soft:#a89a82;
  --ink-faint:#7d7160;
  --line:#4a3d2c;
  --line-soft:#362c20;
  --accent:#e69a45;
  --accent-dim:#a8631c;
  --on-accent:#170f08;
  --grid:rgba(209,143,66,0.03);
  --glow:rgba(255,177,90,0.35);
  --chamfer:16px;
  --ease:ease;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:150ms;
  --dur:200ms;
  --dur-slow:500ms;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
/* Grid/flex items default to a content-based automatic minimum size, which
   lets a long unbroken word or a nested flex child push its track wider
   than the container even inside a minmax(0,1fr) track - this resets that
   minimum on every direct child of a grid/flex row so text wraps instead
   of overflowing the page horizontally on narrow screens. */
.hero-body > *, .facts-row > .fact, .index-row > .index-cell, .detail-item > *,
.phase-line > .phase, .soo > *, .rfq > *, .two-col > *, .about > *,
.why-grid > .why-tile, .work-grid > .work-tile, .post-row > *, .foot-grid > .foot-cell,
.work-tile, .media-slot, .m-inner, .w-info, .nav-row, .nav-actions{
  min-width:0;
}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--bg);
  /* Sitewide ambient circuit texture: a small animated SVG tile repeated as a
     real background image, same layer as the existing fine grid lines - pure
     CSS, no extra DOM nodes or JS, so it costs nothing on scroll/paint beyond
     what the grid lines already cost. Tile is 288px (48*6) so it lands
     exactly on the same repeat cycle as the grid instead of drifting against
     it - reads as one coordinated system, not two overlapping patterns.
     Dimmer than the hero's own diagram on purpose (this runs behind real
     content everywhere, the hero is a deliberate focal point) - two pulses
     with different durations/delays baked into one tile so the page doesn't
     read as everything blinking in unison, without needing per-instance
     JS/DOM (which is what would actually risk scroll/paint performance). */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 288'%3E%3Cstyle%3E.t%7Bfill:none;stroke:%234a3d2c;stroke-width:1.5;opacity:.3;%7D.p%7Bfill:none;stroke:%23e69a45;stroke-width:1.5;stroke-linecap:round;filter:drop-shadow(0 0 2px %23e69a45) drop-shadow(0 0 5px rgba(255,177,90,.4));%7D.p1%7Bstroke-dasharray:14 520;animation:trv1 6.5s linear infinite;%7D.p2%7Bstroke-dasharray:12 460;animation:trv2 8.2s linear infinite;animation-delay:2.6s;%7D@keyframes trv1%7Bfrom%7Bstroke-dashoffset:534;%7Dto%7Bstroke-dashoffset:0;%7D%7D@keyframes trv2%7Bfrom%7Bstroke-dashoffset:472;%7Dto%7Bstroke-dashoffset:0;%7D%7D@media (prefers-reduced-motion: reduce)%7B.p1,.p2%7Banimation:none;opacity:.3;%7D%7D%3C/style%3E%3Cpath class='t' d='M0 60 L100 60 L100 170 L220 170'/%3E%3Cpath class='p p1' d='M0 60 L100 60 L100 170 L220 170'/%3E%3Ccircle cx='100' cy='60' r='2.5' fill='%234a3d2c'/%3E%3Ccircle cx='100' cy='170' r='2.5' fill='%234a3d2c'/%3E%3Cpath class='t' d='M288 220 L190 220 L190 100' opacity='.24'/%3E%3Cpath class='p p2' d='M288 220 L190 220 L190 100'/%3E%3Ccircle cx='190' cy='220' r='2.5' fill='%234a3d2c'/%3E%3C/svg%3E"),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 288px 288px, 48px 48px, 48px 48px;
  background-repeat: repeat, repeat, repeat;
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
}
h1{font-family:'Fraunces', Georgia, serif; font-weight:600; text-wrap:balance; margin:0;}
h2,h3,h4{font-family:'Archivo', system-ui, sans-serif; font-weight:600; text-wrap:balance; margin:0;}

/* ---------- Arabic / RTL ---------- */
[dir="rtl"] body{font-family:'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;}
[dir="rtl"] h1{font-family:'IBM Plex Sans Arabic', system-ui, sans-serif; font-weight:700; font-style:normal;}
[dir="rtl"] h1 em{font-style:normal;}
[dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4{font-family:'IBM Plex Sans Arabic', system-ui, sans-serif;}
[dir="rtl"] .mono, [dir="rtl"] .label, [dir="rtl"] .idx-code, [dir="rtl"] .idx-title, [dir="rtl"] .crumb,
[dir="rtl"] nav.links, [dir="rtl"] .mobile-nav, [dir="rtl"] .soo-tab, [dir="rtl"] .soo-tab .idx,
[dir="rtl"] .wordmark .sub, [dir="rtl"] .fact .f-label, [dir="rtl"] .fact .f-val, [dir="rtl"] .sheet-no,
[dir="rtl"] .titleblock-row, [dir="rtl"] .foot-cell h5, [dir="rtl"] .foot-meta, [dir="rtl"] .status-text,
[dir="rtl"] .w-tag, [dir="rtl"] .p-cat, [dir="rtl"] .p-date, [dir="rtl"] .fg-label, [dir="rtl"] .text-field label,
[dir="rtl"] .btn, [dir="rtl"] .menu-toggle, [dir="rtl"] .about-data .label2, [dir="rtl"] .m-label,
[dir="rtl"] .d-name, [dir="rtl"] .phase .n, [dir="rtl"] .n2{
  font-family:'IBM Plex Sans Arabic', 'IBM Plex Mono', monospace;
}
[dir="rtl"] .label, [dir="rtl"] .crumb, [dir="rtl"] nav.links, [dir="rtl"] .wordmark .sub,
[dir="rtl"] .fact .f-label, [dir="rtl"] .sheet-no, [dir="rtl"] .foot-cell h5, [dir="rtl"] .foot-meta,
[dir="rtl"] .status-text, [dir="rtl"] .w-tag, [dir="rtl"] .p-cat, [dir="rtl"] .fg-label,
[dir="rtl"] .text-field label, [dir="rtl"] .btn, [dir="rtl"] .menu-toggle{
  letter-spacing:normal;
}
a{color:inherit;}
img{max-width:100%;}
.work-tile img, article.post-body img, .media-slot img, .detail-media img{
  outline:1px solid rgba(255,255,255,.08); outline-offset:-1px;
}
.detail-media{border:1px solid var(--line); overflow:hidden; max-height:340px;}
.detail-media img{width:100%; height:100%; object-fit:cover; display:block; max-height:340px;}
.mono{font-family:'IBM Plex Mono', monospace;}
.label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.shell{max-width:1180px; margin-inline:auto; padding-inline:24px;}
.chamfer{clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));}
[dir="rtl"] .chamfer{clip-path:polygon(0 0,0 calc(100% - var(--chamfer)),var(--chamfer) 100%,100% 100%,100% var(--chamfer),calc(100% - var(--chamfer)) 0);}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:15px 26px; cursor:pointer; border:1px solid transparent;
  text-decoration:none; white-space:nowrap;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
[dir="rtl"] .btn{clip-path:polygon(0 0,0 calc(100% - 10px),10px 100%,100% 100%,100% 10px,calc(100% - 10px) 0);}
.btn:hover{opacity:.9; transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.97); opacity:.85;}
.btn-solid{box-shadow:0 0 24px -4px var(--glow);}
.btn-solid:hover{box-shadow:0 6px 26px -4px var(--glow);}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}
.btn-solid{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 100%, white 20%), var(--accent-dim)); color:var(--on-accent);}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--bg-1);}
.btn-ghost:hover{border-color:var(--accent);}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft);}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px;}
.wordmark{font-family:'Archivo', sans-serif; font-weight:700; font-size:17px; letter-spacing:-.01em; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; gap:10px;}
.wordmark img{height:30px; width:auto; display:block; flex-shrink:0;}
.wordmark b{color:var(--accent); font-weight:700;}
.wordmark .sub{font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-top:2px;}
.wordmark .txt{display:flex; flex-direction:column;}
nav.links{display:flex; gap:22px; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);}
nav.links a{text-decoration:none;}
nav.links a:hover,nav.links a[aria-current]{color:var(--accent);}
nav.links a:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.skip-link{
  position:absolute; inset-inline-start:16px; top:-48px; z-index:50;
  background:var(--accent); color:var(--on-accent); padding:10px 16px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  text-decoration:none; transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:16px;}
.nav-actions{display:flex; align-items:center; gap:14px;}
.lang-switch{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:600; letter-spacing:.06em;
  color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); padding:8px 11px;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang-switch:hover{border-color:var(--accent); color:var(--accent);}
[dir="rtl"] .lang-switch{font-family:'IBM Plex Mono', monospace; letter-spacing:.06em;}
.menu-toggle{display:none;}
@media (max-width:960px){
  nav.links{display:none;}
  .menu-toggle{display:block; background:none; border:1px solid var(--line); padding:12px 14px; min-height:40px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);}
  .menu-toggle:hover{border-color:var(--accent); color:var(--ink);}
  .nav-actions .btn-solid{display:none;}
}
.mobile-nav{border-top:1px solid var(--line-soft); background:var(--bg-1);}
.mobile-nav ul{list-style:none; margin:0; padding:14px 24px 18px; display:flex; flex-direction:column; gap:2px;}
.mobile-nav a{display:block; padding:11px 4px; font-family:'IBM Plex Mono',monospace; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); text-decoration:none;}
.mobile-nav a:hover{color:var(--accent);}

/* ---------- title-block hero ---------- */
.hero{padding-block:40px 64px; position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; top:-120px; inset-inline-end:-80px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, var(--glow) 0%, transparent 68%);
  pointer-events:none; z-index:0;
}
.hero .shell{position:relative; z-index:1;}
.sheet{border:1px solid var(--line); position:relative; background:color-mix(in srgb, var(--bg) 88%, transparent);}
.sheet::before{content:"";position:absolute; inset:6px; border:1px solid var(--line-soft); pointer-events:none;}
.titleblock-row{
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
}
.titleblock-row span{white-space:nowrap;}
.titleblock-row span b{color:var(--ink-soft); font-weight:500;}
@media (max-width:640px){
  .titleblock-row{flex-direction:column; gap:8px;}
  .titleblock-row span{white-space:normal;}
}
/* ---------- brand marquee ---------- */
.brands{border-block:1px solid var(--line-soft); background:var(--bg-1); overflow:hidden; padding-block:22px;}
.brands-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.brand-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.brand-track{display:flex; gap:10px; width:max-content; animation:k3d-marquee 60s linear infinite;}
.brand-track.reverse{animation-direction:reverse; margin-top:10px;}
.brand-track:hover{animation-play-state:paused;}
.brand-chip{
  flex-shrink:0; display:inline-flex; align-items:center; padding:9px 16px; border:1px solid var(--line);
  background:var(--bg); font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.04em; color:var(--ink-soft);
  white-space:nowrap;
}
.brand-chip.has-logo{background:#fff; border-color:var(--line); padding:6px 18px; height:44px; box-sizing:border-box;}
.brand-chip.has-logo img{display:block; height:100%; width:auto; max-width:120px; object-fit:contain;}
[dir="rtl"] .brand-chip{font-family:'IBM Plex Mono', monospace; letter-spacing:normal;}
@keyframes k3d-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
[dir="rtl"] .brand-track{animation-name:k3d-marquee-rtl;}
@keyframes k3d-marquee-rtl{from{transform:translateX(0);}to{transform:translateX(50%);}}
@media (prefers-reduced-motion: reduce){
  .brand-track{animation:none; flex-wrap:wrap; width:auto;}
  .brand-marquee{overflow-x:auto;}
  .brand-dup{display:none;}
}

/* ---------- homepage stat counters ---------- */
.stats-strip{border-block:1px solid var(--line-soft); background:color-mix(in srgb, var(--bg) 88%, transparent); padding-block:36px;}
.stats-row{display:flex; justify-content:center; gap:0;}
.stat-block{flex:0 1 260px; text-align:center; padding-inline:40px; border-inline-start:1px solid var(--line);}
.stat-block:first-child{border-inline-start:none;}
.stat-num{display:block; font-family:'IBM Plex Mono', monospace; font-size:clamp(34px,4vw,44px); font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1;}
.stat-label{display:block; margin-top:10px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
@media (max-width:640px){
  .stats-row{flex-direction:column; align-items:center; gap:22px;}
  .stat-block{border-inline-start:none; border-top:1px solid var(--line); padding:20px 24px 0;}
  .stat-block:first-child{border-top:none; padding-top:0;}
}

.hero-body{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:0;}
@media (max-width:880px){.hero-body{grid-template-columns:minmax(0,1fr);}}
.hero-copy{padding:52px clamp(22px,4vw,52px) 44px;}
.hero h1{font-size:clamp(32px,4.2vw,50px); line-height:1.08; margin-block:16px 18px; max-width:16ch;}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero .lede{max-width:44ch; color:var(--ink-soft); font-size:16.5px; margin-bottom:30px; text-wrap:pretty;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-art{border-inline-start:1px solid var(--line); background:var(--bg-1); overflow:hidden;}
.hero-art img{width:100%; height:100%; min-height:320px; object-fit:cover; display:block;}
@media (max-width:880px){.hero-art{border-inline-start:none; border-top:1px solid var(--line);}}
.facts-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line);}
@media (max-width:700px){.facts-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.fact{padding:16px 20px; border-inline-start:1px solid var(--line);}
.fact:first-child{border-inline-start:none;}
@media (max-width:700px){.fact:nth-child(2n+1){border-inline-start:none;} .fact:nth-child(n+3){border-top:1px solid var(--line);}}
.fact .f-label{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:5px;}
.fact .f-val{font-family:'Archivo', sans-serif; font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums;}

/* ---------- small page header (non-home pages) ---------- */
.page-head{border-bottom:1px solid var(--line); padding-block:36px 32px; background:color-mix(in srgb, var(--bg) 88%, transparent);}
/* This div also carries .shell's max-width:1180px + margin-inline:auto
   (meant for centering the full-width frame). A max-width:64ch used to sit
   here too - a higher-specificity, later rule - which narrowed the box down
   to reading width, and that same margin:auto then centered the
   now-narrower box instead of leaving it flush at the shell's edge, so the
   title/crumb/lede visibly drifted toward the middle of the page while the
   image and body below (plain .shell, no narrower cap) stayed flush
   left/right. Fixed by NOT narrowing this outer box at all - it now stays
   the full 1180px .shell width, flush like everything else - and relying on
   .lede's own max-width:56ch below for paragraph readability instead. */
.page-head h1{max-width:64ch; font-size:clamp(28px,3.6vw,42px); margin-block:14px 14px;}
.page-head .lede{color:var(--ink-soft); font-size:16px; max-width:56ch; text-wrap:pretty;}
.crumb{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
.crumb a{color:var(--ink-faint); text-decoration:none;}
.crumb a:hover{color:var(--accent);}

/* ---------- section shell ---------- */
section{padding-block:64px 72px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:20px; background:color-mix(in srgb, var(--bg) 88%, transparent);}
.section-head .htext{max-width:56ch;}
.section-head h2{font-size:clamp(22px,2.8vw,30px); margin-top:8px;}
.section-head p{color:var(--ink-soft); margin-top:10px; font-size:15px; text-wrap:pretty;}
.sheet-no{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-faint); white-space:nowrap;}

/* ---------- drawing index (services) ---------- */
.index-table{border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 88%, transparent);}
.index-row{
  display:grid; grid-template-columns:110px 220px minmax(0,1fr) 150px; border-top:1px solid var(--line-soft);
  position:relative; transition:background-color var(--dur) var(--ease);
}
.index-row::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:0; background:var(--accent); transition:width var(--dur) var(--ease-out);}
.index-row:hover{background:var(--bg-1);}
.index-row:hover::before{width:3px;}
.index-row:first-child{border-top:none;}
@media (max-width:900px){
  .index-table{padding:12px; display:flex; flex-direction:column; gap:12px; background:none;}
  .index-row{grid-template-columns:minmax(0,1fr); border:1px solid var(--line); background:var(--bg-1);}
  .index-row:first-child{border:1px solid var(--line);}
  .index-row:hover::before{width:0;}
}
.index-cell{padding:22px 24px; border-inline-start:1px solid var(--line-soft);}
.index-cell:first-child{border-inline-start:none;}
@media (max-width:900px){.index-cell{border-inline-start:none; border-top:1px dashed var(--line-soft); padding:16px 18px;} .index-cell:first-child{border-top:none; padding-bottom:4px;} .index-cell:nth-child(2){border-top:none; padding-top:0;}}
.idx-code{font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums;}

/* Per-service live-status mini badges next to each idx-code in the drawing
   index (see index.php's article content) - one small animated icon per
   discipline, each icon shape/motion specific to what that service actually
   does (pulse hub, audio bars, packet flow, etc.), not the same motif
   repainted seven times. Deliberately tiny (fits the 110px code column) and
   dim (color:var(--accent) inherited, low-key strokes) so it reads as a
   quiet status indicator, not a distraction from the table's real content. */
.idx-badge{display:inline-block; vertical-align:middle; margin-inline-start:7px; color:var(--accent); overflow:visible;}
.idxb-ring{fill:none; stroke:currentColor; stroke-width:1.2; transform-origin:8px 8px; animation:idxbRing 2.2s ease-out infinite;}
@keyframes idxbRing{0%{r:3; opacity:.9;}100%{r:7; opacity:0;}}
.idxb-bar{fill:currentColor; transform-box:fill-box; transform-origin:bottom; animation:idxbEq 1.1s ease-in-out infinite;}
.idxb-bar.b2{animation-delay:.15s;}
.idxb-bar.b3{animation-delay:.3s;}
@keyframes idxbEq{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}
.idxb-flow{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:5 30; filter:drop-shadow(0 0 2px currentColor); animation:idxbFlow 1.8s linear infinite;}
@keyframes idxbFlow{from{stroke-dashoffset:35;}to{stroke-dashoffset:0;}}
.idxb-rec{fill:#e05a3e; filter:drop-shadow(0 0 3px #e05a3e); animation:idxbBlink 1.5s ease-in-out infinite;}
@keyframes idxbBlink{0%,100%{opacity:1;}50%{opacity:.2;}}
.idxb-kp{fill:var(--line); animation:idxbKp 2.4s steps(1) infinite;}
.idxb-kp.k2{animation-delay:.6s;}
.idxb-kp.k3{animation-delay:1.2s;}
.idxb-kp.k4{animation-delay:1.8s;}
@keyframes idxbKp{0%,24%{fill:currentColor; filter:drop-shadow(0 0 2px currentColor);}25%,100%{fill:var(--line); filter:none;}}
.idxb-wave{fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:24; animation:idxbWave 2s linear infinite;}
@keyframes idxbWave{to{stroke-dashoffset:-24;}}
.idxb-prog{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:38; transform:rotate(-90deg); transform-origin:8px 8px; animation:idxbProg 3s ease-in-out infinite;}
@keyframes idxbProg{0%{stroke-dashoffset:38;}50%{stroke-dashoffset:4;}100%{stroke-dashoffset:38;}}
@media (prefers-reduced-motion: reduce){
  .idxb-ring,.idxb-bar,.idxb-flow,.idxb-rec,.idxb-kp,.idxb-wave,.idxb-prog{animation:none;}
  .idxb-ring{opacity:.5;} .idxb-flow{stroke-dashoffset:0; opacity:.5;} .idxb-rec{opacity:.7;}
  .idxb-kp{fill:currentColor; opacity:.5;} .idxb-prog{stroke-dashoffset:20;}
}
.idx-title{font-family:'Archivo', sans-serif; font-size:16.5px; font-weight:600;}
.idx-scope{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.idx-scope li{font-size:14px; color:var(--ink-soft); padding-inline-start:14px; position:relative; text-wrap:pretty;}
.idx-scope li::before{content:"—"; position:absolute; inset-inline-start:0; color:var(--ink-faint);}
.idx-link{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--accent); text-decoration:none; align-self:center;}
.idx-link:hover{text-decoration:underline;}
.idx-link:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

/* ---------- service detail items ---------- */
.detail-list{display:flex; flex-direction:column; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 88%, transparent);}
.detail-item{display:grid; grid-template-columns:230px minmax(0,1fr); border-top:1px solid var(--line);}
.detail-item:first-child{border-top:none;}
@media (max-width:800px){.detail-item{grid-template-columns:minmax(0,1fr);}}
.detail-item .d-name{padding:22px; border-inline-end:1px solid var(--line); font-family:'Archivo',sans-serif; font-weight:600; font-size:15.5px;}
@media (max-width:800px){.detail-item .d-name{border-inline-end:none; border-bottom:1px solid var(--line-soft);}}
.detail-item .d-desc{padding:22px; color:var(--ink-soft); font-size:14.5px; max-width:60ch;}

/* ---------- phases ---------- */
.phases{background:var(--bg-1); border-block:1px solid var(--line-soft);}
.phase-line{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:10px;}
.phase-line::before{content:""; position:absolute; top:6px; left:0; right:0; height:1px; background:var(--line);}
@media (max-width:760px){.phase-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .phase-line::before{display:none;}}
.phase{position:relative; padding-top:26px; padding-inline-end:16px;}
.phase::before{content:""; position:absolute; top:0; inset-inline-start:0; width:11px; height:11px; border:2px solid var(--accent); background:var(--bg-1); border-radius:50%;}
.phase .n{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--accent);}
.phase h4{font-size:14.5px; margin:8px 0 8px;}
.phase p{font-size:13.5px; color:var(--ink-soft); margin:0; text-wrap:pretty;}

/* ---------- sequence of operation (scenarios) ---------- */
.soo{border:1px solid var(--line); display:grid; grid-template-columns:250px minmax(0,1fr); background:color-mix(in srgb, var(--bg) 88%, transparent);}
@media (max-width:760px){.soo{grid-template-columns:minmax(0,1fr);}}
.soo-list{border-inline-end:1px solid var(--line); background:var(--bg-1);}
@media (max-width:760px){.soo-list{border-inline-end:none; border-bottom:1px solid var(--line); display:flex; overflow-x:auto;}}
.soo-tab{
  display:flex; align-items:baseline; gap:10px; width:100%; text-align:start;
  background:none; border:none; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); cursor:pointer;
  font-family:'Archivo', sans-serif; font-size:14.5px; padding:16px 20px; white-space:nowrap;
}
.soo-tab .idx{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint);}
.soo-tab:hover{color:var(--ink);}
.soo-tab[aria-selected="true"]{color:var(--ink); background:var(--bg); border-bottom-color:var(--accent);}
.soo-tab[aria-selected="true"] .idx{color:var(--accent);}
.soo-panel{padding:32px clamp(20px,4vw,44px); display:none;}
.soo-panel[data-active]{display:block; animation:k3d-panel-in .25s cubic-bezier(0.23,1,0.32,1);}
@keyframes k3d-panel-in{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:translateY(0);}}
.soo-tab:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.soo-panel .tag{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}
.soo-panel h3{font-size:20px; margin:10px 0 22px;}
.soo-steps{list-style:none; margin:0; padding:0; counter-reset:step; display:flex; flex-direction:column;}
.soo-steps li{counter-increment:step; display:flex; gap:16px; padding-block:12px; border-top:1px solid var(--line-soft); font-size:14.5px; color:var(--ink-soft);}
.soo-steps li:first-child{border-top:none;}
.soo-steps li::before{content:counter(step,decimal-leading-zero); font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--accent); flex-shrink:0; padding-top:2px;}

/* ---------- RFQ form ---------- */
.rfq{border:1px solid var(--line); padding:clamp(24px,5vw,48px); display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:44px; background:color-mix(in srgb, var(--bg) 88%, transparent);}
@media (max-width:860px){.rfq{grid-template-columns:minmax(0,1fr);}}
.rfq h2,.rfq h1{font-size:clamp(22px,2.8vw,28px);}
.rfq .lede{color:var(--ink-soft); margin-top:14px; font-size:14.5px; max-width:38ch;}
.field-group{margin-bottom:24px;}
.field-group > .fg-label{display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px;}
.pill-options{display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--line);}
.pill-option{border-inline-end:1px solid var(--line);}
.pill-option:last-child{border-inline-end:none;}
.pill-option input{position:absolute; opacity:0; pointer-events:none;}
.pill-option span{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; font-size:13px; color:var(--ink-soft); cursor:pointer;}
.pill-option input:checked + span{background:var(--accent); color:var(--on-accent);}
.pill-option input:focus-visible + span{outline:2px solid var(--accent); outline-offset:-2px;}
.text-field label{display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;}
.text-field input{width:100%; background:var(--bg-1); border:1px solid var(--line); padding:12px 14px; color:var(--ink); font-family:'IBM Plex Sans', sans-serif; font-size:14.5px; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);}
.text-field input:focus{outline:none; border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);}
.text-field input:invalid{border-color:#b3492f;}
.text-field .field-error{display:block; font-size:12px; color:#e0855f; margin-top:6px; font-family:'IBM Plex Mono', monospace;}
.hp-field{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden;}
.form-error{border:1px solid #b3492f; background:color-mix(in srgb, #b3492f 12%, var(--bg-1)); padding:14px 18px; margin-top:16px; font-size:13.5px; color:var(--ink-soft);}
.two-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px;}
@media (max-width:480px){.two-col{grid-template-columns:minmax(0,1fr);}}
.form-success h3{font-size:18px; font-family:'Archivo',sans-serif;}
.form-success p{color:var(--ink-soft); font-size:14px; margin:8px 0 0;}

/* ---------- about (data sheet) ---------- */
.about{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 88%, transparent);}
@media (max-width:860px){.about{grid-template-columns:minmax(0,1fr);}}
.about-copy{padding:36px clamp(22px,4vw,44px);}
.about-copy h2,.about-copy h1{font-size:clamp(20px,2.6vw,26px); margin-bottom:14px;}
.about-copy p{color:var(--ink-soft); font-size:15px; max-width:48ch;}
.about-data{border-inline-start:1px solid var(--line); background:var(--bg-1);}
@media (max-width:860px){.about-data{border-inline-start:none; border-top:1px solid var(--line);}}
.about-data .row{display:flex; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid var(--line-soft);}
.about-data .row:first-child{border-top:none;}
.about-data .label2{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.about-data .val{font-family:'Archivo', sans-serif; font-size:13.5px; font-weight:600; text-align:end; font-variant-numeric:tabular-nums;}

/* ---------- media placeholder ---------- */
.media-slot{
  position:relative; width:100%; height:100%; min-height:220px;
  border:1px dashed var(--line); background:
    repeating-linear-gradient(135deg, var(--bg-2) 0 2px, transparent 2px 14px);
  display:flex; align-items:center; justify-content:center;
}
.media-slot .m-inner{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:20px;}
.media-slot .m-label{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}
.media-slot .m-icon{opacity:.7;}

/* ---------- why us ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 88%, transparent);}
@media (max-width:860px){.why-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:480px){.why-grid{grid-template-columns:minmax(0,1fr);}}
.why-tile{padding:26px 22px; border-inline-start:1px solid var(--line-soft); position:relative; transition:background-color var(--dur) var(--ease);}
.why-tile::before{content:""; position:absolute; left:0; top:0; right:0; height:0; background:var(--accent); transition:height var(--dur) var(--ease-out);}
.why-tile:hover{background:var(--bg-1);}
.why-tile:hover::before{height:3px;}
.why-tile:first-child{border-inline-start:none;}
@media (max-width:860px){.why-tile:nth-child(2n+1){border-inline-start:none;} .why-tile:nth-child(n+3){border-top:1px solid var(--line-soft);}}
@media (max-width:480px){.why-tile{border-inline-start:none !important;} .why-tile:nth-child(n+2){border-top:1px solid var(--line-soft);}}
.why-tile .n2{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--accent);}
.why-tile h4{font-size:15px; margin:10px 0 8px;}
.why-tile p{font-size:13.5px; color:var(--ink-soft); margin:0; text-wrap:pretty;}

/* ---------- our work ---------- */
.work-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:760px){.work-grid{grid-template-columns:minmax(0,1fr);}}
.work-tile{background:var(--bg); display:flex; flex-direction:column; transition:transform var(--dur) var(--ease);}
.work-tile:hover{transform:translateY(-3px);}
.work-status{aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:var(--bg-1); position:relative; overflow:hidden;}
.work-status::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, var(--glow) 0%, transparent 70%);}
.status-dot{width:10px; height:10px; border-radius:50%; background:var(--accent); position:relative; z-index:1;}
.status-dot::before,.status-dot::after{content:""; position:absolute; inset:-2px; border-radius:50%; background:var(--accent); animation:k3d-live-pulse 1.8s ease-out infinite;}
.status-dot::after{animation-delay:.9s;}
.status-text{position:relative; z-index:1; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--ink-soft); text-transform:uppercase;}
@keyframes k3d-live-pulse{0%{transform:scale(1); opacity:.7;}100%{transform:scale(3.4); opacity:0;}}
.work-tile .media-slot{aspect-ratio:4/3; min-height:0; border:none;}
.work-tile .w-info{padding:16px 18px;}
.work-tile .w-tag{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.work-tile .w-title{font-family:'Archivo', sans-serif; font-size:14.5px; font-weight:600; margin-top:6px;}
.work-note{border:1px solid var(--line-soft); background:var(--bg-1); padding:16px 20px; margin-top:16px; font-size:13px; color:var(--ink-soft);}

/* ---------- blog card grid (category-blog view override) ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:860px){.blog-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:600px){.blog-grid{grid-template-columns:minmax(0,1fr);}}
.blog-card{
  display:flex; flex-direction:column; background:var(--bg); text-decoration:none; color:inherit;
  transition:transform var(--dur) var(--ease);
}
.blog-card:hover{transform:translateY(-3px);}
.blog-card-media{aspect-ratio:16/10; overflow:hidden;}
.blog-card-media img{width:100%; height:100%; object-fit:cover; display:block; outline:1px solid rgba(255,255,255,.08); outline-offset:-1px;}
.blog-card-body{padding:20px 22px; display:flex; flex-direction:column; gap:6px; flex:1;}
.blog-card-body .p-date{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em;}
.blog-card-body .p-cat{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);}
.blog-card-body .p-title{font-family:'Archivo',sans-serif; font-size:17px; font-weight:600; margin-top:4px; text-wrap:pretty;}
.blog-card-body .p-excerpt{color:var(--ink-soft); font-size:14px; margin-top:2px; text-wrap:pretty; flex:1;}
.blog-card-readmore{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); margin-top:10px;}
[dir="rtl"] .blog-card-body .p-date, [dir="rtl"] .blog-card-body .p-cat, [dir="rtl"] .blog-card-readmore{letter-spacing:normal;}

/* ---------- blog (legacy row list, kept for any remaining hand-built usage) ---------- */
.post-grid{display:flex; flex-direction:column; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 88%, transparent);}
.post-row{display:grid; grid-template-columns:140px minmax(0,1fr); border-top:1px solid var(--line); text-decoration:none; color:inherit; position:relative; transition:background-color var(--dur) var(--ease);}
.post-row::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:0; background:var(--accent); transition:width var(--dur) var(--ease-out);}
.post-row:first-child{border-top:none;}
@media (max-width:700px){.post-row{grid-template-columns:minmax(0,1fr);}}
.post-row:hover{background:var(--bg-1);}
.post-row:hover::before{width:3px;}
.post-row .p-date{padding:22px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-faint); border-inline-end:1px solid var(--line);}
@media (max-width:700px){.post-row .p-date{border-inline-end:none; border-bottom:1px solid var(--line-soft);}}
.post-row .p-body{padding:22px;}
.post-row .p-title{font-family:'Archivo',sans-serif; font-size:17px; font-weight:600;}
.post-row .p-excerpt{color:var(--ink-soft); font-size:14px; margin-top:8px; max-width:60ch; text-wrap:pretty;}
.post-row .p-cat{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); display:block; margin-bottom:6px;}

/* ---------- Joomla's native featured-image output (com_content full_image/intro_image) ---------- */
/* box-sizing:content-box here (unlike the sitewide *{box-sizing:border-box}
   reset, which .shell/.page-head rely on) made this box 48px wider overall
   than the shell-based title/body next to it, shifting its left edge ~24px
   further out and breaking the flush alignment the user asked for. Dropped
   the override so this matches .shell's own box-sizing and lines up. */
.item-image{
  float:none !important; display:block; max-width:1180px; margin:32px auto; padding-inline:24px;
}
.item-image img{width:100%; height:auto; display:block; outline:1px solid rgba(255,255,255,.08); outline-offset:-1px;}
.item-image figcaption{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint); margin-top:10px;}

/* ---------- auto table of contents (see article view override) ---------- */
.article-toc{max-width:1180px; margin:0 auto 40px; padding-inline:24px; box-sizing:content-box;}
.article-toc-inner{border:1px solid var(--line); background:var(--bg-1); padding:20px 24px; max-width:68ch;}
.article-toc-inner .label{display:block; margin-bottom:12px;}
.article-toc-inner ol{list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:8px;}
.article-toc-inner li{counter-increment:toc; font-size:14px;}
.article-toc-inner li::before{content:counter(toc, decimal-leading-zero); font-family:'IBM Plex Mono', monospace; color:var(--accent); margin-inline-end:10px; font-size:12px;}
.article-toc-inner a{color:var(--ink-soft); text-decoration:none;}
.article-toc-inner a:hover{color:var(--accent); text-decoration:underline;}

/* ---------- article layout: featured image full-width, then TOC beside body ----------
   Single column (image -> TOC -> body) up to 900px, matching how it already
   read before this was a sidebar. From 901px up, becomes a 2-column grid -
   .article-toc is a normal DOM sibling of .article-main (not nested inside
   it), so this grid can reposition it beside the body without needing any
   HTML reordering. Grid columns follow inline-start->inline-end direction
   automatically (same as the flex/grid RTL handling used everywhere else on
   this site), so the sidebar lands on the right for English and the left
   for Arabic with no [dir="rtl"] override needed. */
.article-layout{
  max-width:1180px; margin:0 auto 40px; padding-inline:24px; box-sizing:content-box;
  display:grid; grid-template-columns:1fr; gap:32px;
}
.article-layout .article-toc{max-width:none; margin:0; padding-inline:0;}
@media(min-width:901px){
  .article-layout{grid-template-columns:1fr 260px; gap:24px 48px; align-items:start;}
  .article-layout .article-toc{position:sticky; top:100px; max-height:calc(100vh - 130px); overflow-y:auto;}
}

article.post-body{max-width:68ch; margin-inline:auto; background:color-mix(in srgb, var(--bg) 88%, transparent);}
article.post-body p{font-size:16px; color:var(--ink-soft); margin:0 0 20px;}
article.post-body h2{font-size:22px; margin:36px 0 14px; color:var(--ink);}
article.post-body ul{color:var(--ink-soft); font-size:15.5px; padding-inline-start:22px; margin:0 0 20px;}
article.post-body li{margin-bottom:8px;}
article.post-body strong{color:var(--ink); font-weight:600;}

/* ---------- footer title block ---------- */
footer{border-top:1px solid var(--line); background:color-mix(in srgb, var(--bg) 88%, transparent);}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--line);}
@media (max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:480px){.foot-grid{grid-template-columns:minmax(0,1fr);}}
.foot-cell{padding:28px 26px; border-inline-start:1px solid var(--line-soft);}
.foot-cell:first-child{border-inline-start:none;}
@media (max-width:760px){.foot-cell:nth-child(2n+1){border-inline-start:none;} .foot-cell:nth-child(n+3){border-top:1px solid var(--line-soft);}}
.foot-cell h5{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;}
.foot-cell ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.foot-cell a{font-size:13.5px; color:var(--ink-soft); text-decoration:none;}
.foot-cell a:hover{color:var(--accent);}
.foot-cell a:focus-visible,.crumb a:focus-visible,.post-row:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.foot-brand p{color:var(--ink-soft); font-size:13px; max-width:30ch; margin-top:10px;}
.cert-badges{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.cert-badge{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  padding:8px 12px; background:var(--bg-1);
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft);
}
.cert-badge .cert-icon{color:var(--accent); flex-shrink:0;}
[dir="rtl"] .cert-badge{letter-spacing:normal;}
.social-links{display:flex; gap:8px; margin-top:16px;}
.social-links a{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--line); color:var(--ink-soft); text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.social-links a svg{display:block;}
.social-links a:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}
.social-links a:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.foot-meta{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-block:16px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:0.001ms !important; animation-duration:0.001ms !important;}
}

/* ---------- scroll-reveal entrance (see motion.js) ---------- */
.k3d-reveal{opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);}
.k3d-reveal.k3d-in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .k3d-reveal{opacity:1 !important; transform:none !important;}
}

/* Joomla core com_content wraps its own optional page-heading in
   div.page-header - our real page titles live inside our own markup
   (.hero h1, .page-head h1), so this core block is always redundant
   here regardless of its show_page_heading toggle. */
.page-header{display:none;}
/* Joomla's default author/category/date/hits byline block (dl.article-info) -
   same reasoning as .page-header: our own page design never calls for it. */
.article-info{display:none;}
/* Joomla's default prev/next-article navigation (span.pagination inside
   com-content-article) - same story as the other two: our own pages never
   ask for it, and it was rendering full-bleed unstyled and overflowing on
   mobile. */
nav.pagenavigation{display:none;}

/* "Pairs well with" rows on service pages: service name | description | link (no code chip) */
.index-row.pair-row{grid-template-columns:240px minmax(0,1fr) 150px;}
@media (max-width:900px){.index-row.pair-row{grid-template-columns:minmax(0,1fr);}}