/* ==========================================================================
   THE MEND — editorial clinical, hand-built (not a template)
   Ivory #F4F0E8 · Ink #1C1815 · Forest #123E33 · Clay #B56A43 · Sand #ECE5DA
   ========================================================================== */

:root{
  --ivory:#F4F0E8;
  --ink:#1C1815;
  --forest:#123E33;
  --forest-light:#1B5647;
  --clay:#B56A43;
  --sand:#ECE5DA;
  --header-h: 88px;
}

@font-face{ font-display: swap; }

html{
  background:var(--ivory);
  scroll-behavior:auto; /* GSAP ScrollToPlugin handles smooth anchor scroll */
}

body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'DM Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  opacity:0;
  visibility:hidden;
}

/* ---------- header states -------------------------------------------------- */
#site-header{
  transition:background-color .5s ease, border-color .5s ease;
}
#site-header.on-dark{ background-color:rgba(18,62,51,.92); border-color:rgba(244,240,232,.14); }
#site-header.on-dark .site-logo,
#site-header.on-dark .nav-link,
#site-header.on-dark .icon-line{ color:var(--ivory); }
#site-header.on-dark .nav-link::after{ background:var(--ivory); }
#site-header.on-dark .icon-line{ background:var(--ivory); }
#site-header.on-dark .btn-primary{ background:var(--ivory); color:var(--ink); }
#site-header.on-dark .btn-primary:hover{ background:var(--sand); }
#site-header:not(.on-dark){ background-color:rgba(244,240,232,.86); }
#site-header{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(28,24,21,.08); }

.font-serif{ font-family:'Cormorant Garamond', serif; }
.font-sans{ font-family:'DM Sans', sans-serif; }

/* ---------- fine film-grain texture (paired with duotone panels) --------- */
.grain{ position:relative; }
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- warm duotone "portrait" panels (placeholder for photography) */
.portrait-panel{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 30% 20%, #6b5644 0%, transparent 55%),
    radial-gradient(120% 120% at 80% 85%, #123E33 0%, transparent 60%),
    linear-gradient(160deg, #2b2320 0%, #1C1815 55%, #12100e 100%);
}
.portrait-panel .glow{
  position:absolute; inset:0;
  background:radial-gradient(60% 55% at 50% 38%, rgba(244,240,232,.28), transparent 70%);
  mix-blend-mode:soft-light;
}
.portrait-panel .rim{
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(181,106,67,.35), transparent 45%);
  mix-blend-mode:overlay;
}

.portrait-panel-warm{
  background:
    radial-gradient(110% 130% at 70% 15%, #c98a5e 0%, transparent 55%),
    radial-gradient(120% 120% at 15% 90%, #123E33 0%, transparent 55%),
    linear-gradient(165deg, #ECE5DA 0%, #d9c9b4 60%, #b58e6a 100%);
}

/* ---------- fine rules ---------------------------------------------------- */
.rule{
  display:block;
  height:1px;
  background:currentColor;
  opacity:.25;
  transform-origin:left center;
}

/* ---------- reveal primitives (GSAP toggles the "is-in" class) ----------- */
.reveal-line{ overflow:hidden; display:block; }
.reveal-line > span{ display:inline-block; will-change:transform; }

[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 1s cubic-bezier(.25,.7,.35,1), transform 1s cubic-bezier(.25,.7,.35,1); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- nav ------------------------------------------------------------ */
.nav-link{
  position:relative;
  letter-spacing:.08em;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after{ transform:scaleX(1); transform-origin:left center; }

/* ---------- magnetic CTA buttons ------------------------------------------ */
.btn-primary{
  position:relative;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--forest);
  color:var(--ivory);
  letter-spacing:.09em;
  border-radius:6px;
  transition:background .4s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  will-change:transform;
}
.btn-primary:hover{ background:var(--forest-light); box-shadow:0 14px 34px -14px rgba(18,62,51,.55); }

/* used inside sections that morph to forest, so the button still reads as a button */
.btn-primary.btn-on-forest{ background:var(--ivory); color:var(--ink); }
.btn-primary.btn-on-forest:hover{ background:var(--sand); box-shadow:0 14px 34px -14px rgba(0,0,0,.35); }

/* boxed secondary CTA — per brand UI language: primary (solid) + secondary (outline) */
.btn-secondary{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:transparent;
  color:var(--ink);
  letter-spacing:.09em;
  border:1px solid rgba(28,24,21,.35);
  border-radius:6px;
  transition:border-color .35s ease, background-color .35s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.btn-secondary:hover{ border-color:var(--ink); background:rgba(28,24,21,.04); }

.btn-ghost{
  position:relative;
  letter-spacing:.04em;
}
.btn-ghost .arrow{ display:inline-block; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.btn-ghost:hover .arrow{ transform:translateX(6px); }
.btn-ghost::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:currentColor;
  transition:right .45s cubic-bezier(.16,1,.3,1);
}
.btn-ghost:hover::after{ right:0; }

/* ---------- side progress / section dot-nav (desktop only) --------------- */
.dot-nav{ position:fixed; right:28px; top:50%; transform:translateY(-50%); z-index:40; transition:opacity .3s ease; }
.dot-nav button{
  width:6px; height:6px; border-radius:999px;
  background:var(--ink); opacity:.25;
  transition:opacity .4s ease, height .4s ease, background .4s ease;
}
.dot-nav button.active{ opacity:1; height:22px; background:var(--forest); }
.dot-nav.on-forest button{ background:var(--ivory); }
.dot-nav.on-forest button.active{ background:var(--clay); opacity:1; }
.dot-nav.is-hidden{ opacity:0; pointer-events:none; }

/* ---------- sticky mobile action bar -------------------------------------- */
.mobile-bar{
  transform:translateY(120%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.mobile-bar.show{ transform:translateY(0); }

/* ---------- programme band: staggered cards + animated connecting arcs ---
   each arc is an oversized bezier, clipped by its own SVG viewport, so only
   a gentle curved sliver peeks through at the gap between two cards; a
   plain, endless CSS dash-flow keeps the motion perfectly smooth. */
@keyframes programme-dash{ to{ stroke-dashoffset:-360; } }
.dashed-line-path{ animation:programme-dash 60s linear infinite; }

.programme-card{
  position:relative; z-index:1;
  padding:2.2rem 1.9rem 2.3rem;
  border-radius:10px;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.programme-card--light{ background:var(--sand); }
.programme-card--dark{ background:var(--ink); color:var(--ivory); }
.programme-card--dark .eyebrow{ opacity:.9; }

.programme-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:999px;
  background:rgba(181,106,67,.12);
  border:1px solid rgba(181,106,67,.3);
}
.programme-badge--dark{ background:rgba(244,240,232,.08); border-color:rgba(244,240,232,.22); }

.programme-num{
  display:block;
  font-family:'Cormorant Garamond', serif;
  font-size:15px;
  letter-spacing:.08em;
  color:var(--clay);
  margin-top:1rem;
}
.programme-icon{
  width:24px; height:24px;
  stroke:var(--clay);
}
.programme-badge--dark .programme-icon{ stroke:var(--ivory); }

/* ---------- misc ------------------------------------------------------------ */
::selection{ background:var(--forest); color:var(--ivory); }

.cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px; border-radius:999px;
  background:var(--clay); pointer-events:none; z-index:60; mix-blend-mode:normal;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .3s ease;
}
@media (min-width: 1024px){ .cursor-dot{ opacity:1; } }

.eyebrow{ letter-spacing:.22em; }

@media (max-width: 1023px){
  .dot-nav{ display:none; }
}

/* ---------- mobile menu panel ---------------------------------------------- */
.mobile-menu-panel{ background:var(--ivory); }

/* ==========================================================================
   REAL PHOTOGRAPHY TREATMENT
   Dramatically cropped faces, warm light, minimal background — per brand
   bible photography rule. Every photo gets a fine grain + soft vignette so
   varied source images read as one consistent, restrained system.
   ========================================================================== */
.photo-frame{
  position:relative;
  overflow:hidden;
  background:var(--ink);
}
.photo-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
  transform:scale(1.18);
}
.photo-frame .vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(28,24,21,.28) 0%, transparent 30%, transparent 65%, rgba(28,24,21,.36) 100%),
    radial-gradient(120% 100% at 50% 100%, rgba(18,62,51,.22), transparent 60%);
  pointer-events:none;
}
.photo-frame .rim-warm{
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(181,106,67,.22), transparent 45%);
  mix-blend-mode:overlay;
  pointer-events:none;
}
/* clip-path curtain reveal target, animated from JS */
.photo-frame .reveal-mask{
  position:absolute; inset:0;
  background:var(--ivory);
  transform-origin:top;
  z-index:2;
}

/* hero seam blend — left edge of the full-bleed photo dissolves into the
   ivory text panel beside it, long and gradual so the seam itself is
   imperceptible; the rest of the photo stays completely clean */
.hero-blend{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--ivory) 0%,
    rgba(244,240,232,.97) 4%,
    rgba(244,240,232,.9) 9%,
    rgba(244,240,232,.78) 15%,
    rgba(244,240,232,.62) 22%,
    rgba(244,240,232,.46) 29%,
    rgba(244,240,232,.32) 37%,
    rgba(244,240,232,.2) 45%,
    rgba(244,240,232,.11) 53%,
    rgba(244,240,232,.05) 61%,
    rgba(244,240,232,.01) 69%,
    rgba(244,240,232,0) 76%
  );
  pointer-events:none;
}

/* hero left column's text inset matches the standard page container's left
   edge (max-w-[1400px] + 2.5rem padding), so the hero's text lines up with
   every section below it instead of jumping sideways */
.hero-text-inset{
  padding-left:1.5rem;
}
@media (min-width:1024px){
  .hero-text-inset{
    padding-left:max(2.5rem, calc((100vw - 1400px) / 2));
  }
}

/* full-bleed editorial image break with an overlaid serif quote */
.quote-break{
  position:relative;
  min-height:78vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.quote-break img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 30%;
  transform:scale(1.15);
  will-change:transform;
}
.quote-break .scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(18,15,13,.86) 0%, rgba(18,15,13,.35) 45%, rgba(18,15,13,.15) 75%);
}
.quote-break .content{ position:relative; z-index:2; }

/* On narrow phones the box becomes very tall relative to its width, which
   forces object-fit:cover to crop away most of a landscape photo's width —
   cutting straight through faces on a two-person shot. Shrinking the box's
   height keeps its aspect ratio closer to the source image, so cover crops
   far less off the sides and both faces stay in frame. */
@media (max-width:767px){
  .quote-break{ min-height:46vh; }
  .quote-break img{ object-position:center 40%; }
}

/* ---------- clinical decisions pathway list -------------------------------- */
.pathway-item{
  display:flex; align-items:baseline; gap:1.25rem;
  padding:1.1rem 0;
  border-bottom:1px solid rgba(28,24,21,.12);
}
.pathway-item .pathway-num{
  font-family:'DM Sans', sans-serif;
  font-size:12px; font-weight:500; color:var(--clay); letter-spacing:.06em;
  width:1.6rem; flex-shrink:0;
}

/* ---------- social / utility icon buttons ---------------------------------- */
.icon-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem;
  border-radius:999px;
  border:1px solid currentColor;
  opacity:.55;
  transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1), background-color .4s ease, border-color .4s ease;
}
.icon-btn svg{
  width:17px; height:17px;
  stroke:currentColor;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.icon-btn:hover{ opacity:1; transform:translateY(-3px); background-color:var(--clay); border-color:var(--clay); color:var(--ivory); }
.icon-btn:hover svg{ transform:scale(1.12) rotate(-6deg); }

/* inline nav utility icon (whatsapp) — no border, just the mark + label */
.icon-inline{ display:inline-flex; }
.icon-inline svg{ width:16px; height:16px; stroke:currentColor; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.icon-inline:hover svg{ transform:scale(1.15) rotate(8deg); }