/* S Berenbaum · sberenbaum.ai · home page v1 · polish pass · 9.11.2026
   Ink, bone, white, one yellow. Rhythm: ink (hero) · bone (how it works) · ink (the difference) · bone (who I am) · ink (contact).
   Every section opens with its title (16 px) and heading (40 px to the content). Space Grotesk and Rubik only.
   Vertical metrics used in the calc()s below (OS/2 typo, USE_TYPO_METRICS on): Space Grotesk ascent .984, descent .292,
   cap .700; Rubik ascent .935, descent .250, cap .700.
   Logical properties throughout so the Hebrew page can mirror. */

/* ---------- fonts ---------- */
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("/assets/fonts/rubik-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("/assets/fonts/rubik-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("/assets/fonts/rubik-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("/assets/fonts/rubik-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* glyph patch: Rubik has no arrows */
@font-face{font-family:"Rubik";src:url("/assets/fonts/space-grotesk-500.woff2") format("woff2");font-weight:100 900;unicode-range:U+2190-2193}

/* ---------- tokens ---------- */
:root{
  --ink:#16233F; --bone:#F4F0E8; --yellow:#FFD53E; --ink80:#45506A; --ink25:#C9CED8; --sand:#E6E1D6; --white:#FFFFFF;
  --sg:"Space Grotesk","Rubik",system-ui,sans-serif;
  --rb:"Rubik",system-ui,sans-serif;
  --m:24px;                       /* page margin: 24 under 760, 48 from 760, 64 from 1280 */
  --g:24px;                       /* gutter */
  --sec:48px;                     /* section padding: 48 phones, 64 from 760 */
  --head:96px;                    /* header height */
  --d:clamp(40px,4.6vw,64px);     /* display size */
  --h2:clamp(32px,3.4vw,48px);    /* section headings */
  --to-content:40px;              /* heading to the section's content */
  --maxw:1200px;                  /* content width */
  --out:cubic-bezier(.22,1,.36,1);/* the one ease-out */
}
@media (min-width:760px){:root{--m:48px;--sec:64px;--head:88px}}
@media (min-width:1280px){:root{--m:64px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
body{margin:0;overflow-x:clip;background:var(--bone);color:var(--ink);font:400 16px/1.6 var(--rb);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal}
@media (min-width:760px){body{font-size:18px}}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance}
p,td{text-wrap:pretty}
::selection{background:var(--yellow);color:var(--ink)}
/* fallback only: links, buttons and fields show focus with brackets (below) */
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.ink :focus-visible,.site-header :focus-visible{outline-color:var(--yellow)}
[hidden]{display:none !important}

.wrap{width:min(100% - 2 * var(--m), var(--maxw));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.grid > *{grid-column:1 / -1;min-width:0}

.skip{position:absolute;inset-inline-start:var(--m);top:-64px;z-index:20;background:var(--yellow);color:var(--ink);padding:8px 12px;border-radius:3px;font:500 15px/1.5 var(--rb);text-decoration:none}
.skip:focus{top:16px}

.ink{background:var(--ink);color:var(--bone)}
.bone{background:var(--bone);color:var(--ink)}
.he{font-family:var(--rb)}
.br-m{display:none}
@media (max-width:759px){.br-m{display:inline}}

/* ---------- the one focus and hover style: brackets. Yellow on ink; ink on bone (yellow on bone is 1.2:1) ---------- */
/* links: the word does not move; on phones the hit area grows to 44 px without moving anything */
.lnk{position:relative;display:inline-block;text-decoration:none;--lw:2px;--hit:0px;padding-block:var(--hit);margin-block:calc(-1 * var(--hit))}
.lnk.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.lnk::before,.lnk::after{content:"";position:absolute;top:calc(var(--hit) - .1em);bottom:calc(var(--hit) - .1em);width:.32em;border:var(--lw) solid var(--yellow);opacity:0;pointer-events:none;transition:opacity 150ms linear,transform 200ms var(--out)}
.lnk::before{inset-inline-start:-.66em;border-inline-end:0;transform:translateX(-.3em)}
.lnk::after{inset-inline-end:-.66em;border-inline-start:0;transform:translateX(.3em)}
.lnk:hover::before,.lnk:hover::after,.lnk:focus-visible::before,.lnk:focus-visible::after{opacity:1;transform:none}
.lnk:hover,.lnk:focus-visible{text-decoration-color:transparent}
.lnk:focus-visible{outline:none}
.bone .lnk:focus-visible::before,.bone .lnk:focus-visible::after{border-color:currentColor}
@media (max-width:759px){.lnk{--hit:10px}}   /* 24 px lines + 2 x 10 = 44 */

/* the wordmark: focus brackets around the image (no hover: the mark already carries brackets) */
.brand-link{position:relative;display:block;width:max-content}
.brand-link::before,.brand-link::after{content:"";position:absolute;top:-6px;bottom:-6px;width:8px;border:2px solid var(--yellow);opacity:0;pointer-events:none}
.brand-link::before{inset-inline-start:-14px;border-inline-end:0}
.brand-link::after{inset-inline-end:-14px;border-inline-start:0}
.brand-link:focus-visible{outline:none}
.brand-link:focus-visible::before,.brand-link:focus-visible::after{opacity:1}

/* ---------- button: one primary per screen, yellow on ink ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:0;border-radius:6px;background:var(--yellow);color:var(--ink);font:500 17px/24px var(--rb);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn::before,.btn::after{content:"";position:absolute;top:-6px;bottom:-6px;width:10px;border:2px solid var(--yellow);opacity:0;pointer-events:none;transition:opacity 150ms linear,transform 200ms var(--out)}
.btn::before{inset-inline-start:-14px;border-inline-end:0;transform:translateX(-6px)}
.btn::after{inset-inline-end:-14px;border-inline-start:0;transform:translateX(6px)}
.btn:hover::before,.btn:hover::after,.btn:focus-visible::before,.btn:focus-visible::after{opacity:1;transform:none}
.btn:focus-visible{outline:none}

/* ---------- header, inside the hero's ink ---------- */
.site-header{position:absolute;inset:0 0 auto;z-index:5;color:var(--bone)}
.topbar{display:flex;flex-direction:column;align-items:flex-start;padding-top:12px}
.brand-link img{height:28px;width:auto}
.tagline{margin-top:6px;font:400 14px/18px var(--rb);color:var(--ink25)}
.site-nav{margin-top:8px}
.site-nav ul{display:flex;align-items:center;gap:24px}
.site-nav a{font:500 15px/24px var(--rb)}
@media (min-width:760px){
  .topbar{flex-direction:row;justify-content:space-between;padding-top:24px}
  .brand-link img{height:36px}
  .tagline{font-size:15px;line-height:22px}
  .site-nav{margin-top:6px}               /* the 24 px nav line sits centred on the 36 px wordmark */
  .site-nav ul{gap:32px}
  .site-nav a{font-size:17px}
}

/* ---------- 1 · hero ---------- */
.hero{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-top:var(--head)}
.hero-body{flex:1;display:flex;align-items:center;padding-block:24px}
@media (max-width:759px){
  .hero{min-height:0}
  .hero-body{align-items:flex-start;padding-block:48px}   /* 48 px under the nav, 48 px to the next section */
}
/* tall wide screens: the hero stops short of the fold so the first screen also shows the next heading */
@media (min-width:1600px) and (min-height:1000px){.hero{min-height:78svh}}

.display{font:700 var(--d)/1.05 var(--sg);letter-spacing:-.02em;color:var(--bone)}
.display .l{display:block;white-space:nowrap}
.display .l1{color:var(--ink25)}

/* every drawn bracket around words spans their full glyph height: from the tallest Latin glyph (.714 em above the
   baseline in Space Grotesk) to the deepest descender (.200 em below, the y of "your"), plus .06 em each way, so no
   glyph passes over or under a tick; .12 em from the words; stroke cap / 9 on whole pixels; tick .23 of the bracket's
   height, as in the mark. Hero: each bracket is an empty inline-block standing on the words' own baseline (its bottom
   margin edge sits on the baseline, so the position is exact whatever the line box rounds to); negative inline margins
   keep it from taking any room. Its top stays .076 em under the descender line of the line above. Desktop: mid-line, it
   takes its own room after "understands". Phones: "your business" starts its own line, indented so the bracket hangs
   no more than 4 px past the margin. */
.target{display:inline-block;
  --asc:.714em; --desc:.2em; --o:.06em; --bh:calc(var(--asc) + var(--desc) + 2 * var(--o)); --tk:calc(var(--bh) * .23); --bs:max(2px,.078em);
  --gap-s:.054em;   /* .12 em of air to the ink: less the y's .066 em left side bearing */
  --gap-e:.10em}    /* .12 em of air to the ink: less the s's .040 em right side bearing, plus the -.02 em tracking */
@supports (width:round(nearest,1.5px,1px)){.target{--bs:max(2px,round(nearest,.078em,1px))}}
.target::before,.target::after{content:"";display:inline-block;vertical-align:baseline;height:var(--bh);width:var(--tk);margin-block-end:calc(-1 * (var(--desc) + var(--o)));border:var(--bs) solid var(--yellow);pointer-events:none}
.target::before{margin-inline:calc(-1 * (var(--tk) + var(--gap-s))) var(--gap-s);border-inline-end:0}
.target::after{margin-inline:var(--gap-e) calc(-1 * (var(--tk) + var(--gap-e)));border-inline-start:0}
@media (min-width:760px){.l3 .target{margin-inline-start:calc(var(--gap-s) + var(--tk))}}
@media (max-width:759px){.l3 .target{margin-inline-start:calc(var(--gap-s) + var(--tk) - 4px)}}

.lede{margin-top:24px;max-width:56ch;font:400 17px/1.55 var(--rb);color:var(--ink25)}
@media (min-width:760px){.lede{font-size:19px}}
.actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.actions .lnk{font:500 17px/24px var(--rb);color:var(--bone)}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec)}
.h2{font:700 var(--h2)/1.1 var(--sg);letter-spacing:-.02em}
/* the section's title: plain words, 16 px above the heading */
.sec-t{margin-bottom:16px;font:500 18px/1.3 var(--sg);letter-spacing:-.005em;color:var(--ink)}
.ink .sec-t{color:var(--ink25)}
@media (min-width:760px){.sec-t{font-size:20px}}

/* ---------- 2 · how it works ---------- */
#how{padding-block:48px}          /* the light section, equal top and bottom; title to last line fits a 1280 x 600 screen */
.how-h{max-width:26em;margin-bottom:var(--to-content)}
/* phones: stacked, numeral and title on one line, a sand rule between steps;
   tablets: 2 x 2; desktop: four columns of three on a subgrid, so numerals, titles and texts share their rows
   whatever wraps, and the sand hairlines between columns run the full height of the row */
.steps{display:grid;grid-template-columns:minmax(0,1fr)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:baseline;padding-block:24px}
.step:first-child{padding-top:0}
.step:last-child{padding-bottom:0}
.step + .step{border-top:1px solid var(--sand)}
.step-n{font:500 40px/1 var(--sg);letter-spacing:-.02em;color:var(--ink)}
.step-h h3{font:600 22px/1.25 var(--rb)}
.step-b{grid-column:1 / -1;margin-top:16px}
.step-b p{font:400 16px/1.55 var(--rb);color:var(--ink80)}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g);row-gap:32px}
  .step,.step:first-child,.step:last-child{display:block;padding:0}
  .step + .step{border-top:0}
  .step:nth-child(even){border-inline-start:1px solid var(--sand);padding-inline-start:24px}
  .step-n{display:block;font-size:48px}
  .step-h{margin-top:16px}
  .step-b p{font-size:17px}
}
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;row-gap:0}
  .step,.step:first-child,.step:last-child{display:grid;grid-template-columns:minmax(0,1fr);grid-row:1 / span 3;grid-template-rows:subgrid;row-gap:0;align-items:start}
  .step-b{grid-column:auto}
  .step + .step{border-inline-start:1px solid var(--sand);padding-inline-start:24px}
}

/* ---------- 3 · the difference ---------- */
.why-h{color:var(--bone)}
@media (min-width:1024px){.why-h{max-width:calc((100% + var(--g)) * 8 / 12 - var(--g))}}
.vs{display:block;width:100%;margin-top:var(--to-content);border-collapse:collapse}
.vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.vs tbody{display:block}
.vs tr{display:block;position:relative;padding-block:24px;border-top:1px solid var(--ink25)}
.vs tbody tr:last-child{border-bottom:1px solid var(--ink25)}
.vs th,.vs td{display:block;padding:0;text-align:start;font-weight:400}
.vs tbody th{font:600 19px/1.35 var(--rb);color:var(--bone);text-wrap:balance}
.vs td{margin-top:16px;font:400 16px/1.55 var(--rb)}
.vs td::before{content:attr(data-l);display:block;margin-bottom:4px;font:500 14px/20px var(--rb);color:var(--ink25)}
.vs tbody .c2{color:var(--ink25)}
.vs tbody .c3{color:var(--bone)}
@media (min-width:760px){
  .vs thead{position:static;display:block;width:auto;height:auto;overflow:visible;clip-path:none}
  .vs tr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:baseline}   /* names on the cells' first line */
  .vs thead tr{padding-block:0 16px;border:0}
  .vs thead th{font:500 22px/28px var(--rb);color:var(--bone)}
  .vs .c1{grid-column:1 / span 3}
  .vs .c2{grid-column:4 / span 4}
  .vs .c3{grid-column:8 / span 5}
  .vs tbody th{font-size:20px}
  .vs td{margin-top:0;font-size:17px}
  .vs td::before{content:none}
}
/* phones (round 16, Simon 10.11.2026, from design/phone-vs round 4): the body rows become swipe cards, the tbody the
   scroller. The first card sits at the start margin, the middle ones centre with both neighbours peeking in, the last
   sits at the end margin. Yellow brackets around the name of the card being read (.on, set by main.js §5) */
@media (max-width:759px){
  .vs tbody{display:flex;gap:16px;margin-inline:calc(-1 * var(--m));padding-inline:var(--m);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .vs tbody::-webkit-scrollbar{display:none}
  .vs tbody:focus-visible{outline-offset:-2px}
  .vs tbody tr{flex:0 0 78%;display:block;position:relative;padding-block:24px;border-top:1px solid var(--ink25);border-bottom:1px solid var(--ink25);scroll-snap-align:center}
  .vs tbody tr:first-child{scroll-snap-align:start}
  .vs tbody tr:last-child{scroll-snap-align:end}
  .vs tbody th{font:600 22px/1.25 var(--rb);color:var(--bone);text-wrap:wrap}
  .vs tbody th .nm{position:relative;display:inline-block;padding-inline:14px}
  .vs tbody th .nm::before,.vs tbody th .nm::after{content:"";position:absolute;top:-2px;bottom:-2px;width:10px;border:2px solid var(--yellow);opacity:0;transition:opacity 150ms linear}
  .vs tbody th .nm::before{inset-inline-start:0;border-inline-end:0}
  .vs tbody th .nm::after{inset-inline-end:0;border-inline-start:0}
  .vs tbody tr.on th .nm::before,.vs tbody tr.on th .nm::after{opacity:1}
  .vs td{padding-inline:14px;margin-top:8px;font:400 16px/1.55 var(--rb)}
  .vs td::before{margin-top:24px;margin-bottom:8px;font:600 20px/1.3 var(--rb);color:var(--bone)}
}
/* row hover: yellow brackets at the row's edges, nothing moves */
@media (min-width:760px) and (hover:hover){
  .vs tbody tr::before,.vs tbody tr::after{content:"";position:absolute;top:12px;bottom:12px;width:10px;border:2px solid var(--yellow);opacity:0;pointer-events:none;transition:opacity 150ms linear}
  .vs tbody tr::before{inset-inline-start:-20px;border-inline-end:0}
  .vs tbody tr::after{inset-inline-end:-20px;border-inline-start:0}
  .vs tbody tr:hover::before,.vs tbody tr:hover::after{opacity:1}
}

/* ---------- 4 · who I am ---------- */
/* two columns that start and end together. Left (cols 1–5): the photo, its top on the first lead line's cap height,
   growing to fill the column, then name and places 8 / 4 px under it. Right (cols 6–12): the three claims, then the
   bracketed closing line 40 px under them. The places' last baseline sits on the closing line's last baseline.
   Phones: photo, name and places, claims, closing line. */
.who{--fc:clamp(24px,2.4vw,32px);row-gap:32px;align-items:start}   /* --fc: the closing line's type size */
.who-h{margin-bottom:var(--to-content)}
.l-d{display:inline}
@media (min-width:760px){.l-d{display:block}}
.who-portrait{margin:0;max-width:360px}
.who-portrait img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;object-position:top;border-radius:8px}
.who-cap{margin-top:8px}
.who-name{font:700 28px/1.15 var(--sg);letter-spacing:-.015em}
.langs{margin-top:4px;font:400 15px/1.5 var(--rb);color:var(--ink80)}
.langs .grp{display:block}
.langs .sep{display:none}
.claim + .claim{margin-top:20px}
.claim h3{font:600 19px/1.4 var(--rb)}
.claim p{margin-top:8px;max-width:60ch;font:400 16px/1.6 var(--rb);color:var(--ink80)}
@media (min-width:760px){
  .claim h3{font-size:20px}
  .claim p{font-size:18px}
}
@media (min-width:1024px){
  .who{align-items:stretch}
  .who-side{grid-column:1 / span 5;display:flex;flex-direction:column}
  .who-main{grid-column:6 / span 7}
  /* top 7 px: the cap top of the 20/28 lead line */
  .who-portrait{flex:1 1 auto;position:relative;min-height:240px;max-width:none;margin-top:7px}
  .who-portrait img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  /* the places' last baseline is 6.1 px above the caption's bottom (15/22.5 Rubik); the closing line's is .279 em above
     its bottom: the difference goes under the caption so both baselines sit on one line */
  .who-cap{margin-bottom:calc(var(--fc) * .279 - 6.1px)}
}

/* the closing line, drawn exactly by the hero's rule: the bracket runs from the first line's tallest glyph (.714 em)
   to the last line's descender line (.200 em) plus .06 em each way; stroke cap / 9 and tick .238 em of this type
   (the hero's bracket scaled to this line's type, so a two-line bracket keeps the same ticks); air to the ink .12 em but never under 8 px (box gap less an average .05 em side
   bearing). Both brackets stay inside the text column: the opening one on the column's edge, the text indented past it;
   main.js narrows the text box to its longest line so the closing bracket follows the last word.
   In a 1.25 line box the first baseline sits .971 em under the top and the last .279 em above the bottom. */
.closer{margin-top:40px;font:500 var(--fc)/1.25 var(--sg);letter-spacing:-.01em;color:var(--ink);
  --asc:.714em; --desc:.2em; --o:.06em; --bs:max(2px,.078em);
  --gb:calc(max(8px, .12em) - .05em);
  --tk:calc((var(--asc) + var(--desc) + 2 * var(--o)) * .23);   /* the hero's tick at this type size: .238 em */
  padding-inline-start:calc(var(--tk) + var(--gb))}
@supports (width:round(nearest,1.5px,1px)){.closer{--bs:max(2px,round(nearest,.078em,1px))}}
.closer-t{position:relative;display:inline-block;max-width:calc(100% - var(--tk) - var(--gb));text-wrap:balance}
.closer-t::before,.closer-t::after{content:"";position:absolute;top:calc(.971em - var(--asc) - var(--o));bottom:calc(.279em - var(--desc) - var(--o));min-height:40px;width:var(--tk);border:var(--bs) solid var(--yellow);pointer-events:none}
.closer-t::before{inset-inline-end:100%;margin-inline-end:var(--gb);border-inline-end:0}
.closer-t::after{inset-inline-start:100%;margin-inline-start:var(--gb);border-inline-start:0}

/* ---------- 5 · contact ---------- */
.contact{row-gap:var(--to-content);align-items:start}
.contact-h{color:var(--bone);max-width:16ch}
@media (min-width:1024px){
  .contact{grid-template-rows:auto 1fr}
  .contact-h{grid-column:1 / span 5;grid-row:1}
  /* the first label's cap height on the heading's: H2 cap top .196 em into its 1.1 line, label cap top 4.6 px into its 20 px line */
  .form{grid-column:7 / span 6;grid-row:1 / span 2;margin-top:calc(var(--h2) * .196 - 4.6px)}
  .talk{grid-column:1 / span 5;grid-row:2;align-self:end;margin-bottom:48px}   /* on the Send button's baseline: 12 under the row to the privacy line (round 24: +36 for it) */
}
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:760px){
  .form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-wide,.form-foot{grid-column:1 / -1}
}
.f label{display:block;margin-bottom:8px;font:500 15px/20px var(--rb);color:var(--ink25)}
.f label .req{margin-inline-start:3px;color:var(--yellow)}   /* required fields (Simon, 10.11.2026) */
.ctl{position:relative;display:block}
.ctl input,.ctl textarea{display:block;width:100%;margin:0;padding:11px 16px;border:1px solid var(--ink25);border-radius:6px;background:transparent;color:var(--bone);font:400 17px/24px var(--rb);outline:0;transition:border-color 150ms linear}
.ctl input{height:48px}
.ctl textarea{height:72px;resize:none}
.ctl input:focus,.ctl textarea:focus{border-color:var(--bone)}
.ctl input::placeholder,.ctl textarea::placeholder{color:rgba(201,206,216,.7);opacity:1}   /* --ink25 at 70 % on the ink: 5.6:1 */
.err{margin:8px 0 0;font:400 15px/20px var(--rb);color:var(--bone)}
.ctl [aria-invalid="true"],.ctl [aria-invalid="true"]:focus{border-color:var(--yellow)}
.ctl::before,.ctl::after{content:"";position:absolute;top:-4px;bottom:-4px;width:10px;border:2px solid var(--yellow);opacity:0;pointer-events:none;transition:opacity 150ms linear}
.ctl::before{inset-inline-start:-16px;border-inline-end:0}
.ctl::after{inset-inline-end:-16px;border-inline-start:0}
.ctl:focus-within::before,.ctl:focus-within::after{opacity:1}
.form-foot{display:flex;align-items:center;gap:24px;margin-top:8px}   /* Send 32 px under the last field */
.sent{font:500 15px/20px var(--rb);color:var(--ink25)}
.hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
.form .sent{min-block-size:1.6em;margin:0}
.sent:focus{outline:0}
.sent a{color:var(--bone);text-decoration:underline;text-underline-offset:.2em}
@media (max-width:759.98px){.form .sent{min-block-size:60px}}   /* the longer validation text wraps to three lines beside Send at 390 px: reserve them so nothing jumps */
.cf-turnstile:empty{display:none}
.form:has(.cf-turnstile:not(:empty)){position:relative}
.cf-turnstile:not(:empty){position:absolute;inset-inline-start:0;inset-block-start:calc(100% + 8px)}   /* Turnstile fills it with a zero-height box that would add a 24 px form gap; a challenge, if one is ever needed, shows under the form */
.talk{font:500 17px/24px var(--rb)}                      /* the line box of the link itself, so baselines can meet */
.talk .lnk{color:var(--bone)}
/* the privacy link under Send and under Book the call (round 24): 12 px under the button's row, never moves the button. In the home form it is
   the form's last grid row (the 24 px gap less 12) and the Book link beside the form drops 36 px to stay on Send's baseline */
.privacy-note{font:400 15px/24px var(--rb);color:var(--ink25)}
.privacy-note a{text-decoration:none}
.privacy-note a:hover,.privacy-note a:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.form > .privacy-note{margin-top:-12px}
@media (min-width:760px){.form > .privacy-note{grid-column:1 / -1}}
@media (max-width:759px){.privacy-note a{display:inline-block;padding-block:10px;margin-block:-10px}}   /* 24 px line + 2 x 10 = 44 */

/* ---------- 6 · booking page (book/, round 23) ----------
   One ink section. Phones: heading, the line, the zone, then day, time, video or phone, details, button. From 1024:
   heading left (cols 1–5), steps right (cols 7–12), the first label's cap height on the heading's, as in Contact.
   Choices (day, time, video or phone) are radios drawn as 1 px ink 25 boxes; the chosen one opens into the yellow
   brackets (the box's own edges become the brackets, so nothing moves); keyboard focus thickens the box to 2 px bone.
   States swap in place (book.js sets data-state); skeleton boxes hold the rows' sizes while times load. */
.bk{padding-block:calc(var(--head) + 48px) var(--sec)}
.bk-grid{row-gap:var(--to-content);align-items:start}
.bk-h{color:var(--bone);max-width:16ch}
.bk-lede{margin-top:24px;max-width:40ch;font:400 17px/1.55 var(--rb);color:var(--ink25)}
@media (min-width:760px){.bk-lede{font-size:19px}}
@media (min-width:1024px){
  .bk-intro{grid-column:1 / span 5}
  .bk-main{grid-column:7 / span 6;margin-top:calc(var(--h2) * .196 - 4.6px)}   /* label cap on the heading's cap */
}
.bk-l{display:block;margin-bottom:8px;font:500 15px/20px var(--rb);color:var(--ink25)}
/* the Time label and, at the row's end, the time zone the times are in (named once) */
.bk-lrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:16px}
.bk-zone{margin-bottom:8px;font:400 15px/20px var(--rb);color:var(--ink25)}
.bk-l .req{margin-inline-start:3px;color:var(--yellow)}
.bk-g + .bk-g{margin-top:32px}
.bk .form{margin-top:32px}
/* a sending error sits under the button, one line held for it */
.bk .form-foot{flex-direction:column;align-items:flex-start;gap:12px}
.bk .form .sent,.bk .form .sent:empty{min-block-size:20px}
.bk .f .opt{margin:0}
.bk .form-foot .privacy-note{margin:0}

/* the choices */
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;inset:0;z-index:1;inline-size:100%;block-size:100%;margin:0;opacity:0;cursor:pointer}
.opt .box{position:relative;display:flex;align-items:center;justify-content:center;block-size:48px;padding-inline:16px;border:1px solid var(--ink25);border-radius:6px;font:500 17px/24px var(--rb);color:var(--bone);white-space:nowrap;transition:border-color 150ms linear}
.opt .box::before,.opt .box::after{content:"";position:absolute;top:-1px;bottom:-1px;width:10px;border:2px solid var(--yellow);opacity:0;pointer-events:none;transition:opacity 150ms linear}
.opt .box::before{inset-inline-start:-1px;border-inline-end:0}
.opt .box::after{inset-inline-end:-1px;border-inline-start:0}
@media (hover:hover){.opt:hover .box{border-color:var(--bone)}}
.opt input:checked + .box{border-color:transparent}
.opt input:checked + .box::before,.opt input:checked + .box::after{opacity:1}
.opt input:focus-visible + .box{border-color:var(--bone);box-shadow:inset 0 0 0 1px var(--bone)}

/* step 1: days. Phones: a sideways row to the screen's edges, the next day peeking in. From 760: every day shown,
   wrapped onto as many lines as needed (three weeks: up to 15 days) */
.bk-days{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  margin-inline:calc(-1 * var(--m));padding-inline:var(--m);scroll-padding-inline:var(--m)}
.bk-days::-webkit-scrollbar{display:none}
.bk-days > *{flex:0 0 auto;scroll-snap-align:start}
.bk-days .box{min-inline-size:88px}
@media (min-width:760px){
  .bk-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));overflow:visible;margin-inline:0;padding-inline:0;scroll-snap-type:none}
  .bk-days .box{min-inline-size:0;padding-inline:8px}
}
/* step 2: times, four to a row; the grid holds the tallest day's rows (book.js sets --rows; two while loading) */
.bk-times{--rows:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-block-size:calc(var(--rows) * 48px + (var(--rows) - 1) * 8px);align-content:start}
/* video or phone: two large options */
.bk-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bk-modes .box{block-size:56px}
/* loading: empty boxes the size of the real ones; nothing moves */
.bk .sk{display:block;block-size:48px;border-radius:6px;background:rgba(201,206,216,.12)}
.bk-days .sk{inline-size:88px}

/* no free times (also when the booking service is down) */
.bk-none{max-width:36ch;font:400 17px/1.55 var(--rb);color:var(--bone)}
.bk-none a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
@media (min-width:760px){.bk-none{font-size:19px}}

/* confirmation */
/* booked: the confirmation is the page's answer, so it takes the heading's place; the kicker stays */
.bk[data-state=done] .bk-intro{display:none}
.bk[data-state=done] .bk-main{grid-column:1 / -1;margin-top:0}
.bk-done:focus{outline:0}
.bk-done-h{font:700 var(--h2)/1.1 var(--sg);letter-spacing:-.02em;color:var(--bone);text-wrap:balance}
.bk-tel{white-space:nowrap;unicode-bidi:isolate}
.bk-done-t{margin-top:16px;max-width:44ch;font:400 17px/1.55 var(--rb);color:var(--bone)}
.bk-done-c{margin-top:8px;font:400 17px/1.55 var(--rb);color:var(--ink25)}
.bk-home{margin-top:32px;font:500 17px/24px var(--rb)}
.bk-home .lnk{color:var(--bone)}
@media (min-width:760px){.bk-done-t,.bk-done-c{font-size:18px}}

/* ---------- 7 · legal pages (privacy/, accessibility/, round 24) ----------
   An ink band holds the header (as the hero does on the home page), then one bone section like Who I am: kicker, heading
   (the big h2 size), date line, then subheads at the section-title size and body text at body size, one column of about
   70 characters. Phones: the band is 24 px taller (the nav stacks under the tagline and ends at the band's edge). */
.lg-top{position:relative;height:calc(var(--head) + 24px);background:var(--ink)}
@media (min-width:760px){.lg-top{height:calc(var(--head) + 16px)}}
.legal .lg-h{max-width:20ch}
.lg-date{margin-top:16px;font:400 15px/1.5 var(--rb);color:var(--ink80)}
@media (min-width:760px){.lg-date{font-size:16px}}
.lg-body{margin-top:var(--to-content)}
.lg-s + .lg-s{margin-top:40px}
.lg-s h2{margin-bottom:12px;font:500 18px/1.3 var(--sg);letter-spacing:-.005em;color:var(--ink)}
@media (min-width:760px){.lg-s h2{font-size:20px}}
.lg-s p,.lg-s li{max-width:56ch;font:400 16px/1.6 var(--rb);color:var(--ink80)}
@media (min-width:760px){.lg-s p,.lg-s li{font-size:18px}}
.lg-s p + p{margin-top:12px}
.lg-s ul{margin-block:0;padding-inline-start:1.25em;list-style:disc}
.lg-s li + li{margin-top:8px}
.lg-s li::marker{color:var(--ink)}
.lg-s .lg-k{font-weight:500;color:var(--ink)}
.lg-s strong{font-weight:600;color:var(--ink)}
.lg-s a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.lg-s a:hover{text-decoration-thickness:2px}
.legal .lnk:hover::before,.legal .lnk:hover::after{border-color:currentColor}   /* yellow on bone is 1.2:1 */
/* the measurement switch: the site's secondary link-button (.lnk.u) as a real button, in the sentence. Both labels sit in one
   grid cell, so the button keeps the width of the longer one and the line never reflows when it changes */
.sw{appearance:none;border:0;background:none;padding:0;margin:0;font-family:var(--rb);font-weight:500;font-size:inherit;line-height:inherit;color:var(--ink);cursor:pointer;display:inline-grid;vertical-align:baseline;text-align:start}
.sw .x{grid-area:1 / 1}
.sw .x.is-off{visibility:hidden}
.sw:focus-visible{outline:none}
.sw .x{justify-self:start;position:relative}   /* round 28: each label is as wide as its own text; the button keeps the longer one's width, so nothing moves */
.sw.lnk::before,.sw.lnk::after{content:none}   /* the brackets and the underline belong to the visible label, not to the button box */
.sw .x::before,.sw .x::after{content:"";position:absolute;top:-.1em;bottom:-.1em;width:.32em;border:var(--lw) solid var(--yellow);opacity:0;pointer-events:none;transition:opacity 150ms linear,transform 200ms var(--out)}
.sw .x::before{inset-inline-start:-.66em;border-inline-end:0;transform:translateX(-.3em)}
.sw .x::after{inset-inline-end:-.66em;border-inline-start:0;transform:translateX(.3em)}
.sw:hover .x::before,.sw:hover .x::after,.sw:focus-visible .x::before,.sw:focus-visible .x::after{opacity:1;transform:none}
.legal .sw:hover .x::before,.legal .sw:hover .x::after{border-color:currentColor}
.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- footer ---------- */
/* items 32 px apart, a middle dot centred in each gap. The list starts 32 px left of the column and is clipped there,
   so the dot before whichever item starts a row is hidden: rows wrap cleanly into two balanced lines on phones */
.site-foot .wrap{padding-block:48px 24px;border-top:1px solid var(--ink25)}
.foot-row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:32px;row-gap:4px;margin-inline-start:-32px;padding-inline-start:32px;
  clip-path:inset(-12px -12px -12px 20px);font:400 15px/20px var(--rb);color:var(--ink25)}
.foot-row li{position:relative}
.foot-row li::before{content:"·";position:absolute;inset-inline-start:-32px;width:32px;text-align:center}
.foot-row .lnk{--lw:1px}
@media (max-width:759px){.foot-row{row-gap:8px}.foot-row .lnk{--hit:12px}}   /* 20 px lines + 2 x 12 = 44 */

/* ---------- the opener (main.js §1): once per visit, over the page, then it removes itself ----------
   An ink backdrop (main.js narrows it to the page below the hero), the S and the two brackets. The S is the header
   wordmark itself, clipped to its S (viewBox units: S 318.282–858.282 × 50.96–778.96 of 6748.563 × 829.92, plus 40
   units of air, still clear of the wordmark's brackets), so it lands on the real one pixel for pixel. The brackets
   are six bars, each a 100 px square scaled to size: solid quads, crisp at any size, the stroke constant while they
   move and grow. Until main.js takes over (op-run), the header and the hero's text wait hidden; if main.js never
   starts, the <head> script lifts all of this after 3 s. */
.opener{display:none}
.op-play .opener{display:block;position:fixed;inset:0;z-index:50;overflow:hidden;pointer-events:none;contain:strict}
.op-bg{position:absolute;inset:0;background:var(--ink)}
.op-mark{position:absolute;inset:0;opacity:0;transform-origin:50% 50%}
.op-s{position:absolute;left:0;top:0;display:block;width:0;height:0;max-width:none;clip-path:inset(1.3206% 86.6896% 1.3206% 4.1236%)}
.op-frame{position:absolute;inset:0}
.op-frame i{position:absolute;left:0;top:0;width:100px;height:100px;background:var(--yellow);transform-origin:0 0}
.op-play:not(.op-run) :is(.brand-link img,.tagline,.site-nav,.display .l,.lede,.actions > *),
.op-play:not(.op-run) .target::before,.op-play:not(.op-run) .target::after{opacity:0}

/* ---------- motion: the opener above (main.js), then heading fade-ups. Reduced motion gets the finished frame. ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(12px)}
  .js .reveal.is-in{opacity:1;transform:none;transition:opacity 250ms ease-out,transform 250ms var(--out)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .opener{display:none !important}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ---------- 8 · the Hebrew page (he/, round 25) ----------
   The layout mirrors by itself (logical properties). What changes for Hebrew, scoped to <html lang="he"> so the English
   page is untouched: Rubik for every heading (BRAND §6, Hebrew headlines are Rubik 700; Space Grotesk has no Hebrew),
   tracking 0; the step numerals stay Space Grotesk (Latin digits); the brackets measured on the Hebrew glyphs (Rubik:
   lamed .710 em above the baseline, qof .191 under; first letter he, right side bearing .055; last letter final kaf,
   left side bearing .036); the hover slides, which are physical transforms, turned round; the footer clip on the right.
   Rubik in a 1.25 line box: first baseline .9675 em under the top, last .2825 em above the bottom. */
:root[lang=he]{--sg:"Rubik",system-ui,sans-serif}
:root[lang=he] :is(.display,.h2,.sec-t,.closer,.who-name){letter-spacing:0}
:root[lang=he] .step-n{font-family:"Space Grotesk","Rubik",system-ui,sans-serif}
.nw{white-space:nowrap}
:root[lang=he] .target{--asc:.71em; --desc:.191em; --gap-s:.065em; --gap-e:.084em}
@media (max-width:759px){:root[lang=he] .l3 .target{margin-inline-start:calc(var(--gap-s) + var(--tk))}}   /* phones: the bracket sits mid-line after "את", not at the margin */
:where(:root[lang=he]) .lnk:where(:not([dir=ltr]))::before{transform:translateX(.3em)}
:where(:root[lang=he]) .lnk:where(:not([dir=ltr]))::after{transform:translateX(-.3em)}
:where(:root[lang=he]) .btn::before{transform:translateX(6px)}
:where(:root[lang=he]) .btn::after{transform:translateX(-6px)}
:root[lang=he] .closer{--asc:.71em; --desc:.191em}
:root[lang=he] .closer-t::before,:root[lang=he] .closer-t::after{top:calc(.9675em - var(--asc) - var(--o));bottom:calc(.2825em - var(--desc) - var(--o))}
@media (min-width:1024px){
  :root[lang=he] .who-cap{margin-bottom:calc(var(--fc) * .2825 - 6.1px)}
  :root[lang=he] .who-portrait{margin-top:9.4px}   /* the photo's top on the letter tops of the 20/28 lead line (.571 em), as the label in Contact */
  /* the label's letter tops (.571 em, 7.3 px into its 20 px line as drawn) on the heading's lamed top (.1825 em into its 1.1 line):
     round 26 (REVIEW-r25 should-fix 3) put the lamed, the heading's tallest letter, on the line, as the English cap is; the
     round 25 value (.3215 em, the heading's x-height letters) left the lamed about 5 px above the labels */
  :root[lang=he] .form{margin-top:calc(var(--h2) * .1825 - 7.3px)}
}
:root[lang=he] .foot-row{clip-path:inset(-12px 20px -12px -12px)}
/* fields: name, company and the line are dir="auto" (a line typed in English keeps its own order), email and phone
   dir="ltr"; all of them keep their text on the right, under the label */
:root[lang=he] .ctl :is(input,textarea){text-align:right}

/* round 26 · the Hebrew hero link ("... 20 דקות"): Chrome draws the native underline about 3 px short of the text at both
   ends when a Latin number sits in an RTL run, so here the underline is drawn as a 1 px background across the whole box, at
   the native offset (.3 em under the baseline in the 24 px line: (24px - 1.185em) / 2 + .935em + .3em), and goes on hover and
   focus like the native one does (the brackets take over). */
:root[lang=he] .lnk.u{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(var(--hit) + (24px - 1.185em) / 2 + 1.235em) / 100% 1px no-repeat}
:root[lang=he] .lnk.u:hover,:root[lang=he] .lnk.u:focus-visible{background-image:none}
/* round 28 · the measurement switch (privacy pages): its underline is drawn on the visible label only (the button is as wide as the longer one) */
:root[lang=he] .lnk.u.sw{background:none}
:root[lang=he] .sw .x{background:linear-gradient(currentColor,currentColor) 0 calc((1.6em - 1.185em) / 2 + 1.235em) / 100% 1px no-repeat}
:root[lang=he] .sw:hover .x,:root[lang=he] .sw:focus-visible .x{background-image:none}

/* ---------- 9 · the Hebrew booking page (he/book/, round 27 A) ----------
   §6 mirrored by itself (logical properties): heading at the right, steps at the left, the first day and the first time
   at the right, the phone day row starting at the right edge. Here only what Hebrew changes: the confirmation heading's
   tracking, the first label's letter tops on the heading's lamed top (as Contact, round 26), the form's own 32 px (the
   §8 Contact rule is for the home form), and the left-to-right spans book.js sets round times and the city. */
:root[lang=he] .bk-done-h{letter-spacing:0}
@media (min-width:1024px){
  :root[lang=he] .bk-main{margin-top:calc(var(--h2) * .1825 - 7.3px)}
  :root[lang=he] .bk .form{margin-top:32px}
}
.bk-ltr{unicode-bidi:isolate;white-space:nowrap}
/* the day that opens a new month: the full month in the phone row (the day grows to it), the short one in the grid
   ("יום ג׳ 1 בדצמ׳", 94 px): columns from 106 px and 4 px inside, so it fits with 5 px of air at the narrowest grid (1024, 1280) */
.bk-ms{display:none}
@media (min-width:760px){
  .bk-ml{display:none}
  .bk-ms{display:inline}
  :root[lang=he] .bk-days{grid-template-columns:repeat(auto-fill,minmax(106px,1fr))}
  :root[lang=he] .bk-days .box{padding-inline:4px}
}