/*
 * aboutus.css — MorinVibes® About Us v5.0
 *
 * KEY CHANGES v4 → v5:
 * ─ Hero: founder-portrait.jpg bg, fresh light overlay (not dark),
 *   decorative CSS circle rings, portrait ring accent on right
 * ─ Stats bar MOVED into #about-origin (fixes cut-off bug from card overlap)
 * ─ Name section: bottlebts.jpg as subtle background (opacity ~0.09)
 * ─ Circles everywhere: photo is circle, timeline icons are circles,
 *   USP numbers are circles, value card numbers are circles,
 *   eyebrow section dots, decorative ring elements, CTA rings
 * ─ MORIN = teal shimmer, VIBES = green #1a6545
 * ─ Leaf scatter: .section-deco works on all sections except hero
 */


/* =============================================
   DESIGN TOKENS
============================================= */
:root {
  --teal:       #0094af;
  --teal-v:     #00b4d8;
  --teal-light: #5ec8d8;
  --teal-pale:  #daf0f6;
  --teal-pale2: #ecf8fb;
  --green:      #1a6545;
  --green-mid:  #2a8a58;
  --green-light:#e8f5ee;
  --gold:       #d4af37;
  --ink:        #0c2630;
  --ink-soft:   #244f5a;
  --ink-muted:  #5d8d97;
  --white:      #ffffff;
  --cream:      #f5f1eb;

  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'DM Sans', system-ui, sans-serif;

  --sh-soft:  0 4px 20px rgba(0,148,175,.09);
  --sh-card:  0 8px 36px rgba(0,148,175,.14);
  --sh-float: 0 16px 52px rgba(0,148,175,.18);

  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-2xl:  56px;   /* more circular */
  --r-pill: 999px;
  --card-r: 52px;   /* rounded card-stack corners */

  --circle-teal: rgba(0,148,175,.10);
  --circle-green: rgba(26,101,69,.10);
}


/* =============================================
   KEYFRAMES
============================================= */

/* Hero word reveal */
@keyframes ab-wordReveal {
  from { opacity:0; filter:blur(8px); transform:translateY(16px); }
  to   { opacity:1; filter:blur(0);   transform:translateY(0); }
}
/* Hero eyebrow + lead fade-up */
@keyframes ab-heroFadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Hero bg scale breathe */
@keyframes ab-bgBreath {
  from { transform:scale(1.08); }
  to   { transform:scale(1.0); }
}
/* Rings float */
@keyframes ab-ringFloat {
  0%,100% { transform:translate(0,0) scale(1); opacity:.55; }
  50%     { transform:translate(6px,-10px) scale(1.04); opacity:.8; }
}
/* Portrait ring pulse */
@keyframes ab-portraitRing {
  0%,100% { transform:translate(-50%,-50%) scale(1); opacity:.18; }
  50%     { transform:translate(-50%,-50%) scale(1.04); opacity:.28; }
}
/* Stats bar slide up */
@keyframes ab-statsUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Circle number entrance */
@keyframes ab-circleIn {
  from { opacity:0; transform:scale(.7); }
  to   { opacity:1; transform:scale(1); }
}
/* Timeline line grow */
@keyframes ab-lineGrow {
  from { transform:scaleY(0); }
  to   { transform:scaleY(1); }
}
/* Timeline dot pulse */
@keyframes ab-dotPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(0,148,175,0); }
  50%     { box-shadow:0 0 0 8px rgba(0,148,175,.15); }
}
@keyframes ab-goldPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(212,175,55,0); }
  50%     { box-shadow:0 0 0 10px rgba(212,175,55,.18); }
}
/* MORIN shimmer */
@keyframes ab-shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
/* VIBES glow */
@keyframes ab-vibesGlow {
  0%,100% { text-shadow:0 0 0 rgba(26,101,69,0); }
  50%     { text-shadow:0 2px 22px rgba(26,101,69,.2); }
}
/* Section reveals */
@keyframes ab-fadeUp    { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);} }
@keyframes ab-fadeRight { from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:translateX(0);} }
@keyframes ab-scaleIn   { from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);} }
/* Leaf sway */
@keyframes ab-leafSway {
  0%,100% { transform:rotate(var(--lr)) translateX(0); }
  35%     { transform:rotate(calc(var(--lr) + 8deg)) translateX(6px); }
  70%     { transform:rotate(calc(var(--lr) - 6deg)) translateX(-4px); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}


/* =============================================
   GLOBAL HELPERS
============================================= */
.about-main { overflow-x:hidden; }

.container {
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 1.25rem;
}
@media(min-width:768px){ .container{ padding:0 2rem; } }

.ab-eyebrow {
  display:inline-block;
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:.9rem;
}
.ab-eyebrow--white  { color:rgba(255,255,255,.55); }
.ab-eyebrow--teal   { color:var(--teal); }

/* Small circle dot before eyebrow — circle accent */
.ab-section-dot {
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--teal);
  margin-right:.65rem;
  vertical-align:middle;
  position:relative;
  top:-.1em;
  flex-shrink:0;
}
.ab-section-dot--white { background:rgba(255,255,255,.6); }

.ab-teal       { color:var(--teal-v); font-style:italic; }
.ab-teal-light { color:var(--teal-light); font-style:italic; }

/* Reveal base */
.ab-reveal[data-reveal="fade-up"]    { opacity:0; transform:translateY(22px); }
.ab-reveal[data-reveal="fade-right"] { opacity:0; transform:translateX(-18px); }
.ab-reveal[data-reveal="scale-in"]   { opacity:0; transform:scale(.92); }
.ab-reveal.is-visible {
  opacity:1!important; transform:none!important;
  transition:opacity .72s cubic-bezier(.4,0,.2,1), transform .72s cubic-bezier(.4,0,.2,1);
}
.ab-reveal[data-delay="1"].is-visible { transition-delay:.12s; }
.ab-reveal[data-delay="2"].is-visible { transition-delay:.24s; }
.ab-reveal[data-delay="3"].is-visible { transition-delay:.38s; }
.ab-reveal[data-delay="4"].is-visible { transition-delay:.52s; }

/* Card-stack */
.ab-card {
  position:relative;
  overflow:hidden;
  border-radius:var(--card-r) var(--card-r) 0 0;
  margin-top:-44px;
}
#about-origin  { z-index:2; }
#about-name    { z-index:3; }
#about-values  { z-index:4; }
#about-cta     { z-index:5; }

.ab-card--light { background:var(--teal-pale); }
.ab-card--white { background:var(--white); }
.ab-card--cream { background:var(--cream); }

/* Leaf scatter container */
.section-deco {
  position:absolute; inset:0;
  pointer-events:none; z-index:0; overflow:hidden;
}
.section-deco img {
  position:absolute;
  pointer-events:none; user-select:none;
  object-fit:contain;
  animation:ab-leafSway var(--ld,9s) ease-in-out infinite;
  animation-delay:var(--ldelay,0s);
  will-change:transform;
}


/* =============================================
   §1  HERO — founder-portrait.jpg  Light & fresh
============================================= */
/* ── Hero section — horizontal padding handled by .ab-hero__wrap ── */
#about-hero {
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:calc(var(--nav-h,72px) + 1.5rem) 0 6rem; /* no inline padding — wrapper aligns with nav */
}

/* Container-aligned wrapper — same padding as .container / nav bar */
.ab-hero__wrap {
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 1.25rem;
  position:relative;
  z-index:2;
}
@media(min-width:768px) {
  .ab-hero__wrap { padding:0 2rem; }
}

/* Photo background */
.ab-hero__bg {
  position:absolute; inset:-6%;
  background-image:url('/images/founder-portrait.jpg');
  background-size:cover;
  background-position:center 20%;
  z-index:0;
  transform:scale(1.08);
  animation:ab-bgBreath 10s cubic-bezier(.25,.1,.25,1) .2s both;
  /* Desaturate slightly to keep fresh feel */
  filter:saturate(.75) brightness(.95);
}

/* Light layered overlay — text readable left, portrait visible right */
.ab-hero__overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to right,
      rgba(236,248,251,.88) 0%,
      rgba(230,245,250,.70) 35%,
      rgba(220,242,248,.35) 60%,
      rgba(200,238,246,.12) 100%),
    linear-gradient(to bottom,
      rgba(255,255,255,.08) 0%,
      rgba(7,24,31,.10) 100%);
  z-index:1;
}

/* Decorative CSS circle rings — purely aesthetic */
.ab-hero__rings {
  position:absolute; inset:0;
  pointer-events:none; z-index:1;
}
.ab-hero__ring {
  position:absolute;
  border-radius:50%;
  border:1.5px solid rgba(0,148,175,.14);
}
.ab-hero__ring--1 {
  width:520px; height:520px;
  right:-100px; top:-80px;
  animation:ab-ringFloat 9s ease-in-out infinite;
}
.ab-hero__ring--2 {
  width:340px; height:340px;
  right:60px; top:80px;
  border-color:rgba(26,101,69,.10);
  animation:ab-ringFloat 12s ease-in-out 3s infinite;
}
.ab-hero__ring--3 {
  width:180px; height:180px;
  right:180px; top:240px;
  border-color:rgba(0,180,216,.12);
  animation:ab-ringFloat 7s ease-in-out 1.5s infinite;
}

/* Portrait ring accent — large faint circle centred on photo subject */
.ab-hero__portrait-ring {
  position:absolute;
  width:560px; height:560px;
  border-radius:50%;
  border:2px solid rgba(0,148,175,.12);
  right:-80px; top:50%;
  transform:translateY(-50%);
  pointer-events:none; z-index:1;
  animation:ab-portraitRing 6s ease-in-out infinite;
}

/* Teal glow bottom-right */
.ab-hero__glow {
  position:absolute;
  width:500px; height:400px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,180,216,.14) 0%, transparent 65%);
  bottom:-80px; right:-60px;
  filter:blur(80px);
  pointer-events:none; z-index:1;
}

/* Hero content — inside .ab-hero__wrap */
.ab-hero__content {
  max-width:560px;
  width:100%;
}

/* Eyebrow */
.ab-hero__eyebrow-wrap {
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.2rem;
  opacity:0;
  animation:ab-heroFadeUp .6s ease-out .3s both;
}
.ab-hero__dot {
  width:8px; height:8px;
  border-radius:50%;
  background:var(--teal);
  flex-shrink:0;
  box-shadow:0 0 0 3px rgba(0,148,175,.18);
}

/* H1 word-by-word reveal */
.ab-hero__h1 {
  font-family:var(--serif);
  font-size:clamp(2.4rem, 6.8vw, 5rem);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.028em;
  color:var(--ink);
  margin:0 0 1.4rem;
}
.ab-hero__word {
  display:block;
  opacity:0;
  animation:ab-wordReveal .85s cubic-bezier(.25,.46,.45,.94) both;
}
.ab-hero__word[data-word="0"] { animation-delay:.55s; }
.ab-hero__word[data-word="1"] { animation-delay:.75s; }
.ab-hero__word[data-word="2"] { animation-delay:.95s; }

.ab-hero__word--em { color:var(--teal); }
.ab-hero__em { font-style:italic; color:var(--teal); }

/* Lead */
.ab-hero__lead {
  font-family:var(--sans);
  font-size:clamp(.88rem, 1.7vw, 1.02rem);
  font-weight:300;
  color:var(--ink-soft);
  line-height:1.78;
  margin:0 0 1.6rem;
  opacity:0;
  animation:ab-heroFadeUp .65s ease-out 1.15s both;
}

/* Circular trust badges */
.ab-hero__badges {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:2rem;
  opacity:0;
  animation:ab-heroFadeUp .6s ease-out 1.35s both;
}
.ab-hero__badge {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.32rem .88rem;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1.5px solid rgba(0,148,175,.20);
  border-radius:var(--r-pill);
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--teal);
  box-shadow:0 2px 8px rgba(0,148,175,.08);
}
.ab-hero__badge-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border-radius:50%;
  background:rgba(0,148,175,.10);
  flex-shrink:0;
}
.ab-hero__badge--green {
  border-color:rgba(26,101,69,.20);
  color:var(--green);
}
.ab-hero__badge--green .ab-hero__badge-icon {
  background:rgba(26,101,69,.10);
  color:var(--green);
}

/* ── Scroll indicator — center-bottom of hero, cascading chevrons ── */
.ab-hero__scroll {
  position:absolute;
  bottom:2.5rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  opacity:0;
  animation:ab-heroFadeUp .55s ease-out 1.6s both;
  z-index:10;
  pointer-events:none;
}
.ab-hero__scroll-label {
  font-family:var(--sans);
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:.1rem;
  opacity:.85;
}
.ab-hero__scroll-chevrons {
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ab-hero__scroll-chev {
  width:22px; height:14px;
  color:var(--teal);
  display:block;
  animation:ab-chevFade 1.5s ease-in-out infinite;
}
.ab-hero__scroll-chev--1 { animation-delay:0s; }
.ab-hero__scroll-chev--2 { animation-delay:.2s; }
.ab-hero__scroll-chev--3 { animation-delay:.4s; }

@keyframes ab-chevFade {
  0%,100% { opacity:.3; transform:translateY(0); }
  50%     { opacity:1;  transform:translateY(5px); }
}

@media(max-width:420px) {
  .ab-hero__ring--1 { width:300px; height:300px; right:-80px; top:-60px; }
  .ab-hero__ring--2, .ab-hero__ring--3 { display:none; }
  .ab-hero__portrait-ring { width:320px; height:320px; }
  .ab-hero__h1 { font-size:2.2rem; }
  .ab-hero__scroll { bottom:1.5rem; }
}


/* =============================================
   §2  ORIGIN — Stats bar at top (no cut-off)
============================================= */
#about-origin { padding:0 0 5.5rem; position:relative; }

/* Decorative circle accents — origin */
#about-origin::before {
  content:'';
  position:absolute;
  width:480px; height:480px;
  border-radius:50%;
  border:1px solid rgba(0,148,175,.07);
  top:-120px; right:-100px;
  pointer-events:none; z-index:0;
}
#about-origin::after {
  content:'';
  position:absolute;
  width:280px; height:280px;
  border-radius:50%;
  border:1px solid rgba(0,148,175,.06);
  bottom:60px; left:-60px;
  pointer-events:none; z-index:0;
}

/* Stats bar — inside card, never cut by card overlap */
.origin__stats-bar {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,148,175,.12);
  padding:1.25rem 1.25rem;
  margin-bottom:4rem;
  /* Undo the card's border-radius for this top element */
  border-radius:0;
}
.origin__stats-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:.4rem 1.25rem;
  gap:.2rem;
  flex:1;
  min-width:72px;
}
.origin__stat-num {
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.8vw,2.1rem);
  font-weight:400;
  color:var(--teal);
  line-height:1;
  letter-spacing:-.03em;
  display:block;
}
.origin__stats-item > span {
  font-family:var(--sans);
  font-size:.5rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
  white-space:normal;
  text-align:center;
  max-width:72px;
  line-height:1.35;
}
/* Mobile stats — stack 2×2 */
@media(max-width:520px){
  .origin__stats-bar { gap:0; }
  .origin__stats-item { padding:.5rem .6rem; flex:0 0 50%; min-width:50%; }
  .origin__stats-sep { display:none; }
  .origin__stat-num { font-size:1.4rem; }
  .origin__stats-item > span { font-size:.48rem; max-width:80px; }
}
.origin__stats-sep {
  width:1px; height:2.4rem;
  background:rgba(0,148,175,.16);
  flex-shrink:0;
  align-self:center;
}

/* Origin grid */
.origin__grid {
  display:flex;
  flex-direction:column;
  gap:2.5rem;
  position:relative; z-index:1;
}

/* CIRCLE photo frame */
.origin__photo { position:relative; margin:0; align-self:center; flex-shrink:0; }
.origin__photo-circle {
  width:clamp(260px,38vw,420px);
  height:clamp(260px,38vw,420px);
  border-radius:50%;       /* CIRCLE */
  overflow:hidden;
  box-shadow:var(--sh-float);
  position:relative;
  z-index:1;
}
.origin__photo-circle img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
@media(hover:hover){ .origin__photo:hover .origin__photo-circle img { transform:scale(1.06); } }

/* Decorative ring around circle photo */
.origin__photo-ring {
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:2px dashed rgba(0,148,175,.20);
  pointer-events:none;
  animation:ab-ringFloat 8s ease-in-out infinite;
}

/* Floating badge */
.origin__photo-badge {
  position:absolute;
  bottom:10%; right:-5%;
  display:flex;
  align-items:center;
  gap:.4rem;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-pill);
  padding:.38rem .9rem;
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--teal);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  z-index:2;
}

/* Copy */
.origin__copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.7rem;
  position:relative; z-index:1;
}
.origin__copy h2 {
  font-family:var(--serif);
  font-size:clamp(1.75rem,3.5vw,2.85rem);
  font-weight:300;
  line-height:1.13;
  letter-spacing:-.022em;
  color:var(--ink);
  margin:.1rem 0 .3rem;
}
.origin__copy p {
  font-family:var(--sans);
  font-size:.91rem;
  font-weight:300;
  line-height:1.82;
  color:var(--ink-soft);
}

/* Circle trust pills */
.origin__trust {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.5rem;
}
.origin__trust-pill {
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  padding:.28rem .78rem;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(0,148,175,.14);
  border-radius:var(--r-pill);
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.origin__trust-dot {
  display:block;
  width:7px; height:7px;
  border-radius:50%;
  flex-shrink:0;
}
.origin__trust-dot--teal  { background:var(--teal); }
.origin__trust-dot--green { background:var(--green); }

@media(min-width:768px) {
  #about-origin { padding-bottom:7rem; }
  .origin__grid { flex-direction:row; align-items:center; gap:4.5rem; }
  .origin__copy { flex:1; }
}


/* =============================================
   §3  NAME + USP — bottlebts.jpg background
============================================= */
#about-name { padding:5.5rem 0 6.5rem; position:relative; }

/* Decorative circle accents — name section */
#about-name::before {
  content:'';
  position:absolute;
  width:550px; height:550px;
  border-radius:50%;
  border:1px solid rgba(26,101,69,.06);
  top:-80px; right:-140px;
  pointer-events:none; z-index:0;
}
#about-name::after {
  content:'';
  position:absolute;
  width:320px; height:320px;
  border-radius:50%;
  border:1px solid rgba(0,148,175,.07);
  bottom:-60px; left:-80px;
  pointer-events:none; z-index:0;
}

/* Bottle bg layer */
.ab-name__photo-bg {
  position:absolute; inset:0;
  background-image:url('/images/bottlebts.jpg');
  background-size:cover;
  background-position:center;
  opacity:.07;
  z-index:0;
  pointer-events:none;
  /* Blur slightly so text stays crisp */
  filter:blur(2px) saturate(.6);
}

.name__intro {
  text-align:center;
  margin-bottom:2.5rem;
  position:relative; z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  flex-direction:column;
}

/* MORIN + VIBES display */
.name__display {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  flex-wrap:wrap;
  margin-bottom:2.5rem;
  text-align:center;
  position:relative; z-index:1;
}
.name__half {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
}
.name__word {
  font-family:var(--serif);
  font-size:clamp(3rem,9.5vw,8.5rem);
  font-weight:300;
  line-height:.95;
  letter-spacing:-.04em;
  cursor:default;
}
/* MORIN — teal shimmer — pre-JS fallback on parent, gradient on .letter spans post-JS */
.name__half--morin .name__word {
  color:var(--teal); /* visible before JS runs */
}
/* After initNameLetters() wraps each char, apply gradient to each letter span */
.name__half--morin .name__word .letter {
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-v) 40%, var(--teal-light) 60%, var(--teal) 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ab-shimmer 5s linear 1s infinite;
  display:inline-block;
}
/* VIBES — green (inherits to .letter via -webkit-text-fill-color) */
.name__half--vibes .name__word {
  color:var(--green);
  -webkit-text-fill-color:var(--green);
  animation:ab-vibesGlow 4s ease-in-out 1.5s infinite;
}
.name__half--vibes .name__word .letter {
  -webkit-text-fill-color:var(--green);
}
/* Letter spans from JS */
.name__word .letter {
  display:inline-block;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
@media(hover:hover){
  .name__half--morin .name__word:hover .letter { transform:translateY(-5px); }
  .name__half--vibes .name__word:hover .letter { transform:translateY(-5px); color:var(--teal); -webkit-text-fill-color:var(--teal); }
  .name__word:hover .letter:nth-child(1){ transition-delay:.00s; }
  .name__word:hover .letter:nth-child(2){ transition-delay:.04s; }
  .name__word:hover .letter:nth-child(3){ transition-delay:.08s; }
  .name__word:hover .letter:nth-child(4){ transition-delay:.12s; }
  .name__word:hover .letter:nth-child(5){ transition-delay:.16s; }
}
.name__sub {
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:300;
  color:var(--ink-muted);
  line-height:1.5;
  text-align:center;
  max-width:145px;
}
.name__sub em { font-family:var(--serif); font-style:italic; font-size:1.1em; color:var(--teal); }

/* Circle + connector */
.name__plus {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:46px; height:46px;
  flex-shrink:0;
  margin-top:-1.8rem;
}
.name__plus-outer {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid rgba(0,148,175,.22);
}
.name__plus-inner {
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:300;
  color:rgba(0,148,175,.45);
  position:relative; z-index:1;
}

/* Tagline */
.name__tagline {
  text-align:center;
  max-width:560px;
  margin:0 auto 3.5rem;
  padding:0;
  border:none;
  position:relative; z-index:1;
  display:block;
}
.name__tagline::after {
  content:'';
  display:block;
  width:3rem; height:2px;
  background:linear-gradient(to right, var(--teal), var(--teal-v));
  border-radius:2px;
  margin:1.4rem auto 0;
}
.name__tagline-circle {
  display:block;
  width:44px; height:44px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(0,148,175,.10), rgba(0,180,216,.06));
  border:1px solid rgba(0,148,175,.14);
  font-family:var(--serif);
  font-size:1.6rem;
  line-height:44px;
  text-align:center;
  color:rgba(0,148,175,.45);
  margin:0 auto .8rem;
}
.name__tagline p {
  font-family:var(--serif);
  font-size:clamp(1rem,2.2vw,1.3rem);
  font-weight:300;
  font-style:italic;
  line-height:1.65;
  color:var(--ink-soft);
}

/* USP grid — 2×2 */
.usp__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem;
  max-width:860px;
  margin:0 auto;
  position:relative; z-index:1;
  list-style:none; padding:0;
}
@media(min-width:560px){ .usp__grid{ grid-template-columns:1fr 1fr; } }

.usp__card {
  position:relative;
  padding:1.85rem 1.6rem 1.75rem;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:var(--r-2xl);  /* very rounded */
  border:1px solid rgba(0,148,175,.10);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .25s;
}
/* Top accent line */
.usp__card::after {
  content:'';
  position:absolute;
  top:0; left:0;
  height:2.5px; width:0;
  background:linear-gradient(to right, var(--teal), var(--teal-v));
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
@media(hover:hover){
  .usp__card:hover{ transform:translateY(-5px); box-shadow:var(--sh-card); border-color:rgba(0,148,175,.2); }
  .usp__card:hover::after{ width:100%; }
}

/* CIRCLE number badge */
.usp__circle {
  width:46px; height:46px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(0,148,175,.10), rgba(0,180,216,.06));
  border:1.5px solid rgba(0,148,175,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.75rem;
  animation:ab-circleIn .5s ease-out both;
}
.usp__circle span {
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--teal);
  line-height:1;
  letter-spacing:-.02em;
}
.usp__title {
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:.55rem;
  line-height:1.3;
}
.usp__body {
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:300;
  line-height:1.8;
  color:var(--ink-soft);
}

@media(min-width:768px){ #about-name{ padding:7rem 0 8rem; } }


/* =============================================
   §4  TIMELINE — Light sage, circles
============================================= */
#about-timeline {
  position:relative;
  overflow:hidden;
  background:linear-gradient(158deg, #edf8f3 0%, #f3faf7 50%, #e9f6ee 100%);
  padding:5.5rem 0 6.5rem;
}

/* Decorative circle accents — timeline corners */
#about-timeline::before {
  content:'';
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  border:1px solid rgba(0,148,175,.08);
  top:-140px; right:-100px;
  pointer-events:none; z-index:0;
}
#about-timeline::after {
  content:'';
  position:absolute;
  width:260px; height:260px;
  border-radius:50%;
  border:1px solid rgba(26,101,69,.07);
  bottom:-80px; left:-50px;
  pointer-events:none; z-index:0;
}

.timeline__header {
  text-align:center;
  margin-bottom:3.5rem;
  position:relative; z-index:1;
}
.timeline__header h2 {
  font-family:var(--serif);
  font-size:clamp(2rem,4.5vw,3.6rem);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--ink);
  margin:.3rem 0 0;
}

/* Animated vertical line */
.ab-timeline__line {
  position:absolute;
  top:0; bottom:0;
  left:max(1.25rem, calc((100vw - min(100%,1180px))/2 + 1.25rem + 98px + 12px));
  width:2px;
  background:linear-gradient(to bottom, var(--teal-v), var(--teal), rgba(0,148,175,.1));
  border-radius:2px;
  transform:scaleY(0);
  transform-origin:top;
  z-index:0;
}
.ab-timeline__line.is-visible {
  animation:ab-lineGrow 2.2s cubic-bezier(.4,0,.2,1) .2s both;
}

.ab-timeline {
  list-style:none;
  margin:0;
  padding:0 0 0 1.25rem;
  max-width:820px;
  position:relative; z-index:1;
}

.ab-timeline__item {
  display:grid;
  grid-template-columns:86px 24px 1fr;
  gap:0 1.25rem;
  align-items:flex-start;
  padding-bottom:2.75rem;
}
.ab-timeline__item:last-child { padding-bottom:0; }

.ab-timeline__year-col { text-align:right; padding-top:.25rem; }
.ab-timeline__year {
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
  color:var(--teal);
  white-space:nowrap;
  line-height:1.2;
  display:block;
}
.ab-timeline__year--gold { color:var(--gold); }

/* Circle dot wrapper */
.ab-timeline__dot-wrap {
  display:flex;
  justify-content:center;
  padding-top:.15rem;
}
.ab-timeline__dot {
  width:16px; height:16px;
  border-radius:50%;
  background:var(--teal-v);
  border:2.5px solid #f3faf7;
  box-shadow:0 0 0 3px rgba(0,180,216,.15);
  animation:ab-dotPulse 3s ease-in-out infinite;
  flex-shrink:0;
}
.ab-timeline__dot--gold {
  background:var(--gold);
  border-color:#f3faf7;
  box-shadow:0 0 0 3px rgba(212,175,55,.18);
  animation:ab-goldPulse 3s ease-in-out infinite;
}

/* CIRCLE icon badge */
.ab-timeline__icon-circle {
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(0,148,175,.08);
  border:1.5px solid rgba(0,148,175,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.55rem;
  color:var(--teal);
}
.ab-timeline__icon-circle svg { width:22px; height:22px; }
.ab-timeline__icon-circle--gold {
  background:rgba(212,175,55,.10);
  border-color:rgba(212,175,55,.32);
}

.ab-timeline__content { padding-top:.05rem; }
.ab-timeline__content h3 {
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:.38rem;
  line-height:1.3;
}
.ab-timeline__content p {
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:300;
  line-height:1.8;
  color:var(--ink-soft);
}
.ab-timeline__badge {
  display:inline-block;
  margin-top:.7rem;
  padding:.26rem .85rem;
  background:rgba(212,175,55,.10);
  border:1px solid rgba(212,175,55,.32);
  border-radius:var(--r-pill);
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#a07a10;
}

@media(min-width:640px){
  .ab-timeline{ padding-left:2rem; }
  .ab-timeline__item{ grid-template-columns:100px 24px 1fr; gap:0 1.5rem; }
}
@media(min-width:768px){
  #about-timeline{ padding:7.5rem 0 8.5rem; }
  .ab-timeline{ padding-left:5rem; }
  .ab-timeline__year{ font-size:1.15rem; }
  .ab-timeline__line{
    left:max(2rem, calc((100vw - min(100%,1180px))/2 + 2rem + 112px + 14px));
  }
  .ab-timeline__item{ grid-template-columns:112px 28px 1fr; gap:0 2rem; }
}
/* Mobile timeline — border-left replaces absolute line for reliability */
@media(max-width:639px){
  .ab-timeline { padding-left:0; }

  /* Hide the absolute-positioned line; replaced by border-left on each item */
  .ab-timeline__line { display:none; }

  .ab-timeline__item {
    display:block;
    position:relative;
    padding:0 0 2.25rem 2.75rem;
    border-left:2px solid rgba(0,148,175,.3);
    margin-left:1.25rem; /* align to container edge */
    grid-template-columns:unset;
    gap:unset;
  }
  .ab-timeline__item:last-child {
    padding-bottom:0;
    border-left-color:transparent;
  }
  .ab-timeline__item--gold {
    border-left-color:rgba(212,175,55,.4);
  }
  .ab-timeline__item--gold:last-child {
    border-left-color:transparent;
  }

  /* Dot — positioned on the border-left line */
  .ab-timeline__dot-wrap {
    position:absolute;
    left:-9px; /* centers 16px dot on 2px border */
    top:0;
    padding-top:0;
    justify-content:flex-start;
  }
  .ab-timeline__dot {
    width:14px; height:14px;
    border-width:2px;
  }

  /* Year — shown above content */
  .ab-timeline__year-col {
    text-align:left;
    padding-top:0;
    margin-bottom:.35rem;
    display:block;
  }
  .ab-timeline__year { font-size:.78rem; }

  /* Content */
  .ab-timeline__content { padding-top:0; }
  .ab-timeline__icon-circle {
    width:38px; height:38px;
    margin-bottom:.45rem;
  }
  .ab-timeline__icon-circle svg { width:18px; height:18px; }
  .ab-timeline__content h3 { font-size:.875rem; }
  .ab-timeline__content p  { font-size:.78rem; }
}


/* =============================================
   §5  VALUES — Circle numbers
============================================= */
/* ─── §5 VALUES — Fresh light teal-green gradient (replaces cream) ─── */
#about-values {
  padding:5.5rem 0 6.5rem;
  border-radius:var(--card-r) var(--card-r) 0 0;
  margin-top:-44px;
  position:relative;
  overflow:hidden;
  /* Fresh light teal-green — coordinates with leaf scatter tint */
  background:linear-gradient(158deg, #e0f6ef 0%, #eaf8f3 50%, #ddf3ec 100%);
}

/* Decorative circle accents — values section */
#about-values::before {
  content:'';
  position:absolute;
  width:460px; height:460px;
  border-radius:50%;
  border:1px solid rgba(26,101,69,.08);
  top:-100px; left:-120px;
  pointer-events:none; z-index:0;
}
#about-values::after {
  content:'';
  position:absolute;
  width:300px; height:300px;
  border-radius:50%;
  border:1px solid rgba(0,148,175,.07);
  bottom:-80px; right:-60px;
  pointer-events:none; z-index:0;
}

.values__header {
  text-align:center;
  max-width:560px;
  margin:0 auto 3.5rem;
  position:relative; z-index:1;
}
.values__header h2 {
  font-family:var(--serif);
  font-size:clamp(1.75rem,3.2vw,2.7rem);
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:.3rem 0 0;
}

.values__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  max-width:900px;
  margin:0 auto;
  position:relative; z-index:1;
}

.val-card {
  background:var(--white);
  border-radius:var(--r-2xl);
  padding:2rem 1.85rem 1.85rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  border-left:3px solid var(--teal);
  box-shadow:var(--sh-soft);
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
  position:relative;
  overflow:hidden;
}
.val-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2.5px;
  background:linear-gradient(to right, var(--teal), var(--teal-v));
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  opacity:0;
  transition:opacity .25s;
}
@media(hover:hover){
  .val-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-card); }
  .val-card:hover::before{ opacity:1; }
}
.val-card--green{ border-left-color:var(--green); }
.val-card--green::before{ background:linear-gradient(to right, var(--green), var(--green-mid)); }

/* CIRCLE number */
.val-card__circle-num {
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(0,148,175,.08);
  border:1.5px solid rgba(0,148,175,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.val-card__circle-num span {
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:600;
  color:var(--teal);
  line-height:1;
}
.val-card__circle-num--green {
  background:rgba(26,101,69,.08);
  border-color:rgba(26,101,69,.18);
}
.val-card__circle-num--green span { color:var(--green); }

.val-card h3 {
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
}
.val-card p {
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:300;
  line-height:1.8;
  color:var(--ink-soft);
}
.val-card__tag {
  display:inline-block;
  padding:.2rem .78rem;
  background:rgba(0,148,175,.07);
  border:1px solid rgba(0,148,175,.16);
  border-radius:var(--r-pill);
  font-family:var(--sans);
  font-size:.57rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal);
  width:fit-content;
}
.val-card__tag--green {
  background:rgba(26,101,69,.07);
  border-color:rgba(26,101,69,.18);
  color:var(--green);
}

@media(min-width:768px){
  #about-values{ padding:7rem 0 8rem; }
  .values__grid{ grid-template-columns:repeat(3,1fr); gap:1.25rem; }
}


/* =============================================
   §6  CTA — Circle decorations
============================================= */
#about-cta {
  position:relative;
  overflow:hidden;
  background:linear-gradient(148deg, #007a96 0%, #00aecf 40%, #00c4af 100%);
  padding:6.5rem 0 7.5rem;
  text-align:center;
  border-radius:var(--card-r) var(--card-r) 0 0;
  margin-top:-44px;
  z-index:5;
}
/* Decorative circle rings */
.ab-cta__ring {
  position:absolute;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.ab-cta__ring--1 { width:500px; height:500px; top:-180px; left:-120px; }
.ab-cta__ring--2 { width:360px; height:360px; bottom:-100px; right:-80px; }

.ab-cta__vmark {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  opacity:.045;
  pointer-events:none; z-index:0;
}
.ab-cta__vmark img { filter:brightness(0) invert(1); }

.ab-cta__content {
  position:relative; z-index:1;
  max-width:580px;
  margin:0 auto;
  padding:0 1rem;
}
.ab-cta__content h2 {
  font-family:var(--serif);
  font-size:clamp(2rem,4.5vw,3.4rem);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.025em;
  color:#fff;
  margin:.5rem 0 .75rem;
}
.ab-cta__em {
  display:block;
  font-style:italic;
  color:rgba(255,255,255,.9);
  font-size:1.06em;
  -webkit-text-fill-color:rgba(255,255,255,.9);
}
.ab-cta__sub {
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:300;
  color:rgba(255,255,255,.72);
  margin-bottom:2rem;
}
.ab-cta__btn { margin-bottom:1.75rem; }
#about-cta .btn--white {
  background:#fff;
  color:var(--teal);
  border:none;
  font-weight:600;
  transition:background .2s, transform .18s, box-shadow .2s;
}
#about-cta .btn--white:hover {
  background:rgba(255,255,255,.94);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,40,60,.2);
}
.ab-cta__trust {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem 1.4rem;
}
.ab-cta__trust span {
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

@media(min-width:768px){ #about-cta{ padding:8.5rem 0 9.5rem; } }


/* =============================================
   SOCIAL TAB
============================================= */
.social-tab__link {
  display:flex; align-items:center; gap:.72rem; padding:.6rem .7rem;
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink);
  font-family:var(--sans); font-size:.84rem; font-weight:500;
  transition:background .16s;
}
.social-tab__link:hover { background:rgba(0,148,175,.07); }
.social-tab__link span { flex:1; }
.social-tab__arrow { width:7px; height:12px; opacity:.28; flex-shrink:0; }