/* Amit Shore Section · "יש חוף." on a live, realistic beach, with the contact form on frosted glass.
   Everything is scoped under .ash. Colours can be changed through the variables below
   (Appearance > Customize > Additional CSS). */

/* ================= "יש חוף." on a live shore ================= */
.ash{
  --ash-ink:#0A161D; --ash-ink2:#3E4E55; --ash-accent:#B0156C; --ash-accent-dk:#8C0F55;
  --ash-font:"Heebo","Assistant","Arial Hebrew",system-ui,sans-serif;
  --ash-ease:cubic-bezier(.23,1,.32,1);
  position:relative;min-height:max(100vh,760px);min-height:max(100svh,760px);display:flex;align-items:flex-start;
  color:var(--ash-ink);font-family:var(--ash-font);direction:rtl;text-align:right;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#E6E8E4 0%,#F2E6D8 46%,#9FB4B9 47%,#D9C2A4 80%)
}
.ash *,.ash *::before,.ash *::after{box-sizing:border-box}
.ash h2,.ash p{margin:0;padding:0;font-family:var(--ash-font);color:inherit}
.ash .ash-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.ash .ash-in{position:relative;width:100%;max-width:1240px;margin-inline:auto;padding:clamp(90px,10vw,140px) clamp(18px,4vw,64px) clamp(60px,8vw,110px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,100px);align-items:start}
.ash .ash-h{font-size:clamp(72px,11vw,168px);font-weight:800;line-height:.9;letter-spacing:-.04em;text-shadow:0 2px 40px rgba(255,240,220,.6)}
.ash .ash-lead{margin-top:22px;max-width:27rem;font-size:clamp(18px,1.5vw,22px);font-weight:400;line-height:1.6;color:var(--ash-ink2)}

/* the form, on frosted glass over the water */
.ash .ash-card{margin-top:clamp(0px,14vh,160px);padding:clamp(24px,3vw,40px);background:rgba(250,247,241,.5);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 30px 60px -30px rgba(10,22,29,.35)}
.ash form{display:flex;flex-direction:column;gap:18px;margin:0}
.ash label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:500;color:var(--ash-ink)}
.ash input,.ash textarea{width:100%;margin:0;font:400 18px/1.4 var(--ash-font);color:var(--ash-ink);background:rgba(255,255,255,.62);border:0;border-bottom:1.5px solid rgba(10,22,29,.55);border-radius:0;padding:12px 14px;min-height:52px;box-shadow:none;transition:background-color .3s,border-color .3s}
.ash textarea{min-height:96px;resize:vertical}
.ash input:focus,.ash textarea:focus{outline:none;background:rgba(255,255,255,.88);border-bottom-color:var(--ash-accent)}
.ash input[type=tel]{direction:ltr;text-align:right}
.ash .ash-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;margin-top:4px;border:0;border-radius:0;font:500 17px/1 var(--ash-font);cursor:pointer;background:var(--ash-accent);color:#fff;transition:transform 160ms var(--ash-ease),background-color .3s}
.ash .ash-btn:hover{background:var(--ash-accent-dk)}
.ash .ash-btn:active{transform:scale(.97)}
.ash .ash-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ash .ash-note{font-size:14px;font-weight:400;color:var(--ash-ink2);min-height:1.4em}
.ash .ash-note.err{color:#9B1236}
.ash .ash-btn:focus-visible,.ash input:focus-visible,.ash textarea:focus-visible{outline:2px solid var(--ash-accent);outline-offset:2px}

/* gentle entrance */
.ash .ash-rv{opacity:0;transform:translateY(16px);transition:opacity 1.6s var(--ash-ease),transform 1.6s var(--ash-ease);transition-delay:calc(var(--d,0) * 140ms)}
.ash .ash-rv.is-in{opacity:1;transform:none}

@media (max-width:860px){
  .ash .ash-in{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:80px}
  .ash .ash-card{margin-top:clamp(40px,16vh,140px)}
}
@media (prefers-reduced-motion:reduce){.ash .ash-rv{transition:none;opacity:1;transform:none}}

/* optional soft blend into the page above and below (set by the shortcode) */
.ash::before,.ash::after{content:"";position:absolute;left:0;right:0;z-index:0;pointer-events:none}
.ash::before{top:0;height:22%;background:linear-gradient(180deg,var(--ash-fade-top,transparent),transparent)}
.ash::after{bottom:0;height:16%;background:linear-gradient(0deg,var(--ash-fade-bottom,transparent),transparent)}
.ash .ash-in{z-index:1}
.ash form{background:none;border:0;padding:0;box-shadow:none}
.ash label{margin:0;padding:0;text-transform:none;letter-spacing:normal}
.ash .ash-btn{text-transform:none;letter-spacing:normal;line-height:1;box-shadow:none}
.ash .ash-note a{color:var(--ash-accent);text-decoration:underline}