/* About page (site/local/pages/about-us.html): Gem Theory by Shri Ganga Depot, since 1905.
   Rozha One (self-hosted, Latin + Devanagari) for the display lines, the theme's Arimo for text;
   the site's deep green and gold, and Rudraksha brown for the beads of the timeline. */
@font-face {
  font-family: "Rozha One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/local/fonts/rozha-one-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Rozha One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/local/fonts/rozha-one-devanagari.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

.gta {
  --forest: #083B3D; --teal: #0E5E62; --gold: #D4A64A; --gold-soft: #E7B75F; --gold-ink: #7A5A16;
  --paper: #FBF8F3; --ink: #0B3B3C; --muted: #48605F; --line: #E6DCC9;
  --display: "Rozha One", Georgia, "Times New Roman", serif;
  --text: var(--font-body-family, Arimo), Arial, sans-serif;
  color: var(--ink); background: var(--paper); font-family: var(--text); font-size: 16px; line-height: 1.75;
}
.gta *, .gta *::before, .gta *::after { box-sizing: border-box; }
.gta-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.gta-band { padding: 88px 0; }
.gta p { margin: 0 0 16px; }
.gta h1, .gta h2 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--forest); }
.gta h2 { max-width: 24ch; margin-bottom: 18px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; }
.gta .gta-eyebrow { margin: 0 0 14px; max-width: none; font: 700 12px/1.5 var(--text); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.gta-intro { max-width: 68ch; color: var(--muted); }
.gta-gold {
  background: linear-gradient(180deg, #F6DD9A 0%, #E7B75F 45%, #B98A2E 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.gta a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* hero: deep green, framed like an old certificate */
.gta-hero { position: relative; padding: 72px 24px 88px; text-align: center; color: #E9F1EF;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, #0E5E62 0%, #083B3D 70%); }
.gta-hero::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(212, 166, 74, .35); pointer-events: none; }
.gta-hero__mark { display: block; width: 88px; height: auto; margin: 0 auto 20px; }
.gta-hero .gta-eyebrow { color: var(--gold-soft); }
.gta .gta-hero__title { max-width: 15ch; margin: 0 auto 20px; font-size: clamp(40px, 6.4vw, 72px); line-height: 1.06; color: #fff; }
.gta-hero__title .gta-gold { display: block; padding-bottom: .08em; }
.gta .gta-hero__motto { margin-bottom: 26px; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(17px, 2vw, 21px); color: #E7D6AE; }
.gta .gta-hero__lead { max-width: 64ch; margin: 0 auto; color: rgba(255, 255, 255, .86); font-size: 16.5px; }

/* "Gem + Theory", and "रुद्र + अक्ष = रुद्राक्ष": a name read as the sum of its words */
.gta-name { text-align: center; }
.gta-name h2 { margin-left: auto; margin-right: auto; }
.gta-sum { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; max-width: 900px; margin: 40px auto 30px; }
.gta-term { padding: 34px 28px 30px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px 4px 14px 14px; }
.gta-term__word { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(58px, 8vw, 92px); line-height: 1.05; color: var(--forest); }
.gta-term__gloss { display: block; margin: 10px 0 14px; font: 700 12px/1.5 var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); }
.gta-term p { margin: 0; color: var(--muted); font-size: 15.5px; }
.gta-sum__op { align-self: center; font-family: var(--display); font-size: 56px; line-height: 1; color: var(--gold); }
.gta .gta-name__sum { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; color: var(--teal); }

/* legacy: the four generations as beads on a mala, from 1905 to today */
.gta-legacy { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gta-legacy__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: center; }
.gta-legacy__grid p:not(.gta-eyebrow) { color: var(--muted); }
.gta-mala { position: relative; margin: 0; padding: 0; list-style: none; }
.gta-mala::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--gold), #B98A2E); }
.gta-mala li { position: relative; display: flex; align-items: center; gap: 20px; min-height: 58px; }
.gta-mala__bead::before {
  content: ""; flex: none; width: 30px; height: 30px; margin-left: 7px; border-radius: 50%;
  background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(40, 16, 4, .32) 5px 6px),
    radial-gradient(circle at 35% 30%, #BC7A48 0%, #7A4120 50%, #4A230F 100%);
  box-shadow: 0 2px 5px rgba(60, 25, 5, .25);
}
.gta-mala__bead span { font-size: 14px; letter-spacing: .06em; color: var(--muted); }
.gta-mala .gta-mala__end { display: grid; grid-template-columns: 44px auto; column-gap: 20px; row-gap: 4px; align-items: center; align-content: center; }
.gta-mala__end b, .gta-mala__end span { grid-column: 2; }
.gta-mala__end::before { content: ""; grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--forest); border: 2px solid var(--gold); box-shadow: inset 0 0 0 4px var(--forest), inset 0 0 0 5px rgba(212, 166, 74, .6); }
.gta-mala__end b { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--forest); }
.gta-mala__end span { font-size: 13px; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }

/* Rudraksha collection */
.gta-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
.gta-cards li { position: relative; margin: 0; }
/* a glowing gold border whose shine slowly travels round the card (a conic gradient turned by
   --gta-shine; browsers without @property keep it still), with gold stars and dots twinkling on it */
@property --gta-shine { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.gta-cards a { display: flex; flex-direction: column; height: 100%; padding: 0 20px 20px; border: 2px solid transparent; border-radius: 14px;
  overflow: hidden; color: inherit; text-decoration: none;
  background: linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--gta-shine), #B8862B, #F2C46D, #FFF4CF, #D4A64A, #9C6F1E, #E7B75F, #FFF4CF, #B8862B) border-box;
  box-shadow: 0 0 0 1px rgba(231, 183, 95, .2), 0 0 16px rgba(231, 183, 95, .32), 0 8px 22px rgba(8, 59, 61, .06);
  animation: gta-shine 6s linear infinite; transition: transform .2s, box-shadow .2s; }
.gta-cards a:hover { transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(231, 183, 95, .4), 0 0 26px rgba(242, 196, 109, .6), 0 14px 30px rgba(8, 59, 61, .1); }
@keyframes gta-shine { to { --gta-shine: 360deg; } }
.gta-cards li::before, .gta-cards li::after {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF6D8'/%3E%3Cstop offset='.45' stop-color='%23F2C46D'/%3E%3Cstop offset='1' stop-color='%23C8922A'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M10 0C10.8 6 14 9.2 20 10C14 10.8 10.8 14 10 20C9.2 14 6 10.8 0 10C6 9.2 9.2 6 10 0Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --dot: radial-gradient(circle, #FFF6D8 0 1.3px, #E7B75F 1.9px, rgba(212, 166, 74, .5) 2.6px, transparent 3.4px);
  content: ""; position: absolute; inset: -10px; z-index: 1; pointer-events: none; background-repeat: no-repeat;
  filter: drop-shadow(0 0 3px rgba(212, 166, 74, .85)); animation: gta-twinkle 2.4s ease-in-out infinite; transition: translate .2s;
}
.gta-cards li::before {
  background-image: var(--star), var(--star), var(--star), var(--dot), var(--dot), var(--dot), var(--dot);
  background-size: 22px 22px, 14px 14px, 17px 17px, 9px 9px, 9px 9px, 9px 9px, 9px 9px;
  background-position: 0 0, 70% 3px, 100% 62%, 32% 100%, 100% 22%, 5px 45%, 86% 100%;
}
.gta-cards li::after {
  background-image: var(--star), var(--star), var(--star), var(--dot), var(--dot), var(--dot), var(--dot);
  background-size: 17px 17px, 22px 22px, 14px 14px, 9px 9px, 9px 9px, 9px 9px, 9px 9px;
  background-position: 100% 0, 0 100%, 3px 78%, 40% 5px, 100% 92%, 62% 100%, 18% 5px;
  animation-delay: -1.2s;
}
.gta-cards li:hover::before, .gta-cards li:hover::after { translate: 0 -2px; }
@keyframes gta-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* the product photo on top, a little zoomed into its white margin so the bead is large but whole;
   larger on hover */
.gta-cards .gta-cards__photo { display: block; flex: none; aspect-ratio: 4 / 3; margin: 0 -20px 18px; overflow: hidden; background: #fff; }
.gta-cards img { display: block; width: 100%; max-width: none; height: 100%; object-fit: contain; transform: scale(1.18); transition: transform .4s; }
.gta-cards a:hover img { transform: scale(1.28); }
.gta-cards b { margin-bottom: 8px; font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.25; color: var(--forest); }
.gta-cards span { flex: 1; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.gta-cards a::after { content: "Explore \2192"; margin-top: 16px; font: 700 12px/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }

/* significance: the Sanskrit sum on deep green */
.gta-meaning { background: var(--forest); color: rgba(255, 255, 255, .86); text-align: center; }
.gta .gta-meaning .gta-eyebrow { color: var(--gold-soft); text-align: center; }
.gta-sum--sanskrit { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 10px 26px; max-width: none; margin: 18px auto 0; }
.gta-sum--sanskrit .gta-term { padding: 0; background: none; border: 0; text-align: center; }
.gta-sum--sanskrit .gta-term__word { font-size: clamp(46px, 6.6vw, 78px); line-height: 1.35;
  background: linear-gradient(180deg, #F6DD9A 0%, #E7B75F 45%, #B98A2E 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }
.gta-sum--sanskrit .gta-term--result .gta-term__word { font-size: clamp(56px, 8vw, 96px); }
.gta-sum--sanskrit .gta-term__gloss { margin: 4px 0 0; color: rgba(255, 255, 255, .72); letter-spacing: .16em; }
.gta-sum--sanskrit .gta-sum__op { align-self: center; color: rgba(212, 166, 74, .8); font-size: 46px; }
.gta-meaning__text { max-width: 680px; margin: 40px auto 0; }
.gta .gta-pull { margin: 26px 0; font-family: var(--display); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.35; color: #fff; }

/* authenticity: warm temple light, the photos in gold-framed temple arches beside the text, and the
   three promises on parchment cards with gold line icons */
.gta-trust {
  position: relative; overflow: hidden;
  background: radial-gradient(60% 70% at 85% 30%, rgba(231, 183, 95, .2), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(181, 120, 40, .12), transparent 70%), linear-gradient(180deg, #FBF6EC, #F4EAD8);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.gta-trust::before { /* a soft mandala behind the photos */
  content: ""; position: absolute; right: -180px; top: 50%; width: 760px; aspect-ratio: 1; translate: 0 -50%; opacity: .16; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--gold) 0 1deg, transparent 1deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 19%, #000 22%, transparent 23%, transparent 34%, #000 35%, #000 37%, transparent 38%, transparent 52%, #000 53%, #000 70%, transparent 71%);
          mask: radial-gradient(circle, transparent 18%, #000 19%, #000 22%, transparent 23%, transparent 34%, #000 35%, #000 37%, transparent 38%, transparent 52%, #000 53%, #000 70%, transparent 71%);
}
.gta-trust .gta-wrap { position: relative; max-width: 1180px; }
.gta-trust__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
.gta-ornament { display: flex; align-items: center; gap: 12px; width: 220px; margin: 0 0 22px; color: var(--gold); }
.gta-ornament::before, .gta-ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.gta-ornament::after { background: linear-gradient(90deg, var(--gold), transparent); }
.gta-ornament svg, .gta-pillars i svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gta .gta-trust .gta-pull { position: relative; margin: 28px 0 0; padding: 18px 0 0 28px; border-top: 1px dashed rgba(212, 166, 74, .6); color: var(--teal); }
.gta .gta-trust .gta-pull::before { content: "\201C"; position: absolute; left: 0; top: 6px; font-size: 54px; line-height: 1; color: var(--gold); }

/* the photos: four temple arches, staggered */
.gta-arches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.gta-arches li { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 999px 999px 14px 14px; overflow: hidden; background: #E9DCC2;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold), 0 18px 36px rgba(90, 60, 20, .22); }
.gta-arches li:nth-child(even) { translate: 0 34px; }
.gta-arches img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gta-arches li:nth-child(4) img { object-position: 50% 30%; }
.gta-arches li:hover img { transform: scale(1.05); }
.gta-arches span { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 12px 12px; text-align: center;
  background: linear-gradient(transparent, rgba(40, 22, 6, .78)); color: #FBE9C2; font: 400 16px/1.2 var(--display); letter-spacing: .02em; }

/* the three promises */
.gta-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 76px 0 0; padding: 0; list-style: none; }
.gta-pillars li { position: relative; margin: 0; padding: 26px 24px 24px; border: 1px solid rgba(212, 166, 74, .55); border-radius: 14px;
  background: rgba(255, 252, 245, .85); box-shadow: inset 0 0 0 5px rgba(255, 252, 245, .9), inset 0 0 0 6px rgba(212, 166, 74, .35), 0 10px 26px rgba(90, 60, 20, .08); }
.gta-pillars i { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%; color: var(--gold-ink);
  background: radial-gradient(circle at 35% 30%, #FFF6DD, #F1DDB0); box-shadow: 0 0 0 1px rgba(212, 166, 74, .6); }
.gta-pillars b { display: block; margin-bottom: 6px; font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--forest); }
.gta-pillars span { color: var(--muted); font-size: 15px; }

/* gemstones: each stone with its own colour */
.gta-gems { background: #fff; border-top: 1px solid var(--line); }
.gta-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.gta-chips li { margin: 0; }
.gta-chips a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--forest); font-weight: 700; font-size: 14.5px; text-decoration: none; transition: border-color .2s, background .2s; }
.gta-chips a:hover { border-color: var(--gold); background: #fff; }
.gta-chips i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), transparent 45%), var(--stone);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

/* closing */
.gta-close { padding: 88px 0 96px; background: radial-gradient(ellipse 80% 90% at 50% 100%, #0E5E62 0%, #083B3D 70%); color: rgba(255, 255, 255, .86); text-align: center; }
.gta .gta-close h2 { margin: 0 auto 18px; color: #fff; }
.gta-close p { max-width: 62ch; margin-left: auto; margin-right: auto; }
.gta .gta-close__promise { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 19px; color: #E7D6AE; }
.gta .gta-close__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px auto 0; }
.gta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px;
  background: var(--gold); color: #062E30; font: 700 13px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.gta-btn:hover { background: var(--gold-soft); color: #062E30; }
.gta-btn--line { background: transparent; border: 1px solid rgba(212, 166, 74, .7); color: #F1DFAE; }
.gta-btn--line:hover { background: rgba(212, 166, 74, .12); color: #fff; }

@media (max-width: 900px) {
  .gta-legacy__grid { grid-template-columns: 1fr; gap: 40px; }
  .gta-trust__top { grid-template-columns: 1fr; gap: 36px; }
  .gta-arches { max-width: 560px; margin: 0 auto; width: 100%; }
  .gta-pillars { grid-template-columns: 1fr; gap: 16px; margin-top: 64px; }
}
@media (max-width: 749px) {
  .gta { font-size: 15.5px; }
  .gta-band { padding: 60px 0; }
  .gta-wrap { padding: 0 18px; }
  .gta-hero { padding: 56px 20px 64px; }
  .gta-hero::after { inset: 8px; }
  .gta-sum { grid-template-columns: 1fr; gap: 6px; margin-top: 28px; }
  .gta-term { padding: 26px 20px 24px; }
  .gta-sum__op { font-size: 44px; }
  .gta-sum--sanskrit { gap: 4px 16px; }
  .gta-sum--sanskrit .gta-sum__op--eq { flex-basis: 100%; } /* the whole word on its own line */
  .gta-close { padding: 64px 0 72px; }
  .gta-arches { gap: 12px; }
  .gta-arches li:nth-child(even) { translate: 0 22px; }
  .gta-arches span { padding: 26px 8px 9px; font-size: 13.5px; }
  .gta-trust::before { width: 480px; right: -220px; top: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .gta-cards a, .gta-chips a, .gta-btn { transition: none; }
  .gta-cards a, .gta-cards li::before, .gta-cards li::after { animation: none; }
  .gta-cards li::before, .gta-cards li::after { opacity: .85; }
  .gta-cards a:hover { transform: none; }
  .gta-cards li:hover::before, .gta-cards li:hover::after { translate: none; }
  .gta-cards a:hover img { transform: scale(1.18); }
  .gta-arches img { transition: none; }
  .gta-arches li:hover img { transform: none; }
}