/* ==========================
   Little Goose – Warm Professional UI (Static)
   Drop-in stylesheet
   ========================== */

/* ==========================
   1) Design Tokens
   ========================== */
:root{
  /* Brand-ish warm + calm */
  --ink: #0f172a;            /* slate-900 */
  --muted: #475569;          /* slate-600 */
  --muted2:#64748b;          /* slate-500 */
  --line: #e2e8f0;           /* slate-200 */

  --bg: #fffaf3;             /* warm paper */
  --surface: #ffffff;        /* cards */
  --surface2:#fff3e6;        /* warm accent surface */

  --brand: #81D8D0;      /* Tiffany Blue */
  --brandDeep: #0FAFA6;       /* teal deep */
  --sun: #f59e0b;            /* amber */
  --berry:#ef4444;           /* red */
  --violet:#8b5cf6;          /* purple */

  --shadow: 0 18px 45px rgba(2,6,23,.10);
  --shadow2: 0 10px 26px rgba(2,6,23,.08);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;

  --h1: clamp(34px, 4vw, 48px);
  --h2: clamp(20px, 2.2vw, 26px);
  --h3: 16px;
}

/* ==========================
   2) Base
   ========================== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);

  /* ✅ page-wide fixed geese (won't move on scroll) */
  background:

    radial-gradient(900px 380px at 10% -5%, rgba(242,194,214,.16), transparent 60%),
    radial-gradient(900px 420px at 90% -10%, rgba(20,184,166,.14), transparent 55%),
    var(--bg);

  background-attachment: fixed, fixed, scroll, scroll, scroll;
  line-height: 1.55;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
code{
  background:#fff;
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: .95em;
}

/* ==========================
   3) Layout Helpers
   ========================== */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

/* ==========================
   4) Header
   ========================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;

  /* Tiffany blue header */
  background: linear-gradient(
    180deg,
    rgba(129,216,208,0.96),
    rgba(129,216,208,0.90)
  );

  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,175,166,.35);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 230px;
}
.brand img{
  height: 64px;
  width: auto;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.12; }
.brand-name{ font-weight: 900; letter-spacing: -.02em; }
.brand-sub{ color: var(--muted2); font-size: 13px; }

.nav{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content:center;
}
.nav-link{
  padding: 9px 10px;
  border-radius: 12px;
  color: #064e4a;
  font-weight: 800;
  font-weight: 750;
  font-size: 14px;
}
.nav-link:hover{
  background: rgba(255,255,255,.55);
  color: #043a35;
}
.nav-link.is-active{
  background: rgba(255,255,255,.95);
  color: #064e4a;
}

.header-cta{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* ==========================
   5) Buttons
   ========================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary{
  background: linear-gradient(180deg, #81D8D0, #6fcfc7);
  color: #043a35;
  border: 1px solid rgba(15,175,166,.35);

  /* 🔽 降低阴影强度 */
  box-shadow: 0 6px 14px rgba(129,216,208,.35);
}
.btn-primary:hover{ filter: brightness(.98); }

.btn-ghost{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,175,166,.35);
  color: #064e4a;

  /* ✅ 加一个“同级别”的轻阴影 */
  box-shadow: 0 6px 14px rgba(15,175,166,.35);
}
.btn-ghost:hover{ filter: brightness(.98); }

.menu-btn{
  display:none;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  font-weight: 900;
}
.menu-btn:hover{ background:#fff; }

/* ==========================
   6) Mobile Drawer
   ========================== */
.mobile-drawer{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.45);
  z-index: 80;
}
.mobile-panel{
  position:absolute;
  right: 12px;
  top: 12px;
  left: 12px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  overflow:hidden;
}
.mobile-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
}
.mobile-panel-title{ font-weight: 950; }
.mobile-panel-body{ padding: 10px 10px 14px; }
.mobile-nav{ display:flex; flex-direction:column; gap: 6px; }
.mobile-nav a{
  padding: 12px 12px;
  border-radius: 14px;
  font-weight: 850;
  color: var(--muted);
}
.mobile-nav a:hover{ background: rgba(15,23,42,.06); color: var(--ink); }
.mobile-nav a.is-active{ background: var(--ink); color:#fff; }
.mobile-meta{
  margin-top: 12px;
  padding: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted2);
  font-size: 14px;
}

/* ==========================
   7) Main
   ========================== */
.site-main{
  padding: 28px 0 72px;

  background:
    /* 🦢 geese（固定，不滚动） */
    url("../img/goose-left.png") left 28px top 55% / clamp(120px, 18vw, 220px) no-repeat,
    url("../img/goose-right.png") right 28px top 55% / clamp(120px, 18vw, 220px) no-repeat,

    /* 🔵 左侧 Tiffany Blue 色场 */
    linear-gradient(
      90deg,
      rgba(129,216,208,.42) 0%,
      rgba(129,216,208,.38) 32%,
      rgba(129,216,208,.22) 44%,
      rgba(129,216,208,0) 52%
    ),

    /* 🟡 右侧 Warm Yellow 色场 */
    linear-gradient(
      270deg,
      rgba(242,194,214,.38) 0%,
      rgba(242,194,214,.34) 32%,
      rgba(242,194,214,.20) 44%,
      rgba(242,194,214,0) 52%
    ),

    /* 底色 */
    var(--bg);

  background-attachment: fixed, fixed, scroll, scroll, scroll;
}

/* ==========================
   8) Page Head
   ========================== */
.pagehead{
  margin: 6px 0 18px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 14px;
}
.pagehead h1{
  margin:0;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -.02em;
}
.pagehead p{
  margin:0;
  color: var(--muted2);
  max-width: 72ch;
}

/* ==========================
   9) Hero (Home)
   ========================== */
.hero{
  border-radius: var(--radius2);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: var(--shadow);
  overflow: hidden;
  background:

    radial-gradient(900px 240px at 18% 10%, rgba(20,184,166,.20), transparent 64%),
    radial-gradient(760px 220px at 86% 4%, rgba(245,158,11,.22), transparent 62%),
    radial-gradient(900px 320px at 80% 92%, rgba(139,92,246,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  position: relative;
  isolation: isolate;
}
.hero::before{
  content:"";
  position:absolute;
  right: -40px;
  top: -30px;
  width: 340px;
  height: 340px;
  opacity: .14;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%230FAFA6' d='M356 108c-18-31-51-50-88-50-53 0-96 40-102 92-4 34 9 63 26 90 5 8 10 17 14 26-41 8-88 32-118 77-40 61-17 126 48 146 75 23 188-7 250-49 47-32 70-78 60-128-7-36-31-62-57-85-16-14-34-29-45-46-11-17-13-34-5-51 7-13 24-22 44-22 22 0 43 12 57 34 9 15 28 19 43 10 15-9 19-28 10-43z'/%3E%3Ccircle cx='332' cy='170' r='10' fill='%230f172a'/%3E%3Cpath fill='%23f59e0b' d='M414 188c22 6 41 2 58-12-16-8-33-12-50-13-5 9-10 17-8 25z'/%3E%3C/svg%3E");
  transform: rotate(-6deg);
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto -120px -140px auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(239,68,68,.18), transparent 55%),
              radial-gradient(circle at 70% 60%, rgba(245,158,11,.20), transparent 55%),
              rgba(255,255,255,.3);
  filter: blur(0px);
}

.hero-inner{
  position: relative;
  display:grid;
  grid-template-columns: 1.22fr .85fr;
  gap: 18px;
  padding: 34px;
  align-items: center;
}

.hero h1{
  margin: 0 0 10px;
  font-size: var(--h1);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.hero p{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 16px;
  max-width: 70ch;
}
.hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* badges (kept as-is) */
.badge-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.9);
  color: var(--muted);
  font-weight: 850;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}

/* hero side (kept) */
.hero-side{
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: var(--shadow2);
}
.hero-side h3{ margin:0 0 8px; font-size: 16px; }
.hero-side ul{ margin:0; padding-left: 18px; color: var(--muted); }
.hero-side li{ margin: 7px 0; }

/* ==========================
   10) Sections / Cards / Layout
   ========================== */
.section{ margin-top: 26px; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.section-title{
  margin:0;
  font-size: var(--h2);
  letter-spacing: -.01em;
}
.section-sub{
  margin:0;
  color: var(--muted2);
  font-size: 14px;
}

/* Cards / grids */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.card h3{ margin:0 0 8px; font-size: 16px; letter-spacing: -.01em; }
.card p{ margin:0; color: var(--muted); }

.pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.94);
  color: var(--muted);
}

/* Program page layout */
.split{
  display:grid;
  grid-template-columns: 1.05fr 1.05fr .9fr;
  gap: 14px;
  align-items: start;
}
ul.clean{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
ul.clean li{ margin: 7px 0; }

.photo{
  border-radius: var(--radius);
  border: 1px solid rgba(226,232,240,.95);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow2);
}
.photo img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* Schedule table */
.table{
  width: 100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,.92);
}
.table th, .table td{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(226,232,240,.95);
  vertical-align: top;
}
.table th{
  text-align:left;
  background: rgba(248,250,252,.95);
  font-weight: 950;
  color: var(--muted);
}
.table tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background: rgba(20,184,166,.06); }
.time{
  white-space:nowrap;
  font-weight: 950;
  color: var(--ink);
}
.note{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 14px;
}

/* Teacher cards */
.teacher{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.avatar{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.95);
  background:
    radial-gradient(18px 18px at 25% 30%, rgba(245,158,11,.22), transparent 55%),
    radial-gradient(18px 18px at 70% 40%, rgba(20,184,166,.18), transparent 55%),
    radial-gradient(18px 18px at 45% 80%, rgba(139,92,246,.16), transparent 55%),
    rgba(255,255,255,.95);
  box-shadow: 0 12px 22px rgba(2,6,23,.08);
  flex: 0 0 auto;
}

/* Kimochi page */
.kimochi{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}
.kimochi .card p{ margin-bottom: 10px; }
.kimochi .card p:last-child{ margin-bottom: 0; }

/* Safety grid */
.safety-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.safety-item{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
}
.safety-item strong{ font-size: 14px; }
.safety-item span{ color: var(--muted); font-size: 13px; }

.icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  background: rgba(255,255,255,.95);
}

/* ==========================
   11) Footer
   ========================== */
.site-footer{
  background: linear-gradient(
    180deg,
    rgba(129,216,208,.92),
    rgba(15,175,166,.88)
  );

  border-top: 1px solid rgba(255,255,255,.45);
  padding: 32px 0;
  color: #043a35; /* slate-900 / near-black */
  position: relative;
}

.footer-meta{
  color: rgba(230,255,251,.85);
}
.footer-note{
  color: rgba(230,255,251,.75);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap: 18px;
  flex-wrap: wrap;
  align-items:flex-start;
}

.footer-links{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-links a{
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.20);
  color: #ecfeff;
  font-weight: 900;
  font-size: 13px;
}
.footer-links a:hover{
  background: rgba(255,255,255,.95);
  color: #064e4a;
}
.footer-links a:hover{ background: #fff; color: var(--ink); }
.footer-meta{ color: var(--muted2); font-size: 14px; }

.site-footer .brand-name{
  color: #043a35;
  font-weight: 800;
}
.site-footer .footer-note,
.site-footer .footer-meta{
  color: rgba(4,58,53,.75);
}

/* Footer: logo pinned */
.footer-corner-logo{
  position: absolute;
  left: 60px;      /* 👈 直接贴近页面左侧 */
  bottom: 50px;
  height: 100px;
  width: auto;
  opacity: .95;
  pointer-events: none;
}

/* Reserve space so text doesn't collide with the logo */
.site-footer .footer-inner{
  padding-left: 110px;  /* >= logo width area */
}

/* ==========================
   12) Responsive
   ========================== */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .kimochi{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .safety-grid{ grid-template-columns: repeat(2, 1fr); }
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }
}
@media (max-width: 520px){
  .safety-grid{ grid-template-columns: 1fr; }
}

/* ==========================
   13) Carousel
   ========================== */
.carousel{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  overflow: hidden;
  position: relative;
  min-height: 260px;
}

.carousel-track{
  display: flex;
  width: 100%;
  transition: transform 550ms ease;
}

.carousel-slide{
  flex: 0 0 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
}

.carousel-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.carousel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.10));
}

.carousel-dots{
  position:absolute;
  left: 14px;
  bottom: 12px;
  display:flex;
  gap: 8px;
  z-index: 2;
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.55);
  cursor: pointer;
}

.dot.is-active{
  width: 22px;
  background: rgba(129,216,208,.95); /* Tiffany */
  border-color: rgba(255,255,255,.95);
}

/* Push the carousel down on Home so it doesn't collide with the quote bubble */
.hero .carousel{
  margin-top: 120px; /* adjust 60–90px depending on your taste */
}

/* ==========================
   14) Home CTA Button Special Style (kept)
   ========================== */
.hero-actions .cta-soft{
  background: rgba(129,216,208,0.25);          /* light Tiffany fill */
  border: 1px solid rgba(129,216,208,0.45);
  color: #043a35;
  box-shadow: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.hero-actions .cta-soft:hover{
  background: rgba(129,216,208,0.38);
  border-color: rgba(129,216,208,0.65);
  color: #032f2b;
}

/* ==========================
   15) Home Hero – Quote Rotator (replace / crossfade)
   ONLY edits here:
   - Add q4~q8 support
   - Change loop to 40s (8 quotes x 5s)
   - Keep same layout / styling
   ========================== */

/* Bigger + wider quote bubble, placed higher */
.hero-quote-rotator{
  position: absolute;        /* ✅ FIX: was missing; this caused the “full-width bar” issue */
  top: 6px;                  /* higher (was ~18px) */
  right: 18px;
  width: min(340px, 52vw);   /* wider */
  height: 130px;             /* larger frame */
  z-index: 6;

  /* ✅ clickable cue (link behavior is added via JS in HTML) */
  cursor: pointer;
}

/* one bubble stack (all overlap) */
.hero-quote-rotator .quote-bubble{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  /* ✅ let height fit text, inside a fixed container */
  min-height: 92px;
  padding: 12px 14px;
  border-radius: 16px;

  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 28px rgba(2,6,23,.10);
  backdrop-filter: blur(8px);

  color: rgba(15,23,42,.92);
  font-weight: 650;
  font-size: 13px;
  line-height: 1.35;

  /* ✅ text should wrap normally */
  white-space: normal;
  overflow: hidden;

  opacity: 0;
  transform: translateY(8px) scale(.99);
}

.hero-quote-rotator .quote-bubble{
  display: grid;
  gap: 6px;
}

.hero-quote-rotator .quote-title{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(4,58,53,.8);
  margin-bottom: 6px;
}

.hero-quote-rotator .quote-bubble{
  min-height: 130px;
  padding: 14px 16px;
  font-size: 12px;          /* slightly bigger text */
  line-height: 1.4;
  overflow: hidden;
}

/* cute tail */
.hero-quote-rotator .quote-bubble::after{
  content:"";
  position:absolute;
  right: 18px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.86);
  border-right: 1px solid rgba(226,232,240,.95);
  border-bottom: 1px solid rgba(226,232,240,.95);
  transform: rotate(45deg);
  border-bottom-right-radius: 4px;
}

/* Stable loop for 8 quotes:
   - Total: 40s
   - Each quote: 5s
   Percent window per quote: 12.5%
   Fade in: first 2% of window
   Hold: next ~6%
   Fade out: next ~2%
*/
.hero-quote-rotator .quote-bubble{
  animation-fill-mode: both;
  will-change: opacity, transform;
}

/* Q1: 0% -> 12.5% */
@keyframes quoteQ1{
  0%    { opacity: 0; transform: translateY(10px) scale(.99); }
  2%    { opacity: 1; transform: translateY(0) scale(1); }
  8%    { opacity: 1; transform: translateY(0) scale(1); }
  10%   { opacity: 0; transform: translateY(-10px) scale(.99); }
  100%  { opacity: 0; transform: translateY(-10px) scale(.99); }
}

/* Q2: 12.5% -> 25% */
@keyframes quoteQ2{
  0%      { opacity: 0; transform: translateY(10px) scale(.99); }
  12.5%   { opacity: 0; transform: translateY(10px) scale(.99); }
  14.5%   { opacity: 1; transform: translateY(0) scale(1); }
  20.5%   { opacity: 1; transform: translateY(0) scale(1); }
  22.5%   { opacity: 0; transform: translateY(-10px) scale(.99); }
  100%    { opacity: 0; transform: translateY(-10px) scale(.99); }
}

/* Q3: 25% -> 37.5% */
@keyframes quoteQ3{
  0%      { opacity: 0; transform: translateY(10px) scale(.99); }
  25%     { opacity: 0; transform: translateY(10px) scale(.99); }
  27%     { opacity: 1; transform: translateY(0) scale(1); }
  33%     { opacity: 1; transform: translateY(0) scale(1); }
  35%     { opacity: 0; transform: translateY(-10px) scale(.99); }
  100%    { opacity: 0; transform: translateY(-10px) scale(.99); }
}

/* Q4: 37.5% -> 50% */
@keyframes quoteQ4{
  0%      { opacity: 0; transform: translateY(10px) scale(.99); }
  37.5%   { opacity: 0; transform: translateY(10px) scale(.99); }
  39.5%   { opacity: 1; transform: translateY(0) scale(1); }
  45.5%   { opacity: 1; transform: translateY(0) scale(1); }
  47.5%   { opacity: 0; transform: translateY(-10px) scale(.99); }
  100%    { opacity: 0; transform: translateY(-10px) scale(.99); }
}

/* Q5: 50% -> 62.5% */
@keyframes quoteQ5{
  0%      { opacity: 0; transform: translateY(10px) scale(.99); }
  50%     { opacity: 0; transform: translateY(10px) scale(.99); }
  52%     { opacity: 1; transform: translateY(0) scale(1); }
  58%     { opacity: 1; transform: translateY(0) scale(1); }
  60%     { opacity: 0; transform: translateY(-10px) scale(.99); }
  100%    { opacity: 0; transform: translateY(-10px) scale(.99); }
}

/* Q6: 62.5% -> 75% */
@keyframes quoteQ6{
  0%      { opacity: 0; transform: translateY(10px) scale(.99); }
  62.5%   { opacity: 0; transform: translateY(10px) scale(.99); }
  64.5%   { opacity: 1; transform: translateY(0) scale(1); }
  70.5%   { opacity: 1; transform: translateY(0) scale(1); }
  72.5%   { opacity: 0; transform: translateY(-10px) scale(.99); }
  100%    { opacity: 0; transform: translateY(-10px) scale(.99); }
}

/* Q7: 75% -> 87.5% */
@keyframes quoteQ7{
  0%      { opacity: 0; transform: translateY(10px) scale(.99); }
  75%     { opacity: 0; transform: translateY(10px) scale(.99); }
  77%     { opacity: 1; transform: translateY(0) scale(1); }
  83%     { opacity: 1; transform: translateY(0) scale(1); }
  85%     { opacity: 0; transform: translateY(-10px) scale(.99); }
  100%    { opacity: 0; transform: translateY(-10px) scale(.99); }
}

/* Q8: 87.5% -> 100% */
@keyframes quoteQ8{
  0%      { opacity: 0; transform: translateY(10px) scale(.99); }
  87.5%   { opacity: 0; transform: translateY(10px) scale(.99); }
  89.5%   { opacity: 1; transform: translateY(0) scale(1); }
  95.5%   { opacity: 1; transform: translateY(0) scale(1); }
  97.5%   { opacity: 0; transform: translateY(-10px) scale(.99); }
  100%    { opacity: 0; transform: translateY(-10px) scale(.99); }
}

/* Apply animations — 40s loop */
.hero-quote-rotator .q1{ animation: quoteQ1 40s infinite; }
.hero-quote-rotator .q2{ animation: quoteQ2 40s infinite; }
.hero-quote-rotator .q3{ animation: quoteQ3 40s infinite; }
.hero-quote-rotator .q4{ animation: quoteQ4 40s infinite; }
.hero-quote-rotator .q5{ animation: quoteQ5 40s infinite; }
.hero-quote-rotator .q6{ animation: quoteQ6 40s infinite; }
.hero-quote-rotator .q7{ animation: quoteQ7 40s infinite; }
.hero-quote-rotator .q8{ animation: quoteQ8 40s infinite; }

/* Hide on mobile to avoid clutter */
@media (max-width: 980px){
  .hero-quote-rotator{ display:none; }
}

.nav-link.contact-link{
  color: #0f172a;            /* darker ink */
  font-weight: 900;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(15,23,42,.12);
}

.nav-link.contact-link:hover{
  background: rgba(255,255,255,.70);
  color: #0b1224;
}

/* ===== Tour Request form (Contact left block) ===== */
.tour-card{
  background: rgba(129,216,208,.30); /* soft Tiffany panel */
  border: 1px solid rgba(15,175,166,.18);
  box-shadow: var(--shadow2);
  padding: 28px 26px;
}

.tour-title{
  margin: 0 0 18px;
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: .02em;
  font-weight: 1000;
  color: #ffffff;
  text-transform: uppercase;
}

.tour-form{
  display: grid;
  gap: 16px;
}

.tour-field input,
.tour-field textarea{
  width: 100%;
  border: none;
  outline: none;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border-radius: 0;                 /* squared like your screenshot */
  padding: 14px 14px;
  font-size: 15px;
  box-shadow: 0 1px 0 rgba(15,23,42,.10);
}

.tour-field textarea{
  resize: vertical;
  min-height: 180px;
}

.tour-field input::placeholder,
.tour-field textarea::placeholder{
  color: rgba(15,23,42,.35);
  font-weight: 800;
  letter-spacing: .02em;
}

/* checkbox row */
.tour-consent{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: rgba(255,255,255,.95);
  font-weight: 650;
}

.tour-consent input{
  width: 16px;
  height: 16px;
  accent-color: #0FAFA6;
}

/* button */
.tour-btn{
  justify-self: start;
  margin-top: 8px;
  border: none;
  cursor: pointer;
  padding: 14px 22px;
  font-weight: 950;
  border-radius: 10px;
  background: rgba(15,175,166,.40);
  color: #ffffff;
  letter-spacing: .02em;
  box-shadow: 0 10px 18px rgba(2,6,23,.10);
}

.tour-btn:hover{
  filter: brightness(1.05);
}

/* accessibility helper */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  border:0;
}
.location-card{
  padding: 24px;
}

.location-card h3{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
}

.location-card .muted{
  color: var(--muted2);
  font-size: 14px;
  margin-bottom: 12px;
}

.map-wrap{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: var(--shadow2);
  height: 260px;
  margin-bottom: 16px;
}

.map-wrap iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Contact info under map */
.contact-info{
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.contact-info h4{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
}

.contact-row{
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
}
.form-status{
  margin: 10px 0 0;
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
}
.form-status.ok{ color: #065f46; }    /* green-ish */
.form-status.err{ color: #b91c1c; }   /* red-ish */
.schedule-notes{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(226,232,240,.9);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.35;
}

.schedule-notes p{
  margin: 4px 0;
}
/* Default: hide mobile logo on desktop */
/* Hide mobile logo by default */
/* Hide mobile logo by default */
/* Hide by default */
.footer-mobile-logo {
  display: none;
}

/* ===== MOBILE FOOTER FIX ===== */
@media (max-width: 640px) {

  .footer-corner-logo {
    display: none !important;
  }

  .footer-wrap {
    position: relative; /* anchor for absolute logo */
  }

  /* Floating logo */
  .footer-mobile-logo {
    display: block;
    position: absolute;
    left: 16px;

    /* 👇 THIS is the magic */
    top: 50%;
    transform: translateY(-50%);

    width: 150px;       /* adjust size freely */
    height: auto;
    opacity: 0.95;
    pointer-events: none; /* logo won’t block clicks */
  }

  /* Push text slightly right so it doesn’t overlap logo */
  .footer-inner {
    padding-left: 120px;
    text-align: left;
  }

  .footer-links {
    justify-content: center;
  }
}
/* ===== Floating FAQ Agent (keyword-based, no real AI) ===== */
.ai-agent{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
}

/* ===== Floating Button (Goose) ===== */
.ai-fab{
  position: fixed;
  right: 20px;
  bottom: 80px;

  width: 80px;
  height: 80px;

  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 12px 28px rgba(2,6,23,.18);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  overflow: visible;

  cursor: pointer;
  z-index: 9999; /* keep above page */
}

/* Goose image inside button */
.ai-goose-icon{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 999px;
  pointer-events: none;
}

/* ===== Panel ===== */
.ai-panel{
  position: absolute;
  right: 0;
  bottom: 150px; /* was 70px; updated for 80px button */
  width: min(360px, 92vw);
  height: 420px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 45px rgba(2,6,23,.16);
  overflow: hidden;
  display: none;
}

.ai-panel.is-open{
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

/* ===== Header ===== */
.ai-head{
  padding: 12px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(226,232,240,.95);
  background: linear-gradient(180deg, rgba(129,216,208,.30), rgba(255,255,255,.9));
}

.ai-title{ font-weight: 950; color: #043a35; }
.ai-sub{ font-size: 12px; color: rgba(71,85,105,.9); }

.ai-close{
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 900;
}

/* ===== Quick question chips ===== */
.ai-quick{
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
}

.ai-chip{
  border: 1px solid rgba(15,175,166,.25);
  background: rgba(129,216,208,.18);
  color: #043a35;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.ai-chip:hover{
  background: rgba(129,216,208,.28);
}

/* ===== Messages ===== */
.ai-messages{
  padding: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-bubble{
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-line; /* allows line breaks in answers */
}

.ai-bot{
  align-self: flex-start;
  background: rgba(248,250,252,.95);
  color: rgba(15,23,42,.92);
}

.ai-user{
  align-self: flex-end;
  background: rgba(129,216,208,.22);
  color: #043a35;
  border-color: rgba(15,175,166,.28);
}

/* ===== Input row ===== */
.ai-input{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.95);
}

.ai-input input{
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  font-size: 14px;
}

.ai-input button{
  border: 1px solid rgba(15,175,166,.35);
  background: rgba(129,216,208,.95);
  color: #043a35;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 950;
  cursor: pointer;
}

/* ==========================
   Goose icon animation
   ========================== */
@keyframes goose-wave {
  0%   { transform: translateY(0) rotate(0deg); }
  40%  { transform: translateY(-3px) rotate(-4deg); }
  70%  { transform: translateY(2px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Animate ONLY when chat is closed (requires JS to add/remove .is-open on .ai-fab) */
.ai-fab:not(.is-open) .ai-goose-icon{
  animation: goose-wave 2.8s ease-in-out infinite;
}
.ai-fab.is-open .ai-goose-icon{
  animation: none;
}

/* ==========================
   Tooltip (hover + auto show)
   ========================== */
.ai-fab::after{
  content: "Ask Little Goose!!!";
  position: absolute;
  right: 92px;            /* tooltip sits to the left */
  top: 50%;
  transform: translateY(-50%) translateY(4px);

  background: rgba(15,23,42,.90);
  color: #fff;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 12px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;

  transition: opacity .25s ease, transform .25s ease;

  z-index: 2147483647;    /* ✅ force on top of everything */
}
.ai-fab:hover::after{
  opacity: 1;
  transform: translateY(-50%) translateY(0);
}


/* Auto show every few seconds (when closed) */
@keyframes tooltipPulse {
  0%, 40%   { opacity: 0; transform: translateY(-50%) translateY(6px); }
  45%, 90%  { opacity: 1; transform: translateY(-50%) translateY(0); }
  100%      { opacity: 0; transform: translateY(-50%) translateY(6px); }
}


.ai-fab:not(.is-open)::after{
  animation: tooltipPulse 8s infinite;
}

/* Hover wins over auto pulse */
.ai-fab:hover::after{
  animation: none;
}