/* =========================================================
   Taiwan Happy Feet — Site Styles (Clean & Responsive)
   ========================================================= */

/* ------------------------------
   0) Design Tokens / Base
---------------------------------*/
:root{
  --brand:#4CAF50;
  --brand-dark:#388e3c;
  --ink:#222;
  --muted:#667085;
  --bg:#ffffff;
  --bg-alt:#fafafa;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:14px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Utilities */
.section-title{
  font-size:clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:0 auto 14px;
  padding:0 20px;
  max-width:1200px;
}
.section-subtitle{
  text-align:center;
  color:var(--muted);
  margin:0 auto 28px;
  padding:0 20px;
  max-width:760px;
}

/* ------------------------------
   1) Navbar
---------------------------------*/
/* ===== Mobile-first responsive navbar ===== */
.site-header { position: sticky; top: 0; z-index: 1000; }

.navbar{
  --nav-h: 140px;                 /* taller bar to fit the logo */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--nav-h);
  padding: 12px 16px;
  background: var(--brand);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.logo-img{
  height: 120px;                  /* logo size */
  width: auto;
}

/* ===== Hamburger button ===== */
.nav-toggle{
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;                /* comfy touch target */
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 14px;
  box-shadow:
    inset 0 6px 18px rgba(0,0,0,.12),
    0 8px 18px rgba(0,0,0,.10);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.nav-toggle:hover{ background: rgba(255,255,255,.18); }
.nav-toggle:active{ transform: translateY(1px) scale(.98); }
.nav-toggle:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

/* Bars inside hamburger */
.hamburger{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}
.hamburger > span{
  display: block;
  width: 28px; height: 2px;
  border-radius: 999px;
  background: #fff;
  transition: transform .22s ease, opacity .18s ease, width .18s ease;
  will-change: transform, opacity, width;
}

/* Morph to “X” when active */
.nav-toggle.is-active .hamburger > span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle.is-active .hamburger > span:nth-child(2){
  opacity: 0; width: 0;
}
.nav-toggle.is-active .hamburger > span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile dropdown menu */
.nav-menu{
  position: fixed;
  left: 0; right: 0;
  top: var(--nav-h);
  background: color-mix(in oklab, var(--brand) 94%, white 6%);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding: 10px 14px 18px;
  max-height: calc(100dvh - var(--nav-h));
  overflow: auto;

  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: transform .18s ease, opacity .18s ease, visibility 0s .18s;
}
.nav-menu.is-open{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: transform .18s ease, opacity .18s ease;
}
body.no-scroll{ overflow: hidden; }

/* Nav links */
.nav-links{
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0; padding: 0;
}
.nav-links a{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  color: #fff; text-decoration: none; font-weight: 700;
  border-radius: 10px;
}
.nav-links a:hover{ background: rgba(255,255,255,.1); }
.nav-links i{ width: 18px; text-align: center; }

/* Make CTA pop */
.nav-cta a{
  background: #fff; color: var(--brand);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.nav-cta a:hover{ background: #f2fff3; }
.nav-auth a{ opacity: .95; }

/* Desktop >= 900px: inline menu, hide toggle */
@media (min-width: 900px){
  .nav-toggle{ display: none; }

  .nav-menu{
    position: static;
    background: transparent; border: 0; padding: 0;
    max-height: none; overflow: visible;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
  }

  .nav-links{
    display: flex; align-items: center; gap: 10px;
  }
  .nav-links a{
    padding: 10px 12px; border-radius: 8px;
  }

  .nav-cta a{
    margin-left: 8px;
    color: var(--brand);
    background: #fff;
  }
}

/* Smaller phones */
@media (max-width: 380px){
  .nav-toggle{ width: 50px; height: 50px; border-radius: 12px; }
  .hamburger > span{ width: 24px; }
}

/* Safe areas (iOS notch) */
@supports (padding: max(0px)) {
  .navbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .nav-menu { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .nav-menu, .hamburger > span, .nav-toggle{ transition: none; }
}

/* Visually-hidden utility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ------------------------------
   2) Hero
---------------------------------*/
.hero{
  background:url('/static/images/womenhero.jpg') center/cover no-repeat;
  position:relative;
  min-height:420px;
  color:#fff;
  text-align:center;
  padding:clamp(80px, 8vw, 140px) 20px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.45);
}
.hero-content{ position:relative; z-index:1; max-width:700px; margin:0 auto; }
.hero h1{ font-size:clamp(2rem, 1.3rem + 2vw, 3rem); margin-bottom:1rem; }
.hero p{ font-size:clamp(1rem, .9rem + .5vw, 1.25rem); }

/* ------------------------------
   3) About (home) + About page
---------------------------------*/
.about{ padding:80px 20px; background:#f8f8f8; text-align:center; }
.about-container{ max-width:900px; margin:0 auto; }
.about h2{ font-size:2rem; color:#333; margin-bottom:1rem; }
.about p{ font-size:1.1rem; color:#555; line-height:1.7; margin-bottom:2rem; }

/* about.html card */
.about-section{
  max-width:900px; margin:60px auto; padding:40px 30px; text-align:center;
  background:#fff; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.1);
}
.about-section h1{
  font-size:2.5rem; color:#2d3436; margin-bottom:20px;
  border-bottom:3px solid #00cec9; display:inline-block; padding-bottom:10px;
}
.about-section p{ font-size:1.15rem; color:#636e72; line-height:1.7; margin-bottom:20px; }

/* ------------------------------
   4) Services (home) + services.html
---------------------------------*/
.services{ padding:70px 20px; background:#fff; text-align:center; }
.services-container{ max-width:1100px; margin:0 auto; }
.services h2{ font-size:2rem; margin-bottom:2rem; color:#333; }

.service-list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
}
.service-card{
  width:min(280px, 92vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  transition:transform .2s ease;
  text-align:center;
}
.service-card:hover{ transform:translateY(-5px); }
.service-card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:10px; margin-bottom:15px;
}
.service-card h3{ color:var(--brand); margin-bottom:.75rem; }
.service-card p{ color:#555; font-size:.95rem; line-height:1.5; }

/* services.html intro */
.services-section{
  max-width:900px; margin:60px auto; padding:40px 30px; text-align:center;
  background:#fdfdfd; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.services-section h1{
  font-size:2.5rem; color:#333; margin-bottom:20px;
  border-bottom:3px solid #00b894; display:inline-block; padding-bottom:10px;
}
.services-section p{
  font-size:1.2rem; color:#555; line-height:1.7; margin:0 auto; max-width:700px;
}

/* ------------------------------
   5) Pricing
---------------------------------*/
.pricing{ padding:70px 20px; background:#fefefe; text-align:center; }
.pricing-container{ max-width:900px; margin:0 auto; }
.pricing h2{ font-size:2rem; margin-bottom:2rem; color:#333; }

.pricing-category{ margin-bottom:40px; text-align:left; }
.pricing-category h3{
  color:var(--brand); font-size:1.5rem; margin-bottom:1rem;
  border-bottom:2px solid #e0e0e0; padding-bottom:.5rem;
}
.pricing-category ul{ list-style:none; }
.pricing-category li{
  display:flex; justify-content:space-between; align-items:center;
  margin:10px 0; font-size:1rem; color:#444; font-weight:500; gap:12px;
}
.pricing-category .dots{ flex:1; border-bottom:1px dotted #aaa; margin:0 10px; }

/* ------------------------------
   6) Gallery
---------------------------------*/
.gallery-section{
  padding: clamp(48px, 6vw, 80px) 20px;
  background: var(--bg-alt);
  text-align: center;
}

.gallery-section .section-title{
  margin-bottom: .25rem;
}

.gallery-section .section-subtitle{
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  color: var(--muted);
}

/* Grid */
.gallery-container{
  --card-radius: var(--radius, 14px);
  --gap: 18px;
  --maxw: 1200px;

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: .25rem;
}

/* Responsive columns: 3 on desktop, 2 tablet, 1 phone */
@media (min-width: 960px){
  .gallery-item{ grid-column: span 4; } /* 3 per row */
}
@media (min-width: 600px) and (max-width: 959px){
  .gallery-item{ grid-column: span 6; } /* 2 per row */
}
@media (max-width: 599px){
  .gallery-item{ grid-column: 1 / -1; } /* full width */
}

/* Cards */
.gallery-item{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}

/* Uniform height via aspect-ratio to keep rows perfectly aligned */
.gallery-item img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;          /* consistent tile shape */
  object-fit: cover;            /* crop gracefully */
  object-position: center;
  backface-visibility: hidden;  /* crisper scaling */
}

/* Hover polish */
.gallery-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
  border-color: color-mix(in oklab, var(--border), #000 12%);
}

/* Reduce CLS on very small screens: keep two columns when possible */
@media (max-width: 520px){
  .gallery-container{
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-item{ grid-column: auto; }
}

/* Visually-hidden caption utility (keeps good a11y without visible text) */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}


/* ------------------------------
   7) Reviews
---------------------------------*/
.reviews-section{ background:#f9f9f9; padding:70px 20px; text-align:center; }
.reviews-heading{
  font-size:2rem; color:#333; margin-bottom:40px; text-transform:uppercase;
}
.reviews-container{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center;
  max-width:1100px; margin:auto;
}
.review{
  background:#fff; width:min(340px, 100%);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:25px; font-size:1rem; line-height:1.6; color:#444; position:relative;
}
.review span{ display:block; margin-top:15px; font-weight:700; color:var(--brand); font-size:.95rem; }



/* ------------------------------
   8) Footer
---------------------------------*/
.footer{
  background:#f6f7f8; color:#333; padding:60px 20px 20px; font-size:.95rem;
}
.footer-container{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px;
  max-width:1200px; margin:auto; padding-bottom:30px; border-bottom:1px solid #ddd;
}
.footer h3, .footer h4{ color:var(--brand); margin-bottom:15px; }
.footer-left, .footer-center, .footer-right{ flex:1; min-width:240px; }
.footer-left p{ line-height:1.6; }

.footer-center ul{ list-style:none; }
.footer-center li{ margin-bottom:10px; }
.footer-center a{ color:#333; text-decoration:none; transition:color .2s; }
.footer-center a:hover{ color:var(--brand); }

.footer a{ color:var(--brand); font-weight:500; }
.footer a:hover{ color:var(--brand-dark); text-decoration:underline; }

.footer-bottom{ text-align:center; padding-top:20px; color:#777; font-size:.85rem; }

@media (max-width:900px){ .footer-container{ justify-content:flex-start; } }

/* ------------------------------
   9) Contact page
---------------------------------*/
.contact-section{ padding:60px 20px; max-width:1000px; margin:auto; text-align:center; }
.contact-section h1{
  font-size:2.5rem; margin-bottom:10px; color:#2d3436;
  border-bottom:3px solid #00cec9; display:inline-block; padding-bottom:10px;
}
.contact-section p{ font-size:1.1rem; color:#636e72; margin-bottom:30px; }
.contact-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:40px; }
.contact-form{ flex:1 1 350px; display:flex; flex-direction:column; gap:15px; }
.contact-form input, .contact-form textarea{
  padding:12px; border:1px solid #ccc; border-radius:10px; font-size:1rem; width:100%;
}
.contact-form button{
  background:#00cec9; color:#fff; border:none; padding:12px; font-size:1rem;
  border-radius:10px; cursor:pointer; transition:background-color .2s;
}
.contact-form button:hover{ background:#00b3ae; }
.contact-info{ flex:1 1 300px; text-align:left; }
.contact-info h2{ font-size:1.5rem; margin-bottom:10px; color:#2d3436; }
.contact-info p{ color:#636e72; margin-bottom:10px; }
.map-placeholder{
  margin-top:20px; background:#dfe6e9; height:200px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:#636e72;
}

/* ------------------------------
   10) Booking (public form)
---------------------------------*/
.booking-container{
  max-width:500px; margin:60px auto; background:#fff; padding:40px;
  border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.1);
}
.booking-container h2{ text-align:center; margin-bottom:30px; color:#333; font-size:26px; }
.form-group{ margin-bottom:25px; }
.form-control{
  width:100%; padding:12px 15px; font-size:16px; border:1px solid #ccc; border-radius:10px; transition:.2s;
}
.form-control:focus{
  border-color:var(--brand); outline:none; box-shadow:0 0 5px rgba(76,175,80,.4);
}
.submit-btn{
  background:var(--brand); color:#fff; padding:12px 20px; border:none; font-size:16px;
  border-radius:10px; cursor:pointer; width:100%; font-weight:700; transition:background .2s;
}
.submit-btn:hover{ background:var(--brand-dark); }

/* ------------------------------
   11) Admin Dashboard / Tables
---------------------------------*/
.dashboard-table{ width:100%; border-collapse:collapse; margin-top:20px; }
.dashboard-table th, .dashboard-table td{
  padding:12px 15px; text-align:left; border-bottom:1px solid #ddd;
}
.dashboard-table th{ background:var(--brand); color:#fff; }
.dashboard-table tr:hover{ background:#f5f5f5; }

/* Calendar block */
.calendar-container{
  max-width:800px; margin:40px auto; padding:20px; background:#fff;
  border-radius:16px; box-shadow:0 0 15px rgba(0,0,0,.1); border:1px solid var(--border);
}
.calendar-table{ width:100%; border-collapse:collapse; text-align:left; }
.calendar-table th, .calendar-table td{
  padding:12px; border:1px solid #ddd; vertical-align:top; height:120px;
}
.calendar-table th{ background:#f3f4f6; }
.booking-entry{
  background:#e8f5e9; margin-top:5px; padding:4px 6px; border-left:4px solid var(--brand);
  border-radius:4px; font-size:13px;
}

/* Admin shell (generic) */
.dashboard-wrapper{ display:flex; min-height:100vh; }
.sidebar{
  width:220px; background:#3b3f4f; padding:20px; color:#fff;
}
.sidebar h3{ margin-bottom:20px; }
.sidebar ul{ list-style:none; }
.sidebar li{ margin-bottom:15px; }
.sidebar a{ color:#fff; text-decoration:none; }
.sidebar a:hover{ text-decoration:underline; }
.main-content{ flex:1; padding:30px 40px; background:#f9f9f9; }

/* ------------------------------
   12) Staff page cards (reuse service card look)
---------------------------------*/
.services-heading{
  font-size:2.5rem; margin-bottom:50px; text-transform:uppercase; letter-spacing:1px; color:#111;
}
.services-list{
  display:flex; flex-wrap:wrap; gap:30px; justify-content:center;
}
.service-item{
  background:#fff; width:250px; padding:20px; text-align:center;
  border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,.1); transition:transform .2s ease;
}
.service-item:hover{ transform:translateY(-5px); }
.service-item img{
  width:100%; height:160px; object-fit:cover; border-radius:8px; margin-bottom:15px;
}
.service-item h3{ margin-bottom:10px; color:#007b5e; font-size:1.3rem; }
.service-item p{ font-size:.95rem; color:#555; margin-bottom:8px; }

/* ------------------------------
   13) Admin Add/Edit Booking Form (client/admin shared styles)
---------------------------------*/
.main-content{ background:#f6f8f7; padding:40px 20px; }
.admin-add-form{
  max-width:900px; margin:24px auto 60px; background:#fff; border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); padding:28px 28px 32px;
}
.admin-add-form h2{ font-size:1.8rem; margin-bottom:18px; color:#2d3436; }

/* Grid layout */
.flex-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.flex-col{ display:flex; flex-direction:column; gap:8px; }
@media (max-width:768px){ .flex-row{ grid-template-columns:1fr; } }

/* Labels & help */
.admin-add-form label{ font-size:.95rem; color:#384047; font-weight:600; }
.muted{ font-size:.85rem; color:#6b7280; margin-top:6px; }

/* Controls */
.admin-add-form .form-control,
.admin-add-form select,
.admin-add-form textarea,
.admin-add-form input[type="text"],
.admin-add-form input[type="email"],
.admin-add-form input[type="number"],
.admin-add-form input[type="date"]{
  width:100%; padding:12px 14px; border:1px solid #d7dde2; border-radius:10px; font-size:15px;
  background:#fff; transition:border-color .2s, box-shadow .2s;
}
.admin-add-form .form-control:focus,
.admin-add-form select:focus,
.admin-add-form textarea:focus,
.admin-add-form input:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(76,175,80,.18);
}
.admin-add-form select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background:#fff; }
.admin-add-form textarea{ min-height:110px; resize:vertical; }

/* Submit */
.btn.btn-primary,
.admin-add-form input[type="submit"]{
  display:inline-block; background:var(--brand); color:#fff; border:none; padding:12px 18px;
  border-radius:10px; font-weight:700; cursor:pointer; margin-top:8px;
  transition:transform .06s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 18px rgba(76,175,80,.25);
}
.btn.btn-primary:hover,
.admin-add-form input[type="submit"]:hover{
  background:var(--brand-dark); transform:translateY(-1px);
}
.btn.btn-primary:active,
.admin-add-form input[type="submit"]:active{
  transform:translateY(0); box-shadow:0 4px 12px rgba(76,175,80,.25);
}
.admin-add-form .flex-row + .flex-row,
.admin-add-form .flex-row + div,
.admin-add-form div + .flex-row{ margin-top:6px; }
#masseuse_field_wrap{ margin-top:10px; }


/* ===== About Page (clean + animated) ===== */

/* ---------------- Hero (particles + wave) ---------------- */
.about-hero{
  position: relative;
  min-height: clamp(380px, 56vw, 520px);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;

  /* subtle textured base (no image) */
  background:
    radial-gradient(1200px 400px at 50% -200px, rgba(76,175,80,.25), transparent 60%),
    linear-gradient(180deg, #4b4b4b 0%, #3a3a3a 100%);
}

/* dark overlay above canvas for readability */
.about-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.22));
  z-index:1;
}

/* particles canvas sits under overlay, above background */
.about-hero__fx{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
  z-index:0;
}

/* hero content sits on top */
.about-hero__inner{ position: relative; z-index:2; padding: 0 20px; }
.about-hero__title{
  font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem);
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.about-hero__subtitle{
  margin-top: 8px;
  color: #f7d774;
  letter-spacing: .2em;
  font-weight: 700;
  text-shadow: 0 4px 16px rgba(0,0,0,.35);
}

/* decorative floating dots (above overlay) */
.spark{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.5);
  filter: blur(0.5px);
  animation: float 8s ease-in-out infinite;
  z-index:2;
}
.s1{ top:20%; left:12%; animation-delay:0s; }
.s2{ top:35%; right:14%; animation-delay:1.2s; }
.s3{ bottom:18%; left:40%; animation-delay:2.1s; }
@keyframes float{
  0%,100%{ transform: translateY(0) translateX(0); opacity:.7; }
  50%{ transform: translateY(-14px) translateX(6px); opacity:1; }
}

/* curved wave at the bottom */
.about-hero__curve{
  position:absolute; bottom:-1px; left:0; width:100%; height:140px; display:block;
  z-index:2;
}

/* ---------------- Sections & Story ---------------- */
.section-pad{ padding: clamp(48px, 6vw, 84px) 20px; }

.section-heading{ text-align:center; margin-bottom: 24px; }
.section-heading h2{
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
  font-weight: 800; letter-spacing: .2px;
}
.section-heading h2 span{ color:#d4a657; font-weight: 800; }
.section-heading .rule{ margin-top: 10px; display:flex; justify-content:center; }
.section-heading .rule i{
  display:block; width: 120px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #d4a657, transparent);
}

.story{ background:#fff; }
.story__grid{
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 26px;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
}
@media (max-width: 980px){ .story__grid{ grid-template-columns: 1fr; } }

.story__media img{
  width: 100%; height: auto; display: block;
  border-radius: 18px; border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.story__text p{ margin-bottom: 14px; color:#4b5563; }
.story__bullets{ margin-top: 8px; padding-left: 18px; color:#374151; }
.story__bullets li{ margin: 6px 0; list-style: disc; }

/* ---------------- Highlights grid ---------------- */
.highlights{ background: #faf8f3; }
.highlights__wrap{
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .highlights__wrap{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .highlights__wrap{ grid-template-columns: 1fr; } }

/* ---------------- Highlights grid ---------------- */
.highlights{ background: #faf8f3; }
.highlights__wrap{
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .highlights__wrap{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .highlights__wrap{ grid-template-columns: 1fr; } }

/* Card */
.hi-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: center;
}
.hi-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }

/* Icon chip */
.hi-card__icon{
  width: 64px; height: 64px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: #e8f5e9;
  box-shadow: 0 6px 16px rgba(76,175,80,.18);
  margin: 0 auto 14px;
}
.checkmark{
  color: #2e7d32;
  font-size: 30px;
  font-weight: 800;
}

/* ---------------- Scroll reveal utilities ---------------- */
.reveal-up{ opacity:0; transform: translateY(22px); }
.reveal-fade{ opacity:0; transform: translateY(14px); }
.reveal-animate{
  animation: reveal 600ms cubic-bezier(.21,1,.21,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes reveal{ to{ opacity:1; transform: translateY(0); } }

/* ---- Top bar ---- */
.topbar{
  background:#0f5132; /* deep green */
  color:#dfffe7;
  font-size:.95rem;
}
.topbar__inner{
  max-width:1200px;
  margin:0 auto;
  padding:8px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.topbar i{ margin-right:8px; color:#a7f3d0; }
.topbar a{
  color:#a7f3d0;
  text-decoration:none;
  font-weight:700;
}
.topbar a:hover{ text-decoration:underline; }
@media (max-width:640px){
  .topbar__inner{ flex-wrap:wrap; justify-content:center; text-align:center; }
}

/* ---- Hero canvas + CTA ---- */
.hero{
  position:relative; /* for canvas */
  overflow:hidden;
}
.hero__fx{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0;
}
.hero .hero-content{
  position:relative; z-index:1;
}
.btn-cta{
  display:inline-block;
  margin-top:16px;
  background:linear-gradient(135deg, var(--brand), #2e7d32);
  color:#fff; padding:12px 18px; border-radius:999px;
  text-decoration:none; font-weight:700;
  box-shadow:0 8px 22px rgba(76,175,80,.25);
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(76,175,80,.28); }

/* ---- Reveal utilities (reused) ---- */
.reveal-up{ opacity:0; transform: translateY(22px); }
.reveal-fade{ opacity:0; transform: translateY(14px); }
.reveal-animate{
  animation: reveal 600ms cubic-bezier(.21,1,.21,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes reveal{ to{ opacity:1; transform: translateY(0); } }



.btn{ display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none; }
.btn:hover{ filter:brightness(1.03); }