@font-face {
  font-family: "Rajdhani";
  src: url("rajdhani.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("geist.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("geist-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --paper: #100e0b;
  --surface: #171410;
  --ink: #fff6e6;
  --muted: #e0d5c3;
  --line: #373025;
  --accent: #edaa65;
  --company-tint: #13110e;
  --masthead: #0d0b09;
  --masthead-ink: var(--ink);
  --masthead-muted: var(--muted);
  --masthead-line: var(--line);
  --highlight: #edaa65;
  --pom-orange: #d9923f;
  --display: "Rajdhani", "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
}

main { flex: 1; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
a { color: inherit; text-underline-offset: .22em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

.wrap {
  width: min(100% - clamp(36px, 9vw, 128px), 1140px);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  z-index: 2;
  inset: .5rem auto auto .5rem;
  padding: .65rem 1rem;
  background: var(--surface);
  color: var(--ink);
  transform: translateY(-160%);
}

.skip-link:focus { transform: none; }

.site-header {
  background: var(--masthead);
  color: var(--masthead-ink);
  border-bottom: 1px solid var(--masthead-line);
}

.site-header :focus-visible { outline-color: var(--highlight); }

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}

.site-nav, .footer-nav {
  display: flex;
  gap: clamp(.95rem, 3.4vw, 2.35rem);
  align-items: center;
}

.site-nav { min-height: 64px; color: var(--masthead-muted); }
.site-nav a:first-child { margin-right: auto; }

.site-nav a, .footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 560;
  font-size: .89rem;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover, .site-nav [aria-current] {
  color: var(--masthead-ink);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: .4em;
}

.home .site-nav { min-height: 68px; }
.home .nav-investor {
  gap: .65rem;
  min-height: 40px;
  padding-inline: .85rem;
  color: var(--highlight);
  border: 1px solid #84502d;
  border-radius: 6px;
}

.nav-investor span { font-family: var(--mono); }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 620;
  letter-spacing: -.042em;
  line-height: 1.05;
}

h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }

.hero {
  background: var(--masthead);
  color: var(--masthead-ink);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(4.25rem, 8vw, 7.25rem);
}

.hero-copy { container-type: inline-size; }

.eyebrow {
  color: var(--accent);
  font: 550 .72rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.hero h1 {
  display: grid;
  justify-items: start;
  gap: .012em;
  font-size: clamp(2.7rem, 8.35vw, 7.4rem);
  font-size: min(clamp(2.7rem, 8.35vw, 7.4rem), 19cqi);
  line-height: 1;
  font-kerning: none;
  letter-spacing: normal;
}

.hero h1 > span {
  display: block;
  white-space: nowrap;
}

#hero-heading > span {
  font: 700 1em/.84 var(--display);
  letter-spacing: .014em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: -.038em 0 #934176, .038em 0 #458781;
}

@media (prefers-reduced-motion: no-preference) {
  #hero-heading > span {
    animation: headline-shadow-shift 10s ease-in-out 2s infinite;
  }
}

@keyframes headline-shadow-shift {
  0%, 25%, 100% {
    text-shadow: -.038em 0 #934176, .038em 0 #458781;
  }
  12.5% {
    text-shadow: -.052em .012em #934176, .049em -.009em #458781;
  }
}

.lead {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.65vw, 1.19rem);
  color: var(--muted);
}

.hero-intro {
  max-width: 43ch;
  margin-top: clamp(1.4rem, 3vw, 2.25rem);
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  color: var(--masthead-muted);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1.45rem;
  margin-top: 1.7rem;
}

.hero-actions .text-action { color: var(--masthead-ink); }
.hero-actions .text-action:hover { color: var(--highlight); }
.hero :focus-visible, .investor-section :focus-visible { outline-color: var(--highlight); }

.booking-preview {
  padding: clamp(1rem, 2.3vw, 1.65rem);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: #fff6e6;
}

.booking-preview-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  color: var(--muted);
  font: 530 .72rem/1.4 var(--mono);
}

.booking-preview-meta p:first-child { font-weight: 690; }

.booking-preview h2 {
  margin: .85rem 0 1.1rem;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.booking-appointments {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.booking-appointments li {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  min-height: 48px;
  padding-block: .45rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  font-weight: 560;
  line-height: 1.35;
}

.booking-appointments time {
  color: var(--muted);
  font: 550 .68rem/1.35 var(--mono);
}

.appointment-status {
  color: #edaa65;
  font-size: .76rem;
  font-weight: 610;
}

.booking-preview-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  margin-block: .4rem -.35rem;
  color: #f1b57b;
  font-size: .875rem;
  font-weight: 650;
  text-decoration: none;
}

.booking-preview-link:hover { color: #fff6e6; text-decoration: underline; }
.booking-preview-link:focus-visible { outline-color: #edaa65; outline-offset: 2px; }

.section-rule { border-top: 1px solid var(--line); }
.section-space { padding-block: clamp(3rem, 6.2vw, 5.7rem); }

.flagship, .company {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 6rem);
}

.flagship .eyebrow, .company .eyebrow { margin-bottom: .85rem; }
.flagship-heading { display: flex; align-items: center; gap: clamp(.75rem, 1.4vw, 1.15rem); }
.flagship-heading .product-icon { width: clamp(44px, 4.5vw, 56px); height: auto; }
.flagship h2 { font-size: clamp(2.25rem, 4.75vw, 4.15rem); }
.flagship .lead { max-width: 32ch; margin-bottom: .6rem; }

.flagship-progress {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
}

.flagship-progress article { padding: clamp(1.25rem, 2.75vw, 2rem); }
.flagship-progress article + article { border-top: 1px solid var(--line); }
.flagship-progress h3 { font-size: clamp(1.2rem, 2.4vw, 1.65rem); margin: .5rem 0; }
.flagship-progress article > p:not(.status), .company-copy { color: var(--muted); }
.flagship-progress .status { margin: 0; }
.flagship-progress .text-action { margin-top: .25rem; }

.company-section { background: var(--company-tint); }
.company h2 { max-width: 14ch; }
.company-copy { font-size: clamp(1rem, 1.55vw, 1.13rem); }
.company-copy p + p { margin-top: 1.05rem; }
.company-copy .text-action { margin-top: .3rem; }

.portfolio-heading, .investor-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .7rem 2rem;
}

.portfolio-heading { margin-bottom: 1.45rem; }

.portfolio-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.portfolio-list li { border-bottom: 1px solid var(--line); }

.portfolio-list a {
  display: grid;
  align-items: center;
  grid-template-columns: 54px minmax(0, 1fr) auto 20px;
  gap: 1rem 1.35rem;
  padding-block: 1.1rem;
  text-decoration: none;
}

.portfolio-list a:hover strong { text-decoration: underline; }
.portfolio-list .product-icon { width: 54px; height: 54px; border-radius: 12px; }
.portfolio-item { display: grid; gap: .22rem; }
.portfolio-item strong { font-size: 1.14rem; font-weight: 620; line-height: 1.2; }
.portfolio-item > span, .portfolio-status { color: var(--muted); font-size: .87rem; }
.portfolio-status { font-size: .8rem; }
.portfolio-arrow { color: var(--accent); font-family: var(--mono); text-align: right; }

.investor-section { background: var(--company-tint); color: var(--masthead-ink); }
.investor-contact p { margin-top: .7rem; color: var(--masthead-muted); }
.app-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  grid-column: span 2;
  min-width: 0;
  min-height: 192px;
  padding: clamp(1rem, 2.35vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.app-card--wide { grid-column: span 3; }

.card-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.card-heading :is(h2, h3) {
  font-size: clamp(1.23rem, 2.1vw, 1.55rem);
  letter-spacing: -.036em;
  text-wrap: balance;
}

.app-card--wide .card-heading :is(h2, h3) { font-size: clamp(1.4rem, 2.45vw, 1.9rem); }
.card-heading a { text-decoration: none; }
.card-heading a:hover { text-decoration: underline; }

.status {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .45rem;
  color: var(--muted);
  font: 540 .78rem/1.4 var(--sans);
}

.status::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.status--live { color: var(--ink); }
.app-card p:not(.status) { max-width: 29rem; color: var(--muted); font-size: .94rem; }
.product-icon { width: 62px; height: 62px; flex: 0 0 auto; border-radius: 15px; }

.text-action, .app-links a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: .45em;
  min-height: 44px;
  color: var(--accent);
  font-size: .9rem;
  font-weight: 650;
}

.text-action:hover { color: var(--ink); }

.text-action span, .app-links span, .button span, .resources a span {
  font: 500 1em/1 var(--mono);
}

.app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: .1rem;
}

.app-links a { color: var(--accent); }
.app-links a:hover { color: var(--ink); }

.button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  width: fit-content;
  min-height: 48px;
  padding: .55rem 1rem;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}

.button:hover { background: var(--paper); color: var(--accent); }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { padding-block: .8rem; }
.site-footer p { font-size: .85rem; }

.page-content { padding-block: clamp(3rem, 7vw, 5.9rem); }
.page-content > h1, .app-heading h1 { font-size: clamp(2.15rem, 5.4vw, 4.65rem); }
.page-content > .lead + .app-grid { margin-top: 2.1rem; }
.back-link { margin-bottom: 1.55rem; }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
}

.app-heading { display: flex; align-items: center; gap: 1rem; }
.app-heading h1 { text-wrap: balance; }
.app-heading .product-icon { width: clamp(51px, 7vw, 76px); height: auto; }
.app-detail .status { margin-bottom: .4rem; }
.app-detail .app-heading + .status { margin-top: 1.05rem; }
.app-detail .button { margin-top: 1.6rem; }
.owner-note { margin-top: 1.2rem; color: var(--muted); font-size: .92rem; }
.owner-note a { font-weight: 620; }

.resources {
  padding: 1.4rem 1.55rem .85rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
}

.resources h2 { margin-bottom: .65rem; font-size: 1.6rem; }
.resources ul { list-style: none; padding: 0; margin: 0; }
.resources li + li { border-top: 1px solid var(--line); }

.resources a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  font-weight: 620;
  text-decoration: none;
}

.resources a:hover { text-decoration: underline; }

.narrow { max-width: 42rem; }
.prose { display: grid; gap: 1rem; margin-top: 1.55rem; color: var(--muted); }
.prose a { font-weight: 650; }
.page-content > .button { margin-top: 1.5rem; }
.page-content > .lead { margin-bottom: 1rem; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: min(clamp(2.7rem, 12.6vw, 6rem), 19cqi); }
  .booking-preview { width: min(100%, 33rem); }
}

@media (max-width: 780px) {
  .flagship, .company { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-card, .app-card--wide { grid-column: auto; }
  .detail-grid { grid-template-columns: 1fr; }
  .resources { max-width: 36rem; }
}

@media (max-width: 530px) {
  .site-nav { gap: 1.15rem; }
  .home .site-nav { gap: .7rem; min-height: 60px; }
  .home .site-nav a { font-size: .79rem; }
  .home .nav-investor { padding-inline: .45rem; gap: .2rem; }
  .nav-investor span { display: none; }
  .hero-inner { padding-block: 3.15rem; }
  .portfolio-list a { grid-template-columns: 46px minmax(0, 1fr) 16px; column-gap: .8rem; row-gap: .3rem; }
  .portfolio-list .product-icon { width: 46px; height: 46px; grid-row: span 2; }
  .portfolio-status { grid-column: 2; grid-row: 2; }
  .portfolio-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .investor-contact .button { margin-top: .55rem; }
  .app-grid { grid-template-columns: 1fr; }
  .app-card { gap: .75rem; min-height: auto; }
  .product-icon { width: 53px; height: 53px; border-radius: 12px; }
  .footer-inner { flex-wrap: wrap; gap: .1rem 1.1rem; }
  .resources { padding-inline: 1rem; }
}

@media (max-width: 360px) {
  .home .site-nav { gap: .5rem; }
  .home .site-nav a { font-size: .72rem; }
  .booking-appointments li { grid-template-columns: 3.6rem minmax(0, 1fr) auto; }
}

.home {
  --paper: #211e17;
  --masthead: var(--paper);
  --company-tint: var(--paper);
  --surface: #282419;
  --line: #423a2c;
}

.home .wrap {
  width: min(100% - clamp(36px, 9vw, 136px), 1320px);
}

.site-nav .brand-link {
  gap: .72rem;
  color: var(--masthead-ink);
  font-weight: 650;
  letter-spacing: -.02em;
  text-decoration: none;
}

.home .brand-link > span { text-transform: uppercase; }

.brand-investments {
  font-family: var(--display);
  font-size: 1.18em;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--highlight);
  --investments-glow:
    0 0 5px rgb(237 170 101 / .65),
    0 0 13px rgb(217 146 63 / .8),
    0 0 24px rgb(206 86 32 / .55);
  text-shadow: var(--investments-glow);
}

.brand-link:hover .brand-investments {
  color: var(--masthead-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .brand-investments {
    animation: investments-glow-flicker 14s steps(1, end) 5s infinite;
  }
}

@keyframes investments-glow-flicker {
  0%, 2.2%, 100% {
    text-shadow: var(--investments-glow);
  }
  1%, 1.9% {
    text-shadow: -1px 0 rgb(237 170 101 / .65), 1px 0 rgb(206 86 32 / .7);
  }
  1.4% {
    text-shadow: 1px 0 rgb(237 170 101 / .8), 0 0 9px rgb(217 146 63 / .6);
  }
}

.brand-link img {
  flex: none;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 92%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 92%, transparent 100%);
}

.hero-inner {
  padding-block: clamp(5rem, 11vw, 10.5rem);
}

.booking-preview {
  padding: clamp(1.25rem, 3vw, 2.2rem);
  border-radius: 16px;
  box-shadow: inset 0 1px rgb(255 255 255 / .1), 0 24px 64px rgb(0 0 0 / .45);
}

.booking-preview-meta p:first-child { color: var(--pom-orange); }

.booking-preview-link { border-radius: 4px; }

.hero .button, .investor-section .button {
  background: var(--highlight);
  color: var(--masthead);
  border-color: var(--highlight);
  box-shadow: 0 0 23px rgb(217 146 63 / .29);
}

.hero .button:hover, .investor-section .button:hover {
  background: var(--masthead-ink);
  border-color: var(--masthead-ink);
}

.flagship-section {
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.investor-section {
  border-top: 1px solid var(--line);
}

@media (max-width: 530px) {
  .home .site-nav {
    flex-wrap: wrap;
    padding-block: .5rem;
  }
  .site-nav .brand-link { flex-basis: 100%; }
  .brand-link img { width: 34px; height: 34px; }
  .hero-inner { padding-block: 4.25rem; }
}
