/* ---------- Rubik, self-declared ----------
   See docs/fontface.py for why these are declared here instead of loaded
   through a fonts.googleapis.com stylesheet. One variable file per script
   covers weights 300-600. */
@font-face{
  font-family:"Rubik";
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nDrXyi0A.woff2) format("woff2");
  unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face{
  font-family:"Rubik";
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nBrXw.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Hetel.co.il — Design System v2
   "Warm appraisal journal, in motion."
   v2: Rubik throughout (rounded), softer radii, and a page that moves —
   ambient hero light, a generated skyline, parallax media, marquee,
   tweened numbers, scroll-driven process rail.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --parchment:#FBF7EF;
  --paper:#F4EDE1;
  --paper-2:#EDE4D5;
  --line:#E2D8C6;

  --ink:#16243D;
  --ink-2:#22344F;
  --ink-3:#3C4A63;
  --muted:#7A7264;

  --accent:#B0593A;
  --accent-deep:#8E4429;
  --accent-wash:#F3E3D9;

  --sage:#7C8E71;
  --sage-wash:#E9EDE4;

  /* One family, rounded. Hierarchy comes from weight, not a second face. */
  --sans:"Rubik","Assistant","Alef Hebrew",-apple-system,"Segoe UI",system-ui,sans-serif;

  --container:1240px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --band:clamp(4.5rem,9vw,8rem);

  /* Rounder than v1 across the board */
  --r-card:28px;
  --r-md:18px;
  --r-pill:999px;

  --shadow-ui:0 1px 2px rgba(22,36,61,.05), 0 0 0 1px rgba(226,216,198,.9);
  --shadow-float:0 30px 70px -28px rgba(22,36,61,.34), 0 2px 8px rgba(22,36,61,.06);

  --ease:cubic-bezier(.22,.68,.24,1);
}


/* ---------- Tokens, repeated on the section as a safety net ---------- */
.hetel-section{
  --parchment:#FBF7EF;
  --paper:#F4EDE1;
  --paper-2:#EDE4D5;
  --line:#E2D8C6;

  --ink:#16243D;
  --ink-2:#22344F;
  --ink-3:#3C4A63;
  --muted:#7A7264;

  --accent:#B0593A;
  --accent-deep:#8E4429;
  --accent-wash:#F3E3D9;

  --sage:#7C8E71;
  --sage-wash:#E9EDE4;

  /* One family, rounded. Hierarchy comes from weight, not a second face. */
  --sans:"Rubik","Assistant","Alef Hebrew",-apple-system,"Segoe UI",system-ui,sans-serif;

  --container:1240px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --band:clamp(4.5rem,9vw,8rem);

  /* Rounder than v1 across the board */
  --r-card:28px;
  --r-md:18px;
  --r-pill:999px;

  --shadow-ui:0 1px 2px rgba(22,36,61,.05), 0 0 0 1px rgba(226,216,198,.9);
  --shadow-float:0 30px 70px -28px rgba(22,36,61,.34), 0 2px 8px rgba(22,36,61,.06);

  --ease:cubic-bezier(.22,.68,.24,1);
}

/* ---------- Reset (scoped: must not reach the theme header/menu) ---------- */
.hetel-section,.hetel-section *,.hetel-section *::before,.hetel-section *::after{box-sizing:border-box}
.hetel-section{
  background:var(--parchment);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.75;
  font-weight:400;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
}
.hetel-section img,.hetel-section video{max-width:100%;display:block}
.hetel-section a{color:inherit;text-decoration:none}
.hetel-section button,.hetel-section input,
.hetel-section select,.hetel-section textarea{font:inherit;color:inherit}
/* hello-elementor paints [type=button]:hover / button:hover with #CC3366.
   That is where the pink block on a hovered FAQ row came from. */
.hetel-section button:not(.btn):hover,
.hetel-section button:not(.btn):focus,
.hetel-section button:not(.btn):active{background-color:transparent;color:inherit}
.faq__q,.faq__q:hover,.faq__q:focus,.faq__q:active{background:none;box-shadow:none}
.faq__q:hover{color:var(--accent)}
/* Headings must state their colour. Inheriting it loses to ANY direct rule on
   h1-h4 from the theme or a plugin, whatever its specificity. */
.hetel-section h1,.hetel-section h2,.hetel-section h3,.hetel-section h4{
  margin:0;font-family:var(--sans);font-weight:600;line-height:1.08;
  letter-spacing:-.035em;color:var(--ink);
}
.hetel-section .hero h1,.hetel-section .hero h2,.hetel-section .hero h3,
.hero h1,.hero h2,.hero h3,
.band--ink h1,.band--ink h2,.band--ink h3,
.cta-text h1,.cta-text h2,.cta-text h3{color:var(--parchment)}
.hetel-section a{color:inherit}
.hetel-section a:visited,.hetel-section a:hover,.hetel-section a:focus{color:inherit}
.hetel-section p{margin:0}
.hetel-section ul{margin:0;padding:0;list-style:none}
.hetel-section :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- Elementor structural compatibility ---------- */
.hetel-section{margin:0!important}
.hetel-section > .elementor-container{max-width:none!important;width:100%}
.hetel-section .elementor-column-wrap,
.hetel-section .elementor-widget-wrap{padding:0!important}

/* ---------- Layout primitives ---------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band);position:relative}
.band--paper{background:var(--paper)}
.band--ink{background:var(--ink);color:var(--parchment)}
.band--tight{padding-block:clamp(3rem,6vw,5rem)}

.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.16em;color:var(--accent)}
.band--ink .eyebrow{color:#D9A188}

.lede{
  font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.7;
  color:var(--ink-3);max-width:56ch;font-weight:400;
}
.band--ink .lede{color:#B9C4D6}

/* Two-tone headline: weight + colour, on separate lines */
.h-display{font-size:clamp(2.4rem,5.9vw,4.9rem);line-height:1.02;font-weight:600}
.h-display .soft,.h-section .soft{display:block}
.h-display .soft{font-weight:300;color:var(--ink-3);letter-spacing:-.03em}
.band--ink .h-display .soft,.hero .h-display .soft{color:#C4D0E1}
.h-section{font-size:clamp(1.9rem,4vw,3.15rem);line-height:1.1;font-weight:600}
.h-section .soft{font-weight:300;color:var(--muted);letter-spacing:-.03em}
.band--ink .h-section .soft{color:#8FA0BA}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;position:relative;
  padding:1.05rem 2rem;border-radius:var(--r-pill);border:1px solid transparent;
  font-weight:500;font-size:1rem;letter-spacing:-.015em;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(176,89,58,.65)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--paper);border-color:var(--muted);transform:translateY(-2px)}
.band--ink .btn--ghost,.hero .btn--ghost{color:var(--parchment);border-color:rgba(255,255,255,.28)}
.band--ink .btn--ghost:hover,.hero .btn--ghost:hover{background:rgba(255,255,255,.09)}
.btn__arrow{transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(-5px)}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(251,247,239,.96);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .35s var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:2rem;height:80px;transition:height .35s var(--ease)}
.hdr.is-stuck .hdr__in{height:66px}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand__mark{
  width:38px;height:38px;border-radius:13px;background:var(--ink);color:var(--parchment);
  display:grid;place-items:center;font-size:1.1rem;font-weight:500;
  transition:transform .4s var(--ease);
}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06)}
.brand__name{font-size:1.24rem;line-height:1;letter-spacing:-.035em;font-weight:600}
.brand__sub{display:block;font-size:.6rem;letter-spacing:.17em;color:var(--muted);font-weight:500;margin-top:.3rem}
.nav{display:flex;gap:1.9rem;margin-inline-start:auto;font-size:.95rem}
.nav a{color:var(--ink-3);position:relative;transition:color .2s var(--ease)}
.nav a::after{
  content:"";position:absolute;bottom:-5px;inset-inline-start:0;height:1.5px;width:0;
  background:var(--accent);transition:width .3s var(--ease);
}
.nav a:hover{color:var(--accent)}
.nav a:hover::after{width:100%}
.hdr__cta{display:flex;align-items:center;gap:1rem}
.hdr__tel{font-weight:500;font-size:.95rem;white-space:nowrap}
.hdr .btn{padding:.72rem 1.4rem;font-size:.93rem}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer}

/* ---------- Hero ---------- */
/* overflow:clip, not hidden. An overflow:hidden box is still a scroll
   container, and the hero's own buttons point at anchors inside it (#check on
   the home page, #lead on a city page). The browser answered those by scrolling
   the HERO instead of the page: its content slid up ~600px, the pill, the H1 and
   the ledes were clipped off the top, an empty band was left at the bottom, and
   on a phone the hero then swallowed the scroll and bounced the page back.
   overflow:clip clips identically but creates no scroll container, so it cannot
   happen. Only decoration overflows the hero, so nothing is lost by clipping.
   `hidden` stays first as the fallback for browsers without `clip`. */
.hero{
  position:relative;background:var(--ink);color:var(--parchment);
  overflow:hidden;overflow:clip;isolation:isolate;
}

/* Ambient light — three slow-drifting blobs. The main "alive" signal. */
.hero__glow{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55}
.hero__glow i{position:absolute;display:block;border-radius:50%}
.hero__glow i:nth-child(1){
  width:46vw;height:46vw;top:-8%;inset-inline-end:-6%;
  background:radial-gradient(circle,rgba(176,89,58,.85),transparent 68%);
  animation:drift1 22s ease-in-out infinite;
}
.hero__glow i:nth-child(2){
  width:38vw;height:38vw;bottom:-14%;inset-inline-start:2%;
  background:radial-gradient(circle,rgba(124,142,113,.70),transparent 68%);
  animation:drift2 27s ease-in-out infinite;
}
.hero__glow i:nth-child(3){
  width:30vw;height:30vw;top:32%;inset-inline-start:36%;
  background:radial-gradient(circle,rgba(64,102,150,.65),transparent 70%);
  animation:drift3 19s ease-in-out infinite;
}
@keyframes drift1{50%{transform:translate3d(-6%,7%,0) scale(1.12)}}
@keyframes drift2{50%{transform:translate3d(8%,-6%,0) scale(1.15)}}
@keyframes drift3{50%{transform:translate3d(-9%,-8%,0) scale(.9)}}

/* On a phone the ambient light stops moving.
   The transforms themselves are cheap, but they sit under filter:blur(70px)
   spanning the whole hero, so every frame re-blurs a full-screen surface. On a
   mid-range Android that is continuous work for an effect nobody is looking at,
   and it is the kind of thing Lighthouse flags as a non-composited animation.
   The blobs stay — they just hold still, and the blur radius comes down. */
@media (max-width:768px){
  .hero__glow{filter:blur(48px)}
  .hero__glow i{animation:none!important}
  .hero__tex{animation:none!important}
}

/* Facade grid, drifting slowly upward */
.hero__tex{
  position:absolute;inset:-96px 0;z-index:0;opacity:.06;pointer-events:none;
  background-image:linear-gradient(to right,#fff 1px,transparent 1px),
                   linear-gradient(to bottom,#fff 1px,transparent 1px);
  background-size:72px 96px;
  -webkit-mask-image:radial-gradient(85% 75% at 65% 15%,#000 0%,transparent 80%);
          mask-image:radial-gradient(85% 75% at 65% 15%,#000 0%,transparent 80%);
  animation:gridDrift 26s linear infinite;
}
@keyframes gridDrift{to{transform:translateY(-96px)}}

/* Generated skyline, bled along the bottom */
.hero__skyline{position:absolute;inset-inline:0;bottom:0;z-index:0;height:44%;pointer-events:none;opacity:1}
.hero__skyline svg{width:100%;height:100%}
.hero__skyline .bld{fill:rgba(9,16,30,.55);stroke:rgba(251,247,239,.45);stroke-width:1}
.hero__skyline .win{fill:#FFD9A0;animation:winOn 7s ease-in-out infinite}
.hero__skyline .win-off{fill:#F0D8B8;opacity:.10}
@keyframes winOn{0%,100%{opacity:.14}45%,62%{opacity:.95}}

.hero__in{position:relative;z-index:2;padding-block:clamp(3.5rem,7vw,6rem) clamp(4.5rem,9vw,8rem)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}

.pill-note{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1.1rem;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);
  font-size:.82rem;font-weight:500;color:#E6D9CF;margin-bottom:2rem;
  background:rgba(255,255,255,.04);
}
.pill-note .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(176,89,58,.6);animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(176,89,58,0)}
  100%{box-shadow:0 0 0 0 rgba(176,89,58,0)}
}
.hero h1{color:var(--parchment)}
.hero .lede{margin-top:1.9rem;color:#B7C2D4;max-width:48ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}

.credbar{margin-top:3.2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.13)}
.credbar__label{font-size:.72rem;letter-spacing:.15em;font-weight:500;color:#8FA0BA;margin-bottom:.7rem}
.credbar__list{display:flex;flex-wrap:wrap;gap:.5rem 1.15rem;font-size:.95rem;color:#D3DAE6}
.credbar__list li{display:flex;align-items:center;gap:1.15rem}
.credbar__list li:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent)}

/* Hero load sequence — rises once on load, not on scroll */
/* Transform-only. Content is never hidden by opacity, so a stalled animation
   clock (some in-app browsers, throttled tabs) can never blank the page. */
.rise{transform:none}
.js .rise{transform:translateY(24px)}
.js.loaded .rise{transform:none;transition:transform .9s var(--ease)}
.js.loaded .rise:nth-child(1){transition-delay:.05s}
.js.loaded .rise:nth-child(2){transition-delay:.14s}
.js.loaded .rise:nth-child(3){transition-delay:.23s}
.js.loaded .rise:nth-child(4){transition-delay:.32s}
.js.loaded .rise:nth-child(5){transition-delay:.41s}

/* ---------- Estimator card ---------- */
.est{
  background:var(--parchment);color:var(--ink);border-radius:var(--r-card);
  box-shadow:var(--shadow-float);padding:clamp(1.6rem,3vw,2.2rem);position:relative;
}
.js .est{transform:translateY(36px) scale(.985)}
.js.loaded .est{transform:none;transition:transform 1s var(--ease) .3s}
/* Terracotta, matching .leadcard__tag on the city pages. Ink was the original
   choice, but this tag sits on the card's top edge -- half of it overhangs onto
   the dark hero, where an ink pill simply disappears. The accent is the only
   token that holds against both the hero and the card behind it. */
.est__tag{
  position:absolute;top:-.85rem;inset-inline-start:1.8rem;
  background:var(--accent);color:#fff;font-size:.72rem;font-weight:500;
  letter-spacing:.1em;padding:.45rem 1rem;border-radius:var(--r-pill);
}
.est h2{font-size:1.45rem;margin-bottom:.5rem}
.est__hint{font-size:.92rem;color:var(--muted);line-height:1.6;margin-bottom:1.6rem}
.field{margin-bottom:1.35rem}
.field__label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.8rem;font-weight:500;color:var(--muted);margin-bottom:.55rem;
}
.field__val{font-size:1.15rem;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.select,.input{
  width:100%;padding:.95rem 1.15rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;box-shadow:var(--shadow-ui);appearance:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.select{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" stroke="%237A7264" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;background-position:left 1.15rem center;
}
.select:focus,.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}

.range{
  width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;cursor:pointer;
  background:linear-gradient(to left,var(--accent) var(--pct,12%),var(--line) var(--pct,12%));
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--ink);border:3px solid var(--parchment);
  box-shadow:0 2px 8px rgba(22,36,61,.35);transition:transform .18s var(--ease);
}
.range:active::-webkit-slider-thumb{transform:scale(1.18)}
.range::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--ink);
  border:3px solid var(--parchment);box-shadow:0 2px 8px rgba(22,36,61,.35);
}
.range__ends{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:.5rem}

.est__out{
  /* Dark so the figure can be white: it is the payoff of the whole card, and
     white on the pale sage wash was not legible. The sage rule stays as the
     "money kept" marker. */
  background:var(--ink);border-inline-start:3px solid var(--sage);
  border-radius:var(--r-md) 0 0 var(--r-md);padding:1.3rem 1.4rem;margin-top:1.6rem;
}
.est__out-label{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:#9DB394}
.est__out-num{
  font-size:clamp(1.9rem,3.5vw,2.45rem);font-weight:600;line-height:1.1;
  margin-top:.2rem;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  color:#FFFFFF;
}
.est__out-sub{font-size:.85rem;color:#B9C4D6;margin-top:.35rem}
/* Highlighted caveat. Amber is a third semantic colour alongside sage — it means
   "read this before you believe the number", and appears nowhere else. */
/* Two classes, not one. The scoped reset carries ".hetel-section p{margin:0}"
   at specificity 0,1,1 -- a bare ".est__disclaimer" (0,1,0) loses to it, so the
   margin here was silently dropped on the live site and the caveat sat flush
   against the button. */
.est .est__disclaimer{
  font-size:.74rem;line-height:1.65;color:#6B5A2A;margin-top:1.75rem;
  background:#FAF0C4;border-inline-start:3px solid #E3C15A;
  border-radius:var(--r-sm,12px) 0 0 var(--r-sm,12px);
  padding:.8rem 1rem;
}
.est .btn{width:100%;justify-content:center;margin-top:1.2rem}

/* ---------- Deadline band ---------- */
.clock{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.clock__calc{
  background:var(--parchment);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2rem);
}
.clock__result{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.clock__date{font-size:clamp(1.6rem,2.8vw,2.15rem);font-weight:600;line-height:1.15}
.clock__days{font-size:.92rem;color:var(--muted);margin-top:.35rem}
.clock__days strong{color:var(--accent);font-weight:600}

/* ---------- Services ---------- */
.svc{border-top:1px solid var(--line)}
.svc__row{
  display:grid;grid-template-columns:auto 1fr 1.15fr auto;gap:clamp(1.25rem,3vw,2.75rem);
  align-items:start;padding-block:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
/* Wash wipes in from the reading edge */
.svc__row::before{
  content:"";position:absolute;inset:0;background:var(--paper);
  transform:scaleX(0);transform-origin:right;z-index:0;
  transition:transform .55s var(--ease);
}
.svc__row>*{position:relative;z-index:1}
.svc__row:hover::before{transform:scaleX(1)}
.svc__num{font-size:.9rem;color:var(--accent);font-weight:500;padding-top:.5rem;font-variant-numeric:tabular-nums}
.svc__title{
  font-size:clamp(1.4rem,2.5vw,1.95rem);font-weight:600;line-height:1.18;
  transition:transform .45s var(--ease);
}
.svc__row:hover .svc__title{transform:translateX(-8px)}
.svc__body{color:var(--ink-3);font-size:1rem;line-height:1.72;max-width:52ch}
.svc__go{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;flex-shrink:0;margin-top:.35rem;
  transition:background .3s var(--ease),border-color .3s var(--ease),
             color .3s var(--ease),transform .45s var(--ease);
}
.svc__row:hover .svc__go{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.08)}

/* ---------- Process, with a rail that fills on scroll ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);margin-top:3.5rem}
.step{padding-top:1.9rem;position:relative}
.step::before{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:var(--line)}
.step::after{
  content:"";position:absolute;top:0;inset-inline-start:0;height:2px;width:0;
  background:var(--ink);transition:width .9s var(--ease);
}
.step.is-lit::after{width:100%}
.step__n{font-size:.72rem;font-weight:600;letter-spacing:.16em;color:var(--accent);margin-bottom:.9rem}
.step__t{font-size:1.4rem;font-weight:600;line-height:1.22;margin-bottom:.7rem}
.step__b{color:var(--ink-3);font-size:.985rem;line-height:1.7}

/* ---------- Media slot: video, image, or designed fallback ---------- */
.media{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  background:var(--paper-2);aspect-ratio:4/5;
}
.media video,.media img{width:100%;height:100%;object-fit:cover}
.media__fallback{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:.55rem;
  color:var(--muted);font-size:.85rem;padding:2rem;overflow:hidden;
  background:linear-gradient(160deg,var(--paper) 0%,var(--paper-2) 100%);
}
.media__fallback b{font-size:1.1rem;color:var(--ink-3);font-weight:600;display:block}
/* Sheen sweeps the empty slot so it reads as designed, not missing */
.media__fallback::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%);animation:sheen 5.5s ease-in-out infinite;
}
@keyframes sheen{55%,100%{transform:translateX(120%)}}

/* ---------- Authority ---------- */
.auth{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.quote{font-size:clamp(1.5rem,2.9vw,2.25rem);line-height:1.34;font-weight:300;letter-spacing:-.035em}
.quote .hi{color:var(--accent);font-weight:500}
.auth__sig{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.auth__name{font-size:1.2rem;font-weight:600}
.auth__role{font-size:.9rem;color:var(--muted)}
.cred{margin-top:2rem;display:grid;gap:.85rem}
.cred li{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  font-size:.99rem;color:var(--ink-3);line-height:1.65;
}
.cred svg{margin-top:.42rem;color:var(--accent);flex-shrink:0}

/* ---------- Cities marquee ---------- */
.marquee{
  position:relative;overflow:hidden;margin-top:2.5rem;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(50%)}}
.marquee__group{display:flex;align-items:center;gap:1.4rem;padding-inline:.7rem;flex-shrink:0}
.marquee__group li{
  display:flex;align-items:center;gap:1.4rem;white-space:nowrap;
  font-size:1.5rem;font-weight:300;letter-spacing:-.03em;
}
.marquee__group li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.marquee a{color:var(--ink-3);transition:color .22s var(--ease)}
.marquee a:hover{color:var(--accent)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);margin-top:2.5rem}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:start;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding-block:1.65rem;font-size:clamp(1.08rem,1.7vw,1.32rem);
  font-weight:500;line-height:1.35;color:var(--ink);letter-spacing:-.03em;
  transition:color .25s var(--ease);
}
.faq__q:hover{color:var(--accent)}
.faq__ico{flex-shrink:0;width:26px;height:26px;position:relative;transition:transform .35s var(--ease)}
.faq__item.is-open .faq__ico{transform:rotate(180deg)}
.faq__ico::before,.faq__ico::after{
  content:"";position:absolute;inset-inline-start:5px;top:12px;
  width:16px;height:1.8px;background:currentColor;border-radius:2px;
  transition:transform .35s var(--ease);
}
.faq__ico::after{transform:rotate(90deg)}
.faq__item.is-open .faq__ico::after{transform:rotate(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq__a-in{padding-bottom:1.7rem;color:var(--ink-3);line-height:1.78;max-width:68ch}

/* ---------- Final CTA ---------- */
.final{display:grid;grid-template-columns:1fr .95fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.form{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-card);padding:clamp(1.6rem,3vw,2.25rem);
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .field__label{color:#93A3BC}
.form .input,.form .select{
  background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);
  color:var(--parchment);box-shadow:none;
}
.form .input::placeholder{color:#7C8CA6}
.form .btn{width:100%;justify-content:center;margin-top:.5rem}
.form__legal{font-size:.75rem;color:#8FA0BA;line-height:1.6;margin-top:1rem;text-align:center}

/* ---------- Footer ---------- */
.ftr{background:var(--paper);padding-block:clamp(3rem,6vw,4.5rem) 2rem;border-top:1px solid var(--line)}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,4vw,3.5rem)}
.ftr__h{font-size:.72rem;font-weight:600;letter-spacing:.15em;color:var(--muted);margin-bottom:1.1rem}
.ftr__list{display:grid;gap:.6rem;font-size:.96rem;color:var(--ink-3)}
.ftr__list a{transition:color .2s var(--ease)}
.ftr__list a:hover{color:var(--accent)}
.ftr__legal{
  margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);line-height:1.7;max-width:88ch;
}

/* ---------- Mobile sticky CTA ---------- */
.mcta{
  position:fixed;inset-inline:0;bottom:0;z-index:70;display:none;gap:.6rem;
  padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(251,247,239,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
.mcta .btn{flex:1;justify-content:center;padding:.9rem 1rem;font-size:.95rem}

/* The site already has two floating widgets pinned to the bottom corners — the
   accessibility button on the left and the chat bubble on the right — and both
   sit at a z-index far above this bar (224748364 and 999997). They were
   covering the ends of both buttons: a tap near the left edge of
   "דבר עם שמאי" reached the accessibility widget, not the link, which is why
   the button looked dead on a phone while working fine on desktop.

   Rather than fight their stacking order or move someone else's widget, the bar
   keeps its buttons in the clear band between them. Measured on a 375px screen:
   the accessibility button ends at x=51, the chat starts at x=285. Physical
   left/right on purpose — the widgets are physically placed and do not flip
   with RTL. */
@media (max-width:768px){
  .mcta{
    padding-left:58px;
    padding-right:98px;
    gap:.45rem;
  }
  /* The clear band is ~230px wide, so the labels have to fit two pills inside
     it. At the desktop size "דבר עם שמאי" wrapped onto a second line and the
     buttons turned into tall ovals. */
  .mcta .btn{
    padding:.85rem .5rem;
    font-size:.86rem;
    white-space:nowrap;
  }
}

/* ---------- Scroll reveal & parallax ---------- */
/* Visible at rest; JS arms the animation only once it is running. */
.rv{transform:none}
.js .rv{transform:translateY(22px)}
.js .rv.in{transform:none;transition:transform .8s var(--ease)}
[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rise,.js .est{transform:none!important}
  html{scroll-behavior:auto}
  .pill-note .dot,.hero__glow i,.hero__tex,.hero__skyline .win,
  .marquee__track,.media__fallback::after{animation:none!important}
  [data-parallax]{transform:none!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero__grid,.clock,.auth,.final{grid-template-columns:1fr}
  .media{aspect-ratio:16/10;max-height:440px}
  .nav{display:none}
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding-block:1.9rem 0}
  .svc__row{grid-template-columns:auto 1fr auto;gap:1rem 1.5rem}
  .svc__body{grid-column:2 / -1}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .burger{display:block;margin-inline-start:auto}
  .hdr__cta{display:none}
  .mcta{display:flex}
  body{padding-bottom:76px}
  .form__row{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  .svc__row{grid-template-columns:1fr;gap:.75rem}
  .svc__go{display:none}
  .credbar__list{font-size:.88rem}
  .marquee__group li{font-size:1.2rem}
  .hero__glow{filter:blur(48px)}
}

/* ==========================================================================
   Four-step process (replaces the earlier three-step block)
   ========================================================================== */
.eyebrow-rule{display:flex;align-items:center;gap:.9rem}
.eyebrow-rule::after{content:"";height:1px;width:44px;background:var(--line)}
.band--ink .eyebrow-rule::after{background:rgba(255,255,255,.22)}

.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3.5rem}
.step4{
  padding:2rem 1.6rem 0;border-top:1px solid var(--line);
  border-inline-start:1px solid var(--line);
}
.step4:last-child{border-inline-end:1px solid var(--line)}
.step4__n{
  display:flex;align-items:center;gap:.6rem;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--muted);
}
.step4__n::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.step4__t{font-size:1.22rem;font-weight:600;line-height:1.25;margin-top:1.1rem}
.step4__b{color:var(--ink-3);font-size:.95rem;line-height:1.7;margin-top:.8rem}
.step4__meta{
  font-size:.78rem;color:var(--muted);margin-top:1.4rem;
  padding-block:1rem;border-top:1px solid var(--line);
}

/* ==========================================================================
   Results — case studies with tabs
   ========================================================================== */
.res__tabs{
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin-top:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.res__tab{
  background:none;border:0;cursor:pointer;padding:0 0 1rem;
  font-size:.95rem;color:#8FA0BA;position:relative;white-space:nowrap;
  transition:color .25s var(--ease);
}
.res__tab::after{
  content:"";position:absolute;bottom:-1px;inset-inline:0;height:2px;
  background:var(--accent);transform:scaleX(0);transition:transform .3s var(--ease);
}
.res__tab:hover{color:#C4D0E1}
.res__tab.is-on{color:var(--parchment);font-weight:500}
.res__tab.is-on::after{transform:scaleX(1)}

.res__panel{display:none;padding-top:2.75rem}
.res__panel.is-on{display:block}
.res__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.res__kicker{font-size:.8rem;color:#8FA0BA;letter-spacing:.04em}
.res__h{
  font-size:clamp(1.4rem,2.5vw,2rem);font-weight:600;line-height:1.28;
  color:var(--parchment);margin-top:.8rem;
}
.res__b{color:#B9C4D6;line-height:1.8;margin-top:1.1rem;max-width:56ch}
.res__meta{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:2rem}
.res__meta div{display:grid;gap:.3rem}
.res__meta dt{font-size:.72rem;letter-spacing:.12em;color:#D9A188;font-weight:500}
.res__meta dd{margin:0;font-size:.98rem;color:var(--parchment);font-weight:500}

.savings{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2rem);
}
.savings__label{font-size:.72rem;letter-spacing:.12em;color:#8FA0BA;font-weight:500;text-align:start}
.savings__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-block:.85rem;font-size:.95rem;color:#B9C4D6;
}
.savings__row + .savings__row{border-top:1px solid rgba(255,255,255,.09)}
.savings__row b{font-weight:500;color:var(--parchment);font-variant-numeric:tabular-nums}
.savings__row.is-zero b{color:#D9A188}
.savings__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:1.1rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.18);
}
.savings__total span{font-size:.95rem;color:#B9C4D6}
.savings__total b{
  font-size:clamp(1.7rem,3vw,2.2rem);font-weight:600;color:var(--sage);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.savings__bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:1.4rem;overflow:hidden}
.savings__bar i{
  display:block;height:100%;border-radius:3px;width:0;
  background:linear-gradient(to left,var(--sage),#C9B27E);
  transition:width 1.1s var(--ease);
}
.res__panel.is-on .savings__bar i{width:var(--pct,100%)}
.savings__note{font-size:.75rem;color:#8FA0BA;margin-top:.7rem}

@media (max-width:1024px){
  .steps4{grid-template-columns:repeat(2,1fr)}
  .step4:nth-child(2n){border-inline-end:1px solid var(--line)}
  .res__grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .steps4{grid-template-columns:1fr}
  .step4{border-inline-end:1px solid var(--line)}
  .res__tabs{gap:.4rem 1.2rem}
  .res__tab{font-size:.86rem}
}

/* The hero's primary CTA is white on the navy field — it outranks the terracotta
   accent where it matters most. Terracotta stays the accent everywhere else,
   including the estimator button, which sits on a light card. */
.hero .hero__actions .btn--primary{background:var(--parchment);color:var(--ink)}
.hero .hero__actions .btn--primary:hover{
  background:#fff;color:var(--ink);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.55);
}

/* ---------- Checkbox ----------
   Used to gate the levy-amount field. The native box is kept in the accessibility
   tree and focusable — only visually replaced — so keyboard and screen-reader
   users get the real control. */
.check{
  position:relative;display:flex;align-items:center;gap:.7rem;
  margin-bottom:1.35rem;cursor:pointer;user-select:none;
  font-size:.95rem;line-height:1.5;color:var(--ink-2);
}
.check__in{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.check__box{
  flex:0 0 auto;width:1.35rem;height:1.35rem;border-radius:.5rem;
  border:1px solid var(--line);background:var(--parchment);
  display:grid;place-items:center;color:transparent;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.check__in:checked ~ .check__box{background:var(--accent);border-color:var(--accent);color:#fff}
.check__in:focus-visible ~ .check__box{outline:none;box-shadow:0 0 0 3px var(--accent-wash)}
.check:hover .check__box{border-color:var(--accent)}

/* On the dark closing band */
.form .check{color:#C7D2E2}
.form .check__box{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.form .check__in:focus-visible ~ .check__box{box-shadow:0 0 0 3px rgba(176,89,58,.45)}

/* ==========================================================================
   Elementor layer — loaded only in the WordPress build, never in the prototype.

   The page is one HTML block per section, so hetel.css applies to its own DOM
   unchanged. This file only has to do two things:
     1. stop Elementor's section/column wrappers from constraining those blocks
     2. lay out the one native widget on the page — the form

   An earlier version mapped the whole design onto native widgets. It was
   abandoned deliberately: Elementor generates per-widget CSS from the kit's
   default palette (#6EC1E4 primary, #61CE70 accent), and that generated CSS
   also drives what the editor shows. Winning that fight would have meant
   re-encoding the design as Elementor settings and maintaining it in two
   places. Colour for the form is therefore passed as widget settings, not
   fought for here.
   ========================================================================== */

/* ---------- Let the HTML blocks span their section ---------- */
.hetel-section .elementor-widget-html,
.hetel-section .elementor-widget-container{width:100%}
.hetel-section .elementor-widget-html > .elementor-widget-container{margin:0}
.hetel-section .elementor-widget:not(:last-child){margin-bottom:0}

/* ---------- Final CTA: markup on one side, form widget on the other ---------- */
.cta-band{padding-block:var(--band)}
.cta-band > .elementor-container{
  max-width:var(--container)!important;width:100%;
  padding-inline:var(--gutter);
}
.cta-grid-el > .elementor-container{
  display:flex;gap:clamp(2.5rem,5vw,5rem);align-items:flex-start;
  max-width:none!important;padding-inline:0;
}
.cta-grid-el > .elementor-container > .elementor-column{width:auto!important;min-width:0}
.cta-grid-el > .elementor-container > .elementor-column:nth-child(1){flex:1 1 0}
.cta-grid-el > .elementor-container > .elementor-column:nth-child(2){flex:.95 1 0}

.cta-text .eyebrow{color:#D9A188}
.cta-text .h-display{color:var(--parchment)}
.cta-text .h-display .soft{color:#C4D0E1}
.cta-text .lede{color:#B9C4D6}

/* ---------- Form widget ----------
   Colours come from the widget's own settings; these rules only handle the
   grid, which Elementor has no control for. */
.form-w .elementor-field-group{align-content:flex-start}
.form-w .elementor-field-label{display:block;width:100%;font-size:.8rem;margin-bottom:.55rem}
.form-w .elementor-field-textual{width:100%;padding:.95rem 1.15rem;font-family:var(--sans)}
.form-w .elementor-button{width:100%;justify-content:center;font-family:var(--sans)}

@media (max-width:1024px){
  .cta-grid-el > .elementor-container{flex-direction:column}
  .cta-grid-el > .elementor-container > .elementor-column{flex:1 1 100%!important;width:100%!important}
}

/* ---------- Conditional form: textarea, select and upload ---------- */
.form-w textarea.elementor-field-textual{min-height:120px;resize:vertical}
.form-w select.elementor-field-textual{
  appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" stroke="%23B9C4D6" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;background-position:left 1.15rem center;
}
.form-w .elementor-field-type-upload .elementor-field{
  padding:1.1rem;border:1px dashed rgba(255,255,255,.28);border-radius:var(--r-md);
  background:rgba(255,255,255,.04);color:#B9C4D6;cursor:pointer;width:100%;
}
.form-w .elementor-field-type-upload .elementor-field:hover{
  border-color:var(--accent);background:rgba(176,89,58,.10);
}
/* Branch fields animate in rather than snapping the form's height around */
.form-w .elementor-field-group{transition:opacity .25s var(--ease)}