/* r2 Console -- shualadom.com in Metrics chrome. The rail padding, rule, tab, toggle and red-rule numbers are lifted from
   Metrics (app/_shared/rf-viewer.css .vmast/.vmbr/.vmastrule, app/styles/shared.css .tab/.theme-toggle);
   _tools/build.py re-reads those sources and fails the build if a copied number is gone. */
:root{--bg:#1f1f1d;--panel:#242422;--card:#2a2a28;--card2:#323230;--line:#4a4a48;--ink:#e8e8e2;--dim:#aaa;
  --rule:rgba(232,232,226,.32);--red:#b62628;--red-ink:#ff5b5d;--scrim:rgba(31,31,29,.72);--glow:0 0 12px rgba(182,38,40,.35);
  --gx:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--w:min(1200px,100% - 2 * var(--gx));
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--lk:96px;--tw:.24;
  --f:"Assistant",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Hebrew",sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;color-scheme:dark}
[data-theme="light"]{--bg:#f5f5f5;--panel:#ffffff;--card:#f5f5f5;--card2:#f0f0f0;--line:rgba(0,0,0,.18);--ink:#1a1a1a;--dim:#666;
  --rule:rgba(26,26,26,.32);--red-ink:var(--red);color-scheme:light}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--bg)}
body{margin:0;font:400 17px/1.7 var(--f);color:var(--ink);background:var(--bg);overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.lock{position:fixed;left:0;right:0;overflow:hidden}
img{display:block;max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
button,input{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
input{appearance:none;-webkit-appearance:none;font-size:16px}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
svg{width:1em;height:1em;fill:currentColor;flex:none}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;top:-80px;inset-inline-start:var(--gx);z-index:200;display:flex;align-items:center;min-height:48px;padding:0 16px;background:var(--red);color:#fff;font-weight:800}
.skip:focus{top:calc(8px + var(--st))}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
main{display:block;padding-bottom:64px}
p+p{margin-top:16px}

/* one box for every square control: 48 both ways, 2px line border */
.burger,.s-tog,.xs-b,.tog,.mnav-x,.sov-x,.td-x,.car-arr,.soc a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;border:2px solid var(--line);color:var(--ink);background:transparent}
.burger svg,.s-tog svg,.xs-b svg,.mnav-x svg,.sov-x svg,.td-x svg,.car-arr svg,.soc svg,.srch button svg,.sov-f button svg,.lb button svg{width:20px;height:20px}
[dir=ltr] .car-arr svg,[dir=ltr] .lb-p svg,[dir=ltr] .lb-n svg{transform:scaleX(-1)}
.tog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.t-moon,[data-theme="light"] .t-sun{display:none}
[data-theme="light"] .t-moon{display:block}
.lg-l,[data-theme="light"] .lg-d{display:none}
[data-theme="light"] .lg-l{display:block}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;background:var(--red);color:#fff;font:800 16px/1.2 var(--f);letter-spacing:.5px;text-align:center;border:0}

/* ── header: Metrics' rail (.vmast) between a search box and the door/toggle pair ────────────────── */
.hdr{background:var(--panel);padding-top:var(--st)}
.hdr-in{width:var(--w);margin-inline:auto;display:grid;align-items:center}
.srch{display:grid;grid-template-columns:216px 48px;height:48px}
.srch input,.sov-f input{height:48px;min-width:0;padding:0 14px;background:var(--card);border:1px solid var(--line);color:var(--ink);font:500 16px/1 var(--f)}
.srch input{border-inline-end:0}
.srch input::placeholder,.sov-f input::placeholder{color:var(--dim);opacity:1}
.srch button,.sov-f button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--red);color:#fff}

/* the lockup, his pick (r2-brand 03): the full Metrics logo | a rule | the Hebrew name on one line, all three on the
   logo's centre line. One variable sizes it: --lk, the logo's height. The name's letters are centred, not its line box:
   Assistant 800's letter body sits .07em below the box centre (r2-brand/_tools/measure_type.py). */
.ralm{grid-area:r;display:flex;align-items:center;padding:15px 0}
.lk{height:var(--lk);width:auto;max-width:none}
.tw-t{display:flex;align-items:center;height:calc(var(--lk) * .254);margin-inline-start:calc(var(--lk) / 8);padding-inline-start:calc(var(--lk) / 8);
  border-inline-start:1px solid var(--rule);font:800 calc(var(--lk) * var(--tw))/1 var(--f);white-space:nowrap;color:var(--ink)}
.tw-t>span{position:relative;top:-.07em}
.ralrule{height:4px;background:var(--red)}

/* the desktop row, his pick (mockups/header 01 Mirror): the footer's own row turned over -- the footer's two nav lists
   either side of the lockup (its logo, its 15px box), the search square and the theme square at the two ends, the athlete
   zone the one red cell. The row is the lockup's height; the current page drops the rail's 4px red onto the rule. The
   search square opens the header's search box in place (site.js). Up to 1024px the phone row (.hdr-in) stands alone. */
.hdr:not(.xs-on) .xs-f{display:none}
@media (max-width:1024px){
  .hdr .xs-b,.hdr .xd,.hdr .xs-f{display:none}
}
@media not all and (max-width:1024px){
  .hdr .hdr-in{display:none}
  .hdr .xd{width:var(--w);margin-inline:auto;display:grid;grid-template-columns:48px minmax(0,1fr) auto minmax(0,1fr) 48px;
    grid-template-areas:"q ns r ne t";align-items:center;column-gap:clamp(8px,11.6% - 107.2px,32px);--P:clamp(14px,3.4vw - 20.85px,21px)}
  .hdr .x1-n{display:contents}
  .hdr .xs-b{grid-area:q}
  .hdr .xd>.tog{grid-area:t}
  .hdr .xd .ralm{grid-area:r;padding-inline:6px;margin-inline:-6px}
  .hdr .f-nav{width:auto;align-self:stretch;align-items:stretch}
  .hdr .f-nav--s{grid-area:ns;justify-self:end}
  .hdr .f-nav--e{grid-area:ne;justify-self:stretch}
  .hdr .f-nav li{flex:none}
  .hdr .f-nav a{position:relative;align-self:stretch;flex:none;padding-inline:var(--P);white-space:nowrap}
  .hdr .f-nav a[aria-current]{color:var(--ink)}
  .hdr .f-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red)}
  .hdr .f-nav a:focus-visible,.hdr .xd .ralm:focus-visible{outline-offset:-4px}
  .hdr .f-nav li:has(.xa-az)::before{display:none}
  .hdr .f-nav li:has(.xa-az){flex:1 1 auto;min-width:0}
  .hdr .f-nav a.xa-az{flex:1 1 auto;align-self:center;display:flex;align-items:center;justify-content:center;gap:10px;height:48px;min-height:0;
    margin-inline-start:calc(var(--P) + 3px);padding-block:0;padding-inline:16px;white-space:nowrap;
    background:transparent;border:2px solid var(--red-ink);color:var(--red-ink);box-shadow:none}
  .hdr .xa-i{flex:none;display:flex;align-items:center;justify-content:center}
  .hdr .xa-i svg{width:20px;height:20px}
  .hdr .f-nav a.xa-az:focus-visible{outline-offset:2px;outline-color:var(--ink)}
  .hdr .xs-f{grid-area:ns;justify-self:stretch;grid-template-columns:minmax(0,1fr) 48px}
  .hdr.xs-on .f-nav--s{visibility:hidden}
}
@media (hover:hover){
  .hdr .f-nav a.xa-az:hover{background:var(--red);color:#fff;box-shadow:none}
}

.tab{display:flex;align-items:center;justify-content:center;width:160px;min-height:48px;padding:8px 16px;background:var(--card);border:1px solid var(--line);color:var(--dim);font:800 15px/1.2 var(--f);letter-spacing:1px;text-align:center;transition:background .12s,color .12s,border-color .12s,box-shadow .12s}

/* ── phone/tablet menu sheet and search panel ─────────────────────────────────────────────────── */
.mnav{position:fixed;inset:0;z-index:50;display:none;background:var(--bg);overflow:auto;overscroll-behavior:contain}
.mnav.on{display:block}
.mnav-hd{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;column-gap:8px;padding:var(--st) var(--gx) 0;background:var(--panel)}
.mnav-hd .ralm{grid-area:auto;justify-self:center}
.mnav nav{padding:24px var(--gx) calc(24px + var(--sb))}
.mnav-l{display:flex;flex-direction:column;align-items:center;gap:8px}

.sov{--hr:calc(var(--lk) + 30px + var(--st));position:fixed;inset:0;z-index:60;display:none;padding:calc((var(--lk) - 18px) / 2 + var(--st)) var(--gx) 0;
  background:linear-gradient(to bottom,var(--panel) var(--hr),var(--red) var(--hr),var(--red) calc(var(--hr) + 4px),var(--scrim) calc(var(--hr) + 4px))}
.sov.on{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-content:start;column-gap:8px}
.sov-f{display:grid;grid-template-columns:48px minmax(0,1fr);height:48px}
.sov-f button{order:-1}
.sov-f input{border-inline-start:0}

/* ── heroes and the title plate ───────────────────────────────────────────────────────────────── */
.hero{position:relative}
.hero-pic{height:clamp(200px,32vw,460px);height:clamp(200px,max(min(32vw,460px),30vw),70svh);background:var(--card2);overflow:hidden}
.hero-bg{width:100%;height:100%;object-fit:cover}
.hero--contact .hero-bg{object-position:50% 30%}
.hero--arts .hero-bg{object-position:50% 45%}
.hero--gal .hero-bg{object-position:50% 38%}
.hero--home .hero-pic{position:relative;height:min(60vw,calc(100svh - 300px));min-height:220px}
.hero--home .hero-bg{object-position:36% 62%}
/* a section's words stand in the foot of its photo as the home poster's name stands in the collage: the letters, their red
   glow and mist, the shadow pool and the rise are the home's own rules, re-selected out of hero.css where the marker
   stands (build.py BLEND). Below it, only the fit to a strip: the photo's foot dissolves into the page on the home's
   curve, scaled to the strip, and the words climb one line into it. */
.hero{--bx:max(var(--gx),3vw);--ink1:#fbfdff;--ink2:#aab6c3;--wrap:rgba(214,228,242,.42);--cast:rgba(4,7,11,.78);--pool:rgba(8,11,16,.74);--haze:rgba(200,214,228,.30)}
[data-theme="light"] .hero{--ink1:#56616d;--ink2:#222a33;--wrap:rgba(255,255,255,.75);--cast:rgba(34,42,52,.26);--pool:rgba(238,242,246,.74);--haze:rgba(250,252,253,.62)}
.hero-cap::before{content:"";position:absolute;inset:-70% 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72% 88% at 50% 100%,var(--pool) 50%,color-mix(in srgb,var(--pool) 55%,transparent) 76%,transparent)}
.hero-t{position:relative;z-index:0;font:800 var(--fs)/1.05 var(--f);margin:0}
.hero-l{display:block;color:var(--ink2);
  background:url(/media/bn-grain-f85a84.webp) 0 0/160px 160px,linear-gradient(to bottom,var(--ink1) 22%,var(--ink2) 86%);
  background-blend-mode:overlay,normal;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 1px var(--wrap)) drop-shadow(0 .04em .04em var(--cast)) drop-shadow(0 .12em .22em var(--cast))}
.hero-t::before,.hero-t::after{content:"";position:absolute;pointer-events:none}
.hero-t::before{z-index:-1;left:-8%;right:-8%;bottom:-.26em;height:.32em;
  background:radial-gradient(farthest-side,var(--red) 18%,color-mix(in srgb,var(--red) 80%,transparent) 34%,color-mix(in srgb,var(--red) 50%,transparent) 52%,
    color-mix(in srgb,var(--red) 22%,transparent) 70%,color-mix(in srgb,var(--red) 6%,transparent) 86%,transparent)}
.hero-t::after{z-index:1;left:-6%;right:-6%;bottom:-.04em;height:.36em;background:radial-gradient(farthest-side at 50% 100%,var(--haze),transparent)}
[data-theme="light"] .hero .hero-tag{color:var(--ink1)}
@keyframes bn-in{from{opacity:0;transform:translateY(14px)}}
.hero-cap>*,.hero>.hero-tag{animation:bn-in .9s cubic-bezier(.2,.7,.2,1) both}
.hero>.hero-tag{animation-delay:.1s}
.hero{--fs:clamp(32px,5vw,60px);overflow:hidden}
.hero-pic{position:relative}
.hero-pic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 4%,color-mix(in srgb,var(--bg) 94%,transparent) 22%,color-mix(in srgb,var(--bg) 60%,transparent) 36%,transparent 60%)}
.hero-cap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;margin:calc(-1 * var(--fs)) auto 0;padding:0 var(--gx) calc(.5 * var(--fs));text-align:center}
/* the home's caption is the width of the screen, a section's is the width of its words: the pool is held to the words and
   thins out at its sides and its last 40px, and no layer reaches the screen's edge, so the page beside the title stays the page */
.hero-cap::before{left:-25%;right:-25%;
  -webkit-mask-image:linear-gradient(to top,transparent 4px,#000 44px),linear-gradient(to right,transparent,#000 20% 80%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to top,transparent 4px,#000 44px),linear-gradient(to right,transparent,#000 20% 80%,transparent);mask-composite:intersect}
.hero-cap::before,.hero-t::before,.hero-t::after{max-width:calc(100vw - 2 * var(--gx));margin-inline:auto}
.hero-l{text-wrap:balance}
.hero-tag{display:block;margin-top:14px;font:600 clamp(18px,1.5vw,21px)/1.5 var(--f);color:var(--dim)}

/* ── sections ─────────────────────────────────────────────────────────────────────────────────── */
.sec{padding-top:64px}
.sec>*{width:var(--w);margin-inline:auto}
.panel{background:var(--panel);border:1px solid var(--line);padding:40px}
.ttl{font:800 30px/1.25 var(--f);text-align:center;margin-bottom:32px}
.ttl::after,.tc-name::after,.td-name::after,.ct-h::after{content:"";display:block;width:48px;height:4px;background:var(--red);margin:14px auto 0}
.panel .ttl,.tc-name,.ct-h{text-align:start}
.panel .ttl::after,.tc-name::after,.ct-h::after{margin-inline:0}
.panel .ttl{margin-bottom:24px}
.ct-h{font:800 26px/1.3 var(--f);margin-bottom:24px}
.tc-sub,.td-sub{color:var(--dim);font-weight:700}
.more{text-align:center;margin-top:32px}

/* carousels */
.car{position:relative}
.car-vp{overflow:hidden;touch-action:pan-y}
.car-track{display:flex;gap:16px;will-change:transform}
.car-track>*{flex:0 0 100%;min-width:0}
.car-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px}
/* the dots never wrap: they shrink, so a long carousel stays one row (r3's, lifted) */
.car-dots{display:flex;align-items:center;justify-content:center;min-width:0}
.car-dots>*{display:flex;align-items:center;justify-content:center;height:48px;min-width:0}
.car-dots>button{width:48px;flex:0 1 48px}
.car-dots>span{width:20px;flex:0 1 20px}
.car-dots>*::before{content:"";display:block;flex:none;width:12px;height:12px;border:1px solid var(--line)}
.car-dots>[aria-current="true"]::before{background:var(--red);border-color:var(--red)}

.btn-2{background:transparent;color:var(--ink);border:2px solid var(--line)}

.gcar .car-track>*{flex-basis:calc((100% - 16px) / 2)}
.gs img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--card2)}

/* home: articles grid */
.agrid{display:grid;grid-template-columns:1fr 2fr 1fr;grid-template-rows:240px 240px;grid-template-areas:"a m b" "c m d";gap:16px}
.at--m{grid-area:m}.at--a{grid-area:a}.at--b{grid-area:b}.at--c{grid-area:c}.at--d{grid-area:d}
.at{display:flex;flex-direction:column;min-width:0}
.at a{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:44px;overflow:hidden;background:var(--card2);color:#fff}
.at img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.at-cat{position:absolute;top:12px;inset-inline-start:12px;z-index:1;padding:6px 10px;background:var(--red);color:#fff;font:800 13px/1.1 var(--f)}
.at-b{position:relative;display:block;padding:40px 16px 16px;background:linear-gradient(to bottom,rgba(31,31,29,0),rgba(31,31,29,.85) 45%);color:#fff}
.at-t{font:800 18px/1.3 var(--f);text-wrap:balance}
/* lit (hover/focus): the title turns brand red, and the scrim under it closes up so the red reads over any photo */
.at-b{--lit:linear-gradient(to bottom,rgba(31,31,29,0),rgba(31,31,29,.94) 40px)}
.at a:focus-visible .at-b{background:var(--lit)}
.at a:focus-visible .at-t{color:#ff5b5d}
.at--m .at-t{font-size:26px}
.at-m{display:block;margin-top:6px;font-size:14px;color:#e8e8e2}

/* two-up rows: contact */
.row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.row-txt{display:flex;flex-direction:column;justify-content:center}
.row-img{display:flex;align-items:center;justify-content:center;padding:12px;background:var(--card2);border:1px solid var(--line);overflow:hidden}
.row-img img{width:auto;max-height:min(720px,80svh)}

/* testimonies: cards with an excerpt; the full testimony opens in its dialog */
.tgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.tc{position:relative;grid-column:span 2;grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:12px;min-width:0;padding-bottom:24px;background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--red)}
.tc>:not(.tc-img){margin-inline:24px}
.tc-img{grid-row:1;margin-bottom:8px;background:var(--card2)}
.tc-img img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 25%}
.tc-name{grid-row:2;font:800 22px/1.3 var(--f)}
.tc-name::after{margin-top:10px}
.tc-sub{grid-row:3}
.tc-x{grid-row:4;margin:0}
.tc-more{grid-row:5;align-self:end}
.tc-more::after{content:"";position:absolute;inset:0}
.td{width:min(760px,100% - 2 * var(--gx));max-width:none;max-height:calc(100% - 32px - var(--st) - var(--sb));margin:auto;padding:0;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--red);overflow:hidden}
.td[open]{display:flex;flex-direction:column}
.td::backdrop{background:rgba(31,31,29,.86)}
.td-hd{flex:none;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;column-gap:8px;padding:16px;border-bottom:1px solid var(--line)}
.td-t{grid-column:2;text-align:center}
.td-name{font:800 26px/1.3 var(--f)}
.td-name::after{margin-top:10px}
.td-sub{margin-top:10px}
.td-x{grid-column:3}
.td-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 32px 32px;line-height:1.75}

/* articles */
.arts-q{text-align:center;font-weight:700;margin-bottom:24px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);min-width:0}
.card-img{display:block;background:var(--card2)}
.card-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card-b{flex:1;display:flex;flex-direction:column;gap:10px;padding:20px 24px 24px}
.card-t{font:800 21px/1.3 var(--f);text-wrap:balance}
.card-t a{display:flex;align-items:center;min-height:48px}
.card-t a:focus-visible{color:var(--red-ink)}
.card-m{font-size:14px;color:var(--dim)}
.card-m+.card-x{margin-top:0}
.card-x{font-size:17px}
.card-more{align-self:start;margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:2px solid var(--line);font-weight:800}

/* gallery */
.gal-grid{columns:3;column-gap:8px}
.gi{position:relative;display:block;margin-bottom:8px;break-inside:avoid;overflow:hidden;background:var(--card2)}
.gi img{width:100%}
.gi::after{content:"";position:absolute;inset:0;background-color:rgba(31,31,29,0);transition:background-color .4s}
.gal-grid.js-m{position:relative;columns:auto}
.gal-grid.js-m .gi{position:absolute;margin:0}
.gal-grid.js-m .gi img{height:100%;object-fit:cover}
.gal-grid.ready .gi img{transition:opacity .6s}
.gi.wait img{opacity:0}
.lb{--bg:#1f1f1d;--panel:#242422;--line:#4a4a48;--ink:#e8e8e2;--dim:#aaa;position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(31,31,29,.97);color:var(--ink);touch-action:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.lb.on{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.lb img{max-width:calc(100% - 144px);max-height:calc(100svh - 144px);width:auto;height:auto;user-select:none;-webkit-user-drag:none}
.lb button{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--panel);border:2px solid var(--line);color:var(--ink)}
.lb-x{top:calc(16px + var(--st));inset-inline-end:var(--gx)}
.lb-p,.lb-n{top:50%;margin-top:-24px}
.lb-p{inset-inline-start:var(--gx)}
.lb-n{inset-inline-end:var(--gx)}
.lb-c{position:absolute;bottom:calc(16px + var(--sb));left:0;right:0;pointer-events:none;display:flex;align-items:center;justify-content:center;height:48px;font:700 15px/1 var(--mono);color:var(--dim);direction:ltr}

/* contact */
.ct-txt{align-items:center;text-align:center}
.ct-txt .ct-h{text-align:center}
.ct-txt .ct-h::after{margin-inline:auto}
.ct-h2{margin-top:40px}
.ct-mail a{display:inline-flex;align-items:center;gap:12px;min-height:48px;font-size:20px;font-weight:700}
.ct-mail svg{width:20px;height:20px}
.soc{--tgf:var(--panel);display:flex;justify-content:center;gap:8px}

/* article */
.ar-hero{height:420px;display:flex;justify-content:center;background:var(--panel);border-bottom:1px solid var(--line)}
.ar-bg{height:100%;width:auto;max-width:100%;object-fit:contain}
.ar-card{width:min(800px,100% - 2 * var(--gx));margin:40px auto 0}
.ar-cat,.ar-info,.ar-h{text-align:center}
.ar-cat a{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;background:var(--red);color:#fff;font-weight:800}
.ar-info{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:16px;color:var(--dim);font-size:15px}
.ar-info li{display:flex;align-items:center;gap:8px}
.ar-info svg{width:16px;height:16px}
.ar-h{font:800 36px/1.25 var(--f);margin:16px 0 40px}
.ar-body{font-size:18px;line-height:1.8}
.ar-body p+p{margin-top:18px}
.ar-body>*+*{margin-top:18px}
.ar-body .red{border-inline-start:4px solid var(--red);padding-inline-start:16px;font-weight:700}
.ar-body .sp{display:none}
.ph{font:800 26px/1.3 var(--f)}
.ar-body>.ph{margin-top:48px}
.pf{text-align:center}
.pf img{width:min(100%,500px);max-height:min(80svh,720px);object-fit:contain;margin-inline:auto}
.pf figcaption{margin-top:10px;font-size:17px;color:var(--dim)}
.pbox{padding:24px;padding-inline-end:28px;background:var(--panel);border-inline-start:4px solid var(--red)}
.pbox>*+*{margin-top:16px}
.pbox-h{font:800 20px/1.35 var(--f)}
.pq{padding:24px;text-align:center;background:var(--panel);border-bottom:3px solid var(--red);font-size:20px;font-weight:700}
.ar-body ul{list-style:square;padding-inline:24px}
.ar-body ul+ul{margin-top:6px}
.ar-body li::marker{color:var(--red)}

/* footer, his pick (mockups/footer 02 מסילה): the header's grid at the page's foot. Three destinations either side of
   the logo in cells of one width; under the site's 1px line, the mission, the contact squares and the copyright on the
   same axis; the dedication alone as the page's last line. */
.ftr{background:var(--panel);border-top:4px solid var(--red)}
.ftr-in{width:var(--w);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) min-content minmax(0,1fr);
  grid-template-areas:"ns m ne" "l l l" "t t t" "c1 k c2";align-items:center;column-gap:32px;padding-top:16px}
.ftr-in::before{content:"";grid-area:l;height:1px;margin-top:16px;background:var(--line)}
.f-mark{grid-area:m;justify-self:center;display:flex;justify-content:center;min-width:48px}
.f-mark .lk{height:64px}
/* three cells of 152px, each with its rule on the logo's side (459 = 3 x 153) */
.f-nav{display:flex;align-items:center;width:min(459px,100%)}
.f-nav li{flex:1 1 0;display:flex;align-items:center}
/* a half carrying a fourth destination (seven in all): the cells share the room by their words, so every word keeps the
   same air to its rules */
.f-nav:has(>li:nth-child(4)) li{flex-basis:auto}
.f-nav--s li::after,.f-nav--e li::before{content:"";flex:none;width:1px;height:16px;background:var(--rule)}
.f-nav--s{grid-area:ns;justify-self:end}
.f-nav--e{grid-area:ne;justify-self:start}
.f-nav a{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:48px;font:800 15px/1.2 var(--f);letter-spacing:1px;color:var(--dim);text-align:center}
.f-nav a:focus-visible{color:var(--red-ink)}
html:lang(en) .f-nav a,html:lang(en) .hdr .xa-t,html:lang(en) .m1-az .xa-t{font-size:13px;letter-spacing:.2em;text-indent:.2em;text-transform:uppercase}
.f-tag,.f-copy{font:400 14px/1.45 var(--f);color:var(--dim)}
.f-tag{grid-area:t;justify-self:center;margin-top:20px;text-align:center}
.f-soc{grid-area:k;margin-block:12px}
.f-copy{display:contents}
.f-cd{display:none}
.f-c1{grid-area:c1;justify-self:end;text-align:end}
.f-c2{grid-area:c2;justify-self:start;text-align:start}
.f-ded{display:flex;align-items:center;justify-content:center;gap:16px;padding:2px var(--gx) calc(18px + var(--sb));font:600 15px/1.5 var(--f);color:var(--ink);text-align:center}
.f-ded::before,.f-ded::after,html:lang(en) .bn-tag::before,html:lang(en) .bn-tag::after{content:"";flex:none;width:40px;height:1px;background:var(--red)}

@media (hover:hover){
  .btn:hover{box-shadow:var(--glow)}
  .btn-2:hover{box-shadow:none;border-color:var(--red)}
  .tab:hover{color:var(--ink);border-color:var(--dim)}
  .burger:hover,.s-tog:hover,.xs-b:hover,.tog:hover,.mnav-x:hover,.sov-x:hover,.td-x:hover,.car-arr:hover,.soc a:hover,.card-more:hover,.lb button:hover{border-color:var(--red)}
  .srch button:hover,.sov-f button:hover{box-shadow:var(--glow)}
  .at a:hover img{transform:scale(1.05)}
  .at a:hover .at-b{background:var(--lit)}
  .at a:hover .at-t{color:#ff5b5d}
  .gi:hover::after{background-color:rgba(31,31,29,.3)}
  .card-t a:hover{color:var(--red-ink)}
  .tc:hover .tc-more{border-color:var(--red)}
  .f-nav a:hover{color:var(--red-ink)}
}

@media (max-width:1024px){
  .hdr-in{grid-template-columns:48px minmax(0,1fr) 48px;grid-template-areas:"b r t";column-gap:8px}
  .burger{display:flex;grid-area:b}
  .s-tog{display:flex;grid-area:t}
  .hdr .ralm{justify-self:center;min-width:0;max-width:100%}
  .hdr .ralm .tw-t{height:auto;min-height:calc(var(--lk) * .254);white-space:normal}
  /* the footer's phone form (02 · A) switches with the header's burger: the burger carries the nav; no mission, no
     contact squares. The copyright's two halves take the nav's cells either side of the logo, behind the rail's own
     16px rules, each hugging its rule */
  .f-nav,.f-tag,.f-soc{display:none}
  .ftr-in{grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);grid-template-areas:"c1 r1 m r2 c2";column-gap:12px;padding-bottom:12px}
  .ftr-in::before,.ftr-in::after{content:"";display:block;width:1px;height:16px;margin:0;background:var(--rule)}
  .ftr-in::before{grid-area:r1}
  .ftr-in::after{grid-area:r2}
  .f-mark .lk{height:56px}
  .f-copy{font-size:13px}
  .f-c1,.f-c2{text-wrap:balance}
  .f-ded{gap:12px;font-size:14px}
  .f-ded::before,.f-ded::after,html:lang(en) .bn-tag::before,html:lang(en) .bn-tag::after{width:24px}
}
@media (max-width:991px){
  .agrid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-template-areas:"m m" "a b" "c d"}
  .at a{min-height:220px}
  .at--m a{min-height:320px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal-grid{columns:2}
  .tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tc:last-child:nth-child(odd){grid-column:2/span 2}
}
@media (max-width:767px){
  /* the phone lockup fills the header's middle column (48 + 8 each side) and stops at 64; 3.52 = logo .948 + gaps 2/8 + name --tw x 9.642 */
  :root{--lk:clamp(48px,(100vw - 2 * var(--gx) - 121px) / 3.52,64px)}
  main{padding-bottom:40px}
  .sec{padding-top:40px}
  .panel{padding:24px 20px}
  .ttl{font-size:26px;margin-bottom:24px}
  .ct-h{font-size:22px}
  .row{grid-template-columns:minmax(0,1fr)}
  .row-img img{max-height:min(560px,70svh)}
  .gcar .car-track>*{flex-basis:100%}
  .lb img{max-width:calc(100% - 2 * var(--gx));max-height:calc(100svh - 176px)}
  .lb-p,.lb-n{top:auto;bottom:calc(16px + var(--sb));margin-top:0}
  .ar-hero{height:240px}
  .ar-card{margin-top:28px}
  .ar-h{font-size:26px;margin-bottom:28px}
  .pq{font-size:18px}
  .td-name{font-size:22px}
  .td-body{padding:20px}
}
@media (max-width:575px){
  .agrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"m" "a" "b" "c" "d"}
  .at--m a{min-height:260px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .tgrid{grid-template-columns:minmax(0,1fr)}
  .tc,.tc:last-child:nth-child(odd){grid-column:auto}
  .tc-img img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* site additions: the classes import_wp.py emits for the 21 post bodies, which the r2 mockup (coaches only) never carried */
.c-red{color:var(--red-ink)}
.c-blue{font-weight:700}
.center{text-align:center}
.note{padding:24px;padding-inline-end:28px;background:var(--panel);border-inline-start:4px solid var(--red)}
.note>*+*{margin-top:12px}
.pbox-name,.pbox-title,.note-title{font:800 20px/1.35 var(--f)}
.ar-body ol{list-style:decimal;padding-inline:max(24px,1.4em) 24px}
.ar-body hr{border:0;border-top:1px solid var(--rule)}
.ar-body video{display:block;width:min(100%,500px);max-height:min(80svh,720px);margin-inline:auto;background:var(--panel)}
.pbox .pf img{width:min(100%,300px)}
/* The Hebrew site as the English one (mockups/he-parity, approved 2026-10-02). Bundled into the style sheet on the
   Hebrew build only, in the place of tape.css.
   The tape: tape.css's box carrying the name, its height from its own logo. The letters are the English size x1.12 (the
   Hebrew letter body stands .58em where a Latin capital stands .65em, in Assistant), their body centred, with no case
   and no tracking; 4px of padding keeps the x1.12 letters in the formula's band.
   The home banner: hero.css's English logo heights and tagline without the caps and the tracking; the tagline's red
   lines are .f-ded's (style.css). Up to 575px the tagline breaks after its first phrase (.bn-tb).
   The face is Heebo (mockups/he-fonts, ruled 2026-10-02), both scripts. Its Hebrew letter body sits centred in its box
   unnudged (mockups/menu-sheet/_tools/centre.py), so the title plate drops home.css's -.07em, which is Assistant's. */
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/heebo-hebrew.f1f7cfae.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/heebo-latin.50dae2e1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html:lang(he){--f:"Heebo",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Hebrew",sans-serif}
html:lang(he) .s2-p>span{top:0}
@media (max-width:767px){
  html:lang(he){--lk:64px}
}
@media (max-width:1024px){
  html:lang(he) .ralrule,html:lang(he) .sov::after{display:flex;align-items:center;justify-content:center;height:auto;min-height:calc(max(11px,calc(var(--lk) * .172)) + 10px);padding:4px var(--gx);text-align:center;background:var(--red);color:#fff}
  html:lang(he) .rt,html:lang(he) .sov::after{font:800 calc(max(11px,calc(var(--lk) * .172)) * 1.12)/1 var(--f);text-wrap:balance}
  html:lang(he) .ralm{min-width:48px;justify-content:center}
  html:lang(he) .sov::after{content:attr(data-rt);position:absolute;inset:var(--hr) 0 auto}
}
@media not all and (max-width:1024px){
  html:lang(he) .rt{display:none}
}
html:lang(he) .bn-logo{height:clamp(120px,30svh,340px)}
@media (max-aspect-ratio:1/1){
  html:lang(he) .bn-logo{height:20svh;min-height:96px}
}
@media (max-height:500px) and (min-aspect-ratio:1001/1000){
  html:lang(he) .bn-logo{height:44svh}
}
html:lang(he) .bn-tag{display:flex;align-items:center;justify-content:center;gap:16px;max-width:none;margin-top:6px;
  font:800 clamp(14px,1.25vw,18px)/1.35 var(--f);color:var(--ink);text-wrap:balance}
html:lang(he) .bn-tag::before,html:lang(he) .bn-tag::after{content:"";flex:none;width:40px;height:1px;background:var(--red)}
@media (max-width:1024px){
  html:lang(he) .bn-tag::before,html:lang(he) .bn-tag::after{width:24px}
}
@media not all and (max-width:575px){
  html:lang(he) .bn-tb{display:none}
}

.pm{--bx:max(var(--gx),3vw);--ink1:#fbfdff;--ink2:#aab6c3;--wrap:rgba(214,228,242,.42);--cast:rgba(4,7,11,.78);--pool:rgba(8,11,16,.74);--haze:rgba(200,214,228,.30)}
[data-theme="light"] .pm{--ink1:#56616d;--ink2:#222a33;--wrap:rgba(255,255,255,.75);--cast:rgba(34,42,52,.26);--pool:rgba(238,242,246,.74);--haze:rgba(250,252,253,.62)}
.pm-h{position:relative;z-index:0;font:800 var(--fs)/1.05 var(--f);margin:0}
.pm-l{display:block;color:var(--ink2);
  background:url(/media/bn-grain-f85a84.webp) 0 0/160px 160px,linear-gradient(to bottom,var(--ink1) 22%,var(--ink2) 86%);
  background-blend-mode:overlay,normal;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 1px var(--wrap)) drop-shadow(0 .04em .04em var(--cast)) drop-shadow(0 .12em .22em var(--cast))}
.pm-h::before,.pm-h::after{content:"";position:absolute;pointer-events:none}
.pm-h::before{z-index:-1;left:-8%;right:-8%;bottom:-.26em;height:.32em;
  background:radial-gradient(farthest-side,var(--red) 18%,color-mix(in srgb,var(--red) 80%,transparent) 34%,color-mix(in srgb,var(--red) 50%,transparent) 52%,
    color-mix(in srgb,var(--red) 22%,transparent) 70%,color-mix(in srgb,var(--red) 6%,transparent) 86%,transparent)}
.pm-h::after{z-index:1;left:-6%;right:-6%;bottom:-.04em;height:.36em;background:radial-gradient(farthest-side at 50% 100%,var(--haze),transparent)}
.pm-cap{position:relative;isolation:isolate}
.pm-cap::before{content:"";position:absolute;inset:-70% 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72% 88% at 50% 100%,var(--pool) 50%,color-mix(in srgb,var(--pool) 55%,transparent) 76%,transparent)}
.pm-fb::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;height:300px;background:linear-gradient(to top,var(--bg) 20px,color-mix(in srgb,var(--bg) 94%,transparent) 110px,color-mix(in srgb,var(--bg) 60%,transparent) 180px,transparent 300px)}
.pl .pm-cap::before{--foot:linear-gradient(to top,transparent 4px,#000 44px);
  -webkit-mask-image:var(--foot),linear-gradient(to right,transparent 19%,#000 31%,#000 69%,transparent 81%);-webkit-mask-composite:source-in;
  mask-image:var(--foot),linear-gradient(to right,transparent 19%,#000 31%,#000 69%,transparent 81%);mask-composite:intersect}
html:lang(en) .m1-w{display:flex;align-items:center;justify-content:center;gap:calc(16px - .3em);max-width:none;margin-top:6px;
  font:800 clamp(14px,1.25vw,18px)/1.35 var(--f);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
html:lang(he) .m1-w{display:flex;align-items:center;justify-content:center;gap:16px;max-width:none;margin-top:6px;
  font:800 clamp(14px,1.25vw,18px)/1.35 var(--f);color:var(--ink);text-wrap:balance}
.m1-w[aria-current]::before,.m1-w[aria-current]::after{content:"";flex:none;width:40px;height:1px;background:var(--red)}
@media (max-width:1024px){.m1-w[aria-current]::before,.m1-w[aria-current]::after{width:24px}}
/* menu 03 Tagline (mockups/menu-sheet): every word in the home's tagline -- hero.css's English caps, he.css's Hebrew --
   on a row ruled in the site's 1px line, the current page between the tagline's own red side lines (style.css).
   build.py (MENU_LIFT) reads all three out of their sheets and re-selects them as .m1-w; the lifted type stands at
   (0,2,1), so what this sheet changes on a word it says at (0,3,0) or above. */

/* the whole sheet scrolls as one, its header with it, when a short screen cannot hold the words -- nothing slides under
   a pinned bar; centred whenever they fit */
.mnav.m1n.on{display:flex;flex-direction:column}
.m1n .mnav-hd,.m1n .ralrule{flex:none}
.m1n nav{display:flex;flex-direction:column;flex:1 0 auto;padding-inline:0}
.m1-l{gap:0;align-items:stretch;margin-block:auto}
/* the stagger: .06s a line in list order, one extra beat before the door, whatever the word count */
.m1-l li{animation:bn-in .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * .06s)}
.m1-l li:nth-child(2){--i:1}.m1-l li:nth-child(3){--i:2}.m1-l li:nth-child(4){--i:3}.m1-l li:nth-child(5){--i:4}
.m1-l li:nth-child(6){--i:5}.m1-l li:nth-child(7){--i:6}.m1-l li:nth-child(8){--i:7}.m1-l li:nth-child(9){--i:8}
.m1-l li:nth-child(10){--i:9}.m1-l li:nth-child(11){--i:10}.m1-l li:nth-child(12){--i:11}
.m1-l li:has(>.m1-az),.m1-l .m1-sr{animation-delay:calc((var(--i,0) + 1) * .06s)}
/* the rows: the tagline at its full 18px on every screen, each row the title plate's phone height (home.css .s2-p), a
   word that has to wrap (large text on a phone) centred line by line; where a word is the current page the others step
   back to the page's grey */
.m1-l li:has(>.m1-w){border-bottom:1px solid var(--line)}
.m1-l li:first-child{border-top:1px solid var(--line)}
.m1n .m1-l .m1-w{min-height:56px;margin:0;padding-inline:var(--gx);font-size:18px;text-align:center}
/* large text: the English tracking stops at the tagline's 18px value, 5.4px (3.5px under 360); the side lines' gap
   follows it */
html:lang(en) .m1n .m1-l .m1-w{--tr:min(.3em,5.4px);--g:calc(16px - var(--tr));letter-spacing:var(--tr);text-indent:var(--tr)}
@media (max-width:359px){
  html:lang(en) .m1n .m1-l .m1-w{--tr:min(.3em,3.5px)}
}
/* and once a word's type grows past 20px (text zoom; it is 18px everywhere), the current row drops its side lines and
   their gaps, and its ink alone marks it: (20px - 1em) * 999 is 0 at 20px and up, and past any line or gap below */
.m1n .m1-l .m1-w{gap:min(var(--g,16px),max(0px,(20px - 1em) * 999))}
.m1n .m1-l .m1-w[aria-current]::before,.m1n .m1-l .m1-w[aria-current]::after{max-width:max(0px,(20px - 1em) * 999)}
.m1n .m1-l:has([aria-current]) .m1-w:not([aria-current]){color:var(--dim)}
.m1-w:focus-visible{outline-offset:-2px}
/* the door and the search keep the page's side margin, at most 440 wide */
.m1-l li:has(>.m1-az),.m1-l .m1-sr{align-self:center;width:min(100% - 2 * var(--gx),440px)}
.m1-l .m1-az{width:100%;margin-top:20px}
.m1-l .m1-az{justify-content:center;gap:10px;padding-inline:16px;background:var(--panel);border:2px solid var(--red-ink);color:var(--red-ink)}
.m1-az .xa-i{flex:none;display:flex}
.m1-az .xa-i svg{width:20px;height:20px}
/* the header's search form, as wide as the door above it -- only where the header hides its own (up to 1024px) */
.m1n .srch.m1-srch{display:grid;grid-template-columns:minmax(0,1fr) 48px;width:100%;margin-top:12px}
@media (hover:hover){
  .m1n .m1-l .m1-w:not([aria-current]):hover{color:var(--red-ink)}
  .m1-l .m1-az:hover{background:var(--red);color:#fff;box-shadow:none}
}
/* from a tablet up the rows stand in a 640 column, the door and the search under them */
@media (min-width:768px){
  .m1-l{width:min(100% - 2 * var(--gx),640px);margin-inline:auto}
  .m1n .m1-l .m1-w{padding-inline:0}
  .m1-l li:has(>.m1-az),.m1-l .m1-sr{width:min(100%,440px)}
}
@media not all and (max-width:1024px){
  .m1-l .m1-sr{display:none}
}
/* a short screen (a phone on its side): the lockup at the phone header's floor, 48; the rows in two ruled columns, the
   door and the search side by side under them */
@media (max-height:500px){
  .m1n{--lk:48px}
  .m1-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;width:min(100% - 2 * var(--gx),880px);margin-inline:auto}
  .m1n .m1-l .m1-w{padding-inline:0}
  .m1-l li:nth-child(2):has(>.m1-w){border-top:1px solid var(--line)}
  .m1-l li:has(>.m1-az),.m1-l .m1-sr{width:auto}
  .m1-l li:has(>.m1-az){grid-column:1}
  .m1n .m1-sr .m1-srch{margin-top:20px}
}