/* ==========================================================================
   מתחם התנופה — Elementor widgets stylesheet
   Everything is scoped under .htn-w so nothing leaks into the rest of the site,
   and nothing from the theme leaks in either.
   ========================================================================== */

/* ---- Self-hosted fonts. Never Google CDN: it silently falls back on the
       client's server and "the font didn't come through". ---- */
@font-face{font-family:"Heebo";src:url("../fonts/heebo-v28-hebrew_latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Heebo";src:url("../fonts/heebo-v28-hebrew_latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Heebo";src:url("../fonts/heebo-v28-hebrew_latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Heebo";src:url("../fonts/heebo-v28-hebrew_latin-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Assistant";src:url("../fonts/assistant-v24-hebrew_latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Assistant";src:url("../fonts/assistant-v24-hebrew_latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* Lenis stylesheet must travel with the JS, or the theme's smooth-scroll fights it */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ==========================================================================
   TOKENS
   ========================================================================== */
.htn-w{
  --ink:#1D2626; --ink-2:#161D1D; --ink-3:#0F1414;
  --gold:#A8763A; --gold-lit:#C79B54; --gold-pale:#E3C88A;
  --gold-line:rgba(168,118,58,.28);
  --stone:#F5F1E9; --stone-2:#EDE7DA; --stone-3:#E2DACA;
  --paper:#FBF9F5; --white:#FFFFFF;
  --tx:#1D2626; --tx-soft:rgba(29,38,38,.68); --tx-faint:rgba(29,38,38,.42);
  --tx-on-dark:#F3EFE7; --tx-on-dark-soft:rgba(243,239,231,.66);

  --f-display:"Heebo","Noto Sans Hebrew",system-ui,sans-serif;
  --f-body:"Assistant","Heebo",system-ui,sans-serif;

  --fs-h1:clamp(2.15rem,5.4vw,4.15rem);
  --fs-h2:clamp(1.7rem,3.4vw,2.75rem);
  --fs-h3:clamp(1.12rem,1.7vw,1.4rem);
  --fs-lead:clamp(1.02rem,1.45vw,1.28rem);
  --fs-body:clamp(.98rem,1.1vw,1.06rem);
  --fs-micro:clamp(.68rem,.82vw,.78rem);
  --fs-num:clamp(2.1rem,5.2vw,4.4rem);

  --track-display:-.025em; --track-micro:.05em;
  --gutter:clamp(1.15rem,5vw,5.5rem);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-arc:cubic-bezier(.36,.66,.04,1);

  direction:rtl;
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.72;
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
}

/* ==========================================================================
   HARD RESETS — kill everything the theme/kit injects into our scope.
   Hello Elementor's reset.css forces border AND color #cc3366 (pink) on every
   button; other kits colour :hover/:focus/:active states. All of it is killed
   here, in every state, so pink can never appear.
   ========================================================================== */
.htn-w,.htn-w *{box-sizing:border-box}
.htn-w :where(h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,dt){margin:0;padding:0}
.htn-w :where(ul,ol){list-style:none;padding:0}
.htn-w :where(a){text-decoration:none;color:inherit}
.htn-w :where(img,picture,video,canvas,svg){display:block;max-width:100%}

.htn-w button,
.htn-w [type="button"],
.htn-w [type="submit"],
.htn-w [type="reset"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  background:none!important;
  background-color:transparent!important;
  border:0!important;
  border-color:transparent!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  color:inherit!important;
  width:auto!important;
  display:inline-flex;
  font:inherit;
  cursor:pointer;
  text-shadow:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
.htn-w button:hover,.htn-w button:focus,.htn-w button:active,.htn-w button:visited,
.htn-w [type="button"]:hover,.htn-w [type="button"]:focus,.htn-w [type="button"]:active,
.htn-w [type="submit"]:hover,.htn-w [type="submit"]:focus,.htn-w [type="submit"]:active{
  background:none!important;
  background-color:transparent!important;
  border-color:transparent!important;
  outline-color:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
}
.htn-w a,.htn-w a:hover,.htn-w a:focus,.htn-w a:active,.htn-w a:visited{
  color:inherit;
  border-color:currentColor;
  -webkit-tap-highlight-color:transparent;
}
.htn-w ::selection{background:var(--gold);color:#fff}
.htn-w :focus-visible{outline:2px solid var(--gold)!important;outline-offset:3px;border-radius:2px}

/* Elementor + WooCommerce themes force img{height:auto} after our sheet loads.
   Full-bleed images must out-specify that or they float and leave white gaps. */
.htn-w .htn-fill img,
.htn-w .htn-fill video{
  position:absolute;inset:0;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover;
  object-position:center;
}
.htn-w .htn-fill{position:relative;overflow:hidden;background:var(--stone-2)}

/* Elementor sets font-family on its widget wrapper; our text inherits it unless
   we force the brand font on the widget roots. */
.htn-w,.htn-w h1,.htn-w h2,.htn-w h3,.htn-w p,.htn-w a,.htn-w span,
.htn-w button,.htn-w li,.htn-w dd,.htn-w dt,.htn-w input,.htn-w textarea,.htn-w select{
  font-family:var(--f-body);
}
.htn-w .htn-display,.htn-w h1,.htn-w h2,.htn-w h3{font-family:var(--f-display)}

/* ==========================================================================
   SHARED PRIMITIVES
   ========================================================================== */
.htn-wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}

.htn-eyebrow{
  font-family:var(--f-display);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:var(--track-micro);color:var(--gold);
  display:flex;align-items:center;gap:.85em;
}
.htn-eyebrow::before{content:"";inline-size:clamp(1.6rem,4vw,3.4rem);block-size:1px;background:currentColor;opacity:.55;flex:none}
[style*="text-align: center"] .htn-eyebrow,.htn-w[data-align="center"] .htn-eyebrow{justify-content:center}

.htn-title{
  font-family:var(--f-display);font-weight:800;font-size:var(--fs-h1);
  line-height:1.08;letter-spacing:var(--track-display);color:var(--ink);
}
.htn-title em{font-style:normal;color:var(--gold)}
.htn-lead{font-size:var(--fs-lead);color:var(--tx-soft);max-width:62ch}

.htn-arc{display:block;inline-size:clamp(4.5rem,9vw,7.5rem);color:var(--gold);margin-block-end:1.4rem}
.htn-arc path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.5s var(--ease-arc)}
.htn-rv.is-in .htn-arc path,.is-in .htn-arc path{stroke-dashoffset:0}

/* ---- Buttons (never inherit anything from the theme) ---- */
.htn-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:clamp(1.4rem,3vh,2.2rem)}
[style*="text-align: center"] .htn-actions{justify-content:center}
.htn-w .htn-btn,.htn-btn{
  display:inline-flex!important;align-items:center;gap:.7rem;
  padding:.82em 1.75em;
  border:1px solid var(--htn-btn-bd,rgba(29,38,38,.28))!important;
  border-radius:999px!important;
  background:none!important;box-shadow:none!important;width:auto!important;
  color:var(--htn-btn-fg,var(--ink))!important;
  font-family:var(--f-display);font-weight:500;font-size:.94rem;line-height:1.5;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease-out),border-color .5s var(--ease-out);
}
.htn-w .htn-btn::before,.htn-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);transform:translateY(101%);transition:transform .55s var(--ease-arc)}
.htn-w .htn-btn:hover,.htn-w .htn-btn:focus-visible{color:#fff!important;border-color:var(--gold)!important}
.htn-btn:hover::before,.htn-btn:focus-visible::before{transform:none}
.htn-w .htn-btn--solid{background:var(--gold)!important;border-color:var(--gold)!important;color:#fff!important}
.htn-btn--solid::before{background:var(--ink)}
.htn-w .htn-btn--ghost{border-color:transparent!important;padding-inline:0}
.htn-btn--ghost::before{display:none}
.htn-btn--ghost:hover{color:var(--gold)!important}
.htn-btn__arrow{transition:transform .5s var(--ease-out)}
.htn-btn:hover .htn-btn__arrow{transform:translateX(-4px)}
.htn-on-dark .htn-btn{--htn-btn-fg:var(--tx-on-dark);--htn-btn-bd:rgba(243,239,231,.3)}

/* ==========================================================================
   MOTION GATE
   Pre-animation states live ONLY under html.htn-anim, and the reveal rule is
   gated at the SAME specificity — otherwise hide beats reveal in the cascade
   and content stays invisible on the live site while looking fine in the editor.
   ========================================================================== */
html.htn-anim .htn-w .htn-rv{opacity:0;transform:translateY(26px)}
html.htn-anim .htn-w .htn-rv.is-in{opacity:1;transform:none}
.htn-w .htn-rv{transition:opacity 1s var(--ease-out),transform 1.15s var(--ease-out);transition-delay:var(--d,0ms)}

html.htn-anim .htn-w .htn-mask>span{transform:translateY(105%)}
html.htn-anim .htn-w .htn-mask.is-in>span,
html.htn-anim .htn-w .is-in .htn-mask>span{transform:none}
.htn-w .htn-mask{overflow:hidden;display:block}
.htn-w .htn-mask>span{display:block;transition:transform 1.15s var(--ease-out);transition-delay:var(--d,0ms)}

@media (prefers-reduced-motion:reduce){
  html.htn-anim .htn-w .htn-rv{opacity:1!important;transform:none!important}
  html.htn-anim .htn-w .htn-mask>span{transform:none!important}
  .htn-w .htn-arc path{stroke-dashoffset:0!important;transition:none!important}
}

/* In the editor nothing is pinned, nothing is fixed, nothing is hidden. */
.htn-editor .htn-hero{block-size:auto!important;min-block-size:70vh}
.htn-editor .htn-hero__stage{position:relative!important;inset:auto!important;block-size:70vh}
.htn-editor .htn-header{position:relative!important}
.htn-editor .htn-rv{opacity:1!important;transform:none!important}

/* ==========================================================================
   HEADER
   ========================================================================== */
.htn-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:900;
  padding-block:clamp(.85rem,1.7vw,1.35rem);
  transition:background-color .55s var(--ease-out),box-shadow .55s var(--ease-out),padding .55s var(--ease-out);
}
.htn-header::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,20,20,.55),rgba(15,20,20,0));
  transition:opacity .55s var(--ease-out)}
.htn-header.is-solid{
  background:rgba(251,249,245,.9);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 rgba(29,38,38,.08);
  padding-block:clamp(.6rem,1.1vw,.85rem);
}
.htn-header.is-solid::after{opacity:0}
.htn-header__bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.htn-header__logo{position:relative;display:block;flex:none}
.htn-header__logo img{block-size:var(--htn-logo-h,clamp(38px,4.4vw,54px));inline-size:auto;transition:opacity .4s var(--ease-out)}
.htn-header__logo .htn-logo-dark{position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0}
.htn-header.is-solid .htn-logo-light{opacity:0}
.htn-header.is-solid .htn-logo-dark{opacity:1}

.htn-nav{display:flex;align-items:center;gap:clamp(1.1rem,2.3vw,2.4rem)}
.htn-nav a{font-family:var(--f-display);font-weight:500;font-size:.95rem;color:var(--htn-nav-clr,var(--tx-on-dark));position:relative;padding-block:.35rem;transition:color .45s var(--ease-out)}
.htn-nav a::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;inline-size:0;block-size:1px;background:var(--gold);transition:inline-size .5s var(--ease-arc)}
.htn-nav a:hover::after,.htn-nav a.is-active::after{inline-size:100%}
.htn-nav a.is-active{color:var(--gold)}
.htn-header.is-solid .htn-nav a{color:var(--htn-nav-clr-solid,var(--tx))}
.htn-header.is-solid .htn-nav a.is-active{color:var(--gold)}
/* Over the hero the header is transparent, so its buttons must read light;
   once it turns solid they flip to ink. */
.htn-header .htn-btn{--htn-btn-fg:var(--htn-hdr-btn,var(--tx-on-dark));--htn-btn-bd:var(--htn-hdr-btn-bd,rgba(243,239,231,.3))}
.htn-header.is-solid .htn-btn{--htn-btn-fg:var(--htn-hdr-btn-solid,var(--ink));--htn-btn-bd:var(--htn-hdr-btn-bd-solid,rgba(29,38,38,.28))}
.htn-header .htn-actions{margin:0}

.htn-w .htn-burger,.htn-burger{display:none!important;inline-size:44px;block-size:44px;position:relative;flex:none}
.htn-w .htn-burger span,.htn-burger span{position:absolute;inset-inline:11px;block-size:1.5px;background:var(--tx-on-dark);transition:background-color .45s}
.htn-burger span:nth-child(1){inset-block-start:17px}
.htn-burger span:nth-child(2){inset-block-start:25px}
.htn-header.is-solid .htn-burger span{background:var(--tx)}
@media (max-width:900px){
  .htn-header .htn-nav,.htn-header .htn-actions{display:none}
  .htn-w .htn-burger,.htn-burger{display:block!important}
}

/* Mobile menu: its own bar and its own close button, so the real header can
   never sit underneath and swallow the tap. */
.htn-mmenu{
  position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:grid;grid-template-rows:auto 1fr auto;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease-out),visibility .5s;
}
.htn-mmenu.is-open{opacity:1;visibility:visible}
.htn-mmenu__bar{display:flex;align-items:center;justify-content:space-between;padding:clamp(.85rem,1.7vw,1.35rem) var(--gutter)}
.htn-mmenu__bar img{block-size:38px;inline-size:auto}
.htn-w .htn-mmenu__close,.htn-mmenu__close{inline-size:44px;block-size:44px;display:grid;place-items:center;color:var(--tx-on-dark)!important;border:1px solid rgba(243,239,231,.24)!important;border-radius:999px!important}
.htn-mmenu__close svg{inline-size:16px;block-size:16px}
.htn-mmenu__list{align-self:center;padding-inline:var(--gutter);overflow-y:auto;display:grid;gap:clamp(.35rem,1.6vh,1rem)}
.htn-mmenu__list a{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.75rem,8.5vw,2.6rem);line-height:1.22;color:var(--tx-on-dark);
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:calc(var(--i,0)*60ms);
}
.htn-mmenu.is-open .htn-mmenu__list a{opacity:1;transform:none}
.htn-mmenu__list a span{color:var(--gold);font-size:.5em;vertical-align:.55em;margin-inline-end:.5rem;font-weight:500}
.htn-mmenu__foot{padding:var(--gutter);padding-block-end:calc(var(--gutter) + env(safe-area-inset-bottom));border-block-start:1px solid rgba(243,239,231,.12)}
.htn-mmenu__foot .htn-btn{--htn-btn-fg:var(--tx-on-dark);--htn-btn-bd:rgba(243,239,231,.3)}
body.htn-menu-open{overflow:hidden}

/* ==========================================================================
   HERO — scroll-scrubbed frame sequence or video
   ========================================================================== */
.htn-hero{position:relative;block-size:var(--htn-runway,480vh);z-index:1}
.htn-hero__stage{
  position:fixed;inset:0;z-index:0;overflow:hidden;background-color:#0F1414;
  background-size:cover;background-position:center;
}
/* Parking must NOT fade the stage out: at the end of the runway the stage is
   the melt veil, filling the screen in the next chapter's colour. Fading it
   there exposes the page background for a moment and reads as a hard cut.
   It is only hidden once the next section fully covers the viewport, and then
   without a transition — by that point nothing of it is visible anyway. */
.htn-hero__stage.is-parked{visibility:hidden;pointer-events:none;transition:none}
.htn-hero__canvas,.htn-hero__video{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block}
/* The hand-off into the next chapter. Instead of the banner simply ending and
   the next section sliding over a frozen frame, a veil in the NEXT section's
   colour rises through the last stretch of the scroll, so one chapter melts
   into the other. Driven from JS alongside the frame scrub. */
.htn-hero__outro{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:var(--htn-outro,#FBF9F5);
  transform:translateY(100%);
  will-change:transform;
  -webkit-mask-image:linear-gradient(to top,#000 58%,transparent 100%);
  mask-image:linear-gradient(to top,#000 58%,transparent 100%);
}
.htn-hero__canvas,.htn-hero__video{transform-origin:center center}

.htn-hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,20,20,var(--htn-scrim-top,.62)) 0%,rgba(15,20,20,.14) 34%,rgba(15,20,20,0) 55%),
             linear-gradient(0deg,rgba(15,20,20,var(--htn-scrim-bot,.66)) 0%,rgba(15,20,20,0) 46%)}

.htn-hero__copy{
  position:absolute;inset-inline:0;inset-block-end:clamp(5.5rem,14vh,9.5rem);z-index:2;
  padding-inline:var(--gutter);max-width:1440px;margin-inline:auto;left:0;right:0;
  color:var(--tx-on-dark);
}
.htn-hero__title{
  font-family:var(--f-display);font-weight:800;
  font-size:var(--htn-hero-fs,clamp(3.1rem,11.5vw,10.5rem));
  line-height:.94;letter-spacing:-.035em;
  text-shadow:0 2px 40px rgba(10,14,14,.35);
  color:var(--htn-hero-clr,var(--tx-on-dark));
}
.htn-hero__title em{font-style:normal;color:var(--htn-hero-accent,var(--gold-pale))}
.htn-hero__title .ln{display:block;overflow:hidden}
.htn-hero__title .ln>i{display:block;font-style:normal}
html.htn-anim .htn-hero__title .ln>i{transform:translateY(104%);transition:transform 1.25s var(--ease-out);transition-delay:var(--d,0ms)}
html.htn-anim body.htn-ready .htn-hero__title .ln>i{transform:none}
.htn-hero__sub{margin-block-start:clamp(1rem,2vh,1.6rem);max-width:34ch;font-size:var(--fs-lead);color:rgba(243,239,231,.86)}
.htn-hero__copy .htn-actions{--htn-btn-fg:var(--tx-on-dark);--htn-btn-bd:rgba(243,239,231,.3)}
.htn-hero__copy .htn-btn{--htn-btn-fg:var(--tx-on-dark);--htn-btn-bd:rgba(243,239,231,.3)}

.htn-hero__cue{
  position:absolute;inset-block-end:clamp(1.6rem,4vh,2.6rem);
  left:50%;transform:translateX(-50%);  /* physical centring — logical flips in RTL */
  z-index:2;display:grid;justify-items:center;gap:.6rem;
  color:rgba(243,239,231,.72);font-family:var(--f-display);
  font-size:var(--fs-micro);letter-spacing:var(--track-micro);pointer-events:none;
}
.htn-hero__cue i{display:block;inline-size:1px;block-size:44px;transform-origin:top;
  background:linear-gradient(180deg,rgba(243,239,231,.7),rgba(243,239,231,0));
  animation:htnCue 2.1s var(--ease-arc) infinite}
@keyframes htnCue{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(44px);opacity:0}}
@media (prefers-reduced-motion:reduce){.htn-hero__cue i{animation:none}}

.htn-hero__caption{
  position:absolute;inset-block-start:50%;inset-inline-end:var(--gutter);
  transform:translateY(-50%);z-index:2;text-align:end;color:var(--tx-on-dark);
  opacity:0;pointer-events:none;
}
.htn-hero__caption b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.8rem);letter-spacing:var(--track-display);line-height:1.1}
.htn-hero__caption span{display:block;margin-block-start:.4rem;font-size:var(--fs-micro);letter-spacing:var(--track-micro);color:var(--gold-pale)}

@media (max-width:768px){
  .htn-hero{--htn-runway:400vh}
  /* lvh, not svh/dvh: svh leaves a white strip when the URL bar hides,
     dvh keeps resizing mid-scroll and makes the stage jump. */
  .htn-hero__stage{block-size:100lvh}
  .htn-hero__copy{inset-block-end:clamp(6rem,17vh,9rem)}
  /* the banner headline carries the whole first screen on a phone —
     it needs to read big and heavy, not like a shrunken desktop title */
  .htn-hero__title{
    font-size:var(--htn-hero-fs-m,clamp(3.2rem,16vw,5.4rem));
    font-weight:800;
    line-height:.9;
    letter-spacing:-.045em;
  }
  .htn-hero__sub{max-width:100%}
  .htn-hero__caption{inset-block-start:auto;inset-block-end:34%;inset-inline:var(--gutter);transform:none;text-align:start}
  .htn-hero__caption b{font-size:clamp(1.4rem,7vw,2rem)}
}

/* ==========================================================================
   SURFACES / CHAPTERS
   ========================================================================== */
.htn-surface{position:relative;z-index:10;background:var(--htn-bg,var(--paper))}
.htn-surface--white{--htn-bg:linear-gradient(180deg,var(--paper) 0%,var(--white) 260px)}
.htn-surface--ink{--htn-bg:var(--ink);color:var(--tx-on-dark)}
.htn-surface--ink3{--htn-bg:var(--ink-3);color:var(--tx-on-dark)}

/* ---------- The arc between chapters ----------
   Two earlier mechanisms failed for structural reasons worth recording: a
   negative margin dragged this opaque section over the previous one's last row
   of cards, and a z-index:-1 backing gets buried under the body background on
   any theme that paints one. This draws the shape explicitly instead: an SVG
   cap painted INSIDE this section, in the colour of the section above, filling
   exactly the two top corners. Nothing overlaps anything and no theme can hide
   it. The strip above the cap covers whatever gap Elementor leaves between its
   containers; its height is measured at runtime, so it can never reach into
   the content above. */
.htn-arc-top{
  position:relative;
  padding-block-start:calc(var(--htn-arc-depth,100px) + 1.5rem);
}
.htn-arc-cap{
  position:absolute;
  inset-inline:0;
  inset-block-start:calc(-1 * var(--htn-arc-gap,0px));
  block-size:calc(var(--htn-arc-gap,0px) + var(--htn-arc-depth,100px));
  inline-size:100%;
  z-index:1;
  pointer-events:none;
  display:block;
}
.htn-arc-cap path{fill:var(--htn-arc-from,transparent)}
.htn-arc-top::before{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-start:calc(-1 * var(--htn-arc-gap,0px));
  block-size:var(--htn-arc-gap,0px);
  background:var(--htn-arc-from,transparent);
  z-index:1;
  pointer-events:none;
}
@media (max-width:768px){
  .htn-arc-top{--htn-arc-depth:56px}
}

/* ---- About ---- */
.htn-about{padding-block:clamp(4.5rem,10vh,8rem) clamp(3rem,7vh,5.5rem)}
.htn-about__grid{display:grid;gap:clamp(2.2rem,5vw,5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.htn-about__grid{grid-template-columns:1.05fr .95fr}}
.htn-about__body{margin-block-start:1.5rem;display:grid;gap:1.15rem;max-width:62ch;color:var(--tx-soft);font-size:var(--fs-lead)}
[style*="text-align: center"] .htn-about__body{margin-inline:auto}

.htn-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,3vw,2.4rem);
  margin-block-start:clamp(2.4rem,5vh,3.4rem);padding-block-start:clamp(1.8rem,4vh,2.6rem);
  border-block-start:1px solid rgba(29,38,38,.14)}
@media (min-width:720px){.htn-stats{grid-template-columns:repeat(4,1fr)}}
.htn-stat{display:flex;flex-direction:column-reverse;align-items:flex-start}
[style*="text-align: center"] .htn-stat{align-items:center}
.htn-stat__n{font-family:var(--f-display);font-weight:800;font-size:var(--fs-num);line-height:1;
  letter-spacing:-.04em;color:var(--htn-stat-clr,var(--ink));display:flex;align-items:baseline;gap:.12em;white-space:nowrap}
.htn-stat__n u{text-decoration:none;color:var(--gold);font-size:.46em}
.htn-stat__l{margin-block-start:.6rem;font-size:var(--fs-micro);letter-spacing:var(--track-micro);color:var(--tx-faint);font-family:var(--f-display)}

.htn-about__media{display:grid;gap:clamp(.8rem,1.6vw,1.15rem)}
.htn-about__media .htn-fill{border-radius:2px}
@media (min-width:720px){
  .htn-about__media{grid-template-columns:1.15fr .85fr;align-items:end}
  .htn-about__media .htn-fig-1{grid-row:span 2}
}
@media (min-width:960px){.htn-about__media{position:sticky;inset-block-start:15vh}}
.htn-about__media img{transform:scale(1.06);transition:transform 1.6s var(--ease-out)}
.htn-about__media .is-in img{transform:none}

/* ---- Advantages ---- */
.htn-adv{padding-block:clamp(3rem,7vh,5rem)}
.htn-adv__list{display:grid;grid-template-columns:1fr;border-block-start:1px solid rgba(29,38,38,.12)}
@media (min-width:720px){.htn-adv__list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.htn-adv__list{grid-template-columns:repeat(var(--htn-adv-cols,4),1fr)}}
.htn-adv__item{padding:clamp(1.5rem,3vw,2.2rem) clamp(0rem,1.6vw,1.6rem);padding-inline-start:0;
  border-block-end:1px solid rgba(29,38,38,.12);display:grid;gap:.55rem;align-content:start}
@media (min-width:720px){
  .htn-adv__item{border-inline-start:1px solid rgba(29,38,38,.12);padding-inline-start:clamp(1rem,2vw,1.8rem)}
  .htn-adv__item:first-child{border-inline-start:0;padding-inline-start:0}
}
@media (min-width:1080px){.htn-adv__item{border-block-end:0}}
.htn-adv__k{font-family:var(--f-display);font-weight:700;font-size:var(--fs-h3);color:var(--htn-adv-k,var(--ink));letter-spacing:-.01em}
.htn-adv__v{font-size:.96rem;color:var(--htn-adv-v,var(--tx-soft));line-height:1.62}
.htn-adv__i{inline-size:var(--htn-adv-icon,26px);block-size:var(--htn-adv-icon,26px);color:var(--htn-adv-icon-clr,var(--gold));margin-block-end:.35rem}
/* line icons keep their stroke; filled icons get a fill — never blanket-fill both */
.htn-adv__i svg{inline-size:100%;block-size:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.htn-adv__i svg.htn-icon-solid,.htn-adv__i .e-font-icon-svg{fill:currentColor;stroke:none}

/* ---- Businesses ---- */
.htn-biz{padding-block:clamp(4rem,9vh,7rem) clamp(4rem,10vh,8rem)}
/* the explainer sits UNDER the headline, never beside it */
.htn-biz__head{display:grid;gap:1.1rem;margin-block-end:clamp(2rem,4vh,3rem)}
.htn-biz__head .htn-lead{max-width:58ch}
.htn-biz__count{font-family:var(--f-display);font-size:var(--fs-micro);letter-spacing:var(--track-micro);color:var(--tx-faint)}

.htn-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:clamp(1.8rem,4vh,2.6rem)}
[style*="text-align: center"] .htn-filters{justify-content:center}
.htn-w .htn-chip{
  display:inline-flex!important;align-items:center;gap:.5em;width:auto!important;
  padding:.55em 1.15em;
  background:none!important;
  border:1px solid var(--htn-chip-bd,rgba(29,38,38,.2))!important;
  border-radius:999px!important;box-shadow:none!important;
  color:var(--htn-chip-fg,var(--tx-soft))!important;
  font-family:var(--f-display);font-weight:500;font-size:.9rem;line-height:1.5;white-space:nowrap;
  transition:color .35s var(--ease-out),border-color .35s var(--ease-out),background-color .35s var(--ease-out);
}
.htn-w .htn-chip:hover,.htn-w .htn-chip:focus-visible{color:var(--ink)!important;border-color:rgba(29,38,38,.45)!important}
.htn-w .htn-chip[aria-pressed="true"]{
  background:var(--htn-chip-on-bg,var(--ink))!important;
  border-color:var(--htn-chip-on-bg,var(--ink))!important;
  color:var(--htn-chip-on-fg,var(--paper))!important;
}
.htn-chip u{text-decoration:none;font-size:.78em;opacity:.6;direction:ltr;display:inline-block}

.htn-cards{display:grid;gap:clamp(.9rem,1.8vw,1.5rem);grid-template-columns:repeat(var(--htn-cols-m,2),1fr)}
@media (min-width:640px){.htn-cards{grid-template-columns:repeat(var(--htn-cols-t,3),1fr)}}
@media (min-width:1080px){.htn-cards{grid-template-columns:repeat(var(--htn-cols,4),1fr)}}

.htn-card{position:relative;display:block;container-type:inline-size;background:var(--stone-2);
  overflow:hidden;border-radius:2px;isolation:isolate}
.htn-card.is-hidden{display:none}
.htn-card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone-3)}
.htn-card__media img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover;object-position:center;transition:transform 1.1s var(--ease-out)}
@media (hover:hover){.htn-card:hover .htn-card__media img{transform:scale(1.055)}}
/* every overlay sits above the <img> explicitly — DOM order alone is not enough */
.htn-card__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(15,20,20,.86) 0%,rgba(15,20,20,.34) 38%,rgba(15,20,20,.02) 66%)}
.htn-card__body{position:absolute;inset-block-end:0;inset-inline:0;z-index:2;
  padding:clamp(.75rem,4cqi,1.15rem);color:#fff;display:grid;gap:.25rem;text-align:start}
.htn-card__name{font-family:var(--f-display);font-weight:700;font-size:clamp(.95rem,7cqi,1.16rem);
  line-height:1.24;letter-spacing:-.01em;text-shadow:0 1px 14px rgba(10,14,14,.5)}
.htn-card__meta{display:flex;align-items:center;gap:.45em;font-size:clamp(.66rem,4.4cqi,.76rem);
  letter-spacing:.08em;color:rgba(255,255,255,.78);font-family:var(--f-display)}
.htn-card__meta i{inline-size:3px;block-size:3px;border-radius:50%;background:var(--gold-lit);flex:none}
@container (max-width:150px){.htn-card__meta{display:none}}
.htn-card__floor{position:absolute;inset-block-start:.7rem;inset-inline-start:.7rem;z-index:2;
  padding:.3em .7em;border-radius:999px;background:rgba(15,20,20,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-family:var(--f-display);font-size:.66rem;letter-spacing:.06em;line-height:1.6}
.htn-card__go{position:absolute;inset-block-start:.7rem;inset-inline-end:.7rem;z-index:2;
  inline-size:30px;block-size:30px;display:grid;place-items:center;border-radius:999px;
  background:rgba(251,249,245,.9);color:var(--ink);opacity:0;transform:translateY(-6px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),background-color .35s}
.htn-card__go svg{inline-size:14px;block-size:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.htn-card:hover .htn-card__go,.htn-card:focus-visible .htn-card__go{opacity:1;transform:none}
  .htn-card__go:hover{background:var(--gold);color:#fff}}
/* touch has no hover: reveal it, and cancel the stuck zoom */
@media (hover:none){
  .htn-card__go{opacity:.92;transform:none}
  .htn-card:hover .htn-card__media img{transform:none}
}
.htn-card--type .htn-card__media{display:grid;place-items:center;padding:1rem;
  background:radial-gradient(120% 90% at 78% 10%,rgba(168,118,58,.2),transparent 58%),linear-gradient(155deg,var(--ink) 0%,var(--ink-3) 100%)}
.htn-card--type .htn-card__mark{inline-size:min(56%,128px);block-size:auto;color:var(--gold);opacity:.5}
.htn-card--type .htn-card__mark path{fill:none;stroke:currentColor;stroke-width:2}
.htn-card--type .htn-card__veil{background:linear-gradient(0deg,rgba(15,20,20,.72) 0%,rgba(15,20,20,.1) 55%,transparent 100%)}
.htn-card--soon .htn-card__floor{background:var(--gold);color:#fff}

/* ---- Map ---- */
.htn-map{padding-block:clamp(4rem,9vh,7rem)}
.htn-map__grid{display:grid;gap:clamp(1.6rem,3.5vw,3rem);grid-template-columns:1fr}
@media (min-width:960px){.htn-map__grid{grid-template-columns:.85fr 1.15fr;align-items:center}}
.htn-map .htn-title{color:var(--htn-map-title,var(--tx-on-dark));font-size:var(--fs-h2)}
.htn-map .htn-title em{color:var(--gold-pale)}
.htn-map__rows{margin-block-start:1.8rem;display:grid}
.htn-map__row{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding-block:1.05rem;
  border-block-end:1px solid rgba(243,239,231,.14);align-items:start;text-align:start}
.htn-map__row:first-child{border-block-start:1px solid rgba(243,239,231,.14)}
.htn-map__row dt{font-family:var(--f-display);font-size:var(--fs-micro);letter-spacing:var(--track-micro);
  color:var(--gold-pale);padding-block-start:.35em;min-inline-size:7.5rem}
.htn-map__row dd{color:var(--tx-on-dark);font-size:1.02rem;line-height:1.6}
.htn-map__row dd small{display:block;color:var(--tx-on-dark-soft);font-size:.86rem;margin-block-start:.2rem}
.htn-map__frame{position:relative;aspect-ratio:var(--htn-map-ratio,4/3);overflow:hidden;border-radius:2px;
  background:var(--ink-3);border:1px solid rgba(243,239,231,.14)}
@media (min-width:960px){.htn-map__frame{aspect-ratio:var(--htn-map-ratio-d,16/12)}}
.htn-map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(var(--htn-map-gray,.35)) contrast(1.05)}
@media (max-width:600px){.htn-map__row{grid-template-columns:1fr;gap:.15rem}.htn-map__row dt{min-inline-size:0}}

/* ---- Form ---- */
.htn-form{display:grid;gap:1rem;max-width:640px}
[style*="text-align: center"] .htn-form{margin-inline:auto}
.htn-form__row{display:grid;gap:.4rem;text-align:start}
.htn-form label{font-family:var(--f-display);font-size:var(--fs-micro);letter-spacing:var(--track-micro);color:var(--htn-form-label,var(--tx-soft))}
.htn-form input,.htn-form textarea,.htn-form select{
  width:100%;padding:.85em 1em;
  background:var(--htn-input-bg,rgba(255,255,255,.9))!important;
  border:1px solid var(--htn-input-bd,rgba(29,38,38,.2))!important;
  border-radius:var(--htn-input-radius,4px)!important;
  color:var(--htn-input-fg,var(--tx))!important;
  font-family:var(--f-body);font-size:1rem;line-height:1.5;
  transition:border-color .35s var(--ease-out);
  -webkit-appearance:none;appearance:none;
}
.htn-form input:focus,.htn-form textarea:focus,.htn-form select:focus{
  border-color:var(--gold)!important;outline:none!important;box-shadow:none!important;
}
.htn-form textarea{min-height:120px;resize:vertical}
.htn-form .htn-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.htn-w .htn-form__submit{
  justify-self:start;
  display:inline-flex!important;align-items:center;gap:.7rem;
  padding:.9em 2.1em;
  background:var(--htn-submit-bg,var(--gold))!important;
  border:1px solid var(--htn-submit-bg,var(--gold))!important;
  border-radius:999px!important;
  color:var(--htn-submit-fg,#fff)!important;
  font-family:var(--f-display);font-weight:600;font-size:1rem;
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}
[style*="text-align: center"] .htn-form__submit{justify-self:center}
.htn-w .htn-form__submit:hover{opacity:.9;transform:translateY(-1px)}
.htn-w .htn-form__submit[disabled]{opacity:.55;pointer-events:none}
.htn-form__status{font-size:.95rem;color:var(--gold);min-height:1.4em}
.htn-on-dark .htn-form label{color:var(--tx-on-dark-soft)}
.htn-on-dark .htn-form input,.htn-on-dark .htn-form textarea,.htn-on-dark .htn-form select{
  --htn-input-bg:rgba(255,255,255,.06);--htn-input-bd:rgba(243,239,231,.24);--htn-input-fg:var(--tx-on-dark);
}
.htn-on-dark .htn-form ::placeholder{color:rgba(243,239,231,.4)}

/* ---- Footer ---- */
.htn-foot{padding-block:clamp(3rem,7vh,5rem) clamp(1.6rem,3vh,2.4rem)}
.htn-foot__top{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr;
  padding-block-end:clamp(2rem,4vh,3rem);border-block-end:1px solid rgba(243,239,231,.12)}
@media (min-width:820px){.htn-foot__top{grid-template-columns:1.2fr 1fr 1fr}}
.htn-foot__logo img{inline-size:var(--htn-foot-logo,clamp(150px,17vw,210px));block-size:auto}
.htn-foot__tag{margin-block-start:1.1rem;color:var(--tx-on-dark-soft);max-width:34ch;font-size:.98rem}
.htn-foot__h{font-family:var(--f-display);font-size:var(--fs-micro);letter-spacing:var(--track-micro);color:var(--gold-pale);margin-block-end:1rem}
.htn-foot__list{display:grid;gap:.6rem}
.htn-foot__list a,.htn-foot__list span{color:var(--tx-on-dark-soft);transition:color .35s var(--ease-out)}
.htn-foot__list a:hover{color:var(--gold-pale)}
.htn-social{display:flex;gap:.6rem;margin-block-start:1.3rem}
.htn-social a{inline-size:40px;block-size:40px;display:grid;place-items:center;
  border:1px solid rgba(243,239,231,.22);border-radius:999px;color:var(--tx-on-dark);
  transition:background-color .4s var(--ease-out),color .4s,border-color .4s}
.htn-social a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.htn-social svg{inline-size:17px;block-size:17px}
.htn-foot__bot{padding-block-start:clamp(1.2rem,2.5vh,1.8rem);display:flex;flex-wrap:wrap;
  gap:.6rem 1.5rem;align-items:center;justify-content:space-between;font-size:.82rem;color:rgba(243,239,231,.44)}

/* Pending markers — fields the client still has to fill */
.htn-w [data-pending]{color:var(--gold-pale)!important;border-block-end:1px dashed var(--gold-line);padding-block-end:1px}

/* ==========================================================================
   MOBILE DISCIPLINE — nothing clipped, nothing overflowing
   ========================================================================== */
.htn-w{max-width:100%;overflow-x:clip}
.htn-w :where(h1,h2,h3,p,span,a,li,dd,dt){overflow-wrap:anywhere;word-break:normal}
@media (max-width:600px){
  .htn-w .htn-title{font-size:clamp(1.8rem,7.6vw,2.6rem)}
  .htn-stats{grid-template-columns:repeat(2,1fr)}
  .htn-stat__n{font-size:clamp(1.9rem,9vw,2.6rem)}
  .htn-cards{grid-template-columns:repeat(var(--htn-cols-m,2),1fr)}
  .htn-actions{gap:.55rem}
  .htn-btn{padding:.78em 1.3em;font-size:.88rem}
  .htn-eyebrow::before{inline-size:1.2rem}
}
@media (max-width:380px){
  .htn-cards{grid-template-columns:1fr}
  .htn-btn{width:100%!important;justify-content:center}
}