/* Ofek: coastal craft (sand, sea-glass, deep navy ink) */
:root{
  --sand:#f6efe3; --sand2:#ecdfc8; --shell:#fffaf2; --glass:#d3e8dc; --glass2:#a9cfbb;
  --sea:#2a6b57; --sea-d:#1d4f40; --ink:#16263d; --mute:#4b5b6b; --coral:#e9876b;
  --round:26px; --head:"Fredoka","Varela Round",system-ui,sans-serif; --body:"Varela Round",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font:400 17px/1.7 var(--body);overflow-x:hidden;padding-bottom:84px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--head);margin:0;line-height:1.15;font-weight:600}
p{margin:0}
a{color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.shell{width:min(1080px,100% - 32px);margin-inline:auto}
.skip{position:absolute;top:-60px;inset-inline-start:12px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;z-index:60}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:14px}

/* header */
.bar{padding:14px 0}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--head);font-weight:700;font-size:1.3rem}
.logo em{font-style:normal;font-weight:500;color:var(--sea)}
.logo-bubble{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--glass);color:var(--sea-d)}
.logo-bubble svg{width:24px;height:24px}
.bar-wa{display:none;align-items:center;gap:8px;text-decoration:none;background:var(--shell);border:2px solid var(--sand2);padding:8px 16px;border-radius:999px;font-weight:600}
.bar-wa svg{width:20px;height:20px;color:var(--sea)}
.bar-wa:hover{border-color:var(--glass2)}

/* hero */
.hero{padding:18px 0 34px;background:radial-gradient(60% 50% at 85% 10%,#fde6d2 0%,transparent 70%),radial-gradient(60% 40% at 10% 30%,#e3f0e7 0%,transparent 70%)}
.hero-in{text-align:center}
.hello{display:inline-flex;align-items:center;gap:6px;background:var(--glass);color:var(--sea-d);padding:6px 14px;border-radius:999px;font-size:.92rem;margin-bottom:16px}
.hello svg{width:18px;height:18px}
h1{font-size:clamp(2.2rem,9vw,3.8rem);font-weight:700}
h1 span{color:var(--sea);font-weight:600}
.sub{color:var(--mute);font-size:1.08rem;max-width:30em;margin:14px auto 0}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 24px;border-radius:999px;text-decoration:none;font-weight:600;font-size:1.05rem;transition:transform .15s,box-shadow .15s}
.pill svg{width:21px;height:21px}
.pill:hover{transform:translateY(-2px)}
.pill-sea{background:var(--sea);color:#fff;box-shadow:0 8px 20px -10px rgba(29,79,64,.7)}
.pill-sea:hover{background:var(--sea-d)}
.pill-sand{background:var(--shell);color:var(--ink);border:2px solid var(--sand2)}
.pill-sand svg{color:var(--sea)}
.hero-card{position:relative;margin:30px 0 0;padding:10px;background:var(--shell);border-radius:calc(var(--round) + 8px);box-shadow:0 24px 50px -30px rgba(22,38,61,.45)}
.hero-card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:60% 50%;border-radius:var(--round)}
.rating-chip{position:absolute;bottom:-18px;inset-inline-start:50%;transform:translateX(50%);display:flex;align-items:center;gap:7px;white-space:nowrap;background:var(--ink);color:#fff;padding:9px 18px;border-radius:999px;font-size:.95rem;box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
.rating-chip svg{width:18px;height:18px;color:#f7c66b}
.rating-chip strong{font-family:var(--head);font-size:1.15rem}
.rating-chip span{color:#dfe7ef}

/* wave */
.wave{color:var(--glass);line-height:0;margin-top:28px}
.wave svg{width:100%;height:56px;display:block}

/* field */
.field{background:var(--glass);padding:24px 0 56px}
h2{font-size:clamp(1.8rem,7vw,2.6rem);text-align:center}
.section-sub{text-align:center;color:#33495a;margin-top:8px}
.cards{display:grid;gap:22px;margin-top:28px}
.card{margin:0;background:var(--shell);border-radius:var(--round);padding:10px 10px 0;box-shadow:0 18px 36px -26px rgba(22,38,61,.5)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--round) - 8px)}
.card:first-child img{object-position:50% 40%}
.card:last-child img{object-position:30% 45%}
.card figcaption{display:flex;align-items:center;gap:10px;padding:14px 8px 16px;font-size:.98rem}
.dot-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--glass);color:var(--sea-d)}
.dot-ic svg{width:19px;height:19px}

/* how */
.how{padding:56px 0;background:var(--sand)}
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.steps li{background:var(--shell);border:2px solid var(--sand2);border-radius:var(--round);padding:20px 20px 20px 18px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
.num{grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:var(--coral);color:#3b1408;font-family:var(--head);font-weight:700;font-size:1.5rem}
.steps h3{font-size:1.25rem}
.steps p{color:var(--mute)}

/* visit */
.visit{padding:10px 0 60px}
.visit-in{display:grid;gap:18px}
.postcard{background:var(--ink);color:#fff;border-radius:var(--round);padding:28px 24px;text-align:center}
.postcard h2{font-size:clamp(1.6rem,6vw,2.1rem)}
.addr{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;color:#d6e2ec}
.addr svg{width:20px;height:20px;color:var(--glass2)}
.phone-line{margin:10px 0 20px;font-family:var(--head);font-size:1.7rem;font-weight:600}
.phone-line a{text-decoration:none;color:var(--glass);unicode-bidi:isolate}
.postcard .pill-sea{background:var(--glass);color:var(--ink);box-shadow:none}
.postcard .pill-sea:hover{background:#fff}
.postcard :focus-visible{outline-color:#f7c66b}
.map{position:relative;aspect-ratio:4/3;border-radius:var(--round);overflow:hidden;background:var(--glass);border:8px solid var(--shell)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--sea-d);
  background:repeating-radial-gradient(circle at 70% 30%,transparent 0 22px,rgba(42,107,87,.12) 22px 24px),var(--glass)}
.map-pin{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--shell);margin-bottom:8px}
.map-pin svg{width:30px;height:30px;color:var(--coral)}
.map-fallback strong{font-family:var(--head);font-size:1.4rem;color:var(--ink)}

/* footer */
.foot{background:var(--sand2);padding:24px 0;text-align:center;font-size:.92rem;color:#3c4a58}
.foot-name{font-family:var(--head);font-weight:600;color:var(--ink);margin-bottom:4px}

/* sticky */
.sticky{position:fixed;inset-inline:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;display:grid;grid-template-columns:1.2fr 1fr;gap:8px;padding:8px;background:var(--shell);border-radius:999px;box-shadow:0 12px 30px -10px rgba(22,38,61,.45)}
.sticky a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;text-decoration:none;font-weight:600}
.sticky svg{width:20px;height:20px}
.s-call{background:var(--sea);color:#fff}
.s-wa{background:var(--glass);color:var(--ink)}

@media (min-width:900px){
  body{padding-bottom:0}
  .sticky{display:none}
  .bar-wa{display:inline-flex}
  .hero{padding:30px 0 50px}
  .hero-card{max-width:760px;margin:40px auto 0}
  .cards{grid-template-columns:1fr 1fr;gap:28px}
  .card:nth-child(2){transform:translateY(36px)}
  .field{padding-bottom:96px}
  .how{padding:80px 0}
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps li{grid-template-columns:1fr;text-align:center;justify-items:center;row-gap:8px;padding:30px 24px}
  .num{grid-row:auto}
  .visit-in{grid-template-columns:.85fr 1.15fr;align-items:stretch;gap:24px}
  .postcard{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 30px}
  .map{aspect-ratio:auto;min-height:380px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.pill:hover{transform:none}}