/* Changes requested after the 1:1 conversion (assets/css/style.css stays the original file). */



/* logo from the panel instead of the name */
.name.has-logo{display:block;line-height:0}
.name .logo{display:block;height:var(--logo-h,44px);width:auto;max-width:min(260px,52vw);object-fit:contain}
.name .logo-light{display:none}
.nav.open .name.has-light .logo{display:none}
.nav.open .name.has-light .logo-light{display:block}
.nav.open .name.has-logo:not(.has-light) .logo{filter:brightness(0) invert(1)}
@media (max-width:640px){.name .logo{height:calc(var(--logo-h,44px) * .8)}}

/* footer links: privacy, accessibility, terms */
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-links a{text-decoration:none;color:inherit;transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.foot-links a:hover{color:var(--ink);text-decoration:underline}}

/* ---------- phones: texts and icons centred (instead of aligned to the right) ---------- */
@media (max-width:760px){
  .lead{margin-inline:auto}

  /* opening */
  .hero .heads{justify-items:center;text-align:center}
  .hero .phA,.hero .phB{margin-inline:auto}
  .hero-row{justify-content:center;text-align:center}
  .hero-row .ledes{margin-inline:auto}
  .hero .actions{justify-content:center}

  /* about */
  .about>div{text-align:center}
  .about h2,.about .body{margin-inline:auto}
  .about .signature{margin-inline:auto}
  .about .facts{justify-content:center}

  /* compass */
  .amc,.amc .amc-in{text-align:center}
  .amc .amc-h,.amc .amc-lead,.amc .amc-p{margin-inline:auto}
  .amc .amc-pic{margin-inline:auto}
  .amc .amc-nav{justify-content:center}

  /* price & support */
  .amo--breath .amo-stage{text-align:center}
  .amo--breath .amo-ring{margin-inline:auto}

  /* the checklist */
  .fixsec,.fixsec .draft{text-align:center}
  .fixsec h2{margin-inline:auto}
  .check{justify-content:center;text-align:center}

  /* faq: the lighthouse above the heading */
  .amf{text-align:center}
  .amf .amf-side{grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px}
  .amf .amf-tower{grid-row:auto;grid-column:auto;order:-1;width:84px;margin-inline:auto}
  .amf .amf-h,.amf .amf-sub{margin-inline:auto}
  .amf .amf-q{flex:1;text-align:center}
  .amf .amf-ans p{margin-inline:auto;text-align:center}

  /* articles (home page carousel and every list of cards) */
  #articles h2,#articles .lead{text-align:center}
  .art{text-align:center}
  .art-meta{justify-content:center;gap:14px}
  .arts-nav{justify-content:center;flex-wrap:wrap}
  .arts-nav .arts-all{margin-inline-start:0;flex-basis:100%;text-align:center}

  /* contact */
  .shore{text-align:center}
  .shore h2{margin-inline:auto}
  .field{text-align:center}
  .field input,.field textarea{text-align:center!important}
  #contactForm .actions{justify-content:center}

  /* footer */
  footer .wrap{text-align:center}
  footer .meta,.foot-links{justify-content:center}

  /* article pages (the article text itself stays aligned to the right, for reading) */
  .ar-head{text-align:center}
  .ar-title,.ar-art-title{margin-inline:auto}
  .ar-topics,.ar-crumbs,.ar-byline,.ar-pages{justify-content:center}
  .ar-byline{text-align:center}
  .ar-cta-side .offer-actions{justify-content:center}
  .ar-share{flex-direction:column;justify-content:center}
  .ar-author{text-align:center;justify-items:center}
  .ar-author-img{margin-inline:auto}
  .ar-author-foot{justify-content:center}
  .ar-author .signature{margin-inline:auto}
  .ar-tags{justify-content:center}
}

/* ---------- footer: the name beside a Google map in the site's colours ---------- */
.foot-grid.has-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,440px);grid-template-areas:"word map" "meta meta";column-gap:clamp(32px,5vw,80px);align-items:end}
.foot-grid.has-map .wordmark{grid-area:word;font-size:clamp(56px,9.4vw,150px)}
.foot-grid.has-map .foot-map{grid-area:map}
.foot-grid.has-map .meta{grid-area:meta}
.map-box{position:relative;height:clamp(200px,18vw,270px);border-radius:18px;overflow:hidden;isolation:isolate;background:#13294B;box-shadow:0 0 0 1px rgba(241,238,231,.2),0 30px 60px -34px rgba(0,0,0,.6)}
.map-box iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block;filter:invert(.9) hue-rotate(180deg) saturate(.5) brightness(.9) contrast(.95)}
.map-box::after{content:"";position:absolute;inset:0;z-index:1;background:#1A3A6E;mix-blend-mode:color;opacity:.55;pointer-events:none;border-radius:inherit}
.map-pin{position:absolute;z-index:2;left:50%;top:50%;width:30px;height:40px;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.map-pin svg{display:block;width:100%;height:100%}
.map-pin path{fill:#B0156C;stroke:#F1EEE7;stroke-width:1.5}
.map-pin circle{fill:#F1EEE7}
.map-pin::after{content:"";position:absolute;left:50%;bottom:-6px;width:14px;height:6px;margin-left:-7px;border-radius:50%;background:rgba(224,87,157,.55);animation:map-ping 2.4s ease-out infinite}
@keyframes map-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.map-pin::after{animation:none}}
.map-addr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px;font-size:15px;color:var(--ink2)}
.map-addr .ic{width:18px;height:18px;color:#E0579D}
.map-addr a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;margin-inline-start:6px}
@media (max-width:760px){
  .foot-grid.has-map{grid-template-columns:minmax(0,1fr);grid-template-areas:"word" "map" "meta";row-gap:28px}
  .foot-grid.has-map .wordmark{font-size:clamp(56px,16vw,96px)}
  .map-box{height:220px}
  .map-addr{justify-content:center}
}

/* ---------- the beach contact section on phones: centred like the rest ---------- */
@media (max-width:760px){
  .ash,.ash .ash-in{text-align:center}
  .ash .ash-lead{margin-inline:auto}
  .ash label{align-items:stretch;text-align:center}
  .ash input,.ash textarea,.ash input[type=tel]{text-align:center}
  .ash .ash-btn{width:100%}
}

/* ---------- floating WhatsApp button, on every page: a pill like the Roni Gozali site ---------- */
.wa-float{position:fixed;z-index:29;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:3.1rem;padding:.85em 1.5em;border-radius:999px;background:var(--magenta,#B0156C);color:#fff;font:500 16px/1 var(--f);text-decoration:none;white-space:nowrap;box-shadow:0 14px 30px -12px rgba(0,0,0,.35);transform:translateY(calc(100% + 2rem));transition:transform .5s var(--ease-out),background-color .25s ease}
.wa-float.show{transform:none}
.wa-float.is-left{left:clamp(16px,2.4vw,32px)}
.wa-float.is-right{right:clamp(16px,2.4vw,32px)}
.wa-float svg{width:1.25em;height:1.25em;flex:none;fill:currentColor;fill-rule:evenodd}
.wa-float:not(:has(.wa-float-t)){width:3.1rem;padding:0}
@media (hover:hover) and (pointer:fine){.wa-float:hover{background:#8C0F55}}
.wa-float:active{transform:scale(.97)}
.wa-float:focus-visible{outline:2px solid #0F2341;outline-offset:3px}
@media (max-width:640px){.wa-float{font-size:15px;min-height:2.9rem;padding:.8em 1.25em}}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}}
/* room at the very bottom so the floating button never covers the footer links */
body:has(.wa-float) footer.dark{padding-bottom:calc(40px + 64px + env(safe-area-inset-bottom,0px))}

/* ---------- footer: the name (or logo) level with the top of the map; the map without Google's buttons ---------- */
.foot-grid.has-map{align-items:start}
.foot-grid.has-map .meta{margin-top:clamp(28px,3vw,44px)}
.wordmark.has-logo{line-height:0}
.foot-logo{display:block;height:var(--flogo-h,120px);width:auto;max-width:100%;object-fit:contain}
.foot-logo.is-painted{filter:brightness(0) invert(1)}
@media (max-width:760px){.foot-logo{height:calc(var(--flogo-h,120px) * .62);margin-inline:auto}}
/* the iframe is larger than the frame, so Google's buttons (open in Maps, camera, keyboard, terms) sit outside it */
.map-box{direction:ltr}
.map-box iframe{top:-210px;left:-130px;width:calc(100% + 260px);height:calc(100% + 420px)}
.map-credit{font-size:12px;opacity:.6}

/* ---------- "טיפול במחיר נגיש": both buttons the same width ---------- */
.amo .amo-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:fit-content;margin-inline:auto}
.amo .amo-acts .amo-btn{justify-content:center}
@media (max-width:480px){.amo .amo-acts{grid-template-columns:minmax(0,1fr);width:100%}}

/* ---------- the checklist on phones: every line the same width, aligned to the right ---------- */
@media (max-width:760px){
  .checks li{display:flex}
  .check{width:100%;justify-content:flex-start;text-align:start}
}

/* ---------- "הסיפור שלי" / "על התהליך" inside the theme ---------- */
html:has(body.ar-white),body.ar-white{background:#fff}
.ar-white .nav.solid{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.ar-white footer .edge.top path{fill:#fff}
.amst .art,.amp .art{display:block;flex:none;scroll-snap-align:none}
.amst .art h3,.amp .art h3{margin-top:0}
.amst .chap .soft,.amst .story-h1 .soft{display:inline}
.amst .story-h1 .soft{display:block}
@media (max-width:760px){
  .amst .ph,.amp .ph,.amst .chap,.amp .art h2,.amp .pl-head,.amp .close{text-align:center}
  .amst .eyebrow,.amp .eyebrow{justify-content:center}
  .amp .pl-head{flex-direction:column}
}

/* ---------- FAQ on phones: the questions and answers aligned to the right (the heading stays centred) ---------- */
@media (max-width:760px){
  .amf .amf-list{text-align:start}
  .amf .amf-q{text-align:start}
  .amf .amf-ans p{margin-inline:0;text-align:start}
}

/* ---------- the header of the new opening design (amit-hero): the vector logo and a soft frosted bar ---------- */
.nav .amh-logo{--amh-logo-ink:#2F3F31;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--amh-logo-ink);text-decoration:none;line-height:1;transition:color .3s ease}
.nav .amh-logo::before{content:"";position:absolute;inset:-18px -28px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(246,244,238,.4),rgba(246,244,238,.16) 55%,rgba(246,244,238,0));transition:opacity .3s ease}
.nav .amh-logo svg{display:block;width:clamp(124px,11vw,168px);height:auto;overflow:visible}
.nav .amh-logo-sub{display:flex;align-items:center;gap:9px;font-family:var(--f);font-size:14px;font-weight:500;letter-spacing:.04em;white-space:nowrap;color:var(--amh-logo-ink)}
.nav .amh-logo-sub i{display:block;width:1.5px;height:13px;background:#B8955F}
.nav.solid .amh-logo::before,.nav.open .amh-logo::before{opacity:0}
.nav.open .amh-logo{--amh-logo-ink:#FFFFFF}
@media (max-width:640px){.nav .amh-logo svg{width:112px}.nav .amh-logo-sub{font-size:12.5px;gap:7px;letter-spacing:.03em}.nav .amh-logo-sub i{height:11px}}
.nav .wrap{padding-inline:clamp(24px,4vw,62px)}
.nav.solid{background:rgba(244,241,234,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.nav.hide{transform:translateY(-130%)}
.menu{background:#0A161D;padding-inline:clamp(24px,4vw,62px)}
.nav.open{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* the vector logo in the footer: light name, gold sun */
.foot-svg{display:block;width:auto;color:#F1EEE7}
.foot-svg svg{display:block;height:var(--flogo-h,120px);width:auto;max-width:100%}
@media (max-width:760px){.foot-svg svg{height:calc(var(--flogo-h,120px) * .62);margin-inline:auto}}

/* ---------- the compass: the dots only (no arrows) ---------- */
.amc .amc-dots{margin-inline-start:0}

/* ---------- the waves between the sections drift a little faster (original 34s / 26s / 18s) ---------- */
.contour svg{animation-duration:20s}
.edge svg{animation-duration:16s}
.shoreline svg{animation-duration:12s}

/* ---------- the footer logo in the header's colours (dark name, gold sun) on a light rounded card ---------- */
.foot-svg.is-colour{display:inline-flex;flex-direction:column;align-items:center;gap:13px;max-width:100%;padding:clamp(23px,2.6vw,34px) clamp(31px,3.4vw,47px) clamp(21px,2.3vw,29px);border-radius:20px;background:#F4F1EA;color:#2F3F31;box-shadow:0 0 0 1px rgba(241,238,231,.2),0 30px 60px -34px rgba(0,0,0,.6)}
.foot-svg.is-colour{height:auto}
.foot-svg.is-colour svg{width:calc(var(--flogo-h,120px) * 2.47);height:auto;max-width:100%}
.foot-svg .amh-logo-sub{display:flex;align-items:center;gap:12px;font:500 clamp(16px,1.43vw,21px)/1 var(--f);letter-spacing:.04em;white-space:nowrap;color:#2F3F31}
.foot-svg .amh-logo-sub i{display:block;width:1.5px;height:.95em;background:#B8955F}
@media (max-width:760px){.foot-svg.is-colour svg{width:calc(var(--flogo-h,120px) * 1.75);height:auto;margin-inline:auto}}

/* the whole map is a link to the address on Google Maps */
.map-open{position:absolute;inset:0;z-index:3;border-radius:inherit;cursor:pointer;transition:background-color .25s ease,box-shadow .25s ease}
@media (hover:hover) and (pointer:fine){.map-open:hover{background:rgba(224,87,157,.08);box-shadow:inset 0 0 0 1.5px rgba(224,87,157,.55)}}
.map-open:focus-visible{outline:2px solid #E0579D;outline-offset:3px}