/* ==========================================================================
   גל ליסוס — ייעוץ משכנתאות וכלכלן
   Shared design system — palette & type match the existing tool pages
   (מדדים-וריביות.html / מחשבון-החזר-חודשי-הון-עצמי.html) for full site
   cohesion. Logo ink is #0E2546 / #B38848 (see assets/img README); the UI
   tokens below are that family's tested on-screen calibration.
   ========================================================================== */

:root{
  --navy-deep:#0f1f38;
  --navy:#16305a;
  --navy-soft:#24406e;
  --navy-pale:#2f5189;
  --navy-pale-2:#3f66a8;
  --gold:#c8933f;
  --gold-light:#e9c98a;
  /* Darkened from #a9793a per explicit request, after a contrast audit
     found gold text failed WCAG AA — #a9793a measured 3.83:1 on white
     (needs 4.5:1 for normal-size text), and the un-dimmed --gold measured
     as low as 2.48:1. #8c6018 measures ~5.5:1 on white / ~5.0:1 on cream
     (verified via the same relative-luminance formula), while staying in
     the same gold/amber hue family (~37° hue, same as the original) so
     it still reads as "gold," just as an accessible foreground color
     rather than an accent-only one. --gold and --gold-light are
     unchanged — they're used for backgrounds, borders and decorative
     fills, which don't carry a text-contrast requirement. */
  --gold-dim:#8c6018;
  --cream:#f7f4ec;
  --paper:#ffffff;
  --ink:#16233a;
  --ink-soft:#54617a;
  --ink-faint:#8792a3;
  --line:#e2ddd0;
  --good:#2f6b4f;
  --bad:#a33d2c;
  --radius:14px;
  --radius-sm:9px;
  --radius-lg:22px;
  --shadow-sm:0 1px 3px rgba(22,35,58,.06);
  --shadow-md:0 10px 30px rgba(15,31,56,.10);
  --shadow-lg:0 20px 60px rgba(15,31,56,.16);
  --container:1180px;
  --container-narrow:820px;
  --header-h:64px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background-color:var(--cream);
  background-image:
    linear-gradient(to left, rgba(15,31,56,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,31,56,.05) 1px, transparent 1px);
  background-size:44px 44px, 44px 44px;
  background-repeat:repeat, repeat;
  color:var(--ink);
  font-family:'Assistant',sans-serif;
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 24px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* Typography ------------------------------------------------------------
   Suez One ships one weight only — hierarchy comes from size and spacing,
   not synthesized bold. */
h1,h2,h3,.font-serif{
  font-family:'Suez One',serif;
  font-weight:400;
  color:var(--navy-deep);
  line-height:1.14;
}
h1{font-size:clamp(36px,5.4vw,62px);letter-spacing:-.005em;}
h2{font-size:clamp(29px,3.6vw,42px);letter-spacing:-.003em;}
h3{font-size:clamp(19px,2.2vw,23px);}
p{color:var(--ink-soft);}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:640px;line-height:1.7;}

/* Scroll-scrubbed word reveal (ref: reading-text-reveal) — dim until the
   scroll position "reads" past each word, then lights up to full color. */
.reveal-word{color:var(--ink-faint);opacity:.45;transition:color .3s ease-out,opacity .3s ease-out;}
.reveal-word.is-revealed{color:var(--ink-soft);opacity:1;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Assistant',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;color:var(--gold-dim);text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);display:inline-block;}

.section-head{max-width:680px;margin-bottom:44px;}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center .eyebrow::before{display:none;}

/* Buttons ----------------------------------------------------------------*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;font-weight:700;font-size:15.5px;
  cursor:pointer;border:1px solid transparent;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
  touch-action:manipulation;white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-gold{
  background:linear-gradient(155deg,var(--gold-light),var(--gold));
  color:var(--navy-deep);box-shadow:0 8px 22px rgba(200,147,63,.35);
  position:relative;overflow:hidden;
}
.btn-gold::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-120%);
}
.btn-gold:hover::before{transform:translateX(120%);transition:transform .85s var(--ease);}
.btn-gold::before{transition:transform 0s;}
.btn-gold:hover{box-shadow:0 12px 28px rgba(200,147,63,.48);transform:translateY(-1px);}
.btn-outline{
  background:transparent;border-color:rgba(15,31,56,.22);color:var(--navy-deep);
}
.btn-outline:hover{border-color:var(--navy-deep);background:rgba(15,31,56,.04);}
.btn-outline.on-dark{border-color:rgba(255,255,255,.35);color:#fff;}
.btn-outline.on-dark:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-ghost{background:transparent;color:var(--navy);font-weight:700;padding:8px 4px;}
.btn-ghost:hover{color:var(--gold-dim);}
.btn-sm{padding:10px 20px;font-size:14px;}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:8px;
}

/* Header ------------------------------------------------------------------*/
#site-header{
  position:sticky;top:16px;
  /* Above .curved-menu's z-index:900 (see that rule for why the drawer
     is no longer even a DOM descendant of this element) so the floating
     header pill — trigger/X icon included — stays visibly on top of the
     open drawer, the same relationship it had when the drawer was still
     nested inside the header and just needed a locally-higher z-index.
     Still below .skip-link's z-index:1000, which must win focus-visible
     precedence over everything. */
  z-index:950;
  margin:16px 24px 0;
  /* Opacity dropped from .86 — confirmed by direct testing that
     backdrop-filter over certain layered/animated content (position:sticky
     sections with their own transform or filter effects) silently fails in
     Chromium and falls back to flat fill, no blur at all. At .86 that
     fallback reads as solid, since so little of what's behind can show
     through regardless of blur. Lower opacity doesn't make the blur itself
     more reliable, but it means the failure mode is "more transparent,
     less blurred" instead of "solid" — much closer to what's wanted even
     when the blur doesn't render. */
  background:rgba(247,244,236,.55);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-md);
  transition:transform .3s var(--ease);
}
#site-header.header-hidden{transform:translateY(-140px);}
@media(max-width:640px){
  #site-header{margin:12px 12px 0;border-radius:999px;}
}
.header-inner{
  max-width:var(--container);margin:0 auto;padding:0 24px;
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand-lockup{display:flex;align-items:center;gap:12px;flex:none;}
.brand-lockup img{height:42px;width:auto;}
.brand-lockup .header-badge{
  width:42px;height:42px;flex:none;box-sizing:border-box;
  display:block;overflow:hidden;
  background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(15,31,56,.18);
}
.brand-lockup .header-icon{
  width:100%;height:100%;box-sizing:border-box;padding:1px;
  object-fit:contain;object-position:center;
  transform:translate(0.5px,-1px);
}
.brand-lockup .brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-lockup .brand-name{font-family:'Suez One',serif;font-weight:400;font-size:19px;color:var(--navy-deep);}
.brand-lockup .brand-tag{font-size:11px;color:var(--gold-dim);font-weight:600;letter-spacing:.02em;}
/* Full stacked logo file (icon+wordmark+tagline baked in) — hidden by
   default; only the homepage hero-overlay state shows it in place of the
   icon+text lockup above (see index.dc.html page style). */
.brand-lockup .brand-full-logo{display:none;height:150px;width:auto;}

.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav a{
  padding:10px 16px;border-radius:999px;font-weight:600;font-size:15px;color:var(--ink);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.main-nav a:hover{background:rgba(15,31,56,.06);color:var(--navy-deep);}
.main-nav a[aria-current="page"]{color:var(--navy-deep);background:rgba(200,147,63,.15);}

.header-actions{display:flex;align-items:center;gap:14px;flex:none;position:relative;}

/* Nav trigger — bare icon, no pill/background, expands into a dropdown
   list on tap. */
.nav-pill{display:none;position:relative;}
.nav-pill-trigger{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border:none;border-radius:12px;cursor:pointer;background:transparent;
}
/* Morphing hamburger -> X icon (ref: menu-toggle-icon). A single path's
   dash pattern reveals/hides its curled ends while the whole icon rotates
   -45deg, so the two top/bottom bars sweep into an X against the fixed
   middle bar. */
.menu-toggle-icon{
  width:34px;height:34px;flex:none;color:var(--navy-deep);
  transition:transform .5s ease-in-out;
}
.nav-pill.open .menu-toggle-icon{transform:rotate(-45deg);}
/* The open panel is solid white behind the button — beats the home
   page's white-icon-on-hero-photo override (#site-header ties its id
   specificity, extra class wins the rest, !important as a belt-and-
   braces guard against that assumption) so the icon stays visible
   against the panel instead of white-on-white. */
#site-header .nav-pill.open .menu-toggle-icon{color:var(--navy-deep)!important;}
.menu-toggle-icon .mt-morph{
  stroke-dasharray:12 63;
  transition:stroke-dasharray .5s ease-in-out,stroke-dashoffset .5s ease-in-out;
}
.nav-pill.open .menu-toggle-icon .mt-morph{
  stroke-dasharray:20 300;stroke-dashoffset:-32.42px;
}

/* Full-screen slide-in drawer — ref: 21st.dev "curved-menu" (React/Framer
   Motion), ported to plain CSS/JS since this codebase has no React/build
   step. The hamburger button/icon above is untouched; only what appears
   on open changed, from a small dropdown to this panel.
   Reference slides a right-anchored panel in from the right, with a
   curved "belly" edge on its left (leading) side; mirrored here because
   the hamburger sits at the LEFT of this RTL header, so the panel enters
   from the left with the curve on its right (trailing) edge instead.
   This element is appended straight to <body> by partials.js, NOT nested
   inside #site-header — #site-header has its own backdrop-filter (the
   frosted-glass pill), and a backdrop-filter on an ancestor creates a new
   containing block for position:fixed descendants same as transform/
   filter do. Nested inside the header, "inset:0 auto 0 0" resolved
   against the small header pill's own box instead of the real viewport,
   so the "off-screen" translateX(-100%) was only off-screen relative to
   THAT box — a ~13px sliver of the panel stayed visibly stuck past the
   header's own edge even while "closed". The .open state is toggled
   directly on this element by partials.js (not via a .nav-pill.open
   ancestor selector) since it no longer has that ancestor.
   No border-radius/overflow here — the reference panel is a plain
   rectangle; the curve (below) is what gives the edge its shape, not a
   static rounding. */
.curved-menu{
  position:fixed;inset:0 auto 0 0;z-index:900;
  /* Full width, no cap — per explicit request, nothing of the page
     should remain visible beside the open panel ("no wall on the right
     side"). During the slide-in, the panel's own right edge is still
     mid-transit toward the real screen edge (translateX hasn't reached 0
     yet), so the curve strip (below), riding just past that moving edge,
     sweeps across the still-shrinking gap — which is what actually
     produces the "curve reaches the edge of the page, THEN the menu is
     open across the whole page" sequence, not any width animation. */
  /* 100% not 100vw — vw includes the scrollbar's reserved space, while %
     (for a fixed-position element, resolved against the viewport) does
     not, so 100vw left a scrollbar-width sliver of page visible past the
     panel's right edge — exactly the "wall" being eliminated here. */
  width:100%;height:100vh;height:100dvh;
  background:var(--paper);
  /* -100% alone lands the panel's right edge exactly at the viewport's
     left edge — the curve strip (below) is a child sitting 249px further
     out (right:-249px, 250px wide), which would stay fully visible at
     rest. The extra 260px pushes that strip off-screen too. */
  transform:translateX(calc(-100% - 260px));
  transition:transform 1.1s cubic-bezier(.76,0,.24,1);
  display:block;
}
/* Bottom-fade grid background (ref: a pasted "gradient-blur-bg" React/
   Tailwind component, the "grid-blur-bottom" variant specifically —
   confirmed against https://21st.dev/@meghtrix/components/gradient-blur-bg/
   grid-blur-bottom and the user's own pasted source) — ported to plain
   CSS since this codebase has no React/Tailwind/build step, same as
   every other reference component in this file.
   FIRST VERSION put the grid lines directly on .curved-menu's own
   background and added a radial-gradient GLOW layer (gold, always
   visible) — wrong on two counts: the reference has no color glow at
   all, and its grid isn't uniformly visible — it's a plain grid MASKED
   by a radial-gradient anchored at the bottom-center, so it's invisible
   near the top and fades in as you move down, fully visible only near
   the bottom. A mask-image on .curved-menu itself would fade its own
   solid background-color too (revealing whatever's behind the panel) —
   the reference avoids that by putting the grid on a separate absolutely
   positioned layer over a solid-color parent, so only the grid pattern
   fades, never the backdrop. Reproduced the same way here with a ::before
   layered over .curved-menu's own solid background instead of a second
   HTML element. Colors: the reference's own light gray swapped for the
   site's --line token (same hairline color used everywhere else on the
   site) rather than an invented gray. */
.curved-menu::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:40px 40px;
  /* Softened per explicit feedback — the original 60%→100% two-stop fade
     (#000 straight to transparent) read as one hard edge rather than a
     gradual dissolve. Widened the ellipse itself (more of the panel is
     inside it at all) and added a mid-opacity stop so the alpha eases
     down over a much longer stretch instead of dropping in one step. */
  mask-image:radial-gradient(ellipse 100% 85% at 50% 100%, #000 25%, rgba(0,0,0,.45) 55%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 85% at 50% 100%, #000 25%, rgba(0,0,0,.45) 55%, transparent 100%);
}
/* box-shadow lives ONLY in the .open state, not the base rule above.
   A box-shadow paints around an element's OWN box, unclipped by that
   same element's overflow — so an unconditional shadow here would bleed
   past the box even while "closed", for the panel's full 100vh height. */
.curved-menu.open{transform:translateX(0);box-shadow:0 20px 60px rgba(15,31,56,.28);}
/* The curved "belly" edge. A single quadratic-curve SVG path, computed
   in REAL pixel coordinates by partials.js (using the panel's actual
   height) and animated via the `d` CSS property — deliberately NO
   viewBox/preserveAspectRatio on the svg. An earlier attempt scaled a
   normalized path onto the real box with preserveAspectRatio="none",
   which non-uniformly stretched the curve and rendered as a broken
   repeating wave instead of one smooth edge; building it in real pixels
   (matching the reference's own technique) sidesteps that scaling
   entirely. Sits 249px past the panel's own trailing edge (a bigger,
   more dramatic reach than the reference's own 99px, per explicit
   request), riding along with the same slide transform since it's a
   child of .curved-menu; the path's own "behind the panel" segment (see
   partials.js) covers the 1px overlap seam between the two. Same 1.1s
   duration as the panel's own slide, so both finish at the same moment —
   the curve is what's actually moving/visible for most of that time
   (see .curved-menu's own comment), with the panel itself only catching
   up to the true screen edge right at the end. */
.curved-menu-curve{position:absolute;top:0;bottom:0;right:-249px;width:250px;pointer-events:none;}
.curved-menu-curve-svg{width:100%;height:100%;display:block;}
.curved-menu-curve-path{fill:var(--paper);transition:d 1.1s cubic-bezier(.76,0,.24,1);}
.curved-menu-panel{
  position:relative;height:100%;max-width:640px;box-sizing:border-box;
  display:flex;flex-direction:column;padding:90px 26px 28px;overflow-y:auto;
}
.curved-menu-head{
  font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--ink-soft);
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px;
}
.curved-menu-links{display:flex;flex-direction:column;}
.curved-menu-link{
  display:flex;align-items:baseline;gap:12px;padding:4px 0;
  font-family:'Suez One',serif;font-size:clamp(21px,5.6vw,26px);color:var(--navy-deep);
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.curved-menu-link:hover,.curved-menu-link:focus-visible{color:var(--gold-dim);transform:translateX(-6px);}
/* Matches Services.dc.html's own .svc-num-text (color/size/opacity) per
   explicit request — font-family kept as this component's own Suez One
   serif (already used by .curved-menu-link right beside it), just the
   color/size/opacity brought in line. */
.curved-menu-index{font-family:'Suez One',serif;font-weight:400;font-size:27px;color:var(--gold-light);opacity:.6;flex:none;}
.curved-menu-link[aria-current="page"]{color:var(--gold-dim);}
.curved-menu-link.curved-menu-cta{color:var(--gold-dim);font-weight:700;margin-top:10px;border-bottom:none;}
/* margin-top:auto pushes this to the bottom of .curved-menu-panel's flex
   column, however short or long the link list ends up being. */
.curved-menu-footer{margin-top:auto;padding-top:28px;margin-bottom:48px;display:flex;justify-content:center;}
.curved-menu-logo{height:180px;width:auto;}

/* Decorative seal motif --------------------------------------------------*/
.seal-accent{
  position:absolute;pointer-events:none;opacity:.5;
  background:url('../img/stamp.svg') no-repeat center/contain;
}
.dotline{display:flex;align-items:center;gap:14px;color:var(--gold-dim);}
.dotline::before,.dotline::after{content:"";flex:1;height:1px;background:var(--line);}
.dotline .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;}

/* Hero ---------------------------------------------------------------------*/
.hero{position:relative;overflow:hidden;padding:56px 0 88px;}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero-media{position:relative;}
.hero-media .frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);aspect-ratio:4/5;
  background:var(--navy-deep);
}
.hero-media .frame img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.hero-media .frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(15,31,56,0) 45%,rgba(15,31,56,.4) 100%);
}
.hero-media .seal-accent{width:120px;height:120px;top:-26px;right:-26px;left:auto;bottom:auto;opacity:.85;}

/* Organic wave divider — the signature transition device echoed at the
   foot of every full-bleed portrait on the site. */
.wave-divider{position:absolute;left:-2%;right:-2%;bottom:-1px;width:104%;height:22%;pointer-events:none;}
.wave-divider svg{display:block;width:100%;height:100%;}
.wave-divider .fill{fill:var(--cream);}
.wave-divider .line{fill:none;stroke:var(--gold);stroke-width:2;opacity:.55;}
.wave-divider .line.line-2{stroke:var(--gold-light);opacity:.8;}
.section.on-paper .wave-divider .fill{fill:var(--paper);}
.hero-eyebrow{margin-bottom:18px;}
.hero h1{margin-bottom:20px;}
.hero .lede{margin-bottom:30px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;}

@media(max-width:980px){
  .hero .container{grid-template-columns:1fr;}
  .hero-media{order:-1;max-width:380px;margin:0 auto;}
}

/* Sections ------------------------------------------------------------------*/
.section{padding:88px 0;}
.section.tight{padding:64px 0;}
.section.on-cream{background:transparent;}
.section.on-paper{background:var(--paper);}
.section.on-navy{background:linear-gradient(155deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;position:relative;overflow:hidden;}
.section.on-navy h2,.section.on-navy h1,.section.on-navy h3{color:#fff;}
.section.on-navy p{color:#c6cede;}
.section.on-navy .eyebrow{color:var(--gold-light);}
.section-border-top{border-top:1px solid var(--line);}

/* Grids & cards ---------------------------------------------------------- */
.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow-sm);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);
}

/* Ring badge — reuses the brand seal's own ring geometry as the site's
   one recurring icon device, instead of generic rounded-square icon tiles. */
.icon-ring{
  --ring-size:76px;
  width:var(--ring-size);height:var(--ring-size);border-radius:50%;
  border:1.5px solid var(--gold-light);background:var(--cream);
  display:flex;align-items:center;justify-content:center;flex:none;position:relative;
}
.icon-ring::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(200,147,63,.28);
}
.icon-ring svg{width:34%;height:34%;stroke:var(--gold-dim);}
.icon-ring.sm{--ring-size:56px;}
.icon-ring.sm::before{inset:-4px;}
.icon-ring.on-navy{background:rgba(255,255,255,.06);border-color:rgba(233,201,138,.5);}
.icon-ring.on-navy svg{stroke:var(--gold-light);}

.principle-card{position:relative;padding-top:6px;overflow:hidden;}
.principle-card .num{
  font-family:'Suez One',serif;font-size:64px;line-height:1;color:var(--gold-light);
  opacity:.55;position:absolute;top:2px;left:24px;pointer-events:none;
}
.principle-card h3{margin-bottom:10px;position:relative;margin-top:34px;}
.principle-card p{position:relative;}

.adv-card{display:flex;flex-direction:column;gap:16px;}

.service-card{
  display:flex;flex-direction:column;gap:12px;padding:26px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.service-card:hover{border-color:var(--gold-light);box-shadow:var(--shadow-md);transform:translateY(-3px);}
.service-card .tag{font-size:12.5px;color:var(--gold-dim);font-weight:700;letter-spacing:.04em;}
.service-card h3{font-size:19px;}
.service-card .go{margin-top:auto;display:flex;align-items:center;gap:6px;font-weight:700;color:var(--navy);font-size:14.5px;}
.service-card .go svg{width:16px;height:16px;transition:transform .18s var(--ease);}
.service-card:hover .go svg{transform:translateX(-4px);}

.testimonial-card{padding:32px;position:relative;}
/* --gold-dim, not --gold — this renders as literal ★ characters (real
   text content, not a decorative icon), so it needs the AA-passing
   variable like every other gold text on the site. */
.testimonial-card .stars{color:var(--gold-dim);letter-spacing:2px;margin-bottom:14px;font-size:14px;}
.testimonial-card blockquote{margin:0 0 20px;font-family:'Suez One',serif;font-size:19px;color:var(--navy-deep);line-height:1.55;}
.testimonial-card .who{display:flex;align-items:center;gap:12px;}
.testimonial-card .avatar{
  width:42px;height:42px;border-radius:50%;background:var(--cream);
  display:flex;align-items:center;justify-content:center;font-family:'Suez One',serif;
  font-weight:400;color:var(--navy);flex:none;
}
.testimonial-card .who .meta{font-size:13.5px;color:var(--ink-soft);}
.testimonial-card .who .name{font-weight:700;color:var(--navy-deep);font-size:14.5px;}

/* Testimonials marquee — reuses the .marquee wrapper (overflow clip +
   edge mask) defined below, but NOT its @keyframes marquee-scroll: a
   plain "from 0 to -50%" keyframe only lands exactly on the seam between
   the real and duplicated card sets when the total gap count is even —
   here it's off by half a gap, so the loop visibly stutters/gaps once
   per cycle. testimonials-marquee.js drives the same translateX
   continuously instead, wrapping at the exact measured half-width, which
   is immune to that. animation is disabled here so the two mechanisms
   don't fight over the transform. */
/* Cuts the gap to the next section (compare-reveal) — .section's own
   88px bottom padding plus its 88px top padding otherwise leaves ~200px
   of empty cream between the marquee cards and the next heading, with no
   visual break (same on-cream background) to justify that much space. */
.testimonials-marquee{padding-bottom:32px;}
.testimonials-marquee .marquee{padding:10px 0;}
.testimonials-marquee .marquee-track{gap:22px;animation:none;will-change:transform;}
.testimonial-card.marquee-card{width:340px;flex:none;padding:20px;}
.testimonial-card.marquee-card .stars{margin-bottom:8px;font-size:12px;}
.testimonial-card.marquee-card blockquote{
  font-family:'Assistant',sans-serif;font-size:14.5px;line-height:1.4;margin:0 0 12px;
}
.testimonial-card.marquee-card .who{gap:8px;}
.testimonial-card.marquee-card .avatar{width:34px;height:34px;font-size:12.5px;}
.testimonial-card.marquee-card .who .name{font-size:13.5px;}
.testimonial-card.marquee-card .who .meta{font-size:12px;}
@media(prefers-reduced-motion:reduce){
  .testimonials-marquee .marquee-card[aria-hidden="true"]{display:none;}
}
@media(max-width:640px){
  .testimonial-card.marquee-card{width:min(300px,80vw);padding:18px;}
}

/* Compare reveal — "רכישת דירה" vs "יש לי כבר דירה" divider slider,
   dragged by compare-reveal.js. clip-path insets are physical (left/right
   in the box model) regardless of `dir`, so the percentage math needs no
   RTL adjustment — only the panel copy is placed by hand: right panel is
   the full base layer, left panel sits on top clipped to [0, pct]%. */
.compare-section{padding-top:32px;}
.compare-reveal{
  position:relative;width:100%;aspect-ratio:16/9;max-height:460px;
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  cursor:ew-resize;touch-action:pan-y;user-select:none;
}
/* isolation:isolate gives each pane its own stacking context, so
   .compare-content's z-index:1 (needed to sit above this pane's own
   ::before glow) only competes within that pane. Without it, both
   panes' content z-index:1 was promoted straight to the nearest real
   stacking context and compared against each other directly — which put
   the right pane's content above the LEFT pane's clipped background
   (z-index:auto) regardless of DOM order, so dragging the divider right
   never covered the right-side button, it just kept painting on top. */
.compare-pane{position:absolute;inset:0;isolation:isolate;}
/* Same base gradient as .principles-scroll-sticky ("how I work"), plus
   its .principles-aurora layers (depth/pulse/blobs/stars) rendered as
   this pane's first child in the HTML — a plain radial-glow ::before
   isn't enough here since compare-pane already needs ::before free for
   isolation stacking; the aurora markup is real DOM instead. */
.compare-pane-right{background:linear-gradient(155deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;}
.compare-pane-left{background:linear-gradient(155deg,var(--paper) 0%,var(--cream) 100%);color:var(--navy-deep);}
.compare-pane-left::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 15% -10%, rgba(200,147,63,.22), transparent 55%);
}
.compare-content{
  /* Both panels' content sits at this exact same horizontal spot — fixed,
     never repositioned by JS — mirroring how the reference component's
     before/after images are identically sized and placed, with only the
     clip-path (not the images themselves) moving. With the divider
     starting at 50%, each side's content is therefore exactly
     half-covered at rest by construction: no extra width/offset math
     needed for that "here's more, drag to reveal" cue. */
  /* top:0/bottom:0 (not a translate(-50%,-50%) centering hack) so the
     column fills the pane's full height — required for the icon's and
     button's auto margins below to have real free space to split evenly.
     A fixed-offset centering transform can only match the icon's gap-
     above to the button's gap-below at ONE specific pane height (found
     by trial and error); the pane's actual height changes continuously
     with viewport width (aspect-ratio:16/9 up to max-height:460px), so
     that kind of magic-number fix drifts out of balance at every other
     width. Auto margins solve it exactly at every height instead. */
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  /* width, not max-width: .compare-content and .compare-desc are both flex
     containers themselves (for internal centering), and a flex container
     with only max-width sizes by its own shrink-to-fit/max-content
     algorithm rather than filling up to that cap — it was rendering
     ~160-185px wide regardless of a much larger max-width. An explicit
     width forces it to the intended size. */
  width:420px;text-align:center;
}
.compare-icon{
  width:84px;height:84px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  /* margin-top:auto (paired with .btn-collab's own margin-bottom:auto)
     splits the column's leftover vertical space evenly between the two
     ends — the robust way to guarantee the gap above the icon always
     matches the gap below the button, at any pane height, rather than
     matching two fixed px values by hand for one specific width and
     having them drift apart at every other one (which is what
     happened: a fixed match here was only ever exactly-equal at the
     one width it was measured at). */
  margin-top:auto;
}
.compare-icon svg{width:38px;height:38px;}
.compare-pane-right .compare-icon{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);}
.compare-pane-right .compare-icon svg{stroke:var(--gold-light);}
.compare-pane-left .compare-icon{background:var(--cream);border:1px solid var(--gold-light);}
.compare-pane-left .compare-icon svg{stroke:var(--gold-dim);}
/* Same weight/size as .principles-card .principles-subtitle ("how I
   work" cards) — color swaps per side (gold-dim on the light/cream
   panel, matching that rule exactly; gold-light on the dark/navy panel,
   same swap the site already makes for .eyebrow on .section.on-navy,
   since gold-dim's contrast on navy is too low to read). */
.compare-eyebrow{font-weight:700;font-size:15.5px;margin:0;}
.compare-pane-left .compare-eyebrow{color:var(--gold-dim);}
.compare-pane-right .compare-eyebrow{color:var(--gold-light);}
/* Matches .principles-card h3 exactly (was clamp(20px,2.6vw,26px) — 2px
   short of the card family's real clamp at every width, not just the
   min/max ends, which is what made it read as visibly smaller). */
.compare-content h3{font-size:clamp(22px,3.2vw,28px);white-space:nowrap;}
.compare-pane-right .compare-content h3{color:#fff;}
/* Same fixed-height reservation as h3 above, and for the same reason:
   the two panels' copy isn't the same length, so left to wrap naturally
   they'd end at different line counts and push each side's button to a
   different Y — min-height (sized for the longer of the two, at up to 4
   lines) plus centering keeps both buttons level regardless. */
/* Same size + justify as .principles-card p / .stacking-card-inner p
   (the cards above this section) per explicit request — was 15.5px
   centered, now matches those cards exactly. */
.compare-desc{font-size:clamp(17px,2vw,20px);text-align:justify;line-height:1.7;width:420px;min-height:7em;display:flex;align-items:center;justify-content:center;}
.compare-pane-right .compare-desc{color:#c6cede;}
.compare-pane-left .compare-desc{color:var(--ink-soft);}
/* Extra breathing room before the button, on top of .compare-content's
   own flex gap — applied uniformly so it doesn't reopen the equal-height
   alignment between the two panels that .compare-desc's min-height above
   already guarantees. margin-bottom:auto (paired with .compare-icon's
   margin-top:auto above) is what actually centers the group and equalizes
   the icon's/button's own outer gaps — see .compare-content's comment. */
.compare-content .btn-collab{margin-top:10px;margin-bottom:auto;}
.compare-divider{
  position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;z-index:10;
  background:var(--gold);pointer-events:none;
}
.compare-handle{
  pointer-events:auto;position:absolute;top:50%;left:50%;
  width:48px;height:48px;border-radius:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;padding:0;
  background:var(--paper);border:2px solid var(--gold);color:var(--gold-dim);
  cursor:ew-resize;box-shadow:var(--shadow-md);
}
.compare-handle:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@media(max-width:640px){
  /* Taller than 3/4 — the right panel's copy is long enough (~9 wrapped
     lines at this width) that 3/4 no longer leaves room for
     icon+eyebrow+title+paragraph+button without the stack outgrowing the
     box. Taller again (was 3/4.4) specifically to give .compare-icon's
     bigger margin-top below real room: at 3/4.4 this pane's content
     already filled the box almost exactly, so pushing the icon down
     either squished .btn-collab (flex-shrink eating its height instead
     of freeing space) or made the drag handle's own fixed centered
     position (.compare-handle, top:50%) overlap the heading. */
  /* Taller pane so the icon-through-button group (still auto-margin
     centered, see .compare-icon/.btn-collab above) sits with real
     breathing room on both ends instead of nearly filling the box (was
     3/4.4, ~0px gap either side) — 4.9 is a deliberately modest bump
     (was tested up to 5.3, dialed back down per explicit "too tall"
     feedback) that still keeps a comfortable ~22px gap on both ends at
     this breakpoint's narrow end (~328px). Verified at both that end
     and its wide end (capped at max-height:620px, ~470px+): .btn-collab
     stays a full 48px tall and un-clipped, and the heading's bottom
     edge stays clear of .compare-handle's fixed centered position at
     both. */
  .compare-reveal{aspect-ratio:3/4.9;max-height:620px;}
  .compare-content{width:280px;gap:10px;}
  .compare-eyebrow{font-size:14px;}
  /* min-height sized for the longer side's real content so both buttons
     still land on the same Y — see the desktop rule's own comment; this
     is a per-breakpoint override because how many lines either side's
     text wraps to depends on the available width, which changes at this
     breakpoint. */
  .compare-desc{width:280px;min-height:9em;}
  .compare-icon{width:68px;height:68px;}
  .compare-icon svg{width:32px;height:32px;}
}

/* Banks & institutions — 3D tilted wall of vertically-scrolling logo
   columns (ref: a React "3d-testimonials" marquee component). Ported as
   plain CSS: each column holds the same 8 logos 3 times in a row
   (.banks-col-track × 3); every track in a column shares one
   @keyframes animation moving it by exactly "-100% of its own height
   minus one gap" — since all 3 tracks are identical and move in
   perfect lockstep, track 2 always slides into exactly the screen
   position track 1 just vacated, which is what makes the loop seamless
   for any content height (no measuring, no seam-adjustment needed,
   unlike a "translateX -50%" doubled-track loop). */
/* Full-bleed on purpose — no .container wrapper in the HTML, no
   border-radius, no border/shadow/background of its own (those would
   read as a "card" edge, which fights the edge-to-edge request) — the
   section's on-cream background (transparent, showing body's cream +
   grid pattern through) shows behind the cards directly, so only the
   moving cards are visible, no panel behind them. */
.banks-3d{
  position:relative;width:100%;
  overflow:hidden;height:420px;
  display:flex;align-items:center;justify-content:center;
  /* The reference's perspective:300px was tuned for its own 800px-wide
     box — ported as-is onto this section's full-bleed (1000px+) width,
     the SAME rotateX/Y/Z spread each column across a much wider physical
     range, and perspective's falloff is steep at short distances, so
     columns near the box's outer thirds shrank far more aggressively
     than the reference ever shows (one column 2-3x the width of
     another). perspective is a physical distance in the same px space
     as the element, not a proportion of the box, so it doesn't
     auto-scale with box width the way a percentage would — it has to be
     opened up by hand to match.
     1500px is the balance point between two competing artifacts, both
     driven by the same perspective value once the grid→column→track→card
     chain shares one 3D space (see transform-style:preserve-3d below):
     too far (e.g. 9000px) and the per-card trapezoid warp all but
     disappears; too close (e.g. 500px) and the corner-to-corner size
     gradient across the whole wall becomes obviously lopsided (one
     corner much bigger than the opposite one). 1500px keeps a clearly
     visible per-card trapezoid while keeping that wall-wide gradient
     subtle. */
  perspective:1500px;
}
/* transform-style:preserve-3d on every level between .banks-3d (the
   perspective host) and .bank-card (the deepest rotated element) keeps
   the whole grid → column → track → card chain in ONE shared 3D space
   sharing ONE vanishing point. That's what makes stacked cards within a
   column line up: each card gets the SAME rotateY/rotateX applied at
   its own stacking position within a continuous scene, so touching
   edges between neighboring cards stay parallel/consistent instead of
   each card being re-projected around its own independent center (which
   is what an isolated per-card `perspective` produces — tried first,
   reverted: it gave each card a correct trapezoid in isolation, but
   broke alignment between cards, since neighbors were no longer part of
   the same coordinate system — the column-to-column gap came out
   visibly crooked). */
.banks-3d-grid{
  display:flex;flex-direction:row;align-items:center;gap:16px;
  transform:translateX(-100px) translateZ(-100px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg);
  transform-style:preserve-3d;
  /* Masks the cards themselves to fade at the top edge, replacing
     .banks-fade-top's old technique of painting a solid var(--cream)
     gradient on top of them (that div is now display:none — see its
     own rule). This section is .on-cream (transparent), showing body's
     own cream + 44px grid-line texture through — painting a FLAT cream
     gradient over that top region blocked the grid texture in its own
     footprint, reading as a dull, texture-less patch against the
     textured page around it (same class of bug as the earlier
     .adv-blob-cut "beige square" fix elsewhere on this page). Masking
     the cards to transparent instead reveals whatever's actually behind
     them — the section's own textured background, unchanged — rather
     than painting over it. Angle/stops match .banks-fade-top's own
     168deg tilt (needed for the same reason: the grid's rotateX/Y/Z
     puts its 4 columns at different screen heights, so a straight mask
     would fade one side more than the other and read as a diagonal
     cut). #fff, not #000: mask-image defaults to mask-type:luminance,
     which weighs BOTH alpha and luminance — #000 has full alpha (fully
     opaque paint) but zero luminance (black), so a stop of solid #000
     computes to LUMINANCE 0, i.e. still fully masked-out, not "fully
     visible" as the fade was meant to end on. That first attempt never
     actually reached full opacity anywhere, which is what read as
     "fewer cards visible" and the page's own grid-line texture showing
     faintly through cards that should have been fully solid. #fff has
     both full alpha AND full luminance, so it's unambiguously "fully
     visible" under either mask-type.
     Stops (15%/40%, was 30%/62%) pulled back in per explicit "fewer
     cards than before today" feedback — the original, pre-fade design
     had no top treatment at all covering this much of the grid; this
     is close to the smallest fade that still keeps every column's own
     clipped-card edge fully covered (checked across several marquee
     frames on both the left and right edge, same as the wider version
     before it), so noticeably more of the grid reads as fully opaque
     again without reopening the diagonal-cut bug this fade exists to
     fix. */
  mask-image:linear-gradient(168deg, transparent 0%, transparent 15%, #fff 40%);
  -webkit-mask-image:linear-gradient(168deg, transparent 0%, transparent 15%, #fff 40%);
}
.banks-col{display:flex;flex-direction:column;gap:16px;height:460px;overflow:hidden;transform-style:preserve-3d;}
.banks-col-track{
  display:flex;flex-direction:column;gap:16px;flex-shrink:0;
  animation:banksMarqueeVertical 32s linear infinite;
  transform-style:preserve-3d;
}
.banks-col-reverse .banks-col-track{animation-direction:reverse;}
.banks-3d:hover .banks-col-track{animation-play-state:paused;}
@keyframes banksMarqueeVertical{
  from{transform:translateY(0);}
  to{transform:translateY(calc(-100% - 16px));}
}
/* Stacked (logo above name) rather than side-by-side — bigger logo reads
   as the actual content, name is a small caption underneath it rather
   than competing with it at equal visual weight. Card height grows a
   lot from this (∼2x); .banks-3d/.banks-col heights are deliberately
   NOT changed to compensate, so fewer cards show at once — that's fine,
   per explicit request. */
/* The per-card rotateY/rotateX here is what gives each card its own
   trapezoidal "viewed from the side" warp, matching the reference site
   — now a genuine 3D reprojection (not a flattened 2D shear) because of
   the preserve-3d chain above, sharing .banks-3d's single perspective. */
.bank-card{
  width:310px;flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 26px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);box-shadow:var(--shadow-sm);
  transform:rotateY(-10deg) rotateX(6deg);
}
.bank-logo{width:150px;height:150px;object-fit:contain;flex:none;}
.bank-name{font-size:12.5px;font-weight:400;color:var(--ink-soft);line-height:1.3;text-align:center;}
.banks-fade{position:absolute;pointer-events:none;}
/* Replaced by .banks-3d-grid's own mask-image (see its rule) — this
   div's old job was fading the top edge by painting a solid
   var(--cream) gradient over the cards, which also painted over (and
   flattened) the section's own grid-line texture in that same region,
   reading as a dull, texture-less patch. Kept in the DOM (harmless,
   .banks-fade only sets position/pointer-events) rather than removed,
   in case a future change wants a painted rather than masked fade
   again. */
.banks-fade-top{display:none;}
.banks-fade-bottom{bottom:0;left:0;right:0;height:22%;background:linear-gradient(to top, var(--cream), transparent);}
.banks-fade-left{top:0;bottom:0;left:0;width:16%;background:linear-gradient(to right, var(--cream), transparent);}
.banks-fade-right{top:0;bottom:0;right:0;width:16%;background:linear-gradient(to left, var(--cream), transparent);}
@media(max-width:820px){
  /* Cards are ~150px here vs 310px on desktop — perspective is a physical
     px distance, not proportional to element size, so the desktop value
     would barely warp a card this small. Scaled down to match. */
  .banks-3d{height:340px;perspective:700px;}
  .banks-3d-grid{gap:10px;transform:translateX(-50px) translateZ(-100px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg);}
  .banks-col{height:380px;gap:10px;}
  .banks-col-track{gap:10px;}
  @keyframes banksMarqueeVertical{
    from{transform:translateY(0);}
    to{transform:translateY(calc(-100% - 10px));}
  }
  .bank-card{width:150px;padding:14px 16px;gap:8px;}
  .bank-logo{width:88px;height:88px;}
  .bank-name{font-size:11px;}
}
/* Closing CTA --------------------------------------------------------------*/
.cta-band{
  position:relative;border-radius:var(--radius-lg);
  background:linear-gradient(155deg,var(--navy) 0%,var(--navy-deep) 100%);
  padding:56px 44px;color:#fff;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 88% -10%, rgba(200,147,63,.28), transparent 55%);
}
.cta-band h2{color:#fff;position:relative;font-size:clamp(24px,3vw,34px);}
.cta-band p{color:#c6cede;position:relative;margin-top:8px;max-width:520px;}
.cta-band .cta-actions{position:relative;flex:none;}

/* Footer ---------------------------------------------------------------------*/
#site-footer{background:var(--navy-deep);color:#c6cede;padding:70px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand .brand-lockup .brand-name{color:#fff;}
.footer-brand .brand-lockup .brand-tag{color:var(--gold-light);}
.footer-brand p{color:#93a0b8;margin-top:16px;max-width:320px;font-size:14.5px;}
.footer-col h4{color:#fff;font-family:'Suez One',serif;font-weight:400;font-size:15.5px;margin-bottom:16px;}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col a{color:#93a0b8;font-size:14.5px;transition:color .16s var(--ease);}
.footer-col a:hover{color:var(--gold-light);}
.footer-col .contact-line{display:flex;align-items:center;gap:10px;color:#93a0b8;font-size:14.5px;}
.footer-col .contact-line svg{width:16px;height:16px;flex:none;stroke:var(--gold-light);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:13px;color:#6f7d97;flex-wrap:wrap;gap:10px;}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr;gap:32px;}}

/* Forms ----------------------------------------------------------------------*/
.field{margin-bottom:22px;}
.field label{display:block;font-weight:600;font-size:14.5px;color:var(--navy-deep);margin-bottom:8px;}
.field .req{color:var(--bad);margin-inline-start:2px;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:'Assistant',sans-serif;font-size:16px;color:var(--ink);background:var(--paper);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,147,63,.18);outline:none;
}
.field textarea{resize:vertical;min-height:120px;}
.field-error{color:var(--bad);font-size:13px;margin-top:6px;display:none;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--bad);}
.field.invalid .field-error{display:block;}
.field-hint{font-size:13px;color:var(--ink-faint);margin-top:6px;}

/* Breadcrumb ------------------------------------------------------------------*/
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft);margin-bottom:18px;}
.breadcrumb a{color:var(--ink-soft);font-weight:600;}
.breadcrumb a:hover{color:var(--navy-deep);}
.breadcrumb .sep{color:var(--ink-faint);}
.breadcrumb .current{color:var(--navy-deep);font-weight:700;}

/* Badges -----------------------------------------------------------------------*/
.badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;display:inline-block;}
.badge.gold{background:#fbf3e5;color:var(--gold-dim);border:1px solid var(--gold-light);}
.badge.navy{background:rgba(22,48,90,.08);color:var(--navy);border:1px solid rgba(22,48,90,.16);}

/* Utility ------------------------------------------------------------------------*/
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip-link{
  position:absolute;right:12px;top:-60px;background:var(--navy-deep);color:#fff;padding:12px 18px;
  border-radius:8px;z-index:1000;transition:top .16s var(--ease);
}
.skip-link:focus{top:12px;}

@media(min-width:981px){
  .nav-pill{display:none;}
}
@media(max-width:980px){
  .main-nav{display:none;}
  .header-actions .btn{display:none;}
  .nav-pill{display:block;}
}

/* Page hero (interior pages, shorter) ---------------------------------------------*/
.page-hero{padding:52px 0 40px;position:relative;overflow:hidden;}
.page-hero .seal-accent{width:220px;height:220px;top:-60px;left:-60px;}
.page-hero h1{max-width:760px;}
.page-hero .lede{margin-top:16px;}

/* iframe embeds -----------------------------------------------------------------*/
.embed-frame{
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);background:var(--paper);
}
.embed-frame iframe{display:block;width:100%;border:0;background:var(--cream);}

/* Scroll reveal --------------------------------------------------------------------*/
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
[data-reveal].is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* Ghost numerals & dotted texture — quiet editorial accents used sparingly ---------*/
.ghost-num{
  position:absolute;font-family:'Suez One',serif;font-size:clamp(90px,11vw,160px);
  color:var(--navy-deep);opacity:.05;line-height:1;pointer-events:none;user-select:none;
  top:-.15em;
}
.dot-field{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(var(--line) 1.2px, transparent 1.2px);
  background-size:18px 18px;
  mask-image:radial-gradient(circle at 100% 0%, black, transparent 70%);
}

/* ==========================================================================
   Signature effects — direct, visible adaptations of the reference
   components (rebuilt in plain CSS/JS for this vanilla-HTML site).
   ========================================================================== */

/* 1) Grid + radial glow backdrop (ref: gradient-blur-bg / herowith-logos) --- */
.bg-grid-glow{position:relative;}
.bg-grid-glow > *{position:relative;z-index:1;}
.bg-grid-glow::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to left, rgba(15,31,56,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,31,56,.06) 1px, transparent 1px),
    radial-gradient(circle 620px at 88% 0%, rgba(200,147,63,.22), transparent 70%);
  background-size:44px 44px, 44px 44px, 100% 100%;
  mask-image:linear-gradient(to bottom, black, transparent 92%);
}
.section.on-navy.bg-grid-glow::before{
  background-image:
    linear-gradient(to left, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px),
    radial-gradient(circle 560px at 12% 0%, rgba(200,147,63,.28), transparent 70%);
  background-size:44px 44px, 44px 44px, 100% 100%;
}
.cta-band.bg-grid-glow::before{mask-image:none;border-radius:inherit;}

/* 2) Rotating shine border button (ref: shiny-button) ------------------------ */
@property --gradient-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}
@property --gradient-angle-offset{syntax:'<angle>';initial-value:0deg;inherits:false;}
@property --gradient-percent{syntax:'<percentage>';initial-value:6%;inherits:false;}
@property --gradient-shine{syntax:'<color>';initial-value:#f7e4bc;inherits:false;}

.btn-shiny{
  --shiny-bg:var(--navy-deep);
  --shiny-fg:#ffffff;
  --shiny-highlight:var(--gold);
  --shiny-highlight-subtle:var(--gold-light);
  isolation:isolate;position:relative;overflow:hidden;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 32px;font-family:'Assistant',sans-serif;font-size:15.5px;font-weight:700;
  border-radius:999px;color:var(--shiny-fg);border:1px solid transparent;
  background:
    linear-gradient(var(--shiny-bg),var(--shiny-bg)) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent, var(--shiny-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 26px rgba(15,31,56,.35);
  animation:btn-shiny-spin 3.2s linear infinite;
  transition:--gradient-angle-offset .7s cubic-bezier(.25,1,.5,1),
    --gradient-percent .7s cubic-bezier(.25,1,.5,1),
    --gradient-shine .7s cubic-bezier(.25,1,.5,1),
    transform .18s var(--ease);
  touch-action:manipulation;white-space:nowrap;
}
.btn-shiny::before{
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(circle at 2px 2px, rgba(255,255,255,.5) 1px, transparent 0);
  background-size:9px 9px;background-repeat:space;
  mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 12% 88%, black);
  opacity:.3;
}
.btn-shiny:hover{--gradient-percent:22%;--gradient-angle-offset:95deg;--gradient-shine:#fff6e4;transform:translateY(-1px);}
.btn-shiny:active{transform:scale(.97);}
@keyframes btn-shiny-spin{to{--gradient-angle:360deg;}}
@media(prefers-reduced-motion:reduce){.btn-shiny{animation:none;}}

/* 3) Border-beam panel — rotating comet light on a card edge (ref: border-beam-panel) */
@property --beam-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}
.beam-panel{position:relative;isolation:isolate;}
.beam-panel::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--beam-angle),
    transparent 0deg, transparent 120deg,
    var(--gold-light) 156deg, #fff 164deg, var(--gold) 172deg, transparent 180deg,
    transparent 300deg,
    var(--gold-light) 336deg, #fff 344deg, var(--gold) 352deg, transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:beam-rotate 5s linear infinite;
}
@keyframes beam-rotate{to{--beam-angle:360deg;}}
@media(prefers-reduced-motion:reduce){.beam-panel::after{animation:none;}}

.beam-card{
  position:relative;isolation:isolate;
  background:linear-gradient(155deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-radius:20px;padding:30px 26px;color:#fff;
  box-shadow:0 14px 34px rgba(15,31,56,.28);
}
/* Cast-light glow — a blurred copy of the same rotating comets, synced to
   --beam-angle so the ambient light behind the card turns with the ring. */
.beam-card::before{
  content:"";position:absolute;inset:-6px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--beam-angle),
    transparent 0deg, transparent 120deg,
    var(--gold-light) 156deg, #fff 164deg, var(--gold) 172deg, transparent 180deg,
    transparent 300deg,
    var(--gold-light) 336deg, #fff 344deg, var(--gold) 352deg, transparent 360deg);
  filter:blur(20px);opacity:.55;
  animation:beam-rotate 5s linear infinite;
}
@media(prefers-reduced-motion:reduce){.beam-card::before{animation:none;}}
.beam-card .badge-num{
  display:inline-flex;align-items:center;padding:4px 13px;border-radius:999px;
  border:1px solid rgba(233,201,138,.4);color:var(--gold-light);
  font-size:11px;font-weight:700;letter-spacing:.08em;margin-bottom:18px;
}
.beam-card h3{color:#fff;margin-bottom:10px;}
.beam-card p{color:#c6cede;}

/* 4) Kinetic spotlight grid — cursor-reactive dot field (ref: kinetic-grid, dialed down) */
.kinetic-grid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle 260px at var(--spot-x,50%) var(--spot-y,20%), black, transparent 72%);
  mask-image:radial-gradient(circle 260px at var(--spot-x,50%) var(--spot-y,20%), black, transparent 72%);
  transition:mask-position .1s linear;
}

/* 5) Pinned process cards + connecting thread (ref: how-it-works) ------------ */
.process-rail{position:relative;padding:20px 0 8px;}
.process-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.process-track::before{
  content:"";position:absolute;top:76px;right:6%;left:6%;height:0;
  border-top:2px dashed rgba(200,147,63,.45);z-index:0;
}
.process-card{
  position:relative;z-index:1;background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:26px 22px;box-shadow:var(--shadow-md);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.process-card:hover{transform:translateY(-6px) rotate(0deg) !important;box-shadow:var(--shadow-lg);}
.process-track > .process-card:nth-child(1){transform:rotate(-2.2deg);}
.process-track > .process-card:nth-child(2){transform:translateY(26px) rotate(2deg);}
.process-track > .process-card:nth-child(3){transform:rotate(-2deg);}
.process-track > .process-card:nth-child(4){transform:translateY(26px) rotate(2.2deg);}
.process-card .pin{
  width:34px;height:34px;margin-bottom:16px;border-radius:50%;
  background:var(--cream);border:1px solid var(--gold-light);
  display:flex;align-items:center;justify-content:center;color:var(--gold-dim);
}
.process-card .pin svg{width:16px;height:16px;}
.process-card .num{font-family:'Suez One',serif;font-size:34px;color:var(--gold-light);line-height:1;display:block;margin-bottom:8px;}
@media(max-width:900px){
  .process-track{grid-template-columns:1fr;gap:18px;}
  .process-track::before{display:none;}
  .process-track > .process-card{transform:none !important;}
}

/* 6) Infinite bank marquee (ref: herowith-logos animated logo cloud) --------- */
.marquee{position:relative;overflow:hidden;padding:6px 0;
  mask-image:linear-gradient(to left, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(to left, transparent 0%, black 12%, black 88%, transparent 100%);
}
.marquee-track{display:flex;width:max-content;gap:14px;animation:marquee-scroll 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-chip{
  flex:none;display:flex;align-items:center;gap:10px;padding:14px 26px;
  background:var(--paper);border:1.5px solid var(--gold-light);border-radius:999px;
  font-family:'Suez One',serif;font-size:16px;color:var(--navy-deep);white-space:nowrap;
  box-shadow:0 6px 16px rgba(15,31,56,.08);
}
.marquee-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}
@keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;}}