/* ============================================================
   TABLE OF CONTENTS
   2.  Global Reset & Base Styles
   3.  Typography
   4.  Utility Classes
   5.  Search Component
   6.  Hero Section
   7.  Section Headers & Labels
   8.  Conditions Section
   9.  Info / About Section
   10. Services Section
   11. Testimonials Section
   12. Team Section
   13. CTA Section
   14. Contact Bar & Contact Cards
   15. FAQ Module
   16. Featured List
   17. Footer
   18. Diamond Gallery Section
   19. Inline Trigger
   20. Media Queries (consolidated)
============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
============================================================ */
:root {
  /* Brand Colors */
  --dark: #153b37;
  --dark-mid: #1a4a45;
  --mid: #2a635c;
  --light: #3e857c;
  --lightest: #4a9e94;
  --accent: #e8a087;
  --accent-light: #f2c4b3;
  --accent-glow: rgba(232, 160, 135, 0.4);
  --white: #ffffff;
  --off-white: #f8fafa;
  --gray-light: #e8eeee;
  --text-dark: #1a2e2b;
  --text-muted-dark: #4a5f5c;
  --text-light: #d4e5e2;
  --text-muted-light: rgba(212, 229, 226, 0.6);

  /* Search Component */
  --search-ring: var(--color-accent);
  --search-border: #e5e7eb;
  --search-shadow: 0 8px 30px rgba(2, 6, 23, 0.06);
  --radius: 14px;
  --h-pad: 1.1rem;
  --btn-bg: var(--color-accent);
  --btn-fg: #fff;
}


/* ============================================================
   2. GLOBAL RESET & BASE STYLES
============================================================ */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 300;
  background: var(--white);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

/* Lightbox */
.mfp-img {
  background: #fff;
  padding: 5%;
}


/* ============================================================
   3. TYPOGRAPHY
============================================================ */
body #main-content {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
}

#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4,
#page-container h5,
#page-container h6 {
  line-height: 1em !important;
  padding-bottom: 0px;
}

.accent-font {
  color: var(--accent-light) !important;
  font-style: italic !important;
}

.under-text {
  font-size: .5em !important;
  line-height: .8em !important;
  display: block !important;
}

/* ============================================================
   4. UTILITY CLASSES
============================================================ */
.center { text-align: center; }
.left   { text-align: left; }
.right  { text-align: right; }

.white * { color: white; }
.force-dark { color: var(--dark) !important; }

.section-dark     { background: var(--dark); color: var(--text-light); }
.section-white    { background: var(--white); color: var(--text-dark); }
.section-off-white { background: var(--off-white); color: var(--text-dark); }

/* A11y */
.site-search .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;
}


/* ============================================================
   5. SEARCH COMPONENT
============================================================ */
.site-search {
  width: 100%;
  margin: 0;
}

.site-search .search-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  background: var(--search-bg);
  color: var(--search-fg);
  border: 1px solid var(--search-border);
  border-radius: var(--radius);
  box-shadow: var(--search-shadow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.06s ease;
}

.site-search .search-wrap:hover {
  transform: translateY(-1px);
}

.site-search .search-ico {
  position: absolute;
  left: 0.9rem;
  width: 20px;
  height: 20px;
  fill: var(--color-dark);
  pointer-events: none;
}

.site-search .search-input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0.9rem calc(1.1rem + 0rem) 0.9rem var(--h-pad);
  padding-left: calc(var(--h-pad) + 1.8rem);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.3;
}

.site-search .search-input::placeholder {
  color: var(--search-muted);
}

.site-search .search-btn {
  margin: 4px;
  border: 0;
  border-radius: calc(var(--radius) - 6px);
  padding: 0.7rem 1rem;
  font-weight: 600;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform 0.06s ease, opacity 0.2s ease, background 0.2s ease;
}

.site-search .search-btn:hover  { opacity: 0.95; }
.site-search .search-btn:active { transform: translateY(1px); }

.site-search .search-input:focus-visible ~ .search-btn,
.site-search .search-input:focus-visible,
.site-search .search-wrap:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--search-ring) 25%, transparent);
  border-color: color-mix(in srgb, var(--search-ring) 60%, var(--search-border));
}

.full-bleed .site-search .search-wrap {
  border-radius: 0;
}


/* ============================================================
   6. HERO SECTION
============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--dark);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(62, 133, 124, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(232, 160, 135, 0.08) 0%, transparent 40%);
}

.hero-image {
  position: absolute;
  right: 0;
  top: 0;
  width: 55%;
  height: 100%;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--dark) 0%, transparent 40%);
}

/* Floating Diamonds */
.hero-diamonds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@keyframes floatDiamond {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  25%       { transform: rotate(45deg) translate(20px, -30px); }
  50%       { transform: rotate(45deg) translate(-10px, 20px); }
  75%       { transform: rotate(45deg) translate(15px, 10px); }
}

.floating-diamond {
  position: absolute;
  background: var(--light);
  transform: rotate(45deg);
  opacity: 0.1;
  animation: floatDiamond 25s infinite ease-in-out;
}

.floating-diamond:nth-child(1) { width: 80px;  height: 80px;  left: 5%;   top: 20%;    animation-delay: 0s; }
.floating-diamond:nth-child(2) { width: 40px;  height: 40px;  left: 15%;  top: 60%;    animation-delay: -5s;  opacity: 0.15; }
.floating-diamond:nth-child(3) { width: 120px; height: 120px; right: 10%; top: 15%;    animation-delay: -10s; opacity: 0.05; }
.floating-diamond:nth-child(4) { width: 60px;  height: 60px;  right: 20%; bottom: 20%; animation-delay: -15s; }
.floating-diamond:nth-child(5) { width: 30px;  height: 30px;  left: 40%;  top: 10%;    animation-delay: -8s;  opacity: 0.2; background: var(--accent); }

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  padding-top: 6rem;
  color: var(--text-light);
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-text {
  opacity: 0;
  animation: fadeSlideUp 1s ease forwards 0.3s;
  max-width: 650px;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* 2026-09-11, client: "reduce the H1 size on the homepage, maybe every page".
   Changed here rather than on the home page alone: the hero H1 is one component
   with the same job on all ~40 heroes, so a home-only override would have made
   the front page the odd one out and left a second size to keep in step.
   Down from clamp(2.3rem, 4.8vw, 3.6rem) — 37px to 58px — to 34px to 48px, about
   a sixth off at both ends. The 4.1vw middle term reaches the new ceiling at
   1170px, so the ramp still finishes before the desktop nav's own breakpoints.
   body.home caps it again against the viewport (tmj-lean.css 7a); that cap was
   lowered to match. */
.hero-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.1rem, 4.1vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

/* Mobile: the clamp minimum (2.3rem/~37px) is too large on small screens for long
   hero titles — scale it down below 640px. */
@media (max-width: 640px) {
  .hero-title { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
}

/* `.white *` only colours descendants, so a hero title with a bare text node
   before its <span> (e.g. "Laser <span>Therapy in Cleveland</span>") left that
   bare text dark. Colour the element itself white too. (Home's title is all
   spans, so this is a no-op there; every service hero needs it.) */
.hero-title.white { color: #ffffff; }

/* Same bug, same fix, for section headings on dark sections: `.white *` colours
   descendants only, so `<h2 class="section-title white">Plain text <span>x</span></h2>`
   left the bare text node dark-on-dark and effectively invisible. */
.section-title.white { color: #ffffff; }

/*.hero-title span:not(.animate-words) { 
color: var(--accent); 
}*/

.hero-desc {
  font-size: 1.1rem;
  color: var(--text-muted-light);
  max-width: 1080px !important;
  margin-bottom: 2.5rem;
}

/* .hero-desc is a <p> in most templates but a <div> when a rich-text field holds
   more than one paragraph (see ac_symptom_hero_desc_html). Children inherit the
   colour and size, and the last one gives up its margin so the wrapper's 2.5rem
   is the only gap before .hero-buttons — the spacing is identical either way. */
.hero-desc > p {
  font-size: inherit;
  color: inherit;
  margin: 0 0 1em;
}
.hero-desc > :last-child { margin-bottom: 0; }

.hero-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* A tertiary text link sitting under a .hero-buttons pair -- e.g. the
   "Take a Pain & Sleep Quiz" link on the Why Choose Us band (client, 2026-08-17).
   .hero-buttons carries no bottom margin, so without this the link renders 3px
   under the buttons and reads as part of them. Adjacent-sibling scoped, so it
   only applies where that pattern is actually used. */
.hero-buttons + .info-text {
  margin-top: 1.25rem;
}


/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  background: var(--accent);
  color: var(--dark);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-light);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.btn-primary span,
.btn-primary svg {
  position: relative;
  z-index: 1;
}

.btn-primary:hover::before {
  transform: translateX(0);
}

.btn-primary svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.btn-secondary::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--light);
  transition: width 0.3s ease, background 0.3s ease;
}

.btn-secondary:hover {
  color: var(--accent-light);
}

.btn-secondary:hover::after {
  width: 60px;
  background: var(--accent);
}

/* Hero Trust Badges */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(62, 133, 124, 0.3);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted-light);
}

.trust-item svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
}


/* ============================================================
   7. SECTION HEADERS & LABELS
============================================================ */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header.no-margin {
  margin-bottom: 0px;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section-label::before,
.section-label::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--accent);
}

.section-label::before {
  clip-path: polygon(100% 0, 100% 100%, 0 50%, 0 50%);
}

.section-label::after {
  clip-path: polygon(0 0, 100% 50%, 100% 50%, 0% 100%);
}

.section-dark .section-label::before {
  background: linear-gradient(90deg, transparent, var(--accent));
}

.section-dark .section-label::after {
  background: linear-gradient(90deg, var(--accent), transparent);
}

.section-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted-dark);
  max-width: 600px;
  margin: 1rem auto 0;
}

.section-dark .section-subtitle {
  color: var(--text-muted-light);
}


/* ============================================================
   8. CONDITIONS SECTION
============================================================ */
.conditions {
  padding: 8rem 0;
  position: relative;
}

.conditions-grid {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.condition-card {
  flex: 0 1 375px;
  position: relative;
  padding: 2.5rem 1.5rem;
  background: var(--off-white);
  border: 1px solid var(--gray-light);
  text-align: center;
  transition: all 0.5s ease;
  overflow: hidden;
}

.condition-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--light), var(--accent));
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.condition-card-number {z-index: 10; color: white; position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%)}

.condition-card:hover::before {
  transform: scaleX(1);
}

.condition-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(21, 59, 55, 0.1);
  border-color: transparent;
}

.condition-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 1.25rem;
  position: relative;
}

.condition-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--light);
  transform: rotate(45deg);
  transition: all 0.4s ease;
}

.condition-icon::after {
  content: "";
  position: absolute;
  inset: 12px;
  background: var(--accent);
  transform: rotate(45deg);
  transition: all 0.4s ease;
}

.condition-card:hover .condition-icon::before {
  inset: -5px;
  border-color: var(--accent);
}

.condition-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--dark);
}

.condition-desc {
  font-size: 0.85rem;
  color: var(--text-muted-dark);
}


/* ============================================================
   9. INFO / ABOUT SECTION
============================================================ */
.info-diamond-accent {
  position: absolute;
  top: 50%;
  left: -40px;
  width: 80px;
  height: 80px;
  background: var(--accent);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.8;
}

.info-content {
  position: relative;
  z-index: 2;
}

/* `.dark` here means DARK TEXT, for use on light backgrounds — it overrides
   .info-text's default --text-muted-light (which is the light-on-dark colour).
   `blockquote` and `li` must be listed too: without them a
   <blockquote class="info-text"> keeps the light colour and renders at contrast
   ratio 1.1 on white — invisible. That shipped on three pages before it was
   caught (2026-08-17), because the markup looks perfectly correct. */
.info-content.dark p,
.info-content.dark blockquote,
.info-content.dark li {
  color: var(--dark);
}

.info-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

/*.info-title span {
  color: var(--accent);
}*/

.info-text {
  color: var(--text-muted-light);
  margin-bottom: 1.25rem;
}

.info-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.info-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.info-feature-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
}

.info-feature-icon::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}

.info-feature h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.info-feature p {
  font-size: 0.85rem;
  color: var(--text-muted-light);
}


/* ============================================================
   10. SERVICES SECTION
============================================================ */
.services {
  padding: 8rem 0;
  position: relative;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.service-card {
  position: relative;
  overflow: hidden;
}

.service-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.service-card:hover .service-image img {
  transform: scale(1.08);
}

.service-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--dark) 0%, transparent 60%);
}

.service-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  color: var(--white);
	font-size: 1.2rem !important;
}

.service-number {
  font-family: "Cormorant Garamond", serif;
  font-size: 3em;
  font-weight: 300;
  color: var(--accent);
  opacity: 0.5;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.service-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 3em;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.service-desc,
.service-card .service-desc {
  font-size: 1em !important;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
  max-height: 0;
}

.service-card:hover .service-desc {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
	.service-content {
		font-size: 1rem !important;
	}
	.service-content .service-title {
		font-size: 1.5em !important;
	}
	.service-content p.service-desc {
		font-size: .8em !important;
	}
	.service-image {
		aspect-ratio: 1/1.5 !important
	}
	@media (max-width: 980px) {
  .service-image::after {
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.3) 100%)!important;
  }
} 
}


/* ============================================================
   11. TESTIMONIALS SECTION
============================================================ */
.testimonials {
  padding: 8rem 0;
  position: relative;
}

.testimonials-container {
  position: relative;
  margin-top: 3rem;
}

.testimonials-slider {
  position: relative;
  overflow: clip;
  overflow-clip-margin: 40px content-box;
}

@supports not (overflow-clip-margin: 1px) {
  .testimonials-slider {
    overflow: hidden;
    padding: 40px 0;
    margin: -40px 0;
  }
}

.testimonials-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-slide {
  min-width: 100%;
  padding: 2rem 1rem 3rem;
  flex-shrink: 0;
}

.testimonial-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.testimonial-image {
  position: relative;
  aspect-ratio: 1;
  max-width: 400px;
  margin: 25px;
}

.testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-image::before {
  content: "";
  position: absolute;
  inset: -15px;
  border: 1px solid var(--light);
  transform: rotate(3deg);
  pointer-events: none;
}

.testimonial-image::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 60px;
  height: 60px;
  background: var(--accent);
  transform: rotate(45deg);
  pointer-events: none;
}

.testimonial-content {
  position: relative;
}

.testimonial-quote-mark {
  width: 50px;
  height: 50px;
  margin-bottom: 1.5rem;
  opacity: 0.3;
  position: relative;
}

.testimonial-quote-mark::before,
.testimonial-quote-mark::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--accent);
  transform: rotate(45deg);
}

.testimonial-quote-mark::after {
  left: 24px;
}

.testimonial-text {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: var(--dark);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-diamond {
  width: 50px;
  height: 50px;
  position: relative;
}

.author-diamond::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--light), var(--accent));
  transform: rotate(45deg);
}

.author-info h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--dark);
}

.author-info span {
  font-size: 0.85rem;
  color: var(--text-muted-dark);
}

.testimonial-rating {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.testimonial-rating svg {
  width: 16px;
  height: 16px;
  fill: var(--accent);
}

/* Slider Navigation */
.slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
}

.slider-btn {
  width: 50px;
  height: 50px;
  background: transparent;
  border: 1px solid var(--light);
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.slider-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--light);
  transform: scale(0);
  transition: transform 0.3s ease;
}

.slider-btn:hover::before {
  transform: scale(1);
}

.slider-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--light);
  stroke-width: 1.5;
  fill: none;
  position: relative;
  z-index: 2;
  transition: stroke 0.3s ease;
}

.slider-btn:hover svg {
  stroke: var(--white);
}

.slider-dots {
  display: flex;
  gap: 0.75rem;
}

.slider-dot {
  width: 10px;
  height: 10px;
  background: transparent;
  border: 1px solid var(--light);
  transform: rotate(45deg);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot.active,
.slider-dot:hover {
  background: var(--accent);
  border-color: var(--accent);
}


/* ============================================================
   12. TEAM SECTION
============================================================ */
.team {
  padding: 8rem 0;
  position: relative;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.team-grid.col2 {
  grid-template-columns: repeat(2, 1fr);
}

.team-grid.col3 {
  grid-template-columns: repeat(3, 1fr);
}


.team-card {
  text-align: center;
}

.team-image {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-card:hover .team-image img {
  transform: scale(1.05);
}

.team-image::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 2;
}

.team-card:hover .team-image::before {
  opacity: 1;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
}

.team-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ============================================================
   13. CTA SECTION
============================================================ */
.cta-section {
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
}

.cta-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg,  rgba(62, 133, 124, 0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(62, 133, 124, 0.03) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, rgba(62, 133, 124, 0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(62, 133, 124, 0.03) 75%);
  background-size: 40px 40px;
}

.cta-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--white);
}

/*.cta-title span {
	color: var(--accent);
}*/

.cta-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted-light);
  max-width: 550px;
  margin-bottom: 2.5rem;
}

/* Diamond CTA Button */
.diamond-cta {
  position: relative;
  width: 180px;
  height: 180px;
  cursor: pointer;
  background: none;
  border: none;
}

.cta-ring {
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
}

.cta-ring::before,
.cta-ring::after {
  content: "";
  position: absolute;
  inset: -20px;
  border: 1px solid var(--light);
  opacity: 0.3;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-ring::after {
  inset: -40px;
  opacity: 0.15;
}

.diamond-cta:hover .cta-ring::before {
  inset: -35px;
  opacity: 0.5;
  border-color: var(--accent);
}

.diamond-cta:hover .cta-ring::after {
  inset: -60px;
  opacity: 0.25;
  border-color: var(--accent);
}

.cta-diamond-shape {
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
  background: linear-gradient(
    135deg,
    rgba(62, 133, 124, 0.15) 0%,
    rgba(62, 133, 124, 0.05) 50%,
    rgba(232, 160, 135, 0.1) 100%
  );
  border: 1px solid var(--light);
  backdrop-filter: blur(10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.cta-diamond-shape::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0.4;
}

.diamond-cta:hover .cta-diamond-shape {
  background: linear-gradient(
    135deg,
    rgba(62, 133, 124, 0.25) 0%,
    rgba(232, 160, 135, 0.15) 50%,
    rgba(62, 133, 124, 0.2) 100%
  );
  border-color: var(--accent);
  box-shadow: 0 0 60px rgba(62, 133, 124, 0.3);
  transform: rotate(45deg) scale(1.05);
}

/* CTA Corner Accents */
.cta-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-corner--top    { top: -6px;    left: 50%;  transform: translateX(-50%) rotate(45deg); }
.cta-corner--bottom { bottom: -6px; left: 50%;  transform: translateX(-50%) rotate(45deg); }
.cta-corner--left   { left: -6px;   top: 50%;   transform: translateY(-50%) rotate(45deg); }
.cta-corner--right  { right: -6px;  top: 50%;   transform: translateY(-50%) rotate(45deg); }

.diamond-cta:hover .cta-corner {
  background: var(--accent);
  box-shadow: 0 0 15px var(--accent-glow);
}

.diamond-cta:hover .cta-corner--top    { top: -15px; }
.diamond-cta:hover .cta-corner--bottom { bottom: -15px; }
.diamond-cta:hover .cta-corner--left   { left: -15px; }
.diamond-cta:hover .cta-corner--right  { right: -15px; }

/* CTA Pulse Animation */
@keyframes ctaPulse {
  0%   { transform: rotate(45deg) scale(1);   opacity: 0.3; }
  100% { transform: rotate(45deg) scale(1.5); opacity: 0; }
}

.cta-pulse {
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
  border: 1px solid var(--light);
  opacity: 0;
  animation: ctaPulse 3s infinite ease-out;
}

.cta-pulse:nth-child(2) { animation-delay: 1s; }
.cta-pulse:nth-child(3) { animation-delay: 2s; }

.diamond-cta:hover .cta-pulse {
  animation-play-state: paused;
  opacity: 0;
}

/* CTA Button Content */
.cta-btn-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.5s ease;
}

.diamond-cta:hover .cta-btn-content {
  transform: scale(1.05);
}

.cta-btn-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 0.5rem;
  stroke: var(--light);
  stroke-width: 1.5;
  fill: none;
  transition: all 0.5s ease;
}

.diamond-cta:hover .cta-btn-icon {
  stroke: var(--dark);
  filter: drop-shadow(0 0 8px var(--accent-glow));
  transform: translateY(-3px);
}

.cta-btn-text {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--dark);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.5s ease;
}

.cta-phone {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--text-muted-dark);
}

.cta-phone a {
  color: var(--dark);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.cta-phone a:hover {
  color: var(--accent);
}


/* ============================================================
   14. CONTACT BAR & CONTACT CARDS
============================================================ */

/* Contact Bar (dark strip) */
.contact-bar {
  padding: 4rem 0;
  background: var(--dark);
}

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

.contact-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--text-light);
}

.contact-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  position: relative;
}

.contact-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--light);
  transform: rotate(45deg);
}

.contact-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
}

.contact-item h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.contact-item p {
  font-size: 0.9rem;
  color: var(--text-muted-light);
}

/* Contact Cards (grid) */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.contact-card {
  background: var(--white);
  padding: 3.5rem 2rem 2.5rem;
  border: 1px solid var(--gray-light);
  text-align: center;
  position: relative;
  transition: all 0.4s ease;
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--light), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.contact-card:hover::before,
.contact-card.active::before {
  transform: scaleX(1);
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(21, 59, 55, 0.1);
  border-color: transparent;
}

.contact-card-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  position: relative;
}

.contact-card-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--light);
  transform: rotate(45deg);
  transition: all 0.4s ease;
}

.contact-card-icon::after {
  content: '';
  position: absolute;
  inset: 15px;
  background: transparent;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
  transition: all 0.4s ease;
}

.contact-card:hover .contact-card-icon::before {
  inset: -5px;
}

.contact-card:hover .contact-card-icon::after {
  background: var(--accent-glow);
}

.contact-card-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
  z-index: 2;
  transition: all 0.3s ease;
}

.contact-card:hover .contact-card-icon svg {
  stroke: var(--light);
}

.contact-card h3 {
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--text-dark);
}

.contact-card p {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-muted-dark);
  line-height: 1.7;
  margin: 0;
}

.contact-card a {
  color: var(--light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-card a:hover {
  color: var(--accent);
}


/* Contact Links */

.contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
}

.contact-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--text-dark);
	transition: color 0.3s ease;
}

.contact-link:hover {
	color: var(--accent);
}

.contact-link svg {
	width: 20px;
	height: 20px;
	stroke: var(--light);
	stroke-width: 1.5;
	fill: none;
	flex-shrink: 0;
	transition: stroke 0.3s ease;
}

.contact-link:hover svg {
	stroke: var(--accent);
}

.contact-link span {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
}

@media (max-width: 600px) {
	.contact-links {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
}

/* ============================================================
   15. FAQ MODULE
============================================================ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: calc(var(--nav-height) + 2rem);
}

.faq-intro .section-title {
  color: var(--text-light);
}

.faq-intro .section-title strong {
  color: var(--white);
}

.faq-intro p {
  color: var(--text-muted-light);
  margin-bottom: 2rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border: 1px solid rgba(62, 133, 124, 0.2);
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.faq-item:hover,
.faq-item.active {
  border-color: var(--accent);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(62, 133, 124, 0.05);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-light);
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: rgba(62, 133, 124, 0.1);
}

.faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  transition: transform 0.3s ease;
}

.faq-icon::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.faq-item.active .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-item.active .faq-answer {
  max-height: 500px;
}

.faq-answer-inner {
  padding: 0 1.5rem 1.5rem;
  color: var(--text-muted-light);
  font-size: 0.95rem;
  line-height: 1.7;
}


/* ============================================================
   16. FEATURED LIST
============================================================ */
.featured-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.featured-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-light);
}

/* When content follows the list, keep paragraph rhythm below it */
.featured-list:not(:last-child) {
  margin-bottom: 20px !important;
}

/* Heading directly labeling a list: group it with the list, keep paragraph rhythm above */
.info-subtitle:has(+ .featured-list) {
  margin-top: 8px;
}

.featured-list li:first-child {
  padding-top: 0px;
}

.featured-list li:last-child {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.section-dark .featured-list li {
  border-bottom-color: rgba(62, 133, 124, 0.2);
}

.featured-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: 0.5rem;
}


/* ============================================================
   17. FOOTER
============================================================ */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 4rem;
  margin-bottom: 3rem;
}

.footer-brand p {
  color: var(--text-muted-light);
  font-size: 0.9rem;
  margin-top: 1rem;
  max-width: 300px;
}

.footer-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  color: var(--accent);
}

.footer-links {
  list-style: none !important;
}

.footer-links li {
  margin-bottom: 0.6rem;
}

.footer-links a {
  color: var(--text-muted-light);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--accent-light);
}

.footer-links.sidebar a {
  width: 100% !important;
  display: flex;
  align-items: center;
  line-height: 1em;
  color: var(--dark);
  gap: .5em;
  margin: 1em 0px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(62, 133, 124, 0.2);
  font-size: 0.8rem;
  color: var(--text-muted-light);
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.footer-social a::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--light);
  transform: rotate(45deg);
  transition: all 0.3s ease;
  opacity: 0.5;
}

.footer-social a:hover::before {
  border-color: var(--accent);
  background: var(--accent);
  opacity: 1;
}

.footer-social svg {
  width: 16px;
  height: 16px;
  fill: var(--text-light);
  position: relative;
  z-index: 2;
  transition: fill 0.3s ease;
}

.footer-social a:hover svg {
  fill: var(--dark);
}


/* ============================================================
   18. DIAMOND GALLERY SECTION
============================================================ */
.diamond-gallery {
  background: var(--dark);
  min-height: 100vh;
  overflow: hidden;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.gallery-diamonds {
  position: relative;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.diamond-row {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  margin-top: -40px;
}

.diamond-row:first-child {
  margin-top: 0;
}

.diamond-row.offset {
  margin-left: 70px;
}

.gallery-diamond {
  width: 140px;
  height: 140px;
  transform: rotate(45deg);
  overflow: hidden;
  border: 3px solid var(--dark);
  flex-shrink: 0;
  position: relative;
}

.gallery-diamond img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: transform 0.5s ease;
}

.gallery-diamond:hover img {
  transform: translate(-50%, -50%) rotate(-45deg) scale(1.1);
}

.gallery-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 5rem 4rem 3rem;
  color: var(--text-light);
}

.gallery-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted-light);
  margin-bottom: 2.5rem;
}

.label-diamond {
  width: 24px;
  height: 24px;
  border: 1px solid var(--light);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-diamond::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  transform: rotate(0deg);
}

.gallery-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.gallery-title strong {
  font-weight: 500;
  color: var(--white);
  display: block;
  font-size: 1.15em;
}

.gallery-subtitle {
  font-size: 1.1rem;
  color: var(--accent-light);
  margin-bottom: 3rem;
  font-style: italic;
}

.gallery-edition {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted-light);
  margin-bottom: 2rem;
}

.gallery-author {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 3rem;
}

.gallery-stats {
  display: flex;
  gap: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(62, 133, 124, 0.3);
}

.gallery-stat {
  display: flex;
  flex-direction: column;
}

.gallery-stat .stat-number {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}

.gallery-stat .stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted-light);
  margin-top: 0.5rem;
}


/* ============================================================
   19. INLINE TRIGGER
============================================================ */
.inline-trigger {
  position: relative;
  display: inline-block;
  transform: skew(-10deg);
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease;
}

.inline-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.inline-trigger:hover {
  transform: skew(-10deg) scale(1.05);
}

.inline-trigger:hover::after {
  transform: scaleX(1);
}


/* ============================================================
   20. MEDIA QUERIES
============================================================ */

/* --- 1024px and below --- */
@media (max-width: 1024px) {

  /* Hero */
  .hero-image {
    width: 100%;
    clip-path: none;
    opacity: 0.3;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons,
  .hero-trust {
    justify-content: center;
  }

  /* Grids */
  .conditions-grid  { grid-template-columns: repeat(2, 1fr); }
  .services-grid    { grid-template-columns: 1fr; }
  .team-grid        { grid-template-columns: repeat(2, 1fr) !important; }
  .contact-grid     { grid-template-columns: 1fr; gap: 1.5rem; }
  .contact-cards    { grid-template-columns: repeat(2, 1fr); }
  .footer-grid      { grid-template-columns: repeat(2, 1fr); }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-visual {
    max-width: 400px;
    margin: 0 auto;
  }

  /* Testimonials */
  .testimonial-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .testimonial-image {
    max-width: 300px;
    margin: 25px auto;
  }

  /* FAQ */
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .faq-intro {
    position: static;
    text-align: center;
  }

  .faq-intro .section-label {
    justify-content: center;
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .gallery-diamonds {
    padding: 4rem 2rem;
    align-items: center;
  }

  .diamond-row.offset {
    margin-left: 35px;
  }

  .gallery-diamond {
    width: 100px;
    height: 100px;
  }

  .diamond-row {
    margin-top: -25px;
  }

  .gallery-content {
    padding: 4rem 2rem;
    text-align: center;
    align-items: center;
  }

  .gallery-stats {
    justify-content: center;
  }
}

/* --- 768px and below --- */
@media (max-width: 768px) {

  .nav-links {
    display: none;
  }

  .conditions-grid {
    grid-template-columns: 1fr;
  }

  .about-features,
  .info-features {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: 3rem auto 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  /* Visibility */
  .hide-on-mobile  { display: none; }
}

/* --- 640px and below --- */
@media (max-width: 640px) {
  .conditions-grid { grid-template-columns: 1fr 1fr; }
  .services-grid   { grid-template-columns: 1fr; }
  .team-grid       { grid-template-columns: 1fr  !important; }
  .testimonial-inner { grid-template-columns: 1fr; }
}

/* --- 600px and below --- */
@media (max-width: 600px) {

  /* Gallery */
  .gallery-diamond {
    width: 80px;
    height: 80px;
  }

  .diamond-row {
    margin-top: -20px;
  }

  .diamond-row.offset {
    margin-left: 25px;
  }

  /* FAQ */
  .faq-question {
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
  }

  .faq-answer-inner {
    padding: 0 1.25rem 1.25rem;
  }

  /* Contact Cards */
  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: 3rem 1.5rem 2rem;
  }
}

/* --- 560px and below --- */
@media (max-width: 560px) {
  .site-search .search-btn {
    padding: 0.6rem 0.8rem;
  }

  .site-search .search-input {
    padding-left: calc(var(--h-pad) + 1.6rem);
  }

  .site-search .search-ico {
    left: 0.8rem;
    width: 18px;
    height: 18px;
  }

  .info-feature {
    flex-direction: column;
  }
}

/* --- Desktop only --- */
@media (min-width: 767px) {
  .hide-on-desktop { display: none; }
}

.ac-inline-link {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.1);
  text-align: center;
  width: fit-content;
  transition: all .2s ease;
  box-shadow: 0px 5px 15px rgba(0,0,0,.03)
}
.ac-inline-link::after {
	content: "";
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
  margin-left: 0px;
  width: 0;
  height: 0;
  background-image: url('/wp-content/uploads/2026/05/download-package-svgrepo-com.png');
  background-size: contain;
  background-repeat: no-repeat;
  transition: all .2s ease
}

.ac-inline-link:hover {
  background: var(--color-accent);
  color: white;
}
.ac-inline-link:hover::after {
  margin-left: 10px;
  width: 1em;
  height: 1em;
}

/* 2026-07-16: lead-in paragraph before a featured-list — drop its padding-bottom so the gap above the first list item matches the 20px below (dyskinesia/fatigue/teeth-sensitivity) */
.info-text:has(+ .featured-list) { padding-bottom: 0px; }

/* ============================================================
   CONDITIONS GRID → MOBILE SLIDER            (added 2026-07-31)
   ------------------------------------------------------------
   At <=768px the wrapping flex grid becomes a horizontal,
   snap-scrolling track that deliberately reveals a slice of the
   next card, so the row reads as swipeable without needing
   arrows or dots.

   NOTE: the earlier `.conditions-grid { grid-template-columns: ... }`
   declarations in the 1024 / 768 / 640 blocks above are INERT --
   .conditions-grid is `display: flex`, not `display: grid`, so
   grid-template-columns has never applied. They are left in place
   (harmless) and do not conflict with anything below.
   ============================================================ */
@media (max-width: 768px) {

  .conditions-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;

    /* Break out of .s-container so the peeking card runs all the
       way to the screen edge, then re-inset the first card. */
    margin-inline: calc(50% - 50vw);
    padding-inline: 1.25rem;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;

    /* No scrollbar -- the half-visible card is the affordance. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .conditions-grid::-webkit-scrollbar { display: none; }

  /* ~72% of the viewport leaves roughly a fifth of the next card
     showing. Clamped so large phones / small tablets show two
     cards plus a peek instead of one giant card. */
  .conditions-grid > .condition-card {
    flex: 0 0 clamp(240px, 72%, 360px);
    scroll-snap-align: start;
  }

  /* The desktop lift-on-hover fires from a swipe tap on touch and
     makes the track feel unstable -- keep the card planted. */
  .conditions-grid > .condition-card:hover {
    transform: none;
    box-shadow: none;
  }

  /* Focus ring for the keyboard-scrollable region (see tmj-components.js). */
  .conditions-grid:focus-visible {
    outline: 2px solid var(--accent, #e8a087);
    outline-offset: 4px;
  }
}