/* ============================================================
   PRANA FLOW YOGASHALA — Stylesheet
   Font Hierarchy:
   L1 Playfair Display 700  → Hero brand title
   L2 Playfair Display 500  → Section headings
   L3 Raleway 600           → Card / sub-headings
   L4 Inter 400             → Body, labels, captions
============================================================ */

/* ── TOKENS ────────────────────────────────────────────── */
:root {
  --teal:        #1A8C85;
  --teal-light:  #2ABCB5;
  --teal-pale:   #D2EDEC;
  --orange:      #E07B30;
  --orange-pale: #FAEAD8;
  --dark:        #1A2E26;
  --dark2:       #243D33;
  --bg:          #F5F2EC;
  --bg-card:     #EDE9DF;
  --white:       #FFFFFF;
  --text:        #1A1A1A;
  --muted:       #6B7365;
  --light-text:  rgba(255,255,255,0.72);

  --f1: 'Playfair Display', Georgia, serif;
  --f3: 'Raleway', system-ui, sans-serif;
  --f4: 'Inter', system-ui, sans-serif;

  --pad: 6.5rem 4rem;
  --mw:  1200px;
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:var(--f4); background:var(--bg); color:var(--text); overflow-x:hidden; }
img  { max-width:100%; display:block; }
a    { text-decoration:none; color:inherit; }


/* ── SCROLL ANIMATIONS ──────────────────────────────────── */
[data-a] { opacity:0; transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
[data-a="up"]    { transform:translateY(65px) scale(.97); }
[data-a="left"]  { transform:translateX(-65px) scale(.97); }
[data-a="right"] { transform:translateX(65px)  scale(.97); }
[data-a="scale"] { transform:scale(.86); }
[data-a].vis     { opacity:1; transform:none; }
[data-d="1"] { transition-delay:.10s; }
[data-d="2"] { transition-delay:.20s; }
[data-d="3"] { transition-delay:.32s; }
[data-d="4"] { transition-delay:.44s; }
[data-d="5"] { transition-delay:.56s; }
[data-d="6"] { transition-delay:.68s; }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
.l1 { font-family:var(--f1); font-size:clamp(3.5rem,7vw,7rem);    font-weight:700; line-height:1.02; letter-spacing:-.02em; }
.l2 { font-family:var(--f1); font-size:clamp(1.8rem,3.5vw,3rem);  font-weight:500; line-height:1.18; }
.l3 { font-family:var(--f3); font-size:clamp(.95rem,1.5vw,1.1rem);font-weight:600; line-height:1.4;  letter-spacing:.02em; }
.l4 { font-family:var(--f4); font-size:.91rem; line-height:1.85; font-weight:400; }
.lbl{ font-family:var(--f4); font-size:.67rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; }

/* ── SHARED LAYOUT ──────────────────────────────────────── */
section   { padding:var(--pad); }
.wrap     { max-width:var(--mw); margin:0 auto; }
.eyebrow  { color:var(--orange); margin-bottom:.75rem; }
.stitle   { color:var(--dark);   margin-bottom:.5rem; }
.ssub     { font-family:var(--f3); font-size:1.02rem; font-weight:400; color:var(--muted); margin-bottom:2.5rem; }
.rule     { width:44px; height:2.5px; background:var(--orange); margin-bottom:2.8rem; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f3); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.9rem 2rem; border-radius:3px; border:none;
  cursor:pointer; transition:all .22s;
}
.btn-dark        { background:var(--dark);   color:#fff; }
.btn-dark:hover  { background:var(--dark2);  transform:translateY(-3px); box-shadow:0 8px 22px rgba(26,46,38,.2); }
.btn-teal        { background:var(--teal);   color:#fff; }
.btn-teal:hover  { background:var(--teal-light); transform:translateY(-3px); }
.btn-out         { background:transparent;   color:var(--dark); border:1.5px solid var(--dark); }
.btn-out:hover   { background:var(--dark);   color:#fff; }
.btn-orange      { background:var(--orange); color:#fff; }
.btn-orange:hover{ background:#c86c25; transform:translateY(-3px); box-shadow:0 8px 22px rgba(224,123,48,.35); }

/* ── NAV ────────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 3.5rem;
  background:rgba(245,242,236,.97); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(26,44,38,.07);
  transition:box-shadow .3s;
}
nav.scrolled { box-shadow:0 2px 18px rgba(26,44,38,.08); }
.nav-brand      { display:flex; align-items:center; gap:.7rem; }
.nav-brand img  { width:42px; height:42px; object-fit:contain; }
.nav-brand-name { font-family:var(--f1); font-size:1.05rem; font-weight:600; color:var(--dark); line-height:1.2; }
.nav-brand-name small { display:block; font-family:var(--f4); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:400; }
.nav-links      { display:flex; align-items:center; gap:2.2rem; list-style:none; }
.nav-links a    { font-family:var(--f3); font-size:.73rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--dark); position:relative; transition:color .2s; }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1.5px; background:var(--orange); transition:width .25s; }
.nav-links a:hover       { color:var(--orange); }
.nav-links a:hover::after{ width:100%; }
.nav-cta        { background:var(--dark)!important; color:#fff!important; padding:.52rem 1.3rem; border-radius:3px; }
.nav-cta:hover  { background:var(--teal)!important; }
.nav-cta::after { display:none!important; }

/* ── HERO ───────────────────────────────────────────────── */
#hero {
  min-height:100vh; padding:8rem 4rem 5rem;
  display:flex; align-items:center;
  position:relative; overflow:hidden;
}
#hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(26,140,133,.04) 1px, transparent 1px),
    linear-gradient(90deg,rgba(26,140,133,.04) 1px, transparent 1px);
  background-size:60px 60px;
}
.hero-grid    { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; max-width:var(--mw); margin:0 auto; width:100%; }
.hero-eyebrow { color:var(--orange); margin-bottom:1.2rem; display:block; }
.hero-h1      { color:var(--dark); margin-bottom:.4rem; }
.hero-h1 em   { font-style:italic; color:var(--teal); }
.hero-tag     { font-family:var(--f1); font-size:clamp(1rem,2vw,1.35rem); font-weight:400; font-style:italic; color:var(--muted); margin-bottom:1.8rem; }
.hero-rule    { width:52px; height:2px; background:var(--orange); margin-bottom:1.6rem; }
.hero-desc    { color:var(--muted); max-width:440px; margin-bottom:2.5rem; }
.hero-btns    { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.8rem; }
.hero-trust   { display:flex; gap:2.5rem; align-items:center; padding-top:1.5rem; border-top:1px solid rgba(26,44,38,.1); }
.trust-item .n{ font-family:var(--f1); font-size:1.5rem; font-weight:600; color:var(--dark); }
.trust-item .t{ font-family:var(--f4); font-size:.7rem; color:var(--muted); line-height:1.3; max-width:72px; }

.hero-vis { position:relative; display:flex; align-items:center; justify-content:center; }

/* ── HERO PHOTO SLIDER (fan / wings layout) ─────────────── */
.hs-viewport {
  position:relative;
  width:100%; max-width:440px;
  height:330px;
  margin:0 auto;
}
.hs-card {
  position:absolute;
  border-radius:18px; overflow:hidden;
  top:50%;
  transition:
    left .72s cubic-bezier(.34,1.1,.64,1),
    width .72s cubic-bezier(.34,1.1,.64,1),
    height .72s cubic-bezier(.34,1.1,.64,1),
    transform .72s cubic-bezier(.34,1.1,.64,1),
    filter .5s ease,
    box-shadow .5s ease,
    margin-top .5s ease;
}
.hs-card img { width:100%; height:100%; object-fit:cover; display:block; }

/* Center card — large, in front, floating */
.hs-center {
  width:46%; height:290px;
  left:27%;
  transform:translateY(-50%);
  z-index:3;
  filter:brightness(1);
  box-shadow:0 22px 58px rgba(26,44,38,.4);
  animation:hsCenterFloat 5.5s ease-in-out infinite;
}
/* Left wing — smaller, angled, behind center */
.hs-left {
  width:35%; height:230px;
  left:4%;
  transform:translateY(-50%) rotate(-7deg);
  transform-origin:right center;
  z-index:1;
  filter:brightness(.5);
  box-shadow:0 8px 20px rgba(26,44,38,.2);
}
/* Right wing — smaller, angled, behind center */
.hs-right {
  width:35%; height:230px;
  left:61%;
  transform:translateY(-50%) rotate(7deg);
  transform-origin:left center;
  z-index:2;
  filter:brightness(.5);
  box-shadow:0 8px 20px rgba(26,44,38,.2);
}
@keyframes hsCenterFloat {
  0%,100% { margin-top:0; }
  50%     { margin-top:-14px; }
}
.h-badge {
  position:absolute; top:2rem; right:-.5rem;
  background:var(--orange); color:#fff; border-radius:50%;
  width:90px; height:90px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; z-index:10;
}
.h-badge .bn { font-family:var(--f1); font-size:1.6rem; font-weight:700; line-height:1; }
.h-badge .bl { font-family:var(--f4); font-size:.56rem; letter-spacing:.04em; line-height:1.3; margin-top:2px; }
.h-award {
  position:absolute; bottom:2.5rem; left:-1.2rem;
  background:var(--dark); color:#fff; border-radius:6px;
  padding:.75rem 1rem; display:flex; align-items:center; gap:.6rem; z-index:10;
  box-shadow:0 8px 24px rgba(26,46,38,.25);
}
.h-award .ico { font-size:1.25rem; }
.h-award .at  { font-size:.68rem; line-height:1.4; }
.h-award .at strong { display:block; font-size:.8rem; }

/* ── ABOUT ──────────────────────────────────────────────── */
#about          { background:var(--dark); padding-bottom:4rem; }
#about .eyebrow { color:rgba(212,192,160,.85); }
#about .stitle  { color:#fff; }
#about .ssub    { color:var(--light-text); }
#about .rule    { background:rgba(212,192,160,.6); }
.about-grid     { display:grid; grid-template-columns:1.15fr .85fr; gap:4rem; align-items:start; }
.about-text     { color:rgba(255,255,255,.9); margin-bottom:1.1rem; line-height:1.9; }
.chips  { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.5rem; }
.chip   { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:rgba(230,210,175,.92); padding:.3rem .9rem; border-radius:2px; font-family:var(--f4); font-size:.72rem; }
.about-right-col { display:flex; flex-direction:column; }
.about-photo-wrap{
  position:relative; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  cursor:default;
}
.about-photo {
  width:100%; display:block; min-height:280px;
  object-fit:contain; background:#0e1e18;
  transition:transform .65s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.about-photo-wrap:hover .about-photo { transform:scale(1.04); filter:brightness(1.06); }
.ap-caption {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(10,20,16,.78));
  padding:2rem 1.2rem 1rem;
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.about-photo-wrap:hover .ap-caption { transform:translateY(0); }
.ap-caption span {
  font-family:var(--f1); font-size:.92rem; font-style:italic;
  color:rgba(212,192,160,.9); letter-spacing:.04em;
}
.a-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2rem; }
.a-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:4px; padding:1.2rem; }
.a-card h4 { font-family:var(--f3); font-size:.88rem; font-weight:600; color:rgba(230,210,175,.92); margin-bottom:.4rem; }
.a-card p  { font-size:.81rem; color:rgba(255,255,255,.65); line-height:1.75; }

/* ── STATS ──────────────────────────────────────────────── */
#stats      { background:var(--teal); padding:3.5rem 4rem; }
.stats-row  { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; max-width:var(--mw); margin:0 auto; text-align:center; }
.sn { font-family:var(--f1); font-size:3.8rem; font-weight:700; color:#fff; line-height:1; margin-bottom:.35rem; }
.sl { font-family:var(--f3); font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); }

/* ── SERVICES ───────────────────────────────────────────── */
#services   { background:var(--bg); }
.svc-header { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:end; margin-bottom:4rem; }
.svc-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.svc-card {
  background:var(--white); border:1px solid rgba(26,44,38,.07);
  border-radius:5px; padding:2.2rem; position:relative; overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.svc-card::before { content:''; position:absolute; bottom:0; left:0; width:3px; height:100%; background:var(--teal); transition:width .3s, background .3s; }
.svc-card:hover   { transform:translateY(-6px); box-shadow:0 16px 40px rgba(26,44,38,.1); }
.svc-card:hover::before { width:5px; background:var(--orange); }
.svc-num   { font-family:var(--f1); font-size:3rem; font-weight:700; color:rgba(26,140,133,.1); line-height:1; margin-bottom:.9rem; }
.svc-title { color:var(--dark); margin-bottom:.25rem; }
.svc-sub   { font-family:var(--f3); font-size:.76rem; font-weight:400; letter-spacing:.06em; color:var(--teal); margin-bottom:1.1rem; }
.svc-list  { list-style:none; }
.svc-list li { font-family:var(--f4); font-size:.82rem; color:var(--muted); padding:.28rem 0; border-bottom:1px solid rgba(26,44,38,.05); display:flex; align-items:center; gap:.55rem; }
.svc-list li:last-child  { border-bottom:none; }
.svc-list li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--teal); flex-shrink:0; }


/* ── WHO ────────────────────────────────────────────────── */
#who       { background:var(--bg-card); }
.who-grid  { display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; }
.who-card  { background:var(--white); border-radius:5px; border:1px solid rgba(26,44,38,.07); padding:1.8rem 1rem; text-align:center; transition:transform .2s, box-shadow .2s; }
.who-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(26,44,38,.08); }
.who-card .wi { font-size:2rem; display:block; margin-bottom:.65rem; }
.who-card .wl { font-family:var(--f3); font-size:.78rem; font-weight:600; color:var(--dark); }

/* ── SPECIALIZATIONS ────────────────────────────────────── */
#spec       { background:var(--bg); }
.spec-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.spec-card  { background:var(--bg-card); border-left:3px solid var(--teal-light); border-radius:0 5px 5px 0; padding:1.5rem; transition:border-left-color .2s; }
.spec-card:hover { border-left-color:var(--orange); }
.spec-title { color:var(--dark); margin-bottom:.42rem; }
.spec-body  { font-size:.8rem; color:var(--muted); line-height:1.7; }

/* ── CERTIFICATIONS ─────────────────────────────────────── */
#certs          { background:var(--dark); }
#certs .eyebrow { color:rgba(212,192,160,.85); }
#certs .stitle  { color:#fff; }
#certs .ssub    { color:var(--light-text); }
#certs .rule    { background:rgba(212,192,160,.6); }

/* Certs — side-panel layout */
.cert-outer {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:2rem;
  align-items:start;
}
.cert-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.cert-item {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-left:3px solid transparent;
  border-radius:5px;
  padding:.85rem 1rem;
  cursor:pointer;
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  transition:background .2s, border-left-color .2s;
}
.cert-item:hover  { background:rgba(255,255,255,.07); border-left-color:var(--teal); }
.cert-item.pinned { background:rgba(42,188,181,.08); border-left-color:var(--orange); }
.cert-yr   { font-family:var(--f1); font-size:.85rem; font-style:italic; color:var(--teal-light); min-width:56px; flex-shrink:0; font-weight:400; padding-top:1px; }
.cert-name { font-family:var(--f3); font-size:.81rem; font-weight:600; color:#fff; margin-bottom:.16rem; line-height:1.4; }
.cert-inst { font-family:var(--f4); font-size:.72rem; color:rgba(255,255,255,.4); line-height:1.4; }

/* Preview panel (right side) */
.cert-preview {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  overflow:hidden;
  position:sticky;
  top:90px;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cp-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2.5rem 1.5rem; text-align:center; gap:.8rem;
}
.cp-placeholder span { font-size:2.8rem; opacity:.45; }
.cp-placeholder p    { font-family:var(--f3); font-size:.78rem; color:rgba(255,255,255,.3); line-height:1.5; }
.cp-detail { width:100%; }
.cp-img-wrap img { width:100%; display:block; max-height:200px; object-fit:cover; }
.cp-no-img { width:100%; height:160px; background:rgba(26,140,133,.12); display:flex; align-items:center; justify-content:center; font-size:3rem; }
.cp-info { padding:1.2rem 1.4rem 1.6rem; }
.cp-info h4 { font-family:var(--f3); font-size:.92rem; font-weight:700; color:#fff; margin-bottom:.45rem; line-height:1.4; }
.cp-info p  { font-size:.78rem; color:rgba(255,255,255,.5); margin-bottom:.35rem; line-height:1.5; }
.cp-yr      { font-family:var(--f1); font-size:.82rem; font-style:italic; color:var(--teal-light); }

/* ── AWARDS ─────────────────────────────────────────────── */
#awards       { background:var(--bg-card); }
.awards-outer { }
.awards-grid  { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.award-card   { background:var(--white); border-radius:5px; border-top:3px solid var(--orange); padding:2rem; text-align:center; transition:transform .2s, box-shadow .2s; }
.award-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(26,44,38,.08); }
.award-icon   { font-size:2rem; display:block; margin-bottom:.85rem; }
.award-logo   { width:70px; height:70px; object-fit:contain; margin:0 auto .85rem; display:block; }
.award-title  { color:var(--dark); margin-bottom:.3rem; }
.award-org    { font-family:var(--f3); font-size:.8rem; color:var(--teal); letter-spacing:.04em; margin-bottom:.55rem; }
.award-desc   { font-size:.81rem; color:var(--muted); line-height:1.65; }

/* ── TAKEAWAY ───────────────────────────────────────────── */
#takeaway { background:var(--bg); }
.tk-intro { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-bottom:4rem; }
.tk-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.tk-card  { border-radius:5px; padding:2.2rem; border:1px solid rgba(26,44,38,.08); transition:transform .25s, box-shadow .25s; }
.tk-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(26,44,38,.1); }
.tk-card.feat  { background:var(--dark); border-color:var(--dark); }
.tk-card.teal  { background:var(--teal); border-color:var(--teal); }
.tk-card.lite  { background:var(--white); }
.tk-badge { display:inline-block; font-family:var(--f3); font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:.22rem .65rem; border-radius:2px; margin-bottom:1.2rem; }
.feat .tk-badge { background:var(--orange); color:#fff; }
.teal .tk-badge { background:rgba(255,255,255,.18); color:#fff; }
.lite .tk-badge { background:var(--orange-pale); color:var(--orange); }
.tk-month { font-family:var(--f1); font-size:2.5rem; font-weight:700; line-height:1; margin-bottom:.45rem; }
.feat .tk-month, .teal .tk-month { color:#fff; }
.lite .tk-month { color:var(--dark); }
.tk-title { font-family:var(--f3); font-size:1rem; font-weight:600; margin-bottom:.75rem; }
.feat .tk-title, .teal .tk-title { color:rgba(255,255,255,.9); }
.lite .tk-title { color:var(--dark); }
.tk-desc  { font-size:.83rem; line-height:1.72; margin-bottom:1.5rem; }
.feat .tk-desc { color:rgba(255,255,255,.62); }
.teal .tk-desc { color:rgba(255,255,255,.78); }
.lite .tk-desc { color:var(--muted); }
.tk-tag   { display:inline-block; font-family:var(--f4); font-size:.7rem; padding:.22rem .6rem; border-radius:2px; font-weight:500; }
.feat .tk-tag { background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }
.teal .tk-tag { background:rgba(255,255,255,.15); color:rgba(255,255,255,.85); }
.lite .tk-tag { background:var(--teal-pale); color:var(--teal); }

/* ── CTA STRIP ──────────────────────────────────────────── */
.cta-strip {
  background:linear-gradient(135deg,var(--dark) 0%,#1E3D2E 100%);
  padding:5rem 4rem; text-align:center; position:relative; overflow:hidden;
}
.cta-strip::before { content:''; position:absolute; top:-50%; left:-10%; width:50%; height:200%; background:radial-gradient(ellipse,rgba(42,188,181,.1) 0%,transparent 70%); pointer-events:none; }
.cta-strip h2 { color:#fff; margin-bottom:.55rem; position:relative; }
.cta-strip p  { font-family:var(--f3); font-size:1rem; color:rgba(255,255,255,.62); margin-bottom:2rem; position:relative; }

/* ── CONTACT ────────────────────────────────────────────── */
#contact       { background:var(--bg); }
.contact-grid  { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; }
.c-info h3     { font-family:var(--f1); font-size:1.6rem; font-weight:500; color:var(--dark); margin-bottom:.8rem; }
.c-info > p    { color:var(--muted); margin-bottom:2rem; }
.c-det         { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.c-ico         { width:34px; height:34px; border-radius:50%; background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.78rem; flex-shrink:0; }
.c-txt         { font-size:.87rem; color:var(--text); line-height:1.5; }
.c-txt a       { color:var(--teal); }
.c-txt a:hover { color:var(--orange); }
/* Why panel (replaces old form) */
.c-why h3 { font-family:var(--f1); font-size:1.4rem; font-weight:500; color:var(--dark); margin-bottom:1.4rem; }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:2rem; }
.why-item { display:flex; gap:.8rem; align-items:flex-start; }
.why-ico  { font-size:1.6rem; flex-shrink:0; line-height:1; margin-top:.1rem; }
.why-item strong { display:block; font-family:var(--f3); font-size:.87rem; color:var(--dark); margin-bottom:.3rem; }
.why-item p { font-size:.8rem; color:var(--muted); line-height:1.55; margin:0; }
.c-book-cta { margin-top:2rem; }
.c-book-cta .btn { font-size:.95rem; padding:.9rem 2.2rem; }
@media (max-width:600px) { .why-grid { grid-template-columns:1fr; } }

.c-form        { background:var(--white); border:1px solid rgba(26,44,38,.08); border-radius:5px; padding:2.5rem; }
.fg            { margin-bottom:1.1rem; }
.fg label      { display:block; font-family:var(--f3); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--dark); margin-bottom:.42rem; }
.fg input, .fg select, .fg textarea {
  width:100%; border:1px solid rgba(26,44,38,.14); border-radius:3px;
  padding:.76rem 1rem; font-family:var(--f4); font-size:.88rem;
  color:var(--text); background:var(--bg);
  outline:none; transition:border-color .2s, box-shadow .2s; -webkit-appearance:none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(26,140,133,.1); }
.fg textarea   { resize:vertical; min-height:96px; }
.fg-row        { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.c-form .btn   { width:100%; justify-content:center; margin-top:.4rem; }

/* ── FOOTER ─────────────────────────────────────────────── */
footer          { background:var(--dark); padding:2.5rem 4rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.foot-brand     { display:flex; align-items:center; gap:.6rem; }
.foot-brand img { width:36px; height:36px; object-fit:contain; }
.foot-brand span{ font-family:var(--f1); font-size:.95rem; color:#fff; }
.foot-copy      { font-size:.73rem; color:rgba(255,255,255,.38); }
.foot-links     { display:flex; gap:1.5rem; }
.foot-links a   { font-family:var(--f4); font-size:.73rem; color:rgba(255,255,255,.48); transition:color .2s; }
.foot-links a:hover { color:var(--teal-light); }

/* ── PEACOCK FEATHER WATERMARK ──────────────────────────── */
/*
   Save the peacock feather image as: peacock-feather.png
   in the same folder as index.html.
   The .wm element is placed inside sections as a decorative
   background watermark — pointer-events:none, very low opacity.
*/
.wm {
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.07;
  background: url('images/peacock-feather.png') no-repeat center / contain;
  transition: transform .1s linear;
}
/* Sections that use the watermark need position:relative + overflow:hidden */
#hero, #about, #services, #spec, #takeaway, #contact { position:relative; overflow:hidden; }
#who, #certs, #awards { position:relative; overflow:hidden; }

/* Hero — large feather bottom-right */
#hero .wm    { width:520px; height:520px; bottom:0; right:0; opacity:.07; }
/* About — top-left corner */
#about .wm   { width:420px; height:420px; top:0; left:0; opacity:.06; }
/* Services — bottom-left */
#services .wm{ width:380px; height:380px; bottom:0; left:0; opacity:.065; }
/* Spec — top-right */
#spec .wm    { width:360px; height:360px; top:0; right:0; opacity:.065; }
/* Takeaway — centre-right */
#takeaway .wm{ width:400px; height:400px; top:50%; right:0; transform:translateY(-50%); opacity:.06; }
/* Contact — bottom-left */
#contact .wm { width:380px; height:380px; bottom:0; left:0; opacity:.065; }

/* Ensure section content sits above watermark */
#hero .hero-grid,
#about .wrap,
#services .wrap,
#spec .wrap,
#takeaway .wrap,
#contact .wrap,
#who .wrap,
#certs .wrap,
#awards .wrap { position:relative; z-index:1; }

/* ── MOON / SUN DECORATIONS ─────────────────────────────── */
/*
   Save images as: moon-decor.png  and  sun-decor.png
   (black silhouette PNGs in the same folder as index.html)
*/
.decor-moon, .decor-sun {
  position:absolute;
  pointer-events:none;
  z-index:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  mix-blend-mode:multiply;
  opacity:.13;
}
.decor-moon { background-image:url('images/moon-decor.png'); }
.decor-sun  { background-image:url('images/sun-decor.png'); }

/* On dark/green sections: invert image + screen blend → shapes glow orange */
#about .decor-sun,
#certs .decor-sun {
  mix-blend-mode:screen;
  filter:invert(1) sepia(1) saturate(3) hue-rotate(320deg);
  opacity:.2;
}

/* Positioning per section */
#hero     .decor-moon  { width:220px; height:220px; bottom:10%; left:2%; }
#about    .decor-sun   { width:250px; height:250px; top:50%; right:2%; transform:translateY(-50%); }
#services .decor-moon  { width:230px; height:230px; bottom:6%; left:1%; }
#who      .decor-sun   { width:210px; height:210px; top:20%; right:2%; }
#spec     .decor-moon  { width:230px; height:230px; bottom:8%; left:1%; }
#certs    .decor-sun   { width:250px; height:250px; top:50%; right:2%; transform:translateY(-50%); }
#awards   .decor-moon  { width:210px; height:210px; top:35%; left:2%; }
#takeaway .decor-sun   { width:230px; height:230px; bottom:8%; right:2%; }
#contact  .decor-moon  { width:230px; height:230px; bottom:6%; left:1%; }

/* ── ELEMENT HOVER ANIMATIONS ───────────────────────────── */
.svc-card:hover  { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 50px rgba(26,44,38,.13); }
.who-card:hover  { transform:translateY(-6px) scale(1.04); box-shadow:0 12px 32px rgba(26,44,38,.12); }
.award-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 16px 40px rgba(26,44,38,.12); }
.spec-card:hover { transform:translateX(4px); box-shadow:4px 0 24px rgba(26,44,38,.1); }
.tk-card:hover   { transform:translateY(-7px) scale(1.01); box-shadow:0 20px 48px rgba(26,44,38,.14); }
.a-card:hover    { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.15); transform:translateX(4px); }
.btn:hover       { transform:translateY(-3px); }

/* ── WHEEL SECTION ──────────────────────────────────────── */
#wheel-section { background:var(--bg-card); }

/* Donut wheel layout */
.wheel-outer {
  display:flex; align-items:center; justify-content:center;
  gap:4rem; padding-top:2.5rem; flex-wrap:wrap;
}
.wheel-svg-wrap { flex-shrink:0; width:580px; height:580px; }
.wheel-svg      { width:100%; height:100%; overflow:visible; }

/* Info panel — slides in from right when segment selected */
.wheel-panel {
  flex:1; max-width:360px; min-width:240px;
  background:var(--white); border:1px solid rgba(26,44,38,.08);
  border-left:4px solid var(--teal); border-radius:6px;
  padding:2.2rem; min-height:220px;
  display:flex; align-items:center;
  opacity:0; transform:translateX(28px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1),
              border-left-color .3s, box-shadow .3s;
  pointer-events:none;
}
.wheel-panel.active {
  opacity:1; transform:translateX(0);
  border-left-color:var(--orange);
  box-shadow:0 8px 32px rgba(26,44,38,.08);
  pointer-events:auto;
}
.wip-content { width:100%; }
.wp-icon  { font-size:2.5rem; margin-bottom:.7rem; display:block; }
.wp-title { font-family:var(--f3); font-size:1.1rem; font-weight:700; color:var(--dark); margin-bottom:.6rem; }
.wp-desc  { font-family:var(--f4); font-size:.88rem; color:var(--muted); line-height:1.85; }


/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1024px) {
  :root { --pad:5rem 2.5rem; }
  .spec-grid  { grid-template-columns:repeat(2,1fr); }
  .svc-header { grid-template-columns:1fr; gap:1rem; margin-bottom:2.5rem; }
}
@media (max-width:860px) {
  :root { --pad:4rem 1.5rem; }
  nav          { padding:.85rem 1.5rem; }
  .nav-links   { display:none; }
  #stats       { padding:3rem 1.5rem; }
  .cta-strip   { padding:3rem 1.5rem; }
  footer       { padding:2rem 1.5rem; flex-direction:column; align-items:flex-start; }
  .hero-grid   { grid-template-columns:1fr; }
  .hero-vis    { order:-1; max-width:300px; margin:0 auto; }
  .hero-arch   { min-height:320px; }
  .hero-trust  { gap:1.5rem; flex-wrap:wrap; }
  .about-grid  { grid-template-columns:1fr; gap:2rem; }
  .a-cards     { grid-template-columns:1fr 1fr; }
  .stats-row   { grid-template-columns:repeat(2,1fr); }
  .svc-grid    { grid-template-columns:1fr; }
  .who-grid    { grid-template-columns:repeat(3,1fr); }
  .spec-grid   { grid-template-columns:1fr 1fr; }
  .cert-outer  { grid-template-columns:1fr; }
  .cert-list   { grid-template-columns:1fr; }
  .tk-intro,.tk-grid { grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:2rem; }
  .fg-row      { grid-template-columns:1fr; }
  .wheel-outer { gap:2rem; }
  .wheel-svg-wrap { width:440px; height:440px; }
  .wheel-panel { max-width:100%; min-width:0; transform:translateY(16px); }
  .wheel-panel.active { transform:translateY(0); }
  .hs-viewport { max-width:380px; height:290px; }
  .hs-center { height:250px; }
  .hs-left,.hs-right { height:200px; }
}
@media (max-width:480px) {
  .who-grid    { grid-template-columns:repeat(2,1fr); }
  .spec-grid   { grid-template-columns:1fr; }
  .a-cards     { grid-template-columns:1fr 1fr; }
  .awards-grid { grid-template-columns:1fr; }
  .hs-viewport { max-width:320px; height:250px; }
  .hs-center { height:215px; }
  .hs-left,.hs-right { height:170px; }
  .wheel-svg-wrap { width:320px; height:320px; }
}