/* Open Air Wellness, LLC — Coastal Clinical Theme
   Calm motion, generous spacing, high trust, modern.
*/

:root{
  --bg: #f7f5f0;            /* warm off-white */
  --surface: rgba(255,255,255,0.75);
  --surface-2: rgba(255,255,255,0.92);
  --sand: #efe4d1;
  --seafoam: #dff2f1;
  --mist: #e9f3f6;
  --ocean: #0f6d79;         /* teal */
  --ocean-deep: #0b4f5a;    /* deeper teal */
  --ink: #0c2f36;           /* near-black teal */
  --muted: rgba(12,47,54,0.68);
  --line: rgba(12,47,54,0.12);
  --shadow: 0 18px 55px rgba(10, 45, 52, 0.10);
  --shadow-soft: 0 10px 30px rgba(10, 45, 52, 0.08);
  --radius: 22px;
  --radius-sm: 14px;
  --max: 1140px;
  --ease: cubic-bezier(.22,.9,.22,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: radial-gradient(1200px 600px at 15% -10%, rgba(15,109,121,0.08), transparent 55%),
              radial-gradient(900px 420px at 90% 10%, rgba(223,242,241,0.85), transparent 55%),
              linear-gradient(180deg, var(--mist), var(--bg) 35%, var(--bg));
  line-height: 1.6;
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding: 0 22px;}
.smallcaps{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 650;
  font-size: 12px;
  color: rgba(12,47,54,0.68);
}
.h1{
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 12px 0 14px;
}
.h2{
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
}
.h3{
  font-size: 18px;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.p-lead{
  font-size: clamp(16px, 2.0vw, 19px);
  color: var(--muted);
  margin: 0 0 20px;
  max-width: 62ch;
}

.header{
  position: fixed;
  top: 0; left:0; right:0;
  z-index: 50;
  background: rgba(247,245,240,0.55);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(12,47,54,0.10);
}
.header .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.brand .mark{
  width: 34px; height: 34px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.0) 55%),
    linear-gradient(135deg, rgba(15,109,121,0.85), rgba(239,228,209,0.85));
  box-shadow: var(--shadow-soft);
}
.brand .name{
  display:flex;
  flex-direction:column;
  line-height: 1.05;
}
.brand .name strong{font-size: 14px; letter-spacing: .06em; text-transform: uppercase;}
.brand .name span{font-size: 12px; color: var(--muted); letter-spacing: .02em;}

.nav{
  display:flex;
  align-items:center;
  gap: 16px;
}
.nav a{
  text-decoration:none;
  color: rgba(12,47,54,0.78);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}
.nav a:hover{background: rgba(223,242,241,0.65); color: var(--ink);}
.nav .cta{
  background: rgba(15,109,121,0.10);
  border: 1px solid rgba(15,109,121,0.22);
}
.nav .cta:hover{background: rgba(15,109,121,0.16);}
.header .contact-mini{
  display:flex;
  align-items:center;
  gap: 10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  text-decoration:none;
  font-weight: 650;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(12,47,54,0.12);
  box-shadow: 0 12px 30px rgba(10,45,52,0.06);
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.pill:hover{transform: translateY(-1px); background: rgba(255,255,255,0.82);}
.pill strong{font-weight: 800;}

.menu-btn{
  display:none;
  border: 1px solid rgba(12,47,54,0.14);
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 750;
}

.hero{
  position: relative;
  min-height: 100svh;
  padding-top: 92px;
  overflow:hidden;
}
.hero-media{
  position:absolute;
  inset: 0;
  z-index: 0;
}
.hero-media video,
.hero-media img{
  width: 100%;
  height: 110%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax, 0px), 0);
  filter: saturate(1.05) contrast(1.02);
}
.hero-media .veil{
  position:absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(247,245,240,0.20) 0%, rgba(247,245,240,0.72) 52%, rgba(247,245,240,0.96) 100%),
    radial-gradient(800px 420px at 18% 20%, rgba(223,242,241,0.65), transparent 60%);
}
.hero-inner{
  position: relative;
  z-index: 1;
  padding: 44px 0 34px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 28px;
  align-items: start;
}
.card{
  background: var(--surface);
  border: 1px solid rgba(12,47,54,0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-copy{
  padding: 26px 26px 22px;
}
.hero-copy .meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
  align-items:center;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(12,47,54,0.12);
  font-size: 12px;
  font-weight: 650;
}
.badge .dot{
  width: 8px; height: 8px;
  border-radius: 99px;
  background: rgba(15,109,121,0.85);
  box-shadow: 0 0 0 6px rgba(15,109,121,0.13);
}
.actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration:none;
  font-weight: 780;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(12,47,54,0.14);
  background: rgba(255,255,255,0.66);
  transition: transform 220ms var(--ease), background 220ms var(--ease);
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,0.85);}
.btn.primary{
  background: rgba(15,109,121,0.14);
  border-color: rgba(15,109,121,0.26);
}
.btn.primary:hover{background: rgba(15,109,121,0.20);}
.hero-profile{
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.headshot{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(12,47,54,0.12);
}
.headshot img{
  width:100%; height:100%;
  object-fit: cover;
}
.profile-meta{
  display:flex;
  flex-direction:column;
  gap: 3px;
}
.profile-meta strong{font-size: 16px; letter-spacing: -0.01em;}
.profile-meta span{font-size: 13px; color: var(--muted);}
.profile-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(12,47,54,0.72);
  font-size: 13px;
}
.wave-divider{
  display:block;
  width: 100%;
  height: auto;
  transform: translateY(1px);
}

.section{
  padding: 72px 0;
  position: relative;
}
.section.tight{padding: 54px 0;}
.section .section-card{
  padding: 26px;
}
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mission-card{
  padding: 22px 22px 18px;
}
.mission-card .h3{font-size: 14px; text-transform: uppercase; letter-spacing: .12em; color: rgba(12,47,54,0.60);}
.mission-card p{margin: 10px 0 0; color: var(--muted); max-width: 68ch;}

.kicker{
  margin: 0 0 10px;
  font-weight: 820;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(15,109,121,0.85);
}
.hr{
  height:1px;
  background: rgba(12,47,54,0.10);
  margin: 18px 0 0;
}

/* Services */
.services{
  display:flex;
  flex-direction:column;
  gap: 18px;
  margin-top: 26px;
}
.service{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(12,47,54,0.12);
  background: rgba(255,255,255,0.60);
  box-shadow: var(--shadow-soft);
}
.service .media{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(12,47,54,0.10);
  min-height: 210px;
}
.service .media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service .content{
  padding: 2px 4px;
}
.service .title{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.service .title h3{
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.service .title span{
  font-size: 12px;
  color: rgba(12,47,54,0.64);
  font-weight: 700;
}
.service p{margin: 0 0 10px; color: var(--muted); max-width: 70ch;}


.svc-label{
  margin: 8px 0 6px;
  color: rgba(12,47,54,0.78);
  font-size: 13px;
  font-weight: 780;
}

.service ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(12,47,54,0.72);
  font-size: 13px;
}


.section-bullets{
  margin: 8px 0 0;
  padding-left: 18px;
  color: rgba(12,47,54,0.72);
  font-size: 14px;
  line-height: 1.6;
}
.section-bullets li{ margin: 6px 0; }

.service.emdr{
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(223,242,241,0.75), rgba(255,255,255,0.55) 60%),
    linear-gradient(135deg, rgba(239,228,209,0.45), rgba(255,255,255,0.55));
  border-color: rgba(15,109,121,0.22);
}
.service.emdr .title span{color: rgba(15,109,121,0.9)}
.tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,109,121,0.24);
  background: rgba(15,109,121,0.08);
  color: rgba(15,109,121,0.95);
  font-weight: 780;
  font-size: 12px;
}

.deep-dive{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: start;
}
.deep-dive .panel{
  padding: 24px;
}
.deep-dive .panel p{color: var(--muted);}
.deep-dive .panel ul{color: rgba(12,47,54,0.72); padding-left: 18px;}
.deep-dive .shot{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(12,47,54,0.12);
  box-shadow: var(--shadow-soft);
  min-height: 320px;
}
.deep-dive .shot img{width:100%; height:100%; object-fit: cover;}

.media-block{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  padding: 24px;
}
.socials{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}
.socials a{
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(12,47,54,0.12);
  background: rgba(255,255,255,0.62);
  font-weight: 700;
  color: rgba(12,47,54,0.78);
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.socials a:hover{transform: translateY(-1px); background: rgba(255,255,255,0.85);}

/* Contact page blocks */
.contact-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
}
.list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.kv{
  padding: 18px;
}
.kv h3{margin: 0 0 6px; font-size: 16px;}
.kv p{margin: 0; color: var(--muted);}
.hours{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.hours .row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(12,47,54,0.10);
  background: rgba(255,255,255,0.58);
  font-size: 13px;
}
.form{
  padding: 18px;
}
.field{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 12px;
}
label{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 750;
  color: rgba(12,47,54,0.62);
}
input, textarea{
  border-radius: 14px;
  border: 1px solid rgba(12,47,54,0.14);
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
  background: rgba(255,255,255,0.75);
}
textarea{min-height: 128px; resize: vertical;}
.note{
  font-size: 12px;
  color: rgba(12,47,54,0.62);
}

/* Product / Books */
.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.card-item{
  padding: 16px;
  display:grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: start;
}
.card-item .img{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(12,47,54,0.12);
  background: rgba(255,255,255,0.55);
  min-height: 170px;
  aspect-ratio: 16 / 10;
}
.card-item .img img{width:100%; height:100%; object-fit: cover;}
.card-item .img, .card-item .txt{min-width:0;}
.card-item .img img{display:block;}
.card-item .txt h3{margin:0 0 8px; font-size: 18px;}
.card-item .txt p{margin:0 0 12px; color: var(--muted);}
.card-item .txt .btn{padding: 10px 12px; border-radius: 12px;}

/* Footer */
.footer{
  padding: 44px 0;
  border-top: 1px solid rgba(12,47,54,0.10);
  background: rgba(247,245,240,0.55);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
}
.footer p{margin: 10px 0 0; color: rgba(12,47,54,0.66); font-size: 13px;}
.footer a{text-decoration:none; font-weight: 750;}
.footer .mini-links{display:flex; gap: 12px; flex-wrap: wrap; margin-top: 10px;}
.footer .mini-links a{padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(12,47,54,0.12); background: rgba(255,255,255,0.55);}

/* Reveal animation (scroll-to-reveal) */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: transform, opacity;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"]{transition-delay: 90ms;}
.reveal[data-delay="2"]{transition-delay: 160ms;}
.reveal[data-delay="3"]{transition-delay: 230ms;}
.reveal[data-delay="4"]{transition-delay: 300ms;}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; gap: 16px;}
  .deep-dive{grid-template-columns: 1fr;}
  .service{grid-template-columns: 1fr;}
  .cards{grid-template-columns: 1fr;}
  .card-item{grid-template-columns: 1fr;}
  .contact-grid{grid-template-columns: 1fr;}
}
@media (max-width: 760px){
  .nav, .header .contact-mini{display:none;}
  .menu-btn{display:inline-flex;}
  .header .bar{gap: 10px;}
  .grid-2{grid-template-columns: 1fr;}
  .grid-3{grid-template-columns: 1fr;}
  .hero{padding-top: 82px;}
}

/* Mobile menu */
.mobile-nav{
  display:none;
  padding: 0 0 14px;
}
.mobile-nav.open{display:block;}
.mobile-nav a{
  display:block;
  text-decoration:none;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(12,47,54,0.10);
  background: rgba(255,255,255,0.62);
  margin-top: 10px;
  font-weight: 750;
  color: rgba(12,47,54,0.78);
}
.mobile-nav a.primary{
  background: rgba(15,109,121,0.14);
  border-color: rgba(15,109,121,0.25);
}

/* In Harmony catalog — price badge overlay */
.card-item .img{ position: relative; }
.price-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  width: min(240px, 70%);
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(12,47,54,0.12);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 30px rgba(12,47,54,0.10);
}


/* inHarmony page: product images should shrink-to-fit (no heavy cropping) */
.page-inharmony .card-item .img{display:flex; align-items:center; justify-content:center;}
.page-inharmony .card-item .img img{object-fit:contain; padding:10px;}



/* === inHarmony page hard fixes: no overlap, no crop === */
.cards, .catalog, .products, .product-grid { overflow: visible; }
.card-item, .product-card { overflow: hidden; } /* keeps inside card */

.cards .card-item,
.products .card-item,
.catalog .card-item{
  display: grid !important;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.cards .card-item .img,
.products .card-item .img,
.catalog .card-item .img{
  min-width: 0 !important;
  width: 100% !important;
  height: 220px !important;           /* consistent block height */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
}

.cards .card-item .img img,
.products .card-item .img img,
.catalog .card-item .img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;     /* NO CROP */
  object-position: center !important;
  display: block !important;
}

/* Ensure text column can shrink and never overlap */
.cards .card-item .content,
.products .card-item .content,
.catalog .card-item .content{
  min-width: 0 !important;
  position: relative !important;
}

/* Mobile: stack cleanly */
@media (max-width: 900px){
  .cards .card-item,
  .products .card-item,
  .catalog .card-item{
    grid-template-columns: 1fr !important;
  }
  .cards .card-item .img,
  .products .card-item .img,
  .catalog .card-item .img{
    height: 240px !important;
  }
}

/* Affiliate hero */
.affiliate-hero{ padding: 28px 0 10px; }
.affiliate-hero .wrap{ max-width: 980px; margin: 0 auto; padding: 0 18px; }
.affiliate-hero h1{ margin:0 0 6px; font-size: 28px; }
.affiliate-hero .sub{ margin:0; color: var(--muted,#475569); }

/* Books block */
.books-block{ padding: 28px 0 40px; }
.books-block .wrap{ max-width: 980px; margin: 0 auto; padding: 0 18px; }
.books-block h2{ margin:0 0 8px; }
.books-block .sub{ margin:0 0 14px; color: var(--muted,#475569); }

.book-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .book-grid{ grid-template-columns: 1fr; }
}

.book-card{
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--line,#e2e8f0);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  overflow: hidden;
}
.book-media{
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-right: 1px solid var(--line,#e2e8f0);
}
.book-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* NO CROP */
  display:block;
}
.book-meta{ padding: 14px; }
.book-title{ font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.book-sub{ color: var(--muted,#475569); margin-bottom: 10px; }
.book-cta{ color: var(--accent,#0f766e); font-weight: 700; }
@media (max-width: 900px){
  .book-card{ grid-template-columns: 1fr; }
  .book-media{ border-right: 0; border-bottom: 1px solid var(--line,#e2e8f0); }
}



/* =========================================================
   inHarmony page: HARD layout + image rules (no overlap, no crop)
   ========================================================= */
.page-inharmony .section .cards{
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.page-inharmony .section .card.card-item{
  display: flex !important;
  flex-direction: row !important;
  gap: 18px !important;
  align-items: flex-start !important;
}

.page-inharmony .section .card.card-item .img{
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 100% !important;
  height: 240px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(12,47,54,0.12) !important;
  background: rgba(255,255,255,0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

.page-inharmony .section .card.card-item .img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;      /* never crop */
  object-position: center !important;
  display: block !important;
}

.page-inharmony .section .card.card-item .txt{
  flex: 1 1 auto !important;
  min-width: 0 !important;             /* prevents weird overflow */
}

/* Cards should not stack into 2 columns on this page (catalog clarity) */
.page-inharmony .section .cards{
  grid-template-columns: none !important;
}

/* Mobile: stack image above text */
@media (max-width: 900px){
  .page-inharmony .section .card.card-item{
    flex-direction: column !important;
  }
  .page-inharmony .section .card.card-item .img{
    width: 100% !important;
    flex-basis: auto !important;
    height: 260px !important;
  }
}


/* Name + EMDRIA credential under hero */
.note-name{display:block; font-weight:700; color: rgba(12,47,54,0.78);}
.note-sub{display:block; margin-top:2px; font-weight:600; color: rgba(12,47,54,0.62);}