/* ==========================================================================
   Dishyooom — ഇടിവെട്ട് വെബ്സൈറ്റുകൾ
   v2: the Coconut Button Club system (../coconut-design-system/design-system.md) on a Kerala chai kada.
   Paper + grain, warm brown shadows, one loud red, mono labels, components shaped like kada things:
   numbered service rows, a bill pad, a bill.
   ========================================================================== */

/* Type
   Latin: Fraunces (display, SOFT 100 / WONK 1), DM Sans (body), DM Mono (labels) from Google Fonts.
   Malayalam: none of those three have Malayalam glyphs, so each stack falls through per glyph:
   headings to Noto Serif Malayalam (Google Fonts, variable 400–900), body and labels to Manjari (self-hosted).
   Malayalam needs more line-height than Coconut's .95 for its tall vowel signs and deep ു/ൂ. */
@font-face {
  font-family: "Manjari";
  src: url("../fonts/manjari-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manjari";
  src: url("../fonts/manjari-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #FBF3E1;
  --paper-2: #F4E7CB;
  --paper-3: #EAD7B1;
  --ink: #2A1D18;
  --ink-2: #5B4536;
  --ink-3: #76604F;          /* Coconut's #8C7461, darkened to pass AA on paper-2 */
  --red: #B3302C;
  --red-deep: #8A231E;
  --leaf: #F4E3C3;
  --coconut: #7A5634;
  --coconut-2: #C49A6C;
  --sea: #276B6F;            /* Coconut's #2E7C80, darkened to pass AA under paper text */
  --blush: #E7967F;
  --wood-1: #c79766;
  --wood-2: #8b5f39;
  --wood-3: #6a4527;

  --display: "Fraunces", "Noto Serif Malayalam", Georgia, serif;
  --sans: "DM Sans", "Manjari", "Noto Sans Malayalam", system-ui, sans-serif;
  --mono: "DM Mono", "Manjari", ui-monospace, monospace;
  --soft: "SOFT" 100, "WONK" 1;

  --gutter: clamp(16px, 5vw, 88px);
  --max: 1280px;
  --nav-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.3, 1.6, .5, 1);

  --sh-hair: 0 1px 0 rgba(42, 29, 24, .08);
  --sh-tag: 0 1px 0 rgba(42, 29, 24, .12), 0 10px 22px -14px rgba(90, 50, 25, .45);
  --sh-figure: 0 30px 60px -36px rgba(90, 50, 25, .6);
  --sh-band: 0 10px 24px -12px rgba(90, 30, 20, .45);
  --sh-cut: drop-shadow(0 22px 18px rgba(90, 50, 25, .2));
  --rule: 1.5px solid rgba(42, 29, 24, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: var(--soft);
  font-weight: 760;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
h2 { font-size: clamp(36px, 4.6vw, 72px); }
h3 { font-size: 24px; font-weight: 680; letter-spacing: -0.005em; line-height: 1.3; }
/* italic accent: real italic for Fraunces; Malayalam has no italic and must not be slanted by the browser */
em { font-style: italic; font-weight: 560; font-synthesis: none; color: var(--red); font-variation-settings: var(--soft); }
/* the English page: Latin needs less leading than the Malayalam sizes above were set for */
:lang(en) h1, :lang(en) h2 { line-height: 1.04; letter-spacing: -0.025em; }
:lang(en) .hero__title { line-height: 1.02; }
:lang(en) .hero__title .t-left { width: min(6.6em, 31vw); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 12px; }

.eyebrow {
  font: 700 14px/1.3 var(--mono);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.eyebrow b { font-weight: 500; letter-spacing: .14em; color: var(--red); }
.lede { font-size: clamp(18px, 1.35vw, 21px); color: var(--ink-2); max-width: 36ch; margin-top: 20px; }
.section-head { text-align: center; }
.section-head .lede { margin-inline: auto; }
.section-head--left { text-align: left; }

/* paper grain over everything */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url(../img/grain.png);
  opacity: .07; mix-blend-mode: multiply;
}

/* --- buttons --------------------------------------------------------------- */
/* primary: a red key with a solid red-deep base that presses down */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border: 0;
  background: var(--red); color: var(--paper); border-radius: 999px; padding: 15px 24px 13px 26px;
  font: 600 17px/1.2 var(--sans); box-shadow: 0 6px 0 var(--red-deep);
  transition: translate .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { translate: 0 -2px; box-shadow: 0 8px 0 var(--red-deep); }
.btn:active { translate: 0 4px; box-shadow: 0 2px 0 var(--red-deep); }
.btn > span[aria-hidden] { transition: translate .25s var(--ease); }
.btn:hover > span[aria-hidden] { translate: 4px 0; }
.btn--xl { font-size: clamp(18px, 1.6vw, 22px); padding: 18px 30px 16px 26px; }
/* secondary: an ink outline (404 page) */
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink), 0 6px 0 var(--paper-3); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 0 8px 0 var(--paper-3); }
.btn--ghost:active { box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--paper-3); }
.btn .wa { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }


/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding-inline: var(--gutter);
  transition: background .4s, box-shadow .4s, height .4s;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-hair);
}
.nav__logo { width: clamp(124px, 11vw, 160px); flex: none; transition: opacity .3s; }
.nav__links { display: flex; gap: clamp(18px, 2.4vw, 36px); margin-left: auto; }
.nav__links a { font: 700 16px/1.2 var(--sans); text-decoration: none; position: relative; padding: 6px 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--red); scale: 0 1; transform-origin: left; transition: scale .35s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { scale: 1 1; }

/* language switcher: Malayalam (index.html) and English (en.html), the current one filled */
.lang {
  display: inline-flex; flex: none; padding: 3px; gap: 2px;
  border: 1.5px solid var(--ink); border-radius: 999px;
}
.lang a {
  padding: 6px 12px 5px; border-radius: 999px; text-decoration: none;
  font: 700 14px/1.2 var(--sans); color: var(--ink); transition: background .25s, color .25s;
}
.lang a:hover { background: var(--paper-3); }
.lang a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.lang__short { display: none; }

.nav__menu {
  display: none;
  font: 700 15px/1.2 var(--sans);
  background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 9px 16px 8px;
}

.menu {
  position: fixed; inset: 0; z-index: 49; background: var(--paper-2);
  display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 20px) var(--gutter) 40px;
}
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 4px; }
.menu a {
  font: 760 clamp(34px, 10vw, 56px)/1.45 var(--display); font-variation-settings: var(--soft);
  text-decoration: none; color: var(--ink);
}
.menu a:hover, .menu a:focus-visible { color: var(--red); }
.menu__owl { position: absolute; right: var(--gutter); bottom: 24px; width: 110px; }
body.menu-open .nav { background: var(--paper-2); box-shadow: none; }
body.menu-open .nav__menu { background: var(--red); }

/* toast */
.toast {
  position: fixed; left: 50%; top: calc(var(--nav-h) + 14px); z-index: 80; translate: -50% -20px; opacity: 0;
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: 11px 20px 9px;
  font: 700 15px/1.3 var(--sans); pointer-events: none; max-width: calc(100vw - 32px); text-align: center;
  transition: opacity .35s, translate .35s var(--ease);
}
.toast.show { opacity: 1; translate: -50% 0; }

/* ==========================================================================
   1. HERO — split headline around Ello, Coconut style
   ========================================================================== */
.hero {
  position: relative; height: 100svh; min-height: 680px; max-height: 1100px; overflow: hidden;
  --title: clamp(42px, 4vw, 74px);
  --top: max(calc(var(--nav-h) + 92px), 25svh);
}
.hero__eyebrow {
  position: absolute; left: 50%; top: calc(var(--nav-h) + clamp(20px, 5svh, 48px)); translate: -50% 0; z-index: 3;
  white-space: nowrap; margin: 0;
}
/* the headline and the copy under it flow, so the copy always clears the headline however many
   lines the Malayalam wraps to (it is longer than the Latin it was sized for) */
.hero__title {
  position: relative; z-index: 3; margin: 0; padding: var(--top) var(--gutter) 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  font-size: var(--title); line-height: 1.12; pointer-events: none;
}
.hero__title .t-left { width: min(6.2em, 36vw); }
.hero__title .t-right { text-align: right; }
.hero__title > span { pointer-events: auto; }
.hero__title .t-right em { display: block; }

.hero__left {
  position: relative; z-index: 3; margin: clamp(18px, 3svh, 32px) 0 0 var(--gutter);
  width: min(30vw, 400px);
}
.hero__sub { margin: 0 0 26px; color: var(--ink-2); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.65; }

.hero__note {
  position: absolute; right: var(--gutter); z-index: 3;
  top: calc(var(--top) + var(--title) * 2.75);
  width: 240px; text-align: right;
}
.hero__note p { font: italic 500 18px/1.45 var(--display); font-variation-settings: var(--soft); color: var(--ink-2); font-synthesis: none; }
.hero__note b { font-weight: 760; font-style: normal; color: var(--ink); }
.note-arrow {
  width: 110px; height: 64px; margin: 6px 0 0 auto; overflow: visible; transform: scaleX(1) rotate(8deg);
  fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.note-arrow path { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1.4s 1.2s var(--ease) forwards; }
.note-arrow path + path { animation-delay: 2.3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__ello {
  position: absolute; z-index: 2; left: 55%; bottom: 3%; translate: -50% 0;
  height: min(70%, 760px); width: auto; max-width: none;
  filter: var(--sh-cut);
  transform-origin: 50% 100%;
}

.hero__scroll {
  position: absolute; left: var(--gutter); bottom: 64px; z-index: 3;
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font: 700 13px/1 var(--mono); color: var(--ink-3);
}
.hero__scroll i { width: 2px; height: 26px; background: var(--ink-3); border-radius: 2px; animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { scale: 1 0; } 50% { scale: 1 1; transform-origin: top; } 51% { transform-origin: bottom; } 100% { scale: 1 0; transform-origin: bottom; } }

/* entrance (CSS only): rise .9–1s on --ease, staggered */
.hero__title .t-left, .hero__title .t-right em, .hero__left, .hero__note, .hero__scroll { animation: rise 1s var(--ease) both; }
.hero__title .t-right em:nth-child(1) { animation-delay: .12s; }
.hero__title .t-right em:nth-child(2) { animation-delay: .22s; }
.hero__left { animation-delay: .32s; }
.hero__note { animation-delay: .5s; }
.hero__scroll { animation-delay: .7s; }
@keyframes rise { from { opacity: 0; translate: 0 26px; } }
.hero__eyebrow { animation: rise-c 1s var(--ease) both; }
@keyframes rise-c { from { opacity: 0; translate: -50% 26px; } }
.hero__ello { animation: ello-in 1.1s .05s var(--ease) both; }
@keyframes ello-in { from { opacity: 0; translate: -38% 6%; rotate: 6deg; } }

/* ==========================================================================
   2. TICKER — one tilted red band, jasmine between words
   ========================================================================== */
.ticker {
  position: relative; z-index: 5; width: 112vw; margin: -40px 0 0 -6vw; rotate: -1.6deg;
  background:
    radial-gradient(circle at 25% 30%, rgba(244, 227, 195, .14) 0 5px, transparent 6px) 0 0 / 34px 34px,
    radial-gradient(circle at 75% 80%, rgba(244, 227, 195, .1) 0 3px, transparent 4px) 0 0 / 34px 34px,
    var(--red);
  color: var(--leaf); padding: 14px 0 10px; overflow: hidden; white-space: nowrap;
  box-shadow: var(--sh-band);
}
.ticker__track { display: inline-flex; align-items: center; will-change: transform; }
.ticker span { font: 700 clamp(22px, 2.3vw, 34px)/1.4 var(--display); font-variation-settings: var(--soft); padding: 0 22px; }
.ticker b { font-size: 22px; line-height: 1; opacity: .8; font-weight: 400; }

/* ==========================================================================
   3. ABOUT
   ========================================================================== */
.about {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center;
  padding-block: clamp(96px, 12vw, 170px) clamp(60px, 8vw, 110px);
}
.about__art { position: relative; display: grid; place-items: center; padding-bottom: 40px; }
.about__art::before {
  content: ""; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%; top: 6%;
  background: var(--paper-2); box-shadow: inset 0 0 0 1.5px rgba(42, 29, 24, .08);
}
.about__ello { position: relative; width: min(74%, 400px); filter: var(--sh-cut); }
.about__copy > p + p { margin-top: 1em; }
.about__copy > p:not(.lede):not(.eyebrow) { color: var(--ink-2); max-width: 40em; }

/* id card = a price tag: card stock, punched hole, string */
.idcard {
  position: absolute; right: 2%; bottom: 0; width: clamp(170px, 16vw, 210px);
  background: var(--paper-2); border-radius: 6px 6px 10px 10px; padding: 30px 16px 14px;
  box-shadow: var(--sh-tag); transform: rotate(5deg); text-align: center;
}
.idcard::before {
  content: ""; position: absolute; left: 50%; top: 10px; width: 10px; height: 10px; translate: -50% 0;
  border-radius: 50%; background: var(--paper); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.idcard::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% - 15px); width: 1.5px; height: 46px;
  background: var(--ink-3); rotate: -10deg; transform-origin: bottom;
}
.idcard__head { font: 500 11px/1.2 var(--mono); letter-spacing: .14em; color: var(--ink-3); margin-bottom: 8px; }
.idcard img { width: 56%; margin: 0 auto; }
.idcard figcaption { display: grid; line-height: 1.35; margin-top: 8px; }
.idcard strong { font: 760 22px/1.3 var(--display); font-variation-settings: var(--soft); }
.idcard span { font-size: 13px; color: var(--ink-2); }
.idcard em { font-size: 15px; margin-top: 4px; }
.idcard__no { margin-top: 10px; padding-top: 8px; border-top: 1.5px dashed rgba(42, 29, 24, .25); font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--ink-3); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip {
  font: 700 15px/1.2 var(--sans); padding: 9px 16px 7px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: transparent;
}
.chip--red { background: var(--red); border-color: var(--red); color: var(--paper); }

/* ==========================================================================
   4. SERVICES — numbered rows between ink rules. Hover (or keyboard focus) fills a row red;
   on hover-capable screens one Ello image (.svc__float, made by main.js) follows the cursor.
   ========================================================================== */
.kada { padding-block: clamp(70px, 9vw, 130px) clamp(60px, 8vw, 110px); }
/* outlined pill label (services, process) */
.eyebrow--pill {
  display: inline-flex; gap: .9em; align-items: center;
  border: 2px solid var(--ink); border-radius: 999px; padding: 6px 22px 4px;
  color: var(--ink); text-transform: none;
}
.eyebrow--pill b { font-weight: 400; letter-spacing: .04em; }
.kada .section-head h2 { font-size: clamp(40px, 5.4vw, 84px); }
.kada .lede { max-width: none; }

.svc {
  position: relative; margin-top: clamp(48px, 7vw, 120px);
  border-top: 2px solid var(--ink);
}
.svc__row {
  position: relative; isolation: isolate;
  display: grid; align-items: center; gap: 0 clamp(16px, 2.5vw, 40px);
  grid-template-columns: clamp(48px, 5vw, 90px) minmax(0, 1.4fr) minmax(0, 1fr);
  min-height: clamp(110px, 11.5vw, 150px);
  padding: 22px clamp(12px, 1.2vw, 20px);
  border-bottom: 2px solid var(--ink);
  transition: color .35s var(--ease);
}
/* the red fill sweeps in from the left */
.svc__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--red); transform-origin: left; scale: 0 1;
  transition: scale .45s var(--ease);
}
.svc__no { font: 500 clamp(17px, 1.4vw, 22px)/1 var(--mono); color: var(--red); transition: color .35s; }
.svc__title { font-size: clamp(26px, 2.8vw, 46px); line-height: 1.2; }
.svc__note { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.9; color: var(--ink-2); max-width: 46ch; transition: color .35s; }
.svc__img { display: none; }
.svc__pick { position: absolute; inset: 0; z-index: 1; border: 0; background: none; padding: 0; border-radius: 0; }
.svc__pick:focus-visible { outline-offset: -5px; }

.svc__row:is(:hover, :has(.svc__pick:focus-visible)) { color: var(--paper); }
.svc__row:is(:hover, :has(.svc__pick:focus-visible))::before { scale: 1 1; }
.svc__row:is(:hover, :has(.svc__pick:focus-visible)) :is(.svc__no, .svc__note) { color: var(--paper); }

/* picked for the bill: the number becomes a check */
.svc__row:has([aria-pressed="true"]) .svc__no { font-size: 0; }
.svc__row:has([aria-pressed="true"]) .svc__no::before { content: "✓"; font-size: clamp(20px, 1.7vw, 26px); }

.svc__float {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  height: clamp(190px, 17vw, 260px); width: auto; max-width: clamp(190px, 17vw, 260px); object-fit: contain;
  filter: drop-shadow(0 26px 22px rgba(90, 50, 25, .28));
  opacity: 0; scale: .6; transition: opacity .3s var(--ease), scale .45s var(--ease);
  will-change: transform;
}
.svc__float.is-on { opacity: 1; scale: 1; }

/* no hover (phones, tablets): number + title on top, note under, a small Ello on the right */
@media (hover: none), (max-width: 959px) {
  .svc__float { display: none; }
  .svc__row {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no title img" ". note img";
    gap: 6px 14px; padding-block: 20px;
  }
  .svc__no { grid-area: no; }
  .svc__title { grid-area: title; }
  .svc__note { grid-area: note; }
  .svc__img { display: block; grid-area: img; height: 92px; width: auto; align-self: center; filter: drop-shadow(0 8px 8px rgba(90, 50, 25, .2)); }
}

/* ==========================================================================
   5. PROCESS — four hand-tilted cards with a hard ink shadow and a numbered badge; the launch card is red
   ========================================================================== */
.process { padding-block: clamp(70px, 9vw, 130px); }
.process .section-head h2 { font-size: clamp(40px, 5.4vw, 84px); }
.process .lede { max-width: none; }

.cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px);
  margin-top: clamp(40px, 5vw, 72px); padding-top: 14px;
}
.card:nth-child(1) { --tilt: -1deg; }
.card:nth-child(2) { --tilt: .8deg; }
.card:nth-child(3) { --tilt: -.6deg; }
.card:nth-child(4) { --tilt: 1deg; }
.card {
  position: relative; rotate: var(--tilt, 0deg);
  display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 36px) clamp(18px, 1.8vw, 28px) clamp(26px, 2.6vw, 40px);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: 8px 8px 0 var(--ink);
  transition: rotate .35s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { rotate: 0deg; translate: -3px -4px; box-shadow: 12px 12px 0 var(--ink); }
.card__no {
  position: absolute; left: -16px; top: -18px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; padding-top: 2px;
  background: var(--red); color: var(--paper); border: 3px solid var(--ink);
  font: 500 19px/1 var(--sans);
}
.card__img {
  height: clamp(150px, 14vw, 200px); width: auto; max-width: 100%; object-fit: contain; margin: 0 auto 26px;
  filter: drop-shadow(0 12px 10px rgba(90, 50, 25, .18));
}
.card h3 { font-size: clamp(22px, 1.9vw, 28px); margin-bottom: 12px; }
.card p { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.9; color: var(--ink-2); }

/* pinned (wide screens, set by main.js): the section is tall, the content sticks, cards rise in on scroll */
.process.is-pinned { padding-block: 0; height: calc(100svh + var(--pin-run, 140svh)); }
.process.is-pinned .process__pin {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 8px) 24px;
}
.process.is-pinned .cards { margin-top: clamp(28px, 4vh, 56px); }
.process.is-pinned .card__img { height: clamp(120px, 19vh, 200px); }
.process.is-pinned .card { will-change: transform, opacity; }

/* the launch: red, with a dot grid */
.card:last-child {
  background:
    radial-gradient(rgba(42, 29, 24, .16) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    var(--red);
  color: var(--paper);
}
.card:last-child p { color: var(--paper); }
.card:last-child .card__no { background: var(--ink); }

/* ==========================================================================
   6. FAQ — questions on a bill pad
   ========================================================================== */
.faq {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 80px); align-items: start;
  padding-block: clamp(90px, 11vw, 150px);
}
.faq .section-head { position: sticky; top: calc(var(--nav-h) + 32px); }
.pad {
  position: relative; background: var(--paper-2); border-radius: 4px 4px 12px 12px;
  padding: 34px clamp(18px, 3vw, 36px) 20px; box-shadow: var(--sh-tag);
}
/* perforated tear-off edge */
.pad::before {
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px;
  background: radial-gradient(circle at 8px 6px, var(--paper) 0 4px, transparent 4.5px) 0 0 / 16px 12px repeat-x;
}
.pad__head {
  display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink);
  font: 700 14px/1.2 var(--mono); color: var(--ink-3);
}
.qa { border-bottom: 1.5px dashed rgba(42, 29, 24, .28); }
.qa:last-child { border-bottom: 0; }
.qa summary {
  list-style: none; cursor: pointer; position: relative;
  font: 700 clamp(19px, 1.7vw, 24px)/1.5 var(--display); font-variation-settings: var(--soft);
  padding: 18px 52px 16px 0; transition: color .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 34px; height: 34px; margin-top: -17px;
  border: 2px solid var(--ink); border-radius: 50%; background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat,
    var(--paper);
  transition: rotate .3s var(--ease), background-color .2s;
}
.qa summary:hover { color: var(--red); }
.qa[open] summary::after {
  rotate: 135deg; border-color: var(--red); background:
    linear-gradient(var(--paper), var(--paper)) center / 12px 2px no-repeat,
    linear-gradient(var(--paper), var(--paper)) center / 2px 12px no-repeat,
    var(--red);
}
.qa p { padding: 0 52px 20px 0; color: var(--ink-2); font-size: 17px; max-width: 40em; }

/* ==========================================================================
   7. CONTACT — the bill
   ========================================================================== */
.contact { position: relative; overflow: hidden; padding-top: clamp(90px, 11vw, 150px); border-top: var(--rule); }
.contact__inner > .contact__copy { padding-bottom: clamp(60px, 8vw, 110px); }
.contact__inner { position: relative; z-index: 3; display: grid; grid-template-columns: 1.15fr .55fr .8fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.contact__copy .lede { margin-bottom: 34px; }
.contact__alt { margin-top: 28px; color: var(--ink-2); font-size: 16px; }
.contact__alt a { font-weight: 700; color: var(--ink); text-underline-offset: 4px; }
.contact__alt a:hover { color: var(--red); }

.bill {
  position: relative; background: var(--paper); border-radius: 4px; padding: 26px 22px 30px;
  box-shadow: var(--sh-tag), inset 0 0 0 1px rgba(42, 29, 24, .06); rotate: 1.5deg;
  font-family: var(--mono);
}
/* zigzag torn bottom */
.bill::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
  background: linear-gradient(-45deg, transparent 6px, var(--paper) 0) 0 0 / 12px 10px repeat-x,
              linear-gradient(45deg, transparent 6px, var(--paper) 0) 0 0 / 12px 10px repeat-x;
}
.bill__head { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 700 15px/1.3 var(--mono); }
.bill__list { counter-reset: bill; display: grid; gap: 2px; padding-top: 12px; }
.bill__list li { counter-increment: bill; display: flex; align-items: baseline; gap: 10px; font: 700 16px/1.6 var(--mono); }
.bill__list li::before { content: counter(bill, decimal-leading-zero); font-weight: 500; color: var(--ink-3); font-size: 14px; }
.bill__list li button {
  margin-left: auto; border: 0; background: none; color: var(--ink-3); font: 500 13px/1 var(--mono); padding: 6px; border-radius: 6px;
}
.bill__list li button:hover { color: var(--red); }
.bill__empty { padding-top: 12px; color: var(--ink-2); font: 400 15px/1.6 var(--sans); }
.bill__empty a { color: var(--red); font-weight: 700; }
.bill__line { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed rgba(42, 29, 24, .3); font: 700 15px/1.4 var(--mono); }
.bill__line span:last-child { color: var(--sea); }

.contact__ello { align-self: end; width: 100%; max-width: 280px; justify-self: center; margin-bottom: -14px; filter: var(--sh-cut); }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.footer { position: relative; background: var(--paper-2); padding-top: clamp(44px, 5vw, 72px); border-top: var(--rule); }
.footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px 48px; flex-wrap: wrap; padding-bottom: clamp(40px, 5vw, 64px); }
.footer__brand { display: grid; gap: 14px; }
.footer__brand p { color: var(--ink-2); font-size: 16px; }
.footer__logo { width: 180px; }
.footer__links { display: grid; gap: 4px; text-align: right; }
.footer__links a { font: 760 clamp(22px, 2vw, 30px)/1.45 var(--display); font-variation-settings: var(--soft); text-decoration: none; }
.footer__links a:hover { color: var(--red); }
.footer__owl { position: absolute; right: calc(var(--gutter) + 40px); top: -88px; width: 84px; }
.fine {
  margin: 0; padding: 14px var(--gutter) 16px; text-align: center;
  font: 500 13px/1.4 var(--mono); color: var(--leaf);
  background: var(--red-deep);
}

/* ==========================================================================
   FLOATING OWL
   ========================================================================== */
.owl {
  position: fixed; right: clamp(8px, 2vw, 28px); bottom: 0; z-index: 45;
  display: flex; align-items: flex-end; gap: 6px;
  transition: transform .45s var(--ease), opacity .3s;
}
.owl.is-hidden { transform: translateY(130%); opacity: 0; pointer-events: none; }
.owl__body { background: none; border: 0; padding: 0; width: 104px; height: 112px; display: grid; align-items: end; justify-items: center; }
.owl__body img { max-width: 100%; max-height: 100%; width: auto; transform-origin: 50% 100%; animation: bob 3.2s ease-in-out infinite; }
.owl[data-pose="hover"] .owl__body img { animation: hover 1.1s ease-in-out infinite; }
.owl[data-pose="peek"] .owl__body img { animation: none; }
.owl.is-swapping .owl__body img { animation: squash .35s var(--ease); }
@keyframes bob { 50% { transform: translateY(-3px) scaleY(1.02); } }
@keyframes hover { 50% { transform: translateY(-9px); } }
@keyframes squash { 0% { transform: scale(1.15, .8); } 60% { transform: scale(.94, 1.08); } 100% { transform: none; } }

/* Coconut speech bubble: 2px ink line, one sharp corner as the tail */
.owl__bubble {
  position: relative; max-width: 240px; margin-bottom: 70px;
  font: 600 17px/1.5 var(--display); font-variation-settings: var(--soft);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 18px 18px 4px 18px;
  padding: 10px 16px 8px;
  opacity: 0; scale: .6; transform-origin: 100% 100%;
  transition: opacity .25s, scale .35s var(--spring);
}
.owl__bubble.is-on { opacity: 1; scale: 1; }

/* --- 3D owl (js/owl3d.js) ---------------------------------------------------
   #owl moves into a full-page layer. Perched, it is absolutely positioned in page
   coordinates so it scrolls with its perch natively; flying, it switches to fixed.
   The module sets --c (canvas size), --h (owl height) and --fx/--fy (feet point). */
html.has-owl3d body { position: relative; }
.owl3d-layer { position: absolute; inset: 0; overflow: clip; pointer-events: none; z-index: 45; }
.owl.is-3d {
  position: absolute; left: 0; top: 0; right: auto; bottom: auto; display: block;
  width: var(--c); height: var(--c); pointer-events: none; transition: opacity .25s; will-change: transform;
}
.owl.is-3d.is-fixed { position: fixed; }
.owl.is-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; animation: owl3d-in .3s ease-out; }
@keyframes owl3d-in { from { opacity: 0; } }
.owl.is-3d .owl__body {
  position: absolute; left: calc(var(--fx) - var(--h) * .36); top: calc(var(--fy) - var(--h));
  width: calc(var(--h) * .72); height: var(--h); border-radius: 45%; pointer-events: auto;
}
.owl.is-3d .owl__body img { display: none; }
.owl.is-3d.is-perched::before {
  content: ""; position: absolute; left: calc(var(--fx) - var(--h) * .3); top: calc(var(--fy) - var(--h) * .035);
  width: calc(var(--h) * .6); height: calc(var(--h) * .07); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 29, 24, .3), transparent);
}
.owl.is-3d .owl__bubble {
  position: absolute; margin: 0; width: max-content; max-width: min(240px, 46vw);
  right: calc(var(--c) - var(--fx) + var(--h) * .38); bottom: calc(var(--c) - var(--fy) + var(--h) * .7);
}
.owl.is-3d.bubble-right .owl__bubble { right: auto; left: calc(var(--fx) + var(--h) * .38); transform-origin: 0 100%; border-radius: 18px 18px 18px 4px; }
.owl.is-3d.bubble-low .owl__bubble { bottom: auto; top: calc(var(--fy) - var(--h) * .6); }
.owl.is-3d.is-hidden { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
html.has-owl3d .footer__owl { visibility: hidden; }

/* --- 404 page ------------------------------------------------------------------ */
.notfound { min-height: 100svh; display: grid; place-items: center; padding: 40px var(--gutter); text-align: center; }
.notfound__inner { max-width: 560px; display: grid; justify-items: center; gap: 16px; }
.notfound__logo { width: 180px; margin-bottom: 8px; }
.notfound__owl { width: 140px; filter: var(--sh-cut); }
.notfound .eyebrow { margin: 0; }
.notfound .lede { margin: 0; }
.notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 12px 0 0; }

/* ==========================================================================
   REVEAL (set by JS). Uses transform, not translate: owl3d.js reads it to aim for where a perch will land.
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .hero__note { display: none; }
  /* the note is gone, so Ello moves right to leave the copy column clear */
  .hero__ello { left: 61%; }
}

@media (max-width: 959px) {
  :root { --nav-h: 64px; }
  .nav__links { display: none; }
  .lang { margin-left: auto; }
  .nav__menu { display: inline-block; }

  /* phones and tablets: copy flows at the top, Ello stands at the bottom */
  .hero {
    height: auto; min-height: 100svh; max-height: none; display: flex; flex-direction: column; align-items: center;
    padding: calc(var(--nav-h) + 22px) var(--gutter) 0; text-align: center;
  }
  .hero__eyebrow, .hero__title, .hero__title .t-left, .hero__title .t-right, .hero__left {
    position: relative; inset: auto; translate: none; width: auto; text-align: center;
  }
  .hero__eyebrow { white-space: normal; margin-bottom: 14px; animation-name: rise; }
  .hero__title { display: block; padding: 0; font-size: clamp(38px, 9.6vw, 64px); }
  .hero__title .t-left, .hero__title .t-right { display: block; }
  .hero__title .t-right em { display: inline; }
  .hero__left { margin: 18px 0 0; }
  .hero__sub { max-width: 34ch; margin: 0 auto 22px; font-size: 16px; }
  .hero__ello { position: relative; left: auto; bottom: auto; translate: none; height: auto; width: min(88%, 460px); margin-top: auto; padding-top: 18px; }
  @keyframes ello-in { from { opacity: 0; translate: 0 6%; } }
  .hero__scroll { display: none; }
  .ticker { margin-top: -28px; }

  .about { grid-template-columns: 1fr; }
  .about__art { max-width: 520px; margin-inline: auto; width: 100%; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }

  .faq { grid-template-columns: 1fr; }
  .faq .section-head { position: static; }

  .contact__inner { grid-template-columns: 1fr; }
  .contact__inner > .contact__copy { padding-bottom: 0; }
  .bill { max-width: 440px; rotate: 0deg; }
  .contact__ello { order: 3; width: min(60%, 240px); margin-top: 8px; }
  .footer__links { text-align: left; }
}

@media (max-width: 959px) and (max-height: 720px) {
  .hero__sub { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  /* the switcher shrinks to മ / EN so the logo, switcher and menu button fit one row */
  .lang a { padding-inline: 11px; }
  .lang__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lang__short { display: inline; }
  .eyebrow { font-size: 12.5px; }
  .cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .idcard { width: 150px; right: -4px; }
  .owl__body { width: 78px; height: 86px; }
  .owl__bubble { font-size: 15px; max-width: 170px; margin-bottom: 50px; padding: 8px 12px 6px; }
  .qa summary, .qa p { padding-right: 46px; }
  .footer__links { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .footer__links a { font-size: 20px; }
  .footer__owl { width: 70px; top: -74px; right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .note-arrow path { stroke-dashoffset: 0; }
}