/* ==========================================================================
   Keshet Metaplim
   Light, high-contrast base (concept A) with one deep section: contact.
   ========================================================================== */

:root{
  --porcelain:#F4EFE6;
  --porcelain-2:#FBF8F1;
  --ink:#223F55;
  --mist:#47637A;
  --faint:#4C6680;
  --line:#E2D9C8;

  --rose:#356189;
  --sand:#C29A4B;
  --sage:#7FA6C6;
  --sky:#A9C6DB;
  --lilac:#517A9B;

  --spectrum:linear-gradient(105deg,var(--rose) 0%,var(--sage) 28%,var(--sand) 52%,var(--sky) 76%,#CFE0EC 100%);

  --deep:#12304A;
  --deep-text:#F2F6F8;
  --deep-mist:#A3BCCB;

  --maxw:1100px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}

html{scroll-behavior:smooth}

body{
  font-family:"Assistant",system-ui,sans-serif;
  background:var(--porcelain);
  color:var(--ink);
  font-size:18px;                    /* the audience skews older; 16px is too small */
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.block{padding:110px 0;position:relative;z-index:1}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--porcelain);padding:12px 20px;
}
.skip-link:focus{inset-inline-start:0}

/* ---------- notice bar ---------- */
.notice-bar{
  background:var(--ink);color:var(--porcelain-2);
  text-align:center;font-size:15px;padding:10px 20px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(245,243,247,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease,background .4s ease;
}
.site-header.scrolled{border-bottom-color:var(--line);background:rgba(245,243,247,.9)}

.nav{display:flex;align-items:center;justify-content:space-between;height:78px}

/* The emblem carries the colour now, so the wordmark stays quiet ink beside it. */
.brand{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
}
.brand-emblem{
  width:auto;height:38px;flex:none;display:block;
}
.brand-name{
  font-family:"Frank Ruhl Libre",serif;
  font-weight:500;font-size:24px;letter-spacing:.3px;color:var(--ink);
  white-space:nowrap;
}
@media(max-width:520px){
  .brand-emblem{height:32px}
  .brand-name{font-size:19px}
}
/* The footer keeps the same lockup, a touch smaller. */
.site-footer .brand-emblem{height:34px}
.site-footer .brand-name{font-size:22px}

.nav-links{display:flex;gap:10px;align-items:center}
.nav-links .menu-list{display:flex;gap:10px;align-items:center;list-style:none;margin:0;padding:0}

/* Menu items as water bubbles: translucent, a shine at the top-left like light
   on a real bubble, and a gentle lift on hover. Elegant, not childish. */
.nav-links .menu-list a{
  text-decoration:none;color:var(--ink);font-size:15.5px;
  padding:9px 18px;border-radius:100px;line-height:1;
  background:radial-gradient(130% 130% at 30% 22%, rgba(255,255,255,.9) 0%, rgba(210,230,242,.55) 55%, rgba(169,198,219,.42) 100%);
  border:1px solid rgba(127,166,198,.34);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.8), 0 3px 8px -4px rgba(53,97,137,.3);
  transition:transform .28s var(--ease),box-shadow .28s ease,background .28s ease;
}
.nav-links .menu-list a:hover{
  transform:translateY(-2px) scale(1.05);
  background:radial-gradient(130% 130% at 30% 22%, #fff 0%, rgba(207,224,236,.7) 55%, rgba(127,166,198,.5) 100%);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.95), 0 10px 20px -8px rgba(53,97,137,.45);
}

/* The CTA is the one solid bubble — the "pop" of colour that leads the eye. */
.nav-cta{
  padding:10px 22px;border-radius:100px;color:var(--ink)!important;font-weight:600;
  background:radial-gradient(130% 130% at 30% 22%, #E7D8A9 0%, var(--sand) 70%, #B8933f 100%);
  border:1px solid rgba(184,147,63,.5);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6), 0 3px 10px -4px rgba(194,154,75,.5);
  transition:transform .28s var(--ease),box-shadow .28s ease;
}
.nav-cta:hover{transform:translateY(-2px) scale(1.05);box-shadow:inset 0 1px 3px rgba(255,255,255,.7),0 10px 22px -8px rgba(194,154,75,.6)}

.menu-btn{
  display:none;background:none;border:1px solid var(--line);border-radius:100px;
  padding:9px 18px;cursor:pointer;color:var(--ink);font:inherit;font-size:15px;
}
.mobile-nav{
  display:none;flex-direction:column;gap:6px;
  padding:12px 32px 24px;border-top:1px solid var(--line);
}
.mobile-nav .menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mobile-nav a{text-decoration:none;color:var(--ink);padding:14px 0;font-size:17px;display:block;min-height:48px}
.mobile-nav .nav-cta{text-align:center;margin-top:8px}
.mobile-nav[hidden]{display:none}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;padding:130px 0 120px;overflow:hidden}

/* Photo hero: the real pool fills the top, clean (no caustic net). Content sits
   at the bottom over a gradient scrim that only darkens where the text is —
   the pool stays clearly visible above it. Light text on the dark foot. */
.hero--photo{
  padding:0;min-height:min(88vh,760px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-photo{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* Weighted so the headline (~40% down) and lead sit on enough darkness to
     read, while the pool stays clearly visible across the top ~quarter.
     Verified against the actual photo pixels behind the text. */
  background:linear-gradient(to top,
    rgba(12,30,48,.92) 0%,
    rgba(13,34,54,.78) 30%,
    rgba(15,40,62,.5) 55%,
    rgba(17,46,70,.2) 75%,
    transparent 90%);
}
.hero--photo .hero-inner{padding-bottom:clamp(48px,7vw,88px);padding-top:40px}
.hero--photo .hero-title{color:var(--deep-text)}
.hero--photo .hero-title .glow::after{opacity:.5}
.hero--photo .hero-lead{color:#E4EEF4}
.hero--photo .btn-primary{background:#DFC17A;color:var(--ink)}
.hero--photo .btn-primary:hover{box-shadow:0 14px 30px -12px rgba(223,193,122,.6)}
.hero--photo .btn-ghost{color:var(--deep-text);border-color:rgba(255,255,255,.5)}
.hero--photo .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* Dappled light on the floor of a pool.
   The radial stops are already soft, so the blur is small and — critically —
   the element is promoted to its own layer. An animated transform on an
   un-promoted blurred box re-rasterises ~2Mpx every frame. */
.caustic{
  position:absolute;inset:-24%;z-index:0;pointer-events:none;
  background:
    radial-gradient(closest-side at 28% 38%, rgba(169,198,219,.55), transparent 72%),
    radial-gradient(closest-side at 60% 26%, rgba(127,166,198,.48), transparent 72%),
    radial-gradient(closest-side at 46% 62%, rgba(217,185,110,.42), transparent 72%),
    radial-gradient(closest-side at 78% 54%, rgba(108,147,180,.44), transparent 72%),
    radial-gradient(closest-side at 14% 68%, rgba(207,224,236,.45), transparent 72%);
  filter:blur(28px);
  opacity:.62;
  will-change:transform;
  transform:translateZ(0);
  animation:sway 30s var(--ease) infinite alternate;
}
@keyframes sway{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(4%,-3%,0)}
}

/* The stream: a fixed, viewport-sized canvas that stream.js draws the visible
   river segment into. z-index 0 keeps it under every section (they are all
   position:relative + z-index:1), so cards read as bridges over the water. */
.stream-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
@media print{ .stream-canvas{display:none} }

/* The shader surface. It fades in only once pool.js has linked the program,
   so a driver that refuses the shader never leaves a blank rectangle. */
.pool{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.1s var(--ease);
}
.hero--pool .pool{opacity:1}
.hero--pool .caustic,
.hero--pool .flow{display:none}

/* The Galilee horizon: fixed at the foot of the viewport on every page, the
   way real mountains sit on a horizon while you travel past them. stream.js
   owns its opacity — fade-in after the hero, day-to-dusk crossfade near the
   contact section. z-index:0 keeps it under the sections (z1) and under the
   stream canvas (same level, later in DOM), so the water runs in front of
   the mountains' feet. Hidden entirely when JavaScript is absent. */
.ridge--horizon{
  position:fixed;inset-inline:0;bottom:0;
  height:clamp(96px,15vh,190px);
  z-index:0;pointer-events:none;
  opacity:0;
  will-change:opacity,transform;
}
.ridge--horizon svg{position:absolute;inset:0;width:100%;height:100%}
.ridge-dusk{opacity:0;will-change:opacity}
@media print{ .ridge--horizon{display:none} }

/* The same hills at night, above the deep pool of the contact section. */
.ridge-night{
  position:absolute;inset-inline:0;top:0;height:110px;
  z-index:-1;pointer-events:none;
}
.ridge-night svg{display:block;width:100%;height:100%}
.ridge-night path{fill:#F2F6F8;fill-opacity:.06}

/* Flowing water at the foot of the hero.
   Each band is 200% wide and its path repeats at the halfway point, so a
   translateX of exactly -50% lands the seam on an identical crest. */
.flow{
  position:absolute;inset-inline:0;bottom:0;height:160px;
  z-index:0;pointer-events:none;overflow:hidden;
}
.flow-wave{
  position:absolute;bottom:0;left:0;
  width:200%;height:100%;display:block;
  will-change:transform;
}
.flow-wave--back{animation:flow 26s linear infinite}
.flow-wave--front{animation:flow 17s linear infinite}
@keyframes flow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.hero-inner{position:relative;z-index:1}

/* inner pages get a shorter hero — the headline is the page title, not a pitch */
.hero--inner{padding:96px 0 96px}
.hero--inner .hero-title{font-size:clamp(34px,5vw,60px);margin-bottom:20px}
.hero--inner .trust{margin-top:8px;margin-bottom:0}

/* ---------- contact page info ---------- */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.info-h{
  font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:22px;
  margin-bottom:12px;max-width:none;
}
.info p{color:var(--mist);font-weight:300}
@media(max-width:720px){ .info-grid{grid-template-columns:1fr;gap:32px} }

.trust{
  display:inline-flex;align-items:center;gap:9px;
  background:#F3EAD5;color:#6E5619;border:1px solid #E4D5B0;
  font-size:15px;font-weight:500;
  padding:8px 16px 8px 13px;border-radius:100px;margin-bottom:26px;
}
.trust-tick{
  width:18px;height:18px;border-radius:50%;background:#6E5619;color:#F3EAD5;
  display:grid;place-items:center;font-size:11px;flex:none;
}

.hero-title{
  font-family:"Frank Ruhl Libre",serif;font-weight:400;
  font-size:clamp(38px,6.4vw,74px);line-height:1.1;letter-spacing:-.5px;
  max-width:16ch;margin-bottom:28px;
}
.glow{position:relative;display:inline}
.glow::after{
  content:"";position:absolute;inset-inline-end:0;bottom:.06em;
  width:100%;height:.4em;background:var(--spectrum);
  opacity:.34;border-radius:6px;z-index:-1;filter:blur(1px);
}

.hero-lead{
  font-size:clamp(18px,2vw,21px);color:var(--mist);font-weight:300;
  max-width:48ch;line-height:1.8;margin-bottom:40px;
}

.cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;font-weight:500;font-size:17px;
  padding:15px 34px;border-radius:100px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s ease;
  min-height:48px;                   /* comfortable target for unsteady hands */
}
.btn-primary{background:var(--ink);color:var(--porcelain)}
.btn-primary:hover{box-shadow:0 14px 30px -12px rgba(44,40,51,.5)}
.btn-ghost{color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}

/* ---------- kinetic headings ---------- */
.kinetic .w{
  display:inline-block;
  opacity:0;transform:translateY(.35em);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i) * 70ms);
}
.kinetic.in .w{opacity:1;transform:none}

/* ---------- sections ---------- */
.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-size:15px;letter-spacing:2.5px;color:var(--faint);margin-bottom:20px;
}
.eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--spectrum);flex:none}

h2{
  font-family:"Frank Ruhl Libre",serif;font-weight:400;
  font-size:clamp(30px,4.2vw,46px);line-height:1.2;letter-spacing:-.3px;
  max-width:20ch;margin-bottom:28px;
}
h3{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:23px}

.prose p{color:var(--mist);font-weight:300;max-width:60ch;margin-bottom:20px}
.page-title{
  font-family:"Frank Ruhl Libre",serif;font-weight:400;
  font-size:clamp(32px,4.4vw,48px);margin-bottom:28px;
}

/* ---------- grids & cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}

.cards{
  margin-top:56px;background:var(--line);
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
}
.card{background:var(--porcelain-2);padding:40px 36px;transition:background .4s ease}
.card:hover{background:#fff}
.card .hue{display:block;width:40px;height:6px;border-radius:100px;margin-bottom:24px}
.card h3{margin-bottom:12px}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.card p{color:var(--mist);font-weight:300;font-size:17px;line-height:1.7}
.card .price{margin-top:14px;color:var(--ink);font-weight:500;font-size:16px}

/* ---------- tabs ---------- */
.tabs{margin-top:48px}
.tablist{display:none;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tabs--ready .tablist{display:flex}
.tab{
  font:inherit;font-size:17px;font-weight:500;cursor:pointer;
  padding:12px 26px;min-height:48px;border-radius:100px;
  background:transparent;color:var(--mist);
  border:1px solid var(--line);
  transition:background .3s var(--ease),color .3s ease,border-color .3s ease;
}
.tab:hover{color:var(--ink);border-color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
.tabpanel:focus-visible{outline:3px solid var(--ink);outline-offset:6px;border-radius:22px}
/* Without JS the tablist is hidden and every panel stays visible. */
.tabs:not(.tabs--ready) .tabpanel + .tabpanel .cards{margin-top:2px}

/* ---------- team ---------- */
.team-grid{margin-top:56px}
.member-photo{
  border-radius:18px;overflow:hidden;background:var(--line);
  aspect-ratio:4/5;margin-bottom:16px;
}
.member-photo img{width:100%;height:100%;object-fit:cover}
.member-photo--empty{
  display:block;width:100%;height:100%;
  background:var(--spectrum);opacity:.35;
}
.member h3{margin-bottom:4px}
.member-role{color:var(--mist);font-size:16px;font-weight:300}

/* ---------- video facade ---------- */
.video{margin:0}
.video-btn{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--line);border-radius:18px;overflow:hidden;aspect-ratio:16/9;
}
.video-poster{width:100%;height:100%;object-fit:cover}
.video-poster--empty{display:block;width:100%;height:100%;background:var(--spectrum);opacity:.4}
.video-play{
  position:absolute;inset:0;margin:auto;
  width:66px;height:66px;border-radius:50%;
  background:rgba(34,63,85,.85);color:#fff;
  display:grid;place-items:center;
  transition:transform .3s var(--ease),background .3s ease;
}
.video-btn:hover .video-play{transform:scale(1.08);background:var(--ink)}
.video-play svg{margin-inline-start:3px}
.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:18px;display:block}
.video-cap{margin-top:12px;color:var(--mist);font-size:16px}
.video-fallback{color:var(--ink)}

/* ---------- the closer: full-bleed, one-to-one with the reference ---------- */
.closer{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(88px,12vw,150px) 0 clamp(60px,8vw,100px);
  background:linear-gradient(170deg,#16405E 0%,var(--deep) 55%,#0D2439 100%);
  color:var(--deep-text);
}
.closer-photo{
  position:absolute;inset:0;z-index:-3;
  background-size:cover;background-position:center;
  filter:grayscale(.3);
}

/* Living water: two crossing light-nets that drift over the pool photo, so the
   still image shimmers like a real pool. They sit UNDER the tone on purpose —
   the tone then caps how bright the background can ever get behind the text
   (worst case, a pure-white photo, still measures 5.5:1 against the light copy),
   while the caustics glow up through it like light seen under water.
   Only transform animates; the nets themselves are static painted layers. */
.pool-shimmer{
  position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;opacity:1;
}
.pool-shimmer span{
  position:absolute;inset:-45%;will-change:transform;
  background:
    repeating-linear-gradient(47deg, transparent 0 16px, rgba(214,234,247,.62) 16px 19px, transparent 19px 40px),
    repeating-linear-gradient(-47deg, transparent 0 16px, rgba(232,244,252,.55) 16px 19px, transparent 19px 40px);
  filter:blur(5px);
}
.pool-shimmer span:nth-child(1){animation:caustic-drift 15s ease-in-out infinite alternate}
.pool-shimmer span:nth-child(2){
  opacity:.7;filter:blur(8px);
  background:
    repeating-linear-gradient(43deg, transparent 0 26px, rgba(222,197,126,.4) 26px 28px, transparent 28px 54px),
    repeating-linear-gradient(-51deg, transparent 0 24px, rgba(205,228,242,.5) 24px 26px, transparent 26px 52px);
  animation:caustic-drift 21s ease-in-out infinite alternate-reverse;
}
@keyframes caustic-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-7%,5%,0)}
}
@media(prefers-reduced-motion:reduce){
  .pool-shimmer span{animation:none}
}

/* The tone is now only a mood tint — the pool stays clearly visible. Text
   legibility is no longer its job; the glass card below owns that. */
.closer-tone{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(170deg,rgba(14,42,66,.34),rgba(11,33,52,.55));
}
/* With a photo, the abstract water layers would only clutter it. */
.closer.has-photo .beam,
.closer.has-photo .rays,
.closer.has-photo .surface{display:none}
/* Moving background, three layers.
   Rules: only `transform` and `opacity` animate, every animated layer is
   promoted, and `filter`/`mix-blend-mode` stay static. That keeps the whole
   thing on the compositor — no repaint per frame, no main-thread work.
   The hues are pre-lit rather than screen-blended for the same reason.

   90deg gradient + rotate() on the element: a diagonal gradient axis on a box
   this tall drifts the hue down the Y axis, leaving only the middle stops in view. */
.closer .beam{
  position:absolute;top:-38%;inset-inline-start:-8%;
  width:66%;height:180%;
  background:linear-gradient(90deg,#CFE0EC 0%,#9FC0DA 24%,#D9B96E 50%,#B9D2E4 76%,#8FB0CC 100%);
  filter:blur(44px);opacity:.58;
  z-index:-1;pointer-events:none;
  will-change:transform;
  animation:refract 26s var(--ease) infinite alternate;
}
/* No scale() here. Scaling a blurred layer re-rasterises the blur at every
   step; translation and rotation reuse the same texture. */
@keyframes refract{
  from{transform:translateZ(0) rotate(-16deg) translateX(0)}
  to{transform:translateZ(0) rotate(-12deg) translateX(4%)}
}

/* shafts of light coming down through the surface */
.closer .rays{
  position:absolute;top:-30%;inset-inline-start:52%;
  width:60%;height:170%;
  background:repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.055) 54px 57px);
  z-index:-1;pointer-events:none;
  will-change:transform;
  animation:drift-rays 19s linear infinite alternate;
}
@keyframes drift-rays{
  from{transform:translateZ(0) rotate(-16deg) translateX(0)}
  to{transform:translateZ(0) rotate(-16deg) translateX(-57px)}
}

/* the slow breath of the water surface itself */
.closer .surface{
  position:absolute;inset:-30% -10%;
  background:
    radial-gradient(60% 40% at 20% 15%, rgba(175,203,240,.20), transparent 70%),
    radial-gradient(50% 35% at 78% 70%, rgba(185,220,184,.16), transparent 70%);
  z-index:-1;pointer-events:none;
  will-change:transform,opacity;
  animation:breathe 14s ease-in-out infinite alternate;
}
@keyframes breathe{
  from{transform:translate3d(0,0,0);opacity:.72}
  to{transform:translate3d(-3%,2%,0);opacity:1}
}
.closer-inner{position:relative;z-index:1;text-align:center}
/* With the pool visible, the content floats on a frosted glass card so the
   text keeps its own readable surface. Over the worst case — a pure-white pool
   — the card still gives 7.9:1 for the headline and 4.9:1 for the small form
   labels, so the pool can never threaten legibility. */
.closer.has-photo .closer-inner{
  max-width:860px;margin-inline:auto;
  background:rgba(16,44,68,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  padding:clamp(32px,5vw,60px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  /* No blur support: make the card a touch more opaque so text stays safe. */
  .closer.has-photo .closer-inner{background:rgba(16,44,68,.94)}
}


/* ---------- form ---------- */
.form-wrap{margin:44px auto 0;max-width:1100px}

.form-status{
  padding:14px 20px;border-radius:12px;margin-bottom:24px;font-size:17px;
}
.form-status--success{background:rgba(217,185,110,.16);color:#EBDCB2;border:1px solid rgba(217,185,110,.4)}
.form-status--error{background:rgba(237,185,190,.16);color:#F3D3D6;border:1px solid rgba(237,185,190,.38)}

/* honeypot: off-screen, never display:none — some bots skip hidden fields */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:right}
.field{display:flex;flex-direction:column;gap:7px}
.field label{color:var(--deep-mist);font-size:15.5px}
.field .req{color:#EDB9BE}
.field .opt{color:var(--deep-mist);opacity:.75;font-size:14px}
.field input,.field select{
  font:inherit;font-size:17px;color:var(--ink);
  min-height:54px;padding:12px 20px;border-radius:100px;
  background:#fff;border:1px solid rgba(255,255,255,.35);
}
.field input::placeholder{color:var(--faint)}
.field input:focus-visible,.field select:focus-visible{
  outline:3px solid var(--deep-text);outline-offset:2px;
}
.field select{appearance:none;background-image:none}

.consent{display:flex;align-items:flex-start;justify-content:flex-start;gap:11px;margin-top:24px;text-align:right}
.consent input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:#DFC17A}
.consent label{color:var(--deep-mist);font-size:16px;line-height:1.6}
.consent a{color:var(--deep-text)}

.form-note{color:var(--deep-mist);font-size:15px;margin-top:16px;max-width:60ch}
.form-note strong{color:var(--deep-text);font-weight:500}
.form .btn-primary{background:#DFC17A;color:var(--ink);border:0;cursor:pointer;font:inherit;font-size:17px;font-weight:600;margin-top:26px;padding:15px 44px}
.form .btn-primary:hover{box-shadow:0 14px 30px -12px rgba(223,193,122,.6)}

@media(max-width:1020px){ .form-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .form-grid{grid-template-columns:1fr} }

.direct-line{color:var(--deep-mist);font-size:17px;margin-top:36px}
.direct-line a{color:var(--deep-text);text-underline-offset:4px;display:inline-flex;min-height:32px;align-items:center}
.direct-line span{margin-inline:8px}

/* ---------- social band ---------- */
.social-band{
  position:relative;z-index:1;
  background:#143A56;color:var(--deep-text);
  text-align:center;padding:80px 0 72px;
}
.band-eyebrow{font-size:14px;letter-spacing:5px;color:var(--deep-mist);margin-bottom:18px}
.band-title{
  font-family:"Frank Ruhl Libre",serif;font-weight:400;color:var(--deep-text);
  font-size:clamp(30px,4.6vw,52px);line-height:1.2;max-width:none;margin:0 auto 40px;
}
.social-squares{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.social-squares .sq{
  width:64px;height:64px;border-radius:16px;color:#fff;
  display:grid;place-items:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.social-squares .sq:hover{transform:translateY(-4px);box-shadow:0 16px 30px -14px rgba(0,0,0,.55)}
.sq--linkedin{background:#0A66C2}
.sq--youtube{background:#FF0000}
.sq--facebook{background:#1877F2}
.sq--instagram{background:#171717}


/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);margin-top:110px;
  padding:64px 0 40px;position:relative;z-index:1;
}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-col{min-width:200px}
.foot .brand{font-size:23px;display:inline-block;margin-bottom:10px}
.foot-h{font-size:15px;letter-spacing:2px;color:var(--faint);font-weight:500;margin-bottom:12px;font-family:inherit}
.foot-line,.foot-addr{color:var(--mist);font-weight:300;font-size:17px}
/* Phone and WhatsApp are the two links a shaky hand most needs to hit.
   Inline text gives them a 22px box; WCAG 2.2 asks for 24 minimum. */
.foot-line a{
  text-decoration:none;
  display:inline-flex;align-items:center;
  min-height:32px;
}
.foot-line a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-legal{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  color:var(--faint);font-size:15px;
}
.foot-menu{display:flex;gap:22px}
.foot-menu a{text-decoration:none;color:var(--faint)}
.foot-menu a:hover{color:var(--ink)}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:40;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.6);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.wa-float.show{opacity:1;visibility:visible;transform:none}

/* ---------- blog ---------- */
.post-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin:0;list-style:none;
}
.post-card{margin:0}
.post-card-link{
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  background:var(--porcelain-2);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s ease;
}
.post-card-link:hover{transform:translateY(-3px);box-shadow:0 30px 60px -45px rgba(34,63,85,.5);border-color:var(--sky)}
.post-card-media{aspect-ratio:16/10;background:var(--line);overflow:hidden}
.post-card-media img{width:100%;height:100%;object-fit:cover}
.post-card-body{padding:28px 30px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-date{color:var(--faint);font-size:14px;letter-spacing:.5px}
.post-card-title{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:23px;line-height:1.25;color:var(--ink);margin:0}
.post-card-excerpt{color:var(--mist);font-weight:300;font-size:16.5px;line-height:1.7;margin:0}
.post-card-more{margin-top:auto;color:var(--rose);font-weight:500;font-size:16px;padding-top:6px}

.post-hero-media{margin:0 0 8px;border-radius:22px;overflow:hidden;margin-top:-40px;position:relative;z-index:2}
.post-hero-media img{width:100%;height:auto;display:block}
.post-content{max-width:68ch;margin-inline:auto}
.post-content :where(h2,h3){font-family:"Frank Ruhl Libre",serif;font-weight:500;color:var(--ink);margin:1.4em 0 .5em}
.post-content h2{font-size:28px}
.post-content h3{font-size:22px}
.post-content :where(p,ul,ol){color:var(--mist);font-weight:300;margin-bottom:1.1em}
.post-content a{color:var(--rose);text-underline-offset:3px}
.post-content img{border-radius:14px}

.post-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.post-nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}
.post-nav a:hover{color:var(--rose)}

.pagination{margin-top:48px;display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination a,.pagination .current{
  min-width:44px;min-height:44px;display:grid;place-items:center;padding:0 14px;
  border-radius:100px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:500;
}
.pagination .current{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
.pagination a:hover{border-color:var(--ink)}

@media(max-width:720px){ .post-list{grid-template-columns:1fr} }

/* ---------- gallery ---------- */
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;
}
.gallery li{margin:0}
.gallery img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:18px;background:var(--line);
}
.gallery--full{grid-template-columns:repeat(3,1fr)}
.gallery-cap{color:var(--mist);font-size:15.5px;margin-top:10px}
.gallery-more{margin-top:36px}
@media(max-width:900px){ .gallery,.gallery--full{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .gallery,.gallery--full{grid-template-columns:1fr} }

/* ---------- thought mode ---------- */
.tm-btn{
  position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:45;
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-size:15px;font-weight:500;cursor:pointer;
  min-height:48px;padding:11px 20px;border-radius:100px;
  background:var(--ink);color:var(--porcelain);border:0;
  box-shadow:0 14px 30px -14px rgba(44,40,51,.7);
  transition:transform .3s var(--ease);
}
.tm-btn:hover{transform:translateY(-2px)}
.tm-btn[aria-pressed="true"]{background:var(--porcelain);color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.tm-eye{font-size:17px;line-height:1}

.tm-layer{position:absolute;inset:0;pointer-events:none;z-index:30;display:none}
body.thinking .tm-layer{display:block}

.tm-note{position:absolute;top:0;left:0}

/* desktop: a card on the empty side, joined by a dashed line */
.tm-line{
  position:absolute;top:0;left:0;height:1px;
  border-top:1px dashed var(--ink);opacity:.45;
  transform-origin:0 0;
}
.tm-card{
  position:absolute;top:0;left:0;
  display:block;max-width:240px;
  font-family:"Amatic SC","Assistant",cursive;
  font-size:22px;line-height:1.25;font-weight:700;
  color:var(--ink);
  background:#FFFDF3;
  border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;
  box-shadow:0 16px 34px -22px rgba(44,40,51,.7);
  pointer-events:auto;
}

/* mobile: a glowing dot that opens a bubble */
.tm-dot{
  width:22px;height:22px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--ink);border:2px solid var(--porcelain);
  pointer-events:auto;box-shadow:0 0 0 0 rgba(44,40,51,.45);
  animation:tm-pulse 2.4s ease-out infinite;
}
@keyframes tm-pulse{
  from{box-shadow:0 0 0 0 rgba(44,40,51,.45)}
  to{box-shadow:0 0 0 14px rgba(44,40,51,0)}
}
.tm-bubble{
  position:absolute;top:30px;inset-inline-start:0;
  display:block;width:min(74vw,280px);
  font-family:"Amatic SC","Assistant",cursive;
  font-size:21px;line-height:1.3;font-weight:700;
  color:var(--ink);background:#FFFDF3;
  border:1px solid var(--line);border-radius:12px;padding:12px 15px;
  box-shadow:0 16px 34px -22px rgba(44,40,51,.7);
  pointer-events:auto;
}
.tm-bubble[hidden]{display:none}

@media print{ .tm-btn,.tm-layer{display:none!important} }

/* ---------- quiz ---------- */
.quiz{
  margin-top:48px;max-width:720px;
  position:relative;z-index:1;
}
.quiz-card{
  background:var(--porcelain-2);
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(28px,5vw,52px);
  box-shadow:0 30px 70px -55px rgba(34,63,85,.55);
}
.quiz-lead{color:var(--mist);font-weight:300;font-size:19px;line-height:1.7;margin-bottom:28px;max-width:46ch}
.quiz-fallback{color:var(--mist);font-weight:300;font-size:18px;margin-top:16px}

.quiz-progress{
  height:6px;border-radius:100px;background:var(--line);overflow:hidden;margin-bottom:16px;
}
.quiz-progress-bar{
  display:block;height:100%;border-radius:100px;
  background:var(--spectrum);
  transition:width .5s var(--ease);
}
.quiz-count{font-size:14px;letter-spacing:1.5px;color:var(--faint);margin-bottom:22px}

.quiz-fs{border:0;padding:0;margin:0;min-width:0}
.quiz-q{
  font-family:"Frank Ruhl Libre",serif;font-weight:400;
  font-size:clamp(24px,3.2vw,32px);line-height:1.25;color:var(--ink);
  padding:0;margin-bottom:24px;
}
.quiz-options{display:flex;flex-direction:column;gap:12px}
.quiz-opt{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;border-radius:16px;cursor:pointer;
  background:var(--porcelain);
  border:1px solid var(--line);
  transition:border-color .25s ease,background .25s ease,transform .2s var(--ease);
  min-height:56px;
}
.quiz-opt:hover{border-color:var(--sage);background:#fff}
.quiz-opt input{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;flex:none;border-radius:50%;
  border:2px solid var(--faint);background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
  cursor:pointer;margin:0;
}
.quiz-opt input:checked{border-color:var(--sand);box-shadow:inset 0 0 0 5px var(--sand)}
.quiz-opt input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.quiz-opt:has(input:checked){border-color:var(--sand);background:#fff}
.quiz-opt-text{font-size:18px;color:var(--ink)}

.quiz-back{
  margin-top:26px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:16px;color:var(--mist);
  text-decoration:underline;text-underline-offset:4px;
  padding:8px 4px;min-height:44px;
}
.quiz-back:hover{color:var(--ink)}

/* result */
.quiz-result-eyebrow{font-size:14px;letter-spacing:2.5px;color:var(--faint);margin-bottom:12px}
.quiz-result-title{
  font-family:"Frank Ruhl Libre",serif;font-weight:500;
  font-size:clamp(26px,3.6vw,36px);line-height:1.2;color:var(--ink);margin-bottom:14px;
}
.quiz-result-line{color:var(--mist);font-weight:300;font-size:18px;line-height:1.7;max-width:46ch;margin-bottom:30px}
.quiz-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

@media(prefers-reduced-motion:reduce){
  .quiz-progress-bar{transition:none}
}

/* ---------- bubbles (מי אנחנו) ---------- */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bubbles span{
  position:absolute;bottom:-48px;inset-inline-start:var(--x);
  width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.9), rgba(169,198,219,.35) 55%, rgba(127,166,198,.22));
  border:1px solid rgba(127,166,198,.4);
  will-change:transform,opacity;opacity:0;
  animation:bubble-rise var(--dur) linear infinite;
  animation-delay:var(--d);
}
@keyframes bubble-rise{
  0%{transform:translate3d(0,0,0) scale(.85);opacity:0}
  10%{opacity:.85}
  85%{opacity:.7}
  100%{transform:translate3d(var(--dx),-540px,0) scale(1.06);opacity:0}
}
@media(prefers-reduced-motion:reduce){ .bubbles{display:none} }

/* ---------- reveal ---------- */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:820px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .site-header.open .mobile-nav{display:flex}
  .block{padding:80px 0}
  .hero{padding:96px 0 80px}
  .wrap{padding:0 24px}
  .card{padding:32px 28px}
  .wa-float{inset-block-end:18px;inset-inline-start:18px}
}
@media(max-width:520px){
  .grid-4{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.kinetic .w{opacity:1;transform:none}
}

/* ---------- print ---------- */
@media print{
  .site-header,.wa-float,.caustic,.beam,.rays{display:none}
  body{background:#fff;font-size:12pt}
}