/* Carve Solutions website (redesign of November 2026).
   Tokens follow the brand book: 02-Brand-and-Design/Design-System/tokens.json in the company folder.
   Night ground, stone text, steel as a signal. Hairlines instead of boxes, cut corners on buttons only. */

:root{
  --night:#03060a;
  --night-raised:#080d14;
  --stone:#f4f1ea;
  --stone-muted:#b4b8bc;
  --steel:#8fa9c2;
  --steel-light:#bcd2e6;
  --circuit:#4cb8ff;

  --surface:var(--night);
  --surface-raised:var(--night-raised);
  --text:var(--stone);
  --text-muted:var(--stone-muted);
  --accent:var(--steel);
  --accent-strong:var(--steel-light);
  --line:#1d2733;
  --line-strong:#5b6d83;
  --action:var(--stone);
  --on-action:var(--night);

  --font-display:"Jost","Helvetica Neue",Arial,sans-serif;
  --font-text:"Manrope","Helvetica Neue",Arial,sans-serif;
  --font-arabic:"Amiri","Noto Naskh Arabic","Geeza Pro",serif;

  /* spacing on a 4 px grid */
  --space-4:4px;
  --space-8:8px;
  --space-12:12px;
  --space-16:16px;
  --space-24:24px;
  --space-32:32px;
  --space-48:48px;
  --space-64:64px;
  --space-96:96px;
  --gutter:32px;
  --section:clamp(84px,10vw,152px);
  --content-max:1220px;
  --wide-max:1440px;

  --radius-hair:2px;
  --radius-pill:999px;
  --chamfer:14px;
  --shadow-lift:0 14px 30px #00000059;
  --shadow-deep:0 40px 90px #00000080;

  /* type scale */
  --fs-hero:min(11.6vw, 4.5rem);
  --fs-statement:clamp(2.25rem, 1.1rem + 4.6vw, 4.75rem);
  --fs-display:clamp(2rem, 1.25rem + 3vw, 3.75rem);
  --fs-title:clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --fs-subtitle:1.375rem;
  --fs-lead:clamp(1.125rem, 1.06rem + .3vw, 1.25rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-micro:.8125rem;

  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:72px;
  color-scheme:dark;
}
@media (max-width:700px){
  :root{ --gutter:22px; --section:76px; --header-h:60px; }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--space-24))}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font-text);font-size:var(--fs-body);
  line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
p,h1,h2,h3,h4,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--steel);color:var(--night)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:var(--gutter);top:-100px;z-index:100;background:var(--action);color:var(--on-action);
  padding:var(--space-12) var(--space-16);font-weight:600;text-decoration:none}
.skip:focus{top:var(--space-12)}

.wrap{width:100%;max-width:calc(var(--content-max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:calc(var(--wide-max) + 2 * var(--gutter))}
.section{padding-block:var(--section)}
.section--raised{background:var(--surface-raised)}
.section--tight{padding-block:calc(var(--section) * .6)}
.rule-top{border-top:1px solid var(--line)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--night) 90%,transparent);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:var(--space-32);height:var(--header-h)}
.brand{display:inline-flex;align-items:center;min-height:44px;flex:0 0 auto}
.brand img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:var(--space-32);margin-inline-start:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-small);font-weight:500;color:var(--text-muted);
  text-decoration:none;transition:color .2s ease}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -1px 0 var(--accent)}
.nav .nav-only-mobile{display:none}
.bar-actions{display:flex;align-items:center;gap:var(--space-12)}
.lang{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:var(--space-16);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-size:var(--fs-small);font-weight:500;color:var(--text);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.lang:hover{background:var(--action);border-color:var(--action);color:var(--on-action)}
html:not([lang="ar"]) .lang{font-family:var(--font-arabic);font-size:1.0625rem;line-height:1}
html[lang="ar"] .lang{font-family:var(--font-text)}
.pill{display:inline-flex;align-items:center;gap:var(--space-8);min-height:44px;padding-inline:var(--space-24);border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);font-size:var(--fs-small);font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.pill:hover{background:var(--action);border-color:var(--action);color:var(--on-action)}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--radius-pill)}
.menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
.menu-btn .i-close{display:none}

@media (max-width:960px){
  /* a backdrop filter would make the header the containing block of the fixed menu panel */
  .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--night)}
  .menu-btn{display:inline-flex}
  .bar .pill{display:none}
  .bar{gap:var(--space-16)}
  .bar-actions{margin-inline-start:auto}
  .nav{display:none;position:fixed;inset:var(--header-h) 0 0 0;z-index:59;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:var(--space-24) var(--gutter) var(--space-48);background:var(--night);overflow-y:auto}
  .nav a{min-height:64px;font-family:var(--font-display);font-size:var(--fs-title);font-weight:400;color:var(--text);border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{box-shadow:none;color:var(--accent-strong)}
  .nav .nav-only-mobile{display:inline-flex}
  html.nav-open{overflow:hidden}
  html.nav-open .nav{display:flex}
  html.nav-open .menu-btn .i-menu{display:none}
  html.nav-open .menu-btn .i-close{display:block}
}

/* ---------- type helpers ---------- */
.label{display:flex;align-items:center;gap:var(--space-12);margin-bottom:var(--space-24);font-size:var(--fs-small);font-weight:600;color:var(--accent)}
.label::before{content:"";flex:0 0 36px;height:1px;background:var(--accent);opacity:.7}
.display{font-size:var(--fs-display)}
.title{font-size:var(--fs-title);line-height:1.15}
.subtitle{font-size:var(--fs-subtitle);line-height:1.2;letter-spacing:0}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--text-muted)}
.muted{color:var(--text-muted)}
.small{font-size:var(--fs-small)}
.micro{font-size:var(--fs-micro);line-height:1.5}
.accent{color:var(--accent-strong)}
.head{max-width:900px;margin-bottom:var(--space-64)}
.head .lead{margin-top:var(--space-24);max-width:62ch}
.prose{max-width:66ch}
.prose p + p{margin-top:var(--space-16)}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-12);min-height:52px;padding:var(--space-12) var(--space-32);
  font-family:var(--font-text);font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;text-align:center;
  clip-path:polygon(var(--chamfer) 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,var(--chamfer) 100%,0 calc(100% - var(--chamfer)),0 var(--chamfer));
  transition:transform .2s var(--ease),background-color .2s ease}
.btn svg{flex:0 0 auto;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn--primary{background:var(--action);color:var(--on-action)}
.btn--ghost{background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--text)}
.btn--ghost:hover{background:color-mix(in srgb,var(--text) 16%,transparent)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{clip-path:none;outline-offset:3px}
.lift{display:inline-flex;filter:drop-shadow(var(--shadow-lift))}
.more{display:inline-flex;align-items:center;gap:var(--space-8);min-height:44px;font-weight:600;font-size:var(--fs-body);color:var(--text);text-decoration:none}
.more > span{border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color .2s ease}
.more:hover > span{border-color:var(--text)}
.more::after{content:"\2192";transition:transform .2s var(--ease)}
.more:hover::after{transform:translateX(3px)}
[dir="rtl"] .more::after{content:"\2190"}
[dir="rtl"] .more:hover::after{transform:translateX(-3px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16) var(--space-32)}
.inline-link{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.inline-link:hover{text-decoration-color:var(--text)}

.live{display:inline-flex;align-items:center;gap:var(--space-8);font-size:var(--fs-small);color:var(--text-muted)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--circuit)}

/* ---------- hero: the stone head from the logo and the claim ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;overflow:hidden}
.hero-bg{position:absolute;inset:-14% 0;z-index:0;will-change:transform;
  background:radial-gradient(46% 52% at 27% 50%,#0e1a2a 0%,rgba(14,26,42,0) 100%),var(--night)}
/* its circuits are a second layer of the same picture */
.hero-sculpture{position:absolute;left:-4%;top:50%;transform:translateY(-50%);width:min(54%,1040px);aspect-ratio:1600/1417;
  -webkit-mask-image:radial-gradient(56% 56% at 50% 47%,#000 62%,transparent 100%);mask-image:radial-gradient(56% 56% at 50% 47%,#000 62%,transparent 100%)}
.hero-sculpture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-glow,.hero-touch{mix-blend-mode:screen;pointer-events:none}
.hero-glow{opacity:.3}
.hero-touch{opacity:0;transition:opacity .4s ease;
  -webkit-mask-image:radial-gradient(circle 150px at var(--mx,50%) var(--my,50%),#000 0%,transparent 100%);mask-image:radial-gradient(circle 150px at var(--mx,50%) var(--my,50%),#000 0%,transparent 100%)}
.hero-sculpture.lit .hero-touch{opacity:1}
.hero > .wrap{position:relative;z-index:2}
/* the text sits opposite the head in both languages; the head looks towards it */
.hero-inner{position:relative;max-width:min(600px,44vw);padding-block:calc(var(--header-h) + 56px) 112px;will-change:transform,opacity}
html:not([dir="rtl"]) .hero-inner{margin-inline-start:auto}
.hero-pill{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:6px 18px;border:1px solid color-mix(in srgb,var(--steel) 30%,transparent);
  border-radius:var(--radius-pill);background:color-mix(in srgb,var(--night) 50%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:var(--fs-small);font-weight:600;line-height:1.3;color:var(--text-muted)}
.hero-pill .dot{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--circuit);box-shadow:0 0 12px var(--circuit)}
.hero-claim{margin-top:28px;font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.02em;overflow-wrap:anywhere}
.hero-claim .l{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero-claim .l > span{display:inline-block}
.hero-claim .accent{position:relative}
.uline{position:absolute;inset-inline-start:0;bottom:-.06em;width:100%;height:.15em;overflow:visible}
.uline path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;opacity:.9}
.hero .lead{margin-top:28px;max-width:34em;font-size:clamp(1rem,.9rem + .5vw,1.25rem)}
.hero .actions{margin-top:40px;gap:var(--space-16)}
.scroll-hint{position:absolute;inset-inline-start:50%;bottom:26px;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:var(--fs-micro);color:var(--text-muted)}
[dir="rtl"] .scroll-hint{transform:translateX(50%)}
.scroll-hint .linev{width:1px;height:44px;background:linear-gradient(180deg,var(--accent),transparent)}
@media (min-width:901px){
  :root{ --fs-hero:clamp(52px, 6.2vw, 92px); }
}
@media (max-width:900px){
  /* phones and tablets: the head on top, the text below it */
  .hero{align-items:flex-start;min-height:0}
  .hero-bg{inset:0}
  .hero-sculpture{left:50%;top:calc(var(--header-h) - 8px);transform:translateX(-50%);width:min(128vw,760px);
    -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 92%);mask-image:linear-gradient(180deg,#000 58%,transparent 92%)}
  html:not([dir="rtl"]) .hero-inner{margin-inline-start:0}
  .hero-inner{max-width:600px;padding-block:calc(var(--header-h) + min(128vw,760px) * .68) 72px}
  .scroll-hint{display:none}
}
@media (max-width:560px){
  .hero .actions{flex-direction:column;align-items:stretch}
  .hero .actions .lift,.hero .actions .btn{width:100%}
}
@media (prefers-reduced-motion:no-preference){
  /* a current runs through the circuits; the claim rises line by line; the underline is drawn */
  .hero-glow{opacity:.7;-webkit-mask-image:linear-gradient(112deg,transparent 38%,#000 47%,#000 53%,transparent 62%);mask-image:linear-gradient(112deg,transparent 38%,#000 47%,#000 53%,transparent 62%);
    -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;animation:current 8s var(--ease) infinite}
  .hero-pill .dot{animation:pulse 2.2s infinite}
  .hero-claim .l > span{transform:translateY(112%);animation:rise 1.1s var(--ease) forwards}
  .hero-claim .l:nth-child(2) > span{animation-delay:.15s}
  .hero-pill,.hero .lead,.hero .actions{opacity:0;animation:fadeup .9s var(--ease) forwards}
  .hero-pill{animation-delay:.05s}
  .hero .lead{animation-delay:.4s}
  .hero .actions{animation-delay:.55s}
  .uline path{stroke-dasharray:330;stroke-dashoffset:330;animation:uline 1s var(--ease) .9s forwards}
  .scroll-hint .linev{animation:sink 1.8s ease-in-out infinite}
}
@keyframes current{0%{-webkit-mask-position:100% 0;mask-position:100% 0}62%,100%{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes uline{to{stroke-dashoffset:0}}
@keyframes sink{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* a wide picture under a headline */
.wide-media img{width:100%;aspect-ratio:2688/1520;object-fit:cover;border-radius:var(--radius-hair)}
figcaption,.caption{margin-top:var(--space-12);font-size:var(--fs-micro);line-height:1.5;color:var(--text-muted)}
@media (max-width:700px){ .wide-media img{aspect-ratio:4/5} }

/* page hero (inner pages) */
.page-hero{padding-top:clamp(48px,7vw,104px);padding-bottom:var(--space-64)}
.page-hero h1{font-size:var(--fs-display);max-width:18ch}
.page-hero .lead{margin-top:var(--space-24);max-width:60ch}
.page-hero--split .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.page-hero--split figure img{width:100%;border-radius:var(--radius-hair)}
@media (max-width:900px){ .page-hero--split .wrap{grid-template-columns:1fr} }

/* ---------- screens (real product screens, 9:16) ---------- */
.screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-32)}
.screens--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.screen img{width:100%;aspect-ratio:9/16;object-fit:cover;background:#0c0b0a;border-radius:var(--radius-hair);
  outline:1px solid var(--line);outline-offset:-1px}
.screen h3{margin-top:var(--space-24)}
.screen p{margin-top:var(--space-8);font-size:var(--fs-small);color:var(--text-muted)}
.scroller-note{display:none}
@media (max-width:1000px){
  .screens,.screens--3{display:flex;gap:var(--space-16);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .screens::-webkit-scrollbar,.screens--3::-webkit-scrollbar{display:none}
  .screen{flex:0 0 min(70vw,300px);scroll-snap-align:start}
}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-48);counter-reset:step}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-32)}
.step{counter-increment:step;border-top:1px solid var(--line-strong);padding-top:var(--space-24)}
.step::before{content:counter(step);display:block;margin-bottom:var(--space-16);font-family:var(--font-display);font-weight:300;font-size:2.5rem;
  line-height:1;color:var(--accent-strong)}
.step p{margin-top:var(--space-12);color:var(--text-muted)}
@media (max-width:900px){ .steps,.steps--4{grid-template-columns:1fr;gap:var(--space-32)} }

/* ---------- columns of short items ---------- */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-48)}
.cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-32)}
.col{border-top:1px solid var(--line);padding-top:var(--space-24)}
.col p{margin-top:var(--space-12);color:var(--text-muted)}
.col .tag{display:block;margin-bottom:var(--space-12);font-size:var(--fs-small);font-weight:600;color:var(--accent)}
@media (max-width:1000px){ .cols--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .cols,.cols--2{grid-template-columns:1fr;gap:var(--space-32)} }
@media (max-width:560px){ .cols--4{grid-template-columns:1fr} }

/* ---------- cards with an image ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32)}
.card{display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-hair)}
.card .tag{margin-top:var(--space-24);font-size:var(--fs-small);font-weight:600;color:var(--accent)}
.card h3{margin-top:var(--space-8);font-size:clamp(1.5rem, 1.2rem + .9vw, 1.75rem)}
.card p{margin-top:var(--space-12);color:var(--text-muted)}
.card .more{margin-top:var(--space-12)}
@media (max-width:1000px){ .cards{grid-template-columns:1fr;gap:var(--space-48)} .card img{aspect-ratio:16/9} }

/* ---------- split: image and text ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.split--text-first{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.split figure img{width:100%;border-radius:var(--radius-hair)}
.split .lead{margin-top:var(--space-24)}
.split .actions{margin-top:var(--space-32)}
.framed img{box-shadow:var(--shadow-deep)}
@media (max-width:900px){
  .split,.split--text-first{grid-template-columns:1fr}
  .split--text-first figure{order:2}
}

/* ---------- facts list (label and value rows) ---------- */
.facts{margin-top:var(--space-32);border-top:1px solid var(--line)}
.facts > div{display:grid;grid-template-columns:minmax(120px,1fr) 2fr;gap:var(--space-16);padding-block:var(--space-16);border-bottom:1px solid var(--line)}
.facts dt{font-size:var(--fs-small);color:var(--text-muted)}
.facts dd{font-size:var(--fs-body)}
.facts--wide > div{grid-template-columns:minmax(160px,1fr) 3fr}
@media (max-width:560px){ .facts > div,.facts--wide > div{grid-template-columns:1fr;gap:var(--space-4)} }

/* ---------- plain list with hairlines ---------- */
.list{border-top:1px solid var(--line)}
.list li{padding-block:var(--space-16);border-bottom:1px solid var(--line);color:var(--text)}
.list li span{display:block;margin-top:var(--space-4);font-size:var(--fs-small);color:var(--text-muted)}
.ticks li{position:relative;padding-inline-start:var(--space-24);padding-block:var(--space-8);color:var(--text-muted);font-size:var(--fs-small)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:1.05em;width:10px;height:1px;background:var(--accent)}

/* ---------- formats ---------- */
.formats{border-top:1px solid var(--line)}
.format{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto;gap:var(--space-24);align-items:baseline;padding-block:var(--space-24);border-bottom:1px solid var(--line)}
.format p{color:var(--text-muted);font-size:var(--fs-small)}
.format .price{font-family:var(--font-display);font-size:var(--fs-subtitle);white-space:nowrap;color:var(--text)}
.format .price small{font-family:var(--font-text);font-size:var(--fs-micro);color:var(--text-muted)}
@media (max-width:700px){ .format{grid-template-columns:1fr;gap:var(--space-8)} }

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong)}
.plan{position:relative;display:flex;flex-direction:column;padding:var(--space-48) var(--space-32) var(--space-48);border-inline-start:1px solid var(--line)}
.plan:first-child{border-inline-start:0;padding-inline-start:0}
.plan:last-child{padding-inline-end:0}
.plan .tag{font-size:var(--fs-small);font-weight:600;color:var(--accent)}
.plan h3{margin-top:var(--space-8)}
.plan .what{margin-top:var(--space-12);color:var(--text-muted);min-height:4.95em}
.plan .amount{margin-top:var(--space-24);font-family:var(--font-display);font-weight:300;font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem);line-height:1;color:var(--accent-strong)}
.plan .amount small{font-family:var(--font-text);font-weight:400;font-size:var(--fs-small);color:var(--text-muted)}
.plan .terms{margin-top:var(--space-12);min-height:3.3em;font-size:var(--fs-small);color:var(--text-muted)}
.plan .ticks{margin-top:var(--space-24);margin-bottom:var(--space-32)}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan .badge{position:absolute;top:0;inset-inline-start:var(--space-32);transform:translateY(-50%);padding:var(--space-4) var(--space-12);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface-raised);font-size:var(--fs-micro);line-height:1.5;color:var(--text)}
@media (max-width:960px){
  .plans{grid-template-columns:1fr;border-top:0}
  .plan,.plan:first-child,.plan:last-child{padding:var(--space-48) 0 var(--space-48);border-inline-start:0;border-top:1px solid var(--line-strong)}
  .plan .badge{inset-inline-start:0}
  .plan .what,.plan .terms{min-height:0}
}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) 12rem;gap:var(--space-24);align-items:baseline;padding-block:var(--space-24);border-bottom:1px solid var(--line)}
.row p{color:var(--text-muted);font-size:var(--fs-small)}
.row .price{font-family:var(--font-display);font-size:var(--fs-subtitle);text-align:end;white-space:nowrap}
.row .price small{display:block;font-family:var(--font-text);font-size:var(--fs-micro);color:var(--text-muted);white-space:normal}
@media (max-width:760px){ .row{grid-template-columns:1fr;gap:var(--space-8)} .row .price{text-align:start} }
.fine{margin-top:var(--space-32);max-width:80ch;font-size:var(--fs-micro);line-height:1.6;color:var(--text-muted)}

/* ---------- knowledge entry and data ---------- */
.entry{border:1px solid var(--line-strong);padding:var(--space-32);background:var(--surface)}
.entry .tag{font-size:var(--fs-small);font-weight:600;color:var(--accent)}
.entry h3{margin-top:var(--space-8)}
.entry > p{margin-top:var(--space-12);color:var(--text-muted)}
.entry .facts{margin-top:var(--space-24)}
.bars{margin-top:var(--space-32)}
.bars .bar-row{display:grid;grid-template-columns:minmax(110px,1fr) 4fr auto;gap:var(--space-16);align-items:center;padding-block:var(--space-8)}
.bars .bar-label{font-size:var(--fs-small);color:var(--text-muted)}
.bars .bar-track{height:10px;background:var(--line)}
.bars .bar-fill{display:block;height:100%;background:var(--steel)}
.bars .bar-value{font-family:var(--font-display);font-size:var(--fs-body);min-width:2.5ch;text-align:end}
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.figure{padding:var(--space-32) var(--space-24) var(--space-8);border-inline-start:1px solid var(--line)}
.figure:first-child{border-inline-start:0;padding-inline-start:0}
.figure .value{font-family:var(--font-display);font-weight:300;font-size:clamp(2.5rem,1.7rem + 3vw,4.25rem);line-height:1;color:var(--accent-strong)}
.figure .cap{margin-top:var(--space-12);font-size:var(--fs-small);color:var(--text-muted);max-width:22ch}
@media (max-width:900px){
  .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figure{border-inline-start:0;padding-inline:0;padding-bottom:var(--space-24)}
}

/* ---------- questions ---------- */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);min-height:64px;padding-block:var(--space-16);
  font-family:var(--font-display);font-size:var(--fs-subtitle);line-height:1.25;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 12px;width:12px;height:12px;border-inline-end:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details > p{padding-bottom:var(--space-24);max-width:68ch;color:var(--text-muted)}

/* ---------- closing call ---------- */
.cta{text-align:center}
.cta h2{font-size:var(--fs-display);max-width:20ch;margin-inline:auto}
.cta h2.statement{font-size:var(--fs-statement);max-width:none}
.cta .lead{margin:var(--space-24) auto 0;max-width:52ch}
.cta .actions{justify-content:center;margin-top:var(--space-48)}
.cta .note{margin-top:var(--space-24);font-size:var(--fs-small);color:var(--text-muted)}
@media (max-width:560px){ .cta .actions{flex-direction:column;align-items:stretch} .cta .actions .lift,.cta .actions .btn{width:100%} }

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:var(--space-64) var(--space-48);font-size:var(--fs-small)}
.foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:var(--space-48)}
.foot .brand img{height:26px}
.foot .claim{margin-top:var(--space-16);font-family:var(--font-display);font-size:var(--fs-subtitle);color:var(--text)}
.foot h2{font-family:var(--font-text);font-size:var(--fs-small);font-weight:600;letter-spacing:0;color:var(--accent);margin-bottom:var(--space-12)}
.foot li a,.foot li span{display:inline-flex;align-items:center;min-height:44px;color:var(--text-muted);text-decoration:none}
.foot li a:hover{color:var(--text)}
.legal{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-24);margin-top:var(--space-48);padding-top:var(--space-24);border-top:1px solid var(--line);
  font-size:var(--fs-micro);color:var(--text-muted)}
.legal a{color:inherit;text-decoration:none}
.legal a:hover{color:var(--text)}
@media (max-width:900px){ .foot{grid-template-columns:1fr;gap:var(--space-32)} }

/* ---------- document pages (privacy) ---------- */
.doc{max-width:760px}
.doc h1{font-size:var(--fs-display)}
.doc h2{font-size:var(--fs-title);margin-top:var(--space-64)}
.doc h3{font-size:var(--fs-subtitle);margin-top:var(--space-32)}
.doc p,.doc ul{margin-top:var(--space-16);color:var(--text-muted)}
.doc ul{list-style:none}
.doc li{position:relative;padding-inline-start:var(--space-24);margin-top:var(--space-8)}
.doc li::before{content:"";position:absolute;inset-inline-start:0;top:.85em;width:10px;height:1px;background:var(--accent)}
.doc strong{color:var(--text);font-weight:600}
.doc a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.doc .note{margin-top:var(--space-48);padding-top:var(--space-24);border-top:1px solid var(--line);font-size:var(--fs-small)}

/* ---------- language: only one of the two is shown ---------- */
html[lang="ar"] [data-lang="en"],html:not([lang="ar"]) [data-lang="ar"]{display:none !important}

/* ---------- Arabic ---------- */
[dir="rtl"] body{font-family:var(--font-arabic);font-size:1.1875rem;line-height:1.9}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:var(--font-arabic);letter-spacing:0;line-height:1.4}
[dir="rtl"] .hero-claim{line-height:1.6;letter-spacing:0}
[dir="rtl"] .btn,[dir="rtl"] .pill,[dir="rtl"] .nav a,[dir="rtl"] .more,[dir="rtl"] .foot h2,[dir="rtl"] .faq summary,
[dir="rtl"] .foot .claim,[dir="rtl"] .plan .amount small,[dir="rtl"] .row .price small,[dir="rtl"] .format .price small{font-family:var(--font-arabic);letter-spacing:0}
[dir="rtl"] .btn{font-size:1.125rem;font-weight:700}
[dir="rtl"] .label,[dir="rtl"] .small,[dir="rtl"] .card .tag,[dir="rtl"] .col .tag,[dir="rtl"] .plan .tag,[dir="rtl"] .entry .tag{font-size:1.0625rem}
[dir="rtl"] .screen p,[dir="rtl"] .facts dt,[dir="rtl"] .format p,[dir="rtl"] .row p,[dir="rtl"] .ticks li,[dir="rtl"] .site-footer,[dir="rtl"] .nav a{font-size:1.0625rem}
[dir="rtl"] figcaption,[dir="rtl"] .caption,[dir="rtl"] .micro,[dir="rtl"] .fine,[dir="rtl"] .legal{font-size:.9375rem;line-height:1.8}
[dir="rtl"] .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .btn:hover,.more:hover::after{transform:none}
}

/* footer: the short company line under the claim */
.foot .about{margin-top:var(--space-12);max-width:38ch;color:var(--text-muted)}

/* spacing helpers, from the same scale */
.mt-16{margin-top:var(--space-16)}
.mt-24{margin-top:var(--space-24)}
.mt-32{margin-top:var(--space-32)}
.mt-48{margin-top:var(--space-48)}
.mt-64{margin-top:var(--space-64)}
.list li strong{font-weight:600}

/* product shots on a dark studio ground: fade the edges into the page */
.blend{-webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 52%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 68% at 50% 52%,#000 58%,transparent 100%)}

/* two screens side by side */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
.pair img{width:100%;aspect-ratio:9/16;object-fit:cover;background:#0c0b0a;border-radius:var(--radius-hair);outline:1px solid var(--line);outline-offset:-1px}
.hero-portrait{aspect-ratio:4/5;object-fit:cover;object-position:50% 46%}
.cards--portrait .card img{aspect-ratio:4/5}
.head--flush{margin-bottom:0}
.split--top{align-items:start}
/* "when this happens → this runs" rows */
.rows--flow .row{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.rows--flow .row p{font-size:var(--fs-body)}
@media (max-width:760px){ .rows--flow .row{grid-template-columns:1fr} }
.card img + h3{margin-top:var(--space-24)}

/* hardware kits */
.kit .price{font-family:var(--font-display);font-size:var(--fs-title);line-height:1.1;color:var(--text)}
.kit .price small{font-family:var(--font-text);font-size:var(--fs-micro);color:var(--text-muted)}
[dir="rtl"] .kit .price small{font-family:var(--font-arabic)}

/* 404 */
.notfound{min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding-block:var(--space-64)}
.notfound .brand{margin-bottom:var(--space-64)}
.notfound .code{font-family:var(--font-display);font-weight:400;font-size:var(--fs-title);color:var(--accent-strong)}
.notfound h1{margin-top:var(--space-8)}
.notfound .lead{margin-top:var(--space-24);max-width:52ch}
.notfound .actions{margin-top:var(--space-32)}

/* Arabic: figures stay in the display face, the words beside them in the Arabic face */
[dir="rtl"] .row .price,[dir="rtl"] .kit .price,[dir="rtl"] .plan .amount,[dir="rtl"] .figure .value,[dir="rtl"] .bars .bar-value,[dir="rtl"] .step::before{font-family:"Jost","Amiri","Noto Naskh Arabic",serif}

/* ================= second pass, 11 November 2026: film, scroll story, band, reveals ================= */

/* ---------- headlines that carry a section ---------- */
.statement{font-size:var(--fs-statement);line-height:1.04;letter-spacing:-.018em}
.statement > span{display:block}
.head--center{margin-inline:auto;text-align:center}
.head--center .lead{margin-inline:auto}
.head--center .label,.cta .label{justify-content:center}
.head--center .label::after,.cta .label::after{content:"";flex:0 0 36px;height:1px;background:var(--accent);opacity:.7}
[dir="rtl"] .statement{line-height:1.3;letter-spacing:0}

/* ---------- header on the home page: clear over the hero, solid once the page moves ---------- */
.js .page-home .site-header{position:fixed;inset-inline:0;background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .3s ease,border-color .3s ease}
html.js.scrolled .page-home .site-header{background:color-mix(in srgb,var(--night) 88%,transparent);border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px)}
@media (max-width:960px){
  html.js.scrolled .page-home .site-header,html.js.nav-open .page-home .site-header{background:var(--night);border-bottom-color:var(--line);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- the film ---------- */
.film{padding-top:calc(var(--section) * .75)}
.film .head{margin-bottom:var(--space-48)}
.film-player{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border-radius:var(--radius-hair);
  box-shadow:0 0 0 1px var(--line),var(--shadow-deep),0 0 160px -40px color-mix(in srgb,var(--circuit) 26%,transparent)}
.film-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.film-player video::cue{font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-weight:500;color:#f4f1ea;background:rgba(3,6,10,.8);font-size:clamp(13px,2vw,27px)}
.film-play{display:none;position:absolute;inset:0;z-index:2;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-16);width:100%;
  padding:var(--space-24);color:var(--stone);background:linear-gradient(180deg,rgba(3,6,10,.2) 0%,rgba(3,6,10,.06) 42%,rgba(3,6,10,.66) 100%);cursor:pointer}
.js .film-player:not(.is-started) .film-play{display:flex}
.film-play-icon{display:grid;place-items:center;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--stone) 72%,transparent);background:color-mix(in srgb,var(--night) 62%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .25s ease,color .25s ease,transform .25s var(--ease)}
.film-play-icon svg{width:38%;height:38%;fill:currentColor;transform:translateX(7%)}
.film-play:hover .film-play-icon{background:var(--stone);color:var(--night);transform:scale(1.05)}
.film-play:focus-visible{outline-offset:-6px}
.film-play-text{padding:8px 20px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--night) 76%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--font-display);font-size:var(--fs-subtitle);line-height:1.3}
.film-play-time{margin-inline-start:.4em;color:var(--steel-light)}
[dir="rtl"] .film-play-text{font-family:var(--font-arabic)}
[dir="rtl"] .film-play-time{font-family:var(--font-display)}
@media (max-width:700px){
  .film-frame{padding-inline:0}
  .film-player{border-radius:0}
  .film-frame figcaption{padding-inline:var(--gutter)}
}

/* ---------- a picture that opens up as it scrolls in ---------- */
.js [data-grow] picture{display:block;transform:scale(calc(.86 + .14 * var(--p,1)));transform-origin:50% 100%;will-change:transform}

/* ---------- the scroll story: the text moves, the screen stays ---------- */
.story{margin-top:var(--space-64)}
.story-caption{margin-top:var(--space-32)}
@media (min-width:1001px){ .js .story ~ .story-caption,.js .story ~ p{max-width:1040px;margin-inline:auto} }
.chapter-screen{margin:0}
@media (min-width:1001px){
  .js .story{display:block;position:relative;max-width:1040px;margin:var(--space-32) auto 0;counter-reset:chapter;
    --stage-h:min(74vh,760px);--stage-w:calc(var(--stage-h) * .5625)}
  .js .story .chapter{display:flex;align-items:center;min-height:max(66vh,460px);counter-increment:chapter;
    padding-inline-end:calc(var(--stage-w) + clamp(56px,7vw,104px))}
  .js .story .chapter-text{max-width:30rem;opacity:.4;transition:opacity .5s var(--ease)}
  .js .story .chapter.is-active .chapter-text{opacity:1}
  .js .story .chapter-text::before{content:"0" counter(chapter);display:block;margin-bottom:var(--space-16);
    font-family:var(--font-display);font-weight:300;font-size:2rem;line-height:1;color:var(--accent-strong)}
  .js .story .chapter-text h3{margin-top:0;font-size:var(--fs-title);line-height:1.12;letter-spacing:-.01em}
  .js .story .chapter-text p{margin-top:var(--space-16);font-size:var(--fs-lead);line-height:1.6}
  .js .story .chapter-screen{position:absolute;inset-block:0;inset-inline-end:0;width:var(--stage-w);pointer-events:none}
  .js .story .chapter-screen img{position:sticky;top:calc(50vh - var(--stage-h) / 2 + var(--header-h) / 2);width:100%;height:var(--stage-h);aspect-ratio:auto;
    opacity:0;transform:scale(.97);transition:opacity .55s var(--ease),transform .7s var(--ease);
    box-shadow:var(--shadow-deep),0 0 140px -40px color-mix(in srgb,var(--circuit) 34%,transparent)}
  .js .story .chapter.is-active .chapter-screen img{opacity:1;transform:none}
  [dir="rtl"] .js .story .chapter-text h3,html[dir="rtl"].js .story .chapter-text h3{line-height:1.4;letter-spacing:0}
}

/* ---------- the greeting over the night skyline ---------- */
.band{position:relative;height:clamp(420px,72vh,760px);overflow:hidden;background:var(--night)}
.band img{position:absolute;inset-inline:0;top:-12%;width:100%;max-width:none;height:124%;object-fit:cover;
  transform:translate3d(0,calc((var(--p,.5) - .5) * -12%),0);will-change:transform}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night-raised) 0%,rgba(3,6,10,.22) 28%,rgba(3,6,10,.22) 70%,var(--night) 100%)}
.band-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-inline:var(--gutter);text-align:center}
.band-ahlan{font-family:var(--font-arabic);font-size:clamp(4.5rem,13vw,11.5rem);line-height:1.15;color:var(--stone)}
.band-sub{margin-top:var(--space-8);font-size:var(--fs-lead);color:var(--accent-strong)}

/* ---------- cards that are one link ---------- */
.card-media{overflow:hidden;border-radius:var(--radius-hair)}
.card-media img{aspect-ratio:4/3;border-radius:0;transition:transform .9s var(--ease)}
.cards--link .card{position:relative}
.cards--link .more::before{content:"";position:absolute;inset:0}
.cards--link .card:hover .card-media img{transform:scale(1.04)}
.cards--link .card:hover .more > span{border-color:var(--text)}

/* ---------- the line the company started with, and the closing call ---------- */
.vision{padding-block:calc(var(--section) * .8) calc(var(--section) * .15);text-align:center;border-top:1px solid var(--line);
  background:radial-gradient(60% 130% at 50% 0%,#0e1a2a 0%,rgba(14,26,42,0) 72%),var(--night)}
.vision-ar{font-family:var(--font-arabic);font-size:clamp(2.5rem,6.4vw,4.5rem);line-height:1.5;color:var(--accent-strong)}
.vision-en{margin-top:var(--space-4);font-family:var(--font-display);font-size:var(--fs-title);line-height:1.2;color:var(--text)}
.vision + .cta{padding-top:calc(var(--section) * .7)}
.meet{display:flex;align-items:center;justify-content:center;gap:18px;max-width:36rem;margin:var(--space-48) auto 0;text-align:start}
.meet img{flex:0 0 auto;width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 18%;outline:1px solid var(--line-strong);outline-offset:3px}
.meet p{font-family:var(--font-display);font-size:1.1875rem;line-height:1.45;color:var(--text)}
[dir="rtl"] .meet p{font-family:var(--font-arabic);font-size:1.3125rem;line-height:1.7}
.cta .meet + .actions{margin-top:var(--space-32)}

/* ---------- content rises into place as it scrolls in (added by carve.js; never without scripts) ---------- */
.rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rv-delay,0ms)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .js [data-grow] picture,.band img{transform:none}
}
[dir="rtl"] .hero-pill{font-size:1.0625rem}

/* Arabic claim: the letters reach far below the line; give each line room so nothing is cut off */
[dir="rtl"] .hero-claim .l{padding-block:.12em .5em;margin-block:-.12em -.5em}
[dir="rtl"] .uline{bottom:.04em}

/* phones: a lower band that shows the skyline's tower, and a slightly smaller head so the buttons come up sooner */
@media (max-width:700px){
  .band{height:clamp(340px,54vh,560px)}
  .band img{object-position:30% 50%}
  .hero-sculpture{width:min(116vw,760px)}
  .hero-inner{padding-block:calc(var(--header-h) + min(116vw,760px) * .7) 64px}
}

/* ---------- inner pages: the same hand as the home page ---------- */
.page-hero{position:relative;padding-top:clamp(56px,8vw,128px);padding-bottom:clamp(48px,6vw,96px);
  background:radial-gradient(52% 100% at 16% 0%,#0e1a2a 0%,rgba(14,26,42,0) 100%)}
[dir="rtl"] .page-hero{background:radial-gradient(52% 100% at 84% 0%,#0e1a2a 0%,rgba(14,26,42,0) 100%)}
.page-hero h1{font-size:clamp(2.25rem, 1.15rem + 3.4vw, 4rem);line-height:1.05;letter-spacing:-.018em}
[dir="rtl"] .page-hero h1{line-height:1.35;letter-spacing:0}
@media (prefers-reduced-motion:no-preference){
  .page-hero h1{animation:fadeup .9s var(--ease) both}
  .page-hero .lead,.page-hero .actions,.page-hero p.small,.page-hero .live{animation:fadeup .9s var(--ease) .14s both}
  .page-hero figure{animation:fadeup 1.1s var(--ease) .1s both}
}

/* three words that carry a section (home: knowledge, automation, data) */
.cols--lead .col{border-top-color:var(--line-strong);padding-top:var(--space-32)}
.cols--lead .col h3{font-size:var(--fs-title);line-height:1.12}
.cols--lead .col p{margin-top:var(--space-16);font-size:var(--fs-body)}
[dir="rtl"] .cols--lead .col h3{line-height:1.4}

/* =====================================================================
   Third pass, 12 November 2026: the film starts by itself without sound,
   a diagram of knowledge and systems, fewer pictures on the home page
   ===================================================================== */
.wrap > .head:last-child{margin-bottom:0}
.actions--center{justify-content:center}
.wide-media--land img{aspect-ratio:16/9}
@media (max-width:700px){ .wide-media--land img{aspect-ratio:16/9} }
.cards--text .card{border-top:1px solid var(--line-strong)}
.cards--text .card .tag{margin-top:var(--space-32)}

/* ---------- the film: silent start, "Play with sound", pause ---------- */
.js .film-frame[data-grow] .film-player{transform:scale(calc(.92 + .08 * var(--p,1)));transform-origin:50% 100%;will-change:transform}
.film-bar{display:none;position:absolute;z-index:3;inset-block-start:clamp(10px,1.5vw,20px);inset-inline-end:clamp(10px,1.5vw,20px);align-items:center;gap:8px}
.film-player.is-preview .film-bar{display:flex}
.film-player.is-preview video{cursor:pointer}
.film-sound,.film-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;
  border:1px solid color-mix(in srgb,var(--stone) 30%,transparent);border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--night) 72%,transparent);color:var(--stone);font:inherit;font-size:.875rem;font-weight:600;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.film-sound{padding-block:0;padding-inline:14px 18px}
.film-toggle{width:44px;padding:0}
.film-sound svg,.film-toggle svg{flex:0 0 auto;width:18px;height:18px;fill:currentColor}
.film-sound .wave{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.film-sound:hover,.film-toggle:hover{background:var(--stone);border-color:var(--stone);color:var(--night)}
.film-player.is-paused [data-film-pause],.film-player:not(.is-paused) [data-film-resume]{display:none}
[dir="rtl"] .film-sound svg{transform:scaleX(-1)}

/* ---------- knowledge and systems: the diagram plays three short examples ----------
   Everything flows INTO Dana and her answer goes down to the guest. carve.js draws the lines and runs the examples:
   a guest asks, the chips that hold the answer light up and send their light, a light circles Dana while she
   works, and the answer runs down. The arrow tips show the direction even when nothing moves. */
.hub{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  column-gap:clamp(64px,10vw,168px);row-gap:clamp(88px,9vw,128px);max-width:1080px;margin:0 auto var(--space-32)}
.hub-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hub-wires .wire{fill:none;stroke:var(--line-strong);stroke-width:1}
.hub-wires .tip{fill:var(--steel)}
.hub-wires .node{fill:var(--night);stroke:var(--steel);stroke-width:1}
.hub-wires .pulse{fill:none;stroke:var(--circuit);stroke-linecap:round;stroke-dasharray:var(--dash) 200;stroke-dashoffset:var(--from);opacity:0}
.hub-wires .pulse--tail{--dash:30;--from:260;--to:130;--o:.55;stroke-width:1.6}
.hub-wires .pulse--head{--dash:5;--from:210;--to:80;--o:1;stroke:#e2f3ff;stroke-width:2.4}
.hub-wires .pulse--out.pulse--tail{stroke-width:2.6}
.hub-wires .pulse--out.pulse--head{stroke-width:3.4}
.hub-wires .pulse--ask{stroke:var(--steel-light)}
.hub-wires .pulse--ask.pulse--tail{--o:.3}
.hub-wires .pulse--ask.pulse--head{stroke:var(--stone);stroke-width:1.8}
.hub-wires .pulse.go{animation:hubShot 1.2s cubic-bezier(.5,0,.3,1) both}
.hub-wires .pulse--head.go{filter:drop-shadow(0 0 4px var(--circuit))}
@keyframes hubShot{0%{stroke-dashoffset:var(--from);opacity:0}8%{opacity:var(--o,1)}90%{opacity:var(--o,1)}100%{stroke-dashoffset:var(--to);opacity:0}}
.hub-side{position:relative;z-index:1;align-self:start;width:min(100%,304px)}
.hub-side--know{justify-self:end}
.hub-side--sys{justify-self:start}
.hub-title{margin-bottom:var(--space-16)}
.hub-chips{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.hub-chips li{display:flex;align-items:center;min-height:46px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--radius-hair);
  background-color:var(--surface-raised);color:var(--text);font-size:.9375rem;line-height:1.3;
  transition:opacity .45s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
.hub.is-asking .hub-chips li{opacity:.62}
.hub .hub-chips li.is-on{opacity:1;border-color:var(--steel-light);background-color:color-mix(in srgb,var(--circuit) 15%,var(--surface-raised));
  box-shadow:0 0 28px -10px var(--circuit)}
.hub-core{position:relative;z-index:1;display:grid;justify-items:center;gap:var(--space-16)}
.hub-dana{position:relative;width:clamp(128px,13vw,176px);aspect-ratio:1;padding:6px;border:1px solid var(--line-strong);border-radius:50%;background:var(--night);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--circuit) 30%,transparent),0 0 56px -6px color-mix(in srgb,var(--circuit) 40%,transparent);
  transition:box-shadow .5s var(--ease)}
.hub-dana::before{content:"";position:absolute;inset:-6px;border-radius:50%;opacity:0;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 58%,color-mix(in srgb,var(--circuit) 75%,transparent) 88%,#e9f6ff 100%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(closest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  transition:opacity .3s var(--ease)}
.hub-dana::after{content:"";position:absolute;inset:-2px;border:1.5px solid var(--circuit);border-radius:50%;opacity:0;pointer-events:none}
.hub-dana.is-thinking::before{opacity:1;animation:hubSpin .8s linear infinite}
.hub-dana.is-answer{box-shadow:0 0 0 2px color-mix(in srgb,var(--circuit) 85%,transparent),0 0 100px 0 color-mix(in srgb,var(--circuit) 70%,transparent)}
.hub-dana.is-answer::after{animation:hubPing 1.1s ease-out both}
@keyframes hubSpin{to{transform:rotate(360deg)}}
@keyframes hubPing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.38)}}
.hub-dana img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%}
.hub-name{font-family:var(--font-display);font-size:1.25rem;line-height:1.2;color:var(--text)}
.hub-out{position:relative;z-index:1;grid-column:1 / -1;display:grid;justify-items:center;row-gap:var(--space-24);width:100%}
.hub-talk{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(16px,2.6vw,36px);width:100%;max-width:960px}
.hub-guestcell{display:grid;justify-items:center}
.hub-guest{display:grid;place-items:center;width:68px;aspect-ratio:1;border:1px solid var(--line-strong);border-radius:50%;background:var(--night);color:var(--steel-light);
  transition:border-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.hub-guest.is-on{border-color:var(--circuit);color:var(--stone);box-shadow:0 0 0 1px color-mix(in srgb,var(--circuit) 60%,transparent),0 0 44px -2px color-mix(in srgb,var(--circuit) 60%,transparent)}
.hub-guest svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.hub-guest-name{margin-top:var(--space-12);font-size:1.25rem;line-height:1.2;color:var(--text)}
.hub-bubble{display:none;width:min(100%,348px);min-height:112px;padding:12px 16px 14px;border:1px solid var(--line);border-radius:var(--radius-hair);background:var(--surface-raised);
  opacity:0;transform:translate3d(0,8px,0);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .hub-bubble{display:block}
.hub-bubble.is-on{opacity:1;transform:none}
.hub-bubble--ask{justify-self:end}
.hub-bubble--answer{justify-self:start;border-color:color-mix(in srgb,var(--circuit) 45%,var(--line));background:color-mix(in srgb,var(--circuit) 8%,var(--surface-raised))}
.hub-bubble-who{display:block;margin-bottom:4px;font-size:.75rem;font-weight:600;color:var(--accent)}
.hub-bubble p{font-family:var(--font-text);font-size:.9375rem;line-height:1.4;color:var(--text)}
.hub-bubble p:dir(rtl){font-family:var(--font-arabic);font-size:1.125rem;line-height:1.6}   /* one example runs in the other language */
.hub-bubble p.is-typing::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-inline-start:2px;vertical-align:-.16em;background:currentColor;animation:hubCaret .7s steps(1) infinite}
@keyframes hubCaret{50%{opacity:0}}
.hub-chips--out{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;max-width:960px}
.hub-chips--out li{justify-content:center;min-height:56px;text-align:center}
.hub-note{max-width:66ch;margin:0 auto clamp(56px,7vw,96px);text-align:center}

/* it comes in when it is first seen (carve.js sets the classes); without scripts the lists simply stand there */
.js .hub .hub-side,.js .hub .hub-core,.js .hub .hub-out{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .hub .hub-side--sys{transition-delay:.1s}
.js .hub .hub-core{transition-delay:.2s}
.js .hub .hub-out{transition-delay:.34s}
.js .hub:not(.is-seen) .hub-side,.js .hub:not(.is-seen) .hub-out{opacity:0;transform:translate3d(0,22px,0)}
.js .hub:not(.is-seen) .hub-core{opacity:0;transform:scale(.9)}
.js .hub .hub-wires{opacity:0;transition:opacity .5s var(--ease)}
.js .hub.is-wired .hub-wires{opacity:1}
.hub.is-drawing .wire{stroke-dasharray:100;stroke-dashoffset:100;animation:hubDraw .95s var(--ease) forwards;animation-delay:var(--d,0s)}
.hub.is-drawing .tip,.hub.is-drawing .node{opacity:0;animation:hubFade .4s ease-out 1.05s forwards}
@keyframes hubDraw{to{stroke-dashoffset:0}}
@keyframes hubFade{to{opacity:1}}
@media (max-width:860px){
  .hub{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;row-gap:72px;align-items:start}
  .hub-side{width:100%;grid-row:1}
  .hub-side--know{grid-column:1;justify-self:stretch}
  .hub-side--sys{grid-column:2;justify-self:stretch}
  .hub-core{grid-column:1 / -1;grid-row:2}
  .hub-out{grid-row:3;margin-top:28px}
  .hub-title::before{display:none}
  .hub-chips{gap:8px}
  .hub-chips li{min-height:42px;padding:8px 12px;font-size:.8125rem}
  .hub-talk{grid-template-columns:1fr;row-gap:10px;justify-items:center;max-width:420px}
  .hub-guestcell{order:-1;margin-bottom:6px}
  .hub-bubble{width:100%;min-height:88px}
  .hub-bubble--answer{min-height:124px}
  .hub-bubble--ask,.hub-bubble--answer{justify-self:stretch}
  .hub-chips--out{grid-template-columns:1fr;max-width:420px;gap:8px}
  .hub-chips--out li{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .js .hub .hub-side,.js .hub .hub-core,.js .hub .hub-out,.js .hub .hub-wires,.hub-chips li,.hub-bubble,.hub-dana,.hub-guest{transition:none}
}
@media (prefers-reduced-motion:reduce){ .js .film-frame[data-grow] .film-player{transform:none} }

/* ---------- hardware page: the family picture under the opening words ---------- */
.page-hero--wide .wide-media{margin-top:clamp(40px,6vw,88px)}
.wide-media--lineup img{aspect-ratio:2400/1029;border-radius:0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 86%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 86%,transparent);
  mask-composite:intersect}
@media (max-width:700px){ .wide-media--lineup img{aspect-ratio:1080/1330} }

/* ---------- the film never grows taller than the window ----------
   12 November 2026: on a laptop the 16:9 picture at full width ran past the bottom of the screen. Its width now
   follows the height that is free below the header, so the whole picture stays in view with its controls. */
.film-frame{--film-w:min(100%, calc((100vh - var(--header-h) - clamp(48px,12vh,120px)) * 16 / 9))}
@supports (height:100svh){ .film-frame{--film-w:min(100%, calc((100svh - var(--header-h) - clamp(48px,12vh,120px)) * 16 / 9))} }
.film-player,.film-frame figcaption{width:var(--film-w);margin-inline:auto}