/* define any CSS variables you reference */
:root {
  --salvia: #758d8f;
  --salvia-rgb: 117, 141, 143;
  --black: #051113;
  --black-rgb: 5, 17, 19;
  --light-beige: #f9f6f3;
  --beige: #edebe5;
  --light-gray: #6f7a7b;
  --gray: #454d4e;
  --dark-gray: #363b3c;
  --white: #ffffff;
  --transparent: #9f543400;
  --global-card-corner-radius: 12px;
  --nav-height: 54px;            /* matches your .navbar height */
  --logo-height: 32px;           /* pick what looks best */
}

/*————————————————————————————————————————————————————————*/
/* FONT-FACE DECLARATIONS */
/*————————————————————————————————————————————————————————*/

/* Lora */
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora/Lora.ttf');
}

/* NotoSansMono */
@font-face {
  font-family: 'NotoSansMono';
  src: url('fonts/NotoSansMono/NotoSansMono-Regular.ttf');
  font-weight: 400;
  font-style: normal;
}

/* Manrope */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope/Manrope.ttf');
}
/*————————————————————————————————————————————————————————*/
/* RESET & FONT-SMOOTHING */
/*————————————————————————————————————————————————————————*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  font-family: Manrope, sans-serif;
  margin: 0;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
  margin-top: 0;
  margin-bottom: 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

a {
  text-decoration: none;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: block;
  border: 0;
  overflow-clip-margin: content-box;
  overflow: clip;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


.font-weight-100 {
  font-weight: 100;
}
.font-weight-400 {
  font-weight: 400;
}
.font-weight-600 {
  font-weight: 600;
}
.font-weight-800{
  font-weight: 800;
}
/*————————————————————————————————————————————————————————*/
/* GLOBAL TYPOGRAPHY & LAYOUT */
/*————————————————————————————————————————————————————————*/
.h1-lora {
  font-family: 'Lora';
  font-size: 4rem;
  font-weight: 400;
  font-style: normal;
}
.h1-noto {
  font-family: 'NotoSansMono';
  color: var(--gray);
  font-size: 4rem;
  font-weight: 400;
  font-style: normal;
}
.h1-manrope{
  font-family: 'Manrope';
  font-size: 4rem;
  font-weight: 400;
  font-style: normal;
}

.h2-lora {
  font-family: 'Lora';
  font-size: 2rem;
  font-weight: 400;
  font-style: normal;
}
.h2-noto {
  font-family: 'NotoSansMono';
  font-size: 2rem;
  font-weight: 400;
  font-style: normal;
}
.h2-manrope {
  font-family: 'Manrope';
  font-size: 2rem;
  font-weight: 400;
  font-style: normal;
}

.p-lora {
  font-family: 'Lora';
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
}
.p-noto {
  font-family: 'NotoSansMono';
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
}
.p-manrope {
  font-family: 'Manrope';
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
}

/* Medium screens (tablets) */
@media screen and (max-width: 991px) {
  .h1-lora, .h1-noto, .h1-manrope {
    font-size: 3rem;
  }

  .h2-lora, .h2-noto, .h2-manrope {
    font-size: 1.5rem;
  }
}

/* Small screens (mobile) */
@media screen and (max-width: 767px) {
  .h1-lora, .h1-noto, .h1-manrope {
    font-size: 2.5rem;
  }

  .h2-lora, .h2-noto, .h2-manrope {
    font-size: 1.25rem;
  }
}

/* HEADLINE */
.headline-manrope {
  font-family: 'Manrope';
  font-size: 72px;
  font-weight: 400;
}
@media screen and (max-width: 1068px) {
  .headline-manrope {
  font-size: 56px;
  }
}
@media screen and (max-width: 734px) {
  .headline-manrope {
  font-size: 40px;
  }
}
.headline-lora {
  font-family: 'Lora';
  font-size: 72px;
  font-weight: 400;
}
@media screen and (max-width: 1068px) {
  .headline-lora {
  font-size: 56px;
  }
}
@media screen and (max-width: 734px) {
  .headline-lora {
  font-size: 40px;
  }
}

/* CONTENT HEADING */
.content-heading-manrope {
  font-family: 'Manrope';
  font-size: 2.3rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .content-heading-manrope {
  font-size: 2rem;
  }
}

.content-heading-lora {
  font-family: 'Lora';
  font-size: 2.3;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .content-heading-lora {
  font-size: 2rem;
  }
}

/* BACKGROUND COLORS */
.white {
  background-color: var(--white);
}

.beige {
  background-color: var(--beige);
}

.light_beige {
  background-color: var(--light-beige);
}

.salvia{
  background-color: var(--salvia);
}

/* TEXT COLORS */
.text-gray{
  color: var(--gray);
}
.text-beige{
  color: var(--beige);
}

.text-salvia {
  color: var(--salvia);
}

.gradient-text {
  background: -webkit-linear-gradient(
    var(--gray) 0%,
    var(--salvia) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*  — Scroll-reveal gradient text — */
.text-reveal {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;    /* vertical center */
  align-items: flex-end;      /* right-align text */
  text-align: right;
  overflow: visible;
}

/* force each “line” wrapper to stay on one row */
.text-reveal .split-line {
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(
    to right,
    var(--gray) 50%,
    var(--beige) 50%
  );
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  line-height: 1.2;
}

/* allow wrapping between words */
.text-reveal .h2-manrope {
  white-space: normal;
}

/* each word is its own unbreakable unit */
.split-word {
  display: inline-block;
  white-space: nowrap;        /* prevents mid-word breaks */
}

/* chars still animate individually */
.split-char {
  display: inline-block;
}


/*————————————————————————————————————————————————————————*/
/*  */
/*————————————————————————————————————————————————————————*/
main {
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.main-content_section {
  z-index: 5;
  width: 100%;
  position: relative;
}

.main-content_section_card {
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 50px 50px 0px 0px;
  width: 100%;
  position: relative;
}

.padding-content_section {
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16rem 8rem;
  display: flex;
}

@media screen and (max-width: 991px) {
  .padding-content_section {
    padding: 12rem 4rem;
  }
}

@media screen and (max-width: 767px) {
  .padding-content_section {
    padding: 8rem 2rem;
  }
}

.padding-small {
    padding: 1rem;
}

.padding-medium {
    padding: 2rem;
}

.padding-large {
    padding: 3rem;
}

.padding-small-adaptive {
    padding: 1rem;
  }

@media screen and (max-width: 767px) {
  .padding-small-adaptive {
    padding: 0.5rem;
  }
}

.center {
  text-align: center;
}

.text_container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  padding: 2rem;
  background:
  radial-gradient(ellipse at top, var(--white), transparent),
  radial-gradient(ellipse at bottom, var(--light-beige), transparent);
  /* background-image: linear-gradient(to right, var(--white) , var(--light-beige)); */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-style: solid;
  border-width: 1px;
  border-color: var(--light-beige);
  display: flex;
}

.page-wrapper {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.flex-verticle {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.flex-center {
  display: flex;
  width: 100%;
  justify-content: center;
}


.flex-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ─────────────────────────────────────────────────
   Grainy-Noise Card Utility
   ───────────────────────────────────────────────── */

.grainy-card-content {
  position: relative;
  z-index: 10;
}

.grainy-card-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  padding: 2rem;
  background:
    radial-gradient(ellipse at top, var(--light-beige), transparent),
    radial-gradient(ellipse at bottom, var(--beige), transparent);
  /* background-image: linear-gradient(to right, var(--white) , var(--light-beige)); */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-style: solid;
  border-width: 1px;
  border-color: var(--light-beige);
  display: flex;
  position: relative;
}

.grainy-card-container::before {
  content: "";
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 182px;
  opacity: 0.5;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
}

/* Emphasize grainy card text on small screens */
/* Make the statement card text larger on small screens */
@media screen and (max-width: 480px) {
  .grainy-card-container .h2-manrope,
  .grainy-card-container .h2-lora,
  .grainy-card-container .h2-noto {
    font-size: 1.6rem; /* bigger than your global 1.25rem @767px */
    line-height: 1.25;
  }
}

@media screen and (max-width: 360px) {
  .grainy-card-container .h2-manrope,
  .grainy-card-container .h2-lora,
  .grainy-card-container .h2-noto {
    font-size: 1.85rem;
    line-height: 1.2;
  }
}


/*————————————————————————————————————————————————————————*/
/* 4. FULL-PAGE BACKGROUND IMAGE */
/*————————————————————————————————————————————————————————*/

.header-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top right;
}

/* by default show desktop, hide mobile */
.header-image-desktop {
  display: block;
}
.header-image-mobile {
  display: none;
  /* if you want different object-position on mobile: */
  object-position: top center;
}

/* swap on phones */
@media screen and (max-width: 767px) {
  .header-image-desktop {
    display: none;
  }
  .header-image-mobile {
    display: block;
  }
}

.hero-text{
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}

/*————————————————————————————————————————————————————————*/
/* 5. NAVBAR */
/*————————————————————————————————————————————————————————*/

/* Base navbar (collapsed) */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  margin: 1rem auto;
  width: calc(100% - 4rem);
  max-width: 900px;
  height: 54px;

  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  z-index: 1000;
  overflow: visible;

  transition:
    height 0.5s ease,
    transform 0.5s ease-in-out;
}

.navbar.navbar-hidden {
  transform: translateY(-150%);
}

/* Top row (logo + right side controls) */
.navbar-container {
  height: var(--nav-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

.navbar-right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* Brand / logo */
.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #888;
  line-height: 1;
  font-weight: bold;
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 1.8rem;
}

.navbar-logo-img {
  height: var(--logo-height);
  width: auto;                   /* preserves aspect ratio */
  max-width: 160px;              /* optional: prevents oversized wide logos */
  object-fit: contain;
  display: block;
}

@media (max-width: 767px){
  :root{
    --logo-height: 32px;
  }
}

/* Expanded state (desktop/tablet default) */
.navbar.expanded {
  height: calc(50vh - 2rem);
  transition-delay: 0s;
}

/* Expand-reveal container */
.navbar-expanded {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 0.5s ease;
}

.navbar.expanded .navbar-expanded {
  transform: scaleY(1);
}

/* Wrapper (fades/pointer events) */
.navbar-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2rem;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease 0s;
}

.navbar.expanded .navbar-wrapper {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease 0.5s;
}

/* Inner layout: two columns on desktop, stacked on mobile */
.navbar-inner {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  width: 100%;
  height: 100%;

  justify-content: space-between;
  align-items: stretch;
}

.navbar-box {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;

  background:
    radial-gradient(ellipse at top, var(--white), transparent),
    radial-gradient(ellipse at bottom, var(--beige), transparent);

  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar-box-heading {
  font-family: 'Manrope';
  font-size: 2rem;
  font-weight: 500;
  font-style: normal;
}

/*————————————————————————————————————————————————————————*/
/* Language dropdown */
/*————————————————————————————————————————————————————————*/
.language-dropdown {
  position: relative;
  display: inline-block;
  border-radius: var(--global-card-corner-radius);
  overflow: visible;
  width: max-content;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
}

.language-button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
  width: 100%;
}

.icon-globe {
  margin-right: 0.5rem;
  font-size: 1.2em;
}

.icon-chevron {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.language-dropdown.open .icon-chevron {
  transform: rotate(180deg);
}

.language-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  background: var(--beige);
  border-radius: var(--global-card-corner-radius);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);

  margin-top: 0.25rem;

  display: flex;
  flex-direction: column;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
}

.language-dropdown.open .language-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.language-option {
  all: unset;
  padding: 0.5rem 1rem;
  text-align: center;
  cursor: pointer;
}

.language-option + .language-option {
  border-top: 1px solid #eee;
}

.language-option:hover {
  background-color: var(--light-beige);
}

/*————————————————————————————————————————————————————————*/
/* Mobile adjustments */
/*————————————————————————————————————————————————————————*/
@media screen and (max-width: 767px) {
  .navbar-wrapper {
    padding: 1rem;
  }

  .navbar-inner {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    justify-content: flex-start;
    align-items: stretch;
  }

  .navbar-box {
    flex: none;
    width: 100%;
  }

  /* Fix expanded navbar height on mobile (avoid 100vh issues) */
  .navbar.expanded {
    left: 10px;
    right: 10px;
    top: calc(16px + env(safe-area-inset-top));

    /* IMPORTANT: animatable height (no auto) */
    height: calc((var(--vh, 1vh) * 100) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));

    width: auto;
    margin: 0;

    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .navbar.expanded .navbar-container {
    flex: 0 0 54px;
  }

  .navbar.expanded .navbar-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
  }

  .navbar.expanded .navbar-inner {
    height: auto;
  }

  /* If you want headings a bit smaller on small screens */
  @media screen and (max-width: 767px) {
    .navbar-box-heading {
      font-size: 1.6rem; /* (your previous 4rem was likely inverted) */
    }
  }
}

/* ---------------------------------------
   Compact navbar tiles
   --------------------------------------- */

.navbar.navbar--compact .navbar-inner{
  gap: 1rem;              /* tighter spacing */
  padding: 1.25rem;       /* less padding */
}

.navbar.navbar--compact .navbar-box{
  padding: 0.85rem;       /* less inner padding */
}

.navbar.navbar--compact .navbar-box-heading{
  font-size: 1.55rem;     /* down from 2rem */
  line-height: 1.05;
}

.navbar.navbar--compact .cta_text{
  font-size: 0.9rem;      /* smaller label */
  margin-right: 0.8rem;
}

.navbar.navbar--compact .button-icon{
  width: 2.1rem;          /* down from 2.5rem */
  height: 2.1rem;
  border-radius: 0.35rem;
}

.navbar.navbar--compact .button_arrow-icon{
  width: 0.75rem;         /* down from 0.9rem */
}

/* Mobile: even tighter */
@media (max-width: 767px){
  .navbar.navbar--compact .navbar-box-heading{
    font-size: 1.35rem;
  }

  .navbar.navbar--compact .cta_text{
    font-size: 0.85rem;
  }

  .navbar.navbar--compact .button-icon{
    width: 2.0rem;
    height: 2.0rem;
  }
}


/*————————————————————————————————————————————————————*/
/* 5.c. APPOINTMENT-BAR                */
/*————————————————————————————————————————————————————*/
.appointment-bar {
  position: fixed;
  bottom: 1rem;                /* breathe off the bottom */
  left: 0; right: 0;
  width: calc(100% - 4rem);    /* leave 2rem gutters each side */
  max-width: 900px;
  height: 54px;                /* collapsed height */
  margin: 0 auto;
  cursor: pointer;
  background: rgba(var(--black-rgb), 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  /* center the prompt by default */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* hide off-screen */
  transform: translateY(150%);
  transition:
    transform 0.5s ease-in-out,
    height    0.4s ease-in-out;
  z-index: 1000;
}

.appointment-bar > * {
  position: relative;
  z-index: 1;
}

/* slide into view when visible */
.appointment-bar.visible {
  transform: translateY(0);
}

/* when expanded, grow to fill the viewport */
.appointment-bar.expanded {
  border-radius: 12px;
  height: calc((var(--vh, 1vh) * 100) - 2rem);

  /* keep the bar's own alignment neutral */
  justify-content: center;
  align-items: center;

  /* stack children but don't force them to top */
  flex-direction: column;
}


/* the prompt text you see initially */
.appointment-prompt {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  transition: opacity 0.5s ease;
  pointer-events: none; /* so clicks pass through to the bar itself */
}

/* hide it on expand */
.appointment-bar.expanded .appointment-prompt {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin: 0;
}

/* inner container for your iframe */
.appointment-inner {
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;

  /* collapsed: do NOT steal layout space */
  height: 0;
  width: 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition:
    height 0.35s ease,
    margin 0.35s ease,
    width  0.35s ease,
    opacity 0.25s ease 0.10s,
    transform 0.35s ease 0.10s;
}

/* expanded state */
.appointment-bar.expanded .appointment-inner {
  height: calc(100% - 4rem);
  width: calc(100% - 4rem);
  margin: 2rem;

  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.appointment-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}


.appointment-h2-manrope {
  font-family: 'Manrope';
  font-size: 2rem;
  font-weight: 400;
  font-style: normal;
}

.appointment-bar::before {
  content: "";
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 182px;
  opacity: 0.4;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;

  pointer-events: none;
  z-index: 0;
}

.appointment-bar-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical alignment */
  align-items: center;     /* horizontal alignment */
  text-align: center;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Close button (hidden by default) */
.appointment-close {
  display: none;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;

  width: 40px;
  height: 40px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(var(--salvia-rgb), 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: #fff;
  font-size: 28px;
  line-height: 38px;
  text-align: center;

  cursor: pointer;
}
/* show X only when expanded */
.appointment-bar.expanded .appointment-close {
  display: block;
}

.appointment-bar.expanded .appointment-bar-content {
  height: auto;
}

/* optimized for iPhone */
@media (max-width: 767px) {
  /* collapsed: match navbar width exactly */
  .appointment-bar {
    left: 0;
    right: 0;
    width: calc(100% - 4rem);
    max-width: 900px;
    margin: 0 auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* expanded: match navbar.expanded geometry (10px gutters) */
  .appointment-bar.expanded {
    left: 10px;
    right: 10px;
    width: auto;
    margin: 0;

    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    height: calc((var(--vh, 1vh) * 100) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .appointment-bar.expanded .appointment-inner {
    margin: 2rem 10px;
    width: calc(100% - 20px);
    height: calc(100% - 4rem);
  }
}



/*————————————————————————————————————————————————————————*/
/* 6. BURGER MENU */
/*————————————————————————————————————————————————————————*/
.burger-menu {
  position: relative;
  width: 32px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.burger-line {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 2px;
  background-color: #18091b;
  transform-origin: center center;
  transition: transform 0.3s ease, top 0.3s ease;
}

.burger-line:nth-child(1) {
  top: 6px;
  transform: translateX(-50%);
}

.burger-line:nth-child(2) {
  top: 16px;
  transform: translateX(-50%);
}

.burger-menu.active .burger-line:nth-child(1) {
  top: 11px;
  transform: translateX(-50%) rotate(45deg);
}

.burger-menu.active .burger-line:nth-child(2) {
  top: 11px;
  transform: translateX(-50%) rotate(-45deg);
}


/*————————————————————————————————————————————————————————*/
/* SERVICES SECTION*/
/*————————————————————————————————————————————————————————*/
.services-collection-wrapper {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  width: 100%;
}

.services-left-spacer {
  width: 5rem;
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .services-collection-wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .services-left-spacer {
    display: none;
  }

  .services-collection {
    flex-direction: column;
  }

  .services-item_wrapper {
    display: flex !important;
    flex-direction: column;
    padding: 1rem 1.5rem;
  }

  .services-image_container {
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .services-content {
    text-align: center;
    align-items: center;
  }
}

.services-collection {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.services-item_wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 6rem;
  border-radius: 1.5rem;
  padding: 1.3rem 1.7rem;
  transition: all 0.2s;
  background: var(--light-beige);
  text-decoration: none;
}

.services-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--black);
}

.services-image_container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  aspect-ratio: 1/1;
}

.services-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.services-title-box {
    grid-column-gap: .8rem;
    grid-row-gap: .8rem;
    color: var(--salvia);
    font-size: 1rem;
    font-family: 'NotoSansMono';
    background-color: var(--white);
    padding: 0.5rem;
    border-radius: 0.375rem;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    width: fit-content;
}

/* animations */

.services-item_wrapper:hover {
  background-color: var(--beige);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.box-reveal {
  transform-origin: center center;
  will-change: transform, opacity;
}


/*————————————————————————————————————————————————————————*/
/* BUTTON */
/*————————————————————————————————————————————————————————*/
/* .cta_wrapper {
    z-index: 2;
    grid-column-gap: 1.2rem;
    grid-row-gap: 1.2rem;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: relative;
    text-decoration: none;
    color: var(--salvia);
}

.cta_text {
    will-change: transform, opacity;
    order: 1;
    font-family: NotoSansMono, sans-serif;
}

.button-icon {
    background-color: var(--salvia);
    color: var(--light-beige);
    will-change: transform;
    border-radius: .3rem;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    position: relative;
    overflow: hidden;
}

.icon-container {
    color: var(--light-beige);
    will-change: transform;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}

.button_arrow-icon {
    width: .9rem;
}

.cta_wrapper:hover {
  transform: translateY(-2px);
  transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}
*/

/* styles.css additions */

/* base button styles already exist in your file, just make sure: */
.cta_wrapper {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--salvia);
  opacity: 1; /* you can remove any inline opacity: 0 or drive this in JS */
  transition: opacity 0.6s ease;
}

.cta_text {
  font-family: NotoSansMono, sans-serif;
  margin-right: 1.2rem;
  opacity: 1; /* animate via JS if you like */
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.button-icon {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--salvia);
  border-radius: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* so the arrows slide cleanly in/out */
}

/* both icon containers stack exactly on top of each other */
.first-icon-container,
.second-icon-container {
  position: absolute;
  transform: translate(-50%, -50%);
  will-change: transform;  /* GPU-accelerate the slide */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--light-beige);
}

/*
.icon-container,
.second-icon_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--light-beige);
}

.second-icon_container {
  transform: translate(-100%, 100%);
}
*/

/* control SVG size */
.button_arrow-icon {
  width: 0.9rem;
  height: auto;
}















/*————————————————————————————————————————————————————————*/
/* 10. WHY PATIENTS CHOOSE ME */
/*————————————————————————————————————————————————————————*/
.content_wrap {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    display: flex;
}

.accordions_wrapper {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    flex-flow: column;
    display: flex;
}

.accordion-container {
    color: var(--dark-gray);
    cursor: pointer;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    transition: all .2s;
    display: flex;
}

.accordion-heading_wrapper {
    width: 100%;
}

.accordion-progress-container {
    background-color: var(--beige);
    width: 100%;
    height: 2px;
}

.accordion-progress-bar {
    background-color: var(--black);
    width: 0%;
    height: 100%;
    display: none;
}

.accordion-content {
    grid-column-gap: 1.4rem;
    grid-row-gap: 1.4rem;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    display: flex;
}

.accordion-count {
    color: var(--salvia);
    font-size: 1.375rem;
    font-family: 'NotoSansMono';
}

.accordion-inner-content {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    display: flex;
}

@media screen and (max-width: 991px) {
    .accordion-content {
        grid-column-gap: .8rem;
        grid-row-gap: .8rem;
    }

    .accordion-count {
        font-size: 1.3rem;
    }
}



/*————————————————————————————————————————————————————————*/
/* 11. Consultation */
/*————————————————————————————————————————————————————————*/
.booking-embed-card { overflow: hidden; }
.booking-embed-framewrap { width: 100%; min-height: 82vh; height: 82vh; }
.booking-embed-framewrap iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 768px) {
  .booking-embed-framewrap { min-height: 78vh; height: 78vh; }
}


/*————————————————————————————————————————————————————————*/
/* 11. FOOTER */
/*————————————————————————————————————————————————————————*/

.site-footer {
  padding: 2rem 1rem 6rem 1rem;
  font-size: 0.9rem;
  color: #cccccc;
  border-top: 1px solid #ccc;
}

.footer-container {
  display: flex;
  flex-direction: column;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.footer-element {
  padding-bottom: 2rem;
}

.footer-left {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1rem; /* Adjust spacing between links */
  justify-content: start;
}

.footer-links a {
  color: #cccccc;
  text-decoration: none;
  font-weight: bold;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-right {
  text-align: right;
}

@media (max-width: 767px) {
  .footer-row {
    flex-direction: column;
  }

  .footer-right {
    text-align: right;
    flex: 1;
  }

  .footer-links {
    justify-content: flex-start;
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

.grainy-footer {
  width: 100%;
  height: 100%;
  color: #cccccc;
  overflow: hidden;
  background: transparent;
  /* radial-gradient(ellipse at top, var(--light-beige), transparent),
  radial-gradient(ellipse at bottom, var(--beige), transparent); */
  /* background-image: linear-gradient(to right, var(--white) , var(--light-beige)); */
  /* padding: 2rem 1rem 6rem 1rem; */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) inset;
}

.grainy-footer-content {
  position: relative;
  padding: 2rem 1rem 6rem 1rem;
  height: 100%;
  z-index: 10;
}

.grainy-footer::before {
  content: "";
  /* background-color: transparent; */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 182px;
  opacity: 0.3;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.location-block-container {
  width: 100%;
  max-width: 900px;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem;
  background:
  radial-gradient(ellipse at top, var(--white), transparent),
  radial-gradient(ellipse at bottom, var(--light-beige), transparent);
  /* background-image: linear-gradient(to right, var(--white) , var(--light-beige)); */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-style: solid;
  border-width: 1px;
  border-color: var(--light-beige);
  display: flex;
}

.location-block-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.location-block-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* Small mobile screens */
@media screen and (max-width: 700px) {
  .location-block-content-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 1rem;
    text-align: center;
  }
}

/* .location-block-container::before {
  content: "";
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 182px;
  opacity: 0.12;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
} */

.button {
    border: 1px solid var(--salvia);
    background-color: var(--transparent);
    color: var(--salvia);
    text-align: center;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
    transition: color .3s, border-color .3s, background-color .3s;
    display: flex;
}

.button:hover {
  background-color: var(--salvia);
  color: var(--white);
}

/*————————————————————————————————————————————————————————*/
/* CONTACT PAGE */
/*————————————————————————————————————————————————————————*/

.contact-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2rem;
  align-items: start;
}

@media screen and (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-panel-card {
  width: 100%;
}

/* simple key-value block */
.contact-kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: start;
}

@media screen and (max-width: 520px) {
  .contact-kv {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

.contact-k {
  font-family: 'NotoSansMono';
  color: var(--salvia);
  font-size: 0.95rem;
}

.contact-v {
  color: var(--gray);
}

.contact-link {
  color: var(--gray);
  text-decoration: none !important;
}

/* form */
.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.input-box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.box-label {
  font-family: 'NotoSansMono';
  color: var(--salvia);
  font-size: 0.95rem;
}

.input-box {
  width: 100%;
  border: 1px solid var(--light-beige);
  background: radial-gradient(ellipse at top, var(--white), transparent),
              radial-gradient(ellipse at bottom, var(--light-beige), transparent);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  color: var(--gray);
  outline: none;
}

.input-box:focus {
  border-color: var(--salvia);
  box-shadow: 0 0 0 3px rgba(117, 141, 143, 0.18);
}

.textarea {
  resize: vertical;
  min-height: 140px;
}

.field-error {
  min-height: 1em;
  font-size: 0.9rem;
  color: #b12b2b;
}

.input-invalid {
  border-color: #b12b2b !important;
  box-shadow: 0 0 0 3px rgba(177, 43, 43, 0.12);
}

/* consent */
.consent-row {
  margin-top: 0.5rem;
}

.consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--gray);
  font-size: 0.95rem;
}

.consent input {
  margin-top: 0.2rem;
}

/* actions + status */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.form-status {
  color: var(--gray);
  font-size: 0.95rem;
}

.form-note {
  margin-top: 1rem;
  color: var(--light-gray);
  font-size: 0.95rem;
}

/* honeypot: invisible to humans */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* ---------------------------------------------
   Toast/banner (contact success/error)
   Matches your design tokens (salvia, blur, grainy-card look)
---------------------------------------------- */

.toast-banner {
  position: fixed;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%) translateY(-16px);

  width: min(900px, calc(100% - 4rem)); /* matches navbar width logic */
  max-width: 900px;

  z-index: 2000;
  border-radius: 12px; /* match your cards/navbar */
  border: 1px solid rgba(0, 0, 0, 0.08);

  /* same glassy look as navbar */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}

.toast-banner.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast-banner.toast-hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-16px);
  pointer-events: none;
}

/* subtle grain like your cards (optional but on-brand) */
.toast-banner::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 182px;
  opacity: 0.25;
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* left accent bar uses your palette */
.toast-banner.toast-success {
  border-left: 6px solid var(--salvia);
}

.toast-banner.toast-error {
  border-left: 6px solid rgba(177, 43, 43, 0.95);
}

.toast-inner {
  position: relative;
  z-index: 1;
  padding: 14px 46px 14px 16px;
}

.toast-title {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray);
  margin-bottom: 2px;
}

.toast-message {
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  color: var(--gray);
  line-height: 1.35;
}

/* close button aligns to your button styling */
.toast-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;

  width: 34px;
  height: 34px;
  border-radius: 12px;

  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: var(--gray);
  font-size: 18px;
  line-height: 1;

  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.toast-close:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.90);
}

/* mobile gutters match your site rhythm */
@media (max-width: 767px) {
  .toast-banner {
    width: calc(100% - 20px); /* like your expanded navbar gutters */
    max-width: none;
  }
}



/*————————————————————————————————————————————————————————*/
/* 11. SCROLLER EFFECT */
/*————————————————————————————————————————————————————————*/

.scroller {
}

.conclusion{
}

/* Tutorial-style footer container */
footer.footer {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Make the reveal element fill the footer height */
section.grainy-footer {
  height: 100vh;          /* match footer height */
  overflow: hidden;      /* already present, keep it */
  position: relative;
}

/* This is the element we will actually translate */
.grainy-footer-content {
  height: 100vh;          /* match footer height */
}