/* ═══════════════════════════════════════════════════════════════════
   BLUE ADRIATIC — public site
   Design language mirrors 15_market_intel/explorer_template.html:
   deep teal-navy, lagoon, champagne, Cormorant Garamond + Inter,
   glass cards, generous whitespace, CSS-gradient hero slideshow.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --navy:#0d2331; --navy2:#123140; --lagoon:#8fd8d4; --lagoon-dim:rgba(143,216,212,.16);
  --champagne:#c9a86a; --champagne-soft:#e8d5ae;
  --ink:#eef3f2; --muted:#9db1b9; --glass:rgba(255,255,255,.06);
  --line:rgba(201,168,106,.25); --line-aqua:rgba(143,216,212,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--navy);scroll-behavior:smooth}
html,body{color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:transparent}

/* ── hero background slideshow (pure CSS crossfade, ~28s cycle) ── */
.hero-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--navy)}
.hero-bg .slide{position:absolute;inset:0;opacity:0;background-size:cover;background-position:center;
  animation:heroFade 28s ease-in-out infinite}
.hero-bg .slide:nth-child(1){animation-delay:0s}
.hero-bg .slide:nth-child(2){animation-delay:7s}
.hero-bg .slide:nth-child(3){animation-delay:14s}
.hero-bg .slide:nth-child(4){animation-delay:21s}
@keyframes heroFade{
  0%{opacity:0} 8%{opacity:1} 25%{opacity:1} 34%{opacity:0} 100%{opacity:0}
}
/* four gradient scenes — "Boka lagoon at dawn" (shown while HERO_IMAGES is empty) */
.hero-bg .s1{background:
  radial-gradient(1100px 620px at 78% -6%, rgba(143,216,212,.17), transparent 60%),
  radial-gradient(820px 520px at 12% 104%, rgba(201,168,106,.10), transparent 55%),
  linear-gradient(180deg,#103042 0%,#0e2836 55%,#0d2331 100%)}
.hero-bg .s2{background:
  radial-gradient(1000px 720px at 18% 8%, rgba(143,216,212,.22), transparent 55%),
  radial-gradient(900px 520px at 92% 92%, rgba(94,164,170,.17), transparent 60%),
  linear-gradient(200deg,#123a46 0%,#0d2634 60%,#0c2230 100%)}
.hero-bg .s3{background:
  linear-gradient(180deg, rgba(201,168,106,.13) 0%, transparent 42%),
  radial-gradient(1200px 520px at 50% 112%, rgba(143,216,212,.15), transparent 65%),
  linear-gradient(160deg,#153542 0%,#0e2836 58%,#0d2331 100%)}
.hero-bg .s4{background:
  radial-gradient(920px 620px at 86% 18%, rgba(143,216,212,.11), transparent 55%),
  radial-gradient(720px 420px at 8% -12%, rgba(201,168,106,.08), transparent 50%),
  linear-gradient(180deg,#0d2634 0%,#0b2130 55%,#0a1d2a 100%)}
/* teal veil for readability — stronger when real photos are set */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,35,49,.30),rgba(13,35,49,.62))}
.hero-bg.photos::after{
  background:linear-gradient(180deg,rgba(10,30,42,.62),rgba(10,30,42,.86))}
@media (prefers-reduced-motion: reduce){
  .hero-bg .slide{animation:none}
  .hero-bg .slide:nth-child(1){opacity:1}
}

/* ── layout ── */
.wrap{max-width:1100px;margin:0 auto;padding:28px 20px 60px}

/* ── header / nav ── */
header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.brand .mono{font-family:'Cormorant Garamond',serif;font-size:28px;letter-spacing:.12em;color:var(--champagne)}
.brand small{color:var(--muted);font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.mainnav{display:flex;gap:4px;flex-wrap:wrap}
.mainnav a{color:var(--muted);text-decoration:none;font-size:13px;letter-spacing:.08em;
  padding:8px 14px;border-radius:22px;border:1px solid transparent;transition:.25s}
.mainnav a:hover{color:var(--lagoon);border-color:var(--lagoon-dim)}
.mainnav a.on{color:var(--navy);background:var(--champagne);border-color:var(--champagne);font-weight:500}
.lang{display:flex;gap:4px}
.lang button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:20px;
  padding:5px 12px;font-size:12px;cursor:pointer;letter-spacing:.08em}
.lang button.on{color:var(--navy);background:var(--champagne);border-color:var(--champagne)}

/* ── typography ── */
h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(34px,5.6vw,54px);line-height:1.1;margin:0 0 14px}
h1 em, h2 em{color:var(--champagne);font-style:italic}
h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(24px,3.6vw,34px);line-height:1.15;margin:0 0 10px}
.kicker{font-size:11px;letter-spacing:.32em;color:var(--lagoon);text-transform:uppercase;opacity:.85;margin-bottom:10px}
.sub{color:var(--muted);font-size:15px;max-width:620px;line-height:1.7}
p{line-height:1.7}

/* ── hero section ── */
.hero{padding:84px 0 56px;max-width:720px}
.hero .sub{margin:0 0 30px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ── buttons ── */
.cta{display:inline-block;background:var(--champagne);color:var(--navy);text-decoration:none;
  border-radius:14px;padding:13px 26px;font-size:13.5px;font-weight:500;letter-spacing:.05em;transition:.2s}
.cta:hover{background:var(--champagne-soft)}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-aqua)}
.cta.ghost:hover{color:var(--lagoon);border-color:var(--lagoon);background:transparent}

/* ── sections ── */
section{margin:56px 0}
.section-head{max-width:640px;margin-bottom:30px}

/* ── glass cards / pillar grid ── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:820px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
.gcard{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid var(--line-aqua);border-radius:22px;padding:26px 24px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(4,18,26,.35);transition:border-color .3s}
.gcard:hover{border-color:var(--line)}
.gcard .ic{font-size:26px;color:var(--lagoon);margin-bottom:14px;display:block}
.gcard h3{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:600;line-height:1.2;margin-bottom:8px}
.gcard p{color:var(--muted);font-size:13.5px;line-height:1.65}
.gcard .more{display:inline-block;margin-top:14px;color:var(--champagne);text-decoration:none;font-size:12.5px;letter-spacing:.06em}
.gcard .more:hover{color:var(--champagne-soft)}

/* ── quote block ── */
.quote{margin:70px auto;max-width:760px;text-align:center;padding:44px 26px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.quote::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:60px;height:1px;background:var(--champagne)}
.quote blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
  font-size:clamp(22px,3.4vw,32px);line-height:1.4;color:var(--champagne-soft)}
.quote figcaption{margin-top:16px;color:var(--muted);font-size:12px;letter-spacing:.22em;text-transform:uppercase}

/* ── services: five acts ── */
.act{margin:44px 0 10px}
.actno{font-size:11px;letter-spacing:.32em;color:var(--lagoon);text-transform:uppercase;opacity:.85}
.act h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:30px;color:var(--champagne);
  margin:4px 0 10px;letter-spacing:.03em}
.act .lead{color:var(--muted);font-size:14px;line-height:1.7;max-width:640px;margin-bottom:6px}
.srow{display:flex;gap:14px;align-items:flex-start;background:var(--glass);
  border:1px solid var(--line-aqua);border-radius:16px;padding:15px 17px;margin-top:10px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.srow .sic{font-size:17px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;flex:0 0 40px;color:var(--lagoon);
  background:linear-gradient(135deg,#17323f,#0d2331)}
.srow .st{flex:1;min-width:0}
.srow h4{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;line-height:1.2}
.srow h4 .star{color:var(--champagne)}
.srow p{color:var(--muted);font-size:13px;line-height:1.65;margin-top:4px}
.mchip{display:inline-block;margin-top:2px;background:var(--champagne);color:var(--navy);
  border-radius:12px;padding:3px 12px;font-size:10px;letter-spacing:.22em;font-weight:600;vertical-align:middle}
.srow.locked{border-color:var(--line)}

/* ── approach: steps ── */
.steps{counter-reset:step;max-width:760px}
.step{display:flex;gap:20px;padding:26px 0;border-bottom:1px solid var(--line-aqua)}
.step:last-child{border-bottom:none}
.step .no{flex:0 0 52px;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line);color:var(--champagne);
  font-family:'Cormorant Garamond',serif;font-size:24px;
  display:flex;align-items:center;justify-content:center;background:rgba(13,35,49,.5)}
.step h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;margin-bottom:6px}
.step p{color:var(--muted);font-size:14px;line-height:1.7;max-width:560px}

/* ── honesty / note panel ── */
.panel{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:22px;padding:32px 30px;max-width:760px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.panel h2{color:var(--champagne)}
.panel p{color:var(--muted);font-size:14px;line-height:1.75}
.panel p + p{margin-top:12px}

/* ── contact ── */
.contact-card{max-width:640px;text-align:center;margin:40px auto;padding:48px 30px}
.contact-card .ic{font-size:30px}
.contact-card .sub{margin:0 auto 28px}
.contact-alt{margin-top:26px;color:var(--muted);font-size:13px;line-height:1.7}
.contact-alt a{color:var(--lagoon);text-decoration:none}
.contact-alt a:hover{color:var(--champagne)}
.note{display:block;margin-top:8px;color:#7f939c;font-size:11.5px;letter-spacing:.04em}

/* ── footer ── */
footer{margin-top:70px;border-top:1px solid rgba(201,168,106,.15);padding-top:28px;
  display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;justify-content:space-between}
footer .sig{font-family:'Cormorant Garamond',serif;color:var(--champagne);font-size:20px;letter-spacing:.1em;margin-bottom:8px}
footer p{color:var(--muted);font-size:12px;line-height:1.65;max-width:420px}
footer .legal{margin-top:10px;color:#7f939c;font-size:11px}
.flinks{display:flex;flex-direction:column;gap:8px}
.flinks a{color:var(--muted);text-decoration:none;font-size:12.5px;letter-spacing:.06em;transition:.2s}
.flinks a:hover{color:var(--lagoon)}