/* Fort Mykonos Hotspring Resort: Aegean blue + whitewash + the gold of their logo medallion.
   Motif: whitewashed arches with a gold hairline, as on their real Mykonos-style walls and shutters. */
@font-face { font-family: "Cormorant"; src: url(/fonts/cormorant-normal.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(/fonts/cormorant-italic.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-400-700.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --aegean: #0d3a7a;
  --navy: #0a2350;
  --deep: #071a3c;
  --sky: #2f7fd0;
  --gold: #d4a64a;
  --gold-2: #f0cf82;
  --white: #fbfaf6;
  --stone: #eef1f5;
  --ink: #12203a;
  --muted: #4a5875;
  --serif: "Cormorant", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --k-ink: var(--ink);
  --k-paper: #ffffff;
  --k-surface: var(--stone);
  --k-accent: var(--aegean);
  --k-accent-2: var(--gold);
  --k-accent-ink: #fff;
  --k-dark: var(--navy);
  --k-font: var(--sans);
  --k-display: var(--serif);
  --k-display-weight: 600;
  --k-head-em: var(--sky);
  --k-dock-bg: var(--deep);
  --k-dock-cta-bg: var(--gold);
  --k-dock-cta-ink: var(--deep);
  --k-fab-bg: var(--aegean);
  --k-radius: 14px;
  --k-radius-btn: 999px;
  --k-sec-pad: clamp(44px, 7vw, 84px);
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.6 var(--sans); overflow-x: hidden; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); line-height: 1.02; margin: 0 0 14px; color: var(--navy); }
h2 em, h1 em { font-style: italic; color: var(--sky); font-weight: 500; }
h3 { font-size: 1.6rem; margin: 0 0 8px; color: var(--navy); }
.fm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.fm-eyebrow { font: 600 .74rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.fm-intro { max-width: 40em; color: var(--muted); margin: 0 0 22px; }

/* buttons */
.fm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 .95rem/1 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s, background .2s; }
.fm-btn:hover { transform: translateY(-1px); }
.fm-btn--gold { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--deep); box-shadow: 0 8px 22px -10px rgba(212,166,74,.9); }
.fm-btn--line { border-color: rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.06); }
.fm-btn--line-dark { border-color: var(--aegean); color: var(--aegean); background: transparent; }
.fm-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* the arch motif */
.fm-arch { position: relative; border-radius: 999px 999px 18px 18px / 46% 46% 18px 18px; overflow: hidden; background: var(--stone); box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(212,166,74,.7), 0 26px 50px -30px rgba(7,26,60,.6); }
.fm-arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fm-arch--tall { aspect-ratio: 4 / 5; }

/* HERO */
.fm-hero { position: relative; background: radial-gradient(120% 90% at 80% 0%, #164b98 0%, var(--navy) 55%, var(--deep) 100%); color: #fff; display: grid; gap: 0; overflow: hidden; }
.fm-hero__arch { position: relative; aspect-ratio: 4 / 4.2; max-height: 74vh; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 9% 9%; }
/* Sun over Pansol: day photo over night photo; --day (1 → 0) crossfades, --warm adds golden hour, --dim lowers the light */
.fm-sky { --day: 1; --warm: 0; --dim: 0; background: var(--deep); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.fm-sky figure { position: absolute; inset: 0; margin: 0; }
.fm-sky img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.fm-sky__day { opacity: var(--day); transition: opacity .5s ease; }
.fm-sky__day img { filter: brightness(calc(1 - var(--dim) * .32)) saturate(calc(1 + var(--warm) * .25)) sepia(calc(var(--warm) * .28)); transition: filter .5s ease; }
.fm-sky__night img { object-position: 30% 50%; filter: brightness(calc(1.04 - var(--dim) * .1)); }
.fm-sky__warm { position: absolute; inset: 0; pointer-events: none; opacity: var(--warm); transition: opacity .5s ease; background: radial-gradient(90% 60% at 70% 8%, rgba(255,196,110,.55), transparent 70%), linear-gradient(180deg, rgba(255,150,70,.22), rgba(120,40,90,.18) 70%, rgba(7,26,60,.25)); mix-blend-mode: soft-light; }
.fm-sky.is-dragging .fm-sky__day, .fm-sky.is-dragging .fm-sky__day img, .fm-sky.is-dragging .fm-sky__warm { transition: none; }
.fm-steam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; mix-blend-mode: screen; }
.fm-steam.is-on { opacity: 1; }

/* the sun dial (a real range input with a gold sun thumb) */
.fm-dial { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2; padding: 10px 14px 10px; border-radius: 18px; background: rgba(7,26,60,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(240,207,130,.4); color: #fff; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; }
.fm-dial__now { margin: 0; min-width: 0; font-size: .76rem; line-height: 1.3; color: rgba(255,255,255,.88); }
.fm-dial__now b { display: block; font: 600 1.35rem/1.05 var(--serif); color: var(--gold-2); }
.fm-dial__now span { display: block; min-height: 2.6em; }
.fm-dial__go { grid-column: 2; grid-row: 1; font: 600 .74rem/1 var(--sans); color: var(--deep); background: linear-gradient(135deg, var(--gold-2), var(--gold)); padding: 9px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.fm-dial__track { grid-column: 1 / -1; display: block; margin: 6px 0 0; }
.fm-dial__ends { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 0; font: 600 .6rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.fm-dial input { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; touch-action: none; }
.fm-dial input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f6e3a8, #f0cf82 30%, #e58a4e 66%, #5a3d7a 76%, #1b2f66 86%, #0b1636); }
.fm-dial input::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f6e3a8, #f0cf82 30%, #e58a4e 66%, #5a3d7a 76%, #1b2f66 86%, #0b1636); }
.fm-dial input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11.5px; border-radius: 50%; border: 0; background: radial-gradient(circle at 38% 35%, #fff6d6, #f0cf82 45%, #d4a64a 75%); box-shadow: 0 0 0 4px rgba(240,207,130,.25), 0 0 22px 6px rgba(255,205,120,.55); }
.fm-dial input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 0; background: radial-gradient(circle at 38% 35%, #fff6d6, #f0cf82 45%, #d4a64a 75%); box-shadow: 0 0 0 4px rgba(240,207,130,.25), 0 0 22px 6px rgba(255,205,120,.55); }
.fm-sky.is-night .fm-dial input::-webkit-slider-thumb { background: radial-gradient(circle at 38% 35%, #ffffff, #dfe6f5 50%, #9fb0d6 80%); box-shadow: 0 0 0 4px rgba(200,215,255,.2), 0 0 20px 5px rgba(190,210,255,.45); }
.fm-sky.is-night .fm-dial input::-moz-range-thumb { background: radial-gradient(circle at 38% 35%, #ffffff, #dfe6f5 50%, #9fb0d6 80%); box-shadow: 0 0 0 4px rgba(200,215,255,.2), 0 0 20px 5px rgba(190,210,255,.45); }
.fm-dial input:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 8px; }
.fm-hero__text { position: relative; padding: 0 20px 34px; margin-top: -46px; z-index: 3; }
.fm-medal { display: block; width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold), 0 14px 30px -10px rgba(0,0,0,.6); overflow: hidden; margin: 0 0 16px; background: var(--deep); }
.fm-medal img { width: 100%; height: 100%; display: block; }
.fm-hero .fm-eyebrow { color: var(--gold-2); }
.fm-hero h1 { font-size: clamp(2.7rem, 11vw, 5.4rem); line-height: .96; margin: 0; color: #fff; }
.fm-hero h1 em { color: var(--gold-2); display: block; }
.fm-lede { font-size: 1.06rem; color: rgba(255,255,255,.86); max-width: 32em; margin: 16px 0 0; }
.fm-facts { list-style: none; padding: 18px 0 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: 1px solid rgba(240,207,130,.35); }
.fm-facts b { display: block; font: 600 1.9rem/1 var(--serif); color: var(--gold-2); }
.fm-facts span { font-size: .76rem; line-height: 1.3; color: rgba(255,255,255,.75); display: block; margin-top: 4px; }

@media (min-width: 900px) {
  .fm-hero { grid-template-columns: 1fr 1.05fr; align-items: center; min-height: 88vh; padding: 40px 0 40px; }
  .fm-hero__arch { order: 2; aspect-ratio: 4 / 5; max-height: 80vh; margin: 0 40px 0 0; border-radius: 999px 999px 22px 22px / 42% 42% 22px 22px; box-shadow: 0 0 0 8px rgba(255,255,255,.95), 0 0 0 9px var(--gold), 0 40px 80px -30px #000; }
  .fm-hero__text { order: 1; margin: 0; padding: 0 20px 0 max(20px, calc((100vw - 1180px) / 2 + 20px)); }
  .fm-dial { top: auto; bottom: 34px; left: 13%; right: 13%; }
}

/* POOLS */
.fm-pools { padding: var(--k-sec-pad) 0; background: var(--white); }
.fm-split { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .fm-split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.fm-spec { margin: 20px 0 0; display: grid; gap: 0; }
.fm-spec div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #dfe5ee; }
.fm-spec dt { font-weight: 600; color: var(--navy); }
.fm-spec dd { margin: 0; color: var(--muted); text-align: right; }

/* VILLA */
.fm-villa { padding: var(--k-sec-pad) 0; background: var(--stone); }
.fm-rooms { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 20px 26px; scrollbar-width: thin; }
.fm-room { flex: 0 0 76%; scroll-snap-align: start; margin: 0; }
.fm-room .fm-arch { aspect-ratio: 4 / 4.6; }
.fm-room figcaption { padding: 14px 4px 0; }
.fm-room b { display: block; font: 600 1.5rem/1.1 var(--serif); color: var(--navy); }
.fm-room span { display: block; color: var(--ink); }
.fm-room small { color: var(--muted); }
@media (min-width: 900px) { .fm-rooms { max-width: 1180px; margin: 0 auto; overflow: visible; } .fm-room { flex: 1 1 0; } }
.fm-amen { display: grid; gap: 18px; margin-top: 26px; }
.fm-amen__card { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; background: #fff; border: 1px solid #dfe5ee; border-radius: 18px; padding: 12px; }
.fm-amen__photo { aspect-ratio: 4 / 5; border-radius: 999px 999px 10px 10px / 40% 40% 10px 10px; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(212,166,74,.7); }
.fm-amen__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-amen__body h3 { font-size: 1.4rem; margin: 2px 0 4px; }
.fm-amen .fm-list { margin: 0; font-size: .93rem; }
.fm-amen .fm-list li { padding: 4px 0 4px 20px; }
.fm-amen .fm-list li::before { top: 12px; }
@media (min-width: 900px) { .fm-amen { grid-template-columns: 1fr 1fr; gap: 22px; } .fm-amen__card { grid-template-columns: 170px 1fr; padding: 16px; } }
.fm-list { margin: 0 0 18px; padding: 0; list-style: none; }
.fm-list li { padding: 7px 0 7px 22px; position: relative; }
.fm-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(212,166,74,.2); }

/* GALLERY */
.fm-gallery { padding: var(--k-sec-pad) 0; background: var(--white); }
.fm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; }
.fm-chips button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #c9d3e2; background: #fff; color: var(--navy); font: 600 .88rem/1 var(--sans); cursor: pointer; }
.fm-chips button.is-on { background: var(--aegean); border-color: var(--aegean); color: #fff; }
.fm-masonry { columns: 2; column-gap: 10px; }
@media (min-width: 900px) { .fm-masonry { columns: 4; column-gap: 14px; } }
.fm-tile { display: block; width: 100%; padding: 0; margin: 0 0 10px; border: 0; background: var(--stone); border-radius: 14px; overflow: hidden; cursor: zoom-in; break-inside: avoid; }
.fm-tile img { display: block; width: 100%; height: auto; transition: transform .5s; }
.fm-tile:hover img { transform: scale(1.04); }
.fm-tile:nth-child(5n+1) img { aspect-ratio: 3 / 4; object-fit: cover; }
.fm-tile[hidden] { display: none; }
.fm-more { margin-top: 14px; text-align: center; }

.fm-lb { position: fixed; inset: 0; z-index: 90; background: rgba(5,15,36,.94); display: grid; place-items: center; padding: 56px 12px 90px; }
.fm-lb[hidden] { display: none; }
.fm-lb figure { margin: 0; max-width: min(1200px, 100%); }
.fm-lb img { max-width: 100%; max-height: 74vh; display: block; margin: 0 auto; border-radius: 10px; }
.fm-lb figcaption { color: #fff; text-align: center; margin-top: 10px; font-size: .95rem; }
.fm-lb__x { position: absolute; top: 8px; right: 10px; width: 48px; height: 48px; font-size: 2rem; color: #fff; background: none; border: 0; cursor: pointer; }
.fm-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; font-size: 2.6rem; color: #fff; background: rgba(255,255,255,.08); border: 0; border-radius: 10px; cursor: pointer; }
.fm-lb__prev { left: 6px; } .fm-lb__next { right: 6px; }
.fm-lb__book { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); }

/* PLANNER */
.fm-plan { padding: var(--k-sec-pad) 0; background: linear-gradient(180deg, var(--stone), #fff); }
.fm-stays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 18px; }
.fm-stay { text-align: left; background: #fff; border: 1.5px solid #d4dcea; border-radius: 120px 120px 16px 16px / 70px 70px 16px 16px; padding: 8px 8px 14px; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 3px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.fm-stay__img { display: block; aspect-ratio: 1 / 1; border-radius: 120px 120px 10px 10px / 70px 70px 10px 10px; overflow: hidden; margin-bottom: 8px; }
.fm-stay__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-stay b { font: 600 1.25rem/1.05 var(--serif); color: var(--navy); padding: 0 4px; }
.fm-stay__time { font: 600 .8rem/1.2 var(--sans); color: var(--aegean); padding: 0 4px; }
.fm-stay__time i { font-style: normal; color: var(--gold); }
.fm-stay small { color: var(--muted); font-size: .78rem; line-height: 1.3; padding: 0 4px; display: none; }
.fm-stay.is-on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,166,74,.35), 0 18px 30px -18px rgba(13,58,122,.5); transform: translateY(-2px); }
@media (min-width: 700px) { .fm-stays { gap: 18px; } .fm-stay small { display: block; } .fm-stay { padding: 10px 10px 18px; } }
.fm-planner { display: grid; gap: 16px; }
@media (min-width: 900px) { .fm-planner { grid-template-columns: .9fr 1.1fr; gap: 26px; align-items: start; } }
.fm-planner__in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #fff; border: 1px solid #dbe2ee; border-radius: 16px; padding: 16px; }
.fm-planner__in label { display: grid; gap: 6px; font: 600 .78rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.fm-planner__in input[type=date], .fm-planner__in select { min-height: 46px; border: 1.5px solid #cdd6e4; border-radius: 10px; padding: 0 10px; font: 500 1rem var(--sans); color: var(--ink); background: #fff; width: 100%; box-sizing: border-box; min-width: 0; }
.fm-step { display: flex; align-items: center; border: 1.5px solid #cdd6e4; border-radius: 10px; min-height: 46px; overflow: hidden; }
.fm-step button { width: 46px; height: 46px; border: 0; background: var(--stone); font-size: 1.3rem; color: var(--aegean); cursor: pointer; flex: none; }
.fm-step output { flex: 1; text-align: center; font: 600 1.1rem var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; }
.fm-check { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 10px; min-height: 44px; text-transform: none !important; letter-spacing: 0 !important; font-size: .95rem !important; color: var(--ink) !important; }
.fm-check input { width: 22px; height: 22px; accent-color: var(--aegean); }
.fm-note { background: var(--navy); color: #fff; border-radius: 18px; padding: 20px; position: relative; box-shadow: 0 0 0 1px rgba(240,207,130,.45) inset; }
.fm-note__k { font: 600 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 10px; }
#fm-msg { font: 500 1.28rem/1.4 var(--serif); margin: 0 0 16px; background: rgba(255,255,255,.07); border-radius: 14px 14px 14px 4px; padding: 14px 16px; }
.fm-note__go { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-note .fm-btn--line-dark { border-color: rgba(255,255,255,.55); color: #fff; }
.fm-note__s { display: block; margin-top: 12px; color: rgba(255,255,255,.7); font-size: .8rem; }

/* PROOF */
.fm-proof { background: var(--aegean); color: #fff; padding: 34px 0; }
.fm-proof__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.fm-proof__big b { font: 600 3.4rem/1 var(--serif); color: var(--gold-2); }
.fm-proof__big span { font: 600 .8rem var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-left: 8px; }
.fm-proof p { margin: 0; flex: 1 1 280px; font-size: 1.05rem; }

/* VISIT */
.fm-visit { padding: var(--k-sec-pad) 0; background: var(--white); }
.fm-addr { font-size: 1.1rem; margin: 0 0 6px; }
.fm-small { color: var(--muted); font-size: .9rem; margin-top: 14px; }
.fm-small a { color: var(--aegean); }

/* kit restyle */
.k-head { background: rgba(7,26,60,.92); backdrop-filter: blur(8px); }
.k-sec h2 em, .k-booking h2 em { color: var(--sky); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fm-sky__day, .fm-sky__day img, .fm-sky__warm { transition: none; } .fm-steam { display: none; } }