/* floriyacht.com — Aegean direction, full-site mockup */
:root{
  --sea: oklch(34% 0.085 252);
  --sea-deep: oklch(26% 0.07 254);
  --sea-mid: oklch(44% 0.08 250);
  --foam: oklch(98.4% 0.004 240);
  --mist: oklch(94.5% 0.01 240);
  --aqua: oklch(72% 0.09 210);
  --ink: oklch(27% 0.03 252);
  --ink-soft: oklch(47% 0.025 250);
  --line: oklch(88% 0.015 240);
  --pad: clamp(24px, 5vw, 80px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--foam);color:var(--ink);font-family:'General Sans',sans-serif;font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Zodiak',serif;font-weight:300}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.k{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:500}
.k.aqua{color:var(--aqua)}
.k.sea{color:var(--sea)}

/* ---------- nav ---------- */
nav{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);color:#fff;transition:background .25s}
nav.solid{position:sticky;background:var(--sea);}
.wordmark{font-family:'Zodiak',serif;font-size:24px;letter-spacing:.4em}
nav ul{display:flex;gap:30px;list-style:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;align-items:center}
nav ul a{opacity:.85}
nav ul a:hover,nav ul a[aria-current]{opacity:1;border-bottom:1px solid var(--aqua);padding-bottom:3px}
nav .cta{background:#fff;color:var(--sea);padding:11px 24px;border-radius:2px;font-weight:500;opacity:1}
nav .burger{display:none;font-size:22px;background:none;border:none;color:#fff}

/* ---------- page hero (inner pages) ---------- */
.page-hero{position:relative;height:52svh;min-height:380px;background:var(--sea)}
.page-hero img{width:100%;height:100%;object-fit:cover;opacity:.85}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, oklch(30% .08 252 / .5), transparent 45%, oklch(24% .07 254 / .55) 100%)}
.page-hero .copy{position:absolute;z-index:2;inset:auto 0 0 0;padding:0 var(--pad) clamp(36px,6vh,64px);color:#fff}
.page-hero h1{font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:.04em}
.page-hero p{margin-top:14px;max-width:56ch;opacity:.92}

/* ---------- home hero ---------- */
.hero{position:relative;height:100svh;min-height:660px;background:var(--sea)}
.hero img,.hero video{width:100%;height:100%;object-fit:cover;opacity:.92}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, oklch(30% .08 252 / .35), transparent 35%, oklch(24% .07 254 / .6) 100%)}
.hero-copy{position:absolute;z-index:2;inset:auto 0 0 0;padding:0 var(--pad) clamp(44px,8vh,92px);color:#fff;text-align:center}
.hero-copy h1{font-size:clamp(48px,9vw,132px);line-height:.98;letter-spacing:.06em}
.hero-copy p{margin:22px auto 0;font-size:clamp(15px,1.6vw,20px);max-width:52ch;opacity:.94}
.hero-copy .btns{margin-top:32px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ---------- shared blocks ---------- */
.band{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--foam)}
.band div{padding:30px clamp(18px,2.5vw,40px);text-align:center;border-left:1px solid var(--line)}
.band div:first-child{border-left:none}
.band .n{font-family:'Zodiak',serif;font-size:clamp(24px,2.8vw,38px);color:var(--sea)}
.band .u{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}

.section{padding:clamp(80px,12vh,150px) var(--pad)}
.section.tight{padding-block:clamp(56px,8vh,96px)}
.center{text-align:center}
.center h2{font-size:clamp(32px,4.4vw,60px);line-height:1.12;max-width:24ch;margin:16px auto 0}
.center p.lead{max-width:62ch;margin:24px auto 0;color:var(--ink-soft);font-size:18px}

.btn{display:inline-block;background:var(--sea);color:#fff;padding:16px 40px;border-radius:2px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.btn:hover{background:var(--sea-deep)}
.btn.ghost{background:transparent;border:1px solid var(--sea);color:var(--sea)}
.btn.light{background:#fff;color:var(--sea)}
.btn.ghost-light{background:transparent;border:1px solid rgba(255,255,255,.65);color:#fff}

/* film strip */
.filmstrip{display:flex;gap:10px;overflow-x:auto;padding:0 var(--pad) 12px;scroll-snap-type:x mandatory}
.filmstrip figure{flex:0 0 min(78vw,560px);scroll-snap-align:center}
.filmstrip img{aspect-ratio:4/3;object-fit:cover;width:100%}
.filmstrip figcaption{padding:12px 2px;font-size:14px;color:var(--ink-soft)}

/* split band */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:82svh}
.split .img{position:relative}
.split .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .txt{background:var(--sea);color:var(--foam);display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,6vw,110px)}
.split h2{font-size:clamp(30px,3.6vw,52px);line-height:1.1;margin-top:16px}
.split p{margin-top:20px;opacity:.88;max-width:48ch}
.split ul{margin-top:30px;list-style:none;border-top:1px solid oklch(48% .06 250)}
.split li{padding:13px 0;border-bottom:1px solid oklch(48% .06 250);display:flex;justify-content:space-between;gap:16px;font-size:15px}
.split li span:last-child{opacity:.75;text-align:right}

/* card grid w/ caption overlay */
.cabgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2vw,28px)}
.cabgrid figure{position:relative}
.cabgrid img{aspect-ratio:3/4;object-fit:cover;width:100%}
.cabgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 18px;color:#fff;background:linear-gradient(to top, oklch(25% .06 252 / .75), transparent);font-family:'Zodiak',serif;font-size:20px;letter-spacing:.04em}
.cabgrid figcaption small{display:block;font-family:'General Sans';font-size:13px;letter-spacing:.02em;opacity:.85;margin-top:2px}

/* gallery masonry-ish */
.gallery-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.gallery-tabs a{border:1px solid var(--line);padding:10px 22px;border-radius:99px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.gallery-tabs a.on{background:var(--sea);border-color:var(--sea);color:#fff}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:36px}
.ggrid figure{overflow:hidden;position:relative}
.ggrid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ggrid figure:hover img{transform:scale(1.035)}
.ggrid figure.wide{grid-column:span 2}
.ggrid figure.wide img{aspect-ratio:8/3.05}
.gsection{margin-top:clamp(48px,7vh,80px)}
.gsection h2{font-size:clamp(26px,3vw,40px)}
.gsection .k{display:block;margin-bottom:8px}

/* spec tables */
.spec-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(32px,5vw,72px)}
.spec-block h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:18px}
.spec-block table{width:100%;border-collapse:collapse;font-size:15px}
.spec-block td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec-block td:first-child{color:var(--ink-soft);width:46%;padding-right:16px}
.spec-block td:last-child{font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chips span{border:1px solid var(--line);border-radius:99px;padding:8px 18px;font-size:14px;color:var(--ink-soft)}

/* itinerary */
.route{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.route .sticky{position:sticky;top:96px}
.route .sticky img{aspect-ratio:4/5;object-fit:cover;width:100%}
.route h2{font-size:clamp(30px,3.6vw,48px);margin-top:12px}
.route .meta{display:flex;gap:28px;margin-top:18px;font-size:14px;color:var(--ink-soft);flex-wrap:wrap}
.days{border-top:1px solid var(--line)}
.day{display:grid;grid-template-columns:74px minmax(0,1fr);gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.day .dn{font-family:'Zodiak',serif;font-size:15px;color:var(--sea);letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.day h3{font-size:21px}
.day p{color:var(--ink-soft);font-size:15px;margin-top:6px;max-width:60ch}
.day .nm{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua);margin-top:8px}

/* rates page */
.rate-hero{background:var(--mist)}
.rate-card{background:#fff;border:1px solid var(--line);padding:clamp(28px,4vw,56px)}
.rate-card .fee{font-family:'Zodiak',serif;font-size:clamp(36px,4.6vw,60px);color:var(--sea)}
.rate-card .terms{color:var(--ink-soft);font-size:15px;margin-top:10px}
.rate-card table{width:100%;border-collapse:collapse;margin-top:28px;font-size:15px}
.rate-card td{padding:13px 0;border-bottom:1px solid var(--line)}
.rate-card td:last-child{text-align:right;color:var(--ink-soft)}
.rates-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
.enq-card{background:var(--sea);color:var(--foam);padding:clamp(28px,4vw,56px)}
.enq-card h2{font-size:clamp(28px,3vw,40px)}
.enq-card p{opacity:.85;margin-top:10px;font-size:15px}
.field{margin-top:20px}
.field label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;border:1px solid oklch(50% .06 250);background:oklch(30% .075 252);padding:13px 14px;font:inherit;color:#fff;border-radius:2px}
.field input::placeholder,.field textarea::placeholder{color:oklch(72% .03 250)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.enq-card .btn{background:#fff;color:var(--sea);margin-top:28px}
.enq-card .wa{display:inline-block;margin-top:28px;margin-left:12px;border:1px solid oklch(65% .06 220);color:#fff;padding:15px 30px;border-radius:2px;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{font-family:'Zodiak',serif;font-size:20px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--sea);font-size:24px;font-family:'General Sans'}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--ink-soft);font-size:15px;max-width:64ch}

/* pre-footer CTA + footer */
.prefoot{background:var(--sea);color:#fff;text-align:center;padding:clamp(80px,11vh,130px) var(--pad)}
.prefoot h2{font-size:clamp(30px,4vw,54px)}
.prefoot p{opacity:.85;margin:16px auto 0;max-width:52ch}
.prefoot .btns{margin-top:32px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
footer{background:var(--sea-deep);color:oklch(85% .02 240);padding:60px var(--pad) 40px;font-size:14px}
footer .cols{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
footer .wordmark{font-size:22px;color:#fff}
footer ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap}
footer .fine{margin-top:36px;padding-top:20px;border-top:1px solid oklch(36% .05 252);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;opacity:.7}

@media(max-width:920px){
  nav ul{display:none}
  nav .burger{display:block}
  .band{grid-template-columns:repeat(2,1fr)}
  .band div:nth-child(odd){border-left:none}
  .split{grid-template-columns:1fr;min-height:0}
  .split .img{min-height:62vw}
  .route{grid-template-columns:1fr}
  .route .sticky{position:static}
  .rates-grid{grid-template-columns:1fr}
  .ggrid figure.wide{grid-column:span 1}
  .ggrid figure.wide img{aspect-ratio:4/3}
  .f2{grid-template-columns:1fr}
}

/* Enquiry form wiring (2026-07-23) */
button.btn{border:0;cursor:pointer;font:inherit;font-size:14px;letter-spacing:.12em}
button.btn:disabled{opacity:.6;cursor:default}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.enq-status{margin-top:18px;font-size:14px;line-height:1.5}
.enq-status.ok{color:oklch(85% .09 175)}
.enq-status.err{color:oklch(84% .07 45)}