/* website/assets/styles.css
 *
 * AITHINK.CO.IN
 * Composition rebuilt 25 Sep 2026 against the owner's reference layout.
 *
 * ---------------------------------------------------------------------
 * THE TWO FAULTS THAT MADE THIS A REBUILD RATHER THAN A POLISH
 * ---------------------------------------------------------------------
 *
 * A SCREENSHOT IS NOT A PHOTOGRAPH, and the last version treated them
 * the same. `object-fit: cover` with a fixed aspect ratio is right for a
 * photograph -- nobody minds losing an inch of desk -- and catastrophic
 * for a user interface: it sliced the left edge off the Smart Queue
 * dashboard so the page showed "...s or doctors" and "...me, Kavitha
 * Ramesh". The product's own screenshot, cropped into nonsense, on the
 * page whose entire job is to prove the product exists.
 *
 *   .shot-*  never crops. Natural aspect, width 100%, height auto.
 *   .photo-* may crop. It is scenery.
 *
 * AND THE PAGE WAS STILL A COLUMN. 1460px centred on a 1920 monitor is
 * a quarter of the screen left blank down each side. The wrap is now
 * ~94vw up to 1680, which is the difference between a site that uses a
 * monitor and one that sits in the middle of it.
 */

:root {
  --navy: #16233A;
  --navy-deep: #0C1420;
  --gold: #D9A521;
  --gold-soft: #EBC46A;
  --gold-deep: #8A5E00;
  --ink: #171E29;
  --ink-muted: #596373;
  --line: #E2E0D8;
  --canvas: #F7F5F0;
  --surface: #FFFFFF;

  --on-navy: #F3F5F8;
  --on-navy-muted: #A3AEC0;
  --on-navy-line: rgba(255, 255, 255, 0.13);

  --wrap: 1680px;
  --gutter: clamp(24px, 3.6vw, 70px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
}
h1 { font-size: clamp(2.7rem, 4.6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.3vw, 3.3rem); }
h3 { font-size: 1.35rem; line-height: 1.25; }
.on-dark h1, .on-dark h2, .on-dark h3,
.hero h1, .hero h2, .hero h3 { color: #fff; }
.gold { color: var(--gold); }

p { margin: 0 0 1.05rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* THE GRID. ~94vw on a wide monitor, capped so a 27-inch screen does not
 * stretch a paragraph to forty words a line. */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin: 0 auto; padding: 0 var(--gutter);
}
.bleed { width: 100%; }

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .72rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 1.3rem;
}
.on-dark .eyebrow, .hero .eyebrow { color: var(--gold); }
.eyebrow::after {
  content: ''; height: 1px; width: 46px; background: currentColor; opacity: .5;
}

.lede { font-size: 1.08rem; color: var(--ink-muted); max-width: 46ch; }
.on-dark, .on-navy { background: var(--navy-deep); color: var(--on-navy); }
.on-dark .lede, .hero .lede { color: var(--on-navy-muted); }
.ivory { background: var(--surface); }

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 245, 240, .88);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 40px; height: 78px; }
.brand {
  display: flex; align-items: center; gap: 10px; margin-right: auto;
  font-family: 'DM Serif Display', 'Playfair Display', serif;
  font-size: 1.36rem; color: var(--navy);
}
.brand .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(217, 165, 33, .2);
}
.nav-links { display: flex; gap: 38px; align-items: center; }
.nav-links a:not(.btn) {
  position: relative; color: var(--ink-muted);
  font-size: .94rem; font-weight: 500; padding: 4px 0;
}
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .28s ease;
}
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn).active::after { width: 100%; }
.nav-links a:not(.btn):hover, .nav-links a:not(.btn).active { color: var(--navy); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 11px; cursor: pointer; color: inherit;
}

/* --------------------------------------------------------------- buttons */
/*
 * EVERY PRIMARY ACTION IS A BUTTON. The owner, on the last version:
 * "the current 'See the project ->' links look terrible ... do NOT use
 * isolated blue hyperlinks as primary CTAs." There is no such thing as a
 * primary text link on this site any more.
 */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 6px;
  font-size: .94rem; font-weight: 600; letter-spacing: .005em;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s ease, border-color .2s ease,
              color .2s ease, transform .2s ease;
}
.btn .arw { transition: transform .22s ease; }
.btn:hover .arw { transform: translateX(4px); }
.btn-gold { background: var(--gold); color: #1B1300; }
.btn-gold:hover { background: var(--gold-soft); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: #24354F; }
/* The ghost takes its colours from the surface it sits on. */
.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(23,30,41,.3); }
.btn-ghost:hover { border-color: var(--navy); background: rgba(23,30,41,.04); }
.on-dark .btn-ghost, .on-navy .btn-ghost, .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.on-dark .btn-ghost:hover, .on-navy .btn-ghost:hover, .hero .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.09); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; }

/* -------------------------------------------------------------- sections */

section { padding: clamp(76px, 8vw, 132px) 0; }

/* ------------------------------------------------------------------ hero */
/*
 * 40 / 60. Typography left, photograph right and larger -- the split the
 * reference layout uses, and the one that stops a hero reading as a
 * headline with a picture parked under it.
 */
.hero { background: var(--navy-deep); color: var(--on-navy); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(900px 600px at 82% -10%, rgba(47,95,224,.20), transparent 62%);
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 40fr 60fr;
  gap: clamp(32px, 4vw, 72px); align-items: center;
  min-height: clamp(560px, 66vh, 760px);
  padding: clamp(56px, 6vw, 92px) 0;
}
.hero h1 { max-width: 15ch; }

/* Facts, on a hairline. Not tiles. */
.figures {
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px);
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--on-navy-line);
}
.figures .n {
  font-family: 'DM Serif Display', 'Playfair Display', serif;
  font-size: 2.1rem; color: #fff; line-height: 1;
}
.figures .k {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-navy-muted); margin-top: .55rem; max-width: 16ch; line-height: 1.5;
}

/* ------------------------------------------------------------- imagery */
/*
 * TWO KINDS OF PICTURE, AND THEY ARE NOT INTERCHANGEABLE.
 */

/* SCENERY. May be cropped to fit a shape; losing an edge costs nothing. */
.photo-frame { position: relative; overflow: hidden; border-radius: 4px; height: 100%; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-frame.tall img { aspect-ratio: 4 / 3.4; }

/* A PRODUCT SCREENSHOT. NEVER cropped, never object-fit, never given an
 * aspect ratio. Whatever the image is, all of it is shown -- it is the
 * evidence. */
.shot {
  border-radius: 4px; overflow: hidden; background: var(--surface);
  border: 1px solid rgba(23,30,41,.09);
  box-shadow: 0 24px 60px rgba(12,20,32,.16), 0 3px 10px rgba(12,20,32,.06);
}
.on-dark .shot, .on-navy .shot {
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 34px 80px rgba(0,0,0,.5);
}
.shot img { width: 100%; height: auto; }
/* A phone screenshot is portrait; cap it so it does not tower. */
.shot-phone { max-width: 310px; border-radius: 14px; }

/* ------------------------------------------------------- product section */
/*
 * The flagship. Text ~38%, the real screenshot ~62%, and the screenshot
 * is allowed to be big because it is the argument.
 */
/* 34/66. The brief asks the flagship screenshot to hold 55-65% of the
 * section; at 38/62 plus the gap it landed at 54. */
.case { display: grid; grid-template-columns: 34fr 66fr; gap: clamp(32px, 4vw, 76px); align-items: center; }
.case.flip { grid-template-columns: 66fr 34fr; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2rem; }
.chip {
  font-size: .78rem; letter-spacing: .04em; color: var(--ink-muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 13px;
}
.on-dark .chip, .hero .chip { color: var(--on-navy-muted); border-color: var(--on-navy-line); }

/* ------------------------------------------------- cinematic full bleed */
/*
 * The salon spread: one photograph across the whole viewport with a navy
 * gradient laid over the reading side, so the type stays legible without
 * a box behind it.
 */
.cinema { position: relative; min-height: clamp(460px, 56vh, 660px); display: grid; align-items: center; }
.cinema > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
}
.cinema::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(96deg,
      rgba(12,20,32,.97) 0%, rgba(12,20,32,.94) 42%,
      rgba(12,20,32,.72) 58%, rgba(12,20,32,.28) 80%,
      rgba(12,20,32,.10) 100%);
}
.cinema-inner { position: relative; z-index: 2; padding: clamp(56px,7vw,96px) 0; }
.cinema-copy { max-width: 42ch; }

/*
 * The same spread, but carrying the product's own screenshot.
 *
 * The salon band can fade almost to nothing on the right because there is
 * only a photograph there. Here the right side holds the screenshot, so the
 * photo has to stay subdued the whole way across -- otherwise a lit reception
 * desk competes with the thing it is meant to be presenting. It never goes
 * fully opaque either: the point is that the screenshot floats in a hospital,
 * not on a navy rectangle.
 */
.cinema-case { min-height: 0; }
.cinema-case::after {
  background: linear-gradient(96deg,
      rgba(12,20,32,.97) 0%, rgba(12,20,32,.92) 30%,
      rgba(12,20,32,.72) 50%, rgba(12,20,32,.46) 76%,
      rgba(12,20,32,.36) 100%);
}

/* ------------------------------------------------------------ three-up */

.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.6vw, 48px); margin-top: 3rem; }
.col-item { border-top: 2px solid var(--navy); padding-top: 26px; }
.on-dark .col-item { border-top-color: var(--gold); }
.col-item .num {
  font-family: 'DM Serif Display', serif; font-size: 1.15rem;
  color: var(--gold-deep); margin-bottom: .7rem;
}
.on-dark .col-item .num { color: var(--gold); }
.col-item h3 {
  font-family: Inter, sans-serif; font-weight: 700; font-size: .95rem;
  letter-spacing: .17em; text-transform: uppercase; margin-bottom: .8rem;
}
.col-item p { color: var(--ink-muted); font-size: .97rem; margin: 0; }
.on-dark .col-item p { color: var(--on-navy-muted); }

/* ------------------------------------------------- editorial two-column */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); }
.split-6-4 { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 90px); align-items: end; }

/* A list of statements on hairlines -- used for the journey and the FAQ. */
.rows > div { padding: 24px 0; border-top: 1px solid var(--line); }
.rows > div:last-child { border-bottom: 1px solid var(--line); }
.on-dark .rows > div { border-color: var(--on-navy-line); }
.rows h3 { margin-bottom: .35rem; }
.rows p { color: var(--ink-muted); margin: 0; font-size: .97rem; }
.on-dark .rows p { color: var(--on-navy-muted); }
.rows .who {
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .5rem; font-weight: 600;
}
.on-dark .rows .who { color: var(--gold); }

/* ------------------------------------------------------------ philosophy */

.philo h2 { font-size: clamp(2.3rem, 4.6vw, 4.1rem); max-width: 16ch; }
.philo .lines {
  font-family: 'DM Serif Display', 'Playfair Display', serif;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem); line-height: 1.45;
  margin-top: 1.4rem;
}
.philo .lines span { color: var(--gold-deep); }

/* ---------------------------------------------------------------- footer */

footer { background: var(--navy-deep); color: var(--on-navy-muted); padding: 78px 0 36px; }
footer h4 {
  color: #fff; font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; margin: 0 0 16px; font-weight: 600;
}
footer a { color: var(--on-navy-muted); display: block; margin-bottom: 10px; font-size: .94rem; }
footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.foot-bottom {
  margin-top: 58px; padding-top: 24px; border-top: 1px solid var(--on-navy-line);
  font-size: .85rem;
}

/* ---------------------------------------------------------------- motion */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .hero-grid, .case, .case.flip, .split, .split-6-4 { grid-template-columns: 1fr; }
  .hero-grid { min-height: 0; gap: 40px; }
  .cols3 { grid-template-columns: 1fr; gap: 28px; }
  .cinema::after {
    background: linear-gradient(180deg, rgba(12,20,32,.95) 0%, rgba(12,20,32,.89) 60%, rgba(12,20,32,.94) 100%);
  }
  .cinema-case::after {
    background: linear-gradient(180deg, rgba(12,20,32,.96) 0%, rgba(12,20,32,.90) 45%, rgba(12,20,32,.86) 100%);
  }
  .cinema-copy { max-width: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-links {
    display: none; position: absolute; top: 78px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-links .btn { margin-top: 14px; justify-content: center; }
  .nav-toggle { display: block; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .shot-phone { max-width: 260px; }

  /*
   * Thumbs, not cursors. Measured on a phone, the footer links were 24px
   * tall and the contact address 22px, stacked close enough that the wrong
   * one is easy to hit. 44px is the size a thumb actually lands on, so the
   * padding goes on here and the footer simply gets taller -- the nav menu
   * already did this, the rest of the page never caught up.
   */
  .nav-toggle { min-width: 44px; min-height: 44px; }
  /* Padding grows the hit area, the negative margin cancels its effect on
     layout -- the dropdown is positioned off a fixed 78px header. */
  .nav .brand { padding: 7px 0; margin: -7px 0; }
  footer a { padding: 10px 0; margin-bottom: 0; }
  section.on-dark p > a { display: inline-block; padding: 11px 0; }
}