/* ═══════════════════════════════════════════════════════════════════
   OMNIWIRE — modules
   Cards · flows · blocks · chain · method · frames · contact
   ═══════════════════════════════════════════════════════════════════ */

/* ── the live-systems section: the centre of gravity of the site ─── */
.sec--live{
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(23,169,204,.05) 0%, rgba(23,169,204,0) 70%),
    linear-gradient(180deg,var(--wash) 0%,var(--paper-2) 100%);
  border-block:1px solid var(--line);
}

/* ── capability group cards (home) ───────────────────────────────── */
.gcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.gcard{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s3);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s;
}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)}
.gcard__hit{position:absolute;inset:0;border-radius:inherit;z-index:1}
.gcard__hit:focus-visible{outline-offset:-3px}
.gcard__n{font-family:var(--font-mono);font-size:var(--t-label);color:var(--teal);letter-spacing:.1em}
.gcard__name{font-size:var(--t-h3)}
.gcard__lede{font-size:var(--t-sm);color:var(--ink-3);line-height:1.68}
.gcard__list{margin-block-start:auto;padding-block-start:var(--s4);border-block-start:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.gcard__list li{font-size:var(--t-xs);color:var(--ink-2);padding-block:3px}

/* ── service cards (services hub) ────────────────────────────────── */
.vcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s5)}
/* ── depth hierarchy ─────────────────────────────────────────────
   Depth is a ranking, not a decoration. Three tiers, and nothing is
   allowed to outrank the tier above it:

     SERVICE card    barely raised — a surface you read
     SYSTEM card     genuinely raised — an object you pick up
     LIVE DEMO CTA   the strongest physical control on the site

   If everything is 3D then nothing is, and the visitor loses the one
   cue telling them which thing on the page is the important one. */
.vcard{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s2);
  box-shadow:inset 0 1px 0 var(--lit-edge),0 1px 2px rgba(12,23,32,.04);
  transition:transform var(--m-ui) var(--ease-out),box-shadow var(--m-ui) var(--ease-out),
             border-color var(--m-ui) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .vcard:hover{
    transform:translateY(-3px);border-color:var(--line-2);
    box-shadow:inset 0 1px 0 var(--lit-edge),0 8px 20px rgba(12,23,32,.07);
  }
}
.vcard__hit{position:absolute;inset:0;border-radius:inherit;z-index:1}
.vcard__name{font-size:var(--t-h3)}
.vcard__tag{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d)}
[dir="rtl"] .vcard__tag{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.78rem}
.vcard__sum{font-size:var(--t-sm);color:var(--ink-3);line-height:1.68;margin-block-start:var(--s2)}
.vcard__go{
  margin-block-start:auto;padding-block-start:var(--s4);
  font-size:var(--t-xs);font-weight:600;color:var(--teal-d);
  display:inline-flex;align-items:center;gap:6px;
}
.vcard__go::after{content:"→";transition:transform .3s var(--ease-out)}
[dir="rtl"] .vcard__go::after{content:"←"}
.vcard:hover .vcard__go::after{transform:translateX(4px)}
[dir="rtl"] .vcard:hover .vcard__go::after{transform:translateX(-4px)}

/* ── solution cards ──────────────────────────────────────────────── */
.solcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s5)}
.solcard{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s8) var(--s6);
  display:flex;flex-direction:column;gap:var(--s2);overflow:hidden;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s;
}
.solcard::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  transform:scaleX(0);transform-origin:inline-start;transition:transform .5s var(--ease-out);
}
.solcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)}
.solcard:hover::before{transform:scaleX(1)}
.solcard__hit{position:absolute;inset:0;border-radius:inherit;z-index:1}
.solcard__n{font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink-4);letter-spacing:.1em}
.solcard__name{font-size:var(--t-h3)}
.solcard__tag{font-size:var(--t-xs);color:var(--teal-d);font-weight:600}
.solcard__sum{font-size:var(--t-sm);color:var(--ink-3);line-height:1.68;margin-block-start:var(--s2)}
.solcard__go{margin-block-start:auto;padding-block-start:var(--s5);font-size:var(--t-xs);font-weight:600;color:var(--teal-d);display:inline-flex;gap:6px}
.solcard__go::after{content:"→";transition:transform .3s var(--ease-out)}
[dir="rtl"] .solcard__go::after{content:"←"}
.solcard:hover .solcard__go::after{transform:translateX(4px)}
[dir="rtl"] .solcard:hover .solcard__go::after{transform:translateX(-4px)}

/* ── system cards (the work wall) ────────────────────────────────── */
.swall{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--s6)}
.swall--home{grid-template-columns:repeat(2,minmax(0,1fr))}
.swall--single{grid-template-columns:minmax(0,1fr);max-width:560px}

.scard{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  /* an unblurred bottom edge under the soft shadow: the card has a
     thickness, and the light that makes it is the same upper-left
     light the buttons and the hero film use */
  box-shadow:
    inset 0 1px 0 var(--lit-edge),
    0 2px 0 rgba(206,221,232,.5),
    0 3px 8px rgba(12,23,32,.05);
  transition:transform var(--m-ui) var(--ease-out),box-shadow var(--m-ui) var(--ease-out),
             border-color var(--m-ui) var(--ease);
  transform-style:preserve-3d;
}
@media (hover:hover) and (pointer:fine){
  .scard:hover{
    transform:translateY(-6px);border-color:var(--line-2);
    box-shadow:
      inset 0 1px 0 var(--lit-edge),
      0 5px 0 rgba(206,221,232,.6),
      0 22px 44px rgba(12,23,32,.12),
      0 4px 10px rgba(12,23,32,.06);
  }
}
/* touch: press in, release out — no lingering hover state */
.scard:active{transform:translateY(-1px);transition-duration:var(--m-micro)}
.scard__hit{position:absolute;inset:0;z-index:3;border-radius:inherit}
.scard__hit:focus-visible{outline-offset:-4px}
.scard__vis{padding:var(--s6) var(--s6) 0;background:linear-gradient(180deg,var(--wash) 0%,var(--paper) 100%);display:flex;justify-content:center}
.scard__body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.scard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.scard__cat{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
[dir="rtl"] .scard__cat{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.76rem}
.scard__name{font-size:var(--t-h3);letter-spacing:-.02em}
.scard__type{font-size:var(--t-xs);color:var(--teal-d);font-weight:600}
.scard__sum{font-size:var(--t-sm);color:var(--ink-3);line-height:1.68;margin-block-start:var(--s1)}
.scard__go{
  margin-block-start:auto;padding-block-start:var(--s5);
  font-size:var(--t-xs);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;
}
.scard__go::after{content:"→";color:var(--teal);transition:transform .3s var(--ease-out)}
[dir="rtl"] .scard__go::after{content:"←"}
.scard:hover .scard__go::after{transform:translateX(5px)}
[dir="rtl"] .scard:hover .scard__go::after{transform:translateX(-5px)}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--teal-d);border:1px solid rgba(14,155,142,.3);background:var(--accent-soft);
  padding:3px 9px;border-radius:100px;
}
.badge--dev{color:var(--amber);border-color:rgba(222,138,42,.32);background:rgba(222,138,42,.07)}
[dir="rtl"] .badge{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.7rem}
/* the live dot is the one thing on the page that breathes — it marks
   the difference between a marketing page and working software */
.badge__dot{
  width:5px;height:5px;border-radius:50%;background:var(--teal);flex-shrink:0;
  animation:livePulse 2.4s var(--ease) infinite;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(14,155,142,.5)}
  50%{box-shadow:0 0 0 4px rgba(14,155,142,0)}
}

/* ── the live-demo call to action ────────────────────────────────
   Says exactly what happens, carries the ↗ "opens the system" cue,
   and is the element the onboarding cursor points at. */
.cta-live{
  margin-block-start:auto;
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:11px 20px;border-radius:100px;
  background:var(--ink);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.85rem;
  align-self:flex-start;position:relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 2px 0 #05101A,
    0 2px 5px rgba(12,23,32,.14);
  transition:background var(--m-ui) var(--ease),transform var(--m-ui) var(--ease-out),
             box-shadow var(--m-ui) var(--ease-out),gap var(--m-ui) var(--ease-out);
}
.scard__body > .cta-live{margin-block-start:var(--s5)}
.cta-live__arrow{font-style:normal;font-size:.95em;transition:transform var(--m-ui) var(--ease-out)}
/* The card is the hit target, so the demo control responds to the
   card being hovered rather than to itself — the whole card lifts and
   the control on it lifts further, which is what tells the visitor the
   control is the point of the card. */
@media (hover:hover) and (pointer:fine){
  .scard:hover .cta-live{
    background:#14303F;transform:translateY(-2px);gap:var(--s3);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.2),
      0 4px 0 #05101A,
      0 10px 22px rgba(12,23,32,.22);
  }
  .scard:hover .cta-live__arrow{transform:translate(2px,-2px)}
}
.scard:active .cta-live{
  transform:translateY(1px);transition-duration:var(--m-micro);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.3),0 1px 0 #05101A;
}
.scard:hover .cta-live__arrow{transform:translate(2px,-2px)}
[dir="rtl"] .cta-live__arrow{transform:scaleX(-1)}
[dir="rtl"] .scard:hover .cta-live__arrow{transform:scaleX(-1) translate(2px,-2px)}

.scard__more{
  /* WCAG 2.2 AA (2.5.8) sets the minimum target at 24x24 CSS px. This
     link measured 22px tall — close enough to look fine and still fail.
     inline-flex with a min-height grows the hit area without moving the
     text or the underline, so nothing about the design changes. */
  margin-block-start:var(--s3);font-size:var(--t-xs);color:var(--ink-3);
  border-block-end:1px solid transparent;align-self:flex-start;
  display:inline-flex;align-items:center;min-height:24px;
  position:relative;z-index:4;transition:color .25s,border-color .25s;
}
.scard__more:hover{color:var(--ink);border-block-end-color:var(--line-2)}

/* ── systems-index legend ────────────────────────────────────────── */
.legend-bar{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s8);
  padding:var(--s5) var(--s6);margin-block-end:var(--s8);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
}
.legend-bar__item{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.legend-bar__t{font-size:var(--t-xs);color:var(--ink-3)}

/* ── guided discovery ────────────────────────────────────────────
   Two components, one visual language: a light surface, a hairline,
   the same upper-left light as every other object on the site, and
   one teal accent. Both are `position:fixed` and `pointer-events:none`
   apart from their own dismiss control — they can never intercept a
   click meant for the page underneath. */

/* ═══ DiscoveryHint ═══ */
.hint{
  position:fixed;inset-block-start:0;inset-inline-start:0;z-index:90;
  display:flex;align-items:center;gap:var(--s3);
  max-width:min(310px,calc(100vw - 24px));
  padding:10px 10px 10px 14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(12,23,32,.05),
    0 12px 30px rgba(12,23,32,.11);
  /* The card is inert. Only its dismiss button accepts a click, so a
     hint floating over the page can never swallow a click meant for
     the content underneath it — including the control it points at. */
  pointer-events:none;
  opacity:0;
  /* the translate is written by JS; the entrance rides on scale+opacity
     so the two never fight over the same property */
  scale:.96;
  transition:opacity var(--m-ui) var(--ease-out),scale var(--m-ui) var(--ease-out);
  will-change:transform;
}
.hint.is-on{opacity:1;scale:1}
.hint__dot{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(14,155,142,.5);
  animation:hintPulse 2.4s var(--ease-out) infinite;
}
@keyframes hintPulse{
  0%  {box-shadow:0 0 0 0 rgba(14,155,142,.45)}
  60% {box-shadow:0 0 0 8px rgba(14,155,142,0)}
  100%{box-shadow:0 0 0 0 rgba(14,155,142,0)}
}
.hint__msg{
  font-size:.84rem;line-height:1.45;color:var(--ink);
  font-family:var(--font-body);
}
.hint__ok{
  pointer-events:auto;
  flex:0 0 auto;align-self:stretch;
  padding-inline:11px;border-radius:9px;
  font-family:var(--font-display);font-weight:600;font-size:.74rem;
  color:var(--ink-2);background:var(--wash);
  border:1px solid transparent;
  transition:background var(--m-micro) var(--ease),color var(--m-micro) var(--ease),
             border-color var(--m-micro) var(--ease);
}
.hint__ok:hover{background:var(--paper);color:var(--ink);border-color:var(--line-2)}

/* A quiet ring on the control being pointed at, so the hint and its
   subject are unmistakably connected without an arrow or a spotlight. */
.is-hinted{
  box-shadow:0 0 0 3px rgba(14,155,142,.16),var(--sh-sm) !important;
}

/* ═══ DemoGuide ═══ */
.dguide{
  position:fixed;inset-block-start:0;inset-inline-start:0;z-index:90;
  width:0;height:0;pointer-events:none;
  opacity:0;visibility:hidden;
  transform:translate3d(var(--gx,0px),var(--gy,0px),0);
  transition:opacity .38s var(--ease),transform var(--m-cine) var(--ease-out);
  will-change:transform;
}
.dguide.is-on{opacity:1;visibility:visible}
.dguide__cursor{
  position:absolute;inset-block-start:0;inset-inline-start:0;
  fill:var(--ink);stroke:#fff;stroke-width:1.5;stroke-linejoin:round;
  filter:drop-shadow(0 3px 7px rgba(12,23,32,.3));
  transition:transform var(--m-micro) var(--ease-out);
}
.dguide.is-press .dguide__cursor{transform:translate(1px,2px) scale(.9)}

/* touch variant — a fingertip, never a mouse pointer */
.dguide__tip{
  position:absolute;inset-block-start:-11px;inset-inline-start:-11px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(14,155,142,.16);
  border:1.5px solid var(--teal);
  box-shadow:0 2px 8px rgba(12,23,32,.16);
  transition:transform var(--m-micro) var(--ease-out);
}
.dguide.is-press .dguide__tip{transform:scale(.78)}

.dguide__ripple{
  position:absolute;inset-block-start:-10px;inset-inline-start:-10px;
  width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--teal);opacity:0;
}
.dguide.is-press .dguide__ripple{animation:guideRipple .55s var(--ease-out) both}
@keyframes guideRipple{
  from{transform:scale(.35);opacity:.85}
  to  {transform:scale(2);opacity:0}
}

.dguide__label{
  position:absolute;inset-block-start:26px;inset-inline-start:14px;
  white-space:nowrap;padding:6px 12px;border-radius:100px;
  background:var(--ink);color:#fff;
  font-family:var(--font-display);font-size:.72rem;font-weight:600;letter-spacing:-.005em;
  box-shadow:0 4px 14px rgba(12,23,32,.22);
  opacity:0;transform:translateY(-3px);
  transition:opacity var(--m-ui) var(--ease),transform var(--m-ui) var(--ease-out);
}
.dguide.is-labelled .dguide__label,
.dguide.is-static .dguide__label{opacity:1;transform:none}
[dir="rtl"] .dguide__label{inset-inline-start:auto;inset-inline-end:14px}
[dir="rtl"] .dguide__cursor{transform:scaleX(-1)}
[dir="rtl"] .dguide.is-press .dguide__cursor{transform:scaleX(-1) translate(-1px,2px) scale(.9)}

/* the control the guide lands on acknowledges the mimed click */
.is-guided{
  box-shadow:0 0 0 0 rgba(14,155,142,.45);
  animation:guidedPulse 1.1s var(--ease-out) 1;
}
@keyframes guidedPulse{
  0%  {box-shadow:0 0 0 0 rgba(14,155,142,.45)}
  70% {box-shadow:0 0 0 12px rgba(14,155,142,0)}
  100%{box-shadow:0 0 0 0 rgba(14,155,142,0)}
}

/* ── About · connection point ────────────────────────────────────── */
.connect{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s5);padding:var(--s6);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
}
.connect__label{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-block-end:var(--s2);
}
[dir="rtl"] .connect__label{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.8rem;font-weight:600}
.connect__t{font-size:var(--t-sm);color:var(--ink-2);max-width:44ch}
.connect__li{gap:var(--s2)}

/* ── demo hand-off ───────────────────────────────────────────────
   A ~380ms confirmation that the real system is opening, so the
   click never feels like a dead link. */
.handoff{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
}
.handoff.is-on{opacity:1;pointer-events:auto}
.handoff__inner{text-align:center}
.handoff__name{font-family:var(--font-display);font-weight:800;font-size:clamp(1.2rem,3vw,1.8rem);letter-spacing:-.02em}
.handoff__t{
  margin-block-start:var(--s3);font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
[dir="rtl"] .handoff__t{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.82rem}
.handoff__bar{
  width:132px;height:2px;margin:var(--s5) auto 0;border-radius:2px;
  background:var(--line);overflow:hidden;
}
.handoff__bar::after{
  content:"";display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  animation:handoffBar .38s var(--ease-out) forwards;
}
@keyframes handoffBar{from{transform:translateX(-100%)}to{transform:translateX(280%)}}

/* ── browser frame + live preview ────────────────────────────────── */
.frame{
  width:100%;border-radius:10px 10px 0 0;overflow:hidden;
  border:1px solid var(--line-2);border-block-end:0;background:var(--paper);
  box-shadow:0 10px 30px rgba(12,23,32,.08);
}
.frame--lg{border-radius:10px;border-block-end:1px solid var(--line-2)}
.frame__bar{display:flex;align-items:center;gap:5px;padding:8px 12px;background:var(--wash-2);border-block-end:1px solid var(--line)}
.frame__bar i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.frame__bar span{
  margin-inline-start:var(--s3);font-family:var(--font-mono);font-size:.6rem;color:var(--ink-4);
  letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.frame__view{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.frame--lg .frame__view{aspect-ratio:16/9}
.frame__view iframe{
  position:absolute;inset-block-start:0;inset-inline-start:0;border:0;
  width:1440px;height:900px;transform-origin:top left;pointer-events:none;
  opacity:0;transition:opacity .6s var(--ease);
}
[dir="rtl"] .frame__view iframe{transform-origin:top right}
.frame__view iframe.is-ready{opacity:1}

/* CSS placeholder shown until (or instead of) a live preview */
.ghost{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;gap:7px;background:var(--paper)}
.ghost::before{content:"";height:18px;border-radius:4px;background:var(--wash-2);flex-shrink:0}
.ghost::after{content:"";flex:1;border-radius:5px;border:1px solid var(--line);background:linear-gradient(180deg,var(--wash) 0%,var(--paper-2) 100%)}
.ghost--grid::after{background:
  repeating-linear-gradient(90deg,var(--wash) 0 46%,transparent 46% 50%),
  repeating-linear-gradient(0deg,transparent 0 52px,var(--paper) 52px 58px),var(--paper)}
.ghost--flow::after{background:
  radial-gradient(circle at 18% 50%,var(--wash-2) 0 18px,transparent 19px),
  radial-gradient(circle at 50% 50%,rgba(23,169,204,.12) 0 18px,transparent 19px),
  radial-gradient(circle at 82% 50%,var(--accent-soft) 0 18px,transparent 19px),var(--paper)}
.ghost--spine::after{background:
  linear-gradient(90deg,var(--wash) 0 32%,transparent 32%),
  repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 26px),var(--paper)}
.ghost--wall::after{background:repeating-linear-gradient(180deg,var(--paper) 0 20px,var(--wash) 20px 21px),var(--paper)}

/* ── flow ────────────────────────────────────────────────────────── */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) 0}
.flow li{
  display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:600;
  font-size:var(--t-xs);color:var(--ink-2);background:var(--paper);border:1px solid var(--line);
  border-radius:100px;padding:8px 15px;transition:background .3s,color .3s,border-color .3s;
}
.sec--wash .flow li{background:var(--paper)}
.flow li:hover{background:var(--accent-soft);color:var(--teal-d);border-color:rgba(14,155,142,.3)}
.flow li:not(:last-child)::after{content:"→";margin-inline:var(--s2);color:var(--ink-4);font-weight:400}
[dir="rtl"] .flow li:not(:last-child)::after{content:"←"}
.flow--mini li{font-size:.72rem;padding:5px 11px}

/* ── chips ───────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips li{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;color:var(--ink-2);
  border:1px solid var(--line);background:var(--paper-2);border-radius:100px;padding:5px 12px;
}
[dir="rtl"] .chips li{font-family:var(--font-body);letter-spacing:0;font-size:.76rem}
.capblock{margin-block-start:var(--s10)}
.capblock__t{font-size:var(--t-h3);margin-block-end:var(--s4)}

/* ── numbered blocks ─────────────────────────────────────────────── */
.blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s6) var(--s8)}
.block{border-block-start:2px solid var(--line);padding-block-start:var(--s5);transition:border-color .4s}
.block:hover{border-block-start-color:var(--teal)}
.block__n{font-family:var(--font-mono);font-size:var(--t-label);color:var(--teal);letter-spacing:.1em;display:block;margin-block-end:var(--s3)}
.block__t{font-size:var(--t-h3);margin-block-end:var(--s2)}
.block__d{font-size:var(--t-sm);color:var(--ink-3);line-height:1.7}

/* ── narrative stages (solutions / systems) ──────────────────────── */
.stage{padding-block:var(--s6);border-block-end:1px solid var(--line)}
.stage:last-child{border-block-end:0}
.stage__label{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-d);margin-block-end:var(--s4);
}
[dir="rtl"] .stage__label{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.82rem;font-weight:700}
.stage__body{font-size:clamp(1rem,.35vw + .92rem,1.16rem);line-height:1.8;color:var(--ink-2)}

.outcomes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s4)}
.outcomes li{
  position:relative;padding:var(--s5) var(--s5) var(--s5) var(--s10);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink);
}
[dir="rtl"] .outcomes li{padding:var(--s5) var(--s10) var(--s5) var(--s5)}
.outcomes li::before{
  content:"";position:absolute;inset-inline-start:var(--s5);inset-block-start:calc(var(--s5) + 8px);
  width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--accent-soft);
}

/* ── method / process ────────────────────────────────────────────── */
.method{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s6) var(--s8)}
.method__step{border-block-start:2px solid var(--line);padding-block-start:var(--s5);transition:border-color .5s}
.method__step:hover{border-block-start-color:var(--teal)}
.method__n{font-family:var(--font-mono);font-size:var(--t-label);color:var(--teal);letter-spacing:.1em;display:block;margin-block-end:var(--s3)}
.method__name{font-size:var(--t-h3);margin-block-end:var(--s2)}
.method__desc{font-size:var(--t-sm);color:var(--ink-3);line-height:1.68}

/* ── layer visual (home philosophy) ──────────────────────────────── */
.layerviz{
  position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3.5vw,48px);box-shadow:var(--sh-sm);
}
.layerviz .scene{
  position:relative;width:100%;aspect-ratio:1/1;max-width:420px;
  margin-inline:auto;min-height:240px;
}
.layerviz__list{display:flex;flex-direction:column;gap:0}
.layerviz__list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);
  align-items:baseline;padding-block:var(--s4);border-block-end:1px solid var(--line);
}
.layerviz__list li:last-child{border-block-end:0}
.layerviz__list b{font-family:var(--font-display);font-size:.98rem;color:var(--ink);min-width:104px}
.layerviz__list span{font-size:var(--t-sm);color:var(--ink-3);line-height:1.6}

/* ── chain (about) ───────────────────────────────────────────────── */
.chain{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3.5vw,48px);box-shadow:var(--sh-sm);
}
.chain__i{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:100px;
  background:var(--paper-2);position:relative;
  transition:transform .4s var(--ease-out),border-color .3s,box-shadow .3s;
}
.chain__i:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--sh-sm)}
.chain__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--paper);border:2px solid var(--ink-4)}
.chain__i[data-tone="cyan"] .chain__dot{border-color:var(--cyan)}
.chain__i[data-tone="teal"] .chain__dot{border-color:var(--teal)}
.chain__i[data-tone="amber"] .chain__dot{border-color:var(--amber)}
.chain__l{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap}
.chain__i:not(:last-child)::after{content:"→";margin-inline-start:var(--s3);color:var(--ink-4);font-size:.85rem}
[dir="rtl"] .chain__i:not(:last-child)::after{content:"←"}

/* ── demo band (system detail) ───────────────────────────────────── */
.demoband{margin-block-start:var(--s10)}
.demoband__cta{display:flex;justify-content:center;margin-block-start:var(--s6)}

/* ── contact page ────────────────────────────────────────────────── */
.contact{
  position:relative;min-height:calc(100svh - var(--nav-h));
  display:grid;place-items:center;overflow:hidden;
  padding-block:calc(var(--nav-h) + var(--s16)) var(--s16);
  background:radial-gradient(100% 70% at 50% 40%,#FFFFFF 0%,#F5FAFC 55%,var(--wash) 100%);
}
/* The contact page carries the same honeycomb as the closing band on
   every other page, and therefore needs the same guarantee: the field
   is masked away from the centre so the area the text occupies is
   always the quietest part of it, whatever the scene draws there.
   Without this the structure competes with the one thing the page
   exists to communicate. */
.contact .scene--bg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(56% 62% at 50% 46%,transparent 0%,rgba(0,0,0,.4) 48%,#000 80%);
          mask-image:radial-gradient(56% 62% at 50% 46%,transparent 0%,rgba(0,0,0,.4) 48%,#000 80%);
}
.contact__inner{position:relative;z-index:1;text-align:center;max-width:720px}
.contact .crumb{justify-content:center}
.contact__title{font-size:var(--t-h1);letter-spacing:-.03em}
.contact__lede{margin-block-start:var(--s5);color:var(--ink-2);font-size:1.08rem;line-height:1.75;max-width:48ch;margin-inline:auto}
.contact__actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-block-start:var(--s10)}
.contact__mail{margin-block-start:var(--s6)}
.contact__mail{display:flex;justify-content:center}
.contact__mail .maillink{font-size:clamp(1.02rem,.9vw + .82rem,1.35rem);color:var(--ink)}
.contact__status{
  min-height:24px;margin-block-start:var(--s3);font-size:var(--t-xs);font-weight:600;
  color:var(--teal-d);opacity:0;transition:opacity .3s;
}
.contact__status.is-on{opacity:1}
.contact__links{display:flex;flex-wrap:wrap;gap:var(--s6);justify-content:center;margin-block-start:var(--s16)}
.contact__links a{
  font-size:var(--t-xs);color:var(--ink-3);border-block-end:1px solid transparent;
  padding-block-end:2px;transition:color .25s,border-color .25s;
}
.contact__links a:hover{color:var(--ink);border-block-end-color:var(--line-2)}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:1024px){
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layerviz{grid-template-columns:minmax(0,1fr)}
  .layerviz .scene{order:2;max-width:340px}
}
@media (max-width:860px){
  .swall--home{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .gcards{grid-template-columns:minmax(0,1fr)}
  .swall,.vcards,.solcards,.blocks,.method,.outcomes{grid-template-columns:minmax(0,1fr)}
  .flow li{font-size:.72rem;padding:6px 12px}
  .flow li:not(:last-child)::after{margin-inline:5px}
  .chain{flex-direction:column;align-items:stretch}
  .chain__i{justify-content:flex-start}
  .chain__i:not(:last-child)::after{content:"↓";margin-inline-start:auto}
  [dir="rtl"] .chain__i:not(:last-child)::after{content:"↓"}
  .layerviz__list li{grid-template-columns:minmax(0,1fr)}
  .contact__actions .btn{flex:1 1 100%}
  /* these live in modules.css so they can win against the base rule
     above, which loads later than core.css and would otherwise take it */
  .contact__links a{padding-block:12px;display:inline-block;padding-block-end:12px}
  .contact__links{gap:var(--s3) var(--s6)}
  .contact__links{gap:var(--s4)}
}

/* ── 3D tilt, desktop pointers only ──────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .scard[data-tilt]{will-change:transform}
}
@media (prefers-reduced-motion:reduce){
  .scard[data-tilt]{transform:none !important}
}

/* ── entity band + FAQ ───────────────────────────────────────────
   A ruled ledger, not a fourth card grid.

   The homepage already carries three card grids — capability groups,
   live systems, process steps. A fourth would read as more of the same
   and would quietly demote the one section whose job is to be read
   rather than scanned. Ruled term/definition pairs read as reference
   material, which is exactly what this is, and the hairlines make the
   pairing legible before a single word is.

   The reset zeroes p/h1-4/ul/ol but not dl/dt/dd, so the UA's 40px
   indent on <dd> is cleared here rather than inherited into an RTL
   layout where it would sit on the wrong side. */
.entity,.faq{margin:0}
.entity dd,.faq dd{margin:0}

.sec--entity{background:var(--paper-2)}

.entity{border-block-start:1px solid var(--line-2)}
.entity__row{
  display:grid;
  grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:var(--s4) clamp(24px,4vw,64px);
  padding-block:clamp(18px,2.4vw,30px);
  border-block-end:1px solid var(--line);
  align-items:baseline;
}
.entity__term{
  position:relative;padding-inline-start:var(--s5);
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  line-height:1.4;color:var(--ink);
}
.entity__term::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.5em;
  width:7px;height:7px;border-radius:50%;background:var(--teal);
}
.entity__def{font-size:var(--t-sm);color:var(--ink-2);line-height:1.78;max-width:66ch}

.faq{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3vw,44px) clamp(32px,5vw,72px);
}
.faq__item{position:relative;border-block-start:1px solid var(--line-2);padding-block-start:var(--s5)}
.faq__item::before{
  content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;
  width:30px;height:2px;background:var(--teal);
}
.faq__q{font-family:var(--font-display);font-weight:700;font-size:1.06rem;line-height:1.45;color:var(--ink)}
.faq__a{margin-block-start:var(--s3);font-size:var(--t-sm);color:var(--ink-2);line-height:1.78}

@media (max-width:900px){
  .faq{grid-template-columns:1fr;gap:var(--s8)}
}
@media (max-width:820px){
  .entity__row{grid-template-columns:1fr;gap:var(--s3);padding-block:var(--s6)}
  .entity__def{padding-inline-start:var(--s5)}
}

/* ── prose ────────────────────────────────────────────────────────
   Continuous reading, which nothing else on this site does. Every
   other text block here is a card, a label or a one-line summary, so
   there was no measure to inherit and one is set explicitly: a column
   capped in `ch` (which is what the unit is for — it tracks the font
   the text is actually set in) and a line-height loose enough that
   four consecutive paragraphs do not read as a wall.

   The first paragraph carries the definition, so it is set a step
   larger. That is a reading cue, not decoration: it marks where the
   answer to the section's question begins. */
.prose{max-width:74ch;display:flex;flex-direction:column;gap:var(--s6)}
.prose__p{font-size:1.02rem;line-height:1.82;color:var(--ink-2)}
.prose__p:first-child{font-size:1.14rem;line-height:1.72;color:var(--ink)}

@media (max-width:640px){
  .prose{gap:var(--s5)}
  .prose__p{font-size:.96rem;line-height:1.78}
  .prose__p:first-child{font-size:1.05rem}
}

/* ── attribution byline ───────────────────────────────────────────
   Provenance, not an action — so it sits below the CTA row and is
   pitched a full step quieter than it. The company name is the only
   part that is a link, which is deliberate: the anchor text is the
   brand, and the target is the page that defines it. */
.byline{margin-block-start:var(--s5);font-size:var(--t-xs);color:var(--ink-3);line-height:1.6}
.byline a{
  color:var(--ink-2);font-weight:600;text-decoration:none;
  border-block-end:1px solid var(--line-2);padding-block-end:1px;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out);
}
.byline a:hover{color:var(--teal-d);border-block-end-color:var(--teal)}
.byline a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

/* ── 404 ─────────────────────────────────────────────────────────
   A 404 is the highest-exit-rate page on any site, so this one is
   built as a junction rather than an apology: four real doors, each
   naming what is behind it, plus the email address in case the broken
   link was ours. The only thing the page does not do is send the
   visitor back to the homepage and make them start again. */
.sec--404{
  min-height:min(72svh, 760px);
  display:flex;align-items:center;
  padding-block:var(--sec-y);
}
.e404__title{font-size:var(--t-h1);margin-block-start:var(--s4);max-width:18ch}
.e404__lede{
  margin-block-start:var(--s5);color:var(--ink-2);
  font-size:1.05rem;line-height:1.75;max-width:56ch;
}
.e404__doors{
  margin-block-start:clamp(32px,4.5vw,56px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s4);max-width:900px;
}
.e404__door{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s5) var(--s6);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  text-decoration:none;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .3s;
}
.e404__door:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--line-2)}
.e404__door-name{font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:var(--ink)}
.e404__door-note{font-size:var(--t-xs);color:var(--ink-3);line-height:1.6}
.e404__mail{margin-block-start:clamp(28px,4vw,44px);font-size:var(--t-sm);color:var(--ink-3)}
.e404__mail a{color:var(--teal-d);font-weight:600}

@media (max-width:560px){
  .sec--404{min-height:0}
  .e404__doors{grid-template-columns:1fr}
}

/* ── workflow assessment ─────────────────────────────────────────
   Styled as an instrument rather than a marketing quiz: numbered
   questions, a ruled column, monospace figures. The visual claim is
   "this was made by engineers", which is the only claim the page makes
   about Omniwire at all. */
.qz{max-width:52rem}
.qz__intro{
  font-size:1.02rem;line-height:1.75;color:var(--ink-2);
  padding-inline-start:var(--s5);border-inline-start:2px solid var(--teal);
  margin-block-end:clamp(32px,4vw,52px);
}

.qz__q{
  border:0;padding:0;margin:0 0 clamp(24px,3vw,38px);
  padding-block-end:clamp(22px,2.6vw,30px);
  border-block-end:1px solid var(--line);
}
.qz__q:last-of-type{border-block-end:0}
.qz__legend{display:flex;gap:var(--s4);align-items:baseline;margin-block-end:var(--s5);width:100%}
.qz__num{
  font-family:var(--font-mono);font-size:var(--t-xs);color:var(--teal);
  letter-spacing:.1em;flex:none;padding-block-start:2px;
}
.qz__text{font-family:var(--font-display);font-weight:700;font-size:1.06rem;line-height:1.45;color:var(--ink)}

.qz__opts{display:flex;flex-direction:column;gap:var(--s2);padding-inline-start:calc(var(--s4) + 2.1rem)}
.qz__opt{display:block;cursor:pointer;position:relative}
.qz__opt input{position:absolute;opacity:0;width:0;height:0}
.qz__opt-face{
  display:block;padding:11px var(--s5);
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);
  background:var(--paper);
  transition:border-color .2s,background .2s,color .2s;
}
.qz__opt:hover .qz__opt-face{border-color:var(--line-2);color:var(--ink)}
.qz__opt input:checked + .qz__opt-face{
  border-color:var(--teal);background:var(--accent-soft);color:var(--ink);font-weight:500;
}
.qz__opt input:focus-visible + .qz__opt-face{outline:2px solid var(--teal);outline-offset:2px}
.qz__q.is-missing .qz__opt-face{border-color:var(--amber)}

.qz__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-block-start:var(--s8)}
.qz__progress{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.04em}
.qz.is-complete .qz__progress{color:var(--teal-d)}

/* ── result ──────────────────────────────────────────────────────── */
.qz__result{
  margin-block-start:clamp(36px,4.5vw,60px);
  padding:clamp(24px,3.2vw,40px);
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh);
}
.qz__result:focus{outline:none}
.qz__result.is-override{border-color:var(--amber)}
.qz__score-line{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-block-end:var(--s6)}
.qz__score{font-family:var(--font-mono);font-size:clamp(2.2rem,4vw,3rem);font-weight:500;color:var(--teal-d);line-height:1}
.qz__of{font-family:var(--font-mono);font-size:1rem;color:var(--ink-4)}
.qz__band{
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--ink);
  padding-inline-start:var(--s4);margin-inline-start:var(--s3);
  border-inline-start:1px solid var(--line-2);
}
.qz__result.is-override .qz__band{color:var(--amber)}

.qz__bars{display:flex;flex-direction:column;gap:var(--s3);margin-block-end:var(--s6)}
.qz__bar{display:grid;grid-template-columns:minmax(0,11rem) 1fr auto;gap:var(--s4);align-items:center}
.qz__bar-label{font-size:var(--t-xs);color:var(--ink-2)}
.qz__bar-track{height:6px;background:var(--wash-2);border-radius:3px;overflow:hidden}
.qz__bar-fill{display:block;height:100%;background:var(--teal);border-radius:3px}
.qz__bar-val{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-3)}

.qz__verdict{font-size:1.02rem;line-height:1.75;color:var(--ink);margin-block-end:var(--s5)}
.qz__next{
  font-size:var(--t-sm);line-height:1.75;color:var(--ink-2);
  padding-inline-start:var(--s5);border-inline-start:2px solid var(--teal);
}
.qz__result.is-override .qz__next{border-inline-start-color:var(--amber)}
.qz__advice{margin-block-start:var(--s5);font-size:var(--t-xs);color:var(--ink-3)}
.qz__cta{display:flex;flex-wrap:wrap;gap:var(--s4);margin-block-start:var(--s8)}

/* ── the model, stated openly ────────────────────────────────────
   Kept visible rather than hidden behind the result. A diagnostic that
   will not show its own scoring is a horoscope. */
.qz__bands{margin-block-start:clamp(48px,6vw,80px);padding-block-start:clamp(28px,3.5vw,44px);border-block-start:1px solid var(--line-2)}
.qz__bands-title{font-size:var(--t-h3);margin-block-end:var(--s3)}
.qz__bands-note{font-size:var(--t-sm);color:var(--ink-3);line-height:1.7;margin-block-end:var(--s6);max-width:62ch}
.qz__band-list{margin:0}
.qz__band-row{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:var(--s3) var(--s8);
  padding-block:var(--s5);border-block-end:1px solid var(--line);
}
.qz__band-name{display:flex;align-items:baseline;gap:var(--s3);font-family:var(--font-display);font-weight:700;color:var(--ink)}
.qz__band-range{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--teal);font-weight:400}
.qz__band-def{font-size:var(--t-sm);color:var(--ink-2);line-height:1.7;margin:0}

@media (max-width:760px){
  .qz__opts{padding-inline-start:0}
  .qz__bar{grid-template-columns:1fr auto;gap:var(--s2)}
  .qz__bar-track{grid-column:1 / -1;order:3}
  .qz__band-row{grid-template-columns:1fr;gap:var(--s2)}
  .qz__band{margin-inline-start:0;padding-inline-start:0;border-inline-start:0}
}

/* ── social row ──────────────────────────────────────────────────
   Machined discs, from the same family as the buttons.

   The first version was thin outlined circles, left-aligned inside a
   centred column. Two faults: the alignment fought the layout, and an
   outline has no presence — it reads as a placeholder for an icon
   rather than as a control.

   These use the site's existing physical vocabulary rather than a new
   one: a lit top edge, a solid offset that is the object's SIDE, and a
   contact shadow beneath it. Light comes from the upper left, as it
   does on every other raised object here. On hover the side deepens
   and the object lifts — the same motion the buttons make — and the
   platform's own colour arrives only then, so three saturated brand
   colours never sit permanently in a restrained layout.

   data-tactile opts them into the shared cursor engine, so --lift and
   the pointer position are written by the same rAF-batched listener
   that drives every button. No new JavaScript. */
.soc{
  display:flex;align-items:center;gap:var(--s4);
  margin:0;padding:0;list-style:none;
}

.soc__link{
  --lift:0;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  color:var(--ink-2);
  background:var(--paper);
  border:1px solid var(--line-2);
  /* the object: lit edge · side · contact shadow */
  box-shadow:
    inset 0 1px 0 var(--lit-edge),
    0 2px 0 rgba(196,213,226,.55),
    0 2px 5px rgba(12,23,32,.06);
  transform:translateY(calc(var(--lift) * -2px));
  transition:
    transform var(--m-ui) var(--ease-out),
    box-shadow var(--m-ui) var(--ease-out),
    color var(--m-ui) var(--ease),
    border-color var(--m-ui) var(--ease),
    background-color var(--m-ui) var(--ease);
}

/* the pointer pool, matching .btn--ghost */
.soc__link::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70px 70px at calc(var(--px,.5) * 100%) calc(var(--py,.5) * 100%),
             rgba(255,255,255,calc(.9 * var(--lift))),transparent 70%);
}

.soc__icon{width:20px;height:20px;display:block;position:relative;z-index:1}

@media (hover:hover) and (pointer:fine){
  .soc__link:hover{--lift:1}
}
.soc__link.is-lifted{--lift:1}

.soc__link:hover,.soc__link.is-lifted{
  border-color:var(--ink-4);
  box-shadow:
    inset 0 1px 0 var(--lit-edge),
    0 4px 0 rgba(196,213,226,.65),
    0 12px 24px rgba(12,23,32,.10),
    0 2px 5px rgba(12,23,32,.05);
}

/* the platform's own colour, revealed on contact only */
.soc__link--linkedin:hover,.soc__link--linkedin.is-lifted{
  color:#0A66C2;border-color:rgba(10,102,194,.45);
  box-shadow:inset 0 1px 0 var(--lit-edge),0 4px 0 rgba(10,102,194,.22),
             0 12px 26px rgba(10,102,194,.18),0 2px 5px rgba(12,23,32,.06);
}
.soc__link--instagram:hover,.soc__link--instagram.is-lifted{
  color:#C13584;border-color:rgba(193,53,132,.45);
  box-shadow:inset 0 1px 0 var(--lit-edge),0 4px 0 rgba(193,53,132,.22),
             0 12px 26px rgba(193,53,132,.18),0 2px 5px rgba(12,23,32,.06);
}
.soc__link--whatsapp:hover,.soc__link--whatsapp.is-lifted{
  color:#1EBE5D;border-color:rgba(30,190,93,.5);
  box-shadow:inset 0 1px 0 var(--lit-edge),0 4px 0 rgba(30,190,93,.24),
             0 12px 26px rgba(30,190,93,.20),0 2px 5px rgba(12,23,32,.06);
}

/* press — the whole object settles, as the buttons do */
.soc__link:active{
  transition-duration:var(--m-micro);
  transform:translateY(1px) scale(.97);
  box-shadow:
    inset 0 1px 2px rgba(12,23,32,.10),
    0 1px 0 rgba(196,213,226,.5);
}

.soc__link:focus-visible{outline:2px solid var(--teal);outline-offset:4px}

/* ── contexts ─────────────────────────────────────────────────────── */
.soc--foot{margin-block-start:var(--s5);gap:var(--s3)}
.soc--foot .soc__link{width:46px;height:46px}
.soc--foot .soc__icon{width:17px;height:17px}

/* the contact page is a centred column; the row centres with it */
.soc--contact{justify-content:center;gap:clamp(14px,2.2vw,22px)}

.contact__social{margin-block-start:clamp(30px,4.4vw,48px);text-align:center}
.contact__social-label{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);margin-block-end:var(--s5);
}

/* one button, given room of its own */
.contact__founders{
  margin-block-start:clamp(34px,5vw,56px);
  padding-block-start:clamp(28px,4vw,44px);
  border-block-start:1px solid var(--line);
  display:flex;justify-content:center;
}

@media (prefers-reduced-motion:reduce){
  .soc__link,.soc__link:hover,.soc__link:active{transform:none}
}


/* ── secondary contact channels ──────────────────────────────────
   Two quiet cards under the primary address. They are deliberately
   lighter than the hello@ lockup above them: the contact page exists
   to start a project conversation, and three addresses of equal weight
   would make the visitor choose before they can write to anyone.

   The address is monospace because it is a machine string — the same
   treatment the site already gives node numbers and channel labels. */
.contact__channels{
  margin-block-start:clamp(26px,3.6vw,40px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:var(--s4);
  text-align:start;
}
.chan{
  display:flex;flex-direction:column;gap:3px;
  padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);
  text-decoration:none;
  transition:border-color .3s,background .3s,transform .3s var(--ease-out);
}
.chan:hover{border-color:var(--line-2);background:var(--paper-2);transform:translateY(-2px)}
.chan:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.chan__label{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.chan__addr{
  font-family:var(--font-mono);font-size:.86rem;color:var(--teal-d);
  /* long addresses wrap instead of forcing the card wider */
  overflow-wrap:anywhere;line-height:1.5;
}
.chan__note{font-size:var(--t-xs);color:var(--ink-4);line-height:1.5}

@media (prefers-reduced-motion:reduce){ .chan:hover{transform:none} }

/* ── footer locations ─────────────────────────────────────────────
   Two addresses on every route, so weight matters. The city carries
   the reading face and the street sits under it at caption size — the
   glance reads "Riyadh, Islamabad" and the detail is there for anyone
   who needs it. No pins, no map buttons: this is reference, not a
   call to action. */
.foot__places{
  margin-block-start:var(--s5);display:flex;flex-direction:column;gap:var(--s4);
  list-style:none;padding:0;
}
.foot__places li{position:relative;padding-inline-start:14px}
.foot__places li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.7;
}
.foot__city{
  display:block;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);line-height:1.5;
}
.foot__street{
  display:block;margin-block-start:2px;
  font-size:var(--t-label);color:var(--ink-4);line-height:1.55;
  /* Arabic and long English street lines both wrap rather than
     widening the brand column */
  overflow-wrap:anywhere;
}