:root {
  --site-header-height: 88px;
}

body[data-page="company"] {
  --hero-paper: #f3e4ce;
  background: linear-gradient(var(--hero-paper) 100svh, var(--surface-0) 0);
}

body[data-page="company"] .site-header {
  padding-inline: max(20px, 6%, env(safe-area-inset-left), env(safe-area-inset-right));
  background-color: color-mix(in srgb, var(--hero-paper) 88%, transparent);
}

body[data-page="company"] .site-header[data-hero-top]:not(:has(.site-nav.open)) {
  background-color: transparent;
  backdrop-filter: none;
}

body[data-page="company"] .site-header .nav-toggle {
  margin-inline-start: auto;
}

@media (min-width: 1101px) {
  body[data-page="company"] .site-header .site-nav {
    margin-inline: auto 0;
  }

  body[data-page="company"] .site-header .site-nav > a {
    font-size: clamp(14px, 1.12vw, 19px);
  }
}

.hero-stage {
  position: relative;
}

.hero-stage::before {
  position: absolute;
  inset: calc(-1 * var(--site-header-height)) 0 0;
  background: linear-gradient(transparent calc(100% - 24px), var(--surface-0)),
    radial-gradient(ellipse at 50% 41%, #fbefdc, var(--hero-paper) 68%, #e9cfaa);
  pointer-events: none;
  content: "";
}

/* Golden-hour clouds drift behind the landscape; hero-clouds.js paints them. */
.hero-clouds {
  position: absolute;
  top: calc(-1 * var(--site-header-height));
  left: 0;
  display: block;
  width: 100%;
  height: calc(100% + var(--site-header-height));
  opacity: 0;
  pointer-events: none;
  mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
  transition: opacity 1.2s ease-out;
}

.hero-clouds[data-ready] { opacity: 1; }

/* Now and then a flock flies away into the far sky in 3D; hero-birds.js flies them. */
.hero-birds {
  position: absolute;
  inset: calc(-1 * var(--site-header-height)) 0 0;
  overflow: clip;
  pointer-events: none;
  perspective: 900px;
}
.hero-bird { position: absolute; top: 0; left: 0; will-change: transform, opacity; }
.hero-bird svg { display: block; overflow: visible; fill: #3d2219; }
/* Wing beats fold each wing below the body line, so it reads as an up and down stroke,
   then the bird glides with its wings level. */
.hero-bird .bird-wing {
  animation: bird-flap var(--flap, 1.1s) var(--flap-delay, 0s) infinite;
  transform-origin: 20px 10px;
}
@keyframes bird-flap {
  0%, 30%, 60% { transform: scaleY(1); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  15%, 45% { transform: scaleY(-.75) scaleX(.94); animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  72%, 100% { transform: scaleY(.45); }
}

.hampi-art {
  position: absolute;
  inset: calc(-1 * var(--site-header-height)) 0 0;
  overflow: clip;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
  pointer-events: none;
}

.hampi-art picture { display: contents; }

.hero-landscape {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center bottom;
}

.company-hero {
  position: relative;
  min-height: calc(100svh - var(--site-header-height));
  justify-content: flex-start;
  padding: clamp(80px, calc(28.7svh - var(--site-header-height) - 12px), 220px)
    var(--company-gutter) clamp(36px, 9svh, 100px);
  background: transparent;
  color: #32190f;
}

.company-signature {
  gap: clamp(24px, 5svh, 48px);
}

.hero-script {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 30px);
  margin: 0;
  color: #4a291b;
  font: 400 clamp(17px, 1.3vw, 22px)/1.05 var(--font-devanagari);
}

/* Side lines end in a diamond next to the name, like a jewelled pin. */
.hero-script::before,
.hero-script::after {
  width: clamp(34px, 4.2vw, 70px);
  height: 9px;
  background: linear-gradient(90deg, transparent, #dd5815 70%, #b9601c);
  clip-path: polygon(0 calc(50% - .6px), calc(100% - 9px) calc(50% - .6px), calc(100% - 4.5px) 0, 100% 50%, calc(100% - 4.5px) 100%, calc(100% - 9px) calc(50% + .6px), 0 calc(50% + .6px));
  content: "";
}

.hero-script::after {
  scale: -1 1;
}

.company-hero h1 {
  --hero-wordmark-height: clamp(52px, min(6.5vw, 10svh), 108px);
  width: min(calc(var(--hero-wordmark-height) * 4.62), 84vw);
  height: var(--hero-wordmark-height);
  margin: 0;
  overflow: hidden;
  color: transparent;
  background: var(--earth);
  mask: url("assets/anantam-wordmark.39644e012809.webp") center / contain no-repeat;
}

/* Upperline: a coded temple toran over the name. A lotus under a beaded arch with a diya
   flame, a beaded rule, a scalloped garland of leaves and scroll ends. It opens from the lotus once. */
.hero-upperline {
  display: block;
  width: clamp(min(330px, 88vw), 38vw, 620px);
  max-width: 92vw;
  height: auto;
  margin-bottom: calc(clamp(24px, 5svh, 48px) * -.45);
  overflow: visible;
  animation: upperline-open 1.4s cubic-bezier(.23, 1, .32, 1) .2s both;
}
@keyframes upperline-open {
  from { clip-path: inset(0 46% 0 46%); opacity: .4; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-upperline { animation: none; }
}

.company-hero > .hero-tagline {
  margin: clamp(14px, 2.8svh, 28px) 0 clamp(28px, 7.6svh, 74px);
  color: #4f423b;
  font: 400 clamp(20px, 1.6vw, 27px)/1.45 var(--font-body);
}

.company-hero .hero-action {
  min-height: clamp(46px, 6.25svh, 59px);
  max-width: 100%;
  padding-inline: clamp(18px, 1.5vw, 25px);
  gap: 12px;
  border-radius: 14px;
  font-size: clamp(15px, 1.12vw, 18px);
  font-weight: 500;
  white-space: normal;
}

@media (max-width: 900px) {
  .hero-landscape { object-fit: cover; }
}

@media (max-width: 700px) {
  :root { --site-header-height: 78px; }

  .company-hero {
    padding-top: clamp(75px, 16.6svh, 138px);
  }

  .company-signature { gap: clamp(18px, 3svh, 26px); }
  .company-hero h1 { --hero-wordmark-height: clamp(54px, 16vw, 74px); }
  .company-hero > .hero-tagline { margin-bottom: 24px; }
}

@media (max-width: 700px) and (orientation: portrait) {
  .hampi-art {
    inset: 0;
    mask-image: linear-gradient(transparent 43%, #000 65%, #000 calc(100% - 24px), transparent);
  }

  .hero-landscape {
    position: absolute;
    inset: auto 0 0;
    height: 163dvh;
    /* The temple sits at 50.5% of the portrait image: this puts it on the centre line. */
    object-position: 50.7% bottom;
  }

  .company-hero {
    min-height: calc(100dvh - var(--site-header-height));
  }
}

@media (max-height: 600px) {
  .company-hero {
    padding-top: clamp(18px, 5svh, 35px);
    padding-bottom: 24px;
  }

  .company-signature { gap: 14px; }
  .company-hero h1 { --hero-wordmark-height: clamp(38px, 10svh, 66px); }
  .hero-upperline { width: 240px; }
  .company-hero > .hero-tagline { margin: 2px 0 14px; font-size: 18px; }
}

/* EMBERBench call to action: a live ember that spreads into fire on hover. */
.company-hero .ember-cta {
  min-height: 36px;
  gap: 8px;
  padding: 0 14px 0 17px;
  border-radius: var(--radius-control);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #6b4423;
  background: linear-gradient(180deg, #46321f, #2b1e16) var(--earth);
  color: var(--ivory);
  box-shadow: inset 0 1px 0 #ffffff1a, inset 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent), 0 10px 22px -12px #8c3f12b3;
}
.ember-cta-label { position: relative; letter-spacing: .01em; }
.ember-cta svg { position: relative; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ember-cta-fire {
  position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 120% at 18% 115%, #ffd27a 0%, transparent 55%),
    radial-gradient(90% 140% at 45% 120%, #f59a3a 0%, transparent 60%),
    linear-gradient(100deg, #e0672a 0%, #c2451b 45%, #8e2d12 100%);
  clip-path: circle(0 at 0 50%);
  transition: clip-path 720ms cubic-bezier(.2, .75, .25, 1);
}
.ember-cta-fire::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 22% 70%, #ffe7b0 99%, transparent),
    radial-gradient(1.5px 1.5px at 58% 80%, #ffd98c 99%, transparent),
    radial-gradient(2px 2px at 84% 75%, #fff0c8 99%, transparent),
    radial-gradient(60% 90% at 50% 130%, #ffbf5c66, transparent 70%);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .company-hero .ember-cta:hover .ember-cta-fire { clip-path: circle(160% at 0 50%); }
  .company-hero .ember-cta:hover .ember-cta-fire::after { animation: ember-sparks 1.4s ease-out infinite; }
  .company-hero .ember-cta:hover { border-color: #c2451b; box-shadow: inset 0 1px 0 #ffffff26, 0 12px 24px -10px #c2451bb3; }
  .company-hero .ember-cta:hover .ember-cta-label { text-shadow: 0 1px 2px #5a1c0a80; }
}
.company-hero .ember-cta:focus-visible .ember-cta-fire { clip-path: circle(160% at 0 50%); }
@keyframes ember-sparks {
  0% { opacity: 0; translate: 0 6px; }
  30% { opacity: 1; }
  100% { opacity: 0; translate: 0 -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .company-hero .ember-cta:hover .ember-cta-fire::after { animation: none; }
  .ember-cta-fire { transition: none; }
}

/* With the canvas burn, the fire sits fully under a burning skin while hovered. */
.company-hero .ember-cta.js-burn .ember-cta-fire,
.company-hero .ember-cta.js-burn:hover .ember-cta-fire { clip-path: none; opacity: 0; transition: none; }
.company-hero .ember-cta.js-burn.is-lit .ember-cta-fire { opacity: 1; transition: none; }
.ember-cta-skin { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.ember-cta-air { position: absolute; z-index: 30; pointer-events: none; }
.company-hero .ember-cta.js-burn:focus-visible .ember-cta-fire { opacity: 1; }