/* Nervv catalogue and shared styles. Light theme only. */

@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --ivory: #F7F2E7;
  --surface: #FFFDF8;
  --line: #E3DACA;
  --ink: #1D2A23;
  --muted: #5B6A60;
  --prana: #2E6A4A;
  --jal: #1F5F7A;
  --marigold: #E0A526;
  --obsidian: #0A0C0B;

  --marigold-hover: #D69B1C;
  --marigold-tint: #F6E3B9;
  --marigold-tint-line: #EDD394;
  --field-line: #5B6A60;

  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 68px;
  --sec-pad: clamp(64px, 10vh, 120px);
  --gap: clamp(32px, 5vw, 80px);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-1: 160ms;
  --t-2: 320ms;
  --t-3: 640ms;
  --t-4: 1200ms;

  color-scheme: light;
}

/* Base */

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

html {
  background: var(--ivory);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.mf-still) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1024px) {
  body { font-size: 18px; }
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

figure { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

p, li { max-width: 65ch; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  color: inherit;
  text-wrap: balance;
}

h2 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  max-width: 18ch;
}

h3 {
  font-size: clamp(21px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.008em;
}

strong { font-weight: 600; }

a { color: var(--prana); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--t-1) var(--ease), text-decoration-color var(--t-1) var(--ease); }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--ivory); }
main:focus { outline: none; }

/* Name style: every Nervv product and app name is set apart by colour, and in
   headings by the Fraunces italic. Prana green on light grounds, marigold on dark. */
.pn { color: var(--prana); font-weight: 600; }
h1 .pn, h2 .pn, h3 .pn, .index__name .pn, .lede .pn {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
}
.on-dark .pn { color: var(--marigold); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Logo (never retyped; geometry from the master svg) */

.logo { --logo-w: 112px; display: inline-flex; align-items: center; color: var(--ink); margin-left: calc(var(--logo-w) * -5.5 / 240); }
.logo svg { width: var(--logo-w); height: auto; overflow: visible; }
.logo .stroke { stroke: currentColor; }
.logo .node { fill: var(--marigold); }

/* Skip link */

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* Buttons and text links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 6px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-1) var(--ease);
}
.btn--primary { background: var(--marigold); color: var(--ink); }
.btn--primary:hover { background: var(--marigold-hover); color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: progress; }

.tlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.tlink--light, .tlink--light:hover { color: var(--ivory); }
.tlink:hover { text-decoration-thickness: 2px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* Nav: sits in flow right after the intro and sticks once reached */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 24px; height: 100%; }
.nav__logo { --logo-w: 104px; min-height: 44px; text-decoration: none; }
.nav__menu { margin-left: auto; }
.nav__links { display: flex; gap: 4px; list-style: none; }
.nav__links li { max-width: none; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  white-space: nowrap;
}
.nav__links a:hover { text-decoration-color: var(--line); }
.nav__links a[aria-current="true"] { text-decoration-color: var(--prana); }
.nav__cta { min-height: 44px; padding: 0 20px; }

@media (max-width: 759px) {
  :root { --nav-h: 64px; }
  .nav__menu { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__logo { --logo-w: 96px; }
}

/* Hero (#range) */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
}
.hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(17, 25, 21, 0.90) 0%, rgba(17, 25, 21, 0.86) 40%, rgba(17, 25, 21, 0.80) 58%, rgba(17, 25, 21, 0.30) 80%, rgba(17, 25, 21, 0.06) 100%),
    linear-gradient(0deg, rgba(17, 25, 21, 0.55) 0%, rgba(17, 25, 21, 0) 50%);
}
.hero__in { padding-block: 40px clamp(40px, 9vh, 104px); }
.hero__brand { margin-bottom: clamp(28px, 5vh, 56px); }
.logo--hero { --logo-w: 136px; color: var(--ivory); }
.hero__desc { margin-top: 14px; font-weight: 600; font-size: 16px; letter-spacing: 0.01em; }
.hero__branch { margin-top: 2px; font-size: 14px; opacity: 1; color: #E9E3D6; }
.hero h1 {
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1.03;
  letter-spacing: -0.022em;
  max-width: 13ch;
}
.hero__sub {
  margin-top: clamp(18px, 2.4vh, 28px);
  max-width: 40ch;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: #F1ECE1;
}
.hero .actions { margin-top: clamp(24px, 4vh, 40px); }

@media (max-width: 759px) {
  .hero__img { object-position: 70% 50%; }
  .hero::after { background: linear-gradient(0deg, rgba(17, 25, 21, 0.30) 0%, rgba(17, 25, 21, 0.10) 100%); }
  .hero__in {
    padding-top: 112px;
    background: linear-gradient(0deg, rgba(17, 25, 21, 0.84) 0%, rgba(17, 25, 21, 0.78) calc(100% - 112px), rgba(17, 25, 21, 0) 100%);
  }
  .logo--hero { --logo-w: 120px; }
}

@media (max-height: 780px) and (min-width: 760px) {
  .hero__in { padding-block: 32px 48px; }
  .hero__brand { margin-bottom: 28px; }
  .hero h1 { font-size: clamp(40px, 5vw, 68px); }
}

/* Sections */

.sec { padding-block: var(--sec-pad); }
.sec--tight-top { padding-top: 0; }

.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink); max-width: 44ch; }

.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 21ch;
  text-wrap: balance;
}

.head2 {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap);
  align-items: end;
}

.ratio { position: relative; overflow: hidden; border-radius: 6px; background: var(--line); }
.ratio > img, .ratio > svg { width: 100%; height: 100%; object-fit: cover; }
.ratio--4x5 { aspect-ratio: 4 / 5; }
.ratio--16x10 { aspect-ratio: 16 / 10; }
.ratio--1x1 { aspect-ratio: 1 / 1; }

.feat { list-style: none; margin-top: 28px; }
.feat li { padding: 13px 0; border-top: 1px solid var(--line); }
.feat li:last-child { border-bottom: 1px solid var(--line); }

.note { margin-top: 24px; color: var(--muted); font-size: 16px; }
.small { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Who it is for */

.who__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 64px) var(--gap);
  margin-top: clamp(40px, 6vw, 72px);
}
.who__item { display: flex; flex-direction: column; padding-top: 24px; border-top: 1px solid var(--ink); max-width: none; }
.who__item h3 { margin-bottom: 12px; }
.who__item .start { margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 16px; }
.start a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left calc(50% + 0.72em) / 100% 1px no-repeat;
}
.start a { min-width: 44px; justify-content: center; }
.start a:hover { background-size: 100% 2px; }

/* Promise */

.promise__top {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap);
  align-items: start;
}
.promise__body { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; padding-top: 10px; }
.promise__line { margin-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px); }

.proofs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.proofs li { padding: 4px 24px 0; border-left: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.proofs li:first-child { padding-left: 0; border-left: 0; }
.proofs__lead {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
}

.same {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
  margin-top: clamp(64px, 9vw, 120px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.same__media { aspect-ratio: 16 / 10; }
.same__media img { width: 100%; height: 100%; object-fit: cover; }
.same__text { padding: clamp(28px, 4vw, 56px); }
.same__text h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; margin-bottom: 14px; }

/* How it works */

.how { border-top: 1px solid var(--line); }
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(40px, 6vw, 72px);
}
.steps li {
  counter-increment: step;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}
.steps li::before {
  content: counter(step);
  display: block;
  min-width: 0.62em;
  margin-bottom: clamp(16px, 2.4vw, 32px);
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--prana);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Offerings index */

.offerings { background: var(--surface); border-block: 1px solid var(--line); }
.offerings__h { max-width: 22ch; }
@media (min-width: 760px) { .offerings__h span { display: block; } }
.index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(40px, 6vw, 72px);
}
.index h3 {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}
.index ul { list-style: none; }
.index li { max-width: none; }
.index a {
  display: block;
  padding: 16px 0 17px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.index__name {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.index__line { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.index a:hover .index__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* Heartwood */

.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap);
  align-items: start;
}
.split__media { position: sticky; top: calc(var(--nav-h) + 32px); }
.split__text > p { margin-top: 24px; font-size: clamp(18px, 1.4vw, 20px); }
.feat--lead li { color: var(--muted); }
.feat--lead strong { color: var(--ink); }

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(64px, 9vw, 112px);
}
.trio__item { padding-top: 20px; border-top: 1px solid var(--line); }
.trio__item h3 { margin-bottom: 10px; }
.trio__item p { color: var(--muted); font-size: 16px; }

/* Inlay */

.band { aspect-ratio: 21 / 9; border-radius: 6px; overflow: hidden; background: var(--line); }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(40px, 6vw, 72px);
}
.cols2 h2 { margin-bottom: 24px; }
.cols2 .feat { margin-top: 6px; }

/* App bento */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(40px, 6vw, 72px);
}
.cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.cell p + p { margin-top: 12px; }
.who { display: flex; gap: 14px; align-items: flex-start; }
.who + .who { margin-top: 16px; }
.who p { margin: 0; flex: 1; min-width: 0; }
.sym { flex: none; width: 40px; height: 40px; color: var(--ink); margin-top: 2px; }
.sym .dot { fill: var(--marigold); stroke: none; }
.cell__title { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 20px; }
.cell__title--sm { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; }
.cell__lead { font-family: var(--f-display); font-weight: 400; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.3; letter-spacing: -0.01em; max-width: 30ch; }
.cell__end { margin-top: auto; padding-top: 20px; }
.cell--flare, .cell--charm .cell__body { justify-content: flex-end; }
.cell--flare .cell__title, .cell--charm .cell__title { margin-bottom: 12px; }
.cell--flare .cell__end, .cell--charm .cell__end { margin-top: 0; padding-top: 0; }
.cell--hours { grid-column: 1 / span 7; }
.cell--flare { grid-column: 8 / span 5; background: var(--marigold-tint); border-color: var(--marigold-tint-line); }
.cell--people { grid-column: 1 / span 5; }
.cell--people p { font-size: 16px; color: var(--muted); }
.cell--people p strong { color: var(--ink); }
.cell--people .cell__end { color: var(--ink); }
.cell--charm {
  grid-column: 6 / span 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
.cell__media { position: relative; min-height: 100%; background: var(--line); }
.cell__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cell__body { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); }
.hours { list-style: none; margin-top: 24px; }
.hours li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.hours li:last-child { border-bottom: 1px solid var(--line); }
.hours__k { font-weight: 600; color: var(--ink); }

/* Toran and Pravesh */

.pair__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap);
  align-items: start;
}
.pair__item > div { margin-top: 32px; }
.h2--pair { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.12; letter-spacing: -0.015em; max-width: 20ch; margin-bottom: 18px; }
.pair__item--pravesh { margin-top: clamp(0px, 9vw, 128px); }

/* Dapple */

.dapple { background: var(--surface); border-block: 1px solid var(--line); }
.dapple__line { margin-block: clamp(24px, 3vw, 40px) clamp(48px, 7vw, 88px); color: var(--prana); max-width: 19ch; }
.dapple__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--gap);
  align-items: start;
}
.dapple__a { grid-column: 1 / span 8; grid-row: 1; }
.dapple__text { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: start; }
.dapple__text .feat { margin-top: 20px; }
.dapple__b { grid-column: 4 / span 5; grid-row: 2; }

/* Stepwell and Breezeway */

.elements {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 32px;
  align-items: start;
}
.elements__item { grid-column: 1 / span 5; }
.elements__item--b { grid-column: 8 / span 5; margin-top: clamp(0px, 12vw, 176px); }
.elements__item > div { margin-top: 32px; }

.drawing { background: var(--ivory); border: 1px solid var(--line); }
.drawing__svg .ln { stroke: var(--ink); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.drawing__svg .ln path, .drawing__svg .ln circle { vector-effect: non-scaling-stroke; }
.drawing__svg .ln--soft { stroke-opacity: 0.45; }
.drawing__svg .ring { stroke: var(--prana); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.drawing__svg .dot { fill: var(--marigold); }
.drawing__svg .face { fill: var(--marigold); }

/* Flare */

.flare__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap);
  align-items: center;
}
.flare__grid > figure { max-width: 460px; width: 100%; }
.flare__text h2 { margin-bottom: 14px; }
.flare .small { margin-top: 20px; }
.flare__pack { width: min(240px, 60%); margin-top: 28px; border-radius: 6px; overflow: hidden; }

/* Anchal */

.anchal__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap);
  align-items: start;
}
.anchal__pics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.anchal__text h2 { margin-bottom: 14px; }
.privacy {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.privacy h3 { margin-bottom: 8px; }
.anchal .small { margin-top: 20px; }

/* Greener */

.greener { background: var(--surface); border-block: 1px solid var(--line); }
.greener__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}
.greener__h {
  grid-column: 1 / -1;
  max-width: 15ch;
  font-weight: 400;
  font-size: clamp(42px, 7.2vw, 104px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--prana);
}
.greener__body { grid-column: 7 / span 6; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; }

/* Visit */

.visit__card {
  --bleed: min(40px, var(--gutter));
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 42vw, 500px);
  margin-inline: calc(var(--bleed) * -1);
  padding: var(--bleed);
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
}
.visit__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.visit__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(17, 25, 21, 0.86) 0%, rgba(17, 25, 21, 0.62) 42%, rgba(17, 25, 21, 0.18) 78%, rgba(17, 25, 21, 0.06) 100%),
    linear-gradient(90deg, rgba(17, 25, 21, 0.45) 0%, rgba(17, 25, 21, 0) 60%);
}
.visit__cardtext h2 { font-size: clamp(40px, 5.4vw, 76px); letter-spacing: -0.025em; }
.visit__line { margin-top: 12px; font-size: clamp(18px, 1.6vw, 22px); color: #F1ECE1; }

.visit__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--gap);
  margin-top: clamp(48px, 7vw, 88px);
  align-items: start;
}
.visit__contact { position: sticky; top: calc(var(--nav-h) + 32px); }
.contact { margin: 0; display: grid; gap: 24px; }
.contact div { padding-top: 16px; border-top: 1px solid var(--line); }
.contact dt { color: var(--muted); font-size: 15px; }
.contact dd { margin: 4px 0 0; }
.contact a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-display); font-weight: 500; font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.01em; }
.tel { font-variant-numeric: tabular-nums; }

/* Form */

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 24px;
}
.field { display: flex; flex-direction: column; min-width: 0; }
.field + .field, .checks + .field { margin-top: 0; }
.form > .field, .form > .checks { margin-top: 28px; }
.field label, .checks legend { font-weight: 600; font-size: 16px; line-height: 1.4; margin-bottom: 8px; color: var(--ink); }
.opt { font-weight: 400; color: var(--muted); }
.field__hint { font-size: 14px; color: var(--muted); margin-top: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: 6px;
  transition: border-color var(--t-1) var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231D2A23' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field [aria-invalid="true"] { border: 2px solid var(--ink); padding: 10px 13px; background-color: var(--marigold-tint); }
.field select[aria-invalid="true"] { padding-right: 43px; }
.field__err { margin-top: 8px; font-weight: 600; font-size: 15px; color: var(--ink); }

.checks { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.checks legend { padding: 0; }
.checks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
}
.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  font-size: 16px;
}
.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--prana);
  cursor: pointer;
}

.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.form__note { font-size: 15px; color: var(--muted); }

.form__summary {
  margin-bottom: 28px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 6px;
}
.form__summary-h { font-weight: 600; margin-bottom: 6px; }
.form__summary ul { list-style: none; }
.form__summary a { display: inline-flex; align-items: center; min-height: 44px; }

.form__status:empty { display: none; }
.form__status {
  margin-bottom: 28px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 18px;
}
.form__status.is-ok { border-color: var(--prana); }
.form__status.is-error { border-color: var(--ink); }
.form__status:focus { outline: none; }
.form__status:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; }

.form.is-sent { display: none; }

/* Footer */

.foot { border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 96px) 40px; }
.foot__grid {
  display: grid;
  grid-template-columns: 4fr 3fr 5fr;
  gap: 40px var(--gap);
}
.logo--foot { --logo-w: 120px; }
.foot__desc { margin-top: 14px; font-weight: 600; font-size: 16px; }
.foot__branch { color: var(--muted); font-size: 15px; }
.foot__h { color: var(--muted); font-size: 15px; margin-bottom: 4px; }
.foot__list { list-style: none; }
.foot__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration-color: var(--line); }
.foot__list a:hover { text-decoration-color: var(--ink); }
.foot__list--cols { columns: 2; column-gap: 24px; }
.foot__list--cols li { break-inside: avoid; }
.foot__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.foot__legal p:first-child { max-width: 80ch; }

/* 404 */

.nf__main { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.nf__in { padding-block: 96px; }
.logo--nf { --logo-w: 128px; min-height: 44px; text-decoration: none; }
.nf__h { margin-top: 48px; font-size: clamp(40px, 6vw, 80px); line-height: 1.04; letter-spacing: -0.025em; max-width: 14ch; }
.nf__actions { margin-top: 40px; }

/* Reveal on enter: only when site.js opts in, never under reduced motion */

@media (prefers-reduced-motion: no-preference) {
  .rv-on .rv {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease);
  }
  .rv-on .rv.in { opacity: 1; transform: none; }
}
.mf-still .rv { opacity: 1 !important; transform: none !important; }

/* Intro hidden when skipped */

html.mf-skip #intro { display: none !important; }

/* Responsive */

@media (max-width: 1023px) {
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .proofs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .cell--hours { grid-column: 1 / -1; }
  .cell--flare { grid-column: 1 / -1; }
  .cell--people { grid-column: 1 / span 6; }
  .cell--charm { grid-column: 7 / span 6; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cell--charm .cell__media { min-height: 0; aspect-ratio: 4 / 3; }
  .trio { gap: 32px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__nav { grid-column: 1 / -1; }
  .foot__list--cols { columns: 3; }
}

@media (max-width: 899px) {
  .head2, .promise__top { grid-template-columns: 1fr; gap: 20px; }
  .same { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { position: static; max-width: 520px; }
  .split__text { margin-top: 8px; }
  .trio { grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
  .trio__item { padding-block: 20px; }
  .cols2 { grid-template-columns: 1fr; gap: 28px; }
  .pair__grid { grid-template-columns: 1fr; gap: 72px; }
  .pair__item--pravesh { margin-top: 0; }
  .pair__item--pravesh .ratio { max-width: 520px; }
  .dapple__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dapple__a, .dapple__text, .dapple__b { grid-column: 1; grid-row: auto; }
  .dapple__b { width: 72%; justify-self: end; }
  .elements { grid-template-columns: 1fr; gap: 72px; }
  .elements__item, .elements__item--b { grid-column: 1 / -1; margin-top: 0; }
  .elements__item .ratio { max-width: 520px; }
  .anchal__grid { grid-template-columns: 1fr; gap: 40px; }
  .flare__grid { grid-template-columns: 1fr; gap: 40px; }
  .greener__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .greener__h, .greener__body { grid-column: 1; }
  .visit__grid { grid-template-columns: 1fr; gap: 40px; }
  .visit__contact { position: static; }
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
}

@media (max-width: 759px) {
  .who__grid { grid-template-columns: 1fr; gap: 40px; }
  .index { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { display: grid; grid-template-columns: 64px 1fr; align-items: start; padding-block: 20px; }
  .steps li:last-child { border-bottom: 1px solid var(--line); }
  .steps li::before { margin: -4px 0 0; font-size: 44px; line-height: 1; }
  .band { aspect-ratio: 16 / 10; }
  .bento { grid-template-columns: 1fr; }
  .cell--hours, .cell--flare, .cell--people, .cell--charm { grid-column: 1 / -1; }
  .cell--charm .cell__media { aspect-ratio: 4 / 3; }
  .form__grid { grid-template-columns: 1fr; }
  .checks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__list--cols { columns: 2; }
  .contact { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 599px) {
  .proofs { grid-template-columns: 1fr; gap: 0; }
  .proofs li, .proofs li:first-child, .proofs li:nth-child(3) { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .visit__card { border-radius: 0; }
  .anchal__pics { gap: 12px; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  html { scroll-behavior: auto; }
}