:root{
  --bg: #fbfdfd;
  --panel-bg: #d2d5ce;
  --panel-bg-soft: rgba(210,213,206,0.85);
  --panel-bg-light: rgba(210,213,206,0.65);

  --text: #1a1f2a;
  --muted: rgba(26,31,42,0.68);
  --line: rgba(26,31,42,0.10);

  --shadow: 0 14px 35px rgba(20, 25, 40, 0.10);
  --shadow2: 0 10px 22px rgba(20, 25, 40, 0.08);

  --max: 1180px;

  /* Brand accent (bolder pastel green) */
  --accent-hero: #5fbfa8;
  --accent-hero-soft: rgba(95,191,168,0.15);
  --accent-hero-glow: rgba(95,191,168,0.35);

  /* Sticky header offset for in-page anchor jumps */
  --nav-offset: 104px;
  --section-pad: 64px;

  scroll-padding-top: var(--nav-offset);
}



@media (max-width: 920px){
  :root{ --nav-offset: 104px; }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 18px; }

.accent-text{
  color: var(--accent-hero);
  font-weight: 700;
}

/* Gentle alternating section wash (optional) */
section:nth-of-type(even){
  background: rgba(210,213,206,0.28);
}

/* ===== Section headings ===== */
.section-head h3{
  position: relative;
  padding-left: 12px;
}

.section-head h3::before{
  content:"";
  position:absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 18px;
  border-radius: 999px;

  background: linear-gradient(180deg, #7fd6c2, var(--accent-hero));
  box-shadow: 0 0 0 1px rgba(26,31,42,0.10), 0 4px 10px rgba(95,191,168,0.35);
}

/* ===== FEATURE BAND — final opposing convex sweeps, aligned ===== */
.feature-band{
  background: var(--accent-hero);
  color: white;

  position: relative;
  overflow: visible;
  z-index: 2;

  /* controls */
  --extH: clamp(44px, 5vw, 120px);
  --extW: clamp(320px, 48vw, 900px);
  --overscan: 140px; /* prevents tail clipping */
}

/* keep content above sweeps */
.feature-band > .container{
  position: relative;
  z-index: 3;
}

/* shared sweep base */
.feature-band::before,
.feature-band::after{
  content:"";
  position:absolute;
  pointer-events: none;
  z-index: 1;

  height: calc(var(--extH) + 6px); /* overlap to kill seams */
  width: calc(var(--extW) + var(--overscan));

  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* TOP-LEFT: convex "lift" upward into section above (tapers to 0 at right) */
.feature-band::before{
  left: calc(-1 * (var(--overscan) / 2));
  top: calc(-1 * var(--extH) + 3px);

 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 220' preserveAspectRatio='none'%3E%3Cpath d='M0,220 L1000,220 C820,210 540,160 260,90 C140,60 70,25 0,0 Z' fill='%235fbfa8'/%3E%3C/svg%3E");

}

/* BOTTOM-RIGHT: convex "drop" downward into section below (tapers to 0 at left) */
.feature-band::after{
  right: calc(-1 * (var(--overscan) / 2));
  bottom: calc(-1 * var(--extH) + 3px);

 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 220' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C180,10 460,60 740,130 C860,160 930,195 1000,220 L1000,0 Z' fill='%235fbfa8'/%3E%3C/svg%3E");
}

/* mobile tuning */
@media (max-width: 920px){
  .feature-band{
    --extH: clamp(28px, 6vw, 70px);
    --extW: 86vw;
    --overscan: 90px;
  }
}



.feature-band .section-head h3,
.feature-band p{
  color: rgb(37, 37, 37);
}

.feature-band .card{
  background: rgba(255,255,255,0.92);
  color: var(--text);
}

.feature-band .pill{
  background: rgba(255,255,255,0.22);
  color: rgb(46, 46, 46);
  border-color: rgba(255,255,255,0.35);
}

@media (max-width: 920px){
  .feature-band{
    --extH: clamp(28px, 6vw, 64px);
    --extW: 78vw;
  }
}

/* ===== NAV ===== */
.nav-wrap{
  overflow: visible;
  position: sticky;
  top: 0;
  z-index: 999;

  /* frosted glass */
  background: rgba(251, 251, 253, 0.68);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);

  /* subtle edge definition */
  border-bottom: 1px solid rgba(26, 31, 42, 0.10);

  /* prevents harsh transitions when scrolling */
  transition: background-color 200ms ease, backdrop-filter 200ms ease;
}


.nav-wrap::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-hero), transparent);
  z-index: 0;
  pointer-events: none;
}

.nav{
    overflow: visible;
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 18px;
  max-width: var(--max);
  margin: 0 auto;
}

.brand{ display:flex; align-items:center; gap: 10px; min-width: 220px; }

.logo{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(26,31,42,0.12);
  background:
    linear-gradient(180deg, rgba(210,213,206,0.25), rgba(210,213,206,0.05)),
    linear-gradient(135deg, #7fd6c2, var(--accent-hero));
  box-shadow: 0 10px 20px rgba(95,191,168,0.35);
  position: relative;
  overflow: hidden;
}

.logo::before,
.logo::after{
  content:"";
  position:absolute;
  background: rgba(255,255,255,0.95);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(26,31,42,0.12);
}

.logo::before{
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
}

.logo::after{
  left: 8px;
  right: 8px;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
}

.brand h1{ margin:0; font-size: 14px; letter-spacing: 0.2px; font-weight: 750; }
.brand p{ margin:0; font-size: 12px; color: var(--muted); }

.brand h1{
  background: linear-gradient(90deg, rgba(26,31,42,1), rgba(26,31,42,0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.menu{ display:flex; align-items:center; gap: 6px; }
.menu > li{ list-style:none; position: relative; }

.menu > li > a,
.menu > li > button{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.menu > li > a:hover,
.menu > li > button:hover{
  background: rgba(255,255,255,0.70);
  border-color: rgba(26,31,42,0.10);
  box-shadow: 0 8px 18px rgba(20,25,40,0.06);
}

.caret{
  width: 9px; height: 9px;
  display:inline-block;
  border-right: 2px solid rgba(26,31,42,0.55);
  border-bottom: 2px solid rgba(26,31,42,0.55);
  transform: rotate(45deg);
  margin-top: -2px;
}

.dropdown{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  padding: 8px;

  border-radius: 4px; /* or 0 for sharp */
  border: 1px solid rgba(26,31,42,0.14);

  /* IMPORTANT: background must exist */
  background-color: rgba(251,251,253,0.72);

  /* FORCE glass behaviour */
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);

  /* force its own compositing layer */
  isolation: isolate;
  will-change: backdrop-filter;

  box-shadow: 0 18px 40px rgba(20,25,40,0.16);

  display: none;
  z-index: 1000;
}



.dropdown::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.dropdown a{
  display:flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.dropdown a:hover{
  background: rgba(210,213,206,0.55); /* panel-grey tint */
  border-color: rgba(95,191,168,0.35);
}



.dropdown .title{ font-weight: 700; font-size: 13px; }
.dropdown .desc{ font-size: 12px; color: var(--muted); }

@media (hover: hover) and (pointer: fine){
  .menu > li:hover .dropdown{ display:block; }
}

.nav-actions{ display:flex; align-items:center; gap: 10px; }

/* ===== BUTTONS ===== */
button, .btn, .btn-ghost{ border-radius: 6px; }

.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  min-height: 40px;

  border-radius: 6px;
  border: 1px solid rgba(26,31,42,0.10);

  /* base state */
  background: var(--accent-hero);
  color: rgba(26,31,42,0.92);

  font-weight: 750;
  font-size: 13px;
  line-height: 1.2;

  box-shadow: 0 10px 22px rgba(95,191,168,0.30);
  cursor: pointer;

  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.btn::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04));
  pointer-events:none;
  opacity: 1;
  transition: opacity 220ms ease; /* <-- smooth, no flicker */
}

/* kill the shine on hover so it doesn't fight the ghost-style wash */
.btn:hover::after{
  opacity: 0;
}

.btn:hover{
  background-color: #6ccbb4; /* lighter, cooler green than base */
  color: rgba(26,31,42,0.92);

  box-shadow: 0 14px 34px rgba(95,191,168,0.38);
}




.btn:active{
  box-shadow: 0 8px 16px rgba(95,191,168,0.25);
}

.btn-ghost{
  position: relative;
  padding: 11px 20px;
  min-height: 40px;
  border-radius: 6px;

  border: 1px solid rgba(95,191,168,0.35);
  background: rgba(255,255,255,0.85);
  color: var(--accent-hero);
  font-weight: 700;
  font-size: 13px;

  box-shadow: 0 6px 14px rgba(20,25,40,0.06);
  cursor: pointer;
  transition: 160ms ease;
}

.btn-ghost::after{ display: none; }

.btn-ghost:hover{
  background: rgba(95,191,168,0.08);
}

.btn,
.btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hamburger{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(26,31,42,0.10);
  background: rgba(255,255,255,0.70);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(20,25,40,0.06);
}

.hamburger span{
  width: 18px; height: 2px;
  background: rgba(26,31,42,0.65);
  display:block;
  position: relative;
}

.hamburger span:before, .hamburger span:after{
  content:"";
  position:absolute; left: 0;
  width: 18px; height: 2px;
  background: rgba(26,31,42,0.65);
}

.hamburger span:before{ top: -6px; }
.hamburger span:after{ top: 6px; }

.mobile-panel{
  display:none;
  border-top: 1px solid var(--line);
  background: rgba(251,251,253,0.88);
}

.mobile-panel.show{ display:block; }

.mobile-panel .inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 18px 16px;
  display:grid;
  gap: 8px;
}

.m-item{
  border-radius: 16px;
  border: 1px solid rgba(26,31,42,0.10);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 10px 18px rgba(20,25,40,0.05);
  padding: 12px;
}

.m-top{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; cursor:pointer; user-select:none;
}

.m-top strong{ font-size: 13px; }

.m-links{
  display:none;
  padding-top: 10px;
  gap: 8px;
}

.m-direct{
  display:block;
  padding: 6px 2px;
  font-weight: 700;
}

.m-links a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(26,31,42,0.08);
  background: rgba(255,255,255,0.85);
  font-size: 13px;
  color: var(--muted);
}

.m-book{ text-align:center; }

/* ===== HERO ===== */
.hero{
  position: relative;
  padding: 96px 0 56px;

  background-image:
    linear-gradient(180deg, rgba(251,251,253,0.55), rgba(251,251,253,0.75)),
    url("https://images.unsplash.com/photo-1584819762556-68601d7f3a86?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero::after{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(900px 420px at 15% 25%, rgba(95,191,168,0.10), transparent 55%);
  pointer-events: none;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: center;
}

.badge{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(26,31,42,0.10);
  background: rgba(255,255,255,0.70);
  color: var(--muted);
  font-size: 12px;
  box-shadow: 0 10px 18px rgba(20,25,40,0.05);
  width: fit-content;
}

.dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: #7fd6c2;
  box-shadow: 0 0 0 4px rgba(35, 73, 48, 0.2);
}

.hero h2{
  margin: 14px 0 10px;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero p{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  max-width: 62ch;
}

.hero-actions{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; }
.hero-ticks{ margin-top: 18px; color: var(--muted); font-size: 13px; }

.hero-card{
  border-radius: 22px;
  border: 1px solid rgba(26,31,42,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.62));
  box-shadow: var(--shadow);
  overflow:hidden;
}

.hero-img{
  height: 190px;
  background-size: cover;
  background-position: center;
  background-image: url("https://images.unsplash.com/photo-1746708810803-722593e53772?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

.hero-inner{ padding: 16px; display:grid; gap: 12px; }
.stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stat{
  border-radius: 16px;
  border: 1px solid rgba(26,31,42,0.08);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 10px 18px rgba(20,25,40,0.04);
  padding: 12px;
}

.stat strong{ display:block; font-size: 14px; }
.stat span{ color: var(--muted); font-size: 12px; }

/* ===== SECTIONS ===== */
section{
  padding: var(--section-pad) 0;
  position: relative;
  border-top: 1px solid rgba(26,31,42,0.08);
}

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 16px; margin-bottom: 18px;
}
.section-head h3{ margin:0; font-size: 20px; letter-spacing: -0.01em; }
.section-head p{ margin:0; color: var(--muted); max-width: 70ch; font-size: 14px; }

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

/* Modern flat panels */
.card{
  border-radius: 0;
  background: rgba(255,255,255,0.92);
  border: none;
  box-shadow: none;
  padding: 20px;
}

.card .kicker{ display:flex; align-items:center; gap: 10px; color: var(--muted); font-size: 12px; }

.pill{
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(210,213,206,0.85);
  border: 1px solid rgba(26,31,42,0.12);
  color: rgba(26,31,42,0.75);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.pill.soft{
  background: linear-gradient(180deg, rgba(210,213,206,0.95), rgba(210,213,206,0.75));
  border-color: rgba(95,191,168,0.35);
  color: rgba(26,31,42,0.82);
}

/* Featured pill for emphasis (green) */
.pill.feature{
  background: linear-gradient(135deg, #7fd6c2, var(--accent-hero));
  color: rgba(26,31,42,0.92);
  border-color: rgba(26,31,42,0.10);
  box-shadow: 0 6px 14px rgba(95,191,168,0.25);
}

.card h4{ margin: 10px 0 8px; font-size: 16px; }
.card p{ margin:0; color: var(--muted); font-size: 13px; }

.card-img{
  height: 150px;
  border-radius: 16px;
  border: 1px solid rgba(26,31,42,0.10);
  overflow:hidden;
  margin-bottom: 12px;
  background-size: cover;
  background-position: center;
}

/* images via classes (easy to swap later) */
.img-aw{ background-image:url("https://images.unsplash.com/photo-1580281657527-47f249e8f6cf?auto=format&fit=crop&w=1600&q=60"); }
.img-filler{ background-image:url("https://images.unsplash.com/photo-1550831107-1553da8c8464?auto=format&fit=crop&w=1600&q=60"); }
.img-skin{ background-image:url("https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?auto=format&fit=crop&w=1600&q=60"); }
.img-about1{ background-image:url("https://images.unsplash.com/photo-1576671081837-49000212a370?auto=format&fit=crop&w=1600&q=60"); }
.img-about2{ background-image:url("https://images.unsplash.com/photo-1551076805-e1869033e561?auto=format&fit=crop&w=1600&q=60"); }
.img-results1{ background-image:url("https://images.unsplash.com/photo-1520975693411-b4f6c3f8b2a0?auto=format&fit=crop&w=1600&q=60"); }
.img-results2{ background-image:url("https://images.unsplash.com/photo-1520975958225-38b318b9d66d?auto=format&fit=crop&w=1600&q=60"); }
.img-results3{ background-image:url("https://images.unsplash.com/photo-1526256262350-7da7584cf5eb?auto=format&fit=crop&w=1600&q=60"); }
.img-contact{ height:170px; background-image:url("https://images.unsplash.com/photo-1527613426441-4da17471b66d?auto=format&fit=crop&w=1600&q=60"); }

/* Parallax sections */
.parallax{
  padding: 86px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(180deg, rgba(251,251,253,0.20), rgba(251,251,253,0.72)),
    url("https://images.unsplash.com/photo-1527613426441-4da17471b66d?auto=format&fit=crop&w=2400&q=60");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.parallax .card{ background: rgba(255,255,255,0.82); }

.parallax2{
  padding: 86px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(180deg, rgba(251,251,253,0.30), rgba(251,251,253,0.78)),
    url("https://images.unsplash.com/photo-1527799820374-dcf8d9d4a3b2?auto=format&fit=crop&w=2400&q=60");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Pricing */
.price{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(26,31,42,0.08);
}
.price strong{ font-size: 18px; letter-spacing: -0.01em; }
.price span{ color: var(--muted); font-size: 12px; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-details{ color: var(--muted); margin-top: 6px; }
.contact-actions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }
.tip{ margin-top: 12px; color: var(--muted); font-size: 12px; }
.form-sub{ color: var(--muted); margin-top: -2px; font-size: 13px; }
.form-actions{ margin-top: 12px; }

input, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(26,31,42,0.10);
  background: rgba(255,255,255,0.85);
  color: var(--text);
  outline: none;
  font: inherit;
  box-shadow: 0 10px 18px rgba(20,25,40,0.04);
}
textarea{ min-height: 120px; resize: vertical; }
label{ display:block; font-size: 12px; color: var(--muted); margin: 8px 0 6px; }

.mt10{ margin-top: 10px; }
.review-sub{ color: var(--muted); font-size: 12px; }

footer{
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer-links{ display:flex; gap:14px; flex-wrap:wrap; }

/* ===== Responsive ===== */
@media (max-width: 920px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }

  .menu, .nav-cta{ display:none; }
  .hamburger{ display:flex; }
  .nav{ padding: 10px 14px; }
}

/* Parallax fallback for mobile */
@media (max-width: 920px){
  .parallax, .parallax2{ background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .parallax, .parallax2{ background-attachment: scroll; }
}