/* Froshay Fine Art — canvas rebuild of the Wix site.
   Elements are absolutely positioned at the coordinates measured on the live Wix site.
   Desktop canvas: 980px wide, centered. Mobile canvas: 320px wide, scaled to the phone width.
   Text styles (fonts, sizes, colors per run) live in runs.css, generated with the pages. */
:root {
  --teal: #9fe0e3; --teal-deep: #317f81; --grey: #605e5e;
  --canvas-d: 980px; --canvas-m: 320px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; font-family: "Poppins", Arial, sans-serif; font-size: 15px; line-height: 1.4; color: #000; background: #cfe9ea; min-width: 320px; }
a { color: inherit; }
img { display: block; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem; z-index: 100; }
.skip:focus { left: 8px; }

/* fixed photo background (Wix: fixed, cover) */
.bg { position: fixed; inset: 0; z-index: -1; background: #cfe9ea url("/images/background.jpg") center top / cover no-repeat; }

/* ---------- canvas mechanics ---------- */
.cv { position: relative; margin: 0 auto; }
.layout-d .cv { width: var(--canvas-d); }
.layout-m .cv { width: var(--canvas-m); }
.cv > * { position: absolute; }
.cv > .full { left: 0; right: 0; }
.layout-d .cv > .full { left: calc(50% - 50vw); right: calc(50% - 50vw); }
.bx { pointer-events: none; }
.bx .bgi { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt { pointer-events: auto; }
.rt p, .rt h1, .rt h2, .rt h3, .rt h4, .rt h5, .rt h6, .rt ul, .rt ol { margin: 0; }
.rt ul, .rt ol { padding-left: 24px; }
.rt li { margin: 0; }
.rt .sp { display: block; }
.rt a { text-decoration: none; }
.hdr-d .rt h1 { white-space: nowrap; letter-spacing: -0.5px; }
.im { overflow: visible; }
.im img, .im a { position: absolute; }
.im a { display: block; }
.im .fr { position: absolute; display: block; pointer-events: none; }
.hl { height: 0 !important; }
.btn { display: block; text-align: center; color: #fff; text-decoration: none; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.btn:hover { filter: brightness(1.08); }
.yt, .map { border: 0; }
.vi svg { width: 100%; height: 100%; }
.ins { position: absolute; }
.ins .yt { position: absolute; }
a.lb { cursor: zoom-in; }

/* ---------- which layout shows ---------- */
.layout-m { display: none; }
@media (max-width: 749px) {
  .layout-d { display: none; }
  .layout-m { display: block; zoom: calc(100vw / 320); }
}
@media (min-width: 750px) and (max-width: 999px) {
  .layout-d { zoom: calc(100vw / 1000); }
}

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--teal); }
.hdr-m { background: var(--teal); }
.nav-d { position: absolute; left: 0; width: 100%; height: 46px; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 46px; gap: 0; }
.menu > li { position: relative; }
.menu > li > a { display: block; padding: 0 10px; line-height: 46px; font-family: "Lato", sans-serif; font-weight: 300; font-size: 14px; color: #000; text-decoration: none; white-space: nowrap; }
.menu > li.active > a, .menu > li > a:hover { color: var(--teal-deep); }
.sub-toggle { display: none; }
.menu ul { list-style: none; margin: 0; padding: 6px 0; position: absolute; left: 0; top: 46px; min-width: 240px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.15); opacity: 0; visibility: hidden; z-index: 60; }
.menu li:hover > ul, .menu li:focus-within > ul { opacity: 1; visibility: visible; }
.menu ul a { display: block; padding: 7px 16px; font-family: "Lato", sans-serif; font-weight: 300; font-size: 14px; color: #000; text-decoration: none; }
.menu ul a:hover, .menu ul a.active { color: var(--teal-deep); background: #eef8f8; }
/* mobile header: hamburger + full-screen menu, as on Wix */
.nav-toggle { position: absolute; left: 254px; top: 147px; width: 50px; height: 50px; background: #fff; border: 0; border-radius: 0; cursor: pointer; padding: 0; z-index: 2; }
.nav-toggle span { position: absolute; left: 14px; width: 22px; height: 2px; background: #000; }
.nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 24px; } .nav-toggle span:nth-child(3) { top: 32px; }
.nav-toggle b { position: absolute; left: -9999px; }
.nav-m { position: fixed; inset: 0; background: #fff; z-index: 100; overflow: auto; padding: 60px 0 40px; }
.nav-m[hidden] { display: none; }
.nav-close { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border: 0; background: none; font-size: 32px; cursor: pointer; }
.nav-m .menu { display: block; height: auto; }
.nav-m .menu > li > a { font-size: 17px; line-height: 49px; text-align: center; padding: 0; }
.nav-m .menu > li.active > a { color: rgb(49,127,129); }
.nav-m .menu > li { display: flex; flex-wrap: wrap; justify-content: center; }
.nav-m .menu > li > a { flex: 1; }
.nav-m .sub-toggle { display: inline-block; background: none; border: 0; font-size: 18px; width: 44px; cursor: pointer; }
.nav-m .menu ul { position: static; opacity: 1; visibility: visible; display: none; width: 100%; box-shadow: none; background: #f6fbfb; }
.nav-m .menu li.sub-open > ul { display: block; }
.nav-m .menu ul a { text-align: center; font-size: 16px; line-height: 40px; padding: 0; }

/* ---------- footer ---------- */
.ftr { background: rgba(87,187,191,.56); }

/* ---------- forms ---------- */
.fm form { position: absolute; inset: 0; }
.fm label, .fm input, .fm textarea, .fm button { position: absolute; font-family: "Lato", sans-serif; font-size: 14px; }
.fm label { color: var(--grey); }
.fm input, .fm textarea { padding: 6px 8px; color: #000; }
.fm .hp { left: -9999px; }
.fm .form-status { position: absolute; left: 18px; bottom: -28px; margin: 0; font-size: 13px; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(10,30,30,.92); z-index: 200; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer; padding: 10px 18px; opacity: .85; }
.lb-close { top: 8px; right: 12px; }
.lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 4px; top: 50%; transform: translateY(-50%); }
.lb-caption { color: #fff; margin: 12px 0 0; font-size: .9rem; }
