/* ============================================================
   טלי יפת — עיצוב פנים והום־סטיילינג · עמוד אחד
   ============================================================ */

:root{
  --bg:#FBFAF7;
  --sand:#F3EFE9;
  --sand-deep:#ECE5DA;
  --line:#E6E0D6;
  --ink:#2C2A26;
  --muted:#6B6459;
  --faint:#8A8275;
  --clay:#B08463;
  --clay-dark:#96694B;
  --white:#FFFFFF;

  --header-h:76px;
  --wrap:1180px;
  --pad:clamp(20px,5vw,64px);
  --section:clamp(152px,22vw,300px);  /* 2x: vertical space between the home-page sections */
  --radius:14px;
  --shadow:0 24px 60px -34px rgba(44,42,38,.42);
  --shadow-sm:0 12px 30px -20px rgba(44,42,38,.4);
  --ease:cubic-bezier(.2,.7,.2,1);

  --font:"Assistant","Segoe UI",Arial,"Helvetica Neue",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:18px;
  line-height:1.75;
  font-weight:400;
  overflow-x:hidden;
  overflow-x:clip; /* clip doesn't make body a scroll container, so position:sticky keeps working */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:var(--clay-dark);text-decoration:none}
a:hover{color:var(--clay)}
button{font-family:inherit}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section)}
.section--sand{background:var(--sand)}

.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.18em;
  color:var(--clay-dark);margin:0 0 18px;
}
.section-head{max-width:640px;margin-bottom:clamp(38px,6vw,68px)}
.section-head h2{font-size:clamp(2rem,4.6vw,3.3rem)}
.section-head p{margin-top:18px;color:var(--muted);font-size:1.05rem}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:999px;
  font-weight:700;font-size:15px;letter-spacing:.02em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.btn svg{width:19px;height:19px;flex:none}

/* no double-tap zoom when tapping controls quickly on phones */
button,a{touch-action:manipulation}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ================= HEADER / NAV ================= */
/* floating centered glass pill (styles come from .glass) */
.header{
  position:fixed;inset-block-start:14px;inset-inline:0;z-index:50;
  display:flex;justify-content:center;pointer-events:none;
}
.header__inner.glass{
  pointer-events:auto;display:flex;align-items:center;gap:4px;
  padding:6px;border-radius:12px;
}
.nav{display:flex;align-items:center;gap:2px}
.nav a{
  font-size:14.5px;font-weight:600;color:rgb(44 42 38 / .82);line-height:1;
  padding:10px 16px;border-radius:8px;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav a:hover{color:var(--ink);background:rgb(255 255 255 / .4)}
.nav a.active{color:var(--ink);background:rgb(255 255 255 / .55)}
.nav a.nav__cta{background:var(--clay);color:#fff;margin-inline:6px}
.nav a.nav__cta:hover{background:var(--clay-dark);color:#fff}

/* same pill on every screen size: only tighten spacing on very narrow phones */
@media (max-width:420px){
  .header{inset-block-start:10px}
  .nav a{padding:10px 9px;font-size:13.5px}
  .nav a.nav__cta{margin-inline:4px}
}

/* ================= HERO (video shrinks into a rounded, bordered card as you scroll) ================= */
/* extra scroll room above 100svh: the pin holds still and the video shrinks/rounds while it's consumed */
/* no pin/extra scroll room: the hero scrolls away at completely normal speed, the shrink
   is just a transform tied to how far it's scrolled, so scrolling never pauses or holds */
.hero{position:relative;height:100svh}
/* phones: a little shorter than the screen (70svh, then made 30% taller), so the next section peeks in */
@media (max-width:760px){.hero{height:91svh}}
.hero__pin{
  position:relative;height:100%;overflow:hidden;background:var(--bg);
  --hero-p:0; /* 0 = full-bleed video, 1 = fully shrunk into its rounded frame */
}
.hero__bg{
  position:absolute;z-index:0;pointer-events:none;overflow:hidden;
  inset:calc(var(--hero-p) * clamp(10px,3vw,34px));
  border-radius:calc(var(--hero-p) * 26px);
}
.hero__bg video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
/* soft dark scrim behind the text, fading out toward the middle of the video so most of it stays clear */
.hero__bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top, rgb(20 18 15 / .62) 0%, rgb(20 18 15 / .32) 30%, transparent 62%);
}
/* layer over the whole video; the sentence sits centered, like a single still frame, and fades
   away early so only the shrinking, framed video is left by the end of the scroll range */
.hero__inner{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--header-h) + 20px) var(--pad) 40px;
  opacity:clamp(0,calc(1 - var(--hero-p) * 2.4),1);
  pointer-events:none;
}
.hero__box{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
}
.hero__tagline{
  margin:0;color:#fff;text-wrap:balance;
  font-family:"Marmelad","Assistant",sans-serif;font-weight:400;letter-spacing:.01em;
  font-size:clamp(2.8rem,6.6vw,6rem);line-height:1.1;
  text-shadow:0 2px 18px rgb(0 0 0 / .4);
}
.hero__tagline-accent{
  display:inline-block;
  font-family:"Dancing Script",cursive;font-style:normal;font-weight:600;
  font-size:1.35em;line-height:1;
  margin-inline-start:.12em;
}
.hero__rotator{
  color:rgb(255 255 255 / .9);font-size:clamp(1.1rem,1.8vw,1.45rem);font-weight:600;
  text-shadow:0 1px 10px rgb(0 0 0 / .3);
}
/* every phrase + its own icon sit in the same grid cell, so the track always sizes itself
   to whichever one is showing, with no separate "measure the widest item" logic needed */
.hero__rotator-track{display:grid}
.hero__rotator-item{
  grid-row:1;grid-column:1;justify-self:center;
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.hero__rotator-item.is-active{opacity:1;transform:none}
.hero__rotator-ico{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:rgb(255 255 255 / .16);border:1px solid rgb(255 255 255 / .4);
  display:flex;align-items:center;justify-content:center;
}
.hero__rotator-ico svg{width:17px;height:17px}
/* the icon's optical center sits a hair above its box; nudge the text up to meet it */
.hero__rotator-item span:last-child{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.hero__rotator-item{transition:opacity .25s linear;transform:none}}

@media (max-width:700px),(max-aspect-ratio:1/1){
    .hero__tagline{font-size:clamp(2.3rem,11vw,3.4rem)}
  .hero__rotator{font-size:1.02rem}
}

/* ================= ABOUT (large photo beside the full story) ================= */
.about2{
  display:flex;align-items:flex-start;gap:clamp(32px,6vw,80px);
}
.about2__photo{flex:0 0 44%;min-width:0}
.about2__photo img{
  border-radius:var(--radius);box-shadow:var(--shadow);
  aspect-ratio:4/5;object-fit:cover;width:100%;display:block;
}

.about2__body{flex:1;min-width:0;padding-top:6px}

.about2__more{margin:0}
.about2__more p{color:var(--muted)}
.about2__more .about2__sign{
  margin-top:22px;font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--clay-dark);
}

@media (max-width:820px),(max-aspect-ratio:1/1){
  .about2{flex-direction:column}
  .about2__photo{flex-basis:auto;max-width:420px;margin-inline:auto}
}

/* ================= SPECIALTIES (lassie.ai second section: a pinned deck of cards) =================
   the stage sticks to the screen while the tall .deck track scrolls past it. cards are stacked:
   the front one slides up and off the screen, the one behind scales/steps forward into its place,
   and each card's caption fades up on alternating sides (above the card on phones).
   app.js drives it by setting --t on every item (its position relative to the front of the deck).
   without JS (or with reduced motion) .deck--live is never added and the cards just list normally. */
#specialties{padding-bottom:0}
/* the live deck has no padding of its own: give it the same section gap before the projects band */
#specialties:has(.deck--live){padding-bottom:var(--section)}
.section-head--center{margin-inline:auto;text-align:center}
/* 1.5x the gap between the subtitle and the first card (head margin + the deck stage's own top space) */
#specialties .section-head--center{margin-bottom:calc(1.5 * clamp(38px,6vw,68px) + 68px)}
/* the logo keeps its original black; multiply drops the PNG's white background onto the page colour */
.section-head__logo{width:clamp(255px,27vw,360px);height:auto;margin:0 auto clamp(18px,2.4vw,28px);mix-blend-mode:multiply}

.deck{--n:4;position:relative;padding:0 var(--pad) var(--section)}
.deck__frame{display:flex;flex-direction:column;gap:clamp(44px,6vw,80px);max-width:880px;margin-inline:auto}
.deck__cap h3{font-size:clamp(1.35rem,2.2vw,1.7rem);margin:0 0 10px}
.deck__cap p{margin:0;color:var(--muted);font-size:1rem;line-height:1.6}
.deck__item{display:flex;flex-direction:column;gap:18px}
.deck__card{
  position:relative;overflow:hidden;background:var(--sand);
  aspect-ratio:975/614;border-radius:clamp(22px,4.4vw,64px);
  box-shadow:0 30px 70px -40px rgb(44 42 38 / .45);
}
.deck__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---- live (animated) deck ---- */
.deck--live{
  /* one viewport of stage + ~85vh of scroll per card change + a short hold on the last card */
  height:calc(100svh + (var(--n) - 1) * 85vh + 30vh);
  padding:0;
}
.deck--live .deck__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  --cap-w:clamp(190px,18vw,260px);
  --cap-gap:clamp(24px,3vw,44px);
}
.deck--live .deck__frame{
  position:relative;display:block;margin:0;max-width:none;
  width:min(880px, 100vw - 2 * (var(--cap-w) + var(--cap-gap) + 24px), (100svh - 190px) * 975 / 614);
  aspect-ratio:975/614;
  transform:translateY(22px);
}
.deck--live .deck__item{
  position:absolute;inset:0;display:block;
  --t:0;--depth:max(0, -1 * var(--t));--exit:clamp(0, var(--t), 1);
}
.deck--live .deck__card{
  position:absolute;inset:0;
  /* behind the front: smaller and a little lower so the edges peek out under it;
     at the front: slides straight up and out of the stage */
  transform:
    translateY(calc(var(--exit) * -1 * (50svh + 100%) + min(var(--depth), 3) * 26px))
    scale(calc(1 - min(var(--depth), 3) * .05));
  transform-origin:50% 100%;
  opacity:clamp(0, 3.6 - var(--depth), 1);
  will-change:transform;
}
.deck--live .deck__cap{
  position:absolute;top:50%;width:var(--cap-w);
  /* rises/fades in while the card ahead of it leaves (t -.5..-.1), rises away as its own card leaves (t .45...85) */
  --in:clamp(0, (var(--t) + .5) / .4, 1);
  --out:clamp(0, (var(--t) - .45) / .4, 1);
  opacity:calc(var(--in) - var(--out));
  transform:translateY(calc(-50% + (1 - var(--in)) * 60px - var(--out) * 70px));
  pointer-events:none;
}
/* odd items put their caption in the right-hand gutter (RTL start side), even ones in the left.
   inset-inline-end:100% pushes a box past the card's start edge, i.e. into the start gutter */
.deck--live .deck__item:nth-child(odd) .deck__cap{inset-inline-end:calc(100% + var(--cap-gap))}
.deck--live .deck__item:nth-child(even) .deck__cap{inset-inline-start:calc(100% + var(--cap-gap))}

@media (max-width:900px),(max-aspect-ratio:1/1){
  .deck--live .deck__frame{
    /* full width of the screen (minus the side padding); the height is capped separately, so on a
       wide-but-short screen the card just gets wider instead of shrinking to leave empty sides */
    width:min(100vw - 2 * var(--pad), 880px);
    height:min((100vw - 2 * var(--pad)) * 346 / 362, 100svh - 260px);
    aspect-ratio:auto;transform:translateY(50px);
  }
  .deck--live .deck__card{aspect-ratio:auto}
  /* phones: the caption sits above the card, right where the leaving card slides through, so the
     old caption is gone early (t .05...3) and the next only fades in after the card has passed (t -.35..-.05) */
  .deck--live .deck__item:nth-child(n) .deck__cap{
    --in:clamp(0, (var(--t) + .35) / .3, 1);
    --out:clamp(0, (var(--t) - .05) / .25, 1);
    inset-inline:0;top:auto;bottom:calc(100% + 22px);width:auto;text-align:center;
    transform:translateY(calc((1 - var(--in)) * 40px - var(--out) * 50px));
  }
  .deck__card{border-radius:24px}
}

/* ================= GLASS PANEL (frosted box that takes its colour from whatever is behind it) =================
   usage: <div class="glass">…</div> placed over an image/background.
   tune per use with the custom properties, e.g. style="--glass-blur:30px" */
/* settings live on :root so one place drives every glass box.
   default: pure blur, tint opacity 0 = no colour of its own */
:root{
  --glass-blur:10px;
  --glass-saturate:65%;
  --glass-bright:1.04;
  --glass-l:100;           /* tint colour in LCH: lightness 0-100 */
  --glass-c:3;             /* chroma 0-150 */
  --glass-h:79;            /* hue 0-360 (warm off-white) */
  --glass-a:.29;           /* tint opacity 0-1 */
  --glass-border-a:0;
  --glass-highlight-a:0;
}
.glass{
  position:relative;isolation:isolate;
  color:var(--ink);border-radius:14px;
  background:lch(var(--glass-l) var(--glass-c) var(--glass-h) / var(--glass-a));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
  border:1px solid rgb(255 255 255 / var(--glass-border-a));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / var(--glass-highlight-a));
}
/* browsers without backdrop-filter: fall back to a more opaque tint so text stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgb(255 255 255 / .85)}
}

/* ================= PRESS / HOME STAGING ================= */
.press{background:var(--white)}
.press .wrap{position:relative}
.press__figure{
  margin:0;border-radius:10px;overflow:hidden;
}
.press__figure img{width:100%;height:auto;display:block}
/* text card overlaps the bottom of the article image */
.press__card{
  position:relative;z-index:1;
  width:min(560px,92%);margin:-90px 0 0 auto;margin-inline-start:clamp(0px,4vw,48px);
  background:var(--sand);border:1px solid var(--line);border-radius:12px;
  padding:clamp(24px,4vw,40px);box-shadow:var(--shadow);
}
.press__card .eyebrow{margin-bottom:12px}
.press__card h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:16px}
.press__card p{color:var(--muted)}
.press__card p + p{margin-top:12px}
@media (max-width:700px),(max-aspect-ratio:1/1){
  .press__card{width:auto;margin:-28px 12px 0}
}

/* ================= CONTACT / FOOTER (lassie.ai footer) =================
   main + the footer card sit above a fixed full-screen layer (.foot-reveal). the card has a big
   bottom margin, so the last bit of scrolling slides it up and uncovers the gradient + giant
   wordmark underneath, which never moves. */
main{position:relative;z-index:1;background:var(--bg)}
.site-foot{
  --reveal-h:calc(19.5vw + 20px);
  position:relative;z-index:1;background:var(--white);
  border-radius:0 0 clamp(32px,4.4vw,64px) clamp(32px,4.4vw,64px);
  margin-bottom:var(--reveal-h);
  box-shadow:0 30px 60px -40px rgb(44 42 38 / .25);
}
.site-foot__inner{
  /* the space above the lead block and below it (down to the dividing line) are equal:
     the average of the old top padding (clamp 112-192px) and the old gap (clamp 40-64px) */
  --foot-space:calc((clamp(112px,16vw,192px) + clamp(40px,5vw,64px)) / 2);
  max-width:1180px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:var(--foot-space);
  padding:var(--foot-space) clamp(20px,3.2vw,48px) clamp(22px,2.6vw,32px);
}
.site-foot__lead{max-width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.site-foot__title{white-space:nowrap;font-size:min(clamp(3rem,5.85vw,4.95rem), (100vw - 48px) / 10.5);line-height:1.08;margin:0 0 18px}
.site-foot__title-accent{color:var(--clay)}
.site-foot__sub{color:var(--muted);margin-bottom:28px}
.btn--dark{background:var(--ink);color:var(--bg)}
@media (hover:hover) and (pointer:fine){.btn--dark:hover{background:var(--clay-dark);color:#fff;transform:translateY(-2px)}}
/* bottom line: copyright at the right (RTL start), copy-email mirrored to the left */
.site-foot__bar{
  align-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--faint);
}
.site-foot__bar p{margin:0}
.site-foot__contact{display:flex;align-items:center;gap:26px}
.social-ico{
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  transition:color .2s var(--ease),transform .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){.social-ico:hover{color:var(--clay-dark);transform:translateY(-2px)}}
.social-ico img{width:20px;height:20px;display:block}
.site-foot__bar .copy-email{color:var(--muted);font-size:13.5px;margin-inline-start:4px}
.site-foot__bar .copy-email:hover{color:var(--clay-dark)}

.foot-reveal{
  position:fixed;inset-inline:0;bottom:0;z-index:0;height:100svh;
  background:linear-gradient(180deg,#fff 0%,var(--bg) 30%,#E8D9C6 100%);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;pointer-events:none;
}
.foot-reveal__word{
  direction:ltr;white-space:nowrap;user-select:none;
  font-family:"Dancing Script",cursive;font-weight:600;
  font-size:24vw;line-height:.8;letter-spacing:-.01em;color:#fff;
  margin-bottom:1.2vw;
}

.copy-email{
  display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;
  color:var(--faint);font:inherit;font-size:13.5px;padding:0;direction:ltr;
}
.copy-email:hover{color:var(--clay-dark)}
.copy-ico{width:18px;height:18px;transition:color .2s var(--ease)}
.copy-email.copied .copy-ico{color:#3f8a5c}

@media (max-width:900px),(max-aspect-ratio:1/1){
}
@media (max-width:760px){
  .site-foot{--reveal-h:calc(18vw + 16px)}
  .foot-reveal__word{font-size:22vw}

}

/* ================= FLOATING WHATSAPP ================= */
.wa-fab{
  position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:60;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 32px -10px rgba(37,211,102,.7),0 4px 12px rgba(0,0,0,.18);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.wa-fab svg{width:32px;height:32px}
@media (hover:hover) and (pointer:fine){.wa-fab:hover{transform:translateY(-3px) scale(1.04);color:#fff}}
.wa-fab::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid #25D366;animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-fab::after{animation:none}}
/* pops out of existence once the footer (contact) is on screen, and pops back when you scroll up */
.wa-fab{transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .25s var(--ease)}
body.at-contact .wa-fab{transform:scale(0);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.36,0,.66,-.56),opacity .3s var(--ease)}
body.at-contact .wa-fab::after{display:none}
@media (max-width:600px){.wa-fab{width:54px;height:54px;inset-block-end:16px;inset-inline-start:16px}}

/* ============================================================
   MOBILE LAYER (<=760px) — layout/sizing only; the desktop view above is untouched
   ============================================================ */
@media (max-width:760px),(max-aspect-ratio:1/1){
  :root{
    --section:112px;
    --pad:20px;
  }
  body{font-size:16px;line-height:1.7}

  /* headings */
  .section-head{margin-bottom:26px}
  .section-head h2{font-size:clamp(1.6rem,7vw,2rem)}
  .section-head p{margin-top:12px;font-size:.98rem}
  .eyebrow{font-size:11.5px;letter-spacing:.14em;margin-bottom:12px}

  /* hero */
    .hero__tagline{font-size:clamp(2.2rem,10.5vw,3rem)}

  /* about */
  .about2{gap:22px}
  .about2__photo{max-width:320px}
  .about2__more p{font-size:.98rem}
  .about2__sign{font-size:14px}

  /* press: text first, then the wide scan in a full-bleed strip you swipe sideways.
     It starts at its right end (RTL start), so the left part is hidden until you swipe. */
  .press .wrap{display:flex;flex-direction:column}
  .press__card{order:1}
  .press__figure{
    order:2;margin-top:22px;
    overflow-x:auto;overflow-y:hidden;border-radius:0;margin-inline:calc(-1 * var(--pad));
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .press__figure::-webkit-scrollbar{display:none}
  /* known proportions, so the strip has width before the photo loads (a 0-wide lazy image never loads) */
  .press__figure img{height:260px;width:auto;max-width:none;aspect-ratio:1644/638}
  /* the colored text box stays on phones too */
  .press__card{
    margin:0;padding:24px 22px;width:auto;
    background:var(--sand);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);
  }
  .press__card h2{font-size:clamp(1.45rem,6vw,1.8rem)}
  .press__card p{font-size:.96rem}

  /* contact */
  .site-foot__title{font-size:min(clamp(2.7rem,12vw,3.45rem), (100vw - 40px) / 10.5)}
  .site-foot__bar{flex-direction:column;justify-content:center;text-align:center;gap:14px}
  .site-foot__contact{gap:clamp(18px,7vw,30px)}
  .social-ico img{width:22px;height:22px}
  .site-foot__sub{font-size:.98rem;margin-bottom:22px}

  .wa-fab{width:52px;height:52px}
}

/* ============================================================
   CATEGORY TILES (home) · CATEGORY PAGES · PROJECT PAGES
   ============================================================ */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
.cat-tile,.cat-card,.pj-next{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  background:var(--sand-deep);color:var(--ink);box-shadow:var(--shadow);
}
.cat-tile{aspect-ratio:4/5}
.cat-tile img,.cat-card img,.pj-next img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease);
}
/* hover movement only for real mouse pointers: on phones iOS Safari spends the first tap
   "hovering" (the image zooms) instead of opening the link */
@media (hover:hover) and (pointer:fine){.cat-tile:hover img,.cat-card:hover img,.pj-next:hover img{transform:scale(1.04)}}
.cat-tile__label,.cat-card__label,.pj-next__label{
  position:absolute;inset-inline:14px;inset-block-end:14px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-radius:12px;
  background:rgb(255 255 255 / .9);color:var(--ink);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.cat-tile__name{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.cat-card__name,.pj-next__name{
  direction:ltr;font-family:"Dancing Script",cursive;
  font-size:clamp(1.35rem,2.8vw,2.1rem);font-weight:700;line-height:1.15;text-wrap:balance;
}
.cat-card__go{
  display:inline-flex;align-items:center;gap:8px;direction:ltr;
  font-family:"Marmelad","Assistant",sans-serif;font-size:15px;font-weight:400;letter-spacing:.04em;white-space:nowrap;color:var(--clay-dark);
}
.cat-card__go svg{width:18px;height:18px;transform:scaleX(-1);transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.cat-tile:hover .cat-card__go svg,.cat-card:hover .cat-card__go svg,.pj-next:hover .cat-card__go svg{transform:scaleX(-1) translateX(-4px)}}

/* sub pages share the floating header; leave room for it */
.subpage main{padding-block-start:78px}
.cat{width:min(100% - 2*var(--pad),1180px);margin-inline:auto;padding-block-end:clamp(40px,6vw,80px)}
.cat__title{font-size:clamp(2rem,5vw,3.4rem);margin:clamp(18px,4vw,44px) 0 clamp(18px,3vw,32px)}
.cat__list{display:flex;flex-direction:column;gap:clamp(14px,2vw,28px)}
.cat-card{height:clamp(320px,72svh,760px)}

.pj-head{
  width:min(100% - 2*var(--pad),1180px);margin-inline:auto;
  padding-block:clamp(18px,4vw,44px) clamp(14px,2.4vw,26px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.pj-title{
  direction:ltr;font-family:"Dancing Script",cursive;
  font-size:clamp(2rem,5.4vw,4.2rem);font-weight:700;line-height:1.05;letter-spacing:-.01em;
  text-wrap:balance;max-width:20ch;color:var(--ink);
}
.pj-back{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--ink)}
.pj-back svg{width:18px;height:18px;transform:scaleX(-1)}
.pj-shots{display:flex;flex-direction:column;gap:clamp(10px,1.6vw,20px);padding-inline:clamp(8px,1.2vw,16px)}
.pj-shot{margin:0;display:flex;justify-content:center;background:var(--bg)}
/* never cropped: the whole photo is shown, scaled down to fit one screen height if needed */
.pj-shot img{
  --max-h:calc(100svh - 24px);
  width:min(100%,calc(var(--max-h) * var(--r)));height:auto;aspect-ratio:var(--r);
  display:block;border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.pj-next{margin:clamp(14px,2vw,28px) clamp(8px,1.2vw,16px) 0;height:clamp(260px,55svh,560px)}

.subfoot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  width:min(100% - 2*var(--pad),1180px);margin-inline:auto;padding-block:clamp(28px,5vw,56px);
  color:var(--faint);font-size:14px;
}
@media (max-width:760px){
  .cats{grid-template-columns:1fr}
  .cat-tile{aspect-ratio:4/3}
  .cat-tile__label,.cat-card__label,.pj-next__label{inset-inline:10px;inset-block-end:10px;padding:12px 14px}
}

/* about shares the press section's white */
#about{background:var(--white)}

/* "next project" label sits on the top of its image */
.pj-next__label{inset-block-start:14px;inset-block-end:auto}
@media (max-width:760px){.pj-next__label{inset-block-start:10px;inset-block-end:auto}}

/* projects: a sand card floating on the page (lassie.ai's closing CTA card), inset from the
   screen edges with filleted corners; the content sits inside it with its own breathing room */
/* behind the card: the page colour of the section above fades into the white of the about section below */
.projects-band{background:linear-gradient(180deg,var(--bg) 0%,var(--white) 100%)}
#projects{
  background:var(--sand);
  margin-inline:clamp(12px,1.8vw,26px);
  border-radius:clamp(24px,3.6vw,52px);
  padding-block:clamp(56px,8vw,112px);
}

/* phones: the social icons + email come straight after the "תתחילו איתי שיחה" button, with room below
   them; the copyright line follows under the dividing line. display:contents lets the bar's two
   parts be ordered separately inside the footer column. */
@media (max-width:760px){
  .site-foot__bar{display:contents}
  .site-foot__contact{order:1;margin-top:calc(28px - var(--foot-space));margin-bottom:24px}
  .site-foot__bar p{
    order:2;align-self:stretch;text-align:center;
    border-top:1px solid var(--line);padding-top:20px;
  }
}

/* ================= MAKEOVER PAGE (before / after clips, one under another on every screen) ================= */
.ba__title{
  font-family:"Marmelad","Assistant",sans-serif;font-weight:400;letter-spacing:0;
  color:var(--muted);font-size:clamp(1.05rem,1.8vw,1.3rem);margin:-6px 0 0;
  text-align:right;   /* English line (dir=ltr) lined up under the Hebrew heading */
}
.ba__grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,40px);
  /* each 9:16 clip as big as fits on one screen */
  max-width:min(100%, (100svh - 140px) * 9 / 16);margin-inline:auto;
}
.ba__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(22px,3vw,36px)}
/* one sound toggle for the whole page (starts muted) */
.ba__sound{
  flex:none;width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.ba__sound svg{width:24px;height:24px}
.ba__sound .ba__ico-on{display:none}
.ba__sound[aria-pressed="true"]{background:var(--clay);border-color:var(--clay);color:#fff}
.ba__sound[aria-pressed="true"] .ba__ico-on{display:block}
.ba__sound[aria-pressed="true"] .ba__ico-off{display:none}
.ba__item{margin:0;overflow:hidden;border-radius:clamp(16px,2.4vw,28px);background:var(--sand);box-shadow:var(--shadow-sm);aspect-ratio:9/16}
.ba__item video{width:100%;height:100%;object-fit:cover;display:block}