/* ==========================================================================
   Guruji Maharaj sections (Home + About)
   Layout ideas from the Guruji design, painted with the site theme
   (cream / saffron / maroon / gold, Fraunces + Inter). Every class is g-*
   so nothing collides with sevadar-landing.css or site.css.
   ========================================================================== */

.dev{font-family:'Rozha One','Fraunces',serif; font-weight:400;}

/* ---------- Hero: copy + 3D Bade Mandir ---------- */
.g-hero .hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);}
.g-hero .g-om-kicker{display:flex; align-items:center; gap:10px; color:var(--gold); font-weight:600; margin-bottom:18px; font-size:15px;}
.g-hero .g-om-kicker .dev{font-size:22px; line-height:1;}
.g-hero h1{font-size:clamp(46px,7vw,92px); line-height:.98; margin-bottom:18px;}
.g-hero .g-subhead{font-family:'Fraunces',serif; font-style:italic; font-size:clamp(20px,2.3vw,28px); color:#fff; margin-bottom:16px; max-width:26ch; line-height:1.3;}

.g-stage{position:relative; height:min(72vh,640px); min-height:400px; margin:0;}
.g-stage .g-band{position:absolute; right:8%; top:0; bottom:20%; width:clamp(64px,8vw,112px);
  background:linear-gradient(180deg,var(--saffron),var(--saffron-deep)); color:#fff; border-radius:0 0 60px 60px;
  padding:18px 12px; font-size:12px; line-height:1.5; font-weight:600; letter-spacing:.04em;
  display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 20px 50px rgba(0,0,0,.25);}
.g-stage canvas{position:relative; display:block; width:100%; height:calc(100% - 44px);}
.g-stage .g-vert{position:absolute; left:0; top:12%; writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:12px; color:rgba(255,255,255,.7); letter-spacing:.14em; text-transform:uppercase;}
.g-stage figcaption{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:16px;
  font-size:13px; color:rgba(255,255,255,.75); border-top:1px solid rgba(255,255,255,.25); padding-top:10px;}
.g-stage figcaption strong{color:#fff;}
.g-hero .g-stage canvas{--m3d-fill:#FDF7EE; --m3d-line:#5C1420; --m3d-grid:#D8A857;}

/* ---------- canvases: shared ---------- */
canvas[data-3d]{touch-action:pan-y; cursor:grab;}
canvas[data-3d]:active{cursor:grabbing;}
canvas[data-3d]:focus-visible{outline:2px solid var(--gold); outline-offset:4px; border-radius:12px;}
.no-3d canvas[data-3d]{display:none;}

/* ---------- Mantra strip ---------- */
.g-mantra{background:linear-gradient(90deg,var(--saffron-deep),var(--saffron)); color:#fff; overflow:hidden; white-space:nowrap;
  padding:14px 0 12px; font-size:15px; line-height:1; position:relative; z-index:2;}
.g-mantra .g-track-m{display:inline-flex;}
.g-mantra .g-run{display:inline-flex; gap:48px; padding-right:48px; align-items:center;}
.g-mantra .dev{font-size:19px;}
.g-mantra .g-sep{color:var(--gold); font-size:12px;}
@media (prefers-reduced-motion:no-preference){ .g-mantra .g-track-m{animation:g-marquee 40s linear infinite;} }
@keyframes g-marquee{to{transform:translateX(-50%)}}

/* ---------- Grace ---------- */
.g-grace{background:var(--cream);}
.g-grace .g-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:start;}
.g-statement{font-size:clamp(36px,4.6vw,58px); color:var(--maroon-deep); line-height:1.05; margin-bottom:24px;}
.g-statement em{color:var(--saffron-deep); font-style:italic;}
.g-grace .g-intro p{color:var(--ink-soft); font-size:17px; max-width:34rem;}
.g-grace .g-intro p + p{margin-top:14px;}
.g-grace .g-intro p.g-strong{color:var(--maroon); font-family:'Fraunces',serif; font-size:20px; font-style:italic;}
.g-terms-title{font-size:22px; color:var(--maroon-deep); margin-bottom:10px;}
.g-terms{margin:0;}
.g-terms > div{display:grid; grid-template-columns:10rem 1fr; gap:16px; padding:20px 0; border-top:1px solid var(--line); transition:padding-left .4s var(--ease);}
.g-terms > div:hover{padding-left:10px;}
.g-terms dt{font-family:'Fraunces',serif; font-weight:600; font-size:19px; color:var(--saffron-deep);}
.g-terms dd{margin:0; color:var(--ink-soft); font-size:15.5px;}

/* ---------- About (maroon band with 3D linga) ---------- */
.g-about{background:linear-gradient(160deg,var(--maroon) 0%,var(--maroon-deep) 60%,#3d0e17 100%); color:#fff; position:relative; overflow:hidden;}
.g-about::before{content:''; position:absolute; top:-30%; right:-15%; width:55%; height:160%;
  background:radial-gradient(circle,rgba(216,168,87,.18),transparent 65%); pointer-events:none;}
.g-about .g-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.9fr); gap:clamp(24px,3vw,48px); align-items:stretch; position:relative;}
.g-about .kicker{color:var(--gold);}
.g-about h2{font-size:clamp(38px,5vw,64px); line-height:1; color:#fff; margin:12px 0 26px;}
.g-about h2 span{display:block;}
.g-about h2 .g-accent{color:var(--gold); font-style:italic;}
.g-about p{color:rgba(255,255,255,.75); max-width:32rem; font-size:15.5px;}
.g-about p + p{margin-top:14px;}
.g-about p.g-first{color:#fff; font-size:17px;}
.g-portrait{margin:36px 0 0; max-width:280px;}
.g-portrait svg{display:block; width:100%; height:auto; color:var(--gold); filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));}
.g-portrait figcaption{margin-top:16px; font-family:'Fraunces',serif; font-style:italic; font-size:20px; line-height:1.35; color:#fff;}
.g-linga{position:relative; min-height:520px; margin:0; border-left:1px solid rgba(255,255,255,.14); border-right:1px solid rgba(255,255,255,.14);}
.g-linga canvas{display:block; width:100%; height:calc(100% - 48px); --m3d-fill:#2B1B14; --m3d-line:#D8A857;}
.g-linga figcaption{font-size:13px; color:rgba(255,255,255,.6); padding:10px 20px 0;}
.g-three{display:flex; flex-direction:column; justify-content:flex-end;}
.g-three .g-om-big{font-family:'Rozha One',serif; font-size:clamp(80px,8vw,116px); line-height:1; color:var(--gold); margin-bottom:12px;
  text-shadow:0 0 40px rgba(216,168,87,.35);}
.g-three dl{margin:0;}
.g-three dl div{border-top:1px solid rgba(255,255,255,.16); padding:16px 0;}
.g-three dt{font-family:'Fraunces',serif; font-weight:600; font-size:24px; color:#fff;}
.g-three dd{margin:0; font-size:15px; color:rgba(255,255,255,.7);}
.g-about .g-more{margin-top:28px;}
.g-about--page .g-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}

/* ---------- Bade Mandir (3D switcher + tabs) ---------- */
.g-mandir{background:linear-gradient(180deg,var(--cream-2),var(--cream));}
.g-mandir .g-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:end; margin-bottom:40px;}
.g-mandir .g-head h2{font-size:clamp(32px,4.4vw,54px); color:var(--maroon-deep); line-height:1.05; margin-top:10px;}
.g-mandir .g-head p{color:var(--ink-soft); font-size:17px; margin:0;}
.g-mandir .g-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--line);}
.g-mandir .g-view{position:relative; height:min(68vh,580px); min-height:400px; border-right:1px solid var(--line);
  background:radial-gradient(circle at 50% 70%,rgba(232,132,58,.10),transparent 60%);}
.g-mandir .g-view canvas{display:block; width:100%; height:100%; --m3d-fill:#FFFFFF; --m3d-line:#7A1F2B; --m3d-grid:#E8843A;}
.g-mandir .g-hint{position:absolute; left:18px; bottom:14px; font-size:13px; color:var(--ink-soft); margin:0;}
.g-info{display:flex; flex-direction:column;}
.g-tabs{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line);}
.g-tabs button{font:500 15px 'Inter',sans-serif; background:none; border:0; border-right:1px solid var(--line); color:var(--ink-soft);
  padding:18px 8px 16px; cursor:pointer; position:relative; transition:color .25s, background .25s;}
.g-tabs button:last-child{border-right:0;}
.g-tabs button:hover{background:var(--cream);}
.g-tabs button[aria-selected="true"]{color:var(--maroon-deep); font-weight:700;}
.g-tabs button[aria-selected="true"]::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:linear-gradient(90deg,var(--saffron),var(--saffron-deep));}
.g-panel{padding:clamp(24px,3vw,40px); flex:1;}
.g-panel .dev{font-size:40px; line-height:1.3; color:var(--saffron-deep);}
.g-panel h3{font-size:30px; color:var(--maroon-deep); margin:6px 0 14px; line-height:1.15;}
.g-panel p{color:var(--ink-soft); font-size:16.5px;}
@media (prefers-reduced-motion:no-preference){ .g-panel.swap{animation:g-fade .5s ease both;} }
@keyframes g-fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ---------- Stories of grace ---------- */
.g-stories{background:var(--cream);}
.g-stories .g-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:40px;}
.g-stories .g-head h2{font-size:clamp(32px,4.4vw,54px); color:var(--maroon-deep); margin-top:10px;}
.g-ctrl{display:flex; gap:10px;}
.g-ctrl button{width:48px; height:48px; border-radius:50%; border:1.5px solid var(--maroon); background:none; color:var(--maroon);
  font-size:18px; cursor:pointer; transition:background .25s,color .25s,transform .25s;}
.g-ctrl button:hover{background:var(--maroon); color:#fff; transform:scale(1.06);}
.g-track{list-style:none; margin:0; padding:0 0 16px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,380px);
  gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin;}
.g-track li{scroll-snap-align:start; background:#fff; border-radius:var(--radius); padding:30px 28px; border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.g-track li:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.g-rule{height:1px; background:var(--line); margin:0 0 22px; position:relative;}
.g-rule::before{content:''; position:absolute; left:0; top:-6px; width:13px; height:13px; border-radius:50%; background:#fff; border:2px solid var(--saffron);}
.g-track h3{font-size:22px; color:var(--maroon-deep); line-height:1.25; margin-bottom:10px;}
.g-track p{font-size:15.5px; color:var(--ink-soft); margin:0;}
.g-inscription{max-width:46rem; margin:56px auto 0; text-align:center;}
.g-inscription .dev{display:block; font-size:clamp(38px,5vw,58px); color:var(--saffron-deep); line-height:1.3;}
.g-inscription p{color:var(--ink-soft); margin:8px 0 0; font-size:16.5px;}

/* ---------- Satsang + app ---------- */
.g-reach{background:var(--cream-2);}
.g-reach .g-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.g-reach .g-cell{background:#fff; border-radius:var(--radius); padding:clamp(32px,4vw,52px); border:1px solid var(--line); position:relative; overflow:hidden;}
.g-reach .g-cell::after{content:'ॐ'; position:absolute; right:-10px; bottom:-40px; font-family:'Rozha One',serif; font-size:180px; color:rgba(232,132,58,.08); line-height:1; pointer-events:none;}
.g-reach .g-cell--dark{background:linear-gradient(160deg,var(--maroon),var(--maroon-deep)); color:#fff; border:0;}
.g-reach .g-cell--dark::after{color:rgba(216,168,87,.12);}
.g-reach h2{font-size:clamp(26px,3vw,38px); color:var(--maroon-deep); margin-bottom:12px; line-height:1.15;}
.g-reach .g-cell--dark h2{color:#fff;}
.g-reach p{color:var(--ink-soft); max-width:30rem;}
.g-reach .g-cell--dark p{color:rgba(255,255,255,.78);}
.g-reach .g-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; position:relative; z-index:1;}
.g-soon{display:inline-block; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-top:20px;}

/* ---------- Visit ---------- */
.g-visit{background:linear-gradient(135deg,var(--saffron-deep),var(--saffron)); color:#fff; position:relative; overflow:hidden;}
.g-visit .g-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start;}
.g-visit h2{font-size:clamp(38px,5.5vw,68px); color:#fff; margin-bottom:16px; line-height:1;}
.g-visit p{color:rgba(255,255,255,.9); max-width:30rem; font-size:17px;}
.g-visit dl{margin:0;}
.g-visit dl div{display:grid; grid-template-columns:10rem 1fr; gap:16px; padding:16px 0; border-top:1px solid rgba(255,255,255,.35);}
.g-visit dt{font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.06em;}
.g-visit dd{margin:0;}
.g-visit dd a{color:#fff;}
.g-visit dd.g-todo{opacity:.75; font-style:italic;}
.g-visit .btn{margin-top:24px;}

/* ---------- Closing line ---------- */
.g-closing{background:var(--cream); text-align:center; padding:80px 0 70px;}
.g-closing .g-close{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(26px,3.2vw,38px); color:var(--maroon-deep); line-height:1.3;}
.g-closing .g-tag{color:var(--saffron-deep); margin-top:6px; font-style:italic;}

/* ---------- About page: pillars ---------- */
.g-pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.g-pillar{background:#fff; border-radius:var(--radius); padding:36px 30px; border:1px solid var(--line); text-align:center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.g-pillar:hover{transform:translateY(-8px); box-shadow:var(--shadow);}
.g-pillar .g-pillar-dev{font-family:'Rozha One',serif; font-size:44px; color:var(--saffron-deep); line-height:1.2;}
.g-pillar h3{font-size:26px; color:var(--maroon-deep); margin:8px 0 10px;}
.g-pillar p{color:var(--ink-soft); margin:0;}

/* ---------- responsive ---------- */
@media (max-width:1050px){
  .g-about .g-grid{grid-template-columns:1fr 1fr;}
  .g-about:not(.g-about--page) .g-linga{grid-column:1/-1; grid-row:2; min-height:440px; border:0;
    border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14);}
}
@media (max-width:900px){
  .g-hero .hero-grid{grid-template-columns:1fr;}
  .g-stage{height:min(70vh,500px);}
  .g-grace .g-grid, .g-mandir .g-head, .g-mandir .g-grid, .g-reach .g-grid, .g-visit .g-grid{grid-template-columns:1fr;}
  .g-mandir .g-view{border-right:0; border-bottom:1px solid var(--line); height:420px;}
  .g-terms > div, .g-visit dl div{grid-template-columns:1fr; gap:4px;}
  .g-pillars{grid-template-columns:1fr;}
  .g-about--page .g-grid{grid-template-columns:1fr;}
  .g-about--page .g-linga{border:0; min-height:420px;}
}
@media (max-width:640px){
  .g-about .g-grid{grid-template-columns:1fr;}
  .g-about .g-linga{grid-row:auto;}
  .g-stage .g-band{right:2%;}
}



/* ==========================================================================
   Calm site
   Visitors found the page "blinking": pulsing dots, a zooming header photo,
   ticking countdown digits and sections fading in on scroll. Every CSS
   animation on the public site now jumps straight to its end state and stops,
   and reveal-on-scroll content is simply there. Hover effects still work.
   Kept moving on purpose: the mantra strip and the 3D models (site-3d.js).
   ========================================================================== */
body.site *, body.site *::before, body.site *::after{
  animation-duration:.001s !important;
  animation-delay:0s !important;
  animation-iteration-count:1 !important;
}
body.site .reveal, body.site .reveal-scale, body.site .reveal-left, body.site .reveal-right,
body.site .reveal-stagger > *, body.site .step, body.site .sacred-badge,
body.site .split-word span{
  opacity:1 !important; transform:none !important; transition:none !important;
}
body.site .year-strip .month__bar i{height:var(--h);}
#loader, #cursor-glow, #ember-field{display:none !important;}

/* The one thing that keeps moving: the slow mantra strip. */
@media (prefers-reduced-motion:no-preference){
  body.site .g-mantra .g-track-m{animation:g-marquee 40s linear infinite !important;}
}

/* ---------- Nav spacing ----------
   "Levittown Meditation Center" is a long name; keep clear space between it,
   the links and the buttons, and let it wrap to two lines when room is short. */
.site .nav-inner{gap:40px;}
.site .nav .brand{flex-shrink:0;}
.site .nav .brand-name{line-height:1.1; white-space:normal; overflow:visible; text-overflow:clip;}
.site .nav-links{gap:30px;}
.site .nav-links a, .site .nav-cta .btn{white-space:nowrap;}
@media (max-width:1680px){
  .site .nav .brand{font-size:19px;}
  .site .nav .brand-name{max-width:10.5em;}
  .site .nav-inner{gap:28px;}
  .site .nav-links{gap:24px; font-size:14.5px;}
}