/* ==========================================================================
   KATARI JYOTHSNA - pages.css
   Styles that belong to one page or one hero. Everything reusable already
   lives in components.css - this file is only for the set pieces.
   ========================================================================== */

/* ==========================================================================
   HOME - HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(92svh, 62rem);
  display: flex;
  align-items: center;
  padding-top: clamp(3.5rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 10vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 90% 60% at 12% 8%,  var(--mesh-1), transparent 62%),
    radial-gradient(ellipse 70% 55% at 88% 18%, var(--mesh-2), transparent 60%),
    radial-gradient(ellipse 80% 70% at 60% 96%, var(--mesh-3), transparent 66%);
}
.hero__arch {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(120vw, 62rem);
  opacity: .18;
  color: var(--line-gold);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
  /* NO width here. This element also carries .container, and a width
     declared in this file would override the container's gutters
     (pages.css loads after layout.css) - which is exactly the bug that
     left the hero headline glued to the left edge of the screen. */
}

.hero__stage { display: flex; flex-direction: column; gap: clamp(1.35rem, 2.8vw, 2.15rem); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 8.8vw, 7.6rem);
  line-height: .94;
  letter-spacing: -0.035em;
  color: var(--ink-strong);
}
.hero__title .line { display: block; }
.hero__title em {
  font-style: italic;
  color: var(--accent);
  position: relative;
}
/* A hairline gold rule under the italic word. A drawn, wobbly underline
   reads as playful; a tapered hairline reads as considered. */
.hero__title em::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: .02em;
  height: 1.5px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--gold) 16%,
      var(--gold) 84%,
      transparent 100%);
  opacity: .85;
  transform-origin: left;
  animation: hero-underline 1.1s var(--ease-out-expo) 900ms both;
  pointer-events: none;
}
@keyframes hero-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__sub {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 44ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); align-items: center; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.25rem;
  padding-top: var(--sp-s);
  margin-top: var(--sp-2xs);
  border-top: 1px solid var(--line);
}
.hero__proof .stat__num { font-size: var(--step-3); }
.hero__proof .stat__label { font-size: .6rem; }

/* Hero media: a stacked arch collage */
.hero__media { position: relative; }
.hero__frame-main {
  position: relative;
  border-radius: var(--r-arch);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  aspect-ratio: 4 / 5;
  background: var(--surface-sunk);
}
.hero__frame-main img,
.hero__frame-main svg { width: 100%; height: 100%; object-fit: cover; }
.hero__frame-sub {
  position: absolute;
  right: clamp(-.5rem, -1vw, -.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  width: clamp(8.5rem, 22%, 13rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 4px solid var(--bg);
  box-shadow: var(--shadow-l);
  background: var(--surface-sunk);
}
.hero__frame-sub img,
.hero__frame-sub svg { width: 100%; height: 100%; object-fit: cover; }
.hero__ring {
  position: absolute;
  left: clamp(-2.5rem, -5vw, -1.5rem);
  top: clamp(-1.5rem, -4vw, -1rem);
  width: clamp(6rem, 14vw, 9rem);
  color: var(--line-gold);
  opacity: .9;
}

/* Floating badge card over the hero media */
.hero__badge {
  position: absolute;
  left: clamp(-1rem, -2.5vw, -.5rem);
  bottom: 22%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-m);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-strong);
  white-space: nowrap;
}
.hero__badge .avatar { width: 2rem; height: 2rem; font-size: .7rem; }

/* Scroll cue */
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: var(--sp-m);
  font-size: var(--step--2);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
}
.hero__cue i {
  display: grid;
  place-items: center;
  width: 1.9rem; height: 2.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
}
.hero__cue i::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
  animation: cue-drop 1.9s var(--ease-in-out) infinite;
}
@keyframes cue-drop {
  0%   { transform: translateY(-.5rem); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(.55rem); opacity: 0; }
}

/* ==========================================================================
   HOME - CEREMONY RAIL
   ========================================================================== */
.ceremony {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 22rem;
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  border-radius: var(--r-l);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  background: var(--brand-plum-800);
}
.ceremony__art { position: absolute; inset: 0; z-index: -2; }
.ceremony__art img, .ceremony__art svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-xslow) var(--ease-out-expo);
}
.ceremony:hover .ceremony__art img,
.ceremony:hover .ceremony__art svg { transform: scale(1.08); }
.ceremony::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
}
.ceremony__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.ceremony__native {
  font-size: var(--step--2);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-marigold);
  font-weight: 700;
  margin-bottom: .4rem;
}
.ceremony__desc {
  font-size: var(--step--1);
  color: rgba(255,255,255,.76);
  margin-top: .5rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--dur-slow) var(--ease-out-expo), opacity var(--dur-slow) var(--ease-out-expo);
}
.ceremony:hover .ceremony__desc { max-height: 8rem; opacity: 1; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-portrait { position: relative; }
.about-portrait .plate__frame { aspect-ratio: 4 / 5; }
.about-sig {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-4);
  color: var(--accent);
  line-height: 1;
}
.values-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.credo {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.credo__item { padding-top: 1.25rem; border-top: 1px solid var(--line-gold); }
.credo__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--gold);
  display: block;
  margin-bottom: .4rem;
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc-row {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.svc-row:last-child { border-bottom: 0; }
.svc-row__index {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-gold);
}
.svc-row__list {
  display: grid;
  gap: .55rem .95rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.svc-row__list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.svc-row__list li::before {
  content: "";
  width: .42rem; height: .42rem;
  margin-top: .58em;
  flex: none;
  rotate: 45deg;
  background: var(--gold);
}

.pkg {
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  background: var(--surface);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo);
}
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); }
.pkg--featured {
  border-color: var(--line-gold);
  background: linear-gradient(180deg, var(--gold-soft), var(--surface) 42%);
  box-shadow: var(--shadow-m);
}
.pkg__flag {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  background: var(--gold-soft);
  border: 1px solid var(--line-gold);
  color: var(--gold);
  border-radius: var(--r-pill);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .34rem .85rem;
}
.pkg__name { font-family: var(--font-accent); font-size: var(--step-2); }
.pkg__price { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--ink-strong); }
.pkg__price small { font-family: var(--font-body); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); display: block; margin-top: .4rem; }
.pkg ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.pkg li { display: flex; gap: .6rem; font-size: var(--step--1); color: var(--ink-soft); }
.pkg li svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--gold); margin-top: .2rem; }

/* ==========================================================================
   PORTFOLIO + GALLERY
   ========================================================================== */
.masonry {
  columns: 1;
  column-gap: clamp(.75rem, 1.6vw, 1.25rem);
}
.masonry > * {
  break-inside: avoid;
  margin-bottom: clamp(.75rem, 1.6vw, 1.25rem);
}

.gal-item {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--surface-sunk);
  cursor: pointer;
  isolation: isolate;
}
.gal-item img, .gal-item svg {
  width: 100%; height: auto; display: block;
  transition: transform var(--dur-xslow) var(--ease-out-expo), filter var(--dur-slow) linear;
}
.gal-item:hover img, .gal-item:hover svg { transform: scale(1.05); }
.gal-item__cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 1rem .9rem;
  background: var(--scrim);
  color: #fff;
  font-size: var(--step--2);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out-quint), transform var(--dur-base) var(--ease-out-quint);
}
.gal-item:hover .gal-item__cap { opacity: 1; transform: translateY(0); }
.gal-item.is-hidden { display: none; }

.filter-count { font-size: var(--step--1); color: var(--ink-muted); text-align: center; }

/* Case-study hero strip */
.case-hero {
  position: relative;
  border-radius: clamp(var(--r-l), 3vw, 40px);
  overflow: hidden;
  min-height: clamp(20rem, 52vh, 34rem);
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: #fff;
  isolation: isolate;
}
.case-hero__art { position: absolute; inset: 0; z-index: -2; }
.case-hero__art img, .case-hero__art svg { width: 100%; height: 100%; object-fit: cover; }
.case-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.step-track {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out-expo), border-color var(--dur-slow) var(--ease-out-expo);
}
.step:hover { transform: translateY(-6px); border-color: var(--line-gold); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: .4rem; right: .9rem;
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  pointer-events: none;
}
.step h3 { font-family: var(--font-accent); font-size: var(--step-1); margin-bottom: .5rem; }
.step p { font-size: var(--step--1); color: var(--ink-soft); }

/* Sticky scroll story */
.story { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.story__panels { display: flex; flex-direction: column; gap: clamp(3rem, 12vh, 8rem); }
.story__panel { min-height: 30vh; }
.story__panel h3 { font-size: var(--step-3); margin-bottom: .75rem; }
.story__visual { position: relative; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.faq-groups { display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 3.5rem); }
.faq-group__title {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-card {
  padding: clamp(1.6rem, 3.4vw, 2.75rem);
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-m);
}
.contact-aside { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.25rem); }
.map-frame {
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  aspect-ratio: 16 / 11;
  position: relative;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: saturate(.85); }
[data-theme="dark"] .map-frame iframe { filter: invert(.92) hue-rotate(180deg) saturate(.7) brightness(.92); }

.hours { display: flex; flex-direction: column; gap: .55rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step--1); padding-bottom: .5rem; border-bottom: 1px dashed var(--line); }
.hours dt { color: var(--ink-soft); }
.hours dd { margin: 0; color: var(--ink-strong); font-weight: 600; }

/* ==========================================================================
   JOURNAL
   ========================================================================== */
.post-card { display: flex; flex-direction: column; }
.post-card__media { overflow: hidden; }
.post-card__media img, .post-card__media svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-xslow) var(--ease-out-expo);
}
.post-card:hover .post-card__media img,
.post-card:hover .post-card__media svg { transform: scale(1.06); }
.post-card__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--step--2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.post-card__meta .dot { width: .25rem; height: .25rem; border-radius: 50%; background: currentColor; }

.post-featured {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: clamp(var(--r-l), 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
}

/* ==========================================================================
   404
   ========================================================================== */
.nf {
  min-height: 76svh;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  isolation: isolate;
}
.nf__code {
  font-family: var(--font-display);
  font-size: clamp(7rem, 26vw, 20rem);
  line-height: .82;
  font-weight: 300;
  letter-spacing: -0.05em;
}

/* ==========================================================================
   PAGE-LEVEL BREAKPOINTS
   ========================================================================== */
@media (min-width: 640px) {
  .masonry { columns: 2; }
}
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .svc-row { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr); }
  .contact-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
  .faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
  .post-featured { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .masonry { columns: 3; }
}