/* ============================================================
   ALORA VIDEO - shared stylesheet (EN + HE)
   ALORA palette · deep teal + ivory + aqua + soft gold
   on a starfield background (matches the mark)
   ============================================================ */

/* ---- Fonts loaded per-page via <link> ---- */

:root{
  /* ALORA palette */
  --deep-teal:  #004F69;  /* primary brand */
  --ocean-teal: #007D99;  /* secondary */
  --aqua:       #00B7D6;  /* bright accent */
  --ivory:      #F0E7DA;  /* warm ivory text */
  --midnight:   #022B3A;  /* darkest */
  --gold:       #E8D5B0;  /* warm cream (palette C) */

  /* base surfaces (mostly translucent so the starfield shows through) */
  --bg:        #004F69;
  --bg-deep:   #022B3A;
  --bg-elev:   rgba(7,73,92,0.62);
  --bg-card:   rgba(8,78,98,0.60);
  --band:      rgba(2,38,52,0.42);
  --band-deep: rgba(2,30,42,0.60);
  --line:      rgba(240,231,218,0.20);
  --line-soft: rgba(240,231,218,0.12);

  /* gold accent ramp */
  --gold-soft: #EDE0C4;
  --gold-deep: #C8B090;
  --gold-glow: rgba(232,213,176,0.28);
  --aqua-soft: #7EE0F0;
  --aqua-glow: rgba(95,210,232,0.38);

  /* ivory primary */
  --cream:     #F0E7DA;
  --cream-deep:#E2D6C4;

  /* ink */
  --ink:       #F5EFEA;
  --ink-dim:   #D8E4E7;
  --ink-faint: #AACAD0;

  /* logo mark color controls */
  --logo-ink:  var(--ivory);
  --logo-cut:  #05485C;

  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --sect: clamp(36px, 4.6vw, 68px);
  --radius: 18px;
}

/* midnight variant - darker, moodier */
html[data-base="midnight"]{
  --bg:        #022B3A;
  --bg-deep:   #021E2A;
  --bg-elev:   rgba(5,48,62,0.66);
  --bg-card:   rgba(6,52,67,0.64);
  --band:      rgba(1,24,34,0.50);
  --band-deep: rgba(1,18,26,0.66);
  --ink-faint: #86A9B1;
}

/* hebrew fonts */
html[lang="he"]{
  --font-head: 'Rubik', sans-serif;
  --font-body: 'Assistant', system-ui, sans-serif;
}

/* heading-font tweak overrides */
html[data-headfont="cormorant"]{ --font-head: 'Cormorant Garamond', Georgia, serif; }
html[data-headfont="heebo"]{ --font-head: 'Heebo', sans-serif; }

*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:transparent;
  color:var(--ink);
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
  font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.6;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[lang="he"] body{ font-weight:400; }

/* ---------- starfield background (the Alora night sky) ---------- */
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%,
      #55AAEE 0%,
      #2288DD 18%,
      #1166CC 35%,
      #0050A8 55%,
      #003A84 75%,
      #002660 100%
    );}
body>*{position:relative;z-index:1}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold-glow);color:var(--ink)}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:760px;margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.04;letter-spacing:-0.01em}
.display{
  font-size:clamp(2.6rem,7.6vw,5.4rem);
  font-weight:600;line-height:1.0;letter-spacing:-0.018em;
  text-wrap:balance;
}
html[lang="he"] .display{letter-spacing:-0.005em;line-height:1.08}
.h-sect{
  font-size:clamp(2rem,4.4vw,3.3rem);
  line-height:1.06;text-wrap:balance;
}
.lead{
  font-size:clamp(1.12rem,1.7vw,1.4rem);
  color:var(--ink-dim);font-weight:380;line-height:1.5;
  text-wrap:pretty;
}
.eyebrow{
  font-family:var(--font-body);
  font-size:.78rem;font-weight:600;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--gold);
}
html[lang="he"] .eyebrow{letter-spacing:0.18em}
.serif-quote{font-family:var(--font-head);font-style:italic;font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);font-weight:600;
  font-size:1.02rem;letter-spacing:.01em;
  padding:1.05em 1.9em;border-radius:999px;
  cursor:pointer;border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .3s, color .3s;
  will-change:transform;
}
.btn .arr{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn-gold{
  background:linear-gradient(180deg,var(--cream),var(--cream-deep));
  color:oklch(0.30 0.045 216);
  border-color:rgba(240,231,218,0.35);
  box-shadow:0 1px 0 oklch(1 0 0 / .55) inset, 0 14px 40px -16px oklch(0.95 0.02 90 / .35);
}
  box-shadow:0 1px 0 oklch(1 0 0 / .55) inset, 0 14px 40px -16px oklch(0.95 0.02 90 / .35);
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 1px 0 oklch(1 0 0 / .6) inset,0 22px 52px -18px oklch(0.95 0.02 90 / .45)}
.btn-gold:hover .arr{transform:translateX(4px)}
html[lang="he"] .btn-gold:hover .arr{transform:translateX(-4px)}
.btn-ghost{
  background:transparent;color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft);transform:translateY(-2px)}
.btn-aqua{
  background:linear-gradient(180deg,var(--aqua-soft),var(--aqua));
  color:oklch(0.18 0.04 216);
  border-color:rgba(126,224,240,0.35);
  box-shadow:0 1px 0 oklch(1 0 0 / .45) inset, 0 14px 40px -16px rgba(0,183,214,.35);
}
.btn-aqua:hover{transform:translateY(-3px);box-shadow:0 1px 0 oklch(1 0 0 / .55) inset,0 22px 52px -18px rgba(0,183,214,.5)}
.btn-aqua:hover .arr{transform:translateX(4px)}
html[lang="he"] .btn-aqua:hover .arr{transform:translateX(-4px)}
.arr{display:inline-block}
html[lang="he"] .arr{transform:scaleX(-1)}
html[lang="he"] .btn .arr{transform:scaleX(-1)}

.maillink{
  color:var(--ink-dim);border-bottom:1px solid var(--line);
  padding-bottom:2px;transition:color .3s,border-color .3s;font-weight:450;
}
.maillink:hover{color:var(--gold-soft);border-color:var(--gold)}

/* ---------- image placeholders ---------- */
.ph{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background-color:var(--bg-elev);
  background-image:repeating-linear-gradient(135deg,
     oklch(1 0 0 / .028) 0 2px, transparent 2px 13px);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-soft);
}
.ph::before{
  content:attr(data-label);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
  text-align:center;padding:1.4em;max-width:80%;line-height:1.5;
  opacity:.85;
}
.ph .ph-icn{position:absolute;top:14px;inset-inline-start:14px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);opacity:.5;box-shadow:0 0 0 4px oklch(0.815 0.103 80 / .12)}

/* ---------- reveal animation ----------
   Triggered by `.in` on the SECTION wrapper - JS never mutates the
   text elements themselves, so headings/paragraphs stay clean source
   and remain directly editable in the page. */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in,.in .reveal{opacity:1;transform:none}
/* gentle stagger for grouped children */
.in .reveal{transition-delay:0ms}
.in .reveal:nth-child(2){transition-delay:80ms}
.in .reveal:nth-child(3){transition-delay:160ms}
.in .reveal:nth-child(4){transition-delay:240ms}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-media .ph,.moment-media .ph,
  .hero-media image-slot,.moment-media image-slot{animation:none !important}
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(22px,3.4vw,34px) var(--pad);
  /* Keep logo on the left and language switcher on the right regardless of
     document direction so switching languages doesn't flip the nav. */
  direction:ltr;
}
/* ---- logo lockup ---- */
.brand{display:inline-flex;align-items:center;gap:.66em}
.logo-mark{flex:0 0 auto;height:clamp(72px,7.5vw,92px);width:auto;display:block;overflow:visible}
.wordmark{display:flex;flex-direction:column;justify-content:center;line-height:1}
.wm-name{font-family:var(--font-body);font-weight:700;font-size:1.22rem;
  letter-spacing:.36em;text-indent:.36em;text-transform:uppercase;color:var(--cream)}
.wm-sub{font-family:var(--font-body);font-weight:600;font-size:.64rem;letter-spacing:.40em;
  text-indent:.40em;text-transform:uppercase;color:var(--gold);margin-top:.42em}
html[lang="he"] .wm-name{letter-spacing:.10em;text-indent:0}
html[lang="he"] .wm-sub{letter-spacing:.22em;text-indent:0}
.langswitch{display:flex;gap:.1em;font-size:.82rem;font-weight:600;letter-spacing:.06em;
  color:var(--ink-faint);align-items:center}
.langswitch a{padding:.3em .55em;border-radius:7px;transition:color .25s,background .25s}
.langswitch a.active{color:var(--gold)}
.langswitch a:not(.active):hover{color:var(--ink)}
.langswitch .sep{opacity:.4}

/* ============================================================
   HERO - copy + framed media panel
   ============================================================ */
.hero{min-height:auto;display:flex;align-items:center;
  padding:clamp(120px,15vh,168px) 0 clamp(40px,5vh,72px);
  position:relative;overflow:hidden}
@keyframes breathe{from{transform:scale(1.05)}to{transform:scale(1.14)}}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,4vw,60px);align-items:center}
.hero-inner{max-width:560px;min-width:0}
.hero .eyebrow{display:flex;align-items:center;gap:1em;margin-bottom:1.5rem}
.hero .eyebrow::after{content:"";flex:0 0 54px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
html[lang="he"] .hero .eyebrow::after{background:linear-gradient(270deg,var(--gold),transparent)}
.hero .display{font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.08;margin-bottom:1.3rem}
html[lang="he"] .hero .display{font-size:clamp(2.6rem,5.2vw,4.3rem);line-height:1.12}
.hero .display em{font-style:italic;color:var(--gold-soft)}
.hero .lead{max-width:520px;font-size:clamp(1.2rem,1.85vw,1.55rem);line-height:1.5;margin-bottom:2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem 1.3rem;align-items:center}

/* ---- split hero layout: copy stack on one side, video stretched to full column height on the other ---- */
.hero-grid.hero-split{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  gap:clamp(28px, 4vw, 64px);
  align-items:stretch;
}
.hero-split .hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(1rem, 1.6vw, 1.6rem);
  min-width:0;
}
.hero-split .hero-copy .hero-headline{margin-bottom:0}
.hero-split .hero-copy .hero-lead{margin-bottom:0;max-width:560px}
.hero-split .hero-copy .hero-cta{margin-top:.4rem}
.hero-split .hero-figure{
  align-self:stretch;
  display:flex;
  justify-content:center;
  width:100%;
  margin:0;
}
.hero-split .hero-figure .hero-frame.is-video{
  height:100%;
  width:auto;
  max-width:100%;
  aspect-ratio:4/5;
}

/* legacy stacked layout kept for rollback if needed */
.hero-grid.hero-stacked{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows:auto 1fr auto;
  gap:clamp(22px, 3vw, 38px) clamp(36px, 5vw, 80px);
  align-items:start;
}
.hero-stacked .hero-headline{
  grid-column:1 / -1;
  text-align:center;
  max-width:900px;
  margin-inline:auto;
  font-size:clamp(2.4rem, 5.2vw, 4.2rem);
  line-height:1.05;
}
.hero-stacked .hero-lead{
  grid-column:1;
  grid-row:2;
  max-width:520px;
  align-self:start;
  margin-bottom:0;
}
.hero-stacked .hero-figure{
  grid-column:2;
  grid-row:2;
}
.hero-stacked .hero-cta{
  grid-column:1 / -1;
  grid-row:3;
  justify-self:center;
}

.hero-note{font-size:clamp(1.15rem,1.6vw,1.35rem);color:var(--ink-faint);max-width:400px;line-height:1.45}
.hero-occasions{
  display:flex;
  flex-direction:row;
  gap:clamp(14px,2.5vw,24px);
  align-items:center;
  margin-top:1.2rem;
  flex-wrap:nowrap;
}
.hero-occ-item{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  opacity:.7;
  transition:opacity .25s;
}
.hero-occ-item:hover{opacity:1}
.hero-occ-item svg{
  width:26px;
  height:26px;
  flex-shrink:0;
  overflow:visible;
}
.hero-occ-item span{
  font-size:.7rem;
  color:var(--ink-faint);
  letter-spacing:.02em;
  white-space:nowrap;
}

/* framed media panel */
.hero-figure{margin:0;position:relative}
.hero-frame{position:relative;border-radius:calc(var(--radius) + 6px);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/5;background:var(--midnight);
  box-shadow:0 46px 110px -46px rgba(0,0,0,.66)}
.hero-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(240,231,218,.05), inset 0 -120px 90px -70px rgba(2,30,42,.6)}
.hero-frame image-slot{position:absolute;inset:0;width:100%;height:100%;display:block}
.play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:76px;height:76px;border-radius:50%;display:none;place-items:center;pointer-events:none;
  background:rgba(0,183,214,.16);border:1px solid rgba(0,183,214,.55);backdrop-filter:blur(2px);
  box-shadow:0 0 46px var(--aqua-glow)}
.hero-frame image-slot[data-filled] ~ .play-badge{display:grid}
.play-badge svg{width:24px;height:24px;margin-inline-start:3px;fill:var(--ivory)}
html[lang="he"] .play-badge svg{transform:scaleX(-1);margin-inline-start:0;margin-inline-end:3px}
.hero-figcap{margin-top:1rem;text-align:center;font-size:.85rem;color:var(--ink-faint);letter-spacing:.02em}

/* landscape frame variant */
html[data-hero="landscape"] .hero-frame{aspect-ratio:16/11}
html[data-hero="landscape"] .hero-grid{grid-template-columns:0.94fr 1.06fr}

/* ---- video hero (landscape 16:9 player, side-by-side with copy) ---- */
.hero .hero-frame.is-video{aspect-ratio:16/9;background:#000}
.hero-frame.is-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1}
.hero .hero-frame.is-image{aspect-ratio:16/9;background:#000}
.hero-frame.is-image img{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1;object-fit:contain;object-position:center}
@media(max-width:900px){
  .hero{min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:clamp(30px,7vw,44px)}
  .hero-grid.hero-stacked{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:clamp(24px,5vw,36px)}
  .hero-stacked .hero-headline,
  .hero-stacked .hero-lead,
  .hero-stacked .hero-figure,
  .hero-stacked .hero-cta{grid-column:1;grid-row:auto}
  .hero-stacked .hero-lead{text-align:center;max-width:640px;margin-inline:auto}
  .hero-stacked .hero-headline{font-size:clamp(2.2rem, 8vw, 3.2rem)}
  .hero-figure{max-width:440px;margin-inline:auto;width:100%}
  .hero-frame,html[data-hero="landscape"] .hero-frame{aspect-ratio:4/5}
  .hero-frame.is-video{aspect-ratio:16/9;max-width:560px;margin-inline:auto}
  .hero-grid.hero-split{grid-template-columns:1fr;gap:clamp(24px,6vw,40px)}
  .hero-split .hero-copy{text-align:center;align-items:center}
  .hero-split .hero-copy .hero-lead{margin-inline:auto}
  .hero-split .hero-copy .hero-cta{justify-content:center;width:100%}
  .hero-split .hero-copy .hero-cta .hero-note{width:100%;text-align:center;margin-inline:auto}
  .hero-split .hero-figure{height:auto;max-width:560px;margin-inline:auto;width:100%}
  .hero-split .hero-figure .hero-frame.is-video{aspect-ratio:16/9;height:auto;min-height:0;width:100%;max-width:100%}
}

/* ============================================================
   HOOK
   ============================================================ */
.hook{padding:clamp(28px,4vw,52px) 0 var(--sect);background:var(--band)}
.hook .narrow{text-align:center}
.hook .h-sect{margin-bottom:1.5rem}
.hook .strike{color:var(--ink-faint)}
.hook .h-sect em{font-style:italic;color:var(--gold-soft)}
.hook p.lead{max-width:820px;margin-inline:auto}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how{padding:var(--sect) 0;border-top:1px solid rgba(95,210,232,0.15);margin-top:clamp(20px,3vw,36px);padding-top:clamp(20px,3vw,36px);background:var(--band)}
.sect-head{text-align:center;margin-bottom:clamp(32px,5vw,56px)}
.sect-head .eyebrow{display:block;margin-bottom:1rem}
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start}
.steps .step-arrow{display:flex;align-items:flex-start;padding-top:1.5rem;color:var(--aqua-soft);opacity:.7}
.step{
  text-align:center;
  position:relative;
  transition:transform 0.35s cubic-bezier(.22,.68,0,1.2), opacity 0.35s ease;
  cursor:default;
}
.step:hover{
  transform:translateY(-10px);
}
.step .num{font-family:var(--font-head);font-size:3.4rem;line-height:1;color:var(--aqua-soft);
  font-weight:500;display:block;margin-bottom:1.1rem;opacity:.92}
.step .icn{width:30px;height:30px;margin:0 auto 1.2rem;color:var(--aqua-soft);opacity:.85}
.step h3{font-size:1.42rem;margin-bottom:.6rem}
.step p{color:var(--ink-dim);font-size:1rem;max-width:300px;margin-inline:auto}
/* arrows handled by SVG elements */
@media(max-width:760px){
  .steps{grid-template-columns:1fr;gap:32px;max-width:380px;margin-inline:auto}
  .steps .step-arrow{display:none}
}

/* ============================================================
   THE MOMENT
   ============================================================ */
.moment{padding:0;position:relative;z-index:5}
.moment-media{z-index:5}
.moment-media{position:relative;height:min(94svh,820px)}
.moment-media .ph,.moment-media image-slot{width:100%;height:100%;border:0;border-radius:0;display:block;background-color:var(--bg-deep);
  animation:breathe 28s ease-in-out infinite alternate}
.moment-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(2,20,30,0.35) 0%, rgba(2,20,30,0.15) 35%, rgba(2,20,30,0.55) 100%)}
.moment-copy{position:absolute;inset-inline:0;bottom:clamp(48px,9vh,110px);text-align:center;padding-inline:var(--pad);pointer-events:none;z-index:6}
.moment-copy>*{pointer-events:auto}
.moment-copy .eyebrow{display:block;margin-bottom:1.4rem;color:#F0E7DA;text-shadow:0 2px 12px rgba(0,0,0,0.55)}
.moment-line{font-family:var(--font-head);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,3.2vw,2.8rem);line-height:1.15;
  max-width:46ch;margin-inline:auto;text-align:center;color:#FFFFFF;text-shadow:0 2px 18px rgba(0,0,0,0.6)}
.moment-cap{margin-top:1.5rem;font-size:.92rem;color:#F0E7DA;opacity:0.95;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,0.6)}

/* ============================================================
   OCCASIONS
   ============================================================ */
.occasions{padding:var(--sect) 0}
.occ-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px)}
.occ{position:relative;border-radius:var(--radius);overflow:visible;
  background:transparent;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s}
.occ:hover{transform:translateY(-6px);border-color:var(--gold-deep)}
.occ .ph,.occ image-slot{height:300px;border:0;border-radius:0;display:block;width:100%}
.occ-body{padding:1.5rem 1.5rem 1.7rem}
.occ-title{font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:.6rem;padding:0 .2rem}
.occ-img-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)}
.occ-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.occ-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:clamp(8px,1.5vw,16px) 0 0;
}
.occ:hover .occ-icon{
  background:none;
}
.occ-icon svg{
  width:100%;
  height:100%;
  max-width:130px;
  max-height:130px;
  filter:drop-shadow(0 0 12px rgba(212,175,122,.18));
  transition:filter .35s,transform .35s;
}
.occ:hover .occ-icon svg{
  filter:drop-shadow(0 0 22px rgba(212,175,122,.38));
  transform:scale(1.06);
}
.occ .occ-label{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.4rem;
  white-space:nowrap;
  color:var(--gold);
  text-align:center;
  margin-bottom:0;
  margin-top:0;
  letter-spacing:.02em;
  display:block;
}
.occ h3{font-size:1.32rem;margin-bottom:.4rem}
.occ p{font-size:.95rem;color:var(--ink-dim);line-height:1.45}
/* occ::after removed - was creating visual corner inconsistency */
@media(max-width:640px){.occ-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.occ-grid{grid-template-columns:1fr}.occ .ph,.occ image-slot{height:230px}}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tributes{padding:var(--sect) 0;background:var(--band)}
.pull{max-width:900px;margin:0 auto clamp(48px,7vw,80px);text-align:center}
.pull .mark{font-family:var(--font-head);font-size:4rem;line-height:.6;color:var(--gold);
  opacity:.5;display:block;margin-bottom:.2em}
.pull blockquote{font-family:var(--font-head);font-style:italic;font-weight:500;
  font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.18;text-wrap:balance;margin-bottom:1.4rem}
.pull cite{font-style:normal;font-size:.92rem;letter-spacing:.04em;color:var(--gold-soft);
  text-transform:uppercase;font-weight:600}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.quote{background:var(--bg-card);backdrop-filter:blur(3px);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:2rem 1.8rem;display:flex;flex-direction:column;gap:1.1rem}
.quote p{font-family:var(--font-head);font-style:italic;font-size:1.18rem;line-height:1.4;color:var(--ink)}
.quote cite{font-style:normal;margin-top:auto;font-size:.8rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600;font-family:var(--font-body)}
.quote cite b{color:var(--gold-soft);font-weight:600}
@media(max-width:860px){.quotes{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ============================================================
   NOGA (the human)
   ============================================================ */
.noga{padding:clamp(40px,6vw,80px) 0}
html[data-noga="hidden"] .noga{display:none}
.noga-grid{display:grid;grid-template-columns:240px 1fr;gap:clamp(36px,5vw,68px);align-items:center}
.noga-photo{position:relative;width:100%;max-width:240px;margin-inline:auto;border-radius:var(--radius);overflow:hidden}
.noga-photo .ph{position:absolute;inset:0;height:100%;width:100%;border-radius:var(--radius)}
.noga-photo image-slot{position:absolute;inset:0;height:100%;width:100%;border-radius:var(--radius);display:block}
.noga-copy .eyebrow{display:block;margin-bottom:1.2rem}
.noga-copy h2{font-size:clamp(2.2rem,4.5vw,3.4rem);margin-bottom:1.3rem;text-wrap:balance}
.noga-copy p{color:var(--ink-dim);font-size:1.22rem;margin-bottom:1.1rem;max-width:50ch}
.noga-copy p em{font-style:italic;color:var(--gold-soft)}
.sig{font-family:var(--font-head);font-style:italic;font-size:1.5rem;color:var(--ink);margin-top:.4rem}
/* featured = larger photo, more presence */
html[data-noga="featured"] .noga-grid{grid-template-columns:300px 1fr}
html[data-noga="featured"] .noga-photo{max-width:300px}
@media(max-width:820px){
  .noga-grid{grid-template-columns:1fr;gap:32px}
  .noga-photo{max-width:300px}
}

/* ============================================================
   CTA
   ============================================================ */
.cta{padding:var(--sect) 0;text-align:center;position:relative;overflow:hidden;background:var(--band-deep)}
.cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 50% 0%, var(--gold-glow), transparent 60%);opacity:.5}
.cta .narrow{position:relative}
.cta .h-sect{margin-bottom:1.4rem;color:var(--aqua-soft)}
.cta .h-sect em{font-style:italic;color:var(--gold-soft)}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;justify-content:center;align-items:center;margin:2.2rem 0 1.8rem}
.price-note{font-size:.95rem;color:var(--ink-faint);letter-spacing:.02em}
.price-note b{color:var(--ink-dim);font-weight:600}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:var(--sect) 0}
.faq .narrow{max-width:780px}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;text-align:start;font-family:var(--font-head);
  font-size:clamp(1.18rem,2.1vw,1.5rem);font-weight:500;transition:color .3s}
.faq-q:hover{color:var(--gold-soft)}
.faq-pm{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.faq-pm::before,.faq-pm::after{content:"";position:absolute;background:var(--gold);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-pm::before{width:16px;height:1.5px}
.faq-pm::after{width:1.5px;height:16px;transition:opacity .3s,transform .4s}
.faq-item.open .faq-pm{transform:rotate(90deg)}
.faq-item.open .faq-pm::after{opacity:0}
.faq-a{overflow:hidden;max-height:0;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.faq-a-inner{padding:0 0 1.6rem;color:var(--ink-dim);font-size:1.05rem;max-width:60ch;line-height:1.55}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{padding:clamp(48px,7vw,72px) 0;border-top:1px solid var(--line-soft);background:var(--band-deep)}
.foot-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-end}
.foot .brand{margin-bottom:.9rem}
.foot .logo-mark{height:42px}
.foot .wm-name{font-size:1.1rem}
.foot-tag{color:var(--ink-faint);font-size:.95rem;max-width:34ch}
.foot-right{display:flex;flex-direction:column;gap:.5rem;text-align:end;font-size:.95rem}
.foot-right a{color:var(--ink-dim);transition:color .3s}
.foot-right a:hover{color:var(--gold-soft)}
.foot-copy{margin-top:2.5rem;font-size:.8rem;color:var(--ink-faint);opacity:.7;letter-spacing:.02em}
@media(max-width:600px){.foot-right{text-align:start}}


/* ===== TESTIMONIALS CAROUSEL ===== */
.tributes .carousel-outer{
  display:flex;
  align-items:center;
  gap:16px;
  max-width:520px;
  margin:0 auto;
}
.carr-arrow{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#F0E7DA;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.carr-arrow:hover{background:rgba(255,255,255,.2);transform:scale(1.08)}
.wa-quote{
  font-style:italic;
  font-weight:700;
  font-size:clamp(1.1rem,2.5vw,1.5rem);
  color:var(--gold-soft);
  text-align:center;
  margin-bottom:14px;
  text-wrap:balance;
  line-height:1.3;
}
.wa-card{
  display:flex;
  justify-content:center;
  direction:ltr;
}
.wa-bubble{
  background:#fff;
  color:#111;
  border-radius:10px;
  padding:12px 14px 6px;
  font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  font-size:.97rem;
  line-height:1.55;
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  direction:rtl;
  text-align:right;
  max-width:100%;
}
html[lang="en"] .wa-bubble{
  direction:ltr;
  text-align:left;
}
.wa-time{
  display:block;
  text-align:right;
  font-size:11px;
  color:#999;
  margin-top:4px;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  direction:ltr;
}
.wa-sender{
  margin-top:12px;
  font-size:.92rem;
  color:#93B6BE;
  text-align:center;
  letter-spacing:.04em;
}
.wa-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:14px;
}
.wa-dots .dot{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  cursor:pointer;
  transition:background .2s,transform .2s;
}
.wa-dots .dot.active{background:#F0E7DA;transform:scale(1.3)}

/* ---- appended: log-in bridge to workflow app ---- */
.nav-right{display:flex;align-items:center;gap:1.1em}
.nav-login{
  font-size:.82rem;font-weight:600;letter-spacing:.06em;
  color:var(--ink-faint);
  padding:.42em .95em;border-radius:8px;
  border:1px solid var(--line-soft);
  transition:color .25s,border-color .25s,background .25s;
}
.nav-login:hover{color:var(--gold);border-color:var(--gold-glow);background:rgba(232,213,176,0.06)}

/* ---- appended: EN font override (final shipped design) ---- */
html[lang="en"] { --font-head: 'Rubik', sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; }
html[lang="en"] body { font-family: var(--font-body); }
html[lang="en"] .occ .occ-label { white-space: nowrap; }