/* ==========================================================================
   Shivganga — shared page base
   Tokens, element resets and the small utility layer (.sg-wrap, .sg-section,
   .sg-eyebrow, .sg-head, .sg-btn) used by every redesigned page. Applies only
   inside an element carrying .sg-page, so untouched legacy pages keep the
   theme stylesheets exactly as they were.

   home.css still carries its own copy under .sg-home: that page was finished
   and verified first, and re-scoping it would put it at risk for no gain. The
   values here are identical to it, so the pages stay in step.

   Load order matters — this file must come before the per-page stylesheets,
   which override it by being more specific (e.g. .sg-about .sg-head p).
   ========================================================================== */

.sg-page {
  /* Palette */
  --sg-green:        #0E6B57;
  --sg-green-dark:   #0A5344;
  --sg-green-soft:   #A8C8BF;
  --sg-green-tint:   #E7F1ED;
  --sg-green-pale:   #DCEFE9;

  --sg-orange:       #E86A24;
  --sg-orange-dark:  #C4551A;
  --sg-orange-pale:  #FDEFE4;

  --sg-ink:          #15211D;
  --sg-ink-2:        #3D4B46;
  --sg-muted:        #5C6A64;
  --sg-muted-2:      #6B7A74;

  --sg-cream:        #EDE7DD;
  --sg-cream-2:      #E3DCD1;
  --sg-paper:        #FBF8F3;
  --sg-white:        #FFFFFF;

  /* Type */
  --sg-font-head: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --sg-font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --sg-font-quote: 'Lora', Georgia, serif;

  /* Rhythm */
  --sg-section-y: clamp(56px, 8vw, 104px);
  --sg-radius: 16px;
  --sg-radius-lg: 24px;
  --sg-shadow: 0 1px 2px rgba(21,33,29,.04), 0 8px 24px rgba(21,33,29,.06);
  --sg-shadow-lg: 0 2px 4px rgba(21,33,29,.05), 0 18px 48px rgba(21,33,29,.11);

  font-family: var(--sg-font-body);
  color: var(--sg-ink);
  background: var(--sg-paper);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Undo the theme's global element rules (style-new.css sets Playfair headings,
   fixed h1-h6 sizes, a 16px grey p and a blue link colour on everything). */
.sg-page p { font-size: 1rem; margin: 0 0 1rem; color: var(--sg-muted); }
.sg-page h1, .sg-page h2, .sg-page h3, .sg-page h4, .sg-page h5 {
  font-family: var(--sg-font-head);
  color: var(--sg-ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
.sg-page img { max-width: 100%; }
.sg-page a { text-decoration: none; color: inherit; }
.sg-page ul { margin: 0; padding: 0; }
.sg-page li { list-style: none; }

.sg-page .sg-wrap { width: min(1180px, 92vw); margin-inline: auto; }

/* In-page links land under the sticky bar without it, so every anchorable
   section reserves the header's height above itself. */
.sg-page section[id] { scroll-margin-top: calc(var(--sg-header-h) + 16px); }
.sg-page { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .sg-page { scroll-behavior: auto; } }
.sg-page .sg-section { padding-block: var(--sg-section-y); }
.sg-page .sg-section--tint  { background: var(--sg-green-tint); }
.sg-page .sg-section--cream { background: var(--sg-cream); }
.sg-page .sg-section--paper { background: var(--sg-paper); }
.sg-page .sg-section--white { background: var(--sg-white); }

/* ---------- Section headers ---------- */
.sg-page .sg-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sg-font-head);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sg-green); margin-bottom: 1rem;
}
.sg-page .sg-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--sg-orange); border-radius: 2px;
}
.sg-page .sg-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.sg-page .sg-head--center { margin-inline: auto; text-align: center; }
.sg-page .sg-head--center .sg-eyebrow::before { display: none; }
.sg-page .sg-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.sg-page .sg-head p  { font-size: clamp(1rem, 1.4vw, 1.13rem); color: var(--sg-muted); margin-bottom: 0; }

/* ---------- Buttons ---------- */
.sg-page .sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--sg-font-head); font-weight: 600; font-size: .97rem;
  padding: .85rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  line-height: 1;
}
.sg-page .sg-btn:hover { transform: translateY(-2px); text-decoration: none; }
.sg-page .sg-btn:focus-visible { outline: 3px solid var(--sg-orange); outline-offset: 3px; }
.sg-page .sg-btn--primary { background: var(--sg-orange); color: #fff; box-shadow: 0 6px 18px rgba(232,106,36,.28); }
.sg-page .sg-btn--primary:hover { background: var(--sg-orange-dark); color: #fff; }
.sg-page .sg-btn--green { background: var(--sg-green); color: #fff; }
.sg-page .sg-btn--green:hover { background: var(--sg-green-dark); color: #fff; }
.sg-page .sg-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.sg-page .sg-btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.sg-page .sg-btn--outline { background: transparent; color: var(--sg-green); border-color: var(--sg-green-soft); }
.sg-page .sg-btn--outline:hover { background: var(--sg-green); color: #fff; border-color: var(--sg-green); }

/* ==========================================================================
   PAGE HERO
   A short photographic hero with the site's water line along its foot. The
   header floats over it, so the hero pads itself by --sg-header-h rather
   than starting below the bar. Used by every interior page that opens on a
   photograph; the page's own stylesheet sets nothing but the copy widths.
   ========================================================================== */
.sg-phero {
  --wave-h: clamp(60px, min(8vw, 10vh), 124px);
  position: relative;
  min-height: clamp(540px, 74vh, 760px);
  background: #0A4E3F;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.sg-phero__media { position: absolute; inset: 0; }
.sg-phero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: .62;
  animation: sgPheroZoom 18s ease-out forwards;
}
@keyframes sgPheroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }

.sg-phero__scrim {
  position: absolute; inset: 0;
  /* Two passes: the diagonal keeps white type legible on the left, the
     vertical one darkens the foot so the pale wave reads as water rather
     than as haze over the bright half of the photograph. */
  background:
    linear-gradient(180deg, rgba(8,58,47,0) 55%, rgba(8,58,47,.62) 100%),
    linear-gradient(100deg, rgba(8,58,47,.93) 0%, rgba(8,58,47,.66) 46%, rgba(8,58,47,.24) 100%);
}

/* Same water surface as the home hero, so the two pages read as one site. */
.sg-phero__wave {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  width: 100%; height: var(--wave-h); display: block;
}

.sg-phero__inner {
  position: relative; z-index: 3; width: 100%;
  padding-block: calc(var(--sg-header-h) + clamp(24px, 4vh, 52px))
                 calc(var(--wave-h) + clamp(22px, 3.5vh, 52px));
}
.sg-phero__content { max-width: 820px; color: #fff; }
.sg-phero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  margin-bottom: .35em;
}
.sg-phero h1 em { font-style: normal; color: #F6B98C; }
.sg-phero__kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sg-font-head); font-weight: 600;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: #F6B98C; margin: 0 0 1.1rem;
}
.sg-phero__kicker::before {
  content: ""; width: 26px; height: 2px; background: var(--sg-orange); border-radius: 2px;
}
.sg-page .sg-phero__lede {
  color: rgba(255,255,255,.9);
  font-size: clamp(1.02rem, 1.7vw, 1.25rem);
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 1.6rem;
}
.sg-phero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Breadcrumb ---------- */
.sg-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .84rem; margin-bottom: clamp(18px, 4vh, 40px);
  color: rgba(255,255,255,.66);
}
.sg-page .sg-crumb a { color: rgba(255,255,255,.82); }
.sg-page .sg-crumb a:hover { color: #fff; text-decoration: underline; }
.sg-crumb span[aria-current] { color: #fff; }
.sg-crumb .sep { opacity: .5; }

/* ---------- Fact chips ---------- */
.sg-facts {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin: 1.7rem 0 0;
}
.sg-facts li {
  display: inline-flex; align-items: baseline; gap: .45rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: .5rem .95rem;
  font-size: .87rem;
  color: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sg-facts b {
  font-family: var(--sg-font-head); font-weight: 700; font-size: 1rem; color: #fff;
}

/* ==========================================================================
   CLOSING CALL TO ACTION BAND
   ========================================================================== */
.sg-pcta {
  background: linear-gradient(135deg, var(--sg-green) 0%, var(--sg-green-dark) 100%);
  border-radius: var(--sg-radius-lg);
  padding: clamp(30px, 4.6vw, 66px);
  position: relative; overflow: hidden;
  text-align: center;
}
.sg-pcta::after {
  content: ""; position: absolute; right: -60px; bottom: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.sg-pcta h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); position: relative; z-index: 1; }
.sg-page .sg-pcta p {
  color: rgba(255,255,255,.86); max-width: 58ch; margin: 0 auto 1.7rem;
  position: relative; z-index: 1; font-size: clamp(1rem, 1.4vw, 1.1rem);
}
.sg-pcta__row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; position: relative; z-index: 1; }

@media (max-width: 700px) {
  .sg-phero { min-height: clamp(480px, 82vh, 640px); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-phero__media img { animation: none; }
  .sg-page .sg-btn { transition: none; }
  .sg-page .sg-btn:hover { transform: none; }
}