/* ==========================================================================
   Kuber Esthana LLP — Homepage
   ========================================================================== */

/* Shared media placeholder ---------------------------------------------------
   Real photography will replace these. Kept visually distinct (icon + label)
   so it's obvious during development what still needs a real asset. */

.media-placeholder {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background:
    repeating-linear-gradient(135deg, rgba(20, 33, 61, 0.1) 0 6px, transparent 6px 14px),
    var(--color-background-alt);
}

.media-placeholder__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 25%;
  min-width: 32px;
  min-height: 32px;
  max-width: 64px;
  max-height: 64px;
  opacity: 0.5;
  color: var(--color-text-muted);
}

.media-placeholder__icon svg {
  width: 100%;
  height: 100%;
}

.media-placeholder__label {
  position: relative;
  margin: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.media-placeholder--green {
  background:
    repeating-linear-gradient(135deg, rgba(46, 91, 67, 0.16) 0 6px, transparent 6px 14px),
    var(--color-background-alt);
}

.media-placeholder--gold {
  background:
    repeating-linear-gradient(135deg, rgba(198, 154, 60, 0.2) 0 6px, transparent 6px 14px),
    var(--color-background-alt);
}

/* Reusable link-arrow --------------------------------------------------------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.link-arrow svg {
  width: 0.9em;
  height: 0.9em;
  transition: transform 0.15s ease;
}

a:hover .link-arrow svg {
  transform: translateX(3px);
}

/* Hero ------------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0 6rem;
  background: var(--color-background);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.hero__rule {
  width: 56px;
  height: 1px;
  background: var(--color-gold-mid);
}

.hero__content h1 {
  max-width: 900px;
  font-weight: 300;
}

.hero__content .text-gold {
  color: var(--color-gold);
}

.hero__content p {
  max-width: 56ch;
  font-size: 1.15rem;
  line-height: 1.85;
}

/* Full-bleed photo hero (project detail pages) -------------------------------- */

.hero--photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  padding: var(--space-2xl) 0;
  text-align: center;
}

.hero--home {
  background:
    radial-gradient(60% 65% at 50% 48%, rgba(11, 20, 36, 0.4), transparent 72%),
    linear-gradient(rgba(11, 20, 36, 0.48), rgba(11, 20, 36, 0.56));
}

/* Fixed backdrop (homepage only): the hero photo stays pinned to the
   viewport while the Home panel's sections scroll over it as increasingly
   dark translucent tints, until the solid navy footer. See body.has-fixed-hero. */

body.has-fixed-hero {
  background: url('../assets/images/hero/homepage-hero.jpg') center / cover fixed no-repeat;
  background-color: var(--color-navy-deep);
}

/* `background-attachment: fixed` is unreliable on phones: iOS sizes a fixed
   background against the document, not the viewport, so `cover` blows the photo
   up into a huge zoomed crop, and Android Chrome often ignores it outright.
   Drop the fixed backdrop on small screens and give the hero its own scrolling
   copy of the photo, so the top of the page still shows the house.
   Everything below then sits on flat --color-navy-deep — which is what the
   panels' own rgba(11,20,36,x) tints already resolve to, so nothing bands. */
@media (max-width: 900px) {
  body.has-fixed-hero {
    background-image: none;
  }

  .hero--home {
    background:
      radial-gradient(60% 65% at 50% 48%, rgba(11, 20, 36, 0.4), transparent 72%),
      linear-gradient(rgba(11, 20, 36, 0.48), rgba(11, 20, 36, 0.56)),
      url('../assets/images/hero/homepage-hero.jpg') center / cover no-repeat;
  }
}

/* GradientWaves canvas (js/gradient-waves.js): hidden while the Home hero
   photo is on screen, crossfades in once you scroll past it or switch to
   any other tab. */

.gradient-waves-bg {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.gradient-waves-bg.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gradient-waves-bg {
    transition: none;
  }
}

/* Starts at exactly the alpha .hero--home's overlay ends on (0.56) so there is
   no visible seam under the hero, then ramps to the 0.72 every panel below
   uses -- so the bottom edge matches the About panel just as cleanly. */
.has-fixed-hero .stats {
  background: linear-gradient(
    to bottom,
    rgba(11, 20, 36, 0.56) 0,
    rgba(11, 20, 36, 0.72) 22%,
    rgba(11, 20, 36, 0.72) 100%
  );
}

/* Same glass treatment the .info-card gets on a dark panel, so the figures
   read as the same family of card as every other grid on the site. */
.has-fixed-hero .stat {
  background: rgba(251, 250, 247, 0.06);
  border-color: var(--color-border-on-dark);
}

.has-fixed-hero .stats h2,
.has-fixed-hero .stat strong,
.has-fixed-hero .stats__delivered li {
  color: var(--color-text-on-dark);
}

.has-fixed-hero .stat span,
.has-fixed-hero .stats__delivered-more {
  color: var(--color-text-muted-on-dark);
}

.has-fixed-hero .stats .grid-heading,
.has-fixed-hero .stats__delivered {
  border-color: var(--color-border-on-dark);
}

.has-fixed-hero .process,
.has-fixed-hero #testimonials {
  background: rgba(11, 20, 36, 0.72);
}

/* Every non-Home panel: translucent glass over the GradientWaves canvas
   (see js/gradient-waves.js) instead of each panel's normal opaque
   background. Every panel's root <section> carries its own [data-page]
   attribute directly, so this one selector covers About/Businesses/
   Projects/Founders/Partners/Contact at once. */

.has-fixed-hero [data-page]:not([data-page="home"]) {
  background: rgba(11, 20, 36, 0.72);
  color: var(--color-text-on-dark);
}

.has-fixed-hero [data-page]:not([data-page="home"]) h1,
.has-fixed-hero [data-page]:not([data-page="home"]) h2,
.has-fixed-hero [data-page]:not([data-page="home"]) h3 {
  color: var(--color-text-on-dark);
}

.has-fixed-hero [data-page]:not([data-page="home"]) p {
  color: var(--color-text-muted-on-dark);
}

.has-fixed-hero [data-page]:not([data-page="home"]) .grid-heading,
.has-fixed-hero [data-page]:not([data-page="home"]) .grid-heading__index {
  border-color: var(--color-border-on-dark);
  color: var(--color-text-muted-on-dark);
}

.has-fixed-hero [data-page]:not([data-page="home"]) .info-card:not(.info-card--dark),
.has-fixed-hero [data-page]:not([data-page="home"]) .project-card,
.has-fixed-hero [data-page]:not([data-page="home"]) .values-list li,
.has-fixed-hero [data-page]:not([data-page="home"]) .media-placeholder {
  background: rgba(251, 250, 247, 0.06);
  border-color: var(--color-border-on-dark);
}

.has-fixed-hero [data-page]:not([data-page="home"]) .founder-grid,
.has-fixed-hero [data-page]:not([data-page="home"]) .founder-card + .founder-card,
.has-fixed-hero [data-page]:not([data-page="home"]) .founder-card__media {
  border-color: var(--color-border-on-dark);
}

.has-fixed-hero [data-page]:not([data-page="home"]) .values-list li span,
.has-fixed-hero [data-page]:not([data-page="home"]) .media-placeholder__label,
.has-fixed-hero [data-page]:not([data-page="home"]) .media-placeholder__icon {
  color: var(--color-text-muted-on-dark);
}

/* The li itself keeps its light-theme --color-ink otherwise: the rules above
   only set the card background, never the text colour. */
.has-fixed-hero [data-page]:not([data-page="home"]) .values-list li {
  color: var(--color-text-on-dark);
}

.has-fixed-hero [data-page]:not([data-page="home"]) .about__content h2,
.has-fixed-hero [data-page]:not([data-page="home"]) .businesses__sectors {
  border-color: var(--color-border-on-dark);
}

.has-fixed-hero [data-page]:not([data-page="home"]) .project-rail-gauge {
  color: var(--color-text-muted-on-dark);
}

.has-fixed-hero [data-page]:not([data-page="home"]) .project-rail-gauge__track {
  background: var(--color-border-on-dark);
}

.hero--photo .hero__content {
  max-width: 900px;
  margin: 0 auto;
}

.hero--photo .hero__kicker {
  justify-content: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 4px 20px rgba(0, 0, 0, 0.5);
}

.hero--photo h1,
.hero--photo p {
  color: var(--color-text-on-dark);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 4px 28px rgba(0, 0, 0, 0.55);
}

.hero--photo h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}

.hero--photo p {
  margin-left: auto;
  margin-right: auto;
  max-width: 52ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.hero--photo .cta-row,
.hero--photo .meta-row {
  justify-content: center;
}

@media (max-width: 640px) {
  .hero--photo {
    min-height: 68vh;
  }
}

.hero__media {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 */
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__media:hover img {
  transform: scale(1.03);
}

/* Businesses -------------------------------------------------------------------- */

/* Heading left, copy right — the single-column version left the right half of
   the panel empty at desktop width. */
.businesses__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
}

.businesses__intro .display-heading {
  margin-bottom: 0;
}

.businesses__intro p {
  font-size: 1.05rem;
  line-height: 1.85;
  margin-bottom: var(--space-md);
}

.businesses__intro p:last-child {
  margin-bottom: 0;
}

/* Compound selector so it outranks the .businesses__intro p size above. */
.businesses__intro .businesses__lede {
  font-size: 1.2rem;
  color: var(--color-ink);
}

.has-fixed-hero [data-page]:not([data-page="home"]) .businesses__lede {
  color: var(--color-text-on-dark);
}

@media (max-width: 860px) {
  .businesses__intro {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Last block in the section now, so no trailing margin — the section's own
   bottom padding does the spacing. */
.businesses__sectors {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.businesses__sectors .eyebrow {
  margin-bottom: var(--space-md);
}

/* Stats bar ----------------------------------------------------------------------- */

.stats {
  background: transparent;
  padding: var(--space-2xl) 0;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-md);
}

.stat {
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.stat strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 2.9rem;
  color: var(--color-ink);
  line-height: 1;
}

.stat span {
  display: block;
  margin-top: 0.75em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stats__delivered {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.stats__delivered ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats__delivered li {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-ink);
}

.stats__delivered-more {
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--color-text-muted);
}

/* About ------------------------------------------------------------------------------ */

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.about__media {
  min-height: 440px;
}

/* Hairline under the heading, matching the section rule above it. */
.about__content h2 {
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.about__content p:last-child {
  margin-bottom: 0;
}

.about__founders {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.values-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.values-list li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
  font-size: 1rem;
  font-family: var(--font-heading);
  color: var(--color-ink);
}

.values-list li span {
  display: block;
  margin-top: 0.4em;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__media {
    min-height: 260px;
  }
}

/* Projects ------------------------------------------------------------------------------ */

.project-grid {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--space-md);
  counter-reset: project;
  scroll-snap-type: inline proximity;
  scroll-timeline: --projects-rail inline;
  scroll-padding-left: var(--space-md);
  padding: 0.25rem 0.25rem var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) transparent;
  mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
}

.project-grid::-webkit-scrollbar {
  height: 4px;
}

.project-grid::-webkit-scrollbar-track {
  background: transparent;
}

.project-grid::-webkit-scrollbar-thumb {
  background: var(--color-gold);
}

.project-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  counter-increment: project;
  flex: 0 0 clamp(240px, 42vw, 300px);
  scroll-snap-align: start;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.project-card__media {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 */
  overflow: hidden;
}

.project-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-card__media img {
  transform: scale(1.05);
}

.project-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.project-card__body::before {
  content: counter(project, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--color-gold);
}

.project-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0;
}

.project-card p {
  font-size: 0.85rem;
  margin-bottom: 0.4em;
}

.project-rail-gauge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.project-rail-gauge__track {
  flex: 1;
  height: 2px;
  background: var(--color-border);
}

.project-rail-gauge__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0.25); /* static fallback: hints "1 of 4" before any scroll */
  background: var(--color-gold);
}

@keyframes project-rail-fill {
  from { transform: scaleX(0.02); }
  to { transform: scaleX(1); }
}

@supports (animation-timeline: scroll()) {
  .project-rail-gauge__fill {
    animation: project-rail-fill linear both;
    animation-timeline: --projects-rail;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-rail-gauge__fill {
    animation: none;
    transform: scaleX(0.25);
  }
}

.projects__cta {
  text-align: center;
  margin-top: var(--space-xl);
}

/* Testimonials ------------------------------------------------------------------------------ */

.testimonial-carousel {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.testimonial-carousel__track {
  position: relative;
  min-height: 13rem;
}

.testimonial-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.testimonial-slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.testimonial-slide p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-md);
}

.testimonial-slide footer {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--color-gold);
}

.testimonial-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.testimonial-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-border-on-dark);
  color: var(--color-text-muted-on-dark);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.testimonial-carousel__arrow:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.testimonial-carousel__index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--color-text-muted-on-dark);
}

.testimonial-carousel__index strong {
  color: var(--color-gold-pale);
  font-weight: 500;
}

/* Founders ------------------------------------------------------------------------------ */

/* Both founders sit in one bordered box split by a hairline, rather than as
   two free-standing cards. */
.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--color-border);
}

.founder-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  text-align: left;
  padding: var(--space-lg);
}

.founder-card + .founder-card {
  border-left: 1px solid var(--color-border);
}

.founder-card__media {
  position: relative;
  flex: 0 0 118px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* Portraits are pre-cropped to 3:4, so cover only absorbs sub-pixel rounding. */
.founder-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.founder-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45em;
}

@media (max-width: 760px) {
  .founder-grid {
    grid-template-columns: 1fr;
  }

  .founder-card + .founder-card {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

.founder-card h3 {
  font-size: 1.45rem;
  margin-bottom: 0;
}

.founder-card__role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.founder-card p {
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.75;
}


/* Channel partners ------------------------------------------------------------------------ */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.partner-grid .info-card {
  padding: var(--space-md);
}

.partner-grid .info-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.3em;
}