/* RichKey | Medha Raj — site styles */
@font-face { font-family: "Zodiak"; src: url("/assets/fonts/zodiak-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("/assets/fonts/zodiak-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #eeecea;
  --surface: #e4e1dd;
  --ink: #333231;
  --muted: #625e5a;
  --accent: #5c6b54;
  --accent-hover: #4d5b46;
  --accent-ink: #ffffff;
  --field-1: #cdc3b6;
  --field-1-ink: #333231;

  --serif: "Zodiak", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --step-head: clamp(2.125rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(5.25rem, 1rem + 13vw, 13rem);

  --m: clamp(16px, 2.4vw, 32px);
  --gap: clamp(120px, 14vw, 200px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--step-body); line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, blockquote, figure, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
::selection { background: var(--field-1); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--m); top: -100px; z-index: 50; background: var(--ink); color: var(--bg); padding: 12px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { padding-inline: var(--m); max-width: 1680px; margin-inline: auto; }
.section { padding-block: var(--gap) 0; }

.h-section { font-family: var(--serif); font-weight: 300; font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.01em; }
.h-big { font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 1rem + 5vw, 5.5rem); line-height: 0.98; letter-spacing: -0.015em; }
.lead { font-size: var(--step-lead); line-height: 1.42; max-width: 34ch; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: var(--accent); color: var(--accent-ink); font: 500 var(--step-body)/1 var(--sans); text-decoration: none; border: 0; border-radius: 0; cursor: pointer; transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.button:hover { background: var(--accent-hover); }
.button:active { transform: scale(0.97); }
.button--block { width: 100%; min-height: 56px; }
.button[disabled] { opacity: 0.7; cursor: progress; }

/* ───── Hero ───── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto auto 1fr auto; color: var(--ink); overflow: clip; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 60% 60%; }
.nav { grid-row: 1; display: flex; justify-content: flex-end; align-items: center; gap: clamp(18px, 2.4vw, 36px); padding: 24px var(--m) 0; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; position: relative; padding-block: 8px; }
.nav__brand { margin-right: auto; font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: 0.01em; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); } /* taste-skill-ignore: hover underline, not a divider */
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }
.hero__title { grid-row: 2; font-family: var(--serif); font-weight: 300; font-size: var(--step-display); line-height: 0.86; letter-spacing: -0.02em; text-transform: uppercase; padding: clamp(16px, 3.5vw, 48px) var(--m) 0; }
.hero__l2 { padding-left: 28vw; }
.hero__body { grid-row: 4; align-self: end; justify-self: start; margin: 0 0 var(--m) var(--m); padding: clamp(22px, 2.2vw, 32px); background: var(--bg); width: min(30rem, calc(100% - 2 * var(--m))); display: grid; gap: 22px; justify-items: start; }
.hero__lede { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); line-height: 1.4; max-width: 28ch; }

.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); animation: line-rise 1000ms var(--ease-out) forwards; animation-delay: calc(150ms + var(--i) * 110ms); }
  .js [data-hero-body] { opacity: 0; transform: translateY(16px); animation: fade-up 800ms var(--ease-out) 520ms forwards; }
  .js .nav { opacity: 0; animation: fade 900ms var(--ease-out) 300ms forwards; }
  .js .hero__media img { animation: settle 2400ms var(--ease-out) both; }
}
@keyframes line-rise { to { transform: translateY(0); } }
@keyframes fade-up { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

@media (max-width: 699px) {
  .hero { grid-template-rows: auto auto 1fr auto; }
  .nav { padding-top: 16px; gap: 18px; font-size: 15px; }
  .nav__link:not(.nav__link--cta) { display: none; }
  .hero__media img { object-position: 50% 0%; }
  .hero__title { font-size: 19vw; padding-top: 20px; line-height: 0.88; }
  .hero__l2 { padding-left: 0; text-align: right; }
  .hero__body { grid-row: 4; align-self: end; margin: 0; padding: 0 var(--m) 28px; width: auto; background: none; color: #fff; }
  .hero__body::before { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; z-index: -1; background: linear-gradient(to top, rgba(18, 17, 16, 0.72), rgba(18, 17, 16, 0)); pointer-events: none; } /* taste-skill-ignore: neutral scrim over photo */
  .hero__lede { font-size: 19px; max-width: 24ch; }
}

/* ───── Story ───── */
.story__lead { margin-top: 28px; max-width: 46ch; }
.story__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 72px; align-items: start; }
.story__wide { grid-column: 1 / span 8; position: relative; overflow: clip; }
.story__wide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.story__note { position: absolute; top: 0; right: 0; width: min(340px, 45%); background: var(--bg); padding: 22px 24px 24px; font-size: var(--step-body); line-height: 1.5; }
.story__side { grid-column: 9 / span 4; display: grid; gap: 28px; }
.story__tile { background: var(--field-1); aspect-ratio: 4 / 5; overflow: clip; }
.story__tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; font-size: var(--step-small); }
.facts dt { color: var(--muted); }
.facts dd { font-size: 16px; font-weight: 500; line-height: 1.35; margin-top: 2px; }
.statement { margin: clamp(96px, 10vw, 160px) 0 0; padding-left: calc(100% / 12 * 4); }
.statement p { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.22; max-width: 30ch; }
@media (max-width: 899px) {
  .story__grid { display: block; margin-top: 48px; }
  .story__wide img { aspect-ratio: 4 / 3; }
  .story__note { position: static; width: auto; padding: 20px 0 0; background: none; }
  .story__side { margin-top: 40px; grid-template-columns: 1fr; }
  .story__tile { aspect-ratio: 3 / 2; }
  .statement { padding-left: 0; margin-top: 88px; }
}

/* ───── Services ───── */
.services { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--gap); background: var(--surface); }
.services__media { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.services__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform-origin: 50% 40%; }
.services__body { padding: clamp(72px, 10vw, 140px) clamp(24px, 6vw, 112px) clamp(72px, 12vh, 160px); }
.steps { margin-top: clamp(40px, 7vh, 80px); counter-reset: none; }
.step { min-height: 52vh; padding-block: 28px; display: flex; flex-direction: column; justify-content: center; color: var(--muted); transition: color 400ms var(--ease-out); }
.step:last-child { min-height: 40vh; }
.step__title { font-family: var(--serif); font-weight: 300; font-size: var(--step-lead); line-height: 1.15; color: var(--ink); margin-bottom: 14px; max-width: 22ch; }
.step p { max-width: 40ch; }
.js .step.is-active, .step:focus-within { color: var(--ink); }
.no-steps .step { color: var(--ink); }
@media (max-width: 899px) {
  .services { display: block; }
  .services__media { position: relative; height: auto; }
  .services__media img { aspect-ratio: 4 / 5; height: auto; }
  .services__body { padding: 64px var(--m) 72px; }
  .steps { margin-top: 32px; }
  .step { min-height: 0; padding-block: 24px; color: var(--ink); }
}

/* ───── Communities ───── */
.h-big span { display: block; }
.comm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 7vw, 96px); align-items: start; }
.comm__figure { grid-column: 1 / span 5; position: sticky; top: 32px; aspect-ratio: 4 / 5; overflow: clip; background: var(--surface); }
.comm__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms var(--ease-out), transform 1200ms var(--ease-out); transform: scale(1.04); }
.comm__figure img.is-active { opacity: 1; transform: scale(1); }
.comm__list { grid-column: 7 / span 6; }
.comm__row { padding: 28px 0 36px; }
.comm__row + .comm__row { margin-top: 12px; }
.comm__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.75rem); line-height: 1.08; letter-spacing: -0.01em; }
.comm__name button { all: unset; cursor: pointer; display: inline; color: var(--muted); transition: color 300ms var(--ease-out); }
.comm__row.is-active .comm__name button, .comm__name button:hover { color: var(--ink); }
.comm__name button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.comm__dev { margin-top: 8px; font-size: var(--step-small); color: var(--muted); font-weight: 500; }
.comm__text { margin-top: 14px; max-width: 44ch; }
.comm__inline { display: none; }
.devs { margin-top: clamp(112px, 12vw, 180px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: end; }
.devs__title { grid-column: 1 / -1; }
.devs__list { grid-column: 1 / -1; margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.devs__name { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -0.015em; }
.devs__works { display: block; margin-top: 12px; font-size: var(--step-small); color: var(--muted); max-width: 22ch; }
@media (max-width: 899px) {
  .h-big { font-size: 11vw; }
  .h-big span:first-child { padding-left: 0; }
  .comm { display: block; }
  .comm__figure { display: none; }
  .comm__name button { color: var(--ink); }
  .comm__row { padding: 0 0 8px; }
  .comm__row + .comm__row { margin-top: 56px; }
  .comm__inline { display: block; margin-top: 20px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .devs { display: block; margin-top: 104px; }
  .devs__list { margin-top: 32px; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}

/* ───── Enquire ───── */
.enquire { position: relative; margin-top: var(--gap); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; background: var(--surface); overflow: clip; }
.enquire__media { grid-column: 1 / span 6; position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; }
.enquire__media img { position: absolute; inset: 0; }
.enquire__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.card { grid-column: 8 / span 4; align-self: center; width: 100%; padding: clamp(64px, 8vw, 120px) 0; }
.card__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); line-height: 1.1; }
.card__intro { margin-top: 12px; }
.form { margin-top: 28px; display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label, .consent label { font-size: 15px; font-weight: 500; }
.field__opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea, .phone select {
  width: 100%; min-height: 50px; padding: 12px 14px; font: 400 16px/1.4 var(--sans); color: var(--ink);
  background: #fbfaf9; border: 1px solid #a9a39c; border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color 200ms var(--ease-out);
}
.field select, .phone select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333231' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: #9b2c22; }
.phone { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 8px; }
.field__error { color: #9b2c22; font-size: 14px; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.consent label { font-weight: 400; font-size: 15px; line-height: 1.45; }
.form__note { font-size: var(--step-small); color: var(--muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: visually hidden honeypot */
.card__done { display: grid; gap: 18px; }
.card__done[hidden] { display: none; }
.card__done:focus { outline: none; }
@media (max-width: 699px) {
  .enquire { display: block; background: var(--bg); }
  .enquire__media { display: block; position: relative; height: 72svh; min-height: 0; }
  .enquire__media img { object-position: 50% 20%; }
  .card { position: relative; margin: -72px var(--m) 0; width: auto; padding: 24px 20px 28px; background: var(--bg); }
  .field-row { grid-template-columns: 1fr; gap: 18px; }
}

/* ───── Footer ───── */
.footer { margin-top: var(--gap); background: var(--accent); color: #fff; min-height: 0; padding: 40px var(--m) 28px; display: grid; grid-template-rows: auto 1fr auto; gap: 48px; }
.footer a { color: #fff; }
.footer__top { display: flex; justify-content: space-between; gap: 24px; font-size: 15px; }
.footer__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 18rem)); gap: 24px; }
.footer__brand { font-family: var(--serif); font-size: 20px; line-height: 1.2; }
.footer__top-link { white-space: nowrap; }
.footer__main { align-self: end; margin-top: clamp(96px, 12vw, 180px); }
main:has(.enquire) + .footer { margin-top: 0; }
.footer__label { font-size: 15px; margin-bottom: 8px; }
.footer__display { display: inline-block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 0.5rem + 8.4vw, 10rem); line-height: 1; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; transition: opacity 250ms var(--ease-out); }
.footer__display:hover { opacity: 0.82; }
.footer__meta { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 24px; font-size: 14px; align-items: end; }
.footer__meta p:first-child { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__meta p:last-child { text-align: right; }
.footer__credits { color: rgba(255, 255, 255, 0.86); line-height: 1.45; }
@media (max-width: 899px) {
  .footer { min-height: 0; padding-top: 36px; }
  .footer__top { flex-direction: column; }
  .footer__notes { grid-template-columns: 1fr; gap: 14px; }
  .footer__top-link { order: 2; }
  .footer__main { margin-top: 64px; }
  .footer__display { font-size: 11.4vw; }
  .footer__meta { grid-template-columns: 1fr; font-size: 13px; gap: 14px; }
  .footer__meta p:last-child { text-align: left; }
}

/* ───── Reveal (JS-enhanced; content visible without JS) ───── */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ───── Privacy page ───── */
.bar { display: flex; justify-content: space-between; align-items: center; padding: 24px var(--m); font-size: 15px; font-weight: 500; }
.bar a { text-decoration: none; }
.bar .nav__brand { font-size: 20px; }
.doc { padding: clamp(48px, 8vw, 120px) var(--m) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; max-width: 1680px; margin-inline: auto; }
.doc__head { grid-column: 1 / span 4; }
.doc__head h1 { font-family: var(--serif); font-weight: 300; font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.01em; }
.doc__head p { margin-top: 16px; color: var(--muted); font-size: var(--step-small); }
.doc__body { grid-column: 6 / span 6; max-width: 66ch; }
.doc__body h2 { font-family: var(--serif); font-weight: 400; font-size: var(--step-lead); line-height: 1.2; margin: 48px 0 14px; }
.doc__body h2:first-child { margin-top: 0; }
.doc__body p + p, .doc__body ul + p, .doc__body p + ul { margin-top: 14px; }
.doc__body ul { padding-left: 1.2em; }
.doc__body li + li { margin-top: 8px; }
@media (max-width: 899px) {
  .doc { display: block; }
  .doc__body { margin-top: 48px; }
}
.notfound { min-height: 70svh; display: grid; align-content: center; gap: 24px; padding: 48px var(--m); }
.notfound h1 { font-family: var(--serif); font-weight: 300; font-size: var(--step-head); line-height: 1.05; }

.nowrap { white-space: nowrap; }
@media (min-width: 700px) and (max-width: 1099px) { .card { grid-column: 7 / span 6; padding-right: var(--m); } }