/* ==========================================================================
   /industries · the industries overview, September 2026 redesign.
   Built on ind-wdp.css (tokens, sections, carousels, bands, the cosmos);
   everything new uses the inx- prefix and is scoped to main.inx.
   Service colours run through the page: SEO teal, web design warm white,
   Google Ads gold (the high street's windows, the doors, the prism, the chooser).
   Motion: transforms, opacity and dash offsets only; loops pause off screen
   (ind-wdp.js .is-live); reduced motion rests in the finished picture; no
   backdrop-filter anywhere.
   ========================================================================== */
.inx{--c-seo:#4FBFA0;--c-web:#EDE7D6;--c-ads:#F4A000}
.inx a:hover{color:inherit}
.inx .inx-gold{background:linear-gradient(100deg,#F4A000 20%,#FFD27A 45%,#F4A000 70%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:wdpSheen 7s ease-in-out infinite}
.inx-link{display:inline-block;margin-top:12px;font-weight:600;color:var(--gold)}
.inx .inx-link:hover{color:var(--gold-hover)}
@keyframes inxSpin{to{transform:rotate(360deg)}}

/* ==========================================================================
   SECTION OPENERS · the paragraph beside each heading is a stop on the
   building's lift: the floor dial over the lift doors swings to this
   section's floor (one tick per section, in page order), the shaft runs
   down beside the copy with the car waiting at the top, and the first
   sentence carries it. The rest follows in the body colour.
   ========================================================================== */
.inx-lede{position:relative;max-width:560px;padding:0 0 4px 66px}
.inx .inx-lede .wdp-lede{max-width:none;margin:0;font-size:16.5px;line-height:1.62;color:var(--text-mid)}
.inx-lede__first{display:block;margin-bottom:8px;font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.32;letter-spacing:-.012em;color:var(--text)}
.inx-lede--long .inx-lede__first{font-size:18.5px}
.inx-dial{position:absolute;left:0;top:1px;width:48px;height:30px}
.inx-dial svg{display:block;width:100%;height:100%;overflow:visible}
.inx-dial__face{fill:#101318;stroke:rgba(255,255,255,.24);stroke-width:1.2;stroke-linejoin:round}
.inx-dial__tick{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.7;stroke-linecap:round}
.inx-dial__tick.is-here{stroke:#FFC24D;filter:drop-shadow(0 0 2.5px rgba(244,160,0,.9))}
.inx-dial__needle{transform-box:view-box;transform-origin:24px 25px;transform:rotate(var(--a));transition:transform 1.6s .45s cubic-bezier(.3,1.45,.5,1)}
.inx-dial__needle path{fill:none;stroke:#FFC24D;stroke-width:1.8;stroke-linecap:round}
.inx-dial__hub{fill:#FFC24D}
html.el8-js [data-rise]:not(.is-in) .inx-dial__needle{transform:rotate(-90deg)}
/* the shaft: two guide rails with a floor mark every so often, fading as it goes down */
.inx-lede::before{content:"";position:absolute;left:18px;top:40px;bottom:0;width:12px;box-sizing:border-box;pointer-events:none;
  border-left:1.5px solid rgba(255,255,255,.16);border-right:1.5px solid rgba(255,255,255,.16);
  background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(255,255,255,.12) 22px 23.5px);
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.inx-lede::after{content:"";position:absolute;left:21.5px;top:45px;width:5px;height:16px;border-radius:2px;pointer-events:none;
  background:linear-gradient(180deg,#FFD27A,#F4A000);box-shadow:0 0 10px rgba(244,160,0,.55)}
.inx-lede .inx-link{margin-top:14px}

/* ==========================================================================
   HERO · the high street: a terrace of shopfronts on each side of one road,
   all the same height and width (no ranking), in the Rows order left to
   right. Each shop: a parapet, its sign, a striped awning in a quiet
   per-industry colour, three lit windows (its pages, labelled on the glass)
   and a door. The Elev8d banner hangs over the road between two lamp posts.
   ========================================================================== */
@media (min-width:1181px){.inx-hero__cols{grid-template-columns:minmax(0,1fr) minmax(0,.98fr)}}
.inx-hero__title{max-width:640px}
.inx-hero .wdp-hero__copy{position:relative;z-index:2}
.inx-street{--win-h:74px;--sign-h:38px;--road-h:96px;--door:14px;--tag:10px;position:relative;isolation:isolate;width:100%;max-width:600px;justify-self:end;padding-top:30px;
  filter:drop-shadow(0 50px 60px rgba(0,0,0,.5))}
html.el8-js .inx-street{animation:wdpUp 1.2s .2s var(--ease) both}
/* the city behind the far side */
.inx-street__city{position:absolute;left:-70px;right:-110px;top:-80px;height:300px;width:calc(100% + 180px);z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent),linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent),linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-composite:intersect}
.inx-street__city .b{fill:#0B0D11;stroke:rgba(255,255,255,.05);stroke-width:1}
.inx-street__city .w{fill:rgba(255,210,122,.3)}
.inx-street__city .w--blink{animation:inxFlick 19s 5s infinite}
@keyframes inxFlick{0%,86%,100%{opacity:1}88%{opacity:.35}90%{opacity:1}92%{opacity:.4}96%{opacity:1}}

/* a terrace: shops share their party walls, a pavement runs along their feet */
.inx-shops{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.inx-shop{position:relative;display:flex;flex-direction:column;min-width:0;padding:10px 0 0;
  background:linear-gradient(180deg,#171A20,#101217);box-shadow:inset 1px 0 0 rgba(255,255,255,.07),inset -3px 0 0 rgba(0,0,0,.35);
  border-bottom:4px solid #262A31}
.inx-shop:first-child{border-top-left-radius:3px}
.inx-shop:last-child{border-top-right-radius:3px}
/* the parapet: a cornice, and a small pediment or name panel over each shop (they vary; the heights never do) */
.inx-shop::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(180deg,#2B2F37,#1B1E24);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.inx-shop::after{content:"";position:absolute;left:calc(50% - 22px);top:-9px;width:44px;height:9px;background:#1C1F25;clip-path:polygon(0 100%,50% 0,100% 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.inx-shop:nth-child(2n)::after{left:calc(50% - 16px);width:32px;height:7px;top:-7px;clip-path:none;border-radius:3px 3px 0 0}
.inx-shop:nth-child(3n)::after{left:calc(50% - 26px);width:52px;height:6px;top:-6px;clip-path:polygon(0 100%,12% 0,88% 0,100% 100%)}
/* upstairs: the first floor's sash windows, mostly dark (someone upstairs has the television on) */
.inx-shop__upper{display:flex;justify-content:center;gap:14%;height:36px;padding:5px 0 7px}
.inx-shop__upper i{width:15%;border-radius:9px 9px 1px 1px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#1C2029,#111318);
  box-shadow:0 3px 0 -1px #2A2E36}
.inx-shop:nth-child(2n) .inx-shop__upper i{border-radius:1px}
.inx-shop:nth-child(3n) .inx-shop__upper i:nth-child(2){display:none}
.inx-shops--far .inx-shop:nth-child(3) .inx-shop__upper i:nth-child(3),.inx-shops--near .inx-shop:nth-child(2) .inx-shop__upper i:nth-child(1){
  background:linear-gradient(180deg,rgba(120,150,220,.3),rgba(90,120,200,.12));animation:inxTele 9s 3s infinite}
@keyframes inxTele{0%,100%{opacity:1}20%{opacity:.7}23%{opacity:1}51%{opacity:.8}70%{opacity:.95}}
/* the sign: a dark fascia, the name in warm lit letters (its full name joins on hover/focus) */
.inx-shop__sign{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sign-h);margin:0 6px;padding:0 5px;
  border-radius:2px;background:linear-gradient(180deg,#0B0C10,#07080A);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.5);
  text-align:center;overflow:hidden;transition:box-shadow .4s}
.inx-shop__first{display:block;max-width:100%;font-family:var(--font-head);font-weight:700;font-size:12.5px;line-height:1.1;letter-spacing:-.005em;color:#F3E6C8;
  text-shadow:0 0 6px rgba(255,200,110,.45);transition:color .3s,text-shadow .3s}
.inx-shop__rest{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.inx-shop__awning{position:relative;display:block;height:14px;margin:1px 2px 0;
  background:repeating-linear-gradient(90deg,var(--aw) 0 9px,color-mix(in srgb,var(--aw) 45%,#07080A) 9px 18px);
  -webkit-mask:linear-gradient(#000,#000) 0 0/100% 9px no-repeat,radial-gradient(circle 4.6px at 50% 0,#000 97%,transparent) 0 9px/9px 5px repeat-x;
  mask:linear-gradient(#000,#000) 0 0/100% 9px no-repeat,radial-gradient(circle 4.6px at 50% 0,#000 97%,transparent) 0 9px/9px 5px repeat-x;
  filter:brightness(.82) saturate(.85);transition:filter .5s}
.inx-shop__front{display:flex;gap:4px;align-items:flex-end;padding:5px 7px 0}
/* a window per page, lit in its service's colour, its name on the glass */
.inx-win{--lit-a:rgba(79,191,160,.34);--lit-b:rgba(79,191,160,.09);--lit-line:rgba(79,191,160,.45);--lit-ink:#C9F3E6;--lit-glow:rgba(79,191,160,.32);
  position:relative;flex:1 1 0;min-width:0;height:var(--win-h);margin-bottom:6px;border-radius:2px 2px 0 0;border:1px solid var(--lit-line);
  background:linear-gradient(180deg,var(--lit-a),var(--lit-b));box-shadow:inset 0 0 18px var(--lit-glow),0 0 22px -8px var(--lit-glow),0 6px 0 -1px #0C0D11;
  transition:filter .3s,transform .3s var(--ease)}
.inx-win--web-design{--lit-a:rgba(237,231,214,.26);--lit-b:rgba(237,231,214,.06);--lit-line:rgba(237,231,214,.36);--lit-ink:#FBF8EF;--lit-glow:rgba(237,231,214,.22)}
.inx-win--google-ads{--lit-a:rgba(255,190,70,.36);--lit-b:rgba(244,160,0,.1);--lit-line:rgba(244,160,0,.5);--lit-ink:#FFE3A6;--lit-glow:rgba(244,160,0,.34)}
/* a transom over each window and a glint across the glass */
.inx-win::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 24%,rgba(10,12,16,.75) 24% calc(24% + 1.5px),transparent calc(24% + 1.5px))}
.inx-win::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12) 0 16%,transparent 16% 100%)}
.inx-win__tag{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:1;padding:2px 3px;border-radius:2px;background:rgba(8,9,12,.78);
  font:700 var(--tag)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;white-space:nowrap;color:var(--lit-ink)}
.inx .inx-win:hover,.inx .inx-win:focus-visible{transform:translateY(-1px);filter:brightness(1.3)}
.inx-shop__door{position:relative;flex:0 0 var(--door);align-self:stretch;margin-top:8px;border-radius:2px 2px 0 0;border:1px solid rgba(255,255,255,.12);border-bottom:0;
  background:linear-gradient(180deg,rgba(255,214,140,.26),rgba(255,214,140,.08) 42%,#15171C 42%);transition:filter .5s}
.inx-shop__door::after{content:"";position:absolute;right:2px;top:62%;width:2px;height:2px;border-radius:50%;background:rgba(255,220,160,.7)}
/* a few windows where someone keeps flicking the light */
.inx-shops--far .inx-shop:nth-child(2) .inx-win:nth-child(2){animation:inxFlick 13s 4s infinite}
.inx-shops--near .inx-shop:nth-child(1) .inx-win:nth-child(3){animation:inxFlick 17s 9s infinite}
.inx-shops--near .inx-shop:nth-child(4) .inx-win:nth-child(1){animation:inxFlick 21s 13s infinite}
/* the shop you point at (or focus): its sign glows gold, the full name joins it, its light spills onto the pavement */
.inx-shop:is(:hover,:focus-within) .inx-shop__sign{box-shadow:inset 0 0 0 1px rgba(244,160,0,.5),0 0 16px -4px rgba(244,160,0,.45)}
.inx-shop:is(:hover,:focus-within) .inx-shop__first{color:#FFE3A6;text-shadow:0 0 8px rgba(255,190,80,.7)}
.inx-shop:is(:hover,:focus-within) .inx-shop__rest{position:static;display:block;width:auto;max-width:100%;height:auto;margin-top:2px;overflow:hidden;clip-path:none;
  font-size:10px;font-weight:600;line-height:1.15;color:rgba(243,230,200,.72);text-overflow:ellipsis}
.inx-shop:is(:hover,:focus-within) .inx-shop__awning{filter:brightness(1.12) saturate(1)}
.inx-shop:is(:hover,:focus-within) .inx-win{filter:brightness(1.22)}
.inx .inx-shop__sign:hover,.inx .inx-shop__sign:focus-visible{color:inherit}

/* the road between the two sides: kerbs, a broken centre line, tram tracks, the Elev8d banner on a wire between two lamp posts,
   headlights passing one way and tail lights the other */
.inx-street__road{position:relative;display:block;height:var(--road-h);overflow:hidden;
  background:
    linear-gradient(180deg,transparent 0 calc(100% - 22px),rgba(190,196,206,.2) calc(100% - 22px) calc(100% - 21px),transparent calc(100% - 21px) calc(100% - 15px),rgba(190,196,206,.2) calc(100% - 15px) calc(100% - 14px),transparent calc(100% - 14px)),
    linear-gradient(180deg,#0D0F13 0 5px,#08090C 5px calc(100% - 5px),#0D0F13 calc(100% - 5px))}
.inx-street__road::before{content:"";position:absolute;left:0;right:0;bottom:calc(5px + (var(--road-h) - 10px) * .28);height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,236,190,.28) 0 16px,transparent 16px 34px)}
.inx-street__road::after{content:"";position:absolute;left:0;right:0;top:0;height:30px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,200,110,.1),transparent)}
.inx-street__post{position:absolute;top:8px;bottom:0;width:3px;background:linear-gradient(180deg,#80858E,#33363C);z-index:1}
.inx-street__post--l{left:14px}
.inx-street__post--r{right:14px}
.inx-street__post::before{content:"";position:absolute;top:-4px;width:12px;height:5px;border-radius:3px;background:#FFE6B8;box-shadow:0 0 8px 2px rgba(255,210,130,.55)}
.inx-street__post--l::before{left:0}
.inx-street__post--r::before{right:0}
.inx-street__post::after{content:"";position:absolute;top:0;width:70px;height:70px;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0,rgba(255,214,140,.34),transparent 72%)}
.inx-street__post--l::after{left:-25px}
.inx-street__post--r::after{right:-25px}
.inx-street__wire{position:absolute;left:18px;right:18px;top:7px;width:calc(100% - 36px);height:14px;overflow:visible;z-index:1}
.inx-street__wire path{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1;vector-effect:non-scaling-stroke}
.inx-street__banner{position:absolute;left:50%;top:14px;z-index:2;display:block;padding:6px 12px;transform:translateX(-50%);border-radius:3px;
  background:linear-gradient(180deg,#14161B,#0C0D11);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 26px -6px rgba(244,160,0,.35)}
.inx-street__banner::before,.inx-street__banner::after{content:"";position:absolute;top:-4px;width:1px;height:4px;background:rgba(255,255,255,.35)}
.inx-street__banner::before{left:14px}
.inx-street__banner::after{right:14px}
.inx-street__logo{display:block;height:26px;width:auto;max-width:none;
  filter:drop-shadow(0 0 .5px rgba(255,244,222,.5)) drop-shadow(0 0 5px rgba(255,214,140,.32)) drop-shadow(0 0 14px rgba(244,160,0,.2))}
html.el8-js .inx-street__logo{animation:inxSignOn 1.3s 1s steps(1) both}
@keyframes inxSignOn{0%{opacity:.25;filter:none}14%{opacity:1;filter:drop-shadow(0 0 .5px rgba(255,244,222,.5)) drop-shadow(0 0 5px rgba(255,214,140,.32)) drop-shadow(0 0 14px rgba(244,160,0,.2))}
  20%{opacity:.35;filter:none}30%,100%{opacity:1;filter:drop-shadow(0 0 .5px rgba(255,244,222,.5)) drop-shadow(0 0 5px rgba(255,214,140,.32)) drop-shadow(0 0 14px rgba(244,160,0,.2))}}
/* traffic: each car is a road-wide strip carrying its lights, slid along by its own width */
.inx-street__car{position:absolute;left:0;width:100%;height:5px;bottom:calc(5px + (var(--road-h) - 10px) * .08);pointer-events:none;
  animation:inxCarL 16s 2.5s linear infinite;opacity:0}
.inx-street__car i{position:absolute;left:0;top:0;width:26px;height:5px;border-radius:3px;
  background:radial-gradient(closest-side,rgba(255,244,214,.95),rgba(255,214,140,0));box-shadow:24px 0 0 -1px rgba(255,120,100,.5)}
.inx-street__car--back{bottom:calc(5px + (var(--road-h) - 10px) * .4);animation:inxCarR 21s 9s linear infinite}
.inx-street__car--back i{width:18px;height:4px;background:radial-gradient(closest-side,rgba(255,110,90,.8),rgba(255,110,90,0));box-shadow:none}
@keyframes inxCarL{0%{opacity:0;transform:translateX(100%)}3%{opacity:.9}24%{opacity:.9}27%{opacity:0;transform:translateX(-8%)}100%{opacity:0;transform:translateX(-8%)}}
@keyframes inxCarR{0%{opacity:0;transform:translateX(-5%)}3%{opacity:.8}28%{opacity:.8}31%{opacity:0;transform:translateX(100%)}100%{opacity:0;transform:translateX(100%)}}

/* the first light-up (ov-industries.js): the street starts dark and the shops light one by one; a shop you point at
   lights straight away */
.inx-street.is-dark .inx-shop:not(.is-lit):not(:hover):not(:focus-within) .inx-win{--lit-a:#0F1217;--lit-b:#0C0E12;--lit-line:rgba(255,255,255,.08);--lit-ink:rgba(255,255,255,.3);--lit-glow:transparent}
.inx-street.is-dark .inx-shop:not(.is-lit):not(:hover):not(:focus-within) .inx-shop__first{color:rgba(243,230,200,.3);text-shadow:none}
.inx-street.is-dark .inx-shop:not(.is-lit):not(:hover):not(:focus-within) :is(.inx-shop__awning,.inx-shop__door){filter:brightness(.4) saturate(.6)}
.inx-street.is-dark .inx-shop.is-lit .inx-win{animation:inxOn .7s steps(1) both}
@keyframes inxOn{0%{opacity:.35}18%{opacity:1}30%{opacity:.45}46%,100%{opacity:1}}

@media (max-width:1180px){
  .inx-street{justify-self:start;max-width:680px}
}
/* wider screens: the run is just the street's own flow (far side, road, near side); the phone-only parts are hidden */
.inx-street__run{display:contents}
.inx-street__banner--top,.inx-street__scrub{display:none}
/* phones: one street you swipe along. The eight shops stand in one row (about two and a quarter in view), the road runs
   under the whole row with a lamp post at each end, and the Elev8d sign hangs above; a thin bar shows where you are */
@media (max-width:700px){
  .inx-street{--win-h:52px;--sign-h:34px;--road-h:50px;--door:12px;--shop-w:max(128px,calc((100vw - 40px) / 2.25));max-width:none;justify-self:stretch;padding-top:0;filter:none}
  .inx-street__city{left:-40px;right:-40px;width:calc(100% + 80px);top:-30px;height:230px}
  .inx-street__banner--top{display:block;position:relative;left:auto;top:auto;width:max-content;margin:0 auto 22px;transform:none}
  .inx-street__banner--top::before,.inx-street__banner--top::after{top:-9px;height:9px}
  .inx-street__logo{height:21px}
  .inx-street__run{display:grid;grid-template-columns:max-content max-content;grid-template-rows:auto var(--road-h);margin:0 calc(-1 * var(--gutter,20px));
    padding:10px var(--gutter,20px) 0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scroll-padding-inline:var(--gutter,20px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .inx-street__run::-webkit-scrollbar{display:none}
  .inx-shops{grid-template-columns:repeat(4,var(--shop-w))}
  .inx-shops--far{grid-area:1 / 1}
  .inx-shops--near{grid-area:1 / 2}
  .inx-shop{scroll-snap-align:start}
  .inx-shops--near .inx-shop:first-child{border-top-left-radius:0}
  .inx-shops--far .inx-shop:last-child{border-top-right-radius:0}
  .inx-street__road{grid-area:2 / 1 / 3 / 3}
  .inx-street__road .inx-street__banner,.inx-street__wire,.inx-street__road::before{display:none}
  .inx-shop__first{font-size:12.5px}
  .inx-win__tag{bottom:5px}
  .inx-street__scrub{display:block;position:relative;width:64px;height:3px;margin:14px auto 0;border-radius:3px;background:rgba(255,255,255,.12)}
  .inx-street__scrub i{position:absolute;top:0;left:calc(var(--p,0) * (100% - 24px));width:24px;height:100%;border-radius:3px;background:var(--gold)}
}
@media (max-width:360px){
  .inx-street{--door:0px;--tag:9.5px}
  .inx-shop__door{display:none}
  .inx-shop__first{font-size:11.5px}
  .inx-shop__front{padding:5px 6px 0}
}
@media (prefers-reduced-motion:reduce){
  .inx-street,.inx-street__logo,.inx-street__city .w,.inx-win,.inx-street__car,.inx-shop__upper i{animation:none!important}
  .inx-street__car{opacity:0}
}

/* ==========================================================================
   THE DIRECTORY · a card per industry, three doors each
   ========================================================================== */
.inx-dir{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.inx-card{position:relative;display:flex;flex-direction:column;padding:12px 12px 14px;border-radius:22px;border:1px solid var(--edge);
  background:linear-gradient(180deg,#111419,#0B0D11);transition:border-color .35s,transform .5s var(--ease),box-shadow .5s;scroll-margin-top:120px}
.inx-card:hover,.inx-card:target{border-color:var(--gold-line);box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.inx-card:target{box-shadow:0 0 0 1px var(--gold-line),0 30px 60px -34px rgba(0,0,0,.9)}
.inx-card__scene{position:relative;aspect-ratio:280/132;border-radius:14px;background:
  radial-gradient(80% 90% at 70% 10%,rgba(244,160,0,.07),transparent 60%),#0A0C10;border:1px solid rgba(255,255,255,.06);overflow:hidden}
.inx-card__scene svg{position:absolute;inset:0;width:100%;height:100%}
.inx-card__lvl{position:absolute;left:9px;top:9px;padding:5px 7px 4px;border-radius:6px;border:1px solid var(--gold-line);background:rgba(10,12,16,.9);
  font:700 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--gold)}
.inx-card__t{margin:18px 8px 6px;font-family:var(--font-head);font-weight:800;font-size:21px;line-height:1.12;letter-spacing:-.022em;text-wrap:balance}
.inx-card__d{margin:0 8px 18px;font-size:14.5px;line-height:1.5;color:var(--text-mid)}
.inx-doors{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:6px}
/* wider screens: every card shares its row's lines (titles, leads and doors line up across the row) */
@media (min-width:701px){
  .inx-dir{row-gap:0}
  .inx-card{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;margin-bottom:18px}
  .inx-doors{display:contents}
  .inx-doors > li{display:flex}
  .inx-doors > li + li{margin-top:6px}
  .inx-doors > li > .inx-door{flex:1}
}
.inx-door{display:grid;grid-template-columns:32px minmax(0,1fr) 14px;gap:11px;align-items:center;min-height:58px;padding:8px 12px 8px 9px;border-radius:13px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);color:var(--text);transition:border-color .3s,background .3s}
.inx-door--seo{--c:var(--c-seo)}
.inx-door--web-design{--c:var(--c-web)}
.inx-door--google-ads{--c:var(--c-ads)}
.inx-door__ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--c);
  background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.inx-door__ic svg{width:17px;height:17px}
.inx-door__txt{min-width:0}
.inx-door__txt b{display:block;font-size:13.5px;font-weight:700;line-height:1.2;color:var(--text)}
.inx-door__txt em{display:block;margin-top:2px;font-style:normal;font-size:12.5px;line-height:1.35;color:var(--text-dim)}
.inx-door__go{color:var(--text-dim);transition:transform .3s var(--ease),color .3s}
.inx .inx-door:hover{color:var(--text);border-color:color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 6%,transparent)}
.inx-door:hover .inx-door__go{transform:translateX(3px);color:var(--c)}
.inx-door:hover .inx-door__txt em{color:var(--text-soft)}

/* the tension that shapes the industry (the next section's string), as a small reading on the card */
.inx-card__ten{display:inline-flex;align-items:center;gap:8px;justify-self:start;align-self:start;margin:0 8px 16px;padding:5px 11px 5px 9px;border-radius:100px;
  border:1px solid var(--gold-line);background:rgba(244,160,0,.07);font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#FFD27A}
.inx-card__ten svg{width:20px;height:10px;flex:0 0 auto;overflow:visible}
.inx-card__ten path{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round}

/* ---- the lobby (with JS, wider than a phone): the floor indicator over the lift doors lists the floors; the one you pick
   is the only floor on show, its doors opening on its picture. Without JS the indicator stays away and every card shows ---- */
.inx-board{display:none}
.inx-card__scene::before,.inx-card__scene::after{content:"";position:absolute;top:0;bottom:0;width:50.5%;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(90deg,#1A1E25,#272C35 55%,#1C2027);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.inx-card__scene::before{left:0;transform:translateX(-101%);border-right:1px solid rgba(255,255,255,.2)}
.inx-card__scene::after{right:0;transform:translateX(101%);border-left:1px solid rgba(0,0,0,.6)}
.inx-card.is-arriving .inx-card__scene::before{animation:inxDoorL 1.1s var(--ease) both}
.inx-card.is-arriving .inx-card__scene::after{animation:inxDoorR 1.1s var(--ease) both}
@keyframes inxDoorL{0%,30%{transform:none}100%{transform:translateX(-101%)}}
@keyframes inxDoorR{0%,30%{transform:none}100%{transform:translateX(101%)}}
.inx-card__lvl{z-index:3}
@media (min-width:701px){
  html.el8-js .inx-lobby{display:grid;gap:14px}
  html.el8-js .inx-board{display:block}
  html.el8-js .inx-lobby .inx-dir{display:block;min-height:var(--dir-min,0px)}
  html.el8-js .inx-lobby .inx-card{height:100%;min-height:inherit;margin:0;grid-row:auto;border-radius:26px}
  html.el8-js .inx-lobby .inx-card:not(.is-on){display:none}
  html.el8-js .inx-lobby .inx-doors{display:grid;gap:8px}
  html.el8-js .inx-lobby .inx-doors > li{display:block;margin:0}
  html.el8-js .inx-lobby .inx-door{min-height:64px;grid-template-columns:38px minmax(0,1fr) 16px;gap:13px;padding:9px 16px 9px 11px;border-radius:15px}
  html.el8-js .inx-lobby .inx-door__ic{width:38px;height:38px;border-radius:11px}
  html.el8-js .inx-lobby .inx-door__ic svg{width:19px;height:19px}
  html.el8-js .inx-lobby .inx-door__txt b{font-size:14.5px}
  html.el8-js .inx-lobby .inx-door__txt em{margin-top:3px;font-size:13.5px}
}
/* the indicator: a lamp per floor (its number glows when the car is there), the floor's three rooms lit in their service
   colours, and its name; a bar under it slides to the floor on show */
.inx-board__floors{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:6px;border-radius:20px;border:1px solid var(--edge);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),linear-gradient(180deg,#14171C,#0C0E12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.inx-board__floor{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:9px 8px;min-width:0;
  padding:12px 12px 13px;border:0;border-radius:14px;background:none;color:var(--text-soft);font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .3s,color .3s}
.inx-board__floor + .inx-board__floor::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:rgba(255,255,255,.06)}
.inx-board__no{padding:5px 7px 4px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#0A0B0E;
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;color:var(--text-dim);transition:color .25s,border-color .25s,text-shadow .25s,box-shadow .25s}
.inx-board__t{grid-column:1 / -1;min-width:0;font-family:var(--font-head);font-weight:700;font-size:14.5px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.inx-board__lit{justify-self:end;display:flex;gap:3px}
.inx-board__lit i{width:6px;height:10px;border-radius:1.5px;background:var(--c);opacity:.25;transition:opacity .3s,box-shadow .3s}
.inx-board__lit i:nth-child(1){--c:var(--c-seo)}
.inx-board__lit i:nth-child(2){--c:var(--c-web)}
.inx-board__lit i:nth-child(3){--c:var(--c-ads)}
.inx-board__floor:hover{color:var(--text);background:rgba(255,255,255,.03)}
.inx-board__floor:hover .inx-board__lit i{opacity:.6}
.inx-board__floor.is-on,.inx-board__floor.is-pass{color:var(--text)}
.inx-board__floor.is-on{background:linear-gradient(180deg,rgba(244,160,0,.13),rgba(244,160,0,.03))}
.inx-board__floor.is-on .inx-board__no,.inx-board__floor.is-pass .inx-board__no{color:#FFC24D;border-color:rgba(244,160,0,.55);text-shadow:0 0 8px rgba(244,160,0,.8);
  box-shadow:0 0 14px -4px rgba(244,160,0,.6)}
.inx-board__floor.is-on .inx-board__lit i{opacity:1;box-shadow:0 0 8px -1px var(--c)}
.inx-board__floor:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.inx-board__lamp{position:absolute;left:6px;bottom:4px;width:calc((100% - 12px) / var(--n));height:3px;padding:0 18px;box-sizing:border-box;pointer-events:none;
  background:linear-gradient(90deg,transparent 18px,#FFC24D 18px calc(100% - 18px),transparent calc(100% - 18px));filter:drop-shadow(0 0 5px rgba(244,160,0,.8));
  transform:translateX(calc(var(--at) * 100%));transition:transform .8s cubic-bezier(.65,0,.35,1)}
/* the floor on show: its picture through the open lift doors on the left; its name, line, tension and three doors on the right */
@media (min-width:1081px){
  html.el8-js .inx-lobby .inx-card{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);column-gap:34px;
    padding:14px 24px 14px 14px}
  html.el8-js .inx-lobby .inx-card__scene{grid-column:1;grid-row:1 / 5;align-self:stretch;aspect-ratio:auto;min-height:300px;border-radius:17px}
  html.el8-js .inx-lobby .inx-card__t{grid-column:2;margin:20px 0 8px;font-size:clamp(26px,2.3vw,32px);line-height:1.06;letter-spacing:-.028em}
  html.el8-js .inx-lobby .inx-card__d{grid-column:2;margin:0 0 14px;font-size:16px;line-height:1.5}
  html.el8-js .inx-lobby .inx-card__ten{grid-column:2;margin:0 0 20px}
  html.el8-js .inx-lobby .inx-doors{grid-column:2;align-self:end;margin:0 0 6px}
}
@media (min-width:701px) and (max-width:1080px){
  html.el8-js .inx-board__floors{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:4px}
  html.el8-js .inx-board__floor:nth-child(4n + 1)::before{display:none}
  html.el8-js .inx-board__lamp{display:none}
  html.el8-js .inx-lobby .inx-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);column-gap:22px;padding:12px 16px 12px 12px}
  html.el8-js .inx-lobby .inx-card__scene{grid-column:1;grid-row:1 / 5;aspect-ratio:auto;min-height:240px}
  html.el8-js .inx-lobby .inx-card__t{grid-column:2;margin:12px 0 6px;font-size:23px}
  html.el8-js .inx-lobby .inx-card__d{grid-column:2;margin:0 0 12px}
  html.el8-js .inx-lobby .inx-card__ten{grid-column:2;margin:0 0 14px}
  html.el8-js .inx-lobby .inx-doors{grid-column:2;align-self:end}
  html.el8-js .inx-lobby .inx-door{min-height:58px}
}

/* ---- the eight pictures ---- */
.inx-sc{display:block;overflow:visible}
.inx-sc text{font-family:var(--font-head);font-weight:800}
.inx-s-panel{fill:#161A21;stroke:rgba(255,255,255,.12);stroke-width:1}
.inx-s-dim{fill:#1D2129}
.inx-s-bar{fill:rgba(255,255,255,.13)}
.inx-s-bar--hi{fill:rgba(255,255,255,.3)}
.inx-s-gold{fill:var(--gold)}
.inx-s-ink{fill:#0A0C10}
.inx-s-tealsoft{fill:rgba(79,191,160,.14)}
.inx-s-teal-s{fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inx-s-ground{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.2}
.inx-s-body{fill:#1B1F27;stroke:rgba(255,255,255,.24);stroke-width:1.1;stroke-linejoin:round}
/* trades */
.inx-sc--trades .inx-s-ground{stroke-dasharray:10 8;animation:inxRoad 1.1s linear infinite}
@keyframes inxRoad{to{stroke-dashoffset:18}}
.inx-s-radius{fill:none;stroke:var(--teal-line);stroke-width:1.3;stroke-dasharray:3 5;transform-box:fill-box;transform-origin:center;animation:inxSpin 36s linear infinite}
.inx-s-van{animation:inxIdle .5s ease-in-out infinite alternate}
@keyframes inxIdle{to{transform:translateY(-.7px)}}
.inx-s-ladder{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.4}
.inx-s-glass{fill:rgba(79,191,160,.24)}
.inx-s-wheel circle{fill:#0A0C10;stroke:rgba(255,255,255,.38);stroke-width:1.4}
.inx-s-wheel path{stroke:rgba(255,255,255,.3);stroke-width:1.2}
.inx-s-wheel{transform-box:fill-box;transform-origin:center;animation:inxSpin .9s linear infinite}
.inx-s-ring{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;animation:inxRing 1.5s ease-in-out infinite}
.inx-s-ring--2{animation-delay:.18s}
@keyframes inxRing{0%,100%{opacity:.18}40%{opacity:1}}
/* professional services */
.inx-s-pick{fill:rgba(244,160,0,.1);stroke:var(--gold-line);stroke-width:1;animation:inxShortlist 8s var(--ease) infinite}
@keyframes inxShortlist{0%,14%{transform:translateY(-25px)}24%,40%{transform:translateY(25px)}52%,100%{transform:translateY(0)}}
.inx-s-box{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.2}
.inx-s-box.is-on{fill:var(--gold);stroke:var(--gold);animation:inxBoxOn 8s infinite}
@keyframes inxBoxOn{0%,52%{fill:transparent;stroke:rgba(255,255,255,.26)}58%,100%{fill:var(--gold);stroke:var(--gold)}}
.inx-s-tick{fill:none;stroke:#111;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:inxTick 8s infinite}
@keyframes inxTick{0%,56%{stroke-dashoffset:1}64%,100%{stroke-dashoffset:0}}
.inx-s-lens circle,.inx-s-lens path{fill:none;stroke:rgba(255,255,255,.34);stroke-width:2;stroke-linecap:round}
.inx-s-lens circle{fill:rgba(10,12,16,.7)}
/* healthcare */
.inx-s-slot{fill:#1D2129}
.inx-s-slot.is-taken{fill:rgba(255,255,255,.075)}
.inx-s-slot.is-booked{fill:var(--teal);animation:inxBreathe 3.2s ease-in-out infinite}
@keyframes inxBreathe{50%{opacity:.7}}
.inx-s-booktick{fill:none;stroke:#0A1512;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.inx-s-ecg{fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0;animation:inxEcg 2.6s linear infinite}
@keyframes inxEcg{0%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
.inx-s-cross{fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linecap:round}
/* ecommerce */
.inx-s-bag{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.inx-s-price{font-size:16px;fill:var(--text)}
.inx-s-add{fill:var(--gold)}
.inx-s-hop{fill:#FFE3A6;opacity:0;animation:inxHop 3.4s var(--ease) infinite}
@keyframes inxHop{0%,8%{opacity:0;transform:translate(0,0)}14%{opacity:1}46%{transform:translate(62px,-66px)}72%{opacity:1;transform:translate(121px,-44px) scale(.7)}78%,100%{opacity:0;transform:translate(121px,-44px) scale(.4)}}
.inx-s-cart path,.inx-s-cart circle{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.inx-s-count circle{fill:var(--gold)}
.inx-s-count text{font-size:12.5px;fill:#111;text-anchor:middle}
.inx-s-count{transform-box:fill-box;transform-origin:center;animation:inxBump 3.4s infinite}
@keyframes inxBump{0%,74%,100%{transform:scale(1)}80%{transform:scale(1.28)}86%{transform:scale(1)}}
/* hospitality */
.inx-s-plate{fill:#20242C;stroke:rgba(255,255,255,.15);stroke-width:1}
.inx-s-plate--in{fill:none;stroke:rgba(255,255,255,.1)}
.inx-s-candle{fill:#FFC24D;animation:inxCandle 2.3s ease-in-out infinite}
@keyframes inxCandle{0%,100%{opacity:1}30%{opacity:.7}60%{opacity:.9}}
.inx-s-time{font-size:17px;fill:var(--gold)}
.inx-s-cup{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.8;stroke-linejoin:round}
.inx-s-steam{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.6;stroke-linecap:round;animation:inxSteam 2.8s ease-in-out infinite}
.inx-s-steam--2{animation-delay:.6s}
.inx-s-steam--3{animation-delay:1.2s}
@keyframes inxSteam{0%{opacity:0;transform:translateY(4px)}35%{opacity:.9}100%{opacity:0;transform:translateY(-9px)}}
/* real estate */
.inx-s-roof{fill:none;stroke:rgba(255,255,255,.42);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.inx-s-win{fill:rgba(255,196,90,.38)}
.inx-s-win--2{animation:inxWin 9s 2s infinite}
@keyframes inxWin{0%,70%,100%{opacity:1}74%,88%{opacity:.25}}
.inx-s-post{fill:none;stroke:rgba(255,255,255,.3);stroke-width:3;stroke-linecap:round}
.inx-s-sold{transform-box:fill-box;transform-origin:center;transform:rotate(-9deg);animation:inxSold 7s var(--ease) infinite}
.inx-s-sold rect{fill:var(--gold)}
.inx-s-sold text{font-size:13.5px;letter-spacing:.14em;fill:#111;text-anchor:middle}
@keyframes inxSold{0%,6%{opacity:0;transform:rotate(-9deg) scale(1.7)}14%{opacity:1;transform:rotate(-9deg) scale(.94)}18%,92%{opacity:1;transform:rotate(-9deg) scale(1)}97%,100%{opacity:0;transform:rotate(-9deg) scale(1)}}
/* finance */
.inx-s-trend{fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:inxTrend 6s var(--ease) infinite}
@keyframes inxTrend{0%{stroke-dashoffset:1}40%,100%{stroke-dashoffset:0}}
.inx-s-shield{fill:#161A21;stroke:var(--gold-line);stroke-width:1.6;stroke-linejoin:round}
.inx-s-glint{fill:rgba(255,255,255,.13);transform:skewX(-18deg) translateX(0);animation:inxGlint 5s ease-in-out infinite}
@keyframes inxGlint{0%,55%{transform:skewX(-18deg) translateX(0)}85%,100%{transform:skewX(-18deg) translateX(150px)}}
.inx-s-shackle{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
/* education */
.inx-s-tabbg{fill:#1A1E25;stroke:rgba(255,255,255,.08)}
.inx-s-tab path{fill:#161A21;stroke:var(--gold-line);stroke-width:1.2}
.inx-s-tab rect{fill:var(--gold)}
.inx-s-tab{animation:inxTabs 9s var(--ease) infinite}
@keyframes inxTabs{0%,16%{transform:translateX(0)}26%,42%{transform:translateX(140px)}52%,100%{transform:translateX(70px)}}
.inx-s-cap{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.inx-s-chip{fill:#1D2129}
.inx-s-chip.is-on{fill:rgba(79,191,160,.22);stroke:var(--teal-line)}
.inx-s-enrol{fill:var(--teal);transform-box:fill-box;transform-origin:left center;animation:inxEnrol 9s var(--ease) infinite}
@keyframes inxEnrol{0%,52%{transform:scaleX(0)}72%,100%{transform:scaleX(1)}}

/* ==========================================================================
   THE REAL TENSION · strings
   ========================================================================== */
/* the refusals under the opener: one per line, each struck out with a coral cross */
.inx-ten__no{display:grid;gap:7px;margin:18px 0 0;font-family:var(--font-head);font-weight:700;font-size:16.5px;line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.inx-ten__no span{position:relative;padding-left:26px}
.inx-ten__no span::before{content:"";position:absolute;left:1px;top:.2em;width:14px;height:14px;border-radius:4px;
  background:linear-gradient(45deg,transparent 42%,var(--coral) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--coral) 42% 58%,transparent 58%),rgba(255,122,107,.1)}
.inx-harp{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:28px;align-items:stretch}
.inx-strings{--who:204px;--tag:156px;--pl:22px;--pr:20px;position:relative;display:flex;flex-direction:column;justify-content:center;padding:16px 0;border-radius:24px;
  border:1px solid var(--edge);background:
    linear-gradient(90deg,transparent calc(var(--pl) + var(--who) - 6px),rgba(244,160,0,.035) calc(var(--pl) + var(--who) - 6px),rgba(255,255,255,.012) 50%,rgba(244,160,0,.035) calc(100% - var(--pr) - var(--tag) + 6px),transparent calc(100% - var(--pr) - var(--tag) + 6px)),
    linear-gradient(90deg,#101217,#0A0B0E 40%,#0A0B0E 60%,#101217)}
.inx-string{position:relative;display:grid;grid-template-columns:var(--who) minmax(0,1fr) var(--tag);align-items:center;width:100%;height:54px;
  padding:0 var(--pr) 0 var(--pl);border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* each string runs from a tuning peg to a bridge pin */
.inx-string__span{position:relative;display:block;height:34px}
.inx-string__span::before,.inx-string__span::after{content:"";position:absolute;top:50%;border-radius:50%;transform:translateY(-50%)}
.inx-string__span::before{left:-6px;width:12px;height:12px;border:2px solid rgba(214,212,204,.45);background:#0A0B0E;transition:border-color .3s}
.inx-string__span::after{right:-4px;width:7px;height:7px;background:rgba(214,212,204,.45);transition:background .3s}
.inx-string.is-on .inx-string__span::before{border-color:var(--gold)}
.inx-string.is-on .inx-string__span::after{background:var(--gold)}
.inx-string__who{display:flex;align-items:center;gap:10px;min-width:0;padding-right:14px;font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.15;
  color:var(--text-soft);transition:color .3s}
/* each string's number sits on its tuning peg: a steel ring that lights gold on the string you picked */
.inx-string__who i{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(214,212,204,.28);
  background:radial-gradient(circle at 50% 32%,#23272E,#111317 72%);font:700 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:var(--text-dim);
  transition:border-color .3s,color .3s,box-shadow .3s}
.inx-string.is-on .inx-string__who i{border-color:var(--gold);color:#FFD27A;box-shadow:0 0 0 3px rgba(244,160,0,.12),0 0 12px rgba(244,160,0,.45)}
.inx-string__wire{display:block;width:100%;height:34px;overflow:visible}
/* plain steel on the thin strings, wound bronze on the thick ones */
.inx-string__wire path{fill:none;stroke:color-mix(in srgb,#D9D6CC calc(100% - var(--k,0) * 11%),#C9924A);stroke-opacity:.5;stroke-width:var(--g,1.5);stroke-linecap:round;
  vector-effect:non-scaling-stroke;transition:stroke .3s,stroke-opacity .3s}
.inx-string__tag{justify-self:start;margin-left:16px;padding:6px 12px;border-radius:100px;border:1px solid var(--edge-2);font-size:13px;font-weight:600;white-space:nowrap;
  color:var(--text-soft);transition:all .3s}
.inx-string:hover .inx-string__wire path{stroke-opacity:.85}
.inx-string:hover .inx-string__who{color:var(--text)}
.inx-string.is-on .inx-string__who{color:var(--text)}
.inx-string.is-on .inx-string__wire path{stroke:var(--gold);stroke-opacity:1;filter:drop-shadow(0 0 4px rgba(244,160,0,.6))}
.inx-string.is-on .inx-string__tag{border-color:var(--gold);background:var(--gold);color:#111}
.inx-string:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:12px}
.inx-notes{display:grid}
.inx-note{position:relative;display:flex;flex-direction:column;padding:34px 34px 30px;border-radius:24px;border:1px solid var(--gold-line);overflow:hidden;
  background:radial-gradient(90% 70% at 100% 0%,rgba(244,160,0,.12),transparent 60%),linear-gradient(180deg,#15181E,#0C0E12)}
.inx-note + .inx-note{margin-top:14px}
html.el8-js .inx-note{grid-area:1 / 1;margin:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s,transform .5s var(--ease),visibility 0s .5s}
html.el8-js .inx-note.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s .05s,transform .6s .05s var(--ease),visibility 0s}
.inx-note::before{content:"";position:absolute;left:34px;right:34px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,210,122,.8),transparent)}
.inx-note__k{font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:var(--text-dim)}
.inx-note__t{margin:14px 0 14px;font-family:var(--font-head);font-weight:800;font-size:clamp(30px,2.8vw,40px);line-height:1.02;letter-spacing:-.035em;color:var(--gold)}
.inx-note__d{margin:0 0 20px;font-size:17px;line-height:1.6;color:var(--text-mid)}
/* the string's reading: its note on a small oscilloscope */
.inx-note__scope{display:block;flex:1 1 auto;width:100%;min-height:74px;max-height:130px;margin:0 0 22px;border-radius:12px;border:1px solid rgba(255,255,255,.07);
  background:#0A0B0E;overflow:hidden}
.inx-scope__grid{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1;vector-effect:non-scaling-stroke}
.inx-scope__wave{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(244,160,0,.7));
  animation:inxScope 2.4s linear infinite}
@keyframes inxScope{to{transform:translateX(var(--p))}}
.inx-note__doors{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.inx-note__doors a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:100px;border:1px solid var(--edge-2);
  background:rgba(255,255,255,.03);font-size:13.5px;font-weight:600;color:var(--text-soft);transition:border-color .3s,color .3s}
.inx-note__doors a svg{width:15px;height:15px}
.inx-note__doors a:nth-child(1) svg{color:var(--c-seo)}
.inx-note__doors a:nth-child(2) svg{color:var(--c-web)}
.inx-note__doors a:nth-child(3) svg{color:var(--c-ads)}
.inx .inx-note__doors a:hover{border-color:var(--gold-line);color:var(--text)}

/* ==========================================================================
   SAME SERVICES · the prism
   ========================================================================== */
.inx-prism{position:relative;margin:0 0 54px}
.inx-pr--wide{position:relative;width:100%;aspect-ratio:1200 / 380}
.inx-pr--wide svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.inx-pr--side{display:none;position:relative;width:100%;max-width:600px;margin:0 auto;aspect-ratio:360 / 200}
.inx-pr--side svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.inx-pr-c0,.inx-pr-t0{--c:var(--c-seo)}
.inx-pr-c1,.inx-pr-t1{--c:var(--c-web)}
.inx-pr-c2,.inx-pr-t2{--c:var(--c-ads)}
.inx-pr-beam{fill:none;stroke:var(--c);stroke-width:6;stroke-linecap:round;opacity:.5;transition:opacity .4s,stroke-width .4s}
.inx-pr-flow{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:3 27;opacity:.75;animation:inxFlow 1.6s linear infinite;animation-delay:var(--d,0s)}
@keyframes inxFlow{to{stroke-dashoffset:-30}}
.inx-pr-strand{fill:none;stroke:var(--c);stroke-width:1.7;opacity:.55;transition:opacity .4s}
.inx-pr-spark{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:2 38;opacity:.75;animation:inxSpark 2.2s linear infinite;animation-delay:calc(var(--r) * -.27s)}
@keyframes inxSpark{to{stroke-dashoffset:-40}}
.inx-pr-end{fill:#FFF3D6}
.inx-pr-prism{stroke:rgba(255,255,255,.42);stroke-width:1.2;stroke-linejoin:round}
.inx-pr-inside{fill:none;stroke:var(--c);stroke-width:2.2;opacity:.65;transition:opacity .4s}
.inx-pr-core{transform-box:fill-box;transform-origin:center;animation:inxCore 4.5s ease-in-out infinite}
@keyframes inxCore{50%{opacity:.6;transform:scale(.86)}}
.inx-pr-edge{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.6;stroke-linecap:round}
.inx-pr-label{position:absolute;transform:translateY(-50%);white-space:nowrap;transition:opacity .4s,color .4s}
.inx-pr-label--in{left:0;font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:-.015em;color:var(--c)}
/* each ray lands on its industry's plate: the three colours arrive as a stripe on its edge; the plates light one after
   another as the picture comes in (dim only while it waits to, so without JS they are lit) */
.inx-pr-plate{position:absolute;left:76.5%;display:flex;align-items:center;gap:9px;height:30px;padding:0 13px 0 0;border-radius:9px;overflow:hidden;white-space:nowrap;
  border:1px solid rgba(255,210,122,.3);background:linear-gradient(180deg,#171A20,#0E1014);transform:translateY(-50%);
  box-shadow:-10px 0 22px -12px rgba(255,226,160,.55),0 12px 24px -16px rgba(0,0,0,.9);
  transition:border-color .6s calc(.45s + var(--r,0) * .09s),box-shadow .6s calc(.45s + var(--r,0) * .09s),opacity .6s calc(.45s + var(--r,0) * .09s)}
html.el8-js .inx-prism:not(.is-in) .inx-pr-plate{opacity:.55;border-color:rgba(255,255,255,.08);box-shadow:none}
.inx-pr-plate__rgb{display:flex;align-self:stretch;width:9px}
.inx-pr-plate__rgb b{flex:1;background:var(--c);transition:opacity .4s}
.inx-pr-plate em{font:700 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;letter-spacing:.04em;color:var(--gold)}
.inx-pr-plate span{font-family:var(--font-head);font-weight:700;font-size:clamp(12.5px,1.05vw,14.5px);line-height:1;letter-spacing:-.01em;color:var(--text)}
.inx-pr-plate--num{left:88.8%;gap:5px;height:20px;padding:0 6px 0 0;border-radius:6px}
.inx-pr-plate--num .inx-pr-plate__rgb{width:6px}
.inx-pr-plate--num em{font-size:10px}
/* a path card in focus lights its own beam and its colour in every ray */
.inx-prism[data-hl="0"] .inx-pr-c1,.inx-prism[data-hl="0"] .inx-pr-c2,
.inx-prism[data-hl="1"] .inx-pr-c0,.inx-prism[data-hl="1"] .inx-pr-c2,
.inx-prism[data-hl="2"] .inx-pr-c0,.inx-prism[data-hl="2"] .inx-pr-c1{opacity:.12}
.inx-prism[data-hl="0"] .inx-pr-label--in:not(.inx-pr-t0),.inx-prism[data-hl="1"] .inx-pr-label--in:not(.inx-pr-t1),.inx-prism[data-hl="2"] .inx-pr-label--in:not(.inx-pr-t2){opacity:.3}
.inx-prism[data-hl="0"] .inx-pr-strand.inx-pr-c0,.inx-prism[data-hl="1"] .inx-pr-strand.inx-pr-c1,.inx-prism[data-hl="2"] .inx-pr-strand.inx-pr-c2{opacity:1}
/* side on: thinner light for the smaller picture */
.inx-pr--side .inx-pr-beam{stroke-width:4.5}
.inx-pr--side .inx-pr-strand{stroke-width:1.2}
.inx-pr--side .inx-pr-inside{stroke-width:1.6}
.inx-pr--side .inx-pr-label--in{left:auto;right:calc(72.2% + 8px);font-size:14px;text-align:right}
/* the three paths */
.inx-paths{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.inx-path{--c:var(--gold);position:relative;display:flex;flex-direction:column;padding:30px 30px 30px;border-radius:24px;border:1px solid var(--edge);
  background:linear-gradient(180deg,#111419,#0B0D11);overflow:hidden;transition:border-color .35s}
.inx-path::before{content:"";position:absolute;left:30px;right:30px;top:0;height:2px;border-radius:2px;background:var(--c);box-shadow:0 0 16px var(--c)}
.inx-path--seo{--c:var(--c-seo)}
.inx-path--web-design{--c:var(--c-web)}
.inx-path--google-ads{--c:var(--c-ads)}
.inx-path:hover,.inx-path.is-hl{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.inx-path__k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.inx-path__t{margin:12px 0 10px;font-family:var(--font-head);font-weight:800;font-size:31px;line-height:1.05;letter-spacing:-.03em}
.inx-path__t a{color:var(--text)}
.inx .inx-path__t a:hover{color:var(--c)}
.inx-path__t a span{color:var(--c);font-size:.8em}
.inx-path__d{margin:0 0 22px;font-size:16px;line-height:1.55;color:var(--text-mid)}
.inx-path__inc{list-style:none;margin:auto 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.07);display:grid;gap:10px}
.inx-path__inc li{display:flex;gap:10px;font-size:15px;line-height:1.45;color:var(--text-soft)}
.inx-path__inc span{flex:0 0 auto;font-weight:800;color:var(--c)}

/* ==========================================================================
   WHICH PAGE DO I NEED? · the chooser
   ========================================================================== */
.inx-pick{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:40px;align-items:start}
/* the steps are the lift's control panel: brushed dark steel, a screw in each corner, the floors as round lit buttons
   and the situations as call buttons that light in their service's colour */
.inx-pick__steps{--scr:radial-gradient(circle,#2E333C 0 2.6px,rgba(0,0,0,.55) 3.1px,transparent 3.8px);position:relative;padding:28px 28px 30px;border-radius:26px;
  border:1px solid var(--edge-2);
  background:var(--scr) 13px 13px / 12px 12px no-repeat,var(--scr) calc(100% - 13px) 13px / 12px 12px no-repeat,
    var(--scr) 13px calc(100% - 13px) / 12px 12px no-repeat,var(--scr) calc(100% - 13px) calc(100% - 13px) / 12px 12px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 4px),linear-gradient(180deg,#171A20,#0D0F13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.5),0 40px 80px -50px rgba(0,0,0,.95)}
.inx-pick__step{min-width:0;margin:0;padding:0;border:0}
.inx-pick__step + .inx-pick__step{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.07)}
/* (a floated legend sits in the flow, so the rule between the steps runs above it rather than through it) */
.inx-pick__step > div{clear:both}
.inx-pick__step legend{float:left;width:100%;display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:0;font-family:var(--font-head);font-weight:800;font-size:20px;letter-spacing:-.015em;color:var(--text)}
.inx-pick__step legend b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#111;font-size:14px;
  box-shadow:0 0 0 4px rgba(244,160,0,.14),0 0 16px rgba(244,160,0,.4)}
.inx-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
.inx-chip,.inx-opt{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.inx-chip input,.inx-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.inx-chip span{display:flex;align-items:center;gap:12px;min-height:52px;height:100%;padding:6px 12px 6px 6px;border-radius:100px;border:1px solid transparent;
  transition:border-color .25s,background .25s}
/* a floor button: a steel ring round its number, lit gold when pressed */
.inx-chip__btn{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.15);
  background:radial-gradient(circle at 50% 32%,#2B3038,#14171C 72%);box-shadow:inset 0 -2px 4px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06);
  font:700 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:var(--text-dim);transition:border-color .25s,color .25s,box-shadow .35s}
.inx-chip b{min-width:0;font-weight:600;font-size:15px;line-height:1.25;color:var(--text-soft);transition:color .25s}
.inx-chip:hover span{background:rgba(255,255,255,.025)}
.inx-chip:hover .inx-chip__btn{border-color:rgba(255,255,255,.32);color:var(--text-soft)}
.inx-chip input:checked + span{border-color:rgba(244,160,0,.3);background:linear-gradient(90deg,rgba(244,160,0,.1),rgba(244,160,0,.02))}
.inx-chip input:checked + span .inx-chip__btn{border-color:#FFC24D;color:#FFD27A;text-shadow:0 0 6px rgba(244,160,0,.9);
  box-shadow:0 0 0 3px rgba(244,160,0,.14),0 0 16px rgba(244,160,0,.5),inset 0 0 12px rgba(244,160,0,.3)}
.inx-chip input:checked + span b{color:var(--text)}
.inx-chip input:focus-visible + span,.inx-opt:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.inx-opts{display:grid;gap:8px}
.inx-opt{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;min-height:62px;padding:8px 16px 8px 9px;border-radius:100px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);transition:border-color .25s,background .25s}
.inx-opt--seo{--c:var(--c-seo)}
.inx-opt--web-design{--c:var(--c-web)}
.inx-opt--google-ads,.inx-opt--audit{--c:var(--c-ads)}
.inx-opt:hover{border-color:rgba(255,255,255,.2)}
.inx-opt:has(input:checked){border-color:color-mix(in srgb,var(--c) 55%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 11%,transparent),color-mix(in srgb,var(--c) 2%,transparent))}
/* a call button: the service's icon behind a steel ring, lit in the service's colour when pressed */
.inx-opt__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.14);
  background:radial-gradient(circle at 50% 32%,#2B3038,#14171C 72%);box-shadow:inset 0 -2px 4px rgba(0,0,0,.55);color:var(--text-dim);transition:all .3s}
.inx-opt__ic svg{width:19px;height:19px}
.inx-opt input:checked ~ .inx-opt__ic{border-color:var(--c);color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent),0 0 16px color-mix(in srgb,var(--c) 50%,transparent),inset 0 0 12px color-mix(in srgb,var(--c) 30%,transparent)}
.inx-opt__t{font-size:15.5px;font-weight:600;line-height:1.35;color:var(--text-soft)}
.inx-opt input:checked ~ .inx-opt__t{color:var(--text)}
/* the answer's lantern: the lift has arrived */
.inx-res__lamp{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid #FFC24D;filter:drop-shadow(0 0 5px rgba(244,160,0,.85))}
.inx-res.is-swap .inx-res__lamp{animation:inxLamp 1.2s steps(1) both}
@keyframes inxLamp{0%{opacity:.2}18%{opacity:1}34%{opacity:.25}52%,100%{opacity:1}}
.inx-pick__out{position:sticky;top:112px;min-height:var(--res-min,0px)}
.inx-res{position:relative;padding:20px 26px 26px;border-radius:26px;border:1px solid var(--gold-line);
  background:radial-gradient(90% 60% at 100% 0%,rgba(244,160,0,.1),transparent 60%),linear-gradient(180deg,#15181E,#0C0E12);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.inx-res[hidden]{display:none}
.inx-res.is-swap{animation:inxSwap .5s var(--ease)}
@keyframes inxSwap{from{opacity:.25;transform:translateY(8px)}}
.inx-res__k{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.inx-res__k small{font-size:inherit;letter-spacing:.08em;color:var(--text-dim)}
.inx-res__t{margin:10px 0 12px;font-family:var(--font-head);font-weight:800;font-size:29px;line-height:1.08;letter-spacing:-.028em;text-wrap:balance}
.inx-res__intro{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--text-mid)}
.inx-res__why{margin:0 0 20px;padding:12px 15px;border-radius:13px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);font-size:14.5px;line-height:1.5;color:var(--text-soft)}
.inx-res__why b{margin-right:6px;color:var(--text)}
.inx-res__go .wdp-btn{white-space:normal;text-align:center;line-height:1.2;height:auto;min-height:52px;padding:12px 26px}
.inx-res__seal{display:grid;place-items:center;width:62px;height:62px;margin:6px 0 14px;border-radius:18px;background:var(--gold);color:#111;box-shadow:0 18px 40px -14px rgba(244,160,0,.7)}
.inx-res__seal svg{width:28px;height:28px}
.inx-res__also{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:16px;padding:0 4px;font-size:13.5px;color:var(--text-dim)}
.inx-res__also a[hidden]{display:none}
.inx-res__also a{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:100px;border:1px solid var(--edge-2);font-weight:600;color:var(--text-soft)}
.inx .inx-res__also a:hover{border-color:var(--gold-line);color:var(--text)}
.inx-res__also a svg{width:14px;height:14px}
/* the preview of the page it points to */
.inx-res__peek{position:relative;height:124px;margin:0 0 18px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:#0A0C10;overflow:hidden}
.inx-peek{position:absolute;inset:0;display:none;padding:14px 16px}
.inx-res[data-svc="seo"] .inx-peek--seo,.inx-res[data-svc="web-design"] .inx-peek--web-design,.inx-res[data-svc="google-ads"] .inx-peek--google-ads{display:block}
.inx-peek__bar{display:flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:100px;border:1px solid rgba(255,255,255,.12);background:#12151A;color:var(--gold)}
.inx-peek__bar svg{width:13px;height:13px;flex:0 0 auto}
.inx-peek__bar i{height:5px;border-radius:3px;background:rgba(255,255,255,.28);width:34%}
.inx-peek__bar i + i{width:18%;background:rgba(255,255,255,.14)}
.inx-peek__rows{position:relative;display:block;height:72px;margin-top:10px}
.inx-peek__rows i{position:absolute;left:0;right:0;height:14px;border-radius:4px;background:rgba(255,255,255,.07)}
.inx-peek__rows i:nth-child(1){top:19px}
.inx-peek__rows i:nth-child(2){top:38px}
.inx-peek__rows i:nth-child(3){top:57px}
.inx-peek__rows i.is-you{top:0;display:flex;align-items:center;padding-left:4px;background:rgba(244,160,0,.22);border:1px solid rgba(244,160,0,.6);box-shadow:0 0 16px -4px rgba(244,160,0,.6)}
.inx-peek__rows i.is-you b{display:grid;place-items:center;width:18px;height:10px;font-size:8px;font-style:normal;border-radius:3px;background:var(--gold);color:#111}
.inx-res[data-svc="seo"] .is-you{animation:inxClimb 3.6s var(--ease) both}
@keyframes inxClimb{0%,20%{top:57px}100%{top:0}}
.inx-res[data-svc="seo"] .inx-peek__rows i:not(.is-you){animation:inxDrop 3.6s var(--ease) both}
@keyframes inxDrop{0%,20%{transform:translateY(-19px)}100%{transform:none}}
.inx-peek__chrome{display:flex;align-items:center;gap:5px;height:16px}
.inx-peek__chrome i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18)}
.inx-peek__chrome b{flex:1;height:8px;margin-left:8px;border-radius:4px;background:rgba(255,255,255,.08)}
.inx-peek__page{position:relative;display:block;height:78px;margin-top:8px;border-radius:9px;background:#12151A;border:1px solid rgba(255,255,255,.07)}
.inx-peek__page i{position:absolute;display:block;border-radius:3px}
.inx-peek__page .h{left:14px;top:14px;width:42%;height:9px;background:rgba(255,255,255,.4)}
.inx-peek__page .h--2{top:28px;width:30%;background:var(--gold)}
.inx-peek__page .p{left:14px;top:44px;width:36%;height:5px;background:rgba(255,255,255,.14)}
.inx-peek__page .btn{left:14px;top:56px;width:70px;height:13px;border-radius:7px;background:var(--gold)}
.inx-peek__page .pic{right:12px;top:12px;width:34%;height:54px;border-radius:7px;background:linear-gradient(135deg,rgba(79,191,160,.25),rgba(244,160,0,.18))}
.inx-peek__cursor{position:absolute;left:230px;top:56px;width:16px;height:16px;color:#fff}
.inx-peek__cursor svg{width:100%;height:100%;fill:#fff;stroke:#0A0C10;stroke-width:1.2}
.inx-res[data-svc="web-design"] .inx-peek__cursor{animation:inxCursor 3.8s var(--ease) both}
@keyframes inxCursor{0%{transform:translate(0,0)}55%{transform:translate(-167px,42px)}62%{transform:translate(-167px,42px) scale(.8)}70%,100%{transform:translate(-167px,42px)}}
.inx-peek__sent{position:absolute;left:106px;top:91px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--teal);color:#0A1512}
.inx-peek__sent svg{width:12px;height:12px}
.inx-res[data-svc="web-design"] .inx-peek__sent{animation:inxSent 3.8s var(--ease) both}
@keyframes inxSent{0%,62%{opacity:0;transform:scale(.3)}74%{opacity:1;transform:scale(1.15)}82%,100%{opacity:1;transform:scale(1)}}
.inx-peek__ad{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:6px 10px;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(244,160,0,.55);background:rgba(244,160,0,.09)}
.inx-peek__ad em{grid-row:1 / 3;padding:3px 6px;border-radius:5px;border:1px solid rgba(244,160,0,.6);font-style:normal;font-size:10px;font-weight:800;color:var(--gold)}
.inx-peek__ad i{height:7px;border-radius:4px;background:rgba(255,255,255,.4);width:70%}
.inx-peek__ad i.s{grid-column:2;width:48%;background:rgba(255,255,255,.16)}
.inx-peek__call{grid-column:3;grid-row:1 / 3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#0A1512}
.inx-peek__call svg{width:15px;height:15px}
.inx-res[data-svc="google-ads"] .inx-peek__call{animation:inxCall 1.3s ease-in-out infinite}
@keyframes inxCall{0%,100%{transform:rotate(0)}10%{transform:rotate(-14deg)}20%{transform:rotate(12deg)}30%{transform:rotate(-8deg)}40%{transform:rotate(0)}}
.inx-peek__org{display:block;padding:8px 12px 0}
.inx-peek__org i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.12);width:58%}
.inx-peek__org i.s{margin-top:5px;width:40%;background:rgba(255,255,255,.07)}

/* ==========================================================================
   FREE TOOLS
   ========================================================================== */
.inx-tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.inx-tool a{display:flex;flex-direction:column;height:100%;padding:14px 14px 22px;border-radius:22px;border:1px solid var(--edge);
  background:linear-gradient(180deg,#111419,#0B0D11);color:var(--text);transition:border-color .35s,transform .5s var(--ease)}
.inx .inx-tool a:hover{color:var(--text);border-color:var(--gold-line);transform:translateY(-4px)}
.inx-tool__peek{position:relative;display:block;height:108px;margin-bottom:18px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:#0A0C10;overflow:hidden}
.inx-tool__row{display:flex;align-items:center;gap:12px;padding:0 8px}
.inx-tool__ic{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:11px;border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold)}
.inx-tool__ic svg{width:19px;height:19px}
.inx-tool__t{font-family:var(--font-head);font-weight:800;font-size:19px;line-height:1.15;letter-spacing:-.02em}
.inx-tool__d{padding:10px 8px 0;font-size:14.5px;line-height:1.5;color:var(--text-mid)}
.inx-tool__go{margin-top:auto;padding:16px 8px 0;font-size:14.5px;font-weight:700;color:var(--gold)}
.inx-tool__go b{display:inline-block;transition:transform .3s var(--ease)}
.inx-tool a:hover .inx-tool__go b{transform:translateX(4px)}
.inx-tp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 22px}
.inx-tp--split{flex-direction:column;gap:12px}
.inx-tp__stack{display:flex;width:100%;height:22px;border-radius:7px;overflow:hidden;gap:3px}
.inx-tp__stack i{width:var(--w);transition:width .7s var(--ease)}
.inx-tp__stack i:nth-child(1){background:var(--c-seo)}
.inx-tp__stack i:nth-child(2){background:var(--c-web)}
.inx-tp__stack i:nth-child(3){background:var(--c-ads)}
.inx-tool a:hover .inx-tp__stack i:nth-child(1){width:30%}
.inx-tool a:hover .inx-tp__stack i:nth-child(2){width:28%}
.inx-tool a:hover .inx-tp__stack i:nth-child(3){width:42%}
.inx-tp__keys{display:flex;gap:18px;align-self:flex-start}
.inx-tp__keys i{position:relative;width:38px;height:5px;margin-left:12px;border-radius:3px;background:rgba(255,255,255,.14)}
.inx-tp__keys i::before{content:"";position:absolute;left:-12px;top:-1.5px;width:8px;height:8px;border-radius:50%;background:var(--c-seo)}
.inx-tp__keys i:nth-child(2)::before{background:var(--c-web)}
.inx-tp__keys i:nth-child(3)::before{background:var(--c-ads)}
.inx-tp--slider{flex-direction:column;gap:12px}
.inx-tp__cols{display:flex;align-items:flex-end;gap:7px;width:100%;height:46px}
.inx-tp__cols i{flex:1;height:var(--h);border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,rgba(244,160,0,.75),rgba(244,160,0,.2))}
.inx-tp__rail{position:relative;width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
.inx-tp__rail i{position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:2px;background:var(--gold)}
.inx-tp__rail b{position:absolute;left:62%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(244,160,0,.3)}
.inx-tp--cross svg{width:100%;height:70px;overflow:visible}
.inx-tp--cross .paid{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.inx-tp--cross .org{fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.inx-tool a:hover .inx-tp--cross .org{animation:inxDraw 1.2s var(--ease)}
@keyframes inxDraw{from{stroke-dashoffset:1}}
.inx-tp--cross .mark{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.inx-tp__slip{position:relative;display:grid;gap:8px;width:62%;padding:12px 14px 14px;border-radius:8px 8px 3px 3px;background:#171A20;border:1px solid rgba(255,255,255,.08)}
.inx-tp__slip span{display:flex;justify-content:space-between;gap:12px}
.inx-tp__slip i{height:5px;border-radius:3px;background:rgba(255,255,255,.16)}
.inx-tp__slip i + i{width:18%}
.inx-tp__slip .t{padding-top:8px;border-top:1px dashed rgba(255,255,255,.18)}
.inx-tp__slip .t i{width:30%;background:rgba(255,255,255,.35)}
.inx-tp__slip .t b{width:26%;height:8px;border-radius:3px;background:var(--gold)}
.inx-tp--ready svg{width:74px;height:74px}
.inx-tp--ready .bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:5}
.inx-tp--ready .fg{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;stroke-dasharray:.75 1;transform:rotate(-90deg);transform-origin:center}
.inx-tp--ready .pin{fill:var(--gold)}
.inx-tp__ticks{display:grid;gap:7px}
.inx-tp__ticks i{position:relative;width:70px;height:5px;margin-left:16px;border-radius:3px;background:rgba(255,255,255,.12)}
.inx-tp__ticks i::before{content:"";position:absolute;left:-16px;top:-3px;width:10px;height:10px;border-radius:3px;border:1.5px solid rgba(255,255,255,.25)}
.inx-tp__ticks i.on::before{border-color:var(--teal);background:var(--teal)}
.inx-tp--grade b{display:grid;place-items:center;width:62px;height:62px;border-radius:16px;border:1px solid var(--gold-line);background:var(--gold-soft);
  font-family:var(--font-head);font-weight:800;font-size:26px;letter-spacing:-.03em;color:var(--gold)}
.inx-tp__bars{display:grid;gap:9px;width:46%}
.inx-tp__bars i{display:block;width:var(--w);height:7px;border-radius:4px;background:linear-gradient(90deg,var(--teal),rgba(79,191,160,.4))}
.inx-tp__bars i:nth-child(3){background:linear-gradient(90deg,var(--coral),rgba(255,122,107,.4))}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1240px){
  .inx-dir{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inx-harp{grid-template-columns:minmax(0,1fr)}
  .inx-strings{--who:230px}
}
@media (max-width:1080px){
  /* the openers go under their headings here, so the copy keeps a comfortable measure */
  .inx .wdp-head--split{grid-template-columns:minmax(0,1fr);gap:0;max-width:680px}
  .inx-pick{grid-template-columns:minmax(0,1fr);gap:30px}
  .inx-pick__out{position:relative;top:0}
  .inx-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inx-paths{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1180px){
  .inx-pr--wide{display:none}
  .inx-pr--side{display:block}
}
@media (max-width:700px){
  .inx-lede{max-width:none;padding-left:54px}
  .inx .inx-lede .wdp-lede{font-size:15.5px;line-height:1.58}
  .inx-lede__first,.inx-lede--long .inx-lede__first{margin-bottom:6px;font-size:17.5px;line-height:1.3}
  .inx-dial{width:40px;height:25px}
  .inx-lede::before{left:14px;top:34px}
  .inx-lede::after{left:17.5px;top:39px;height:13px}
  .inx-ten__no{margin-top:14px;gap:6px;font-size:15px}
  .inx-ten__no span{padding-left:23px}
  .inx-ten__no span::before{width:13px;height:13px}


  .inx-card{padding:10px 10px 12px;border-radius:20px}
  .inx-card__t{margin:14px 6px 6px;font-size:20px}
  .inx-card__d{margin:0 6px 14px;font-size:14px}
  .inx-door{min-height:54px}

  /* phones: the harp stands up. Eight strings side by side, each with its numbered peg at the top and its tension written
     along it; the industry's name, the detail and its pages are on the card below */
  .inx-harp{gap:14px}
  .inx-strings{--len:188px;flex-direction:row;align-items:stretch;justify-content:space-between;padding:0 6px;border-radius:20px;
    background:linear-gradient(180deg,transparent 47px,rgba(214,212,204,.2) 47px 50px,transparent 50px calc(100% - 20px),rgba(214,212,204,.16) calc(100% - 20px) calc(100% - 17px),transparent calc(100% - 17px)),
      linear-gradient(180deg,#101217,#0A0B0E)}
  .inx-string{display:flex;flex-direction:column;align-items:center;flex:1 1 0;min-width:0;height:auto;padding:13px 0 26px;border-radius:12px}
  .inx-string__who{justify-content:center;padding:0}
  .inx-string__name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .inx-string__span{width:100%;height:var(--len);margin-top:15px}
  .inx-string__wire{position:absolute;left:calc(32% - var(--len) / 2);top:calc(50% - 17px);width:var(--len);transform:rotate(90deg)}
  .inx-string__span::before{left:32%;top:-7px;width:10px;height:10px;transform:translateX(-50%)}
  .inx-string__span::after{left:32%;right:auto;top:auto;bottom:-3px;transform:translateX(-50%)}
  .inx-string__tag{position:absolute;left:calc(32% + 7px);bottom:30px;margin:0;padding:6px 1px;border:0;border-radius:100px;writing-mode:vertical-rl;transform:rotate(180deg);
    font-size:11px;line-height:1.2;color:var(--text-dim)}
  .inx-string.is-on .inx-string__tag{padding:8px 2px}
  .inx-note{padding:18px 18px 18px;border-radius:20px}
  .inx-note::before{left:22px;right:22px}
  .inx-note__t{margin:8px 0 8px;font-size:27px}
  .inx-note__d{margin-bottom:14px;font-size:15px;line-height:1.55}
  .inx-note__scope{min-height:40px;max-height:44px;margin-bottom:14px}
  .inx-note__doors{gap:6px}
  .inx-note__doors a{gap:5px;height:34px;padding:0 9px;font-size:12px}
  .inx-note__doors a svg{width:13px;height:13px}
  /* the cards swipe: every card is laid out in the track (not stacked in one cell), the one in view is lit */
  .inx-notes__car .inx-note + .inx-note{margin-top:0}
  html.el8-js .inx-notes__car .inx-note{grid-area:auto;opacity:1;visibility:visible;transform:none;transition:opacity .3s}
  html.el8-js .inx-notes__car .inx-note:not(.is-cur){opacity:.5}

  .inx-prism{margin-bottom:26px}
  .inx-pr--side .inx-pr-label--in{font-size:12.5px}
  .inx-path{padding:26px 22px 24px;border-radius:20px}
  .inx-path::before{left:22px;right:22px}
  .inx-path__t{font-size:27px}
  .inx-path__d{font-size:15px}

  /* phones: the floors ride in one swipeable row of buttons (the chosen one kept in view), the situations stay a short
     list, and the answer drops its preview */
  .inx-pick__steps{padding:20px 16px 20px;border-radius:22px}
  .inx-pick__step + .inx-pick__step{margin-top:18px;padding-top:18px}
  .inx-pick__step legend{margin-bottom:12px;font-size:17.5px}
  .inx-chips{display:flex;gap:8px;margin:0 -16px;padding:2px 16px 4px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 30px),transparent)}
  .inx-chips::-webkit-scrollbar{display:none}
  .inx-chip{flex:0 0 auto;scroll-snap-align:start}
  .inx-chip span{min-height:48px;padding:4px 16px 4px 5px;border-color:rgba(255,255,255,.1);white-space:nowrap}
  .inx-chip__btn{width:36px;height:36px;font-size:11px}
  .inx-chip b{font-size:14px}
  .inx-opts{gap:7px}
  .inx-opt{grid-template-columns:40px minmax(0,1fr);gap:12px;min-height:56px;padding:7px 14px 7px 7px}
  .inx-opt__ic{width:40px;height:40px}
  .inx-opt__ic svg{width:18px;height:18px}
  .inx-opt__t{font-size:14.5px}
  .inx-res{padding:18px 18px 20px;border-radius:22px}
  /* (the page's own intro waits on the page itself: the answer keeps its headline, the reason and the way in) */
  .inx-res__peek,.inx-res__intro{display:none}
  .inx-res__t{font-size:24px}
  .inx-res__intro{font-size:15px}
  .inx-res__go .wdp-btn{width:100%}

  .inx-tools{grid-template-columns:minmax(0,1fr)}
  .inx-tool a{padding:12px 12px 20px}
}
@media (max-width:360px){
  .inx-strings{--len:176px;padding:0 3px}
  .inx-string__tag{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .inx .inx-gold,.inx-sc *,.inx-pr-flow,.inx-pr-spark,.inx-pr-core,
  .inx-res.is-swap,.inx-res .is-you,.inx-scope__wave,.inx-peek__rows i,.inx-peek__cursor,.inx-peek__sent,.inx-peek__call,.inx-res__lamp,
  .inx-card__scene::before,.inx-card__scene::after{animation:none!important}
  .inx-s-hop{opacity:0}
  .inx-res[data-svc="web-design"] .inx-peek__cursor{transform:translate(-167px,42px)}
  .inx-note,.inx-tp__stack i,.inx-dial__needle,.inx-board__lamp,.inx-pr-plate{transition:none!important}
  html.el8-js [data-rise]:not(.is-in) .inx-dial__needle{transform:rotate(var(--a))}
}