/* LazeeFish — shared design system */
:root {
  --cream: #FAF4E8;
  --cream-deep: #F2E8D2;
  --teal: #0E4A52;
  --teal-mid: #1F7A86;
  --teal-light: #7BC2C9;
  --aqua: #B6E3DD;
  --coral: #F1907C;
  --ink: #0B1F23;
  --mute: rgba(11,31,35,0.72);
  --line: rgba(11,31,35,0.12);
  --peach: #F2C4A8;
}
html, body { margin:0; padding:0; background:var(--cream); color:var(--ink); font-family:"Geist", -apple-system, sans-serif; -webkit-font-smoothing:antialiased; }
*, *::before, *::after { box-sizing:border-box; }
:where(h1, h2, h3, h4) { font-family:"Fraunces", serif; font-weight:400; letter-spacing:-0.025em; margin:0; color:var(--ink); }
p { margin:0; }
a { color:inherit; text-decoration:none; }
.frame { max-width:1440px; margin:0 auto; padding:0 64px; }
.btn-primary { background:var(--ink); color:var(--cream); border:none; border-radius:999px; padding:15px 24px; font-size:14px; font-weight:600; font-family:inherit; display:inline-flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none; }
.btn-primary .arrow { width:22px; height:22px; border-radius:50%; background:var(--coral); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.btn-secondary { background:transparent; color:var(--ink); border:1.5px solid var(--ink); border-radius:999px; padding:13px 22px; font-size:14px; font-weight:500; font-family:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
.btn-teal { background:var(--teal); color:var(--cream); border:none; border-radius:999px; padding:10px 20px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:0.18em; color:var(--teal-mid); font-weight:600; }

/* Shared nav */
.lf-nav { position:sticky; top:0; z-index:50; background:rgba(250,244,232,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.lf-nav .row { height:72px; display:flex; align-items:center; justify-content:space-between; }
.lf-logo { display:inline-flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:700; font-size:22px; letter-spacing:-0.02em; color:var(--ink); text-decoration:none; }
.lf-nav-links { display:flex; gap:32px; font-size:14px; font-weight:500; }
.lf-nav-links a { opacity:0.78; color:var(--ink); text-decoration:none; }
.lf-nav-links a:hover { opacity:1; }
.lf-nav-links a.active { opacity:1; color:var(--teal); }
.lf-nav-cta { display:flex; align-items:center; gap:14px; font-size:14px; }
.lf-nav-cta .signin { opacity:0.7; color:var(--ink); text-decoration:none; }
.lf-nav-cta .signin:hover { opacity:1; }

/* Shared footer */
.lf-footer { background:var(--ink); color:var(--cream); padding:80px 0 40px; }
.lf-footer .grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:48px; margin-bottom:60px; }
.lf-footer .col h2 { font-family:inherit; font-size:11px; text-transform:uppercase; letter-spacing:0.14em; opacity:0.5; margin:0 0 18px; font-weight:700; color:var(--cream); }
.lf-footer .col { display:flex; flex-direction:column; gap:10px; font-size:14px; }
.lf-footer .col a { opacity:0.85; color:var(--cream); text-decoration:none; }
.lf-footer .col a:hover { opacity:1; }
.lf-footer .legal { display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid rgba(250,244,232,0.1); font-size:12px; opacity:0.6; }

/* Shared page hero (small) */
.lf-page-hero { padding:80px 0 60px; position:relative; overflow:hidden; }
.lf-page-hero h1 { font-size:88px; line-height:0.96; }
.lf-page-hero p.lede { font-size:19px; line-height:1.5; color:var(--mute); max-width:560px; margin-top:24px; }

/* Decorative bubbles */
.bub { position:absolute; border-radius:50%; border:1.5px solid var(--teal-mid); }

/* Nav dropdowns */
.lf-nav-dropdown { position:relative; }
.lf-nav-dropdown-btn { background:none; border:none; font-family:inherit; font-size:14px; font-weight:500; color:var(--ink); opacity:0.78; cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:0; }
.lf-nav-dropdown-btn::after { content:''; display:inline-block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:0.6; margin-left:1px; }
.lf-nav-dropdown:hover .lf-nav-dropdown-btn { opacity:1; }
.lf-nav-dropdown-menu { display:none; position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); background:var(--cream); border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 48px rgba(11,31,35,0.12); min-width:220px; padding:8px; z-index:100; }
.lf-nav-dropdown:hover .lf-nav-dropdown-menu { display:block; }
.lf-nav-dropdown::after { content:''; position:absolute; top:100%; left:0; right:0; height:16px; }
.lf-nav-dropdown-item { display:block; padding:9px 12px; border-radius:8px; color:var(--ink); font-size:13px; font-weight:500; text-decoration:none; opacity:0.85; transition:background 0.1s; }
.lf-nav-dropdown-item:hover { background:var(--cream-deep); opacity:1; }
.lf-nav-dropdown-divider { height:1px; background:var(--line); margin:4px 0; }

/* CTA strip */
.lf-cta-strip { background:var(--ink); color:var(--cream); padding:80px 0; position:relative; overflow:hidden; }
.lf-cta-strip h2 { color:var(--cream); font-size:56px; line-height:1; margin-bottom:18px; }
.lf-cta-strip p { color:rgba(250,244,232,0.7); font-size:17px; margin-bottom:28px; max-width:560px; }

/* ── Button hover transitions ─────────────────────────────────────── */
.btn-primary  { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.btn-teal     { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.btn-secondary { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.btn-primary:hover  { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(11,31,35,0.2); }
.btn-teal:hover     { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(11,31,35,0.18); background: var(--teal-mid); }
.btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(11,31,35,0.1); }

/* ── Nav scroll shadow ────────────────────────────────────────────── */
.lf-nav { transition: box-shadow 0.3s ease; }
.lf-nav--scrolled { box-shadow: 0 4px 24px rgba(11,31,35,0.1); }

/* ── Scroll-triggered reveal ──────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ── Details / accordion open animation ──────────────────────────── */
@keyframes detailsFade { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
details[open] > :not(summary) { animation: detailsFade 0.28s ease; }

/* ── Motion animations (respect prefers-reduced-motion) ───────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Bubble drift */
  @keyframes bubRise {
    0%   { transform: translateY(0);     opacity: 0.4; }
    75%  { opacity: 0.15; }
    100% { transform: translateY(-70px); opacity: 0; }
  }
  .bub              { animation: bubRise 12s ease-in-out infinite; }
  .bub:nth-child(2) { animation-duration: 9s;  animation-delay: -4s; }
  .bub:nth-child(3) { animation-duration: 14s; animation-delay: -8s; }
  .bub:nth-child(4) { animation-duration: 10s; animation-delay: -2s; }
  .bub:nth-child(5) { animation-duration: 13s; animation-delay: -6s; }

  /* Hero fish + envelope card bob */
  @keyframes fishBob  { 0%,100%{ transform:rotate(-8deg) translateY(0);   } 50%{ transform:rotate(-8deg) translateY(-10px); } }
  @keyframes cardBob1 { 0%,100%{ transform:rotate(-3deg) translateY(0);   } 50%{ transform:rotate(-3deg) translateY(6px);   } }
  @keyframes cardBob2 { 0%,100%{ transform:rotate(4deg)  translateY(0);   } 50%{ transform:rotate(4deg)  translateY(-5px);  } }
  .fish-bob   { animation: fishBob  4s ease-in-out infinite; }
  .card-bob-1 { animation: cardBob1 6s ease-in-out infinite 0.4s; }
  .card-bob-2 { animation: cardBob2 5s ease-in-out infinite 1s; }
}

/* ── Blog post hero icon ─────────────────────────────────────────── */
.post-hero-icon { display:block; margin-bottom:20px; }
.post-hero-icon svg { display:block; }

/* ── Mobile hamburger nav ─────────────────────────────────────────── */
.lf-hamburger { display:none; background:none; border:none; padding:7px; cursor:pointer; color:var(--ink); border-radius:8px; transition:background 0.15s; line-height:0; }
.lf-hamburger:hover { background:rgba(11,31,35,0.06); }
.lf-mob-signin { display:none !important; }
.lf-nav-dropdown-btn::after { transition:transform 0.2s; }

@media (max-width:768px) {
  .frame { padding:0 20px; }
  .lf-nav-links { display:none !important; }
  .lf-nav-cta .signin { display:none; }
  .lf-hamburger { display:flex; align-items:center; justify-content:center; }

  .lf-nav--open .lf-nav-links {
    display:flex !important;
    flex-direction:column;
    gap:0;
    position:fixed;
    top:72px;
    left:0;
    right:0;
    bottom:0;
    background:var(--cream);
    border-top:1px solid var(--line);
    padding:8px 20px 40px;
    overflow-y:auto;
    z-index:999;
  }

  .lf-nav-links > a {
    display:block;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:15px;
    font-weight:500;
    opacity:0.85;
    color:var(--ink);
  }

  .lf-nav-dropdown-btn {
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:15px;
    opacity:0.85;
    text-align:left;
  }

  .lf-nav-dropdown:hover .lf-nav-dropdown-menu { display:none; }

  .lf-nav-dropdown.mob-open .lf-nav-dropdown-menu {
    display:block;
    position:static;
    transform:none;
    box-shadow:none;
    border:none;
    border-radius:0;
    padding:4px 0 8px 12px;
    min-width:0;
    background:transparent;
  }

  .lf-nav-dropdown.mob-open .lf-nav-dropdown-item { font-size:14px; padding:8px 10px; }
  .lf-nav-dropdown.mob-open .lf-nav-dropdown-btn::after { transform:rotate(180deg); }

  .lf-mob-signin { display:block !important; padding:16px 0 0; font-size:15px; font-weight:500; opacity:0.72; color:var(--ink); }
}