/* ============================================================
   1) DESIGN TOKENS
============================================================ */
:root{
  --ink:#060814;
  --ink-2:#0F1428;
  --frost:#EAF0FF;
  --muted:#8A93B2;
  --signal:#5B8DEF;
  --glow:#A9C5FF;

  /* ONE font across the whole site (Hebrew-safe). Hierarchy comes from weight,
     size, letter-spacing and colour — never from a different family.
     The cinematic intro title keeps 'Cormorant Garamond' (serif) as the only
     exception (.intro__title). */
  --font-display:'Assistant', sans-serif;   /* headlines */
  --font-body:'Assistant', sans-serif;      /* body/UI */
  --font-serif:'Assistant', sans-serif;     /* (kept as a var; same family now) */
  --font-mono:'Assistant', sans-serif;      /* kickers, numbers, labels */

  --h1: clamp(2.8rem, 7vw, 6rem);
  --h2: clamp(2rem, 4.5vw, 3.6rem);
  --h3: clamp(1.3rem, 2.5vw, 1.7rem);
  --body: 1.05rem;

  --pad-y: clamp(80px, 12vh, 160px);
  --pad-x: clamp(20px, 5vw, 48px);
  --maxw: 1200px;

  --radius: 18px;
  --border: 1px solid rgba(234,240,255,.10);
  --border-soft: 1px solid rgba(234,240,255,.06);

  /* z-scale */
  --z-bg:-1; --z-nav:100; --z-menu:500; --z-intro:9999;
}

/* ============================================================
   RESET / BASE
============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:clamp(150px, 13vw, 188px);   /* clear the slim bar + the full logo that hangs below it */
}

body{
  background:var(--ink);
  color:var(--frost);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  font-size:var(--body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ol,ul{ list-style:none; }

::selection{ background:rgba(91,141,239,.35); color:#fff; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--glow);
  outline-offset:3px;
  border-radius:6px;
}

.mono{ font-family:var(--font-mono); }
.serif-italic{ font-family:var(--font-serif); font-style:italic; font-weight:500; }

/* Editorial headlines — serif display family everywhere headings live */
h1, h2, h3,
.hero__title, .section__title, .card__title,
.founder-card__name, .glass-text{
  font-family:var(--font-display);
}
/* Big headlines: refined weight + tighter rhythm */
.hero__title, .section__title{
  line-height:1.05;
  letter-spacing:-0.01em;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* ============================================================
   SCROLL-SCRUB BACKGROUND VIDEO
   video (deepest) → scrim → glow blobs (.bg-field) → content.
   Container makes its own stacking context (z-index:-3) so both
   children stay behind .bg-field (z:-1) and all content.
============================================================ */
.bg-scroll{
  position:fixed; inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
  background:var(--ink); /* fallback before the poster/video paints */
}
.bg-scroll__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;          /* portrait video fills viewport, sides cropped */
  object-position:center;
}
/* Readability scrim (DESIGN.md §5) — darken the video so ALL text stays legible */
.bg-scroll__scrim{
  position:absolute; inset:0;
  background:var(--ink);
  opacity:.80;               /* darkened for WCAG AA — keeps muted text ≥4.5:1 over bright video frames */
}

/* ============================================================
   FIXED BACKGROUND
============================================================ */
.bg-field{
  position:fixed; inset:0;
  z-index:var(--z-bg);
  pointer-events:none;
  /* transparent so the scroll-video shows through; glows layer on top of it */
  overflow:hidden;
}
.glow{
  position:absolute;
  width:60vw; height:60vw;
  border-radius:50%;
  filter:blur(120px);
}
.glow--tr{
  top:-20vw; right:-10vw;
  background:radial-gradient(circle, var(--signal) 0%, transparent 70%);
  opacity:.12;
}
.glow--bl{
  bottom:-25vw; left:-12vw;
  background:radial-gradient(circle, var(--glow) 0%, transparent 70%);
  opacity:.08;
}
.grain{
  position:absolute; inset:0;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   KICKERS / HEADINGS
============================================================ */
.section__head{ margin-bottom:clamp(40px, 6vh, 72px); }
.section__title{
  font-size:var(--h2);
  font-weight:700;
}
.section__intro{
  color:var(--muted);
  max-width:60ch;
  margin-top:18px;
  font-size:1.1rem;
}

.card__title{ font-size:var(--h3); font-weight:700; line-height:1.25; }
.card__text{ color:var(--muted); margin-top:10px; }

/* ============================================================
   BUTTONS
============================================================ */
.btn-primary,.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:14px;
  padding:13px 30px;
  font-weight:700;
  font-size:1rem;
  line-height:1;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn-primary svg,.btn-ghost svg{ flex:none; }

.btn-primary{
  background:linear-gradient(135deg, var(--signal), #3E6FD9);
  color:#fff;
  border:1px solid transparent;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25), 0 12px 30px rgba(91,141,239,.30);
}
.btn-primary:hover{
  transform:scale(1.03);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 16px 44px rgba(91,141,239,.48);
}

/* Pulsating ring behind the button (ported from magicui PulsatingButton).
   The ring sits BEHIND the opaque button, so it only shows as it expands past
   the edges — the label stays fully readable. */
.btn-pulse{ position:relative; }
.btn-pulse::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--signal);
  animation:pulse-ring 1.5s ease-in-out infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.3); opacity:0; }
}

.btn-ghost{
  background:var(--ink-2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(234,240,255,.14);
  color:var(--frost);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  border-color:rgba(234,240,255,.32);
}
.btn-ghost--sm{ padding:10px 20px; font-size:.9rem; }

/* ============================================================
   2) INTRO OVERLAY
============================================================ */
/* ============================================================
   2) INTRO — cinematic spotlight reveal
   Pure-black full-screen overlay: converging cool white-blue spotlights →
   "Yuval & Eido" serif movie-title → lift up to reveal the hero.
   All motion is transform/opacity/filter only (GSAP-driven in main.js).
============================================================ */
#intro{
  position:fixed; inset:0;
  z-index:var(--z-intro);
  background:#000;              /* pure dark the whole time (no bg video shows through) */
  display:grid;
  place-items:center;
  overflow:hidden;
}
#intro.is-hidden{ display:none; }

/* Beam layer — screen-blended so overlapping cones add up into a bright pool */
.intro__beams{
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
}
/* Each beam: a tall cone, narrow at its source (top), spreading wide as it
   travels, heavily blurred. Cool white → --signal blue → transparent.
   JS switches them on (flicker + opacity) and sweeps rotation to aim + sways. */
.beam{
  position:absolute;
  width:clamp(240px, 30vw, 520px);
  height:170vh;
  transform-origin:center top;
  background:linear-gradient(to bottom,
    rgba(234,240,255,.60) 0%,
    rgba(150,180,245,.34) 24%,
    rgba(91,141,239,.16) 52%,
    rgba(91,141,239,0) 78%);
  /* narrow at the source (top), wide at the far end (bottom) → cone */
  clip-path:polygon(45% 0%, 55% 0%, 100% 100%, 0% 100%);
  filter:blur(44px);
  opacity:0;                   /* off until the lights "switch on" */
  will-change:transform, opacity;
}
/* Sources at the top corners (1,2) and the bottom centre (3), aimed inward.
   JS sets the settled rotation; these are just the anchor positions. */
.beam--1{ top:-8%;  left:6%; }
.beam--2{ top:-8%;  right:6%; }
.beam--3{ bottom:-12%; left:50%; margin-left:calc(clamp(240px, 30vw, 520px) / -2);
          transform-origin:center bottom; }

/* Soft pool of light where the beams converge in the centre */
.intro__pool{
  position:absolute;
  left:50%; top:48%;
  width:min(70vw, 720px); height:min(70vw, 720px);
  transform:translate(-50%, -50%);
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0;
  background:radial-gradient(circle at center,
    rgba(234,240,255,.42) 0%,
    rgba(120,160,240,.20) 34%,
    rgba(91,141,239,.07) 58%,
    transparent 72%);
  filter:blur(20px);
  will-change:transform, opacity;
}

/* Title + flourish, centered in the lit pool */
.intro__stage{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 2.4vw, 22px);
  padding:0 6vw;
}
/* The one non-Assistant exception (movie-title serif). Bright cool white, lit
   by the spotlights via a soft --signal glow. */
.intro__title{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(2.8rem, 9vw, 7rem);
  line-height:1;
  letter-spacing:.06em;
  color:var(--frost);
  text-align:center;
  white-space:nowrap;
  text-shadow:
    0 0 22px rgba(91,141,239,.45),
    0 0 60px rgba(91,141,239,.22);
  will-change:transform, opacity;
}
/* Thin elegant line that draws in under the name (scaleX 0→1 in JS) */
.intro__rule{
  display:block;
  width:min(46vw, 360px);
  height:1px;
  background:linear-gradient(to right,
    transparent, rgba(234,240,255,.85), rgba(91,141,239,.7), transparent);
  transform:scaleX(0);
  opacity:0;
  will-change:transform, opacity;
}

.intro__sr{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

.intro__skip{
  position:absolute;
  bottom:26px; left:26px;
  z-index:3;
  background:none; border:none;
  color:var(--muted);
  letter-spacing:.15em;
  font-size:.85rem;
  padding:8px 4px;
  pointer-events:auto;
  transition:color .2s ease;
}
.intro__skip:hover{ color:var(--frost); }

/* Glass shimmer text */
.glass-text{
  color:transparent;
  background:linear-gradient(135deg,#FFFFFF 0%,rgba(234,240,255,.5) 25%,rgba(169,197,255,.2) 45%,#FFFFFF 55%,rgba(234,240,255,.3) 75%,#FFFFFF 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:1px rgba(234,240,255,.25);
  filter:drop-shadow(0 12px 30px rgba(91,141,239,.35));
  animation:shimmer 8s linear infinite;
}
@keyframes shimmer{
  0%{ background-position:200% center; }
  100%{ background-position:0% center; }
}

/* ============================================================
   3) NAV
============================================================ */
/* Fully transparent bar — no background, blur, border or shadow (even on scroll).
   The space background shows through; the centered logo is flanked by 2 links each side. */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:var(--z-nav);
  /* Frosted glass: near-transparent tint + blur so content scrolling behind is
     blurred (the blur does the work, not an opaque fill). */
  background:rgba(5,7,15,.12);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.nav__inner{
  position:relative;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:16px var(--pad-x);             /* comfortable slim bar (not razor-thin) */
  display:grid;
  /* side | EMPTY center (reserves the logo's width) | side.
     The absolute logo sits over the empty centre column and, because it's out of
     flow, can't force the bar taller — but the reserved column + column-gap keep
     the flanking links clearly to the sides, never under it. */
  grid-template-columns:1fr clamp(172px, 13vw, 208px) 1fr;
  align-items:center;
  column-gap:clamp(28px, 4vw, 56px);
}
.nav__side{
  display:flex;
  gap:clamp(16px, 2.5vw, 36px);
  font-weight:500;
}
/* Explicit placement: links live in the OUTER columns only. Without this the
   out-of-flow logo frees the centre track and a side group would auto-place
   there — landing under the logo. */
.nav__side--start{ grid-column:1; justify-content:flex-end; }   /* RTL right cell, hug the logo */
.nav__side--end{ grid-column:3; justify-content:flex-start; }    /* RTL left cell, hug the logo */
.nav__side a{
  color:var(--frost);
  position:relative;
  padding:4px 0;
  letter-spacing:.02em;
  white-space:nowrap;
  text-shadow:0 1px 12px rgba(5,7,15,.6);   /* soft readability over video, not a nav bg */
  transition:color .2s ease;
}
.nav__side a::after{
  content:"";
  position:absolute;
  bottom:-2px; right:0;
  width:0; height:1.5px;
  background:var(--signal);
  transition:width .25s ease;
}
.nav__side a:hover{ color:var(--frost); }   /* no blue text — underline gives the hover cue */
.nav__side a:hover::after{ width:100%; }

/* Centered circular logo — kept LARGE, taken out of flow and horizontally
   centered. It HANGS from just below the viewport top so it POPS OUT below the
   slim bar while the WHOLE circle stays visible — it must never center on the
   bar's midline (that pushed its top half off-screen and cropped it). Overflow
   is visible (never clipped) and it stays clickable across its full circle. */
.nav__logo{
  position:absolute;
  left:50%;
  top:6px;                   /* small gap from the top so the full circle shows, uncropped */
  transform:translateX(-50%);
  z-index:1;                 /* above the flanking links / bar tint */
  display:grid;
  place-items:center;
  width:clamp(128px, 12vw, 168px);   /* ×2 — unchanged large size */
  height:clamp(128px, 12vw, 168px);
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(234,240,255,.18);
  background:var(--ink-2);
  box-shadow:0 0 0 4px rgba(91,141,239,.10), 0 6px 22px -6px rgba(91,141,239,.55);
}
.nav__logo img{ width:100%; height:100%; object-fit:cover; }

.nav__toggle{
  position:absolute;
  inset-inline-start:var(--pad-x);       /* RTL start = right edge */
  top:50%;
  transform:translateY(-50%);
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none;
  padding:6px;
}
.nav__toggle span{
  width:26px; height:2px;
  background:var(--frost);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0;
  z-index:var(--z-menu);
  background:rgba(6,8,20,.97);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.mobile-menu.is-open{ opacity:1; pointer-events:auto; }
.mobile-menu__close{
  position:absolute; top:22px; left:22px;
  background:none; border:none; color:var(--frost);
  padding:8px;
}
.mobile-menu__links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  font-size:1.6rem;
  font-weight:700;
}
.mobile-menu__links a{ color:var(--frost); }
.mobile-menu__links .btn-primary{ font-size:1.1rem; margin-top:10px; }

/* ============================================================
   4) HERO
============================================================ */
.hero{
  position:relative;
  min-height:100dvh;
  display:grid;
  place-items:center;
  overflow:hidden;
  /* No background of its own — the fixed bg-scroll video + global scrim show
     through, so the hero matches the sections below. Readability = text-shadow. */
  padding-top:80px;
}
.hero__content{
  position:relative;
  z-index:2;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* soft shadow keeps text legible over the video without a hero scrim */
  text-shadow:0 1px 24px rgba(5,7,15,.55), 0 1px 3px rgba(5,7,15,.5);
}
/* Trio line — the strong secondary statement above the H1 (the visual anchor) */
.hero__trio{
  font-size:clamp(1.6rem, 4vw, 3rem);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--frost);
  margin-bottom:clamp(22px, 3.5vh, 40px);
}
.hero__title{
  font-size:clamp(2.2rem, 5vw, 4.4rem);   /* full sentence — smaller than the old 2-word title */
  font-weight:800;
  line-height:1.14;
  max-width:16ch;                          /* wraps to a few balanced lines */
  text-align:center;
}
.hero__sub{
  color:var(--frost);
  opacity:.82;         /* bright, not gray — readable over the video */
  max-width:560px;
  font-size:1.15rem;
  margin-top:clamp(28px, 4vh, 40px);
}
.hero__cta{
  display:flex;
  gap:14px;
  margin-top:clamp(36px, 5vh, 52px);
  flex-wrap:wrap;
  justify-content:center;
}

/* load stagger initial state */
[data-hero]{ opacity:0; transform:translateY(24px); }

/* ============================================================
   SECTIONS (shared)
============================================================ */
.section{
  position:relative;
  padding-block:var(--pad-y);
}

/* ============================================================
   ENTRANCE REVEAL SYSTEM — initial states (JS animates to final)
   • [data-reveal]           → fade-up (opacity 0→1, y 28→0)
   • [data-reveal="heading"] → clip/mask reveal for big headings (sparingly)
   • [data-reveal-stagger]   → children fade-up in sequence (works cards,
                               service panels, process rows). ="fade" → opacity only.
============================================================ */
[data-reveal]{ opacity:0; transform:translateY(40px); }
[data-reveal="heading"]{ opacity:0; transform:translateY(40px); clip-path:inset(0 0 100% 0); }
[data-reveal-stagger] > *{ opacity:0; transform:translateY(40px); }
[data-reveal-stagger="fade"] > *{ transform:none; }              /* opacity only */
[data-reveal-stagger="side"] > *{ transform:translateX(60px); }  /* slide in from the side */
[data-reveal-stagger="scale"] > *{ transform:scale(.9); }        /* scale-in */

/* Cards */
.card{
  background:var(--ink-2);
  border:var(--border);
  border-radius:var(--radius);
  padding:clamp(24px, 3vw, 36px);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* ============================================================
   6) SERVICES
============================================================ */
/* Heading + intro stacked, centered, ABOVE the accordion (full-width row below). */
.services__head{ text-align:center; max-width:820px; margin-inline:auto; }
.services__lead{
  color:var(--frost);
  opacity:.82;                 /* bright, not gray — readable over the video */
  max-width:760px;
  margin-inline:auto;
  font-size:1.08rem;
  line-height:1.75;
}

.panels{
  display:flex;
  gap:16px;
  height:clamp(360px, 55vh, 480px);
  justify-content:center;              /* centered under the heading (not pinned to a side) */
  --panel-closed:clamp(84px, 8.75vw, 116px);   /* ~1.25× wider collapsed strips */
}
.panel{
  position:relative;
  flex:0 1 var(--panel-closed);        /* CLOSED (~84–116px) on load */
  min-width:0;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  /* GLASS — translucent + blur so the fixed bg-scroll video shows through */
  background:rgba(13,17,34,.45);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid rgba(234,240,255,.10);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.6);
  transition:flex .6s cubic-bezier(.7,0,.2,1),
             border-color .5s ease,
             box-shadow .5s ease;
}
/* Only the hovered/focused panel grows; siblings stay narrow. */
.panel.is-open{
  flex:5 1 var(--panel-closed);
  border-color:rgba(91,141,239,.38);
  /* soft blue glow — inner + outer, tasteful */
  box-shadow:
    0 0 0 1px rgba(91,141,239,.22),
    0 26px 60px -24px rgba(0,0,0,.6),
    0 0 46px -8px rgba(91,141,239,.38),
    inset 0 0 48px -14px rgba(91,141,239,.30);
}

/* Landscape background image — fills the panel behind the content. Settles from
   a slight scale-in (closed) to 1.0 (open) so the open framing looks right.
   Missing file → .panel__media gets .asset-missing (var(--ink-2) + mono label). */
.panel__media{
  position:absolute; inset:0;
  z-index:0;
  overflow:hidden;
}
.panel__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;                    /* cover + center only — never distort */
  object-position:center;
  transform:scale(1.05);               /* closed: gently scaled in */
  transition:transform .6s cubic-bezier(.7,0,.2,1),
             object-position .6s cubic-bezier(.7,0,.2,1);
}
.panel.is-open .panel__media img{ transform:scale(1); }  /* open: settled */

/* Readability scrim ON TOP of the image (darker at the bottom, where text sits) */
.panel__scrim{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(5,7,15,.40) 0%, rgba(5,7,15,.62) 55%, rgba(5,7,15,.78) 100%);
}

/* Faint blue radial sheen that appears when open */
.panel__sheen{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(78% 60% at 28% 16%, rgba(91,141,239,.22), transparent 70%);
  transition:opacity .55s ease;
}
.panel.is-open .panel__sheen{ opacity:1; }

/* CLOSED — small index at the top, vertical title near the bottom */
.panel__closed{
  position:absolute; inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;        /* vertical title sits near the bottom */
  padding:22px 0;
  transition:opacity .3s ease;
}
.panel.is-open .panel__closed{ opacity:0; pointer-events:none; }
.panel__vtitle{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:clamp(.92rem, 1.15vw, 1.1rem);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--frost);
  white-space:nowrap;
  max-height:100%;
}

/* OPEN — horizontal title + description; fades/slides in. Subtle readability
   gradient behind the text only (not a full opaque fill). */
.panel__open{
  position:absolute; inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;              /* RTL start = right edge */
  justify-content:flex-end;            /* content near the bottom */
  gap:14px;
  padding:clamp(26px, 2.6vw, 42px);
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  /* readability handled by .panel__scrim over the image */
  transition:opacity .45s ease .1s, transform .5s cubic-bezier(.7,0,.2,1) .1s;
}
.panel.is-open .panel__open{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.panel__title{
  font-size:clamp(1.4rem, 2vw, 1.9rem);
  font-weight:700;
  line-height:1.15;
  color:var(--frost);
}
.panel__desc{
  color:var(--frost);
  opacity:.8;
  max-width:42ch;
  font-size:1.02rem;
  line-height:1.6;
}

/* Focus ring for keyboard users */
.panel:focus-visible{
  outline:2px solid var(--glow);
  outline-offset:3px;
}

/* ============================================================
   7) WORKS
============================================================ */
/* Symmetrical, equal-size grid — explicit exception to DESIGN.md's asymmetric
   rule (see DESIGN.md §5). Five projects in a balanced 3-per-row grid (3 on top,
   2 centered below); all cards the same width, same 16/10 preview, same height
   (buttons align on one baseline). */
.works__grid{
  display:grid;
  gap:clamp(20px, 3vw, 34px);
  align-items:stretch;   /* every card stretches to the tallest → equal height */
}
.work-card{ display:flex; flex-direction:column; min-width:0; }

/* Desktop: 6-col base, each card spans 2 → 3 per row. The 4th card starts at
   column 2 so the bottom row (cards 4 & 5) is centered with one empty column
   on each side, keeping the 5-card layout symmetrical. */
@media (min-width:901px){
  .works__grid{ grid-template-columns:repeat(6, 1fr); }
  .work-card{ grid-column:span 2; }
  .work-card:nth-child(4){ grid-column:2 / span 2; }
}

/* Meta flexes to fill the card so all three "לאתר החי" links sit on one line */
.work-card__meta{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.work-card__title{ margin-bottom:4px; }
.work-card__meta .card__text{ margin-bottom:16px; }
.work-card .btn-ghost{ margin-top:auto; align-self:flex-start; }

/* Minimal "browser window" — this frame IS the card (no nested surface) */
.browser{
  border-radius:14px;
  overflow:hidden;
  border:var(--border-soft);
  background:var(--ink-2);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.75);
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             box-shadow .5s cubic-bezier(.22,1,.36,1),
             border-color .3s ease;
}
@media (hover:hover){
  .work-card:hover .browser{
    transform:translateY(-6px);
    box-shadow:0 44px 74px -30px rgba(0,0,0,.85);
    border-color:rgba(91,141,239,.35);
  }
}
.browser__bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  background:var(--ink-2);
  border-bottom:var(--border-soft);
}
.browser__bar .dot{
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(234,240,255,.18);
}
.browser__url{
  margin-inline-start:auto;
  font-size:.75rem;
  color:var(--muted);
  direction:ltr;
}
.preview{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--ink);
}
/* The <video> and its poster both fill the frame identically: object-fit:cover
   crops different source dimensions to the same 16/10 box (object-position:top). */
.work-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
}

/* Tablet 601–900px: 2 per row (4-col base, span 2), lone 5th card centered. */
@media (min-width:601px) and (max-width:900px){
  .works__grid{ grid-template-columns:repeat(4, 1fr); }
  .work-card{ grid-column:span 2; }
  .work-card:nth-child(5){ grid-column:2 / span 2; }
}
/* Mobile ≤600px: single column. */
@media (max-width:600px){
  .works__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   8) PROCESS — editorial steps: BIG ghosted numerals, NO borders/boxes.
   Big number on the RIGHT (RTL start), text on its LEFT. Hover emphasis +
   per-row slide-in entrance (setupProcessSteps in main.js).
============================================================ */
.proc-steps{
  display:flex;
  flex-direction:column;
  gap:clamp(28px, 5vh, 60px);
}
.proc-step{
  display:flex;
  flex-direction:row-reverse;   /* RTL row-reverse → number sits on the far RIGHT, text to its left */
  align-items:center;
  gap:clamp(18px, 4vw, 56px);
  transition:opacity .35s ease, transform .35s ease;
}
.proc-step__body{ flex:1 1 auto; min-width:0; }   /* text block, left of the number */
.proc-step__title{
  font-size:clamp(1.4rem, 3vw, 2.2rem);
  font-weight:700;
  color:var(--frost);
  line-height:1.2;
}
.proc-step__desc{
  margin-top:8px;
  color:var(--muted);
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  line-height:1.6;
  max-width:52ch;
}
/* BIG ghosted metallic numeral (frost fading to low opacity) on the RIGHT */
.proc-step__num{
  flex:none;
  font-size:clamp(5rem, 12vw, 11rem);
  font-weight:800;
  line-height:.85;
  letter-spacing:-.03em;
  opacity:.75;
  background:linear-gradient(180deg, rgba(234,240,255,.92) 0%, rgba(234,240,255,.07) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
/* Hover: emphasize the hovered row (brighter number, slight lift), dim the rest */
@media (hover:hover){
  .proc-steps:hover .proc-step{ opacity:.5; }
  .proc-steps .proc-step:hover{ opacity:1; transform:translateY(-4px); }
  .proc-steps .proc-step:hover .proc-step__num{ opacity:1; transform:scale(1.04); }
}

/* ============================================================
   5) ABOUT — floating founder portraits
============================================================ */
/* Extra vertical room so the floaters sit in the section's lower area, clear of
   the header. overflow:hidden clips the absolute floaters (no h-scroll). */
.about{
  min-height:clamp(560px, 80vh, 860px);
  overflow:hidden;   /* (.section already sets position:relative for the floaters) */
}

/* Centered text block (kicker + H2 + intro), above the floaters (z2 > z1) so it
   never overlaps the corner photos — they frame it from the sides/below. */
.about__inner{
  position:relative;
  z-index:2;
  max-width:960px;
  text-align:center;
}
/* Widen the intro so lines run a bit longer (overrides the generic 60ch cap). */
.about__inner .section__intro{ max-width:960px; margin-inline:auto; }

/* Floaters: two portraits side by side, centered in the lower part of the
   section (under the text) with a small gap — not at the far edges. */
.about__floaters{
  position:absolute;
  left:0; right:0;
  bottom:clamp(36px, 7vh, 80px);
  z-index:1;               /* behind the centered text (z2) */
  pointer-events:none;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(16px, 2.4vw, 36px);
}
.founder-float{
  position:static;
  width:clamp(150px, 20vw, 240px);
  margin:0;
  text-align:center;
  /* static — no float/parallax motion */
}

.founder-float__img{
  display:block;
  aspect-ratio:1 / 1;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(234,240,255,.12);
  background:var(--ink-2);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.7),
             0 0 40px -6px rgba(91,141,239,.35);   /* soft --signal glow */
}
.founder-float__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.founder-float__cap{
  margin-top:14px;
  font-size:1.05rem;
  font-weight:600;
  color:var(--frost);
  letter-spacing:.02em;
}

/* Mobile (<768px): don't float at the edges — stack inline, centered, smaller. */
@media (max-width:767px){
  .about{ min-height:auto; }
  .about__floaters{
    position:static;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(20px, 6vw, 36px);
    margin-top:clamp(36px, 7vh, 56px);
  }
  .founder-float{
    position:static;
    bottom:auto; left:auto; right:auto;
    width:clamp(130px, 40vw, 190px);
  }
}

/* ============================================================
   9) CONTACT
============================================================ */
.contact__grid{
  display:grid;
  grid-template-columns:1fr;      /* WhatsApp aside removed → form is the sole column */
  max-width:640px;
  margin-inline:auto;
}
.contact__form{ display:flex; flex-direction:column; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.9rem; font-weight:500; color:var(--frost); }
.field input,.field select{
  width:100%;
  background:var(--ink);
  border:1px solid rgba(234,240,255,.12);
  border-radius:12px;
  padding:14px 16px;
  color:var(--frost);
  font-family:inherit;
  font-size:1rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder{ color:var(--muted); }
.field input:focus,.field select:focus{
  border-color:var(--signal);
  box-shadow:0 0 0 3px rgba(169,197,255,.35);
  outline:2px solid var(--glow);        /* visible focus indicator (WCAG 2.4.7) */
  outline-offset:2px;
}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:#ff8a8a;
}
.field__req{ color:var(--frost); }
.field__hint{ font-size:.8rem; color:var(--muted); margin-top:-4px; }
/* Select styled as an obvious dropdown: custom chevron on the inline-end (left in
   RTL), with room reserved so the value never sits under the arrow. */
.field select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A93B2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 16px center;   /* RTL: arrow sits on the left edge */
  padding-left:44px;                       /* reserve space for the arrow */
}
.field select:hover{ border-color:rgba(234,240,255,.22); }
.contact__submit{ align-self:flex-start; margin-top:4px; }
.contact__note{ font-size:.9rem; color:var(--frost); margin-top:4px; min-height:1.2em; }
.contact__note.is-error{ color:#ffb3b3; }        /* readable red on dark */
.contact__note.is-success{ color:#a8f0c6; }       /* readable green on dark */
.contact__submit[disabled]{ opacity:.7; cursor:progress; }


/* ============================================================
   10) FOOTER
============================================================ */
.footer{
  border-top:var(--border-soft);
  padding-block:44px;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
/* Footer wordmark — plain text (no circle, no clipping) */
.footer__brand{
  color:var(--frost);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.footer__links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer__links a{ color:var(--muted); transition:color .2s ease; }
.footer__links a:hover{ color:var(--frost); }
.footer__links a[aria-current="page"]{ color:var(--frost); }
.footer__meta{ color:var(--muted); font-size:.82rem; }

/* ============================================================
   LEGAL / TEXT PAGES (privacy.html) — a readable dark text page.
   Plain --ink background (no bg video), comfortable ~800px column, RTL.
============================================================ */
.legal-header{
  border-bottom:var(--border-soft);
  background:rgba(6,8,20,.55);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.legal-header__inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:14px var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.legal-header__brand{ display:flex; align-items:center; gap:12px; color:var(--frost); font-weight:700; font-size:1.1rem; white-space:nowrap; }
.legal-header__logo{
  width:44px; height:44px; flex:none;
  border-radius:50%; overflow:hidden;
  border:1px solid rgba(234,240,255,.18);
  background:var(--ink-2);
  box-shadow:0 0 0 3px rgba(91,141,239,.10);
}
.legal-header__logo img{ width:100%; height:100%; object-fit:cover; }
/* Back link — text stays --frost (never blue); the arrow flips for RTL */
.legal-back{
  color:var(--frost); font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 2px;
}
.legal-back svg{ flex:none; }
.legal-back:hover{ text-decoration:underline; text-underline-offset:3px; }

.legal{
  max-width:800px;
  margin-inline:auto;
  padding:clamp(44px, 7vh, 84px) var(--pad-x) clamp(64px, 10vh, 120px);
}
.legal__title{
  font-size:clamp(2.2rem, 5vw, 3.2rem);
  color:var(--frost);
  line-height:1.12;
  letter-spacing:-.01em;
}
.legal__intro{
  color:var(--muted);
  margin-top:20px;
  font-size:1.08rem;
  line-height:1.85;
}
.legal h2{
  font-size:clamp(1.35rem, 3vw, 1.85rem);
  color:var(--frost);
  line-height:1.25;
  margin-top:clamp(38px, 5.5vh, 60px);
  margin-bottom:14px;
}
.legal p{ color:var(--frost); opacity:.9; line-height:1.85; }
.legal ul{ margin-top:8px; display:flex; flex-direction:column; gap:12px; }
.legal li{
  position:relative;
  padding-inline-start:22px;
  color:var(--frost); opacity:.9;
  line-height:1.8;
}
/* Bullet dot — a small --signal marker (non-text decoration, allowed) */
.legal li::before{
  content:"";
  position:absolute;
  inset-inline-start:4px; top:.7em;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--signal);
}
/* Links inside legal text stay --frost; the underline carries the blue accent */
.legal a{
  color:var(--frost);
  text-decoration:underline;
  text-decoration-color:var(--signal);
  text-underline-offset:3px;
  transition:text-decoration-color .2s ease;
}
.legal a:hover{ text-decoration-color:var(--glow); }

@media (max-width:560px){
  .legal-header__brand span{ display:none; }   /* keep just the logo on very small screens */
}

/* ============================================================
   ASSET PLACEHOLDER (missing images/videos)
============================================================ */
.asset-missing{
  position:relative;
  background:var(--ink-2)!important;
}
.asset-missing::after{
  content:attr(data-label);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--muted);
  text-align:center;
  padding:12px;
  direction:ltr;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:960px){
  .contact__grid{ grid-template-columns:1fr; }
}

/* Touch / narrow → vertical glass stack; tap toggles one open at a time.
   Header stays visible; open content expands below via max-height. */
@media (hover:none), (max-width:720px){
  .panels{
    flex-direction:column;
    height:auto;
    justify-content:flex-start;
    gap:14px;
    --panel-closed:auto;
  }
  .panel{
    flex:0 0 auto;
    width:100%;
    transition:border-color .4s ease, box-shadow .4s ease;
  }
  .panel.is-open{ flex:0 0 auto; }
  /* closed header is the always-visible tappable row */
  .panel__closed{
    position:relative;
    inset:auto;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    padding:20px 22px;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .panel__vtitle{
    writing-mode:horizontal-tb;         /* horizontal on mobile */
    font-size:1.15rem;
    white-space:normal;
    max-height:none;
  }
  /* open content expands below the header */
  .panel__open{
    position:relative;
    inset:auto;
    justify-content:flex-start;
    background:none;
    max-height:0;
    padding:0 22px;
    opacity:0;
    transform:none;
    overflow:hidden;
    transition:max-height .5s cubic-bezier(.7,0,.2,1), opacity .4s ease, padding .5s ease;
  }
  .panel.is-open .panel__open{
    max-height:320px;
    opacity:1;
    padding:0 22px 24px;
    pointer-events:auto;
  }
}

@media (max-width:760px){
  /* Collapse the 4 links into the hamburger; keep the centered logo. */
  .nav__side{ display:none; }
  .nav__inner{ grid-template-columns:1fr auto 1fr; }
  .nav__toggle{ display:flex; }
}

@media (max-width:480px){
  .footer__inner{ flex-direction:column; align-items:flex-start; }
  .btn-primary,.btn-ghost{ padding:12px 24px; }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .glass-text{ animation:none; }
  .btn-pulse::before{ animation:none; opacity:0; }   /* no pulse ring */
  [data-hero],[data-reveal],[data-reveal-stagger] > *{
    opacity:1!important; transform:none!important; clip-path:none!important;
  }
  .proc-step{ opacity:1!important; transform:none!important; }   /* static steps */
  /* Reduced motion: skip the beam animation — just show the title on black.
     JS holds it ~1s then reveals the hero. */
  .intro__beams{ display:none; }
  .intro__pool{ opacity:.5!important; }
  .intro__title{ opacity:1!important; transform:none!important; }
  .intro__rule{ opacity:1!important; transform:scaleX(1)!important; }
}

/* ============================================================
   ACCESSIBILITY — skip link, widget, statement modal, a11y modes
============================================================ */
/* Skip link — visually hidden until focused, then pinned to the top */
.skip-link{
  position:fixed;
  top:8px; inset-inline-start:8px;
  z-index:1001;
  transform:translateY(-160%);
  background:var(--ink-2);
  color:var(--frost);
  border:1px solid var(--signal);
  border-radius:10px;
  padding:12px 20px;
  font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.55);
  transition:transform .2s ease;
}
.skip-link:focus{ transform:none; outline:2px solid var(--glow); outline-offset:3px; }

/* Floating accessibility button (bottom-left) */
.a11y__fab{
  position:fixed;
  left:clamp(16px, 3vw, 28px);
  bottom:clamp(16px, 3vw, 28px);
  z-index:995;
  width:56px; height:56px;
  border-radius:50%;
  border:1px solid rgba(234,240,255,.25);
  background:var(--signal);
  color:#fff;
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow:0 10px 30px -6px rgba(91,141,239,.6), 0 0 0 4px rgba(91,141,239,.15);
  transition:transform .2s ease, box-shadow .2s ease;
}
.a11y__fab:hover{ transform:scale(1.06); }

/* Settings panel */
.a11y__panel{
  position:fixed;
  left:clamp(16px, 3vw, 28px);
  bottom:calc(clamp(16px, 3vw, 28px) + 68px);
  z-index:996;
  width:min(320px, calc(100vw - 32px));
  max-height:min(80vh, 560px);
  overflow-y:auto;
  background:var(--ink-2);
  color:var(--frost);
  border:1px solid rgba(234,240,255,.14);
  border-radius:18px;
  padding:18px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(91,141,239,.12);
}
.a11y__panel[hidden]{ display:none; }
.a11y__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.a11y__title{ font-size:1.15rem; font-weight:700; color:var(--frost); }
.a11y__iconbtn{ background:none; border:none; color:var(--frost); padding:6px; border-radius:8px; cursor:pointer; }
.a11y__group{ padding:12px 0; border-top:1px solid rgba(234,240,255,.08); }
.a11y__group:first-of-type{ border-top:none; padding-top:0; }
.a11y__label{ display:block; font-weight:600; margin-bottom:10px; color:var(--frost); }
.a11y__stepper{ display:flex; align-items:center; gap:10px; }
.a11y__btn{
  background:var(--ink);
  color:var(--frost);
  border:1px solid rgba(234,240,255,.16);
  border-radius:10px;
  padding:10px 14px;
  font-weight:700; font-size:1rem;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.a11y__btn:hover{ border-color:var(--signal); }
.a11y__btn--wide{ width:100%; text-align:center; }
.a11y__val{ min-width:56px; text-align:center; font-weight:700; }
/* Toggle switches (role="switch") */
.a11y__switch{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:none; color:var(--frost);
  font-size:1rem; font-weight:600; cursor:pointer; padding:2px;
}
.a11y__switch-ui{
  flex:none; width:46px; height:26px; border-radius:999px;
  background:var(--ink); border:1px solid rgba(234,240,255,.2);
  position:relative; transition:background .2s ease, border-color .2s ease;
}
.a11y__switch-ui::after{
  content:""; position:absolute; top:2px; inset-inline-start:2px;
  width:20px; height:20px; border-radius:50%; background:var(--frost);
  transition:transform .2s ease;
}
.a11y__switch[aria-checked="true"] .a11y__switch-ui{ background:var(--signal); border-color:var(--signal); }
.a11y__switch[aria-checked="true"] .a11y__switch-ui::after{ transform:translateX(-20px); }
.a11y__statement{
  width:100%; margin-top:6px; background:none; border:none;
  color:var(--frost); text-decoration:underline; text-underline-offset:3px;
  font-weight:600; cursor:pointer; padding:12px 2px 2px; text-align:start;
}
.a11y__fab:focus-visible, .a11y__iconbtn:focus-visible, .a11y__btn:focus-visible,
.a11y__switch:focus-visible, .a11y__statement:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; }

/* Accessibility statement modal */
.a11y-modal{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; }
.a11y-modal[hidden]{ display:none; }
.a11y-modal__backdrop{ position:absolute; inset:0; background:rgba(5,7,15,.82); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.a11y-modal__box{
  position:relative; width:min(680px, 100%); max-height:88vh; overflow-y:auto;
  background:var(--ink-2); color:var(--frost);
  border:1px solid rgba(234,240,255,.14); border-radius:18px;
  padding:clamp(24px, 4vw, 40px);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.8);
}
.a11y-modal__close{ position:absolute; top:14px; inset-inline-start:14px; background:none; border:none; color:var(--frost); padding:8px; border-radius:8px; cursor:pointer; }
.a11y-modal__close:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; }
.a11y-modal__box h2{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:16px; }
.a11y-modal__box h3{ font-size:1.15rem; font-weight:700; margin:22px 0 8px; color:var(--frost); }
.a11y-modal__box p{ color:var(--frost); opacity:.92; line-height:1.7; margin-bottom:10px; }
.a11y-modal__box ul{ list-style:disc; padding-inline-start:22px; color:var(--frost); opacity:.92; line-height:1.7; }
.a11y-modal__box li{ margin-bottom:6px; }
.a11y-modal__box a{ color:var(--frost); text-decoration:underline; }

/* HIGH-CONTRAST mode (class on <html>) — solid dark bg, bright secondary text */
html.a11y-contrast{ --muted:#EAF0FF; }
html.a11y-contrast body{ background:#000; }
html.a11y-contrast .bg-scroll__video{ display:none; }
html.a11y-contrast .bg-scroll__scrim{ opacity:1; background:#000; }
html.a11y-contrast .bg-field{ display:none; }
html.a11y-contrast .hero__content{ text-shadow:none; }
html.a11y-contrast .panel__media{ opacity:.16; }
html.a11y-contrast .panel__scrim{ background:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.92)); }

/* HIGHLIGHT-LINKS mode (class on <html>) */
html.a11y-links a{ text-decoration:underline !important; text-underline-offset:3px; text-decoration-thickness:2px; }
html.a11y-links .nav__side a,
html.a11y-links .btn-primary,
html.a11y-links .btn-ghost,
html.a11y-links .footer__links a,
html.a11y-links .work-card__meta a{ outline:2px solid var(--glow); outline-offset:3px; border-radius:6px; }