/* Layout: whitewash ground, Aegean-blue frames (like the building's shutters), arch-topped photos, one dark sea-blue band per page */
:root {
  --bg: #FFFFFF;
  --wash: #F2F6F9;
  --ink: #14283A;
  --muted: #4A5D69;
  --line: #DCE5EB;
  --aegean: #0077A8;
  --aegean-deep: #003764;
  --night: #003764;
  --night-ink: #EEF4F7;
  --night-muted: #B7CDE0;
  --wa: #1E7A4C;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, "Noto Sans Hebrew", "Noto Sans Arabic", "PingFang SC", "Microsoft YaHei", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, "Noto Sans Hebrew", "Noto Sans Arabic", "PingFang SC", "Microsoft YaHei", sans-serif;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--aegean); }
a:hover { color: var(--aegean-deep); }
:focus-visible { outline: 2px solid var(--aegean); outline-offset: 3px; }
h1, h2, h3 { color: var(--aegean-deep); font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.4rem; font-weight: 600; }
p { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.section { padding-block: clamp(64px, 9vw, 104px); }
.wash { background: var(--wash); }
.night { background: var(--night); color: var(--night-ink); }
.night h1, .night h2, .night h3, .hero h1 { color: #FFFFFF; }
.night .lead, .night p { color: var(--night-muted); }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--aegean); }
.night .eyebrow { color: #7FC8E8; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 6vw, 72px); align-items: center; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--aegean); color: #FFFFFF; }
.btn-primary:hover { background: var(--aegean-deep); color: #FFFFFF; }
.btn-ghost { border-color: #B9C8D2; color: var(--ink); background: var(--bg); }
.btn-ghost:hover { border-color: var(--aegean); color: var(--aegean); }
.btn-light { background: #FFFFFF; color: var(--ink); }
.arch { border-radius: 999px 999px 12px 12px / 220px 220px 12px 12px; object-fit: cover; width: 100%; }
.photo { border-radius: 12px; object-fit: cover; width: 100%; }

/* Top bar + header */
.topbar { background: var(--night); color: var(--night-ink); font-size: 0.82rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; padding-block: 6px; }
.topbar a { color: var(--night-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.topbar a:hover { color: #FFFFFF; text-decoration: underline; }
.topbar .contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; }
.lang { display: flex; align-items: center; gap: 8px; color: var(--night-muted); }
.lang select { min-height: 32px; background: var(--night); color: #FFFFFF; border: 1px solid #2E5A82; border-radius: 6px; padding: 0 8px; font: inherit; }
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.brand img { height: 58px; width: auto; max-width: none; align-self: flex-start; object-fit: contain; }
footer.site .brand { display: inline-flex; }
footer.site .brand img { height: 72px; width: auto; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1; }
.brand:hover { color: var(--ink); }
.brand b { font-family: var(--display); font-size: 1.75rem; font-weight: 600; letter-spacing: 0.02em; }
.brand small { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
nav.main { display: flex; align-items: center; gap: 4px 24px; font-size: 0.95rem; }
nav.main a.nl { color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
nav.main a.nl:hover, nav.main a.nl[aria-current="page"] { border-bottom-color: var(--aegean); }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  nav.main { display: none; position: absolute; inset: 100% 0 auto 0; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 8px var(--gutter-r) 20px var(--gutter); gap: 0; }
  nav.main.open { display: flex; }
  nav.main a.nl { border-bottom: 1px solid var(--line); }
  nav.main .btn { margin-top: 14px; }
}

/* Hero */
.hero { position: relative; color: #FFFFFF; background: var(--night); }
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,30,56,0.82) 0%, rgba(0,30,56,0.35) 55%, rgba(0,30,56,0.12) 100%); }
.hero .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; min-height: clamp(560px, 78vh, 760px); padding-block: 80px 56px; }
.hero h1 { max-width: 16ch; }
.hero .lead { color: #E3ECF1; }
.hero .eyebrow { color: #CFE2EE; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; font-weight: 600; }
.page-hero { padding-block: clamp(56px, 8vw, 88px) clamp(32px, 5vw, 48px); }

/* Info strip */
.strip { border-bottom: 1px solid var(--line); }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.strip li { padding: 22px 0; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 0.95rem; }
.strip svg { color: var(--aegean); flex: none; }

/* Grids */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.duo img:last-child { margin-top: 48px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.gallery img { height: 280px; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 16px; margin: 0; }
.specs div { border-top: 1px solid var(--line); padding-top: 12px; }
.specs dt { font-size: 0.82rem; color: var(--muted); }
.specs dd { margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); column-gap: 32px; }
.ticks li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.night .ticks li { border-bottom-color: #24527C; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 20px; }
.card { background: var(--wash); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aegean); }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; }
.principles div { border-top: 2px solid var(--aegean); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.principles h3 { font-family: var(--body); font-size: 1.05rem; }
.principles p { font-size: 0.95rem; color: var(--muted); }
.exp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #24527C; }
.exp-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid #24527C; color: var(--night-ink); text-decoration: none; }
.exp-list a:hover b { text-decoration: underline; }
.exp-list b { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
.exp-list span { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--night-muted); }
.exp-item { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: 40px; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.exp-item img { height: 340px; }
.pill { display: inline-flex; background: var(--bg); border: 1px solid #B9C8D2; border-radius: 999px; padding: 8px 18px; font-weight: 600; }
.post img { height: 220px; }
.post { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.post h3 { font-size: 1.6rem; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--aegean); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 20px; color: var(--muted); max-width: 70ch; }

/* Contact list */
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-list li { display: flex; flex-direction: column; }
.contact-list small { color: var(--muted); font-size: 0.8rem; }
.contact-list a, .contact-list span.v { font-weight: 600; font-size: 1.05rem; }

/* Footer */
footer.site { background: var(--night); color: var(--night-ink); font-size: 0.92rem; }
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 36px; padding-block: 64px 40px; }
footer.site h4 { margin: 0 0 12px; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--night-muted); font-weight: 600; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
footer.site a { color: var(--night-ink); text-decoration: none; }
footer.site a:hover { text-decoration: underline; color: #FFFFFF; }
footer.site .brand b, footer.site .brand { color: #FFFFFF; }
footer.site .brand small { color: var(--night-muted); }
footer.site p { color: var(--night-muted); margin-top: 14px; max-width: 34ch; }
.certs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btns:has(.cert-logo) { align-items: center; }
.certs span { border: 1px solid #2E5A82; border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; font-weight: 600; }
.legal { border-top: 1px solid #24527C; padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--night-muted); font-size: 0.82rem; }
.wa-float { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: calc(18px + env(safe-area-inset-right, 0px)); z-index: 25; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(20,40,55,0.28); }
.wa-float:hover { color: #FFFFFF; background: #17603C; }
[dir="rtl"] .wa-float { right: auto; left: calc(18px + env(safe-area-inset-left, 0px)); }
[dir="rtl"] .hero::after { background: linear-gradient(0deg, rgba(0,30,56,0.82) 0%, rgba(0,30,56,0.35) 55%, rgba(0,30,56,0.12) 100%); }
@media (max-width: 560px) {
  .duo img:last-child { margin-top: 24px; }
  .gallery img, .exp-item img { height: 240px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.lang-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.crumbs { font-size: 0.82rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.story { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.story-sec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: start; }
.story-sec:nth-child(even) .story-text { order: 2; }
.story-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 66ch; }
.story-text p { color: var(--muted); }
.story-img { height: 380px; position: sticky; top: 110px; }
@media (max-width: 760px) { .story-sec:nth-child(even) .story-text { order: 0; } .story-img { position: static; height: 260px; } }
.cert-logo { height: 84px; width: auto; background: #FFFFFF; border-radius: 10px; padding: 6px; }
footer .cert-logo { height: 60px; }
.certs .c { border: 1px solid #2E5A82; border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; font-weight: 600; }
.island { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.island img { height: 240px; }
.island img:first-child { grid-column: span 2; height: 300px; }
.credits { font-size: 0.75rem; color: var(--night-muted); padding-bottom: 16px; max-width: none !important; }
.credits a { color: var(--night-muted) !important; text-decoration: underline; }
.gallery img { cursor: zoom-in; transition: opacity .2s; }
.gallery img:hover { opacity: .9; }
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(0,20,36,0.94); display: flex; align-items: center; justify-content: center; padding: calc(56px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(56px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lb[hidden] { display: none; }
.lb img { max-width: min(1400px, 100%); max-height: 100%; width: auto; height: auto; border-radius: 8px; object-fit: contain; }
.lb button { position: absolute; background: rgba(255,255,255,0.12); color: #FFFFFF; border: 0; border-radius: 999px; width: 48px; height: 48px; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb button:hover { background: rgba(255,255,255,0.25); }
.lb-x { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
.lb-prev { left: calc(12px + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lb-next { right: calc(12px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
[dir="rtl"] .lb-prev { left: auto; right: calc(12px + env(safe-area-inset-right, 0px)); transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .lb-next { right: auto; left: calc(12px + env(safe-area-inset-left, 0px)); transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .lb-x { right: auto; left: calc(12px + env(safe-area-inset-left, 0px)); }

/* Journal articles */
.article { max-width: 780px; }
.prose { display: flex; flex-direction: column; gap: 18px; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: 22px; }
.prose p { font-size: 1.06rem; line-height: 1.75; }
.prose .hero-img { width: 100%; height: clamp(260px, 48vw, 460px); border-radius: 18px; }
.quick { background: var(--wash, #eef6fa); border-inline-start: 4px solid var(--aegean); border-radius: 14px; padding: 20px 24px; }
.quick h2 { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aegean); margin: 0 0 8px; }
.quick p { margin: 0; }
a.plain { color: inherit; text-decoration: none; }
a.plain:hover { color: var(--aegean); }
.island-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.island-gal img { height: 420px; }

@media (max-width: 760px) { .island-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .island-gal img { height: 240px; } }

/* Cookie consent */
.cc { position: fixed; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; justify-content: center; }
.cc[hidden] { display: none; }
.cc-in { background: #FFFFFF; color: var(--ink, #1B2A38); border: 1px solid var(--line, #DCE4EA); border-radius: 18px; box-shadow: 0 18px 48px rgba(0, 35, 70, 0.22); padding: 20px 22px; max-width: 920px; width: 100%; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.cc-txt { flex: 1 1 380px; min-width: 0; }
.cc-txt p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.cc-txt .cc-t { font-weight: 700; font-size: 1rem; margin-bottom: 4px; color: var(--night, #003764); }
.cc-txt a { color: var(--aegean); }
.cc-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.legal a, .legal .linkbtn { color: inherit; }