/* Home page only, rebuilt on OFF+BRAND's live home (26.9.2026), mirrored for RTL with logical properties.
   Shared tokens (--u, --t-*, --gut) live at the end of ob.css. */

/* ---------- 1. hero: three words round the orb ---------- */
.hero .hero-ring{--d:min(82vmin,820px)}
body .hero .w{font:400 var(--t-a)/1 var(--display);letter-spacing:0;text-transform:uppercase}
body .hero .w1{top:15vh;inset-inline:9.5vw auto;bottom:auto}
body .hero .w2{top:44vh;inset-inline:auto 9.5vw;bottom:auto}
body .hero .w3{top:73vh;inset-inline:17.8vw auto;bottom:auto}
.scroll-cue{font:400 var(--t-sm)/1 var(--ui);letter-spacing:.05em;inset-inline:auto var(--gut);transform:none;bottom:calc(var(--gut) + 3vh)}
/* phones: theirs stacks the three words, centred, above the orb */
@media (max-width:991px){
  body .hero .words{position:absolute;inset:auto 0 auto 0;top:16vh;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:3}
  body .hero .w{position:static;font-size:38px;line-height:1.05}
  .scroll-cue{inset-inline:0;text-align:center;justify-content:center;transform:none}
}

/* ---------- 2. statement: stars + big lines, two columns under ---------- */
body .statement{max-width:none;padding:calc(12 * var(--u)) var(--gut) calc(8 * var(--u))}
body .statement .lead-xl{text-wrap:pretty;font:400 var(--t-b)/1 var(--display);letter-spacing:0;text-transform:uppercase;max-width:none;
  margin-inline-start:17.8vw;width:72.7vw}
/* theirs opens the line with "****" set invisible: an indent, not a mark (a visible ✳ turns into an emoji on phones) */
body .statement .lead-xl::before{content:"****";visibility:hidden;margin-inline-end:.25em}
body .cols{display:block;position:relative;margin-top:calc(3 * var(--u));min-height:calc(12 * var(--u))}
body .cols .c1{position:absolute;inset-inline-start:9.5vw;width:15.1vw}
body .cols .c2{position:absolute;inset-inline-start:34.2vw;width:23.3vw}
body .cols p,body .cols .c1 p{font:400 var(--t-sm)/1.4 var(--ui);letter-spacing:.2px;text-transform:none}
body .cols .c1 p{text-transform:uppercase}
.cols .link-line{width:100%;font:700 var(--t-sm)/1 var(--ui);letter-spacing:0;margin-top:calc(2 * var(--u))}
@media (max-width:991px){
  body .statement{padding:22vh var(--gut) 12vh}
  /* Hebrew on a phone: a smaller size, no indent and balanced breaks, so no line is left with one or two words */
  body .statement .lead-xl{margin:0;width:auto;font-size:38px;line-height:1.08;text-wrap:balance}
  body .statement .lead-xl::before{display:none}
  body .cols{min-height:0;margin-top:32px}
  body .cols .c1,body .cols .c2{position:static;width:auto;margin-bottom:20px}
}

/* ---------- 3. trusted: 6 x 2 grid, solid lines, a + at every crossing ---------- */
body .trusted{max-width:none;display:block;padding:calc(6 * var(--u)) var(--gut)}
.trusted-label{position:absolute;inset-inline-start:var(--gut);top:calc(6 * var(--u));font:400 var(--t-sm)/1.3 var(--ui);letter-spacing:.05em}
@media (max-width:991px){.trusted-label{position:static;margin-bottom:20px}}
body .grid-lines{grid-template-columns:repeat(6,1fr);margin-inline:9.5vw 8.3vw;border-top:1px solid var(--line);border-inline-start:1px solid var(--line);gap:0}
body .grid-lines>div{height:calc(6.2 * var(--u));font:400 calc(1.6 * var(--u))/1 var(--display);letter-spacing:0;background:transparent!important;backdrop-filter:none!important;border-radius:0;border:0;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line)}
body .grid-lines>div::after{display:block;content:"+";background:none;width:auto;height:auto;left:auto;right:auto;inset-inline-end:-.33em;top:-.62em;font:300 14px/1 var(--ui);color:var(--ink)}
@media (max-width:991px){body .grid-lines{grid-template-columns:repeat(2,1fr);margin:0}body .grid-lines>div{height:92px;font-size:20px}}

/* ---------- 4. featured: sticky label + two columns of square cards ---------- */
body .featured{max-width:none;display:block;position:relative;padding:calc(6 * var(--u)) var(--gut)}
body .featured-side{position:sticky;top:max(calc(4 * var(--u)), 88px);width:14vw;float:inline-start;gap:calc(1.2 * var(--u))}
body .featured-side .cap{font-size:var(--t-sm)}
body .featured-side .pill{flex:none}   /* the pill keeps its full width; squeezed into 14vw its arrow slid past the edge */
body .featured .stagger{display:grid;grid-template-columns:31.6vw 31.6vw;column-gap:1.25vw;row-gap:calc(1.2 * var(--u));margin-inline-start:calc(35.55vw - 2 * var(--gut));justify-content:start;clear:none}   /* the far column keeps the same gutter as the near side instead of touching the screen edge */
body .featured .stagger .col{display:contents}
body .stagger .card{aspect-ratio:1/1;border-radius:calc(.6 * var(--u))}
body .stagger .card:nth-child(even){transform:translateY(0)}
@media (max-width:991px){
  body .featured-side{float:none;position:static;width:auto;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:24px}
  body .featured .stagger{grid-template-columns:1fr;margin:0}
}
/* 4b. selected examples (prerender.mjs homeDemos): the same label and squares right under the work, with the concepts line under the pill */
body .home-demos{padding-top:calc(2 * var(--u))}
body .home-demos-note{position:absolute;top:calc(100% + var(--u));inset-inline-start:0;width:24ch;margin:0;font:400 13px/1.55 var(--ui);color:var(--ink-2)}   /* under the label and pill, which keep the same row as the work's */
@media (max-width:991px){body .home-demos .featured-side{flex-wrap:wrap;row-gap:12px}body .home-demos-note{position:static;flex:0 0 100%;width:auto}}

/* ---------- 5. orbit: the work flies out of the orb (desktop only, like theirs) ---------- */
.orbit{position:relative;height:320vh}
.orbit-pin{position:sticky;top:0;height:100vh;overflow:hidden;perspective:900px;perspective-origin:50% 50%}
.orbit-cloud{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.orbit-cloud .th{position:absolute;left:50%;top:50%;width:calc(9 * var(--u));aspect-ratio:1.45;border-radius:calc(.5 * var(--u));overflow:hidden;will-change:transform,opacity;opacity:0;background:#cfcfcd}
.orbit-cloud .th img{width:100%;height:100%;object-fit:cover}
.orbit-cloud .lb{position:absolute;left:50%;top:50%;font:400 calc(1.6 * var(--u))/1 var(--display);text-transform:uppercase;white-space:nowrap;color:var(--ink);will-change:transform,opacity;opacity:0}
.orbit-h{position:absolute;inset-inline-start:var(--gut);bottom:calc(3 * var(--u));font:400 var(--t-b)/1 var(--display);text-transform:uppercase;width:48vw;z-index:2}
.orbit-h::before{content:"****";visibility:hidden;margin-inline-end:.25em}
[dir="rtl"] .orbit-h{bottom:max(calc(3 * var(--u)), 76px)}   /* in Hebrew the line ends at the right edge, where the accessibility button sits: it clears the button */
@media (max-width:991px){.orbit{display:none}}

/* ---------- 6. the method, set like their awards list ---------- */
body .steps{max-width:none;display:block;padding:calc(10 * var(--u)) var(--gut) calc(8 * var(--u))}
body .steps-title{position:absolute;inset-inline-start:var(--gut);top:calc(10 * var(--u))}
body .steps-title .h2{font:400 var(--t-sm)/1.3 var(--ui);letter-spacing:.05em;margin:0;display:inline}
body .steps-count{display:inline;font:400 var(--t-mini)/1 var(--ui);vertical-align:super;margin-inline-start:4px}
body .rows{border:0;margin-inline:17.8vw 0}
body .row{grid-template-columns:13.7vw 26vw 1fr;gap:0;padding:calc(1.4 * var(--u)) 0;border-bottom:1px solid var(--line);align-items:center}
body .row:hover{background:transparent;padding-inline:0}
body .row .n{font:400 var(--t-mini)/1 var(--ui);letter-spacing:.2px;color:var(--ink)}
body .row h3{font:400 var(--t-c)/1.4 var(--display);letter-spacing:.2px;text-transform:uppercase}
body .row p{grid-column:auto;font:400 var(--t-sm)/1.4 var(--ui);color:var(--ink);text-align:end;text-transform:uppercase;max-width:none}
body .row .v{display:none}
@media (max-width:991px){
  body .steps{padding:14vh var(--gut) 10vh}
  body .steps-title{position:static;margin-bottom:28px}
  body .rows{margin:0}
  body .row{grid-template-columns:1fr;gap:10px;padding:22px 0}
  body .row p{text-align:start}
}

/* ---------- 7. the gradient mark + ticker (desktop only, like theirs) ---------- */
.hsc{position:relative;height:340vh}
.hsc-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.hsc-rings{position:absolute;inset:0}
.hsc-mark{position:absolute;left:50%;top:50%;width:calc(17 * var(--u));height:calc(17 * var(--u));margin:calc(-8.5 * var(--u)) 0 0 calc(-8.5 * var(--u));will-change:transform}
.hsc-mark svg{width:100%;height:100%;display:block;overflow:visible}
.hsc-tick{position:absolute;top:50%;left:0;transform:translateY(-50%);white-space:nowrap;font:400 var(--t-c)/1 var(--display);text-transform:uppercase;letter-spacing:.2px;will-change:transform;opacity:0}
@media (max-width:991px){.hsc{display:none}}

/* ---------- 1b. the first screen says what this is and offers the one action, from the first frame (data-instant) ----------
   the value line, the brief and the examples sit opposite the three words: bottom-left in Hebrew, bottom-right in English */
.hero .scroll-cue{display:none}
.hero-sub{position:absolute;z-index:4;inset-inline-end:var(--gut);bottom:calc(var(--gut) + 4vh);width:min(380px,28vw);display:grid;gap:18px}
.hero-line{font:400 var(--t-sm)/1.45 var(--ui);letter-spacing:.2px;color:var(--ink);text-wrap:pretty}
.hero-act{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-act .pill{justify-content:center}
.hero-reply{opacity:.7}
@media (max-width:991px){
  .hero-sub{inset-inline:var(--gut);bottom:calc(var(--gut) + 62px);width:auto;text-align:center;gap:14px}
  .hero-line{max-width:34ch;margin:0 auto}
}

/* ==================== home redesign 28.9.2026: film, six fields, the method (home.js LB.homeFilm / LB.homeMethod) ==================== */

/* ---------- 1c. film: one silent loop of client films, full width, one line on it ---------- */
.hfilm{position:relative;padding:0}
.hfilm-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:100vh;overflow:hidden;background:#0c0c0c}
.hfilm-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hfilm-over{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:calc(6 * var(--u)) var(--gut) max(calc(2 * var(--u)), 84px);background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));color:#fff}
.hfilm-line{margin:0;font:400 var(--t-c)/1.1 var(--display);letter-spacing:.2px;text-transform:uppercase;max-width:30ch;text-wrap:balance}
.hfilm-credits{margin:0;display:flex;gap:18px;font:500 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.hfilm-credits a{color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px;transition:color .3s,border-color .3s}
.hfilm-credits a:hover{color:#fff;border-color:#fff}
/* while the film sits under the header, the ink logo turns white (home.js toggles the class) */
@media (min-width:761px){body[data-page="home"].over-film .logo img{filter:invert(1) brightness(1.2)}}
.logo img{transition:filter .4s}
@media (max-width:767px){
  .hfilm-frame{aspect-ratio:9/16;max-height:none}
  .hfilm-over{flex-direction:column;align-items:flex-start;gap:14px;padding:120px var(--gut) 72px}
  .hfilm-line{font-size:26px;line-height:1.15}
  .hfilm-credits{flex-wrap:wrap;gap:10px 16px;white-space:normal}
}

/* ---------- shared chapter head: eyebrow, headline, one line (centred, like Apple) ---------- */
.h-head{text-align:center;max-width:52ch;margin:0 auto calc(4 * var(--u))}
.h-eyebrow{margin:0 0 18px;font:400 var(--t-sm)/1.3 var(--ui);letter-spacing:.05em}
.h-eyebrow sup{font:400 var(--t-mini)/1 var(--ui);margin-inline-start:4px}
.h-title{margin:0;font:400 calc(3.6 * var(--u))/1.02 var(--display);letter-spacing:0;text-transform:uppercase;text-wrap:balance}
.h-line{margin:18px auto 0;font:400 var(--t-sm)/1.5 var(--ui);color:var(--ink-2);text-wrap:pretty}
.h-line a{color:var(--ink);border-bottom:1px solid var(--line-2)}
@media (max-width:991px){.h-head{margin-bottom:32px;padding-inline:var(--gut)}.h-title{font-size:38px;line-height:1.05}}

/* ---------- 6. six fields: 3 x 2 tiles on desktop, a row you swipe on tablets and phones ---------- */
body .hfields{max-width:none;padding:calc(10 * var(--u)) var(--gut) calc(8 * var(--u))}
.hf-rail{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(3 * var(--u)) 1.25vw}
.hf-tile a{display:block;color:var(--ink)}
.hf-img{position:relative;display:block;aspect-ratio:1/1;border-radius:calc(.6 * var(--u));overflow:hidden;background:var(--bg-2)}
.hf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-io)}
.hf-tile a:hover .hf-img img{transform:scale(1.035)}
.hf-n{display:block;margin-top:16px;font:400 var(--t-mini)/1 var(--ui);letter-spacing:.2px}
.hf-name{margin:8px 0 0;font:400 calc(1.6 * var(--u))/1.2 var(--display);letter-spacing:.2px;text-transform:uppercase}
.hf-line{margin:6px 0 0;font:400 var(--t-sm)/1.45 var(--ui);color:var(--ink-2)}
@media (max-width:991px){
  body .hfields{padding:12vh 0 4vh}
  .hf-rail{max-width:none;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hf-rail::-webkit-scrollbar{display:none}
  .hf-tile{scroll-snap-align:start}
  .hf-name{font-size:20px}
}
@media (max-width:640px){.hf-rail{grid-auto-columns:80%}}

/* ---------- 7. the method: one project (HER BOSS) from brief to delivery ----------
   stacked by default (phones, tablets, reduced motion); pinned with a stage on desktop */
body .hmethod{max-width:none;position:relative;padding:10vh var(--gut) 8vh}
.hm-steps{list-style:none;margin:0 auto;padding:0;max-width:720px}
.hm-step{padding:32px 0 40px;border-top:1px solid var(--line)}
.hm-n{display:block;font:400 var(--t-mini)/1 var(--ui);letter-spacing:.2px}
.hm-h{margin:10px 0 0;font:400 var(--t-c)/1.1 var(--display);letter-spacing:.2px;text-transform:uppercase}
.hm-l{margin:10px 0 0;font:400 var(--t-sm)/1.5 var(--ui);color:var(--ink-2);max-width:44ch;text-wrap:pretty}
.hm-fig{margin-top:22px}
.hm-fig img{display:block;width:100%;height:100%;object-fit:cover}
.hm-one{aspect-ratio:4/5;border-radius:calc(.6 * var(--u));overflow:hidden;background:var(--bg-2)}
.hm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hm-grid img{aspect-ratio:3/4;height:auto;border-radius:6px;background:var(--bg-2)}
.hm-sizes{display:flex;align-items:flex-end;justify-content:center;gap:3%}
.hm-f{position:relative;display:block;flex:none}
.hm-f img{border-radius:6px;height:auto;background:var(--bg-2)}
.hm-f.f916{width:34%}.hm-f.f916 img{aspect-ratio:9/16}
.hm-f.f11{width:29%}.hm-f.f11 img{aspect-ratio:1/1}
.hm-f.f169{width:31%}.hm-f.f169 img{aspect-ratio:16/9}
.hm-f i{display:block;margin-top:8px;font:400 var(--t-mini)/1 var(--ui);font-style:normal;letter-spacing:.2px;text-align:center;direction:ltr}
@media (max-width:991px){.hm-h{font-size:28px}}

@media (min-width:992px) and (prefers-reduced-motion:no-preference){
  body .hmethod{height:420vh;padding:0}
  .hm-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:6vw;padding:max(14vh,96px) 9.5vw 9vh;box-sizing:border-box}
  .hmethod .h-head{grid-column:1;text-align:start;margin:0 0 4vh;max-width:none}
  .hmethod .h-title{font-size:calc(3.2 * var(--u))}
  .hm-steps{grid-column:1;max-width:none;margin:0;align-self:start}
  .hm-step{padding:1.8vh 0 2.2vh;opacity:.28;transition:opacity .6s var(--ease)}
  .hm-step.is-on{opacity:1}
  .hm-h{font-size:calc(1.9 * var(--u));margin-top:.8vh}
  /* only the current step keeps its line, so the four steps always fit the screen */
  .hm-l{margin-top:0;max-width:48ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s var(--ease),margin .7s var(--ease)}
  .hm-step.is-on .hm-l{max-height:5em;opacity:1;margin-top:.8vh}
  /* every step's picture sits on one stage in the other column; the current one shows */
  .hm-fig{position:absolute;margin:0;top:max(14vh,96px);bottom:9vh;inset-inline-start:calc(50% + 3vw);inset-inline-end:9.5vw;opacity:0;visibility:hidden;transform:translateY(24px) scale(.98);transition:opacity .8s var(--ease),transform 1s var(--ease),visibility 0s .8s}
  .hm-step.is-on .hm-fig{opacity:1;visibility:visible;transform:none;transition:opacity .8s var(--ease),transform 1s var(--ease),visibility 0s}
  .hm-one{aspect-ratio:auto;border-radius:calc(.6 * var(--u))}
  .hm-grid{align-content:center;gap:10px}
  .hm-grid img{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
  .hm-step.is-on .hm-grid img{opacity:1;transform:none}
  .hm-step.is-on .hm-grid img:nth-child(2){transition-delay:.06s}.hm-step.is-on .hm-grid img:nth-child(3){transition-delay:.12s}
  .hm-step.is-on .hm-grid img:nth-child(4){transition-delay:.18s}.hm-step.is-on .hm-grid img:nth-child(5){transition-delay:.24s}.hm-step.is-on .hm-grid img:nth-child(6){transition-delay:.3s}
  .hm-sizes{align-items:center}
}
@media (min-width:992px) and (prefers-reduced-motion:reduce){
  .hm-step{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}
  .hm-steps{max-width:1100px}
  .hm-fig{margin:0}
}