/* ============================================================
   RED TEAM GLOBAL — shared stylesheet
   Built to Brand Guidelines v1.0.
   Signal Red is a signal: actions, alerts, decision points and
   interaction states only. Never decoration.
   ============================================================ */

:root{
  /* RED TEAM GLOBAL — Brand Guidelines v1.0, section 06 / COLOR
     Ratio target: 72% Obsidian / 18% Mission White / 8% Tactical Gray / 2% Signal Red */
  --bg:        #08090B;   /* OBSIDIAN       */
  --bg-2:      #0C0E11;   /* obsidian, lifted — surface step between bg and graphite */
  --surface:   #121519;
  --surface-2: #17191D;   /* DEEP GRAPHITE  */
  --line:      rgba(243,244,245,.08);
  --line-2:    rgba(243,244,245,.14);
  --text:      #F3F4F5;   /* MISSION WHITE  */
  --muted:     #8C9199;   /* TACTICAL GRAY  */
  --muted-2:   #676C74;   /* tactical gray, recessed */
  --accent:    #E63A32;   /* SIGNAL RED — action, alerts, decision points only */
  --accent-dim:rgba(230,58,50,.14);
  --label:     .12em;     /* system labels: uppercase / +120 tracking */

  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pad: clamp(20px, 5vw, 48px);
  --sec: clamp(74px, 9.5vw, 156px);
  --max: 1240px;
  --r: 14px;
  --nav-h: 66px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-sans); font-size:17px; line-height:1.65; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.08; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec); position:relative; }
.section.tight{ padding-block:clamp(56px,7vw,104px); }
.hr{ height:1px; background:var(--line); border:0; margin:0; }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }

/* ---------- type ---------- */
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:var(--label); text-transform:uppercase;
  color:var(--muted); margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); flex:none; }
.eyebrow.plain{ color:var(--muted-2); }
.eyebrow.plain::before{ background:var(--muted-2); }
.center .eyebrow{ justify-content:center; }

.h1{ font-size:clamp(34px,6.6vw,80px); font-weight:600; letter-spacing:-.042em; }
.h2{ font-size:clamp(27px,4.2vw,52px); letter-spacing:-.035em; }
.h3{ font-size:clamp(20px,2.2vw,27px); letter-spacing:-.025em; }
.lead{ font-size:clamp(16.5px,1.5vw,20px); color:var(--muted); max-width:62ch; line-height:1.68; }
.lead strong{ color:var(--text); font-weight:550; }
.small{ font-size:14.5px; color:var(--muted); line-height:1.6; }
.mono{ font-family:var(--f-mono); }
.lead + .lead{ margin-top:18px; }

/* staccato line stacks — the copy is written in short declarative lines */
.stack{ display:grid; gap:5px; margin-top:26px; }
.stack span{ font-size:clamp(18px,2.3vw,27px); font-weight:600; letter-spacing:-.03em; line-height:1.28; }
.stack span.dim{ color:var(--muted-2); font-weight:500; }
.center .stack{ justify-items:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:100px;
  font-size:15px; font-weight:550; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s, border-color .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:#fff; font-weight:600; }
.btn-primary:hover{ background:#E9503F; }
.btn-ghost{ border-color:var(--line-2); color:var(--text); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.06); }
.btn-sm{ padding:10px 20px; font-size:14px; }
.btn .arw{ transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arw{ transform:translateX(3px); }
.btnrow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.center .btnrow{ justify-content:center; }

/* ---------- media slots ---------- */
.slot{
  position:relative; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); isolation:isolate;
}
.slot img, .slot video{ width:100%; height:100%; object-fit:cover; display:block; }
.slot .ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; text-align:center; padding:24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.028) 0%, rgba(255,255,255,0) 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 11px),
    var(--surface);
}
.slot .ph b{ font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#8E98A4; }
.slot .ph span{ font-size:11px; color:var(--muted-2); font-family:var(--f-mono); }
.slot .ph i{ font-style:normal; font-size:9.5px; letter-spacing:var(--label); text-transform:uppercase; color:var(--muted-2); }
.slot.loaded .ph{ display:none; }
.hero-media .ph, .cta-media .ph{ justify-content:flex-start; padding-top:100px; }
.phero-media .ph{ justify-content:flex-end; padding-bottom:18px; }
.fitbox img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(52px) brightness(.24) saturate(.5); transform:scale(1.18);
}
.fitbox img.fg{ position:relative; width:100%; height:100%; object-fit:contain; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
}
.nav.stuck, .nav.open, body.subpage .nav{
  background:rgba(8,9,11,.82); backdrop-filter:saturate(160%) blur(18px); border-bottom-color:var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:650; letter-spacing:.1em; font-size:14.5px; flex:none; }
/* Artwork is tight; clear space (X = T-stem width) is held in layout, so the
   stated size is the size of the mark itself — 05/PROTECTION min 24px. */
.brand .mark{ width:auto; height:27px; flex:none; }
.brand .sub{ color:var(--muted); font-weight:400; }
.footmark{ width:150px; height:auto; display:block; margin-bottom:22px; }  /* min 120px wide */
.navlinks{ display:flex; gap:26px; align-items:center; }
/* :not(.btn) so the reset never strips the CTA's fill */
.navlinks > a:not(.btn), .navlinks > .dd > button{
  font-size:14px; color:var(--muted); background:none; border:0; padding:0;
  font-family:inherit; cursor:pointer; transition:color .2s; display:inline-flex; align-items:center; gap:6px;
}
.navlinks > a:not(.btn):hover, .navlinks > .dd > button:hover, .navlinks > a[aria-current="page"]{ color:var(--text); }
.navlinks > a[aria-current="page"]{ font-weight:550; }

.dd{ position:relative; }
.dd > button svg{ transition:transform .25s; }
.dd.on > button svg{ transform:rotate(180deg); }
.ddmenu{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:288px; padding:8px; border-radius:14px;
  background:rgba(16,19,23,.97); backdrop-filter:blur(20px);
  border:1px solid var(--line-2); box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:.25s cubic-bezier(.2,.7,.3,1);
}
.dd.on .ddmenu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.ddmenu a{ display:block; padding:11px 14px; border-radius:9px; transition:background .2s; }
.ddmenu a:hover{ background:rgba(255,255,255,.06); }
.ddmenu b{ display:block; font-size:14.5px; font-weight:550; letter-spacing:-.015em; color:var(--text); }
.ddmenu span{ display:block; font-size:12.5px; color:var(--muted-2); margin-top:2px; }
/* no negative margin: it pulled the button outside the container in RTL.
   The 10px padding simply becomes part of the tap target. */
.navtoggle{ display:none; background:none; border:0; color:var(--text); padding:10px; cursor:pointer; }

/* ---------- home hero ----------
   .scrub gives the section extra scroll length and pins the contents, so the
   header video can be scrubbed frame-by-frame as the visitor scrolls. */
.hero{
  position:relative; min-height:min(100svh,960px); display:flex; align-items:flex-end;
  padding-bottom:clamp(48px,8vw,92px); padding-top:120px; overflow:hidden;
}
.hero.scrub{ height:230vh; min-height:0; display:block; padding:0; overflow:visible; }
.hero.scrub .hero-sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:flex-end; padding-bottom:clamp(48px,8vw,92px);
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero::after, .hero.scrub .hero-sticky::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,9,11,.88) 0%, rgba(8,9,11,.34) 30%, rgba(8,9,11,.74) 70%, var(--bg) 100%),
    radial-gradient(120% 78% at 80% 28%, rgba(217,58,43,.11) 0%, transparent 62%);
}
.hero.scrub::after{ content:none; }
.hero .wrap{ position:relative; }
/* scroll cue at the bottom of the pinned hero */
.scrollcue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:var(--label); text-transform:uppercase;
  color:var(--muted-2); pointer-events:none;
}
.scrollcue i{ display:block; width:1px; height:26px; background:linear-gradient(var(--muted-2), transparent); }
.hero h1{ max-width:14ch; margin-bottom:22px; }
.hero .lead{ max-width:56ch; }
.hero-tag{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:24px;
  padding:7px 15px 7px 11px; border:1px solid var(--line-2); border-radius:100px;
  font-size:12.5px; letter-spacing:.06em; color:#C6CCD4; background:rgba(255,255,255,.03);
  text-transform:uppercase; backdrop-filter:blur(8px);
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; box-shadow:0 0 0 0 rgba(217,58,43,.55); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(217,58,43,0); } 100%{ box-shadow:0 0 0 0 rgba(217,58,43,0); } }

.hero-strip{ border-top:1px solid var(--line); background:var(--bg); }
.hero-strip .wrap{ display:flex; flex-wrap:wrap; gap:clamp(14px,3.4vw,46px); padding-block:22px; }
.hero-strip span{ font-size:11.5px; letter-spacing:var(--label); text-transform:uppercase; color:var(--muted-2); }

/* ---------- inner page hero ---------- */
.phero{ position:relative; padding-top:calc(var(--nav-h) + clamp(56px,9vw,120px)); padding-bottom:clamp(48px,7vw,96px); overflow:hidden; }
.phero-media{ position:absolute; inset:0; z-index:-2; }
.phero-media img{ width:100%; height:100%; object-fit:cover; }
.phero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.62) 45%, rgba(8,9,11,.9) 80%, var(--bg) 100%);
}
.phero .wrap{ position:relative; }
.phero h1{ max-width:17ch; margin-bottom:20px; }
.crumb{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:var(--label); text-transform:uppercase; color:var(--muted-2); margin-bottom:20px; }
.crumb a{ color:var(--muted-2); transition:color .2s; }
.crumb a:hover{ color:var(--text); }
.crumb i{ font-style:normal; color:var(--muted-2); }


/* ---------- page header shot ----------
   The topic image sits full-bleed directly under the page title instead of
   behind it: no crop to a letterbox strip, no gradient wash over the subject,
   and the headline never has to fight the picture for contrast. */
.phero.plain{ padding-bottom:clamp(34px,4.5vw,58px); }
.phero.plain::after{ content:none; }
.phero-shot{ width:100%; }
.phero-shot .slot{
  aspect-ratio:16/9; border-radius:0; border-left:0; border-right:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (max-width:660px){ .phero-shot .slot{ aspect-ratio:4/3; } }

/* ---------- treatment A: image as the ground of a whole section ----------
   The picture stops being a block in the page and becomes the stage the
   content stands on. A directional scrim keeps the copy side readable while
   the other side of the frame keeps its contrast. */
.onimage{ position:relative; isolation:isolate; overflow:hidden; border-block:1px solid var(--line); }
.onimage > .bgmedia{ position:absolute; inset:0; z-index:-2; }
.onimage > .bgmedia img{ width:100%; height:100%; object-fit:cover; }
.onimage::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.86) 38%, rgba(8,9,11,.42) 70%, rgba(8,9,11,.55) 100%),
    linear-gradient(180deg, rgba(8,9,11,.7) 0%, transparent 28%, transparent 70%, rgba(8,9,11,.8) 100%);
}
.onimage .flow .fx{
  background:rgba(10,12,15,.62); backdrop-filter:blur(6px);
  border-color:rgba(255,255,255,.13);
}
.onimage .flow .fx:hover{ background:rgba(16,19,24,.82); }
@media (max-width:860px){
  .onimage::after{
    background:linear-gradient(180deg, rgba(8,9,11,.86) 0%, rgba(8,9,11,.9) 55%, rgba(8,9,11,.95) 100%);
  }
}

/* ---------- treatment C: full-bleed film strip ----------
   The image spans the whole viewport at its own natural ratio — nothing is
   cropped, ever — and the copy sits on it in a lower corner. Edge to edge, so
   it reads as a passage of the page rather than a picture dropped into it. */
.filmstrip{ position:relative; width:100%; margin:0; border-radius:0; border:0; background:var(--bg); }
/* The top of the frame dissolves into the page above, so the picture reads as a
   continuation of the headline block instead of a slab with a hard edge.
   Masking the image itself keeps the fade proportional to the picture — an
   overlay sized off the figure would also count the caption, which on mobile
   made the fade swallow most of the frame. */
.filmstrip img{
  width:100%; height:auto; object-fit:unset;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 9%,
                     rgba(0,0,0,.72) 20%, #000 34%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 9%,
                     rgba(0,0,0,.72) 20%, #000 34%);
}
.filmstrip .ph{ position:relative; aspect-ratio:16/9; }   /* holds height until the file lands */
.filmstrip.loaded .ph{ display:none; }
.filmstrip figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding-block:clamp(30px,5vw,70px);
  background:linear-gradient(0deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.78) 42%, transparent 100%);
}
.filmstrip figcaption h3{ margin-bottom:14px; max-width:20ch; }
.filmstrip figcaption p{ max-width:52ch; }
@media (max-width:860px){
  /* over a 16:9 frame on a phone there is no room to read — drop it underneath */
  .filmstrip figcaption{ position:static; background:none; padding-block:26px 0; }
  .filmstrip figcaption p{ font-size:15.5px; }
}

/* ---------- split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,84px); align-items:center; }
.split.wide-l{ grid-template-columns:1.05fr .95fr; }
.split.top{ align-items:flex-start; }

/* ---------- heads ---------- */
.heads{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:40px; }

/* ---------- capability cards ---------- */
.capgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.capcard{
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:30px 28px 26px; transition:border-color .3s, transform .3s, background .3s;
}
.capcard::before{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:transparent; transition:background .3s; }
.capcard:hover{ border-color:var(--line-2); transform:translateY(-3px); background:var(--surface-2); }
.capcard:hover::before{ background:var(--accent); }
.capcard .ico{ width:28px; height:28px; margin-bottom:20px; color:var(--muted-2); }
.capcard h3{ font-size:18px; margin-bottom:9px; letter-spacing:-.025em; }
.capcard .tag{ font-size:14.5px; color:var(--text); font-weight:500; margin-bottom:10px; letter-spacing:-.015em; }
.capcard p{ font-size:14px; color:var(--muted); line-height:1.6; }
.capcard .go{ margin-top:22px; font-size:13px; color:var(--muted-2); display:inline-flex; align-items:center; gap:7px; transition:color .3s; }
.capcard:hover .go{ color:var(--accent); }
.capcard:hover .go svg{ transform:translateX(3px); }
.capcard .go svg{ transition:transform .3s; }

/* ---------- trait grid (creative / adaptive / …) ---------- */
.traits{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:48px; }
.trait{ background:var(--bg-2); padding:30px 24px 28px; transition:background .3s; }
.trait:hover{ background:var(--surface-2); }
.trait b{ display:block; font-family:var(--f-mono); font-size:12px; letter-spacing:var(--label); color:var(--text); margin-bottom:14px; }
.trait p{ font-size:14px; color:var(--muted); line-height:1.6; }

/* ---------- flow rail ---------- */
.flow{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin-top:44px; }
.flow .fx{
  flex:1 1 170px; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:22px 20px; position:relative; transition:border-color .3s, background .3s;
}
.flow .fx:hover{ border-color:rgba(217,58,43,.45); background:var(--surface-2); }
.flow .fx b{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:var(--label); color:var(--muted-2); margin-bottom:12px; }
.flow .fx:hover b{ color:var(--accent); }
.flow .fx h4{ font-size:15.5px; letter-spacing:-.02em; margin-bottom:7px; }
.flow .fx p{ font-size:13.5px; color:var(--muted); line-height:1.55; }

/* inline arrow flow, for short UNDERSTAND → ASSESS → … chains */
.chain{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:34px; }
.chain span{ font-family:var(--f-mono); font-size:clamp(12px,1.3vw,14px); letter-spacing:var(--label); text-transform:uppercase; color:var(--text); }
.chain i{ font-style:normal; color:var(--muted-2); }

/* ---------- bullet list ---------- */
.blist{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.blist li{ background:var(--bg-2); padding:16px 22px; font-size:15.5px; display:flex; gap:14px; align-items:center; transition:background .25s; }
.blist li:hover{ background:var(--surface-2); }
.blist li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--muted-2); flex:none; }
.blist.two{ grid-template-columns:1fr 1fr; }

/* simple inline bullets inside copy */
.dots{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:11px; }
.dots li{ display:flex; gap:12px; font-size:15px; color:var(--muted); align-items:flex-start; }
.dots li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--muted-2); flex:none; margin-top:9px; }

/* ---------- application cards ---------- */
.apps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.app{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:26px 24px; transition:border-color .3s, transform .3s, background .3s; }
.app:hover{ border-color:var(--line-2); transform:translateY(-3px); background:var(--surface-2); }
.app h4{ font-size:16.5px; margin-bottom:9px; letter-spacing:-.02em; }
.app p{ font-size:14px; color:var(--muted); line-height:1.6; }

/* ---------- gallery ---------- */
.gal{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:44px; }
.gal .slot{ aspect-ratio:3/2; }
.gal figure{ margin:0; position:relative; }
.gal figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:20px 22px;
  background:linear-gradient(0deg, rgba(8,9,11,.92), rgba(8,9,11,0));
  font-size:15px; font-weight:550; letter-spacing:-.015em; pointer-events:none;
}

/* ---------- statement band ---------- */
.band{ border-block:1px solid var(--line); background:var(--bg-2); }
.band .wrap{ padding-block:clamp(56px,8vw,110px); text-align:center; }
.band .big{ font-size:clamp(23px,3.5vw,44px); font-weight:600; letter-spacing:-.035em; line-height:1.2; max-width:24ch; margin-inline:auto; }
.band .sub{ font-size:15.5px; color:var(--muted); margin-top:22px; max-width:56ch; margin-inline:auto; line-height:1.68; }

/* ---------- CTA + form ---------- */
.cta{ position:relative; overflow:hidden; text-align:center; }
.cta-media{ position:absolute; inset:0; z-index:-2; }
.cta-media img, .cta-media video{ width:100%; height:100%; object-fit:cover; }
.cta::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--bg) 0%, rgba(8,9,11,.74) 40%, rgba(8,9,11,.9) 100%); }
.cta h2{ max-width:18ch; margin-inline:auto; margin-bottom:20px; }
/* the section is centred, so its own children must centre too — .center only
   ever applied to descendants of a .center ancestor, which these are not */
.cta .lead{ margin-inline:auto; }
.cta .btnrow{ justify-content:center; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:660px; margin:40px auto 0; text-align:left; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:11.5px; letter-spacing:var(--label); text-transform:uppercase; color:var(--muted-2); }
.field input, .field select, .field textarea{
  background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; color:var(--text); font-family:inherit; font-size:16px; width:100%;
  transition:border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,.055); }
.field textarea{ resize:vertical; min-height:110px; }
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 23px, calc(100% - 15px) 23px; background-size:5px 5px; background-repeat:no-repeat; }
.field select option{ background:#14181D; }
.note{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--muted-2); line-height:1.55; margin-top:12px; }
.note svg{ flex:none; margin-top:2px; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); background:var(--bg); }
.foot .wrap{ padding-block:52px 34px; }
.foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:42px; }
.foot-cols{ display:flex; gap:clamp(30px,6vw,84px); flex-wrap:wrap; }
.foot-col h5{ font-size:11.5px; letter-spacing:var(--label); text-transform:uppercase; color:var(--muted-2); margin:0 0 16px; font-weight:600; }
.foot-col a{ display:block; font-size:14.5px; color:var(--muted); margin-bottom:11px; transition:color .2s; }
.foot-col a:hover{ color:var(--text); }
.foot-bot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line); }
.foot-bot p{ font-size:13px; color:var(--muted-2); }
.legal{ font-size:12.5px; color:var(--muted-2); line-height:1.6; max-width:78ch; margin-top:20px; }

/* ---------- reveal ---------- */
[data-rv]{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
[data-rv].in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .traits{ grid-template-columns:repeat(3,1fr); }
  .capgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1000px){
  .apps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  body{ font-size:16px; }
  .navlinks{ display:none; }
  .navtoggle{ display:block; }
  .nav.open .navlinks{
    display:flex; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:#0A0C0E; backdrop-filter:blur(18px);
    padding:8px var(--pad) 26px; border-bottom:1px solid var(--line);
    max-height:calc(100svh - var(--nav-h)); overflow-y:auto;
  }
  .nav.open .navlinks > a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:16.5px; }
  .nav.open .navlinks > a.btn{ margin-top:18px; border-bottom:0; justify-content:center; }
  .dd{ border-bottom:1px solid var(--line); }
  .dd > button{ width:100%; justify-content:space-between; padding:15px 0; font-size:16.5px; }
  .ddmenu{
    position:static; transform:none; opacity:1; visibility:visible; min-width:0;
    background:none; border:0; box-shadow:none; padding:0 0 10px; display:none;
  }
  .dd.on .ddmenu{ display:block; transform:none; }
  .ddmenu a{ padding:11px 14px; background:rgba(255,255,255,.03); margin-bottom:6px; }
  .split, .split.wide-l{ grid-template-columns:1fr; }
  .blist.two{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .heads{ margin-bottom:30px; }
}
@media (max-width:660px){
  /* the scrub still reads, but 230vh meant 2.3 phone screens of pinned hero
     before any content — 140vh gets there in about a screen and a half */
  .hero.scrub{ height:140vh; }
  /* the cue sat on top of the buttons, and a phone needs no scroll affordance */
  .scrollcue{ display:none; }
  /* six labels wrapped into four ragged lines — two even columns instead */
  .hero-strip .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; padding-block:22px; }
  .hero-strip span{ font-size:10.5px; letter-spacing:.13em; }
  /* close the dead space between the strip and the first section */
  .hero-strip + .section{ padding-top:48px; }
  .traits{ grid-template-columns:1fr; }
  .capgrid{ grid-template-columns:1fr; }
  .apps{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding-top:132px; padding-bottom:60px; }
  .flow .fx{ flex:1 1 100%; }
  .foot-col{ min-width:44%; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  [data-rv]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   HEBREW / RTL
   Inter carries no Hebrew glyphs, so Assistant is loaded as the
   Hebrew companion — same humanist geometry, reads correctly at
   UI sizes. Only the genuinely directional rules are mirrored;
   everything else is already symmetric.
   ============================================================ */
:root{ --f-sans-he:"Assistant","Inter",-apple-system,"Segoe UI",Arial,sans-serif; }

[lang="he"] body,
[dir="rtl"] body{ font-family:var(--f-sans-he); letter-spacing:0; }
/* Hebrew has no case and no true small caps — tracking out uppercase Latin
   labels does nothing for it and just loosens the word shapes */
[dir="rtl"] .eyebrow, [dir="rtl"] .hero-strip span, [dir="rtl"] .crumb,
[dir="rtl"] .foot-col h5, [dir="rtl"] .field label, [dir="rtl"] .trait b,
[dir="rtl"] .flow .fx b, [dir="rtl"] .capcard .cn, [dir="rtl"] .chain span,
[dir="rtl"] .scrollcue{ letter-spacing:.02em; text-transform:none; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .h1,[dir="rtl"] .h2,[dir="rtl"] .h3,
[dir="rtl"] .stack span{ letter-spacing:-.01em; }

/* the eyebrow rule sits on the leading edge */
[dir="rtl"] .eyebrow::before{ order:-1; }

/* arrows point the way the reader travels */
[dir="rtl"] .btn .arw,
[dir="rtl"] .capcard .go svg,
[dir="rtl"] .chain i{ transform:scaleX(-1); }
[dir="rtl"] .btn:hover .arw{ transform:scaleX(-1) translateX(3px); }
[dir="rtl"] .capcard:hover .go svg{ transform:scaleX(-1) translateX(3px); }

/* film strip captions and gallery captions follow the text direction */
[dir="rtl"] .filmstrip figcaption,
[dir="rtl"] .gal figcaption{ text-align:right; }

/* the asymmetric on-image scrim flips so the dark side stays under the copy */
[dir="rtl"] .onimage::after{
  background:
    linear-gradient(270deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.86) 38%, rgba(8,9,11,.42) 70%, rgba(8,9,11,.55) 100%),
    linear-gradient(180deg, rgba(8,9,11,.7) 0%, transparent 28%, transparent 70%, rgba(8,9,11,.8) 100%);
}
@media (max-width:860px){
  [dir="rtl"] .onimage::after{
    background:linear-gradient(180deg, rgba(8,9,11,.86) 0%, rgba(8,9,11,.9) 55%, rgba(8,9,11,.95) 100%);
  }
}
/* radial warm-up in the hero mirrors too */
[dir="rtl"] .hero::after, [dir="rtl"] .hero.scrub .hero-sticky::after{
  background:
    linear-gradient(180deg, rgba(8,9,11,.88) 0%, rgba(8,9,11,.34) 30%, rgba(8,9,11,.74) 70%, var(--bg) 100%),
    radial-gradient(120% 78% at 20% 28%, rgba(230,58,50,.11) 0%, transparent 62%);
}

/* language switcher */
.langsw{ display:inline-flex; align-items:center; gap:2px; flex:none; }
.langsw a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-2); padding:6px 8px; border-radius:6px; transition:color .2s, background .2s;
}
.langsw a:hover{ color:var(--text); background:rgba(243,244,245,.06); }
.langsw a[aria-current="true"]{ color:var(--text); }
.langsw i{ font-style:normal; color:var(--muted-2); opacity:.5; }
@media (max-width:860px){
  /* the switcher is inside .navlinks, so it collapses with the menu and never
     competes with the brand and burger for room in the 375px bar */
  .nav.open .langsw{ padding:18px 0 0; border-bottom:0; justify-content:flex-start; }
  .langsw a{ padding:10px 14px; font-size:14px; }
}