/* FOLO GROUP — Dark Cinematic (direction A only). Static mockup stylesheet.
   Ofir 16/10 17:31: the whole site is dark. No light full-width sections. */

@font-face{font-family:Rubik;src:url(../fonts/rubik-hebrew.woff2) format('woff2');
  font-weight:300 700;font-display:swap;unicode-range:U+0590-05FF,U+200F,U+FB1D-FB4F}
@font-face{font-family:Rubik;src:url(../fonts/rubik-latin.woff2) format('woff2');
  font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2212}

:root{
  --ink-0:#080808;   /* deepest — photography bands, hero */
  --ink-1:#111111;   /* page default */
  --ink-2:#171717;   /* graphite panel / missing-photo block */
  --ink-3:#1E1E1E;   /* graphite band, used sparingly */
  --line:rgba(255,255,255,.20);
  --line-soft:rgba(255,255,255,.10);
  --fg:#F2F0EC;      /* primary text */
  --fg-2:#B9B5AE;    /* secondary text */
  --fg-3:#8E8980;    /* labels, captions, meta */
  --folo:#8FA398;    /* cool grey-green */
  --hair:#C9A97C;    /* sand */
  --hair-deep:#6B4A38;/* espresso — photography / edges only */
  --cinil:#9AA7B2;   /* steel */
  --cinil-rust:#B4603C;
  --gap:6px;         /* gap between photographs */
  --pad:40px;
  --maxw:1360px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink-1);color:var(--fg);
  font-family:Rubik,"Noto Sans Hebrew",system-ui,sans-serif;
  font-weight:400;font-size:18px;line-height:1.62;
  letter-spacing:normal;          /* never letter-space Hebrew */
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:normal;line-height:1.14;text-wrap:balance}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.bleed{width:100%}
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule-soft{height:1px;background:var(--line-soft);border:0;margin:0}

/* Section head: the repeating signature — hairline, Latin index on the right
   (RTL start), Hebrew label, 2px accent tick on the opposite edge. */
.sec{position:relative;background:var(--ink-1)}
.sec--photo{background:var(--ink-0)}
.sec--graphite{background:var(--ink-3)}
.sechead{display:flex;align-items:baseline;gap:16px;padding:22px 0 0}
.sechead .idx{font-size:12px;font-weight:500;color:var(--fg-3);
  font-variant-numeric:tabular-nums;letter-spacing:.10em} /* Latin only */
.sechead .lbl{font-size:13px;color:var(--fg-3)}
.sechead .tick{margin-inline-start:auto;width:28px;height:2px;background:var(--line)}
.tick--folo{background:var(--folo)} .tick--hair{background:var(--hair)}
.tick--cinil{background:var(--cinil)}

/* `.wrap.secbody` is the normal pairing, and this rule's horizontal 0 used to
   cancel .wrap's own gutter — same specificity, declared later — so on a phone
   every paragraph and every form field ran edge to edge with nothing between
   the text and the bezel. Keep .wrap's gutter; only the vertical rhythm is
   this rule's business. Found while shooting the step-3 forms at 390; it
   affects every page, not only the ones with a form. */
.secbody{padding:34px var(--pad) 56px}
.lede{font-size:21px;line-height:1.55;color:var(--fg-2);max-width:68ch}
.meta{font-size:13px;color:var(--fg-3)}

/* ---------- header ---------- */
.hdr{position:relative;z-index:30;background:var(--ink-0);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:28px;height:64px}
.brand{font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.brand b{font-weight:600}
.nav{display:flex;gap:22px;margin-inline-start:28px}
.nav a{font-size:15px;color:var(--fg-2);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--fg);border-bottom-color:var(--line)}
.hdr__end{margin-inline-start:auto;display:flex;align-items:center;gap:18px}
.lang{font-size:13px;color:var(--fg-3);text-decoration:none}
.lang b{color:var(--fg);font-weight:500}
.hdr-cta{font-size:14px;text-decoration:none;border:1px solid var(--line);
  padding:9px 16px;color:var(--fg)}
.hdr-cta:hover{border-color:var(--fg-3)}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line);
  padding:0;cursor:pointer;margin-inline-start:auto}
.burger i{display:block;height:1px;background:var(--fg);margin:7px 11px}

/* mobile menu, full-screen, dark */
.menu{display:none;position:fixed;inset:0;z-index:40;background:var(--ink-0);
  padding:0 20px 28px;overflow:auto}
body.menu-open .menu{display:block}
.menu__top{display:flex;align-items:center;height:64px;border-bottom:1px solid var(--line)}
.menu__close{margin-inline-start:auto;width:44px;height:44px;border:1px solid var(--line);
  background:none;color:var(--fg);font-size:20px;line-height:1;cursor:pointer}
.menu__branch{display:block;text-decoration:none;border-bottom:1px solid var(--line);
  padding:20px 0 18px;position:relative}
.menu__branch .k{font-size:12px;color:var(--fg-3);letter-spacing:.10em}
.menu__branch .t{font-size:26px;font-weight:500;margin-top:4px}
.menu__branch .d{font-size:15px;color:var(--fg-2);margin-top:6px}
.menu__branch::after{content:"";position:absolute;inset-block:20px auto;inset-inline-start:0;
  width:2px;height:28px}
.mb--folo::after{background:var(--folo)}
.mb--hair::after{background:var(--hair)}
.mb--cinil::after{background:var(--cinil)}
.menu__list a{display:block;padding:14px 0;border-bottom:1px solid var(--line-soft);
  font-size:17px;color:var(--fg-2);text-decoration:none}
.menu__foot{padding-top:22px;display:flex;flex-direction:column;gap:12px}

/* ---------- hero ---------- */
.hero{background:var(--ink-0);padding-top:48px}
.hero h1{font-size:clamp(30px,4.0vw,54px);max-width:21ch}
.hero .sub{margin-top:18px;font-size:19px;color:var(--fg-2);max-width:60ch}
.hero__frames{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:34px}
.hero__frames figure{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink-2)}
.hero__frames img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.04) brightness(.78)}
.hero__frames figcaption{position:absolute;inset-inline:0;bottom:0;padding:10px 12px;
  font-size:12px;color:var(--fg);background:linear-gradient(transparent,rgba(8,8,8,.88) 58%)}
.hero__frames figcaption span{display:block;color:var(--fg-3);font-size:11px;letter-spacing:.10em}
.hero__strip{display:flex;gap:28px;flex-wrap:wrap;padding:18px 0 26px;font-size:13px;color:var(--fg-3)}

/* ---------- three branch panels ---------- */
.branches{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.branch{background:var(--ink-0);position:relative;display:flex;flex-direction:column;
  min-height:520px}
.branch__img{position:relative;flex:1 1 auto;overflow:hidden;min-height:260px}
.branch__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.7)}
.branch__accent{height:2px}
.branch--folo .branch__accent{background:var(--folo)}
.branch--hair .branch__accent{background:var(--hair)}
.branch--cinil .branch__accent{background:var(--cinil)}
.branch__body{padding:22px 24px 26px}
.branch__k{font-size:12px;color:var(--fg-3);letter-spacing:.10em}
.branch__t{font-size:25px;font-weight:500;margin:6px 0 10px}
.branch__d{font-size:16px;color:var(--fg-2);margin:0 0 16px}
.branch__go{font-size:15px;text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:3px;display:inline-block}
.branch__go:hover{border-bottom-color:var(--fg)}

/* ---------- missing photo block ---------- */
.shoot{background:var(--ink-2);border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;text-align:center;padding:24px;min-height:180px}
.shoot p{margin:0;font-size:14px;color:var(--fg-3);max-width:34ch;line-height:1.5}
/* No opacity here, deliberately. `opacity:.75` over --fg-3 (#8E8980, which
   passes at 5.16:1) produced an effective #706D66 — 3.47:1 against the panel,
   below AA for 11px text. It appears on every missing-photo block, so it was
   failing on most pages of the site at once. It also slipped past the run's own
   contrast sweep: getComputedStyle().color reports the DECLARED colour and
   knows nothing about opacity, so a naive ratio check passes while axe fails.
   Caught by Lighthouse; see QA_REPORT_HE.md §6. */
.shoot .tag{display:block;font-size:11px;letter-spacing:.12em;color:var(--fg-3);
  margin-bottom:8px}

/* ---------- photo grids ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.ph{position:relative;overflow:hidden;background:var(--ink-2)}
.ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.84) brightness(.8)}
.ph--43{aspect-ratio:4/3}.ph--11{aspect-ratio:1/1}.ph--169{aspect-ratio:16/9}
.ph--45{aspect-ratio:4/5}.ph--916{aspect-ratio:9/16}
.cap{font-size:12px;color:var(--fg-3);padding:8px 0 0}

/* ---------- video card (behaviour carried over from folo-ads.com) ---------- */
.vcard{position:relative;background:var(--ink-0);border:1px solid var(--line-soft)}
.vcard__media{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--ink-2)}
.vcard__media img,.vcard__media video{width:100%;height:100%;object-fit:cover}
.vcard__media img{filter:brightness(.82)}
/* The label is 'קול' in Hebrew but 'Sound' in English, so a fixed 34px box
   clipped the English word at every width. Size to the content, keep 34px as
   the floor so the square look and the touch target survive. Same for the play
   badge, where 'נגן' is short and 'Play' is not. */
.vcard__btn{position:absolute;inset-block-end:8px;inset-inline-end:8px;
  min-width:34px;height:34px;padding:0 8px;
  background:rgba(8,8,8,.72);border:1px solid var(--line);color:var(--fg);
  font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;
  white-space:nowrap}
.vcard__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vcard__play span{min-width:46px;height:46px;padding:0 10px;border:1px solid var(--fg);display:grid;
  place-items:center;background:rgba(8,8,8,.45);font-size:12px;white-space:nowrap}
.vcard.is-playing .vcard__play{display:none}
.vcard__cap{border-top:1px solid var(--line-soft);padding:10px 12px;font-size:13px;color:var(--fg-2)}
.vcard__cap em{display:block;font-style:normal;font-size:11px;color:var(--fg-3);letter-spacing:.10em}

/* ---------- step list / ledger ---------- */
.ledger{border-top:1px solid var(--line)}
.ledger li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:18px 0;
  border-bottom:1px solid var(--line-soft)}
.ledger .n{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums;
  letter-spacing:.10em;padding-top:5px}
.ledger h3{font-size:18px;font-weight:500;margin-bottom:4px}
.ledger p{font-size:16px;color:var(--fg-2);margin:0}

/* ---------- facts / two-col text ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.factlist li{padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:16px;color:var(--fg-2)}

/* ---------- routed contact ---------- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
.route{background:var(--ink-1);padding:26px 24px 28px;text-decoration:none;display:block}
.route:hover{background:var(--ink-2)}
.route .k{font-size:12px;color:var(--fg-3);letter-spacing:.10em}
.route .t{font-size:20px;font-weight:500;margin:8px 0 8px}
.route .d{font-size:15px;color:var(--fg-2)}
.route .bar{height:2px;width:34px;margin-top:16px}
.contactbar{display:flex;flex-wrap:wrap;gap:12px;padding:26px 0 8px}
/* background:transparent is load-bearing, not tidiness. .btn set a colour and
   no background, which is fine on an <a> and broken on a <button>: a button
   with no background falls back to the UA's `buttonface`, rgb(239,239,239) in
   Chrome. Measured at every one of the eight widths: the "Essential only"
   consent button and the progressive form's "back" button rendered
   rgb(242,240,236) text on rgb(239,239,239) — a contrast ratio of 1.01, i.e.
   invisible. The two buttons it hit are the two a visitor needs most: the one
   that refuses tracking, and the one that goes back a step in a form. */
.btn{display:inline-block;text-decoration:none;border:1px solid var(--line);
  padding:13px 20px;font-size:16px;color:var(--fg);background:transparent;
  font-family:inherit;line-height:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;border-radius:0}

/* Same reasoning as background:transparent above, one property over. Nothing
   in this stylesheet is rounded, so a radius can only arrive from a UA
   stylesheet — and iOS Safari rounds <button> and the date/select controls by
   default. It is invisible in Chromium, which is where this gets measured, and
   visible on the phone Ofir actually reviews on: the two consent buttons sit
   in a square-cornered bar with softened corners of their own. Reset on every
   control that has a UA appearance rather than on .btn alone, so a future
   <button> without the class cannot reintroduce it. */
button,input,select,textarea,summary,[role="button"]{border-radius:0}
button,input[type="button"],input[type="submit"],input[type="reset"]{
  -webkit-appearance:none;appearance:none}
.btn--solid{background:var(--fg);color:var(--ink-0);border-color:var(--fg)}
.btn:hover{border-color:var(--fg-3)}
.btn--solid:hover{background:#fff;border-color:#fff}

/* ---------- footer ---------- */
.ftr{background:var(--ink-0);border-top:1px solid var(--line);padding:44px 0 32px}
.ftr__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.ftr h4{font-size:12px;color:var(--fg-3);letter-spacing:.10em;margin-bottom:14px;font-weight:500}
.ftr a{display:block;font-size:15px;color:var(--fg-2);text-decoration:none;padding:5px 0}
.ftr a:hover{color:var(--fg)}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:18px;margin-top:34px;padding-top:18px;
  border-top:1px solid var(--line-soft);font-size:13px;color:var(--fg-3)}

/* ---------- mobile ---------- */
@media (max-width:860px){
  :root{--pad:20px}
  body{font-size:17px}
  .nav,.hdr-cta{display:none}
  .burger{display:block}
  .hdr__end{margin-inline-start:auto;gap:12px}
  .hero{padding-top:28px}
  .hero .sub{font-size:17px}
  .hero__frames{gap:var(--gap)}
  .hero__frames figure{aspect-ratio:9/16}
  .hero__frames figcaption{padding:8px 8px;font-size:11px}
  .hero__frames figcaption span{display:none}
  /* three branches become three WIDE stacked strips */
  .branches{grid-template-columns:1fr}
  .branch{min-height:0;flex-direction:row-reverse;align-items:stretch}
  .branch__img{flex:0 0 38%;min-height:0}
  .branch__body{flex:1 1 auto;padding:18px 16px 20px}
  .branch__t{font-size:22px}
  .branch__d{font-size:15px}
  .branch__accent{position:absolute;inset-inline-start:0;inset-block:0 auto;
    width:2px;height:100%}
  .grid2,.grid3,.grid4,.cols2{grid-template-columns:1fr}
  .grid3.keep2,.grid4.keep2{grid-template-columns:1fr 1fr}
  .cols2{gap:26px}
  .routes{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr 1fr;gap:24px}
  .secbody{padding:26px var(--pad) 40px}
  .lede{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* --- fixes after first render pass --- */
.menu__branch .k,.menu__branch .t,.menu__branch .d,
.route .k,.route .t,.route .d{display:block}
.route .bar{display:block}
/* website screenshots are bright by nature — seat them in the dark palette */
.ph--site img{filter:brightness(.58) saturate(.78) contrast(1.05)}
/* shade ledger: a tabular list, not a wall of empty photo blocks */
.shades{border-top:1px solid var(--line);margin-top:24px}
.shades li{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line-soft)}
.shades .sw{height:34px;border:1px solid var(--line);background:var(--ink-2)}
.shades .nm{font-size:16px;color:var(--fg)}
.shades .st{font-size:12px;color:var(--fg-3);letter-spacing:.10em}
@media (max-width:860px){.shades li{grid-template-columns:56px 1fr;}
  .shades .st{grid-column:2;margin-top:-6px}}

/* =====================================================================
   WordPress theme additions — w1-folo-group-site-build-base, 16/10/2026.
   Everything above this line is the stage4 sheet, byte-for-byte.
   ===================================================================== */

/* ---------- header: transparent over the hero, solid on scroll ----------
   stage4 drew the header opaque and static. The build brief asks for
   transparent-over-hero → solid on scroll, so the header is now fixed and
   the hero compensates with its own top padding. Recorded in DECISIONS_HE.md. */
.hdr{position:fixed;inset-inline:0;top:0;z-index:30;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .18s linear,border-color .18s linear}
.hdr.is-solid{background:var(--ink-0);border-bottom-color:var(--line)}
/* Pages that do not open with a hero never get the transparent state. */
.no-hero .hdr{background:var(--ink-0);border-bottom-color:var(--line)}
body{padding-top:64px}
.hero{padding-top:56px}
@media (max-width:860px){.hero{padding-top:34px}}
.admin-bar .hdr{top:32px}
@media (max-width:782px){.admin-bar .hdr{top:46px}}

/* ---------- desktop mega menu ----------
   Opens under the three branch items. Hover on fine pointers, and
   click/Enter everywhere, so it is reachable from the keyboard. */
.nav{position:static}
.has-mega{position:relative}
.has-mega > button{font:inherit;font-size:15px;color:var(--fg-2);background:none;border:0;
  border-bottom:1px solid transparent;padding:4px 0;cursor:pointer;letter-spacing:normal}
.has-mega > button:hover,.has-mega > button:focus-visible,
.has-mega.is-open > button{color:var(--fg);border-bottom-color:var(--line)}
.mega{display:none;position:absolute;inset-inline:0;top:64px;z-index:29;
  background:var(--ink-0);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.has-mega.is-open .mega{display:block}
.mega__in{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  max-width:var(--maxw);margin:0 auto}
.mega__col{background:var(--ink-0);padding:26px 24px 28px}
.mega__col .k{font-size:12px;color:var(--fg-3);letter-spacing:.10em;display:block}
.mega__col .t{font-size:21px;font-weight:500;margin:6px 0 4px;display:block;
  color:var(--fg);text-decoration:none}
.mega__col .d{font-size:15px;color:var(--fg-2);margin:0 0 14px}
.mega__col a.sub{display:block;font-size:15px;color:var(--fg-2);text-decoration:none;
  padding:7px 0;border-top:1px solid var(--line-soft)}
.mega__col a.sub:hover,.mega__col a.sub:focus-visible{color:var(--fg)}
.mega__col .bar{display:block;height:2px;width:34px;margin-bottom:16px}
.mc--folo .bar{background:var(--folo)}
.mc--hair .bar{background:var(--hair)}
.mc--cinil .bar{background:var(--cinil)}
@media (max-width:860px){.mega{display:none!important}}

/* ---------- mobile menu: lock the page behind it ---------- */
body.menu-open{overflow:hidden}
.menu{padding-top:0}

/* ---------- focus, for keyboard users on a dark page ---------- */
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:60;
  background:var(--ink-0);color:var(--fg);padding:12px 18px;border:1px solid var(--line)}
.skip-link:focus{inset-inline-start:0}

/* ---------- Gutenberg plumbing ----------
   Patterns are plain markup, so core only needs to stop fighting the layout. */
.entry-content > *{margin-block:0}
.alignfull{width:100%}
.wp-block-group{margin-block:0}
figure{margin:0}

/* ---------- 320px: the narrowest phone we support ----------
   Verified with scrollWidth === innerWidth; see build/PROOF.md. */
@media (max-width:380px){
  :root{--pad:16px}
  .hero h1{font-size:28px}
  .hero__strip{gap:14px}
  .branch{flex-direction:column}
  .branch__img{flex:0 0 auto;min-height:190px}
  .branch__accent{position:static;width:100%;height:2px}
  .ftr__cols{grid-template-columns:1fr}
  .grid3.keep2,.grid4.keep2{grid-template-columns:1fr 1fr}
}
/* Long unbroken Latin strings (brand names, URLs) must never widen the page. */
h1,h2,h3,h4,p,li,figcaption,.cap,.meta{overflow-wrap:anywhere}

/* =====================================================================
   Build step 2 — w2b-folo-group-site-build-pages, 16/10/2026.
   Components the inner pages need. Same dark palette, same 1px rules,
   no new colours and no card shadows.
   ===================================================================== */

/* ---------- breadcrumbs ---------- */
.bc{background:var(--ink-0);border-bottom:1px solid var(--line-soft);font-size:13px}
.bc ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:11px 0;list-style:none}
.bc li{color:var(--fg-3)}
.bc li + li::before{content:"›";margin-inline-end:8px;color:var(--fg-3)}
.bc a{color:var(--fg-3);text-decoration:none}
.bc a:hover{color:var(--fg)}
.bc [aria-current]{color:var(--fg-2)}

/* ---------- inner-page opening block (no photo triptych) ---------- */
.phead{background:var(--ink-0);padding:46px 0 38px;border-bottom:1px solid var(--line)}
.phead .k{font-size:12px;color:var(--fg-3);letter-spacing:.10em;display:block;margin-bottom:12px}
.phead h1{font-size:clamp(27px,3.1vw,42px);max-width:24ch}
.phead .sub{margin-top:16px;font-size:19px;color:var(--fg-2);max-width:62ch}
.phead .bar{display:block;height:2px;width:46px;margin-top:22px}
@media (max-width:860px){.phead{padding:30px 0 26px}.phead .sub{font-size:17px}}

/* ---------- prose inside a section ---------- */
.prose{max-width:68ch}
.prose h3{font-size:19px;margin:26px 0 8px}
.prose p{color:var(--fg-2)}
.prose p strong,.prose li strong{color:var(--fg);font-weight:500}
.prose a{color:var(--fg);text-underline-offset:3px}

/* ---------- bullet list with a rule, not a dot ---------- */
.rulelist{border-top:1px solid var(--line)}
.rulelist li{padding:14px 0;border-bottom:1px solid var(--line-soft);
  font-size:16px;color:var(--fg-2);max-width:78ch}
.rulelist li b{color:var(--fg);font-weight:500}

/* ---------- gate list: the CINIL timeline ---------- */
.gates{border-top:1px solid var(--line)}
.gates li{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:22px 0;
  border-bottom:1px solid var(--line-soft)}
.gates .n{font-size:12px;color:var(--cinil);font-variant-numeric:tabular-nums;
  letter-spacing:.10em;padding-top:6px}
.gates h3{font-size:19px;font-weight:500;margin-bottom:6px}
.gates p{font-size:16px;color:var(--fg-2);margin:0 0 8px}
.gates .gate{font-size:13px;color:var(--fg-3);display:block}
.gates .gate b{color:var(--fg-2);font-weight:500}
@media (max-width:860px){.gates li{grid-template-columns:1fr;gap:4px}
  .gates .n{padding-top:0}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:84ch}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{padding:16px 0;font-size:17px;cursor:pointer;list-style:none;
  display:flex;gap:14px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-inline-start:auto;color:var(--fg-3);font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 18px;color:var(--fg-2);font-size:16px;max-width:72ch}
.faq .ans p{margin:0 0 .7em}

/* ---------- shade board ---------- */
.shadegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);margin-top:22px}
.shadeslot{margin:0;background:var(--ink-2);border:1px solid var(--line-soft)}
.shadeslot img{width:100%;aspect-ratio:4/5;object-fit:cover}
.shadeslot__missing{display:grid;place-items:center;aspect-ratio:4/5;background:var(--ink-2);
  border-bottom:1px solid var(--line-soft)}
.shadeslot__missing em{font-style:normal;font-size:11px;letter-spacing:.10em;color:var(--fg-3)}
.shadeslot figcaption{padding:8px 10px;display:flex;justify-content:space-between;gap:8px;
  align-items:baseline}
.shadeslot figcaption b{font-size:14px;font-weight:500;color:var(--fg)}
.shadeslot figcaption span{font-size:11px;color:var(--fg-3)}
@media (max-width:1024px){.shadegrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:860px){.shadegrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- work list ---------- */
.worklist{border-top:1px solid var(--line);margin-top:20px}
.workitem{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.workitem .k{font-size:12px;color:var(--fg-3);letter-spacing:.10em}
.workitem h3{font-size:20px;font-weight:500;margin:6px 0 6px}
.workitem p{font-size:16px;color:var(--fg-2);margin:0;max-width:74ch}
.workitem.is-draft{border-inline-start:2px solid var(--hair);padding-inline-start:16px}
.workitem .pending{display:block;margin-top:8px;font-size:12px;letter-spacing:.04em;
  color:var(--hair)}

/* ---------- contact routes as real forms ---------- */
.formblock{border-top:1px solid var(--line);padding-top:24px;max-width:72ch}
.formblock .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0}
.formblock .f--wide{grid-column:1/-1}
.formblock label{display:block;font-size:13px;color:var(--fg-3);margin-bottom:6px}
.formblock input,.formblock textarea,.formblock select{
  width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--fg);
  font:inherit;font-size:16px;padding:11px 12px;border-radius:0}
.formblock textarea{min-height:104px;resize:vertical}
.formblock .note{font-size:13px;color:var(--fg-3);margin-top:14px}
@media (max-width:860px){.formblock .fields{grid-template-columns:1fr}}

/* ---------- a missing-material marker inside running text ---------- */
.gap{display:block;border:1px dashed var(--line);background:var(--ink-2);
  padding:14px 16px;margin:18px 0;font-size:14px;color:var(--fg-3);max-width:72ch}
.gap b{display:block;font-size:11px;letter-spacing:.12em;color:var(--fg-3);
  margin-bottom:6px;font-weight:500}

/* ---------- two-up feature band ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}
.duo .pane{background:var(--ink-0);padding:28px 26px 30px;border:1px solid var(--line-soft)}
.duo .pane h3{font-size:20px;margin-bottom:10px}
.duo .pane p{font-size:16px;color:var(--fg-2);margin:0}
@media (max-width:860px){.duo{grid-template-columns:1fr}}

/* ---------- inline CTA strip ---------- */
.ctastrip{border-top:1px solid var(--line);padding:26px 0 44px}
.ctastrip h2{font-size:24px;margin-bottom:10px}
.ctastrip p{color:var(--fg-2);max-width:62ch}

/* =======================================================================
   Build step 3 — forms, states, consent. Same palette, no new colour.
   Error and success are told by a 2px edge, a label and the text itself,
   never by colour alone: --err-edge is a desaturated clay that still reads
   as "wrong" at AA on --ink-1, and the word is always there next to it.
   ======================================================================= */

:root{
  --err-edge:#C2603F;    /* clay — the only warm accent, borrowed from --cinil-rust */
  --ok-edge:#8FA398;     /* reuses --folo rather than inventing a green */
}

/* ---------- the honeypot: out of sight, out of the tab order ---------- */
.fg-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ---------- an anchor that clears the sticky header ---------- */
.formblock .anchor{display:block;position:relative;top:-96px;visibility:hidden}

/* ---------- fields ---------- */
.formblock .field{min-width:0}
.formblock input:focus-visible,.formblock textarea:focus-visible,
.formblock select:focus-visible{outline:2px solid var(--fg);outline-offset:1px}
.formblock .fhint{display:block;font-size:12px;color:var(--fg-3);margin-top:5px}
.formblock .ferr{display:block;font-size:13px;color:var(--fg);margin-top:6px;
  padding-inline-start:9px;border-inline-start:2px solid var(--err-edge)}
.formblock .field.is-err input,.formblock .field.is-err textarea,
.formblock .field.is-err select{border-color:var(--err-edge);box-shadow:inset 0 0 0 1px var(--err-edge)}
.formblock button[type="submit"][disabled]{opacity:.55;cursor:default}

/* ---------- the two outcome states ---------- */
.formstate{border:1px solid var(--line);background:var(--ink-2);
  padding:24px 24px 20px;margin:18px 0 0;max-width:72ch}
.formstate:focus{outline:none}
.formstate:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.formstate h3{font-size:22px;margin-bottom:8px}
.formstate p{font-size:16px;color:var(--fg-2);margin:0 0 .6em}
.formstate--ok{border-inline-start:2px solid var(--ok-edge)}
.formstate--err{border-inline-start:2px solid var(--err-edge)}
.formstate--err ul{margin:6px 0 0;font-size:15px}
.formstate--err li{padding:5px 0;color:var(--fg-2)}
.formstate--err li a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.formstate__ref{font-size:13px;color:var(--fg-3)}
.formstate__ref b{font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--fg)}

/* ---------- consent checkbox rows, shared by forms and the banner ---------- */
.consentrow{margin:18px 0 0;max-width:72ch}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--fg-2);
  margin-bottom:0;cursor:pointer}
.chk input{width:18px;height:18px;flex:0 0 18px;margin-top:3px;accent-color:var(--fg-3)}
.chk span{display:block}
.chk b{color:var(--fg);font-weight:500}
.chk--locked{opacity:.75;cursor:default}

/* ---------- progressive steps ----------
   Phone only, and JavaScript only. The .fg-js gate matters: without script
   nothing would ever un-hide step 2, so without script there are no steps —
   one form, every field, which is the version that always works. Desktop
   likewise shows the whole form; display:contents lets the steps vanish as
   boxes so the fields sit in the parent two-column grid. */
.formblock--steps .fstep{display:contents}
.formblock .stepnav{align-items:center}
.formblock .stepnav .meta{margin:0 4px}
@media (max-width:740px){
  .fg-js .formblock--steps .fstep{display:grid;grid-template-columns:1fr;gap:14px;grid-column:1/-1}
  .fg-js .formblock--steps[data-fg-at="1"] .fstep:not([data-fg-step="1"]){display:none}
  .fg-js .formblock--steps[data-fg-at="2"] .fstep:not([data-fg-step="2"]){display:none}
  .fg-js .formblock--steps[data-fg-at="3"] .fstep:not([data-fg-step="3"]){display:none}
}

/* ---------- consent banner ---------- */
.cbanner{position:fixed;inset-inline:0;bottom:0;z-index:70;background:var(--ink-0);
  border-top:1px solid var(--line)}
.cbanner[hidden]{display:none}
.cbanner__in{max-width:var(--maxw);margin:0 auto;padding:20px var(--pad) 22px;
  display:grid;grid-template-columns:1fr auto;gap:18px 32px;align-items:start}
.cbanner__txt{max-width:70ch}
.cbanner__txt h2{font-size:15px;color:var(--fg-3);font-weight:500;margin-bottom:6px}
.cbanner__txt p{font-size:14px;color:var(--fg-2);margin:0}
.cbanner__txt a{text-decoration:underline;text-underline-offset:3px}
.cbanner__opts{grid-column:1/-1;display:grid;gap:12px;padding-top:4px;
  border-top:1px solid var(--line-soft);margin-top:2px}
.cbanner__opts[hidden]{display:none}
.cbanner__btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cbanner .btn{font-size:14px;padding:9px 16px}
.btn--quiet{border-color:transparent;text-decoration:underline;text-underline-offset:3px}
.btn--quiet:hover{border-color:var(--line)}
@media (max-width:860px){
  .cbanner__in{grid-template-columns:1fr;padding:18px 20px 20px}
  .cbanner__btns{gap:8px}
  .cbanner .btn{flex:1 1 auto;text-align:center}
}
/* The banner is fixed; keep it from covering the last line of a page. */
body.has-cbanner{padding-bottom:210px}
@media (min-width:861px){body.has-cbanner{padding-bottom:150px}}

/* ── Temporary material, while FOLO_GROUP_PUBLIC is off ────────────────────
   AI stand-in photographs and invented copy both carry a small "זמני" corner
   tag so a reviewer can tell them apart from the real thing. The markup for
   the tag is emitted only in review (see inc/placeholders.php) — there is no
   display rule here that could be flipped to make a placeholder look final. */
.aifig{margin:0;position:relative}
.aifig picture{display:block}
.aifig img{display:block;width:100%;height:auto;object-fit:cover}
.aifig figcaption{padding:8px 2px 0;font-size:12px;color:var(--fg-3);line-height:1.45}

.fgtmp{position:absolute;inset-block-start:8px;inset-inline-end:8px;z-index:2;
  font-size:10px;line-height:1;padding:4px 6px;border-radius:0;
  background:rgba(12,12,14,.72);color:var(--fg-3);border:1px solid var(--line);
  backdrop-filter:blur(2px);pointer-events:none;user-select:none}
.fgtmp--txt{position:static;display:inline-block;margin-inline-start:6px;
  vertical-align:middle;background:transparent;backdrop-filter:none}

/* The shade board tiles are square crops of a photographed board. */
.shadeslot .aifig img{aspect-ratio:1/1}