/* حلول التطوير · Landing · Concept 3: light mode, "the engineering drawing".
   A white sheet with fine guide lines and crosshairs; illustrations in hairline grey, where the accent blue carries what
   is done or working and a light daylight tint fills what is moving or active (always with ink on it).
   Palette: Concept 1's Ink & Daylight, in light (the person, 8 Nov). Illustrations: cult-ui (MIT) ported to SVG, CSS and GSAP. */

/* ---------------------------------------------------------------- fonts (OFL, local) */
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(fonts/IBMPlexSansArabic-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-display:swap;src:url(fonts/IBMPlexSansArabic-Medium.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url(fonts/IBMPlexSansArabic-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url(fonts/geist-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:500;font-display:swap;src:url(fonts/geist-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:600;font-display:swap;src:url(fonts/geist-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:500;font-display:swap;src:url(fonts/geist-mono-latin-500-normal.woff2) format("woff2")}

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#fff;--paper:#F6F7F9;--paper-2:#EDF0F4;
  --line:#D6D8DC;--line-2:#E8EBF0;--line-d:#BCC3CD;--cross:#98A0AC;
  --ink:#0E1A2B;--ink-2:#1F2A3A;--muted:#556274;
  --blue:#2457F5;--tint:#D3DDFD;--blue-2:#1C47D6;--tint-soft:#EEF2FE;--dot:#DCE1E7;
  --logo-a:#2457F5;
  --sh:0 1px 2px rgba(14,26,43,.06),0 14px 32px -16px rgba(14,26,43,.22);
  --wrap:1200px;--g:clamp(16px,4vw,40px);--sec:clamp(88px,9vw,140px);
  --edge:max(var(--g),calc(50% - var(--wrap) / 2));
  --d1:clamp(38px,5.2vw,78px);--d2:clamp(30px,3.1vw,46px);--d3:clamp(21px,1.8vw,27px);--t0:clamp(18px,1.35vw,21px);
  --tl:clamp(17px,1.3vw,19px);--tb:17px;--ts:14px;--tm:13px;
  --f-d:"IBM Plex Sans Arabic",system-ui,sans-serif;--f-b:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-m:"Geist Mono","IBM Plex Sans Arabic",ui-monospace,Menlo,monospace;
  --ex:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
:root[lang=en]{--f-d:"Geist","IBM Plex Sans Arabic",system-ui,sans-serif;--f-b:"Geist","IBM Plex Sans Arabic",system-ui,sans-serif;--tb:16px}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--tb)/1.85 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:clip}
:root[lang=en] body{line-height:1.6}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,pre{margin:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{position:relative;width:min(100% - 2 * var(--g),var(--wrap));margin-inline:auto}
.skip{position:absolute;z-index:100;inset-inline-start:16px;top:-80px;padding:10px 16px;border-radius:8px;background:var(--ink);color:#fff;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nobr{white-space:nowrap}
.lg-a{fill:var(--logo-a)}
.logo,.ft-logo{fill:currentColor;color:var(--ink)}
main,.ft,.tag,.nav{position:relative;z-index:1}

/* the review label (the person, 8 Nov): this page is the landing page of Concept 3 */
.tag{padding:8px var(--g);background:var(--paper-2);color:var(--muted);font-size:var(--ts);line-height:1.5}

/* ---------------------------------------------------------------- the drawing sheet: guides, beams falling down them, crosshairs */
.guides{position:fixed;inset:0;z-index:0;pointer-events:none}
.g{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2);overflow:hidden}
.g-s{left:var(--edge)}.g-e{right:var(--edge)}
.g::after{content:"";position:absolute;left:0;top:-160px;width:1px;height:160px;background:linear-gradient(transparent,var(--blue) 85%,var(--tint));
  animation:fall 9s linear infinite}
.g-e::after{animation-delay:4.5s}
@keyframes fall{from{transform:translateY(0)}to{transform:translateY(calc(100vh + 160px))}}
.sec-line{border-top:1px solid var(--line)}
.sec-line::before,.sec-line::after{content:"";position:absolute;z-index:2;top:-6px;width:11px;height:11px;pointer-events:none;
  background:linear-gradient(var(--cross),var(--cross)) center/1px 100% no-repeat,linear-gradient(var(--cross),var(--cross)) center/100% 1px no-repeat}
.sec-line::before{left:calc(var(--edge) - 5px)}.sec-line::after{right:calc(var(--edge) - 5px)}
.sec-line{position:relative}

/* type */
.d1{font:600 var(--d1)/1.32 var(--f-d);text-wrap:balance}
.d2{font:600 var(--d2)/1.35 var(--f-d);text-wrap:balance}
.d3{font:600 var(--d3)/1.5 var(--f-d);text-wrap:balance}
.t0{font:600 var(--t0)/1.5 var(--f-d)}
:root[lang=en] .d1{line-height:1.04;letter-spacing:-.035em}
:root[lang=en] .d2{line-height:1.1;letter-spacing:-.03em}
:root[lang=en] .d3{line-height:1.25;letter-spacing:-.02em}
:root[lang=en] .t0{line-height:1.3;letter-spacing:-.01em}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border:1px solid transparent;border-radius:999px;
  font:500 var(--tb)/1.2 var(--f-b);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .14s,background-color .18s,border-color .18s,color .18s}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:40px;padding:9px 18px;font-size:15px}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.btn-line{background:#fff;color:var(--ink);border-color:var(--line-d)}
.btn-line:hover{border-color:var(--ink)}
.btn-accent{background:var(--blue);color:#fff}
.btn-accent:hover{background:var(--blue-2)}
.btn.is-off{color:var(--muted);cursor:not-allowed}
.btn.is-off:active{transform:none}
.lnk{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--blue);
  text-decoration-thickness:1.5px;text-underline-offset:6px}
.lnk:hover{color:var(--blue)}
.arr::before{content:"→";font-family:var(--f-m);display:inline-block;transition:transform .3s var(--ex)}
[dir=rtl] .arr::before{content:"←"}
.lnk:hover .arr::before{transform:translateX(4px)}
[dir=rtl] .lnk:hover .arr::before{transform:translateX(-4px)}
.gap{display:inline-block;padding:4px 10px;border:1px dashed #858E9B;border-radius:6px;background:#fff;color:var(--muted);font-size:var(--ts);line-height:1.6}

/* ---------------------------------------------------------------- header */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);border-bottom:1px solid transparent;
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);transition:border-color .3s}
.nav.is-scrolled,.menu-open .nav{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:40px;height:72px}
.nav-brand{display:flex;align-items:center;flex:none}
.logo{height:28px;width:auto}
.nav-links ul{display:flex;gap:30px;list-style:none;padding:0}
.nav-links a,.nav-lang{color:var(--muted);text-decoration:none;font-size:15px;transition:color .18s}
.nav-links a:hover,.nav-lang:hover{color:var(--ink)}
/* the menu button comes before the links in the source (Tab goes from it into the open menu); CSS order keeps it at the end */
.nav-end{order:1;display:flex;align-items:center;gap:22px;margin-inline-start:auto}
.nav-menu{order:2;display:none;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line-d);border-radius:50%;
  background:#fff;color:var(--ink);cursor:pointer}
.nav-menu-box{position:relative;display:block;width:16px;height:10px}
.nav-menu-box i{position:absolute;inset-inline:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform .24s var(--ex),top .24s var(--ex)}
.nav-menu-box i:first-child{top:0}.nav-menu-box i:last-child{top:8.5px}
.menu-open .nav-menu-box i:first-child{top:4.25px;transform:rotate(45deg)}
.menu-open .nav-menu-box i:last-child{top:4.25px;transform:rotate(-45deg)}

/* ---------------------------------------------------------------- hero */
.hero{padding-top:clamp(48px,5vw,80px);overflow-x:clip}
.hero-in{display:grid;justify-items:center;text-align:center}
.hero .d1{max-width:15.5em;margin-bottom:20px;animation:rise 1.2s var(--ex) backwards}
:root[lang=en] .hero .d1{max-width:13em}
.lead{max-width:36em;color:var(--muted);font-size:var(--tl);margin-bottom:30px;text-wrap:pretty;animation:rise-in .9s var(--ex) .25s backwards}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;animation:rise-in .9s var(--ex) .35s backwards}
@keyframes rise{from{transform:translateY(.3em)}}
@keyframes rise-in{from{opacity:0;transform:translateY(16px)}}
.hero-vis{position:relative;margin-top:clamp(32px,3.4vw,52px);height:clamp(240px,24vw,340px);animation:rise-in 1.2s var(--ex) .45s backwards;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.circuit{width:100%;height:100%}
.trace{fill:none;stroke:#D3D9E1;stroke-width:1.5;stroke-linejoin:round}
.beam{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:46 calc(var(--len) * 1px);stroke-dashoffset:46;animation:beam var(--du) cubic-bezier(.5,0,.6,1) var(--dl) infinite}
@keyframes beam{0%{stroke-dashoffset:46}100%{stroke-dashoffset:calc(var(--len) * -1px)}}
.via{fill:#fff;stroke:#BCC3CD;stroke-width:1.5}
.pin{fill:#9AA3B0}
.chip-halo{fill:var(--tint-soft);stroke:var(--tint);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:halo 3.2s ease-in-out infinite}
@keyframes halo{50%{transform:scale(1.06);opacity:.55}}
.chip-body{fill:var(--ink)}
.chip-edge{fill:none;stroke:#384250;stroke-width:1.2}
.chip-a{fill:var(--blue)}.chip-b{fill:#F6F7F9}

/* ---------------------------------------------------------------- sections */
.sec{padding-block:var(--sec)}
.head{max-width:720px;margin-bottom:clamp(36px,4.5vw,60px)}
.head .d2{margin-bottom:14px}
.intro{color:var(--muted);font-size:var(--tl);text-wrap:pretty}

/* ---------------------------------------------------------------- bento: cells share hairlines like a drawing sheet */
.sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  grid-template-areas:"idea idea idea idea idea idea idea plain plain plain plain plain"
                      "serv serv serv serv serv serv prod prod prod prod prod prod"
                      "cta cta cta cta cta cta cta cta cta cta cta cta"}
.cell{position:relative;display:flex;flex-direction:column;gap:28px;padding:clamp(24px,2.6vw,36px);background:#fff}
.cell p{color:var(--muted)}
.cell-text{display:grid;gap:10px;justify-items:start}
.cell-text .lnk{margin-top:6px}
.art{position:relative;display:grid;place-items:center;height:280px;border-radius:12px;overflow:hidden;
  background-color:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:16px 16px}
.c-idea{grid-area:idea}.c-plain{grid-area:plain}.c-serv{grid-area:serv}.c-prod{grid-area:prod}.c-cta{grid-area:cta}
.c-idea .art{height:400px;grid-template:minmax(0,1fr)/minmax(0,1fr)}
.c-plain .art{height:auto;min-height:400px}
.c-prod .art{padding-inline:14px}

/* idea: the mark drafted on a grid. Outlined tiles square up, snap to the guides, fill in and become the mark (c3.js).
   The settled state (the mark, its registration marks) is what shows without JS or with reduced motion. */
.draft{width:min(100%,400px);height:100%;overflow:visible}
.dr-v,.dr-h{stroke:#CDD3DC;stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.dr-reg{fill:none;stroke:var(--blue);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dr-mark-a{fill:var(--blue)}.dr-mark-b{fill:var(--ink)}
.dr-t{opacity:0;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dr-a{fill:var(--blue);stroke:var(--blue)}.dr-b{fill:var(--ink);stroke:var(--ink)}

/* plain language: cult-ui comment-bubble + cursor → the three clauses arrive as a thread, the cursor follows */
.c-plain .art{display:grid;align-content:center;padding:32px 28px}
.thread{position:relative;display:grid;gap:12px;justify-items:start;font:500 var(--d3)/1.5 var(--f-d);color:var(--ink)}
.bub{display:block;max-width:100%;padding:12px 18px;border:1px solid var(--line);border-radius:16px;border-start-start-radius:6px;background:#fff;box-shadow:var(--sh);
  transition:background-color .2s,border-color .2s}
.bub.is-on{background:var(--tint-soft);border-color:var(--blue)}
.cursor{position:absolute;top:0;left:0;fill:var(--ink);stroke:#fff;stroke-width:1.5;opacity:0;pointer-events:none;overflow:visible}

/* services track: cult-ui mock-browser-window, holding a miniature of this page that draws itself */
.browser{width:min(100%,440px);border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--sh);overflow:hidden}
.br-bar{display:flex;align-items:center;gap:12px;height:32px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--paper)}
.br-dots{display:flex;gap:6px}.br-dots i{width:9px;height:9px;border-radius:50%;background:#D3D9E1}
.br-url{flex:1;height:14px;max-width:180px;margin-inline:auto;border-radius:7px;background:#fff;border:1px solid var(--line)}
.br-page{position:relative;display:grid;justify-items:center;gap:8px;padding:0 0 16px}
/* a selection frame, as in a design tool, moves from part to part of the finished miniature (c3.js); hidden without motion */
.br-sel{position:absolute;top:0;left:0;width:0;height:0;border:1.5px solid var(--blue);border-radius:6px;opacity:0;pointer-events:none}
.br-sel::before{content:"";position:absolute;top:-4px;inset-inline-start:-4px;width:7px;height:7px;border-radius:2px;background:var(--tint);border:1.5px solid var(--blue)}
.bp{display:block;border-radius:4px;background:var(--ink)}
.bp-strip{width:100%;height:7px;border-radius:0;background:var(--paper-2)}
.bp-nav{display:flex;justify-content:space-between;width:100%;padding:6px 16px 10px}
.bp-logo{width:52px;height:9px;background:var(--blue)}.bp-pill{width:34px;height:12px;border-radius:9px}
.bp-t1{width:62%;height:11px}.bp-t2{width:44%;height:11px;margin-bottom:4px}
.bp-l{width:52%;height:6px;background:#B7C0CC;margin-bottom:6px}
.bp-ctas{display:flex;gap:6px;margin-bottom:10px}.bp-c1{width:44px;height:14px;border-radius:9px}.bp-c2{width:44px;height:14px;border-radius:9px;background:#fff;border:1px solid var(--line-d)}
.bp-circ{display:flex;align-items:center;gap:6px;width:86%}
.bp-circ i{flex:1;height:1px;background:#C8CFD9}
.bp-chip{width:22px;height:22px;border-radius:6px;background:var(--ink);box-shadow:0 0 0 4px var(--tint-soft)}

/* products track: a tower that builds course by course; one block still waits */
.tower{display:grid;grid-template-columns:repeat(4,minmax(0,64px));grid-template-rows:repeat(4,50px);gap:8px;align-content:center;justify-content:center}
.blk{grid-row:calc(var(--r) + 1);grid-column:calc(var(--k) + 1);border-radius:10px;background:#fff;border:1.5px solid #9AA3B0}
.blk-wait{background:var(--tint-soft);border:1.5px dashed var(--blue);animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}

/* the call to action: cult-ui border-beam → a short light runs around the card's edge */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.c-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-block:clamp(32px,3.4vw,48px);isolation:isolate}
.cta-text{display:grid;gap:8px}
.beam-ring{position:absolute;inset:0;z-index:-1;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0deg 300deg,var(--tint) 330deg,var(--blue) 352deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:orbit 7s linear infinite}
@keyframes orbit{to{--ang:360deg}}

/* ---------------------------------------------------------------- how we work: steps beside a sticky route */
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.hs{position:relative;display:grid;align-content:start;gap:10px;min-height:42vh;padding-block:28px 40px;padding-inline-start:36px;border-top:1px solid var(--line)}
.hs:first-child{border-top:0;padding-top:0}
.hs p{color:var(--muted);max-width:32em}
.hs-tick{position:absolute;inset-inline-start:0;top:38px;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line-d);background:#fff;transition:background-color .3s,border-color .3s}
.hs:first-child .hs-tick{top:10px}
.hs.is-done .hs-tick{border-color:var(--blue)}
.hs.is-on .hs-tick,html:not(.js) .hs-tick{background:var(--tint);border-color:var(--blue)}
.how-vis{align-self:stretch}
.how-sticky{position:sticky;top:120px}
.route{width:100%;height:auto;max-height:calc(100vh - 160px);overflow:visible}
.route-line{fill:none;stroke:#C8CFD9;stroke-width:1.5;stroke-dasharray:4 5}
.route-lit{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.port{fill:#fff;stroke:#9AA3B0;stroke-width:1.5}
.rn rect{fill:#fff;stroke:var(--line-d);stroke-width:1.2;transition:fill .35s,stroke .35s}
.rn text{font:500 16px var(--f-b);fill:var(--ink)}
.rn-dot{fill:#C8CFD9;transition:fill .35s}
.rn.is-on rect,html:not(.js) .rn rect{fill:var(--tint-soft);stroke:var(--blue)}
.rn.is-on .rn-dot,html:not(.js) .rn-dot{fill:var(--blue)}
.packet{fill:var(--tint);stroke:var(--blue);stroke-width:2}
.packet-halo{fill:var(--tint);opacity:.35}
html:not(.js) .packet,html:not(.js) .packet-halo{display:none}

/* ---------------------------------------------------------------- Binaa */
.binaa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(28px,4.2vw,56px);
  border:1px solid var(--line);border-radius:18px;background-color:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:16px 16px}
.status{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;margin-bottom:22px;border:1px solid var(--blue);border-radius:999px;background:var(--tint-soft);
  color:var(--ink);font-size:var(--ts);font-weight:500}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:breathe 1.6s ease-in-out infinite}
.binaa .d2{margin-bottom:12px}
.binaa-body{color:var(--muted);margin-bottom:28px}
.binaa-link{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.term{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--sh);overflow:hidden;text-align:left}
.term-bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.term-tab{font:500 12px var(--f-m);color:var(--muted)}
.term-body{padding:20px 20px 24px;font:400 var(--tm)/2 var(--f-m);color:var(--ink);white-space:pre-wrap}
.tl{display:block}
.pr{color:var(--blue)}.ok{color:var(--blue)}
:root[lang=ar] .term bdi{font-family:var(--f-b)}
.cur{display:inline-block;width:8px;height:1.1em;margin-left:4px;vertical-align:-3px;background:var(--ink);animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tl-bar{padding-top:6px}
.bar{display:block;height:6px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.bar i{display:block;width:38%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--blue),var(--tint),transparent);animation:sweep 2.4s ease-in-out infinite}
@keyframes sweep{from{transform:translateX(-110%)}to{transform:translateX(280%)}}

/* ---------------------------------------------------------------- services: cult-ui direction-aware tabs */
.tabs{position:relative;display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--paper);margin-bottom:24px}
.tab{position:relative;z-index:1;padding:10px 20px;border:0;border-radius:999px;background:none;color:var(--muted);font:500 15px/1.4 var(--f-b);cursor:pointer;transition:color .2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--ink)}
.tab-pill{position:absolute;z-index:0;top:0;left:0;width:0;height:0;border-radius:999px;background:#fff;border:1.5px solid var(--blue);box-shadow:0 1px 3px rgba(14,26,43,.1)}
.panels{position:relative;display:grid;gap:16px}
.panel{display:grid;gap:22px;padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:18px;background:#fff}
.tabs-on .panels{overflow:hidden;border-radius:18px}
.tabs-on .tab-pill{transition:transform .45s var(--ex),width .45s var(--ex),height .45s var(--ex)}
.hero-vis.is-off *{animation-play-state:paused!important}
.panel dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.panel dt{color:var(--blue);font-size:var(--ts);font-weight:600;margin-bottom:4px}
.panel dd{color:var(--ink-2)}
.panel:focus-visible{outline-offset:-3px}
.svc-close{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px dashed var(--line-d)}
.svc-close p{max-width:36em;color:var(--muted);font-size:var(--tl)}

/* ---------------------------------------------------------------- consultation */
.ask-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,56px);align-items:start}
.ask-form{padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--sh)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0}
.field-wide{grid-column:1/-1}
label,legend{color:var(--ink);font-size:var(--ts);font-weight:500}
legend{padding:0;margin-bottom:8px}
.opt{color:var(--muted);font-weight:400}
input,select,textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid #868E9A;border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:400;
  transition:border-color .18s}
textarea{resize:vertical;min-height:120px}
select{appearance:none;-webkit-appearance:none;padding-inline-end:40px;cursor:pointer;
  background-image:url(select.svg);
  background-repeat:no-repeat;background-position:right 16px center}
[dir=rtl] select{background-position:left 16px center}
input::placeholder,textarea::placeholder{color:#646E7C}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.is-invalid input,.is-invalid select{border-color:#B3261E}
.err{color:#B3261E;font-size:var(--ts)}
.hint{color:var(--muted);font-size:var(--ts)}
.segs{display:flex;flex-wrap:wrap;gap:8px}
.seg{position:relative;display:inline-flex}
.seg input{position:absolute;inset:0;min-height:0;margin:0;opacity:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border:1px solid #868E9A;border-radius:999px;color:var(--ink);font-size:15px;transition:background-color .18s,border-color .18s,color .18s}
.seg input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
.btn-submit{justify-self:start;min-width:220px}
.err-sum{grid-column:1/-1;padding:14px 18px;border:1px solid #B3261E;border-radius:10px;background:#FDF2F1}
.err-sum ul{margin:8px 0 0;padding-inline-start:20px}
.err-sum a{color:#8C1D18}
.ask-done{display:grid;gap:6px;margin-top:24px;padding:18px 20px;border:1px dashed #858E9B;border-radius:12px;background:var(--paper)}
.ask-done p{color:var(--muted)}
/* the live page: the privacy line, the honeypot, sent and send-failed */
.note{color:var(--muted);font-size:var(--ts)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ask-done.is-ok{border:1px solid var(--blue);background:var(--tint-soft)}
.ask-fail{margin-top:24px;padding:14px 18px;border:1px solid #B3261E;border-radius:10px;background:#FDF2F1;color:var(--ink)}
.ask-fail .lnk{display:inline}
.btn-submit:disabled{opacity:.7;cursor:progress}
/* without JS the Worker answers a post with a 303 to one of these fragments: show that message */
/* !important: it has to beat [hidden]{display:none!important} above */
html:not(.js) #consultation-sent:target,html:not(.js) #consultation-error:target{display:grid!important}
.ft-mail{font-size:inherit}
.ask-after{padding-top:8px}
.ask-after .t0{margin-bottom:18px}
.ask-after ol{position:relative;display:grid;gap:22px;list-style:none;padding:0}
.ask-after ol::before{content:"";position:absolute;top:10px;bottom:10px;inset-inline-start:6px;width:1px;background:var(--line-d)}
.ask-after li{position:relative;padding-inline-start:30px;color:var(--muted)}
.ad{position:absolute;inset-inline-start:0;top:.55em;width:13px;height:13px;border-radius:4px;border:1.5px solid var(--blue);background:#fff}
.ask-after li:last-child .ad{background:var(--tint)}

/* ---------------------------------------------------------------- footer */
.ft{padding-block:clamp(72px,8vw,120px) 40px;background:var(--bg)}
.ft-logo{width:min(100%,480px);height:auto}
.ft-line{max-width:24em;margin:24px 0 64px;color:var(--ink-2);font:600 var(--d3)/1.5 var(--f-d);text-wrap:balance}
.ft-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;padding-top:28px;border-top:1px solid var(--line)}
.ft-notes{display:grid;gap:8px;color:var(--muted);font-size:var(--ts)}
.ft-notes div{display:flex;flex-wrap:wrap;gap:4px 10px}
.ft-notes dt{color:var(--blue);font-weight:500}
.ft-links{display:flex;align-items:center;gap:28px;font-size:15px}
.ft-copy{margin-top:28px;color:var(--muted);font-size:var(--ts)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .sheet{grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-areas:"idea idea idea idea idea idea" "plain plain plain plain plain plain" "serv serv serv prod prod prod" "cta cta cta cta cta cta"}
  .c-idea .art{height:340px}.c-plain .art{min-height:340px}
}
@media (max-width:860px){
  .nav-links{display:none}
  .js .nav-menu{display:inline-flex}
  .menu-open .nav-links{display:block;position:absolute;top:100%;inset-inline:calc(-1 * var(--g));padding:12px var(--g) 28px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(14,26,43,.25)}
  .menu-open .nav-links ul{flex-direction:column;gap:0}
  .menu-open .nav-links a{display:block;padding:14px 0;color:var(--ink);font:600 22px/1.4 var(--f-d)}
  /* on a phone the route's labels would be too small: the steps themselves become the route, a line through their ticks */
  .how-grid{grid-template-columns:minmax(0,1fr)}
  .how-vis{display:none}
  .how-steps{position:relative}
  .how-steps::before{content:"";position:absolute;top:12px;bottom:12px;inset-inline-start:6.5px;width:1px;background:var(--line-d)}
  .hs{min-height:0;border-top:0;padding-block:0 32px}
  .hs:last-child{padding-bottom:0}
  .hs-tick,.hs:first-child .hs-tick{top:7px}
  .binaa,.ask-body{grid-template-columns:minmax(0,1fr)}
  .panel dl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  :root{--tb:16px}
  .g{display:none}
  .nav-in{height:64px;gap:12px}
  .nav-end{gap:12px}
  .logo{height:22px}
  .nav-menu{width:40px;height:40px}
  .hero-in{justify-items:start;text-align:start}
  .ctas{justify-content:flex-start}
  .hero-vis{height:240px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .sheet{grid-template-columns:minmax(0,1fr);grid-template-areas:"idea" "plain" "serv" "prod" "cta"}
  .c-idea .art{height:300px}.c-plain .art{min-height:300px;padding:24px 20px}
  .art{height:240px}
  .thread{font-size:20px}
  .tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:18px;width:100%}
  .tab{border-radius:14px;padding:10px 12px}
  .tab-pill{border-radius:14px}
  .form{grid-template-columns:minmax(0,1fr)}
  .btn-submit{justify-self:stretch}
  .ft-row{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){ .nav-cta{display:none} }
@media (max-width:340px){ .logo{height:19px} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}