/* =========================================================
   Flint Cove Zone — Shared Design System
   Premium Japanese coastal editorial aesthetic
========================================================= */

:root{
  --flint-900:#2b2e30;
  --flint-800:#3c4143;
  --flint-700:#4a5052;
  --flint-500:#7c8386;
  --flint-300:#b7bcbd;
  --ocean-900:#132a36;
  --ocean-700:#1f4a5e;
  --ocean-500:#336d84;
  --seafoam-500:#8fb9a8;
  --seafoam-300:#c3dcd0;
  --sand-500:#e8ddc7;
  --sand-300:#f2ead9;
  --soft-white:#faf8f3;
  --ink:#232522;
  --font-display:'Fraunces', serif;
  --font-jp:'Shippori Mincho', serif;
  --font-body:'Zen Kaku Gothic New', 'Shippori Mincho', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--soft-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.01em;
  margin:0;
}
.jp{ font-family:var(--font-jp); letter-spacing:.06em; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--seafoam-500); color:#fff; }

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.eyebrow{
  font-family:var(--font-jp);
  font-size:.82rem;
  letter-spacing:.28em;
  color:var(--ocean-700);
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}
.eyebrow::before{
  content:'';
  width:28px;height:1px;background:var(--ocean-700);
  display:inline-block;
}

/* ---------------- Navigation ---------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.4rem 0;
  transition:background .5s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
  background:linear-gradient(to bottom, rgba(19,42,54,.35), transparent);
}
.site-nav.is-scrolled{
  padding:.75rem 0;
  background:rgba(250,248,243,.82);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 8px 30px rgba(43,46,48,.08);
}
.site-nav .nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1280px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem);
}
.logo-mark{ display:flex; align-items:center; gap:.7rem; }
.logo-mark svg{ width:42px; height:42px; color:#fff; transition:color .4s var(--ease); }
.site-nav.is-scrolled .logo-mark svg{ color:var(--ocean-900); }
.logo-text{ line-height:1.05; }
.logo-text .en{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:.03em; color:var(--flint-900); font-weight:600;}
.logo-text .jp{ font-size:.62rem; color:var(--ocean-700); letter-spacing:.22em;}
.site-nav.is-scrolled .logo-text .en{ color:var(--flint-900); }
.site-nav:not(.is-scrolled) .logo-text .en{ color:#fff; }
.site-nav:not(.is-scrolled) .logo-text .jp{ color:var(--sand-300); }

.nav-links{ display:none; align-items:center; gap:2.1rem; }
.nav-links a{
  font-size:.86rem; letter-spacing:.05em; font-weight:500;
  color:#fff; position:relative; padding:.25rem 0;
  transition:color .3s var(--ease);
}
.site-nav.is-scrolled .nav-links a{ color:var(--flint-800); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:currentColor; transition:width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ font-weight:700; }

.nav-cta{
  display:none;
  font-size:.78rem; padding:.6rem 1.3rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.6); color:#fff;
  letter-spacing:.06em;
  transition:all .3s var(--ease);
}
.site-nav.is-scrolled .nav-cta{ border-color:var(--ocean-700); color:var(--ocean-700); }
.nav-cta:hover{ background:#fff; color:var(--ocean-900); }
.site-nav.is-scrolled .nav-cta:hover{ background:var(--ocean-700); color:#fff; }

.nav-toggle{
  width:44px;height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px;
  background:transparent; cursor:pointer;
}
.site-nav.is-scrolled .nav-toggle{ border-color:var(--flint-700); }
.nav-toggle span{ width:18px; height:1px; background:#fff; transition:all .3s var(--ease); }
.site-nav.is-scrolled .nav-toggle span{ background:var(--flint-800); }

.mobile-menu{
  position:fixed; inset:0; z-index:1200;
  background:var(--ocean-900);
  display:flex; flex-direction:column;
  padding:2rem clamp(1.25rem,6vw,3rem);
  transform:translateY(-100%); opacity:0;
  transition:transform .55s var(--ease), opacity .4s var(--ease);
  pointer-events:none;
}
.mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-menu .mm-top{ display:flex; justify-content:space-between; align-items:center; }
.mobile-menu .mm-close{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  color:#fff; background:transparent; font-size:1.2rem; cursor:pointer;
}
.mobile-menu nav{ margin-top:3rem; display:flex; flex-direction:column; gap:1.1rem; }
.mobile-menu nav a{
  font-family:var(--font-display); font-size:1.6rem; color:var(--sand-300);
  padding-bottom:.6rem; border-bottom:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; align-items:baseline;
}
.mobile-menu nav a span.jp{ font-size:.75rem; color:var(--seafoam-300); }
.mobile-menu .mm-foot{ margin-top:auto; color:rgba(255,255,255,.5); font-size:.78rem; }

@media(min-width:960px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-block; }
  .nav-toggle{ display:none; }
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ocean-900); color:#fff;
}
.hero .hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero .hero-media img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.08);
  animation:heroZoom 22s var(--ease) infinite alternate;
}
@keyframes heroZoom{ from{transform:scale(1.08);} to{transform:scale(1);} }
.hero .hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,42,54,.35) 0%, rgba(19,42,54,.15) 35%, rgba(19,32,38,.85) 100%);
}
.mist-layer{
  position:absolute; left:-10%; width:120%; pointer-events:none; opacity:.55; mix-blend-mode:screen;
  filter:blur(6px);
}
.mist-1{ bottom:8%; height:180px; background:radial-gradient(ellipse at center, rgba(255,255,255,.5), transparent 70%); animation:drift 26s linear infinite; }
.mist-2{ bottom:0; height:220px; background:radial-gradient(ellipse at center, rgba(255,255,255,.35), transparent 70%); animation:drift 40s linear infinite reverse; }
@keyframes drift{ 0%{transform:translateX(-6%);} 50%{transform:translateX(6%);} 100%{transform:translateX(-6%);} }

.hero-content{ position:relative; z-index:5; padding:0 0 clamp(2.5rem,7vw,5rem); width:100%; }
.hero-content .eyebrow{ color:var(--sand-300); }
.hero-content .eyebrow::before{ background:var(--sand-300); }
.hero-title{
  font-size:clamp(2.6rem, 6.4vw, 5.6rem); line-height:1.03; color:#fff; margin:1.1rem 0 .9rem;
  max-width:16ch;
}
.hero-sub{
  font-family:var(--font-jp); font-size:clamp(1rem,1.6vw,1.3rem); color:var(--sand-300);
  letter-spacing:.12em; margin-bottom:2.2rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero-scroll{
  position:absolute; right:clamp(1.25rem,4vw,3rem); bottom:2.2rem; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; color:rgba(255,255,255,.75);
  font-size:.7rem; letter-spacing:.2em;
}
.hero-scroll .line{ width:1px; height:52px; background:rgba(255,255,255,.5); position:relative; overflow:hidden; }
.hero-scroll .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#fff;
  animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 2rem; border-radius:999px;
  font-size:.82rem; letter-spacing:.08em; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition:all .4s var(--ease); white-space:nowrap;
}
.btn-primary{ background:var(--sand-300); color:var(--ocean-900); }
.btn-primary:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.18); }
.btn-outline{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }
.btn-dark{ background:var(--ocean-900); color:#fff; }
.btn-dark:hover{ background:var(--ocean-700); transform:translateY(-2px); box-shadow:0 14px 30px rgba(19,42,54,.25); }
.btn-ghost{ border-color:var(--ocean-700); color:var(--ocean-700); }
.btn-ghost:hover{ background:var(--ocean-700); color:#fff; }
.btn svg{ width:16px; height:16px; }

/* ---------------- Sections & editorial layout ---------------- */
section{ position:relative; }
.section-pad{ padding:clamp(4.5rem,9vw,8.5rem) 0; }
.section-title{ font-size:clamp(2rem,4.2vw,3.4rem); color:var(--flint-900); margin-bottom:1.1rem; }
.section-lede{ font-size:1.05rem; line-height:1.9; color:var(--flint-700); max-width:56ch; }

.split{
  display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center;
}
@media(min-width:900px){
  .split{ grid-template-columns:1.05fr .95fr; gap:5vw; }
  .split.reverse .split-media{ order:2; }
}
.split-media{ position:relative; border-radius:6px; overflow:hidden; }
.split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform 1.2s var(--ease); }
.split-media:hover img{ transform:scale(1.06); }
.split-media .frame-tag{
  position:absolute; left:1.2rem; bottom:1.2rem; padding:.5rem 1rem;
  background:rgba(250,248,243,.85); backdrop-filter:blur(6px); border-radius:3px;
  font-size:.72rem; letter-spacing:.1em; color:var(--ocean-900);
}

.bg-flint{ background:var(--flint-900); color:var(--sand-300); }
.bg-flint .section-title{ color:#fff; }
.bg-flint .section-lede{ color:var(--sand-300); }
.bg-sand{ background:var(--sand-500); }
.bg-seafoam{ background:linear-gradient(180deg, var(--seafoam-300), var(--sand-300)); }

/* editorial cards */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.75rem; }
.ed-card{
  position:relative; border-radius:6px; overflow:hidden; background:#fff; isolation:isolate;
  box-shadow:0 10px 30px rgba(43,46,48,.06);
}
.ed-card .ed-media{ overflow:hidden; aspect-ratio:3/4; }
.ed-card .ed-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.ed-card:hover .ed-media img{ transform:scale(1.08); }
.ed-card .ed-body{ padding:1.5rem 1.4rem 1.7rem; }
.ed-card .ed-tag{ font-family:var(--font-jp); font-size:.7rem; letter-spacing:.16em; color:var(--ocean-700); }
.ed-card h3{ font-size:1.35rem; margin:.5rem 0 .5rem; color:var(--flint-900); }
.ed-card p{ font-size:.92rem; color:var(--flint-700); line-height:1.7; margin:0; }

/* glass panel */
.glass-panel{
  background:rgba(255,255,255,.55); backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6); border-radius:10px;
  box-shadow:0 20px 60px rgba(43,46,48,.08);
}
.glass-dark{
  background:rgba(19,42,54,.45); backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.15); border-radius:10px; color:#fff;
}

/* stat-free info strip */
.info-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.5rem; }
.info-strip .info-item{ padding:1.6rem; border-left:1px solid var(--flint-300); }
.info-strip .info-item h4{ font-size:1.05rem; margin-bottom:.4rem; color:var(--flint-900); }
.info-strip .info-item p{ font-size:.88rem; color:var(--flint-700); margin:0; line-height:1.7; }

/* ---------------- Gallery / Masonry + Lightbox ---------------- */
.masonry{ columns:1; column-gap:1.25rem; }
@media(min-width:640px){ .masonry{ columns:2; } }
@media(min-width:1024px){ .masonry{ columns:3; } }
.masonry .m-item{
  break-inside:avoid; margin-bottom:1.25rem; border-radius:6px; overflow:hidden; position:relative;
  cursor:pointer;
}
.masonry .m-item img{ width:100%; display:block; transition:transform .8s var(--ease), filter .5s; }
.masonry .m-item:hover img{ transform:scale(1.05); }
.masonry .m-item .m-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(19,42,54,.75));
  opacity:0; transition:opacity .4s var(--ease); display:flex; align-items:flex-end; padding:1rem;
}
.masonry .m-item:hover .m-overlay{ opacity:1; }
.masonry .m-item .m-cap{ color:#fff; font-size:.82rem; letter-spacing:.05em; }

.lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(19,20,20,.94);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox figure{ max-width:88vw; max-height:82vh; margin:0; text-align:center; }
.lightbox img{ max-width:88vw; max-height:74vh; object-fit:contain; margin:0 auto; border-radius:4px; }
.lightbox figcaption{ color:var(--sand-300); font-size:.85rem; margin-top:1rem; letter-spacing:.05em; }
.lb-close, .lb-prev, .lb-next{
  position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
  color:#fff; border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .3s var(--ease); font-size:1.1rem;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{ background:rgba(255,255,255,.2); }
.lb-close{ top:1.5rem; right:1.5rem; }
.lb-prev{ left:1.5rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.5rem; top:50%; transform:translateY(-50%); }

/* ---------------- FAQ Accordion ---------------- */
.faq-item{ border-bottom:1px solid var(--flint-300); }
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.6rem 0; cursor:pointer; font-family:var(--font-display); font-size:1.2rem; color:var(--flint-900);
}
.faq-q .plus{ width:26px; height:26px; flex:none; position:relative; }
.faq-q .plus::before, .faq-q .plus::after{
  content:''; position:absolute; background:var(--ocean-700); top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-q .plus::before{ width:16px; height:1.5px; }
.faq-q .plus::after{ width:1.5px; height:16px; transition:transform .35s var(--ease); }
.faq-item.open .faq-q .plus::after{ transform:translate(-50%,-50%) rotate(90deg) scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-a p{ padding-bottom:1.6rem; margin:0; color:var(--flint-700); line-height:1.8; font-size:.95rem; max-width:65ch; }
.faq-item.open .faq-q{ color:var(--ocean-700); }

/* ---------------- Forms ---------------- */
.field{ margin-bottom:1.4rem; }
.field label{ display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--flint-700); margin-bottom:.5rem; }
.field input, .field textarea, .field select{
  width:100%; padding:.9rem 1rem; border:1px solid var(--flint-300); border-radius:4px;
  background:#fff; font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  transition:border-color .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--ocean-700); box-shadow:0 0 0 3px rgba(51,109,132,.15);
}
.field.error input, .field.error textarea{ border-color:#b1544a; }
.field .err-msg{ color:#b1544a; font-size:.78rem; margin-top:.4rem; display:none; }
.field.error .err-msg{ display:block; }

/* ---------------- Toast ---------------- */
.toast-wrap{ position:fixed; top:1.5rem; right:1.5rem; z-index:3000; display:flex; flex-direction:column; gap:.75rem; }
.toast{
  min-width:280px; max-width:340px; padding:1rem 1.2rem; border-radius:8px; color:#fff;
  background:var(--ocean-900); box-shadow:0 20px 40px rgba(0,0,0,.25);
  display:flex; align-items:flex-start; gap:.7rem; font-size:.88rem; line-height:1.5;
  transform:translateX(120%); opacity:0; transition:all .5s var(--ease);
  border-left:3px solid var(--seafoam-500);
}
.toast.show{ transform:translateX(0); opacity:1; }
.toast .t-title{ font-weight:700; display:block; margin-bottom:.15rem; }
.toast .t-close{ margin-left:auto; cursor:pointer; opacity:.6; }
.toast .t-close:hover{ opacity:1; }

/* ---------------- Reveal on scroll ---------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.12s; }
.reveal-delay-2{ transition-delay:.24s; }
.reveal-delay-3{ transition-delay:.36s; }

/* ---------------- Page banner (inner pages) ---------------- */
.page-banner{
  position:relative; min-height:64vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden;
}
.page-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-banner .pb-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,42,54,.25), rgba(19,32,38,.9)); }
.page-banner .pb-content{ position:relative; z-index:2; padding:0 0 4rem; }
.breadcrumb{ font-size:.78rem; letter-spacing:.08em; color:var(--sand-300); margin-bottom:1rem; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ---------------- Footer ---------------- */
footer.site-footer{ background:var(--ocean-900); color:var(--sand-300); padding:5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:3rem; padding-bottom:3.5rem; border-bottom:1px solid rgba(255,255,255,.12); }
@media(min-width:900px){ .footer-grid{ grid-template-columns:1.4fr .8fr .8fr 1fr; } }
.footer-grid h5{ font-family:var(--font-display); font-size:1.05rem; color:#fff; margin-bottom:1.2rem; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem; }
.footer-grid ul a{ font-size:.88rem; color:var(--sand-300); transition:color .3s; }
.footer-grid ul a:hover{ color:#fff; }
.footer-bottom{ padding-top:2rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.78rem; color:rgba(255,255,255,.5); }
.footer-social{ display:flex; gap:.8rem; }
.footer-social a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
}
.footer-social a:hover{ background:#fff; color:var(--ocean-900); }
.footer-logo p{ font-size:.9rem; line-height:1.8; color:var(--sand-300); max-width:34ch; margin-top:1rem; }

/* misc */
.wave-divider{ width:100%; display:block; }
.parallax-wrap{ position:relative; overflow:hidden; }
.layer{ position:absolute; inset:0; will-change:transform; }
.tag-pill{
  display:inline-block; padding:.35rem .9rem; border-radius:999px; font-size:.72rem; letter-spacing:.08em;
  background:var(--seafoam-300); color:var(--ocean-900); margin:0 .4rem .4rem 0;
}
.lazy-img{ background:var(--sand-500); }
.map-frame{ border-radius:8px; overflow:hidden; filter:grayscale(.2) contrast(1.05); }