/* ==========================================================================
   NESTAURA — COMPANY PROFILE (v3)
   Concept: a premium, white-dominant interactive site built on the brand's
   own colors — #004D40 teal as the primary accent, brass as the secondary
   accent, white doing most of the work. Cards read as light, elevated glass
   with soft teal-tinted shadows rather than dark-mode glow; the deep teal
   still gets used as bold solid accent blocks (footer, orbit core, the
   "Nestaura approach" panel) so the brand color reads with real weight, not
   just as a thin highlight. Space Grotesk carries display type; Manrope
   carries body copy; IBM Plex Mono is reserved for numbers and small labels.
   ========================================================================== */

:root{
  --bg:            #FFFFFF;
  --bg-soft:       #F5F8F7;
  --surface:       rgba(0,77,64,.035);
  --surface-hi:    rgba(0,77,64,.065);
  --border:        rgba(0,77,64,.12);
  --border-hi:     rgba(0,77,64,.24);

  --text:          #052D24;
  --text-dim:      #4B655F;
  --text-faint:    #7C948C;

  --teal:          #004D40;
  --teal-bright:      #0E6E5C;
  --teal-deep:     #00332B;
  --brass:         #B08D4C;
  --brass-dim:     #8B6B34;

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:    'Manrope', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;

  --radius: 20px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.19,1,.22,1);
  --content: 68rem;
  --shadow-card: 0 24px 48px -32px rgba(0,51,43,.28);
  --shadow-card-hover: 0 28px 56px -28px rgba(0,51,43,.32);
  --shadow-brass: 0 20px 40px -20px rgba(176,141,76,.35);
}

*, *::before, *::after{ box-sizing:border-box; }

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

html{ scroll-behavior: smooth; background: var(--bg); }

body{
  margin:0; background: var(--bg); color: var(--text-dim);
  font-family: var(--font-body); font-size: 16px; line-height:1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3{ font-family: var(--font-display); color: var(--text); margin:0; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0 0 1em; max-width:60ch; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
img{ max-width:100%; display:block; }
.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

::selection{ background: var(--teal); color: #fff; }

/* ==========================================================================
   Cursor glow + progress line
   ========================================================================== */
.glow-cursor{
  position: fixed; width: 420px; height: 420px; border-radius:50%;
  background: radial-gradient(circle, rgba(0,77,64,.10), rgba(176,141,76,.08) 45%, transparent 70%);
  pointer-events:none; z-index: 5; transform: translate(-50%,-50%);
  left: -999px; top: -999px; transition: opacity .3s ease;
  mix-blend-mode: multiply;
}
@media (pointer: coarse){ .glow-cursor{ display:none; } }

.progress-line{ position:fixed; top:0; left:0; right:0; height:2px; z-index:500; background: rgba(0,77,64,.08); }
.progress-line span{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--teal), var(--brass)); transition: width .1s linear; }

/* ==========================================================================
   Nav
   ========================================================================== */
.wordmark{ font-family: var(--font-display); font-weight:700; font-size:1.25rem; color: var(--text); }

.nav{
  position: fixed; top: 0; left:0; right:0; z-index: 400;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 2rem; margin: .85rem 1.25rem 0; border-radius: 999px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px -20px rgba(0,51,43,.25);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.nav.is-scrolled{ background: rgba(255,255,255,.92); border-color: var(--border-hi); }
.nav__brand{ display:flex; align-items:center; }
.nav__logo{ height: 26px; width:auto; }
.nav__links{ display:flex; gap: 1.9rem; }
.nav__links a{ font-size:.88rem; color: var(--text-dim); transition: color .2s ease; position:relative; }
.nav__links a:hover{ color: var(--teal); }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background: var(--brass); transition: width .25s var(--ease); }
.nav__links a:hover::after{ width:100%; }

.nav__toggle{ display:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.nav__toggle span{ width:16px; height:1.4px; background: var(--text); transition: transform .25s ease, opacity .25s ease; }
.nav__toggle[aria-expanded="true"] span:first-child{ transform: translateY(3.2px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform: translateY(-3.2px) rotate(-45deg); }

.nav-overlay{
  position: fixed; inset:0; z-index: 390; background: rgba(255,255,255,.98);
  display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap: 1.2rem 2rem;
  padding: 6rem 2rem 2rem;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.nav-overlay.is-open{ opacity:1; pointer-events:auto; }
.nav-overlay a{ font-family: var(--font-display); font-size: 1.6rem; color: var(--text); }
.nav-overlay a:hover{ color: var(--brass-dim); }

/* ==========================================================================
   Shared layout
   ========================================================================== */
.wrap{ max-width: var(--content); margin: 0 auto; padding: 0 2rem; }
.wrap--narrow{ max-width: 46rem; }

.panel{ padding: 7rem 0; position: relative; }
.panel--alt{ background: linear-gradient(180deg, transparent, rgba(0,77,64,.028), transparent); }

.eyebrow{
  font-family: var(--font-mono); font-size:.78rem; color: var(--teal);
  text-transform: uppercase; letter-spacing:.12em; margin: 0 0 1rem;
}
.h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 1.1rem; max-width: 30ch; }
.lead-p{ font-size: 1.05rem; max-width: 46rem; }
.sub-h{ font-size: 1.35rem; color: var(--text); margin: 3.5rem 0 1.5rem; }
.fine-print{ font-size: .88rem; color: var(--text-faint); max-width: 42rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

.grad-text{
  background: linear-gradient(120deg, var(--teal), var(--brass-dim));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style: normal;
}

.btn{ display:inline-flex; align-items:center; gap:.5rem; padding: .9rem 1.6rem; border-radius:999px; font-size:.92rem; font-weight:600; transition: transform .25s var(--ease), background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.btn--solid{ background: var(--teal); color: #fff; box-shadow: 0 14px 28px -12px rgba(0,77,64,.45); }
.btn--solid:hover{ transform: translateY(-2px); background: var(--brass-dim); box-shadow: var(--shadow-brass); }
.btn--outline{ border: 1px solid var(--border-hi); color: var(--text); }
.btn--outline:hover{ background: var(--surface-hi); transform: translateY(-2px); border-color: var(--teal); }

.glass{
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.6rem;
  transition: transform .35s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.tilt{ transform-style: preserve-3d; will-change: transform; }
.glass:hover{ border-color: var(--border-hi); box-shadow: var(--shadow-card-hover); }

.bento{ display:grid; gap: 1.1rem; margin-top: 2.75rem; }
.bento--3{ grid-template-columns: repeat(3,1fr); }
.glass__tag{ display:block; color: var(--brass); font-size:.78rem; margin-bottom: .8rem; letter-spacing:.06em; text-transform:uppercase; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ min-height: 100svh; display:flex; flex-direction:column; justify-content:center; position:relative; padding: 8rem 2rem 3rem; overflow:hidden; }

.mesh{ position:absolute; inset:0; z-index:0; }
.mesh__blob{ position:absolute; border-radius:50%; filter: blur(70px); }
.mesh__blob--1{ width: 34rem; height:34rem; background: radial-gradient(circle, var(--teal-deep), transparent 70%); top:-10rem; left:-8rem; opacity:.14; animation: float-a 22s ease-in-out infinite; }
.mesh__blob--2{ width: 26rem; height:26rem; background: radial-gradient(circle, var(--brass), transparent 70%); bottom:-10rem; right:-8rem; opacity:.18; animation: float-b 26s ease-in-out infinite; }
@keyframes float-a{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(3rem,2rem) scale(1.08); } }
@keyframes float-b{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-2.5rem,-2rem) scale(1.05); } }

.hero__inner{ position:relative; z-index:2; max-width: 46rem; }
.badge{
  display:inline-block; font-family: var(--font-mono); font-size:.76rem; color: var(--text-dim);
  border: 1px solid var(--border-hi); padding: .5rem 1rem; border-radius: 999px; margin-bottom: 1.8rem;
}
.hero__title{ font-size: clamp(2.3rem, 8vw, 4.6rem); line-height: 1.08; letter-spacing:-0.02em; }
.hero__lede{ margin-top: 1.5rem; font-size: 1.15rem; color: var(--text-dim); max-width: 36rem; }
.hero__cta{ display:flex; gap: 1rem; margin-top: 2.2rem; flex-wrap:wrap; }

.stat-strip{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap: 2.5rem 3.5rem;
  margin-top: 4.5rem; padding-top: 2.2rem; border-top: 1px solid var(--border);
  max-width: 46rem;
}
.stat-strip__item{ display:flex; flex-direction:column; gap:.3rem; }
.stat-strip__num{ font-size: 1.8rem; color: var(--text); font-weight:500; }
.stat-strip__item span:last-child{ font-size:.82rem; color: var(--text-faint); }

.scroll-cue{ position:absolute; bottom: 2rem; left:50%; transform: translateX(-50%); z-index:2; width:22px; height:36px; border:1.5px solid var(--border-hi); border-radius:12px; }
.scroll-cue span{ position:absolute; top:6px; left:50%; width:3px; height:7px; margin-left:-1.5px; border-radius:2px; background: var(--teal); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{ opacity:1; transform: translateY(0);} 70%{ opacity:0; transform: translateY(10px);} 100%{ opacity:0; } }

/* ==========================================================================
   FLIP CARDS (Standard)
   ========================================================================== */
.flip-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; margin-top: 2.75rem; perspective: 1400px; }
.flip-card{ height: 290px; text-align:left; }
.flip-card__inner{
  position:relative; width:100%; height:100%; transform-style: preserve-3d;
  transition: transform .7s var(--ease);
}
.flip-card:hover .flip-card__inner, .flip-card.is-flipped .flip-card__inner{ transform: rotateY(180deg); }
.flip-card__face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius: var(--radius);
  border: 1px solid var(--border); padding: 1.8rem; display:flex; flex-direction:column;
  box-shadow: var(--shadow-card);
}
.flip-card__front{ background: #fff; justify-content:space-between; }
.flip-card__back{ background: linear-gradient(155deg, rgba(0,77,64,.08), rgba(176,141,76,.10)); transform: rotateY(180deg); justify-content:center; border-color: var(--border-hi); }
.flip-card__icon{ width: 34px; height:34px; color: var(--teal); }
.flip-card__front h3{ font-size: 1.15rem; margin-top: 1.2rem; }
.flip-card__hint{ font-size:.76rem; color: var(--text-faint); font-family: var(--font-mono); }
.flip-card__back p{ font-size:.92rem; color: var(--text); max-width:none; }
.callout-line{ display:block; margin-top: 1rem; font-family: var(--font-display); font-size: .98rem; color: var(--brass); }

/* ==========================================================================
   PROCESS TRACK
   ========================================================================== */
.track{ position:relative; display:flex; justify-content:space-between; margin-top: 3rem; overflow-x:auto; padding-bottom: .5rem; gap: .5rem; scrollbar-width: none; -ms-overflow-style: none; }
.track::-webkit-scrollbar{ display:none; }
.track__line{ position:absolute; top: 17px; left: 17px; right: 17px; height:1px; background: var(--border); z-index:0; }
.track__line span{ display:block; height:100%; width:0%; background: linear-gradient(90deg,var(--teal),var(--brass)); transition: width .5s var(--ease); }
.track__step{
  position:relative; z-index:1; flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.84rem; color: var(--text-faint); min-width: 74px;
}
.track__step::before{
  content:''; width: 12px; height:12px; border-radius:50%; background: var(--bg-soft); border: 2px solid var(--border-hi);
  transition: all .3s var(--ease);
}
.track__step.is-active{ color: var(--text); font-weight:600; }
.track__step.is-active::before{ background: var(--teal); border-color: var(--teal); box-shadow: 0 0 14px rgba(0,77,64,.45); }
.track__detail{ margin-top: 2.2rem; min-height: 4rem; border-left: 2px solid var(--teal); }
.track__detail p{ font-size: 1rem; color: var(--text); }

/* ==========================================================================
   PRICING
   ========================================================================== */
.price-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 2.75rem; }
.price-card__cat{ display:block; font-family: var(--font-display); font-size: 1.2rem; color: var(--text); margin-bottom: 1.2rem; }
.price-card__row{ display:flex; justify-content:space-between; padding: .8rem 0; border-top: 1px solid var(--border); font-size:.92rem; }
.price-card__row--hi span:last-child{ color: var(--teal); font-weight:600; }

.fee-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-top: 1.2rem; }
.fee-card{ display:flex; flex-direction:column; gap:.6rem; }
.fee-card--wide{ background: linear-gradient(135deg, rgba(0,77,64,.07), rgba(176,141,76,.10)); }
.fee-card__label{ font-size:.85rem; color: var(--text-faint); }
.fee-card__amount{ font-size: 1.5rem; color: var(--text); }
.fee-card__amount small{ font-size:.9rem; color: var(--text-faint); }

/* ==========================================================================
   OBJECTIVES
   ========================================================================== */
.obj-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; margin-top: 2.5rem; }
.obj-card{
  text-align:left; background: #fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 1.6rem; display:flex; flex-direction:column; gap:.6rem; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.obj-card:hover{ border-color: var(--teal); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.obj-card__num{ font-size:.76rem; color: var(--brass); }
.obj-card__title{ font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.obj-card__teaser{ font-size:.86rem; color: var(--text-faint); margin:0; }

/* ==========================================================================
   CUSTOMERS SEGMENTED
   ========================================================================== */
.segmented__nav{ display:inline-flex; background: var(--surface); border:1px solid var(--border); border-radius:999px; padding:.3rem; gap:.2rem; }
.segmented__nav button{ padding:.65rem 1.4rem; border-radius:999px; font-size:.88rem; color: var(--text-faint); transition: all .25s var(--ease); }
.segmented__nav button[aria-selected="true"]{ background: var(--teal); color:#fff; font-weight:600; }
.tag-cloud{ list-style:none; margin: 2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.7rem; }
.tag-cloud li{ padding:.65rem 1.1rem; background: var(--surface); border:1px solid var(--border); border-radius:999px; font-size:.88rem; color: var(--text-dim); }

/* ==========================================================================
   DIFFERENCE
   ========================================================================== */
.compare-grid{ display:flex; flex-direction:column; gap: 1.1rem; margin-top: 2.5rem; }
.compare-panel{ padding: 1.8rem 2rem; border-radius: var(--radius); border: 1px solid var(--border); }
.compare-panel--muted{ background: var(--bg-soft); border-style: dashed; }
.compare-panel--glow{ background: var(--teal-deep); border-color: var(--teal-deep); box-shadow: var(--shadow-card); }
.compare-panel__label{ display:block; font-size:.82rem; font-weight:600; margin-bottom: 1.1rem; color: var(--text-faint); }
.compare-panel--glow .compare-panel__label{ color: var(--brass); }
.flow-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.flow-chips span{ font-size:.84rem; padding:.5rem .9rem; border-radius:999px; background: rgba(0,77,64,.06); color: var(--text-faint); }
.compare-panel--muted .flow-chips span{ text-decoration: line-through; text-decoration-color: rgba(76,101,95,.4); }
.compare-panel--glow .flow-chips span{ background: rgba(255,255,255,.12); color: #fff; }

/* ==========================================================================
   TEAM — large profile bands
   ========================================================================== */
.team-section .wrap{ margin-bottom: 1rem; }
.team-band{
  max-width: var(--content); margin: 0 auto 3rem; padding: 0 2rem;
  display:grid; grid-template-columns: .8fr 1fr; gap: 3rem; align-items:center;
}
.team-band--reverse{ direction: rtl; }
.team-band--reverse > *{ direction: ltr; }

.team-band__photo{
  position:relative; aspect-ratio: 4/5; border-radius: 28px; overflow:hidden;
  background-color: #fff;
  background-image:
    repeating-linear-gradient(135deg, rgba(0,77,64,.055) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(45deg, rgba(176,141,76,.05) 0 1px, transparent 1px 28px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display:flex; align-items:center; justify-content:center;
  will-change: transform;
  transition: box-shadow .35s var(--ease);
}
.team-band__photo:hover{ box-shadow: var(--shadow-card-hover); }
.team-band__photo::before{
  content:''; position:absolute; top: 18px; left: 18px; width: 26px; height: 26px;
  border-top: 1.5px solid var(--brass); border-left: 1.5px solid var(--brass); pointer-events:none; z-index:2;
}
.team-band__photo::after{
  content:''; position:absolute; bottom: 18px; right: 18px; width: 26px; height: 26px;
  border-bottom: 1.5px solid var(--brass); border-right: 1.5px solid var(--brass); pointer-events:none; z-index:2;
}
.team-band__photo img{
  height:100%; width:auto; max-width:none; display:block;
  filter: grayscale(.3) contrast(1.05); transition: filter .5s ease, transform .5s ease;
}
.team-band__photo:hover img{ filter: grayscale(0) contrast(1.05); transform: scale(1.015); }
.team-band__initials{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  font-size: 3.4rem; color: var(--teal); opacity: .55;
}
.team-band__photo--fallback img{ display:none; }
.team-band__photo--fallback .team-band__initials{ display:flex; }

.pill{
  display:inline-block; font-family: var(--font-mono); font-size:.76rem; letter-spacing:.04em;
  color: var(--teal); border: 1px solid rgba(0,77,64,.28); background: rgba(0,77,64,.06);
  padding: .4rem .9rem; border-radius:999px; margin-bottom: 1.1rem;
}
.team-band__content h3{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.team-band__tagline{ margin-top: .9rem; font-size: 1.02rem; color: var(--text-dim); max-width: 34rem; }
.tag-row{ list-style:none; display:flex; flex-wrap:wrap; gap:.55rem; margin: 1.4rem 0 0; padding:0; }
.tag-row li{ font-size:.82rem; padding:.5rem .95rem; border-radius:999px; background: var(--surface); border:1px solid var(--border); color: var(--text-dim); }

/* ==========================================================================
   GOVERNANCE / STRUCTURE
   ========================================================================== */
.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2.75rem; }
.stat-card{ display:flex; flex-direction:column; gap:.5rem; }
.stat-card__num{ font-size: 1.7rem; color: var(--text); }
.stat-card__label{ font-size:.82rem; color: var(--text-faint); }

.split-bar-wrap{ margin-top: 2.5rem; }
.split-bar{ height: 10px; border-radius:999px; background: rgba(0,77,64,.08); overflow:hidden; }
.split-bar__fill{ display:block; height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg,var(--teal),var(--brass)); transition: width 1.2s var(--ease); }
.split-bar.is-visible .split-bar__fill{ width: var(--pct); }
.split-bar__legend{ display:flex; gap: 2rem; margin-top: 1rem; flex-wrap:wrap; font-size:.86rem; color: var(--text-dim); }
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:.5rem; }
.dot--teal{ background: var(--teal); }
.dot--dim{ background: var(--text-faint); }

.phil-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.phil-card strong{ display:block; color: var(--text); font-size: 1rem; margin-bottom:.5rem; font-family: var(--font-display); }
.phil-card p{ font-size:.86rem; margin:0; }

/* ==========================================================================
   ORBIT / BRAND POSITION
   ========================================================================== */
.orbit{ position:relative; width: 100%; max-width: 30rem; aspect-ratio: 1/1; margin: 3rem auto 0; }
.orbit__lines{ position:absolute; inset:0; width:100%; height:100%; }
.orbit__lines line{ stroke: rgba(0,77,64,.16); stroke-width:1; transition: stroke .3s ease; }
.orbit__center{
  position:absolute; inset: 30%; border-radius:50%; background: var(--surface-hi); border: 1px solid var(--border-hi);
  backdrop-filter: blur(10px); display:flex; align-items:center; justify-content:center; text-align:center; padding: 1.4rem;
  box-shadow: 0 0 40px rgba(176,141,76,.22);
}
.orbit__center p{ font-size:.88rem; color: var(--text); margin:0; }
.orbit__node{
  position:absolute; top: var(--y); left: var(--x); transform: translate(-50%,-50%);
  width: 92px; height:92px; border-radius:50%; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display:flex; align-items:center; justify-content:center; text-align:center; font-size:.8rem; color: var(--text-faint);
  padding:.4rem; transition: all .3s var(--ease);
}
.orbit__node.is-active, .orbit__node:hover{ border-color: var(--teal); color: var(--text); background: rgba(0,77,64,.07); box-shadow: 0 0 20px rgba(0,77,64,.18); }

/* ==========================================================================
   AMBITION
   ========================================================================== */
.ambition__statement{ font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2.1rem); color: var(--text); max-width:none; line-height:1.35; }
.tag-cloud--float{ margin-top: 2.5rem; justify-content:center; }
.tag-cloud--float li{ transition: transform .3s ease; }

/* ==========================================================================
   GLANCE + FOOTER
   ========================================================================== */
.glance-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2.5rem; }
.glance-grid .glass{ display:flex; flex-direction:column; gap:.4rem; }
.glance-grid .glass span:first-child{ font-size:.78rem; color: var(--text-faint); }
.glance-grid .glass span:last-child{ font-size:.96rem; color: var(--text); font-weight:600; }

.foot{ text-align:center; padding: 4.5rem 2rem 3.5rem; background: var(--teal-deep); }
.foot .wordmark{ color: #fff; }
.foot p{ margin: .5rem auto; color: rgba(255,255,255,.7); max-width:none; }
.foot__legal{ font-size:.78rem; color: rgba(255,255,255,.45); }

/* ==========================================================================
   FAB + DRAWER + MODAL
   ========================================================================== */
.fab{
  position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 300;
  background: var(--teal-deep); color: #fff; border-radius:999px; padding:.9rem 1.4rem;
  font-size:.86rem; font-weight:700; box-shadow: 0 16px 32px -12px rgba(0,51,43,.45);
  opacity:0; transform: translateY(14px); pointer-events:none; transition: all .3s var(--ease);
}
.fab.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ background: var(--brass-dim); }

.drawer{ position:fixed; inset:0; z-index:600; }
.drawer[hidden]{ display:none; }
.drawer::before{ content:''; position:absolute; inset:0; background: rgba(2,10,8,.7); }
.drawer__panel{ position:absolute; top:0; right:0; bottom:0; width:min(24rem,100%); background: var(--bg-soft); border-left:1px solid var(--border); display:flex; flex-direction:column; animation: slide-in .3s var(--ease); }
@keyframes slide-in{ from{ transform: translateX(100%);} to{ transform: translateX(0);} }
.drawer__head{ display:flex; justify-content:space-between; align-items:center; padding: 1.5rem; border-bottom:1px solid var(--border); }
.drawer__head h3{ font-size:1.1rem; }
.drawer__body{ padding: 1rem 1.5rem 2rem; overflow-y:auto; display:flex; flex-direction:column; gap: 1rem; }
.drawer-row{ display:flex; flex-direction:column; gap:.25rem; padding-bottom:.9rem; border-bottom:1px solid var(--border); }
.drawer-row:last-child{ border-bottom:none; padding-bottom:0; }
.drawer-row span:first-child{ font-size:.74rem; color: var(--text-faint); }
.drawer-row span:last-child{ font-size:.92rem; color: var(--text); font-weight:600; }
.icon-btn{ width:32px; height:32px; border-radius:50%; color: var(--text-dim); }
.icon-btn:hover{ background: rgba(0,77,64,.08); }

.modal{ position:fixed; inset:0; z-index:650; display:flex; align-items:center; justify-content:center; padding: 1.5rem; }
.modal[hidden]{ display:none; }
.modal::before{ content:''; position:absolute; inset:0; background: rgba(2,10,8,.75); }
.modal__panel{
  position:relative; background: var(--bg-soft); border: 1px solid var(--border-hi); border-radius: var(--radius);
  max-width: 32rem; width:100%; max-height:85vh; overflow-y:auto; padding: 2.2rem;
  animation: modal-in .28s var(--ease); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
@keyframes modal-in{ from{ opacity:0; transform: translateY(10px) scale(.98);} to{ opacity:1; transform:none; } }
.modal__close{ position:absolute; top:1rem; right:1rem; width:32px; height:32px; border-radius:50%; color: var(--text-dim); }
.modal__close:hover{ background: rgba(0,77,64,.08); }
.modal-obj__num{ font-family: var(--font-mono); font-size:.8rem; color: var(--brass); display:block; margin-bottom:.6rem; }
.modal-obj h3{ font-size: 1.35rem; margin-bottom: 1rem; }
.modal-obj p{ font-size: .98rem; color: var(--text-dim); max-width:none; }
.modal-obj__nav{ display:flex; justify-content:space-between; margin-top: 2rem; padding-top: 1.2rem; border-top:1px solid var(--border); }
.modal-obj__nav button{ border:1px solid var(--border); border-radius:999px; padding:.5rem 1.1rem; font-size:.84rem; color: var(--text); }
.modal-obj__nav button:hover{ border-color: var(--teal); }
.modal-obj__nav button:disabled{ opacity:.3; pointer-events:none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .bento--3, .flip-grid, .price-grid, .obj-grid, .stat-grid, .phil-grid, .glance-grid{ grid-template-columns: repeat(2,1fr); }
  .fee-grid{ grid-template-columns: 1fr 1fr; }
  .fee-card--wide{ grid-column: span 2; }
  .team-band, .team-band--reverse{ grid-template-columns: 1fr; direction: ltr; gap: 2rem; }
  .team-band__photo{ max-width: 20rem; margin: 0 auto; }
  .team-band__content{ text-align:center; }
  .team-band__content .tag-row, .team-band__content .team-band__tagline{ margin-left:auto; margin-right:auto; }
  .tag-row{ justify-content:center; }
}

@media (max-width: 760px){
  /* Orbit becomes a clean stacked list — a circular constellation doesn't
     have room to breathe on a phone screen. */
  .orbit{ max-width: none; aspect-ratio: auto; display:flex; flex-direction:column; gap:.7rem; margin-top: 2rem; }
  .orbit__lines{ display:none; }
  .orbit__center{ position:static; inset:auto; border-radius: var(--radius); order:-1; margin-bottom:.4rem; padding: 1.5rem; box-shadow: none; border-color: var(--border); }
  .orbit__node{
    position:static; top:auto; left:auto; transform:none; width:100%; height:auto;
    border-radius: var(--radius-sm); flex-direction:row; justify-content:flex-start;
    text-align:left; padding: 1rem 1.25rem; font-size:.9rem;
  }
}

@media (max-width: 640px){
  .wrap{ padding: 0 1.4rem; }
  .panel{ padding: 4rem 0; }
  .bento--3, .flip-grid, .price-grid, .obj-grid, .phil-grid, .glance-grid, .fee-grid{ grid-template-columns: 1fr; }
  .fee-card--wide{ grid-column: auto; }
  .flip-card{ height: 320px; }
  .h2{ font-size: clamp(1.6rem, 6vw, 2rem); max-width: none; }
  .hero{ padding: 7rem 1.4rem 2.5rem; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
  .stat-strip{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.6rem 1.5rem; }
  .segmented__nav{ display:flex; width:100%; }
  .segmented__nav button{ flex:1; padding:.65rem .6rem; font-size:.84rem; }
  .fab span{ display:none; } .fab{ padding:.9rem; }
  .glass{ padding: 1.35rem; }
}

@media (max-width: 400px){
  .hero__title{ font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .badge{ font-size:.7rem; padding:.45rem .85rem; }
}